/* ===================== STORE ===================== */
.store-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px 24px 80px;
}

.store-title { font-size: 64px; font-weight: 900; margin-bottom: 30px; text-align: center; }

.filters {
	display: flex;
	gap: 12px;
	margin-bottom: 50px;
	flex-wrap: wrap;
	justify-content: center;
}

.filter-tab {
	font-family: var(--font);
	font-size: 18px;
	font-weight: 600;
	padding: 8px 26px;
	background: var(--gray-light);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: 200ms;
}

.filter-tab:hover { border-color: var(--cyan); }
.filter-tab.active { background: var(--ink); color: var(--white); }

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 40px;
	width: 100%;
	max-width: 1100px;
}

.product-card {
	background: var(--gray-light);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card.hidden { display: none; }

/* enlace que envuelve imagen + título y lleva a la página de detalle */
.product-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.product-card-img {
	position: relative;
	width: 100%;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.product-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.product-card:hover .product-card-img img { transform: scale(1.08); }

.product-badge {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	color: var(--white);
}

.product-badge.samplepack { background: var(--teal); }
.product-badge.plugin     { background: #0e7c91; }

/* etiqueta de estado en la esquina superior derecha de la tarjeta */
.product-card-img .status-badge { position: absolute; top: 0; right: 0; }

.product-name { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.product-desc { font-size: 16px; font-weight: 200; color: #333; margin-bottom: 20px; flex: 1; }

.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-size: 26px; font-weight: 900; }

/* botón de compra (un <a> que abre el overlay de Gumroad) */
.buy-btn {
	font-family: var(--font);
	font-size: 16px;
	font-weight: 900;
	color: var(--white) !important;
	background: var(--ink) !important;
	border: none;
	border-radius: var(--radius-pill);
	padding: 10px 24px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: 200ms;
}

.buy-btn:hover { background: var(--cyan) !important; color: var(--ink) !important; }

/* Comprar + prueba en la tarjeta, y badge de descuento */
.product-footer { flex-wrap: wrap; gap: 10px; row-gap: 12px; }
.product-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.product-card-img .discount-badge { position: absolute; top: 0; right: 0; margin: 10px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
	.store-title { font-size: 44px; }
}