﻿/* Catalog produse (webshop) */
.shop-toolbar {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.shop-search {
	flex: 1;
	min-width: 260px;
}

.shop-filters {
	min-width: 240px;
}

.shop-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.shop-chip {
	height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--fn-border);
	background: #fff;
	color: var(--fn-muted);
	font-weight: 900;
	cursor: pointer;
}

	.shop-chip.is-active {
		background: var(--fn-soft);
		color: var(--fn-primary-dark);
		border-color: rgba(13,88,199,.25);
	}

.shop-loading {
	padding: 18px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--fn-muted);
	font-weight: 800;
}

.shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	overflow: auto;
	height: 100%;
}

.shop-card {
	border: 1px solid var(--fn-border);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 26px rgba(0,0,0,.06);
	display: flex;
	flex-direction: column;
}

	.shop-card.is-unavailable {
		opacity: .7;
	}

.shop-img {
	position: relative;
	background: var(--fn-soft-2);
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

	.shop-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

.shop-img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 1000;
	font-size: 30px;
	color: rgba(9,62,140,.55);
}

.shop-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.shop-badge {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 1000;
	background: var(--fn-soft);
	border: 1px solid rgba(13,88,199,.25);
	color: var(--fn-primary-dark);
	backdrop-filter: blur(6px);
}

	.shop-badge.secondary {
		background: var(--fn-soft-2);
		color: var(--fn-muted);
		border-color: var(--fn-border);
	}

	.shop-badge.service {
		background: rgba(245,158,11,.12);
		border-color: rgba(245,158,11,.25);
		color: #b45309;
	}

	.shop-badge.danger {
		background: rgba(220,38,38,.10);
		border-color: rgba(220,38,38,.25);
		color: #dc2626;
	}

.shop-body {
	padding: 12px 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.shop-title {
	font-weight: 1000;
	font-size: 15px;
	line-height: 1.2;
}

.shop-sub {
	font-size: 12px;
	color: var(--fn-muted);
	font-weight: 800;
}

.shop-desc {
	font-size: 13px;
	color: var(--fn-text);
	line-height: 1.35;
	opacity: .92;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shop-price {
	margin-top: auto;
	font-weight: 1000;
	color: var(--fn-text);
}

.shop-actions {
	display: flex;
}

	.shop-actions .fn-btn {
		flex: 1 1 auto;
		width: 100%;
		justify-content: center;
	}
/* Shop full-page: header + toolbar fixe, doar lista produse scroll */
.shop-page {
	/* layout-ul tău are padding în MainLayout: 18px sus + 14px jos = 32px */
	height: calc(100dvh - 32px);
	overflow: hidden;
}

.shop-shell {
	height: 100%;
}

.shop-card {
	height: 27rem;
	display: flex;
	flex-direction: column;
}

/* IMPORTANT pentru overflow într-un flex container */
.shop-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.shop-top {
	flex: 0 0 auto;
}

.shop-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding-right: 4px;
	-webkit-overflow-scrolling: touch;
}

	/* (opțional) un pic de spațiu jos ca să nu “lovească” ultima linie de butoane */
	.shop-scroll::after {
		content: "";
		display: block;
		height: 8px;
	}

/* dacă ai redenumit cardul de produs ca shop-card-item */
.shop-card-item {
	border: 1px solid var(--fn-border);
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 26px rgba(0,0,0,.06);
	display: flex;
	flex-direction: column;
}
.shop-grid.shop-grid--sm {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 1200px) {
	.shop-grid.shop-grid--sm {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.shop-grid.shop-grid--sm {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.shop-grid.shop-grid--sm {
		grid-template-columns: 1fr;
	}
}

.shop-card.shop-card--sm {
	height: 20rem; /* era 27rem */
	border-radius: 14px;
}

	.shop-card.shop-card--sm .shop-body {
		padding: 10px 10px 12px;
		gap: 6px;
	}

	.shop-card.shop-card--sm .shop-title {
		font-size: 14px;
		line-height: 1.15;
	}

	.shop-card.shop-card--sm .shop-sub {
		font-size: 11px;
	}

	.shop-card.shop-card--sm .shop-desc {
		font-size: 12px;
		-webkit-line-clamp: 2;
	}

	.shop-card.shop-card--sm .shop-badge {
		font-size: 11px;
		padding: 3px 8px;
	}

	.shop-card.shop-card--sm .shop-img-placeholder {
		font-size: 26px;
	}

	.shop-card.shop-card--sm .shop-actions .fn-btn {
		height: 34px;
		padding: 0 12px;
		border-radius: 10px;
	}
/* Responsive */
@media (max-width: 980px) {
	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.shop-grid {
		grid-template-columns: 1fr;
	}
}
