/**
 * Smart River — liste de produits : vue liste B2B (rendu des lignes) et bascule grille / liste
 *
 * Composant commun aux pages listant des produits : catégorie, marque, promotions, nouveautés,
 * meilleures ventes, recherche (config/theme.yml > assets > css).
 * Toutes les règles sont limitées au conteneur .sr-listing (section #main de ces pages).
 * Bloc d'achat (quantité, boutons, stock) : add-to-cart.css — script de bascule : product-list-view.js.
 * Templates : catalog/_partials/sr-view-toggle.tpl (boutons, placés dans le panneau « Filtrer et trier » et stylés
 * par listing-filters.css), catalog/_partials/product-list-rows.tpl
 * Script : assets/js/product-list-view.js
 * Les miniatures produit de la grille (.product-miniature) ne sont pas stylées ici (product-miniatures.css).
 *
 * Personnalisation : variables --sr-list-*.
 */

.sr-listing {
  --sr-list-accent: #1b7d36;
  --sr-list-accent-soft: rgba(27, 125, 54, 0.09);
  --sr-list-text: #1f2328;
  --sr-list-muted: #6b7280;
  --sr-list-border: #e8e8ec;
  --sr-list-surface: #ffffff;
  --sr-list-hover: #f4f5f7;
  --sr-list-ink: #0c1522;
  --sr-list-energy: #c6f432;
  --sr-list-radius-pill: 999px;
  --sr-list-transition: 0.2s ease;
  --sr-list-success: #1a7f4b;
  --sr-list-warning: #9a5b00;
  --sr-list-danger: #b42318;
  --sr-list-danger-soft: #fdecea;
  --sr-list-flag-danger: #d92d20;
  --sr-list-image: 64px;
}

/* ------------------------------------------------------------------ panneau produits : barre de tri */

.sr-listing #products {
  color: var(--sr-list-text);
}

/* barre au-dessus des produits (nombre, bouton « Filtrer et trier ») : listing-filters.css (KAN-17) */

/* ------------------------------------------------------------------ bascule grille / liste */

/* les boutons Grille / Liste sont dans le panneau « Filtrer et trier » (styles : listing-filters.css) */
.sr-listing .sr-listing__products {
  position: relative;
}


/* ------------------------------------------------------------------ vue liste (B2B) */

.sr-listing .sr-product-list {
  border-top: 1px solid var(--sr-list-border);
}

.sr-listing .sr-product-list__head,
.sr-listing .sr-product-row {
  display: grid;
  grid-template-columns: var(--sr-list-image) minmax(0, 1fr) 7.5rem 7.5rem 14.5rem;
  gap: 1rem;
  align-items: center;
}

.sr-listing .sr-product-list__head {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--sr-list-border);
  color: var(--sr-list-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-listing .sr-product-list__col-product {
  grid-column: 1 / span 2;
}

.sr-listing .sr-product-list__col-price {
  text-align: right;
}

.sr-listing .sr-product-row {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--sr-list-border);
  transition: background-color var(--sr-list-transition);
}

.sr-listing .sr-product-row:hover {
  background: linear-gradient(90deg, transparent, var(--sr-list-hover) 8%, var(--sr-list-hover) 92%, transparent);
}

.sr-listing .sr-product-row__image {
  display: block;
  width: var(--sr-list-image);
  height: var(--sr-list-image);
  overflow: hidden;
  border-radius: 8px;
  background: var(--sr-list-hover);
}

.sr-listing .sr-product-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-listing .sr-product-row__info {
  min-width: 0;
}

.sr-listing .sr-product-row__name {
  display: -webkit-box;
  margin: 0 0 0.25rem;
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sr-listing .sr-product-row__name a {
  color: var(--sr-list-text);
}

.sr-listing .sr-product-row__name a:hover {
  color: var(--sr-list-accent);
  text-decoration: none;
}

.sr-listing .sr-product-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: var(--sr-list-muted);
  font-size: 0.8125rem;
}

.sr-listing .sr-product-row__brand {
  color: var(--sr-list-text);
  font-weight: 600;
}

.sr-listing .sr-product-row__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}

.sr-listing .sr-product-row__flag {
  max-width: 100%;
  padding: 0.1875rem 0.5rem;
  overflow: hidden;
  border-radius: var(--sr-list-radius-pill);
  background: var(--sr-list-ink);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  /* sécurité : un badge trop long est raccourci au lieu de déborder */
  white-space: nowrap;
}

/* mêmes couleurs que les badges des miniatures (product-miniatures.css) */
.sr-listing .sr-product-row__flag--new {
  background: var(--sr-list-energy);
  color: var(--sr-list-ink);
}

.sr-listing .sr-product-row__flag--discount,
.sr-listing .sr-product-row__flag--on-sale {
  background: var(--sr-list-flag-danger);
  color: #ffffff;
}

.sr-listing .sr-product-row__flag--online-only {
  order: 10;
}

/* mêmes doublons masqués que sur les miniatures :
   - « Promo ! » quand la remise chiffrée (-15 %…) est déjà affichée
   - « Rupture de stock » : la ligne affiche déjà « Rupture » (stock) et le bouton « Indisponible » */
.sr-listing .sr-product-row__flags:has(.sr-product-row__flag--discount) .sr-product-row__flag--on-sale,
.sr-listing .sr-product-row__flag--out_of_stock {
  display: none;
}

/* stock */
/* prix */
.sr-listing .sr-product-row__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.sr-listing .sr-product-row__regular {
  color: var(--sr-list-muted);
  font-size: 0.8125rem;
  text-decoration: line-through;
}

.sr-listing .sr-product-row__current {
  color: var(--sr-list-text);
  font-size: 1.0625rem;
  font-weight: 800;
  white-space: nowrap;
}

.sr-listing .sr-product-row__regular + .sr-product-row__current {
  color: var(--sr-list-danger);
}

.sr-listing .sr-product-row__tax {
  color: var(--sr-list-muted);
  font-size: 0.75rem;
}

/* commander */
.sr-listing .sr-product-row__order {
  display: flex;
  justify-content: flex-end;
}

/* Mise en page selon la largeur réelle de la liste (et non de l'écran) :
   sur tablette, la colonne de gauche réduit fortement la zone produits. */
.sr-listing .sr-listing__products {
  container: sr-products / inline-size;
}

.sr-listing .sr-product-list {
  container: sr-list / inline-size;
}

@container sr-list (max-width: 820px) {
  .sr-listing .sr-product-list__head,
  .sr-listing .sr-product-row {
    grid-template-columns: var(--sr-list-image) minmax(0, 1fr) 6.5rem 12.5rem;
  }

  .sr-listing .sr-product-list__col-stock {
    display: none;
  }

  .sr-listing .sr-product-row__image {
    grid-row: span 2;
  }

  .sr-listing .sr-product-row__stock {
    grid-column: 2;
    grid-row: 2;
    margin-top: -0.5rem;
  }
}

@container sr-list (max-width: 600px) {
  .sr-listing .sr-product-list__head {
    display: none;
  }

  .sr-listing .sr-product-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "img info info"
      "img stock price"
      "order order order";
    gap: 0.5rem 0.75rem;
  }

  .sr-listing .sr-product-row__image {
    grid-area: img;
    grid-row: auto;
    width: 56px;
    height: 56px;
  }

  .sr-listing .sr-product-row__info { grid-area: info; }
  .sr-listing .sr-product-row__stock { grid-area: stock; grid-column: auto; grid-row: auto; margin-top: 0; }
  .sr-listing .sr-product-row__price { grid-area: price; }
  .sr-listing .sr-product-row__order { grid-area: order; justify-content: stretch; }

  .sr-listing .sr-product-row__order .sr-buy,
  .sr-listing .sr-add-form,
  .sr-listing .sr-product-row__order .sr-btn--ghost,
  .sr-listing .sr-product-row__order .sr-btn--disabled {
    width: 100%;
  }

  .sr-listing .sr-add-form .sr-btn {
    flex: 1;
  }
}

/* grille : dernière ligne alignée à gauche (l'ancien thème centre les produits) */
.sr-listing #js-product-list .products {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .sr-listing .sr-product-row,
  .sr-listing .sr-btn,
  .sr-listing .sr-view-toggle__btn {
    transition: none !important;
  }
}