html, body{height:100%;margin:0;overflow-x: hidden;background-color:#141a3b;/* základná farba pozadia webu */color:#fff;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;}
/* fix layout overflow */
*, *::before, *::after {box-sizing: border-box;}
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:10;
  color:#fff;
  background: linear-gradient(180deg, rgba(20,26,59,.55) 0%, rgba(20,26,59,.25) 40%, rgba(20,26,59,0) 100%);
  pointer-events:auto;
}
/* 100px bočné prechody v headri (z 100% -> 0%) */
.site-header::before,
.site-header::after {
  pointer-events: none;
}
/*.site-header::before{left:0;background:linear-gradient(90deg, #141a3b 0%, rgba(20,26,59,0) 100%);}*/
/*.site-header::after{right:0;background:linear-gradient(270deg, #141a3b 0%, rgba(20,26,59,0) 100%);}*/
/* --- Topbar line rozdelená do 3 stredových blokov --- */
.topbar-line {display: flex;justify-content: center;/* všetko centrované na stred stránky */align-items: center;gap: 160px;/* veľká medzera medzi 3 skupinami */padding: 14px 20px 0;max-width: 1320px;margin: 0 auto;}
.topbar-line > * {flex: 0 0 auto;}
/* ľavá strana - logo */
.brand {display: flex;align-items: center;}
.brand img {height: 75px;display: block;}
/* pravá časť - ikony */
.top-icons {display: flex;align-items: center;gap: 18px;}
/* stredná časť - navigácia */
.main-nav {
  display: flex;
  align-items: center;
  gap: 48px; /* bolo 28px — väčší rozostup medzi odkazmi */
  z-index: 200;
}
.main-nav a {
  position: relative;
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #cfcfcf;
  text-decoration: none;
  letter-spacing: 0.2px;
  padding: 6px 0;
  transition: color .2s ease, text-shadow .2s ease;
  z-index: 200;
}
/* linka pod textom – bližšie k textu */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px; /* bolo -6px → bližšie k textu */
  width: 28px;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, #ffc2d5 0%, #ef355e 100%);
  border-radius: 2px;
  opacity: .9;
  transition: transform .25s ease;
  z-index: 200;
}
/* hover/focus: farba + jemný glow + podčiarka */
.main-nav a:hover,
.main-nav a:focus-visible {
  color: #ef355e;
  text-shadow: 0 0 8px rgba(239, 53, 94, .35);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}

/* aktívny stav */
.main-nav a.is-active {
  color: #ef355e;
  text-shadow: 0 0 8px rgba(239, 53, 94, .35);
}
.main-nav a.is-active::after {
  transform: translateX(-50%) scaleX(1);
}
.search-pill-wrap{flex:1;display:flex;justify-content:center}
.search-pill{
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 14px;
  gap: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25) inset;
}
.platform {display: flex;align-items: center;gap: 8px;color: #e5e5e5;font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;opacity: 0.9;cursor: pointer;user-select: none;background: transparent;border: 0;transition: color 0.2s ease, opacity 0.2s ease;}
.platform svg{width:18px;height:18px;opacity:.85}
.platform.active,.platform:hover{color:#fff;opacity:1}.platform.active svg{opacity:1}
.platform-ico{position: relative;width: 20px; height: 20px;display: inline-grid; place-items: center;overflow: visible;}
/* samotná PNG ikona */
.platform-icon{width: 20px; height: 20px; object-fit: contain;opacity: .9;transition: filter .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease;}
.platform:hover,
.platform.active {color: #ef355e;opacity: 1;}
.platform:hover .platform-icon,
.platform.active .platform-icon {filter: brightness(0) saturate(100%) invert(45%) sepia(64%) saturate(4354%) hue-rotate(325deg) brightness(100%) contrast(96%);transform: translateY(-1px);opacity: 1;}
.search-btn {width: 44px;height: 44px;border: none;border-radius: 50%;cursor: pointer;display: grid;place-items: center;background: linear-gradient(135deg, #ffbcd5 0%, #ef355e 90%);box-shadow: 0 6px 18px rgba(239, 53, 94, .45);transition: transform .15s ease, box-shadow .15s ease;z-index: 3;              /* aby bola vždy nad platform ikonami */}
.search-btn svg{width:20px;height:20px;color:#fff}
.icon-btn {position: relative;width: 34px;height: 34px;display: grid;place-items: center;border-radius: 50%;background: rgba(255, 255, 255, 0.06);border: 1px solid rgba(255, 255, 255, 0.12);transition: background 0.2s ease;}
.icon-btn:hover {background: rgba(255, 255, 255, 0.15);}
.icon-btn svg {width: 18px;height: 18px;color: #fff;}
.cart-badge {position: absolute;top: -4px;right: -4px;width: 16px;height: 16px;background: #ef355e;color: #fff;font: 700 10px/16px system-ui;text-align: center;border-radius: 50%;}
@media (max-width:980px){.main-nav{display:none}.search-pill{gap:12px}.platforms{gap:14px}.platform span{display:none}}
/* --- Platforms now in separate centered row --- */
.platforms {display: flex;justify-content: center;gap: 26px;}
.search-btn svg {width: 30px;height: 30px;color: #fff;}
/* centered container under nav */
.search-pill .platforms{ display:flex; align-items:center; gap:18px; }
.search-pill .search-btn{ z-index:10; } /* len gap medzi poslednou platformou a lupou */
.search-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(239, 53, 94, .55);
}
.search-btn svg {
  width: 20px;
  height: 20px;
  color: #fff;
  z-index: 10;              /* istota, že SVG je viditeľné nad pozadím */
}
/* --- Hero from DB carousel --- */
.hero{position:relative;min-height:680px;/* viac priestoru za headerom */background-position:center top;background-size:cover;background-repeat:no-repeat;overflow:hidden;}
.hero-bg{position:absolute; inset:0;background-position:center top;background-size:cover;background-repeat:no-repeat;opacity:0; transition:opacity .6s ease;}
.hero-bg-a{ opacity:1; }          /* prvá vrstva je viditeľná na štart */
.hero-bg-b{ opacity:0; }
.hero-bg.is-visible{ opacity:1; }
.hero::after{content:"";position:absolute; inset:0;background:radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%),linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.9) 100%);}
/* texty v dolnej časti hero; zarovnanie k stredu + offset 200px doprava */
.hero-inner{position: absolute;left: 0;right: 0;bottom: 60px;/* distance from bottom */z-index: 4;/* nad všetkými overlaymi */color: #fff;/* ľavý vnútorný okraj = okraj centrálneho kontajnera + 200px */padding-left: calc(max(20px, (100vw - 1320px)/2 + 200px));padding-right: 20px;max-width: none;}
.hero-title{font:800 44px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0 0 12px;text-shadow:0 3px 8px rgba(0,0,0,.6);}
.hero .hero-link{ position:absolute; inset:0; z-index:6; display:block; } /* text je z-index 4 */
.discount-badge{background:#ef355e;color:#fff;font:700 12px/1 system-ui;padding:6px 8px;border-radius:8px;display:inline-block;margin-right:10px;}
.hero-prices{display:flex;align-items:center;gap:10px;margin-top:6px;}
.hero-old-price{color:rgba(255,255,255,.75);text-decoration:line-through;font:600 18px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;}
.hero-price{font:700 34px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;}
.hero-old-price{color:rgba(255,255,255,.75);text-decoration:line-through;font:600 18px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Arial;}
/* jemný horný prechod do stránky (#141a3b -> 0) */
.hero::before{content:"";position:absolute; inset:0 0 auto 0; height:170px;background:linear-gradient(180deg, rgba(20,26,59,.70) 0%, rgba(20,26,59,0) 100%);z-index:1;}
/* bočné pásy + spodná tmavá vineta + jemné stmavenie */
.hero::after{content:"";position:absolute; inset:0;
  background:    
/*lavy pas*/		linear-gradient(90deg, #141a3b 0px, #141a3b 50px, rgba(20,26,59,0) 600px), 
/*spodny pas*/  	linear-gradient(0deg, #141a3b 0%,#141a3b 00px, rgba(20,26,59,0) 300px), 
/*pravy pas*/   	linear-gradient(270deg, #141a3b 0%,#141a3b 50px, rgba(20,26,59,0) 600px), 
/*horny pas*/   	linear-gradient(180deg, #141a3b 0%,#141a3b 0px, rgba(20,26,59,0) 300px), 
/*carousel pas*/	linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.75) 100%);z-index:0;
}
@media (max-width: 1200px){
  .hero-inner{
    bottom: 48px;
    padding-left: calc(max(20px, (100vw - 1000px)/2 + 140px));
  }
}
@media (max-width: 900px){
  .hero-inner{
    bottom: 40px;
    padding-left: 60px;
  }
}
@media (max-width: 600px){
  .hero-inner{
    bottom: 28px;
    padding-left: 24px;
  }
}

@media (prefers-reduced-motion: reduce){
  .main-nav a,
  .main-nav a::after{ transition: none; }
}
/* --- Search pill: rozbalený stav --- */
#searchInput{
  display:block !important; width:0; min-width:0;
  opacity:0; pointer-events:none;
  border:none !important; outline:none !important;
  background:transparent !important; box-shadow:none !important;
  -webkit-appearance:none; appearance:none;
  color:#fff; font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  transition:width .25s ease, opacity .2s ease;
}
#searchInput::placeholder{ color:rgba(255,255,255,.9); }

/* Po otvorení hľadania */
.search-pill.search-open{
  background: linear-gradient(45deg, #ffc2d5 0%, #ef355e 100%);
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(239,53,94,.35) inset, 0 6px 18px rgba(239,53,94,.25);
  gap: 10px;                   /* menšie rozstupy, nech je to kompaktnejšie */
  padding: 8px 12px 8px 14px;
}

.search-pill.search-open .platforms{
  display:none;                /* skryj PC / PS / Xbox / Nintendo */
}

.search-pill.search-open .search-input{
  display:block;
  width: min(500px, calc(100vw - 240px));  /* prispôsob šírke obrazovky */
}

/* nech lupa neprekrýva text */
.search-pill.search-open .search-btn{
  flex: 0 0 auto;
}

/* === SEARCH PILL – FINAL === */
.search-row{
  width:100%;
  display:flex;
  justify-content:center;
  padding:8px 20px 200px;
}
/* ====== SEARCH PILL – FINAL & ROBUST ====== */

/* 1) stabilný kontajner */
.search-pill{
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  width: min(100%, 500px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.25);
  overflow: hidden;
}

/* 2) tlačidlo lupy – fixni, nech nikdy nezmizne ani neprelezie */
.search-pill .search-btn{
  display: grid !important;
  place-items: center;
  width: 44px; height: 44px;
  flex: 0 0 44px !important;        /* fixná šírka vpravo */
  position: relative; z-index: 1000;   /* nad inputom */
}

/* 3) default „zrolovaný“ input – ale NIE display:none */
.search-pill .search-input{
  display: block !important;
  height: 44px;
  padding: 0 14px;
  flex: 0 1 0 !important;           /* základ 0, nech vie byť zrolovaný */
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  caret-color: #fff;
  font: 500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  z-index:1000;
}
.search-pill .search-input::placeholder{ color: rgba(255,255,255,.9); }

/* 4) otvorená pílula – prechod + rozbal input, umožni klik */
.search-pill.search-open{
  background: linear-gradient(45deg, #ffc2d5 0%, #ef355e 100%) !important;
  border-color: transparent !important;
  box-shadow: inset 0 6px 24px rgba(239,53,94,.35), 0 6px 18px rgba(239,53,94,.25);
  gap: 10px;
}
.search-pill.search-open .platforms{ display: none !important; }

.search-pill.search-open .search-input{
  flex: 1 1 500px !important;
  width: 60px !important;
  min-width: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative; z-index: 20;
  caret-color: #000000;
}
.search-pill .search-btn{ flex:0 0 auto; position:relative; z-index:1000; }

/* ID-based (ak niekde existujú #searchInput/#searchPill so !important) */
.search-pill.search-open .search-input,
#searchPill.search-open #searchInput {
  flex: 1 1 500px !important;
  width: auto !important;
  min-width: 0 !important;
  opacity: 1 !important;           /* ← toto je kľúčové */
  pointer-events: auto !important;  /* ← a toto tiež */
  position: relative; z-index: 1000;   /* keby niečo prekryvalo */
  caret-color: #fff;
}

.container { max-width: 1320px; margin: 0 auto; padding: 20px; }
.grid.products{ display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
.product-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; }
.product-card img{ width:100%; height:160px; object-fit:cover; display:block; }
.product-card h3{ font-size:14px; font-weight:700; padding:10px 12px 0; margin:0; }
.price-line{ display:flex; gap:8px; padding:8px 12px 12px; }
.new-price{ color:#fff; font-weight:800; }
.old-price{ color:rgba(255,255,255,.6); text-decoration:line-through; }
/* --- Hero pagination dots --- */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 100; /* nad pozadím, pod textom môže byť tiež okej */
}

.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.6);
  cursor: pointer;
  padding: 0;
  display: inline-block;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
  opacity: .85;
}

.hero-dot:hover{ transform: scale(1.15); opacity: 1; }

.hero-dot.is-active{
  background: linear-gradient(135deg, #ffbcd5 0%, #ef355e 90%);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(239,53,94,.25);
  opacity: 1;
}

/* accessibility focus ring */
.hero-dot:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.65);
}

.lang-switch{display:flex;gap:10px;align-items:center}
.lang-switch a{opacity:.6;text-decoration:none;font-size:18px;transition:.2s}
.lang-switch a:hover{opacity:1}
.lang-switch a.is-active{opacity:1;transform:scale(1.1)}

/* ===== MOBILE SEARCH PILL ===== */
/* ===== MOBILE SEARCH PILL – fixy ===== */
@media (max-width: 640px){

  /* riadok so search pill nech má malé bočné odsadenia */
  .search-row{
    padding: 8px 12px 10px;
  }

  /* samotná pill je full width */
  .search-pill{
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 42px;
    padding: 8px 14px;
    gap: 10px;
  }

  /* Lupa je vždy úplne vpravo, neprekrýva text */
  .search-pill .search-btn{
    position: absolute;
    right: 6px;                  /* od kraja */
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    z-index: 3;                  /* nad inputom */
  }

  /* Keď je otvorené hľadanie, necháme miesto pre lupu vpravo */
  .search-pill.search-open{
    padding-right: 56px;         /* 38px + medzera */
  }

  /* input: pred otvorením skrytý/kolabovaný, po otvorení full width */
  .search-pill .search-input{
    display: block !important;
    height: 38px;
    min-width: 0 !important;
    width: 0 !important;
    flex: 0 1 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #fff;
    caret-color: #fff;
  }
  .search-pill.search-open .search-input{
    width: 100% !important;
    flex-basis: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* platformy kompaktnejšie: len ikony, menšie medzery */
  .search-pill .platforms{
    gap: 12px;
  }
  .platform span{ display: none; }
  .platform-ico, .platform-icon{ width: 18px; height: 18px; }

  /* pri otvorenom hľadaní platformy skryjeme – nech je miesto pre text */
  .search-pill.search-open .platforms{ display: none !important; }
}

/* Extra malé displeje – podľa chuti jedna z možností */

/* A) nech sa platformy dajú potiahnuť (scroll) */
@media (max-width: 380px){
  .search-pill .platforms{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* B) alebo platformy úplne skryť aj v zavretom stave (odkomentuj, ak chceš) */
/*
@media (max-width: 380px){
  .search-pill .platforms{ display:none; }
}
*/
/* === HERO – jemnejšie gradienty pre menšie obrazovky === */
@media (max-width: 1024px) {
  .hero::after {
    background:
      /* ľavý pas – užší */
      linear-gradient(90deg, #141a3b 0px, #141a3b 20px, rgba(20,26,59,0) 250px),
      /* spodný pas – menší prechod */
      linear-gradient(0deg, #141a3b 0%, #141a3b 0px, rgba(20,26,59,0) 180px),
      /* pravý pas – užší */
      linear-gradient(270deg, #141a3b 0%, #141a3b 20px, rgba(20,26,59,0) 250px),
      /* horný pas – slabší */
      linear-gradient(180deg, #141a3b 0%, #141a3b 0px, rgba(20,26,59,0) 180px),
      /* carousel pas – slabší tieň */
      linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
  }
}

@media (max-width: 640px) {
  .hero::after {
    background:
      /* ľavý pas – ešte menší */
      linear-gradient(90deg, #141a3b 0px, #141a3b 10px, rgba(20,26,59,0) 120px),
      /* spodný pas – menej výrazný */
      linear-gradient(0deg, #141a3b 0%, #141a3b 0px, rgba(20,26,59,0) 120px),
      /* pravý pas – ešte menší */
      linear-gradient(270deg, #141a3b 0%, #141a3b 10px, rgba(20,26,59,0) 120px),
      /* horný pas – jemný */
      linear-gradient(180deg, #141a3b 0%, #141a3b 0px, rgba(20,26,59,0) 100px),
      /* carousel pas – menej tmavý */
      linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,.45) 100%);
  }
}