/* gsport landing — minimal overrides.
   The live site opens its mega-menu via theme JavaScript (adds .clicked /
   .dropdown--is-open). Since we render the header statically (no platform JS),
   reproduce the same behaviour with a pure-CSS hover so the dropdowns work 1:1. */

#header.mod-header-3 .header_inner_wrapper .menu ul.header_bottom_content_list > li.header_bottom_content_list_item:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: 50;
}

/* keep the open dropdown reachable while the cursor travels into it */
#header.mod-header-3 .header_inner_wrapper .menu ul.header_bottom_content_list > li.header_bottom_content_list_item > .dropdown {
  transition: opacity 0.15s ease-in-out;
}

/* On desktop the live site collapses the mobile "hamburger" item (its JS hides
   it when every category fits inline). Reproduce that statically. */
@media (min-width: 768px) {
  #header.mod-header-3 .header_inner_wrapper .menu ul.header_bottom_content_list > li.hamburger {
    display: none;
  }
}

/* This is a contest landing, not the shop — hide the cart widget. The header
   row uses justify-content:space-between (logo · search · cart), so removing
   the cart with display:none lets the search slide to the far right. Use
   visibility:hidden on the desktop widget instead: it stays invisible but
   keeps its slot, so the search keeps its original position/width. The mobile
   top-bar cart sits in a different layout and can be fully removed. */
.header_middle_content_quick_cart_wrapper {
  visibility: hidden !important;
}
.top_bar_item_list_item.quick-cart {
  display: none !important;
}

/* "Superoferty" / "Wyprzedaż" carry .text--red (color:var(--txt-red)!important).
   On this landing they should read white like every other nav link. */
#header .header_bottom_content_list_item_anchor.text--red {
  color: #fff !important;
}

/* --- Mobile header interactions (no platform JS shipped in this static mirror) --- */

/* Search keeps the theme's drop-down overlay: .mobile-search is display:block
   but pushed off-screen with translateY(-100%); App.svelte toggles
   `gs-msearch-open` on #header to slide it in (the X / outside taps close it). */
@media (max-width: 767px) {
  #header.mod-header-3.gs-msearch-open .mobile-search {
    transform: none;
  }
}

/* Burger + envelope open left off-canvas drawers. The live site uses an Angular
   Material md-sidenav for these; with no platform JS, App.svelte renders its own
   drawers (below the header) over a dimming backdrop. */
.gs-drawer-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0;
  border: 0;
  background: rgba(19, 19, 19, 0.45);
  z-index: 1000;
  animation: gs-drawer-fade 0.2s ease;
}
.gs-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 80%;
  max-width: 340px;
  padding: 26px 24px;
  background: #fff;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1001;
  font-family: Roboto, Arial, sans-serif;
  animation: gs-drawer-slide 0.22s ease;
}
@keyframes gs-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-drawer-slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* drawers are a mobile-only affordance — never show them on desktop */
@media (min-width: 768px) {
  .gs-drawer,
  .gs-drawer-backdrop { display: none; }
}

/* Menu drawer — category links */
.gs-drawer__nav { list-style: none; margin: 0; padding: 0; }
.gs-drawer__nav li + li { border-top: 1px solid #efefef; }
.gs-drawer__nav a {
  display: block;
  padding: 14px 2px;
  color: #131313;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.gs-drawer__nav a:hover,
.gs-drawer__nav a:active { color: #bfe02b; }

/* Contact drawer — Kontakt + email/phone + copyright */
.gs-drawer__title { margin: 0 0 22px; font-size: 20px; font-weight: 700; color: #131313; }
.gs-drawer__contact { display: flex; flex-direction: column; gap: 16px; }
.gs-drawer__contact a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #bfe02b;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.gs-drawer__contact .gs-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfe02b;
  border-radius: 50%;
  color: #131313;
  font-size: 16px;
}
.gs-drawer__copy {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid #efefef;
  color: #131313;
  font-size: 14px;
}