/* Products page — rebuilt from the design PDF.
   The Elementor nested-tabs widget (the category switch) is kept intact;
   only its panels' contents and the surrounding chrome are restyled. */

:root{
  --bec-navy:#0E3659;
  --bec-blue:#0C9ED8;
  --bec-green:#00A883;
  --bec-wash:#E4ECF2;
}

/* the theme's empty grey title band isn't in the design */
#site-title.page-title-section{display:none !important;}

.bec-products{color:var(--bec-navy);}
.bec-products *{box-sizing:border-box;}
.bec-pwrap{max-width:1200px;margin:0 auto;padding:0 24px;}

/* ---------- hero ---------- */
.bec-phero{
  position:relative;
  background:#22333f url("/wp-content/uploads/2024/06/products-hero.jpg") center/cover no-repeat;
}
.bec-phero::before{
  content:"";position:absolute;inset:0;
  background:rgba(12,26,38,.55);
}
.bec-phero .bec-pwrap{
  position:relative;
  min-height:540px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:70px;
  padding-bottom:70px;
}
.bec-phero-logo{
  position:absolute;
  top:38px;right:24px;
  width:210px;height:auto;
}
.bec-phero h1{
  color:#fff;
  font-size:40px;
  line-height:1.28;
  font-weight:700;
  margin:0;
  max-width:900px;
}

/* ---------- "Our Products" ---------- */
.bec-psection{background:var(--bec-wash);padding:70px 0 96px;}
.bec-ptitle{text-align:center;margin:0 0 40px;}
.bec-ptitle h2{
  font-size:33px;font-weight:700;color:var(--bec-navy);
  margin:0 0 14px;line-height:1.2;
}
.bec-ptitle span{
  display:block;width:270px;max-width:60%;height:3px;
  background:var(--bec-blue);margin:0 auto;
}

/* ---------- the category switch (Elementor nested tabs) ---------- */
.bec-products .e-n-tabs-heading{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:0 0 46px;
  border:0 !important;
}
.bec-products .e-n-tab-title{
  flex:0 0 auto !important;
  width:auto !important;
  background:#fff !important;
  border:1px solid #cdd9e5 !important;
  border-radius:999px !important;
  padding:11px 24px !important;
  font-size:14.5px;
  font-weight:600;
  color:var(--bec-navy) !important;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.bec-products .e-n-tab-title:hover{border-color:var(--bec-blue) !important;}
.bec-products .e-n-tab-title .e-n-tab-title-text{color:inherit !important;font:inherit !important;}
.bec-products .e-n-tab-title[aria-selected="true"]{
  background:var(--bec-navy) !important;
  border-color:var(--bec-navy) !important;
  color:#fff !important;
}
.bec-products .e-n-tab-icon{display:none !important;}
.bec-products .e-n-tabs-content > *{padding:0 !important;}

/* ---------- product cards ---------- */
.bec-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:52px 40px;
}
.bec-card{display:flex;flex-direction:column;align-items:flex-start;}
.bec-card-media{
  width:100%;
  aspect-ratio:4/3;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bec-card-media img{
  width:100%;height:100%;
  object-fit:contain;
  padding:10px;
  display:block;
}
.bec-card-media.is-empty{
  background:#f4f8fb;
  border:1px dashed #c3d3e0;
}
.bec-card-media.is-empty img{
  width:auto;height:auto;max-width:58%;max-height:46%;
  object-fit:contain;opacity:.45;padding:0;
}
.bec-card h3{
  font-size:16.5px;
  font-weight:700;
  color:var(--bec-navy);
  margin:16px 0 14px;
  line-height:1.35;
}
.bec-card .bec-more{
  display:inline-block;
  background:var(--bec-green);
  color:#fff !important;
  font-size:14px;
  font-weight:600;
  padding:11px 22px;
  border-radius:6px;
  text-decoration:none;
  transition:background .16s ease;
}
.bec-card .bec-more:hover{background:#00916f;}
.bec-card .bec-more.is-disabled{
  background:#b9c7d4;
  pointer-events:none;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bec-grid{grid-template-columns:repeat(2,1fr);gap:42px 30px;}
  .bec-phero h1{font-size:31px;}
  .bec-phero .bec-pwrap{min-height:380px;}
  .bec-phero-logo{width:150px;top:24px;}
}
@media (max-width:640px){
  .bec-grid{grid-template-columns:1fr;gap:36px;}
  .bec-phero h1{font-size:25px;}
  .bec-phero .bec-pwrap{min-height:300px;}
  .bec-phero-logo{width:120px;}
  .bec-psection{padding:48px 0 64px;}
  .bec-ptitle h2{font-size:26px;}
  .bec-products .e-n-tab-title{padding:9px 17px !important;font-size:13.5px;}
}

/* products without a detail page yet - hidden until their page exists */
.bec-grid .bec-card.is-hidden{display:none;}