/*
 * Todas las reglas están scopeadas bajo .pic-cat-wrapper y usan !important
 * en las propiedades visuales (fondo, color, bordes, list-style, display de
 * flex/grid, apariencia de inputs/botones) a propósito: Avada/Fusion Builder
 * trae resets globales muy agresivos sobre button, a, input, select y li que
 * de otro modo pisan estos estilos. Paleta neutra de referencia: reemplazar
 * las variables por los colores institucionales de Pinturería PIC.
 */

.pic-cat-wrapper {
	--pic-color-primario: #1c6e5c;
	--pic-color-primario-hover: #15564a;
	--pic-color-texto: #2b2b2b;
	--pic-color-texto-suave: #6b6b6b;
	--pic-color-borde: #e2e2e2;
	--pic-color-fondo: #ffffff;
	--pic-color-fondo-suave: #f7f7f7;

	max-width: 1280px;
	width: 100% !important;
	margin: 0 auto;
	padding: 24px 16px;
	font-family: inherit;
	color: var(--pic-color-texto) !important;
	background: transparent !important;
	/*
	 * Avada suele envolver el contenido en una fila flex con
	 * "align-items: flex-start" en vez del "stretch" por defecto. Sin un
	 * ancho explícito, el navegador nos deja como item flex de tamaño
	 * "shrink-to-fit", que en algunos re-renders (típicamente disparados
	 * por scroll) recalcula mal y colapsa el ancho. width:100% + align-self
	 * evitan depender de que el padre nos estire.
	 */
	flex: 1 1 auto !important;
	align-self: stretch !important;
}

.pic-cat-wrapper,
.pic-cat-wrapper *,
.pic-cat-wrapper *::before,
.pic-cat-wrapper *::after {
	box-sizing: border-box !important;
}

/*
 * Los resets genéricos de abajo usan :where(...) a propósito: :where() no
 * suma especificidad (queda igual que .pic-cat-wrapper solo), así que
 * cualquier regla más concreta de este archivo (.pic-cat-btn-primario,
 * .pic-cat-card-titulo a, etc.), sin importar en qué orden esté, le gana
 * el empate. Si en cambio usáramos ".pic-cat-wrapper button" a secas,
 * ese selector (clase + elemento) pisaría por especificidad a reglas más
 * concretas de una sola clase como ".pic-cat-btn-primario", aunque ambas
 * tengan !important.
 */

.pic-cat-wrapper :where(h1, h2, h3, h4) {
	font-family: inherit !important;
	color: var(--pic-color-texto) !important;
	background: none !important;
	border: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.pic-cat-wrapper :where(p) {
	margin: 0 0 10px !important;
	color: var(--pic-color-texto) !important;
}

.pic-cat-wrapper :where(ul) {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pic-cat-wrapper :where(li) {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
}

.pic-cat-wrapper :where(li)::marker {
	content: none !important;
}

.pic-cat-wrapper :where(img) {
	max-width: 100% !important;
	height: auto;
	border: none !important;
	box-shadow: none !important;
}

.pic-cat-wrapper :where(a) {
	text-decoration: none !important;
	box-shadow: none !important;
	transition: none;
}

.pic-cat-wrapper :where(button, input, select, textarea) {
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: normal !important;
	color: var(--pic-color-texto) !important;
	background: var(--pic-color-fondo) !important;
	background-image: none !important;
	border: 1px solid var(--pic-color-borde) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 8px 10px !important;
}

.pic-cat-wrapper :where(input[type="checkbox"]) {
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	width: 15px !important;
	height: 15px !important;
	padding: 0 !important;
	border-radius: 3px !important;
	vertical-align: middle;
	margin-right: 4px !important;
}

.pic-cat-wrapper :where(button) {
	cursor: pointer;
}

/* ---------- Catálogo / grilla ---------- */

.pic-cat-catalogo {
	display: grid !important;
	grid-template-columns: 260px 1fr !important;
	gap: 32px;
}

@media (max-width: 782px) {
	.pic-cat-catalogo {
		grid-template-columns: 1fr !important;
	}
}

.pic-cat-sidebar {
	border: 1px solid var(--pic-color-borde) !important;
	border-radius: 8px !important;
	padding: 16px;
	background: var(--pic-color-fondo) !important;
	align-self: start;
}

.pic-cat-filtro-grupo {
	border: none !important;
	border-bottom: 1px solid var(--pic-color-borde) !important;
	padding: 0 0 14px !important;
	margin: 0 0 14px !important;
}

.pic-cat-filtro-grupo:last-of-type {
	border-bottom: none !important;
}

.pic-cat-filtro-grupo legend {
	font-weight: 700 !important;
	margin-bottom: 8px;
	padding: 0 !important;
	color: var(--pic-color-texto) !important;
	background: none !important;
	border: none !important;
}

.pic-cat-filtro-item {
	display: block !important;
	font-size: 13px !important;
	margin-bottom: 6px !important;
	cursor: pointer;
	color: var(--pic-color-texto) !important;
}

.pic-cat-filtro-count {
	color: var(--pic-color-texto-suave) !important;
}

.pic-cat-limpiar-filtros {
	display: inline-block !important;
	margin-top: 4px;
	font-size: 13px !important;
	color: var(--pic-color-primario) !important;
	text-decoration: underline !important;
}

.pic-cat-toolbar {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 12px !important;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.pic-cat-buscar {
	flex: 1 1 220px;
	padding: 8px 10px !important;
}

.pic-cat-orden-label {
	color: var(--pic-color-texto) !important;
	font-size: 13px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}

.pic-cat-orden-label select {
	margin-left: 0 !important;
	padding: 6px 8px !important;
}

.pic-cat-contador {
	color: var(--pic-color-texto-suave) !important;
	font-size: 13px !important;
	margin: 0 0 16px !important;
}

.pic-cat-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 20px !important;
}

.pic-cat-card {
	border: 1px solid var(--pic-color-borde) !important;
	border-radius: 8px !important;
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	background: var(--pic-color-fondo) !important;
}

.pic-cat-card-imagen {
	display: block !important;
	aspect-ratio: 1 / 1;
	background: var(--pic-color-fondo-suave) !important;
}

.pic-cat-card-imagen img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	padding: 12px;
}

.pic-cat-sin-imagen {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--pic-color-texto-suave) !important;
	font-size: 12px !important;
}

.pic-cat-card-body {
	padding: 14px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
	flex: 1;
}

.pic-cat-card-marca {
	text-transform: uppercase !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--pic-color-primario) !important;
	letter-spacing: 0.03em;
}

.pic-cat-card-titulo {
	font-size: 15px !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
}

.pic-cat-card-titulo a {
	color: var(--pic-color-texto) !important;
}

.pic-cat-card-precio {
	font-weight: 700 !important;
	margin: 0 !important;
	color: var(--pic-color-texto) !important;
}

.pic-cat-paginacion {
	margin-top: 24px !important;
	display: flex !important;
	gap: 6px;
	flex-wrap: wrap;
}

.pic-cat-paginacion .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px !important;
	border: 1px solid var(--pic-color-borde) !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	color: var(--pic-color-texto) !important;
	background: var(--pic-color-fondo) !important;
}

.pic-cat-paginacion .page-numbers.current {
	background: var(--pic-color-primario) !important;
	border-color: var(--pic-color-primario) !important;
	color: #fff !important;
}

.pic-cat-sin-resultados {
	color: var(--pic-color-texto-suave) !important;
}

/* ---------- Botones ---------- */

.pic-cat-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: 1px solid transparent !important;
	background-image: none !important;
	cursor: pointer;
	font-size: 14px !important;
}

.pic-cat-btn-primario {
	background: var(--pic-color-primario) !important;
	color: #fff !important;
}

.pic-cat-btn-primario:hover,
.pic-cat-btn-primario:focus {
	background: var(--pic-color-primario-hover) !important;
	color: #fff !important;
}

.pic-cat-btn-outline {
	background: transparent !important;
	border-color: var(--pic-color-primario) !important;
	color: var(--pic-color-primario) !important;
}

.pic-cat-btn-outline:hover,
.pic-cat-btn-outline:focus {
	background: var(--pic-color-primario) !important;
	color: #fff !important;
}

/* ---------- Ficha de producto ---------- */

.pic-cat-single-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 16px;
}

.pic-cat-single-top {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 40px;
	margin-bottom: 32px;
}

@media (max-width: 782px) {
	.pic-cat-single-top {
		grid-template-columns: 1fr !important;
	}
}

.pic-cat-galeria-principal {
	aspect-ratio: 1 / 1;
	background: var(--pic-color-fondo-suave) !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pic-cat-galeria-principal img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

.pic-cat-galeria-miniaturas {
	display: flex !important;
	gap: 8px;
	margin-top: 10px !important;
	flex-wrap: wrap;
}

.pic-cat-miniatura {
	width: 56px !important;
	height: 56px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	border: 2px solid transparent !important;
	cursor: pointer;
}

.pic-cat-miniatura.activa {
	border-color: var(--pic-color-primario) !important;
}

.pic-cat-single-titulo {
	font-size: 26px !important;
	margin: 0 0 6px !important;
	font-weight: 700 !important;
}

.pic-cat-single-sku {
	color: var(--pic-color-texto-suave) !important;
	font-size: 13px !important;
	margin: 0 0 14px !important;
}

.pic-cat-variante-selector {
	margin-bottom: 16px;
}

.pic-cat-variante-selector label {
	display: block !important;
	font-weight: 600 !important;
	margin-bottom: 6px;
	color: var(--pic-color-texto) !important;
}

.pic-cat-variante-selector select {
	width: 100%;
	max-width: 320px;
	padding: 8px !important;
}

.pic-cat-single-precio {
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 18px !important;
	color: var(--pic-color-texto) !important;
}

.pic-cat-cta {
	display: flex !important;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.pic-cat-cantidad {
	display: inline-flex !important;
	align-items: center;
	border: 1px solid var(--pic-color-borde) !important;
	border-radius: 6px !important;
	overflow: hidden;
}

.pic-cat-cantidad button {
	background: var(--pic-color-fondo-suave) !important;
	border: none !important;
	border-radius: 0 !important;
	width: 34px !important;
	height: 40px !important;
	font-size: 16px !important;
	padding: 0 !important;
}

.pic-cat-cantidad input {
	width: 46px !important;
	height: 40px !important;
	border: none !important;
	border-radius: 0 !important;
	border-left: 1px solid var(--pic-color-borde) !important;
	border-right: 1px solid var(--pic-color-borde) !important;
	text-align: center !important;
	padding: 0 !important;
}

.pic-cat-nota-demo {
	font-size: 12px !important;
	color: var(--pic-color-texto-suave) !important;
	margin-top: 10px !important;
}

/* ---------- Tabs ---------- */

.pic-cat-tabs {
	border-top: 1px solid var(--pic-color-borde) !important;
	padding-top: 24px;
	margin-bottom: 40px;
}

.pic-cat-tabs-nav {
	display: flex !important;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 20px !important;
	border-bottom: 1px solid var(--pic-color-borde) !important;
}

.pic-cat-tab-btn {
	background: none !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	padding: 10px 4px !important;
	margin-right: 20px !important;
	font-weight: 600 !important;
	color: var(--pic-color-texto-suave) !important;
}

.pic-cat-tab-btn.activa {
	color: var(--pic-color-primario) !important;
	border-bottom-color: var(--pic-color-primario) !important;
}

.pic-cat-tab-panel {
	display: none !important;
}

.pic-cat-tab-panel.activa {
	display: block !important;
}

.pic-cat-pdf-embed {
	width: 100%;
	height: 640px;
	border: 1px solid var(--pic-color-borde) !important;
	border-radius: 6px !important;
}

.pic-cat-tabla-adicional {
	width: 100%;
	border-collapse: collapse !important;
}

.pic-cat-tabla-adicional th,
.pic-cat-tabla-adicional td {
	text-align: left !important;
	padding: 10px 12px !important;
	border-bottom: 1px solid var(--pic-color-borde) !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
}

.pic-cat-tabla-adicional th {
	width: 220px;
	color: var(--pic-color-texto-suave) !important;
	font-weight: 600 !important;
	background: none !important;
}

/* ---------- Relacionados ---------- */

.pic-cat-relacionados h3 {
	margin-bottom: 16px !important;
}