/**
 * CSS solo para paginas de WooCommerce (tienda, categorias/tags, ficha de
 * producto) -- ver archive-product.php y single-product.php. No se toca el
 * markup que genera WooCommerce/Blocksy (grillas, tarjetas, tabs, galeria,
 * boton de compra): esto solo lo repinta con la paleta de marca y las
 * variables de site.css. Mobile-first.
 */

/* ---------------------------------------------------------------------
 * 0. Banner decorativo por categoria (ver archive-product.php)
 * --------------------------------------------------------------------- */
.mediasya-cat-banner {
	position: relative;
	min-height: 220px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.mediasya-cat-banner__media {
	position: absolute;
	inset: 0;
}

.mediasya-cat-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.mediasya-cat-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(58, 79, 102, 0.88) 0%, rgba(40, 114, 250, 0.35) 100%);
}

/* Banner "plano" (escolares/personalizadas): sin overlay ni texto, pedido asi a
   proposito. Las fotos de estos productos son verticales (recortadas del
   logo del proveedor, ver archive-product.php) -- estirarlas con "cover" en
   un marco tan ancho y bajo las recortaria feo (mismo problema que tuvimos
   con las tarjetas de categoria del home). Por eso ac lo compagina con
   "contain" sobre un fondo suave en vez de taparlas de fondo. */
.mediasya-cat-banner--plain {
	background: var(--mdsy-bg-soft);
	align-items: stretch;
}

.mediasya-cat-banner--plain .mediasya-cat-banner__media {
	position: relative;
	inset: auto;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mediasya-cat-banner--plain .mediasya-cat-banner__img {
	position: relative;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.mediasya-cat-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--mdsy-max-width);
	margin: 0 auto;
	padding: 24px 20px;
}

.mediasya-cat-banner__title {
	color: var(--mdsy-white);
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 8px;
}

.mediasya-cat-banner__tagline {
	color: var(--mdsy-white);
	font-size: 15px;
	font-weight: 600;
	max-width: 40em;
	margin: 0;
}

/* El banner ya trae su propio <h1> -- se oculta el titulo que Blocksy pinta
   por su cuenta (hero-section, dentro de woocommerce_before_main_content)
   para no repetirlo. La descripcion de categoria (si existe) no esta adentro
   de hero-section, asi que sigue viendose normal debajo. */
.mediasya-shop--has-banner .hero-section {
	display: none;
}

@media (min-width: 640px) {
	.mediasya-cat-banner {
		min-height: 280px;
	}

	.mediasya-cat-banner__title {
		font-size: 38px;
	}

	.mediasya-cat-banner__tagline {
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------------
 * 1. Breadcrumb propio + titulo/hero que pinta Blocksy
 * --------------------------------------------------------------------- */
.mediasya-shop-crumb {
	background: var(--mdsy-bg-soft);
	border-bottom: 1px solid var(--mdsy-border);
	padding: 14px 20px;
}

.mediasya-shop-crumb__inner {
	max-width: var(--mdsy-max-width);
	margin: 0 auto;
}

.mediasya-shop-crumb .woocommerce-breadcrumb {
	color: var(--mdsy-text-soft);
	font-size: 13px;
	margin: 0;
}

.mediasya-shop-crumb .woocommerce-breadcrumb a {
	color: var(--mdsy-text-soft);
}

.mediasya-shop-crumb .woocommerce-breadcrumb a:hover,
.mediasya-shop-crumb .woocommerce-breadcrumb a:focus-visible {
	color: var(--mdsy-primary);
}

/* El titulo (h1.page-title) y la descripcion de categoria los sigue
   pintando Blocksy (hero-section, dentro de woocommerce_before_main_content)
   -- solo lo repintamos con nuestra tipografia/color, sin tocar su markup. */
.mediasya-shop .hero-section {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--mdsy-border);
}

.mediasya-shop .page-title {
	color: var(--mdsy-ink);
	font-size: 28px;
	font-weight: 800;
	margin: 0;
}

.mediasya-shop .term-description,
.mediasya-shop .page-description,
.mediasya-shop .woocommerce-product-details__short-description {
	color: var(--mdsy-text-soft);
	font-size: 14px;
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 60em;
}

@media (min-width: 640px) {
	.mediasya-shop .page-title {
		font-size: 34px;
	}
}

/* ---------------------------------------------------------------------
 * 2. Contenedor general de la tienda
 * --------------------------------------------------------------------- */
.mediasya-shop {
	padding: 40px 20px 64px;
}

.mediasya-shop__inner {
	max-width: var(--mdsy-max-width);
	margin: 0 auto;
}

.mediasya-shop .woocommerce-notices-wrapper .woocommerce-info,
.mediasya-shop .woocommerce-info {
	border-top-color: var(--mdsy-primary);
	color: var(--mdsy-text);
	background: var(--mdsy-bg-soft);
	border-radius: var(--mdsy-radius-sm);
	padding: 16px 20px;
}

.mediasya-shop .woocommerce-info::before {
	color: var(--mdsy-primary);
}

/* Barra de resultados + orden */
.mediasya-shop .woocommerce-result-count {
	color: var(--mdsy-text-soft);
	font-size: 14px;
}

.mediasya-shop .woocommerce-ordering select {
	border: 1px solid var(--mdsy-border);
	border-radius: var(--mdsy-radius-sm);
	padding: 8px 12px;
	color: var(--mdsy-ink);
	background: var(--mdsy-white);
}

.mediasya-shop .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--mdsy-primary);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------
 * 3. Grilla de productos (tarjetas) -- mismo lenguaje visual que las
 *    tarjetas de categorias destacadas del home.
 * --------------------------------------------------------------------- */
.mediasya-shop ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mediasya-shop ul.products li.product {
	background: var(--mdsy-white);
	border: 1px solid var(--mdsy-border);
	border-radius: var(--mdsy-radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
}

.mediasya-shop ul.products li.product:hover,
.mediasya-shop ul.products li.product:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--mdsy-shadow);
	border-color: var(--mdsy-primary);
}

.mediasya-shop ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mediasya-shop ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	background: var(--mdsy-white);
	padding: 16px;
}

.mediasya-shop ul.products li.product .woocommerce-loop-product__title {
	color: var(--mdsy-ink);
	font-size: 15px;
	font-weight: 700;
	margin: 0;
	padding: 0 16px;
}

.mediasya-shop ul.products li.product .price {
	display: block;
	padding: 6px 16px 16px;
	color: var(--mdsy-primary-hover);
	font-weight: 800;
	font-size: 15px;
}

.mediasya-shop ul.products li.product .price del {
	color: var(--mdsy-text-soft);
	font-weight: 400;
	opacity: 0.8;
	margin-right: 6px;
}

.mediasya-shop ul.products li.product .price ins {
	text-decoration: none;
}

.mediasya-shop ul.products li.product .star-rating {
	margin: 0 16px;
	color: var(--mdsy-primary);
	font-size: 13px;
}

.mediasya-shop ul.products li.product .button {
	display: block;
	margin: 0 16px 16px;
	text-align: center;
	background: var(--mdsy-primary);
	color: var(--mdsy-white);
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 700;
	font-size: 14px;
	transition: background 0.15s ease;
}

.mediasya-shop ul.products li.product .button:hover,
.mediasya-shop ul.products li.product .button:focus-visible {
	background: var(--mdsy-primary-hover);
	color: var(--mdsy-white);
}

.mediasya-shop ul.products li.product .button.loading {
	opacity: 0.6;
}

.mediasya-shop ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--mdsy-primary);
	color: var(--mdsy-white);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.mediasya-shop ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.mediasya-shop ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Paginacion */
.mediasya-shop .woocommerce-pagination {
	margin-top: 40px;
}

.mediasya-shop .woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 6px;
	list-style: none;
	padding: 0;
}

.mediasya-shop .woocommerce-pagination .page-numbers li {
	list-style: none;
}

.mediasya-shop .woocommerce-pagination a.page-numbers,
.mediasya-shop .woocommerce-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border-radius: var(--mdsy-radius-sm);
	border: 1px solid var(--mdsy-border);
	color: var(--mdsy-ink);
	font-weight: 600;
}

.mediasya-shop .woocommerce-pagination a.page-numbers:hover,
.mediasya-shop .woocommerce-pagination a.page-numbers:focus-visible {
	border-color: var(--mdsy-primary);
	color: var(--mdsy-primary);
}

.mediasya-shop .woocommerce-pagination span.page-numbers.current {
	background: var(--mdsy-primary);
	border-color: var(--mdsy-primary);
	color: var(--mdsy-white);
}

/* ---------------------------------------------------------------------
 * 4. Ficha de producto individual
 * --------------------------------------------------------------------- */
.mediasya-shop--single .summary.entry-summary {
	max-width: none;
}

.mediasya-shop--single .product_title {
	color: var(--mdsy-ink);
	font-size: 26px;
	font-weight: 800;
}

.mediasya-shop--single .woocommerce-product-details__short-description {
	color: var(--mdsy-text);
	line-height: 1.6;
}

.mediasya-shop--single p.price,
.mediasya-shop--single span.price {
	color: var(--mdsy-primary-hover);
	font-size: 24px;
	font-weight: 800;
}

.mediasya-shop--single .woocommerce-product-rating .star-rating {
	color: var(--mdsy-primary);
}

.mediasya-shop--single .stock {
	font-weight: 700;
}

.mediasya-shop--single .stock.in-stock {
	color: #16794c;
}

.mediasya-shop--single .stock.out-of-stock {
	color: #c0392b;
}

.mediasya-shop--single form.cart .quantity input.qty {
	border: 1px solid var(--mdsy-border);
	border-radius: var(--mdsy-radius-sm);
	height: 46px;
	width: 70px;
	text-align: center;
	color: var(--mdsy-ink);
}

.mediasya-shop--single .single_add_to_cart_button,
.mediasya-shop--single form.cart .button {
	background: var(--mdsy-primary);
	color: var(--mdsy-white);
	border-radius: 999px;
	padding: 14px 28px;
	font-weight: 700;
	border: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}

.mediasya-shop--single .single_add_to_cart_button:hover,
.mediasya-shop--single form.cart .button:hover {
	background: var(--mdsy-primary-hover);
	transform: translateY(-2px);
}

.mediasya-shop--single .product_meta {
	margin-top: 20px;
	font-size: 13px;
	color: var(--mdsy-text-soft);
}

.mediasya-shop--single .product_meta a {
	color: var(--mdsy-primary);
}

/* Tabs (descripcion / info adicional / reseñas) */
.mediasya-shop--single .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
	border-bottom: 1px solid var(--mdsy-border);
}

.mediasya-shop--single .woocommerce-tabs ul.tabs li {
	list-style: none;
	margin: 0;
}

.mediasya-shop--single .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 18px;
	color: var(--mdsy-text-soft);
	font-weight: 700;
	border-radius: var(--mdsy-radius-sm) var(--mdsy-radius-sm) 0 0;
}

.mediasya-shop--single .woocommerce-tabs ul.tabs li.active a {
	color: var(--mdsy-primary);
	background: var(--mdsy-bg-soft);
}

.mediasya-shop--single .woocommerce-tabs .panel {
	padding: 24px 0;
	color: var(--mdsy-text);
	line-height: 1.7;
}

.mediasya-shop--single .woocommerce-tabs table.shop_attributes th {
	color: var(--mdsy-ink);
	background: var(--mdsy-bg-soft);
}

/* Relacionados / vendidos juntos */
.mediasya-shop--single .related.products > h2,
.mediasya-shop--single .up-sells > h2 {
	color: var(--mdsy-ink);
	font-size: 22px;
	font-weight: 800;
	margin: 56px 0 24px;
}

.mediasya-shop--single .related.products ul.products,
.mediasya-shop--single .up-sells ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	list-style: none;
	padding: 0;
}

@media (min-width: 640px) {
	.mediasya-shop--single .related.products ul.products,
	.mediasya-shop--single .up-sells ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}