/* ICON SITE: Consolidated Additional CSS (WP.com safe)
   Cleaned for duplicates, conflicts, and invalid values
*/

/* =========================
   Tokens
   ========================= */

:root{
  --icon-red: #b40000;
  --icon-red-dark: #b30000;
  --icon-charcoal: #1f1f1f;
  --icon-black: #111;
  --icon-white: #fff;

  --icon-border: rgba(0,0,0,0.14);
  --icon-border-strong: rgba(0,0,0,0.18);
  --icon-soft: rgba(0,0,0,0.02);

  --icon-radius-8: 8px;
  --icon-radius-10: 10px;
  --icon-radius-14: 14px;
  --icon-radius-16: 16px;

  --icon-shadow-panel: 0 18px 60px rgba(0,0,0,0.35);
  --icon-shadow-card: 0 14px 40px rgba(0,0,0,0.08);
}

/* =========================
   Force ALL flaticon-* icons to use the default flaticon font
   ========================= */

[class^="flaticon-"]::before,
[class*=" flaticon-"]::before,
[class^="flaticon-"]::after,
[class*=" flaticon-"]::after{
  font-family: flaticondefault !important;
}

/* =========================
   Sticky Header + Logo (Mobile + Tablet Optimized)
   Keeps your desktop behavior, fixes spacing on smaller screens
   ========================= */

/* Base (desktop defaults) */
.header-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background: var(--icon-white);
}

.header-wrapper .navbar-brand.logo,
.header-navigation-area .navbar-brand.logo{
  align-self: center;
  padding: 0 !important;
  line-height: 1 !important;
}

#logo-image{
  height: auto !important;
  width: auto !important;
  max-height: 90px !important;
}

/* Keep the header row stable */
.header-wrapper .col-md-12.d-flex.align-items-center.justify-content-between{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* Theme fixed header wrapper: keep it stable */
.header-navigation-area.fixed,
.header-navigation-area.fixed .col-md-12.d-flex.align-items-center.justify-content-between{
  height: auto !important;
  min-height: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
}

.header-wrapper .header-navigation-area.fixed{
  position: static !important;
}

/* Body offset for fixed header (desktop) */
body{ padding-top: 250px; }

/* Admin bar */
body.admin-bar .header-wrapper{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .header-wrapper{ top: 46px; }
}

/* =========================
   Tablet (<= 991px)
   Reduce wasted vertical space and prevent huge top padding
   ========================= */

@media (max-width: 991px){

  /* Smaller body offset so hero content isn't pushed way down */
  body{ padding-top: 165px; }

  /* Slightly smaller logo for tablet */
  #logo-image{ max-height: 72px !important; }

  /* Tighten fixed header padding */
  .header-navigation-area.fixed,
  .header-navigation-area.fixed .col-md-12.d-flex.align-items-center.justify-content-between{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* If topbar exists, keep it from adding height */
  .topbar-info-area{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .topbar-info-area h6,
  .topbar-info-area i{
    display: none !important;
  }

  /* Prevent items from wrapping into extra rows */
  .header-wrapper .col-md-12.d-flex.align-items-center.justify-content-between{
    flex-wrap: nowrap !important;
    gap: 10px;
  }
}

/* =========================
   Mobile (<= 680px)
   Keep the header compact and readable
   ========================= */

@media (max-width: 680px){

  body{ padding-top: 138px; }

  #logo-image{ max-height: 58px !important; }

  .header-navigation-area.fixed,
  .header-navigation-area.fixed .col-md-12.d-flex.align-items-center.justify-content-between{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .header-wrapper .col-md-12.d-flex.align-items-center.justify-content-between{
    gap: 8px;
  }
}

/* =========================
   Small phones (<= 420px)
   ========================= */

@media (max-width: 420px){

  body{ padding-top: 128px; }

  #logo-image{ max-height: 54px !important; }

  .header-navigation-area.fixed,
  .header-navigation-area.fixed .col-md-12.d-flex.align-items-center.justify-content-between{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* =========================
   Header: desktop only tweaks + scroll shrink (unchanged)
   ========================= */

@media (min-width: 992px){

  .topbar-info-area h6{ display: none !important; }
  .topbar-info-area > div{ margin-right: 14px !important; }
  .topbar-info-area i{ display: none !important; }

  .header-wrapper:not(.is-scrolled) #logo-image{
    max-height: 90px !important;
  }

  .header-wrapper.is-scrolled #logo-image{
    max-height: 60px !important;
  }

  .header-wrapper.is-scrolled .header-middle{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .header-wrapper.is-scrolled .topbar-info-area .d-flex.align-items-center{
    margin-right: 10px !important;
  }

  .header-wrapper.is-scrolled .topbar-info-area a{
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    line-height: 1 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Smooth header shrink */
  #logo-image{
    transition:
      max-height .85s cubic-bezier(.4,0,.2,1),
      transform .85s cubic-bezier(.4,0,.2,1);
  }

  .header-middle,
  .header-navigation-area,
  .main-menu nav > ul > li > a{
    transition:
      padding .35s cubic-bezier(.4,0,.2,1),
      margin .35s cubic-bezier(.4,0,.2,1),
      line-height .35s cubic-bezier(.4,0,.2,1);
  }

  .header-wrapper.is-scrolled .header-navigation-area.three-layers-header{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}
/* =========================
   Footer (ICON Dark Charcoal)
   ========================= */

.footer,
.footer-main-area,
.footer-bottom-area,
.footer-parent-brand{
  background: var(--icon-charcoal) !important;
}

.footer-main-area{
  background-image: none !important;
}

.footer-parent-brand{
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0 24px;
}

.footer-parent-brand::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
}

.footer-parent-brand-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.footer-parent-brand img{
  width: 170px;
  height: auto;
}

.footer-parent-brand p{
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  margin: 0;
}

.footer-parent-brand a{
  color: var(--icon-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer widget content styling */
.footer .icon-footer-col{ max-width: 420px; }

.footer .icon-footer-title{
  margin: 0 0 12px 0;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,25,25,0.75);
}

.footer .icon-footer-text{
  margin: 10px 0 16px 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.55;
  font-size: 14px;
}

.footer .icon-footer-logo{
  width: 18px;
  height: auto;
  display: block;
}

.footer .icon-footer-links{
  list-style: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.footer .icon-footer-links li{
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
}

.footer .icon-footer-links a{
  display: inline-block !important;
  width: auto !important;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}

.footer .icon-footer-links a:hover{
  color: rgba(255,255,255,1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer .icon-footer-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.footer .icon-footer-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--icon-radius-10);
  background: var(--icon-red);
  color: var(--icon-white);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

.footer .icon-footer-btn:hover{ filter: brightness(0.95); }

.footer .icon-footer-btn--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
}

.footer .icon-footer-contact-line{
  display: block;
  margin: 0 0 10px 0;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
}

.footer .icon-footer-contact-line:hover{
  color: rgba(255,255,255,1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer .icon-footer-muted{ color: rgba(255,255,255,0.60); }

/* Hide preloader */
.preloader{ display: none !important; }

/* =========================
   Product page hero banner
   ========================= */

.page-title-section.icon-hero{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Parallax (disabled on smaller screens below) */
  background-attachment: fixed;

  min-height: clamp(260px, 34vh, 520px);
  display: flex;
  align-items: center;

  padding: clamp(64px, 8vh, 120px) 0;
}

/* Single overlay definition (removed duplicate conflicting ::before) */
.page-title-section.icon-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 95%,
    rgba(0,0,0,0.50) 100%
  );
  pointer-events: none;
}

.page-title-section.icon-hero .container{
  position: relative;
  z-index: 2;
}

.page-title-section.icon-hero h2{
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.page-title-section.icon-hero .breadcrumb-item,
.page-title-section.icon-hero .breadcrumb-item a{
  text-shadow: 0 8px 24px rgba(0,0,0,0.55);
}

@media (max-width: 991px){
  .page-title-section.icon-hero{
    background-attachment: scroll;
    min-height: clamp(220px, 28vh, 420px);
    padding: clamp(56px, 7vh, 96px) 0;
  }
}

/* =========================
   WooCommerce: remove unwanted UI
   ========================= */

.modal-content .quantity{ display: none !important; }
.modal-content .cart{ margin-top: 10px; }

.product-wishlist,
.wishlist-icon,
.yith-wcwl-add-to-wishlist,
.yith-wcwl-add-to-wishlist-button,
.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse{
  display: none !important;
}

.ti-shopping-cart,
a.button i.ti-shopping-cart,
.single_add_to_cart_button i.ti-shopping-cart,
.product_type_external i.ti-shopping-cart{
  display: none !important;
}

.add_to_cart_inline,
p.product.woocommerce{
  display: none !important;
}

a.button.product_type_external{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================
   Quick View Modal: layering + sticky overlap (theme modal)
   ========================= */

.modal-backdrop,
.modal-backdrop.show{
  z-index: 99990 !important;
}

.grid__quick__view__modal.modal.show,
.modal.modal.show{
  z-index: 100000 !important;
}

.grid__quick__view__modal .modal-dialog,
.grid__quick__view__modal .modal-content,
.modal.show .modal-dialog,
.modal.show .modal-content{
  z-index: 100001 !important;
  position: relative !important;
  pointer-events: auto !important;
}

.modal-backdrop{ pointer-events: none !important; }

/* If your fixed header overlaps quick view, adjust this */
.grid__quick__view__modal.modal.show{ padding-top: 140px !important; }

/* =========================
   Product Spec Tables
   ========================= */

.icon-spec-table{ margin-top: 40px; }

.spec-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.spec-table th,
.spec-table td{
  padding: 14px 16px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}

.spec-section{
  background: #231f20;
  color: var(--icon-white);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.spec-table tr:hover td{ background: #eaeaea; }

/* =========================
   RFQ Button
   ========================= */

.icon-rfq-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: var(--icon-radius-8);
  border: 1px solid transparent;
  background: var(--icon-red);
  color: var(--icon-white);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.icon-rfq-btn:hover{ filter: brightness(0.95); }

/* =========================
   RFQ Modal (custom)
   ========================= */

.icon-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
}

.icon-modal.is-open{ display: flex; }

.icon-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
}

.icon-modal__panel{
  position: relative;
  width: calc(100% - 32px);
  max-width: 860px;
  margin: 12px auto;
  background: var(--icon-white);
  border-radius: var(--icon-radius-14);
  box-shadow: var(--icon-shadow-panel);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}

.icon-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}

.icon-modal__header{
  padding: 20px 22px 10px 22px;
  border-bottom: 1px solid #eee;
  flex: 0 0 auto;
}

.icon-modal__header h3{ margin: 0 0 6px 0; }
.icon-modal__header p{
  margin: 0 0 6px 0;
  opacity: 0.85;
}

.icon-modal__body{
  padding: 18px 22px 22px 22px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  overscroll-behavior: contain;
}

/* =========================
   RFQ Page + Form (CF7 inside .icon-rfq)
   This replaces and consolidates the multiple competing RFQ blocks
   ========================= */

.icon-rfq{
  max-width: 980px;
  margin: 0 auto;
}

.icon-rfq__header{ margin-bottom: 14px; }

.icon-rfq__title{
  margin: 0 0 6px 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
}

.icon-rfq__sub{
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.85;
}

/* Remove theme spacing from CF7 wrappers inside our RFQ block */
.icon-rfq .wpcf7 p,
.icon-rfq-grid p{
  margin: 0 !important;
  padding: 0 !important;
}

.icon-rfq .wpcf7 br,
.icon-rfq-grid br{
  display: none !important;
}

/* Grid */
.icon-rfq-grid{
  display: grid;
  gap: 12px;
}

.icon-rfq-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.icon-rfq-row--full{ grid-template-columns: 1fr; }

.icon-field label{
  display: block;
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

.icon-req{ color: var(--icon-red); }

/* Inputs */
.icon-rfq input[type="text"],
.icon-rfq input[type="email"],
.icon-rfq input[type="tel"],
.icon-rfq input[type="date"],
.icon-rfq input[type="number"],
.icon-rfq select,
.icon-rfq textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--icon-border);
  border-radius: var(--icon-radius-10);
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.2;
  background: var(--icon-white);
  margin: 0 !important;
}

.icon-rfq select{
  height: 44px;
  padding: 10px 12px;
  appearance: auto;
}

.icon-rfq textarea{
  min-height: 120px;
  resize: vertical;
}

/* Checkbox group */
.icon-check-title{
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 6px;
}

/* Default: allow wrap cleanly */
.icon-rfq .wpcf7-checkbox{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 !important;
  padding: 0 !important;
}

.icon-rfq .wpcf7-list-item{
  margin: 0 !important;
  padding: 0 !important;
}

.icon-rfq .wpcf7-list-item label{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: var(--icon-soft);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.icon-rfq .wpcf7-list-item input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Field errors */
.icon-field-error{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  color: var(--icon-red);
}

[aria-invalid="true"]{ border-color: var(--icon-red) !important; }

/* Estimated LF inline hint */
.icon-inline__hint{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.8;
}

/* Submit */
.icon-rfq-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.icon-rfq .wpcf7-submit{
  width: fit-content;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  background: var(--icon-red);
  color: var(--icon-white);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.icon-rfq .wpcf7-submit:hover{ opacity: 0.95; }

.icon-rfq-fineprint{
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.85;
}

/* =========================
   RFQ Success Module (inline card)
   ========================= */

.icon-rfq-success{
  display: none;
  margin: 14px 0 6px 0;
}

.icon-rfq-success.is-visible{ display: block; }

.icon-rfq-success__card{
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--icon-radius-16);
  border: 1px solid rgba(0,0,0,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,250,0.98) 100%);
  box-shadow: var(--icon-shadow-card);
  overflow: hidden;
}

.icon-rfq-success__card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--icon-red);
  opacity: 0.95;
}

.icon-rfq-success__card p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}

.icon-rfq-success__left{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.icon-rfq-success__mark{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--icon-charcoal);
  color: var(--icon-white);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.icon-rfq-success__mark svg{
  display: block;
  width: 22px;
  height: 22px;
}

.icon-rfq-success__title{
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 4px 0;
  color: var(--icon-black);
}

.icon-rfq-success__msg{
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 10px 0;
  color: rgba(0,0,0,0.72);
}

.icon-rfq-success__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 0;
}

.icon-rfq-success__pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: rgba(0,0,0,0.70);
  opacity: 0.9;
}

.icon-rfq-success__next{
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.icon-rfq-success__next-title{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: 0.65;
  margin: 0 0 6px 0;
}

.icon-rfq-success__next-list{
  margin: 0;
  padding-left: 16px;
}

.icon-rfq-success__next-list li{ margin: 0 0 6px 0; }
.icon-rfq-success__next-list li:last-child{ margin-bottom: 0; }

@media (max-width: 680px){
  .icon-rfq-success__card{
    grid-template-columns: 48px 1fr;
    padding: 12px 14px;
  }
  .icon-rfq-success__mark{
    width: 40px;
    height: 40px;
  }
}

/* =========================
   Calculator Modal (single, deduped)
   ========================= */

.icon-calc-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  z-index: 99999;
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.icon-calc-modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

html.icon-calc-open,
body.icon-calc-open{
  overflow: hidden;
}

.icon-calc-panel{
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--icon-white);
  border-radius: var(--icon-radius-14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.icon-calc-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.icon-calc-title{
  font-size: 15px;
  font-weight: 900;
}

.icon-calc-close{
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.icon-calc-body{
  padding: 12px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  overscroll-behavior: contain;
}

.icon-calc-sub{
  margin: 0 0 12px 0;
  opacity: 0.75;
}

.icon-calc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-top: 10px;
}

.icon-calc-grid label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
}

.icon-calc-grid input,
.icon-calc-grid select{
  border: 1px solid var(--icon-border-strong);
  border-radius: var(--icon-radius-10);
  padding: 0 12px;
  height: 44px;
  font-size: 14px;
}

.icon-calc-results{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.icon-calc-result-line{ font-size: 15px; }

.icon-calc-help{
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: 0.9;
}

.icon-calc-footer{
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.icon-calc-apply,
.icon-calc-cancel{
  height: 44px;
  padding: 0 14px;
  border-radius: var(--icon-radius-10);
  border: 1px solid var(--icon-border-strong);
  background: var(--icon-white);
  cursor: pointer;
  font-weight: 900;
}

.icon-calc-apply{
  background: var(--icon-red-dark);
  border-color: var(--icon-red-dark);
  color: var(--icon-white);
}

@media (max-width: 760px){
  .icon-calc-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .icon-calc-modal{ padding: 14px; }
  .icon-calc-panel{ max-height: calc(100vh - 28px); }
}

/* =========================
   ICON Success Modal (hardened)
   ========================= */

#iconSuccessModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: none;
  z-index: 2147483647;
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#iconSuccessModal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

html.icon-success-open,
body.icon-success-open{
  overflow: hidden !important;
}

#iconSuccessModal .icon-success-panel{
  position: relative;
  width: min(720px, 100%);
  background: var(--icon-white);
  border-radius: var(--icon-radius-16);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}

#iconSuccessModal .icon-success-close{
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

#iconSuccessModal .icon-success-close:hover{ opacity: 1; }

#iconSuccessModal .icon-success-body{
  padding: 18px 18px 16px 18px;
}

#iconSuccessModal .icon-success-actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

#iconSuccessModal .icon-success-ok{
  height: 44px;
  padding: 0 14px;
  border-radius: var(--icon-radius-10);
  border: 1px solid var(--icon-border-strong);
  background: var(--icon-black);
  color: var(--icon-white);
  cursor: pointer;
  font-weight: 900;
}

#iconSuccessModal .icon-success-ok:hover{ opacity: 0.92; }

/* ===============================
   POPUP SCROLL FIX (RFQ + Calculator)
   Uses visibility/opacity so it stays CLOSED unless .is-open exists
   Also fixes non-clickable buttons
   =============================== */

/* Base modal wrappers (exist in DOM but hidden unless open) */
.icon-modal,
.icon-calc-modal{
  /* If something forces display:flex, this still keeps it hidden */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /* Prevent accidental “overlay” scroll/click capture while hidden */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 16px !important;
}

/* Open state */
.icon-modal.is-open,
.icon-calc-modal.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* RFQ overlay must not intercept clicks */
.icon-modal__overlay{
  pointer-events: none !important;
}

/* RFQ panel scroll + clickability */
.icon-modal__panel{
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;

  max-height: calc(100vh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.icon-modal__body{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
  overscroll-behavior: contain;
}

/* Calculator panel scroll + clickability */
.icon-calc-panel{
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;

  max-height: calc(100vh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.icon-calc-body{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
  overscroll-behavior: contain;
}

/* Safety: keep clicks inside panels working */
.icon-modal__panel *,
.icon-calc-panel *{
  pointer-events: auto;
}
/* ===============================
   ICON RFQ: Inline Calculator + Optional Modals
   Cleaned, deduped, and safe defaults
   =============================== */

/* --------------------------------
   INLINE CALCULATOR PANEL
   Stays closed unless JS removes [hidden]
   -------------------------------- */

[data-icon-calc-panel][hidden]{
  display: none !important;
}

[data-icon-calc-panel]{
  display: block;
}

/* --------------------------------
   OPTIONAL MODAL SCROLL FIX
   Only applies if you actually use .icon-modal / .icon-calc-modal wrappers
   -------------------------------- */

.icon-modal,
.icon-calc-modal{
  display: none;
}

.icon-modal.is-open,
.icon-calc-modal.is-open{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 16px !important;
}

/* Overlay never captures clicks */
.icon-modal__overlay{
  pointer-events: none !important;
}

/* Modal panels: scroll container pattern */
.icon-modal__panel,
.icon-calc-modal .icon-calc-panel{
  position: relative !important;
  z-index: 2 !important;
  max-height: calc(100vh - 32px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Modal bodies scroll, not the page */
.icon-modal__body,
.icon-calc-modal .icon-calc-body{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  min-height: 0 !important;
  overscroll-behavior: contain;
}

/* Safety: ensure modal contents remain clickable */
.icon-modal__panel *,
.icon-calc-modal .icon-calc-panel *{
  pointer-events: auto;
}

/* --------------------------------
   RFQ inline calculator button row
   -------------------------------- */

.icon-calc-inline__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.icon-calc-mini{
  font-size: 14px;
  opacity: 0.9;
}

.icon-calc-btn{
  border: 0;
  border-radius: var(--icon-radius-10);
  padding: 10px 12px;
  background: var(--icon-black);
  color: var(--icon-white);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}

.icon-calc-btn:hover{
  opacity: 0.92;
}

@media (max-width: 820px){
  .icon-calc-inline__top{
    margin-top: 0;
    align-items: flex-start;
    flex-direction: column;
  }
}

/* --------------------------------
   IMPORTANT: Do NOT force inline panels open
   Remove any old rule like:
   .icon-calc-panel{ display:flex !important; }
   -------------------------------- */

/* ==========================================
   ICON SITE: Mobile + Tablet Optimization Patch
   Paste this at the VERY BOTTOM of Additional CSS
   ========================================== */

/* ------------------------------------------
   1) Header spacing: remove the 250px penalty on smaller screens
   ------------------------------------------ */

/* Desktop keeps your existing padding-top unless you change it */
body{
  padding-top: 250px;
}

/* Tablet: reduce padding so content is not pushed down forever */
@media (max-width: 991px){
  body{
    padding-top: 170px;
  }

  #logo-image{
    max-height: 70px !important;
  }

  /* Reduce fixed header padding on tablet */
  .header-navigation-area.fixed,
  .header-navigation-area.fixed .col-md-12.d-flex.align-items-center.justify-content-between{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* Mobile: tighter padding, tighter logo */
@media (max-width: 680px){
  body{
    padding-top: 140px;
  }

  #logo-image{
    max-height: 58px !important;
  }

  .header-navigation-area.fixed,
  .header-navigation-area.fixed .col-md-12.d-flex.align-items-center.justify-content-between{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* Small phones */
@media (max-width: 420px){
  body{
    padding-top: 132px;
  }
}

/* ------------------------------------------
   2) Footer: improve mobile column spacing and tap targets
   ------------------------------------------ */

@media (max-width: 991px){
  .footer .icon-footer-col{
    max-width: 100% !important;
  }

  .footer .icon-footer-title{
    font-size: 18px;
    margin-bottom: 10px;
  }

  .footer .icon-footer-links li{
    margin-bottom: 12px !important;
  }

  .footer .icon-footer-links a{
    padding: 6px 0;
    display: inline-block;
  }

  .footer-parent-brand{
    padding: 22px 0 20px;
  }

  .footer-parent-brand img{
    width: 150px;
  }
}

/* ------------------------------------------
   3) Spec tables: make them readable on mobile
   ------------------------------------------ */

@media (max-width: 680px){
  .spec-table{
    font-size: 14px;
  }

  .spec-table th,
  .spec-table td{
    padding: 12px 12px;
  }
}

/* ------------------------------------------
   4) RFQ form: single-column layout and better checkbox wrapping
   ------------------------------------------ */

@media (max-width: 760px){
  .icon-rfq-row{
    grid-template-columns: 1fr !important;
  }

  .icon-rfq .wpcf7-list-item label{
    font-size: 14px;
    padding: 10px 12px;
    white-space: normal;
  }
}

/* ------------------------------------------
   5) Modals: resolve conflicts by choosing ONE behavior
   This keeps modals hidden unless .is-open exists
   and prevents the “locked page” issue.
   ------------------------------------------ */

/* Force hidden by default (even if something sets display:flex elsewhere) */
.icon-modal,
.icon-calc-modal,
#iconSuccessModal{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Only open when .is-open is present */
.icon-modal.is-open,
.icon-calc-modal.is-open,
#iconSuccessModal.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure the wrappers are flex only when opened */
.icon-modal,
.icon-calc-modal,
#iconSuccessModal{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Modal padding on small screens */
@media (max-width: 640px){
  .icon-modal,
  .icon-calc-modal,
  #iconSuccessModal{
    padding: 14px !important;
  }

  .icon-modal__panel,
  .icon-calc-panel,
  #iconSuccessModal .icon-success-panel{
    width: calc(100% - 16px) !important;
    max-height: calc(100vh - 28px) !important;
  }
}

/* Make sure overlay never blocks clicks on the panel */
.icon-modal__overlay{
  pointer-events: none !important;
}

/* ------------------------------------------
   6) Calculator grid: already becomes 1 column at 760px
   This adds slightly better spacing on mobile
   ------------------------------------------ */

@media (max-width: 420px){
  .icon-calc-grid{
    gap: 10px;
  }

  .icon-calc-footer{
    flex-direction: column;
    align-items: stretch;
  }

  .icon-calc-apply,
  .icon-calc-cancel{
    width: 100%;
  }
}

/* ICON: Remove header search completely */
.header-searchbox-style-two,
.header-searchbox-style-two .side-panel,
.header-searchbox-style-two .show-searchbox,
.header-searchbox-style-two .toggle-searchbox{
  display: none !important;
}

/* ==========================================
   FIX: Mobile header too small + MeanMenu bar spilling out
   Targets: .header-navigation-area.three-layers-header
   ========================================== */

/* Ensure the header nav area can contain the mobile menu bar */
.header-navigation-area.three-layers-header{
  position: relative !important;
  overflow: visible !important; /* desktop needs dropdowns */
}

/* Tablet + mobile: contain MeanMenu and give it real height */
@media (max-width: 991px){

  /* Make the nav area tall enough for logo + hamburger row */
  .header-navigation-area.three-layers-header{
    min-height: 78px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Kill odd Bootstrap row side effects that can clip/shift */
  .header-navigation-area.three-layers-header .row{
    align-items: center !important;
  }

  /* This column holds the mean menu. Force it to behave. */
  .header-navigation-area.three-layers-header .col-xl-12,
  .header-navigation-area.three-layers-header .col-lg-12{
    position: relative !important;
    overflow: visible !important;
  }

  /* MeanMenu container: keep it inside header width */
  .header-navigation-area.three-layers-header .mean-container{
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important; /* stops the bar from hanging out */
  }

  /* MeanMenu bar: make it full width and properly boxed */
  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Hamburger: keep it from pushing outside */
  .header-navigation-area.three-layers-header .meanmenu-reveal{
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    padding: 14px 14px !important;
    box-sizing: border-box !important;
  }

  /* If the theme is forcing weird widths, this stabilizes it */
  .header-navigation-area.three-layers-header .main-menu{
    width: 100% !important;
  }

  /* Search box block: you said you don’t want it at all */
  .header-navigation-area.three-layers-header .header-searchbox-style-two{
    display: none !important;
  }
}

/* Small phones: slightly taller tap area */
@media (max-width: 680px){
  .header-navigation-area.three-layers-header{
    min-height: 74px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    min-height: 50px !important;
  }

  .header-navigation-area.three-layers-header .meanmenu-reveal{
    padding: 13px 12px !important;
  }
}

/* ==========================================
   FIX: Mobile header too small + MeanMenu bar spilling out
   Targets: .header-navigation-area.three-layers-header
   ========================================== */

/* Ensure the header nav area can contain the mobile menu bar */
.header-navigation-area.three-layers-header{
  position: relative !important;
  overflow: visible !important; /* desktop needs dropdowns */
}

/* Tablet + mobile: contain MeanMenu and give it real height */
@media (max-width: 991px){

  /* Make the nav area tall enough for logo + hamburger row */
  .header-navigation-area.three-layers-header{
    min-height: 78px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Kill odd Bootstrap row side effects that can clip/shift */
  .header-navigation-area.three-layers-header .row{
    align-items: center !important;
  }

  /* This column holds the mean menu. Force it to behave. */
  .header-navigation-area.three-layers-header .col-xl-12,
  .header-navigation-area.three-layers-header .col-lg-12{
    position: relative !important;
    overflow: visible !important;
  }

  /* MeanMenu container: keep it inside header width */
  .header-navigation-area.three-layers-header .mean-container{
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important; /* stops the bar from hanging out */
  }

  /* MeanMenu bar: make it full width and properly boxed */
  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
@media (max-width: 991px){

  /* Let MeanMenu position the hamburger, just keep it inside the bar */
  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    position: relative !important;
  }

  .header-navigation-area.three-layers-header .meanmenu-reveal{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* Option B: right aligned (uncomment these two, comment left/right above) */
    /* right: 10px !important; */
    /* left: auto !important; */

    margin: 0 !important;
    padding: 0px 0px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
}

  /* If the theme is forcing weird widths, this stabilizes it */
  .header-navigation-area.three-layers-header .main-menu{
    width: 100% !important;
  }

  /* Search box block: you said you don’t want it at all */
  .header-navigation-area.three-layers-header .header-searchbox-style-two{
    display: none !important;
  }
}

/* Small phones: slightly taller tap area */
@media (max-width: 680px){
  .header-navigation-area.three-layers-header{
    min-height: 74px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    min-height: 50px !important;
  }

  .header-navigation-area.three-layers-header .meanmenu-reveal{
    padding: 13px 12px !important;
  }
}

@media (max-width: 991px){

  /* Increase header nav height slightly so icon doesn't look lost */
  .header-navigation-area.three-layers-header{
    min-height: 86px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Make mean bar taller and centered */
  .header-navigation-area.three-layers-header 
  .mean-container .mean-bar{
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }

  /* Bigger tap target */
  .header-navigation-area.three-layers-header 
  .meanmenu-reveal{
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
	@media (max-width: 991px){

  /* Keep the bar stable */
  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    position: relative !important;
    min-height: 60px !important;
  }

  /* Big tap target */
  .header-navigation-area.three-layers-header .meanmenu-reveal{
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    display: block !important;
    z-index: 2 !important;
  }

  /* MeanMenu uses 3 spans, position them manually */
  .header-navigation-area.three-layers-header .meanmenu-reveal span{
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;

    height: 3px !important;
    background: #b40000 !important;

    margin: 0 !important;
    display: block !important;
  }

  /* Top, middle, bottom bars */
  .header-navigation-area.three-layers-header .meanmenu-reveal span:nth-child(1){
    top: 13px !important;
  }
  .header-navigation-area.three-layers-header .meanmenu-reveal span:nth-child(2){
    top: 20px !important;
  }
  .header-navigation-area.three-layers-header .meanmenu-reveal span:nth-child(3){
    top: 27px !important;
  }

  /* Remove any border/outline box that theme may add */
  .header-navigation-area.three-layers-header .meanmenu-reveal{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

  /* Make the bars thicker and wider */
  .header-navigation-area.three-layers-header 
  .meanmenu-reveal span{
    width: 40px !important;
    height: px !important;
    margin: 0px 0px !important;
    background: #b40000 !important; /* ICON red */
    display: block !important;
  }

}

/* /* =========================================================
   ICON HEADER: Clean, stable mobile + tablet header (FINAL)
   - Removes header search completely
   - Prevents MeanMenu overflow and “button falling out”
   - Proper tap target size
   - Does NOT fight MeanMenu internals (close X stays correct)
   ========================================================= */

/* Remove header search completely */
.header-searchbox-style-two,
.header-searchbox-style-two .side-panel,
.header-searchbox-style-two .show-searchbox,
.header-searchbox-style-two .toggle-searchbox{
  display: none !important;
}

/* Keep desktop dropdowns working */
.header-navigation-area.three-layers-header{
  position: relative !important;
  overflow: visible !important;
}

/* -------------------------
   Tablet + Mobile (<= 991px)
   ------------------------- */
@media (max-width: 991px){

  /* Prevent any horizontal spill from the fixed header */
  .header-wrapper,
  .header-navigation-area.three-layers-header{
    overflow-x: hidden !important;
  }

  /* Give the nav strip enough height */
  .header-navigation-area.three-layers-header{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 76px !important;
  }

  /* Center the header row content */
  .header-navigation-area.three-layers-header .row{
    align-items: center !important;
  }

  /* Ensure the column can hold injected MeanMenu elements */
  .header-navigation-area.three-layers-header .col-xl-12,
  .header-navigation-area.three-layers-header .col-lg-12{
    position: relative !important;
    overflow: visible !important;
  }

  /* MeanMenu container stays inside header width */
  .header-navigation-area.three-layers-header .mean-container{
    width: 100% !important;
    position: relative !important; /* positioning context */
    overflow: hidden !important;   /* contains reveal button */
  }

  /* Mean bar is the “header strip” for mobile menu */
  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    width: 100% !important;
    position: relative !important; /* positioning context for reveal */
    min-height: 56px !important;

    /* Reserve space so the reveal button cannot hang outside */
    padding-left: 72px !important;

    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Main menu wrapper should not constrain mean menu */
  .header-navigation-area.three-layers-header .main-menu{
    width: 100% !important;
  }

  /* Hamburger / Close button
     IMPORTANT: Do NOT position/override internal spans */
  .header-navigation-area.three-layers-header .meanmenu-reveal{
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    border: px solid rgba(180,0,0,0.30) !important;
    border-radius: 10px !important;
    background: transparent !important;

    z-index: 999999 !important;
    box-sizing: border-box !important;
  }

  /* Hamburger bar color (MeanMenu draws bars via spans) */
  .header-navigation-area.three-layers-header .meanmenu-reveal span{
    background: var(--icon-red, #b40000) !important;
  }

  /* Close “X” state stays centered inside the button */
  .header-navigation-area.three-layers-header .meanmenu-reveal.meanclose{
    color: var(--icon-red, #b40000) !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  /* Remove theme focus outlines */
  .header-navigation-area.three-layers-header .meanmenu-reveal:focus,
  .header-navigation-area.three-layers-header .meanmenu-reveal:active{
    outline: none !important;
    box-shadow: none !important;
  }
}

/* -------------------------
   Small phones (<= 680px)
   ------------------------- */
@media (max-width: 680px){

  .header-navigation-area.three-layers-header{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 72px !important;
  }

  .header-navigation-area.three-layers-header .mean-container .mean-bar{
    min-height: 54px !important;
    padding-left: 64px !important;
  }

  .header-navigation-area.three-layers-header .meanmenu-reveal{
    left: 12px !important;
    width: 46px !important;
    height: 46px !important;
    max-width: 48px !important;
    border-radius: 10px !important;
  }
}

/* Remove only on WooCommerce product pages */
.single-product .page-title-section{
  display: none !important;
}
/* ICON: hide the CTA section that contains the newsletter-style CF7 form */
section.call-to-action{
  display: none !important;
}

/* =========================================================
   ICON FOOTER: 3-column mobile grid + tighter spacing
   Brand stays full width, then 3-up: Explore / Systems / Contact
   ========================================================= */

@media (max-width: 800px){

  /* Overall tighter */
  .footer .footer-main-area{
    padding-top: 34px !important;
    padding-bottom: 1px !important;
  }

  footer.footer .footer-main-area > .container > .row{
    display: cene !important;
    flex-wrap: wrap !important;
    row-gap: 0px !important;
  }

  /* Brand (logo + CTA) stays full width */
  footer.footer .footer-main-area .col-xl-4{
    flex: 0 0 80% !important;
    max-width: 100% !important;
    order: 1 !important;
    margin-bottom: 4px !important;
  }

  /* Explore / Systems / Contact become 3 columns */
  footer.footer .footer-main-area .col-xl-3,
  footer.footer .footer-main-area .col-xl-2{
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    margin: 0 !important;
  }

  /* Ordering: Explore, Systems, Contact */
  footer.footer .footer-main-area .col-xl-3:nth-child(2){
    order: 2 !important;
    padding-right: 8px !important;
  }
  footer.footer .footer-main-area .col-xl-2{
    order: 3 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  footer.footer .footer-main-area .col-xl-3:last-child{
    order: 4 !important;
    padding-left: 8px !important;
  }

  /* Tighten widget typography */
  .icon-footer-title{
    margin: 0 0 px 0 !important;
    font-size: 14px !important;
    letter-spacing: 0.2px !important;
  }

  .icon-footer-text{
    margin: 0 0 10px 0 !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    max-width: 46ch !important;
  }

  /* Links tighter */
  .icon-footer-links{
    margin: 0 !important;
    padding: 0 !important;
  }
  .icon-footer-links li{
    margin: 0 !important;
  }
  .icon-footer-links a{
    padding: 4px 0 !important;
    font-size: 16px !important;
    line-height: .5 !important;
  }

  /* Contact tighter */
  .icon-footer-contact-line{
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    padding: 2px 0 !important;
    display: block !important;
  }

  /* CTA buttons: compact but still tappable */
  .icon-footer-cta{
    margin-top: 10px !important;
    gap: 8px !important;
  }
  .icon-footer-btn{
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
  }

  /* Logo a bit smaller */
  .footer .footer-widget img{
    max-width: 240px !important;
  }
}

/* Smaller phones: fall back to 2 columns so it doesn’t get cramped */
@media (max-width: 680px){

  footer.footer .footer-main-area .col-xl-3,
  footer.footer .footer-main-area .col-xl-2{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Put Contact full width at the bottom on small screens */
  footer.footer .footer-main-area .col-xl-3:last-child{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 20 !important;
    margin-top: 6px !important;
  }
}

/* Tiny phones: single column */
@media (max-width: 360px){
  footer.footer .footer-main-area .col-xl-3,
  footer.footer .footer-main-area .col-xl-2{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}