@media (max-width: 767px) {
  body.woocommerce,
  body.woocommerce-page { margin: 0!important; overflow-x: clip; padding: 0!important; width: 100%; }
  body.woocommerce #page,
  body.woocommerce-page #page,
  body.woocommerce .site,
  body.woocommerce-page .site { margin: 0!important; max-width: none!important; padding: 0!important; width: 100%!important; }
  body.woocommerce #content,
  body.woocommerce-page #content { margin-inline: 0!important; max-width: none!important; padding-inline: 0!important; width: 100%!important; }
}

/* ==========================================================================
   WooCommerce notices (add-to-cart success, cart/checkout errors, info)

   Second pass: the first version (rounded floating card, big shadow, pill
   button, circular icon badge) read as over-designed next to the reference.
   Rebuilt as a flat, quiet rectangular box - thin border instead of a
   shadow, small radius, plain outline check icon, rectangular button - to
   match that calmer, cleaner shape directly.
   ========================================================================== */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  align-items: center;
  background: var(--mp-color-white);
  border: 1px solid var(--mp-color-line);
  border-radius: 6px;
  color: var(--mp-color-dark);
  display: flex;
  flex-wrap: wrap;
  font: 500 15px/1.5 var(--mp-font-body);
  gap: 12px 20px;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding: 16px 20px 16px 46px;
  position: relative;
}

/* Plain outline icon (check / warning / info), not a filled circle badge. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  background: center / 16px no-repeat;
  content: "";
  height: 18px;
  left: 20px;
  position: absolute;
  top: 17px;
  width: 18px;
}

.woocommerce-message::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3531' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}

.woocommerce-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c23b2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23c23b2f' stroke='none'/%3E%3C/svg%3E");
}

.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23af9038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='.6' fill='%23af9038' stroke='none'/%3E%3C/svg%3E");
}

/* WooCommerce's own woocommerce.css adds a legacy clearfix:
     .woocommerce-message::after { content: " "; display: table; clear: both; }
   In a flex container that pseudo-element becomes a real third flex item, and
   justify-content: space-between pushes IT to the right edge instead of the
   button - which is why the button sat stranded mid-row with ~300px of dead
   space to its right. Removing it from the flex flow, and pinning the button
   with margin-left:auto so its position holds regardless of item count. */
.woocommerce-message::after,
.woocommerce-error::after,
.woocommerce-info::after {
  content: none;
  display: none;
}

/* Error list items (validation errors render as <li> inside the div). */
.woocommerce-error li { list-style: none; margin: 0; }

/* The "View cart"/"Voir le panier" link WooCommerce appends inside the notice
   text, and the same class used on the checkout "Pay"/"Cancel" links. */
.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
  background: var(--mp-color-green);
  border-radius: 4px;
  color: var(--mp-color-white);
  flex: 0 0 auto;
  margin-left: auto;
  font: 600 13px/1 var(--mp-font-body);
  letter-spacing: .02em;
  padding: 11px 22px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--mp-transition);
  white-space: nowrap;
}

.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:hover {
  background: var(--mp-color-gold);
  color: var(--mp-color-white);
}

@media (max-width: 600px) {
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info { padding: 14px 16px 14px 42px; }
  .woocommerce-message::before,
  .woocommerce-error::before,
  .woocommerce-info::before { left: 16px; top: 15px; }
  .woocommerce-message a.button.wc-forward,
  .woocommerce-error a.button.wc-forward,
  .woocommerce-info a.button.wc-forward { padding: 10px 18px; width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   Placement (the actual reason it looked broken)

   WooCommerce prints .woocommerce-notices-wrapper as a direct child of <main>,
   which is full width. Measured live: the notice ran 0 -> 1425px edge to edge
   while every other element on the page (breadcrumb, gallery, product column)
   starts at 105px inside .mp-container. So it read as a full-bleed strip
   welded under the header rather than a card sitting on the page, which is
   what the reference actually does differently - not the border radius.

   Fix: keep the wrapper full width so it can carry the page tone as a band,
   and constrain the notice itself to the container's inner width
   (1280 - 2x32 = 1216px). That lands its left edge on 105px, flush with the
   breadcrumb and the gallery.
   -------------------------------------------------------------------------- */

.site-main > .woocommerce-notices-wrapper {
  /* Padded rather than relying on the notice's own bottom margin: that margin
     collapses straight through the wrapper's bottom edge and left a white gap
     between the tinted band and the product section. Bottom padding is 0 and
     the following section supplies the gap instead (see rule below), so the
     two do not stack into an oversized space. */
  padding-block: clamp(18px, 2vw, 26px) 0;
}

.site-main > .woocommerce-notices-wrapper > .woocommerce-message,
.site-main > .woocommerce-notices-wrapper > .woocommerce-error,
.site-main > .woocommerce-notices-wrapper > .woocommerce-info {
  margin-block: 0;
}

/* Match the product page's own surface so the white card reads as a card,
   and the band merges seamlessly into the product section below it. */
body.single-product .site-main > .woocommerce-notices-wrapper {
  background: #f9f9f8;
}

.site-main > .woocommerce-notices-wrapper > .woocommerce-message,
.site-main > .woocommerce-notices-wrapper > .woocommerce-error,
.site-main > .woocommerce-notices-wrapper > .woocommerce-info {
  margin-inline: auto;
  width: min(
    calc(var(--mp-container, 1280px) - (2 * var(--mp-gutter-desktop, 32px))),
    calc(100% - (2 * var(--mp-gutter-desktop, 32px)))
  );
}

@media (max-width: 1024px) {
  .site-main > .woocommerce-notices-wrapper > .woocommerce-message,
  .site-main > .woocommerce-notices-wrapper > .woocommerce-error,
  .site-main > .woocommerce-notices-wrapper > .woocommerce-info {
    width: calc(100% - (2 * var(--mp-gutter-tablet, 28px)));
  }
}

@media (max-width: 767px) {
  .site-main > .woocommerce-notices-wrapper > .woocommerce-message,
  .site-main > .woocommerce-notices-wrapper > .woocommerce-error,
  .site-main > .woocommerce-notices-wrapper > .woocommerce-info {
    width: calc(100% - (2 * var(--mp-gutter-mobile, 18px)));
  }
}

/* .mp-product-detail carries padding-top: 40px for the normal no-notice case.
   Stacked under the notice band that read as ~70px of dead space above the
   breadcrumb, so it is tightened only when a notice is actually present. */
.site-main > .woocommerce-notices-wrapper:has(.woocommerce-message, .woocommerce-error, .woocommerce-info) + .mp-product-detail {
  padding-top: 22px;
}