/* ════════════════════════════════════════════════════════════
   tino-app.css — Mock UI do sistema Tino (escopado em .tino-app)
   ════════════════════════════════════════════════════════════ */
.tino-app {
  --tbg: #F2F4F7;
  --tsurface: #fff;
  --tborder: #E4E7EC;
  --tborder-lt: #F0F2F5;
  --ttext: #101828;
  --ttext2: #344054;
  --tmuted: #667085;
  --tmuted-lt: #98A2B3;
  --taccent: #2E2E2E;
  --taccent-dk: #1A1A1A;
  --taccent-lt: #F0EFED;
  --tsuccess: #027A48;
  --tdanger: #B42318;
  --tdanger-bg: #FEF3F2;
  --twarn: #B54708;
  --twarn-bg: #FFFAEB;
  --tsh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --tsh-md: 0 4px 16px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .04);

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ttext);
  background: var(--tbg);
  line-height: 1.5;
  text-align: left;
  border: 1px solid var(--tborder);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(16, 24, 40, .35), 0 12px 32px -12px rgba(16, 24, 40, .18);
}
.tino-app * { box-sizing: border-box; }
.tino-app.is-feature {
  box-shadow: var(--tsh-md);
  font-size: 12px;
  border-radius: 12px;
}
.tino-app.is-feature .pad { padding: 14px; }

/* ── Topbar ── */
.tino-app .topbar {
  background: #2E2E2E;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  height: 48px;
}
.tino-app .topbar-center          { display: flex; justify-content: center; }
.tino-app .topbar-center img      { height: 21px; width: auto; display: block; }
.tino-app .topbar-right           { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.tino-app .page-body              { padding: 16px 18px; }

/* ── Filtros / Tabs ── */
.tino-app .filters-card {
  background: #fff;
  border: 1px solid var(--tborder);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: var(--tsh-sm);
  margin-bottom: 14px;
}
.tino-app .divider-v      { width: 1px; height: 20px; background: var(--tborder); flex-shrink: 0; }
.tino-app .filter-group   { display: flex; align-items: center; gap: 7px; }
.tino-app .filter-group label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tmuted);
}
.tino-app .tabs-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: var(--tbg);
  border: 1px solid var(--tborder);
  border-radius: 8px;
  padding: 3px;
}
.tino-app .tab-btn {
  padding: 6px 13px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--tmuted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tino-app .tab-btn svg { flex-shrink: 0; }
.tino-app .tab-btn.active {
  background: var(--taccent);
  color: #FCF9F2;
  box-shadow: 0 1px 3px rgba(46, 46, 46, .25);
}

/* ── Métricas ── */
.tino-app .metrics-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.tino-app .metric-card {
  background: #fff;
  border: 1px solid var(--tborder);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--tsh-sm);
  position: relative;
  overflow: hidden;
}
.tino-app .metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--taccent);
  opacity: 0;
  transition: opacity .2s;
}
.tino-app .metric-card.hl::before { opacity: 1; }
.tino-app .m-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tmuted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tino-app .m-icon {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--taccent-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--taccent);
  flex-shrink: 0;
}
.tino-app .m-value {
  font-size: 21px;
  font-weight: 700;
  color: var(--ttext);
  line-height: 1;
  letter-spacing: -.5px;
}
.tino-app .m-value.sm { font-size: 16px; }

/* ── Tabela ── */
.tino-app .table-card {
  background: #fff;
  border: 1px solid var(--tborder);
  border-radius: 12px;
  box-shadow: var(--tsh-sm);
  overflow: hidden;
}
.tino-app .table-header         { display: flex; flex-direction: column; border-bottom: 1px solid var(--tborder); }
.tino-app .table-header-row1    { display: flex; align-items: center; padding: 10px 16px; gap: 10px; }
.tino-app .table-header-row2    { display: flex; align-items: center; padding: 7px 16px 9px; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--tborder-lt); }
.tino-app .table-header-left-controls { display: flex; align-items: center; gap: 9px; flex: 1; }
.tino-app .table-header-right   { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.tino-app .table-info           { font-size: 11px; color: var(--tmuted); font-weight: 500; }

.tino-app .search-wrap          { position: relative; display: flex; align-items: center; }
.tino-app .search-wrap svg      { position: absolute; left: 9px; color: var(--tmuted-lt); pointer-events: none; }
.tino-app .search-input {
  border: 1px solid var(--tborder);
  background: var(--tbg);
  color: var(--ttext);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px 6px 28px;
  border-radius: 6px;
  width: 170px;
}
.tino-app .search-input::placeholder { color: var(--tmuted-lt); }

.tino-app .btn-search-apply {
  padding: 6px 12px;
  background: var(--taccent);
  color: #FCF9F2;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}
.tino-app .btn-lancamento {
  padding: 6px 12px;
  background: #fff;
  color: #3538CD;
  border: 1px solid #C7D7FD;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tino-app .btn-export {
  padding: 6px 12px;
  background: #185C37;
  color: #FCF9F2;
  border: 1px solid #107C41;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tino-app .filter-select {
  border: 1px solid var(--tborder);
  background: var(--tbg);
  color: var(--ttext);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 24px 6px 9px;
  border-radius: 6px;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

/* ── Status pills e curva ABC ── */
.tino-app .status-counts    { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tino-app .status-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.tino-app .status-count-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.tino-app .scp-divulgar { background: #ECFDF3; color: #027A48; border-color: #ABEFC6; }
.tino-app .scp-atencao  { background: var(--twarn-bg); color: var(--twarn); border-color: #FEDF89; }
.tino-app .scp-produzir { background: #FFF4ED; color: #C4520A; border-color: #F9DBAF; }
.tino-app .status-sep   { color: var(--tborder); font-size: 11px; user-select: none; }

.tino-app .abc-filter-group { display: flex; align-items: center; gap: 6px; }
.tino-app .abc-filter-btn   { padding: 3px 11px; font: inherit; font-size: 10px; font-weight: 700; border-radius: 20px; border: 1px solid transparent; letter-spacing: .04em; }
.tino-app .abc-A { background: #ECFDF3; color: #027A48; border-color: #ABEFC6; }
.tino-app .abc-B { background: var(--twarn-bg); color: var(--twarn); border-color: #FEDF89; }
.tino-app .abc-C { background: var(--tdanger-bg); color: var(--tdanger); border-color: #FEE4E2; }

/* ── Tabela principal ── */
.tino-app table           { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tino-app thead           { background: #F9FAFB; border-bottom: 1px solid var(--tborder); }
.tino-app th              { padding: 9px 14px; text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; color: var(--tmuted); }
.tino-app th.num          { text-align: center; }
.tino-app th.sorted       { color: var(--taccent); }
.tino-app th .sa          { margin-left: 4px; opacity: .4; font-size: 9px; }
.tino-app th.sorted .sa   { opacity: 1; }

.tino-app tbody tr.data-row { cursor: pointer; transition: background .12s; }
.tino-app tbody tr.data-row:hover,
.tino-app tbody tr.data-row.expanded { background: var(--taccent-lt); }
.tino-app tbody tr.data-row td { padding: 13px 14px; border-bottom: 1px solid var(--tborder-lt); }
.tino-app tbody tr.expand-row td { padding: 0; border: none; }
.tino-app td              { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ttext2); }
.tino-app td.num          { text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; }
.tino-app td.chev         { width: 30px; overflow: visible; padding-left: 14px; }
.tino-app td.id-cell      { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; color: var(--taccent); font-size: 10.5px; letter-spacing: .02em; }
.tino-app td.name-cell    { font-weight: 500; color: var(--ttext); overflow: hidden; text-overflow: ellipsis; }

/* ── Badges ── */
.tino-app .badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  gap: 4px;
}
.tino-app .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.tino-app .b-divulgar  { background: #ECFDF3; color: #027A48; border: 1px solid #ABEFC6; }
.tino-app .b-atencao   { background: var(--twarn-bg); color: var(--twarn); border: 1px solid #FEDF89; }
.tino-app .b-produzir  { background: #FFF4ED; color: #C4520A; border: 1px solid #F9DBAF; }
.tino-app .b-em-baixa  { background: var(--tdanger-bg); color: var(--tdanger); border: 1px solid #FEE4E2; }
.tino-app .b-abc-a     { background: #ECFDF3; color: #027A48; border: 1px solid #ABEFC6; font-weight: 800; }
.tino-app .b-abc-b     { background: var(--twarn-bg); color: var(--twarn); border: 1px solid #FEDF89; font-weight: 800; }
.tino-app .b-abc-c     { background: var(--tdanger-bg); color: var(--tdanger); border: 1px solid #FEE4E2; font-weight: 800; }

.tino-app .tag-desconto  { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 20px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--tdanger-bg); color: var(--tdanger); border: 1px solid #FEE4E2; }
.tino-app .tag-lancamento{ display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 20px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #EEF4FF; color: #3538CD; border: 1px solid #C7D7FD; }

.tino-app .roas-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 700;
}
.tino-app .roas-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.tino-app .roas-hi { background: #ECFDF3; color: #027A48; border: 1px solid #ABEFC6; }
.tino-app .roas-md { background: #FFFAEB; color: #B54708; border: 1px solid #FEDF89; }
.tino-app .roas-lo { background: #FFF4ED; color: #C4520A; border: 1px solid #F9DBAF; }

/* ── Chevron / Expand ── */
.tino-app .chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tmuted-lt);
  transition: transform .25s ease, color .15s;
}
.tino-app tr.data-row.expanded .chevron { transform: rotate(180deg); color: var(--taccent); }
.tino-app .expand-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .42s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
}
.tino-app .expand-panel.open { max-height: 640px; opacity: 1; }
.tino-app .expand-content {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 18px 18px;
  background: var(--tbg);
  border-top: 1px solid var(--tborder);
}
.tino-app .product-img-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(160deg, #EFEDEA, #E2E0DC);
  border: 1px solid var(--tborder);
  box-shadow: var(--tsh-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tmuted-lt);
}
.tino-app .product-img-wrap img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.tino-app .expand-right          { display: flex; gap: 22px; flex: 1; flex-wrap: wrap; align-items: flex-start; }
.tino-app .expand-details        { display: flex; flex-direction: column; gap: 7px; }
.tino-app .expand-detail-item    { display: flex; align-items: center; gap: 8px; }
.tino-app .expand-detail-label   { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tmuted); min-width: 148px; }
.tino-app .expand-detail-value   { font-size: 11.5px; font-weight: 600; color: var(--ttext2); }
.tino-app .expand-detail-value a { color: var(--taccent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Tabela de variantes ── */
.tino-app .variants-wrap          { border: 1px solid var(--tborder); border-radius: 8px; overflow: hidden; background: #fff; min-width: 300px; }
.tino-app .variants-title         { font-size: 12px; font-weight: 700; color: var(--ttext); padding: 10px 14px; border-bottom: 1px solid var(--tborder); text-align: center; }
.tino-app .variants-table         { width: 100%; border-collapse: collapse; font-size: 11px; }
.tino-app .variants-table th      { padding: 8px 14px; text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tmuted); background: #F9FAFB; border-bottom: 1px solid var(--tborder); }
.tino-app .variants-table td      { padding: 9px 14px; border-bottom: 1px solid var(--tborder-lt); color: var(--ttext2); font-weight: 500; text-align: center; }
.tino-app .variants-table tr:last-child td { border-bottom: none; }

/* ── Traffic info banner ── */
.tino-app .traffic-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  background: #F4F3FF;
  border: 1px solid #D9D6FE;
  border-radius: 8px;
  color: #5925DC;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.tino-app .traffic-info-banner svg    { flex-shrink: 0; margin-top: 1px; color: #7A5AF8; }
.tino-app .traffic-info-banner strong { font-weight: 700; color: #5925DC; }

/* ── Scroll horizontal ── */
.tino-app .table-card > div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#heroApp table { min-width: 880px; }

/* ── Responsivo do tino-app ── */
@media (max-width: 920px) { .tino-app .metrics-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) {
  .tino-app                   { font-size: 12px; }
  .tino-app .metrics-row      { grid-template-columns: repeat(2, 1fr); }
  .tino-app .tabs-inline      { display: none; }
  .tino-app .page-body        { padding: 12px; }
  .tino-app .m-value          { font-size: 18px; }
  .tino-app .m-value.sm       { font-size: 14px; }
  #heroApp table              { min-width: 0; width: 100%; }
}

/* Colunas responsivas: ocultação progressiva */
@media (max-width: 760px) {
  .tino-app th.col-hide-lg,
  .tino-app td.col-hide-lg { display: none; }
  #heroApp table { min-width: 0; width: 100%; }
}
@media (max-width: 600px) {
  .tino-app th.col-hide-md,
  .tino-app td.col-hide-md { display: none; }
  .tino-app .table-header-row2  { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tino-app .filter-group       { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tino-app .abc-filter-group   { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .tino-app .status-counts      { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tino-app .status-sep         { display: none; }
  .tino-app .divider-v          { display: none; }
  /* Nome curto em mobile */
  .tino-app td.name-cell[data-short]         { font-size: 0; }
  .tino-app td.name-cell[data-short]::before { content: attr(data-short); font-size: 11.5px; font-weight: 500; color: var(--ttext); }
  .tino-app td.name-cell                     { max-width: 80px; }
  .tino-app th:nth-child(3)                  { width: 80px; }
}
@media (max-width: 420px) {
  .tino-app th.col-hide-sm,
  .tino-app td.col-hide-sm { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   Hero (#heroApp) — tabela vira cards empilhados em mobile vertical
   Todos os dados visíveis, sem scroll horizontal e sem corte.
   Escopo: apenas #heroApp. As tabelas das features (.is-feature) ficam
   exatamente como estão.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Abas: reveladas e quebradas em 2 linhas (ficam escondidas no 680px genérico) */
  #heroApp .tabs-inline {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    width: 100%;
    gap: 4px;
    padding: 4px;
  }
  #heroApp .tab-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 7px 8px;
    font-size: 10.5px;
  }

  /* Toolbar do topo: empilha para nada ficar cortado pelo card */
  #heroApp .table-header-row1            { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  #heroApp .table-header-left-controls   { flex: 1 1 100%; gap: 8px; }
  #heroApp .table-header-left-controls .search-wrap  { flex: 1 1 auto; }
  #heroApp .table-header-left-controls .search-input { width: 100%; }
  #heroApp .table-header-right           { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }

  /* Sem scroll horizontal: o conteúdo passa a fluir em coluna */
  #heroApp .table-card > div[style*="overflow-x"] { overflow-x: visible; }
  #heroApp table { display: block; width: 100%; min-width: 0; }
  #heroApp thead { display: none; }
  #heroApp tbody { display: block; }

  /* Cada linha de dados vira um card */
  #heroApp tbody tr.data-row {
    display: block;
    position: relative;
    margin: 10px 12px;
    padding: 12px 14px 6px;
    background: #fff;
    border: 1px solid var(--tborder);
    border-radius: 12px;
    box-shadow: var(--tsh-sm);
  }
  #heroApp tbody tr.data-row:first-child { margin-top: 12px; }
  /* O card inteiro não escurece ao abrir — só ganha destaque na borda */
  #heroApp tbody tr.data-row:hover,
  #heroApp tbody tr.data-row.expanded { background: #fff; }
  #heroApp tbody tr.data-row.expanded {
    border-color: var(--taccent);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--tsh-md);
    margin-bottom: 0;
  }

  /* Células viram linhas "rótulo · valor" */
  #heroApp tbody tr.data-row td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border: none;
    border-bottom: 1px solid var(--tborder-lt);
    white-space: normal;
    overflow: visible;
    text-align: right;
  }
  #heroApp tbody tr.data-row td:last-child { border-bottom: none; }
  #heroApp tbody tr.data-row td::before {
    content: attr(data-label);
    flex: none;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tmuted);
    text-align: left;
  }

  /* Colunas que não entram no card resumido (continuam no painel expandido) */
  #heroApp tbody tr.data-row td.id-cell,
  #heroApp tbody tr.data-row td:nth-child(5),   /* Visualizações */
  #heroApp tbody tr.data-row td:nth-child(9),   /* % Fat. */
  #heroApp tbody tr.data-row td:nth-child(10) { /* Estoque */
    display: none;
  }

  /* Nome do produto = título do card (nome completo, sem rótulo) */
  #heroApp tbody tr.data-row td.name-cell,
  #heroApp tbody tr.data-row td.name-cell[data-short] {
    display: block;
    max-width: none;
    margin-bottom: 4px;
    padding: 0 30px 10px 0;            /* folga à direita para o chevron */
    border-bottom: 1px solid var(--tborder);
    font-size: 14px;
    font-weight: 700;
    color: var(--ttext);
    text-align: left;
    white-space: normal;
  }
  #heroApp tbody tr.data-row td.name-cell::before,
  #heroApp tbody tr.data-row td.name-cell[data-short]::before { content: none; }

  /* Faturamento em destaque */
  #heroApp tbody tr.data-row td:nth-child(8) {
    font-size: 15px;
    font-weight: 800;
    color: var(--ttext);
  }

  /* Chevron vira indicador no canto superior direito */
  #heroApp tbody tr.data-row td.chev {
    display: block;
    position: absolute;
    top: 13px;
    right: 13px;
    width: auto;
    padding: 0;
    border: none;
  }
  #heroApp tbody tr.data-row td.chev::before { content: none; }

  /* Painel expandido: vira bloco (corrige a largura/corte) e conecta ao card */
  #heroApp tbody tr.expand-row { display: block; margin: 0 12px; }
  #heroApp .expand-row td     { display: block; padding: 0; }
  #heroApp .expand-panel.open {
    max-height: 1600px;
    border: 1px solid var(--taccent);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--tsh-md);
  }
  #heroApp .expand-content {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
  }
  #heroApp .product-img-wrap    { width: 100%; height: 150px; }
  #heroApp .expand-right        { flex-direction: column; gap: 14px; width: 100%; }
  #heroApp .expand-details      { width: 100%; gap: 9px; }
  #heroApp .expand-detail-item  { justify-content: space-between; gap: 12px; }
  #heroApp .expand-detail-label { min-width: 0; }
  #heroApp .expand-detail-value { text-align: right; }
  /* Variantes: mantém a tabela normal e rola na horizontal dentro do card.
     Reverte as transformações de bloco aplicadas à tabela principal. */
  #heroApp .variants-wrap  { width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #heroApp .variants-table        { display: table; min-width: 360px; }
  #heroApp .variants-table thead  { display: table-header-group; }
  #heroApp .variants-table tbody  { display: table-row-group; }
  #heroApp .variants-table tr     { display: table-row; }
  #heroApp .variants-table th,
  #heroApp .variants-table td     { display: table-cell; }
}