/* =========================================================
   INDIVIDUAL PRODUCT PAGES
   ========================================================= */


/* =========================================================
   PRODUCT TITLE
   ========================================================= */
.product-title-section {
  width:100%;
  box-sizing:border-box;

  padding:24px 70px 10px 70px;

  text-align:center;
}

.product-title {
  margin:0 auto;
  max-width:1200px;

  font-size:clamp(1.65rem, 2.5vw, 2.9rem);
  line-height:1.1;

  color:var(--dark);

  text-align:center;
  white-space:normal;
}

/* =========================================================
   PRODUCT SECTION TITLES
   ---------------------------------------------------------
   Product page section headings use Belar orange.
   Eyebrow headings are not used on product pages.
   ========================================================= */

.product-description > h2,
.product-features-section > h2,
.product-specifications > h2,
.product-options > h2,
.product-downloads > h2 {
  color: var(--orange);
}

/* =========================================================
   PRODUCT FRONT PANEL
   ========================================================= */

.product-front-panel {
  width:100%;
  box-sizing:border-box;

  margin:10px auto 50px;

  padding-left:70px;
  padding-right:40px;
}

.product-front-panel img {
  display:block;

  width:100%;
  max-width:1200px;
  height:auto;

  margin:0 auto;

  object-fit:contain;
}

/* =========================================================
   PRODUCT PAGE SECTION SPACING
   ---------------------------------------------------------
   Reduce the large vertical gaps between Overview,
   Features, Specifications, Options, and Downloads.
   ========================================================= */

.product-description,
.product-features-section,
.product-specifications,
.product-options,
.product-downloads {
  padding-top: 45px;
  padding-bottom: 45px;
}


/* Smaller screens */

@media (max-width: 760px) {

  .product-description,
  .product-features-section,
  .product-specifications,
  .product-options,
  .product-downloads {
    padding-top: 40px;
    padding-bottom: 40px;
  }

}

/* =========================================================
   PRODUCT DESCRIPTION / OVERVIEW
   ========================================================= */

.product-description {
  width: 100%;
}

.product-description p {
  width: 100%;
  max-width: 1400px;

  color: var(--muted);
  line-height: 1.75;
}


/* =========================================================
   PRODUCT FEATURES
   ========================================================= */

.product-features-section {
  width: 100%;
}

.product-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 70px;
  row-gap: 14px;

  width: 100%;
  margin: 28px 0 0;
  padding: 0;

  list-style: none;
}

.product-feature-list li {
  position: relative;

  margin: 0;
  padding-left: 30px;

  font-size: 1.15rem;
  line-height: 1.5;
}

.product-feature-list li::before {
  content: "•";

  position: absolute;
  left: 0;
  top: 0;

  color: var(--orange);

  font-size: 1.35rem;
  line-height: 1.35;
}

/* =========================================================
   FEATURES - SMALLER SCREENS
   ========================================================= */

@media (max-width: 900px) {

  .product-feature-list {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

}


/* =========================================================
   PRODUCT SPECIFICATIONS
   ========================================================= */

.product-specifications {
  width: 100%;
}

.spec-section {
  margin-top: 36px;
}

.spec-section h3 {
  margin: 0;
  padding: 10px 14px;

  font-size: 1.15rem;
  font-weight: 700;

  border-left: 5px solid #ff7a00;

  background: #f4f4f4;
}

.spec-subtitle {
  margin: 8px 0 12px 19px;

  font-size: 0.95rem;
  font-style: italic;

  color: #666;
}

.spec-list {
  margin: 0;
}

.spec-list > div {
  display: grid;

  grid-template-columns:
    minmax(240px, 40%)
    1fr;

  gap: 25px;

  padding: 10px 14px;

  border-bottom: 1px solid #ddd;
}

.spec-list dt {
  font-weight: 600;
}

.spec-list dd {
  margin: 0;
}

.spec-text {
  margin: 0;

  padding: 14px;

  line-height: 1.6;
}

.spec-note {
  margin-top: 35px;

  font-size: 0.9rem;
  font-style: italic;

  color: #666;
}


/* =========================================================
   PRODUCT OPTIONS
   ========================================================= */

.product-options {
  width: 100%;
}

.product-option-grid {
  display: grid;

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

  gap: 22px;

  margin-top: 36px;
}

.product-option-card {
  padding: 30px;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: 14px;
}

.product-option-card h3 {
  margin-top: 0;
}

.product-option-card p {
  color: var(--muted);
  line-height: 1.6;
}


/* =========================================================
   PRODUCT DOWNLOADS
   ========================================================= */

.product-downloads {
  background: #f4f6f8;
}

.product-download-grid {
  display: grid;

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

  gap: 22px;

  margin-top: 36px;
}

.product-download-card {
  padding: 30px;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: 14px;
}

.product-download-card h3 {
  margin-top: 0;
}

.product-download-card p {
  min-height: 75px;

  color: var(--muted);
  line-height: 1.6;
}

.product-download-card a {
  color: var(--orange);

  font-weight: 750;
  text-decoration: none;
}

.product-download-card a:hover {
  text-decoration: underline;
}


/* =========================================================
   PRODUCT PAGE TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .product-option-grid {
    grid-template-columns: 1fr;
  }

  .product-download-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   TABLET / COLLAPSED NAVIGATION
   ========================================================= */

   
 
/* =========================================================
   MOBILE PRODUCT PAGE
   ========================================================= */

  @media(max-width:760px) {

  .product-title-section {
    padding:24px 24px 10px;
  }

  .product-front-panel {
    padding-left:24px;
    padding-right:24px;
  }

  .product-title {
    font-size:clamp(1.7rem, 6vw, 2.5rem);
    white-space:normal;
  }

} 

/* Grouped feature layout */

.feature-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 80px;
}

.feature-group h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
}

.feature-group ul {
  margin: 0;
  padding-left: 24px;
}

.feature-group li {
  margin-bottom: 6px;
  line-height: 1.4;
}

.feature-group li::marker {
  color: #ff7900;
}

.feature-single p {
  margin: 0;
  font-size: 1rem;
}

@media (max-width: 800px) {
  .feature-groups {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =========================================================
   TALL / SQUARE PRODUCT IMAGES
   ========================================================= */

.product-front-panel-antenna {
  padding-top: 20px;
  padding-bottom: 30px;
}

.product-front-panel-antenna img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}