/* loja.css — loja.html uniquement. Chargé après css/base.css. */

/* — barre latérale + grille — */
.shop {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  margin: var(--leading) 0 calc(2 * var(--leading));
  align-items: start;
}
@media (max-width: 860px) { .shop { grid-template-columns: 1fr; } }

/* — filtres — */
.filters { position: sticky; top: calc(var(--leading) * 2.6); }
@media (max-width: 860px) { .filters { position: static; } }

.filters-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--half);
  padding-bottom: var(--half);
  border-bottom: 1px solid var(--color-divider);
}
.filters-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; margin: 0;
}
.f-clear { font-size: 13px; }

.f-group { padding: var(--half) 0; border-bottom: 1px solid var(--color-divider); }
.f-legend {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; margin: 0 0 10px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.f-list-inline { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }

.f-opt {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer; line-height: 1.3;
}
.f-opt input { accent-color: var(--color-accent); flex: none; margin: 0; }
.f-opt span { flex: 1; }
.f-opt em {
  font-style: normal; font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.f-opt:hover span { color: var(--color-accent-700); }

.f-price { display: flex; gap: 8px; }
.f-price label {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.f-price .input { min-width: 0; padding-inline: 10px; }
.f-hint {
  font-size: 12px; margin: 8px 0 0;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* — barre compteur + tri — */
.shop-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--half); flex-wrap: wrap;
  padding-bottom: var(--half);
}
.shop-count {
  margin: 0; font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.shop-sort {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
.shop-sort .input { width: auto; }

/* — grille produits — */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(1.4 * var(--leading)) clamp(18px, 2.5vw, 32px);
}
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .shop-grid { grid-template-columns: 1fr; } }

.product { display: flex; flex-direction: column; }
.product[hidden] { display: none; }
.prod-link { display: block; color: inherit; text-decoration: none; }

.prod-figure {
  position: relative;
  margin: 0 0 12px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.prod-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 200ms ease, opacity 260ms ease;
}
.prod-link:hover .prod-figure img { transform: scale(1.03); }

/* Seconde vue au survol, pour les pièces qui ont plusieurs photos.
   L'alternative est empilée sous la principale et se révèle quand
   celle-ci s'efface — pas de reflow, pas de chargement différé visible. */
.prod-alt {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.has-alt:hover .prod-main,
.has-alt:focus-within .prod-main { opacity: 0; }
.has-alt:hover .prod-alt,
.has-alt:focus-within .prod-alt { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .prod-figure img { transition: none; }
}
@media (hover: none) {
  /* au doigt il n'y a pas de survol : on garde la vue principale */
  .has-alt .prod-alt { display: none; }
}

.prod-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.25; margin: 0;
}
.prod-link:hover .prod-name { color: var(--color-accent-700); }
.prod-price {
  font-size: 15px; margin: 4px 0 0;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* — pièce vendue : visible mais en retrait — */
.prod-badge { align-self: flex-start; margin-top: 8px; }
.is-out .prod-figure img { opacity: 0.55; }
.is-out .prod-price { text-decoration: line-through; }

.shop-empty {
  grid-column: 1 / -1;
  font-size: 15px; padding: calc(2 * var(--leading)) 0; text-align: center;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — bandeau vers la boutique officielle — */
.loja-panel { margin-bottom: calc(2.5 * var(--leading)); }
.loja-panel h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; margin: 0; max-width: 46ch;
}

/* — outils de la barre boutique (devise + tri) — */
.shop-tools { display: flex; align-items: center; gap: var(--half); flex-wrap: wrap; }
.shop-bar .cur-note { flex-basis: 100%; }