.elementor-18853 .elementor-element.elementor-element-ce0054b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-18853 .elementor-element.elementor-element-080b39c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-18853 .elementor-element.elementor-element-080b39c.e-con{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-18853 .elementor-element.elementor-element-080b39c{--width:100%;}}@media(max-width:1366px) and (min-width:768px){.elementor-18853 .elementor-element.elementor-element-080b39c{--width:1168.2px;}}/* Start custom CSS for html, class: .elementor-element-2e21bf6 *//* ── CSS Custom Properties ─────────────────────────────── */
.bn-hdpe {
  --bn-green:        #1a5c2e;
  --bn-green-light:  #f0f9f4;
  --bn-green-mid:    #e8f4ed;
  --bn-amber:        #ffc000;
  --bn-text:         #1a1a1a;
  --bn-muted:        #888;
  --bn-border:       #e0e0e0;
  --bn-bg-card:      #fafafa;
  --bn-radius-card:  12px;
  --bn-radius-btn:   6px;
  --bn-radius-tag:   20px;
  --bn-font:         'Roboto Slab', serif;
  --bn-transition:   0.2s ease;
}

/* ── Layout ─────────────────────────────────────────────── */
.bn-hdpe {
  font-family:  var(--bn-font);
  max-width:    1060px;
  margin:       0 auto;
  padding:      30px 20px 50px;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.bn-hdpe__breadcrumb {
  font-size:     13px;
  color:         var(--bn-muted);
  margin-bottom: 20px;
}

.bn-hdpe__breadcrumb a {
  color:           var(--bn-green);
  text-decoration: none;
}

.bn-hdpe__breadcrumb a:hover {
  text-decoration: underline;
}

/* ── Header ─────────────────────────────────────────────── */
.bn-hdpe__header {
  margin-bottom: 30px;
}

.bn-hdpe__header h1 {
  font-size:     30px;
  font-weight:   700;
  margin-bottom: 8px;
}

.bn-hdpe__header p {
  font-size:   15px;
  color:       #666;
  line-height: 1.6;
  max-width:   700px;
}

/* ── Product Grid ───────────────────────────────────────── */
.bn-hdpe__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   22px;
  margin-bottom:         40px;
}

/* ── Product Card ───────────────────────────────────────── */
.bn-card {
  background:     #fff;
  border:         1px solid var(--bn-border);
  border-radius:  var(--bn-radius-card);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     transform 0.25s ease, box-shadow 0.25s ease;
}

.bn-card:hover {
  transform:  translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* ── Card Image ─────────────────────────────────────────── */
.bn-card__img-wrap {
  overflow:        hidden;
  height:          160px;
  background:      var(--bn-green-light);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.bn-card__img {
  width:      100%;
  height:     160px;
  object-fit: cover;
  display:    block;
  transition: transform 0.35s ease;
}

.bn-card:hover .bn-card__img {
  transform: scale(1.04);
}

.bn-card__img-placeholder {
  font-size: 13px;
  color:     #aaa;
}

/* ── Card Body ──────────────────────────────────────────── */
.bn-card__body {
  padding: 16px 18px 0;
}

.bn-card__sku {
  font-size:     18px;
  font-weight:   700;
  color:         var(--bn-green);
  margin-bottom: 4px;
}

.bn-card__name {
  font-size:     13px;
  color:         #666;
  margin-bottom: 10px;
  line-height:   1.4;
}

.bn-card__tags {
  display:       flex;
  gap:           6px;
  flex-wrap:     wrap;
  margin-bottom: 12px;
}

/* ── Tags ───────────────────────────────────────────────── */
.bn-tag {
  font-size:     11px;
  padding:       3px 9px;
  border-radius: var(--bn-radius-tag);
  font-weight:   600;
}

.bn-tag--hdpe  { background: var(--bn-green-mid); color: var(--bn-green); }
.bn-tag--color { background: #f0f0f0;              color: #444;           }
.bn-tag--deod  { background: #f1f2f2;              color: #e65100;        }
.bn-tag--fmcg  { background: #e3f2fd;              color: #1565c0;        }
.bn-tag--grade { background: #f1f2f2;      color: e65100}

/* ── Specs Table ─────────────────────────────────────────── */
.bn-card__specs {
  border-top: 1px solid #f0f0f0;
  padding:    12px 18px;
  background: var(--bn-bg-card);
  margin:     0;
}

.bn-card__spec {
  display:         flex;
  justify-content: space-between;
  padding:         4px 0;
  font-size:       13px;
  border-bottom:   1px solid #f0f0f0;
  text-align:      left;
}

.bn-card__spec:last-child {
  border-bottom: none;
}

.bn-card__spec dt {
  color:       var(--bn-muted);
  font-weight: 400;
}

.bn-card__spec dd {
  color:       var(--bn-text);
  font-weight: 600;
  margin:      0;
  text-align:  right;
}

/* ── Card Actions ───────────────────────────────────────── */
.bn-card__actions {
  padding:    12px 18px;
  display:    flex;
  gap:        10px;
  margin-top: auto;
}

/* ── Buttons ────────────────────────────────────────────── */
.bn-btn {
  flex:            1;
  padding:         9px 14px;
  border-radius:   var(--bn-radius-btn);
  font-size:       13px;
  font-family:     var(--bn-font);
  text-decoration: none;
  text-align:      center;
  display:         block;
  transition:      background var(--bn-transition);
}

.bn-btn--primary {
  background: #199a4b;
  color:      #fff !important;
}

.bn-btn--primary:hover {
  background: var(--bn-amber);
}

/* ── Hidden card state ──────────────────────────────────── */
.bn-card[hidden] {
  display: none;
}

/* ── CTA Banner ─────────────────────────────────────────── */
.bn-hdpe__cta {
  background:      var(--bn-green);
  border-radius:   var(--bn-radius-card);
  padding:         32px 36px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             16px;
}

.bn-hdpe__cta h3 {
  color:         #fff;
  font-size:     20px;
  font-weight:   600;
  margin-bottom: 4px;
}

.bn-hdpe__cta p {
  color:     rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.bn-btn--cta {
  background:      #fff;
  color:           var(--bn-green) !important;
  padding:         11px 26px;
  border-radius:   var(--bn-radius-btn);
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  flex:            none;
}

.bn-btn--cta:hover {
  background: #92d050;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .bn-hdpe__grid {
    grid-template-columns: 1fr;
  }

  .bn-hdpe__cta {
    padding:        24px 20px;
    text-align:     center;
    flex-direction: column;
    align-items:    stretch;
  }

  .bn-btn--cta {
    text-align: center;
    display:    block;
  }
}/* End custom CSS */