/* =========================================================
   AR TRADE SPHERE - V12 responsive polish
   Related carousel containment, catalogue text safety,
   mobile icon alignment, larger header logo and 4-up home grid.
   ========================================================= */

/* ---------- Header: larger logo + balanced enquiry alignment ---------- */
.navbar>.container.nav-glass {
  align-items: center
}

.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 118px;
  margin-right: 18px
}

.navbar-brand img {
  width: 104px !important;
  height: 80px !important;
  object-fit: contain
}

.btn-header {
  align-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 46px;
  margin: 0 0 0 18px !important;
  line-height: 1
}

.site-header.scrolled .navbar-brand img {
  width: 98px !important;
  height: 82px !important
}

/* ---------- Clean inner title: no CTA, gold accent below title ---------- */
.inner-title-row {
  display: block !important
}

.inner-title-row h1 {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: 16px;
  overflow-wrap: anywhere
}

.inner-title-row h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2b82e, #ffd66d)
}

.inner-title-btn {
  display: none !important
}

/* ---------- Home: compact catalogue heading spacing ---------- */
.home-page .products-flow-divider--first {
  margin-bottom: 16px;
}

/* ---------- Home: uniform 4 products per row on desktop ---------- */
.home-page .products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 330px !important;
  gap: 16px !important
}

.home-page .product-card--wide,
.home-page .product-card--tall,
.home-page .product-card--banner {
  grid-column: auto !important;
  grid-row: auto !important
}

.home-page .product-info {
  padding: 20px 17px 16px
}

.home-page .product-info h3,
.home-page .product-card--wide .product-info h3,
.home-page .product-card--banner .product-info h3 {
  font-size: 1.02rem;
  line-height: 1.22
}

.home-page .product-read-more {
  font-size: .68rem !important
}

/* ---------- Catalogue Coverage: safe title layout, four equal columns ---------- */
.product-image-grid-v11 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important
}

.product-image-card-v11 {
  min-width: 0
}

.product-image-card-v11 .product-image-card-media {
  height: 265px !important
}

.product-card-label {
  left: 16px !important;
  right: 16px !important;
  bottom: 15px !important;
  display: flex !important;
  min-height: 74px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none
}

.product-card-label>span {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  font-size: .68rem !important;
  line-height: 1.2 !important;
  letter-spacing: .055em !important
}

.product-card-label h3,
.product-image-card-v11 .product-image-card-media h3 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: -webkit-box;
  margin: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.24 !important;
  text-wrap: balance;
  overflow-wrap: anywhere
}

.product-image-card-v11 .product-image-card-foot {
  min-height: 62px !important;
  gap: 10px;
  padding: 11px 13px 12px !important
}

.product-image-card-v11 .product-image-card-foot>span {
  min-width: 0;
  font-size: .63rem !important;
  line-height: 1.25;
  overflow-wrap: anywhere
}

.product-image-card-v11 .product-image-card-foot button {
  flex: 0 0 auto;
  padding: 8px 12px !important;
  font-size: .68rem !important
}

/* ---------- Related Categories: keep every slide inside the section ---------- */
.related-products-section {
  overflow: hidden !important
}

.related-products-section>.container {
  overflow: hidden
}

.related-products-swiper {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 30px !important;
  padding: 2px 2px 44px !important;
  overflow: hidden !important;
  box-sizing: border-box
}

.related-products-swiper .swiper-wrapper {
  box-sizing: border-box;
  max-width: none !important
}

.related-products-swiper .swiper-slide {
  min-width: 0 !important;
  max-width: none !important;
  height: auto
}

.related-products-swiper .related-product-card {
  width: 100%;
  height: 100%;
  min-width: 0
}

.related-products-swiper .related-product-media {
  width: 100%;
  height: 220px
}

.related-products-swiper .related-product-card h3 {
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere
}

.related-products-swiper .related-product-card>div>a {
  font-size: .82rem
}

.related-carousel-controls {
  align-self: center
}

/* ---------- Mobile icon-box alignment ---------- */
@media (max-width:767.98px) {

  /* Vertically stacked icon cards should read centered. */
  .about-stat-card,
  .purpose-card,
  .about-process-card,
  .product-support-card,
  .products-page-summary>div {
    text-align: center !important;
  }

  .about-stat-card>span,
  .purpose-card>span,
  .product-support-card>span {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-process-card>span {
    margin-left: auto !important;
    margin-right: auto !important
  }

  /* Keep icon-left/text-right components intentionally left aligned. */
  .trust-item,
  .global-stat,
  .about-strength-card,
  .contact-info-item,
  .product-source-note,
  .benefit-item {
    text-align: left !important;
  }
}

/* ---------- Responsive header / home products ---------- */
@media (max-width:1199.98px) {
  .navbar-brand {
    min-width: 104px;
    margin-right: 10px
  }

  .navbar-brand img {
    width: 94px !important;
    height: 66px !important
  }

  .site-header.scrolled .navbar-brand img {
    width: 90px !important;
    height: 62px !important
  }

  .btn-header {
    min-width: 126px;
    min-height: 44px;
    margin-left: 10px !important
  }

  .home-page .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 238px !important;
    gap: 13px !important
  }

  .home-page .product-info h3,
  .home-page .product-card--wide .product-info h3,
  .home-page .product-card--banner .product-info h3 {
    font-size: .94rem
  }

  .product-image-card-v11 .product-image-card-media {
    height: 240px !important
  }
}

@media (max-width:991.98px) {
  .navbar-brand img {
    width: 78px !important;
    height: 58px !important
  }

  .home-page .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 225px !important
  }

  .product-image-grid-v11 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important
  }

  .product-image-card-v11 .product-image-card-media {
    height: 245px !important
  }

  .related-products-swiper .related-product-media {
    height: 205px
  }
}

@media (max-width:767.98px) {
  .inner-title-section {
    padding-bottom: 40px !important
  }

  .inner-title-row h1 {
    padding-bottom: 13px;
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05
  }

  .inner-title-row h1::after {
    width: 52px;
    height: 3px
  }

  .home-page .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 220px !important;
    gap: 11px !important
  }

  .home-page .product-info {
    padding: 15px 13px 13px
  }

  .home-page .product-info h3,
  .home-page .product-card--wide .product-info h3,
  .home-page .product-card--banner .product-info h3 {
    font-size: .91rem !important
  }

  .product-image-grid-v11 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important
  }

  .product-image-card-v11 .product-image-card-media {
    height: 220px !important
  }

  .product-card-label {
    left: 13px !important;
    right: 13px !important;
    bottom: 13px !important;
    min-height: 68px
  }

  .product-card-label h3,
  .product-image-card-v11 .product-image-card-media h3 {
    font-size: .91rem !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 3
  }

  .product-card-label>span {
    font-size: .61rem !important
  }

  .product-image-card-v11 .product-image-card-foot {
    min-height: 58px !important;
    padding: 9px 10px !important
  }

  .product-image-card-v11 .product-image-card-foot>span {
    font-size: .57rem !important
  }

  .product-image-card-v11 .product-image-card-foot button {
    font-size: .62rem !important;
    padding: 7px 10px !important
  }

  .related-products-section .products-heading-row {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px
  }

  .related-carousel-controls {
    margin: 0 !important;
    align-self: flex-end
  }

  .related-products-swiper {
    margin-top: 22px !important
  }
}

@media (max-width:575.98px) {
  .navbar-brand img {
    width: 74px !important;
    height: 54px !important
  }

  .home-page .products-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 250px !important;
    gap: 12px !important
  }

  .home-page .product-info h3,
  .home-page .product-card--wide .product-info h3,
  .home-page .product-card--banner .product-info h3 {
    font-size: 1rem !important
  }

  .product-image-grid-v11 {
    grid-template-columns: 1fr !important;
    gap: 14px !important
  }

  .product-image-card-v11 .product-image-card-media {
    height: 255px !important
  }

  .product-card-label {
    min-height: 72px
  }

  .product-card-label h3,
  .product-image-card-v11 .product-image-card-media h3 {
    font-size: 1rem !important;
    -webkit-line-clamp: 3
  }

  .product-card-label>span {
    font-size: .64rem !important
  }

  .related-products-swiper .related-product-media {
    height: 230px
  }

  .related-products-swiper .related-product-card h3 {
    font-size: .94rem
  }
}

@media (max-width:399.98px) {
  .home-page .products-grid {
    grid-auto-rows: 235px !important
  }

  .product-image-card-v11 .product-image-card-media {
    height: 235px !important
  }

  .product-image-card-v11 .product-image-card-foot>span {
    display: block !important;
    max-width: 58%
  }
}

/* ---------- Floating enquiry must remain visible above old v7 rule ---------- */
.floating-enquiry.floating-enquiry-gold {
  display: flex !important
}

/* Desktop header columns keep the navigation and CTA optically centered. */
@media (min-width:992px) {
  .navbar>.container.nav-glass {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) 150px;
    align-items: center;
  }

  .navbar>.container.nav-glass>.navbar-brand {
    justify-self: start
  }

  .navbar>.container.nav-glass>.navbar-collapse {
    justify-self: center;
    width: 100%
  }

  .navbar>.container.nav-glass>.btn-header {
    justify-self: center;
    margin: 0 !important
  }

}

@media (min-width:992px) and (max-width:1199.98px) {
  .navbar>.container.nav-glass {
    grid-template-columns: 122px minmax(0, 1fr) 126px
  }
}






@media (max-width: 740.98px) {
 .btn-header {
  display: none !important;
  }
    .home-page .products-grid {
        grid-auto-rows: 250px !important;
    }
    .inner-title-row h1 {
        padding-bottom: 13px;
        font-size: clamp(2rem, 6vw, 3rem) !important;
        line-height: 1.05;
    }



    
}
/* ---------- Optional per-product catalogue details ---------- */
.product-image-card-detail {
  min-height: 68px;
  padding: 12px 14px 10px;
  color: #5f7282;
  background: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.48;
  border-top: 1px solid rgba(7, 52, 95, .06);
}


.product-image-card-foot h3{
    font-size: 0.95rem;
        font-weight: 700;
}

@media (max-width: 767.98px) {
  .product-image-card-detail {
    min-height: 0;
    padding: 11px 12px 9px;
    font-size: .7rem;
  }
}