/* === Accordion Styles === */
.accordion{
  background:rgba(1,27,8,.6);
  border-radius:8px;
  margin:20px auto;
  max-width:900px;
  box-shadow:0 4px 12px rgba(15,20,0,.3);
}
.accordion-header{
  width:100%;
  padding:16px 20px;
  background:#031d07;
  border:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:1.3rem;
  font-weight:700;
  color:#eee;
  cursor:pointer;
  border-radius:8px;
  transition:background-color .2s ease,transform .1s ease;
}
.accordion-header .arrow{transition:transform .3s ease;color:#b9e3b1;}
.accordion-header.active .arrow{transform:rotate(180deg);}
.accordion-content{
  display:none;
  opacity:0;
  transition:opacity .5s ease;
  padding:20px;
  gap:20px;
  color:#ddd;
  flex-wrap:wrap;
}
.accordion-content .text{flex:1;min-width:280px;}
.accordion-content h2{font-size:22px;}
.content-section{max-width:100%!important;padding:20px!important;}
@media (max-width:768px){.accordion-content{flex-direction:column;}}
@media (max-width:480px){
  .accordion-header{font-size:1.6rem;}
  .accordion-content{padding:12px 10px;}
  .accordion-content p{overflow-wrap:anywhere;word-break:break-word;}
  .accordion-content h2{font-size:22px;}
  /* ensure all cards shrink like overview */
  #role .content-section,
  #benefits .content-section,
  #growth .content-section,
  #care .content-section,
  #research .content-section {
    max-width:100% !important;
    padding:20px !important;
  }
  #role .content-section section[style*="max-width"]{max-width:100%!important;padding:20px!important;}
  /* force inner inline-styled sections to shrink on mobiles */
  .accordion-content>section[style*="max-width"]{
    max-width:92%!important;
    margin:0 auto 20px!important;
  }

  /* ensure preview galleries (mini galleries) fit screen */
  .accordion-content .gallery{
    max-width:94% !important;
  }
}
.accordion-header:active,.accordion-header.pressed{
  background-color:#444;
  transform:scale(.97);
}

/* === Top Bar === */
.top-bar{
  position:fixed;left:0;width:100%;height:50px;
  background-color:rgba(0,100,0,.8);
  display:flex;align-items:center;gap:22px;z-index:1000;color:#fff;
  font-family:Arial,sans-serif;opacity:.2;transition:opacity .4s ease;
}
.top-bar{top:0;}
/* .footer{bottom:0;justify-content:center;} */
.top-bar.visible,.top-bar:hover{opacity:1;}
.top-bar .icon{height:38px;display:flex;justify-content:center;align-items:center;}
.top-bar .icon img{
  height:30px;object-fit:contain;transition:transform .3s ease,filter .3s ease;
}
.top-bar .icon:hover img{
  transform:scale(1.1);filter:drop-shadow(0 0 5px #00ff99);
}
.top-bar-btn{
  padding:6px 12px;background-color:transparent;color:#ceeacb;font-weight:700;border-radius:6px;
  text-decoration:none;user-select:none;transition:background-color .3s ease,opacity .3s ease;
  cursor:pointer;opacity:.8;display:inline-flex;align-items:center;height:34px;
}
.top-bar-btn:hover{opacity:1;background-color:rgba(0,100,0,.8);}

.description-page #overview .accordion-content img{
  max-width:100%;height:auto;display:block;
}
.description-page #overview .accordion-content img.lightbox-trigger{
  display:block!important;visibility:visible!important;
  max-width:700px;width:100%;height:auto;border-radius:8px;cursor:pointer;
}

/* Thumbnail preview for overview block */
.description-page #overview .lightbox-wrapper img.lightbox-trigger {
  width: 300px;
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

/* Lightbox */
.lightbox{
  display:none !important;position:fixed !important;left:0 !important;top:0 !important;width:100vw !important;height:100vh !important;
  background:rgba(0,0,0,.85) !important;justify-content:center !important;align-items:center !important;z-index:9999 !important;
}
#lightbox-content{position:relative}
#lightbox-img,#lightbox-video{
  max-width:90vw;max-height:90vh;display:none;border-radius:0;border:none;outline:none;box-shadow:none;
}
.close{
  position:absolute;top:16px;right:16px;font-size:28px;color:#fff;cursor:pointer;z-index:10000;
}
.lightbox-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);color:#fff;border:0;border-radius:50%;padding:8px;font-size:28px;cursor:pointer;z-index:10000;
}
.lightbox-btn.left{left:16px}
.lightbox-btn.right{right:16px}

#lightbox-content{position:relative;z-index:10001}
/* Override body background for description page */
body {
  background: url('https://cdn.shopify.com/s/files/1/0885/4549/3320/files/grnd_0.jpg?v=1753907100') no-repeat center center fixed;
  background-size: cover;
}

/* === Preview gallery layout === */
.overview-images,
.gallery{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
  gap:5px;
}

.overview-images img,
.gallery img{
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:8px;
}

/* Limit main carousel to 3 thumbnails */
.gallery-wrapper{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  max-height:300px;
  max-width:600px; /* Добавлено ограничение ширины */
  overflow:hidden;
}
.gallery-wrapper .gallery{
  flex: 1 1 auto;
  max-width: none;
  overflow:hidden;
}

@media (min-width:601px) and (max-width:1024px){
  .gallery-wrapper .gallery{
    max-width:320px; /* 3 thumbnails same as desktop */
  }
}

@media (max-width:600px){
  .overview-images{
    flex-direction:column;
    align-items:center;
  }
  /* keep main gallery horizontal */
  .gallery-wrapper .gallery{
    flex-direction:row!important;
  }
  .description-page h1,
  .description-page .subtitle{
    text-align:center;
  }
  .accordion-content .content-section{
    margin:0 auto !important;
    max-width:94% !important;
  }
  /* override any inline max-widths inside accordion sections */
  .accordion-content section[style*="max-width"]{
    max-width:94% !important;
    margin:0 auto !important;
  }
  /* Center bullet lists and remove left shift */
  .accordion-content ul{
    margin-left:0 !important;
    padding-left:18px !important; /* keep bullet indentation */
  }
  .accordion-content ul li{
    text-align:center;
  }
}

/* Vertical galleries inside accordion blocks */
@media (max-width:480px){
  .accordion-content .gallery{
    flex-direction:column;
    align-items:center;
  }
}