/* ==========================================================================
   Pages Panier et Commande (blocs WooCommerce)
   Alignement sur le tiroir panier : mêmes gouttières, mêmes vignettes,
   même sélecteur de quantité, même bouton principal.
   Chargé uniquement sur is_cart() / is_checkout().
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gouttières et largeur de lecture
   Le contenu partait à 25px du bord alors que l'en-tête et le pied de page du
   site respirent à 112px (.espace_body_all). On reprend la même échelle, avec
   une largeur maximale pour éviter des lignes de 1000px sur grand écran.
   -------------------------------------------------------------------------- */

body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
  padding-left: 112px;
  padding-right: 112px;
}

body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header {
  margin: 0 0 48px;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Le thème pose padding:25px sur le titre : il décalait « Panier » de 25px par
   rapport au tableau juste dessous. La respiration vient désormais de l'en-tête. */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
  padding: 0;
}

body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
  padding-bottom: 80px;
}

/* --------------------------------------------------------------------------
   2. Titres
   Même traitement que « MON PANIER » dans le tiroir.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-checkout .wc-block-components-checkout-step__title,
.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tuatara);
}

.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nevada);
  border-bottom: 1px solid var(--cararra);
}

/* Aligner les libellés de colonnes sur le contenu des cellules. */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-image {
  padding-left: 0;
  padding-right: 0;
}
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-product,
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header-total {
  padding-left: 20px;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   3. Lignes du panier
   -------------------------------------------------------------------------- */

.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
  border-bottom: 1px solid var(--cararra);
}

/* Sous 700px environ, WooCommerce bascule la ligne en grille (classes
   .is-medium / .is-small / .is-mobile) et fixe lui-même ses colonnes :
   ces réglages de cellules ne valent que pour la table pleine largeur. */
.woocommerce-cart .wc-block-cart:not(.is-mobile):not(.is-small):not(.is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  width: 114px;
  padding: 22px 0;
}

/* Vignette identique au tiroir : fond neutre, image contenue, fond blanc fondu.
   max-width + aspect-ratio gardent la vignette carrée même quand WooCommerce
   bascule la ligne en grille (classes .is-medium / .is-small / .is-mobile). */
.woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
  width: 90px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--desert_storm);
  border-radius: 8px;
  mix-blend-mode: multiply;
}

.woocommerce-cart .wc-block-cart:not(.is-mobile):not(.is-small):not(.is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.woocommerce-cart .wc-block-cart:not(.is-mobile):not(.is-small):not(.is-medium) table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
  padding: 22px 0 22px 20px;
}

.woocommerce-cart .wc-block-components-product-name {
  font-size: 15px;
  line-height: 1.4;
  color: var(--tuatara);
}
.woocommerce-cart .wc-block-components-product-name:hover {
  color: var(--tussock);
}

.woocommerce-cart .wc-block-cart-item__prices {
  margin-top: 4px;
  font-size: 13px;
  color: var(--tapa);
}

.woocommerce-cart .wc-block-cart-item__quantity {
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   4. Sélecteur de quantité : pastille arrondie du tiroir
   -------------------------------------------------------------------------- */

.woocommerce-cart .wc-block-components-quantity-selector {
  width: auto;
  min-width: 0;
  border: 1px solid var(--westar);
  border-radius: 999px;
}
.woocommerce-cart .wc-block-components-quantity-selector::after {
  display: none;
}
.woocommerce-cart .wc-block-components-quantity-selector__button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  color: var(--tuatara);
  opacity: 1;
  transition: .25s;
}
.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  color: var(--white);
  background: var(--tuatara);
}
.woocommerce-cart .wc-block-components-quantity-selector__input {
  width: 30px;
  min-width: 30px;
  font-size: 13px;
  color: var(--tuatara);
}

.woocommerce-cart .wc-block-cart-item__remove-link {
  margin-left: 14px;
  color: var(--nevada);
  transition: .25s;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: #C0392B;
}

/* --------------------------------------------------------------------------
   5. Récapitulatif
   Traité comme le pied du tiroir : encadré, séparateurs discrets.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper {
  border-top-color: var(--cararra);
}

.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
  padding: 24px;
  border: 1px solid var(--cararra);
  border-radius: 12px;
}

.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-checkout .wc-block-components-totals-item {
  font-size: 14px;
  color: var(--tapa);
}

.woocommerce-cart .wc-block-components-totals-footer-item,
.woocommerce-checkout .wc-block-components-totals-footer-item {
  font-size: 18px;
  color: var(--tuatara);
}

/* --------------------------------------------------------------------------
   6. Boutons principaux
   Copie du CTA « Commander » du tiroir : noir profond, doré au survol.
   -------------------------------------------------------------------------- */

.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  padding: 16px;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--tuatara);
  border: 1px solid var(--tuatara);
  border-radius: 8px;
  box-shadow: none;
  transition: .35s;
}

.woocommerce-cart .wc-block-cart__submit-button {
  width: 100%;
}

/* Le bouton partage sa ligne avec « Retour au panier » : une largeur minimale
   le garde dominant sans écraser le lien. */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  min-width: 260px;
}

.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-cart__submit-button:focus,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus {
  color: var(--white);
  background: var(--tussock);
  border-color: var(--tussock);
}

/* --------------------------------------------------------------------------
   7. Commande : panneau résumé et champs
   -------------------------------------------------------------------------- */

.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-panel,
.woocommerce-checkout .wc-block-components-order-summary {
  border-color: var(--cararra);
}

/* Mêmes vignettes que le panier et le tiroir, en plus compact. */
.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
  /* 48px : largeur native du bloc, que .woocommerce img { max-width:100% } plafonne. */
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--desert_storm);
  border-radius: 6px;
  mix-blend-mode: multiply;
}
.woocommerce-checkout .wc-block-components-order-summary-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--cararra);
}
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: 14px;
  line-height: 1.4;
  color: var(--tuatara);
}

.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-textarea,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__container {
  border-color: var(--westar);
  border-radius: 8px;
}
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-checkout .wc-block-components-form .wc-block-components-textarea:focus,
.woocommerce-checkout .wc-block-checkout .wc-blocks-components-select__select:focus {
  border-color: var(--tuatara);
  box-shadow: none;
  outline: none;
}

.woocommerce-checkout .wc-block-components-checkout-step {
  padding-bottom: 32px;
}

/* --------------------------------------------------------------------------
   8. Responsive : même échelle de gouttières que .espace_body_all
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1439px) {
  body.woocommerce-cart .entry-header,
  body.woocommerce-checkout .entry-header,
  body.woocommerce-cart .entry-content,
  body.woocommerce-checkout .entry-content {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media screen and (max-width: 767px) {
  body.woocommerce-cart .entry-header,
  body.woocommerce-checkout .entry-header,
  body.woocommerce-cart .entry-content,
  body.woocommerce-checkout .entry-content {
    padding-left: 30px;
    padding-right: 30px;
  }
  body.woocommerce-cart .entry-header,
  body.woocommerce-checkout .entry-header {
    margin-bottom: 32px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

@media screen and (max-width: 599px) {
  body.woocommerce-cart .entry-header,
  body.woocommerce-checkout .entry-header,
  body.woocommerce-cart .entry-content,
  body.woocommerce-checkout .entry-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 455px) {
  body.woocommerce-cart .entry-header,
  body.woocommerce-checkout .entry-header,
  body.woocommerce-cart .entry-content,
  body.woocommerce-checkout .entry-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}