/* Shared storefront primitives: catalogue cards, product recommendations and notices.
   Checkout logic and the product gallery/purchase layout are deliberately independent. */
:root {
  --ui-font: 'Open Sans', system-ui, Arial, sans-serif;
  --ui-ink: #25333b;
  --ui-muted: #61717d;
  --ui-line: #dde4e7;
  --ui-surface: #fff;
  --ui-subtle: #f7f9fa;
  --ui-teal: #437d8c;
  --ui-green: #326c29;
  --ui-green-soft: #f6faf4;
  --ui-radius: 8px;
  --ui-control-radius: 6px;
  --ui-focus: #176a91;
}
/* One card surface and type hierarchy across catalogue/search grids and product rails. */
:is(.mcat-grid, .product-recommendations) .product_holder {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  color: var(--ui-ink);
  background: var(--ui-surface);
  font-family: var(--ui-font);
  box-shadow: none;
}
:is(.mcat-grid, .product-recommendations) .product_holder:hover { border-color: #b8c9d1; box-shadow: none; }
:is(.mcat-grid, .product-recommendations) .product_name {
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}
:is(.mcat-grid, .product-recommendations) .product_name a { color: var(--ui-ink); }
.mcat-grid { margin: -6px; }
.mcat-grid > [class*="col-"] { padding: 6px; min-width: 0; }
.mcat-grid .product_image { height: 200px; padding: 16px; }
.mcat-grid .mcard-body { padding: 0 16px 16px; }
.mcat-grid .product_name { min-height: 4.35em; margin: 2px 0 14px; }
.mcat-grid .product_name a { display: block; height: auto; overflow: visible; -webkit-line-clamp: unset; }
.mcat-grid .mcard-status { min-height: 40px; margin-bottom: 12px; padding: 7px 8px; border: 1px solid; border-radius: var(--ui-control-radius); font-size: 12px; font-weight: 600; line-height: 1.35; }
.mcat-grid .mcard-status.is-own { color: #24623d; background: #edf7ef; border-color: #b9d9c1; }
.mcat-grid .mcard-status.is-fast { color: #286875; background: #edf6f7; border-color: #bdd8dd; }
.mcat-grid .mcard-status.is-supplier { color: #805319; background: #fcf5e8; border-color: #e7d2aa; }
.mcat-grid .mcard-status.is-out { color: #91433a; background: #fcf1ef; border-color: #e4c6c1; }
.mcat-grid .mcard-status .m-icon { width: 16px; height: 16px; }
.mcat-grid .product_bottom { flex-direction: column; align-items: stretch; gap: 12px; }
.mcat-grid .product_price { min-height: 29px; gap: 0 8px; }
.mcat-grid .mcard-price,
.product-recommendations .product_price { color: var(--ui-ink); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mcat-grid .product_button_container { width: 100%; }
.mcat-grid .mcard-old-price { font-size: 12px; }
.mcat-grid .mcard-atc,
.product-recommendations .mpr-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 6px;
  border: 1px solid #b6cdb1;
  border-radius: var(--ui-control-radius);
  background: var(--ui-green-soft);
  color: var(--ui-green);
  font: 600 14px/1.25 var(--ui-font);
  white-space: nowrap;
  text-transform: none;
  touch-action: manipulation;
}
.mcat-grid .mcard-atc:hover,
.product-recommendations .mpr-add-to-cart:hover { background: #e9f3e5; color: #285b20; border-color: #85ae7b; }
.mcat-grid .mcard-atc:disabled { opacity: .65; }
.mcat-grid .mcard-atc .m-icon,
.product-recommendations .mpr-add-to-cart svg { width: 20px; height: 20px; flex: 0 0 20px; padding: 0; margin: 0; }
.mcat-grid .mcard-atc .m-icon--solid { fill: currentColor; stroke: none; }
.mcat-grid .mcard-atc-text { display: inline; }
.mcat-grid .product_name { -webkit-line-clamp: 3; }
.product-recommendations .centerBoxHeading,
.product-shopping-assurance,
.product-recommendations .product_name { font-family: var(--ui-font); }
.mcat-grid .mcard-atc:focus-visible,
.mcat-grid a:focus-visible,
.motivs-ui-button:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: -3px; }
/* Used by search actions and available to other storefront forms. */
.motivs-ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 1px solid var(--ui-teal);
  border-radius: var(--ui-control-radius); background: var(--ui-teal); color: #fff;
  font: 600 14px/1.4 var(--ui-font); text-decoration: none; touch-action: manipulation;
}
.motivs-ui-button:hover { background: #356977; border-color: #356977; color: #fff; text-decoration: none; }
.motivs-ui-button--secondary { background: #fff; color: var(--ui-teal); border-color: #cbd9df; }
.motivs-ui-button--secondary:hover { background: #edf5f7; color: #285868; border-color: #a5bdc8; }
/* Calm notices. State comes from the existing server/client validation, never just colour. */
.motivs-notice,
.alert,
:is(.messageStackError, .messageStackWarning, .messageStackSuccess, .messageStackCaution, .messageStackLightCaution) {
  --notice-ink: #355965;
  --notice-line: #cadde4;
  --notice-background: #f2f7f9;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--notice-line);
  border-radius: var(--ui-radius);
  background: var(--notice-background);
  color: var(--notice-ink);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
  box-shadow: none;
}
:is(.motivs-notice--danger, .alert-danger, .messageStackError) { --notice-ink: #913d35; --notice-line: #e8c7c2; --notice-background: #fcf4f3; }
:is(.motivs-notice--warning, .alert-warning, .messageStackWarning, .messageStackCaution) { --notice-ink: #79581b; --notice-line: #e5d8b9; --notice-background: #fbf8ef; }
:is(.motivs-notice--success, .alert-success, .messageStackSuccess) { --notice-ink: #326944; --notice-line: #c8dfce; --notice-background: #f1f8f3; }
.motivs-notice { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.motivs-notice__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.motivs-notice__body { flex: 1 1 auto; min-width: 0; }
.motivs-notice__body > img:first-child { display: none; }
.motivs-notice a, .alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.motivs-notice p:last-child, .alert p:last-child { margin-bottom: 0; }
.motivs-cart-error { flex: 0 0 100%; width: 100%; margin-bottom: 0; font-size: 13px; }
/* Some checkout validation containers wrap messageStack output. Avoid nested boxes. */
.alert .motivs-notice { margin: 0; padding: 0; border: 0; background: none; }
/* Account notices share the storefront palette and keep the action near the message. */
.mac-email-alert { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #cbdce2; border-left: 3px solid var(--ui-teal); border-radius: var(--ui-radius); background: #f1f6f8; color: var(--ui-ink); font-family: var(--ui-font); }
.mac-email-alert-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; align-self: start; border: 1px solid #b99556; border-radius: 50%; background: #fff8e9; color: #85601f; font-size: 14px; }
.mac-email-alert-title { margin: 0 0 3px; color: var(--ui-ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.mac-email-alert-text { margin: 0; color: #526570; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.mac-email-alert-text strong { color: var(--ui-ink); font-weight: 700; }
.mac-email-alert-action { display: inline-flex; justify-content: center; align-items: center; width: auto; min-height: 44px; padding: 9px 12px; border: 1px solid #b4cbd4; border-radius: var(--ui-control-radius); background: #fff; color: #356674; font: 600 13px/1.4 var(--ui-font); text-decoration: none; white-space: normal; }
.mac-email-alert-action:hover { border-color: var(--ui-teal); background: #e7f0f4; color: #285464; text-decoration: none; }
.mac-email-alert-action:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
@media (max-width: 820px) {
  .mac-email-alert { grid-template-columns: 24px minmax(0, 1fr); padding: 12px; gap: 6px 10px; }
  .mac-email-alert-action { grid-column: 2; justify-self: start; align-self: start; flex-basis: auto; max-width: 100%; }
}
@media (max-width: 575px) {
  .mcat-grid { margin: -5px; }
  .mcat-grid > [class*="col-"] { padding: 5px; }
  .mcat-grid .product_image { height: 150px; padding: 10px; }
  .mcat-grid .mcard-body { padding: 0 10px 12px; }
  .mcat-grid .product_name { font-size: 13px; min-height: 4.35em; margin-bottom: 10px; }
  .mcat-grid .mcard-price { font-size: 19px; }
  .mcat-grid .mcard-status { font-size: 11px; }
  .mcat-grid .mcard-atc { font-size: 12px; min-height: 44px; gap: 6px; }
  .motivs-notice, .alert { padding: 12px; font-size: 13px; }
}