/* messages.css (RC6-01, hand-written, NOT generated): Magento page messages ("You added ... to your shopping cart", errors, notices) on every ported page.
   The messages themselves are the mock component (dv-msg, styled by shared.css), printed by js/devir/messages.js; this file only places the region.
   Tokens only (--c-*, --s-*, --p-*, --t-*): no literal colours, square corners from --s-radius. Loaded after the bundles by devir_ported_page. */
@layer components {
  .dv-page .page.messages { width: min(100% - 2 * var(--s-gutter), var(--s-wrap)); margin-inline: auto; padding-block-start: var(--s-sp-5); }
  /* G-13: an empty container (no message printed yet) takes no room, so the home hero sits flush under the header. */
  .dv-homemain .page.messages:not(:has(.dv-msg, .message)) { padding-block-start: 0; }
  .dv-page .page.messages .messages { display: grid; gap: var(--s-sp-3); margin: 0; padding: 0; }
  /* Server-rendered core markup (cart validation messages): the mock component look until messages.js swaps it for the component. Notice reads as info, as in the mock. */
  .dv-page .page.messages .message { display: flex; align-items: flex-start; gap: var(--s-sp-3); margin: 0; padding: var(--s-sp-3) var(--s-sp-4); border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--c-chip-info); color: var(--s-text); font: var(--t-body); }
  .dv-page .page.messages .message-success { background: var(--c-chip-in); }
  .dv-page .page.messages .message-warning { background: var(--c-chip-warn); }
  .dv-page .page.messages .message-error { background: var(--c-chip-out); }
  .dv-page .page.messages .message > * { margin: 0; }
  .dv-page .page.messages .message a { text-underline-offset: var(--p-4); }
  .dv-page .page.messages .dv-msg a { text-underline-offset: var(--p-4); }
}