/* CocoaSmart — brand styling for Essential/Ultimate Addons filter + cards */
.eael-filter-gallery-control ul li a.control {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 9px 20px;
  margin: 0 6px 10px;
  color: #423A31;
  background: #E6EEDE;
  border: 1px solid #D3DDC4;
  transition: background .24s ease, color .24s ease, border-color .24s ease;
}
.eael-filter-gallery-control ul li a.control.active,
.eael-filter-gallery-control ul li a.control:hover {
  background: #7E5836;
  color: #FDF6EE;
  border-color: #7E5836;
}
.eael-filterable-gallery-item-wrap,
.eael-filterable-gallery-item-wrap .gallery-item-caption-wrap {
  border-radius: 20px;
}
.eael-filterable-gallery-item-wrap {
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(29,19,13,0.08);
  border: 1px solid #E7DDCD;
}
.eael-filterable-gallery-item-wrap .fg-item-title,
.eael-filterable-gallery-item-wrap .gallery-item-caption-wrap .fg-item-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  color: #221C16;
}
.eael-filterable-gallery-item-wrap .fg-item-content,
.eael-filterable-gallery-item-wrap p {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #423A31;
}

/* ===== Mobile responsiveness for Elementor pages ===== */
@media (max-width: 1024px) {
  /* Card containers set to fixed % widths (31%, 23%, etc.) → two per row */
  .e-con-inner > .e-con.e-child > .elementor-widget-icon-box,
  .e-con.e-child[style] { min-width: 0; }
  .e-con-inner > .e-con.e-child { flex-wrap: wrap; }
}

@media (max-width: 767px) {
  /* Stack all child containers full-width */
  .e-con.e-child,
  .e-con-inner > .e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
  .e-con, .e-con-inner { flex-wrap: wrap !important; }

  /* Icon-box cards inside flex rows take full width */
  .e-con > .elementor-widget-icon-box,
  .e-con-inner > .elementor-widget-icon-box {
    width: 100% !important;
  }

  /* Headline sizes */
  .elementor h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 38px !important; }
  .elementor h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 30px !important; }

  /* HFE header: allow wrap, center items */
  header#masthead .e-con-inner > .e-con,
  header#masthead .e-con {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 10px;
  }

  /* Filter pills wrap nicely */
  .eael-filter-gallery-control ul {
    display: flex; flex-wrap: wrap; justify-content: center;
  }
}

/* ===================================================================
   CocoaSmart design motifs (used by HTML widgets on the homepage)
   =================================================================== */
.cs-underline { background-image: linear-gradient(#2F6D33,#2F6D33); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 3px; padding-bottom: 0.04em; }

.cs-pill { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(244,236,226,0.12); color:#7FAE75; padding:7px 16px; border-radius:999px; font:600 14px/1 'DM Sans',sans-serif; }
.cs-pill .dot { color:#7FAE75; font-size:11px; }
.cs-tagline { display:flex; align-items:center; gap:14px; font-family:'Sora',sans-serif; font-weight:600; font-size:17px; color:#7FAE75; letter-spacing:-0.01em; }
.cs-tagline::before { content:''; width:26px; height:2px; background:#538a4b; border-radius:2px; }

.cs-hero-media { position:relative; }
.cs-eudr { position:absolute; left:-22px; bottom:30px; width:230px; background:#fff; border-radius:20px; padding:16px 18px; box-shadow:0 22px 50px rgba(29,19,13,0.18); display:flex; gap:12px; align-items:center; }
.cs-eudr .ic { flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:#ECDFD4; color:#4F3420; display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.cs-eudr .t { font-family:'Sora',sans-serif; font-weight:700; font-size:17px; color:#221C16; line-height:1.15; }
.cs-eudr .s { font-size:13px; color:#8C8073; }

.cs-prob-card { background:#fff; border:1px solid #E7DDCD; border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:14px; height:100%; box-shadow:0 1px 2px rgba(29,19,13,0.06); }
.cs-prob-top { display:flex; justify-content:space-between; align-items:flex-start; }
.cs-prob-ic { width:54px; height:54px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:24px; }
.cs-stat { display:inline-block; padding:6px 12px; border-radius:999px; font:600 12px/1.3 'DM Sans',sans-serif; }
.cs-prob-card h3 { font-family:'Sora',sans-serif; font-weight:700; font-size:24px; color:#221C16; margin:0; }
.cs-prob-card p { margin:0; font-size:15px; color:#423A31; line-height:1.55; }

.cs-outcome { background:#281A10; border-radius:28px; padding:36px 40px; color:#F4ECE2; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.cs-outcome .ic { flex:0 0 auto; width:56px; height:56px; border-radius:16px; background:#7E5836; color:#281A10; display:inline-flex; align-items:center; justify-content:center; font-size:26px; }
.cs-outcome h3 { font-family:'Sora',sans-serif; font-weight:700; font-size:24px; color:#fff; margin:0 0 4px; }
.cs-outcome p { margin:0; color:#B7A896; font-size:15px; }
.cs-outcome .grow { flex:1; min-width:260px; }
.cs-outcome a { flex:0 0 auto; background:#7E5836; color:#FDF6EE; padding:14px 26px; border-radius:999px; font:600 15px 'DM Sans',sans-serif; }

.cs-gold-badge { display:inline-block; background:#E0A82E; color:#281A10; font:600 14px/1.4 'DM Sans',sans-serif; padding:9px 18px; border-radius:999px; }

.cs-check { display:flex; align-items:center; gap:12px; color:#F4ECE2; font-size:15px; margin-bottom:12px; }
.cs-check .b { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:rgba(116,177,26,0.18); color:#7FAE75; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.cs-form { background:#fff; border-radius:28px; padding:32px; box-shadow:0 22px 50px rgba(29,19,13,0.18); }
.cs-form h3 { font-family:'Sora',sans-serif; font-weight:700; font-size:24px; color:#221C16; margin:0 0 4px; }
.cs-form .sub { color:#8C8073; font-size:14px; margin:0 0 20px; }
.cs-form .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cs-form label { display:block; font-size:13px; font-weight:600; color:#423A31; margin-bottom:6px; }
.cs-form input, .cs-form select { width:100%; padding:12px 14px; border:1px solid #E7DDCD; border-radius:12px; font-family:'DM Sans',sans-serif; font-size:15px; color:#221C16; background:#fff; }
.cs-form .full { grid-column:1 / -1; }
.cs-form button { width:100%; margin-top:18px; background:#7E5836; color:#FDF6EE; border:none; border-radius:999px; padding:15px; font:600 16px 'DM Sans',sans-serif; cursor:pointer; }
@media (max-width:680px){ .cs-form .grid{ grid-template-columns:1fr; } .cs-eudr{ left:10px; width:min(230px,70vw); } }