<style>
:root{
  --page-bg:#0b1320;
  --border:rgba(255,255,255,.2); 
  --card:#0f1726;
  --glow-fill:rgba(0,132,255,.06);
  --brand-blue: #2da3ff; /* Definovaná farba pre ikonku aj okraj */
}
html,body{ background:var(--page-bg)!important; overflow-x:hidden; color:#fff; font-family:'Inter',sans-serif; }

/* Headline */
.section-header{ text-align:center; margin-bottom:2.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.section-top{ color:var(--brand-blue); font-weight:600; font-size:1.1rem; letter-spacing:.5px; margin-bottom:.35rem; }
.section-title{ font-weight:800; font-size:2.3rem; color:#fff; margin-bottom:.35rem; }
.section-subtitle{ font-size:1.1rem; color:rgba(255,255,255,.72); max-width:620px; margin:0 auto; }

/* GRID */
.nivexGroups{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:1.25rem !important;
  width:100% !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 1rem !important;
}

/* TILE */
.nivexGroup{ width:100% !important; }
.nivexGroup > a{
  display:block !important; 
  position:relative !important; 
  aspect-ratio: 5 / 3 !important;
  background:#0f1726 !important; 
  border:1px solid rgba(255, 255, 255, 0.2) !important; 
  border-radius:12px !important; 
  overflow:hidden !important; 
  transition: all .25s ease !important; /* Plynulý prechod pre všetko */
}

/* HOVER EFEKT - TU JE ZMENA */
.nivexGroup > a:hover {
  transform:translateY(-2px) !important; 
  border-color: var(--brand-blue) !important; /* Zmena farby okraja na modrú */
  box-shadow: 0 4px 20px rgba(45, 163, 255, 0.15) !important; /* Jemná modrá žiara */
}

/* IMAGE */
.nivexGroup_image{ position:absolute !important; inset:0 !important; z-index:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.nivexGroup_image img{
  display:block !important; 
  max-width: 70% !important; 
  max-height: 70% !important; 
  width: auto !important; 
  height: auto !important; 
  object-fit:contain !important;
  padding:0 !important; 
  margin-top: -12px !important; 
  filter:brightness(0) invert(1) !important; 
  transition:filter .25s ease !important; 
}

/* Keď nabehneš myšou, ikonka stratí biely filter a ukáže pôvodnú farbu */
.nivexGroup > a:hover .nivexGroup_image img{ 
  filter:none !important; 
}

/* TITLE */
.nivexGroup_footer{ position:absolute !important; bottom:12px !important; left:50% !important; transform:translateX(-50%) !important; text-align:center !important; z-index:1 !important; width: 90% !important; }
.nivexGroup_title{ 
  font-weight: 500 !important; 
  letter-spacing: .5px !important; 
  font-size: 1.25rem !important; 
  color: #fff !important; 
  text-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; 
  margin: 0 !important; 
  white-space: nowrap !important;
}

/* RESET A RESPONSIVE */
.tiles-grid, .tile, .tile * { all: unset; }
.tiles-grid { display:none !important; }

@media (max-width:1024px){ .nivexGroups{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width:768px){ .nivexGroups{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width:480px){ .nivexGroups{ grid-template-columns:repeat(1, minmax(0, 1fr)) !important; } }

/* VOLUME DISCOUNT WIDGET */
.volume-discount-box{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(var(--cl-accent-rgb, 217,70,239), .14), rgba(var(--cl-accent-rgb, 217,70,239), .04));
  border:1px solid rgba(var(--cl-accent-rgb, 217,70,239), .35);
  box-shadow:0 0 24px rgba(var(--cl-accent-rgb, 217,70,239), .12);
}
.volume-discount-box--sm{ padding:10px 12px; gap:8px; border-radius:10px; }
.volume-discount-header{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.85rem;
  line-height:1.3;
  color:rgba(255,255,255,.85);
  font-weight:400;
}
.volume-discount-box--sm .volume-discount-header{ font-size:.78rem; }
.volume-discount-header strong{
  color:#0080ff;
  font-weight:700;
}
.volume-discount-icon{
  width:17px;
  height:17px;
  flex-shrink:0;
  color:#0080ff;
}
.volume-discount-track{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.volume-discount-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #0080ff, rgba(0,128,255,.55));
  transition:width .35s ease;
}
</style>