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

.hero{
  overflow:hidden;

  background:
    linear-gradient(rgba(5,22,38,.60),rgba(5,22,38,.72)),
    url("../images/hamida-traders-products-hero.webp") center center / cover no-repeat;

  color:#fff;
}

.hero-inner{
  width:min(var(--max),calc(100% - 32px));

  margin:auto;

  padding:58px 0 54px;

  text-align:center;
}

.hero-badge{
  display:inline-flex;

  padding:7px 12px;

  margin-bottom:13px;

  border:1px solid rgba(128,184,255,.22);
  border-radius:999px;

  background:rgba(0,82,204,.12);

  color:#b9d8ff;

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

  text-transform:uppercase;

  letter-spacing:.07em;
}

.hero h1{
  max-width:850px;

  margin:0 auto;

  font-size:clamp(32px,5vw,49px);

  line-height:1.1;

  letter-spacing:-.025em;
}

.hero p{
  max-width:780px;

  margin:16px auto 0;

  color:#c3d2df;

  font-size:16px;

  line-height:1.7;
}

.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;

  flex-wrap:wrap;

  gap:10px;

  margin-top:24px;
}

.btn{
  min-height:44px;

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

  padding:10px 19px;

  border:0;
  border-radius:8px;

  font-weight:700;
}

.btn-primary{
  background:var(--blue);

  color:#fff;
}

.btn-primary:hover{
  background:#0648ae;
}

.btn-light{
  border:1px solid rgba(255,255,255,.18);

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

  color:#fff;
}

.btn-secondary{
  border:1px solid var(--border);

  background:#fff;

  color:#36536d;
}


/* =====================================================
   PRIVATE STOCK NOTICE
===================================================== */

.private-notice{
  width:min(var(--max),calc(100% - 32px));

  margin:24px auto 0;

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

  gap:14px;

  padding:16px 18px;

  border:1px solid #cddff0;
  border-radius:11px;

  background:#f3f8fd;
}

.notice-icon{
  width:38px;
  height:38px;

  flex:0 0 38px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#e3effb;

  color:var(--blue);

  font-size:18px;
}

.private-notice strong{
  display:block;

  margin-bottom:4px;

  color:#244965;

  font-size:14px;
}

.private-notice p{
  margin:0;

  color:#637a8e;

  font-size:13px;

  line-height:1.6;
}


/* =====================================================
   MAIN
===================================================== */

.main{
  width:min(var(--max),calc(100% - 32px));

  margin:32px auto 60px;
}

.section-head{
  margin-bottom:23px;

  text-align:center;
}

.section-kicker{
  color:var(--blue);

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

  text-transform:uppercase;

  letter-spacing:.08em;
}

.section-head h2{
  margin:6px 0 7px;

  color:var(--navy);

  font-size:30px;
}

.section-head p{
  max-width:720px;

  margin:0 auto;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


/* =====================================================
   CATEGORY FILTERS
===================================================== */

.filters{
  display:flex;
  align-items:center;
  justify-content:center;

  flex-wrap:wrap;

  gap:8px;

  margin-bottom:26px;
}

.filter-btn{
  min-height:39px;

  padding:8px 15px;

  border:1px solid #ccd8e3;
  border-radius:999px;

  background:#fff;

  color:#4b6175;

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

.filter-btn:hover{
  border-color:#8eafd4;

  color:var(--blue);
}

.filter-btn.active{
  border-color:var(--blue);

  background:var(--blue);

  color:#fff;
}


/* =====================================================
   PRODUCT GRID
===================================================== */

.product-grid{
  display:grid;

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

  gap:17px;
}

.product-card{
  min-width:0;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:12px;

  background:#fff;

  box-shadow:0 7px 20px rgba(5,34,59,.055);

  transition:.18s ease;
}

.product-card:hover{
  transform:translateY(-3px);

  box-shadow:0 13px 28px rgba(5,34,59,.10);
}

.product-visual{
  position:relative;

  height:205px;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 42%,
      #fff 0,
      #f1f5f9 58%,
      #e8eef4 100%
    );
}

.product-visual::after{
  content:"Representative Image";

  position:absolute;

  left:10px;
  bottom:10px;

  padding:5px 8px;

  border-radius:5px;

  background:rgba(6,26,45,.76);

  color:#fff;

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

  letter-spacing:.02em;
}

.product-icon{
  font-size:78px;

  filter:drop-shadow(0 8px 9px rgba(0,0,0,.08));
}

.product-body{
  padding:15px;
}

.product-meta{
  display:flex;
  align-items:center;

  gap:6px;

  margin-bottom:7px;

  color:#718294;

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

  text-transform:uppercase;

  letter-spacing:.04em;
}

.product-body h3{
  margin:0 0 7px;

  color:var(--navy);

  font-size:17px;
}

.product-body p{
  min-height:40px;

  margin:0 0 14px;

  color:#6b7d8e;

  font-size:12px;

  line-height:1.55;
}

.product-action{
  width:100%;

  min-height:40px;

  border:1px solid #cbdcec;
  border-radius:7px;

  background:#f4f8fc;

  color:#18558a;

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

.product-action:hover{
  border-color:var(--blue);

  background:var(--blue);

  color:#fff;
}


/* =====================================================
   REPRESENTATIVE DISCLAIMER
===================================================== */

.image-disclaimer{
  margin-top:22px;

  padding:14px 16px;

  border:1px solid #e0e5ea;
  border-radius:9px;

  background:#fafbfc;

  color:#697b8d;

  font-size:12px;

  line-height:1.65;
}

.image-disclaimer strong{
  color:#41586d;
}


/* =====================================================
   CTA
===================================================== */

.requirement-cta{
  margin-top:38px;

  padding:30px;

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

  gap:25px;

  border-radius:14px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(53,134,229,.24),
      transparent 34%
    ),
    var(--navy);

  color:#fff;
}

.requirement-cta h2{
  margin:0 0 7px;

  font-size:25px;
}

.requirement-cta p{
  max-width:690px;

  margin:0;

  color:#b8c9d7;

  font-size:14px;

  line-height:1.65;
}

.requirement-cta .btn{
  flex:0 0 auto;
}


/* =====================================================
   INFORMATION SECTIONS
===================================================== */

.info-section{
  margin-top:45px;
}

.info-card{
  overflow:hidden;

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

  background:#fff;

  box-shadow:0 8px 25px rgba(5,34,59,.045);
}

.info-card-head{
  padding:24px 25px;

  border-bottom:1px solid var(--border);

  background:#f8fafc;
}

.info-card-head span{
  color:var(--blue);

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

  text-transform:uppercase;

  letter-spacing:.08em;
}

.info-card-head h2{
  margin:5px 0 0;

  color:var(--navy);

  font-size:25px;
}

.info-card-body{
  padding:25px;
}

.info-card-body > p{
  margin:0;

  color:#5e7488;

  font-size:14px;

  line-height:1.75;
}


/* =====================================================
   PRIVATE TRADE REASONS
===================================================== */

.reason-grid{
  display:grid;

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

  gap:13px;

  margin-top:20px;
}

.reason{
  display:flex;

  gap:12px;

  padding:15px;

  border:1px solid #e0e7ed;
  border-radius:9px;

  background:#fafcfd;
}

.reason-icon{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:#eaf3fb;

  font-size:16px;
}

.reason strong{
  display:block;

  margin-bottom:3px;

  color:#34526b;

  font-size:13px;
}

.reason p{
  margin:0;

  color:#708292;

  font-size:12px;

  line-height:1.55;
}


/* =====================================================
   STOCKLOT TYPES
===================================================== */

.stocklot-grid{
  display:grid;

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

  gap:12px;

  margin-top:22px;
}

.stocklot-type{
  padding:17px;

  border:1px solid #dde5ec;
  border-radius:9px;

  background:#fafcfd;
}

.stocklot-type-icon{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  margin-bottom:10px;

  border-radius:8px;

  background:#eaf3fb;

  font-size:17px;
}

.stocklot-type strong{
  display:block;

  margin-bottom:5px;

  color:#294c68;

  font-size:13px;
}

.stocklot-type p{
  margin:0;

  color:#6e8293;

  font-size:12px;

  line-height:1.55;
}


/* =====================================================
   BRAND NOTICE
===================================================== */

.legal-notice{
  margin-top:45px;

  padding:24px;

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

  background:#fffaf0;
}

.legal-title{
  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:11px;

  color:#684b13;

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

.legal-notice p{
  margin:8px 0 0;

  color:#76633b;

  font-size:12px;

  line-height:1.7;
}


/* =====================================================
   FINAL CTA
===================================================== */

.final-cta{
  margin-top:45px;

  padding:38px 25px;

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

  background:#fff;

  text-align:center;
}

.final-cta h2{
  margin:0;

  color:var(--navy);

  font-size:27px;
}

.final-cta p{
  max-width:680px;

  margin:9px auto 20px;

  color:var(--muted);

  font-size:14px;
}



/* V4 FINAL MATCH OVERRIDES */
.hero-inner{padding:64px 0 58px!important}
.hero h1{font-size:clamp(34px,5vw,52px)!important}
.private-notice{margin-top:-18px!important;position:relative;z-index:5;background:rgba(255,255,255,.97)!important;border-color:#d6e3ed!important}
.main{margin-top:44px!important}
.section-head h2{font-size:34px!important;letter-spacing:-.03em}
.filters{gap:9px!important}.filter-btn{border-radius:10px!important;font-weight:600!important}
.product-grid{gap:18px!important}.product-card{border-color:#dfe8ef!important}
.product-visual{background:linear-gradient(145deg,#f9fbfd,#eaf1f6)!important}
.requirement-cta{border-radius:20px!important;background:linear-gradient(105deg,#071d31 0%,#0b4b82 58%,#168257 100%)!important;box-shadow:0 24px 60px rgba(6,26,45,.14)}
.info-card-head{background:linear-gradient(180deg,#fbfcfd,#f5f8fa)!important}
.final-cta{padding:44px 28px!important}

@media(max-width:1000px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .stocklot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .hero-inner{width:calc(100% - 24px);padding:40px 0;}
  .hero p{font-size:14px;}
  .private-notice,.main{width:calc(100% - 20px);}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .product-visual{height:170px;}
  .product-icon{font-size:61px;}
  .requirement-cta{align-items:flex-start;flex-direction:column;padding:24px 18px;}
  .reason-grid,.stocklot-grid{grid-template-columns:1fr;}
}
@media(max-width:430px){
  .product-grid{grid-template-columns:1fr;}
  .product-visual{height:210px;}
  .filters{justify-content:flex-start;}
}

/* Products V4 locked hero layout isolation */
.hero .hero-inner{display:block!important;width:min(var(--max),calc(100% - 32px))!important;margin:0 auto!important;padding:64px 0 58px!important;text-align:center!important}
.hero .hero-badge{display:inline-flex!important;width:auto!important;max-width:none!important;margin:0 auto 13px!important}
.hero .hero-inner>h1{display:block!important;width:auto!important;max-width:850px!important;margin:0 auto!important;text-align:center!important}
.hero .hero-inner>p{display:block!important;width:auto!important;max-width:780px!important;margin:16px auto 0!important;text-align:center!important}
.hero .hero-actions{display:flex!important;width:auto!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap!important;gap:10px!important;margin:24px auto 0!important}

@media(min-width:761px){.hero .hero-inner{padding-top:104px!important;}}

.product-card[hidden]{display:none!important;}

/* Stock product image fit */
.product-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

/* STOCK PRODUCTS — HERO BACKGROUND ISOLATION */
body .hero{background:linear-gradient(rgba(5,22,38,.60),rgba(5,22,38,.72)),url('../images/hamida-traders-products-hero.webp') center center/cover no-repeat!important;}
body .hero::before{display:none!important;}