/**
 * WooCommerce — carrito, pago, mi cuenta y avisos, con la marca.
 *
 * En este sitio el carrito y el pago son los **bloques** de WooCommerce 11
 * (`wp:woocommerce/cart` y `wp:woocommerce/checkout`), no los shortcodes
 * clásicos: por eso casi todo va contra clases `wc-block-*`. «Mi cuenta» sí
 * es clásico (shortcode), y va en su propio apartado al final.
 *
 * ⚠ Todo en px, nunca rem: OceanWP declara `html { font-size: 62.5% }`.
 *
 * Sobre la especificidad: el CSS de los bloques y el de OceanWP se encolan
 * antes que este archivo, pero OceanWP además imprime CSS en línea del
 * Personalizador *después*. Por eso los selectores llevan delante
 * `body.ms-tienda`: sube la especificidad lo justo para ganar sin recurrir a
 * `!important` (la clase la añade `ms_tienda_body_class()`).
 */

/* -------------------------------------------------------------------------
 * 1. Base
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-cart,
body.ms-tienda .wc-block-checkout,
body.ms-tienda .wc-block-components-sidebar-layout {
	font-family: var(--ms-font-sans);
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-components-title,
body.ms-tienda .wc-block-cart__submit-container + *,
body.ms-tienda .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--ms-font-display);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--ms-foreground);
}

/* Los títulos de paso del pago («Contacto», «Envío», «Pago»). */
body.ms-tienda .wc-block-components-checkout-step__title {
	font-family: var(--ms-font-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-components-checkout-step__description,
body.ms-tienda .wc-block-components-checkout-step__heading-content {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ms-muted-foreground);
}

/* -------------------------------------------------------------------------
 * 2. Botones
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-components-button:not(.is-link) {
	border: 1px solid var(--ms-azul-ink);
	border-radius: 0;
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 18px 32px;
	transition: opacity 0.2s ease;
}

body.ms-tienda .wc-block-components-button:not(.is-link):hover {
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	opacity: 0.9;
}

body.ms-tienda .wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--ms-azul-ink);
	outline-offset: 3px;
	box-shadow: none;
}

/* Botón secundario (aplicar cupón, cambiar dirección…). */
body.ms-tienda .wc-block-components-button.outlined,
body.ms-tienda .wc-block-components-totals-coupon__button {
	background-color: transparent;
	color: var(--ms-azul-ink);
}

body.ms-tienda .wc-block-components-button.outlined:hover,
body.ms-tienda .wc-block-components-totals-coupon__button:hover {
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	opacity: 1;
}

/* Enlaces con forma de botón de texto. */
body.ms-tienda .wc-block-components-button.is-link,
body.ms-tienda .wc-block-cart-item__remove-link,
body.ms-tienda .wc-block-components-totals-shipping__change-address-button {
	color: var(--ms-muted-foreground);
	font-family: var(--ms-font-sans);
	font-size: 12px;
	text-underline-offset: 3px;
}

body.ms-tienda .wc-block-components-button.is-link:hover,
body.ms-tienda .wc-block-cart-item__remove-link:hover {
	color: var(--ms-azul-ink);
}

/* -------------------------------------------------------------------------
 * 3. Líneas del carrito
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-cart-items__header {
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--ms-tracking-eyebrow, 0.22em);
	text-transform: uppercase;
	color: var(--ms-muted-foreground);
	border-bottom: 1px solid var(--ms-border);
}

body.ms-tienda .wc-block-cart-items__row,
body.ms-tienda .wc-block-cart-items td {
	border-bottom: 1px solid var(--ms-border);
}

body.ms-tienda .wc-block-cart-item__image img {
	border: 1px solid rgba(121, 167, 179, 0.3);
	border-radius: 0;
}

body.ms-tienda .wc-block-components-product-name {
	font-family: var(--ms-font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ms-foreground);
	text-decoration: none;
}

body.ms-tienda .wc-block-components-product-name:hover {
	color: var(--ms-azul-ink);
}

body.ms-tienda .wc-block-components-product-metadata,
body.ms-tienda .wc-block-components-product-metadata__description {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ms-muted-foreground);
}

/* El precio nunca es el verde de OceanWP: es el azul de la línea. */
body.ms-tienda .wc-block-components-product-price,
body.ms-tienda .wc-block-components-product-price__value,
body.ms-tienda .wc-block-formatted-money-amount {
	font-family: var(--ms-font-sans);
	color: var(--ms-azul-ink);
}

body.ms-tienda .wc-block-components-product-price del,
body.ms-tienda .wc-block-components-product-price__regular {
	color: var(--ms-muted-foreground);
}

/* Selector de cantidad. */
body.ms-tienda .wc-block-components-quantity-selector {
	border: 1px solid rgba(121, 167, 179, 0.55);
	border-radius: 0;
	background-color: var(--ms-background);
}

body.ms-tienda .wc-block-components-quantity-selector::after {
	border-radius: 0;
	box-shadow: none;
}

body.ms-tienda .wc-block-components-quantity-selector__input,
body.ms-tienda .wc-block-components-quantity-selector__button {
	color: var(--ms-foreground);
	font-family: var(--ms-font-sans);
}

body.ms-tienda .wc-block-components-quantity-selector__button:hover {
	color: var(--ms-azul-ink);
}

/* -------------------------------------------------------------------------
 * 4. Totales y barra lateral
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-components-totals-item__label {
	font-family: var(--ms-font-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ms-muted-foreground);
}

body.ms-tienda .wc-block-components-totals-item__value {
	font-family: var(--ms-font-sans);
	color: var(--ms-foreground);
}

/*
 * La caja de totales: se pinta el contenedor UNA vez. Pintar cada
 * `.wc-block-components-totals-wrapper` deja la caja a rayas, porque el bloque
 * usa un wrapper por fila (cupón, subtotal, envío, total).
 */
body.ms-tienda .wc-block-cart__sidebar,
body.ms-tienda .wp-block-woocommerce-checkout-order-summary-block {
	padding: 8px 24px 24px;
	border: 1px solid rgba(121, 167, 179, 0.4);
	border-radius: 0;
	background-color: var(--ms-azul-soft);
}

body.ms-tienda .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.ms-tienda .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper {
	padding-inline: 0;
	border-color: rgba(121, 167, 179, 0.4);
	background: none;
}

body.ms-tienda .wc-block-cart__sidebar .wc-block-components-totals-item,
body.ms-tienda .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
	padding-inline: 0;
}

/* El título «Total del carrito», con la tipografía de los titulares. */
body.ms-tienda .wc-block-cart .wc-block-cart__totals-title,
body.ms-tienda .wc-block-components-sidebar .wc-block-cart__totals-title,
body.ms-tienda .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	display: block;
	margin: 16px 0 8px;
	font-family: var(--ms-font-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-components-totals-footer-item,
body.ms-tienda .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 22px;
	color: var(--ms-azul-ink);
}

body.ms-tienda .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--ms-font-display);
	font-size: 20px;
	color: var(--ms-foreground);
}

/* Cupón. */
body.ms-tienda .wc-block-components-panel__button {
	font-family: var(--ms-font-sans);
	font-size: 12px;
	letter-spacing: var(--ms-tracking-ui, 0.12em);
	text-transform: uppercase;
	color: var(--ms-azul-ink);
}

/* -------------------------------------------------------------------------
 * 5. Campos de formulario (pago)
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-components-text-input input[type="text"],
body.ms-tienda .wc-block-components-text-input input[type="email"],
body.ms-tienda .wc-block-components-text-input input[type="tel"],
body.ms-tienda .wc-block-components-text-input input[type="number"],
body.ms-tienda .wc-block-components-textarea,
body.ms-tienda .wc-block-components-select__container,
body.ms-tienda .wc-block-components-combobox-control input.components-combobox-control__input {
	border: 1px solid var(--ms-input);
	border-radius: 0;
	background-color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 14px;
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-components-text-input input:focus,
body.ms-tienda .wc-block-components-textarea:focus,
body.ms-tienda .wc-block-components-select__container:focus-within {
	border-color: var(--ms-azul-ink);
	outline: none;
	box-shadow: none;
}

body.ms-tienda .wc-block-components-text-input label,
body.ms-tienda .wc-block-components-select__label {
	font-family: var(--ms-font-sans);
	color: var(--ms-muted-foreground);
}

body.ms-tienda .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 0;
	border-color: var(--ms-input);
}

body.ms-tienda .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--ms-azul-ink);
	border-color: var(--ms-azul-ink);
}

body.ms-tienda .wc-block-components-checkbox__label,
body.ms-tienda .wc-block-components-radio-control__label {
	font-size: 14px;
	color: var(--ms-foreground);
}

/* Métodos de envío y de pago. */
body.ms-tienda .wc-block-components-radio-control-accordion-option,
body.ms-tienda .wc-block-components-shipping-rates-control__package {
	border: 1px solid var(--ms-border);
	border-radius: 0;
}

body.ms-tienda .wc-block-components-radio-control__option--checked-option-highlighted,
body.ms-tienda .wc-block-components-radio-control-accordion-option:has(input:checked) {
	background-color: var(--ms-azul-soft);
}

/* -------------------------------------------------------------------------
 * 6. Avisos
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-components-notice-banner {
	border-radius: 0;
	border-width: 1px;
	font-family: var(--ms-font-sans);
	font-size: 14px;
	line-height: 1.6;
}

body.ms-tienda .wc-block-components-notice-banner.is-info,
body.ms-tienda .wc-block-components-notice-banner.is-success {
	border-color: rgba(121, 167, 179, 0.5);
	background-color: var(--ms-azul-soft);
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-components-notice-banner.is-success > svg,
body.ms-tienda .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--ms-azul-ink);
	fill: var(--ms-background);
}

/* Avisos clásicos (los de la ficha de producto y «mi cuenta»). */
body.ms-tienda .woocommerce-message,
body.ms-tienda .woocommerce-info,
body.ms-tienda .woocommerce-error {
	margin: 0 0 32px;
	padding: 18px 24px;
	border: 1px solid rgba(121, 167, 179, 0.5);
	border-top-width: 1px;
	border-radius: 0;
	background-color: var(--ms-azul-soft);
	color: var(--ms-foreground);
	font-family: var(--ms-font-sans);
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
}

body.ms-tienda .woocommerce-message::before,
body.ms-tienda .woocommerce-info::before,
body.ms-tienda .woocommerce-error::before {
	color: var(--ms-azul-ink);
}

body.ms-tienda .woocommerce-error {
	border-color: var(--ms-destructive);
	background-color: var(--ms-secondary);
}

body.ms-tienda .woocommerce-error::before {
	color: var(--ms-destructive);
}

/* El «Ver carrito» que sale dentro del aviso. */
body.ms-tienda .woocommerce-message .button,
body.ms-tienda .woocommerce-info .button {
	background-color: transparent;
	border: 1px solid var(--ms-azul-ink);
	border-radius: 0;
	color: var(--ms-azul-ink);
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 10px 20px;
}

body.ms-tienda .woocommerce-message .button:hover,
body.ms-tienda .woocommerce-info .button:hover {
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
}

/* -------------------------------------------------------------------------
 * 7. Mi cuenta y otras pantallas clásicas
 * ---------------------------------------------------------------------- */

body.ms-tienda .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ms-border);
}

body.ms-tienda .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--ms-border);
}

body.ms-tienda .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 14px 0;
	color: var(--ms-foreground);
	font-family: var(--ms-font-sans);
	font-size: 12px;
	letter-spacing: var(--ms-tracking-ui, 0.12em);
	text-transform: uppercase;
	text-decoration: none;
}

body.ms-tienda .woocommerce-MyAccount-navigation li.is-active a,
body.ms-tienda .woocommerce-MyAccount-navigation a:hover {
	color: var(--ms-azul-ink);
}

body.ms-tienda .woocommerce-MyAccount-content {
	font-size: 14px;
	line-height: 1.75;
	color: var(--ms-muted-foreground);
}

/* Botones clásicos (mi cuenta, seguimiento de pedidos, tienda). */
body.ms-tienda .woocommerce a.button,
body.ms-tienda .woocommerce button.button,
body.ms-tienda .woocommerce input.button,
body.ms-tienda .woocommerce a.button.alt,
body.ms-tienda .woocommerce button.button.alt {
	border: 1px solid var(--ms-azul-ink);
	border-radius: 0;
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	padding: 16px 32px;
	transition: opacity 0.2s ease;
}

body.ms-tienda .woocommerce a.button:hover,
body.ms-tienda .woocommerce button.button:hover,
body.ms-tienda .woocommerce input.button:hover,
body.ms-tienda .woocommerce a.button.alt:hover,
body.ms-tienda .woocommerce button.button.alt:hover {
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	opacity: 0.9;
}

/* Campos clásicos (login, direcciones). */
body.ms-tienda .woocommerce form .form-row input.input-text,
body.ms-tienda .woocommerce form .form-row textarea,
body.ms-tienda .woocommerce form .form-row select {
	padding: 12px 16px;
	border: 1px solid var(--ms-input);
	border-radius: 0;
	background-color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 14px;
	color: var(--ms-foreground);
}

body.ms-tienda .woocommerce form .form-row input.input-text:focus,
body.ms-tienda .woocommerce form .form-row textarea:focus,
body.ms-tienda .woocommerce form .form-row select:focus {
	border-color: var(--ms-azul-ink);
	outline: none;
	box-shadow: none;
}

body.ms-tienda .woocommerce form .form-row label {
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--ms-tracking-eyebrow, 0.22em);
	text-transform: uppercase;
	color: var(--ms-muted-foreground);
}

/* Precios sueltos del catálogo clásico: nunca el verde de OceanWP. */
body.ms-tienda .woocommerce .price,
body.ms-tienda .woocommerce .price *,
body.ms-tienda .woocommerce .amount {
	color: var(--ms-azul-ink);
}

body.ms-tienda .woocommerce .price del,
body.ms-tienda .woocommerce .price del * {
	color: var(--ms-muted-foreground);
}

/* -------------------------------------------------------------------------
 * 8. Banda de título de OceanWP (carrito, pago, mi cuenta)
 *
 * En estas páginas sí se deja —da contexto— pero con los colores de la marca
 * en vez del gris del tema padre.
 * ---------------------------------------------------------------------- */

body.ms-tienda .page-header {
	border: 0;
	background-color: var(--ms-azul-soft);
	padding-block: clamp(32px, 4vw, 48px);
}

body.ms-tienda .page-header .page-header-title {
	font-family: var(--ms-font-display);
	font-size: clamp(30px, 3.6vw, 40px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--ms-foreground);
	text-transform: none;
}

body.ms-tienda .page-header .site-breadcrumbs,
body.ms-tienda .page-header .site-breadcrumbs a,
body.ms-tienda .page-header .site-breadcrumbs span {
	font-family: var(--ms-font-sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--ms-azul-ink);
}

body.ms-tienda .page-header .site-breadcrumbs a:hover {
	color: var(--ms-foreground);
}

/* -------------------------------------------------------------------------
 * 9. Ancho y respiración de las páginas de tienda
 * ---------------------------------------------------------------------- */

body.ms-tienda #content-wrap {
	padding-block: clamp(40px, 5vw, 64px);
}

body.ms-tienda .wc-block-cart,
body.ms-tienda .wc-block-checkout {
	width: 100%;
	max-width: var(--ms-container, 1152px);
	margin-inline: auto;
}

/*
 * Las dos columnas: productos a la izquierda, totales a la derecha.
 *
 * ⚠ Dos trampas de este bloque:
 *
 * 1. `.wc-block-cart` y `.wc-block-components-sidebar-layout` son EL MISMO
 *    elemento, no padre e hijo. Un selector `.wc-block-cart .wc-block-…-layout`
 *    no encuentra nada (y no falla: simplemente no hace nada). Va compuesto.
 * 2. El bloque reparte las columnas con `width: 65%` + `padding-right: 4.53%`,
 *    así que añadirle `gap` sin tocar los anchos hace que la suma pase del
 *    100% y la caja de totales se caiga debajo. Por eso aquí se define la
 *    rejilla entera: columna fluida + columna fija, y el aire lo pone el gap.
 */
body.ms-tienda .wc-block-cart__sidebar,
body.ms-tienda .wc-block-checkout__sidebar {
	box-sizing: border-box;
}

@media (min-width: 1000px) {

	body.ms-tienda .wc-block-components-sidebar-layout {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 64px;
	}

	body.ms-tienda .wc-block-components-sidebar-layout > .wc-block-components-main {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		min-width: 0;
		padding-right: 0;
		padding-left: 0;
	}

	body.ms-tienda .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
		flex: 0 0 380px;
		width: 380px;
		max-width: 380px;
		margin: 0;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* -------------------------------------------------------------------------
 * 10. Línea del carrito, más aire
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-cart-items__row {
	padding-block: 24px;
}

body.ms-tienda .wc-block-cart-item__image img {
	width: 110px;
	max-width: none;
}

body.ms-tienda .wc-block-cart-item__wrap .wc-block-components-product-price {
	font-size: 16px;
}

body.ms-tienda .wc-block-cart-item__total .wc-block-components-product-price,
body.ms-tienda .wc-block-cart-item__total .wc-block-formatted-money-amount {
	font-size: 18px;
}

/* El icono de la papelera, discreto hasta que se pasa por encima. */
body.ms-tienda .wc-block-cart-item__remove-link {
	color: var(--ms-muted-foreground);
	opacity: 0.7;
	transition: opacity 0.2s ease, color 0.2s ease;
}

body.ms-tienda .wc-block-cart-item__remove-link:hover {
	opacity: 1;
	color: var(--ms-azul-ink);
}

/* Carrito vacío. */
body.ms-tienda .wp-block-woocommerce-empty-cart-block {
	max-width: 768px;
	margin-inline: auto;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 11. Carrito vacío
 *
 * El bloque trae una carita triste en un círculo negro (una máscara SVG
 * pintada con `currentColor`). Se cambia la máscara por la bolsa de la marca
 * y el color por el azul de la línea.
 *
 * Ojo: los textos «Your cart is currently empty!» y «New in store» NO son
 * cadenas traducibles, son CONTENIDO de la página Carrito (bloques de
 * encabezado). Se cambian editando la página, no desde el tema.
 * ---------------------------------------------------------------------- */

body.ms-tienda .wp-block-woocommerce-empty-cart-block {
	max-width: 1152px;
	margin-inline: auto;
	padding-block: clamp(32px, 5vw, 56px) clamp(48px, 6vw, 72px);
	text-align: center;
}

body.ms-tienda .wc-block-cart__empty-cart__title {
	margin: 0;
	font-family: var(--ms-font-display);
	font-size: clamp(28px, 3.6vw, 38px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	height: 68px;
	margin: 0 auto 28px;
	background-color: var(--ms-azul);
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Los puntitos de separación, en el azul de la línea. */
body.ms-tienda .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	margin-block: 28px;
	color: var(--ms-azul);
	opacity: 1;
}

body.ms-tienda .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	color: var(--ms-azul);
	letter-spacing: 1.2em;
	padding-left: 1.2em;
	font-size: 18px;
}

/* «Novedades en la tienda» y demás encabezados del bloque. */
body.ms-tienda .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
	margin: 0 0 32px;
	font-family: var(--ms-font-display);
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--ms-foreground);
}

/* -------------------------------------------------------------------------
 * 12. Rejilla de productos de los bloques (novedades, destacados…)
 *
 * Misma tarjeta que el catálogo de Azul: fondo blanco, borde azul al 30%,
 * esquina viva y precio en azul —nunca el verde de OceanWP—.
 * ---------------------------------------------------------------------- */

body.ms-tienda .wc-block-grid__products {
	gap: 24px;
	margin: 0;
	padding: 0;
}

body.ms-tienda .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 24px;
	border: 1px solid rgba(121, 167, 179, 0.3);
	background-color: var(--ms-card);
	text-align: left;
}

body.ms-tienda .wc-block-grid__product-image {
	margin: 0 0 20px;
}

body.ms-tienda .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

body.ms-tienda .wc-block-grid__product-title {
	margin: 0 24px 12px;
	font-family: var(--ms-font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ms-foreground);
}

body.ms-tienda .wc-block-grid__product-title a {
	color: inherit;
	text-decoration: none;
}

body.ms-tienda .wc-block-grid__product-price,
body.ms-tienda .wc-block-grid__product-price .woocommerce-Price-amount,
body.ms-tienda .wc-block-grid__product-price * {
	margin: 0;
	font-family: var(--ms-font-sans);
	font-size: 18px;
	color: var(--ms-azul-ink);
}

body.ms-tienda .wc-block-grid__product-price {
	margin: 0 24px auto;
	padding-bottom: 20px;
}

body.ms-tienda .wc-block-grid__product-price del,
body.ms-tienda .wc-block-grid__product-price del * {
	font-size: 14px;
	color: var(--ms-muted-foreground);
}

body.ms-tienda .wc-block-grid__product-add-to-cart {
	margin: 0 24px;
}

body.ms-tienda .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 1px solid var(--ms-azul-ink);
	border-radius: 0;
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

body.ms-tienda .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover {
	background-color: var(--ms-azul-ink);
	color: var(--ms-background);
	opacity: 0.9;
}