/* ═══════════════════════════════════════════════════
   VI NATURAL — CARTA DE VINS
   vinatural.org · 2026
   ═══════════════════════════════════════════════════ */

	/* ═══════════ FILTRES ═══════════ */

	.carta-filters {
		background: var(--blanc);
		padding: var(--sp-sm) var(--gutter) var(--sp-md);
		border-bottom: 1px solid rgba(42, 36, 32, 0.07);
		position: sticky;
		top: 3.2rem;
		z-index: 10;
	}

	.carta-filters-inner {
		max-width: var(--max-w);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.carta-filter-row {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		flex-wrap: wrap;
	}

	.carta-filter-label {
		font-family: var(--font-body);
		font-size: 0.65rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--carbó);
		opacity: 0.35;
		width: 5rem;
		flex-shrink: 0;
	}

	.carta-filter-btn {
		font-family: var(--font-body);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		padding: 0.3rem 0.75rem;
		border: 1px solid rgba(42, 36, 32, 0.15);
		border-radius: 2rem;
		background: transparent;
		color: var(--carbó);
		cursor: pointer;
		transition: all 0.2s;
		white-space: nowrap;
	}

	.carta-filter-btn:hover {
		border-color: var(--vi);
		color: var(--vi);
	}

	.carta-filter-btn.active {
		background: var(--vi);
		border-color: var(--vi);
		color: var(--blanc);
	}

	.carta-filter-btn[data-color="tous"],
	.carta-filter-btn[data-tipus="tots"] {
		border-color: transparent;
		opacity: 0.5;
	}

	.carta-filter-btn[data-color="tous"].active,
	.carta-filter-btn[data-tipus="tots"].active {
		background: transparent;
		color: var(--carbó);
		border-color: rgba(42, 36, 32, 0.2);
		opacity: 1;
	}

	/* Pastilles couleur */
	.carta-filter-btn::before {
		content: '';
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 0.35em;
		vertical-align: middle;
		position: relative;
		top: -1px;
	}

	.carta-filter-btn[data-color="blanc"]::before   { background: #f0ead8; border: 1px solid rgba(42,36,32,0.2); }
	.carta-filter-btn[data-color="negre"]::before   { background: #3D0F1A; }
	.carta-filter-btn[data-color="orange"]::before  { background: #C4653A; }
	.carta-filter-btn[data-color="rosat"]::before   { background: #D4849A; }
	.carta-filter-btn[data-color="ranci"]::before   { background: #A0722A; }
	.carta-filter-btn[data-color="vermut"]::before  { background: #8B1A3A; }
	.carta-filter-btn[data-color="tous"]::before,
	.carta-filter-btn[data-tipus]::before           { display: none; }

	/* ═══════════ COMPTE RÉSULTAT ═══════════ */

	.carta-count {
		font-family: var(--font-body);
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		color: var(--carbó);
		opacity: 0.35;
		padding: 0 var(--gutter);
		max-width: calc(var(--max-w) + 2 * var(--gutter));
		margin: var(--sp-sm) auto 0;
	}

	/* ═══════════ GRILLE VINS ═══════════ */

	.carta-grid {
		padding: var(--sp-sm) var(--gutter) var(--sp-xl);
		background: var(--blanc);
	}

	.carta-grid-inner {
		max-width: var(--max-w);
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--sp-md);
	}

	/* ═══════════ CARTE VIN ═══════════ */

	.vi-card {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: inherit;
		transition: opacity 0.2s;
	}

	.vi-card:hover {
		opacity: 0.8;
	}

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

	.vi-card-img {
		aspect-ratio: 2 / 3;
		overflow: hidden;
		background: var(--arena);
		margin-bottom: 0.75rem;
	}

	.vi-card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		display: block;
		transition: transform 0.5s;
	}

	.vi-card:hover .vi-card-img img {
		transform: scale(1.03);
	}

	.vi-card-badge {
		font-family: var(--font-body);
		font-size: 0.62rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-bottom: 0.25rem;
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}

	.vi-card-badge-color {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.color-blanc   .vi-card-badge-color { background: #d4c9a0; border: 1px solid rgba(42,36,32,0.2); }
	.color-negre   .vi-card-badge-color { background: #3D0F1A; }
	.color-orange  .vi-card-badge-color { background: #C4653A; }
	.color-rosat   .vi-card-badge-color { background: #D4849A; }
	.color-ranci   .vi-card-badge-color { background: #A0722A; }
	.color-vermut  .vi-card-badge-color { background: #8B1A3A; }

	.vi-card-badge-text {
		color: var(--carbó);
		opacity: 0.45;
	}

	.vi-card-name {
		font-family: var(--font-display);
		font-size: clamp(1rem, 1.3vw, 1.15rem);
		font-weight: 400;
		line-height: 1.2;
		color: var(--vi-profund);
		margin-bottom: 0.2rem;
	}

	.vi-card-celler {
		font-family: var(--font-body);
		font-size: 0.72rem;
		color: var(--carbó);
		opacity: 0.5;
		margin-bottom: 0.2rem;
	}

	.vi-card-desc {
		font-family: var(--font-display);
		font-size: 0.88rem;
		font-style: italic;
		color: var(--carbó);
		opacity: 0.55;
		line-height: 1.4;
		margin-bottom: 0.3rem;
	}

	.vi-card-preu {
		font-family: var(--font-display);
		font-size: 1rem;
		font-weight: 500;
		color: var(--vi);
		margin-top: auto;
		padding-top: 0.4rem;
	}

	/* Message zéro résultats */
	.carta-empty {
		display: none;
		grid-column: 1 / -1;
		text-align: center;
		padding: var(--sp-xl) 0;
		font-family: var(--font-display);
		font-size: 1.2rem;
		font-style: italic;
		color: var(--carbó);
		opacity: 0.35;
	}

	/* ═══════════ CONSELLS SOMMELIER ═══════════ */

	.carta-consells {
		background: var(--vi-profund);
		padding: var(--sp-lg) var(--gutter);
	}

	.carta-consells-inner {
		max-width: var(--max-w);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-sm);
	}

	.carta-consells-text {
		font-family: var(--font-display);
		font-size: clamp(1.2rem, 2vw, 1.8rem);
		font-weight: 300;
		color: var(--blanc);
		opacity: 0.85;
	}

	.carta-consells-text em {
		font-style: italic;
		font-weight: 400;
	}

	.carta-consells-link {
		display: inline-block;
		font-family: var(--font-body);
		font-size: 0.78rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--blanc);
		text-decoration: none;
		border: 1px solid rgba(245, 240, 232, 0.3);
		padding: 0.6rem 1.4rem;
		border-radius: 2rem;
		flex-shrink: 0;
		transition: all 0.25s;
	}

	.carta-consells-link:hover {
		background: rgba(245, 240, 232, 0.1);
		border-color: rgba(245, 240, 232, 0.6);
	}

	/* ═══════════ RESPONSIVE ═══════════ */

	@media (max-width: 1100px) {
		.carta-grid-inner { grid-template-columns: repeat(3, 1fr); }
	}

	@media (max-width: 768px) {
		.carta-grid-inner { grid-template-columns: repeat(2, 1fr); }
		.carta-filters { top: 0; }
		.carta-consells-inner { flex-direction: column; align-items: flex-start; }
	}

	@media (max-width: 480px) {
		.carta-grid-inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
		.carta-filter-label { display: none; }
	}