/* Styling for the guided ordering walkthrough.

   Everything is scoped under #guidedShell. The id matters: the site-wide theme
   repaints anything whose class contains "card", "step", "item" and so on with
   !important at a high specificity, and an id is what reliably wins.

   The walkthrough sits on the same pale lavender card as the rest of the site,
   so text here is dark on light. The two places that are genuinely dark are the
   step you are standing on and the credits banner, and those say so where they
   set their own background. */

#guidedShell {
  --guided-line: rgb(var(--c-magenta-300) / 0.34);
  --guided-glow: 0 0 12px rgb(var(--c-magenta-300-2) / 0.55);
}

/* ---------- progress header ---------- */

#guidedShell .guided-topbar {
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--guided-line);
}

#guidedShell .guided-topbar-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

#guidedShell .guided-kicker {
  margin: 0;
  color: var(--lh-accent) !important;
  font-size: 0.95rem !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#guidedShell a.guided-exit {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  color: var(--lh-muted) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#guidedShell .guided-progress {
  height: 10px;
  margin: 0.7rem 0 1rem;
  border-radius: 999px;
  background: rgb(var(--c-violet-700-4));
  overflow: hidden;
}

#guidedShell .guided-progress span {
  display: block;
  height: 100%;
  min-width: 10px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--c-violet-500)), rgb(var(--c-violet-400-3)) 58%, rgb(var(--c-magenta-300))) !important;
  box-shadow: 0 0 10px rgb(var(--c-violet-400-2) / 0.95), 0 0 24px rgb(var(--c-magenta-400) / 0.8);
  transition: width 0.3s ease;
}

#guidedShell ol.guided-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#guidedShell li.guided-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgb(var(--c-violet-400) / 0.35);
  border-radius: 999px;
  color: var(--lh-muted) !important;
  font-size: 0.95rem !important;
  font-weight: 700;
}

#guidedShell li.guided-step.is-current .guided-step-number {
  background: rgb(var(--c-pure-white) / 0.3);
}

#guidedShell li.guided-step.is-current {
  border-color: rgb(var(--c-magenta-300-2)) !important;
  background: linear-gradient(135deg, rgb(var(--c-violet-500)) 0%, rgb(var(--c-violet-400-2)) 50%, rgb(var(--c-magenta-300)) 100%) !important;
  color: rgb(var(--c-pure-white)) !important;
  box-shadow: var(--guided-glow);
}

#guidedShell li.guided-step.is-done {
  border-color: rgb(var(--c-green-100-3) / 0.7) !important;
  color: rgb(var(--c-green-600-2)) !important;
}

#guidedShell .guided-step-number {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgb(var(--c-accent) / 0.14);
  font-size: 0.85rem;
  font-weight: 900;
}

#guidedShell .guided-saved {
  margin: 0.9rem 0 0;
  color: var(--lh-muted) !important;
  font-size: 1rem !important;
}

/* ---------- the step card ---------- */

#guidedShell .guided-card h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.9rem, 4vw, 2.9rem) !important;
  line-height: 1.05 !important;
}

#guidedShell .guided-lede {
  margin: 0 0 1.4rem;
  color: var(--lh-muted) !important;
  font-size: 1.2rem !important;
  line-height: 1.55;
}

/* ---------- the two big choices on the first step ---------- */

#guidedShell .guided-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

#guidedShell .guided-choice {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--guided-line);
  border-radius: 18px;
  text-decoration: none;
}

#guidedShell .guided-choice h2 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.5rem !important;
}

#guidedShell .guided-choice p {
  flex: 1 1 auto;
  margin: 0 0 1rem;
  color: var(--lh-muted) !important;
  font-size: 1.1rem !important;
  line-height: 1.5;
}

/* The credits note sits under the description rather than sharing its stretch,
   so the button stays at the bottom of the card and the two cards line up. */
#guidedShell .guided-choice-credits {
  flex: 0 0 auto;
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  /* The site sweep clears borders off paragraphs, so this one has to insist. */
  border: 1px solid rgb(var(--c-neon) / 0.45) !important;
  border-radius: 12px;
  color: var(--lh-ink) !important;
  font-size: 1.05rem !important;
}

#guidedShell .guided-choice-credits strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--lh-accent) !important;
  font-size: 1.2rem;
  font-weight: 800;
}

#guidedShell .guided-total-credits {
  color: var(--lh-accent) !important;
  font-weight: 800;
}

#guidedShell .guided-credit-list {
  margin: 0.35rem 0 0.4rem;
  padding: 0;
  list-style: none;
}

#guidedShell .guided-credit-list li {
  color: var(--lh-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 700;
}

/* On the picker, the same news sits across the top of the list, where someone
   is about to start counting. */
#guidedShell .guided-credit-banner {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgb(var(--c-neon) / 0.5) !important;
  border-radius: 12px;
  background: rgb(var(--c-violet-900)) !important;
  color: rgb(var(--c-violet-200)) !important;
  font-size: 1.05rem !important;
}

#guidedShell .guided-credit-banner strong {
  color: rgb(var(--c-pure-white)) !important;
}

#guidedShell .guided-choice-tag {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgb(var(--c-neon) / 0.5);
  border-radius: 999px;
  color: var(--lh-accent) !important;
  font-size: 0.85rem !important;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ---------- reusable pieces ---------- */

#guidedShell .guided-figure {
  margin: 1.2rem 0;
  text-align: center;
}

#guidedShell .guided-figure img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid var(--guided-line);
  background: rgb(var(--c-pure-white));
}

#guidedShell .guided-figure figcaption {
  margin-top: 0.5rem;
  color: var(--lh-muted) !important;
  font-size: 1rem !important;
  font-weight: 700;
}

#guidedShell .guided-figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}

#guidedShell .guided-figure-row figure {
  margin: 0;
}

#guidedShell .guided-figure-row img {
  max-width: 100%;
}

#guidedShell .guided-note {
  margin: 1.2rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--guided-line);
  border-radius: 16px;
}

#guidedShell .guided-note.is-warning {
  border-color: rgb(var(--c-amber-200-2) / 0.62) !important;
}

#guidedShell .guided-note h2,
#guidedShell .guided-note h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem !important;
}

#guidedShell .guided-note ul {
  margin: 0.4rem 0 0;
  padding-left: 1.3rem;
}

#guidedShell .guided-note li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

/* The order code, shown big enough to copy onto an envelope by hand. */
#guidedShell .guided-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgb(var(--c-green-100-3) / 0.6);
  border-radius: 16px;
  background: rgb(var(--c-green-300) / 0.1) !important;
}

#guidedShell .guided-code strong {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1.6rem, 5vw, 2.3rem) !important;
  letter-spacing: 0.06em;
  color: var(--lh-ink) !important;
}

#guidedShell .guided-code-label {
  flex: 1 0 100%;
  margin: 0;
  color: rgb(var(--c-green-600-2)) !important;
  font-size: 1rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#guidedShell button.guided-copy {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(var(--c-green-100-3) / 0.8);
  border-radius: 999px;
  background: rgb(var(--c-green-300) / 0.2);
  color: rgb(var(--c-green-600-2));
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

#guidedShell button.guided-copy:hover,
#guidedShell button.guided-copy:focus-visible {
  background: rgb(var(--c-green-300) / 0.35);
}

#guidedShell .guided-baglist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

#guidedShell .guided-baglist li {
  padding: 0.7rem 0.85rem;
  border: 1px dashed rgb(var(--c-accent) / 0.4);
  border-radius: 12px;
  font-size: 1.05rem !important;
}

#guidedShell .guided-baglist strong {
  display: block;
  font-size: 1.2rem;
}

/* ---------- actions ---------- */

#guidedShell .guided-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--guided-line);
}

#guidedShell .guided-actions .btn,
#guidedShell .guided-actions .btn-secondary {
  min-height: 52px;
}

#guidedShell a.guided-skip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--lh-muted) !important;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 720px) {
  #guidedShell .guided-actions .btn,
  #guidedShell .guided-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  #guidedShell .guided-step-label {
    font-size: 0.95rem;
  }
}

/* ---------- the email timeline ---------- */

#guidedShell .guided-note.is-good {
  border-color: rgb(var(--c-green-100-3) / 0.6) !important;
  background: rgb(var(--c-green-300) / 0.08) !important;
}

#guidedShell ol.guided-email-list {
  counter-reset: guided-email;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

#guidedShell ol.guided-email-list li {
  counter-increment: guided-email;
  position: relative;
  margin-bottom: 0.6rem;
  padding: 0.75rem 0.9rem 0.75rem 3.2rem;
  border: 1px solid rgb(var(--c-violet-400) / 0.28);
  border-radius: 14px;
}

#guidedShell ol.guided-email-list li::before {
  content: "\2709";
  position: absolute;
  left: 0.85rem;
  top: 0.7rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgb(var(--c-accent) / 0.12);
  font-size: 1rem;
}

#guidedShell ol.guided-email-list li.is-now {
  border-color: rgb(var(--c-green-100-3) / 0.75) !important;
  background: rgb(var(--c-green-300) / 0.12) !important;
}

#guidedShell ol.guided-email-list strong {
  display: block;
  font-size: 1.1rem;
}

#guidedShell ol.guided-email-list span {
  color: var(--lh-muted) !important;
  font-size: 1.02rem !important;
  line-height: 1.45;
}

#guidedShell .guided-email-footnote {
  margin: 0.9rem 0 0;
  color: var(--lh-muted) !important;
  font-size: 1.02rem !important;
}

#guidedShell .guided-inline-form {
  display: inline-flex;
  margin: 0;
}


/* ---------- picking tests inside the walkthrough ---------- */

#guidedShell .guided-group-title {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.25rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lh-accent) !important;
}

#guidedShell ul.guided-picklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

#guidedShell li.guided-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(var(--c-violet-400) / 0.32);
  border-radius: 16px;
}

#guidedShell li.guided-pick.is-chosen {
  border-color: rgb(var(--c-magenta-300-2)) !important;
  background: rgb(var(--c-violet-400-2) / 0.14) !important;
}

#guidedShell .guided-pick-name {
  flex: 1 1 200px;
  min-width: 0;
}

#guidedShell .guided-pick-name strong {
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
}

#guidedShell .guided-pick-name span {
  color: var(--lh-muted) !important;
  font-size: 1.02rem !important;
}

#guidedShell .guided-pick-name s {
  opacity: 0.7;
  margin-left: 0.3rem;
}

#guidedShell .guided-pick-name em {
  display: block;
  color: rgb(var(--c-amber-600-3)) !important;
  font-style: normal;
  font-weight: 800;
}

#guidedShell .guided-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

#guidedShell button.guided-step-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgb(var(--c-magenta-300-2) / 0.6);
  border-radius: 50%;
  background: rgb(var(--c-violet-400-2) / 0.18);
  color: var(--lh-ink);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

#guidedShell button.guided-step-btn:hover,
#guidedShell button.guided-step-btn:focus-visible {
  background: rgb(var(--c-magenta-300-2) / 0.36);
}

#guidedShell .guided-stepper input {
  width: 64px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(var(--c-violet-400) / 0.45);
  border-radius: 12px;
  background: rgb(var(--c-pure-white));
  color: var(--lh-ink) !important;
  font-size: 1.25rem !important;
  font-weight: 800;
  text-align: center;
}

#guidedShell .guided-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgb(var(--c-green-100-3) / 0.6);
  border-radius: 16px;
  background: rgb(var(--c-green-300) / 0.1) !important;
}

#guidedShell .guided-total span {
  color: rgb(var(--c-green-600-2)) !important;
  font-size: 1rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#guidedShell .guided-total strong {
  font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
  color: var(--lh-ink) !important;
}

#guidedShell .guided-total small {
  flex: 1 0 100%;
  color: var(--lh-muted) !important;
  font-size: 1.02rem !important;
}

#guidedShell .guided-dilute {
  border-color: rgb(var(--c-amber-200-2) / 0.62) !important;
}

#guidedShell label.guided-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.8rem;
  font-size: 1.05rem;
  line-height: 1.45;
  cursor: pointer;
}

#guidedShell label.guided-agree input {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
}

#guidedShell .guided-fineprint {
  margin: 0.8rem 0 0;
  color: var(--lh-muted) !important;
  font-size: 1rem !important;
}

#guidedShell .btn:disabled,
#guidedShell button.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ---------- centred layout ---------- */
/* Everything in the walkthrough reads centred. Lists lose their bullets so the
   centred text does not sit off to one side of a marker. */

#guidedShell .guided-card,
#guidedShell .guided-card h1,
#guidedShell .guided-card h2,
#guidedShell .guided-card h3,
#guidedShell .guided-card p,
#guidedShell .guided-card li,
#guidedShell .guided-card address,
#guidedShell .guided-card figcaption,
#guidedShell .guided-card label {
  text-align: center;
}

#guidedShell .guided-card ul,
#guidedShell .guided-card ol {
  padding-left: 0;
  list-style: none;
}

#guidedShell .guided-note ul,
#guidedShell .guided-note ol {
  padding-left: 0;
}

/* The choice cards centre their contents too. */
#guidedShell .guided-choice {
  align-items: center;
  text-align: center;
}

#guidedShell .guided-choice-tag {
  align-self: center;
}

/* Progress header: centre the pills and the reassurance line. */
#guidedShell ol.guided-steps {
  justify-content: center;
}

#guidedShell .guided-saved {
  text-align: center;
}

/* The order code block reads as one centred stack. */
#guidedShell .guided-code {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#guidedShell .guided-code-label {
  flex: 0 0 auto;
}

/* Email timeline entries: centre the text, move the envelope above it so the
   centred lines are not pushed sideways by the icon. */
#guidedShell ol.guided-email-list li {
  padding: 2.6rem 0.9rem 0.85rem;
  text-align: center;
}

#guidedShell ol.guided-email-list li::before {
  left: 50%;
  top: 0.65rem;
  transform: translateX(-50%);
}

/* Each test sits as a centred stack: name, price, then the stepper. */
#guidedShell li.guided-pick {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#guidedShell .guided-pick-name {
  flex: 0 0 auto;
}

/* Totals and actions centre as well. */
#guidedShell .guided-total {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#guidedShell .guided-actions {
  justify-content: center;
}

#guidedShell label.guided-agree {
  justify-content: center;
  text-align: left;
}

#guidedShell .guided-baglist li {
  text-align: center;
}

/* The lab's postal address stacks one line per row, the way an envelope reads. */
#guidedShell .guided-card address strong,
#guidedShell .guided-card address span {
  display: block;
}

/* ---------- bunnies or birds? ---------- */

#guidedShell .guided-eyebrow {
  margin: 0 0 .35rem;
  color: var(--lh-accent) !important;
  font: 700 .8rem/1.3 var(--lh-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

#guidedShell .guided-animals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0 .6rem;
}

#guidedShell .guided-animal {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgb(var(--c-border) / .6);
  border-radius: 16px;
  background: rgb(var(--c-night));
  color: rgb(var(--c-white)) !important;
  text-decoration: none;
  box-shadow: 0 10px 28px rgb(var(--c-night) / .28);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
#guidedShell .guided-animal:hover,
#guidedShell .guided-animal:focus-visible {
  transform: translateY(-6px);
  border-color: rgb(var(--c-neon));
  box-shadow: 0 18px 40px rgb(var(--c-night) / .35), 0 0 0 1px rgb(var(--c-neon) / .5), 0 0 34px rgb(var(--c-neon) / .45);
}
#guidedShell .guided-animal-art {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgb(var(--c-deep)), rgb(var(--c-night)) 70%);
}
#guidedShell .guided-animal-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
  filter: saturate(.95);
}
#guidedShell .guided-animal:hover .guided-animal-art img { transform: scale(1.06); filter: saturate(1.1) brightness(1.08); }
#guidedShell .guided-animal-copy { display: grid; gap: .45rem; padding: 1.05rem 1.15rem 1.2rem; align-content: start; }
#guidedShell .guided-animal-copy strong {
  color: rgb(var(--c-white)) !important;
  font: 600 2rem/1 var(--lh-serif); font-size-adjust: 0.46;
}
#guidedShell .guided-animal-copy > span:not(.guided-animal-cta) { color: rgb(var(--c-surface-deep)) !important; font-size: .95rem; line-height: 1.5; }
#guidedShell .guided-animal-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
  color: rgb(var(--c-violet-200)) !important;
  font-weight: 700;
}
#guidedShell .guided-animal-cta svg { width: 1em; height: 1em; transition: transform .3s ease; }
#guidedShell .guided-animal:hover .guided-animal-cta svg { transform: translateX(4px); }

#guidedShell .guided-both { margin: .4rem 0 1.4rem; text-align: center; font-weight: 600; }

#guidedShell .guided-credit-strip { margin: 0 0 1rem; }

#guidedShell .guided-bulk {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.15rem;
  border: 1px dashed rgb(var(--c-border) / .75);
  border-radius: 14px;
  background: rgb(var(--c-surface-soft) / .7);
  color: var(--lh-ink) !important;
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
#guidedShell .guided-bulk:hover { border-style: solid; border-color: var(--lh-accent); background: rgb(var(--c-surface-soft)); transform: translateY(-2px); }
#guidedShell .guided-bulk > span:nth-child(2) { display: grid; gap: .15rem; }
#guidedShell .guided-bulk > span:nth-child(2) > span { color: var(--lh-muted) !important; font-size: .92rem; }
#guidedShell .guided-bulk-icon { color: var(--lh-accent); font-size: 1.4rem; }
#guidedShell .guided-bulk-cta { display: inline-flex; align-items: center; gap: .35rem; color: var(--lh-accent) !important; font-weight: 700; white-space: nowrap; }
#guidedShell .guided-bulk-cta svg { width: 1em; height: 1em; }

/* ---------- the test finder ---------- */

#guidedShell .guided-animal-tabs {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem;
  margin: .2rem 0 1.2rem;
  border: 1px solid rgb(var(--c-border) / .5);
  border-radius: 999px;
  background: rgb(var(--c-surface-soft));
}
#guidedShell .guided-animal-tabs[hidden] { display: none; }
#guidedShell .guided-tab {
  min-height: 40px;
  padding: .4rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lh-ink);
  font: 700 .95rem/1 var(--lh-sans);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
#guidedShell .guided-tab:hover { background: rgb(var(--c-surface-deep) / .6); }
#guidedShell .guided-tab[aria-pressed='true'] {
  background: linear-gradient(135deg, rgb(var(--c-accent)), rgb(var(--c-deep)));
  color: rgb(var(--c-white));
  box-shadow: 0 0 16px rgb(var(--c-neon) / .45);
}
#guidedShell .guided-group[hidden] { display: none; }

#guidedShell .guided-pick { flex-wrap: wrap; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
#guidedShell .guided-pick:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(var(--c-night) / .12), 0 0 18px rgb(var(--c-neon) / .18); }
#guidedShell .guided-pick-name { display: grid; gap: .12rem; }
#guidedShell .guided-pick-question {
  color: var(--lh-ink) !important;
  font: 600 1.35rem/1.2 var(--lh-serif); font-size-adjust: 0.46;
}
#guidedShell .guided-pick-name strong { color: var(--lh-accent) !important; font-size: .85rem; letter-spacing: .02em; }
#guidedShell .guided-pick-for { color: var(--lh-muted) !important; font-size: .9rem; line-height: 1.45; }
#guidedShell .guided-pick-price { color: var(--lh-ink) !important; font-weight: 700; font-size: .92rem; }
#guidedShell .guided-suggest {
  flex-basis: 100%;
  margin: .7rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid rgb(var(--c-neon));
  border-radius: 0 10px 10px 0;
  background: rgb(var(--c-surface-deep) / .45);
  color: var(--lh-ink) !important;
  font-size: .92rem;
  line-height: 1.5;
  animation: guided-suggest-in .45s ease both;
}
#guidedShell .guided-suggest span { color: var(--lh-accent); }
@keyframes guided-suggest-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#guidedShell .guided-coming { margin: .9rem 0 0; color: var(--lh-muted) !important; font-size: .92rem; }
#guidedShell .guided-bulk-line { margin-top: .3rem; }

@media (max-width: 640px) {
  #guidedShell .guided-animals { grid-template-columns: 1fr; }
  #guidedShell .guided-animal-art { aspect-ratio: 16 / 8; }
  #guidedShell .guided-bulk { grid-template-columns: 1fr; text-align: left; }
  #guidedShell .guided-bulk-icon { display: none; }
  #guidedShell .guided-animal-tabs { display: flex; }
  #guidedShell .guided-tab { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #guidedShell .guided-animal, #guidedShell .guided-animal-art img, #guidedShell .guided-pick, #guidedShell .guided-bulk { transition: none; }
  #guidedShell .guided-animal:hover, #guidedShell .guided-pick:hover, #guidedShell .guided-bulk:hover { transform: none; }
  #guidedShell .guided-animal:hover .guided-animal-art img { transform: none; }
  #guidedShell .guided-suggest { animation: none; }
}