/* =====================================================================
   1411 — Home Page "Recyclable Packaging Options" banner.
   Configurable module (rp_recyclable). Deep forest-green banner, white
   headline, sage accents, three icon features, white CTA pill + artwork.
   Loaded by the catalog controller via addStyle().
   ===================================================================== */
.rp-recyc {
  --green:#013218; --green-2:#02401f;
  --white:#ffffff; --pale:#d6e3d4;
  --sage:#8cb573; --sage-light:#c3d0a9; --muted:#9fb894;
  --line:rgba(255,255,255,.16);
  font-family:'Outfit',sans-serif;
  margin:26px 0;
  border-radius:14px;
  background:linear-gradient(160deg,var(--green-2) 0%, var(--green) 55%);
  color:var(--white);
  overflow:hidden;
}
.rp-recyc * { box-sizing:border-box; }

.rp-recyc__inner {
  display:grid; grid-template-columns:1.15fr .85fr; gap:32px;
  align-items:stretch;
  padding:48px 52px;
}

/* ---- left content ---- */
.rp-recyc__content { display:flex; flex-direction:column; justify-content:space-between; gap:36px; min-width:0; }

.rp-recyc__eyebrow {
  display:inline-block; position:relative;
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-light); padding-bottom:12px; margin-bottom:22px;
}
.rp-recyc__eyebrow::after {
  content:""; position:absolute; left:0; bottom:0; width:54px; height:3px;
  background:var(--sage); border-radius:2px;
}

.rp-recyc__title {
  margin:0; font-size:46px; line-height:1.06; font-weight:800; letter-spacing:-.02em;
  color:var(--white); max-width:15ch;
}
.rp-recyc__subtext {
  margin:20px 0 0; font-size:18px; line-height:1.55; color:var(--pale); max-width:46ch;
}

/* ---- features (single row on desktop) ---- */
.rp-recyc__features {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; align-items:center; gap:0;
}
.rp-recyc__feature {
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:0 22px;
  border-left:1px solid var(--line);
}
.rp-recyc__feature:first-child { padding-left:0; border-left:0; }

.rp-recyc__icon {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(140,181,115,.55); color:var(--sage-light);
}
.rp-recyc__icon svg { width:23px; height:23px; }

.rp-recyc__feature-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.rp-recyc__feature-title { font-size:15.5px; font-weight:700; color:var(--white); white-space:nowrap; }
.rp-recyc__feature-sub { font-size:13px; color:var(--muted); margin-top:2px; }

/* ---- right media + CTA ---- */
.rp-recyc__media {
  position:relative; display:flex; flex-direction:column;
  align-items:flex-end; justify-content:flex-end; gap:22px; min-width:0;
}
.rp-recyc__image {
  display:block; width:100%; max-width:100%; height:auto; max-height:360px; object-fit:contain;
  margin-top:auto;
} /* 1458 — cap height to keep the block compact on the wider layout */
.rp-recyc__cta {
  align-self:flex-end;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--white); color:var(--green);
  font-size:16px; font-weight:700; text-decoration:none;
  padding:15px 26px; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.rp-recyc__cta:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.28); color:var(--green); }
.rp-recyc__cta-arrow { font-weight:600; }

/* ---- responsive ---- */
@media (max-width:1100px){
  .rp-recyc__title { font-size:38px; }
  .rp-recyc__inner { padding:40px 40px; gap:26px; }
}
@media (max-width:900px){
  .rp-recyc__inner { grid-template-columns:1fr; }
  .rp-recyc__media { align-items:flex-start; }
  .rp-recyc__image { max-width:360px; margin:0 auto; }
  .rp-recyc__cta { align-self:stretch; justify-content:center; }
  .rp-recyc__content { gap:30px; }
}
@media (max-width:560px){
  .rp-recyc__inner { padding:32px 24px; }
  .rp-recyc__title { font-size:30px; }
  .rp-recyc__subtext { font-size:16px; }
  .rp-recyc__features { flex-direction:column; align-items:flex-start; gap:20px; }
  .rp-recyc__feature { padding:0; border-left:0; }
}