/* MonsterDrop — estilos base. Móvil primero, ligero, con variables. */

:root {
	--md-color-bg: #ffffff;
	--md-color-fg: #1a1a1a;
	--md-color-muted: #6b7280;
	--md-color-primary: #e11d48;
	--md-color-primary-dark: #be123c;
	--md-color-border: #e5e7eb;
	--md-color-accent: #16a34a;

	--md-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--md-radius: 10px;
	--md-gap: 1rem;
	--md-container: 1200px;

	--md-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--md-font);
	color: var(--md-color-fg);
	background: var(--md-color-bg);
	line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--md-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/*
 * Capa mínima de marca compartida entre las 16 plantillas de producto
 * (auditoría UX, tema #6). Cada plantilla define sus propios colores,
 * tipografía y radios con su propio prefijo (--lc-*, --mc-*, --bd-*...) y
 * eso NO se toca acá — el riesgo de romper alguna visualmente no vale la
 * mejora estética. Esto es, a propósito, solo lo que ninguna de las 16
 * plantillas define hoy por su cuenta, así que no compite con nada:
 * - Un estado de foco consistente y accesible al navegar con teclado
 *   (hoy varía "lo que el navegador traiga por defecto" de una plantilla a
 *   otra, porque ninguna define el suyo propio).
 * - Selección de texto y scroll a anclas (#getOrder, FAQ, etc.) con el
 *   mismo criterio en toda la tienda.
 * `:where()` le da especificidad cero al selector: si una plantilla llega a
 * definir su propio estado de foco más adelante, gana ella sin necesitar
 * !important acá.
 */
html { scroll-behavior: smooth; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--md-color-primary);
	outline-offset: 2px;
}

::selection {
	background: var(--md-color-primary);
	color: #fff;
}

.md-container {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: var(--md-gap);
}

/* Accesibilidad */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.md-skip-link:focus {
	position: fixed;
	top: .5rem; left: .5rem;
	width: auto; height: auto;
	clip: auto;
	padding: .5rem .75rem;
	background: var(--md-color-fg);
	color: #fff;
	border-radius: var(--md-radius);
	z-index: 1000;
}

/* Header */
.md-header { border-bottom: 1px solid var(--md-color-border); background: #fff; }
.md-header__inner {
	max-width: var(--md-container);
	margin-inline: auto;
	padding: .6rem var(--md-gap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.md-header__title { font-weight: 700; font-size: 1.25rem; color: var(--md-color-fg); }

/* El logo se sube a la Biblioteca con su tamaño original (a veces enorme) —
   sin este límite, el header lo muestra a tamaño natural y rompe el layout. */
.md-header__brand { flex-shrink: 0; }
.md-header__brand img,
.md-header__brand .custom-logo {
	height: 48px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

.md-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.md-menu a { color: var(--md-color-fg); }

/* Footer */
.md-footer {
	margin-top: 3rem;
	border-top: 1px solid var(--md-color-border);
	background: #fafafa;
}
.md-footer__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	padding: 1.1rem var(--md-gap);
	border-bottom: 1px solid var(--md-color-border);
	font-size: .85rem;
	font-weight: 500;
	color: var(--md-color-fg);
}
.md-footer__inner {
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 2rem var(--md-gap);
}
.md-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 640px) {
	.md-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; }
}
.md-footer__col h4 {
	margin: 0 0 .85rem;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--md-color-fg);
}
.md-footer__brand-name { font-weight: 700; font-size: 1.1rem; margin: 0 0 .5rem; }
.md-footer__brand-desc { color: var(--md-color-muted); font-size: .85rem; max-width: 32ch; margin: 0; }
.md-footer__identity { color: var(--md-color-muted); font-size: .8rem; font-style: normal; line-height: 1.6; margin-top: .75rem; }

.rank-math-breadcrumb {
	max-width: 1120px;
	margin: 0 auto;
	padding: 1rem 1rem 0;
	font-size: .82rem;
	color: var(--md-color-muted);
}
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb a { color: inherit; text-decoration: none; }
.rank-math-breadcrumb a:hover { text-decoration: underline; }
.rank-math-breadcrumb .separator { margin: 0 .45rem; }
.rank-math-breadcrumb .last { color: var(--md-color-ink, #222); font-weight: 500; }
.md-footer__identity a { color: inherit; }
.md-footer .md-menu--footer {
	flex-direction: column;
	gap: .55rem;
}
.md-footer .md-menu--footer a { color: var(--md-color-muted); font-size: .875rem; }
.md-footer .md-menu--footer a:hover { color: var(--md-color-primary); text-decoration: none; }
.md-footer__bottom {
	border-top: 1px solid var(--md-color-border);
	padding: 1.1rem var(--md-gap);
	text-align: center;
}
.md-footer__copy { color: var(--md-color-muted); font-size: .85rem; margin: 0; }

/* Botones utilitarios */
.md-btn {
	display: inline-block;
	padding: .8rem 1.4rem;
	border-radius: var(--md-radius);
	background: var(--md-color-primary);
	color: #fff !important;
	font-weight: 600;
	text-align: center;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.md-btn:hover { background: var(--md-color-primary-dark); text-decoration: none; }

/* Home 4 — Catálogo */
.md-hc-hero {
	background: #fafafa;
	border-bottom: 1px solid var(--md-color-border);
	padding: 3rem 0;
}
.md-hc-hero__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.md-hc-hero__copy { flex: 1 1 320px; }
.md-hc-hero__eyebrow {
	color: var(--md-color-primary);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .85rem;
	letter-spacing: .04em;
	margin: 0 0 .5rem;
}
.md-hc-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 .75rem;
}
.md-hc-hero__desc {
	color: var(--md-color-muted);
	font-size: 1.05rem;
	margin: 0 0 1.5rem;
	max-width: 46ch;
}
.md-hc-hero__media { flex: 1 1 320px; }
.md-hc-hero__media img { border-radius: var(--md-radius); }

.md-hc-trust {
	background: var(--md-color-fg);
}
.md-hc-trust__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 2.5rem;
	padding: 1rem var(--md-gap);
}
.md-hc-trust__item {
	color: #fff;
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
}

.md-hc-products { padding: 2.5rem 0; }
.md-hc-products__title {
	font-size: 1.5rem;
	margin: 0 0 .25rem;
	text-align: center;
}
.md-hc-products__subtitle {
	color: var(--md-color-muted);
	text-align: center;
	margin: 0 0 1.5rem;
}
.md-hc-products__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--md-gap);
}
@media (min-width: 640px) {
	.md-hc-products__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.md-hc-products__grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}
.md-hc-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--md-color-border);
	border-radius: var(--md-radius);
	overflow: hidden;
	color: var(--md-color-fg);
	background: #fff;
	transition: box-shadow .15s ease;
}
.md-hc-product-card:hover {
	box-shadow: var(--md-shadow);
	text-decoration: none;
}
.md-hc-product-card__image {
	aspect-ratio: 1 / 1;
	background: #f3f4f6;
	position: relative;
}
/* object-fit: contain (no cover) a propósito: las fotos de los productos
   tienen encuadres muy distintos entre sí (primeros planos vs. fotos con
   mucho fondo/gráfica de marketing alrededor) — recortar (cover) las deja
   con "zoom" distinto entre sí. Con contain se ve la foto completa siempre,
   con el mismo padding, así que todas quedan parejas.
   `position:absolute` + `inset` (no max-height:100%) a propósito: un
   contenedor cuya altura sale de `aspect-ratio` no resuelve bien un
   `max-height:100%` en el hijo (bug conocido de CSS) — solo el ancho
   quedaba contenido y la foto se estiraba de alto según su proporción
   original. Con `inset` el alto sí se resuelve contra el contenedor real. */
.md-hc-product-card__image img {
	position: absolute;
	inset: .5rem;
	width: calc(100% - 1rem);
	height: calc(100% - 1rem);
	object-fit: contain;
}
.md-hc-product-card__title {
	padding: .75rem .75rem 0;
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.3;
}
.md-hc-product-card__price {
	padding: .35rem .75rem .9rem;
	color: var(--md-color-primary);
	font-weight: 700;
}
.md-hc-product-card__price del { color: var(--md-color-muted); font-weight: 400; margin-right: .35rem; }

/* Home 4 — Íconos de confianza */
.md-hc-features {
	border-top: 1px solid var(--md-color-border);
	border-bottom: 1px solid var(--md-color-border);
	padding: 1.75rem 0;
}
.md-hc-features__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.md-hc-features__grid { grid-template-columns: repeat(4, 1fr); }
}
.md-hc-feature { display: flex; align-items: center; gap: .85rem; }
.md-hc-feature__icon { font-size: 1.75rem; line-height: 1; }
.md-hc-feature__copy h4 { margin: 0 0 .15rem; font-size: .9rem; }
.md-hc-feature__copy p { margin: 0; font-size: .8rem; color: var(--md-color-muted); }

/* Home 4 — Grilla de categorías */
.md-hc-categories { padding: 2.5rem 0; }
.md-hc-categories__title { font-size: 1.5rem; margin: 0 0 .25rem; text-align: center; }
.md-hc-categories__subtitle { color: var(--md-color-muted); text-align: center; margin: 0 0 1.5rem; }
.md-hc-categories__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--md-gap);
}
@media (min-width: 640px) {
	.md-hc-categories__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.md-hc-categories__grid { grid-template-columns: repeat(6, 1fr); }
}
.md-hc-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--md-color-fg);
	background: #fafafa;
	border-radius: var(--md-radius);
	padding: 1rem .75rem;
	transition: box-shadow .15s ease, transform .15s ease;
}
.md-hc-category-card:hover { box-shadow: var(--md-shadow); text-decoration: none; transform: translateY(-2px); }
.md-hc-category-card__image {
	width: 76px; height: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	margin-bottom: .6rem;
}
.md-hc-category-card__image img { width: 100%; height: 100%; object-fit: cover; }
.md-hc-category-card__name { font-weight: 600; font-size: .85rem; }
.md-hc-category-card__count { font-size: .75rem; color: var(--md-color-muted); }

/* Home 4 — Banners promocionales */
.md-hc-promos { padding: 1rem 0 2.5rem; }
.md-hc-promos__grid { display: grid; gap: var(--md-gap); grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.md-hc-promos__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
	.md-hc-promos__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}
.md-hc-promo {
	position: relative;
	display: block;
	min-height: 200px;
	border-radius: var(--md-radius);
	background-color: #f3f4f6;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.md-hc-promo::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
}
.md-hc-promo__copy {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.25rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.md-hc-promo__eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.md-hc-promo__title { font-size: 1.25rem; font-weight: 700; }
.md-hc-promo__cta { font-size: .8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Grilla de productos de WooCommerce (tienda, categorías, relacionados,
   upsells) — el tema no traía ningún estilo acá, así que cada card se veía
   con la imagen a su tamaño original (desparejo). Mismo lenguaje visual que
   las cards de Home 4 (.md-hc-product-card): imagen cuadrada recortada,
   nombre y precio debajo.
   ========================================================================== */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--md-gap) !important;
	margin: 0 0 2rem !important;
	padding: 0 !important;
	list-style: none !important;
}
@media (min-width: 640px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--md-color-border);
	border-radius: var(--md-radius);
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--md-shadow); }

/* El link que envuelve imagen+título de WooCommerce (woocommerce_template_loop_product_link_open) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a:first-child {
	display: block;
	color: inherit;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover,
.woocommerce ul.products li.product > a:first-child:hover { text-decoration: none; }

.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain; /* ver nota en .md-hc-product-card__image sobre por qué contain y no cover */
	background: #f3f4f6;
	padding: .5rem;
	margin: 0 0 .75rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 .85rem;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 .3rem;
}
.woocommerce ul.products li.product .price {
	padding: 0 .85rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--md-color-primary);
}
.woocommerce ul.products li.product .price del { color: var(--md-color-muted); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button {
	margin: .75rem .85rem .85rem;
	text-align: center;
	border-radius: var(--md-radius);
	font-size: .85rem;
}
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: .6rem;
	left: .6rem;
	background: var(--md-color-primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	padding: .2rem .5rem;
	border-radius: 999px;
	min-height: 0; min-width: 0; line-height: 1.4;
}
.woocommerce ul.products li.product { position: relative; }