/* ps_shopmenu – uzupełnienia stylów motywu */

/* pozycje ukryte na wybranych ekranach (ustawienie pozycji w panelu) */
@media (max-width: 767px) { .psm-hide-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .psm-hide-md { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .psm-hide-lg { display: none !important; } }
@media (min-width: 1200px) { .psm-hide-xl { display: none !important; } }

/* ikona przed nazwą w menu kategorii (motyw ma je tylko w menu głównym) */
.vertical-menu .top-menu img.menuicon { width: 20px; height: 20px; object-fit: contain; margin: -3px 8px 0 0; vertical-align: middle; }

/* ================================================================ widgety Kompozytora: pasek i lista
 * Dopasowanie do szerokości kolumny (container queries): szeroko – podmenu wysuwane, wąsko – rozwijane pod pozycją. */
.psm-wc { container: psmw / inline-size; --psm-accent: #f6891a; --psm-line: rgba(0, 0, 0, .08); }
.psm-w { position: relative; font-size: 14px; line-height: 1.35; }
.psm-w-ul { list-style: none; margin: 0; padding: 0; }
.psm-w-li { position: relative; }
.psm-w-a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: inherit; text-decoration: none; min-height: 42px; }
.psm-w-a:hover, .psm-w-li.is-current > .psm-w-a { color: var(--psm-accent); text-decoration: none; }
.psm-w-ico { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.psm-w-exp { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; padding: 0; color: inherit; }
.psm-w-exp::before { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; opacity: .6; }
.psm-w-li.is-open > .psm-w-exp::before { transform: rotate(-135deg); }
.psm-w-li.has-sub > .psm-w-a { padding-right: 44px; }
.psm-w-li > .psm-w-ul { display: none; }
.psm-w-li.is-open > .psm-w-ul { display: block; }
.psm-w-ul .psm-w-ul .psm-w-a { padding-left: 26px; font-size: 13.5px; }
.psm-w-ul .psm-w-ul .psm-w-ul .psm-w-a { padding-left: 38px; }

/* lista (menu kategorii) */
.psm-w--list { background: #fff; border: 1px solid var(--psm-line); border-radius: 6px; }
.psm-w-title { background: var(--psm-accent); color: #fff; padding: 11px 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; border-radius: 5px 5px 0 0; }
.psm-w--list > .psm-w-ul > .psm-w-li + .psm-w-li { border-top: 1px solid var(--psm-line); }

/* pasek (menu główne) */
.psm-w-toggle { display: none; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--psm-line); border-radius: 6px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.psm-w-burger, .psm-w-burger::before, .psm-w-burger::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.psm-w-burger::before, .psm-w-burger::after { content: ""; position: absolute; left: 0; }
.psm-w-burger::before { top: -6px; }
.psm-w-burger::after { top: 6px; }
.psm-w--bar > .psm-w-ul { display: flex; flex-wrap: nowrap; align-items: stretch; }
.psm-w--bar > .psm-w-ul > .psm-w-li { flex: 0 0 auto; }
.psm-w--bar > .psm-w-ul > .psm-w-li > .psm-w-a { white-space: nowrap; font-weight: 600; }
.psm-w--bar > .psm-w-ul > .psm-w-li > .psm-w-ul,
.psm-w--bar > .psm-w-ul > .psm-w-more > .psm-w-ul { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 240px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border-radius: 0 0 6px 6px; padding: 6px 0; }
.psm-w--bar > .psm-w-ul > .psm-w-more { margin-left: auto; }
.psm-w--bar > .psm-w-ul > .psm-w-more > .psm-w-ul { left: auto; right: 0; }

/* szeroka kolumna i mysz: podmenu wysuwane po najechaniu */
@media (hover: hover) and (min-width: 992px) {
  @container psmw (min-width: 240px) {
    .psm-w--list .psm-w-li.has-sub:hover > .psm-w-ul { display: block; position: absolute; left: 100%; top: -1px; z-index: 30; min-width: 240px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border-radius: 0 6px 6px 0; }
    .psm-w--list .psm-w-ul .psm-w-ul .psm-w-a { padding-left: 14px; }
    .psm-w--list .psm-w-exp { display: none; }
    .psm-w--list .psm-w-li.has-sub > .psm-w-a::after { content: ""; position: absolute; right: 16px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .5; }
  }
  @container psmw (min-width: 520px) {
    .psm-w--bar .psm-w-li.has-sub:hover > .psm-w-ul, .psm-w--bar .psm-w-more:hover > .psm-w-ul { display: block; }
    .psm-w--bar > .psm-w-ul > .psm-w-li > .psm-w-exp { display: none; }
    .psm-w--bar > .psm-w-ul > .psm-w-li.has-sub > .psm-w-a { padding-right: 14px; }
  }
}

/* wąska kolumna: pasek zamienia się w rozwijane „Menu” */
@container psmw (max-width: 519px) {
  .psm-w-toggle { display: flex; }
  .psm-w--bar > .psm-w-ul { display: none; flex-direction: column; border: 1px solid var(--psm-line); border-top: 0; border-radius: 0 0 6px 6px; background: #fff; }
  .psm-w--bar.is-open > .psm-w-ul { display: flex; }
  .psm-w--bar.is-open > .psm-w-toggle { border-radius: 6px 6px 0 0; }
  .psm-w--bar > .psm-w-ul > .psm-w-li > .psm-w-ul { position: static; box-shadow: none; min-width: 0; padding: 0; }
  .psm-w--bar > .psm-w-ul > .psm-w-li + .psm-w-li { border-top: 1px solid var(--psm-line); }
  .psm-w--bar > .psm-w-ul > .psm-w-more { display: none; }
}