/* Blocul „Cum ai grijă de lână" de sub descrierea produsului, și pagina /ingrijire-lana-merino/.
   Antetul vine din bf_antet() (lib/brand_footer.php), deci arată identic cu secțiunea de brand
   de deasupra — aici se stilează doar conținutul.
   2026-11-15: Creat. */

.il-bloc {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  background: linear-gradient(180deg, #f7fafc 0%, #edf2f7 100%);
  padding: 20px 24px 22px;
}

.il-r {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid #e2e8f0;
}
.il-r:last-of-type { border-bottom: 0; }

.il-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b6cb0;
}
.il-ic svg { width: 19px; height: 19px; }

.il-r > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.il-r b { font-size: 14.5px; font-weight: 700; color: #1a365d; line-height: 1.3; }
.il-r i {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a5568;
  margin-top: 2px;
}

.il-link {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;
  background: #1a365d;
  color: #fff !important;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
}
.il-link:hover { background: #12263f; color: #fff !important; }

@media (max-width: 640px) {
  .il-bloc { padding: 16px 16px 18px; }
  .il-r { gap: 10px; padding: 10px 0; }
  .il-ic { width: 30px; height: 30px; }
  .il-ic svg { width: 17px; height: 17px; }
  .il-r b { font-size: 14px; }
  .il-r i { font-size: 13px; }
  .il-link { display: block; text-align: center; }
}

/* ---------------------------------------------------------------- pagina /ingrijire-lana-merino/ */
.ilp { color: #14181d; line-height: 1.6; }
.ilp * { box-sizing: border-box; }

.ilp-hero { padding: 48px 20px 34px; text-align: center; border-bottom: 1px solid #e2e6ea; }
.ilp-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(27px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.ilp-sub { margin: 0 auto 16px; max-width: 64ch; font-size: clamp(15px, 1.5vw, 18px); color: #5d6873; }
.ilp-sub b { color: #14181d; }
.ilp-fapte { margin: 0; font-size: 13.5px; color: #5d6873; }
.ilp-fapte b { color: #14181d; }

/* Două pe rând, nu „câte încap": patru carduri într-o grilă de trei lasă un gol urât pe ultimul rând. */
.ilp-reguli {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 38px 20px 10px;
}
@media (max-width: 860px) { .ilp-reguli { grid-template-columns: 1fr; } }
.ilp-regula { display: flex; gap: 16px; padding: 22px 24px; background: #f6f7f9; border-radius: 14px; }
.ilp-nr {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #14181d;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ilp-regula h2 { margin: 2px 0 7px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.ilp-regula p { margin: 0; font-size: 14px; line-height: 1.65; color: #39434d; }

.ilp-nu, .ilp-dece { padding: 34px 20px 6px; }
.ilp-nu h2, .ilp-dece h2 {
  margin: 0 0 14px;
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ilp-nu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 90ch; }
.ilp-nu li {
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-left: 4px solid #c8102e;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #39434d;
}
.ilp-nu li b { color: #14181d; font-weight: 700; }
.ilp-dece p { margin: 0 0 12px; max-width: 86ch; font-size: 15px; line-height: 1.7; color: #39434d; }
.ilp-dece p b { color: #14181d; font-weight: 700; }

.ilp-jos { margin-top: 32px; padding: 30px 20px 46px; border-top: 1px solid #e2e6ea; text-align: center; }
.ilp-jos p { margin: 0 0 16px; font-size: 15px; color: #5d6873; }
.ilp-btn {
  display: inline-block;
  padding: 12px 26px;
  background: #14181d;
  color: #fff !important;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
}
.ilp-btn:hover { background: #000; color: #fff !important; }

@media (max-width: 640px) {
  .ilp-hero { padding: 30px 16px 24px; }
  .ilp-reguli { grid-template-columns: 1fr; gap: 12px; padding: 26px 16px 4px; }
  .ilp-regula { padding: 16px 18px; gap: 12px; }
  .ilp-nu, .ilp-dece { padding: 26px 16px 4px; }
}