/* Compact commerce notifications, aligned with the catalogue add-to-cart toast. */
.site-toast {
  right: auto;
  bottom: 84px;
  left: 22px;
}

body.single-product .woocommerce-notices-wrapper {
  position: fixed;
  z-index: 10002;
  bottom: 84px;
  left: 22px;
  width: min(430px, calc(100vw - 44px));
  margin: 0;
  pointer-events: none;
}

body.single-product .woocommerce-notices-wrapper:empty {
  display: none;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	margin: 0;
	padding: 14px 14px 14px 48px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 18px 50px rgba(8, 23, 42, .28);
  font-size: .76rem;
  line-height: 1.5;
  pointer-events: auto;
  animation: eco-notice-arrive .28s ease both;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message::before {
  top: 50%;
  left: 17px;
  color: #69d5bf;
  transform: translateY(-50%);
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	float: none;
	height: auto;
	min-height: 34px;
	margin: 0 0 0 auto;
	padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 7px;
  background: #fff;
  color: var(--blue);
	font-size: .7rem;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}

body.single-product .woocommerce-notices-wrapper .woocommerce-message .button:hover,
body.single-product .woocommerce-notices-wrapper .woocommerce-message .button:focus-visible {
  background: var(--blue-light);
  color: var(--blue-dark);
}

@keyframes eco-notice-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .site-toast,
  body.single-product .woocommerce-notices-wrapper {
    right: 14px;
    bottom: 78px;
    left: 14px;
    width: auto;
    max-width: none;
  }

	body.single-product .woocommerce-notices-wrapper .woocommerce-message {
		gap: 10px;
		padding-right: 12px;
		font-size: .71rem;
	}

	body.single-product .woocommerce-notices-wrapper .woocommerce-message .button {
		min-height: 32px;
		padding: 7px 10px;
		font-size: .67rem;
	}
}

@media (prefers-reduced-motion: reduce) {
  body.single-product .woocommerce-notices-wrapper .woocommerce-message { animation: none; }
}