:root {  
  --intro-top-space: 40px;  
  --intro-font-size: 17px;  
  --gallery-img-width: 160px;  
  --gallery-img-height: 120px;  
  --orange-color: #ff9900;  
  --orange-dark: #db8600;  
  --gallery-spacing: 18px;  
}  

/* ------------ Banner Rotator ------------ */  
.page-banner, #banner-rotator {  
  width: 100%;  
  max-width: 960px;  
  aspect-ratio: 16 / 7.2;  
  margin: 0 auto 20px auto;  
  min-height: 290px;  
  background-color: #f0f0f0;  
  background-size:cover;  
  background-position:center;  
  border-radius: 0;  
  display:block;  
  transition:background-image 0.4s;  
}  

/* ------------ Main info grid ------------ */  
.main-info-grid {  
  margin-top: var(--intro-top-space);  
  max-width: 960px;  
  margin-left: auto;  
  margin-right: auto;  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 24px 40px;  
}  

.info-block {  
  display: flex;  
  align-items: flex-start;  
  margin-bottom: 24px;  
}  

.vert-line {  
  width: 3px;  
  height: 44px;  
  background: var(--orange-color);  
  min-width: 3px;  
  border-radius: 3px;  
  margin: 0 16px 0 0;  
}  

.info-content { flex:1; }  

.info-title {  
  font-size: 14px;  
  color: #666;  
  margin-bottom: 3px;  
  font-weight: 400;  
  letter-spacing: 0.5px;  
}  
.info-value {  
  font-size: var(--intro-font-size);  
  font-weight: 700;  
  color: #222;  
  line-height: 1.2;  
}  
.info-block .info-content .info-value b,  
.info-block .info-content .info-title b {  
  color: var(--orange-color);  
}  

/* ------------ Button styles ------------ */  
.apply-btn, .orange-btn, .download-btn {  
  display: inline-block;  
  background: var(--orange-color);  
  color: #fff !important;  
  font-weight: bold;  
  padding: 15px 41px;  
  border: none;  
  border-radius: 36px;  
  font-size: 17px;  
  text-align: center;  
  cursor: pointer;  
  text-decoration: none;  
  transition: background 0.2s, box-shadow 0.18s;  
  box-shadow: 0 1px 8px rgba(255,153,0,0.08);  
  letter-spacing: 1px;  
  margin: 18px 0 0 0;  
}  
.apply-btn:hover, .orange-btn:hover, .download-btn:hover {  
  background: var(--orange-dark) !important;  
  color: #fff !important;  
  box-shadow: 0 3px 12px rgba(255,153,0,0.16);  
}  

/* ------------ Accordion Summary Styles + SVG šípky ------------ */  
.accordion-block {  
  max-width: 860px;  
  margin: 0 auto;  
  margin-top: 60px;  
}  
.accordion-block details > summary {  
  position: relative;  
  color: var(--orange-color);  
  font-weight: bold;  
  font-size: 1.16em;  
  display: flex;  
  align-items: center;  
  cursor: pointer;  
  margin-bottom: 19px;  
  margin-top: 19px;  
  letter-spacing: 0.3px;  
  transition: color 0.15s;  
  padding-left: 0;  
  background: none;  
  gap: 7px;  
}  

/* SVG šípka - oranžový plný trojuholník smerom dole všade */  
.accordion-block details > summary::before {  
  content: "";  
  display: inline-block;  
  vertical-align: middle;  
  width: 20px;  
  height: 20px;  
  min-width: 20px;  
  min-height: 20px;  
  margin-right: 7px;  
  background-repeat: no-repeat;  
  background-size: contain;  
  background-position: center;  
  background-image:  
    url("data:image/svg+xml;utf8,<svg width='20' height='20' xmlns='http://www.w3.org/2000/svg'><polygon points='10,15 3.5,7 16.5,7' fill='%23ff9900'/></svg>");  
}  

/* Skry default marker */  
.accordion-block summary::-webkit-details-marker,  
.accordion-block summary::marker { display: none; }  

.accordion-block details[open] > summary { color: var(--orange-color); }  

/* ------------ Download & Payment Box ------------ */  
.download-item {  
  background: #fffcf5;  
  border: 2px dotted var(--orange-color);  
  border-radius: 12px;  
  padding: 18px 22px 17px 22px;  
  margin-top: 16px;  
  margin-bottom: 8px;  
}  
.download-title {  
  color: #222;  
  font-size: 1.13em;  
  font-weight: bold;  
  margin-bottom: 12px;  
}  
.payment-details-box {  
  background: var(--orange-color);  
  border-radius: 13px;  
  padding: 22px 22px 17px 22px;  
  color: #fff;  
  margin-top: 13px;  
  margin-bottom: 18px;  
  font-size: 1.07em;  
  font-family: inherit;  
  line-height: 1.45em;  
  font-weight: 400;  
  box-shadow: 0 2px 14px rgba(255,153,0,0.09);  
  word-break: break-word;  
}  

/* Medzera pod Payment details nadpisom */  
strong[style*="display:block"] {  
  margin-bottom: 10px !important;  
  display: block !important;  
  font-weight: bold;  
  font-size: 1.09em;  
  color: #222;  
}  

/* ------------ Galéria ------------ */  
.gallery-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(var(--gallery-img-width), 1fr));  
  gap: var(--gallery-spacing);  
  margin: 18px 0 10px 0;  
  align-items: start;  
  --gallery-img-width: 160px;  
  --gallery-img-height: 120px;  
}  
.gallery-img {  
  width: 100%;  
  max-width: var(--gallery-img-width);  
  height: var(--gallery-img-height);  
  object-fit: cover;  
  border-radius: 13px;  
  border: 2.5px solid #ffbc49;  
  box-shadow: 0 1.5px 10px rgba(181,122,3,0.08), 0 0.5px 2.5px rgba(0,0,0,0.07);  
  cursor: pointer;  
  transition: box-shadow 0.18s, border 0.14s, transform 0.14s;  
  background: #fff9ee;  
}  
.gallery-img:hover {  
  border-color: #ff9900;  
  box-shadow: 0 5px 30px rgba(255,191,74,0.22), 0 2.5px 8px rgba(0,0,0,0.11);  
  transform: scale(1.033);  
}  

/* ------------ Lightbox overlay ------------ */  
#lightbox-overlay.active {  
  display: flex !important;  
  justify-content: center;  
  align-items: center;  
  position: fixed;  
  inset: 0;  
  background: rgba(20, 20, 20, 0.84);  
  z-index: 9999;  
}  
#lightbox-overlay { display: none; }  
#lightbox-img {  
  max-width: 92vw;  
  max-height: 84vh;  
  border-radius: 12px;  
  box-shadow: 0 3px 32px rgba(0,0,0,0.36), 0 0.5px 2.5px rgba(255,153,0,0.07);  
}  
#lightbox-close {  
  position: fixed;  
  top: 22px;  
  right: 40px;  
  width: 38px;  
  height: 38px;  
  color: #fff;  
  font-size: 3.2em;  
  z-index: 10001;  
  cursor: pointer;  
  background: none !important;  
  border-radius: 100%;  
  line-height: 1;  
  text-align: center;  
}  
#lightbox-next, #lightbox-prev {  
  position: fixed;  
  top: 50%;  
  z-index: 10002;  
  font-size: 3.3em;  
  color: #fff;  
  padding: 0 17px;  
  background: rgba(0,0,0,0.22);  
  border-radius: 2em;  
  cursor: pointer;  
  user-select: none;  
  transform: translateY(-50%);  
}  
#lightbox-prev { left: 30px; }  
#lightbox-next { right: 30px; }  

body[style*="overflow: hidden"] { overflow: hidden !important; }  

/* ------------ Responsive ------------ */  
@media (max-width:996px) {  
  .page-banner, #banner-rotator { width:100%;min-height:180px;}  
  .main-info-grid { grid-template-columns: 1fr; gap: 10px 0; padding: 0 11px; }  
  .accordion-block { margin-top: 30px; padding: 0 4.5vw; }  
  .download-item, .payment-details-box { padding: 12px 7vw; font-size: 1em; }  
  .gallery-grid { --gallery-img-width: 49vw; --gallery-img-height: 95px; gap: 7px; }  
}  
@media (max-width:540px) {  
  .download-item, .payment-details-box { padding: 7.5vw 4vw; }  
  .gallery-img { border-radius: 9px; }  
  .accordion-block summary { font-size: 1em; }  
}  
@media (max-width:400px) {  
  .gallery-grid { --gallery-img-width: 98vw; --gallery-img-height: 110px; }  
}