/* Under > Produtos.
   Toda classe nova comeca com .unp- para nao bater com as dos outros segmentos.
   Reaproveita o que ja existe: .as-card, .as-top, .fi-name, .as-amt, .as-sub, .as-sub2, .as-st (chips), .as-total, .un-pills,
   .un-sec, .un-sec-h, .un-row, .un-thumb, .un-muted, .un-acts, .btn.ghost.sm.un-btn, .fi.
   Tema: so variaveis (--v-strong, --v-muted, --v-line, --v-gray-bg, --v-blue, --v-err), com a reserva do tema antigo, entao claro e
   escuro saem do mesmo CSS. Alvo de toque: 40 px no minimo. Nada cria rolagem lateral da pagina em 360, 375, 390 e 430 px
   (a unica rolagem lateral e a da tira de miniaturas, dentro dela mesma). */

/* ---------- lista ---------- */
/* foto | titulo e marca | preco; embaixo, na largura toda, status + variantes + estoque (cabe numa linha em 360 px) */
.unp-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 9px; align-items: start; }
.unp-card:focus-visible { outline: 2px solid var(--v-blue, var(--dv-blue)); outline-offset: 2px; }
.unp-card .un-thumb.unp-th { width: 56px; height: 56px; border-radius: 12px; }
.unp-b { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.unp-l { flex: 1; min-width: 0; }
.unp-t { min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }   /* 3 linhas: com 2 o final (Men's / Women's) sumia e dois produtos ficavam iguais */
.unp-pr { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; white-space: nowrap; text-align: right; }
.unp-cmp { font-family: var(--v-sans, inherit); font-size: 11.5px; font-weight: 400; color: var(--v-muted, var(--muted)); text-decoration: line-through; }
.unp-sub { margin-top: 3px; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.unp-card .unp-pl { grid-column: 1 / -1; margin-top: 0; gap: 5px 10px; }
.unp-m { font-family: var(--v-mono, monospace); font-size: 11px; letter-spacing: 0; color: var(--v-muted, var(--muted)); white-space: nowrap; }
.unp-out { color: var(--v-err, var(--err)); }
.unp-foot { margin: 10px 2px 0; text-align: center; font-size: 11.5px; }
.unp-ctr { justify-content: center; }
.unp-fail .btn.sm.un-btn, .unp-ctr .btn.sm.un-btn { flex: 0 0 auto; min-width: 150px; }

/* ---------- folha do produto ---------- */
.unp-sheet { min-width: 0; }
.unp-hsub { margin-top: 8px; overflow-wrap: anywhere; }
.unp-main { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; max-height: 46vh; border-radius: 14px; overflow: hidden; background: var(--v-gray-bg, rgba(255,255,255,.06)); touch-action: pan-y; }
.unp-main-i { display: block; width: 100%; height: 100%; object-fit: contain; }
.unp-cnt { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font-family: var(--v-mono, monospace); font-size: 11px; color: #fff; background: rgba(0,0,0,.55); pointer-events: none; }
.unp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0 0 3px; border: 0; border-radius: 50%; font-size: 24px; line-height: 1; color: #fff; background: rgba(0,0,0,.42); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unp-nav.l { left: 8px; }
.unp-nav.r { right: 8px; }
.unp-strip { position: relative; display: flex; gap: 6px; margin-top: 8px; padding-bottom: 2px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.unp-strip::-webkit-scrollbar { display: none; }
.unp-tb { flex: 0 0 52px; width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--v-gray-bg, rgba(255,255,255,.06)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unp-tb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.unp-tb.on { border-color: var(--v-blue, var(--dv-blue)); }
.unp-sheet .un-row b { text-align: right; overflow-wrap: anywhere; }
.unp-sheet .un-row .unp-cmp { font-size: 13px; }
.unp-sheet .un-row .unp-out { color: var(--v-err, var(--err)); }
.unp-sheet .btn.sm.un-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; }
.unp-sheet .unp-ctr .btn.sm.un-btn { flex: 0 0 auto; min-width: 150px; }

/* variantes */
.unp-vcount { margin-left: 8px; text-transform: none; letter-spacing: 0; color: var(--v-blue, var(--dv-blue)); }
.unp-cap { margin-bottom: 8px; }
.unp-vf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 6px; }
.unp-vf .fi { margin: 0; min-width: 0; min-height: 42px; padding: 9px 12px; font-size: 16px; }   /* 16 px: o iPhone nao da zoom ao focar */
.unp-vf .unp-vq { grid-column: 1 / -1; }
.unp-vf.odd .unp-vo:last-child { grid-column: 1 / -1; }
.unp-v { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--v-line, var(--line)); }
.unp-v:last-child { border-bottom: 0; }
.unp-vb { flex: 1; min-width: 0; }
.unp-vt { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--v-strong, var(--text)); overflow-wrap: anywhere; }
.unp-sku { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 40px; margin-top: 4px; padding: 5px 10px 5px 9px; border: 1px solid var(--v-line, var(--line)); border-radius: 10px; background: var(--v-gray-bg, rgba(255,255,255,.05)); color: var(--v-muted, var(--muted)); font-family: var(--v-mono, monospace); font-size: 11px; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unp-sku span { min-width: 0; overflow-wrap: anywhere; }
.unp-sku svg { width: 14px; height: 14px; flex: none; stroke: var(--v-blue, var(--dv-blue)); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.unp-nosku { margin-top: 4px; }
.unp-vr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.unp-vp { font-size: 13.5px; font-weight: 600; color: var(--v-strong, var(--text)); white-space: nowrap; }
.unp-none { padding: 10px 0; }
.unp-sheet .btn.sm.un-btn.unp-more { display: flex; width: 100%; margin-top: 8px; }
.unp-sheet .btn.sm.un-btn.unp-more[hidden] { display: none; }

/* descricao, metacampos, tags */
.unp-desc { font-size: 13px; line-height: 1.5; color: var(--v-strong, var(--text)); white-space: pre-line; overflow-wrap: anywhere; }
.unp-desc.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.unp-sheet .btn.sm.un-btn.unp-dmore { flex: none; display: inline-flex; margin-top: 8px; }
.unp-det > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.unp-det > summary::-webkit-details-marker { display: none; }
.unp-det > summary .un-sec-h { margin-bottom: 0; }
.unp-det > summary::after { content: '▾'; font-size: 13px; color: var(--v-muted, var(--muted)); }
.unp-det[open] > summary::after { content: '▴'; }
.unp-mf { padding: 7px 0; border-bottom: 1px solid var(--v-line, var(--line)); }
.unp-mf:last-child { border-bottom: 0; }
.unp-mf-k { font-family: var(--v-mono, monospace); font-size: 11px; color: var(--v-muted, var(--muted)); overflow-wrap: anywhere; }
.unp-mf-v { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--v-strong, var(--text)); white-space: pre-wrap; overflow-wrap: anywhere; }
.unp-tags .as-st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* fotos de produto sempre sobre um quadro claro: tenis escuro em foto de fundo transparente sumia no tema escuro */
.unp-card .un-thumb.unp-th, .unp-v .un-thumb, .unp-tb, .unp-main { background: #f1f3f6; }