/* ==========================================================================
   MELOMAN — Design tokens
   Paleta: fondo ciruela-negro, violeta eléctrico + verde menta neón,
   como un ecualizador encendido en un cuarto oscuro.
   Tipografía: Archivo Black (display) + Inter (cuerpo)
   ========================================================================== */

:root {
	--ml-bg: #120e1a;
	--ml-bg-soft: #1b1526;
	--ml-bg-card: #201a2e;
	--ml-text: #f3f1f7;
	--ml-text-soft: #8b87a0;
	--ml-line: rgba(243, 241, 247, 0.10);
	--ml-primary: #7c5cfc;
	--ml-accent: #33e6b0;
	--ml-navbar-bg: #120e1a;
	--ml-footer-bg: #0c0910;

	--ml-font-display: 'Archivo Black', Impact, sans-serif;
	--ml-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--ml-radius: 10px;
	--ml-container: 1280px;
	--ml-gap: 22px;
	--ml-header-h: 78px;
}

/* Modo claro */
html[data-ml-mode="light"] {
	--ml-bg: #f7f6fb;
	--ml-bg-soft: #ffffff;
	--ml-bg-card: #ffffff;
	--ml-text: #1a1626;
	--ml-text-soft: #6b6580;
	--ml-line: rgba(26, 22, 38, 0.10);
	--ml-navbar-bg: #ffffff;
	--ml-footer-bg: #ffffff;
}
html[data-ml-mode="light"] .ml-header,
html[data-ml-mode="light"] .ml-footer { box-shadow: 0 1px 0 var(--ml-line); }
html[data-ml-mode="light"] .ml-icon-sun { display: block; }
html[data-ml-mode="light"] .ml-icon-moon { display: none; }
.ml-icon-moon { display: block; }
.ml-icon-sun { display: none; }

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ml-bg);
	color: var(--ml-text);
	font-family: var(--ml-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background .2s ease, color .2s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--ml-font-display); text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 0.5em; line-height: 1.08; }
button { font-family: inherit; cursor: pointer; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 9999; background: var(--ml-primary); color: #fff; padding: 10px 16px; border-radius: var(--ml-radius); }
:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: 2px; }

.ml-container { max-width: var(--ml-container); margin: 0 auto; padding: 0 24px; }
.ml-section { padding: 60px 0; }
.ml-section.ml-alt { background: var(--ml-bg-soft); }
.ml-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.ml-section-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.ml-link { color: var(--ml-accent); font-weight: 600; border-bottom: 1px solid transparent; }
.ml-link:hover { border-color: var(--ml-accent); }

.ml-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border-radius: 999px; font-weight: 700; letter-spacing: 0.02em; border: 2px solid transparent; transition: transform .15s ease, background .15s ease; }
.ml-btn-primary { background: var(--ml-primary); color: #fff; }
.ml-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.1); }
.ml-btn-outline { border-color: var(--ml-text); color: var(--ml-text); }

/* Acceso flotante a WhatsApp */
.ml-whatsapp-button {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 19px 13px 14px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-weight: 700;
	box-shadow: 0 10px 28px rgba(10, 94, 45, .32);
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.ml-whatsapp-button:hover { background: #1fbd59; color: #fff; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10, 94, 45, .42); }
.ml-whatsapp-button-icon { width: 28px; height: 28px; flex: 0 0 auto; }
@media (max-width: 600px) {
	.ml-whatsapp-button { right: 16px; bottom: 16px; padding: 13px; }
	.ml-whatsapp-button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.ml-btn-outline:hover { background: var(--ml-text); color: var(--ml-bg); }

/* ==========================================================================
   Header / navbar
   ========================================================================== */
.ml-header { background: var(--ml-navbar-bg); position: sticky; top: 0; z-index: 500; transition: background .2s ease, box-shadow .2s ease; }
.ml-header-border { border-bottom: 1px solid var(--ml-line); }
.ml-header.is-shrunk { box-shadow: 0 8px 24px rgba(18,14,26,.08); }
.ml-header-inner { display: flex; align-items: center; gap: 20px; height: var(--ml-header-h); transition: height .2s ease; }
.ml-header.is-shrunk .ml-header-inner { height: calc(var(--ml-header-h) - 18px); }
.ml-header.is-shrunk .custom-logo { max-height: 36px; }
.ml-navbar-fixed .ml-header { position: fixed; left: 0; right: 0; }
.ml-navbar-fixed main.ml-site-main { margin-top: var(--ml-header-h); }

.ml-hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.ml-hamburger span { width: 22px; height: 2px; background: var(--ml-text); border-radius: 2px; }

.ml-site-branding { flex-shrink: 0; }
.ml-site-title { font-family: var(--ml-font-display); font-size: 1.4rem; color: var(--ml-text); }
.custom-logo { max-height: 46px; width: auto; }

.ml-primary-nav { flex: 1; display: flex; justify-content: center; }
.ml-primary-menu { display: flex; gap: clamp(16px, 2vw, 30px); align-items: center; }
.ml-primary-menu > li { position: relative; }
.ml-primary-menu a { font-weight: 650; font-size: 0.82rem; letter-spacing: 0.035em; text-transform: uppercase; position: relative; padding: 10px 0; }
.ml-primary-menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ml-accent); transform: scaleX(0); transition: transform .2s ease; }
.ml-primary-menu a:hover::after, .ml-primary-menu li.current-menu-item a::after { transform: scaleX(1); }
.ml-primary-menu > li.menu-item-has-children > a { padding-right: 16px; }
.ml-primary-menu > li.menu-item-has-children > a::before { content: '▾'; position: absolute; right: 0; top: 50%; transform: translateY(-48%); font-size: 0.72rem; line-height: 1; }
.ml-primary-menu .sub-menu {
	display: none; position: absolute; top: 100%; left: -14px; z-index: 800;
	min-width: 220px; padding: 8px; background: var(--ml-bg-card); border: 1px solid var(--ml-line);
	border-radius: var(--ml-radius); box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.ml-primary-menu li:hover > .sub-menu,
.ml-primary-menu li:focus-within > .sub-menu { display: block; }
.ml-primary-menu .sub-menu li { position: relative; }
.ml-primary-menu .sub-menu a { display: block; padding: 10px 12px; border-radius: 6px; white-space: nowrap; }
.ml-primary-menu .sub-menu a:hover,
.ml-primary-menu .sub-menu a:focus { background: var(--ml-bg-soft); }
.ml-primary-menu .sub-menu .sub-menu { top: -8px; left: calc(100% + 8px); }

.ml-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ml-icon-btn { position: relative; color: var(--ml-text); background: none; border: none; display: inline-flex; padding: 4px; }
.ml-mode-toggle svg { display: block; }
.ml-cart-count { position: absolute; top: -6px; right: -8px; background: var(--ml-accent); color: var(--ml-bg); font-size: 0.62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.ml-search-panel { max-height: 0; overflow: hidden; background: var(--ml-bg-soft); transition: max-height .25s ease; }
.ml-search-panel.is-open { max-height: 80vh; overflow-y: auto; }
.ml-search-panel .ml-container { padding: 16px 24px; }
.ml-search-form, .search-form { display: flex; gap: 8px; }
.ml-search-form input, .search-form input { flex: 1; background: var(--ml-bg); border: 1px solid var(--ml-line); color: var(--ml-text); padding: 10px 14px; border-radius: var(--ml-radius); }
.ml-search-form button, .search-form button { background: var(--ml-accent); color: var(--ml-bg); border: none; padding: 0 18px; border-radius: var(--ml-radius); font-weight: 700; }

/* Autocompletado */
.ml-search-results { display: none; margin-top: 14px; max-height: 60vh; overflow-y: auto; border-top: 1px solid var(--ml-line); padding-top: 10px; }
.ml-search-results.is-open { display: block; }
.ml-search-group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ml-text-soft); padding: 10px 4px 6px; }
.ml-search-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--ml-radius); }
.ml-search-result-item:hover, .ml-search-result-item.is-active { background: var(--ml-bg-card); }
.ml-search-result-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.ml-search-result-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ml-search-result-product .ml-search-result-title { font-size: 0.92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-search-result-artist-name { font-size: 0.76rem; color: var(--ml-text-soft); }
.ml-search-result-price { font-size: 0.82rem; color: var(--ml-accent); font-weight: 700; white-space: nowrap; }
.ml-search-result-artist .ml-search-result-meta { color: var(--ml-text-soft); font-size: 0.78rem; }
.ml-search-loading, .ml-search-empty { padding: 10px 4px; color: var(--ml-text-soft); font-size: 0.88rem; }
.ml-search-view-all { display: block; text-align: center; margin-top: 8px; padding: 10px; font-size: 0.82rem; font-weight: 700; color: var(--ml-accent); border-top: 1px solid var(--ml-line); }
.ml-search-view-all:hover { color: var(--ml-text); }

/* ==========================================================================
   Sidenav off-canvas
   ========================================================================== */
.ml-sidenav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 600; }
.ml-sidenav-overlay.is-open { opacity: 1; visibility: visible; }

.ml-sidenav {
	position: fixed; top: 0; bottom: 0; width: min(340px, 86vw);
	background: var(--ml-bg-soft); z-index: 700; padding: 28px 26px;
	overflow-y: auto; transition: transform .3s ease;
}
.ml-sidenav-right .ml-sidenav { right: 0; transform: translateX(100%); }
.ml-sidenav-left .ml-sidenav { left: 0; transform: translateX(-100%); }
.ml-sidenav.is-open { transform: translateX(0); }

.ml-sidenav-close { position: absolute; top: 20px; right: 22px; background: none; border: none; color: var(--ml-text); font-size: 1.8rem; line-height: 1; }
.ml-sidenav-nav { margin-top: 40px; }
.ml-sidenav-menu li { border-bottom: 1px solid var(--ml-line); }
.ml-sidenav-menu a { display: block; padding: 14px 2px; font-weight: 600; text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.02em; }
.ml-sidenav-widgets { margin-top: 30px; }
.ml-social-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.ml-social-links a { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--ml-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ml-footer { background: var(--ml-footer-bg); border-top: 1px solid var(--ml-line); margin-top: 70px; padding-top: 52px; }
.ml-footer-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 36px; }
.ml-footer-brand p { color: var(--ml-text-soft); max-width: 30ch; }
.footer-widget-title { font-size: 0.88rem; margin-bottom: 12px; color: var(--ml-accent); }
.footer-widget ul, .ml-footer-menu { display: flex; flex-direction: column; gap: 8px; }
.footer-widget a, .ml-footer-menu a { color: var(--ml-text-soft); }
.footer-widget a:hover, .ml-footer-menu a:hover { color: var(--ml-text); }
.ml-footer-bottom { border-top: 1px solid var(--ml-line); padding: 18px 0; display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ml-text-soft); flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Carousel (vanilla, sin dependencias)
   ========================================================================== */
.ml-carousel { position: relative; }
.ml-carousel-track { display: flex; gap: var(--ml-gap); overflow-x: hidden; scroll-behavior: smooth; }
.ml-carousel-track::-webkit-scrollbar { display: none; }
.ml-carousel-track > * { flex: 0 0 auto; }
.ml-categories-carousel .ml-carousel-track > *,
.ml-products-carousel .ml-carousel-track > * { width: calc((100% - var(--ml-gap) * 3) / 4); }
.ml-carousel-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ml-line);
	background: var(--ml-bg-card); color: var(--ml-text); font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
	z-index: 5;
}
.ml-carousel-prev { left: -6px; }
.ml-carousel-next { right: -6px; }
.ml-carousel-arrow:hover { background: var(--ml-primary); color: #fff; }
.ml-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; position: absolute; bottom: 20px; left: 0; right: 0; }
.ml-carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; }
.ml-carousel-dots span.is-active { background: var(--ml-accent); }

/* ==========================================================================
   Product cards (compartido: grid y carousels)
   ========================================================================== */
.ml-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ml-gap); }
.ml-product-card { display: flex; flex-direction: column; height: 100%; background: var(--ml-bg-card); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); overflow: hidden; box-shadow: 0 1px 1px rgba(18,14,26,.02); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ml-product-card:hover { transform: translateY(-4px); border-color: var(--ml-primary); box-shadow: 0 14px 28px rgba(18,14,26,.10); }
.ml-product-card-link { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ml-product-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.ml-product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ml-product-card:hover .ml-product-card-media img { transform: scale(1.03); }
.ml-badge-sale { position: absolute; top: 10px; left: 10px; background: var(--ml-accent); color: var(--ml-bg); font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; z-index: 2; }
.ml-product-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ml-product-artist { font-size: 0.7rem; color: var(--ml-text-soft); text-transform: uppercase; letter-spacing: 0.065em; padding: 14px 14px 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-product-card-title { font-family: var(--ml-font-body); font-size: 0.95rem; font-weight: 650; line-height: 1.32; text-transform: none; padding: 5px 14px 0; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ml-product-category { font-size: 0.72rem; color: var(--ml-text-soft); padding: 7px 14px 0; min-height: 28px; }
.ml-product-category a { color: var(--ml-text-soft); border-bottom: 1px solid transparent; }
.ml-product-category a:hover { color: var(--ml-accent); border-color: var(--ml-accent); }
.ml-product-card-price { padding: 8px 14px 0; margin-top: auto; color: var(--ml-accent); font-weight: 700; }
.ml-product-card-price del { color: var(--ml-text-soft); opacity: .7; font-weight: 400; margin-right: 6px; }
.ml-product-card-price ins { text-decoration: none; }

/* Píldoras de categoría en la página de producto individual */
.ml-product-category-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.ml-category-pill {
	font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
	padding: 5px 14px; border-radius: 999px; border: 1px solid var(--ml-line); color: var(--ml-text-soft);
}
.ml-category-pill:hover { border-color: var(--ml-primary); color: var(--ml-primary); }
.ml-product-card-cta { padding: 14px; }
.ml-product-card-cta .button, .ml-product-card-cta .add_to_cart_button {
	display: block; text-align: center; background: transparent; border: 1px solid var(--ml-primary); color: var(--ml-primary);
	padding: 8px 10px; border-radius: var(--ml-radius); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.ml-product-card-cta .button:hover { background: var(--ml-primary); color: #fff; }

/* Franja de confianza de la portada. Da contexto de compra justo después
   del hero sin competir visualmente con el catálogo. */
.ml-home-trust { background: var(--ml-bg-card); border-bottom: 1px solid var(--ml-line); }
.ml-home-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ml-home-trust-item { display: flex; align-items: center; gap: 13px; min-height: 88px; padding: 18px 26px; border-right: 1px solid var(--ml-line); }
.ml-home-trust-item:last-child { border-right: 0; }
.ml-home-trust-item > .dashicons { width: 28px; height: 28px; font-size: 28px; color: var(--ml-primary); flex: 0 0 auto; }
.ml-home-trust-item div { min-width: 0; }
.ml-home-trust-item strong, .ml-home-trust-item span { display: block; }
.ml-home-trust-item strong { font-size: .84rem; letter-spacing: .01em; }
.ml-home-trust-item span { margin-top: 3px; color: var(--ml-text-soft); font-size: .76rem; line-height: 1.35; }

/* ==========================================================================
   Home: categorías carousel
   ========================================================================== */
.ml-category-card { position: relative; aspect-ratio: 3/4; border-radius: var(--ml-radius); overflow: hidden; background: var(--ml-bg-card); border: 1px solid var(--ml-line); display: flex; align-items: flex-end; padding: 14px; width: calc((100% - var(--ml-gap) * 4) / 5) !important; }
.ml-category-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; transition: opacity .2s ease, transform .3s ease; }
.ml-category-card:hover .ml-category-card-bg { opacity: .85; transform: scale(1.06); }
.ml-category-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,14,26,0.92), rgba(18,14,26,0.05) 60%); }
.ml-category-card-label { position: relative; z-index: 1; font-family: var(--ml-font-display); font-size: 0.9rem; text-transform: uppercase; }

/* ==========================================================================
   Home: bloques destacados (feat items)
   ========================================================================== */
.ml-feat-items-grid { display: grid; grid-template-columns: repeat(var(--ml-feat-cols, 3), 1fr); gap: var(--ml-gap); }
.ml-feat-item { position: relative; aspect-ratio: 4/3; border-radius: var(--ml-radius); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 24px; }
.ml-feat-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,14,26,0.85), rgba(18,14,26,0.05) 55%); }
.ml-feat-item-content { position: relative; z-index: 1; }
.ml-feat-item-content h3 { font-size: 1.2rem; margin-bottom: 6px; }
.ml-feat-item-content p { color: var(--ml-text-soft); font-size: 0.85rem; margin: 0; }

/* ==========================================================================
   Home: elementos (beneficios)
   ========================================================================== */
.ml-elements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ml-gap); text-align: center; }
.ml-element { padding: 24px 12px; }
.ml-element .dashicons { font-size: 2.2rem; width: 2.2rem; height: 2.2rem; color: var(--ml-accent); margin-bottom: 12px; }
.ml-element h3 { font-size: 1rem; margin-bottom: 6px; }
.ml-element p { color: var(--ml-text-soft); font-size: 0.85rem; margin: 0; }

/* ==========================================================================
   Blog / páginas genéricas
   ========================================================================== */
.ml-blog-wrap, .ml-page-wrap { padding: 52px 0; }
.ml-archive-title { margin-bottom: 30px; }
.ml-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ml-gap); }
.ml-post-card { background: var(--ml-bg-card); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); overflow: hidden; }
.ml-post-thumb img { aspect-ratio: 16/10; object-fit: cover; }
.ml-post-body { padding: 18px; }
.ml-post-title { font-size: 1.05rem; margin-bottom: 8px; }
.ml-post-excerpt { color: var(--ml-text-soft); font-size: 0.9rem; margin-bottom: 10px; }
.ml-pagination { margin-top: 36px; display: flex; gap: 8px; }
.ml-page-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 22px; }
.ml-page-content { max-width: 76ch; }
.ml-post-hero-image { margin-bottom: 22px; border-radius: var(--ml-radius); overflow: hidden; }
.ml-post-meta { color: var(--ml-text-soft); font-size: 0.85rem; margin-bottom: 6px; }

/* Página A-Z Artistas */
.ml-az-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 30px; }
.ml-az-nav a { width: 32px; height: 32px; border: 1px solid var(--ml-line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.ml-az-nav a:hover { background: var(--ml-primary); color: #fff; }
.ml-az-columns { columns: 4; column-gap: 32px; }
.ml-az-group { break-inside: avoid; margin-bottom: 24px; }
.ml-az-letter { font-size: 1.1rem; color: var(--ml-accent); margin-bottom: 10px; }
.ml-az-group ul { display: flex; flex-direction: column; gap: 6px; }
.ml-az-group a span { color: var(--ml-text-soft); font-size: 0.8rem; }

/* Categorías (página) */
.ml-cat-page-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ml-gap); }
.ml-cat-page-card { position: relative; aspect-ratio: 1/1; border-radius: var(--ml-radius); overflow: hidden; background: var(--ml-bg-card); border: 1px solid var(--ml-line); display: flex; align-items: flex-end; padding: 16px; }
.ml-cat-page-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.ml-cat-page-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,14,26,0.9), rgba(18,14,26,0.05) 60%); }
.ml-cat-page-card-label { position: relative; z-index: 1; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.ml-cat-page-card-count { background: var(--ml-accent); color: var(--ml-bg); font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; }

/* Formularios (registro / contacto genérico) */
.ml-register-form, .ml-contact-form { max-width: 480px; }
.ml-register-form input, .ml-contact-form input, .ml-contact-form textarea {
	width: 100%; background: var(--ml-bg-card); border: 1px solid var(--ml-line); color: var(--ml-text);
	padding: 12px 14px; border-radius: var(--ml-radius); margin-top: 6px;
}
.ml-form-errors { background: var(--ml-bg-card); border-left: 4px solid #ff5c7a; padding: 14px 18px; border-radius: var(--ml-radius); margin-bottom: 20px; }
.ml-form-success { background: var(--ml-bg-card); border-left: 4px solid var(--ml-accent); padding: 14px 18px; border-radius: var(--ml-radius); margin-bottom: 20px; }
.ml-register-login-link { margin-top: 18px; color: var(--ml-text-soft); }

/* Página de Newsletter */
.ml-newsletter-card {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
	background: linear-gradient(135deg, var(--ml-bg-card), var(--ml-bg-soft));
	border: 1px solid var(--ml-line); border-radius: var(--ml-radius);
	padding: 44px; margin-top: 20px;
}
.ml-newsletter-card-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.ml-newsletter-card-sub { color: var(--ml-text-soft); margin: 0 0 16px; max-width: 42ch; }
.ml-newsletter-incentive {
	display: inline-block; background: var(--ml-accent); color: var(--ml-bg); font-weight: 800;
	font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 14px; border-radius: 999px;
}
.ml-newsletter-signup-row { display: flex; gap: 10px; }
.ml-newsletter-signup-row input {
	flex: 1; background: var(--ml-bg); border: 1px solid var(--ml-line); color: var(--ml-text);
	padding: 14px 16px; border-radius: var(--ml-radius);
}
.ml-newsletter-signup-row .ml-btn { white-space: nowrap; }
.ml-newsletter-disclaimer { font-size: 0.76rem; color: var(--ml-text-soft); margin: 12px 0 0; }

@media (max-width: 768px) {
	.ml-newsletter-card { grid-template-columns: 1fr; padding: 28px; }
	.ml-newsletter-signup-row { flex-direction: column; }
}

/* Franja de suscripción en el footer de la portada */
.ml-footer-newsletter { background: var(--ml-primary); }
.ml-footer-newsletter { color: #fff; }
.ml-footer-newsletter-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 28px;
	padding: 30px 24px; flex-wrap: wrap;
}
.ml-footer-newsletter-copy h3 { font-size: 1.2rem; margin-bottom: 6px; color: #fff; }
.ml-footer-newsletter-copy .ml-newsletter-incentive { background: #fff; color: var(--ml-primary); }
.ml-footer-newsletter-form { flex: 0 0 auto; min-width: 320px; }
.ml-footer-newsletter-form .ml-newsletter-signup-row input { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.ml-footer-newsletter-form .ml-newsletter-signup-row input::placeholder { color: rgba(255,255,255,0.7); }
.ml-footer-newsletter-form .ml-btn-primary { background: #fff; color: #4d35ba; border-color: #fff; }
.ml-footer-newsletter-form .ml-btn-primary:hover { background: #f0ecff; color: #37258b; }
.ml-footer-newsletter .ml-newsletter-consent,
.ml-footer-newsletter .ml-newsletter-disclaimer { color: rgba(255,255,255,.92); }
.ml-footer-newsletter .ml-newsletter-consent a { color: #fff; }
.ml-footer-newsletter .ml-newsletter-consent input { accent-color: #fff; }
.ml-footer-newsletter-form .ml-form-success,
.ml-footer-newsletter-form .ml-form-errors { background: rgba(255,255,255,0.12); border-left-color: #fff; color: #fff; }

@media (max-width: 768px) {
	.ml-footer-newsletter-inner { flex-direction: column; align-items: stretch; text-align: center; }
	.ml-footer-newsletter-form { min-width: 0; }
	.ml-footer-newsletter-form .ml-newsletter-signup-row { flex-direction: column; }
}

/* ==========================================================================
   WooCommerce — catálogo
   ========================================================================== */
.ml-shop-wrap { padding: 44px 0 76px; }
.ml-shop-layout { display: grid; grid-template-columns: 1fr 280px; gap: 38px; align-items: start; }
.woocommerce-breadcrumb { color: var(--ml-text-soft); font-size: 0.85rem; margin-bottom: 22px; }
.woocommerce-breadcrumb a { color: var(--ml-text-soft); }
.woocommerce-products-header__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 6px; }
.woocommerce-result-count, .woocommerce-ordering { color: var(--ml-text-soft); font-size: 0.85rem; }
.ml-offers-header { margin-bottom: 30px; }
.ml-offers-header p:last-child { max-width: 58ch; margin: 8px 0 0; color: var(--ml-text-soft); }
.ml-section-eyebrow { margin: 0 0 7px; color: var(--ml-accent); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.woocommerce-ordering select { background: var(--ml-bg-card); color: var(--ml-text); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); padding: 6px 10px; }

ul.products { display: grid !important; grid-template-columns: repeat(var(--ml-shop-columns, 4), minmax(0, 1fr)); grid-auto-flow: row; gap: var(--ml-gap); margin: 0 0 30px !important; padding: 0 !important; }
/* El CSS nativo de WooCommerce añade dos pseudo-elementos para limpiar floats.
   Dentro de CSS Grid se convierten en dos celdas vacías y desplazan los
   productos; además cada <li> conserva un ancho porcentual. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { display: flex !important; flex-direction: column; width: auto !important; min-width: 0; float: none !important; clear: none !important; margin: 0 !important; grid-column: auto !important; }
ul.products li.product {
	list-style: none; display: flex !important; flex-direction: column; min-height: 100%; background: var(--ml-bg-card); border: 1px solid var(--ml-line); border-radius: var(--ml-radius);
	padding: 0 0 16px; position: relative; box-shadow: 0 1px 1px rgba(18,14,26,.02); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
ul.products li.product:hover { transform: translateY(-4px); border-color: var(--ml-primary); box-shadow: 0 14px 28px rgba(18,14,26,.10); }
ul.products li.product > a:first-child { display: block; }
ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--ml-radius) var(--ml-radius) 0 0; }
/* WooCommerce usa selectores más específicos para la miniatura del loop.
   Forzamos que la portada ocupe todo el ancho de su tarjeta, incluso cuando
   el archivo original mide solo 300 px o un plugin añade estilos propios. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}
ul.products li.product .woocommerce-loop-product__title { font-family: var(--ml-font-body); font-size: 0.94rem; font-weight: 650; line-height: 1.32; text-transform: none; padding: 6px 14px 4px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
ul.products li.product .ml-product-category { order: 1; padding-top: 8px; }
ul.products li.product .price { padding: 8px 14px 0; margin-top: auto; color: var(--ml-accent); font-weight: 700; }
ul.products li.product .price del { color: var(--ml-text-soft); opacity: .7; font-weight: 400; margin-right: 6px; }
ul.products li.product .star-rating { margin: 6px 14px 0; }
ul.products li.product .button {
	display: block; margin: 14px 14px 0; text-align: center; background: transparent; border: 1px solid var(--ml-primary); color: var(--ml-primary);
	padding: 8px 10px; border-radius: var(--ml-radius); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
ul.products li.product .button:hover { background: var(--ml-primary); color: #fff; }
ul.products li.product .onsale {
	position: absolute; top: 12px; left: 12px; background: var(--ml-accent); color: var(--ml-bg); font-size: 0.68rem; font-weight: 800;
	padding: 4px 10px; border-radius: 999px; text-transform: uppercase; min-height: auto; min-width: auto; line-height: 1.4;
}

.ml-shop-sidebar .shop-widget { background: var(--ml-bg-card); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); padding: 20px; margin-bottom: 20px; }
.ml-shop-sidebar .shop-widget-title { font-size: 0.88rem; color: var(--ml-accent); margin-bottom: 12px; }

.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination { display: flex !important; justify-content: center; width: 100%; clear: both; }
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul.page-numbers li { display: block !important; flex: 0 0 auto !important; width: auto !important; float: none !important; clear: none !important; margin: 0 !important; border: 0 !important; }
.woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ml-line); border-radius: var(--ml-radius); }
.woocommerce-pagination .page-numbers.current { background: var(--ml-primary); border-color: var(--ml-primary); color: #fff; }
/* Regla final para temas/plugins que asignan a los <li> el ancho completo. */
body.woocommerce .woocommerce-pagination ul.page-numbers,
body.woocommerce-page .woocommerce-pagination ul.page-numbers { display: flex !important; flex-flow: row nowrap !important; width: max-content !important; max-width: 100%; overflow-x: auto; }
body.woocommerce .woocommerce-pagination ul.page-numbers > li,
body.woocommerce-page .woocommerce-pagination ul.page-numbers > li { display: block !important; flex: 0 0 36px !important; width: 36px !important; max-width: 36px !important; min-width: 36px !important; }

.ml-artist-header { margin-bottom: 30px; }
.ml-artist-bio { color: var(--ml-text-soft); max-width: 70ch; }

/* Widget de filtros (Artista / Año / Formato) */
.ml-filter-widget { display: flex; flex-direction: column; gap: 18px; }
.ml-filter-group { border-top: 1px solid var(--ml-line); padding-top: 14px; }
.ml-filter-group:first-child { border-top: none; padding-top: 0; }
.ml-filter-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ml-text-soft); margin-bottom: 10px; }
.ml-filter-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.ml-filter-list label { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; cursor: pointer; }
.ml-filter-list span { color: var(--ml-text-soft); font-size: 0.78rem; }
.ml-filter-group select { width: 100%; background: var(--ml-bg); border: 1px solid var(--ml-line); color: var(--ml-text); padding: 10px; border-radius: var(--ml-radius); }
.ml-filter-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ml-filter-apply { width: 100%; padding: 11px 20px; font-size: 0.85rem; }
.ml-filter-clear { font-size: 0.8rem; }

/* Consentimiento explícito para el newsletter */
.ml-newsletter-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 0.78rem; color: var(--ml-text-soft); line-height: 1.45; }
.ml-newsletter-consent input { flex: 0 0 auto; margin-top: 3px; }
.ml-newsletter-consent a { color: inherit; text-decoration: underline; }

/* Página de contacto */
.ml-contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; margin-top: 10px; }
.ml-contact-item { margin-bottom: 20px; }
.ml-contact-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ml-accent); margin-bottom: 4px; }
.ml-contact-item p { margin: 0; }
.ml-contact-map { margin-top: 24px; border-radius: var(--ml-radius); overflow: hidden; border: 1px solid var(--ml-line); }
.ml-contact-map iframe { width: 100%; height: 260px; border: 0; display: block; }
.ml-contact-form label { display: block; margin-bottom: 16px; font-size: 0.88rem; }
.ml-contact-form input, .ml-contact-form textarea { margin-top: 6px; }

/* ==========================================================================
   WooCommerce — producto individual
   ========================================================================== */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }
.woocommerce div.product div.images { grid-row: span 2; }
.woocommerce div.product div.images img { border-radius: var(--ml-radius); border: 1px solid var(--ml-line); }

/* Galería de producto: la miniatura ya viene con marcado propio de
   WooCommerce (flexslider), pero al desactivar su CSS por defecto
   (woocommerce_enqueue_styles) también se pierde el layout de esa tira
   de miniaturas — sin estas reglas, el navegador las apila verticalmente
   como una lista normal. Esto las vuelve a poner en fila horizontal. */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; padding: 0; list-style: none; }
.woocommerce-product-gallery__image { margin: 0; }
.woocommerce-product-gallery img { width: 100%; height: auto; display: block; }
.woocommerce-product-gallery .flex-viewport { margin-bottom: 0; }

.flex-control-nav,
.flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.flex-control-nav li,
.flex-control-thumbs li {
	width: 72px;
	height: 72px;
	list-style: none;
	flex: 0 0 auto;
}
.flex-control-nav li img,
.flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity .15s ease, border-color .15s ease;
}
.flex-control-nav li img:hover,
.flex-control-thumbs li img:hover,
.flex-control-nav li img.flex-active,
.flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--ml-primary);
}
.woocommerce div.product .product_title { font-family: var(--ml-font-display); font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ml-accent); font-size: 1.4rem; font-weight: 700; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--ml-text); opacity: .85; margin: 16px 0; }
.woocommerce div.product form.cart { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.woocommerce div.product form.cart .quantity input { width: 62px; background: var(--ml-bg-card); border: 1px solid var(--ml-line); color: var(--ml-text); padding: 12px; border-radius: var(--ml-radius); text-align: center; }
.woocommerce div.product form.cart button.single_add_to_cart_button { background: var(--ml-primary); color: #fff; border: none; padding: 14px 30px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { filter: brightness(1.1); }
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 44px; border-top: 1px solid var(--ml-line); padding-top: 22px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 22px; list-style: none; padding: 0; margin-bottom: 18px; }
.woocommerce-tabs ul.tabs li a { font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ml-text-soft); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ml-text); border-bottom: 2px solid var(--ml-primary); padding-bottom: 6px; }
.related.products { grid-column: 1 / -1; margin-top: 44px; }
.related.products > h2 { font-size: 1.4rem; margin-bottom: 18px; }

/* Aviso solo visible para administradores logueados, cuando un
   carousel de producto configurado con un slug inválido o sin
   productos no puede mostrarse tal como se configuró. */
.ml-admin-debug-notice {
	background: #3a1a1a; color: #ffb3b3; border: 1px dashed #ff5c7a;
	border-radius: var(--ml-radius); padding: 10px 16px; font-size: 0.82rem;
	margin-bottom: 16px;
}

/* Meta del producto (SKU, categorías, etiquetas) que trae WooCommerce
   por defecto al final del resumen. Las categorías ya se muestran arriba
   como píldoras junto al título, así que aquí se ocultan para no
   duplicarlas; se conservan SKU y etiquetas. */
.product_meta { grid-column: 1 / -1; margin-top: 20px; font-size: 0.85rem; color: var(--ml-text-soft); }
.product_meta > span { display: block; margin-bottom: 4px; }
.product_meta .posted_in { display: none; }
.product_meta a { color: var(--ml-text-soft); border-bottom: 1px solid transparent; }
.product_meta a:hover { color: var(--ml-accent); border-color: var(--ml-accent); }

/* ==========================================================================
   WooCommerce — carrito / checkout / mi cuenta
   ========================================================================== */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { border-bottom: 1px solid var(--ml-line); padding: 14px 10px; text-align: left; }
.woocommerce-cart table.shop_table thead th { color: var(--ml-accent); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.02em; }
.woocommerce button.button, .woocommerce input.button, .woocommerce a.button, #place_order {
	background: var(--ml-primary); color: #fff; border: none; padding: 14px 28px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, #place_order:hover { filter: brightness(1.1); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce-checkout textarea {
	background: var(--ml-bg-card); border: 1px solid var(--ml-line); color: var(--ml-text); padding: 12px; border-radius: var(--ml-radius); width: 100%;
}
.woocommerce-checkout-review-order-table, .woocommerce-account .woocommerce-MyAccount-navigation ul { background: var(--ml-bg-card); border: 1px solid var(--ml-line); border-radius: var(--ml-radius); padding: 20px; }
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	background: var(--ml-bg-card); border-left: 4px solid var(--ml-accent); padding: 14px 18px; border-radius: var(--ml-radius); list-style: none; margin-bottom: 22px;
}
/* WooCommerce añade un pictograma mediante una fuente propia. Como el tema
   no carga esa fuente, algunos navegadores muestran letras superpuestas.
   El borde de color ya comunica el tipo de aviso, por lo que ocultamos el
   pictograma y preservamos un mensaje legible. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before { content: none !important; display: none !important; }

/* Bloques modernos de WooCommerce */
.wc-block-cart, .wc-block-checkout { color: var(--ml-text); }
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-textarea { background: var(--ml-bg-card); color: var(--ml-text); border-color: var(--ml-line); border-radius: var(--ml-radius); }
.wc-block-components-button:not(.is-link) { background: var(--ml-primary); color: #fff; border-radius: 999px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	ul.products, .ml-product-grid, .ml-cat-page-grid { grid-template-columns: repeat(3, 1fr) !important; }
	.ml-categories-carousel .ml-carousel-track > *, .ml-products-carousel .ml-carousel-track > * { width: calc((100% - var(--ml-gap) * 2) / 3) !important; }
	.ml-shop-layout { grid-template-columns: 1fr; }
	.ml-footer-columns { grid-template-columns: 1fr 1fr 1fr; }
	.woocommerce div.product { grid-template-columns: 1fr; }
	.ml-elements-grid { grid-template-columns: repeat(2, 1fr); }
	.ml-home-trust-item { padding-left: 18px; padding-right: 18px; }
	.ml-az-columns { columns: 2; }
}

@media (max-width: 768px) {
	.ml-primary-nav { display: none; }
	.ml-shop-wrap { padding-top: 28px; }
	.woocommerce-result-count, .woocommerce-ordering { float: none !important; margin: 0 0 14px !important; }
	.woocommerce-ordering select { width: 100%; min-height: 44px; }
	.ml-contact-layout { grid-template-columns: 1fr; }
	ul.products, .ml-product-grid, .ml-cat-page-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.ml-categories-carousel .ml-carousel-track > *, .ml-products-carousel .ml-carousel-track > * { width: calc((100% - var(--ml-gap)) / 2) !important; }
	.ml-post-grid { grid-template-columns: 1fr; }
	.ml-footer-columns { grid-template-columns: 1fr 1fr; }
	.ml-feat-items-grid { grid-template-columns: 1fr !important; }
	.ml-elements-grid { grid-template-columns: 1fr; }
	.ml-home-trust-grid { grid-template-columns: 1fr; }
	.ml-home-trust-item { min-height: 0; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--ml-line); }
	.ml-home-trust-item:last-child { border-bottom: 0; }
	.woocommerce-cart-form, .woocommerce-checkout-review-order { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table { min-width: 620px; }
	.woocommerce-checkout .col2-set, .woocommerce-account .woocommerce { display: grid; grid-template-columns: 1fr; gap: 22px; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { padding: 14px; }
	.woocommerce div.product form.cart { flex-wrap: wrap; }
	.woocommerce div.product form.cart button.single_add_to_cart_button { flex: 1 1 220px; }
}

@media (max-width: 480px) {
	.ml-container { padding-left: 16px; padding-right: 16px; }
	.ml-header-inner { gap: 10px; }
	.ml-site-title { font-size: 1.05rem; }
	.ml-header-actions { gap: 8px; }
	ul.products, .ml-product-grid, .ml-cat-page-grid { gap: 12px; }
	ul.products li.product .woocommerce-loop-product__title { padding: 10px 10px 4px; font-size: 0.86rem; }
	ul.products li.product .price { padding: 0 10px; font-size: 0.9rem; }
	ul.products li.product .button { margin: 10px 10px 0; font-size: 0.72rem; }
	.woocommerce-tabs ul.tabs { gap: 14px; overflow-x: auto; white-space: nowrap; }
	.woocommerce button.button, .woocommerce input.button, .woocommerce a.button, #place_order { width: 100%; padding: 13px 18px; }
	.ml-footer-columns { grid-template-columns: 1fr; }
	.ml-az-columns { columns: 1; }
}