/* ============================================================
   Packagly — product/worldwide-delivery.css
   Depends on: common.css (variables, reset, icon helpers)
   Responsive @media rules live in responsive.css
   ============================================================ */

/* ============================================================
   WORLDWIDE DELIVERY BANNER
   ============================================================ */
.wwd-section {
  background: #ffffff;
  padding: 6px 0 64px;
}
.wwd-card {
  position: relative;
  background: #f4f6f4;
  border: 1px solid #e7ebe7;
  border-radius: 16px;
  overflow: hidden;
}

/* ---- top: intro | divider | free-shipping | art ---- */
.wwd-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 30px;
  padding: 24px 0 24px 36px; /* no right padding -> art bleeds to the edge */
}
.wwd-overline {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}
.wwd-title {
  margin: 0 0 10px;
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: #14241b;
}
.wwd-title .accent {
  color: var(--green);
}
.wwd-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #5d6b62;
  max-width: 380px;
}
.wwd-sep {
  align-self: stretch;
  width: 1px;
  background: #dfe4de;
}
.wwd-ship {
  display: flex;
  align-items: center;
  gap: 18px;
}
.wwd-globe {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(112, 174, 19, 0.25);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wwd-globe img {
  width: 38px;
  height: 38px;
}
.wwd-ship-text {
  margin: 0;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #15241b;
}
.wwd-ship-text .accent {
  color: var(--green);
}
.wwd-art {
  align-self: end;
  justify-self: end;
}
.wwd-art img {
  display: block;
  height: 188px;
  width: auto;
}

/* ---- bottom: 4 feature columns ---- */
.wwd-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e3e8e2;
}
.wwd-feat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-left: 1px solid #e3e8e2;
}
.wwd-feat:first-child {
  border-left: none;
}
.wwd-feat-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(112, 174, 19, 0.35);
  background: #eef5e3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wwd-feat-ico img {
  width: 22px;
  height: 22px;
}
.wwd-feat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wwd-feat-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #16241c;
  line-height: 1.2;
}
.wwd-feat-text small {
  font-size: 12.5px;
  color: #7a877e;
}