/* ============================================================================
 * archive-shop-critical.css — Archive Tienda + categorías producto (#509 → PHP)
 * dev_task #98 (F7 preview · it1-QA rediseño). Scoped a body.archive-shop-php.
 *
 * Referencia aprobada: /neones-mas-vendidos/ (nmv-card + dividers wave + secciones
 * oscuro/claro). CADA sección lleva background Y color de texto EXPLÍCITOS (fix QA
 * contraste #3). Incluye reset Astra (§4, OBLIGATORIO). Container 1600 (#78).
 * Grid repeat(N,1fr) (ERR-009: nunca %).
 * ========================================================================== */

body.archive-shop-php {
	--ne: #161616;   /* dark   */
	--bl: #FFFFFF;   /* white  */
	--am: #FFED00;   /* yellow */
	--mg: #E6007E;   /* magenta*/
	--gr: #F5F5F5;   /* gray section */
	--as-font-h: 'Raleway', system-ui, sans-serif;
	--as-font-b: 'Nunito', system-ui, sans-serif;
}

/* ---- Reset Astra layout (OBLIGATORIO §4) ---- */
body.archive-shop-php .ast-container { display: block; max-width: 100%; padding: 0; }
body.archive-shop-php #content { padding: 0; margin: 0; }
body.archive-shop-php #primary { width: 100%; max-width: 100%; padding: 0; margin: 0; }
body.archive-shop-php #content .ast-container > #primary { float: none; }

/* ---- Buscador full-screen del header: oculto por defecto en este template (fix QA #3) ----
 * Se dequeó CSS global; forzamos el estado cerrado. La clase .is-open (JS) lo reabre. */
body.archive-shop-php #sfs:not(.is-open) {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ---- Base ---- */
body.archive-shop-php .ashop-main {
	width: 100%;
	font-family: var(--as-font-b);
	line-height: 1.6;
	background: #ffffff;
	color: #161616;
}

/* ---- Contenedor on-brand 1600 (#78) ---- */
.archive-shop-php .ashop-c {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	box-sizing: border-box;
}

/* ============ a) HERO — banda oscura compacta ============ */
.archive-shop-php .ashop-hero {
	background: #161616;
	color: #ffffff;
	padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2rem, 4.5vw, 3.25rem);
	text-align: center;
}
.archive-shop-php .ashop-hero__inner { max-width: 1000px; }
.archive-shop-php .ashop-breadcrumb {
	font-size: .82rem;
	color: #b9b9b9;
	margin: 0 0 .6rem;
}
.archive-shop-php .ashop-breadcrumb a { color: #d9d9d9; text-decoration: none; }
.archive-shop-php .ashop-breadcrumb a:hover { color: #ffffff; }
.archive-shop-php .ashop-hero__title {
	font-family: var(--as-font-h);
	font-size: clamp(1.8rem, 4.6vw, 2.75rem);
	line-height: 1.12;
	font-weight: 800;
	color: #ffffff;
	margin: 0;
}
.archive-shop-php .ashop-hero__count {
	margin: .7rem 0 0;
	font-family: var(--as-font-b);
	font-weight: 700;
	font-size: .95rem;
	color: #FFED00;
	letter-spacing: .3px;
}

/* ============ dividers (layout; glow en rest) ============ */
.archive-shop-php .divider {
	position: relative;
	width: 100%;
	line-height: 0;
	z-index: 2;
	pointer-events: none;
}
.archive-shop-php .divider svg { display: block; width: 100%; height: clamp(20px, 2.2vw, 30px); }
.archive-shop-php .divider .wave-fill { fill: var(--wf); }
.archive-shop-php .divider .wave-glow { fill: none; stroke-width: 2; }
.archive-shop-php .divider--ne { background: #161616; }
.archive-shop-php .divider--bl { background: #FFFFFF; }

/* ============ c) CATÁLOGO — sección blanca (protagonista) ============ */
.archive-shop-php .ashop-catalog {
	background: #ffffff;
	color: #161616;
	padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}

/* Pills de subcategorías (layout + base; hover fill en rest) */
.archive-shop-php .ashop-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	justify-content: center;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.archive-shop-php .ashop-pill {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.05rem;
	border: 2px solid #E6007E;
	border-radius: 999px;
	color: #440099;
	background: #fff;
	font-family: var(--as-font-b);
	font-weight: 700;
	font-size: .88rem;
	text-decoration: none;
	line-height: 1;
}

/* Toolbar: parent button (izq) + ordenación WC (der) */
.archive-shop-php .ashop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
}
.archive-shop-php .ashop-toolbar__left:empty { display: none; }
.archive-shop-php .ashop-toolbar__right { margin-left: auto; }
.archive-shop-php .ashop-toolbar .woocommerce-ordering { margin: 0; }
.archive-shop-php .ashop-toolbar .woocommerce-ordering select {
	font-family: var(--as-font-b);
	font-size: .9rem;
	padding: .5rem 2rem .5rem .85rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #fff;
	color: #161616;
	max-width: 260px;
}

/* Grid de productos (nmv-card) */
.archive-shop-php .ashop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(.85rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}
.archive-shop-php .ashop-grid .nmv-card { margin: 0; }
.archive-shop-php .ashop-grid .nmv-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: #161616;
}
.archive-shop-php .ashop-grid .nmv-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: #f4f4f4;
}
.archive-shop-php .ashop-grid .nmv-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.archive-shop-php .ashop-grid .nmv-card__img--hover { opacity: 0; }
.archive-shop-php .ashop-grid .nmv-card__body {
	padding: .7rem .3rem .2rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	flex: 1 1 auto;
}
.archive-shop-php .ashop-grid .nmv-card__title {
	flex: 1 1 auto;
	font-family: var(--as-font-b);
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.3;
	color: #161616;
}
.archive-shop-php .ashop-grid .nmv-card__price { font-weight: 800; color: #161616; font-size: 1.02rem; }
.archive-shop-php .ashop-grid .nmv-card__price del { color: #999; font-weight: 400; font-size: .9rem; margin-right: .35rem; }
.archive-shop-php .ashop-grid .nmv-card__price ins { text-decoration: none; color: #E6007E; }

/* Responsive grid (ERR-009: repeat N, 1fr):
 *   ≤767 → 2 col · ≥768 → 3 · ≥1024 → 4 · ≥1400 → 5 · ≥1700 → 6 */
@media (min-width: 768px) {
	.archive-shop-php .ashop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.archive-shop-php .ashop-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
	.archive-shop-php .ashop-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1700px) {
	.archive-shop-php .ashop-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Empty state */
.archive-shop-php .ashop-empty {
	margin: 2rem auto;
	max-width: 640px;
	padding: 1rem 1.25rem;
	background: #f6f6f6;
	border-radius: 10px;
	text-align: center;
	color: #444;
}

/* ============ e) SEO — sección gris ============ */
.archive-shop-php .ashop-seo {
	background: #F5F5F5;
	color: #444;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}
/* it3 (QA Kevin): el bloque SEO ocupa el MISMO ancho que el grid de productos
   (hereda .ashop-c = 1600px), no una columna estrecha de 860px. */
.archive-shop-php .ashop-seo__inner { text-align: left; }

/* Intro visible (antes del 1er H2) — a ancho completo, alineada con los acordeones */
.archive-shop-php .ashop-seo__intro {
	color: #444;
	font-size: 1rem;
	line-height: 1.7;
	text-align: left;
	max-width: none;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.archive-shop-php .ashop-seo__intro p { margin: 0 0 .8rem; }
.archive-shop-php .ashop-seo__intro p:last-child { margin: 0; }
.archive-shop-php .ashop-seo__intro strong { color: #161616; }

/* Acordeones nativos <details> — patrón FAQ 839 (Trampa A: sin max-height) */
.archive-shop-php .ashop-seo__list {
	max-width: none;
	margin: 0;
	display: grid;
	gap: .8rem;
}
.archive-shop-php .ashop-seo__item {
	background: #fff;
	border-radius: 8px;
	border-left: 3px solid transparent;
	box-shadow: 0 4px 14px rgba(0,0,0,.06);
	padding: 0 1.3rem;
	overflow: hidden;
	transition: border-color .2s ease;
}
.archive-shop-php .ashop-seo__item[open] { border-left-color: #FFED00; }
.archive-shop-php .ashop-seo__q {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 2rem 1.1rem 0;
	position: relative;
}
.archive-shop-php .ashop-seo__q::-webkit-details-marker { display: none; }
.archive-shop-php .ashop-seo__q::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 700;
	color: #E6007E;
	transition: transform .2s ease;
}
.archive-shop-php .ashop-seo__item[open] .ashop-seo__q::after { content: '\2013'; }
/* H2 DENTRO del summary: mantiene jerarquía pero se resetea tamaño/margin del h2 default */
.archive-shop-php .ashop-seo__h2 {
	display: inline;
	font-family: var(--as-font-h);
	font-weight: 700;
	font-size: clamp(1.05rem, 2.2vw, 1.15rem);
	line-height: 1.3;
	color: #161616;
	margin: 0;
	padding: 0;
}
.archive-shop-php .ashop-seo__a {
	padding: .2rem 0 1.1rem;
	font-size: .98rem;
	color: #444;
	line-height: 1.7;
}
.archive-shop-php .ashop-seo__a p { margin: 0 0 .8rem; }
.archive-shop-php .ashop-seo__a p:last-child { margin: 0; }
.archive-shop-php .ashop-seo__a strong { color: #161616; }
.archive-shop-php .ashop-seo__a h3 {
	font-family: var(--as-font-h);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: #161616;
	margin: 1.2rem 0 .5rem;
}

.archive-shop-php .ashop-seo__cta { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; text-align: center; }