/** Shopify CDN: Minification failed

Line 1732:22 Unexpected "{"
Line 1732:31 Expected ":"
Line 1739:22 Unexpected "{"
Line 1739:31 Expected ":"
Line 1743:22 Unexpected "{"
Line 1743:31 Expected ":"

**/
/* ==========================================================================
  CABELO — Routine + Quiz Results + Dashboard (GLOBAL) — CONSOLIDATED
  Applies to:
  - Hair quiz results sections:   [id^="cabelo-quiz-results-"]
  - Routine results sections:     [id^="cabelo-routine-results-"]
  - My routine dashboard:         [id^="cabelo-ui-"]
============================================================================ */

/* ==========================================================================
  TOKENS / SHARED VARS
============================================================================ */

[id^="cabelo-quiz-results-"],
[id^="cabelo-routine-results-"],
[id^="cabelo-ui-"]{
  --cabelo-max: 1120px;

  --cabelo-border: rgb(var(--color-foreground-rgb) / .12);
  --cabelo-border-soft: rgb(var(--color-foreground-rgb) / .10);

  --cabelo-ink: rgb(var(--color-foreground-rgb) / 1);
  --cabelo-ink-muted: rgb(var(--color-foreground-rgb) / .78);
  --cabelo-ink-soft: rgb(var(--color-foreground-rgb) / .62);

  --cabelo-surface: rgb(var(--color-background-rgb) / 1);
  --cabelo-surface-soft: rgb(var(--color-foreground-rgb) / .012);

  --cabelo-shadow-panel: 0 18px 55px rgb(var(--color-shadow-rgb, 15 23 42) / .10);
  --cabelo-shadow-card: 0 10px 35px rgb(var(--color-shadow-rgb, 15 23 42) / .08);
  --cabelo-shadow-hover: 0 18px 55px rgb(var(--color-shadow-rgb, 15 23 42) / .12);

  --cabelo-radius-xl: 1.6rem;
  --cabelo-radius-lg: 1.25rem;
  --cabelo-radius-md: 1.05rem;

  --cabelo-ease: cubic-bezier(.2,.8,.2,1);
}

/* Prevent “vertical letters” / shrink bugs in grid/flex children */
[id^="cabelo-quiz-results-"] *,
[id^="cabelo-routine-results-"] *,
[id^="cabelo-ui-"] *{ min-width: 0; }

/* Better reading width + page safety */
[id^="cabelo-quiz-results-"] .cabelo-quiz-results__inner,
[id^="cabelo-routine-results-"] .cabelo-routine-results__inner,
[id^="cabelo-ui-"] .cabelo-ui__inner{
  width: 100%;
  max-width: var(--cabelo-max);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
  BASE TYPOGRAPHY + RHYTHM
============================================================================ */

[id^="cabelo-quiz-results-"] h1,
[id^="cabelo-routine-results-"] h1,
[id^="cabelo-ui-"] h1{
  letter-spacing: -0.02em;
  line-height: 1.12;
}

[id^="cabelo-quiz-results-"] p,
[id^="cabelo-routine-results-"] p,
[id^="cabelo-ui-"] p{
  color: var(--cabelo-ink-muted);
  line-height: 1.6;
}

/* ==========================================================================
  PANELS (shared)
============================================================================ */

[id^="cabelo-quiz-results-"] .cabelo-quiz-results__panel,
[id^="cabelo-routine-results-"] .cabelo-routine-results__panel,
[id^="cabelo-ui-"] .cabelo-ui__panel{
  border: 1px solid var(--cabelo-border-soft);
  border-radius: var(--cabelo-radius-xl);
  background: var(--cabelo-surface);
  box-shadow: var(--cabelo-shadow-panel);
  padding: 1.5rem;
  margin: 0 0 1rem;
}

[id^="cabelo-quiz-results-"] .cabelo-quiz-results__header,
[id^="cabelo-routine-results-"] .cabelo-routine-results__header,
[id^="cabelo-ui-"] .cabelo-ui__header{
  margin-bottom: 1.25rem;
}

/* Hide template pool everywhere */
[id^="cabelo-quiz-results-"] [data-templates],
[id^="cabelo-routine-results-"] [data-templates],
[id^="cabelo-ui-"] [data-templates],
[id^="cabelo-quiz-results-"] .quiz-product-template,
[id^="cabelo-routine-results-"] .quiz-product-template,
[id^="cabelo-ui-"] .quiz-product-template{
  display: none !important;
}

/* ==========================================================================
  ROUTINE RESULTS — HEADER (simple + clean)
============================================================================ */

[id^="cabelo-routine-results-"] .cabelo-routine-results__header{
  text-align: left;
  margin: 0 0 1.25rem;
}
[id^="cabelo-routine-results-"] .cabelo-routine-results__h1{
  margin: 0 0 .35rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
[id^="cabelo-routine-results-"] .cabelo-routine-results__sub{
  margin: 0;
  opacity: .82;
}

/* CTA layout */
[id^="cabelo-routine-results-"] .cabelo-routine-results__cta-row,
[id^="cabelo-ui-"] .cabelo-ui__cta-row{
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
[id^="cabelo-routine-results-"] .cabelo-routine-results__add-all,
[id^="cabelo-ui-"] .cabelo-ui__add-all{ width: 100%; }

[id^="cabelo-routine-results-"] .cabelo-routine-results__cta-meta,
[id^="cabelo-ui-"] .cabelo-ui__cta-meta{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
[id^="cabelo-routine-results-"] .cabelo-routine-results__cta-small{
  font-size: .9rem;
  opacity: .78;
}

/* ==========================================================================
  STEP / ACCORDION HEADER LAYOUT (Unified)
============================================================================ */

[id^="cabelo-quiz-results-"] :is(.cabelo-step__toggle, .routine-step-toggle),
[id^="cabelo-routine-results-"] :is(.cabelo-step__toggle, .routine-step-toggle),
[id^="cabelo-ui-"] :is(.cabelo-step__toggle, .routine-step-toggle){
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 10px 12px;
  width: 100%;

  padding: 1.15rem 1.2rem;

  border: 1px solid var(--cabelo-border-soft);
  border-radius: var(--cabelo-radius-xl);
  background: linear-gradient(
    180deg,
    rgb(var(--color-foreground-rgb) / .016),
    rgb(var(--color-foreground-rgb) / .006)
  );
  box-shadow: 0 8px 26px rgb(var(--color-shadow-rgb, 15 23 42) / .06);

  text-align: left;
  transition: transform .18s var(--cabelo-ease),
              box-shadow .18s var(--cabelo-ease),
              border-color .18s var(--cabelo-ease);
}

@media (hover:hover) and (pointer:fine){
  [id^="cabelo-quiz-results-"] :is(.cabelo-step__toggle, .routine-step-toggle):hover,
  [id^="cabelo-routine-results-"] :is(.cabelo-step__toggle, .routine-step-toggle):hover,
  [id^="cabelo-ui-"] :is(.cabelo-step__toggle, .routine-step-toggle):hover{
    transform: translateY(-1px);
    border-color: rgb(var(--color-foreground-rgb) / .16);
    box-shadow: var(--cabelo-shadow-hover);
  }
}

[id^="cabelo-quiz-results-"] :is(.cabelo-step__stack, .routine-step-row),
[id^="cabelo-routine-results-"] :is(.cabelo-step__stack, .routine-step-row),
[id^="cabelo-ui-"] :is(.cabelo-step__stack, .routine-step-row){ min-width: 0; }

[id^="cabelo-quiz-results-"] .cabelo-step__right,
[id^="cabelo-routine-results-"] .cabelo-step__right,
[id^="cabelo-ui-"] .cabelo-step__right{
  justify-self: end;
  width: auto;
  max-width: 320px;
  display: grid;
  gap: .45rem;
  align-content: start;
}

/* Treat existing CTA wrap as the right column */
[id^="cabelo-quiz-results-"] .cabelo-step__cta-wrap,
[id^="cabelo-routine-results-"] .cabelo-step__cta-wrap,
[id^="cabelo-ui-"] .cabelo-step__cta-wrap{
  justify-self: end;
  width: auto;
  max-width: 320px;
  display: grid;
  gap: .45rem;
  align-content: start;
}

@media (max-width: 749px){
  [id^="cabelo-quiz-results-"] :is(.cabelo-step__toggle, .routine-step-toggle),
  [id^="cabelo-routine-results-"] :is(.cabelo-step__toggle, .routine-step-toggle),
  [id^="cabelo-ui-"] :is(.cabelo-step__toggle, .routine-step-toggle){
    grid-template-columns: minmax(0, 1fr);
  }
  [id^="cabelo-quiz-results-"] .cabelo-step__right,
  [id^="cabelo-routine-results-"] .cabelo-step__right,
  [id^="cabelo-ui-"] .cabelo-step__right,
  [id^="cabelo-quiz-results-"] .cabelo-step__cta-wrap,
  [id^="cabelo-routine-results-"] .cabelo-step__cta-wrap,
  [id^="cabelo-ui-"] .cabelo-step__cta-wrap{
    justify-self: start;
    max-width: none;
    width: 100%;
  }
}

/* Step inner hierarchy */
[id^="cabelo-quiz-results-"] :is(.cabelo-step__title, .routine-step-title),
[id^="cabelo-routine-results-"] :is(.cabelo-step__title, .routine-step-title),
[id^="cabelo-ui-"] :is(.cabelo-step__title, .routine-step-title){
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--cabelo-ink);
}

[id^="cabelo-quiz-results-"] :is(.cabelo-step__inst, .routine-step-instructions),
[id^="cabelo-routine-results-"] :is(.cabelo-step__inst, .routine-step-instructions),
[id^="cabelo-ui-"] :is(.cabelo-step__inst, .routine-step-instructions){
  color: var(--cabelo-ink-soft);
}

/* Add button */
[id^="cabelo-quiz-results-"] .cabelo-step__add,
[id^="cabelo-routine-results-"] .cabelo-step__add,
[id^="cabelo-ui-"] .cabelo-step__add{
  border-radius: 999px;
  min-height: 44px;
  padding: .55rem .95rem;
  font-weight: 900;
  border: 1px solid var(--cabelo-border);
  background: rgb(var(--color-foreground-rgb) / .02);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--cabelo-ease), transform .18s var(--cabelo-ease);
}
@media (hover:hover) and (pointer:fine){
  [id^="cabelo-quiz-results-"] .cabelo-step__add:hover,
  [id^="cabelo-routine-results-"] .cabelo-step__add:hover,
  [id^="cabelo-ui-"] .cabelo-step__add:hover{
    background: rgb(var(--color-foreground-rgb) / .05);
    transform: translateY(-1px);
  }
}
[id^="cabelo-quiz-results-"] .cabelo-step__add:disabled,
[id^="cabelo-routine-results-"] .cabelo-step__add:disabled,
[id^="cabelo-ui-"] .cabelo-step__add:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Plus/minus hit */
[id^="cabelo-quiz-results-"] .cabelo-step__hit,
[id^="cabelo-routine-results-"] .cabelo-step__hit,
[id^="cabelo-ui-"] .cabelo-step__hit{
  width: 40px;
  height: 40px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-foreground-rgb) / .14);
  background: rgb(var(--color-foreground-rgb) / .02);
  cursor: pointer;
}

/* Panel */
[id^="cabelo-quiz-results-"] .cabelo-step__panel,
[id^="cabelo-routine-results-"] .cabelo-step__panel,
[id^="cabelo-ui-"] .cabelo-step__panel{
  padding: .25rem 0 0;
}
[id^="cabelo-quiz-results-"] .cabelo-step__panel[hidden],
[id^="cabelo-routine-results-"] .cabelo-step__panel[hidden],
[id^="cabelo-ui-"] .cabelo-step__panel[hidden]{ display: none !important; }

[id^="cabelo-quiz-results-"] .cabelo-step__list,
[id^="cabelo-routine-results-"] .cabelo-step__list,
[id^="cabelo-ui-"] .cabelo-step__list{
  display: grid;
  gap: 1.15rem;
  margin-top: .8rem;
}

/* ==========================================================================
  PRODUCT LIST + CARD LAYOUT (Single source)
============================================================================ */

[id^="cabelo-quiz-results-"] .cabelo-product-card,
[id^="cabelo-routine-results-"] .cabelo-product-card,
[id^="cabelo-ui-"] .cabelo-product-card{
  display: grid;
  grid-template-columns: clamp(120px, 28vw, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;

  padding: 16px;
  border: 1px solid var(--cabelo-border-soft);
  border-radius: var(--cabelo-radius-xl);
  background: linear-gradient(
    180deg,
    rgb(var(--color-background-rgb) / 1) 0%,
    rgb(var(--color-foreground-rgb) / .012) 100%
  );
  box-shadow: var(--cabelo-shadow-card);

  transition: transform .18s var(--cabelo-ease),
              box-shadow .18s var(--cabelo-ease),
              border-color .18s var(--cabelo-ease);
}

@media (hover:hover) and (pointer:fine){
  [id^="cabelo-quiz-results-"] .cabelo-product-card:hover,
  [id^="cabelo-routine-results-"] .cabelo-product-card:hover,
  [id^="cabelo-ui-"] .cabelo-product-card:hover{
    transform: translateY(-2px);
    border-color: rgb(var(--color-foreground-rgb) / .14);
    box-shadow: var(--cabelo-shadow-hover);
  }
}

/* Media */
[id^="cabelo-quiz-results-"] .cabelo-product-card__media,
[id^="cabelo-routine-results-"] .cabelo-product-card__media,
[id^="cabelo-ui-"] .cabelo-product-card__media{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--cabelo-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 10%,
      rgb(var(--color-foreground-rgb) / .05) 0%,
      rgb(var(--color-foreground-rgb) / .015) 45%,
      rgb(var(--color-background-rgb) / 1) 100%
    );
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--color-foreground-rgb) / .10);
  position: relative;
}

[id^="cabelo-quiz-results-"] .cabelo-product-card__media a,
[id^="cabelo-routine-results-"] .cabelo-product-card__media a,
[id^="cabelo-ui-"] .cabelo-product-card__media a{
  width: 100%;
  height: 100%;
  display: block;
}

[id^="cabelo-quiz-results-"] .cabelo-product-card__media img,
[id^="cabelo-routine-results-"] .cabelo-product-card__media img,
[id^="cabelo-ui-"] .cabelo-product-card__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 14px;
  transition: transform .18s var(--cabelo-ease);
}
@media (hover:hover) and (pointer:fine){
  [id^="cabelo-quiz-results-"] .cabelo-product-card:hover .cabelo-product-card__media img,
  [id^="cabelo-routine-results-"] .cabelo-product-card:hover .cabelo-product-card__media img,
  [id^="cabelo-ui-"] .cabelo-product-card:hover .cabelo-product-card__media img{
    transform: scale(1.015);
  }
}

/* Body */
[id^="cabelo-quiz-results-"] .cabelo-product-card__body,
[id^="cabelo-routine-results-"] .cabelo-product-card__body,
[id^="cabelo-ui-"] .cabelo-product-card__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  align-items: flex-start;
}

[id^="cabelo-quiz-results-"] .cabelo-product-card__title,
[id^="cabelo-routine-results-"] .cabelo-product-card__title,
[id^="cabelo-ui-"] .cabelo-product-card__title{
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 800;
  overflow-wrap: break-word;
  font-size: 1.05rem;
}

[id^="cabelo-quiz-results-"] .cabelo-product-card__title a,
[id^="cabelo-routine-results-"] .cabelo-product-card__title a,
[id^="cabelo-ui-"] .cabelo-product-card__title a{
  color: var(--cabelo-ink);
  text-decoration: none;
}
@media (hover:hover) and (pointer:fine){
  [id^="cabelo-quiz-results-"] .cabelo-product-card__title a:hover,
  [id^="cabelo-routine-results-"] .cabelo-product-card__title a:hover,
  [id^="cabelo-ui-"] .cabelo-product-card__title a:hover{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

[id^="cabelo-quiz-results-"] .cabelo-product-card__price,
[id^="cabelo-routine-results-"] .cabelo-product-card__price,
[id^="cabelo-ui-"] .cabelo-product-card__price{
  color: var(--cabelo-ink);
  font-weight: 900;
  letter-spacing: -0.01em;
  opacity: .92;
}

/* Badges */
[id^="cabelo-quiz-results-"] .quiz-badges,
[id^="cabelo-routine-results-"] .quiz-badges,
[id^="cabelo-ui-"] .quiz-badges{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
[id^="cabelo-quiz-results-"] .quiz-step-badge,
[id^="cabelo-routine-results-"] .quiz-step-badge,
[id^="cabelo-ui-"] .quiz-step-badge{
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .01em;
  padding: .30rem .62rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-foreground-rgb) / .12);
  background: rgb(var(--color-foreground-rgb) / .02);
}

/* Actions */
[id^="cabelo-quiz-results-"] .cabelo-product-card__actions,
[id^="cabelo-routine-results-"] .cabelo-product-card__actions,
[id^="cabelo-ui-"] .cabelo-product-card__actions{
  margin-top: .65rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

[id^="cabelo-quiz-results-"] .cabelo-product-card__actions .button,
[id^="cabelo-routine-results-"] .cabelo-product-card__actions .button,
[id^="cabelo-ui-"] .cabelo-product-card__actions .button{
  width: 100%;
  justify-content: center;
}

@media (min-width: 750px){
  [id^="cabelo-quiz-results-"] .cabelo-product-card,
  [id^="cabelo-routine-results-"] .cabelo-product-card,
  [id^="cabelo-ui-"] .cabelo-product-card{
    grid-template-columns: clamp(260px, 26vw, 380px) minmax(0, 1fr);
  }
  /* Optional: 2 buttons side-by-side if you add .is-two-col */
  [id^="cabelo-quiz-results-"] .cabelo-product-card__actions.is-two-col,
  [id^="cabelo-routine-results-"] .cabelo-product-card__actions.is-two-col,
  [id^="cabelo-ui-"] .cabelo-product-card__actions.is-two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
}

/* ==========================================================================
  CTA HIERARCHY LOCK (View details as luxury text-link)
============================================================================ */

[id^="cabelo-quiz-results-"] .quiz-view,
[id^="cabelo-routine-results-"] .quiz-view,
[id^="cabelo-ui-"] .quiz-view{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  width: auto !important;

  align-self: flex-start !important;
  justify-content: flex-start !important;

  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;

  color: rgb(var(--color-foreground-rgb) / .65);
  text-decoration: underline;
  text-underline-offset: 3px;

  box-shadow: none !important;
}

[id^="cabelo-quiz-results-"] .quiz-view{ order: -1; } /* View above ATC */

[id^="cabelo-quiz-results-"] .quiz-atc,
[id^="cabelo-routine-results-"] .quiz-atc,
[id^="cabelo-ui-"] .quiz-atc{
  min-height: 48px;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (hover:hover) and (pointer:fine){
  .quiz-atc:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgb(0 0 0 / .15);
  }
}

/* ==========================================================================
  QUIZ RESULTS — 2 PANEL LAYOUT (Desktop), 1 COLUMN (Mobile)
============================================================================ */

[id^="cabelo-quiz-results-"] .cabelo-quiz-results__layout{
  display: grid;
  gap: 18px;
}

@media (min-width: 900px){
  [id^="cabelo-quiz-results-"] .cabelo-quiz-results__layout{
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: start;
  }
  [id^="cabelo-quiz-results-"] .cabelo-quiz-results__aside{
    position: sticky;
    top: calc(var(--cabelo-mega-top, 72px) + 14px);
    align-self: start;
  }
}
@media (max-width: 899px){
  [id^="cabelo-quiz-results-"] .cabelo-quiz-results__layout{ grid-template-columns: 1fr; }
  [id^="cabelo-quiz-results-"] .cabelo-quiz-results__aside{ position: static; }
}
[id^="cabelo-quiz-results-"] .cabelo-quiz-results__main{ min-width: 0; }

/* ==========================================================================
  SHARED BUTTON POLISH
============================================================================ */

[id^="cabelo-quiz-results-"] .button,
[id^="cabelo-routine-results-"] .button,
[id^="cabelo-ui-"] .button{
  border-radius: 999px !important;
  min-height: 46px;
  padding: .74rem 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

[id^="cabelo-quiz-results-"] .button--secondary,
[id^="cabelo-routine-results-"] .button--secondary,
[id^="cabelo-ui-"] .button--secondary{
  background: rgb(var(--color-foreground-rgb) / .02);
  border-color: rgb(var(--color-foreground-rgb) / .18);
  color: inherit;
}

/* Focus visible */
[id^="cabelo-quiz-results-"] :is(.button, .cabelo-step__toggle, a):focus-visible,
[id^="cabelo-routine-results-"] :is(.button, .cabelo-step__toggle, a):focus-visible,
[id^="cabelo-ui-"] :is(.button, .cabelo-step__toggle, a):focus-visible{
  outline: 2px solid rgb(var(--color-foreground-rgb) / .28);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ==========================================================================
  ROUTINE PAGES — ROUTINE STEPS (your new section)
  Uses: .cabelo-routine-mini-steps + .cabelo-routine-mini-steps__item
============================================================================ */

.cabelo-ui__kicker{
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: .35rem;
}

.cabelo-ui__fineprint{
  margin-top: .85rem;
  opacity: .78;
  font-size: .92rem;
}

.cabelo-routine-mini-steps{
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}

.cabelo-routine-mini-steps__item{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "chip label"
    "chip note";
  gap: .12rem .7rem;
  align-items: start;

  border: 1px solid rgb(var(--color-foreground-rgb) / .10);
  border-radius: 1.15rem;
  padding: .85rem .9rem;

  background: linear-gradient(180deg,
    rgb(var(--color-foreground-rgb) / .018),
    rgb(var(--color-foreground-rgb) / .006)
  );
  box-shadow: 0 10px 26px rgb(var(--color-shadow-rgb, 15 23 42) / .05);
}

.cabelo-step-chip{
  grid-area: chip;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid rgb(var(--color-foreground-rgb) / .14);
  background: rgb(var(--color-foreground-rgb) / .02);
  min-height: 30px;
  align-self: start;
}

.cabelo-step-label{
  grid-area: label;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cabelo-step-note{
  grid-area: note;
  opacity: .78;
  font-size: .92rem;
  line-height: 1.35;
}

/* Desktop: 5 steps = 2 cols for elegance */
@media (min-width: 900px){
  .cabelo-routine-mini-steps[data-mode="5"]{
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
}

/* Mobile polish */
@media (max-width: 749px){
  .cabelo-routine-mini-steps__item{
    padding: .8rem .85rem;
    border-radius: 1.05rem;
  }
}

/* ==========================================================================
  RESULTS TIMELINE (shared)
============================================================================ */

.cabelo-timeline{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.cabelo-timeline__item{
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

.cabelo-timeline__marker{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-foreground-rgb) / .18);
  background: linear-gradient(
    180deg,
    rgb(var(--color-foreground-rgb) / .04),
    rgb(var(--color-foreground-rgb) / .01)
  );
  margin-top: .35rem;
  position: relative;
}

.cabelo-timeline__item:not(:last-child) .cabelo-timeline__marker:after{
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + .9rem);
  background: rgb(var(--color-foreground-rgb) / .10);
}

.cabelo-timeline__kicker{
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: .2rem;
}

.cabelo-timeline__title{
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 .25rem;
}

/* ==========================================================================
  HOW TO USE (shared)
============================================================================ */

.cabelo-how-grid{ display:grid; gap:12px; margin-top:.75rem; }
@media (min-width: 750px){ .cabelo-how-grid{ grid-template-columns:1fr 1fr; gap:14px; } }

.cabelo-how-card{
  border:1px solid rgb(var(--color-foreground-rgb) / .10);
  border-radius:1.25rem;
  padding:1rem 1rem .9rem;
  background: linear-gradient(180deg, rgb(var(--color-foreground-rgb) / .018), rgb(var(--color-foreground-rgb) / .006));
  box-shadow:0 10px 28px rgb(var(--color-shadow-rgb, 15 23 42) / .06);
}

.cabelo-how-kicker{ font-size:.78rem; letter-spacing:.10em; text-transform:uppercase; opacity:.72; margin-bottom:.35rem; }
.cabelo-how-title{ font-weight:900; letter-spacing:-0.01em; line-height:1.2; margin-bottom:.35rem; }
.cabelo-how-copy{ opacity:.86; }

.cabelo-how-tip{
  margin-top:14px;
  border:1px solid rgb(var(--color-foreground-rgb) / .12);
  border-radius:1.25rem;
  padding:1rem;
  background: rgb(var(--color-foreground-rgb) / .015);
}

.cabelo-how-tip__kicker{ font-size:.78rem; letter-spacing:.10em; text-transform:uppercase; opacity:.72; margin-bottom:.3rem; }
.cabelo-how-tip__title{ font-weight:900; letter-spacing:-0.01em; margin-bottom:.25rem; }
.cabelo-how-tip__copy{ opacity:.86; }

/* ==========================================================================
  DASHBOARD LIST / CARD (optional)
============================================================================ */

[id^="cabelo-ui-"] .cabelo-ui__list{
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px){
  [id^="cabelo-ui-"] .cabelo-ui__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[id^="cabelo-ui-"] .cabelo-ui__card{
  border: 1px solid var(--cabelo-border-soft);
  border-radius: var(--cabelo-radius-lg);
  background: var(--cabelo-surface);
  box-shadow: var(--cabelo-shadow-card);
  padding: 1.1rem 1.25rem;
  transition: transform .18s var(--cabelo-ease), box-shadow .18s var(--cabelo-ease), border-color .18s var(--cabelo-ease);
  display: grid;
  gap: .65rem;
}

@media (hover:hover) and (pointer:fine){
  [id^="cabelo-ui-"] .cabelo-ui__card:hover{
    transform: translateY(-1px);
    border-color: rgb(var(--color-foreground-rgb) / .14);
    box-shadow: var(--cabelo-shadow-hover);
  }
}

/* ==========================================================================
  PDP ONLY — Luxury Product Accordions (kept separate)
============================================================================ */

.template-product .cabelo-accordions{
  margin-top: 1.25rem;
  display: grid;
  gap: .75rem;
}

.template-product .cabelo-acc{
  border: 1px solid rgb(var(--color-foreground-rgb) / .10);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgb(var(--color-foreground-rgb) / .018), rgb(var(--color-foreground-rgb) / .006));
  box-shadow: 0 10px 28px rgb(var(--color-shadow-rgb, 15 23 42) / .06);
  overflow: hidden;
  transition: transform .18s var(--cabelo-ease),
              box-shadow .18s var(--cabelo-ease),
              border-color .18s var(--cabelo-ease);
}
.template-product .cabelo-acc:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--color-foreground-rgb) / .14);
  box-shadow: 0 18px 50px rgb(var(--color-shadow-rgb, 15 23 42) / .10);
}

.template-product .cabelo-acc__summary{
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 1.05rem 1.15rem;
  cursor: pointer;
}
.template-product .cabelo-acc__summary::-webkit-details-marker{ display:none; }
.template-product .cabelo-acc__title{ font-weight: 900; letter-spacing: -0.015em; line-height: 1.15; }

.template-product .cabelo-acc__icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-foreground-rgb) / .14);
  background: rgb(var(--color-foreground-rgb) / .02);
  position: relative;
  justify-self: end;
}
.template-product .cabelo-acc__icon::before,
.template-product .cabelo-acc__icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: rgb(var(--color-foreground-rgb) / .75);
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.template-product .cabelo-acc__icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.template-product details[open] .cabelo-acc__icon::after{ opacity: 0; }

.template-product .cabelo-acc__body{
  padding: 0 1.15rem 1.15rem;
  color: rgb(var(--color-foreground-rgb) / .78);
}
@media (max-width: 749px){
  .template-product .cabelo-acc__summary{ padding: 1rem 1rem; }
  .template-product .cabelo-acc__body{ padding: 0 1rem 1rem; }
}

/* CABELO — Sticky primary CTA (desktop only) */
@media (min-width: 900px){
  /* Quiz: keep the Add All CTA visible */
  [id^="cabelo-quiz-results-"] .cabelo-quiz-add-all{
    position: sticky;
    top: calc(var(--cabelo-mega-top, 72px) + 18px);
    z-index: 2;
  }

  /* Dashboard: optional sticky Add All */
  [id^="cabelo-ui-"] .cabelo-ui__add-all{
    position: sticky;
    top: calc(var(--cabelo-mega-top, 72px) + 18px);
    z-index: 2;
  }

  /* Safety: sticky breaks if parent has overflow hidden */
  [id^="cabelo-quiz-results-"] .cabelo-quiz-results__aside,
  [id^="cabelo-ui-"] .cabelo-ui__inner{
    overflow: visible;
  }
}

@media (min-width: 900px){
  [id^="cabelo-ui-"] .cabelo-ui__panel:first-of-type{
    position: sticky;
    top: calc(var(--cabelo-mega-top, 72px) + 18px);
    z-index: 2;
  }
  [id^="cabelo-ui-"] .cabelo-ui__add-all{
    position: static;
  }
}

/* =========================================================
   CABELO — Routine Results UX Polish (B1)
   Targets: [id^="cabelo-routine-results-"]
   Paste at END of your global routine CSS
========================================================= */

/* Step header = cleaner hierarchy + calm luxury */
[id^="cabelo-routine-results-"] .cabelo-step__toggle{
  gap: 12px 16px;
}

/* Title stronger */
[id^="cabelo-routine-results-"] .cabelo-step__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: 1.05rem;
}

/* Instruction slightly quieter */
[id^="cabelo-routine-results-"] .cabelo-step__inst{
  font-size: .95rem;
  line-height: 1.45;
  opacity: .72;
  margin-top: .15rem;
}

/* Meta row: reads like a compact summary */
[id^="cabelo-routine-results-"] .cabelo-step__meta{
  margin-top: .35rem;
  font-size: .9rem;
  font-weight: 800;
  opacity: .78;
}

/* Subtle divider line under header stack (makes it feel “designed”) */
[id^="cabelo-routine-results-"] .cabelo-step__stack{
  position: relative;
  padding-bottom: .75rem;
}
[id^="cabelo-routine-results-"] .cabelo-step__stack::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: rgb(var(--color-foreground-rgb) / .08);
}

/* Right column controls align tighter */
[id^="cabelo-routine-results-"] .cabelo-step__right{
  gap: .55rem;
}

/* Add-step button = premium but “safe” */
[id^="cabelo-routine-results-"] .cabelo-step__add{
  min-height: 46px;
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

/* Helper note under Add-step (new microcopy element) */
[id^="cabelo-routine-results-"] .cabelo-step__help{
  font-size: .85rem;
  opacity: .72;
  line-height: 1.35;
  text-align: right;
  max-width: 320px;
}

/* Make the status note under add-step read nicer */
[id^="cabelo-routine-results-"] .cabelo-step__note{
  font-size: .85rem;
  opacity: .78;
}

/* Panel spacing feels more “gallery” */
[id^="cabelo-routine-results-"] .cabelo-step__panel{
  padding-top: .25rem;
}

/* Full routine panel: add a “kicker” above CTA (new element) */
[id^="cabelo-routine-results-"] .cabelo-routine-results__cta-kicker{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 850;
  opacity: .72;
  margin-bottom: .6rem;
}

/* Full routine note under CTA (new element) */
[id^="cabelo-routine-results-"] .cabelo-routine-results__cta-helper{
  display:block;
  margin-top: .35rem;
  font-size: .88rem;
  opacity: .75;
}

/* Empty state card polish */
[id^="cabelo-routine-results-"] .cabelo-routine-results__empty{
  border: 1px dashed rgb(var(--color-foreground-rgb) / .14);
  border-radius: 1.25rem;
  background: rgb(var(--color-foreground-rgb) / .012);
  padding: 1.1rem 1.15rem;
  margin-top: 1rem;
}

/* Mobile: tighten header spacing slightly */
@media (max-width: 749px){
  [id^="cabelo-routine-results-"] .cabelo-step__stack{
    padding-bottom: .65rem;
  }
  [id^="cabelo-routine-results-"] .cabelo-step__help{
    text-align: left;
    max-width: none;
  }
}

@media (min-width: 900px){
  [id^="cabelo-routine-results-"] .cabelo-routine-results__panel{
    position: sticky;
    top: calc(var(--cabelo-mega-top, 72px) + 18px);
    z-index: 2;
  }

  /* sticky breaks if any parent has overflow hidden */
  [id^="cabelo-routine-results-"] .cabelo-routine-results__inner{
    overflow: visible;
  }
}

.cabelo-routine-hub__quiz-cta{
  margin: 18px 0 26px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
}
.cabelo-routine-hub__quiz-cta-inner{
  display: grid;
  gap: 14px;
}
.cabelo-routine-hub__quiz-cta-h{ margin: 0 0 6px; }
.cabelo-routine-hub__quiz-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cabelo-routine-hub__trust{
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  opacity: .9;
}
@media (min-width: 990px){
  .cabelo-routine-hub__quiz-cta-inner{
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
  }
  .cabelo-routine-hub__quiz-cta.is-sticky{
    position: sticky;
    top: 96px; /* adjust if your header is taller */
    z-index: 2;
  }
}

/* Sticky Quiz CTA (desktop only) */
.is-sticky-bar{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.is-sticky-bar.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.is-sticky-bar .cabelo-routine-hub__trust{ display:none; }
.is-sticky-bar .cabelo-routine-hub__cta-sub{ display:none; }

/* Make it feel like a bar */
.is-sticky-bar .cabelo-routine-hub__cta-inner{
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  background: var(--color-background, #fff);
}
.cabelo-routine-empty-cta{
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

.cabelo-routine-empty-cta__inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}

.cabelo-routine-empty-cta__h{
  margin:0 0 6px;
  line-height:1.2;
}

.cabelo-routine-empty-cta__p p{ margin:0; opacity:.9; }

.cabelo-routine-empty-cta__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width: 749px){
  .cabelo-routine-empty-cta__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .cabelo-routine-empty-cta__actions{
    width:100%;
    justify-content:flex-start;
  }
}
.quiz-why-slot{
  margin: .6rem 0 .75rem;
  padding: .7rem .85rem;
  border-radius: .9rem;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.quiz-why__label{
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: .25rem;
  opacity: .85;
}
.quiz-why__text{
  font-size: .95rem;
  line-height: 1.35;
  opacity: .95;
}
.cabelo-step__empty{
  padding: .85rem;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: .85rem;
  opacity: .85;
}

/* =========================================================
   CABELO — Hair Quiz Results (5-step accordion) — Luxury UI
   - Mobile-safe (no word-by-word wrap)
   - Clean accordion header layout
   - Empty state styling
========================================================= */

.section--cabelo-quiz-results .cabelo-quiz-results__layout{
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 989px){
  .section--cabelo-quiz-results .cabelo-quiz-results__layout{
    grid-template-columns: 1fr;
  }
}

/* Panels */
.section--cabelo-quiz-results .cabelo-quiz-results__panel,
.section--cabelo-quiz-results .cabelo-quiz-save-email{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* Chips */
.section--cabelo-quiz-results .cabelo-quiz-results__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.section--cabelo-quiz-results .cabelo-quiz-chip{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  font-size: .9rem;

  /* Prevent weird wrapping */
  white-space: nowrap;
}

/* Step block */
.section--cabelo-quiz-results .cabelo-step{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  margin: 14px 0;
}

/* Accordion header button */
.section--cabelo-quiz-results .cabelo-step__toggle{
  width: 100%;
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border: 0;
  background: #fff;
  cursor: pointer;
  text-align: left;

  /* Prevent mobile collapse word-by-word */
  min-width: 0;
}

.section--cabelo-quiz-results .cabelo-step__toggle:focus{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: -2px;
}

/* Left stack */
.section--cabelo-quiz-results .cabelo-step__stack{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* important for ellipsis */
  flex: 1 1 auto;
}

.section--cabelo-quiz-results .cabelo-step__title{
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .01em;
  line-height: 1.2;

  /* keep it stable */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section--cabelo-quiz-results .cabelo-step__inst{
  font-size: .92rem;
  opacity: .85;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.section--cabelo-quiz-results .cabelo-step__meta{
  font-size: .86rem;
  opacity: .70;
}

/* Right stack */
.section--cabelo-quiz-results .cabelo-step__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

/* + / - bubble */
.section--cabelo-quiz-results .cabelo-step__hit{
  display:inline-flex;
  width: 34px;
  height: 34px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

/* Step add button */
.section--cabelo-quiz-results .cabelo-step__add{
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.section--cabelo-quiz-results .cabelo-step__add:hover{
  background: rgba(0,0,0,.03);
}

.section--cabelo-quiz-results .cabelo-step__add.is-disabled,
.section--cabelo-quiz-results .cabelo-step__add:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* Note under add button */
.section--cabelo-quiz-results .cabelo-step__note{
  font-size: .85rem;
  opacity: .75;
  margin-top: 6px;
}

/* Panel */
.section--cabelo-quiz-results .cabelo-step__panel{
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.01);
}

/* List wrapper */
.section--cabelo-quiz-results .cabelo-step__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

@media (max-width: 749px){
  .section--cabelo-quiz-results .cabelo-step__list{
    grid-template-columns: 1fr;
  }

  .section--cabelo-quiz-results .cabelo-step__toggle{
    padding: 14px 12px;
  }

  .section--cabelo-quiz-results .cabelo-step__add{
    padding: 9px 10px;
    font-size: .92rem;
  }
}

/* Empty state */
.section--cabelo-quiz-results .cabelo-step__empty{
  grid-column: 1 / -1;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  font-size: .95rem;
  opacity: .85;
}

/* Ensure product cards inside templates never collapse */
.section--cabelo-quiz-results .quiz-product-template,
.section--cabelo-quiz-results [data-quiz-results-core] .quiz-product-template{
  min-width: 0;
}

/* Badge row (if your snippet outputs .quiz-badges) */
.section--cabelo-quiz-results .quiz-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.section--cabelo-quiz-results .quiz-step-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* "Why our stylists chose this" (if present) */
.section--cabelo-quiz-results .quiz-why__label{
  margin-top: 10px;
  font-weight: 800;
  font-size: .9rem;
}

.section--cabelo-quiz-results .quiz-why__text{
  margin-top: 6px;
  font-size: .92rem;
  opacity: .85;
  line-height: 1.45;
}

/* FORCE STEP TITLE VISIBILITY ON MOBILE */
@media (max-width: 749px){
  .section--cabelo-quiz-results .cabelo-step__toggle{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .section--cabelo-quiz-results .cabelo-step__stack{
    order: 1;
  }

  .section--cabelo-quiz-results .cabelo-step__title{
    font-size: 1.1rem;
    font-weight: 900;
    white-space: normal;
  }

  .section--cabelo-quiz-results .cabelo-step__inst{
    display: none; /* hide long instruction on mobile header */
  }

  .section--cabelo-quiz-results .cabelo-step__right{
    order: 2;
    justify-content: space-between;
  }
}
@media (max-width: 749px){
  .section--cabelo-quiz-results .cabelo-step__add{
    font-size: .9rem;
    font-weight: 700;
    padding: 8px 12px;
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.12);
  }
}

@media (max-width: 749px){
  .section--cabelo-quiz-results [data-save-routine]{
    display: none;
  }
}

/* STEP PILL */
.section--cabelo-quiz-results .cabelo-step__title{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.section--cabelo-quiz-results .cabelo-step__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
}

/* Mobile: slightly bigger for thumb-first UI */
@media (max-width: 749px){
  .section--cabelo-quiz-results .cabelo-step__pill{
    min-width: 48px;
    height: 30px;
  }
}

/* =========================================================
   CABELO — Quiz Results Accordion (Mobile Fix)
   Fixes: missing/hidden step title, cramped header, weird stacking
========================================================= */

/* Base toggle layout (all sizes) */
.cabelo-step__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  text-align:left;
}

/* Left block must be allowed to shrink WITHOUT collapsing text */
.cabelo-step__stack{
  flex:1 1 auto;
  min-width:0;              /* critical: allows text to render correctly in flex */
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Ensure title/instructions/meta are visible */
.cabelo-step__title,
.cabelo-step__inst,
.cabelo-step__meta{
  display:block;
  min-width:0;
}

/* Prevent “word-by-word” wrapping, but allow normal wrapping */
.cabelo-step__title,
.cabelo-step__inst,
.cabelo-step__meta{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Right side should not steal width from left */
.cabelo-step__right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* +/- indicator wrapper (make it stable) */
.cabelo-step__hit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  flex:0 0 34px;
  line-height:1;
}

/* Mobile-specific spacing + hierarchy */
@media (max-width: 749px){

  .cabelo-step{
    margin-bottom:12px;
  }

  .cabelo-step__toggle{
    padding:14px 14px;
    border-radius:16px;
  }

  /* Make sure the left content actually shows */
  .cabelo-step__title{
    font-weight:700;
    font-size:16px;
    line-height:1.2;
    margin:0;
  }

  .cabelo-step__inst{
    font-size:13px;
    line-height:1.35;
    opacity:.85;
    margin:0;
  }

  .cabelo-step__meta{
    font-size:12px;
    opacity:.75;
    margin:0;
  }

  /* Keep Add button readable and not crushing layout */
  .cabelo-step__add{
    padding:10px 12px;
    border-radius:999px;
    white-space:nowrap;
    flex:0 0 auto;
  }

  /* Panel padding so the product cards don’t touch edges */
  .cabelo-step__panel{
    padding:0 14px 14px;
  }

  .cabelo-step__list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
}

.cabelo-quiz-progress-bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  overflow: hidden;
}

.cabelo-quiz-progress-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #000; /* or var(--color-foreground) */
  transition: width .25s ease;
}

.cabelo-quiz-progress-fill{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.9),
    rgba(0,0,0,.6)
  );
}

/* ================================
   CABELO — Hair Quiz Progress Bar
   (Visible on mobile + desktop)
================================ */

.cabelo-quiz-progress-wrap{
  width: 100%;
  margin: 0 0 1rem;
}

.cabelo-quiz-progress-bar{
  width: 100%;
  height: 10px;                 /* increase to 12px if you want */
  border-radius: 999px;
  overflow: hidden;             /* critical so fill stays rounded */
  background: rgba(0,0,0,.12);  /* track */
  position: relative;
}

.cabelo-quiz-progress-fill{
  height: 100%;
  width: 0%;
  display: block;
  background: rgba(0,0,0,.85);  /* fill */
  border-radius: 999px;
  transition: width .28s ease;
  will-change: width;
}

/* Optional: tighter on mobile */
@media (max-width: 749px){
  .cabelo-quiz-progress-bar{ height: 10px; }
}
.cabelo-quiz-progress-bar{
  height: 10px;
  overflow: hidden;
}

.cabelo-quiz-progress-fill{
  height: 100%;
  width: 0%;
  transition: width .25s ease;
}

.cabelo-quiz-save-email {
  margin-top: 1.25rem;
}

.cabelo-quiz-save-head {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .25rem;
}

.cabelo-quiz-save-sub {
  font-size: .9rem;
  opacity: .85;
  margin-bottom: .75rem;
}

#cabelo-quiz-email-form {
  display: flex;
  gap: .5rem;
}

#cabelo-quiz-email-form input[type="email"] {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
}

#cabelo-quiz-email-form button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 600;
}

.cabelo-quiz-save-success {
  margin-top: .75rem;
  font-size: .9rem;
  font-weight: 500;
}

/* WHY THIS WORKS block */
#cabelo-quiz-results-{{ section.id }} .cabelo-quiz-why{
  margin: 0.9rem 0 1rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  background: rgb(var(--color-foreground-rgb) / 0.03);
}
#cabelo-quiz-results-{{ section.id }} .cabelo-quiz-why__label{
  font-weight: 700;
  margin-bottom: 0.35rem;
}
#cabelo-quiz-results-{{ section.id }} .cabelo-quiz-why__text{
  opacity: 0.9;
  line-height: 1.45;
}
/* =========================================================
   CABELO UI DASHBOARD TOP PANEL (Option 2)
   Adds routine header + clean CTA layout
========================================================= */

[id^="cabelo-ui-"] .cabelo-ui__routine-head{
  display: grid;
  gap: .35rem;
}

[id^="cabelo-ui-"] .cabelo-ui__routine-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cabelo-ink);
  font-size: 1.15rem;
}

[id^="cabelo-ui-"] .cabelo-ui__routine-goal{
  color: var(--cabelo-ink-muted);
  line-height: 1.45;
  font-size: .95rem;
  opacity: .9;
}

[id^="cabelo-ui-"] .cabelo-ui__routine-link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .9rem;
  color: rgb(var(--color-foreground-rgb) / .78);
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}

@media (hover:hover) and (pointer:fine){
  [id^="cabelo-ui-"] .cabelo-ui__routine-link:hover{
    color: rgb(var(--color-foreground-rgb) / .92);
  }
}

/* Make the top panel feel like a designed header */
[id^="cabelo-ui-"] .cabelo-ui__panel:first-of-type{
  padding: 1.25rem;
}

/* Desktop: 2 column header layout inside the top panel */
@media (min-width: 900px){
  [id^="cabelo-ui-"] .cabelo-ui__cta-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: start;
    gap: 1rem 1.25rem;
  }

  /* Put routine head on the left by default */
  [id^="cabelo-ui-"] .cabelo-ui__routine-head{
    grid-column: 1 / 2;
  }

  /* Add all and meta on the right */
  [id^="cabelo-ui-"] .cabelo-ui__add-all{
    grid-column: 2 / 3;
    width: 100%;
  }

  [id^="cabelo-ui-"] .cabelo-ui__cta-meta{
    grid-column: 2 / 3;
  }

  [id^="cabelo-ui-"] .cabelo-ui__cta-secondary{
    grid-column: 2 / 3;
    justify-self: start;
  }
}

/* Mobile: clean stacking and spacing */
@media (max-width: 899px){
  [id^="cabelo-ui-"] .cabelo-ui__routine-title{
    font-size: 1.08rem;
  }
  [id^="cabelo-ui-"] .cabelo-ui__cta-row{
    gap: .75rem;
  }
  [id^="cabelo-ui-"] .cabelo-ui__cta-meta{
    gap: .25rem;
  }
}

/* Make summary lines read like a compact decision block */
[id^="cabelo-ui-"] .cabelo-ui__small{
  font-size: .92rem;
  opacity: .82;
  line-height: 1.35;
}

/* Optional summary should look secondary */
[id^="cabelo-ui-"] [data-optional-summary]{
  opacity: .75;
}

/* Minor: keep the "Add full routine" button from visually jumping when sticky */
@media (min-width: 900px){
  [id^="cabelo-ui-"] .cabelo-ui__add-all{
    will-change: transform;
  }
}

/* =========================================================
   CABELO UI DASHBOARD TOP PANEL (Option 2)
   Adds routine header + clean CTA layout
========================================================= */

[id^="cabelo-ui-"] .cabelo-ui__routine-head{
  display: grid;
  gap: .35rem;
}

[id^="cabelo-ui-"] .cabelo-ui__routine-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--cabelo-ink);
  font-size: 1.15rem;
}

[id^="cabelo-ui-"] .cabelo-ui__routine-goal{
  color: var(--cabelo-ink-muted);
  line-height: 1.45;
  font-size: .95rem;
  opacity: .9;
}

[id^="cabelo-ui-"] .cabelo-ui__routine-link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .9rem;
  color: rgb(var(--color-foreground-rgb) / .78);
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}

@media (hover:hover) and (pointer:fine){
  [id^="cabelo-ui-"] .cabelo-ui__routine-link:hover{
    color: rgb(var(--color-foreground-rgb) / .92);
  }
}

/* Make the top panel feel like a designed header */
[id^="cabelo-ui-"] .cabelo-ui__panel:first-of-type{
  padding: 1.25rem;
}

/* Desktop: 2 column header layout inside the top panel */
@media (min-width: 900px){
  [id^="cabelo-ui-"] .cabelo-ui__cta-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: start;
    gap: 1rem 1.25rem;
  }

  /* Put routine head on the left by default */
  [id^="cabelo-ui-"] .cabelo-ui__routine-head{
    grid-column: 1 / 2;
  }

  /* Add all and meta on the right */
  [id^="cabelo-ui-"] .cabelo-ui__add-all{
    grid-column: 2 / 3;
    width: 100%;
  }

  [id^="cabelo-ui-"] .cabelo-ui__cta-meta{
    grid-column: 2 / 3;
  }

  [id^="cabelo-ui-"] .cabelo-ui__cta-secondary{
    grid-column: 2 / 3;
    justify-self: start;
  }
}

/* Mobile: clean stacking and spacing */
@media (max-width: 899px){
  [id^="cabelo-ui-"] .cabelo-ui__routine-title{
    font-size: 1.08rem;
  }
  [id^="cabelo-ui-"] .cabelo-ui__cta-row{
    gap: .75rem;
  }
  [id^="cabelo-ui-"] .cabelo-ui__cta-meta{
    gap: .25rem;
  }
}

/* Make summary lines read like a compact decision block */
[id^="cabelo-ui-"] .cabelo-ui__small{
  font-size: .92rem;
  opacity: .82;
  line-height: 1.35;
}

/* Optional summary should look secondary */
[id^="cabelo-ui-"] [data-optional-summary]{
  opacity: .75;
}

/* Minor: keep the "Add full routine" button from visually jumping when sticky */
@media (min-width: 900px){
  [id^="cabelo-ui-"] .cabelo-ui__add-all{
    will-change: transform;
  }
}