/**
 * Weblytic — shared UI primitives (one definition each).
 * Use these across product / category / cms instead of page-local copies.
 */

/* Shell / rail */
.wbl-shell {
  max-width: var(--wbl-max);
  margin: 0 auto;
  padding: 12px var(--wbl-container-pad-x) 0;
  box-sizing: border-box;
}

/* Card surface */
.wbl-card {
  background: var(--wbl-surface);
  border: 1px solid var(--wbl-line);
  border-radius: var(--wbl-radius-xl);
  box-shadow: var(--wbl-shadow);
}

.wbl-card--pad {
  padding: 22px 22px 24px;
}

/* Section number + title */
.wbl-sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
}

.wbl-sec-head h2 {
  margin: 0;
  font-size: var(--wbl-h2-size);
  font-weight: var(--wbl-weight-bold);
  color: var(--wbl-ink, #0f1b33);
}

.wbl-sec-num {
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--wbl-accent) 35%, #c8c4e8);
  letter-spacing: -0.02em;
}

/* Equal 6/6 duo row */
.wbl-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wbl-gap);
  align-items: stretch;
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.wbl-duo > .wbl-card,
.wbl-duo > .wbl-pp-sec {
  min-width: 0;
  height: 100%;
}

@media (max-width: 900px) {
  .wbl-duo {
    grid-template-columns: 1fr;
  }
}

/* Primary / ghost buttons */
.wbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--wbl-radius-sm);
  font-size: var(--wbl-text-sm);
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.wbl-btn--primary {
  background: linear-gradient(135deg, var(--wbl-accent-2), var(--wbl-accent));
  color: #fff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--wbl-accent) 35%, transparent);
}

.wbl-btn--ghost {
  background: #fff;
  color: var(--wbl-accent) !important;
  border: 1.5px solid var(--wbl-accent);
}

.wbl-btn--block {
  width: 100%;
}

/* Icon chip */
.wbl-ico {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--wbl-accent-soft);
  color: var(--wbl-accent);
}

.wbl-ico svg {
  width: 16px;
  height: 16px;
}

/* Pill tab */
.wbl-pill-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--wbl-surface);
  border: 1px solid var(--wbl-line);
  box-shadow: var(--wbl-shadow-sm);
  scrollbar-width: none;
}

.wbl-pill-tabs::-webkit-scrollbar {
  display: none;
}

.wbl-pill-tabs a {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: var(--wbl-radius-pill);
  color: var(--wbl-ink-muted, #6a7590);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
}

.wbl-pill-tabs a.is-active {
  background: var(--wbl-accent);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--wbl-accent) 32%, transparent);
}