/* ═══════════════════════════════════════════════════════════
   SM Experience Quiz  –  v1.1.7
   All colours driven by CSS custom properties.
   Admin settings page overrides them via inline <style>.
═══════════════════════════════════════════════════════════ */

.sm-bikequiz {
  --smq-accent:        #e8751a;
  --smq-accent-light:  #fef3ea;
  --smq-accent-ring:   rgba(232,117,26,.22);
  --smq-text:          #2e2a26;
  --smq-muted:         #726a61;
  --smq-surface:       #f7f4f0;
  --smq-border:        #e8e1d8;
  --smq-shadow:        0 16px 40px rgba(33,28,24,.08);
  --smq-btn-bg:        #e8751a;
  --smq-btn-text:      #ffffff;
  --smq-card-radius:   16px;
  --smq-answer-radius: 14px;
  --smq-badge-bg:      #f4efe8;
  --smq-badge-text:    #5e564f;

  color:     var(--smq-text);
  max-width: 1120px;
  margin:    0 auto;
  font-size: 16px;
}

/* ── Hard reset: stop ALL theme colours bleeding in ─────────
   Covers links, buttons, headings, focus rings.              */
/* Force [hidden] to always work — some themes override it */
.sm-bikequiz [hidden] { display: none !important; }

.sm-bikequiz *, .sm-bikequiz *::before, .sm-bikequiz *::after {
  box-sizing: border-box;
}
.sm-bikequiz a,
.sm-bikequiz a:link,
.sm-bikequiz a:visited,
.sm-bikequiz a:hover,
.sm-bikequiz a:active,
.sm-bikequiz a:focus {
  color: inherit !important;
  text-decoration: none !important;
  background-color: transparent;    /* kills any theme ::before highlight */
}
.sm-bikequiz button {
  font-family: inherit;
  font-size:   inherit;
  background:  none;
  color:       inherit;
}
/* Kill WordPress theme focus outlines that may be pink/purple */
.sm-bikequiz *:focus { outline: 2px solid var(--smq-accent) !important; outline-offset: 2px; }
.sm-bikequiz *:focus:not(:focus-visible) { outline: none !important; }

/* ══════════════════════════════════════════════════════════
   QUIZ CARD
══════════════════════════════════════════════════════════ */
.sm-bikequiz__card {
  background:    #fff;
  border:        1px solid var(--smq-border);
  border-radius: 28px;
  box-shadow:    var(--smq-shadow);
  padding:       36px 32px 28px;
}

/* ── Segmented progress ─────────────────────────────────── */
.sm-bikequiz__progress-track {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}
.sm-bikequiz__progress-pill {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--smq-border);
  transition: background .25s ease;
}
.sm-bikequiz__progress-pill.is-done    { background: var(--smq-accent); }
.sm-bikequiz__progress-pill.is-current { background: var(--smq-accent); opacity: .4; }

/* ── Step label ─────────────────────────────────────────── */
.sm-bikequiz__meta {
  text-align: center; margin: 0 0 8px;
  color: var(--smq-muted); font-size: 14px;
}

/* ── Question ───────────────────────────────────────────── */
.sm-bikequiz__question {
  text-align: center;
  font-size: clamp(20px, 2.8vw, 36px);
  color: var(--smq-text); line-height: 1.2;
  margin: 0 0 22px;
}

/* ══════════════════════════════════════════════════════════
   ANSWER BUTTONS
   NOTE: All hover/selected states use !important to override
   any theme stylesheet that injects pink/purple colours.
══════════════════════════════════════════════════════════ */
.sm-bikequiz__answers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
/* 2-answer questions (guided type) render as 2-col */
.sm-bikequiz__answers--cols-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 640px;
  margin: 0 auto;
}
/* 4-answer questions (vibe) render as 2x2 grid */
.sm-bikequiz__answers--cols-4 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.sm-bikequiz__answer {
  appearance: none !important;
  background: var(--smq-surface) !important;
  border: 2px solid var(--smq-border) !important;
  border-radius: var(--smq-answer-radius);
  padding: 28px 20px;
  min-height: 140px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease,
              transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  color: var(--smq-text) !important;
  text-align: center;
}
.sm-bikequiz__answer:hover,
.sm-bikequiz__answer:focus {
  border-color: var(--smq-accent) !important;
  background:   var(--smq-accent-light) !important;
  color:        var(--smq-text) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--smq-accent-ring);
  outline: none !important;
}
/* Selected state — the only state that should show the accent colour */
.sm-bikequiz__answer.is-selected,
.sm-bikequiz__answer.is-selected:hover,
.sm-bikequiz__answer.is-selected:focus {
  border-color: var(--smq-accent) !important;
  background:   var(--smq-accent-light) !important;
  color:        var(--smq-text) !important;
  box-shadow:   0 0 0 3px var(--smq-accent-ring) !important;
  transform: translateY(-1px);
  outline: none !important;
}
.sm-bikequiz__answer-icon {
  width: 46px; height: 46px;
  background: transparent !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 12px;
  color: var(--smq-muted) !important;
  transition: color .15s ease;
}
.sm-bikequiz__answer:hover    .sm-bikequiz__answer-icon,
.sm-bikequiz__answer:focus    .sm-bikequiz__answer-icon,
.sm-bikequiz__answer.is-selected .sm-bikequiz__answer-icon {
  color: var(--smq-accent) !important;
  background: transparent !important;
}

/* Multi-select variant — checkbox indicator top-right, no auto-advance */
.sm-bikequiz__answer--multi { position: relative; }
.sm-bikequiz__answer-check {
  position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--smq-border);
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.sm-bikequiz__answer--multi.is-selected .sm-bikequiz__answer-check {
  border-color: var(--smq-accent);
  background: var(--smq-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
.sm-bikequiz__continue {
  display: block; margin: 20px auto 0; padding: 12px 32px;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--smq-accent) !important; color: #fff !important;
  font-size: 14px; font-weight: 600;
}
.sm-bikequiz__continue:hover { opacity: .9; }

.sm-bikequiz__answer-label {
  font-size: 14px; font-weight: 600;
  color: var(--smq-text) !important;
}
.sm-bikequiz__answer-sublabel {
  display: block;
  font-size: 12px; font-weight: 400;
  color: var(--smq-muted) !important;
  margin-top: 4px; line-height: 1.4;
  text-align: center;
}

/* ── Quiz footer ────────────────────────────────────────── */
.sm-bikequiz__footer {
  margin-top: 24px;
  display: flex; justify-content: center; align-items: center;
}
.sm-bikequiz__back {
  appearance: none; border: 0 !important; background: transparent !important;
  box-shadow: none !important; outline: none !important;
  color: var(--smq-muted) !important; font-size: 14px; font-weight: 400;
  cursor: pointer; padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none !important;
  letter-spacing: .01em;
}
.sm-bikequiz__back:hover { color: var(--smq-text) !important; }

/* ══════════════════════════════════════════════════════════
   RESULTS WRAPPER
══════════════════════════════════════════════════════════ */
.sm-bikequiz__results { padding: 0; }

.sm-bikequiz__results-head {
  margin-bottom: 20px;
}
.sm-bikequiz__eyebrow {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--smq-accent) !important; margin: 0 0 6px; font-weight: 700;
}
.sm-bikequiz__results-title {
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--smq-text); line-height: 1.2; margin: 0 0 4px;
}
.sm-bikequiz__results-subtitle { color: var(--smq-muted); font-size: 14px; margin: 0; }
.sm-bikequiz__loading { color: var(--smq-muted); padding: 8px 0; font-size: 15px; }

/* Results grid — columns adapt to card count via data-cards attribute */
.sm-bikequiz__results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
}
/* 1 card — centred, max 400px wide so it doesn't stretch full width */
.sm-bikequiz__results-grid[data-cards="1"] {
  grid-template-columns: minmax(0, 400px);
  justify-content: center;
}
/* 2 cards — two equal columns, centred */
.sm-bikequiz__results-grid[data-cards="2"] {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}
/* 3 cards — full 3-col (default, already set above) */
.sm-bikequiz__results-grid[data-cards="3"] {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* ══════════════════════════════════════════════════════════
   BEST MATCH CARD — same layout as all cards, badge above image
══════════════════════════════════════════════════════════ */
.sm-bikequiz-card--best {
  border-color: var(--smq-accent);
  box-shadow: 0 6px 24px rgba(232,117,26,.15);
}

/* Badge overlays the top of the image — doesn't add height, so every
   card's image stays aligned regardless of whether it has this badge. */
.sm-bikequiz-card__match-badge {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--smq-accent-light);
  color: var(--smq-accent) !important;
  padding: 8px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(232,117,26,.15);
}



/* ══════════════════════════════════════════════════════════
   BUTTONS (shared)
══════════════════════════════════════════════════════════ */
.sm-bikequiz-card__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  cursor: pointer; border: 0;
  text-decoration: none !important;
  transition: opacity .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
/* Primary filled button */
.sm-bikequiz-card__btn--primary,
.sm-bikequiz-card__btn--primary:link,
.sm-bikequiz-card__btn--primary:visited,
.sm-bikequiz-card__btn--primary:hover,
.sm-bikequiz-card__btn--primary:focus,
.sm-bikequiz-card__btn--primary:active {
  background: var(--smq-btn-bg) !important;
  color:      var(--smq-btn-text) !important;
  padding: 13px 26px;
  box-shadow: 0 4px 14px rgba(232,117,26,.28);
  text-decoration: none !important;
}
.sm-bikequiz-card__btn--primary:hover,
.sm-bikequiz-card__btn--primary:focus {
  opacity: .9;
  box-shadow: 0 6px 20px rgba(232,117,26,.38);
  outline: none !important;
}
/* Ghost outlined button */
.sm-bikequiz-card__btn--ghost,
.sm-bikequiz-card__btn--ghost:link,
.sm-bikequiz-card__btn--ghost:visited,
.sm-bikequiz-card__btn--ghost:hover,
.sm-bikequiz-card__btn--ghost:focus,
.sm-bikequiz-card__btn--ghost:active {
  background: #fff !important;
  color:      var(--smq-text) !important;
  padding: 12px 22px;
  border: 1.5px solid var(--smq-border) !important;
  text-decoration: none !important;
}
.sm-bikequiz-card__btn--ghost:hover,
.sm-bikequiz-card__btn--ghost:focus {
  border-color: var(--smq-accent) !important;
  color:        var(--smq-accent) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   STANDARD RESULT CARDS (2nd–6th)
══════════════════════════════════════════════════════════ */
.sm-bikequiz-card {
  border: 1px solid var(--smq-border);
  border-radius: var(--smq-card-radius);
  background: #fff; overflow: hidden;
  box-shadow: 0 4px 14px rgba(33,28,24,.06);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sm-bikequiz-card:not(.sm-bikequiz-card--hero):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(33,28,24,.10);
}

.sm-bikequiz-card__media {
  display: block; aspect-ratio: 1/1;
  background: #fff; overflow: hidden;
  color: transparent !important; line-height: 0;
  position: relative;  /* needed for tour badge overlay */
}

/* ACF Badge — overlaid on the card image (like homepage) */
.sm-bikequiz-card__tour-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--smq-accent);
  color: #fff !important;
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em;
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1;
  pointer-events: none;
}
.sm-bikequiz-card__media:hover,
.sm-bikequiz-card__media:visited,
.sm-bikequiz-card__media:focus {
  color: transparent !important; outline: none !important;
}
.sm-bikequiz-card__img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border: 0; outline: 0; transition: transform .3s ease;
}
.sm-bikequiz-card:not(.sm-bikequiz-card--hero):hover .sm-bikequiz-card__img {
  transform: scale(1.04);
}
.sm-bikequiz-card__img--placeholder {
  width: 100%; height: 100%; display: block;
  background: linear-gradient(135deg,#ece6de,#f5f1eb);
}

.sm-bikequiz-card__body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; flex: 1;
}

/* Badges */
.sm-bikequiz-card__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.sm-bikequiz-card__badge {
  background: var(--smq-badge-bg);
  border: 1px solid var(--smq-border);
  border-radius: 999px; padding: 3px 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--smq-badge-text) !important;
  line-height: 1.6; white-space: nowrap;
}

/* Title */
.sm-bikequiz-card__title {
  font-size: 15px !important; font-weight: 700; line-height: 1.25;
  margin: 0 0 8px;
  padding: 2% 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-transform: none !important;
}
.sm-bikequiz-card__title a,
.sm-bikequiz-card__title a:link,
.sm-bikequiz-card__title a:visited {
  color: var(--smq-text) !important; text-decoration: none !important;
}
.sm-bikequiz-card__title a:hover { color: var(--smq-accent) !important; }

/* Description */
.sm-bikequiz-card__desc {
  color: var(--smq-muted); font-size: 13px; line-height: 1.55;
  margin: 0 0 10px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sm-bikequiz-card__desc--included {
  font-weight: 600; color: var(--smq-text); -webkit-line-clamp: 2;
}
.sm-bikequiz-card__desc--caveat {
  font-weight: 600; color: #8a3a20; background: #fdeeea; border: 1px solid #f0c3b8;
  border-radius: 8px; padding: 10px 10px 12px;
  /* No line-clamp here (unlike the plain .sm-bikequiz-card__desc above) -
     these are meant to stay short by design (see admin settings field
     instructions), so clamping was only ever masking an over-long string
     with a silent "…" cut-off rather than actually fixing anything. */
  display: block; overflow: visible;
  /* Override the shared .sm-bikequiz-card__desc rule's flex:1 above -
     without this, each caveat box stretches to fill whatever leftover
     vertical space its own card happens to have (varying by how much
     description text sits above it), so identical text ends up as a
     different size box on every card. Sized to its own content only. */
  flex: 0 0 auto;
}
.sm-bikequiz-card__desc--caveat-link {
  text-decoration: none !important; display: block;
}
.sm-bikequiz-card__desc--caveat-link:hover,
.sm-bikequiz-card__desc--caveat-link:focus {
  text-decoration: underline !important; color: #8a3a20 !important;
}

/* Meta list */
.sm-bikequiz-card__meta {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sm-bikequiz-card__meta li {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--smq-muted); line-height: 1.4;
}
.sm-bikequiz-card__meta svg { flex-shrink: 0; color: var(--smq-accent); opacity: .8; }

/* Standard card CTA */
.sm-bikequiz-card__actions { margin-top: auto; padding-top: 2px; }
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary,
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary:link,
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary:visited,
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary:hover,
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary:focus,
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary:active {
  display: block; width: 100%; text-align: center;
  padding: 10px 16px; font-size: 13px;
  box-shadow: none;
  background-color: #e8751a !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.sm-bikequiz-card__actions .sm-bikequiz-card__btn--primary:hover {
  box-shadow: 0 4px 12px rgba(232,117,26,.25);
  opacity: .9;
}

/* ── Secondary section heading ──────────────────────── */
.sm-bikequiz__secondary-heading {
  font-size: 15px; font-weight: 600;
  color: var(--smq-muted);
  text-align: center;
  margin: 0 0 16px;
  letter-spacing: .01em;
}

/* ── View All Tours link ─────────────────────────────── */
.sm-bikequiz__view-all {
  text-align: center;
  margin-top: 20px;
}
.sm-bikequiz__view-all-link,
.sm-bikequiz__view-all-link:link,
.sm-bikequiz__view-all-link:visited {
  color: var(--smq-accent) !important;
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s ease;
}
.sm-bikequiz__view-all-link:hover { opacity: .75; }

/* ── Secondary section heading ──────────────────────── */
.sm-bikequiz__secondary-heading {
  font-size: 15px; font-weight: 600;
  color: var(--smq-muted);
  text-align: center;
  margin: 24px 0 16px;
  letter-spacing: .01em;
}

/* ── Results footer: Start Over + View All ──────────── */
.sm-bikequiz__results-footer {
  display: flex; justify-content: center;
  margin-top: 24px;
}
.sm-bikequiz__restart-btn {
  appearance: none; border: 1.5px solid var(--smq-border) !important;
  background: #fff !important; color: var(--smq-text) !important;
  border-radius: 999px; padding: 10px 22px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s ease, color .15s ease;
}
.sm-bikequiz__restart-btn:hover {
  border-color: var(--smq-accent) !important;
  color: var(--smq-accent) !important;
}

/* ── View All Tours link ─────────────────────────────── */
.sm-bikequiz__view-all { text-align: center; margin-top: 16px; }
.sm-bikequiz__view-all-link,
.sm-bikequiz__view-all-link:link,
.sm-bikequiz__view-all-link:visited {
  color: var(--smq-accent) !important;
  font-size: 14px; font-weight: 600;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s ease;
}
.sm-bikequiz__view-all-link:hover { opacity: .75; }

/* ══════════════════════════════════════════════════════════
   HIRE CARD (self-guided results)
══════════════════════════════════════════════════════════ */
.sm-bikequiz-card--hire {
  border-style: dashed;
  border-color: var(--smq-border);
}
.sm-bikequiz-card__hire-icon {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0 8px;
  color: var(--smq-accent);
  background: var(--smq-surface);
}

/* Bike Fleet has no public page — media is a plain div, not a link */
.sm-bikequiz-card__media--static { cursor: default; }

/* Experience/ride cards get a wider box than bike cards (1:1) — real
   landscape photography reads better at 3:2 than forced square. */
.sm-bikequiz-card__media--experience { aspect-ratio: 3/2; }

/* Compatible add-ons list */
.sm-bikequiz-card__addons {
  margin: 0 0 12px; font-size: 12.5px; color: var(--smq-muted);
}
.sm-bikequiz-card__addons strong { display: block; margin-bottom: 4px; color: var(--smq-text); font-weight: 600; }
.sm-bikequiz-card__addons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-bikequiz-card__addon--requested { color: var(--smq-accent); font-weight: 600; }

/* Inclusions list */
.sm-bikequiz-card__inclusions {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sm-bikequiz-card__inclusions li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--smq-muted); line-height: 1.4;
}
.sm-bikequiz-card__inclusions svg { flex-shrink: 0; margin-top: 2px; color: var(--smq-accent); opacity: .8; }

/* Book button (no href — plain button, styled like the primary CTA) */
.sm-bikequiz-card__book-btn {
  display: block; width: 100%; text-align: center;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; box-shadow: none;
  background-color: var(--smq-btn-bg, #e8751a) !important;
  color: var(--smq-btn-text, #ffffff) !important;
  border-radius: 999px;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.sm-bikequiz-card__book-btn:hover {
  box-shadow: 0 4px 12px rgba(232,117,26,.25);
  opacity: .9;
}

/* Plain link-style CTA — used by the catch-all card and experience/ride
   cards, which link to a real URL rather than triggering the booking
   hand-off. Kept as a separate class from __book-btn so the "Book This
   Bike" click handler doesn't also fire on these (it matched by class
   name only, which would've hijacked normal navigation). */
.sm-bikequiz-card__link-btn {
  display: block; width: 100%; text-align: center;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; box-shadow: none;
  background-color: var(--smq-btn-bg, #e8751a) !important;
  color: var(--smq-btn-text, #ffffff) !important;
  border-radius: 999px;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.sm-bikequiz-card__link-btn:hover {
  box-shadow: 0 4px 12px rgba(232,117,26,.25);
  opacity: .9;
}

/* Empty state */
.sm-bikequiz-empty {
  background: #fff; border: 1px solid var(--smq-border);
  border-radius: 18px; padding: 32px; text-align: center;
}
.sm-bikequiz-empty h4 { margin: 0 0 8px; font-size: 17px; color: var(--smq-text); }
.sm-bikequiz-empty p  { color: var(--smq-muted); margin: 0; font-size: 14px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 3-card grid drops to 2 cols; 1 and 2 card grids stay as-is */
  .sm-bikequiz__results-grid,
  .sm-bikequiz__results-grid[data-cards="3"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sm-bikequiz__results-grid[data-cards="1"] { grid-template-columns: minmax(0, 400px); }
  .sm-bikequiz__results-grid[data-cards="2"] { grid-template-columns: repeat(2, minmax(0, 380px)); }
}
@media (max-width: 767px) {
  .sm-bikequiz__card              { padding: 20px 16px 16px; border-radius: 18px; }
  .sm-bikequiz__answers           { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  /* All grid sizes collapse to single column on mobile */
  .sm-bikequiz__results-grid,
  .sm-bikequiz__results-grid[data-cards="1"],
  .sm-bikequiz__results-grid[data-cards="2"],
  .sm-bikequiz__results-grid[data-cards="3"] { grid-template-columns: 1fr; justify-content: stretch; }
  .sm-bikequiz__question          { font-size: 20px; }
  .sm-bikequiz__answer            { min-height: 110px; padding: 16px 10px; }
  .sm-bikequiz-card--hero         { padding: 22px 18px 24px; }
  .sm-bikequiz-card__hero-title   { font-size: 20px; }
  .sm-bikequiz-card__hero-actions { flex-direction: column; width: 100%; }
  .sm-bikequiz-card__btn--primary,
  .sm-bikequiz-card__btn--ghost   { width: 100%; justify-content: center; }
  .sm-bikequiz-card__title        { font-size: 16px; }
}
@media (max-width: 480px) {
  .sm-bikequiz__answers { grid-template-columns: 1fr; }
}