/* ==========================================================================
   ABMKeys Sections — Phases 6, 7, 9, 10
   ========================================================================== */

/* --- Phase 6: Section Utilities --- */

.abm-section {
  padding: 72px 60px !important;
  background: var(--abm-bg) !important;
}
.abm-section-white {
  padding: 72px 60px !important;
  background: var(--abm-white) !important;
}

/* Section heading */
.abm-sec-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  color: var(--abm-ink) !important;
  margin-bottom: 0 !important;
}
.abm-sec-title span,
.abm-sec-title em {
  color: var(--abm-blue) !important;
  font-style: normal !important;
}
.abm-sec-sub {
  font-size: 13px !important;
  color: var(--abm-muted) !important;
  margin-top: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* See all link */
.abm-see-all {
  font-size: 13px !important;
  color: var(--abm-blue) !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: letter-spacing 0.2s !important;
}
.abm-see-all:hover {
  letter-spacing: 0.02em !important;
}

/* Diagonal divider */
.abm-diag {
  height: 72px;
  background: var(--abm-bg);
  clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
  margin-top: -36px;
  position: relative;
  z-index: 1;
}

/* Brands strip */
.abm-brands {
  background: var(--abm-bg);
  padding: 8px 60px 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}
.abm-brands-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--abm-muted) !important;
  text-transform: uppercase !important;
  padding-right: 28px !important;
  border-right: 1px solid var(--abm-border) !important;
  white-space: nowrap !important;
}
.abm-brand-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #CBD5E1 !important;
  transition: color 0.2s !important;
  cursor: default !important;
}
.abm-brand-name:hover {
  color: var(--abm-blue) !important;
}

/* --- Phase 7: Category Cards (HTML widget / Icon Box approach) --- */

.abm-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
}
.abm-cat-card {
  background: var(--abm-white) !important;
  border: 1px solid var(--abm-border) !important;
  border-radius: 12px !important;
  padding: 22px 18px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: var(--abm-shadow-sm) !important;
}
.abm-cat-card:hover {
  border-color: var(--abm-blue) !important;
  background: var(--abm-blue-pale) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(27,79,216,0.1) !important;
}
.abm-cat-card .cat-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.abm-cat-card .cat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--abm-ink);
  margin-bottom: 3px;
  font-family: 'DM Sans', sans-serif;
}
.abm-cat-card .cat-count {
  font-size: 11px;
  color: var(--abm-muted);
  font-family: 'DM Mono', monospace;
}

/* --- Phase 9: Trust Strip --- */

.abm-trust {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  border-top: 1px solid var(--abm-border) !important;
  background: var(--abm-white) !important;
}
.abm-trust-item {
  padding: 32px 36px !important;
  border-right: 1px solid var(--abm-border) !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.abm-trust-item:last-child {
  border-right: none !important;
}
.abm-trust-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--abm-blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.abm-trust-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--abm-ink);
  margin-bottom: 4px;
  font-family: 'DM Sans', sans-serif;
}
.abm-trust-desc {
  font-size: 12px;
  color: var(--abm-body);
  line-height: 1.6;
  font-family: 'DM Sans', sans-serif;
}

/* --- Phase 10: Promo / WhatsApp Banner --- */

.abm-promo {
  background: linear-gradient(110deg, #1B4FD8 0%, #1240b8 100%) !important;
  padding: 44px 60px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
}
.abm-promo h2 {
  font-family: 'Syne', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: white !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 6px !important;
}
.abm-promo p {
  font-size: 14px !important;
  color: rgba(255,255,255,0.7) !important;
  max-width: 420px !important;
}
.abm-promo-btn {
  padding: 13px 30px !important;
  background: white !important;
  color: var(--abm-blue) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  flex-shrink: 0 !important;
}