/*
 * Numartech — Tienda Pro (Bloque 1: diseño visual/UX)
 * Alcance: archivo de tienda, ficha de producto, carrito, checkout.
 * Paleta de marca ya existente en numartech-ux.css: naranja #E73B1F (CTA),
 * azul #294293 (secundario), ámbar #FFB400 (ya usado en estrellas de reseñas).
 */

:root {
	--nt-shop-orange: #E73B1F;
	--nt-shop-orange-dark: #C7300F;
	--nt-shop-blue: #294293;
	--nt-shop-amber: #FFB400;
	--nt-shop-gray: #6D6E70;
	--nt-shop-ink: #1C1C1C;
	--nt-shop-bg: #F5F5F7;
	--nt-shop-card-bg: #FFFFFF;
	--nt-shop-border: #E4E6EA;
	--nt-shop-radius-card: 16px;
	--nt-shop-radius-chip: 8px;
	--nt-shop-shadow: 0 1px 3px rgba(20, 20, 30, 0.06);
	--nt-shop-shadow-hover: 0 10px 24px rgba(20, 20, 30, 0.10);
}

/* ==========================================================================
   Base de página: archivo/tienda, categoría, producto, carrito, checkout
   ========================================================================== */

.woocommerce-page #content,
.single-product #content {
	background: var(--nt-shop-bg);
}

/* --------------------------------------------------------------------------
   Contenedor y márgenes del body de la tienda
   (referencia funcional acordada: steren.com.co — contenido con aire,
   sidebar angosta, título compacto)
   -------------------------------------------------------------------------- */

.woocommerce-page #content .ast-container {
	padding-top: 24px;
	padding-bottom: 48px;
}
@media (min-width: 992px) {
	.woocommerce-page #content .ast-container {
		padding-top: 32px;
		padding-bottom: 64px;
	}
}

/* Título del archivo, más compacto (Astra lo deja enorme) */
.woocommerce-products-header {
	margin: 0 0 8px;
}
.woocommerce-products-header__title.page-title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 4px;
}
@media (min-width: 768px) {
	.woocommerce-products-header__title.page-title { font-size: 30px; }
}

/* Fila de resultados + ordenamiento: una sola línea alineada, con aire antes del grid */
.woocommerce-page .ast-shop-toolbar,
.woocommerce-result-count,
.woocommerce-ordering {
	font-size: 14px;
	color: var(--nt-shop-gray);
}
.woocommerce-result-count { margin: 0 0 20px; }
.woocommerce-ordering { margin: 0 0 20px; }
.woocommerce-ordering select {
	border-radius: var(--nt-shop-radius-chip);
	border: 1px solid var(--nt-shop-border);
	background: #fff;
	padding: 8px 12px;
	min-height: 44px;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Fuente Ubuntu — solo en la tienda (pedido del cliente; el chat JuanDi ya
   la usa). El resto del sitio permanece en Poppins.
   -------------------------------------------------------------------------- */

.woocommerce #content,
.woocommerce-page #content,
.woocommerce #content h1, .woocommerce-page #content h1,
.woocommerce #content h2, .woocommerce-page #content h2,
.woocommerce #content h3, .woocommerce-page #content h3,
.woocommerce #content h4, .woocommerce-page #content h4,
.woocommerce #content h5, .woocommerce-page #content h5,
.woocommerce #content h6, .woocommerce-page #content h6,
.woocommerce #content button, .woocommerce-page #content button,
.woocommerce #content input, .woocommerce-page #content input,
.woocommerce #content select, .woocommerce-page #content select,
.woocommerce #content textarea, .woocommerce-page #content textarea,
.nt-filtros, .nt-filtros button, .nt-filtros input {
	font-family: 'Ubuntu', 'Ubuntu Fallback', 'Poppins', 'Poppins Fallback', sans-serif;
}

/* --------------------------------------------------------------------------
   Toolbar de la tienda: botón Filtrar + búsqueda + resultados + ordenamiento
   -------------------------------------------------------------------------- */

.nt-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}
.nt-shop-toolbar .woocommerce-result-count {
	margin: 0 0 0 auto;
	order: 3;
}
.nt-shop-toolbar .woocommerce-ordering {
	margin: 0;
	order: 4;
}
@media (max-width: 640px) {
	.nt-shop-toolbar .woocommerce-result-count { display: none; }
	.nt-shop-toolbar .woocommerce-ordering { order: 4; flex: 1; }
	.nt-shop-toolbar .woocommerce-ordering select { width: 100%; }
}

.nt-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px !important;
	padding: 0 18px !important;
	border: 1px solid var(--nt-shop-border) !important;
	border-radius: var(--nt-shop-radius-chip) !important;
	background: #fff !important;
	color: var(--nt-shop-ink) !important;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nt-filter-btn:hover,
.nt-filter-btn:focus {
	background: #fff !important;
	color: var(--nt-shop-ink) !important;
	border-color: var(--nt-shop-blue) !important;
	box-shadow: 0 0 0 3px rgba(41, 66, 147, 0.12);
}

.nt-shop-search {
	display: flex;
	gap: 8px;
	flex: 1;
	min-width: 200px;
	max-width: 460px;
}
.nt-shop-search input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--nt-shop-border) !important;
	border-radius: var(--nt-shop-radius-chip) !important;
	background: #fff;
	font-size: 14px;
}
.nt-shop-search button {
	width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: none !important;
	border-radius: var(--nt-shop-radius-chip) !important;
	background: var(--nt-shop-orange) !important;
	color: #fff !important;
	cursor: pointer;
}
.nt-shop-search button:hover,
.nt-shop-search button:focus {
	background: var(--nt-shop-orange-dark) !important;
	color: #fff !important;
	border: none !important;
}

/* --------------------------------------------------------------------------
   Panel deslizante de filtros (drawer)
   -------------------------------------------------------------------------- */

.nt-filtros-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 18, 30, 0.5);
	z-index: 9998;
}
.nt-filtros {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(340px, 88vw);
	background: #fff;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transform: translateX(-105%);
	transition: transform 250ms ease;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
	visibility: hidden;
}
.nt-filtros.is-open {
	transform: translateX(0);
	visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
	.nt-filtros { transition: none; }
}

.nt-filtros__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--nt-shop-border);
}
.nt-filtros__head h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.nt-filtros__close {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: var(--nt-shop-radius-chip) !important;
	background: var(--nt-shop-bg) !important;
	color: var(--nt-shop-ink) !important;
	font-size: 17px;
	cursor: pointer;
}
.nt-filtros__close:hover,
.nt-filtros__close:focus {
	background: var(--nt-shop-border) !important;
	color: var(--nt-shop-ink) !important;
	border: none !important;
}

.nt-filtros__body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 20px 16px;
}
.nt-filtros__grupo {
	border: none;
	margin: 0 0 8px;
	padding: 12px 0;
	border-bottom: 1px solid var(--nt-shop-border);
}
.nt-filtros__grupo:last-child { border-bottom: none; }
.nt-filtros__grupo legend {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--nt-shop-ink);
	padding: 0 0 6px;
}
.nt-filtros__opcion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 15px;
	color: var(--nt-shop-ink);
	cursor: pointer;
}
.nt-filtros__opcion input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--nt-shop-blue);
	flex: 0 0 18px;
}
.nt-filtros__opcion em {
	font-style: normal;
	color: var(--nt-shop-gray);
	font-size: 13px;
}
.nt-filtros__precio {
	display: flex;
	align-items: center;
	gap: 8px;
}
.nt-filtros__precio input {
	flex: 1;
	min-width: 0;
	min-height: 42px !important;
	padding: 0 10px !important;
	border: 1px solid var(--nt-shop-border) !important;
	border-radius: var(--nt-shop-radius-chip) !important;
	font-size: 14px;
}

.nt-filtros__pie {
	display: flex;
	gap: 12px;
	padding: 14px 20px;
	border-top: 1px solid var(--nt-shop-border);
	background: #fff;
}
.nt-filtros__limpiar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--nt-shop-border);
	border-radius: var(--nt-shop-radius-chip);
	color: var(--nt-shop-ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.nt-filtros__limpiar:hover { border-color: var(--nt-shop-gray); color: var(--nt-shop-ink); }
.nt-filtros__aplicar {
	flex: 1;
	min-height: 46px !important;
	padding: 0 16px !important;
	border: none !important;
	border-radius: var(--nt-shop-radius-chip) !important;
	background: var(--nt-shop-orange) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.nt-filtros__aplicar:hover,
.nt-filtros__aplicar:focus {
	background: var(--nt-shop-orange-dark) !important;
	color: #fff !important;
	border: none !important;
}

body.nt-filtros-abiertos { overflow: hidden; }

/* --------------------------------------------------------------------------
   Slider de banners (solo /tienda/)
   -------------------------------------------------------------------------- */

.nt-slider {
	position: relative;
	margin: 0 0 28px;
	border-radius: var(--nt-shop-radius-card);
	overflow: hidden;
	box-shadow: var(--nt-shop-shadow);
}
.nt-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.nt-slider__track::-webkit-scrollbar { display: none; }
.nt-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.nt-slider__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 320;
	object-fit: cover;
}
.nt-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.nt-slider__dot {
	width: 10px !important;
	height: 10px !important;
	min-height: 10px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.55) !important;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}
.nt-slider__dot.is-active {
	background: #fff !important;
	transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Íconos de categorías (debajo del grid)
   -------------------------------------------------------------------------- */

.nt-cats { margin: 40px 0 0; }
.nt-cats__title,
.nt-pagos__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--nt-shop-ink);
}
.nt-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (min-width: 600px) {
	.nt-cats__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
	.nt-cats__grid { grid-template-columns: repeat(7, 1fr); }
}
.nt-cats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 18px 10px 14px;
	background: var(--nt-shop-card-bg);
	border: 1px solid var(--nt-shop-border);
	border-radius: var(--nt-shop-radius-card);
	box-shadow: var(--nt-shop-shadow);
	text-decoration: none;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.nt-cats__item:hover,
.nt-cats__item:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--nt-shop-shadow-hover);
}
.nt-cats__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(41, 66, 147, 0.08);
	color: var(--nt-shop-blue);
}
.nt-cats__item:hover .nt-cats__icon { background: rgba(231, 59, 31, 0.1); color: var(--nt-shop-orange); }
.nt-cats__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nt-shop-ink);
}
.nt-cats__count {
	font-size: 12px;
	color: var(--nt-shop-gray);
}

/* --------------------------------------------------------------------------
   Franja de medios de pago
   -------------------------------------------------------------------------- */

.nt-pagos {
	margin: 36px 0 8px;
	padding: 22px 24px;
	background: var(--nt-shop-card-bg);
	border: 1px solid var(--nt-shop-border);
	border-radius: var(--nt-shop-radius-card);
	box-shadow: var(--nt-shop-shadow);
}
.nt-pagos__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.nt-pagos__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--nt-shop-ink);
	font-size: 14px;
	font-weight: 500;
}
.nt-pagos__item svg { color: var(--nt-shop-blue); flex: 0 0 auto; }
.nt-pagos__nota {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--nt-shop-gray);
}

/* ==========================================================================
   Banner de categoría (.nt-cat-banner, ver functions.php)
   ========================================================================== */

.nt-cat-banner {
	position: relative;
	border-radius: var(--nt-shop-radius-card);
	overflow: hidden;
	margin: 0 0 28px;
	padding: 40px 24px;
	background: linear-gradient(135deg, var(--nt-shop-blue) 0%, #1c2f6b 100%);
	color: #fff;
}
.nt-cat-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--nt-cat-banner-img);
	background-size: cover;
	background-position: center;
	opacity: 0.22;
}
.nt-cat-banner__inner {
	position: relative;
	max-width: 760px;
}
.nt-cat-banner__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
	color: #fff;
}
.nt-cat-banner__count {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.85;
	margin: 0 0 12px;
}
.nt-cat-banner__desc {
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.95;
}
.nt-cat-banner__desc p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
	.nt-cat-banner { padding: 56px 40px; }
	.nt-cat-banner__title { font-size: 34px; }
}

/* ==========================================================================
   Grid de productos (archivo de tienda / categoría / relacionados)
   ========================================================================== */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 16px !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
	list-style: none !important;
}
/* El clearfix ::before/::after de WooCommerce se convierte en un ítem más
   dentro de CSS grid — dejaba una celda vacía al inicio del grid. */
ul.products::before,
ul.products::after {
	display: none !important;
}

@media (min-width: 600px) {
	ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 22px !important; }
}
@media (min-width: 992px) {
	ul.products { grid-template-columns: repeat(4, 1fr) !important; gap: 26px !important; }
}

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nt-shop-card-bg);
	border: 1px solid var(--nt-shop-border);
	border-radius: var(--nt-shop-radius-card);
	box-shadow: var(--nt-shop-shadow);
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease;
	width: auto !important;
}
ul.products li.product:hover,
ul.products li.product:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--nt-shop-shadow-hover);
}

ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product .astra-shop-thumbnail-wrap {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}

/* Contenedor del texto de la card: padding propio para que la etiqueta de
   categoría, el título, el precio y el botón queden alejados del borde de
   forma pareja (alineados a la izquierda, patrón MercadoLibre/Steren). */
ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding: 12px 16px 16px;
	text-align: left;
}
ul.products li.product .ast-woo-product-category {
	font-size: 12px;
	color: var(--nt-shop-gray);
	margin: 0 0 2px;
}

ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	padding: 16px;
	border-radius: 0 !important;
	margin: 0 !important;
	display: block;
}

/* Card "agotada": imagen atenuada, sin invitar a comprar visualmente */
ul.products li.product.outofstock img { opacity: 0.5; filter: grayscale(0.4); }

ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nt-shop-ink);
	margin: 0 0 4px;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
}

ul.products li.product .price {
	display: block;
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--nt-shop-ink);
	font-variant-numeric: tabular-nums;
}
ul.products li.product .price del {
	font-size: 14px;
	font-weight: 400;
	color: var(--nt-shop-gray);
	opacity: 1;
	margin-right: 6px;
	text-decoration: line-through;
}
ul.products li.product .price ins {
	text-decoration: none;
	color: var(--nt-shop-orange-dark);
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: auto 0 0;
	padding: 8px 12px !important;
	width: 100%;
	border-radius: var(--nt-shop-radius-chip);
	background: var(--nt-shop-orange);
	color: #fff !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border: none;
	transition: background-color 150ms ease, transform 150ms ease;
}

/* Sin reseñas reales todavía (0 en todo el catálogo), las 5 estrellas vacías
   en cada card solo agregan ruido y parecen "calificación 0". Se ocultan las
   vacías; cuando existan reseñas, las cards con rating real sí la muestran. */
ul.products li.product .star-rating:has(> span[style*="width:0"]) {
	display: none;
}
ul.products li.product .button:hover,
ul.products li.product .add_to_cart_button:hover {
	background: var(--nt-shop-orange-dark);
	color: #fff !important;
}
ul.products li.product .added_to_cart {
	margin: 8px 0 0;
	font-size: 13px;
	text-align: center;
}

/* Star rating de WooCommerce dentro de la card */
ul.products li.product .star-rating {
	margin: 0 0 4px;
	font-size: 13px;
}

/* ==========================================================================
   Badges: Nuevo / Oferta / Agotado (.nt-badges, ver functions.php)
   ========================================================================== */

.nt-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}
.nt-badge,
.nt-badges .onsale {
	position: static !important;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.nt-badge--nuevo { background: var(--nt-shop-blue); color: #fff; }
.nt-badge--agotado { background: var(--nt-shop-gray); color: #fff; }
.nt-badge--oferta,
.nt-badges .onsale { background: var(--nt-shop-amber); color: var(--nt-shop-ink); }

/* En ficha de producto individual, los badges van sobre la galería, no absolutos */
.single-product .nt-badges {
	position: static;
	margin: 0 0 12px;
}

/* ==========================================================================
   Ficha de producto individual
   ========================================================================== */

.single-product div.product {
	background: var(--nt-shop-card-bg);
	border-radius: var(--nt-shop-radius-card);
	padding: 24px;
	box-shadow: var(--nt-shop-shadow);
}

.single-product div.product .product_title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
}
@media (min-width: 768px) {
	.single-product div.product .product_title { font-size: 30px; }
}

.single-product div.product p.price,
.single-product div.product span.price {
	font-size: 26px;
	font-weight: 700;
	color: var(--nt-shop-ink);
	font-variant-numeric: tabular-nums;
}
.single-product div.product p.price del,
.single-product div.product span.price del {
	font-size: 18px;
	font-weight: 400;
	color: var(--nt-shop-gray);
	text-decoration: line-through;
	margin-right: 8px;
}
.single-product div.product p.price ins,
.single-product div.product span.price ins {
	text-decoration: none;
	color: var(--nt-shop-orange-dark);
}

.single-product div.product .stock {
	font-size: 14px;
	font-weight: 600;
	padding: 4px 0;
}
.single-product div.product .stock.out-of-stock { color: var(--nt-shop-gray); }
.single-product div.product .stock.in-stock { color: #1E7E34; }

.single-product div.product form.cart .button,
.single-product div.product form.cart .single_add_to_cart_button {
	min-height: 48px;
	padding: 0 28px;
	border-radius: var(--nt-shop-radius-chip);
	background: var(--nt-shop-orange);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	border: none;
	transition: background-color 150ms ease;
}
.single-product div.product form.cart .button:hover,
.single-product div.product form.cart .single_add_to_cart_button:hover {
	background: var(--nt-shop-orange-dark);
}
.single-product div.product form.cart .qty {
	min-height: 48px;
	border-radius: var(--nt-shop-radius-chip);
	border: 1px solid var(--nt-shop-border);
	text-align: center;
}

/* Galería: cursor de zoom accesible, radios consistentes con el resto */
.single-product .woocommerce-product-gallery {
	border-radius: var(--nt-shop-radius-card);
	overflow: hidden;
}
.single-product .woocommerce-product-gallery img { border-radius: 0; }
.single-product .woocommerce-product-gallery__trigger {
	background: rgba(255,255,255,0.9);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-product .woocommerce-tabs {
	margin-top: 32px;
	border-radius: var(--nt-shop-radius-card);
	background: var(--nt-shop-card-bg);
	box-shadow: var(--nt-shop-shadow);
	padding: 8px 24px 24px;
}
.single-product .woocommerce-tabs ul.tabs li a {
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Relacionados: mismo grid de cards que el archivo */
.single-product .related.products { margin-top: 40px; }
.single-product .related.products > h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
}

/* ==========================================================================
   Carrito
   ========================================================================== */

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	border: none;
	border-radius: var(--nt-shop-radius-card);
	background: var(--nt-shop-card-bg);
	box-shadow: var(--nt-shop-shadow);
	overflow: hidden;
}
.woocommerce-cart table.shop_table th {
	background: var(--nt-shop-bg);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--nt-shop-gray);
}
.woocommerce-cart table.shop_table td.product-thumbnail img {
	border-radius: var(--nt-shop-radius-chip);
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--nt-shop-border);
}
.woocommerce-cart .quantity input.qty {
	min-height: 44px;
	border-radius: var(--nt-shop-radius-chip);
	text-align: center;
}
.woocommerce-cart .product-remove a.remove {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fdecea;
	color: var(--nt-shop-orange-dark) !important;
	transition: background-color 0.15s ease;
}
.woocommerce-cart .product-remove a.remove:hover,
.woocommerce-cart .product-remove a.remove:focus-visible {
	background: var(--nt-shop-orange-dark);
	color: #fff !important;
}

.cart-collaterals .cart_totals,
.woocommerce-checkout-review-order {
	background: var(--nt-shop-card-bg);
	border-radius: var(--nt-shop-radius-card);
	box-shadow: var(--nt-shop-shadow);
	padding: 20px 24px;
}
.cart-collaterals .cart_totals h2,
.woocommerce-checkout-review-order-table {
	font-size: 18px;
	font-weight: 700;
}
.cart-collaterals .order-total .amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--nt-shop-orange-dark);
}

.wc-proceed-to-checkout .checkout-button {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--nt-shop-radius-chip);
	background: var(--nt-shop-orange);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}
.wc-proceed-to-checkout .checkout-button:hover { background: var(--nt-shop-orange-dark); color: #fff; }

/* ==========================================================================
   Checkout
   ========================================================================== */

.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-payment {
	background: var(--nt-shop-card-bg);
	border-radius: var(--nt-shop-radius-card);
	box-shadow: var(--nt-shop-shadow);
	padding: 20px 24px;
}
.woocommerce-checkout .form-row label { font-weight: 600; font-size: 14px; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
	min-height: 44px;
	border-radius: var(--nt-shop-radius-chip);
	border: 1px solid var(--nt-shop-border);
	padding: 0 14px;
}
.woocommerce-checkout #place_order {
	min-height: 52px;
	width: 100%;
	border-radius: var(--nt-shop-radius-chip);
	background: var(--nt-shop-orange);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
}
.woocommerce-checkout #place_order:hover { background: var(--nt-shop-orange-dark); }

/* Foco visible en toda la tienda (accesibilidad — no se suprime el outline) */
.woocommerce-page a:focus-visible,
.woocommerce-page button:focus-visible,
.woocommerce-page input:focus-visible,
.woocommerce-page select:focus-visible {
	outline: 2px solid var(--nt-shop-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product,
	.single-product div.product form.cart .button {
		transition: none !important;
	}
}

/* ==========================================================================
   Carrito "tipo factura" — logo + encabezado, y carrito sin botón manual
   de "Actualizar carrito" (ver nt-cart-actualizacion en tienda.js).
   ========================================================================== */

.nt-cart-invoice__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--nt-shop-border);
}
.nt-cart-invoice__logo {
	max-height: 48px;
	width: auto;
	flex-shrink: 0;
}
.nt-cart-invoice__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nt-shop-gray);
}

/* El botón nativo de WooCommerce se oculta siempre por CSS (defensa base);
   tienda.js además colapsa toda la fila que lo contenía tras marcarla con
   esta clase, para no dejar un renglón vacío en la tabla. */
.woocommerce-cart .actions button[name="update_cart"] {
	display: none !important;
}
.woocommerce-cart tr.nt-cart-actions-row--hidden {
	display: none !important;
}

/* Aviso breve mientras el carrito se refresca solo tras cambiar una cantidad. */
.woocommerce-cart.nt-cart-is-updating .woocommerce-cart-form {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.15s ease;
}