/* =============================================================
   components.css — buttons, cards, pills, accordion, forms, etc.
   ============================================================= */

/* Buttons */
.sbt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.4em; font-family:var(--sbt-font-tool); font-weight:600; font-size:.95rem;
  text-decoration:none; border-radius:var(--sbt-radius-pill); line-height:1;
  transition:transform var(--sbt-dur-1) var(--sbt-ease), background var(--sbt-dur-1) var(--sbt-ease), color var(--sbt-dur-1) var(--sbt-ease), box-shadow var(--sbt-dur-1) var(--sbt-ease);
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.sbt-btn--primary{ background:var(--sbt-spice); color:var(--sbt-basil); box-shadow:var(--sbt-shadow-1) }
.sbt-btn--primary:hover{ background:color-mix(in srgb, var(--sbt-spice) 90%, var(--sbt-basil)); transform:translateY(-1px); box-shadow:var(--sbt-shadow-2); color:var(--sbt-basil) }
.sbt-btn--secondary{ background:var(--sbt-basil); color:var(--sbt-cream) }
.sbt-btn--secondary:hover{ background:var(--sbt-herb); color:var(--sbt-cream); transform:translateY(-1px) }
.sbt-btn--ghost{ background:transparent; color:var(--sbt-basil); border-color:var(--sbt-basil) }
.sbt-btn--ghost:hover{ background:var(--sbt-basil); color:var(--sbt-cream) }
.sbt-btn--sm{ padding:.55em 1em; font-size:.85rem }
.sbt-btn--block{ width:100% }

/* Pills */
.sbt-pill{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.35em .85em; background:color-mix(in srgb, var(--sbt-sage) 35%, transparent);
  color:var(--sbt-basil); border-radius:var(--sbt-radius-pill); font-size:.8rem; font-weight:600; letter-spacing:.02em;
}
.sbt-pill--warm{ background:color-mix(in srgb, var(--sbt-spice) 30%, transparent); color:var(--sbt-rustic) }
.sbt-pill--ink{ background:var(--sbt-basil); color:var(--sbt-cream) }

.sbt-ad-pill{
  display:inline-block; margin-left:.35em; padding:.05em .4em; font-size:.65em;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  background:color-mix(in srgb, var(--sbt-rustic) 18%, transparent); color:var(--sbt-rustic);
  border-radius:var(--sbt-radius-pill); vertical-align:middle;
}

/* Cards */
.sbt-card{
  background:#fff; border-radius:var(--sbt-radius-md);
  box-shadow:var(--sbt-shadow-2); overflow:hidden;
  display:flex; flex-direction:column; transition:transform var(--sbt-dur-1) var(--sbt-ease), box-shadow var(--sbt-dur-1) var(--sbt-ease);
}
.sbt-card:hover{ transform:translateY(-2px); box-shadow:var(--sbt-shadow-3) }
.sbt-card__media{ aspect-ratio:4/3; background:var(--sbt-mist); overflow:hidden }
.sbt-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms var(--sbt-ease) }
.sbt-card:hover .sbt-card__media img{ transform:scale(1.04) }
.sbt-card__body{ padding:var(--sbt-space-4); display:flex; flex-direction:column; gap:var(--sbt-space-2); flex:1 }
.sbt-card__kicker{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sbt-rustic); font-weight:600 }
.sbt-card__title{ font-family:var(--sbt-font-display); font-size:1.2rem; font-weight:700; color:var(--sbt-basil); margin:0; line-height:1.2 }
.sbt-card__title a{ color:inherit; text-decoration:none }
.sbt-card__title a:hover{ color:var(--sbt-herb) }
.sbt-card__excerpt{ font-size:.92rem; color:color-mix(in srgb, var(--sbt-ink) 80%, transparent); margin:0 }
.sbt-card__meta{ display:flex; gap:var(--sbt-space-3); font-size:.78rem; color:var(--sbt-rustic); margin-top:auto }

/* Disclosure */
.sbt-disclosure{
  display:inline-flex; align-items:center; gap:.5em; flex-wrap:wrap;
  background:color-mix(in srgb, var(--sbt-mist) 80%, transparent);
  padding:.55em .9em; border-radius:var(--sbt-radius-pill);
  font-size:.78rem; color:var(--sbt-rustic);
}
.sbt-disclosure a{ color:var(--sbt-basil); font-weight:600 }
.sbt-disclosure--full{ display:block; max-width:60ch; padding:var(--sbt-space-4); border-radius:var(--sbt-radius-md) }

/* Accordion (FAQ) */
.sbt-accordion{ display:flex; flex-direction:column; gap:var(--sbt-space-2) }
.sbt-accordion__item{ background:#fff; border-radius:var(--sbt-radius-md); box-shadow:var(--sbt-shadow-1); overflow:hidden }
.sbt-accordion__btn{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:var(--sbt-space-4); text-align:left; font-family:var(--sbt-font-display); font-size:1.15rem; font-weight:600;
  color:var(--sbt-basil); gap:var(--sbt-space-4);
}
.sbt-accordion__btn::after{ content:"+"; font-size:1.4rem; color:var(--sbt-spice); transition:transform var(--sbt-dur-1) var(--sbt-ease) }
.sbt-accordion__item[open] .sbt-accordion__btn::after{ transform:rotate(45deg) }
.sbt-accordion__body{ padding:0 var(--sbt-space-4) var(--sbt-space-4); color:var(--sbt-ink) }

/* Forms */
.sbt-input, .sbt-select, .sbt-textarea{
  width:100%; padding:.75em 1em; border:1px solid color-mix(in srgb, var(--sbt-rustic) 25%, transparent);
  border-radius:var(--sbt-radius-sm); background:#fff; color:var(--sbt-ink);
  transition:border-color var(--sbt-dur-1) var(--sbt-ease), box-shadow var(--sbt-dur-1) var(--sbt-ease);
}
.sbt-input:focus, .sbt-select:focus, .sbt-textarea:focus{
  outline:none; border-color:var(--sbt-herb); box-shadow:0 0 0 3px color-mix(in srgb, var(--sbt-sage) 35%, transparent);
}
.sbt-label{ display:block; font-weight:600; margin-bottom:.4em; color:var(--sbt-basil) }
.sbt-field{ margin-bottom:var(--sbt-space-4) }
.sbt-help{ font-size:.82rem; color:var(--sbt-rustic); margin-top:.3em }

/* Score dots */
.sbt-score{ display:inline-flex; align-items:center; gap:.3em; vertical-align:middle }
.sbt-score-dot{ width:8px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--sbt-rustic) 25%, transparent); display:inline-block }
.sbt-score-dot.is-filled{ background:var(--sbt-spice) }
.sbt-score-label{ font-size:.78rem; color:var(--sbt-rustic); font-weight:600 }

/* Breadcrumbs */
.sbt-breadcrumbs ol{ list-style:none; margin:0; padding:var(--sbt-space-3) 0; display:flex; flex-wrap:wrap; gap:.4em; font-size:.85rem; color:var(--sbt-rustic) }
.sbt-breadcrumbs li + li::before{ content:"›"; margin-right:.4em; color:color-mix(in srgb, var(--sbt-rustic) 60%, transparent) }
.sbt-breadcrumbs a{ color:var(--sbt-rustic); text-decoration:none }
.sbt-breadcrumbs a:hover{ color:var(--sbt-basil) }
.sbt-breadcrumbs [aria-current]{ color:var(--sbt-basil); font-weight:600 }

/* Trust badges */
.sbt-trust{ display:flex; gap:var(--sbt-space-4); flex-wrap:wrap; align-items:center }
.sbt-trust__item{
  display:inline-flex; align-items:center; gap:.5em; padding:.5em .9em;
  background:color-mix(in srgb, var(--sbt-mist) 70%, transparent); border-radius:var(--sbt-radius-pill);
  font-size:.82rem; color:var(--sbt-rustic);
}

/* Byline */
.sbt-byline{ display:flex; gap:.4em; flex-wrap:wrap; font-size:.88rem; color:var(--sbt-rustic) }
.sbt-byline__by strong{ color:var(--sbt-basil) }

/* Meta pills */
.sbt-meta-pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sbt-space-2) }
.sbt-meta-pills li{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--sbt-mist); padding:.4em .9em; border-radius:var(--sbt-radius-pill);
  font-size:.85rem; color:var(--sbt-basil); font-weight:500;
}

/* Icons */
.sbt-icon{ width:1em; height:1em; vertical-align:-0.125em; flex-shrink:0; fill:currentColor }

/* Pagination */
.sbt-pagination{ display:flex; justify-content:center; gap:var(--sbt-space-2); margin-top:var(--sbt-space-7); list-style:none; padding:0 }
.sbt-pagination a, .sbt-pagination span{
  padding:.55em .9em; border-radius:var(--sbt-radius-sm); text-decoration:none;
  background:#fff; box-shadow:var(--sbt-shadow-1); color:var(--sbt-basil);
}
.sbt-pagination .current{ background:var(--sbt-basil); color:var(--sbt-cream) }

/* Consent banner */
.sbt-consent{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:540px; width:calc(100% - 32px); background:#fff; border-radius:var(--sbt-radius-lg);
  box-shadow:var(--sbt-shadow-3); padding:var(--sbt-space-4) var(--sbt-space-5);
  z-index:9999; border:1px solid color-mix(in srgb, var(--sbt-rustic) 12%, transparent);
}
.sbt-consent__inner{ display:flex; flex-direction:column; gap:var(--sbt-space-3) }
.sbt-consent__actions{ display:flex; gap:var(--sbt-space-2); justify-content:flex-end; flex-wrap:wrap }

/* Misc */
.sbt-eyebrow{
  display:inline-block; font-family:var(--sbt-font-tool); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color:var(--sbt-spice); margin-bottom:var(--sbt-space-2);
}
.sbt-divider{ height:1px; background:color-mix(in srgb, var(--sbt-rustic) 12%, transparent); margin:var(--sbt-space-6) 0 }

.sbt-affiliate{ font-weight:500 }

.sbt-section-head{ text-align:center; max-width:60ch; margin:0 auto var(--sbt-space-6) }
.sbt-section-head h2{ margin-bottom:var(--sbt-space-2) }
.sbt-section-head p{ color:color-mix(in srgb, var(--sbt-ink) 75%, transparent); font-size:1.05rem }