/* e-Pszczelarz.pl / Cloudy2026
   Czysta warstwa responsywna oparta na normalnym układzie desktopowym.
   Stary mechanizm eps_mobile pozostaje wyłączony.
   WAŻNE: brak reguł globalnych poza media queries - desktop ma pozostać nietknięty.
*/

@media (max-width: 1024px) {
  *, *:before, *:after { box-sizing: border-box; }
  img, video, iframe, object, embed { max-width: 100%; }
  img { height: auto; }

  html, body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #ja-wrapper,
  #websiteWraper,
  .wrap,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #ja-wrapper,
  #websiteWraper {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #ja-container,
  #ja-container > .main,
  #ja-mainbody,
  #ja-main,
  #ja-contentwrap,
  #ja-content,
  #ja-current-content,
  #ja-left,
  #ja-right,
  #eps-bottom-full,
  #eps-bottom-full > .main {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  table {
    max-width: 100% !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body#bd {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    overflow-x: hidden !important;
  }

  #ja-wrapper,
  #websiteWraper,
  #ja-header,
  #ja-mainnav,
  #ja-container,
  #eps-bottom-full,
  #ja-botsl,
  #ja-footer,
  .wrap,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #websiteWraper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 8px !important;
  }

  /* Kolejność mobilna: najpierw treść, potem stare spotlighty i dalsze moduły. */
  #websiteWraper > #ja-container { order: 1 !important; }
  #websiteWraper > #ja-topsl { order: 2 !important; }
  #websiteWraper > #eps-bottom-full { order: 3 !important; }
  #websiteWraper > #ja-botsl { order: 4 !important; }
  #websiteWraper > #ja-footer { order: 5 !important; }

  /* HEADER */
  #ja-header .main,
  #ja-header .inner {
    width: 100% !important;
    min-width: 0 !important;
  }

  #ja-header .inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #ja-header h1.logo,
  #ja-header .logo-text {
    float: none !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
  }

  #ja-header h1.logo a,
  #ja-header h1.logo img {
    display: block !important;
    width: auto !important;
    max-width: 235px !important;
    height: auto !important;
  }

  #searchWrapper,
  #ja-search {
    float: none !important;
    clear: both !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 8px 0 !important;
    text-align: left !important;
  }

  #ja-search form {
    width: 100% !important;
    margin: 0 !important;
  }

  #ja-search input[type="text"],
  #ja-search input.inputbox,
  #ja-search .inputbox {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 16px !important;
  }

  /* MENU: normalne menu desktopowe, ale czytelne i przewijane poziomo */
  #ja-mainnav {
    overflow: hidden !important;
  }

  #ja-mainnav .main,
  #ja-mainnav .inner,
  #ja-mainnav .ja-megamenu,
  #ja-mainnav #ja-cssmenu {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #ja-mainnav .ja-megamenu,
  #ja-mainnav #ja-cssmenu,
  #ja-mainnav .main-inner1,
  #ja-mainnav .main-inner2 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #ja-mainnav ul.level0,
  #ja-mainnav ul.menu,
  #ja-cssmenu > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
  }

  #ja-mainnav ul.level0 > li,
  #ja-mainnav ul.menu > li,
  #ja-cssmenu > ul > li {
    float: none !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #ja-mainnav ul.level0 > li > a,
  #ja-mainnav ul.menu > li > a,
  #ja-cssmenu > ul > li > a {
    display: block !important;
    min-height: 44px !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }

  #ja-mainnav .childcontent,
  #ja-mainnav ul.level1,
  #ja-mainnav ul.level2,
  #ja-cssmenu ul ul {
    display: none !important;
  }

  /* TOP */
  #ja-topsl,
  #ja-topsl .main,
  #ja-topsl .ja-box,
  #ja-topsl .ja-box-center,
  #ja-topsl .ja-box-left,
  #ja-topsl .ja-box-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }

  /* NAJWAŻNIEJSZE: kolejność mobilna ma wynikać z normalnego DOM:
     treść główna -> lewa kolumna -> prawa kolumna -> bottom. */
  #ja-container > .main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #ja-mainbody {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #ja-main {
    order: 1 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #ja-left {
    order: 2 !important;
  }

  #ja-right {
    order: 2 !important;
  }

  #ja-left,
  #ja-right {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
  }

  #ja-main > .inner,
  #ja-main .inner,
  #ja-contentwrap,
  #ja-content,
  #ja-current-content,
  .ja-content-main,
  .ja-content-top,
  .ja-content-bottom,
  .ja-colswrap,
  .ja-col,
  .column,
  .sidebar {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #ja-contentwrap,
  #ja-content,
  #ja-current-content,
  .ja-content-main {
    overflow: visible !important;
  }

  #ja-main .inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ja-content-main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Moduły boczne mają być pod treścią, nie przed nią */
  #ja-left .ja-colswrap,
  #ja-right .ja-colswrap,
  #ja-left .ja-col,
  #ja-right .ja-col {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #ja-left .ja-moduletable,
  #ja-right .ja-moduletable,
  #ja-left .ja-module,
  #ja-right .ja-module,
  #ja-left .moduletable,
  #ja-right .moduletable {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  #ja-left .ja-box-ct,
  #ja-right .ja-box-ct,
  #ja-left .jamod-content,
  #ja-right .jamod-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* BOTTOM pozostaje tam, gdzie jest na normalnej stronie */
  #eps-bottom-full,
  #eps-bottom-full > .main,
  #eps-bottom-full .ja-mass,
  #eps-bottom-full .ja-moduletable,
  #eps-bottom-full .ja-module,
  #eps-bottom-full .ja-box-ct,
  #eps-bottom-full .jamod-content {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #eps-bottom-full {
    margin-top: 10px !important;
  }

  /* Spotlighty user6-user10 */
  #ja-botsl .main,
  #ja-botsl .ja-box,
  #ja-botsl .ja-box-center,
  #ja-botsl .ja-box-left,
  #ja-botsl .ja-box-right,
  #ja-botsl .ja-moduletable,
  #ja-botsl .ja-module {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Media, stare moduły, sliderowe wnętrza */
  img,
  .itemImage img,
  .catItemImage img,
  .latestItemImage img,
  .nspImage,
  .nspArt img,
  .sot-k2-item img,
  .sot_k2_item img {
    max-width: 100% !important;
    height: auto !important;
  }

  iframe,
  video,
  object,
  embed {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .nspMain,
  .nspArts,
  .nspArt,
  [class*="sot-k2"],
  [class*="sot_k2"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Tabele i elementy o starych szerokościach */
  .ja-content-main table,
  #ja-left table,
  #ja-right table,
  .k2Container table,
  #Kunena table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ja-content-main > table,
  .k2Container,
  #Kunena {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Typografia */
  .ja-content-main,
  .ja-content-main p,
  .ja-content-main li,
  .itemBody,
  .itemFullText,
  .catItemBody,
  .module,
  .ja-module,
  .moduletable {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .ja-content-main h1,
  .itemTitle {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  .ja-content-main h2,
  .catItemTitle,
  .module h3,
  .ja-module h3,
  .moduletable h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .ja-content-main h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* Formularze */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 120px !important;
  }

  input[type="submit"],
  input[type="button"],
  button,
  .button {
    min-height: 42px !important;
    max-width: 100% !important;
    font-size: 15px !important;
  }

  /* Footer */
  #ja-footer,
  #ja-footer .main,
  #ja-footer .inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #ja-footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Ochrona przed elementami rozsadzającymi viewport */
  [style*="width: 9"],
  [style*="width:9"],
  [style*="width: 8"],
  [style*="width:8"],
  [style*="width: 7"],
  [style*="width:7"] {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  #websiteWraper {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #ja-header h1.logo img {
    max-width: 205px !important;
  }

  #ja-mainnav ul.level0 > li > a,
  #ja-mainnav ul.menu > li > a,
  #ja-cssmenu > ul > li > a {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 13px !important;
  }

  .ja-content-main {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .ja-content-main h1,
  .itemTitle {
    font-size: 22px !important;
  }

  .ja-content-main h2,
  .catItemTitle,
  .module h3,
  .ja-module h3,
  .moduletable h3 {
    font-size: 18px !important;
  }
}