/*
Theme Name: Mercaxpress
Theme URI: https://mercaxpress.com
Description: Child theme of KiddieMart for the Mercaxpress store (Panama). Brand colors (Mercaxpress Blue + navy/amber), Poppins/Open Sans fonts, and the Mercaxpress logo. Keeps the purchased KiddieMart parent theme pristine so Catch Themes updates don't wipe our customizations.
Author: Mercaxpress
Template: kiddiemart
Version: 2.60.0
Requires PHP: 7.4
Text Domain: mercaxpress
*/

/* ============================================================
   Header logo — the Mercaxpress wordmark is horizontal, so size
   it properly and hide the redundant text site-title next to it.
   ============================================================ */
header .wp-block-site-logo img,
header img.custom-logo {
	width: clamp(150px, 15vw, 200px);
	height: auto;
	max-width: 100%;
}

/* Wordmark logo already spells "Mercaxpress" — hide the text title/tagline. */
header .wp-block-site-title,
header .wp-block-site-tagline {
	display: none !important;
}

/* Remove the promotional top strip (was the "$100 free shipping" bar). */
.wp-block-header-top {
	display: none !important;
}

/* Slim header + a crisp black divider line separating it from the page. */
.wp-block-header-default {
	border-bottom: 1px solid #0B1B34;
}

/* ============================================================
   Header layout — nav items on the LEFT, logo CENTERED, the
   search/account/cart icons on the RIGHT. The left (nav) and
   right (icons) groups each take an equal flexible third, so the
   fixed-width logo between them stays optically centered.
   ============================================================ */
.wp-block-main-header-container {
	align-items: center;
	flex-wrap: nowrap;
}
/* left third: nav (full menu on desktop, hamburger on mobile) — pinned left */
.wp-block-main-header-container > .wp-block-navigation {
	flex: 1 1 0;
	min-width: 0;
	justify-content: flex-start;
}
/* KiddieMart forces `justify-content:center !important` on the menu list
   (style.css:6407); override with !important + higher specificity so the
   items sit flush-left against the content edge. */
.wp-block-main-header-container > .wp-block-navigation .wp-block-navigation__container {
	justify-content: flex-start !important;
}
/* center: logo — natural width, kept optically centered by the equal side thirds */
.wp-block-main-header-container > .wp-header-logo {
	flex: 0 0 auto;
	justify-content: center;
}
/* right third: search + account + cart */
.wp-block-main-header-container > .wp-header-right {
	flex: 1 1 0;
	justify-content: flex-end;
}

/* ============================================================
   Mobile header (<=1199px = hamburger shown): the search moves INTO the
   hamburger menu; the header keeps only profile + cart, side by side.
   ============================================================ */
@media (min-width: 1200px) {
	/* Desktop: the in-menu search is redundant (search icon lives on the right). */
	.mx-nav-search { display: none !important; }
	/* Adding the (hidden) search made the nav's inner wrapper a 2-child flex box,
	   which shrank the menu <ul> and wrapped it. Let the <ul> reclaim full width. */
	.wp-block-main-header-container .wp-block-navigation__responsive-container-content { flex-wrap: nowrap; }
	.wp-block-main-header-container .wp-block-navigation__container {
		flex: 1 1 auto !important;
		flex-wrap: nowrap !important;
	}
}
@media (max-width: 1199px) {
	.wp-header-right .search-container { display: none !important; }
	.wp-header-right { flex-wrap: nowrap !important; gap: 8px; }
	/* ---- Hamburger overlay: clean, native-looking mobile menu ---- */
	.is-menu-open .wp-block-navigation__responsive-container-content { padding: 4px 4px 24px; }
	/* Left-align the menu (theme pushes items right) + full width, no flex gap. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100% !important;
		margin: 0 !important;
		gap: 0 !important;
		align-self: stretch !important;
		align-items: flex-start !important;
	}
	/* Search field: a proper rounded input at the top. */
	.mx-nav-search { display: block; width: 100%; margin: 2px 0 18px; }
	.mx-nav-search .wp-block-search__inside-wrapper {
		display: flex;
		align-items: center;
		border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
		border-radius: 12px;
		background: var(--wp--preset--color--background, #F8FAFC);
		padding: 2px 6px 2px 16px;
	}
	.mx-nav-search .wp-block-search__input {
		flex: 1;
		background: transparent !important;
		border: 0 !important;
		margin: 0 !important;
		padding: 12px 0 !important;
		font-size: 15px;
	}
	.mx-nav-search .wp-block-search__button {
		background: transparent !important;
		border: 0 !important;
		margin: 0 !important;
		padding: 8px !important;
		min-width: auto;
		color: var(--wp--preset--color--foreground, #0B1B34);
	}
	/* Top-level rows: full width, thin dividers, comfortable tap targets. */
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-top: 1px solid #EDF1F5;
	}
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child { border-bottom: 1px solid #EDF1F5; }
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		padding: 16px 2px !important;
		font-size: 16px;
		font-weight: 600;
		color: var(--wp--preset--color--foreground, #0B1B34);
	}
	/* Tienda submenu -> plain indented sub-list, not a floating dropdown card. */
	.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 0 10px !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 11px 2px 11px 22px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		color: var(--wp--preset--color--text-secondary, #475569) !important;
	}
	.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content {
		color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	}
}

/* "Tienda" dropdown — solid white card that opens on hover/focus. DESKTOP ONLY:
   on mobile the submenu renders inline as an indented sub-list (see the
   max-width:1199px block above), so the card look must not leak into the overlay. */
@media (min-width: 1200px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: #ffffff !important;
		border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
		border-radius: 10px;
		box-shadow: 0 12px 28px rgba(11, 27, 52, .14);
		padding: 6px;
		min-width: 200px;
	}
	/* Invisible "bridge" filling the gap between "Tienda" and its dropdown. Without
	   it the cursor crosses a dead zone (neither item nor menu is hovered) on the way
	   down, which drops the :hover and closes the menu. Spans the full card width so
	   diagonal moves toward the lower items stay covered too. */
	.wp-block-navigation .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 16px;
		background: transparent;
	}
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--foreground, #0B1B34) !important;
		border-radius: 6px;
		padding: 9px 14px;
		width: 100%;
	}
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--background, #F8FAFC);
		color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	}
}

/* ============================================================
   AJAX filtering — while the next set of products is fetched, dim the grid
   and show a spinner so the swap reads as intentional (no full page reload).
   ============================================================ */
main.site-main.mx-ajax-loading { position: relative; }
main.site-main.mx-ajax-loading ul.products {
	opacity: .4;
	pointer-events: none;
	transition: opacity .15s ease;
}
main.site-main.mx-ajax-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 180px;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	border: 3px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-top-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	border-radius: 50%;
	animation: mx-spin .7s linear infinite;
	z-index: 5;
}
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* ============================================================
   "También te podría gustar" — related-products carousel on the single
   product page. Cards reuse the shop-archive loop card (.woocommerce wrapper),
   laid out as a horizontal scroll-snap track with prev/next arrows.
   ============================================================ */
.mx-prodrow { max-width: 1200px; margin: 0 auto; }
.mx-prodrow__title {
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	color: var(--wp--preset--color--foreground, #0B1B34);
	margin: 0 0 26px;
}
.mx-prodrow .mx-carousel { display: flex; align-items: center; gap: 8px; }
/* The track IS a `ul.products`; beat the archive grid rules (higher specificity + !important). */
.mx-prodrow ul.products.mx-carousel__track {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
	/* 32 not 22: a card with many colour dots (the 6-colour mecedor fills 204 of
	   its 208px) otherwise sits almost flush against its neighbour. */
	gap: 32px !important;
	margin: 0 !important;
	padding: 4px 2px 14px !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(11, 27, 52, .2) transparent;
}
.mx-prodrow ul.products.mx-carousel__track > li.product {
	flex: 0 0 auto !important;
	/* 232 not 208: these carousel cards were 45px narrower than the shop-grid
	   cards (253px), so a colour row that has ~73px of slack on the shop page
	   ran edge-to-edge here (the 6-colour mecedor measured 204px of 208). */
	width: clamp(160px, 46vw, 232px) !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.mx-prodrow .mx-carousel__track::-webkit-scrollbar { height: 8px; }
.mx-prodrow .mx-carousel__track::-webkit-scrollbar-thumb { background: rgba(11, 27, 52, .18); border-radius: 4px; }
.mx-prodrow .mx-carousel__track::-webkit-scrollbar-track { background: transparent; }
.mx-carousel__nav {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	background: #fff;
	color: var(--wp--preset--color--foreground, #0B1B34);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(11, 27, 52, .12);
	transition: background .15s ease, opacity .15s ease;
}
.mx-carousel__nav:hover { background: var(--wp--preset--color--background, #F8FAFC); }
.mx-carousel__nav:disabled { opacity: .35; cursor: default; }
.mx-carousel__nav[hidden] { display: none !important; }
@media (max-width: 781px) {
	/* Touch scroll on mobile — hide the arrows, ease the snap. */
	.mx-carousel__nav { display: none !important; }
	.mx-prodrow ul.products.mx-carousel__track { scroll-snap-type: x proximity; }
}

/* ============================================================
   Price-filter labels — WooCommerce's price-filter block ships "Min. Price" /
   "Max. Price" untranslated on es_MX (the input aria-labels ARE localized). The
   block is React-rendered, so a JS text swap reverts on the next slider render;
   replace the visible text via CSS instead — immune to re-renders and WC updates.
   ============================================================ */
.wc-block-components-price-slider__label[for="minPriceInput"],
.wc-block-components-price-slider__label[for="maxPriceInput"] {
	font-size: 0 !important;
}
.wc-block-components-price-slider__label[for="minPriceInput"]::after,
.wc-block-components-price-slider__label[for="maxPriceInput"]::after {
	font-size: 16px;
	font-weight: 400;
}
.wc-block-components-price-slider__label[for="minPriceInput"]::after { content: "Precio mín."; }
.wc-block-components-price-slider__label[for="maxPriceInput"]::after { content: "Precio máx."; }

/* The price filter auto-applies via AJAX on slider/input change (swatches.js). The
   block is kept in "filter button" mode only to suppress its own full-page reload —
   hide the now-redundant button. */
.wp-block-woocommerce-price-filter .wc-block-components-filter-submit-button,
.wp-block-woocommerce-price-filter button[type="submit"] { display: none !important; }

/* ============================================================
   Cart & checkout — the theme's inner-header banner defaults to a 355px-tall
   cover, so the "Carrito"/"Finalizar compra" title floats in a huge empty band
   that buries the content. Slim it to a compact, professional page-title bar.
   ============================================================ */
.woocommerce-cart .header-media-inner-post .wp-block-cover,
.woocommerce-checkout .header-media-inner-post .wp-block-cover {
	min-height: 0 !important;
	padding-top: 38px !important;
	padding-bottom: 38px !important;
}
.woocommerce-cart .header-media-inner-post h1,
.woocommerce-checkout .header-media-inner-post h1 {
	font-size: clamp(1.9rem, 3.4vw, 2.35rem) !important;
	margin: 0 !important;
}
/* Trim the theme's ~79px content top-padding so the cart sits close under the bar. */
.woocommerce-cart main.wp-block-group,
.woocommerce-checkout main.wp-block-group {
	padding-top: 40px !important;
}

/* ============================================================
   Homepage hero carousel — 3 category slides (Bebé / Maternidad / Ferretería).
   Full-bleed banner (subjects right, text on the left "safe zone"); autoplay,
   dots, arrows, swipe. Replaces the KiddieMart demo hero.
   ============================================================ */
.mx-hero-wrap { margin: 0 !important; padding: 0 !important; }
/* El banner mide 1672px. Hasta ahí se ve de BORDE A BORDE y pegado a la
   cabecera, como siempre. Solo cuando la pantalla es más ancha que eso —el
   punto en que habría que estirar la imagen— se enmarca: aparece aire
   arriba, márgenes laterales que crecen desde 0 con el ancho, esquinas
   redondeadas y una sombra suave. Así el cambio ocurre únicamente donde
   hacía falta y no toca los tamaños normales. */
@media (min-width: 1673px) {
	.mx-hero-wrap {
		padding: 28px clamp(0px, calc((100vw - 1672px) / 2), 48px) 0 !important;
	}
	.mx-hero {
		max-width: 1672px;
		margin-inline: auto;
		border-radius: 22px;
		box-shadow: 0 18px 40px -28px rgba(11, 27, 52, .45);
	}
}
.mx-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #eaf1fb;
}
.mx-hero__track {
	display: flex;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.mx-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	/* La proporción del banner manda: la escena se ve entera, siempre. El
	   ancho lo acota .mx-hero, así que nunca hay que recortar ni rellenar. */
	aspect-ratio: 1672 / 941;
	overflow: hidden;
}
.mx-hero__pic { display: contents; }
.mx-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	z-index: 1;
}
.mx-hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	/* El texto se posiciona PROPORCIONAL al ancho del hero, igual que la
	   imagen (cover). Con un contenedor centrado de 1240px, en monitores
	   anchos el texto quedaba montado sobre los productos: la imagen escala
	   con el viewport y el texto no. 11% ≈ los 164px del diseño a 1440. */
	padding: 0 4% 0 clamp(22px, 11%, 300px);
	display: flex;
	align-items: center;
}
.mx-hero__text { max-width: min(42%, 560px); }
.mx-hero__title {
	font-size: clamp(1.9rem, 3.8vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--foreground, #0B1B34);
	margin: 0 0 14px;
}
.mx-hero__sub {
	font-size: clamp(.98rem, 1.35vw, 1.2rem);
	line-height: 1.5;
	color: #46536b;
	margin: 0 0 26px;
	max-width: 32ch;
}
.mx-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff !important;
	font-weight: 700;
	font-size: clamp(.92rem, 1.05vw, 1.02rem);
	padding: 14px 30px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(11, 107, 255, .28);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mx-hero__cta:hover { background: #0a5ad6; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11, 107, 255, .34); }
.mx-hero__cta span { font-size: 1.15em; }
.mx-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	color: #0B1B34;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(11, 27, 52, .16);
	z-index: 3;
	transition: background .15s ease;
}
.mx-hero__arrow:hover { background: #fff; }
.mx-hero__arrow--prev { left: 18px; }
.mx-hero__arrow--next { right: 18px; }
.mx-hero__dots {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 9px;
	z-index: 3;
}
.mx-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 27, 52, .28);
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
	/* On mobile the dots sit over the portrait art rather than below it, so they
	   can land on a dark subject (the maternity leggings) — a hairline light ring
	   keeps them readable on any slide. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}
.mx-hero__dot.is-active { background: var(--wp--preset--color--brand-blue, #0B6BFF); width: 26px; border-radius: 5px; }

/* Ultra-ancho: contener el lienzo para que el recorte vertical (max-height
   820px sobre un aspect 16:9) nunca llegue a decapitar los productos. */
@media (min-width: 2100px) {
	.mx-hero { max-width: 2100px; margin: 0 auto; }
}

/* Mobile: phones get purpose-built 4:5 PORTRAIT banners (products centred and
   large, clean gradient across the top third), so the text goes back to an
   OVERLAY anchored to that top zone. Previously the landscape banner was
   letterboxed into a short strip with the text stacked above it in a flat
   colour block — the products ended up tiny and half the frame was the empty
   "safe zone" that only exists for the desktop overlay. */
@media (max-width: 768px) {
	.mx-hero__slide { aspect-ratio: 4 / 5; max-height: none; }
	.mx-hero__img { object-position: center; }
	.mx-hero__inner {
		max-width: none;
		padding: clamp(20px, 6vw, 38px) 20px 0;
		align-items: flex-start;   /* sit in the clean top third */
		text-align: center;
	}
	.mx-hero__text { max-width: none; margin: 0 auto; }
	.mx-hero__sub { margin-left: auto; margin-right: auto; }
	.mx-hero__arrow { display: none; }
	.mx-hero__dots { bottom: 12px; }
}

/* ============================================================
   Branded footer (navy) — keep text, headings and links legible.
   ============================================================ */
.mercax-footer,
.mercax-footer :is(h1, h2, h3, h4, h5, h6),
.mercax-footer a,
.mercax-copyright,
.mercax-copyright a {
	color: #ffffff;
}

.mercax-footer a {
	text-decoration: none;
}

.mercax-footer a:hover {
	color: var(--wp--preset--color--brand-border);
	text-decoration: underline;
}

.mercax-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mercax-footer-list li {
	margin: 8px 0;
}

/* Enlaces legales en la barra de copyright (páginas legales, sep 2026) */
.mercax-copyright .mercax-legal-links { margin-top: 4px; }
.mercax-copyright .mercax-legal-links a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.mercax-copyright .mercax-legal-links a:hover { color: #fff; }

/* ============================================================
   Shop grid — uniform cards: images fully visible (no crop),
   titles/prices/buttons aligned across every row.
   ============================================================ */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	/* explicit row-gap beats the theme's more-specific `gap: 0 30px` (which left
	   0 vertical space, so buttons touched the next row's image) */
	column-gap: 28px !important;
	row-gap: 36px !important;
	margin: 0 0 32px !important;
	padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
}
/* Product image fills a 4:5 portrait card edge-to-edge (cover) — the premium
   catalog look. Non-4:5 sources crop to fill rather than letterbox. */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .wp-post-image {
	width: 100% !important;
	aspect-ratio: 4 / 5;
	height: auto !important;
	object-fit: cover !important;
	background: #f2f2f2;
	margin: 0 0 14px !important;
	border-radius: 12px;
}
/* Baby (Boogy) product shots are square (1:1). Keep the SAME 4:5 card box as
   maternity so every row's titles/prices/buttons stay aligned, but show the
   square image in full (contain, no crop) on white — the near-white product
   background blends seamlessly, so it just reads as a product with breathing room. */
.woocommerce ul.products li.product.product_cat-bebe img,
.woocommerce ul.products li.product.product_cat-bebe .wp-post-image {
	object-fit: contain !important;
	background: #ffffff;
}
/* Ferretería shots are wide/landscape (fan + solar panel + bulbs, the compressor
   case, the square turbo fan), so `cover` in the 4:5 portrait card chopped the sides
   off. Same fix as baby: show the whole product (contain) on white. */
.woocommerce ul.products li.product.product_cat-ferreteria img,
.woocommerce ul.products li.product.product_cat-ferreteria .wp-post-image {
	object-fit: contain !important;
	background: #ffffff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.7em;      /* reserve two lines so prices/buttons align */
	font-size: 16px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;   /* cap long titles at two lines -> every title same height */
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Price + colour dots on one line, below the title. */
.mx-price-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* price + dots grouped together on the left */
	gap: 12px;
	margin: 2px 0 14px;
	min-height: 30px;
}
.woocommerce ul.products li.product .mx-price-row .price { margin: 0; display: block; }
/* Pin the button to the bottom of every card */
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin-top: auto !important;
	align-self: flex-start;
}
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .woocommerce ul.products { grid-template-columns: 1fr !important; } }

/* ---- Archive color dots (inline, to the right of the price; click swaps image) ---- */
.mx-archive-swatches { display: flex; align-items: center; justify-content: flex-start; gap: 6px; flex-wrap: wrap; margin: 0; }
.mx-dot {
	width: 18px; height: 18px; border-radius: 50%; padding: 0;
	border: 2px solid #fff; box-shadow: 0 0 0 1px #cfd6e0;
	background: var(--c, #ccc); cursor: pointer; transition: transform .1s;
}
.mx-dot:hover { transform: scale(1.15); }
.mx-dot.active { box-shadow: 0 0 0 2px var(--wp--preset--color--brand-blue, #0B6BFF); }

/* ---- Single product page swatches ---- */
.mx-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.mx-swatch { cursor: pointer; padding: 0; background: #fff; border: 1px solid #cfd6e0; line-height: 1; }
.mx-swatches--color .mx-swatch {
	width: 34px; height: 34px; border-radius: 8px;
	background: var(--c, #eee); border: 2px solid #fff; box-shadow: 0 0 0 1px #cfd6e0;
}
.mx-swatches--color .mx-swatch.active { box-shadow: 0 0 0 2px var(--wp--preset--color--brand-blue, #0B6BFF); }
.mx-swatch--label, .mx-swatch--pill {
	width: auto; height: auto; border-radius: 8px; padding: 8px 14px;
	font-size: 14px; box-shadow: none; color: var(--wp--preset--color--foreground, #111827);
}
.mx-swatch--pill.active, .mx-swatch--label.active {
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
	font-weight: 600;
}
/* the now-redundant native dropdown is hidden by JS; hide its row label spacing gracefully */
.mx-has-swatches .variations td.value select { display: none; }
/* A colour is always preselected, so there is nothing to "Clear". */
.woocommerce .reset_variations { display: none !important; }

.mx-dot { position: relative; }

/* ---- Archive cart control: "Añadir" button <-> −/qty/+ stepper ----
   Both states live in the same `.mx-cartctl` shell, pinned to the card bottom
   with a fixed min-height so swapping between them never shifts the grid. */
.mx-cartctl {
	margin-top: auto !important;
	align-self: flex-start;
	display: flex;
	align-items: center;
	/* Matches the natural height of the "Añadir al carrito" button, so swapping
	   it for the (slightly shorter) stepper never nudges the card bottom. */
	min-height: 53px;
}
.woocommerce ul.products li.product .mx-cartctl > .button { margin: 0 !important; }
.mx-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff;
	box-shadow: 0 1px 3px rgba(11, 27, 52, .18);
}
.mx-qty__btn {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.mx-qty__btn:hover { background: rgba(255, 255, 255, .34); }
.mx-qty__btn:active { transform: scale(.92); }
.mx-qty__btn svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* At qty 1 the "minus" becomes a trash — one more tap removes the line. */
.mx-qty__dec.is-remove:hover { background: #DC2626; }
.mx-qty__n {
	min-width: 32px;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---- Product page: the same stepper, mirroring the live cart quantity ----
   Once the selected item is in the cart we hide WooCommerce's native quantity
   box + "Añadir" button and show the stepper, so "how many I have" is stated
   the same way here as on the cards (rather than a box that means "how many
   to add", which silently double-counts). */
.mx-cartctl--single {
	margin-top: 0 !important;
	min-height: 0;
	display: inline-flex;
}
.mx-single-cart.mx-in-cart .quantity,
.mx-single-cart.mx-in-cart .single_add_to_cart_button {
	display: none !important;
}
.mx-qty--lg { padding: 6px; gap: 4px; }
.mx-qty--lg .mx-qty__btn { width: 44px; height: 44px; }
.mx-qty--lg .mx-qty__btn svg { width: 20px; height: 20px; }
.mx-qty--lg .mx-qty__n { min-width: 44px; font-size: 17px; }

/* ---- Floating cart bubble (bottom-right, follows scroll; hidden when empty) ---- */
.mx-cartbubble {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 950;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 6px 22px rgba(11, 27, 52, .3);
	transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
}
.mx-cartbubble:hover { transform: translateY(-2px) scale(1.05); }
.mx-cartbubble svg {
	width: 26px; height: 26px;
	fill: none; stroke: currentColor;
	stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mx-cartbubble__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 23px;
	height: 23px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-amber, #F59E0B);
	color: #111827;
	font-size: 12px;
	font-weight: 700;
	line-height: 23px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.mx-cartbubble--empty {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(.7);
}
/* ---- "Agregado ✓ · Ver carrito": short toast after the second add of the
   visit (the first opens the drawer). On phones it sits ABOVE the bubble row
   (WhatsApp + cart, 58 px at 22 px from the edge), full width: beside them it
   does not fit without overlapping at 390 px. ---- */
.mx-toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 92px;
	z-index: 951;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: 360px;
	padding: 12px 16px;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 8px 24px rgba(11, 27, 52, .28);
	--mx-toast-x: 0px;
	opacity: 0;
	visibility: hidden;
	transform: translate(var(--mx-toast-x), 8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.mx-toast.is-visible { opacity: 1; visibility: visible; transform: translate(var(--mx-toast-x), 0); }
/* While the cookie sheet is up it owns the bottom of the phone screen; ride on
   top of it exactly like the bubbles do (same --mx-cookies-h, set by mx-cookies.js). */
@media (max-width: 781px) {
	body.mx-cookies-open .mx-toast { bottom: calc(var(--mx-cookies-h, 0px) + 84px); }
}
/* Wider than a phone: centre the pill instead of stretching it. */
@media (min-width: 561px) {
	.mx-toast { left: 50%; right: auto; --mx-toast-x: -50%; }
}
.mx-toast__link {
	color: var(--wp--preset--color--brand-amber, #F59E0B) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	font-weight: 700;
}
.mx-toast__link:hover { color: #fff !important; }
/* Desktop: the cookie box sits bottom-LEFT and the bubbles bottom-RIGHT, so the
   centred toast can drop to the bottom edge — except while the cookie box is
   up: between 782 and ~1225 px the centred pill lands under that box (it is
   z-index 9999, measured at 1024: toast 407–617 vs box 24–508), so ride above
   it, same --mx-cookies-h the phone rule uses. */
@media (min-width: 782px) {
	.mx-toast { bottom: 24px; }
	body.mx-cookies-open .mx-toast { bottom: calc(var(--mx-cookies-h, 0px) + 40px); }
}

@media (max-width: 560px) {
	.mx-cartbubble { right: 14px; bottom: 14px; width: 54px; height: 54px; }
}

/* ---- Sidebar categories: "Todas" + active/toggle ---- */
.wc-block-product-categories-list-item.mx-cat-all > a { font-weight: 600; }
.wc-block-product-categories-list-item.mx-current > a {
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
	font-weight: 700;
}

/* ============================================================
   Shop sidebar filters — rounded cards to match the rest of the
   site (they shipped as square hairline boxes with native checkboxes)
   ============================================================ */
/* Only the individual widgets get a card. `.wp-block-sidebar` is the container
   that HOLDS them — carding that too nested a card inside a card. */
.wp-block-column-sidebar .wp-block-widget {
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 16px !important;
	padding: 20px !important;
	margin: 0 0 16px !important;
	box-shadow: 0 4px 14px rgba(11, 27, 52, .04);
}
.wp-block-column-sidebar .wp-block-widget:last-child { margin-bottom: 0 !important; }
.wp-block-column-sidebar .wp-block-sidebar {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
/* Headings: the theme Title Cases Every Word ("Tipo De Producto"). */
.wp-block-column-sidebar h2,
.wp-block-column-sidebar h3,
.wp-block-column-sidebar .wp-block-heading {
	text-transform: none !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	margin: 0 0 14px !important;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
/* Search field: fill the card instead of sitting in a box within a box. */
.wp-block-column-sidebar .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 11px !important;
	background: var(--wp--preset--color--background, #F8FAFC);
	padding: 2px 4px 2px 12px;
	width: 100%;
}
.wp-block-column-sidebar .wp-block-search__input {
	border: 0 !important;
	background: transparent !important;
	padding: 10px 0 !important;
	font-size: 14px;
	min-width: 0;
}
.wp-block-column-sidebar .wp-block-search__button {
	background: transparent !important;
	border: 0 !important;
	padding: 8px !important;
	color: var(--wp--preset--color--text-secondary, #64748B);
}

/* ---- Type filter: multi-select rows (name left, count right) ---- */
.mx-type-widget { text-align: left; }
.mx-type-widget > .wp-block-heading { text-align: left; }
.mx-type-list { list-style: none; margin: 0; padding: 0; }
.mx-type-item { margin: 0 0 2px; }
.mx-type-label {
	display: flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
	line-height: 1.3;
	font-size: 14.5px;
	padding: 8px 10px;
	margin: 0 -10px;
	border-radius: 10px;
	transition: background .13s ease, color .13s ease;
}
.mx-type-label:hover { background: rgba(11, 107, 255, .06); }
/* Same painted-tick checkbox as the checkout/account forms. */
.mx-type-cb {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 0;
	padding: 0;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--brand-border, #CBD5E1);
	background: #fff;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}
.mx-type-cb:checked {
	background-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3.2 3.2 6.4-6.8'/%3E%3C/svg%3E");
	background-size: 76% 76%;
	background-position: center;
	background-repeat: no-repeat;
}
.mx-type-name { flex: 1 1 auto; }
.mx-type-count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary, #64748B);
	background: var(--wp--preset--color--background, #F1F5FB);
	border-radius: 999px;
	padding: 2px 9px;
}
.mx-type-label:hover .mx-type-name,
.mx-type-cb:checked ~ .mx-type-name { color: var(--wp--preset--color--brand-blue, #0B6BFF); font-weight: 600; }

/* ============================================================
   Floating WhatsApp bubble — every page, always visible.
   Sits LEFT of the cart bubble; the two share one bottom-right
   stack so they can never overlap, whatever the cart state.
   ============================================================ */
.mx-wabubble {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9998;              /* just under the cart bubble */
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: #fff;
	box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
	transition: transform .16s ease, box-shadow .16s ease, right .18s ease;
}
.mx-wabubble:hover { transform: translateY(-2px) scale(1.05); color: #fff; }
.mx-wabubble svg { width: 32px; height: 32px; fill: currentColor; }
/* When a cart bubble is on screen AND has items, step the WhatsApp one left so
   they sit side by side. `:has()` on body keeps this purely declarative — no JS
   needs to know about the pairing. */
body:has(.mx-cartbubble:not(.mx-cartbubble--empty)) .mx-wabubble { right: 92px; }

@media (max-width: 600px) {
	.mx-wabubble { right: 14px; bottom: 14px; width: 54px; height: 54px; }
	.mx-wabubble svg { width: 28px; height: 28px; }
	body:has(.mx-cartbubble:not(.mx-cartbubble--empty)) .mx-wabubble { right: 78px; }
}

/* ---- "Ask about your cart" button, under Proceder al pago ---- */
.mx-wa-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* border-box or `width:100%` plus padding overflows the checkout button above
	   it — the theme doesn't set it globally on <a>. min-height matches that
	   button's 60px exactly rather than hoping padding + line-height agree. */
	box-sizing: border-box;
	width: 100%;
	min-height: 60px;
	margin-top: 12px;
	padding: 10px 18px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #25D366;
	color: #128C4A !important;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	transition: background .15s ease, transform .1s ease;
}
.mx-wa-cart:hover { background: rgba(37, 211, 102, .09); }
.mx-wa-cart:active { transform: scale(.995); }
.mx-wa-cart svg { width: 20px; height: 20px; fill: #25D366; flex: none; }

/* ---- Contact header: the two facts on the right ---- */
.mx-contact-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(18px, 3vw, 34px);
	flex: none;
}
.mx-contact-facts__k {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #94A3B8);
	margin-bottom: 3px;
}
.mx-contact-facts__v {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
@media (max-width: 720px) {
	.mx-contact-facts { gap: 20px; }
}

/* ============================================================
   Results/sort row (Filtros button + result count + sort dropdown),
   wrapped into one flex row by swatches.js. Desktop: count left / sort right;
   mobile: Filtros left / sort right, plus a left filter drawer.
   ============================================================ */
.mx-sortrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 30px;   /* breathing room before the first product */
}
.mx-sortrow .woocommerce-result-count,
.mx-sortrow .woocommerce-ordering { float: none !important; margin: 0 !important; }
.mx-sortrow .woocommerce-ordering { width: auto !important; flex: 0 1 auto; }
.mx-sortrow .mx-filters-btn { flex: 0 0 auto; }
.mx-filters-btn,
.mx-filters-overlay,
.mx-drawer-close { display: none; }

@media (max-width: 781px) {
	/* The sidebar content is hidden by the theme on mobile — show it in our drawer. */
	.wp-block-column-sidebar .mobile-filters { display: block !important; }
	/* Filtros pill on the LEFT, a matching compact sort pill on the RIGHT
	   (justify-content:space-between pushes them apart) — the sort must size to
	   its content, not fill the row. */
	.mx-sortrow { flex-wrap: nowrap; }
	/* flex:0 1 auto -> sits at its natural (widest-option) width when there's room,
	   but shrinks to fit next to the Filtros pill on narrow phones instead of overflowing. */
	.mx-sortrow .woocommerce-ordering { flex: 0 1 auto; min-width: 0; }
	.mx-sortrow .woocommerce-ordering select.orderby {
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		-webkit-appearance: none;
		appearance: none;
		padding: 11px 34px 11px 15px !important;
		height: auto !important;
		border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
		border-radius: 8px !important;
		background-color: #fff !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B1B34' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right 12px center !important;
		background-size: 12px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: var(--wp--preset--color--foreground, #0B1B34) !important;
		line-height: 1 !important;
	}
	/* Filtros button (left of the sort dropdown). */
	.mx-filters-btn {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 11px 16px;
		border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
		border-radius: 8px;
		background: #fff;
		color: var(--wp--preset--color--foreground, #0B1B34);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		line-height: 1;
	}
	/* Hide the wordy result count on mobile so the row is just Filtros | Sort. */
	.mx-sortrow .woocommerce-result-count { display: none !important; }
	/* Theme's own in-sidebar filter button is redundant now. */
	.btn-mobile-filters { display: none !important; }

	/* Sidebar column -> off-canvas left drawer. */
	.wp-block-column-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		max-width: 86vw;
		z-index: 1001;
		background: #fff;
		padding: 56px 22px 32px;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .3s ease;
		box-shadow: 0 0 44px rgba(11, 27, 52, .18);
	}
	body.mx-filters-open .wp-block-column-sidebar { transform: translateX(0); }
	body.mx-filters-open { overflow: hidden; }

	.mx-filters-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(11, 27, 52, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
	}
	body.mx-filters-open .mx-filters-overlay { opacity: 1; visibility: visible; }

	.mx-drawer-close {
		display: block;
		position: absolute;
		top: 12px;
		right: 14px;
		width: 34px;
		height: 34px;
		border: 0;
		background: transparent;
		font-size: 30px;
		line-height: 1;
		color: var(--wp--preset--color--foreground, #0B1B34);
		cursor: pointer;
	}
}

/* Brand strip on the stores is display-only (not a filter) — no pointer/lift. */
.mx-brands-strip--static .mx-brand-chip { cursor: default; }
.mx-brands-strip--static .mx-brand-chip:hover { transform: none; }

/* Hide the theme's demo attribute filters (they target global attributes our
   catalog doesn't use, so they render empty). Search + Categories + Price stay. */
.wp-filter-by-size,
.wp-filter-by-color { display: none !important; }

/* ============================================================
   Brand logos — on the single product page + shop "Nuestras marcas" strip.
   ============================================================ */
.mx-brand-logo { display: inline-block; margin: 0 0 12px; }
.mx-brand-logo .mx-brand-logo-img {
	height: 44px !important;
	width: auto !important;
	max-width: 180px !important;
	object-fit: contain;
	display: block;
}

/* Light-blue shop banner (Tienda + subtitle), fading into the off-white shop.
   margin-top:0 so it sits flush against the header's black divider line. */
.mx-shop-header {
	background: linear-gradient(180deg, rgb(219, 233, 255) 0%, rgb(246, 250, 255) 100%);
	margin-top: 0 !important;
}
/* Brand archive: the brand logo, large and centered, instead of a text title. */
.mx-brand-hero-logo { display: flex; justify-content: center; margin: 0 0 14px; }
.mx-brand-hero-logo .mx-brand-hero-img {
	height: 92px !important;
	width: auto !important;
	max-width: min(340px, 80vw) !important;
	object-fit: contain;
	display: block;
}
.mx-brand-hero-logo .mx-brand-hero--angelina { height: 118px !important; }
/* Compact store header — tighten the title→subtitle gap and the brands strip
   so the banner reads sleek and modern instead of airy. */
.mx-shop-header > p { margin-top: 8px; }
.mx-brand-hero > p { margin-top: 6px; }
/* Brands strip blends into the shop below, tight to the subtitle above. */
.mx-brands-strip {
	background: transparent;
	margin-top: 20px;
	padding: 2px 20px clamp(14px, 2vw, 22px);
}
.mx-brands-title {
	text-align: center !important;
	margin: 0 auto 16px !important;   /* auto L/R centers the block on the page */
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #64748B);
}
.mx-brands-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(28px, 5vw, 66px);
}
.mx-brand-chip { display: inline-flex; align-items: center; transition: transform .15s ease; }
.mx-brand-chip:hover { transform: translateY(-2px); }
.mx-brands-strip .mx-brand-chip-img {
	height: clamp(38px, 4vw, 50px) !important;
	width: auto !important;
	max-width: 190px !important;
	object-fit: contain;
	display: block;
}
/* Angelina is a square-ish logo, so it reads smaller at the row height —
   give it more height (centered) so its visual weight matches the wordmarks. */
.mx-brands-strip .mx-brand-chip--angelina .mx-brand-chip-img { height: clamp(58px, 6vw, 74px) !important; }
.mx-brand-logo--angelina .mx-brand-logo-img { height: 62px !important; }

/* ============================================================
   Single-product share button — top-right of the summary column
   (patterns/product-share.php, handler in swatches.js). Absolutely positioned
   so the title keeps its natural flow; the title reserves room on the right
   so a long name never runs under the pill.
   ============================================================ */
.mx-product-summary { position: relative; }
/* 150px covers the pill in BOTH states ("Compartir" ~116px, "Copiado ✓" ~124px);
   the copied label is kept short on purpose so the pill barely grows. */
.mx-product-summary > .wp-block-post-title { padding-right: 150px; }
.mx-share {
	position: absolute;
	top: 4px;
	right: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--wp--preset--color--border-default-color, #E2E8F0);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--foreground, #0B1B34);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mx-share svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Feedback = icon swap (share glyph -> check) + blue tint + a short label swap
   ("Copiado ✓"); on phones the icon/tint is the ONLY visible cue (label is sr-only). */
.mx-share .mx-share__icon--done,
.mx-share--done .mx-share__icon--share { display: none; }
.mx-share--done .mx-share__icon--done { display: block; }
.mx-share:hover,
.mx-share:focus-visible {
	border-color: var(--wp--preset--color--text-link, #0B6BFF);
	color: var(--wp--preset--color--text-link, #0B6BFF);
	outline: none;
}
.mx-share--done {
	background: var(--wp--preset--color--primary, #EAF2FF);
	border-color: var(--wp--preset--color--text-link, #0B6BFF);
	color: var(--wp--preset--color--text-link, #0B6BFF);
}
@media (max-width: 781px) {
	/* Icon-only pill on phones: the label would eat title width. */
	.mx-product-summary > .wp-block-post-title { padding-right: 52px; }
	.mx-share { padding: 10px; gap: 0; }
	.mx-share .mx-share__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============================================================
   Single-product image gallery
   ============================================================ */

/* Prev / next arrows (FlexSlider directionNav, enabled via
   woocommerce_single_product_carousel_options) — an alternative to
   clicking the thumbnail strip. Disabled arrows (at the ends, or on
   single-image products) are hidden. */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 12px rgba(15, 23, 42, .16);
	color: #0f2f5c;
	font-size: 0;                 /* hide the "Previous"/"Next" text */
	line-height: 0;
	z-index: 6;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.woocommerce-product-gallery .flex-nav-prev a { left: 14px; }
.woocommerce-product-gallery .flex-nav-next a { right: 14px; }
.woocommerce-product-gallery .flex-direction-nav a::before {
	content: "";
	width: 11px;
	height: 11px;
	border-left: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 4px;             /* optical centering of the chevron */
}
.woocommerce-product-gallery .flex-nav-next a::before {
	transform: rotate(-135deg);
	margin-left: -4px;
}
.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: #fff;
	box-shadow: 0 4px 16px rgba(15, 23, 42, .22);
}
.woocommerce-product-gallery .flex-direction-nav a:active {
	transform: translateY(-50%) scale(.94);
}
/* Hide disabled arrows (first/last slide, and single-image galleries). */
.woocommerce-product-gallery .flex-direction-nav .flex-disabled { display: none; }

/* Fixed 1:1 gallery frame — for products flagged `_mx_square_gallery`
   (body.mx-square-gallery). Their image sets mix aspect ratios (a portrait
   lifestyle/infographic lead + square product shots), which otherwise makes
   the frame jump size when navigating. Lock every slide to the same square
   box and `contain` each image inside it. */
.mx-square-gallery .woocommerce-product-gallery .flex-viewport { height: auto !important; }
.mx-square-gallery .woocommerce-product-gallery__wrapper { height: auto !important; }
.mx-square-gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	height: auto !important;
}
.mx-square-gallery .woocommerce-product-gallery__image a {
	display: block;
	height: 100%;
}
.mx-square-gallery .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: #fff;
}

/* ============================================================
   Homepage: "Compra por categoría" tiles
   ============================================================ */
.mx-cats {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(38px, 5vw, 64px) 20px clamp(10px, 2vw, 18px);
}
.mx-cats__title {
	text-align: center;
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
}
.mx-cats__sub {
	text-align: center;
	margin: 0 0 clamp(22px, 3vw, 34px);
	color: var(--wp--preset--color--text-secondary, #64748B);
}
.mx-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 24px);
}
.mx-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 22px 14px 18px;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 16px;
	background: #fff;
	text-decoration: none !important;
	color: var(--wp--preset--color--foreground, #0B1B34);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mx-cat-tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	box-shadow: 0 10px 24px rgba(11, 27, 52, .1);
}
.mx-cat-tile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--background, #F8FAFC);
	overflow: hidden;
}
/* We use real product photos as the icons. A circular frame clips the CORNERS of
   a square photo, so inset the image to roughly the circle's inscribed square
   (~1/√2) and `contain` it — the whole product shows, nothing is cut off.

   The photos are shot on white (measured 254-255), which showed as an obvious
   white SQUARE inside the tinted circle. `mix-blend-mode: multiply` fixes that
   without touching the files: multiplying by the near-white circle colour is
   effectively a no-op for the product (~2% darker) but maps the white
   background onto the circle exactly, so the square edge disappears.
   NOTE this only works while the backdrop is LIGHTER than the photo's
   background — keep `.mx-cat-tile__media`'s background near-white. Any photo
   shot on a DARKER background (e.g. the 244-grey maternity studio shots) needs
   a white-background override in assets/images/categories/ instead. */
.mx-cat-tile__media img {
	width: 72%;
	height: 72%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.mx-cat-tile__name { font-weight: 600; font-size: 15px; text-align: center; line-height: 1.3; }
.mx-cat-tile__count { font-size: 13px; color: var(--wp--preset--color--text-secondary, #64748B); }

@media (max-width: 900px) { .mx-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
	.mx-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.mx-cat-tile__media { width: 76px; height: 76px; }
}

/* Homepage product row spacing (reuses the .mx-prodrow carousel styles). */
.mx-home-row { padding: clamp(30px, 4vw, 52px) 20px clamp(40px, 5vw, 66px); }

/* Lifestyle tiles (subject fills the frame on a non-white studio background):
   `multiply` can't erase a background darker than the circle, and the photo has
   no white margin to float in — so fill the circle with it instead. */
.mx-cat-tile--fill .mx-cat-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: normal;
}

/* ============================================================
   Category page header — split layout (text left, store banner right).
   Replaces the old centered .mx-shop-header title for store/type archives.
   ============================================================ */
.mx-cathead {
	margin: 0 !important;
	padding: clamp(14px, 2.2vw, 24px) 20px clamp(16px, 2.2vw, 24px);
	background: #fff;
}
.mx-cathead__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 33%) minmax(0, 67%);
	gap: clamp(22px, 3.5vw, 44px);
	align-items: center;
}
.mx-cathead__text { min-width: 0; }
.mx-cathead__kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
	margin-bottom: 12px;
}
.mx-cathead__title {
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	/* 1.1 not 1.02: a title that wraps to two lines (e.g. "Higiene y cuidado")
	   overlapped its own lines at the tighter value. */
	line-height: 1.1;
	color: var(--wp--preset--color--foreground, #0B1B34);
	margin: 0;
}
.mx-cathead__desc {
	margin: 16px 0 0;
	max-width: 340px;
	color: var(--wp--preset--color--text-secondary, #64748B);
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.6;
}
.mx-cathead__media {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	/* FIXED height + auto width so the box FILLS the wide (~67%) image column and
	   the 16:9 art cover-crops into a short, WIDE panoramic strip. (Do NOT use
	   aspect-ratio here — combined with a height cap it re-derives the width from
	   the capped height and the box never fills the column, so widening does
	   nothing.) Make it wider via the column split; taller via this height. */
	height: 340px;
	background: var(--wp--preset--color--background, #F1F3F6);
}
/* Absolutely positioned so the image ALWAYS fills the frame. `height:100%` alone
   fails wherever the frame's height is `auto` (the mobile aspect-ratio case): a
   percentage height can't resolve against an auto-height parent, so the img fell
   back to its natural 16:9 inside the 16:10 box and left a blank strip under it,
   which read as the photo being cut off. */
.mx-cathead__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;   /* default favours the top (Bebé/Maternidad subjects sit high) */
	display: block;
}
/* Ferretería: banner v3 keeps every product inside the central ~24-70% band with
   empty top & bottom fifths, so it fits the same 340px frame as the others — just
   centre the crop (default 30% would favour the top and drop the bottom margin). */
.mx-cathead--ferreteria .mx-cathead__img { object-position: center 50%; }
/* "Nuestras marcas" — brand logos under the description, left column. */
.mx-cathead__brands { margin-top: 22px; }
.mx-cathead__brands-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #64748B);
	margin-bottom: 10px;
}
.mx-cathead__brands-row {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.5vw, 30px);
	flex-wrap: wrap;
}
.mx-cathead__brand { display: inline-flex; align-items: center; }
/* !important: WooCommerce's `.woocommerce img { height:auto }` (0,1,1) out-specifies
   a plain class, which stretched these logos to full size (same fix used across the
   theme's brand imagery). */
.mx-cathead__brand-img {
	height: 34px !important;
	width: auto !important;
	max-width: 130px !important;
	object-fit: contain;
	display: block;
}
/* Angelina's mark is square-ish, so it reads small at the row height — nudge up.
   (the modifier class on the wrapper span is `mx-brand-chip--angelina`) */
.mx-brand-chip--angelina .mx-cathead__brand-img { height: 62px !important; }

/* No-image fallback (e.g. the orphaned /tienda/ shop page): centered text. */
.mx-cathead--noimg .mx-cathead__inner { grid-template-columns: 1fr; text-align: center; }
.mx-cathead--noimg .mx-cathead__desc { max-width: none; margin-left: auto; margin-right: auto; }
.mx-cathead--noimg .mx-cathead__brands-row { justify-content: center; }

/* Stack on tablet/mobile — text above, banner below. */
@media (max-width: 900px) {
	.mx-cathead__inner { grid-template-columns: 1fr; gap: 18px; }
	.mx-cathead__title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
	.mx-cathead__desc { max-width: none; }
	/* Match the artwork's own 16:9 on mobile so the WHOLE banner shows — the
	   desktop panoramic crop only works because the frame is short and wide. */
	.mx-cathead__media { height: auto; aspect-ratio: 16 / 9; }
	.mx-cathead__brands { margin-top: 18px; }
}

/* ============================================================
   Live search — navbar modal + hamburger results (mx-search.js)
   ============================================================ */
/* Kill the theme's old square search popup for good; the icon now opens our modal. */
.search-container .search-popup { display: none !important; }

.mx-searchov {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: none;
}
.mx-searchov.is-open { display: block; }
body.mx-search-open { overflow: hidden; }
.mx-searchov__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 27, 52, .45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.mx-searchov__panel {
	position: relative;
	margin: clamp(64px, 12vh, 130px) auto 0;
	width: min(640px, calc(100vw - 28px));
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba(11, 27, 52, .35);
	overflow: hidden;
	animation: mx-search-in .18s ease;
}
@keyframes mx-search-in {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}
.mx-searchov__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 18px;
	border-bottom: 1px solid #EEF1F5;
	color: var(--wp--preset--color--text-secondary, #64748B);
}
.mx-searchov__input {
	flex: 1;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	font-size: 17px;
	padding: 16px 0;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-searchov__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mx-searchov__close {
	border: 0;
	background: var(--wp--preset--color--background, #F1F3F6);
	color: var(--wp--preset--color--foreground, #0B1B34);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.mx-searchov__close:hover { background: #E5E9F0; }
.mx-searchov__results {
	max-height: min(430px, 58vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mx-search-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 18px;
	text-decoration: none !important;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-search-row:hover { background: #F5F9FF; }
.mx-search-row img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #EEF1F5;
	border-radius: 10px;
	flex: 0 0 auto;
}
.mx-search-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-search-row__title {
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.mx-search-row__price { font-size: 13px; color: var(--wp--preset--color--text-secondary, #64748B); }
.mx-search-row__go { color: #B6BFCC; font-size: 22px; line-height: 1; }
.mx-search-empty {
	padding: 26px 18px;
	text-align: center;
	color: var(--wp--preset--color--text-secondary, #64748B);
	font-size: 14px;
}
.mx-search-loading { padding: 24px; display: flex; justify-content: center; }
.mx-search-spin {
	width: 22px;
	height: 22px;
	border: 3px solid #E2E8F0;
	border-top-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	border-radius: 50%;
	animation: mx-spin .7s linear infinite;
}

/* Hamburger overlay: results rendered under the search pill as tappable rows. */
.mx-nav-results { margin: -8px 0 14px; }
.mx-nav-results .mx-search-row { padding: 10px 2px; border-bottom: 1px solid #EDF1F5; }
.mx-nav-results .mx-search-row:hover { background: transparent; }
.mx-nav-results .mx-search-empty { text-align: left; padding: 12px 2px; }

/* ============================================================
   Store chooser — the old /tienda/ shop page is now "pick your store"
   ============================================================ */
.mx-chooser {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(34px, 5vw, 64px) 20px clamp(46px, 6vw, 80px);
}
.mx-chooser__title {
	text-align: center;
	margin: 0 0 8px;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-chooser__sub {
	text-align: center;
	margin: 0 0 clamp(26px, 4vw, 42px);
	color: var(--wp--preset--color--text-secondary, #64748B);
}
.mx-chooser__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.5vw, 28px);
}
.mx-chooser__card {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	text-decoration: none !important;
	color: var(--wp--preset--color--foreground, #0B1B34);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mx-chooser__card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	box-shadow: 0 16px 36px rgba(11, 27, 52, .14);
}
.mx-chooser__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #F1F3F6; }
.mx-chooser__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.mx-chooser__card:hover .mx-chooser__media img { transform: scale(1.04); }
.mx-chooser__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.mx-chooser__name { font-size: 20px; font-weight: 700; }
.mx-chooser__desc { font-size: 14px; color: var(--wp--preset--color--text-secondary, #64748B); line-height: 1.45; }
.mx-chooser__cta {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
}
.mx-chooser__arrow { font-size: 18px; transition: transform .16s ease; }
.mx-chooser__card:hover .mx-chooser__arrow { transform: translateX(4px); }
@media (max-width: 860px) {
	.mx-chooser__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ============================================================
   Contacto page — WhatsApp CTA + support form
   ============================================================ */
.mx-contact { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 4vw, 52px) 20px clamp(44px, 6vw, 72px); }
.mx-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.mx-contact__h {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-contact__lead { color: var(--wp--preset--color--text-secondary, #64748B); line-height: 1.6; margin: 0 0 22px; }

/* WhatsApp button — brand green with the logo */
.mx-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: #25D366;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 24px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mx-wa-btn:hover { background: #1EBE5B; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, .42); }
.mx-wa-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }

.mx-contact__channels { list-style: none; margin: 26px 0 0; padding: 0; }
.mx-contact__channels li {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 12px 0;
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}
.mx-contact__channels li:last-child { border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0); }
.mx-contact__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #64748B);
}
.mx-contact__channels a { color: var(--wp--preset--color--foreground, #0B1B34); text-decoration: none; font-weight: 500; }
.mx-contact__channels a:hover { color: var(--wp--preset--color--brand-blue, #0B6BFF); }

/* Form */
.mx-contact-form {
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 30px);
	box-shadow: 0 8px 26px rgba(11, 27, 52, .06);
}
.mx-contact-form .mx-contact__h { margin-bottom: 18px; }
.mx-field { display: block; margin-bottom: 15px; }
.mx-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--wp--preset--color--foreground, #0B1B34); }
.mx-field > span em { font-weight: 400; font-style: normal; color: var(--wp--preset--color--text-secondary, #94A3B8); }
.mx-field input, .mx-field textarea {
	width: 100%;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--wp--preset--color--foreground, #0B1B34);
	background: var(--wp--preset--color--background, #F8FAFC);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mx-field input:focus, .mx-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11, 107, 255, .12);
}
.mx-field textarea { resize: vertical; min-height: 120px; }
.mx-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.mx-contact-form__submit {
	width: 100%;
	border: 0;
	border-radius: 11px;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.mx-contact-form__submit:hover { background: #0a5ad6; }
.mx-contact-form__submit:active { transform: scale(.99); }
.mx-contact-form__submit:disabled { opacity: .7; cursor: default; }
.mx-contact-form__status { margin: 12px 0 0; font-size: 14px; min-height: 1px; }
.mx-contact-form__status.is-ok { color: #16A34A; font-weight: 600; }
.mx-contact-form__status.is-error { color: #DC2626; font-weight: 600; }

@media (max-width: 820px) {
	.mx-contact__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   Static pages (Contacto, Ofertas…) — compact title bar
   The parent theme renders the page title in a 355px `wp:cover`; for a
   one-word title that's a huge empty band that pushes the content below the
   fold. Slim it to a title bar, matching the cart/checkout treatment.
   ============================================================ */
body.mx-slim-header .header-media-inner-post .wp-block-cover {
	min-height: 0 !important;
	padding: clamp(26px, 3.4vw, 42px) 0 !important;
}
body.mx-slim-header .header-media-inner-post .wp-block-post-title {
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	line-height: 1.15;
}
/* Theme adds ~79px of content padding under the header; the slim bar needs less. */
body.mx-slim-header main.wp-block-group {
	padding-top: 26px !important;
}
/* The contact section carries its own generous top padding — trim it now that
   the header above is compact, so the content sits high on the page. */
body.mx-slim-header .mx-contact { padding-top: clamp(14px, 2vw, 26px); }

/* ============================================================
   Empty cart — modern state (replaces the frowny-face + dark button)
   Reuses the soft-circle icon treatment from the category tiles and the
   store-card language from the /tienda/ chooser.
   ============================================================ */
/* The theme injects a frowny-face via ::before on the old title class. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { content: none !important; }

.mx-emptycart {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(26px, 4vw, 48px) 20px clamp(10px, 2vw, 20px);
	text-align: center;
}
.mx-emptycart__icon {
	width: 84px;
	height: 84px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--background, #F1F5FB);
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
}
.mx-emptycart__icon svg { width: 38px; height: 38px; }
.mx-emptycart__title {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-emptycart__sub {
	margin: 0 auto clamp(24px, 3.5vw, 34px);
	max-width: 440px;
	color: var(--wp--preset--color--text-secondary, #64748B);
	line-height: 1.6;
}
.mx-emptycart__stores {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.mx-emptycart__store {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 14px;
	background: #fff;
	text-decoration: none !important;
	color: var(--wp--preset--color--foreground, #0B1B34);
	font-weight: 600;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mx-emptycart__store:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	box-shadow: 0 10px 24px rgba(11, 27, 52, .1);
}
.mx-emptycart__store-media {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--background, #F1F3F6);
}
.mx-emptycart__store-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-emptycart__store-name { flex: 1; text-align: left; font-size: 15px; }
.mx-emptycart__store-go { color: var(--wp--preset--color--brand-blue, #0B6BFF); font-size: 17px; transition: transform .15s ease; }
.mx-emptycart__store:hover .mx-emptycart__store-go { transform: translateX(3px); }

/* The product row under the empty state: tighten its top padding. */
.wp-block-woocommerce-empty-cart-block .mx-prodrow { padding-top: clamp(18px, 2.5vw, 30px); }

@media (max-width: 640px) {
	.mx-emptycart__stores { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
}

/* Empty cart: drop the "Carrito" title banner — the empty state below already
   says what the page is, so the banner is dead weight. (Class is set in PHP for
   a flash-free first paint and kept in sync by swatches.js.) */
body.mx-cart-empty .header-media-inner-post { display: none !important; }
body.mx-cart-empty main.wp-block-group { padding-top: clamp(10px, 2vw, 24px) !important; }

/* ============================================================
   Cart page — modern layout
   The quantity control below is WooCommerce's shared
   `.wc-block-components-quantity-selector`, which renders in THREE places:
   the cart rows, the mini-cart drawer, AND the single-product page. Styling it
   here therefore keeps all three consistent in one pass.
   ============================================================ */

/* ---- Quantity stepper: rounded pill, circular ghost buttons ---- */
.wc-block-components-quantity-selector {
	display: inline-flex !important;
	/* !important is required: WooCommerce sets align-items:stretch with higher
	   weight, and stretch pins the 32px round buttons to the top of the taller
	   content box — they sit visibly high in the pill. */
	align-items: center !important;
	gap: 2px;
	width: auto !important;
	min-width: 0 !important;
	padding: 4px !important;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 999px !important;
	background: #fff !important;
	box-shadow: none !important;
	overflow: visible !important;
}
/* Woo draws separators with ::after on the container/buttons — remove them. */
.wc-block-components-quantity-selector::after,
.wc-block-components-quantity-selector::before,
.wc-block-components-quantity-selector__button::after,
.wc-block-components-quantity-selector__button::before { display: none !important; content: none !important; }

.wc-block-components-quantity-selector__button {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--wp--preset--color--background, #F1F5FB) !important;
	color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	font-size: 20px !important;
	font-weight: 600;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 1 !important;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	color: #fff !important;
}
.wc-block-components-quantity-selector__button:active:not(:disabled) { transform: scale(.92); }
.wc-block-components-quantity-selector__button:disabled { opacity: .38 !important; cursor: default; }
.wc-block-components-quantity-selector__input {
	width: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center;
	font-size: 15px !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--foreground, #0B1B34);
	box-shadow: none !important;
}

/* ---- Cart item rows ---- */
.wc-block-cart-items__row {
	padding: 20px 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--brand-border, #EEF1F5) !important;
}
.wc-block-cart-item__image img {
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--brand-border, #EEF1F5);
	background: #fff;
	object-fit: contain;
}
.wc-block-components-product-name {
	font-weight: 600 !important;
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
	text-decoration: none !important;
}
.wc-block-components-product-name:hover { color: var(--wp--preset--color--brand-blue, #0B6BFF) !important; }
/* Remove-item: quiet until hovered, then red. */
.wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--text-secondary, #94A3B8) !important;
	text-decoration: none !important;
	transition: color .15s ease;
}
.wc-block-cart-item__remove-link:hover { color: #DC2626 !important; }

/* ---- Order summary: a real card, with the coupon detached below it ----
   Same treatment as the checkout sidebar (see the checkout section): the summary
   block stops being the card, its parts each paint one slice of a continuous
   card, and the coupon — which WooCommerce renders ABOVE the subtotal and which
   can't be moved out of the block — reorders to last and gets a card of its own.
   The cart's children are already siblings, so no `display:contents` is needed. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	align-self: flex-start;
	position: sticky;
	top: 20px;
}
.wp-block-woocommerce-cart-order-summary-block {
	display: flex;
	flex-direction: column;
	background: transparent;
	/* WooCommerce puts a 1px bottom border on this block. Now that it's a bare
	   container rather than the card, that rule drew a stray rule across the page
	   under the coupon card. */
	border: 0 !important;
	filter: drop-shadow(0 6px 18px rgba(11, 27, 52, .06));
}
/* `!important` throughout: WooCommerce styles the heading as `h2.wc-block-cart__totals-title`
   (element + class), which out-specifies a plain class selector of ours. */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	background: #fff !important;
	border-left: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-right: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	padding-left: clamp(18px, 2.2vw, 26px) !important;
	padding-right: clamp(18px, 2.2vw, 26px) !important;
	margin: 0 !important;
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
	order: 0;
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 18px 18px 0 0 !important;
	padding-top: clamp(18px, 2.2vw, 26px) !important;
	padding-bottom: 10px !important;
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block { order: 1; }
/* Extra `.wp-block-woocommerce-cart` so this out-specifies the generic row rule
   further down and keeps its roomier bottom padding. */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	order: 2;
	border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 0 0 18px 18px !important;
	padding-bottom: clamp(16px, 2vw, 22px) !important;
	padding-left: clamp(18px, 2.2vw, 26px) !important;
	padding-right: clamp(18px, 2.2vw, 26px) !important;
}
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	order: 3;
	margin: 14px 0 0 !important;
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 14px !important;
	padding: 2px clamp(16px, 2vw, 20px) !important;
}
/* WooCommerce puts a rule above the checkout button; the card edges already
   separate things, so it just reads as a stray line under the coupon card. */
.wc-block-cart__sidebar .wc-block-cart__payment-options,
.wc-block-cart__sidebar .wc-block-cart__submit,
.wc-block-cart__sidebar .wc-block-cart__submit-container { border-top: 0 !important; }
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
	font-weight: 600;
	padding: 15px 0 !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block input {
	background: var(--wp--preset--color--background, #F8FAFC) !important;
	border-radius: 11px !important;
}
/* Row rhythm for the total lines. VERTICAL properties only — the `padding`
   shorthand also resets left/right, and since this rule sits later in the file
   with equal specificity it was winning the !important tie and stripping the
   card slices' side padding (that's what pushed "Total estimado" onto the border).
   The coupon is excluded outright: it's a separate card with its own padding. */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:not([class*="coupon"]) {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
.wc-block-cart__sidebar .wc-block-components-totals-item__label { color: var(--wp--preset--color--text-secondary, #64748B); }
.wc-block-cart__sidebar .wc-block-components-totals-footer-item {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.wc-block-cart__submit-button {
	border-radius: 12px !important;
	font-weight: 700 !important;
	padding: 16px !important;
	background: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	transition: background .15s ease, transform .1s ease;
}
.wc-block-cart__submit-button:hover { background: #0a5ad6 !important; }
.wc-block-cart__submit-button:active { transform: scale(.995); }

/* Buttons should read as written, not Title Cased ("Añadir Al Carrito"). */
.wc-block-cart__submit-button,
.wc-block-components-button,
.woocommerce ul.products li.product .button,
.mx-add,
.single_add_to_cart_button { text-transform: none !important; }

@media (max-width: 780px) {
	.wp-block-woocommerce-cart .wc-block-cart__sidebar { position: static; margin-top: 20px; }
}

/* ============================================================
   Cart header — title + live count + checkout step indicator
   (replaces the theme's decorative gradient title band)
   ============================================================ */
/* No background/border here: the header sits on the CONSTRAINED content width,
   so a white fill renders as a floating white rectangle against the page's grey.
   Let it sit on the page instead — the cart's own "PRODUCTO / TOTAL" rule below
   already provides the separation. */
.mx-carthead { background: transparent; }
.mx-carthead__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(22px, 3.2vw, 40px) 20px clamp(18px, 2.6vw, 28px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.mx-carthead__lead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mx-carthead__title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-carthead__count {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--text-secondary, #64748B);
	background: var(--wp--preset--color--background, #F1F5FB);
	padding: 4px 12px;
	border-radius: 999px;
}
/* Step indicator */
.mx-cartsteps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.mx-cartsteps__step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--text-secondary, #94A3B8);
	font-size: 14px;
	font-weight: 600;
}
/* connector line between steps */
.mx-cartsteps__step + .mx-cartsteps__step::before {
	content: "";
	width: clamp(18px, 3vw, 40px);
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand-border, #E2E8F0);
	margin-right: 4px;
}
.mx-cartsteps__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	background: var(--wp--preset--color--background, #F1F5FB);
	color: var(--wp--preset--color--text-secondary, #94A3B8);
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}
.mx-cartsteps__step.is-active { color: var(--wp--preset--color--foreground, #0B1B34); }
.mx-cartsteps__step.is-active .mx-cartsteps__num {
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff;
	box-shadow: 0 3px 10px rgba(11, 107, 255, .3);
}
/* Empty cart has its own layout — no header/steps there. */
body.mx-cart-empty .mx-carthead { display: none !important; }

@media (max-width: 720px) {
	.mx-carthead__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
	/* Numbered circles only on small screens — labels would wrap awkwardly. */
	.mx-cartsteps__label { display: none; }
	.mx-cartsteps { gap: 6px; }
}

/* ============================================================
   Mi cuenta — login / register (logged out) + dashboard (logged in)
   ============================================================ */
.woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---- Logged out: two cards side by side ---- */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce-account:not(.logged-in) .woocommerce .u-columns#customer_login {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 36px);
	float: none !important;
	width: auto !important;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 { float: none !important; width: auto !important; }
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.woocommerce-account form.login,
.woocommerce-account form.register {
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 18px !important;
	padding: clamp(20px, 2.6vw, 30px) !important;
	box-shadow: 0 8px 26px rgba(11, 27, 52, .06);
	margin: 0 !important;
}
/* Equal-height cards WITHOUT `height:100%` on the form. A percentage height on a
   grid item's child resolves against the row height, but the row height is itself
   derived from the children — Chrome resolved it from the SHORTER (login) card, so
   the taller register card overflowed its column and the footer clipped its bottom.
   Stretching a flex column has no such circularity. */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 { display: flex; flex-direction: column; min-width: 0; }
.woocommerce-account form.login,
.woocommerce-account form.register { flex: 1 1 auto; }
.woocommerce-account .woocommerce-form-row { margin-bottom: 15px; }
.woocommerce-account label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; }
.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"] {
	width: 100%;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 11px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	background: var(--wp--preset--color--background, #F8FAFC) !important;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-account input:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(11, 107, 255, .12) !important;
}
.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 500; font-size: 14px; }
.woocommerce-account button.woocommerce-button,
.woocommerce-account button[type="submit"] {
	width: 100%;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 14px !important;
	cursor: pointer;
	transition: background .15s ease;
}
.woocommerce-account button[type="submit"]:hover { background: #0a5ad6 !important; }
.woocommerce-account .woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 14px;
	text-align: center;
}
.woocommerce-account .woocommerce-privacy-policy-text p {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary, #64748B);
}
/* "Why create an account" list, injected before the register fields. */
.mx-acct-benefits { list-style: none; margin: 0 0 18px; padding: 0; }
.mx-acct-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 5px 0;
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary, #475569);
}
.mx-acct-benefits li::before {
	content: "✓";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(11, 107, 255, .1);
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
	font-size: 11px;
	font-weight: 700;
    display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---- Logged in: sidebar nav + content ---- */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
	align-items: start;
}
.woocommerce-MyAccount-navigation {
	width: auto !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 18px;
	padding: 10px;
	box-shadow: 0 8px 26px rgba(11, 27, 52, .06);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--foreground, #0B1B34);
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--wp--preset--color--background, #F1F5FB); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff !important;
}
.woocommerce-MyAccount-navigation li--woocommerce-logout a { color: #DC2626 !important; }
.woocommerce-MyAccount-navigation li--woocommerce-logout a:hover { background: rgba(220, 38, 38, .08); }
.woocommerce-MyAccount-content {
	width: auto !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 18px;
	padding: clamp(20px, 2.6vw, 30px);
	box-shadow: 0 8px 26px rgba(11, 27, 52, .06);
}
.woocommerce-MyAccount-content p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content .woocommerce-Address { margin-bottom: 18px; }
.woocommerce-MyAccount-content table { border-radius: 12px; overflow: hidden; }

@media (max-width: 820px) {
	.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
	.woocommerce-account:not(.logged-in) .woocommerce .u-columns#customer_login { grid-template-columns: 1fr; }
	.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
}

/* Dashboard intro + quick-link cards (logged-in Mi cuenta) */
.mx-acct-hello { margin: 0 0 6px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; }
.mx-acct-intro { margin: 0 0 22px; color: var(--wp--preset--color--text-secondary, #64748B); line-height: 1.6; }
.mx-acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.mx-acct-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 34px 16px 16px;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 14px;
	background: var(--wp--preset--color--background, #F8FAFC);
	text-decoration: none !important;
	color: var(--wp--preset--color--foreground, #0B1B34);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mx-acct-card:hover {
	transform: translateY(-2px);
	background: #fff;
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	box-shadow: 0 10px 24px rgba(11, 27, 52, .1);
}
.mx-acct-card__t { font-weight: 700; font-size: 15px; }
.mx-acct-card__d { font-size: 13px; color: var(--wp--preset--color--text-secondary, #64748B); line-height: 1.4; }
.mx-acct-card__go {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
	font-size: 17px;
	transition: transform .15s ease;
}
.mx-acct-card:hover .mx-acct-card__go { transform: translateY(-50%) translateX(3px); }

/* ---- Logged-in layout fixes ----
   WooCommerce renders a `.woocommerce-notices-wrapper` as the FIRST child of
   `.woocommerce`, which auto-placement drops into grid cell 1 — pushing the nav
   into column 2 and the content onto row 2. Pin all three explicitly.
   The parent theme also styles the nav with `.woocommerce-account ...` (3
   classes), which out-specifies a plain class selector — hence the !important. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }

/* Neutralise the theme's boxed <ul> (bg + border + padding) — our card is the nav.
   The list's inherited bottom margin also left a band of dead white below the last
   item, making the nav card float taller than the content beside it. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	background-color: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { margin-bottom: 0 !important; }
/* Both panels start at the top; neither should stretch to the other's height. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content { align-self: start; }

/* Empty states inside the account (no orders yet, no downloads…). WooCommerce
   ships these as a hard-edged blue "is-info" banner with a stock icon — it reads
   like a system warning rather than "you haven't ordered yet". Soften it into the
   same card language as everything else and make the CTA a real button. */
.woocommerce-account .wc-block-components-notice-banner {
	background: var(--wp--preset--color--background, #F8FAFC) !important;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-left-width: 1px !important;
	border-radius: 14px !important;
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
	padding: 18px 20px !important;
	gap: 12px;
	align-items: center;
}
.woocommerce-account .wc-block-components-notice-banner > svg {
	fill: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	background: none !important;
	margin: 0 !important;
	flex: none;
}
.woocommerce-account .wc-block-components-notice-banner__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 15px;
}
/* The "Explorar los productos" link — the theme capitalises Every Word. */
.woocommerce-account .wc-block-components-notice-banner .woocommerce-Button,
.woocommerce-account .wc-block-components-notice-banner a.button {
	text-transform: none !important;
	text-decoration: none !important;
	background: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 11px !important;
	padding: 11px 18px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	width: auto !important;
	flex: none;
}
.woocommerce-account .wc-block-components-notice-banner .woocommerce-Button:hover { background: #0a5ad6 !important; }
/* Avisos en carrito y checkout. WooCommerce los pinta con su banner rojo de
   sistema (borde grueso a la izquierda, esquinas duras): en medio de nuestro
   checkout se lee como una pantalla de error de otra web. Mismo lenguaje de
   tarjeta que el resto, con el color del estado en el icono y el borde. */
.woocommerce-checkout .wc-block-components-notice-banner,
.woocommerce-cart .wc-block-components-notice-banner {
	border-radius: 14px !important;
	border-width: 1px !important;
	border-left-width: 1px !important;
	padding: 16px 18px !important;
	gap: 12px;
	align-items: center;
	font-size: 15px;
	box-shadow: 0 6px 20px -14px rgba(11, 27, 52, .35);
}
.woocommerce-checkout .wc-block-components-notice-banner.is-error,
.woocommerce-cart .wc-block-components-notice-banner.is-error {
	background: #FEF2F2 !important;
	border-color: #FECACA !important;
	color: #B42318 !important;
}
.woocommerce-checkout .wc-block-components-notice-banner.is-error > svg,
.woocommerce-cart .wc-block-components-notice-banner.is-error > svg { fill: #B42318 !important; background: none !important; }
.woocommerce-checkout .wc-block-components-notice-banner.is-success,
.woocommerce-cart .wc-block-components-notice-banner.is-success {
	background: #ECFDF3 !important;
	border-color: #A6F4C5 !important;
	color: #067647 !important;
}
.woocommerce-checkout .wc-block-components-notice-banner.is-success > svg,
.woocommerce-cart .wc-block-components-notice-banner.is-success > svg { fill: #067647 !important; background: none !important; }
.woocommerce-checkout .wc-block-components-notice-banner.is-info,
.woocommerce-cart .wc-block-components-notice-banner.is-info {
	background: var(--wp--preset--color--brand-soft, #EAF2FF) !important;
	border-color: #C7DBFF !important;
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
}

/* Realizar el pedido queda ATENUADO mientras no se aceptan los términos.
   Sigue siendo clicable a propósito: al pulsarlo WooCommerce explica que
   falta aceptarlos, que es mejor que un botón muerto sin explicación. */
.mx-terms-pending .wc-block-components-checkout-place-order-button,
.mx-terms-pending .wc-block-checkout__actions_row button {
	/* !important como el resto de las anulaciones de WooCommerce en este
	   archivo: sus estilos de bloques ganan por especificidad si no. */
	opacity: .45 !important;
	filter: saturate(.6);
}
.mx-terms-pending .wc-block-components-checkout-place-order-button:hover,
.mx-terms-pending .wc-block-checkout__actions_row button:hover {
	opacity: .55 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	text-transform: none !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 11px 14px !important;
	border-radius: 11px;
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--wp--preset--color--background, #F1F5FB);
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
}
/* Active item: a soft tinted chip with a brand accent bar, not a saturated blue
   slab — the solid fill read like a 2010-era selected menu row. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	position: relative;
	transition: background .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(11, 107, 255, .09) !important;
	color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	font-weight: 700 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	border-radius: 0 3px 3px 0;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #DC2626 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(220, 38, 38, .08); }
/* The theme narrows the nav to 27% at wide breakpoints — the grid owns width now. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { width: auto !important; }

@media (max-width: 820px) {
	.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
}

/* Header search icon: keep it a bare icon in BOTH states. When logged in an
   extra stylesheet gives the search button a solid brand-blue fill, so the
   magnifier rendered as a blue square in the header. */
.wp-header-right .search-container .wp-block-search__button,
.wp-header-right .search-container button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 8px !important;
}
.wp-header-right .search-container .wp-block-search__button:hover {
	color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
}

/* The theme reverses the login/register columns (Acceder rendered on the right).
   Pin them explicitly — robust whether the cause is float, order or direction. */
.woocommerce-account #customer_login .u-column1 { grid-column: 1 !important; order: 1 !important; float: none !important; }
.woocommerce-account #customer_login .u-column2 { grid-column: 2 !important; order: 2 !important; float: none !important; }
@media (max-width: 820px) {
	.woocommerce-account #customer_login .u-column1,
	.woocommerce-account #customer_login .u-column2 { grid-column: 1 !important; }
}

/* Register form: the "se enviará un enlace…" note inherits body size and reads
   like a heading inside the card — make it a quiet helper line. */
.woocommerce-account form.register > p:not(.woocommerce-form-row):not(.form-row) {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary, #64748B);
	margin: 0 0 14px;
}
.woocommerce-account form.register .woocommerce-privacy-policy-text p { margin-bottom: 16px; }

/* ============================================================
   Account header — replaces the theme's gradient title band
   (same visual language as `mercaxpress/cart-header`)
   ============================================================ */
.mx-accthead { background: transparent; }
.mx-accthead__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: clamp(22px, 3.2vw, 40px) 20px clamp(16px, 2.2vw, 24px);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.mx-accthead__title {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-accthead__sub {
	margin: 8px 0 0;
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secondary, #64748B);
}
.mx-accthead__out {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	background: #fff;
	color: #DC2626;
	transition: background .15s ease, border-color .15s ease;
}
.mx-accthead__out:hover { background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .3); }
.mx-accthead__out--shop { color: var(--wp--preset--color--brand-blue, #0B6BFF); }
.mx-accthead__out--shop:hover {
	background: rgba(11, 107, 255, .06);
	border-color: rgba(11, 107, 255, .3);
}
@media (max-width: 720px) {
	.mx-accthead__inner { align-items: flex-start; gap: 14px; }
}
/* The header already breathes; don't let the page's default block gap add a
   second helping of space before the cards. */
.woocommerce-account .mx-accthead + * > .woocommerce,
.woocommerce-account main > .entry-content:first-of-type { margin-top: 0; }
.woocommerce-account .woocommerce { margin-top: 6px; }

/* ============================================================
   Checkbox marks — center the tick inside the box
   ============================================================ */
/* WooCommerce sizes the box in px (20px here) but the SVG tick in `em`
   (16.9px) pinned to `top:-2px; left:0` — tuned for a smaller box, so the tick
   rendered high and left and spilled over the border. Rather than chase the em
   maths, drop the SVG and paint the tick as a centered background on the input
   itself: exact at any font size, and it gives us the brand fill for free. */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin: 0 10px 0 0;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--brand-border, #CBD5E1);
	background-color: #fff;
	transition: background-color .12s ease, border-color .12s ease;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3.2 3.2 6.4-6.8'/%3E%3C/svg%3E");
	background-size: 76% 76%;
	background-position: center;
	background-repeat: no-repeat;
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 107, 255, .22);
}
/* The SVG the box-shadow replaces. */
.wc-block-components-checkbox .wc-block-components-checkbox__mark { display: none !important; }
.wc-block-components-checkbox__label { line-height: 1.45; }

/* Same treatment for the plain checkboxes outside the blocks (Recuérdame). */
.woocommerce-account input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--brand-border, #CBD5E1) !important;
	background: #fff !important;
	vertical-align: -4px;
	margin: 0 8px 0 0;
	padding: 0 !important;
	cursor: pointer;
}
.woocommerce-account input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3.2 3.2 6.4-6.8'/%3E%3C/svg%3E") !important;
	background-size: 76% 76% !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* ============================================================
   Checkout — card sections + sticky summary (matches the cart)
   ============================================================ */
/* The step blocks are children of `form.wc-block-checkout__form`, not of
   `.wc-block-checkout__main` — and they carry `wp-block-woocommerce-checkout-*`
   classes rather than `wc-block-components-checkout-step`. Terms + the
   place-order actions are excluded so they don't become cards too. */
.wc-block-checkout__form > [class*="wp-block-woocommerce-checkout-"]:not([class*="terms"]):not([class*="actions"]) {
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 18px;
	padding: clamp(18px, 2.2vw, 26px) !important;
	margin-bottom: 16px;
	box-shadow: 0 8px 26px rgba(11, 27, 52, .05);
}
.wc-block-components-checkout-step__heading { margin-top: 0 !important; }
.wc-block-components-checkout-step__title {
	font-size: clamp(1.05rem, 1.7vw, 1.25rem) !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--foreground, #0B1B34) !important;
}
/* Summary: same card language as the cart's sidebar.
   The sidebar is now just the sticky COLUMN — the card moved onto the order
   summary block itself, so the coupon can sit below it as its own panel. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	position: sticky;
	top: 20px;
	align-self: flex-start;
}
/* The coupon block is nested INSIDE the summary block in WooCommerce's markup, so
   it can't simply be moved out. Instead the summary block stops being the card:
   `display:contents` on its content wrapper promotes cart-items / coupon / totals
   to siblings, and the four that belong together each paint a slice of one
   continuous card (side borders + shared white fill, rounded at the ends). The
   coupon then reorders to last and gets a card of its own. `drop-shadow` on the
   parent traces the union of the children, so each card gets one clean shadow
   rather than a shadow per slice. */
.wp-block-woocommerce-checkout-order-summary-block {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0 6px 18px rgba(11, 27, 52, .06));
}
.wc-block-components-checkout-order-summary__content { display: contents; }

.wc-block-components-checkout-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-cart-items-block,
.wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	background: #fff;
	border-left: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-right: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	padding-left: clamp(18px, 2.2vw, 24px);
	padding-right: clamp(18px, 2.2vw, 24px);
	margin: 0;
}
.wc-block-components-checkout-order-summary__title {
	order: 0;
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 18px 18px 0 0;
	padding-top: clamp(18px, 2.2vw, 24px);
}
.wp-block-woocommerce-checkout-order-summary-cart-items-block { order: 1; }
.wp-block-woocommerce-checkout-order-summary-totals-block { order: 2; }
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	order: 3;
	border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 0 0 18px 18px;
	padding-bottom: clamp(16px, 2vw, 20px);
}
/* Its own card, below the totals. */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	order: 4;
	margin-top: 14px !important;
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 14px;
	padding: 2px clamp(16px, 2vw, 20px);
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button {
	font-weight: 600;
	padding: 15px 0 !important;
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block input {
	background: var(--wp--preset--color--background, #F8FAFC) !important;
	border-radius: 11px !important;
}
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
/* Inputs match the rest of the site. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-checkout select {
	border-radius: 11px !important;
	border-color: var(--wp--preset--color--brand-border, #E2E8F0) !important;
	background: var(--wp--preset--color--background, #F8FAFC) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus {
	box-shadow: 0 0 0 3px rgba(11, 107, 255, .12) !important;
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	background: #fff !important;
}
/* Make the optional account opt-in read as a benefit, not a stray checkbox. */
.wc-block-checkout__create-account {
	background: var(--wp--preset--color--background, #F1F5FB);
	border: 1px solid rgba(11, 107, 255, .18);
	border-radius: 12px;
	padding: 14px 16px !important;
	margin-top: 14px;
}
.wc-block-checkout__create-account .wc-block-components-checkbox__label { font-weight: 600; }
/* Ticking the opt-in reveals a password field, but WooCommerce renders it as a
   SIBLING of the tinted box — it read as an unrelated stray input. Weld the two
   into one block so "create an account" and "choose your password" are one step. */
.wc-block-checkout__create-account:has(+ .wc-block-components-address-form__password) {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 4px !important;
}
.wc-block-checkout__create-account + .wc-block-components-address-form__password {
	--mx-pw-inset: 16px;
	background: var(--wp--preset--color--background, #F1F5FB);
	border: 1px solid rgba(11, 107, 255, .18);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	padding: 0 var(--mx-pw-inset) 14px;
	margin: 0;
}
/* The floating label is absolutely positioned against the WRAPPER's padding box,
   so the inset above moved the input but left the label behind — "Crea una
   contraseña" hung off the input's left edge. Offset it by the same amount. */
.wc-block-checkout__create-account + .wc-block-components-address-form__password > label {
	left: calc(12px + var(--mx-pw-inset));
}
.wc-block-checkout__create-account + .wc-block-components-address-form__password input {
	background: #fff !important;
}
/* Place-order button matches the cart's checkout CTA. */
.wc-block-checkout__actions_row button,
.wc-block-components-checkout-place-order-button {
	border-radius: 12px !important;
	font-weight: 700 !important;
	padding: 16px !important;
	background: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
}
.wc-block-components-checkout-place-order-button:hover { background: #0a5ad6 !important; }
/* "Acceder" login prompt for guests. */
.wc-block-components-checkout-login-prompt,
.wc-block-checkout__login-prompt { font-weight: 600; }

@media (max-width: 780px) {
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar { position: static; }
}

/* Completed step in the progress header (checkout marks "Carrito" done). */
.mx-cartsteps__inner { display: flex; align-items: center; gap: 8px; text-decoration: none !important; color: inherit; }
.mx-cartsteps__step.is-done { color: var(--wp--preset--color--foreground, #0B1B34); }
.mx-cartsteps__step.is-done .mx-cartsteps__num {
	background: rgba(11, 107, 255, .12);
	border-color: transparent;
	color: var(--wp--preset--color--brand-blue, #0B6BFF);
}
.mx-cartsteps__step.is-done a.mx-cartsteps__inner:hover .mx-cartsteps__label { text-decoration: underline; }

/* Checkout blocks that render nothing — shipping-method and pickup-options are
   empty until shipping zones exist — were showing as blank rounded cards.
   Collapse any checkout block with no element children; self-healing once
   shipping is configured and they actually have content. */
.wc-block-checkout__form > [class*="wp-block-woocommerce-checkout-"]:empty,
.wc-block-checkout__form > [class*="wp-block-woocommerce-checkout-"]:not(:has(*)) {
	display: none !important;
}

/* ---- "Mira cómo se usa": demo video as the last gallery slide + modal ---- */
/* The slide box is a <button> sized like the photos (aspect-ratio inline,
   from the featured image); inside, the poster twice: blurred cover as the
   backdrop and contained on top, so a portrait phone video fills a square
   frame without cropping the product. No <img>: see functions.php. */
.woocommerce-product-gallery__image.mx-video-slide .mx-video-slide__btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--foreground, #0B1B34);
	overflow: hidden;
	cursor: pointer;
}
.mx-square-gallery .woocommerce-product-gallery__image.mx-video-slide .mx-video-slide__btn {
	height: 100%;
	aspect-ratio: auto;
}
.mx-video-slide__bg,
.mx-video-slide__poster {
	position: absolute;
	inset: 0;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}
.mx-video-slide__bg {
	inset: -16px;
	background-size: cover;
	filter: blur(18px) brightness(.55);
}
.mx-video-slide__poster { background-size: contain; }
.mx-demo-play {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff;
}
.mx-demo-play svg { margin-left: 3px; }
.mx-video-slide .mx-demo-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 68px;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	transition: transform .15s ease;
}
.mx-video-slide__btn:hover .mx-demo-play { transform: translate(-50%, -50%) scale(1.06); }
.mx-video-slide__label {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(11, 27, 52, .78);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
/* Its thumbnail in the strip gets a small play badge (class set in
   swatches.js once FlexSlider has built the strip). */
.woocommerce-product-gallery .flex-control-thumbs li.mx-video-thumb { position: relative; }
.woocommerce-product-gallery .flex-control-thumbs li.mx-video-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-blue, #0B6BFF) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	pointer-events: none;
}

/* The link under the price: a quiet pill, same data attributes as the slide. */
.mx-demo-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 7px 14px 7px 8px;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 999px;
	background: var(--wp--preset--color--background, #F8FAFC);
	color: var(--wp--preset--color--foreground, #0B1B34);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mx-demo-link:hover {
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	box-shadow: 0 4px 14px rgba(11, 107, 255, .12);
}
.mx-demo-link__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff;
}
.mx-demo-link__play svg { margin-left: 1px; }
.mx-demo-link__dur { color: var(--wp--preset--color--text-secondary, #475569); font-weight: 500; }
.single-product .product .price + .mx-demo-link { margin-top: 4px; }

/* Modal: a <dialog> in the top layer (see initDemoVideo in swatches.js for
   why it must be a dialog). Portrait video: phone-shaped on desktop,
   near-fullscreen on mobile. The UA centers an open dialog by itself. */
.mx-demo-modal {
	border: 0;
	padding: 0;
	background: transparent;
	overflow: visible; /* the close button sits just outside the box on desktop */
	max-width: none;
	max-height: none;
}
.mx-demo-modal::backdrop {
	background: rgba(11, 27, 52, .82);
}
.mx-demo-modal[open] { animation: mx-demo-pop .22s ease; }
@keyframes mx-demo-pop { from { opacity: 0; transform: translateY(14px); } }
.mx-demo-modal__box {
	position: relative;
	/* 9:16 box that fits the viewport whichever dimension binds */
	height: min(92vh, 178vw);
	aspect-ratio: 9 / 16;
	max-width: 94vw;
}
.mx-demo-modal__box video {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 14px;
	background: #000;
	object-fit: contain;
}
.mx-demo-modal__close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 1;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--foreground, #0B1B34);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
/* Mobile: truly fullscreen. Partly UX (edge-to-edge video, like every
   short-video app), partly defensive: at phone sizes Chromium dropped the
   ::backdrop paint above/below a near-viewport video box (same family of
   compositor bug that forced the <dialog> — see swatches.js). Fullscreen
   leaves no backdrop region visible, so a mispaint has nothing to show. */
@media (max-width: 640px) {
	.mx-demo-modal {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100dvh;
		margin: 0;
	}
	.mx-demo-modal__box {
		width: 100vw;
		height: 100dvh;
		aspect-ratio: auto;
		max-width: none;
	}
	.mx-demo-modal__box video {
		border-radius: 0;
		background: #0B1B34;
	}
	.mx-demo-modal__close { top: 10px; right: 10px; }
}

/* ---- Aviso de ITBMS (retirar cuando los precios pasen a incluir impuestos,
   Ley 473/2025, desde el 1-jul-2027 — ver functions.php) ---- */
.mx-itbms-note {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--wp--preset--color--text-secondary, #475569);
}
/* En la página de producto va pegado al precio, que trae su propio margen. */
.single-product .product .mx-itbms-note {
	margin: -8px 0 16px;
}

/* ---- Checkout: opciones de envío y pago como tarjetas modernas ----
   Woo Blocks marca la opción elegida con un box-shadow inset negro de 1.5px
   y esquinas rectas (--checked-option-highlighted). Lo sustituimos por
   tarjetas redondeadas con acento de marca. Aplica a los DOS controles:
   radio-control (envío) y radio-control-accordion (métodos de pago). */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border-radius: 12px !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand-border, #E2E8F0) !important;
	background: #fff !important;
	margin-bottom: 10px;
	transition: box-shadow .15s ease, background .15s ease;
}
.wc-block-components-radio-control__option:last-child,
.wc-block-components-radio-control-accordion-option:last-child { margin-bottom: 0; }

/* Woo Blocks dibuja además una línea separadora `::after` a todo lo ancho de
   cada opción. Con nuestras tarjetas —que ya llevan su propio borde— esas
   líneas se juntan y se leen como una caja alrededor de TODO el grupo de
   opciones de pago (Ahmad, 14 sep). Cada opción ya está delimitada; fuera. */
.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control-accordion-option::after { display: none !important; }

.wc-block-components-radio-control__option:hover,
.wc-block-components-radio-control-accordion-option:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand-blue, #0B6BFF) !important;
}

/* Seleccionada: borde azul de 2px + fondo con tinte, nada de negro */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	background: #F8FBFF !important;
	outline: none !important;
}


/* El circulito del radio en color de marca */
.wc-block-components-radio-control__input {
	accent-color: var(--wp--preset--color--brand-blue, #0B6BFF);
}

/* ---- order_details (paginas de pago y "pedido recibido"): la lista clasica
   de Woo son <li> inline-block de anchos dispares que en movil rompen en
   filas irregulares. La convertimos en tarjetas de resumen consistentes. ---- */
/* el clearfix ::before/::after de Woo se vuelve un item fantasma del
   grid/flex y descuadra la primera celda */
ul.order_details::before,
ul.order_details::after { display: none !important; content: none !important; }
ul.order_details {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	margin: 0 auto 28px;
	padding: 0;
	list-style: none;
	max-width: fit-content;
}
ul.order_details li {
	float: none !important;
	margin: 0 !important;
	padding: 6px 22px !important;
	border-right: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--wp--preset--color--text-secondary, #475569);
}
ul.order_details li:last-child { border-right: 0 !important; }
ul.order_details li strong {
	display: block;
	margin-top: 2px;
	font-size: 17px;
	letter-spacing: 0;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
@media (max-width: 640px) {
	ul.order_details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		max-width: none;
		border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
		border-radius: 12px;
		overflow: hidden;
		background: #fff;
	}
	ul.order_details li {
		border-right: 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
		padding: 12px 16px !important;
	}
	ul.order_details li:nth-child(odd):not(.total):not(.method) {
		border-right: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	}
	/* metodo de pago: texto largo, fila completa */
	ul.order_details li.method { grid-column: 1 / -1; border-right: 0 !important; }
	ul.order_details li:last-child, ul.order_details li.method:last-child { border-bottom: 0 !important; }
}

/* ============================================================
   Resumen del pedido en MÓVIL (carrito y checkout)
   En contenedores angostos Woo añade .is-mobile/.is-small al layout y
   convierte el resumen del checkout en acordeón. Ahí nuestro "corte en
   rebanadas" de escritorio pierde su contexto flex: las piezas quedan en
   orden del DOM (cupón en medio), sin padding y con la pieza superior
   redondeada oculta. En móvil: UNA tarjeta, cupón al final.
   ============================================================ */

/* ---- CARRITO móvil: la primera pieza visible recupera el redondeo
   superior (el encabezado, que lo traía, se oculta en móvil) ---- */
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-cart-order-summary-totals-block {
	border-radius: 14px 14px 0 0 !important;
}

/* ---- CHECKOUT móvil: acordeón como tarjeta única ---- */
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-checkout-order-summary-block {
	display: block !important;
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 14px !important;
	overflow: hidden;
	filter: none !important;
	padding: 0 !important;
}
/* la barra del acordeón ("Resumen del pedido  $x.xx  ⌄") */
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__title,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__title {
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 14px 16px !important;
	margin: 0 !important;
}
/* el contenido: recuperar un contexto flex para poder ordenar */
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__content,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__content {
	display: flex !important;
	flex-direction: column;
	padding: 0 16px 6px;
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}
/* piezas internas: sin tarjeta propia, separadas por líneas */
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__content > *,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__content > * {
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-checkout-order-summary-cart-items-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-checkout-order-summary-cart-items-block { order: 1; }
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-checkout-order-summary-totals-block {
	order: 2;
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}
/* cupón AL FINAL, como en escritorio */
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	order: 9;
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}

/* ---- Términos y condiciones alineados con las tarjetas ---- */
.wc-block-checkout__terms {
	margin: 16px 0 !important;
	padding: 14px 16px !important;
	background: var(--wp--preset--color--background, #F8FAFC);
	border-radius: 12px;
	font-size: 14px;
}
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator::before { display: none; }

/* El resumen se renderiza DOS veces en movil: el acordeon del sidebar y un
   slot-fill dentro de las acciones. Uno solo: fuera el duplicado del fondo. */
.wc-block-components-sidebar-layout.is-mobile .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar-layout.is-small .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
	display: none !important;
}
/* Nuestro display:flex del contenido pisaba el colapso del acordeon.
   Respetar el estado del toggle (aria-expanded en la barra del titulo). */
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__title[aria-expanded="false"] + .wc-block-components-checkout-order-summary__content,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__title[aria-expanded="false"] + .wc-block-components-checkout-order-summary__content {
	display: none !important;
}

/* Woo pinta bordes laterales de 1px en cada totals-wrapper del acordeon
   movil: se ve un rectangulo interior dentro de la tarjeta. Fuera todos;
   los separadores horizontales nuestros se re-declaran aqui mismo. */
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__content,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__content {
	border-bottom: 0 !important;
	padding-top: 12px;
}
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__content > *,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__content > *,
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper,
.wc-block-components-sidebar-layout.is-small .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper {
	border: 0 !important;
}
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-components-sidebar-layout.is-mobile .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wc-block-components-sidebar-layout.is-small .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	border-top: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
}

/* Interstitial de pago: total y metodo a fila completa — sin celdas vacias */
@media (max-width: 640px) {
	ul.order_details li.total,
	ul.order_details li.method {
		grid-column: 1 / -1;
		border-right: 0 !important;
	}
}

/* ---- Transferencia ACH: tarjeta en "pedido recibido" ---- */
.mx-ach {
	max-width: 520px;
	margin: 8px auto 28px;
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 16px;
}
.mx-ach__title { font-size: 19px; margin: 0 0 6px; color: var(--wp--preset--color--foreground, #0B1B34); }
.mx-ach__hint { margin: 0 0 16px; font-size: 14px; color: var(--wp--preset--color--text-secondary, #475569); }
.mx-ach__rows { margin: 0 0 14px; }
.mx-ach__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}
.mx-ach__rows > div:last-child { border-bottom: 0; }
.mx-ach__rows dt { margin: 0; font-size: 13px; color: var(--wp--preset--color--text-secondary, #475569); }
.mx-ach__rows dd { margin: 0; font-weight: 600; color: var(--wp--preset--color--foreground, #0B1B34); text-align: right; }
.mx-ach__num { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mx-ach__send { margin-top: 4px; }
.mx-ach__deadline { margin: 14px 0 0; font-size: 12.5px; color: var(--wp--preset--color--text-secondary, #475569); }
@media (max-width: 640px) {
	.mx-ach { padding: 20px 16px; }
}

/* ---- Confirmacion de pedido: lista resumen como tira de datos ---- */
ul.wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
li.wc-block-order-confirmation-summary-list-item {
	flex: 1 1 auto;
	margin: 0;
	padding: 12px 18px;
	border-right: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
}
li.wc-block-order-confirmation-summary-list-item:last-child { border-right: 0; }
.wc-block-order-confirmation-summary-list-item__key {
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #475569);
}
.wc-block-order-confirmation-summary-list-item__value {
	font-weight: 600;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
@media (max-width: 640px) {
	ul.wc-block-order-confirmation-summary-list { display: grid; grid-template-columns: 1fr 1fr; }
	li.wc-block-order-confirmation-summary-list-item {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	}
	li.wc-block-order-confirmation-summary-list-item:nth-child(odd) {
		border-right: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	}
	li.wc-block-order-confirmation-summary-list-item:nth-last-child(-n+2) { border-bottom: 0; }
}

/* 5 filas en cuadricula de 2: la impar final ocupa la fila completa */
@media (max-width: 640px) {
	li.wc-block-order-confirmation-summary-list-item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		border-right: 0 !important;
	}
}


/* ---- Checkout: el label interno del acordeon de pago comparte la clase
   __option con las filas de envio y dibujaba SU PROPIA tarjeta dentro de la
   del acordeon (doble borde azul al seleccionar). Solo la envoltura pinta. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	box-shadow: none !important;
	border-radius: 0 !important;
	background: none !important;
	margin-bottom: 0 !important;
}
/* Sin línea divisoria: la descripción es parte de la MISMA tarjeta que su
   opción. Con el divisor, cada método parecía una cajita con cabecera y
   cuerpo metida dentro de la tarjeta "Opciones de pago" — cajas dentro de
   cajas dentro de cajas. */
.wc-block-components-radio-control-accordion-content {
	border-top: 0 !important;
}
.wc-block-components-radio-control-accordion-content > div { padding: 12px 16px; }

/* Cierre de la confirmación: qué pasa ahora y cómo preguntarlo. Sin esto la
   página terminaba en la dirección de facturación y el cliente quedaba sin
   salida ni forma de contactarnos. */
.mx-conf__next {
	margin-top: 32px;
	padding: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--brand-soft, #EAF2FF);
}
.mx-conf__next h3 { margin: 0 0 10px; }
.mx-conf__next p { margin: 0 0 10px; max-width: 62ch; font-size: 16px; line-height: 1.55; }
.mx-conf__btns { margin-top: 16px; gap: 10px; flex-wrap: wrap; }
.mx-conf__wa .wp-block-button__link {
	background: #25D366 !important;
	color: #0B1B34 !important;
	font-weight: 700;
}
.mx-conf__wa .wp-block-button__link:hover { background: #1eb855 !important; }

/* ---- Confirmacion de pedido: bloques de Woo alineados al sistema ---- */
.woocommerce-order-confirmation .wc-block-order-confirmation-totals__table,
table.wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}
table.wc-block-order-confirmation-totals__table :is(th, td) {
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	padding: 13px 18px !important;
	background: #fff;
}
table.wc-block-order-confirmation-totals__table tfoot tr:last-child :is(th, td),
table.wc-block-order-confirmation-totals__table tr:last-child :is(th, td) {
	border-bottom: 0 !important;
}
table.wc-block-order-confirmation-totals__table thead th {
	background: var(--wp--preset--color--background, #F8FAFC);
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary, #475569);
}
/* direcciones como tarjetas */
.woocommerce-order-confirmation-address-wrapper address,
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 14px;
	background: #fff;
}
/* encabezados de seccion consistentes */
.woocommerce-order-confirmation h3.wp-block-heading {
	font-size: 20px !important;
	margin: 26px 0 12px;
}
/* la tarjeta ACH dentro del flujo: alineada a la izquierda del contenido */
.mx-ach { margin-left: 0; }

/* valores largos (correos, numeros de cuenta) parten linea, nunca se cortan */
.wc-block-order-confirmation-summary-list-item__value,
.mx-ach__rows dd { overflow-wrap: anywhere; }

/* ---- Confirmación: composición final ---- */
/* la cabecera compartida ya dice "Pedido confirmado" — el h1 del bloque de
   estado lo repetía. Queda solo el mensaje. */
.mx-conf .wc-block-order-confirmation-status h1 { display: none; }
.mx-conf .wc-block-order-confirmation-status p {
	font-size: 19px;
	margin: 0 0 18px;
	color: var(--wp--preset--color--foreground, #0B1B34);
}

/* direcciones: un solo borde (el de la tarjeta), nada anidado */
.mx-conf .woocommerce-order-confirmation-address-wrapper * {
	border: 0 !important;
	box-shadow: none !important;
}
/* la tarjeta es el BLOQUE (incluye telefono); el <address> interno, plano */
.mx-conf .wc-block-order-confirmation-shipping-address,
.mx-conf .wc-block-order-confirmation-billing-address {
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	border-radius: 14px !important;
	background: #fff !important;
	padding: 18px 20px !important;
	margin: 0 !important;
}
.mx-conf .woocommerce-order-confirmation-address-wrapper address {
	display: block;
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-style: normal;
	line-height: 1.7;
}

/* tabla de detalles: sin fila de encabezado, mas aire */
.mx-conf table.wc-block-order-confirmation-totals__table thead { display: none; }

/* Con tarjeta de pago pendiente (ACH): detalles a la DERECHA de la tarjeta */
@media (min-width: 1024px) {
	.mx-conf:has(.mx-ach) {
		display: grid;
		grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}
	.mx-conf:has(.mx-ach) > * { grid-column: 2; }
	.mx-conf:has(.mx-ach) > .wc-block-order-confirmation-status,
	.mx-conf:has(.mx-ach) > .wc-block-order-confirmation-summary {
		grid-column: 1 / -1;
	}
	.mx-conf:has(.mx-ach) > .wc-block-order-confirmation-additional-information {
		grid-column: 1;
		grid-row: 3 / span 8;
	}
	.mx-conf:has(.mx-ach) .mx-ach { position: sticky; top: 24px; max-width: none; }
	/* la primera seccion de la columna derecha no necesita margen gigante */
	.mx-conf:has(.mx-ach) > .wc-block-order-confirmation-totals-wrapper h3 { margin-top: 0; }
	/* direcciones lado a lado dentro de la columna derecha */
}

/* ---- Línea de tiempo del pedido (confirmación + Mi cuenta) ---- */
.mx-timeline {
	max-width: 520px;
	margin: 0 0 24px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	border-radius: 16px;
}
.mx-timeline__title { font-size: 19px; margin: 0 0 16px; }
.mx-timeline__list { list-style: none; margin: 0; padding: 0; }
.mx-timeline__step {
	position: relative;
	display: flex;
	gap: 14px;
	padding: 0 0 22px 0;
	margin: 0;
}
.mx-timeline__step:last-child { padding-bottom: 0; }
.mx-timeline__step::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 26px;
	bottom: -2px;
	width: 2px;
	background: var(--wp--preset--color--brand-border, #E2E8F0);
}
.mx-timeline__step:last-child::before { display: none; }
.mx-timeline__step.is-done::before { background: var(--wp--preset--color--brand-blue, #0B6BFF); }
.mx-timeline__dot {
	flex: none;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--background, #F1F5FB);
	border: 2px solid var(--wp--preset--color--brand-border, #E2E8F0);
	color: #fff;
	font-size: 14px;
	z-index: 1;
}
.mx-timeline__step.is-done .mx-timeline__dot {
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
}
.mx-timeline__step.is-active .mx-timeline__dot {
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF);
	background: #fff;
}
.mx-timeline__body { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.mx-timeline__body strong { color: var(--wp--preset--color--foreground, #0B1B34); font-size: 15px; }
.mx-timeline__step:not(.is-done):not(.is-active) .mx-timeline__body strong {
	color: var(--wp--preset--color--text-secondary, #475569);
	font-weight: 500;
}
.mx-timeline__body small { color: var(--wp--preset--color--text-secondary, #475569); font-size: 13px; }

/* En la confirmación, la línea de tiempo vive en la columna izquierda con la
   tarjeta ACH (o sola, en pedidos con tarjeta) */
@media (min-width: 1024px) {
	.mx-conf:has(.mx-timeline) {
		display: grid;
		grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
		column-gap: 40px;
		align-items: start;
	}
	.mx-conf:has(.mx-timeline) > * { grid-column: 2; }
	.mx-conf:has(.mx-timeline) > .wc-block-order-confirmation-status,
	.mx-conf:has(.mx-timeline) > .wc-block-order-confirmation-summary {
		grid-column: 1 / -1;
	}
	.mx-conf:has(.mx-timeline) > .wc-block-order-confirmation-additional-information {
		grid-column: 1;
		grid-row: 3 / span 8;
	}
	.mx-conf:has(.mx-timeline) .mx-timeline { max-width: none; }
	.mx-conf .mx-ach { position: static; }
}

/* ---- Confirmación: retoques de la ronda de revisión ---- */
/* la cabecera alinea su borde con el contenido alignwide de la página */
.woocommerce-order-received .mx-carthead__inner {
	max-width: var(--wp--style--global--wide-size, 1240px);
	padding-left: 0;
	padding-right: 0;
}

/* insignia de pago pendiente + tarjeta ACH que exige atención */
.mx-ach { border-width: 2px; border-color: #F59E0B; }
.mx-ach__badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #FEF3C7;
	color: #92400E;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* miniaturas en los detalles del pedido, como en el resumen del checkout */
.mx-item-thumb { display: inline-block; vertical-align: middle; margin-right: 12px; }
.mx-item-thumb img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0);
	display: block;
}
.mx-conf table.wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__product {
	display: flex;
	align-items: center;
}

/* ============================================================
   Cookie notice (opt-in for the Meta pixel). Mobile: bottom sheet, full
   width; the WhatsApp/cart bubbles ride on top of it (--mx-cookies-h is set
   by mx-cookies.js). Desktop: card bottom-left, away from the bubbles.
   ============================================================ */
.mx-cookies[hidden] { display: none; }
.mx-cookies {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9999;
	background: #fff;
	color: var(--wp--preset--color--foreground, #111827);
	border-radius: 22px 22px 0 0;
	padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -14px 40px rgba(11, 27, 52, .12);
	font-family: "Open Sans", -apple-system, "Segoe UI", sans-serif;
	transform: translateY(16px);
	opacity: 0;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .28s ease;
}
.mx-cookies.is-in { transform: none; opacity: 1; }
.mx-cookies__title {
	margin: 0 0 6px;
	font-family: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: var(--wp--preset--color--secondary, #0B1B34);
}
.mx-cookies__title em { font-style: normal; color: var(--wp--preset--color--brand-blue, #0B6BFF); }
.mx-cookies__text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.mx-cookies__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mx-cookies__text a:hover { color: var(--wp--preset--color--brand-blue, #0B6BFF); }
.mx-cookies__ok,
.mx-cookies__no {
	display: block;
	width: 100%;
	border: 0;
	cursor: pointer;
	font-family: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
	font-weight: 600;
	line-height: 1;
}
.mx-cookies__ok {
	height: 50px;
	border-radius: 14px;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	color: #fff;
	font-size: 15px;
	box-shadow: 0 8px 20px rgba(11, 107, 255, .28);
	transition: background .16s ease, transform .16s ease;
}
.mx-cookies__ok:hover { background: var(--wp--preset--color--wisteria, #0057D8); transform: translateY(-1px); }
.mx-cookies__no {
	height: 44px; /* touch-target floor */
	margin-top: 4px;
	background: transparent;
	color: var(--wp--preset--color--meta, #64748B);
	font-size: 13.5px;
}
.mx-cookies__no:hover { color: var(--wp--preset--color--secondary, #0B1B34); }
.mx-cookies__ok:focus-visible,
.mx-cookies__no:focus-visible { outline: 2px solid var(--wp--preset--color--brand-blue, #0B6BFF); outline-offset: 2px; }
@media (max-width: 781px) {
	body.mx-cookies-open .mx-wabubble,
	body.mx-cookies-open .mx-cartbubble { bottom: calc(var(--mx-cookies-h, 0px) + 14px); }
}
@media (min-width: 782px) {
	.mx-cookies {
		left: 24px; right: auto; bottom: 24px;
		width: 440px;
		border-radius: 20px;
		padding: 22px;
		box-shadow: 0 18px 44px rgba(11, 27, 52, .16), 0 0 0 1px rgba(11, 27, 52, .04);
	}
	.mx-cookies__actions { display: flex; gap: 12px; align-items: center; }
	.mx-cookies__ok { width: auto; padding: 0 26px; }
	.mx-cookies__no { width: auto; margin: 0; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.mx-cookies { transition: none; transform: none; opacity: 1; }
}

/* ---- 404: reuses the empty-cart treatment; only the search row is new ---- */
.mx-notfound { padding-top: 48px; }
.mx-notfound .mx-emptycart__title { margin-bottom: 8px; }
.mx-notfound__search {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 420px;
	margin: 4px auto 26px;
}
.mx-notfound__search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--wp--preset--color--foreground, #111827);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-default-color, #E2E8F0);
	border-radius: 10px;
}
.mx-notfound__search input[type="search"]:focus {
	outline: 2px solid var(--wp--preset--color--brand-blue, #0B6BFF);
	outline-offset: 1px;
}
.mx-notfound__search button {
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	font-family: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: #fff;
	background: var(--wp--preset--color--brand-blue, #0B6BFF);
	transition: background .16s ease;
}
.mx-notfound__search button:hover { background: var(--wp--preset--color--wisteria, #0057D8); }
@media (max-width: 480px) {
	.mx-notfound { padding-top: 32px; }
	.mx-notfound__search { max-width: none; }
	.mx-notfound__search button { padding: 0 16px; }
}

/* ============================================================
   Pago seguro — the payment strip on the product page
   (patterns/secure-payments.php). Replaces the parent's
   "Trusted & Secure Payments", which advertised Amex, PayPal and
   Skrill: none of them accepted. Marks are WooCommerce's own card
   assets, so they are drawn at their real size instead of the
   parent's upscaled 70x45 JPEGs. Wraps rather than squeezing,
   because the strip sits in the narrow summary column on mobile.
   ============================================================ */
.mx-pagoseguro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mx-pagoseguro__item { display: flex; }
/* Both marks are 750x471 SVG card tiles carrying their own rounded background, so
   they need no chip of ours — only a height. The `img` in this selector is load-
   bearing, not decoration: WooCommerce ships `.woocommerce img { height:auto;
   max-width:100% }` (woocommerce-layout.css, specificity 0,1,1) which outranks a
   lone class and stretched the Mastercard SVG to the full column width. */
.mx-pagoseguro img.mx-pagoseguro__card {
	display: block;
	width: auto;
	height: 30px;
}
.mx-pagoseguro__ach {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
	font-family: "Poppins", "Avenir Next", "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--color-dark, #0F172A);
}

/* ---- Retiro en tienda (PH City Center) ----
   Checkout: el conmutador Envío / Recoger de Woo Blocks como tarjetas de la
   marca, y debajo de la opción de retiro la tarjeta que pinta mx-retiro.js
   (dirección, cómo llegar, mapa, teléfono, horario). Confirmación y Mi cuenta:
   la tarjeta reutiliza la piel de .mx-ach; aquí sólo el color y los enlaces. */
/* Woo Blocks envuelve el conmutador en un `components-button-group` con un
   lavado gris al 6 % y 4px de padding, que en nuestras tarjetas blancas se ve
   como una banda sucia detrás de los dos botones (Ahmad, 14 sep). Fuera el
   fondo; los dos botones se separan con un hueco propio. */
.wc-block-checkout__shipping-method-container {
	background: transparent !important;
	padding: 0 !important;
	gap: 10px;
}
.wc-block-checkout__shipping-method-option {
	border-radius: 12px !important;
	border: 1px solid var(--wp--preset--color--brand-border, #E2E8F0) !important;
	background: #fff !important;
	box-shadow: none !important;
}
.wc-block-checkout__shipping-method-option:hover {
	border-color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
}
.wc-block-checkout__shipping-method-option--selected {
	border: 2px solid var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	background: #F8FBFF !important;
	color: inherit !important;
}
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title,
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-price,
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-icon {
	color: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	fill: var(--wp--preset--color--brand-blue, #0B6BFF);
}

/* La tarjeta del checkout NO inventa componentes: reutiliza la lista de datos
   de la página de Contacto (`mx-contact__channels`), los botones de bloques y
   el botón de WhatsApp del carrito. Aquí sólo va la colocación. */
.mx-retiro-info {
	margin: 14px 0 0;
	padding: 18px;
	border: 1px solid var(--wp--preset--color--brand-border, #CFE0FF);
	border-radius: 14px;
	background: var(--wp--preset--color--brand-soft, #EAF2FF);
}
.mx-retiro-info__title {
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--foreground, #0B1B34);
}
.mx-retiro-info__lista { margin: 10px 0 0; }
.mx-retiro-info__lista li { border-top-color: var(--wp--preset--color--brand-border, #CFE0FF); }
.mx-retiro-info__lista li:last-child { border-bottom-color: var(--wp--preset--color--brand-border, #CFE0FF); }
.mx-retiro-info__lista a { color: var(--wp--preset--color--foreground, #0B1B34); text-decoration: none; font-weight: 500; }
.mx-retiro-info__lista a:hover { color: var(--wp--preset--color--brand-blue, #0B6BFF); }
/* El botón hereda el azul de marca del sitio, el mismo de
   `.mx-contact-form__submit` y del botón de pedido del checkout: el estilo
   `is-style-outline` no está registrado en este tema y cae en casi negro. */
.mx-retiro-info__acciones,
.mx-retiro__acciones { margin: 16px 0 0; }
.mx-retiro-info__acciones .wp-block-button__link,
.mx-retiro__acciones .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--brand-blue, #0B6BFF) !important;
	color: #fff !important;
	border: 0;
	border-radius: 11px;
	font-weight: 700;
	font-size: 15px;
	padding: 14px;
	text-align: center;
	text-decoration: none !important;
	transition: background .15s ease, transform .1s ease;
}
.mx-retiro-info__acciones .wp-block-button__link:hover,
.mx-retiro__acciones .wp-block-button__link:hover { background: var(--wp--preset--color--brand-blue-hover, #0057D8) !important; }
.mx-retiro-info__acciones .wp-block-button__link:active,
.mx-retiro__acciones .wp-block-button__link:active { transform: scale(.99); }
.mx-retiro-info__wa { min-height: 48px; margin-top: 10px; font-size: 14px; }
.mx-retiro-info__plazo,
.mx-retiro__plazo {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #FEF3C7;
	color: #92400E;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 600;
}
.mx-retiro-info__hint {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary, #64748B);
}

/* Confirmación y Mi cuenta: la tarjeta reutiliza la piel .mx-ach y la lista de
   datos de Contacto; aquí sólo el color (informativa en azul, ámbar cuando hay
   dinero pendiente) y la colocación. */
.mx-ach.mx-retiro { border-color: var(--wp--preset--color--brand-blue, #0B6BFF); }
.mx-ach.mx-retiro .mx-ach__badge { background: var(--wp--preset--color--brand-soft, #EAF2FF); color: #1E40AF; }
.mx-ach.mx-retiro--cobrar { border-color: var(--wp--preset--color--promo, #F59E0B); }
.mx-ach.mx-retiro--cobrar .mx-ach__badge { background: #FEF3C7; color: #92400E; }
.mx-retiro__lista { margin: 0 0 4px; }
.mx-retiro__lista a { color: var(--wp--preset--color--foreground, #0B1B34); text-decoration: none; font-weight: 500; }
.mx-retiro__lista a:hover { color: var(--wp--preset--color--brand-blue, #0B6BFF); }


@media (max-width: 480px) {
	.mx-retiro-info { padding: 16px 14px; }
}