/*================= Navbar =================*/
/* accent line */
.topbar-line {
  height: 3px;
  background: linear-gradient(90deg, #0f7404, #60cd12, #0f7404);
}

#NavHeader {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
}

#NavHeader {
  background: #03262c;
  border-bottom:1px solid rgba(96,205,18,.12);
}

/* nav links */
.nav-item-btn {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
.nav-item-btn:hover,
.nav-item-btn.active {
  color: #60cd12;
  border-bottom-color: #60cd12;
}
.nav-chevron {
  font-size: 10px;
  color: #fff;
  margin-left: 3px;
  transition: transform 0.25s ease;
}
.nav-item-btn[data-open="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* search */
.nav-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(96, 205, 18, 0.25);
  border-radius: 8px;
  padding: 6px 14px 6px 34px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  color: #fff;
  /* collapsed state */
  width: 36px;
  opacity: 0;
  pointer-events: none;
  outline: none;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    border-color 0.2s ease;
}
.nav-search-input::placeholder {
  color: #d2d6dc;
}

.nav-search-wrap:hover .nav-search-input,
.nav-search-input:focus {
  width: 200px;
  opacity: 1;
  pointer-events: all;
  border-color: rgba(96, 205, 18, 0.5);
}
.nav-search-input:focus {
  border-color: #60cd12;
}

/* icon — always visible */
.nav-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
  transition: color 0.18s ease;
}
.nav-search-wrap:hover .nav-search-icon {
  color: #86efac;
}

/* mega menu */
.mega-backdrop {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 130px);

  background: #021920;
  border: 1px solid rgba(96, 205, 18, 0.18);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);

  z-index: 999;
  display: none;
  overflow: hidden;
}

.mega-backdrop.open {
  display: block;
}

.mega-backdrop > .flex {
  max-height: calc(100vh - 125px);
}

.mega-sidebar {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid rgba(96, 205, 18, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mega-backdrop .flex-1 {
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.mega-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.18s ease;
}
.mega-tab:hover {
  background: rgba(96, 205, 18, 0.07);
  color: #d1d5db;
}
.mega-tab.active {
  background: rgba(96, 205, 18, 0.1);
  color: #60cd12;
  border-left-color: #60cd12;
}

.mega-panel {
  display: none;
}
.mega-panel.active {
  display: block;
}

.simple-dropdown{
  display:none;
  position:absolute;

  top:calc(100% + 2px);
  left:50%;
  transform:translateX(-50%);

  min-width:220px;

  z-index:999;
}

.simple-dropdown.open {
  display: block;
}

/* product card */
.prod-card {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(96, 205, 18, 0.1);
  text-decoration: none;
  transition: all 0.18s ease;
}
.prod-card:hover {
  background: rgba(96, 205, 18, 0.08);
  border-color: rgba(96, 205, 18, 0.35);
  transform: translateY(-1px);
}
.prod-card-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}
.prod-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(96, 205, 18, 0.1);
  border: 1px solid rgba(96, 205, 18, 0.2);
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  color: #86efac;
  line-height: 1.6;
}

/* label panels */
.panel-group {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3a5438;
  padding: 8px 0 3px;
  grid-column: 1/-1;
}
.panel-group:first-child {
  padding-top: 0;
}

/* language switcher */
.lang-wrap {
  position: relative;
}
.lang-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #9ca3af;
  transition: color 0.18s ease;
  padding: 4px 0;
  user-select: none;
}
.lang-wrap:hover .lang-trigger {
  color: #fff;
}

.lang-drop {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
  z-index: 300;
  min-width: 140px;
}
/* stays open */
.lang-wrap:hover .lang-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.lang-drop-inner {
  background: #021920;
  border: 1px solid rgba(96, 205, 18, 0.2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.lang-opt {
  display: block;
  padding: 9px 14px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.lang-opt:hover {
  background: #60cd12;
  color: #fff;
}
.lang-opt.chosen {
  color: #60cd12;
  font-weight: 600;
}

/* mobile drawer */
#NavOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
}
#NavOverlay.open {
  display: block;
}

#NavDrawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 94vw);
  background: #03262c;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#NavDrawer.open {
  transform: translateX(0);
}

.drawer-acc-btn {
  outline: none;
}
.drawer-acc-body {
  display: none;
}
.drawer-acc-body.open {
  display: block;
}
.acc-chevron {
  transition: transform 0.22s ease;
}
.drawer-acc-btn.open .acc-chevron {
  transform: rotate(180deg);
}

/* Go To Top button */
#GoToTop {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f7404, #60cd12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 4px 18px rgba(96, 205, 18, 0.35);
  z-index: 997;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.2s ease;
}
#GoToTop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#GoToTop:hover {
  box-shadow: 0 6px 24px rgba(96, 205, 18, 0.55);
  transform: translateY(-2px);
}

#topbar {
  background: #214671;
  border-bottom: 1px solid rgba(96, 205, 18, 0.1);
}

#NavHeader.scrolled .topbar-line {
  display: none;
}

@media (max-width: 1023px) {
  #topbar {
    display: none !important;
  }
}

.simple-nav-link{
  display:block;
  padding:10px 14px;

  border-radius:8px;

  font-family:"Roboto",sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1.45;

  color:#9ca3af;
  white-space:normal;

  transition:all .18s ease;
}

.simple-nav-link:hover {
  background: rgba(96,205,18,.07);
  color: #d1d5db;
  padding-left: 17px;
}

.drawer-sub-link {
  display: block;
  padding: 6px 0;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #9ca3af;
  text-decoration: none;
  transition: color .18s ease;
}

.drawer-sub-link:hover {
  color: #60cd12;
}

.brand-tagline{
  margin:4px 0 0;
  font-family:"Roboto",sans-serif;
  font-size:8px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#60cd12;
  white-space:nowrap;
}

/*==================================================
  PRODUCT DETAIL — GALLERY + SPECS
==================================================*/

.product-main-grid{
  display:grid;
  grid-template-columns:minmax(0,65fr) minmax(300px,35fr);
  gap:32px;
  align-items:start;
}

.product-gallery-column{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.product-glance-card{
  min-width:0;
}


/* tablet / mobile */

@media(max-width:899px){

  .product-main-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

}




<style>
/*------- Product page -------*/
.product-root { font-family:'Roboto',sans-serif; }

/*--------- breadcrumb --------*/
.prod-breadcrumb { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.prod-breadcrumb a { font-size:12px;color:#7db87a;text-decoration:none;transition:color .18s; }
.prod-breadcrumb a:hover { color:#60cd12; }
.prod-breadcrumb span { font-size:12px;color:#60cd12; }
.prod-breadcrumb i { font-size:9px;color:#3a5840; }

/*---- hero badge -------*/
.hero-badge {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}

/*================ GALLERY ================*/

.gallery-wrap{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
}

.gallery-slide{
  display:none;
  width:100%;
  height:clamp(320px,45vw,560px);
  overflow:hidden;
}

.gallery-slide.active{
  display:block;
}

.gallery-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  cursor:zoom-in;

  transition:transform .45s ease;
}

.gallery-slide:hover img{
  transform:scale(1.15);
}


/*---------- zoom button ----------*/

.image-zoom-btn{
  position:absolute;
  top:14px;
  right:14px;

  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,.9);
  color:#03262c;

  font-size:16px;

  cursor:pointer;

  z-index:10;

  transition:
    background .2s ease,
    color .2s ease;
}

.image-zoom-btn:hover{
  background:#60cd12;
  color:#03262c;
}


/*---------- gallery navigation ----------*/

.gallery-nav{
  position:absolute;
  top:50%;

  transform:translateY(-50%);

  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(3,38,44,.75);

  border:1px solid rgba(96,205,18,.3);

  color:#60cd12;

  font-size:13px;

  cursor:pointer;

  transition:
    background .18s ease,
    border-color .18s ease;

  z-index:5;
}

.gallery-nav:hover{
  background:#03262c;
  border-color:#60cd12;
}

.gallery-nav.prev{
  left:12px;
}

.gallery-nav.next{
  right:12px;
}


/*---------- gallery counter ----------*/

.gallery-counter{
  position:absolute;

  right:12px;
  bottom:10px;

  padding:2px 8px;

  border-radius:999px;

  background:rgba(0,0,0,.4);

  font-family:'Barlow Condensed',sans-serif;

  font-size:12px;
  font-weight:700;

  color:rgba(255,255,255,.75);
}


/*================ THUMBNAILS ================*/

.gallery-thumbs{
  display:flex;
  flex-wrap:wrap;

  gap:10px;

  margin-top:16px;
}

.gthumb{
  width:84px;
  height:64px;

  flex-shrink:0;

  padding:0;

  overflow:hidden;

  border:2px solid #e2e8e0;
  border-radius:8px;

  background:#f4f6f3;

  cursor:pointer;

  transition:
    border-color .18s ease,
    transform .18s ease;
}

.gthumb:hover{
  border-color:#60cd12;
}

.gthumb.active{
  border-color:#60cd12;
  transform:translateY(-2px);
}

.gthumb img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


/*================ GALLERY LIGHTBOX ================*/

.gallery-lightbox{
  position:fixed;
  inset:0;

  z-index:9999;

  display:none;
  align-items:center;
  justify-content:center;

  padding:40px 80px;

  background:rgba(0,0,0,.88);
}

.gallery-lightbox.active{
  display:flex;
}


/*---------- enlarged image ----------*/

.lightbox-image-wrap{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  max-width:1500px;
  max-height:88vh;
}

.lightbox-image-wrap img{
  display:block;

  width:auto;
  height:auto;

  max-width:100%;
  max-height:88vh;

  object-fit:contain;
}


/*---------- close button ----------*/

.lightbox-close{
  position:absolute;

  top:18px;
  right:24px;

  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;

  background:transparent;
  color:#fff;

  font-size:38px;
  line-height:1;

  cursor:pointer;

  z-index:3;
}


/*---------- lightbox previous / next ----------*/

.lightbox-nav{
  position:absolute;
  top:50%;

  transform:translateY(-50%);

  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;

  background:rgba(3,38,44,.78);

  color:#fff;

  font-size:24px;

  cursor:pointer;

  z-index:3;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.lightbox-nav:hover{
  background:#03262c;
  border-color:#60cd12;
  color:#60cd12;
}

.lightbox-prev{
  left:22px;
}

.lightbox-next{
  right:22px;
}


/*---------- lightbox counter ----------*/

.lightbox-counter{
  position:absolute;

  left:50%;
  bottom:14px;

  transform:translateX(-50%);

  padding:6px 12px;

  border-radius:999px;

  background:rgba(3,38,44,.82);

  color:#fff;

  font-size:12px;
  font-weight:600;

  white-space:nowrap;
}


/*================ MOBILE ================*/

@media(max-width:700px){

  .gallery-lightbox{
    padding:60px 50px;
  }

  .lightbox-nav{
    width:40px;
    height:40px;

    font-size:19px;
  }

  .lightbox-prev{
    left:8px;
  }

  .lightbox-next{
    right:8px;
  }

  .lightbox-close{
    top:10px;
    right:12px;
  }

}

/*--------- spec table ---------*/
.spec-table { width:100%;border-collapse:collapse; }
.spec-table td { padding:8px 12px;font-size:13px;border-bottom:1px solid #e8ede6;vertical-align:top; }
.spec-table tr:last-child td { border-bottom:none; }
.spec-key { color:#03262c;font-weight:500;width:42%;white-space:nowrap; }
.spec-val { color:#4a5e48;font-weight:300; }

/*================ PRODUCT GLANCE CTA ================*/

.glance-cta{
  margin:14px;
  padding:14px 15px;

  background:#03262c;

  border-radius:12px;
}

.glance-cta-text{
  margin-bottom:12px;
}

.glance-cta-text strong{
  display:block;

  margin-bottom:4px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;
  font-weight:700;

  color:#fff;
}

.glance-cta-text span{
  display:block;

  font-size:11px;
  line-height:1.5;

  color:#a9bca6;
}


/*---------- single button ----------*/

.glance-cta-actions{
  display:block;
}

.glance-cta-primary{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:40px;

  padding:9px 12px;

  border-radius:8px;

  background:#60cd12;
  color:#03262c;

  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:800;

  letter-spacing:.05em;
  text-transform:uppercase;

  text-decoration:none;

  transition:background .18s ease;
}

.glance-cta-primary:hover{
  background:#55bc0e;
}


/*------ spec pills ---------*/
.spec-pill {
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:rgba(96,205,18,.1);border:1px solid rgba(96,205,18,.25);
  font-size:11px;font-weight:500;color:#a8e880;
}

/*---------- features strip ----------*/
.feat-strip { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px; }
.feat-item { display:flex;align-items:flex-start;gap:12px;padding:16px;
  background:#fff;border:1.5px solid #e2e8e0;border-radius:12px;
  transition:all .22s ease; }
.feat-item:hover { border-color:#60cd12;box-shadow:0 4px 16px rgba(96,205,18,.1); }
.feat-icon-wrap {
  width:36px;height:36px;border-radius:10px;background:#dcfce7;
  display:flex;align-items:center;justify-content:center;
  color:#0f7404;font-size:14px;flex-shrink:0;
}
.feat-title { font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:#03262c;margin-bottom:3px; }
.feat-text  { font-size:12px;color:#6b8268;line-height:1.55; }


/*---------- applications layout ----------*/

.application-layout {
  display:grid;
  grid-template-columns:1.2fr 2fr;
  gap:12px;
}

/* left big image */

.application-featured {
  min-height:456px;
}

/* right side */

.application-right {
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* top two */

.application-top {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  height:220px;
}

/* bottom three */
.application-bottom {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  height:220px;
}

/* card */
.application-card {
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.application-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.application-card:hover img {
  transform:scale(1.06);
}

/* overlay */
.application-overlay {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:18px;
  background:linear-gradient(
      transparent,
      rgba(0,0,0,.78)
  );
  color:white;
}

.application-overlay h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;
  margin:0 0 5px;
}

/* tablet */
@media(max-width:1024px){
  .application-layout{
    grid-template-columns:1fr;
  }
  .application-featured{
    min-height:360px;
  }
}


/* mobile */
@media(max-width:640px){
  .application-top,
  .application-bottom{
    grid-template-columns:1fr;
    height:auto;
  }
  .application-card{
    min-height:220px;
  }
}


  /*---------- complete product system ----------*/

.component-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}

.component-card{
  background:#f4f6f3;
  border:1px solid #e2e8e0;
  border-radius:4px;
}

.component-card img{
 width:100%;
  height:150px;
  object-fit:contain;
  padding:4px;
}

.component-name{
  background:#fff;
  padding:8px 6px;
  font-size:13px;
  font-weight:700;
  text-align: center;
}

/* Tablet */

@media(max-width:1024px){
.component-grid{
 grid-template-columns:repeat(3,1fr);
}
}

/* Mobile */
@media(max-width:640px){
.component-grid{
 grid-template-columns:repeat(2,1fr);
}

.component-card img{
 height:120px;
}
}


/*--------- tabs -----------*/
.tab-bar { 
  display:grid;
  grid-template-columns:repeat(5,1fr);
  width:100%;
  gap:0;
  padding-bottom:0;
  border-bottom:2px solid #e2e8e0;
}
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn {
  width:100%;
  padding:16px 10px;
  text-align:center;
  border:none;
  background:transparent;
  cursor:pointer;
  font-family:'Roboto',sans-serif;
  font-size:15px;
  font-weight:600;
  color:#6b8268;
  border-bottom:2.5px solid transparent;
  margin-bottom:-2px;
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease;
}
.tab-btn:hover { color:#0f7404; }
.tab-btn.active { color:#03262c;font-weight:700;border-bottom-color:#60cd12; }
.tab-panel { display:none;padding-top:20px; }
.tab-panel.active { display:block; }

/*================ TECH TABS — MOBILE ================*/

@media(max-width:600px){

  .tab-bar{
    display:flex;
    grid-template-columns:none;

    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    gap:0;
    white-space:nowrap;
    scroll-behavior:smooth;
    scrollbar-width:none;
    border-bottom:none;
  }

  .tab-bar::-webkit-scrollbar{
    display:none;
  }

  .tab-btn{
    flex:0 0 auto;
    width:auto;
    padding:14px 16px;
    font-size:14px;
    white-space:nowrap;
  }

}

/*----------- tab content typography -------------*/
.tab-p { font-size:14px;color:#3a4a38;line-height:1.85;margin-bottom:14px; }
.tab-ul { padding-left:18px;margin:10px 0 14px; }
.tab-ul li { font-size:14px;color:#3a4a38;line-height:1.75;margin-bottom:5px; }
.tab-ul li::marker { color:#0f7404; }


/*================ OVERVIEW TAB ================*/

.overview-visual{
  width:100%;
}


/* intro */

.overview-intro{
  margin-bottom:24px;
}

.overview-intro p{
  margin:0;
  max-width:1050px;
  font-size:14px;
  line-height:1.75;
  color:#4f644d;
}


/* main 2-column layout */

.overview-main{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}


/*---------- LEFT SIDE ----------*/

.overview-left{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  height:100%;
}


.overview-image{
  overflow:hidden;
  border-radius:14px;
  background:#f4f6f3;
  height:390px;
  flex-shrink:0;
}

.overview-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


.overview-image-text{
  flex:1;
  background:#f8faf7;
  border:1px solid #e3eae0;
  border-radius:14px;
  padding:22px 24px;
}

.overview-image-text h3{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:800;
  color:#03262c;
  margin:0 0 12px;
}

.overview-image-text p{
  font-size:13px;
  line-height:1.75;
  color:#5f735d;
  margin:0 0 12px;
}

.overview-image-text p:last-child{
  margin-bottom:0;
}


/*---------- RIGHT SIDE ----------*/

.overview-right{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:99%;
  min-width:0;
}


/* six feature cards */

.overview-features{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:12px;
}

.overview-feature{
  background:#f8faf7;
  border:1px solid #e3eae0;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
}

.overview-feature strong{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;
  color:#03262c;
  margin-bottom:6px;
}


.overview-feature span{
  display:block;
  font-size:12.5px;
  line-height:1.5;
  color:#6b8268;
}

/*---------- CTA ----------*/

.overview-cta{
  flex-shrink:0;
  background:#03262c;
  border-radius:12px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.overview-cta strong{
  display:block;
  color:#fff;
  font-size:15px;
  font-weight:700;
  margin-bottom:4px;
}

.overview-cta span{
  display:block;
  color:#a9bca6;
  font-size:12px;
  line-height:1.5;
  max-width:250px;
}

.overview-cta a{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 15px;
  border-radius:8px;
  background:#60cd12;
  color:#03262c;
  text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:background .18s ease,
             transform .18s ease;
}

.overview-cta a:hover{
  background:#55bc0e;
  transform:translateY(-1px);
}


/*================ TABLET ================*/

@media(max-width:900px){

  .overview-main{
    grid-template-columns:1fr;
  }
  .overview-left,
  .overview-right{
    height:auto;
  }
  .overview-image{
    height:360px;
  }
  .overview-features{
    grid-template-rows:auto;
  }
}


/*================ MOBILE ================*/

@media(max-width:600px){

  .overview-intro{
    margin-bottom:18px;
  }

  .overview-image{
    height:270px;
  }

  .overview-image-text{
    padding:18px;
  }

  .overview-features{
    grid-template-columns:1fr;
  }

  .overview-feature{
    min-height:90px;
  }

  .overview-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .overview-cta a{
    width:100%;
  }

}

/*================ SPECIFICATIONS TAB ================*/


/*---------- table ----------*/

.tab-table-wrap{
  overflow-x:auto;
  margin:12px 0;
  border-radius:10px;
}

.tab-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.tab-table th{
  background:#03262c;
  color:#60cd12;

  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;

  letter-spacing:.1em;
  text-transform:uppercase;

  padding:9px 14px;
  text-align:left;
}

.tab-table td{
  padding:8px 14px;

  color:#3a4a38;

  border-bottom:1px solid #e8ede6;

  vertical-align:top;
}

.tab-table tr:last-child td{
  border-bottom:none;
}

.tab-table tr:nth-child(even) td{
  background:#f8faf7;
}


/*---------- visual section ----------*/

.spec-visual-section{
  margin-top:28px;
}

.spec-visual-head{
  margin-bottom:16px;
}

.spec-visual-head h3{
  font-family:'Barlow Condensed',sans-serif;

  font-size:20px;
  font-weight:800;

  color:#03262c;

  margin:0 0 5px;
}

.spec-visual-head p{
  margin:0;

  font-size:13px;

  color:#6b8268;
}


/*---------- main visual grid ----------*/

.spec-visual-grid{
  display:grid;

  grid-template-columns:.78fr 1.22fr;

  gap:20px;

  align-items:start;
}


/*---------- dimension callouts ----------*/

.spec-callouts{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;

  align-content:start;
}

.spec-callout{
  display:flex;

  gap:12px;

  align-items:flex-start;

  background:#f8faf7;

  border:1px solid #e3eae0;

  border-radius:12px;

  padding:14px;

  min-height:92px;
}

.spec-letter{
  width:30px;
  height:30px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:8px;

  background:#03262c;

  color:#60cd12;

  font-weight:800;
  font-size:13px;
}

.spec-callout strong{
  display:block;

  color:#03262c;

  font-size:14px;

  margin-bottom:4px;
}

.spec-callout p{
  margin:0;

  color:#6b8268;

  font-size:12px;
  line-height:1.5;
}


/*---------- right visual area ----------*/

.spec-visual-right{
  display:flex;

  flex-direction:column;

  gap:12px;

  min-width:0;
}

.spec-drawing{
  min-height:360px;

  background:#f8faf7;

  border:1px solid #e3eae0;

  border-radius:14px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.spec-drawing img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;

  padding:18px;
}


/*================ TABLET ================*/

@media(max-width:900px){

  .spec-visual-grid{
    grid-template-columns:1fr;
  }

}


/*================ MOBILE ================*/

@media(max-width:600px){

  .spec-callouts{
    grid-template-columns:1fr;
  }

  .spec-drawing{
    min-height:260px;
  }
}


/*================ INSTALLATION TAB ================*/

.installation-section{
  width:100%;
}


/*---------- intro ----------*/

.installation-intro{
  margin-bottom:22px;
}

.installation-intro p{
  margin:0;
  max-width:1000px;

  font-size:14px;
  line-height:1.75;

  color:#4f644d;
}


/*---------- main layout ----------*/

.installation-main{
  display:grid;
  grid-template-columns:1.15fr .85fr;

  gap:18px;

  align-items:stretch;
}


/*---------- main image ----------*/

.installation-image{
  min-height:430px;

  background:#f8faf7;

  border:1px solid #e3eae0;
  border-radius:14px;

  overflow:hidden;
}

.installation-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


/*---------- steps ----------*/

.installation-steps{
  display:grid;
  grid-template-columns:1fr;

  gap:12px;
}

.install-step{
  display:flex;

  gap:14px;

  align-items:flex-start;

  background:#f8faf7;

  border:1px solid #e3eae0;
  border-radius:12px;

  padding:16px 18px;
}

.install-number{
  width:38px;
  height:38px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#03262c;

  border-radius:9px;

  font-family:'Barlow Condensed',sans-serif;

  font-size:14px;
  font-weight:800;

  color:#60cd12;
}

.install-step h4{
  margin:0 0 5px;

  font-family:'Barlow Condensed',sans-serif;

  font-size:17px;
  font-weight:700;

  color:#03262c;
}

.install-step p{
  margin:0;

  font-size:12.5px;
  line-height:1.55;

  color:#6b8268;
}


/*---------- video section ----------*/

.installation-videos{
  margin-top:30px;
}

.installation-video-head{
  margin-bottom:15px;
}

.installation-video-head h3{
  margin:0 0 5px;

  font-family:'Barlow Condensed',sans-serif;

  font-size:20px;
  font-weight:800;

  color:#03262c;
}

.installation-video-head p{
  margin:0;

  font-size:13px;

  color:#6b8268;
}


/*---------- video cards ----------*/

.installation-video-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:16px;
}

.install-video-card{
  display:block;

  background:#fff;

  border:1px solid #e3eae0;
  border-radius:12px;

  overflow:hidden;

  text-decoration:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.install-video-card:hover{
  border-color:#cbd8c7;

  box-shadow:0 8px 24px rgba(3,38,44,.08);

  transform:translateY(-2px);
}


/* thumbnail */

.install-video-thumb{
  position:relative;

  height:220px;

  overflow:hidden;

  background:#f4f6f3;
}

.install-video-thumb img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:transform .3s ease;
}

.install-video-card:hover .install-video-thumb img{
  transform:scale(1.03);
}


/* play button */

.install-video-play{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:54px;
  height:54px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#60cd12;

  color:#03262c;

  font-size:17px;

  box-shadow:0 6px 20px rgba(0,0,0,.2);

  transition:
    transform .18s ease,
    background .18s ease;
}

.install-video-card:hover .install-video-play{
  transform:translate(-50%,-50%) scale(1.07);

  background:#55bc0e;
}


/* video info */

.install-video-info{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:14px 16px;
}

.install-video-info strong{
  font-family:'Barlow Condensed',sans-serif;

  font-size:15px;
  font-weight:700;

  color:#03262c;
}

.install-video-info span{
  flex-shrink:0;

  display:inline-flex;
  align-items:center;

  gap:6px;

  font-size:11px;
  font-weight:700;

  color:#5f735d;

  text-transform:uppercase;
}


/*================ TABLET ================*/

@media(max-width:900px){

  .installation-main{
    grid-template-columns:1fr;
  }

  .installation-image{
    min-height:360px;
  }

}


/*================ MOBILE ================*/

@media(max-width:600px){

  .installation-intro{
    margin-bottom:18px;
  }

  .installation-image{
    min-height:270px;
  }

  .install-step{
    padding:14px;
  }

  .installation-video-grid{
    grid-template-columns:1fr;
  }

  .install-video-thumb{
    height:190px;
  }

  .install-video-info{
    align-items:flex-start;

    flex-direction:column;

    gap:6px;
  }

}


/*================ TECHNOLOGY TAB ================*/

.technology-wrapper{
  width:100%;
}


/*---------- intro ----------*/

.technology-intro{
  margin-bottom:26px;
}

.technology-intro p{
  margin:0;
  max-width:1050px;

  font-size:14px;
  line-height:1.75;

  color:#4f644d;
}


/*---------- sections ----------*/

.technology-section{
  margin-top:32px;
}

.technology-section:first-of-type{
  margin-top:0;
}


/*---------- section heading ----------*/

.technology-section-head{
  display:flex;
  align-items:flex-start;
  gap:12px;

  margin-bottom:16px;
}

.technology-kicker{
  width:34px;
  height:34px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#03262c;
  color:#60cd12;

  border-radius:8px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:800;
}

.technology-section-head h3{
  margin:0 0 4px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:800;

  color:#03262c;
}

.technology-section-head p{
  margin:0;

  font-size:12.5px;
  line-height:1.55;

  color:#6b8268;
}


/*================ MATERIALS & CONSTRUCTION ================*/

.technology-material-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:12px;
}

.technology-material-card{
  display:flex;
  align-items:flex-start;

  gap:14px;

  padding:17px 18px;

  background:#f8faf7;

  border:1px solid #e3eae0;
  border-radius:12px;
}

.technology-accent{
  width:4px;
  align-self:stretch;
  flex-shrink:0;

  background:#60cd12;
  border-radius:4px;
}

.technology-material-card .tech-label{
  display:block;

  margin-bottom:3px;

  font-size:10px;
  font-weight:700;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:#7b9078;
}

.technology-material-card strong{
  display:block;

  margin-bottom:5px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;
  font-weight:700;

  color:#03262c;
}

.technology-material-card p{
  margin:0;

  font-size:12px;
  line-height:1.55;

  color:#6b8268;
}


/*================ SURFACE PROTECTION ================*/

.technology-surface{
  padding:24px;

  background:#f4f6f3;

  border-radius:14px;
}


/* coating options */

.surface-options{
  display:flex;
  align-items:stretch;

  gap:10px;
}

.surface-option{
  flex:1;

  display:flex;
  align-items:flex-start;

  gap:12px;

  padding:16px;

  background:#fff;

  border:1px solid #e1e8df;
  border-radius:11px;
}

.surface-number{
  width:30px;
  height:30px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#eaf7df;
  color:#2e7200;

  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:800;
}

.surface-option strong{
  display:block;

  margin-bottom:5px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;
  font-weight:700;

  color:#03262c;
}

.surface-option p{
  margin:0;

  font-size:11.5px;
  line-height:1.5;

  color:#6b8268;
}

.surface-arrow{
  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#91a68e;

  font-size:11px;
}


/* coating metadata */

.surface-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:10px;

  margin-top:12px;
}

.surface-meta > div{
  padding:13px 15px;

  border-left:3px solid #60cd12;

  background:#fff;

  border-radius:0 9px 9px 0;
}

.surface-meta span{
  display:block;

  margin-bottom:4px;

  font-size:10px;
  font-weight:700;

  letter-spacing:.07em;
  text-transform:uppercase;

  color:#7b9078;
}

.surface-meta strong{
  display:block;

  font-size:12px;
  line-height:1.5;
  font-weight:600;

  color:#40533e;
}


/*================ MANUFACTURING PROCESS ================*/

.technology-process{
  display:flex;
  align-items:center;

  gap:8px;

  padding:18px;

  background:#03262c;

  border-radius:13px;

  overflow-x:auto;
}

.process-step{
  flex:1 0 90px;

  min-width:90px;

  text-align:center;
}

.process-step span{
  display:block;

  margin-bottom:4px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:800;

  color:#60cd12;
}

.process-step strong{
  display:block;

  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:700;

  color:#fff;
}

.technology-process > i{
  flex-shrink:0;

  color:#557067;

  font-size:9px;
}


/*================ QUALITY CONTROL ================*/

.technology-qc{
  display:grid;

  grid-template-columns:.75fr 1.25fr;

  gap:18px;

  margin-top:14px;

  padding:18px;

  background:#f8faf7;

  border:1px solid #e3eae0;
  border-radius:12px;
}


/* qc heading */

.technology-qc-title{
  display:flex;
  align-items:center;

  gap:12px;
}

.technology-qc-title > span{
  width:42px;
  height:42px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#03262c;

  border-radius:10px;

  color:#60cd12;

  font-size:16px;
}

.technology-qc-title strong{
  display:block;

  margin-bottom:3px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;
  font-weight:700;

  color:#03262c;
}

.technology-qc-title p{
  margin:0;

  font-size:11.5px;
  line-height:1.5;

  color:#6b8268;
}


/* qc checklist */

.technology-qc-list{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;
}

.technology-qc-list span{
  display:flex;
  align-items:center;

  gap:7px;

  padding:9px 10px;

  background:#fff;

  border:1px solid #e3eae0;
  border-radius:8px;

  font-size:11.5px;
  font-weight:600;

  color:#40533e;
}

.technology-qc-list i{
  color:#4da90d;

  font-size:10px;
}


/*================ TABLET ================*/

@media(max-width:900px){

  .technology-material-grid{
    grid-template-columns:1fr;
  }

  .surface-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }

  .surface-arrow{
    display:none;
  }

  .technology-qc{
    grid-template-columns:1fr;
  }

}


/*================ MOBILE ================*/

@media(max-width:600px){

  .technology-intro{
    margin-bottom:22px;
  }


  .technology-section{
    margin-top:26px;
  }


  .technology-surface{
    padding:17px;
  }


  .surface-options{
    grid-template-columns:1fr;
  }


  .surface-meta{
    grid-template-columns:1fr;
  }


  .technology-process{
    padding:15px 12px;
  }


  .process-step{
    flex-basis:78px;
    min-width:78px;
  }


  .technology-qc{
    padding:15px;
  }


  .technology-qc-list{
    grid-template-columns:repeat(2,1fr);
  }

}


/* very small screens */

@media(max-width:420px){

  .technology-qc-list{
    grid-template-columns:1fr;
  }

}


/*-------- gallery tab -----------*/
.tab-gallery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:12px 0; }
.tab-gallery-grid img { width:100%;border-radius:10px;object-fit:cover;aspect-ratio:4/3;border:1.5px solid #e2e8e0;transition:border-color .2s ease; }
.tab-gallery-grid img:hover { border-color:#60cd12; }



/*================ DOWNLOADS TAB ================*/

.dl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  padding:10px 20px;

  border-radius:10px;

  background:#03262c;
  color:#60cd12;

  text-decoration:none;

  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;

  letter-spacing:.06em;
  text-transform:uppercase;

  transition:
    background .18s ease,
    transform .18s ease;
}

.dl-btn:hover{
  background:#04363e;
  transform:translateY(-1px);
}


/*---------- download card ----------*/

.download-box{
  display:flex;
  align-items:center;

  gap:20px;

  background:#f8faf7;

  border:1px solid #e8ede6;
  border-radius:12px;

  padding:24px;
}


/*---------- file type label ----------*/

.download-type{
  width:48px;
  height:48px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#03262c;
  color:#60cd12;

  border-radius:10px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;
}


/*---------- text ----------*/

.download-info{
  flex:1;
  min-width:0;
}

.download-info h4{
  margin:0 0 6px;

  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;
  font-weight:700;

  color:#03262c;
}

.download-info p{
  margin:0;

  font-size:14px;
  line-height:1.6;

  color:#6b8268;
}


/*================ MOBILE ================*/

@media(max-width:700px){

  .download-box{
    flex-direction:column;
    align-items:flex-start;

    padding:20px;
  }

  .dl-btn{
    width:100%;
  }

}

/*---------- FAQ ----------*/

.faq-wrap{
  max-width:900px;
  margin:0 auto;
}

.faq-item{
  background:#fff;
  border:1px solid #e2e8e0;
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}

.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:18px 20px;

  cursor:pointer;

  font-family:'Roboto',sans-serif;
  font-size:15px;
  font-weight:600;

  color:#03262c;

  list-style:none;
}

.faq-question::-webkit-details-marker{
  display:none;
}

.faq-icon{
  color:#60cd12;
  font-size:13px;
  transition:transform .2s ease;
}

.faq-item[open] .faq-icon{
  transform:rotate(45deg);
}

.faq-answer{
  padding:0 20px 20px;

  font-size:14px;
  line-height:1.75;

  color:#6b8268;
}


/*================ RELATED PRODUCTS ================*/


/*---------- heading + arrows ----------*/

.related-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-top:0;
  margin-bottom:18px;
}

.rel-nav{
  display:flex;
  align-items:center;
  gap:8px;

  flex-shrink:0;
}

.rel-nav-btn{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  border:1px solid #d8e2d5;
  border-radius:10px;

  color:#03262c;

  font-size:20px;
  line-height:1;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.rel-nav-btn:hover{
  background:#03262c;
  border-color:#03262c;
  color:#60cd12;
}


/*---------- slider ----------*/

.rel-slider-wrap{
  width:100%;
  overflow:hidden;
}

.rel-strip{
  display:flex;
  gap:16px;

  overflow-x:auto;

  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;

  scrollbar-width:none;
}

.rel-strip::-webkit-scrollbar{
  display:none;
}


/*---------- product card ----------*/

.rel-card{
  flex:0 0 calc((100% - 48px) / 4);

  display:block;

  background:#fff;

  border:1.5px solid #e2e8e0;
  border-radius:14px;

  overflow:hidden;

  text-decoration:none;

  scroll-snap-align:start;

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.rel-card:hover{
  border-color:#60cd12;

  box-shadow:0 6px 24px rgba(96,205,18,.10);

  transform:translateY(-3px);
}


/*---------- image ----------*/

.rel-card-img{
  height:140px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  overflow:hidden;
}

.rel-card-img img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .35s ease;
}

.rel-card:hover .rel-card-img img{
  transform:scale(1.06);
}


/*---------- body ----------*/

.rel-card-body{
  padding:14px;
}

.rel-badge{
  display:inline-flex;
  align-items:center;

  padding:3px 9px;

  border-radius:999px;

  font-size:10px;
  font-weight:600;

  letter-spacing:.04em;
  text-transform:uppercase;
}

.rel-name{
  margin:6px 0 4px;

  font-family:'Barlow Condensed',sans-serif;

  font-size:15px;
  font-weight:700;
  line-height:1.2;

  color:#03262c;
}

.rel-desc{
  margin-bottom:8px;

  font-size:12px;
  line-height:1.5;

  color:#6b8268;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}

.rel-cta{
  display:inline-flex;
  align-items:center;
  gap:5px;

  font-family:'Barlow Condensed',sans-serif;

  font-size:12px;
  font-weight:700;

  letter-spacing:.06em;
  text-transform:uppercase;

  color:#0f7404;
}


/*================ TABLET ================*/

@media(max-width:1000px){

  .rel-card{
    flex-basis:calc((100% - 32px) / 3);
  }

}


/*================ SMALL TABLET ================*/

@media(max-width:700px){

  .rel-card{
    flex-basis:calc((100% - 16px) / 2);
  }

}


/*================ MOBILE ================*/

@media(max-width:480px){

  .related-head{
    align-items:center;
  }

  .rel-nav-btn{
    width:38px;
    height:38px;
  }

  .rel-card{
    flex-basis:100%;
  }

}


/*---------- final quote CTA ----------*/

.final-quote-section{
  background:#fff;
  padding:36px 0 44px;
}


.final-quote-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:22px 28px;
  border-radius:14px;
  background:#03262c;
  border:1px solid rgba(96,205,18,.2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}


.final-quote-content{
  flex:1;
}


.final-quote-content h2{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  color:#fff;
  margin:0 0 5px;
}


.final-quote-content p{

  font-family:'Roboto',sans-serif;

  font-size:13px;

  line-height:1.6;

  color:#b8d4b0;

  margin:0;

}


.final-quote-actions{

  display:flex;

  align-items:center;

  gap:12px;

  flex-shrink:0;

}


.final-quote-primary,
.final-quote-secondary{

  min-height:48px;

  padding:0 24px;

  border-radius:9px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  text-decoration:none;

  font-family:'Barlow Condensed',sans-serif;

  font-size:13px;

  font-weight:800;

  letter-spacing:.07em;

  text-transform:uppercase;

  transition:all .2s ease;

}


.final-quote-primary{

  background:#60cd12;

  color:#03262c;

}


.final-quote-primary:hover{

  background:#4db30e;

}


.final-quote-secondary{

  background:transparent;

  color:#fff;

  border:1px solid rgba(96,205,18,.35);

}


.final-quote-secondary i{

  color:#60cd12;

}


.final-quote-secondary:hover{

  background:rgba(255,255,255,.06);

  border-color:#60cd12;

}


/* tablet / mobile */

@media(max-width:800px){

  .final-quote-wrap{

    flex-direction:column;

    align-items:flex-start;

  }


  .final-quote-actions{

    width:100%;

  }

}


@media(max-width:520px){

  .final-quote-actions{

    flex-direction:column;

  }


  .final-quote-primary,
  .final-quote-secondary{

    width:100%;

  }

}

.gallery-empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-not-found{
  padding:120px 20px;
  text-align:center;
  font-family:"Roboto",sans-serif;
  font-size:14px;
  color:#6b8268;
}

/*================ PRODUCT HERO ================*/

.product-hero{
  position:relative;
  overflow:hidden;

  background:#03262c;

  padding-top:clamp(68px,7vw,88px);
  padding-bottom:clamp(38px,4vw,48px);

  border-bottom:1px solid rgba(255,255,255,.06);
}

.product-hero-grid{
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    linear-gradient(rgba(96,205,18,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,205,18,.03) 1px,transparent 1px);

  background-size:48px 48px;
}

.product-hero-glow{
  position:absolute;
  top:-120px;
  right:-80px;

  width:520px;
  height:520px;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(96,205,18,.06) 0%,
      rgba(96,205,18,.02) 35%,
      transparent 70%
    );
}

.product-hero-inner{
  position:relative;
  z-index:10;

  max-width:1280px;

  margin:0 auto;

  padding:0 clamp(16px,4vw,80px);
}




.product-hero-breadcrumb{
  margin-bottom:38px;
  opacity:.88;
}

.product-hero-category{
  margin-bottom:18px;
}

.product-hero-title{
  max-width:900px;
  margin:0 0 12px;

  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(38px,4.5vw,58px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.025em;

  color:#fff;
}

.product-hero-tagline{
  max-width:700px;
  margin:0;

  font-family:"Roboto",sans-serif;
  font-size:clamp(14px,1.3vw,16px);
  line-height:1.65;

  color:#b8d4b0;
}



/*================ GALLERY + SPECS SECTION ================*/

.product-main-section{
  position:relative;
  overflow:hidden;

  background:#f4f6f3;

  padding:clamp(40px,6vw,72px) 0;
}

.product-main-pattern{
  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    radial-gradient(circle,#d4e8d0 1px,transparent 1px);

  background-size:32px 32px;

  opacity:.38;
}

.product-section-inner{
  position:relative;
  z-index:10;

  max-width:1280px;

  margin:0 auto;

  padding:0 clamp(16px,4vw,80px);
}



/*================ PRODUCT AT A GLANCE ================*/

.product-glance-card{
  min-width:0;

  background:#fff;

  border:1.5px solid #e2e8e0;
  border-radius:16px;

  overflow:hidden;

  box-shadow:0 2px 12px rgba(3,38,44,.06);
}

.product-glance-head{
  background:#03262c;
  padding:14px 18px;
}

.product-glance-head span{
  font-family:"Barlow Condensed",sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.03em;

  color:#fff;
}


/*================ PRODUCT APPLICATIONS ================*/

.applications-section{
  background:#fff;
  padding:clamp(50px,6vw,80px) 0;
}

.applications-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:20px;
  margin-bottom:28px;
}

.section-eyebrow{
  margin-bottom:6px;

  font-family:"Barlow Condensed",sans-serif;
  font-size:10px;
  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:#0f7404;
}

.section-title{
  margin:0;

  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(22px,3vw,38px);
  font-weight:800;

  color:#03262c;
}



/*================ COMPLETE PRODUCT SYSTEM ================*/

.product-system-section{
  background:#fff;
  padding:clamp(50px,6vw,80px) 0;
}

.product-system-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:20px;
  margin-bottom:28px;
}


/*================ TECHNICAL INFORMATION ================*/

.technical-section{
  background:#f4f6f3;
  padding:clamp(40px,6vw,72px) 0;
}

.technical-title{
  margin:0 0 20px;

  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(20px,3vw,30px);
  font-weight:800;
  letter-spacing:-.01em;

  color:#03262c;
}

.technical-card{
  background:#fff;

  border:1.5px solid #e2e8e0;
  border-radius:16px;

  overflow:hidden;

  box-shadow:0 2px 12px rgba(3,38,44,.06);
}

.technical-tabs-head{
  padding:0 20px;
}

.technical-panels{
  padding:0 20px 24px;
}

/*================ FAQ ================*/

.faq-section{
  background:#fff;
  padding:clamp(50px,6vw,80px) 0;
}

.faq-section-head{
  text-align:center;
  margin-bottom:30px;
}


/*================ RELATED PRODUCTS ================*/

.related-section{
  position:relative;
  overflow:hidden;

  background:#f4f6f3;

  padding:clamp(44px,6vw,72px) 0;
}

.related-pattern{
  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(rgba(15,116,4,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,205,18,.03) 1px,transparent 1px);

  background-size:48px 48px;
}

.related-eyebrow{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:6px;

  font-family:"Barlow Condensed",sans-serif;
  font-size:10px;
  font-weight:700;

  letter-spacing:.2em;
  text-transform:uppercase;

  color:#0f7404;
}

.related-line{
  display:inline-block;

  width:28px;
  height:3px;

  background:#60cd12;

  border-radius:2px;
}



/*---------- related product image ----------*/

.rel-card-img{
  position:relative;
  overflow:hidden;
}

.rel-card-image{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:transform .35s ease;
}

.rel-image-placeholder{
  position:absolute;
  inset:0;

  display:none;
  align-items:center;
  justify-content:center;

  font-family:"Barlow Condensed",sans-serif;
  font-size:14px;
  font-weight:700;

  color:#6b8268;
}

.rel-image-placeholder.active{
  display:flex;
}