/* La Végétalerie — styles communs (galerie, matières) */
:root {
  --vgt-forest: #1d3528;
  --vgt-forest-2: #2b4a39;
  --vgt-sage: #8a9a5b;
  --vgt-sage-2: #6e7c45;
  --vgt-ecru: #f5f2ed;
  --vgt-card: #fbfaf7;
  --vgt-line: #e4e0d6;
  --vgt-text: #2e2e2e;
  --vgt-muted: #7a7a72;
  --vgt-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --vgt-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vgt-radius: 20px;
}

.vgt-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 36px; }
.vgt-filters button,
.vgt-filters button:hover,
.vgt-filters button:focus {
  font: 500 14px/1 var(--vgt-body); letter-spacing: .02em; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--vgt-line); background: var(--vgt-card); color: var(--vgt-forest); cursor: pointer; transition: all .25s;
}
.vgt-filters button:hover { border-color: var(--vgt-sage); }
.vgt-filters button.is-active { background: var(--vgt-forest); border-color: var(--vgt-forest); color: var(--vgt-ecru); }

.vgt-gallery { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgt-gallery.vgt-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vgt-gallery.vgt-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .vgt-gallery, .vgt-gallery.vgt-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vgt-gallery, .vgt-gallery.vgt-cols-2, .vgt-gallery.vgt-cols-4 { grid-template-columns: 1fr; } }

.vgt-card[data-terms] { position: relative; margin: 0; border-radius: var(--vgt-radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--vgt-forest); }
.vgt-card[hidden] { display: none; }
.vgt-card-img, .vgt-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.vgt-card[data-terms]:hover .vgt-card-img img { transform: scale(1.06); }
.vgt-card[data-terms] figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 22px; color: var(--vgt-ecru);
  background: linear-gradient(to top, rgba(29, 53, 40, .88), rgba(29, 53, 40, 0));
  display: flex; flex-direction: column; gap: 4px; font-family: var(--vgt-body);
}
.vgt-card-title { font: 500 26px/1.1 var(--vgt-display); }
.vgt-card-dims { font-style: normal; font-size: 13px; opacity: .75; letter-spacing: .04em; }
.vgt-card-more { font-size: 14px; line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transition: all .5s; }
.vgt-card-more em { display: block; font-style: normal; color: #c9d3a8; margin-top: 4px; font-size: 13px; }
.vgt-card[data-terms]:hover .vgt-card-more { max-height: 120px; opacity: 1; margin-top: 6px; }
.vgt-gallery-link { text-align: center; margin-top: 30px; }
.vgt-gallery-link a { color: var(--vgt-forest); font: 500 15px var(--vgt-body); text-decoration: none; border-bottom: 1px solid var(--vgt-sage); padding-bottom: 3px; }
.vgt-empty { text-align: center; color: var(--vgt-muted); }

.vgt-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-family: var(--vgt-body); }
@media (max-width: 900px) { .vgt-materials { grid-template-columns: 1fr; } }
.vgt-mat-group h3 { font: 500 28px/1.1 var(--vgt-display); color: var(--vgt-forest); margin: 0 0 14px; }
.vgt-mat-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vgt-mat-group li { display: flex; gap: 12px; align-items: flex-start; }
.vgt-mat-group .vgt-swatch { flex: 0 0 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); margin-top: 2px; }
.vgt-mat-group strong { display: block; color: var(--vgt-forest); font-weight: 500; }
.vgt-mat-group small { display: block; color: var(--vgt-muted); font-size: 13px; line-height: 1.4; }