/* Premium presentation for WooCommerce's native Cart Block.
   Redesign 2026-08-17-c: reset to a restrained, clean editorial style after the
   2026-08-17-b pass read as overdesigned (heavy green hero band, gold-bordered
   boxes, shadows, motion). This pass follows the Matelas Dauphin reference more
   literally for structure/restraint: plain light background, quiet white cards
   with a thin border, minimal shadow, no color blocks, no animation. Colors,
   type and radii remain governed by DESIGN.md. Structural/UX inspiration only
   from Matelas Dauphin references; no Dauphin branding used. */

body.woocommerce-cart {
  background: var(--mp-color-surface-extra-light);
  color: var(--mp-color-green);
  font-family: var(--mp-font-body);
}

body.woocommerce-cart main,
body.woocommerce-cart .site-main {
  margin-inline: auto;
  max-width: var(--mp-container);
  padding: clamp(28px, 4vw, 48px) var(--mp-gutter-desktop) clamp(56px, 7vw, 96px);
  width: 100%;
}

body.woocommerce-cart .entry-header,
body.woocommerce-cart .page-header {
  margin: 0 0 28px;
}

body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-title {
  color: var(--mp-color-green);
  font: var(--mp-type-h1);
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -.02em;
  margin: 0;
}

body.woocommerce-cart .wp-block-woocommerce-cart {
  margin: 0;
  max-width: none;
  padding: 0;
}

body.woocommerce-cart .wp-block-woocommerce-cart.wc-block-cart {
  display: block;
}

body.woocommerce-cart .wp-block-woocommerce-cart > .wc-block-components-sidebar-layout.wc-block-cart {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, .7fr);
}

body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart__sidebar {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
}

/* --- Sidebar: order-summary card --- */

body.woocommerce-cart .wc-block-cart__sidebar {
  background: var(--mp-color-white);
  border: 1px solid var(--mp-color-line);
  border-radius: 12px;
  padding: 24px;
  position: sticky;
  top: 112px;
}

body.woocommerce-cart .wc-block-cart__totals-title {
  color: var(--mp-color-green);
  font-family: var(--mp-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  text-transform: none;
}

/* Only the wrapper is used for spacing; the single intentional divider lives on
   .wc-block-components-totals-footer-item below. A generic border here would also
   apply to WooCommerce's empty order-meta slot wrapper and render as a blank bar. */
body.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-totals-wrapper {
  padding: 6px 0;
}

body.woocommerce-cart .wc-block-components-totals-wrapper.slot-wrapper:not(:has(> *:not(:empty))) {
  display: none;
}

body.woocommerce-cart .wc-block-components-totals-item {
  font-size: 15px;
  padding: 2px 0;
}

body.woocommerce-cart .wc-block-components-totals-item__label {
  color: var(--mp-color-neutral);
  font-weight: 500;
}

body.woocommerce-cart .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--mp-color-line);
  color: var(--mp-color-green);
  font-family: var(--mp-font-body);
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
  padding-top: 16px;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--mp-color-green);
  font-family: var(--mp-font-body);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

body.woocommerce-cart .wc-block-components-panel__button,
body.woocommerce-cart .wc-block-components-totals-coupon__button {
  color: var(--mp-color-green);
  font-family: var(--mp-font-body);
  font-size: 14px;
  font-weight: 600;
}

body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-combobox .components-combobox-control__input {
  background: var(--mp-color-white);
  border: 1px solid var(--mp-color-line);
  border-radius: 8px;
  color: var(--mp-color-extra-dark);
  font: var(--mp-type-small);
  min-height: 44px;
  padding-inline: 14px;
}

body.woocommerce-cart .wc-block-components-text-input input:focus,
body.woocommerce-cart .wc-block-components-combobox .components-combobox-control__input:focus {
  border-color: var(--mp-color-gold);
  box-shadow: var(--mp-focus-ring);
  outline: 0;
}

body.woocommerce-cart .wc-block-components-totals-coupon__button {
  background: var(--mp-color-green);
  border-radius: 8px;
  color: var(--mp-color-white);
  font-weight: 600;
  letter-spacing: 0;
  min-height: 44px;
  padding-inline: 18px;
  text-transform: none;
  transition: background-color var(--mp-transition);
}

body.woocommerce-cart .wc-block-components-totals-coupon__button:hover {
  background: #234a44;
}

body.woocommerce-cart .wc-block-cart__submit-container {
  margin-top: 18px;
}

body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
  text-decoration: none !important;
}

body.woocommerce-cart .wc-block-cart__submit-button {
  background: var(--mp-color-green);
  border: 1px solid var(--mp-color-green);
  border-radius: 8px;
  color: var(--mp-color-white);
  font-family: var(--mp-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  min-height: 52px;
  padding-inline: 20px;
  text-transform: none;
  transition: background-color var(--mp-transition);
}

body.woocommerce-cart .wc-block-cart__submit-button:hover {
  background: #234a44;
  border-color: #234a44;
  color: var(--mp-color-white);
}

body.woocommerce-cart .wc-block-cart__submit-button:active {
  transform: translateY(1px);
}

body.woocommerce-cart .mp-cart-security-note {
  display: none;
}

body.woocommerce-cart .wc-block-cart__sidebar .mp-cart-security-note {
  align-items: center;
  color: var(--mp-color-neutral);
  display: flex;
  font-size: 12.5px;
  font-weight: 500;
  gap: 6px;
  justify-content: center;
  line-height: 1.35;
  margin: 14px 0 0;
  text-align: center;
}

body.woocommerce-cart .wc-block-cart__sidebar .mp-cart-security-note svg {
  color: var(--mp-color-neutral);
  flex: 0 0 auto;
}

/* --- Main column: plain product cards --- */

body.woocommerce-cart .wc-block-cart__main {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items th,
body.woocommerce-cart .wc-block-cart-items td {
  border: 0;
}

body.woocommerce-cart .wc-block-cart-items thead {
  display: none;
}

body.woocommerce-cart .wc-block-cart-items {
  border-collapse: separate;
  border-spacing: 0 16px;
  margin-top: -16px;
}

body.woocommerce-cart .wc-block-cart-items__row {
  background: var(--mp-color-white) !important;
  border: 1px solid var(--mp-color-line);
}

body.woocommerce-cart .wc-block-cart-item__image {
  padding: 22px 0 22px 22px;
  position: relative;
  width: 200px;
}

body.woocommerce-cart .wc-block-cart-item__image img {
  aspect-ratio: 4 / 3;
  background: var(--mp-color-surface-extra-light);
  border-radius: 8px;
  display: block;
  object-fit: cover;
  width: 100%;
}

/* Native "Save $X" sale badge already exists per item; when present, also mirror it
   as a small ribbon on the image itself (both desktop and mobile), matching the
   reference's sale-corner tag. Purely decorative CSS, no fabricated markup. */
body.woocommerce-cart .wc-block-cart-items__row:has(.wc-block-components-sale-badge) .wc-block-cart-item__image::before {
  background: #c23b2f;
  border-radius: 6px;
  color: var(--mp-color-white);
  font-size: 11px;
  font-weight: 700;
  left: 8px;
  letter-spacing: .04em;
  padding: 4px 9px;
  position: absolute;
  text-transform: uppercase;
  top: 8px;
  z-index: 2;
}

html[lang^="fr"] body.woocommerce-cart .wc-block-cart-items__row:has(.wc-block-components-sale-badge) .wc-block-cart-item__image::before {
  content: "Solde";
}

html[lang^="en"] body.woocommerce-cart .wc-block-cart-items__row:has(.wc-block-components-sale-badge) .wc-block-cart-item__image::before {
  content: "Sale";
}

body.woocommerce-cart .wc-block-cart-item__product {
  padding: 26px 26px 26px 24px;
}

/* --- Desktop only: reflow the native table cells into a Dauphin-style card grid
   (large square image / title+details column / price-qty-total right column),
   using display:contents so the underlying <td> markup, WooCommerce logic and cart
   functionality are completely untouched, only the visual placement changes. Mobile
   keeps its own separately-tuned stacked layout below (max-width: 767px). --- */
@media (min-width: 768px) {
  /* display:grid on the row takes it out of normal table flow, so the table's
     border-spacing (used for the gap between cards) no longer has any effect.
     Replaced with an explicit margin-bottom, same visual gap as before (16px). */
  body.woocommerce-cart .wc-block-cart-items {
    border-spacing: 0;
    margin-top: 0;
  }

  body.woocommerce-cart .wc-block-cart-items__row {
    border-radius: 14px;
    column-gap: 24px;
    display: grid;
    grid-template-areas:
      "image title   meta"
      "image details meta";
    grid-template-columns: 220px minmax(0, 1fr) 190px;
    margin-bottom: 16px;
    padding: 24px;
    position: relative;
    row-gap: 6px;
  }

  body.woocommerce-cart .wc-block-cart-items__row:last-child {
    margin-bottom: 0;
  }

  body.woocommerce-cart .wc-block-cart-items__row > td {
    padding: 0;
  }

  /* Fixed size regardless of how tall the row grows (a personalization note adds
     lines of text next to it), so every product image is identical, never
     stretched or squashed by its neighboring content. */
  body.woocommerce-cart .wc-block-cart-item__image {
    align-self: start;
    grid-area: image;
    height: 220px;
    position: relative;
    width: 220px;
  }

  body.woocommerce-cart .wc-block-cart-item__image img {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    height: 100%;
    width: 100%;
  }

  body.woocommerce-cart .wc-block-cart-item__product,
  body.woocommerce-cart .wc-block-cart-item__wrap {
    display: contents;
  }

  body.woocommerce-cart .wc-block-components-product-name {
    align-self: start;
    grid-area: title;
  }

  body.woocommerce-cart .wc-block-components-product-metadata {
    grid-area: details;
  }

  /* Price, quantity and total all share the same "meta" grid area (spanning the
     card's full height), then each is pinned to a different edge of that shared
     space with align-self. This is what actually anchors the quantity control
     between price and total instead of leaving it centered in an unpredictable,
     oversized row track. */
  body.woocommerce-cart .wc-block-cart-item__prices {
    align-self: start;
    grid-area: meta;
    justify-self: end;
    margin-top: 0 !important;
    text-align: right;
  }

  body.woocommerce-cart .wc-block-cart-item__quantity {
    align-self: center;
    grid-area: meta;
    justify-self: end;
  }

  /* No position is set on .wc-block-cart-item__quantity, so this absolutely positions
     against the row itself (the nearest positioned ancestor), landing top-right of
     the whole card like the reference's small "x" close control. */
  body.woocommerce-cart .wc-block-cart-item__remove-link {
    margin-top: 0;
    position: absolute;
    right: 20px;
    top: 20px;
  }

  body.woocommerce-cart .wc-block-cart-item__total {
    align-self: end;
    grid-area: meta;
    justify-self: end;
    text-align: right;
  }
}

body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-cart a.wc-block-components-product-name {
  color: var(--mp-color-green) !important;
  font-family: var(--mp-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-decoration: none;
}

body.woocommerce-cart .wc-block-components-product-name:hover {
  color: var(--mp-color-gold);
}

body.woocommerce-cart .wc-block-cart-item__prices {
  margin-top: 12px;
}

body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price {
  color: var(--mp-color-green);
  font-size: 16px;
  font-weight: 700;
}

/* Variation attributes (Format / Fermeté) and the personalization note both render inside
   this same metadata block as separate .wc-block-components-product-details rows. WooCommerce
   slugifies each item-data label into its own class on the inner span (verified live:
   __note-de-personnalisation / __format / __fermet), so the note CAN be styled distinctly
   from the plain attribute line without touching PHP. */
body.woocommerce-cart .wc-block-components-product-metadata {
  margin-top: 14px;
}

body.woocommerce-cart .wc-block-components-product-details {
  color: var(--mp-color-neutral);
  font-size: 14px;
  line-height: 1.6;
}

body.woocommerce-cart .wc-block-components-product-details + .wc-block-components-product-details {
  margin-top: 6px;
}

body.woocommerce-cart .wc-block-components-product-details__name,
body.woocommerce-cart .wc-block-components-product-details__value {
  display: inline;
}

body.woocommerce-cart .wc-block-components-product-details__name {
  color: var(--mp-color-neutral);
  font-weight: 500;
}

/* The personalization note reads distinctly (italic, darker) from the plain attribute line. */
body.woocommerce-cart [class*="__note-de-personnalisation"],
body.woocommerce-cart [class*="__personalization-note"] {
  color: var(--mp-color-dark);
  display: block;
  font-style: italic;
}

body.woocommerce-cart .wc-block-components-product-price ins {
  color: #c23b2f;
  text-decoration: none;
}

body.woocommerce-cart .wc-block-components-product-price del {
  color: var(--mp-color-neutral);
  font-size: 13px;
  font-weight: 400;
  margin-left: 6px;
}

body.woocommerce-cart .wc-block-cart-item__total {
  padding: 26px 26px 26px 10px;
  text-align: right;
  vertical-align: top;
}

body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
  color: var(--mp-color-green);
  font-family: var(--mp-font-body);
  font-size: 18px;
  font-weight: 700;
}

/* Native WooCommerce "Save $X" badge shown on sale items: was rendering completely
   unstyled (plain text). Given a quiet pill treatment matching the rest of the cart. */
body.woocommerce-cart .wc-block-components-sale-badge {
  background: var(--mp-color-surface-extra-light);
  border-radius: 999px;
  color: var(--mp-color-neutral);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  white-space: nowrap;
}

body.woocommerce-cart .wc-block-components-quantity-selector {
  background: var(--mp-color-white);
  border: 1px solid var(--mp-color-line);
  border-radius: 8px;
  height: 40px;
  margin-top: 14px;
  overflow: hidden;
  width: 110px;
}

body.woocommerce-cart .wc-block-components-quantity-selector input,
body.woocommerce-cart .wc-block-components-quantity-selector button {
  color: var(--mp-color-green);
  font-family: var(--mp-font-body);
  font-size: 15px;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
  font-weight: 600;
  transition: background-color var(--mp-transition), color var(--mp-transition);
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  background: var(--mp-color-surface-extra-light);
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
  color: var(--mp-color-neutral);
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: #c23b2f;
  text-decoration-color: currentColor;
}

body.woocommerce-cart :where(a, button, input, select):focus-visible {
  outline: 2px solid var(--mp-color-gold);
  outline-offset: 3px;
}

body.woocommerce-cart .wc-block-components-product-collection {
  border-top: 1px solid var(--mp-color-line);
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
}

body.woocommerce-cart .wc-block-components-product-collection h2,
body.woocommerce-cart .wp-block-heading {
  color: var(--mp-color-green);
  font: var(--mp-type-h2);
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -.01em;
}

/* --- Empty cart: quiet, no default WooCommerce glyph --- */

body.woocommerce-cart .wc-block-cart__empty-cart {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: clamp(20px, 3vw, 32px) auto 0;
  max-width: 480px;
  padding: clamp(32px, 4vw, 48px) 24px;
  text-align: center;
}

body.woocommerce-cart .wc-block-cart__empty-cart::before {
  display: none;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title {
  color: var(--mp-color-green);
  font: var(--mp-type-h2);
  font-size: 26px;
  margin: 0 auto 10px;
  max-width: 680px;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title::before { display: none; }

body.woocommerce-cart .wc-block-cart__empty-cart .wc-block-cart__empty-cart__description,
body.woocommerce-cart .wc-block-cart__empty-cart p {
  color: var(--mp-color-neutral);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
}

body.woocommerce-cart .wc-block-cart__empty-cart .wc-block-components-button,
body.woocommerce-cart .wc-block-cart__empty-cart a.wc-block-components-button {
  background: var(--mp-color-green);
  border-radius: 8px;
  color: var(--mp-color-white);
  font-weight: 600;
  letter-spacing: 0;
  min-height: 48px;
  padding-inline: 26px;
  text-decoration: none !important;
  text-transform: none;
  transition: background-color var(--mp-transition);
}

body.woocommerce-cart .wc-block-cart__empty-cart .wc-block-components-button:hover {
  background: #234a44;
}

/* --- "Vous aimerez aussi" recommendation cards --- */

body.woocommerce-cart .mp-cart-upsells {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--mp-color-line);
  color: var(--mp-color-green);
  margin-top: clamp(28px, 3vw, 36px);
  overflow: visible;
  padding: clamp(24px, 2.6vw, 32px) 0 0;
  position: relative;
}

body.woocommerce-cart .mp-cart-upsells__heading {
  display: block;
  margin-bottom: 16px;
}

body.woocommerce-cart .mp-cart-upsells__heading h2 {
  color: var(--mp-color-green);
  font-family: var(--mp-font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
}

body.woocommerce-cart .mp-cart-upsells__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart .mp-cart-upsell-card {
  background: var(--mp-color-white);
  border: 1px solid var(--mp-color-line);
  border-radius: 10px;
  color: var(--mp-color-green);
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  min-height: 128px;
  overflow: hidden;
  position: relative;
  transition: border-color 180ms ease;
}

body.woocommerce-cart .mp-cart-upsell-card:hover,
body.woocommerce-cart .mp-cart-upsell-card:focus-within {
  border-color: var(--mp-color-gold);
}

body.woocommerce-cart .mp-cart-upsell-card__link {
  inset: 0;
  position: absolute;
  z-index: 2;
}

body.woocommerce-cart .mp-cart-upsell-card__link:focus-visible {
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--mp-color-gold);
  outline: none;
}

body.woocommerce-cart .mp-cart-upsell-card__media {
  aspect-ratio: auto;
  background: var(--mp-color-surface-extra-light);
  height: 100%;
  min-height: 128px;
  overflow: hidden;
  position: relative;
}

body.woocommerce-cart .mp-cart-upsell-card__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

body.woocommerce-cart .mp-cart-upsell-card__sale {
  background: #c23b2f;
  border-radius: 0 0 0 10px;
  color: var(--mp-color-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 6px 8px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

body.woocommerce-cart .mp-cart-upsell-card__body {
  align-content: center;
  display: grid;
  padding: 14px 18px;
}

body.woocommerce-cart .mp-cart-upsell-card__category {
  color: var(--mp-color-neutral);
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

body.woocommerce-cart .mp-cart-upsell-card h3 {
  color: var(--mp-color-green);
  font-family: var(--mp-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

body.woocommerce-cart .mp-cart-upsell-card__price {
  color: var(--mp-color-extra-dark);
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
}

body.woocommerce-cart .mp-cart-upsell-card__price ins {
  color: #c23b2f;
  text-decoration: none;
}

body.woocommerce-cart .mp-cart-upsell-card__price del {
  color: var(--mp-color-neutral);
  font-weight: 400;
  margin-left: 6px;
}

body.woocommerce-cart .mp-cart-upsell-card__cta {
  align-items: center;
  border-top: 0;
  color: var(--mp-color-gold);
  display: flex;
  font-size: 12px;
  font-weight: 600;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 0;
  text-transform: none;
}

@media (max-width: 1024px) {
  body.woocommerce-cart .wp-block-woocommerce-cart > .wc-block-components-sidebar-layout.wc-block-cart {
    gap: 20px;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .75fr);
  }

  body.woocommerce-cart .wc-block-cart-item__image { width: 150px; }

  body.woocommerce-cart .mp-cart-upsells__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body.woocommerce-cart main,
  body.woocommerce-cart .site-main,
  body.woocommerce-cart #content.site-main {
    margin: 0 !important;
    max-width: none !important;
    padding: 20px var(--mp-gutter-mobile) 56px !important;
    width: 100% !important;
  }

  body.woocommerce-cart .entry-header,
  body.woocommerce-cart .page-header { margin-bottom: 18px; }

  body.woocommerce-cart .entry-title,
  body.woocommerce-cart .page-title { font-size: 27px; }

  body.woocommerce-cart .wp-block-woocommerce-cart.alignwide {
    margin-inline: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  body.woocommerce-cart .wp-block-woocommerce-cart > .wc-block-components-sidebar-layout.wc-block-cart {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  body.woocommerce-cart .wc-block-cart__sidebar {
    padding: 18px;
    position: static;
    width: 100%;
  }

  /* display:grid on the row (below) takes it out of normal table flow, same as the
     desktop breakpoint, so border-spacing has no effect here either. Cards touch
     with zero gap without an explicit margin-bottom on each row. */
  body.woocommerce-cart .wc-block-cart-items { border-spacing: 0; margin-top: 0; }

  body.woocommerce-cart .wc-block-cart-items thead { display: none; }

  body.woocommerce-cart .wc-block-cart-items__row {
    margin-bottom: 12px !important;
  }

  body.woocommerce-cart .wc-block-cart-items__row:last-child {
    margin-bottom: 0 !important;
  }

  /* WooCommerce Blocks applies its OWN internal responsive grid to the cart row
     (.is-mobile/.is-small/.is-medium classes it manages via a container-width
     observer, not a viewport media query) with a more specific selector chain than
     ours, so it silently wins on plain specificity and was overriding the
     placement below (that's what caused the total row to render on top of the
     product column instead of underneath it). Every placement property here is
     !important specifically to beat that native ruleset, not for general use. */
  body.woocommerce-cart .wc-block-cart-items__row {
    border-radius: 12px !important;
    column-gap: 14px !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    padding: 16px !important;
    row-gap: 0 !important;
  }

  body.woocommerce-cart .wc-block-cart-items__row > td:first-child,
  body.woocommerce-cart .wc-block-cart-items__row > td:last-child { border-radius: 0; }

  body.woocommerce-cart .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    width: auto !important;
  }

  body.woocommerce-cart .wc-block-cart-item__image img {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 104px;
  }

  body.woocommerce-cart .wc-block-cart-items__row:has(.wc-block-components-sale-badge) .wc-block-cart-item__image::before {
    font-size: 9.5px;
    left: 6px;
    padding: 3px 7px;
    top: 6px;
  }

  body.woocommerce-cart .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
  }

  /* Line total was hidden entirely on mobile before, meaning a customer who changed
     quantity to 2+ never saw the actual line total, only the unit price. Now shown
     as a quiet full-width row under the quantity control instead of hidden.
     grid-row:2 (forced with !important, see note above) is what actually pins it
     below the image/product row instead of stacking on top of it. */
  body.woocommerce-cart .wc-block-cart-item__total {
    align-items: center !important;
    border-top: 1px solid var(--mp-color-line);
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: space-between;
    margin-top: 14px;
    padding: 12px 0 0 !important;
    text-align: left;
    vertical-align: unset;
  }

  body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
  }

  /* "Total" is spelled identically in fr-CA and en-CA, so no per-locale content is needed. */
  body.woocommerce-cart .wc-block-cart-item__total::before {
    color: var(--mp-color-neutral);
    content: "Total";
    font-size: 13px;
    font-weight: 500;
  }

  body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
    font-size: 16px;
  }

  body.woocommerce-cart .wc-block-cart .wc-block-cart-items .wc-block-components-product-name {
    font-family: var(--mp-font-display) !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
  }

  body.woocommerce-cart .wc-block-cart .wc-block-cart-item__prices,
  body.woocommerce-cart .wc-block-cart .wc-block-cart-item__prices .wc-block-components-product-price { font-size: 15px !important; }

  body.woocommerce-cart .wc-block-components-product-metadata,
  body.woocommerce-cart .wc-block-components-product-details {
    font-size: 13px;
  }

  body.woocommerce-cart .wc-block-components-quantity-selector {
    height: 38px;
    margin-top: 10px;
    width: 104px;
  }

  body.woocommerce-cart .wc-block-cart__totals-title { font-size: 20px; }

  body.woocommerce-cart .wc-block-cart__submit-button {
    min-height: 50px;
    padding-inline: 12px !important;
    width: 100% !important;
  }

  body.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  body.woocommerce-cart .mp-cart-upsells {
    margin-top: 22px;
    padding: 20px 0 0;
  }

  body.woocommerce-cart .mp-cart-upsells__heading { margin-bottom: 12px; }

  body.woocommerce-cart .mp-cart-upsells__heading h2 { font-size: 22px; margin: 0; }

  body.woocommerce-cart .mp-cart-upsells__grid { gap: 12px; grid-template-columns: 1fr; }

  body.woocommerce-cart .mp-cart-upsell-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 96px; }

  body.woocommerce-cart .mp-cart-upsell-card__media { min-height: 96px; }

  body.woocommerce-cart .mp-cart-upsell-card__body { padding: 12px 14px; }

  body.woocommerce-cart .mp-cart-upsell-card h3 { font-size: 16px; line-height: 1.1; }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart *,
  body.woocommerce-cart *::before,
  body.woocommerce-cart *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================== empty cart state ====
 * SEO-058. The empty cart was reported as broken and it genuinely was: the
 * product buttons rendered BLACK text on a dark grey pill (measured
 * rgb(0,0,0) on rgb(50,55,60), about 1.4:1) with an underline, so the label
 * was invisible. Two causes stacked:
 *
 *   1. `.elementor-kit-16 a` (0,1,1) sets a colour and outranks WooCommerce's
 *      own single-class block-button rules, so the label inherited the theme
 *      link colour. Every rule below that sets a link colour is therefore
 *      written at (0,2,1) or higher. Do not "simplify" these selectors.
 *   2. rgb(50,55,60) is WooCommerce Blocks' stock button background, which was
 *      never overridden for this site.
 *
 * The state itself was also a dead end: a heading, a dotted rule and a product
 * grid, with nowhere to click. It now reads as a designed panel with a primary
 * route to the shop and a secondary route to the custom service.
 * ========================================================================= */

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  margin-inline: auto;
  max-width: 1140px;
  padding-inline: clamp(20px, 5vw, 32px);
}

/* -- the panel ------------------------------------------------------------ */
body.woocommerce-cart .mp-empty-cart {
  background: linear-gradient(170deg, #f5f5f7 0%, #fbfbfc 68%, #fff 100%);
  border: 1px solid var(--mp-color-line, #dcdde8);
  border-radius: 18px;
  box-shadow: 0 22px 60px -46px rgb(28 53 49 / 50%);
  margin: clamp(8px, 2vw, 18px) 0 clamp(34px, 5vw, 56px);
  padding: clamp(30px, 5vw, 54px) clamp(22px, 4vw, 46px);
  text-align: center;
}
body.woocommerce-cart .mp-empty-cart__icon {
  align-items: center;
  background: #fff;
  border: 1px solid var(--mp-color-line, #dcdde8);
  border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgb(28 53 49 / 35%);
  color: #7d6420;
  display: inline-flex;
  height: 58px;
  justify-content: center;
  margin-bottom: 22px;
  width: 58px;
}
body.woocommerce-cart .mp-empty-cart__icon svg { height: 26px; width: 26px; }

/* Written at (0,2,1) so the Elementor kit's h2 colour cannot win. */
body.woocommerce-cart .mp-empty-cart h2.mp-empty-cart__title {
  color: #102420;
  font-family: var(--mp-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 12px;
  text-wrap: balance;
}
body.woocommerce-cart .mp-empty-cart__lede {
  color: #5a625f;
  font: 400 clamp(15.5px, 1.15vw, 17px)/1.62 var(--mp-font-body, "Inter", sans-serif);
  margin: 0 auto 26px;
  max-width: 46ch;
}
body.woocommerce-cart .mp-empty-cart__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn {
  align-items: center;
  border-radius: var(--mp-radius-control, 10px);
  display: inline-flex;
  font: 600 15.5px/1.2 var(--mp-font-body, "Inter", sans-serif);
  justify-content: center;
  min-height: 50px;
  padding: 10px 26px;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn--primary {
  background: #af9038;
  border: 1px solid #af9038;
  color: #14201e;
}
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn--primary:hover { background: #c9a94e; border-color: #c9a94e; }
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn--ghost {
  background: #fff;
  border: 1px solid var(--mp-color-line, #dcdde8);
  color: #1c3531;
}
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn--ghost:hover { border-color: #af9038; color: #7d6420; }
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn:active { transform: translateY(1px); }
body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn:focus-visible { outline: 2px solid #af9038; outline-offset: 3px; }

/* The stock heading and dotted rule are replaced by the panel above. */
body.woocommerce-cart .wc-block-cart__empty-cart__title,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-separator { display: none; }

/* -- "new in the shop" --------------------------------------------------- */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2.mp-empty-cart__next {
  color: #102420;
  font-family: var(--mp-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0 0 6px;
  text-align: left;
}
body.woocommerce-cart .mp-empty-cart__next-sub {
  color: #5a625f;
  font: 400 14.5px/1.6 var(--mp-font-body, "Inter", sans-serif);
  margin: 0 0 22px;
}

/* -- product buttons: the actual contrast bug ---------------------------- */
body.woocommerce-cart .wc-block-grid__products .wp-block-button__link,
body.woocommerce-cart .wc-block-grid__product .wp-block-button__link,
body.woocommerce-cart .wc-block-components-product-button .wp-block-button__link,
body.woocommerce-cart a.wp-block-button__link.add_to_cart_button {
  background: #1c3531;
  border: 1px solid #1c3531;
  border-radius: var(--mp-radius-control, 10px);
  color: #fff;
  font: 600 14px/1.2 var(--mp-font-body, "Inter", sans-serif);
  min-height: 44px;
  padding: 11px 20px;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
body.woocommerce-cart .wc-block-grid__products .wp-block-button__link:hover,
body.woocommerce-cart .wc-block-grid__product .wp-block-button__link:hover,
body.woocommerce-cart .wc-block-components-product-button .wp-block-button__link:hover,
body.woocommerce-cart a.wp-block-button__link.add_to_cart_button:hover {
  background: #af9038;
  border-color: #af9038;
  color: #14201e;
}
body.woocommerce-cart .wc-block-grid__products .wp-block-button__link:focus-visible,
body.woocommerce-cart a.wp-block-button__link.add_to_cart_button:focus-visible {
  outline: 2px solid #af9038;
  outline-offset: 3px;
}

/* The whole product card is a single `a.wc-block-grid__product-link` wrapping
   the image, the title and the sale badge, so the theme link colour underlined
   all of it in black. Selector confirmed against the rendered DOM, not guessed. */
body.woocommerce-cart .wc-block-grid__product a.wc-block-grid__product-link,
body.woocommerce-cart a.wc-block-grid__product-link,
body.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-title {
  color: #1c3531;
  text-decoration: none;
}
body.woocommerce-cart .wc-block-grid__product a.wc-block-grid__product-link:hover,
body.woocommerce-cart a.wc-block-grid__product-link:hover { color: #7d6420; text-decoration: none; }
body.woocommerce-cart a.wc-block-grid__product-link:focus-visible { outline: 2px solid #af9038; outline-offset: 3px; }
/* keep the price in the muted body tone rather than the link colour */
body.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-price { color: #5a625f; }

@media (max-width: 600px) {
  body.woocommerce-cart .mp-empty-cart__actions { flex-direction: column; }
  body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn { transition: none; }
  body.woocommerce-cart .mp-empty-cart .mp-empty-cart__btn:active { transform: none; }
}