/* Shared storefront primitives: catalogue cards, product recommendations and notices.
   Checkout logic and the product gallery/purchase layout are deliberately independent. */
:root {
  --ui-font: var(--font-sans);
  --ui-ink: var(--ink);
  --ui-muted: var(--ink-muted);
  --ui-line: var(--line);
  --ui-surface: var(--surface-raised);
  --ui-subtle: var(--surface);
  --ui-teal: var(--brand);
  --ui-green: var(--action-soft-ink);
  --ui-green-soft: var(--action-soft);
  --ui-radius: var(--radius-md);
  --ui-control-radius: var(--radius-md);
  --ui-focus: var(--focus);
}
/* 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; }
.product-recommendations .product_price { color: var(--ui-ink); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.product-recommendations .mpr-add-to-cart {
  width: 100%;
  height: auto;
  min-height: var(--size-touch);
  padding: 10px 6px;
  font-size: 14px;
  line-height: 1.25;
}
.product-recommendations .mpr-add-to-cart svg { width: 20px; height: 20px; flex: 0 0 20px; padding: 0; margin: 0; }
.product-recommendations .centerBoxHeading,
.product-shopping-assurance,
.product-recommendations .product_name { font-family: var(--ui-font); }
.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; }
  .motivs-notice, .alert { padding: 12px; font-size: 13px; }
}