/* Menu mobilne (widżet Creative Elements "abc-mobile-menu") - wygląd domyślny w kolorach sklepu.
   Panel wysuwa się z prawej pod nagłówkiem (warstwa fixed, góra liczona skryptem), strona obok jest przyciemniona.
   Ustawienia z zakładki Styl w edytorze nadpisują te reguły (kolory linków przez zmienne).
   :not(#abc) podnosi priorytet ponad reguły motywu "#header a { color: #232323 }" i "button:focus { outline }" (bez zależności od id). */
.abc-mm { --abc-mm-accent: #328497; --abc-mm-line: #EEF2F2; display: flex; justify-content: flex-end; }
html.abc-mm-lock, html.abc-mm-lock body { overflow: hidden; }

/* Przycisk menu */
.abc-mm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 5px;
  background-color: #328497; color: #FFFFFF; font-size: 20px; line-height: 1; cursor: pointer; }
.abc-mm-toggle:hover, .abc-mm-toggle:focus { color: #FFFFFF; }
.abc-mm button:not(#abc):focus:not(:focus-visible), .abc-mm a:not(#abc):focus:not(:focus-visible) { outline: 0; }
.abc-mm-toggle:not(#abc):focus-visible { outline: 2px solid #264F59; outline-offset: 2px; }
.abc-mm-ico-close, .abc-mm.is-open .abc-mm-ico-open { display: none; }
.abc-mm.is-open .abc-mm-ico-close { display: inline-block; }

/* Warstwa: przyciemnienie + panel */
.abc-mm-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; visibility: hidden; pointer-events: none; transition: visibility 0s .25s; }
.abc-mm.is-open .abc-mm-layer { visibility: visible; pointer-events: auto; transition: none; }
.abc-mm-dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background-color: rgba(17, 17, 17, .45);
  opacity: 0; transition: opacity .25s ease-out; cursor: pointer; }
.abc-mm.is-open .abc-mm-dim { opacity: 1; }
.abc-mm-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 88%; max-width: 400px; overflow-y: auto; overscroll-behavior: contain;
  background-color: #FFFFFF; box-shadow: -8px 0 24px rgba(0, 0, 0, .18); transform: translateX(100%); transition: transform .25s ease-out; text-align: left; }
.abc-mm.is-open .abc-mm-panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .abc-mm-layer, .abc-mm-dim, .abc-mm-panel { transition: none; }
}
.abc-mm-screen[hidden] { display: none; }
.abc-mm-panel ul { margin: 0; padding: 0; list-style: none; }
.abc-mm-panel a, .abc-mm-panel button { -webkit-tap-highlight-color: transparent; }
.abc-mm-panel a:not(#abc):focus-visible, .abc-mm-panel button:not(#abc):focus-visible { outline: 2px solid #264F59; outline-offset: -2px; }

/* Konto */
.abc-mm-account { background-color: #F1FCFF; border-bottom: 1px solid #E1E8E7; }
.abc-mm-acc-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; text-decoration: none; }
.abc-mm-acc-row + .abc-mm-acc-row { border-top: 1px solid #DCEBEE; }
.abc-mm-acc-row:not(#abc), .abc-mm-acc-row:not(#abc):hover, .abc-mm-acc-row:not(#abc):focus { color: #2A4D4A; text-decoration: none; }
.abc-mm-acc-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #CFE3E6; border-radius: 50%;
  box-sizing: border-box; background-color: #FFFFFF; color: var(--abc-mm-accent); font-size: 16px; }
.abc-mm-acc-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.abc-mm-acc-txt b { font-size: 17px; font-weight: 800; line-height: 1.3; color: #2A4D4A; }
.abc-mm-acc-txt span { font-size: 13px; line-height: 1.35; color: #55615F; }
.abc-mm-chev { flex: 0 0 auto; color: var(--abc-mm-accent); font-size: 13px; }
.abc-mm-account--logged { padding: 16px; }
.abc-mm-me { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.abc-mm-avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background-color: var(--abc-mm-accent); color: #FFFFFF; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.abc-mm-me-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.abc-mm-me-label { font-size: 12px; font-weight: 600; line-height: 1.3; color: #55615F; }
/* Imię i nazwisko dowolnej długości - zawsze jedna linia, nadmiar kończy wielokropek */
.abc-mm-me-name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: #2A4D4A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abc-mm-me-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.abc-mm-me-links a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; box-sizing: border-box; background-color: #FFFFFF;
  border: 1px solid #CFE3E6; font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.abc-mm-me-links a:not(#abc), .abc-mm-me-links a:not(#abc):hover, .abc-mm-me-links a:not(#abc):focus { color: #2A4D4A; text-decoration: none; }
.abc-mm-me-links a:hover { border-color: var(--abc-mm-accent); }
.abc-mm-me-links i { width: 16px; text-align: center; color: var(--abc-mm-accent); }
.abc-mm-me-links a.abc-mm-logout:not(#abc), .abc-mm-me-links a.abc-mm-logout:not(#abc):hover { color: #55615F; font-weight: 600; }
.abc-mm-me-links .abc-mm-logout i { color: #55615F; }

/* Pozycje menu (pierwszy poziom) */
.abc-mm-list li { border-bottom: 1px solid var(--abc-mm-line); }
.abc-mm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; box-sizing: border-box;
  border: 0; border-radius: 0; background: none; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; }
.abc-mm-row:not(#abc), .abc-mm-row:not(#abc):hover, .abc-mm-row:not(#abc):focus { color: var(--abc-mm-item, #000000); text-decoration: none; background: none; }
.abc-mm-row.is-current:not(#abc) { color: var(--abc-mm-accent); }

/* Ekran podpozycji */
.abc-mm-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 12px; background-color: #FFFFFF; border-bottom: 1px solid #E1E8E7; }
.abc-mm-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--abc-mm-accent);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.abc-mm-title { margin: 0 0 0 auto; padding-right: 8px; font-size: 20px; font-weight: 800; line-height: 1.2; color: #2A4D4A; text-align: right; }
.abc-mm-subs li { border-bottom: 1px solid var(--abc-mm-line); }
.abc-mm-sub-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 10px 20px;
  box-sizing: border-box; border: 0; background: none; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.abc-mm-sub-link:not(#abc), .abc-mm-sub-link:not(#abc):hover, .abc-mm-sub-link:not(#abc):focus { color: var(--abc-mm-sub, #000000); text-decoration: none; }
.abc-mm-sub-link i { grid-column: 2; grid-row: 1 / span 2; color: var(--abc-mm-accent); font-size: 12px; }
.abc-mm-sub-title { grid-column: 1; font-size: 17px; font-weight: 700; line-height: 1.3; }
.abc-mm-sub-desc { grid-column: 1; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #55615F; }

/* Kontakt na dole */
.abc-mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 20px; }
.abc-mm-phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; text-decoration: none; }
.abc-mm-phone:not(#abc), .abc-mm-phone:not(#abc):hover, .abc-mm-phone:not(#abc):focus { color: #000000; text-decoration: none; }
.abc-mm-phone i { color: var(--abc-mm-accent); }
.abc-mm-social { display: flex; gap: 4px; }
.abc-mm-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 19px; }
.abc-mm-social a:not(#abc), .abc-mm-social a:not(#abc):hover { color: var(--abc-mm-accent); }
.abc-mm-social svg { width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 360px) {
  .abc-mm-acc-row { padding: 10px 12px; gap: 10px; }
  .abc-mm-acc-txt b, .abc-mm-me-name { font-size: 16px; }
  .abc-mm-account--logged { padding: 14px 12px; }
  .abc-mm-me { gap: 10px; }
  .abc-mm-me-links a { padding: 0 8px; gap: 6px; font-size: 13px; }
  .abc-mm-row { font-size: 16px; min-height: 50px; }
  .abc-mm-sub-link { padding: 10px 16px; }
  .abc-mm-sub-title { font-size: 16px; }
}