/* Systémové hlášky Shoptetu na celom webe (napr. „Zvoľte veľkosť“, chyby, „pridané“) ako biela karta v štýle Kráčaj
   namiesto farebného pásu cez celú šírku hore (návrh 14. 10. 2026). Mení len .messages, chyby pri políčkach formulárov (.form-group .msg-error) nie. */
.messages { top: 14px; left: 14px; right: 14px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.messages .msg { width: auto; max-width: 460px; margin: 0; padding: 12px 18px 12px 12px; border: 0; border-radius: 18px; background: #fff;
  color: #1a1a1a; box-shadow: 0 12px 32px rgba(0, 0, 0, .16), 0 0 0 1px #e3e6d9; font-size: 15px; font-weight: 600; line-height: 1.35;
  pointer-events: auto; animation: k-hlaska .25s ease-out; }
.messages .msg .container { display: flex; align-items: center; gap: 12px; width: auto; max-width: none; margin: 0; padding: 0; }
.messages .msg .container::before { content: "!"; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: #f8e3d6; color: #b8582a; font-size: 16px; font-weight: 800; }
.messages .msg.msg-success .container::before,
.messages .msg.msg-notice .container::before { content: "✓"; background: #eef0e6; color: #5d6648; }
.messages .msg.msg-warning .container::before { background: #fdf0d8; color: #9a6a12; }
.messages .msg.msg-info .container::before { content: "i"; background: #e3e9f1; color: #4f6c8f; font-family: Georgia, serif; }
.messages .msg,
.messages .msg a { color: #1a1a1a; }
.messages .msg a { text-decoration: underline; }
@keyframes k-hlaska { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .messages .msg { animation: none; } }
@media (min-width: 992px) {
  .messages { top: 20px; }
  .messages .msg { padding: 14px 22px 14px 14px; }
}