/* ==========================================================================
   Panier — surcouche client benjaminbyaftrade
   Le HTML du panier provient du thème parent theme-lm-ecommerce
   (templates/ecommerce/cart/cartContent.html.twig et
   components/cart-content-item.html.twig). On surcouche uniquement en CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête du tableau panier toujours visible (sticky)
   La ligne d'en-tête (ARTICLE(S) / PRIX UNITAIRE / QUANTITÉ / MONTANT) reste
   affichée quand le panier contient beaucoup de lignes de vente.
   Le header du site (#header) est en position: relative (il défile), donc
   top: 0 suffit. Le sticky est posé sur les <th> car sticky sur <thead>/<tr>
   n'est pas fiable sur tous les navigateurs.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
  #cart-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* fond opaque pour masquer les lignes qui défilent dessous */
    background-color: #ffffff;
  }
}

/* --------------------------------------------------------------------------
   2. Masquer le prix des modes de transport (livraison)
   Le prix de chaque mode de livraison n'est pas affiché pour ce client.
   -------------------------------------------------------------------------- */
#cart-modes-livraison .mode-livraison-prix {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Agrandir les images des lignes de vente du panier
   Conteneur en w-24 h-24 (96px) et images en max-w-24/max-h-24 par défaut.
   On passe à ~140px pour ce client.
   -------------------------------------------------------------------------- */
.cart-article .cart-img {
  width: 140px;
  height: 140px;
}

.cart-article .cart-img img {
  max-width: 140px;
  max-height: 140px;
}

/* --------------------------------------------------------------------------
   4. Champ « Date de livraison souhaitée » : sélecteur de date
   Le textarea du SDK est masqué par js/deliveryDatePicker.js et remplacé par
   un <input type="date"> qui alimente la même valeur au format AAAAMMJJ.
   -------------------------------------------------------------------------- */
input.delivery-date-picker {
  width: fit-content;
  min-width: 14rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background-color: #fff;
  font-family: inherit;
  cursor: pointer;
}

input.delivery-date-picker:focus {
  outline: 2px solid #003057;
  outline-offset: 1px;
}