/* =========================================================
  🧩 TOP BAR
========================================================= */ 
.top-bar { display:flex; flex-direction:column; }

.top-bar .wrapped { display:flex; flex-direction:row; gap:var(--section-gap); width:100%; } 
.top-bar .wrapped { margin: auto; padding: var(--space-8) var(--wrapper-padding); }

.top-bar .wrapped ul li { font: var(--p-xs-regular-font); text-transform:uppercase; font-weight:500; letter-spacing: var(--p-s-regular-ls); letter-spacing:0.75px; line-height:24px; align-items:center; text-align:center; display: flex; justify-content:center; flex-shrink:0; }

/* wspólne */
.top-bar .slider-list { list-style:none; margin:0; padding:0; display:flex; }

/* =========================================================
  🧩 TOP BAR - DESKTOP
========================================================= */ 
/* tryb desktop (≥860px): wszystkie 3 widoczne */
@media (min-width: 860px) {
	.top-bar .slider-list { display:flex; flex-direction:row; justify-content: space-between; width:100%; }
	.top-bar .slider-list li { text-align:center; }
}

/* =========================================================
  🧩 TOP BAR - MOBILE
========================================================= */ 
/* tryb mobile (<860px): slider z 1 itemem */
@media (max-width: 859px) {

  .top-bar .wrapped {
    overflow: hidden; /* tutaj trzymamy maskę */
    position: relative;
  }

  .top-bar .slider-list {
    display: flex;
    transition: transform 0.6s ease; /* przesuwanie całej listy */
  }

.top-bar  .slider-list li { min-width: 100%;   }
}

@media (min-width: 1px) and (max-width: 1199px) {
  .top-bar .wrapped { padding: var(--space-8) var(--wrapper-padding); }
}

/* =========================================================
  🧩 BOTTOM BAR - RWD
========================================================= */ 
@media (min-width: 1px) and (max-width: 900px) {
  .main-footer { padding-bottom:90px; }
  .mobile-bottom-bar { height:auto; max-height:70px; overflow:visible; bottom:0; position: fixed; inset: auto 0 0; margin: 0 auto; width:100%; z-index:100; padding-bottom:var(--space-4); }

  @supports (-webkit-touch-callout:none) { 
    @media (max-device-width: 900px) and (orientation: portrait),
           (max-device-width: 900px) and (orientation: landscape) {
    .mobile-bottom-bar { height:auto; max-height:82px; }
      .mobile-bottom-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    }
  }
  .mobile-bottom-bar ul { display: flex; flex-direction: row; padding:0; gap:8px; overflow:visible; max-width:540px; margin:auto; }
  .mobile-bottom-bar ul li { display: flex; overflow:visible; flex: 1; }

  .mobile-bottom-bar ul li .mobile-bar-btn { display: flex; flex-direction:column; gap:var(--space-4); height:auto; text-align:center; justify-content:center; width:100%; padding:0 var(--space-4); }
  .mobile-bottom-bar ul li button.mobile-bar-btn svg { height:calc(1.25 * var(--space-16)); width:calc(1.25 * var(--space-16)); display:block; padding:0px; border-radius:50%; } 

  .mobile-bottom-bar .exposed button.mobile-bar-btn { overflow:visible; position:relative; margin-left:var(--space-4); margin-right:var(--space-4); }
  .mobile-bottom-bar .exposed button.mobile-bar-btn svg { position: absolute; top:-18px; height:var(--space-48); width:var(--space-48); padding:var(--space-8); }
  .mobile-bottom-bar .exposed button.mobile-bar-btn span { margin-top:var(--space-32); line-height:130%; } 

  .mobile-bottom-bar ul li .mobile-bar-btn::before,
  .mobile-bottom-bar ul li .mobile-bar-btn:hover::before { display:none; }
}

@media (min-width: 1px) and (max-width: 359px) {
  .mobile-bottom-bar ul { gap:4px; }
}

@media (min-width: 901px) {
  .mobile-bottom-bar {
    display:none;
  }
}