/* Smart Search Beta — Progressive shared-shape morph.
   Componente totalmente namespaced (.ssb*) e sem dependências de build. */
.ssb {
  --ssb-accent: var(--ds-accent, #fac200);
  --ssb-accent-ink: var(--ds-accent-ink, #171a1c);
  --ssb-ink: #171d20;
  --ssb-muted: #5d6a70;
  --ssb-line: #dce2e5;
  --ssb-soft: #eef1f2;
  --ssb-ease: cubic-bezier(.2,.88,.22,1);
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  overflow: hidden;
  color: var(--ssb-ink);
  font-family: Inter, var(--ds-font-sans), system-ui, sans-serif;
  outline: none;
}
.ssb *, .ssb *::before, .ssb *::after { box-sizing: border-box; }
.ssb button { font: inherit; }
.ssb button:focus-visible { outline: 4px solid var(--ssb-accent); outline-offset: 3px; }
.ssb-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: ssb-scrim-in 260ms ease both; }

/* A superfície muda de tamanho sem trocar de componente. */
.ssb-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(780px, calc(100% - 48px));
  height: min(690px, calc(100% - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(23,29,32,.09);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.46);
  transform: translate(-50%, -50%);
  transform-origin: var(--ssb-ox, 50%) var(--ssb-oy, 50%);
  transition: width 520ms var(--ssb-ease), height 520ms var(--ssb-ease), border-radius 440ms var(--ssb-ease);
  will-change: width, height, transform;
}
.ssb[data-ssb-state="refine"] .ssb-panel,
.ssb[data-ssb-state="keyboard"] .ssb-panel { width: min(850px, calc(100% - 42px)); height: min(800px, calc(100% - 42px)); border-radius: 34px; }
.ssb[data-ssb-state="results"] .ssb-panel { width: min(910px, calc(100% - 34px)); height: min(1020px, calc(100% - 34px)); border-radius: 38px; }
.ssb[data-ssb-state="detail"] .ssb-panel { width: min(950px, calc(100% - 26px)); height: calc(100% - 26px); max-height: 1160px; border-radius: 40px; }
.ssb--SS002[data-ssb-state="refine"] .ssb-panel,
.ssb--SS002[data-ssb-state="keyboard"] .ssb-panel { width: min(820px, calc(100% - 42px)); height: min(750px, calc(100% - 42px)); }
.ssb--SS002[data-ssb-state="choose"] .ssb-panel { width: min(820px, calc(100% - 48px)); height: min(760px, calc(100% - 48px)); }
.ssb--SS002[data-ssb-state="detail"] .ssb-panel { width: min(880px, calc(100% - 32px)); max-height: 1050px; }
.ssb.is-opening .ssb-panel { animation: ssb-panel-open 480ms var(--ssb-ease) both; }
.ssb.is-closing .ssb-panel { animation: ssb-panel-close 220ms ease-in both; }
.ssb.is-closing .ssb-scrim { animation: ssb-scrim-out 220ms ease-in both; }

.ssb-head { position: relative; flex: 0 0 auto; min-height: 142px; padding: 24px 82px 20px 30px; border-bottom: 1px solid var(--ssb-line); }
.ssb-signals-line { min-height: 28px; display: flex; gap: 7px; align-items: center; overflow: hidden; }
.ssb-signals-line span { min-width: 0; padding: 7px 10px; border-radius: 999px; background: var(--ssb-soft); color: #3f4a4f; font-family: "IBM Plex Sans", Inter, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .035em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ssb-signals-line span:first-child { background: var(--ssb-accent); color: var(--ssb-accent-ink); }
.ssb-title { margin: 14px 0 0; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 43px; font-weight: 900; letter-spacing: -.02em; line-height: .95; }
.ssb-close { position: absolute; right: 24px; top: 24px; width: 54px; height: 54px; border: 0; border-radius: 50%; background: var(--ssb-soft); color: var(--ssb-ink); font-size: 34px; line-height: 1; }
.ssb-steps { position: absolute; right: 86px; bottom: 22px; display: flex; gap: 6px; }
.ssb-steps i { width: 14px; height: 6px; border-radius: 99px; background: #d5dbde; transition: width 220ms ease, background-color 220ms ease; }
.ssb-steps i.is-on { width: 25px; background: var(--ssb-accent); }
.ssb--SS002 .ssb-steps { display: none; }

.ssb-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px 30px 30px; scrollbar-width: thin; scrollbar-color: #bbc3c7 transparent; }
.ssb-body > * { animation: ssb-view-in 210ms ease-out both; }

/* 1. Escolha compacta */
.ssb-conversation { min-height: 72px; display: grid; grid-template-columns: 50px 1fr; gap: 13px; align-items: center; margin-bottom: 14px; padding: 10px 16px 10px 10px; border-radius: 19px 19px 19px 6px; background: #f5f1df; }
.ssb-conversation__icon, .ssb-refine-chat__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--ssb-accent); color: var(--ssb-accent-ink); }
.ssb-conversation__icon .tomi-icon, .ssb-refine-chat__icon .tomi-icon { font-size: 27px; }
.ssb-conversation b, .ssb-conversation small { display: block; }
.ssb-conversation b { font-size: 16px; line-height: 1.15; }
.ssb-conversation small { margin-top: 5px; color: var(--ssb-muted); font-size: 13px; line-height: 1.25; }
.ssb-intents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ssb-intent { position: relative; height: 355px; overflow: hidden; isolation: isolate; border: 0; border-radius: 22px; background: #283238 center/cover no-repeat; color: #fff; text-align: left; }
.ssb--SS002 .ssb-intent { height: 292px; }
.ssb-intent::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 12%, rgba(0,0,0,.16) 40%, rgba(0,0,0,.94) 100%); }
.ssb-intent__icon { position: absolute; left: 16px; top: 16px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.94); color: var(--ssb-ink); box-shadow: 0 5px 18px rgba(0,0,0,.18); }
.ssb-intent__icon .tomi-icon { font-size: 25px; }
.ssb-intent__b { position: absolute; left: 19px; right: 19px; bottom: 20px; }
.ssb-intent small, .ssb-card small, .ssb-detail__tag small { display: block; color: var(--ssb-accent); font-family: "IBM Plex Sans", Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .055em; }
.ssb-intent b { display: block; margin: 7px 0 6px; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 31px; font-weight: 900; line-height: .94; }
.ssb-intent em { display: block; font-size: 14px; font-style: normal; font-weight: 600; }
.ssb-quick { display: grid; grid-template-columns: 1.5fr .7fr .7fr; gap: 10px; margin-top: 15px; }
.ssb-quick button { min-height: 74px; border: 2px solid var(--ssb-line); border-radius: 17px; background: #fff; color: var(--ssb-ink); font-size: 15px; font-weight: 800; }
.ssb--SS002 .ssb-quick button { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ssb--SS002 .ssb-quick .tomi-icon { font-size: 23px; }
.ssb-quick .ssb-surprise { display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border: 0; background: var(--ssb-ink); color: #fff; }
.ssb--SS002 .ssb-quick .ssb-surprise > .tomi-icon { color: var(--ssb-accent); }
.ssb-surprise span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: var(--ssb-accent); color: var(--ssb-accent-ink); font-size: 21px; }

/* 2. Refinamento gráfico */
.ssb-selected { width: 100%; min-height: 104px; display: grid; grid-template-columns: 176px 1fr auto; align-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 19px; background: var(--ssb-ink); color: #fff; text-align: left; }
.ssb-selected img { width: 176px; height: 104px; object-fit: cover; }
.ssb-selected > span { padding: 0 20px; }
.ssb-selected small { display: block; color: var(--ssb-accent); font-size: 11px; font-weight: 800; }
.ssb-selected b { display: block; margin-top: 5px; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 28px; line-height: 1; }
.ssb-selected > i { margin-right: 22px; color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }
.ssb-refine-h { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 12px; }
.ssb-refine-h h2 { margin: 0; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 30px; line-height: 1; }
.ssb-refine-h span { color: var(--ssb-muted); font-size: 13px; font-weight: 700; }
.ssb-refine-chat { min-height: 78px; display: grid; grid-template-columns: 50px 1fr; gap: 13px; align-items: center; margin: 15px 0 12px; padding: 10px 16px 10px 10px; border: 2px solid #eee4b9; border-radius: 19px 19px 19px 6px; background: #fffaf0; }
.ssb-refine-chat h2 { margin: 0; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 27px; line-height: 1; }
.ssb-refine-chat p { margin: 5px 0 0; color: var(--ssb-muted); font-size: 13px; font-weight: 600; }
.ssb-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.ssb-check { position: relative; min-height: 124px; padding: 17px; border: 3px solid var(--ssb-line); border-radius: 18px; background: var(--ssb-soft); color: var(--ssb-ink); text-align: left; }
.ssb-check.is-on { border-color: var(--ssb-accent); background: #fff5c7; }
.ssb-check b, .ssb-check small { display: block; }
.ssb-check b { font-size: 15px; }
.ssb-check small { margin-top: 6px; color: var(--ssb-muted); font-size: 12px; line-height: 1.18; }
.ssb-check > i { display: none; position: absolute; right: 11px; top: 10px; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--ssb-ink); color: #fff; font-style: normal; }
.ssb-check.is-on > i { display: grid; }
.ssb--SS002 .ssb-check { min-height: 142px; padding: 14px; }
.ssb--SS002 .ssb-check__icon { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ssb--SS002 .ssb-check__icon .tomi-icon { font-size: 25px; }
.ssb--SS002 .ssb-check.is-on .ssb-check__icon { background: var(--ssb-ink); color: #fff; }
.ssb--SS002 .ssb-check b { font-size: 14px; line-height: 1.05; }
.ssb-ic, .ssb-fact__ic, .ssb-why__ic, .ssb-act__ic { display: inline-grid; place-items: center; }
.ssb-ic svg, .ssb-fact__ic svg, .ssb-why__ic svg, .ssb-act__ic svg { width: 100%; height: 100%; }
.ssb--SS003 .ssb-check { min-height: 137px; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-content: center; padding: 14px; }
.ssb--SS003 .ssb-check .ssb-ic { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ssb--SS003 .ssb-check .ssb-ic svg { width: 29px; height: 29px; }
.ssb--SS003 .ssb-check.is-on .ssb-ic { background: var(--ssb-ink); color: #fff; }
.ssb-go { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 0 22px; border: 0; border-radius: 17px; background: var(--ssb-ink); color: #fff; font-size: 15px; font-weight: 800; }
.ssb-go b { color: var(--ssb-accent); }

/* 3. Expansão visual de resultados */
.ssb-tools { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.ssb-tools > button { min-height: 46px; padding: 0 19px; border: 0; border-radius: 999px; background: var(--ssb-accent); color: var(--ssb-accent-ink); font-size: 13px; font-weight: 800; }
.ssb-signals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ssb-signals span { padding: 7px 11px; border-radius: 999px; background: var(--ssb-soft); color: #48545a; font-size: 11px; font-weight: 700; }
.ssb-results-intro { margin: -3px 0 15px; padding: 12px 15px; border-left: 5px solid var(--ssb-accent); border-radius: 5px 14px 14px 5px; background: #f6f1dc; color: #3f494e; font-size: 13px; font-weight: 650; line-height: 1.3; }
.ssb-grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-auto-rows: 230px; gap: 12px; }
.ssb-card { position: relative; min-height: 0; overflow: hidden; isolation: isolate; padding: 0; border: 0; border-radius: 21px; background: #263137; color: #fff; text-align: left; }
.ssb-card:first-child { grid-row: span 2; }
.ssb-card img, .ssb-card__ph { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg,#71818a,#273138); }
.ssb-card::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 12%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.96) 100%); }
.ssb-card__b { position: absolute; left: 21px; right: 21px; bottom: 19px; }
.ssb-card h3 { margin: 7px 0 5px; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 31px; font-weight: 900; line-height: .95; }
.ssb-card:first-child h3 { font-size: 43px; }
.ssb-card p { margin: 0; font-size: 13px; font-weight: 600; }
.ssb-card em { display: inline-flex; margin-top: 9px; padding: 6px 9px; border-radius: 999px; background: #fff; color: var(--ssb-ink); font-size: 10px; font-style: normal; font-weight: 800; }
.ssb-empty { grid-column: 1 / -1; min-height: 280px; display: grid; place-items: center; border-radius: 20px; background: var(--ssb-soft); color: var(--ssb-muted); font-weight: 700; }

/* 4. Detalhe focado */
.ssb-detail-back { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ssb-accent); color: var(--ssb-accent-ink); font-size: 13px; font-weight: 800; }
.ssb-detail { min-height: calc(100% - 62px); display: grid; grid-template-columns: 1.03fr 1fr; gap: 20px; margin-top: 14px; }
.ssb-detail__media { position: relative; min-height: 520px; overflow: hidden; border-radius: 23px; background: #273238; }
.ssb-detail__media > img, .ssb-detail__media > .ssb-card__ph { width: 100%; height: 100%; object-fit: cover; }
.ssb-detail__media::after { content: ''; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.86)); }
.ssb-detail__tag { position: absolute; z-index: 1; left: 23px; right: 23px; bottom: 23px; color: #fff; }
.ssb-detail__tag b { display: block; margin-top: 7px; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 34px; line-height: .95; }
.ssb-detail__copy { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ssb-detail__intro { padding: 17px 18px; border: 2px solid #eee4b9; border-radius: 18px; background: #fffaf0; }
.ssb-detail__intro > small { display: block; color: #7d6815; font-size: 10px; font-weight: 850; letter-spacing: .07em; }
.ssb-detail__intro h2 { margin: 6px 0 8px; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 31px; line-height: .98; }
.ssb-detail__intro p { margin: 0; color: #465157; font-size: 13px; font-weight: 560; line-height: 1.38; }
.ssb--SS002 .ssb-detail { grid-template-columns: .88fr 1.12fr; gap: 18px; }
.ssb--SS002 .ssb-detail__media { min-height: 610px; }
.ssb--SS002 .ssb-detail__copy { gap: 9px; }
.ssb--SS002 .ssb-why { min-height: 55px; }
.ssb--SS002 .ssb-fact { min-height: 85px; }
.ssb-why { min-height: 62px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 16px; background: var(--ssb-ink); color: #fff; }
.ssb-why__ic { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--ssb-accent); color: var(--ssb-accent-ink); }
.ssb-why b { font-size: 14px; line-height: 1.15; }
.ssb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ssb-fact { min-height: 94px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 12px; border: 2px solid var(--ssb-line); border-radius: 16px; background: var(--ssb-soft); }
.ssb-fact__ic { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--ssb-accent); color: var(--ssb-accent-ink); }
.ssb-fact small, .ssb-route small { display: block; color: var(--ssb-muted); font-size: 10px; font-weight: 800; letter-spacing: .045em; }
.ssb-fact b, .ssb-route b { display: block; margin-top: 4px; font-size: 13px; line-height: 1.12; }
.ssb-route { flex: 1 1 auto; min-height: 170px; padding: 12px 14px; overflow: hidden; border: 2px solid var(--ssb-line); border-radius: 17px; }
.ssb-route__h { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; }
.ssb-route__track { position: relative; min-height: 100px; margin-top: 9px; overflow: hidden; border-radius: 13px; background-color: var(--ssb-soft); background-image: linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size: 34px 34px; }
.ssb-route__track svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.ssb-route__track path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ssb-route__halo { stroke: #fff; stroke-width: 12; }
.ssb-route__line { stroke: var(--ssb-ink); stroke-width: 4; stroke-dasharray: 10 8; }
.ssb-route__track circle { fill: var(--ssb-ink); stroke: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; }
.ssb-route__track .ssb-route__end { fill: var(--ssb-accent); stroke: var(--ssb-ink); }
.ssb-route__track i { position: absolute; min-width: 44px; padding: 5px 8px; border-radius: 999px; background: var(--ssb-ink); color: #fff; font-size: 9px; font-style: normal; font-weight: 800; text-align: center; }
.ssb-route__a { left: 9px; bottom: 9px; }
.ssb-route__b { right: 9px; top: 9px; background: var(--ssb-accent) !important; color: var(--ssb-accent-ink) !important; }
.ssb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ssb-actions button { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 15px; background: var(--ssb-ink); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.1; }
.ssb-actions button:first-child, .ssb-actions button.is-on { background: var(--ssb-accent); color: var(--ssb-accent-ink); }
.ssb-act__ic { width: 31px; height: 31px; padding: 6px; flex: 0 0 auto; border-radius: 9px; background: rgba(255,255,255,.14); }
.ssb-actions button:first-child .ssb-act__ic, .ssb-actions button.is-on .ssb-act__ic { background: #fff; }
.ssb-status { min-height: 18px; color: var(--ssb-muted); font-size: 11px; font-weight: 800; }

/* Teclado e voz — alternativas acessíveis à escolha visual. */
.ssb-voice { min-height: 450px; display: grid; place-items: center; align-content: center; text-align: center; }
.ssb-voice__bars { height: 120px; display: flex; align-items: center; gap: 11px; }
.ssb-voice__bars i { width: 13px; height: 45%; border-radius: 20px; background: var(--ssb-accent); animation: ssb-wave 650ms infinite alternate; }
.ssb-voice__bars i:nth-child(2), .ssb-voice__bars i:nth-child(4) { height: 75%; }
.ssb-voice__bars i:nth-child(3) { height: 100%; }
.ssb-voice h2 { margin: 12px 0 22px; font-family: "Barlow Condensed", var(--ds-font-display), sans-serif; font-size: 42px; }
.ssb-voice button, .ssb-kb__ft > button:first-child { min-height: 54px; padding: 0 23px; border: 0; border-radius: 999px; background: var(--ssb-soft); font-size: 13px; font-weight: 800; }
.ssb-kb__field { min-height: 70px; display: flex; align-items: center; padding: 0 20px; border: 3px solid var(--ssb-ink); border-radius: 17px; font-size: 23px; font-weight: 600; }
.ssb-kb__caret { width: 2px; height: 30px; margin-left: 3px; background: var(--ssb-ink); animation: ssb-caret 850ms step-end infinite; }
.ssb-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
.ssb-keys button { min-width: 0; height: 53px; border: 0; border-radius: 10px; background: var(--ssb-soft); color: var(--ssb-ink); font-size: 16px; font-weight: 800; }
.ssb-keys .ssb-key--sp, .ssb-keys button:last-child { grid-column: span 5; }
.ssb-kb__ft { display: flex; justify-content: space-between; gap: 14px; margin-top: 16px; }
.ssb-kb__ft .ssb-go { width: auto; min-width: 250px; margin: 0; background: var(--ssb-accent); color: var(--ssb-accent-ink); }

@keyframes ssb-panel-open { from { opacity: 0; transform: translate(-50%,-50%) scale(.08); border-radius: 999px; } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes ssb-panel-close { to { opacity: 0; transform: translate(-50%,-50%) scale(.08); border-radius: 999px; } }
@keyframes ssb-scrim-in { from { opacity: 0; } }
@keyframes ssb-scrim-out { to { opacity: 0; } }
@keyframes ssb-view-in { from { opacity: 0; transform: translateY(7px) scale(.99); } }
@keyframes ssb-wave { to { height: 22%; } }
@keyframes ssb-caret { 50% { opacity: 0; } }

/* ===== SS005 — "cresce a cada escolha": image-led, escala progressiva ===== */
/* escala progressiva mais marcada: escolha compacta → resultados médios → carta final grande */
.ssb--SS005[data-ssb-state="choose"] .ssb-panel { width: min(720px, calc(100% - 64px)); height: min(700px, calc(100% - 64px)); border-radius: 44px; }
.ssb--SS005[data-ssb-state="keyboard"] .ssb-panel,
.ssb--SS005[data-ssb-state="voice"] .ssb-panel { width: min(820px, calc(100% - 48px)); height: min(780px, calc(100% - 48px)); border-radius: 38px; }
.ssb--SS005[data-ssb-state="results"] .ssb-panel { width: min(900px, calc(100% - 34px)); height: min(1050px, calc(100% - 34px)); border-radius: 40px; }
.ssb--SS005[data-ssb-state="detail"] .ssb-panel { width: min(970px, calc(100% - 20px)); height: calc(100% - 20px); max-height: 1200px; border-radius: 42px; }
/* nasce do botão: arranque um pouco mais longo, a partir da forma da pill */
.ssb--SS005.is-opening .ssb-panel { animation-duration: 560ms; }
/* escolha muito image-led: 1 imagem hero + 2 abaixo */
.ssb--SS005 .ssb-intents { grid-template-columns: 1fr 1fr; grid-auto-rows: 196px; gap: 12px; }
.ssb--SS005 .ssb-intent { height: auto; }
.ssb--SS005 .ssb-intent:first-child { grid-column: 1 / -1; grid-row: span 1; }
.ssb--SS005 .ssb-intent:first-child b { font-size: 38px; }
/* resultados: mosaico de imagens maior */
.ssb--SS005 .ssb-grid { grid-auto-rows: 248px; }
/* carta final (detalhe) com imagem ainda mais dominante */
.ssb--SS005 .ssb-detail { grid-template-columns: 1.12fr 1fr; }
.ssb--SS005 .ssb-detail__media { min-height: 580px; }
/* chips de filtro inline nos resultados (sem passo separado) */
.ssb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ssb-chip { min-height: 44px; padding: 0 17px; border: 2px solid var(--ssb-line); border-radius: 999px; background: #fff; color: var(--ssb-ink); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.ssb-chip.is-on { background: var(--ssb-accent); border-color: var(--ssb-accent); color: var(--ssb-accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .ssb *, .ssb *::before, .ssb *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}