/* Seleção à medida (/selecao; internamente "cardex") e a sua secção na página inicial.
   Ver templates/cardex.html.twig, partials/sections/profiles.html.twig e js/cardex.js. Usa os tokens de ibersuisse.css. */

.sb-head { max-width: 760px; margin-bottom: clamp(22px, 3vw, 36px); }
.sb-kicker { font-size: 0.9rem; font-weight: 700; color: var(--red); margin-bottom: 10px; }
.sb-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.04; }
.sb-title em { font-style: normal; color: var(--red); }
.sb-lede { margin-top: 14px; max-width: 58ch; color: var(--ink-soft); font-size: 1.08rem; }

/* Separadores dos perfis */
.sb-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 22px; background: var(--tint); }
.sb-tab { display: grid; justify-items: center; gap: 6px; min-height: 76px; padding: 12px 8px; border: 0; border-radius: 16px; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 0.92rem; text-align: center; cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.3s; }
.sb-tab .icon { width: 24px; height: 24px; }
.sb-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.sb-tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 22, 27, 0.08), 0 10px 22px -16px rgba(20, 22, 27, 0.5); }
.sb-tab[aria-selected="true"] .icon { color: var(--red); }
.sb-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Duas colunas: lateral fixa + folha */
.sb-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: clamp(24px, 3vw, 36px); align-items: start; }
.sb-side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; max-height: calc(100dvh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.sb-summary { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-card); background: var(--ink); color: var(--white); }
.sb-count { display: grid; gap: 4px; font-weight: 600; } /* número em cima, texto por baixo: o número pode crescer sem empurrar nada */
.sb-count b { font-family: var(--display); font-size: 3.4rem; line-height: 0.85; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-of { min-height: calc(2 * 1.45em); font-size: 0.86rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72); } /* 2 linhas reservadas: os botões não sobem nem descem */
.sb-summary .btn { width: 100%; min-height: 50px; padding-inline: 16px; font-size: 0.95rem; }
.sb-summary .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: var(--white); gap: 8px; }
.sb-summary .btn-ghost:hover { background: var(--white); color: var(--ink); }
.sb-summary .btn .icon { width: 18px; height: 18px; }
.sb-summary .btn[disabled] { opacity: 0.45; pointer-events: none; }
.sb-note { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }

.sb-own { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--tint); cursor: pointer; }
.sb-own input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-switch { flex: none; position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--field); transition: background-color 0.25s; }
.sb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: translate 0.3s var(--ease); }
.sb-own input:checked + .sb-switch { background: var(--red); }
.sb-own input:checked + .sb-switch::after { translate: 16px 0; }
.sb-own input:focus-visible + .sb-switch { outline: 3px solid var(--ink); outline-offset: 2px; }
.sb-own b { display: block; font-size: 0.9rem; }
.sb-own small { display: block; font-size: 0.76rem; color: var(--ink-soft); }

.sb-index-title { font-size: 0.9rem; font-weight: 700; color: var(--muted); margin: 4px 0 6px 12px; }
.sb-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-index-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: background-color 0.2s, color 0.2s; }
.sb-index-item:hover { background: var(--tint); color: var(--ink); }
.sb-index-item.is-current { background: var(--tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--red); }
.sb-index-n { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); } /* sobre o fundo tint da secção atual, muted ficava no limite (4,5:1) */
.sb-index-item.is-off .sb-index-name { text-decoration: line-through; color: var(--muted); }

/* Folha */
.sb-sheet-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.sb-profile { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.04; }
.sb-phrase { margin-top: 6px; color: var(--ink-soft); max-width: 60ch; }
.sb-bulk { display: flex; gap: 16px; }
.sb-link { padding: 6px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); cursor: pointer; }
.sb-link:hover { text-decoration-color: var(--red); }

.sb-chips { display: none; }
.sb-group { padding-top: clamp(26px, 3vw, 40px); scroll-margin-top: calc(var(--header-h) + 16px); }
.sb-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sb-group-title { display: flex; align-items: baseline; gap: 12px; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.sb-group-n { font-family: "Geist", system-ui, sans-serif; font-size: 0.8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.sb-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; cursor: pointer; }
.sb-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-card-media { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; transition: box-shadow 0.2s, filter 0.3s, opacity 0.3s; }
.sb-card-media img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.sb-card-media .sb-pimg { display: none; } /* miniatura JPEG só para a impressão (ver js/cardex.js) */
.sb-card:hover .sb-card-media { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sb-tick { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 8px; background: var(--red); box-shadow: 0 0 0 2px var(--white); }
.sb-tick::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.sb-own-badge { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
/* sem line-clamp: com espaçamento de texto aumentado (WCAG 1.4.12) a referência e a embalagem não podem ficar cortadas */
.sb-card-name { font-size: 0.84rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sb-card-meta { font-size: 0.74rem; color: var(--muted); overflow-wrap: anywhere; }
.sb-card input:focus-visible ~ .sb-card-media { outline: 3px solid var(--ink); outline-offset: 2px; }
/* desmarcado: fica visível (dá para voltar atrás) mas claramente fora */
.sb-card:has(input:not(:checked)) .sb-card-media { filter: grayscale(1); opacity: 0.45; box-shadow: inset 0 0 0 1.5px var(--line); }
.sb-card:has(input:not(:checked)) .sb-tick { background: var(--white); box-shadow: inset 0 0 0 2px var(--field), 0 0 0 2px var(--white); }
.sb-card:has(input:not(:checked)) .sb-tick::after { display: none; }
.sb-card:has(input:not(:checked)) .sb-card-name { color: var(--muted); text-decoration: line-through; }

/* "A gerar": estado na lateral, secções do índice a acender, cartões a entrar e o visto a "estalar" */
/* altura de 2 linhas reservada: o texto muda a cada secção e não pode empurrar o resto do cartão */
.sb-status { display: flex; align-items: flex-start; gap: 8px; min-height: calc(2 * 1.4em); font-size: 0.82rem; line-height: 1.4; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.sb-status::before { content: ""; flex: none; margin-top: 0.42em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: sb-pulse 1s ease-in-out infinite; }
.sb-status.is-done::before { background: var(--green); animation: none; }
@keyframes sb-pulse { 50% { opacity: 0.3; transform: scale(0.7); } }
.sb-index-item.is-waiting, .sb-index-item.is-waiting .sb-index-n { color: var(--muted); } /* cor e não opacidade: legível (4,8:1) mesmo durante a montagem */
.sb-index-item.is-working { color: var(--ink); background: var(--tint); }
.sb-index-item.is-working .sb-index-n { font-size: 0; }
.sb-index-item.is-working .sb-index-n::after { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: sb-pulse 0.8s ease-in-out infinite; }
/* Lugares vazios: a grelha aparece logo, com cada lugar a cintilar até ser "resolvido" no produto */
.is-gen .sb-card-media::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: linear-gradient(100deg, var(--tint) 30%, #fafafb 50%, var(--tint) 70%) 0 0 / 300% 100%;
  animation: sb-shimmer 1.3s linear infinite, sb-gone 0.35s var(--ease) forwards; animation-delay: 0s, var(--d, 0ms); }
.is-gen .sb-card-media img { animation: sb-resolve 0.6s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.is-gen .sb-tick, .is-gen .sb-own-badge { animation: sb-tick 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation-delay: calc(var(--d, 0ms) + 250ms); }
.is-gen .sb-card-name, .is-gen .sb-card-meta { animation: sb-text 0.4s ease-out backwards; animation-delay: calc(var(--d, 0ms) + 80ms); }
/* o produto que está a ser escolhido agora */
.is-gen .sb-card.is-now .sb-card-media { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 4px rgba(208, 33, 39, 0.15); }
@keyframes sb-shimmer { to { background-position: -300% 0; } }
@keyframes sb-gone { to { opacity: 0; visibility: hidden; } }
@keyframes sb-resolve { from { opacity: 0; transform: scale(0.82); filter: blur(10px) saturate(0); } }
@keyframes sb-text { from { color: transparent; background: var(--tint); border-radius: 6px; } }
@keyframes sb-tick { from { transform: scale(0); } }

/* Progresso na área dos produtos: altura fixa, no fim passa a "Seleção pronta" sem saltos */
.sb-progress { position: sticky; top: calc(var(--header-h) + 10px); z-index: 15; display: flex; align-items: center; gap: 14px; min-height: 48px; margin-top: 16px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: var(--white); font-size: 0.88rem; font-weight: 600; overflow: hidden; }
.sb-progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.sb-progress-bar i { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(0); }
.sb-progress-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-progress-text::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--red); vertical-align: 1px; animation: sb-pulse 0.9s ease-in-out infinite; }
.sb-progress .sb-skip { color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.4); flex: none; }
.sb-progress.is-done { position: static; background: var(--tint); color: var(--ink); }
.sb-progress.is-done .sb-progress-text::before { background: var(--green); animation: none; }
.sb-progress.is-done .sb-skip, .sb-progress.is-done .sb-progress-bar { display: none; }
.sb-mbar { display: none; }
/* No computador as ações estão na lateral: o botão flutuante da lista não precisa de aparecer aqui */
body:has(.sb) .floaters { display: none; }

@media (max-width: 75em) {
  .sb-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 61.25em) {
  .sb-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 18px; }
  .sb-tabs::-webkit-scrollbar { display: none; }
  .sb-tab { flex: none; min-width: 108px; min-height: 68px; }
  .sb-layout { grid-template-columns: minmax(0, 1fr); }
  .sb-side { position: static; max-height: none; overflow: visible; }
  .sb-summary, .sb-index { display: none; }
  .sb-chips { position: sticky; top: var(--header-h); z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 10px var(--pad); background: rgba(253, 253, 252, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .sb-chips::-webkit-scrollbar { display: none; }
  .sb-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
  .sb-chip.is-current { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .sb-chip.is-off { text-decoration: line-through; color: var(--muted); }
  .sb-group { scroll-margin-top: calc(var(--header-h) + 72px); }
  .sb-progress { position: static; }
  .sb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .sb-mbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px calc(12px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)); background: var(--ink); color: var(--white); border-radius: 20px 20px 0 0; }
  .sb-mbar p { flex: 1; min-width: 0; font-size: 0.86rem; }
  .sb-mbar b { display: inline-block; font-family: var(--display); font-size: 1.8rem; font-weight: 800; margin-right: 4px; font-variant-numeric: tabular-nums; }
  .sb-mprint { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); background: transparent; color: var(--white); cursor: pointer; }
  .sb-mprint .icon { width: 20px; height: 20px; }
  .sb-mbar .btn { min-height: 48px; padding-inline: 18px; }
  body:has(.sb) main { padding-bottom: 84px; }
  body:has(.sb) .site-footer { padding-bottom: 84px; } /* "Voltar ao topo" não fica por baixo da barra fixa (2.4.11) */
}
@media (max-width: 40em) {
  .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-bulk { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-status::before, .sb-index-item.is-working .sb-index-n::after, .sb-progress-text::before { animation: none; }
  .sb-tab, .sb-card-media, .sb-switch, .sb-switch::after { transition: none; }
}

.sb-print-only { display: none; }

/* ---------- Home: atalhos dos perfis ---------- */
.cxh-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
/* Lista editorial numerada (duas colunas, sem caixas): o número vem de um contador CSS, o vermelho só aparece no hover */
.cxh-grid { list-style: none; counter-reset: cxh; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.cxh-grid > li { counter-increment: cxh; border-top: 1px solid var(--line, #d9d9d5); }
.cxh-grid > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line, #d9d9d5); }
.cxh-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2vw, 24px); row-gap: 6px; align-items: start; height: 100%; padding: 22px 0; color: var(--ink); text-decoration: none; transition: color 0.2s; }
.cxh-tile::before { content: counter(cxh, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 4; font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: #c8c8c3; min-width: 2.2ch; transition: color 0.2s; }
.cxh-tile > * { grid-column: 2; }
.cxh-tile:hover::before, .cxh-tile:focus-visible::before, .cxh-tile:hover .cxh-go, .cxh-tile:focus-visible .cxh-go { color: var(--red); }
.cxh-name { font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1; text-transform: uppercase; }
.cxh-text { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
.cxh-go { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 700; transition: color 0.2s; }
.cxh-go .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.cxh-tile:hover .cxh-go .icon { transform: translateX(4px); }
/* order: -1 mantém a etiqueta "a minha seleção" por cima do nome */
.cxh-mine { display: none; order: -1; justify-self: start; padding: 3px 12px; border-radius: var(--r-pill); background: var(--red); color: var(--white); font-size: 0.85rem; font-weight: 700; }
.cxh-tile.is-mine .cxh-mine { display: block; }
.cxh-tile.is-mine::before { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .cxh-grid * { animation: none !important; transition: none !important; }
}
@media (max-width: 52em) {
  .cxh-grid { grid-template-columns: minmax(0, 1fr); }
  .cxh-grid > li:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- Impressão (A4): folha de encomenda ----------
   Margem de página 0: o browser deixa de ter espaço para o cabeçalho/rodapé dele (data, endereço, n.º de página).
   O nosso cabeçalho e rodapé são position: fixed (repetem-se em cada página) e o espaço que ocupam é reservado em
   cada página com padding + box-decoration-break: clone. Produtos em linhas, 2 colunas, nome e referência completos,
   com uma caixa "Qtd." para o cliente escrever. Só os produtos marcados. */
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  body > *:not(main), .site-header, .site-footer, .crumbs, .sb-head, .sb-tabs, .sb-side, .sb-sheet-head, .sb-chips, .sb-mbar, .sb-progress, .sb-group-head .sb-link, .floaters, .lang-menu { display: none !important; }
  main, .sb, .sb .shell, .sb-layout { display: block; margin: 0; padding: 0; width: auto; max-width: none; background: none; }
  .sb-sheet { padding: 27mm 12mm 17mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 8.5pt; color: #111; }
  .sb-print-only { display: block; }

  .sb-ph { position: fixed; top: 0; left: 0; right: 0; height: 21mm; padding: 6mm 12mm 0; display: flex; align-items: center; gap: 5mm; border-bottom: 0.6pt solid var(--ink); background: #fff; }
  .sb-ph-logo { flex: none; width: 34mm; margin-right: 4mm; }
  .sb-ph-logo img { display: block; width: 100%; height: auto; }
  .sb-ph-txt { flex: 1; display: grid; gap: 0.6mm; min-width: 0; }
  .sb-ph-kicker { font-size: 7pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
  .sb-ph-title { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 15pt; line-height: 1; }
  .sb-ph-meta { font-size: 8pt; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
  .sb-pf { position: fixed; bottom: 0; left: 0; right: 0; height: 12mm; padding: 0 12mm 5mm; display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; font-size: 7pt; color: var(--ink-soft); background: #fff; }
  .sb-pf::before { content: ""; position: absolute; left: 12mm; right: 12mm; top: 2mm; border-top: 0.4pt solid #bbb; }
  .sb-print-intro { margin-bottom: 3mm; padding: 2.5mm 3.5mm; border: 0.6pt solid #c4c7cc; border-radius: 2mm; font-size: 8pt; color: var(--ink-soft); } /* contorno e não fundo: o Chrome não imprime fundos por omissão */

  .is-gen .sb-card-media::before { display: none; }
  .sb-sheet * { animation: none !important; transition: none !important; }
  .sb-card:has(input:not(:checked)), .sb-group.is-off { display: none !important; }

  .sb-group { padding-top: 4mm; }
  .sb-group-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 3mm; margin: 0 0 1.5mm; padding-bottom: 1mm; border-bottom: 1pt solid var(--ink); break-after: avoid; page-break-after: avoid; }
  .sb-group-title { font-size: 12pt; gap: 3mm; }
  .sb-group-n { font-size: 7.5pt; }

  .sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7mm; }
  .sb-card { display: grid; grid-template-columns: 13mm minmax(0, 1fr) 13mm; grid-template-rows: auto auto; column-gap: 3mm; row-gap: 0.6mm; align-items: center; align-content: center; min-height: 15mm; padding: 1.4mm 0; border-bottom: 0.4pt solid #d6d8dd; break-inside: avoid; page-break-inside: avoid; cursor: default; }
  .sb-card-media { grid-column: 1; grid-row: 1 / 3; width: 13mm; aspect-ratio: 1; border-radius: 1.5mm; box-shadow: none !important; filter: none !important; opacity: 1 !important; }
  .sb-card-media img { inset: 6%; width: 88%; height: 88%; }
  /* com a miniatura de impressão carregada, usa-se essa (PDF leve); senão, a imagem do ecrã */
  .sb-card-media:has(.sb-pimg.is-ready) img:not(.sb-pimg) { display: none; }
  .sb-card-media .sb-pimg.is-ready { display: block; }
  .sb-tick, .sb-own-badge { display: none !important; }
  .sb-card-name { grid-column: 2; grid-row: 1; align-self: end; display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 8pt; font-weight: 700; line-height: 1.2; color: #111 !important; text-decoration: none !important; }
  .sb-card-meta { grid-column: 2; grid-row: 2; align-self: start; display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 7pt; color: #555; }
  /* caixa de quantidade para escrever à mão ou num leitor de PDF */
  .sb-card::after { content: attr(data-qty); grid-column: 3; grid-row: 1 / 3; align-self: center; height: 9mm; padding: 0.6mm 1mm; border: 0.7pt solid #8b919b; border-radius: 1.2mm; font-size: 5.5pt; font-weight: 600; color: #8b919b; text-transform: uppercase; letter-spacing: 0.04em; }
}