/* Loja virtual pública: design system "Vitrine" (referência Etsy, marca Lição Kids). Documentação em Melhorias/Design systems - Loja etsy/Loja Design System. As cores da marca (--sf-primary, --sf-button) e os rótulos legíveis sobre elas (--sf-on-primary, --sf-on-button) chegam das configurações pelo style do . */ @font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-latin-400.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-latin-500.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-latin-600.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-latin-700.woff2") format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/poppins-latin-800.woff2") format("woff2")} @font-face{font-family:"Literata";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/literata-latin-500.woff2") format("woff2")} :root { /* Marca (configurável no admin) */ --sf-primary: #1fd286; --sf-button: #1fd286; --sf-on-primary: #113228; --sf-on-button: #113228; /* Papel e tinta */ --sf-canvas: #faf8f5; --sf-surface: #ffffff; --sf-band: #efecea; --sf-ink: #312b36; --sf-muted: #6b6468; --sf-line: #e2ddd8; --sf-line-strong: #bdb5b0; /* Fundo da imagem nos cards da seção Categorias: um tom abaixo do papel, como o cinza do Mercado Livre. */ --sf-tile: #f4f2ef; /* Sinais */ --sf-brand-text: color-mix(in srgb, var(--sf-primary) 50%, #06281a); --sf-brand-soft: color-mix(in srgb, var(--sf-primary) 14%, #ffffff); --sf-discount: #00a650; --sf-highlight: #ffc340; --sf-highlight-soft: #fff3d1; --sf-highlight-ink: #5c4400; --sf-star: #ffb619; --sf-danger: #b3261e; --sf-danger-soft: #fdecea; --sf-link: #3a6ce0; /* Tipografia */ --sf-font: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --sf-font-display: Literata, Georgia, "Times New Roman", serif; /* Forma e espaço */ --sf-radius: 12px; --sf-radius-card: 10px; --sf-radius-small: 8px; --sf-pill: 999px; --sf-shadow: 0 1px 2px rgba(49, 43, 54, .06), 0 10px 28px rgba(49, 43, 54, .14); --sf-shadow-control: 0 2px 10px rgba(49, 43, 54, .18); --sf-max: 1240px; --sf-gutter: 24px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; } body.sf-body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--sf-canvas); color: var(--sf-ink); font-family: var(--sf-font); font-size: 15px; line-height: 1.55; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--sf-primary) 70%, #0b1f16); outline-offset: 2px; } .sf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sf-icon { width: 24px; height: 24px; flex-shrink: 0; } .sf-visually-hidden, .sf-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sf-skip { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 10px 16px; border-radius: var(--sf-pill); background: var(--sf-ink); color: #fff; text-decoration: none; } .sf-skip:focus { top: 12px; } .sf-preview-bar { padding: 8px 16px; background: var(--sf-highlight-soft); color: var(--sf-highlight-ink); font-size: 13px; text-align: center; } .sf-main { flex: 1; width: 100%; max-width: var(--sf-max); margin: 0 auto; padding: 0 var(--sf-gutter) 64px; } /* Títulos em serifa: a loja fala em serifa e trabalha em Poppins. */ .sf-row-head h2, .sf-catalog-head h1, .sf-message h1, .sf-empty h1, .sf-empty h2, .sf-cats-head h2, .sf-cats-head h1, .sf-footer-statement, .sf-accordion summary span, .sf-rating-summary strong { font-family: var(--sf-font-display); font-weight: 500; letter-spacing: -.015em; } /* Cabeçalho: no computador rola com a página; só o celular o prende no topo (max-width: 900px). */ .sf-header { position: relative; z-index: 20; background: var(--sf-canvas); border-bottom: 1px solid var(--sf-line); padding-top: env(safe-area-inset-top); } .sf-header-inner { display: flex; align-items: center; gap: 16px; max-width: var(--sf-max); margin: 0 auto; padding: 12px var(--sf-gutter); } .sf-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .sf-logo img { height: 48px; width: auto; max-width: 160px; object-fit: contain; } .sf-logo span { font-family: var(--sf-font-display); font-size: 24px; font-weight: 500; } .sf-menu-toggle { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: var(--sf-pill); background: transparent; font-weight: 500; cursor: pointer; } .sf-menu-toggle:hover, .sf-menu-toggle[aria-expanded="true"] { background: var(--sf-band); } /* Busca em pílula: borda de tinta, "×" para limpar e botão redondo na cor da marca. */ .sf-search { position: relative; flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; height: 48px; padding: 0 4px 0 18px; border: 2px solid var(--sf-ink); border-radius: var(--sf-pill); background: var(--sf-surface); } .sf-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font-size: 16px; outline: none; } .sf-search input::placeholder { color: var(--sf-muted); } .sf-search input::-webkit-search-cancel-button { display: none; } .sf-search:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-primary) 30%, transparent); } .sf-search-clear { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .sf-search-clear:hover { background: var(--sf-band); } .sf-search-clear[hidden] { display: none; } .sf-search-clear .sf-icon { width: 20px; height: 20px; } .sf-search-submit { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sf-primary); color: var(--sf-on-primary); cursor: pointer; transition: transform .15s ease; } .sf-search-submit:hover { transform: scale(1.06); } .sf-search-submit .sf-icon { width: 21px; height: 21px; } .sf-header-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--sf-pill); text-decoration: none; font-weight: 500; } a.sf-header-icon:hover { background: var(--sf-band); } .sf-header-icon .sf-icon { width: 26px; height: 26px; } .sf-header-cart { position: relative; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .sf-header-cart:hover, .sf-header-cart[aria-expanded="true"] { background: var(--sf-band); } /* "Cancelar" do modo de busca do celular: texto simples, sem fundo; fora do modo não existe. */ .sf-search-cancel { display: none; align-items: center; flex-shrink: 0; min-height: 44px; margin-right: -6px; padding: 0 8px; border: 0; border-radius: var(--sf-radius-small); background: transparent; color: var(--sf-ink); font-size: 15px; font-weight: 600; cursor: pointer; } .sf-search-cancel:hover { background: var(--sf-band); } /* Sugestões enquanto digita (storefront.js): painel logo abaixo da pílula, por cima da página. A altura vai até o fim da área visível (acima do teclado no celular) e o resto rola dentro dele. */ .sf-suggest { position: absolute; top: calc(100% + 8px); left: -2px; right: -2px; z-index: 30; max-height: var(--sf-suggest-max, min(440px, 70vh)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface); box-shadow: var(--sf-shadow); } .sf-suggest[hidden], .sf-suggest-list[hidden] { display: none; } .sf-suggest-item { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 6px 16px; text-decoration: none; } .sf-suggest-item:hover, .sf-suggest-all:hover { background: var(--sf-band); } /* Escolhida pelas setas: fundo e marca na cor da busca, como o foco. */ .sf-suggest-item[aria-selected="true"], .sf-suggest-all[aria-selected="true"] { background: var(--sf-band); box-shadow: inset 3px 0 0 var(--sf-primary); } .sf-suggest-thumb { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 55px; overflow: hidden; border-radius: 6px; background: var(--sf-band); color: var(--sf-muted); font-family: var(--sf-font-display); font-size: 18px; } .sf-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf-suggest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sf-suggest-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } .sf-suggest-name mark { background: transparent; color: inherit; font-weight: 600; } .sf-suggest-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--sf-muted); font-size: 13px; } .sf-suggest-meta strong { flex-shrink: 0; color: var(--sf-ink); font-size: 14px; font-weight: 600; } .sf-suggest-category { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-suggest-category::before { content: "· "; } .sf-suggest-all { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-top: 4px; padding: 0 16px; border-top: 1px solid var(--sf-line); font-size: 14px; font-weight: 600; text-decoration: none; } .sf-suggest-all .sf-icon { width: 18px; height: 18px; } .sf-suggest-empty { margin: 0; padding: 14px 16px; color: var(--sf-muted); font-size: 14px; } /* Centralizada quando cabe; quando não cabe, rola a partir da primeira (margem automática, não justify-content). */ .sf-nav { display: flex; gap: 0; max-width: var(--sf-max); margin: 0 auto; padding: 0 var(--sf-gutter) 8px; overflow-x: auto; scrollbar-width: none; } .sf-nav::-webkit-scrollbar { display: none; } .sf-nav a { flex-shrink: 0; padding: 6px 8px; border-radius: var(--sf-pill); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } .sf-nav a:first-child { margin-left: auto; } .sf-nav a:last-child { margin-right: auto; } .sf-nav.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); } .sf-nav a:hover { background: var(--sf-band); } /* Categorias: lista suspensa no computador, tela cheia no celular (JS posiciona). */ .sf-menu { position: fixed; inset: var(--sf-menu-top, 0) 0 0 0; z-index: 40; background: rgba(49, 43, 54, .3); } .sf-menu[hidden] { display: none; } .sf-menu-panel { position: absolute; top: 8px; left: var(--sf-menu-left, 24px); width: 340px; max-height: calc(100% - 24px); overflow-y: auto; padding: 8px 0; border-radius: var(--sf-radius); background: var(--sf-surface); box-shadow: var(--sf-shadow); } .sf-menu-head { display: none; } .sf-menu nav { display: flex; flex-direction: column; } .sf-menu nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; text-decoration: none; } .sf-menu nav a:hover { background: var(--sf-band); text-decoration: underline; } .sf-menu nav a:focus-visible { outline-offset: -3px; } .sf-menu nav .sf-icon { display: none; width: 20px; height: 20px; } /* Botões */ .sf-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--sf-pill); background: var(--sf-button); color: var(--sf-on-button); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .sf-button:hover { transform: scale(1.015); box-shadow: 0 6px 18px color-mix(in srgb, var(--sf-button) 35%, transparent); } .sf-button:active { transform: scale(.985); } .sf-button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 2px solid var(--sf-ink); border-radius: var(--sf-pill); background: transparent; color: var(--sf-ink); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease; } .sf-button-secondary:hover { background: var(--sf-band); } .sf-button-small { min-height: 40px; padding: 0 18px; border-width: 1.5px; font-size: 14px; } .sf-button-small .sf-icon { width: 18px; height: 18px; } /* Home */ .sf-hero { position: relative; margin: 20px 0 0; } .sf-hero-track { display: flex; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--sf-radius); background: var(--sf-surface); } .sf-hero-track::-webkit-scrollbar { display: none; } .sf-hero-slide { flex: 0 0 100%; scroll-snap-align: start; } /* Proporção natural da imagem enviada: nada do banner é cortado. */ .sf-hero-slide img { width: 100%; height: auto; } .sf-hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .sf-hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--sf-pill); background: color-mix(in srgb, var(--sf-ink) 22%, transparent); cursor: pointer; transition: width .2s ease, background .2s ease; } .sf-hero-dots button[aria-current="true"] { width: 24px; background: var(--sf-ink); } .sf-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 16px 0; border-block: 1px solid var(--sf-line); list-style: none; } .sf-trust li { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sf-muted); font-size: 14px; } .sf-trust strong { color: var(--sf-ink); font-weight: 600; } .sf-trust .sf-icon { width: 26px; height: 26px; color: var(--sf-primary); } .sf-row { margin-top: 56px; } .sf-row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .sf-row-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 28px; line-height: 1.2; text-wrap: balance; } /* "Ver todos" nunca quebra nem encolhe: quem cede espaço é o título. */ .sf-row-head .sf-button-small { flex-shrink: 0; white-space: nowrap; } .sf-row-grid, .sf-grid { --sf-card-row-gap: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: var(--sf-card-row-gap); } .sf-section-banner { margin-top: 56px; } .sf-section-banner img { width: 100%; height: auto; border-radius: var(--sf-radius); } .sf-banner-link { display: block; } /* Leque de produtos (home, partials/product-fan.ejs): capas sobrepostas, o centro na frente e as laterais cada vez mais inclinadas. Cada carta se posiciona por data-sf-fan-pos; a roda (storefront-fan.js) muda essa posição e a transição faz o deslize. --sf-fan-reach: até que posição as cartas aparecem nesta largura. */ .sf-fan { --sf-fan-card: clamp(170px, 19vw, 250px); --sf-fan-step: .56; --sf-fan-tilt: 4deg; --sf-fan-reach: 3; margin-top: 56px; overflow-x: clip; } .sf-fan-stage { position: relative; height: calc(var(--sf-fan-card) * 1.22); } .sf-fan-card { --x: 0; --depth: 0; position: absolute; top: 0; left: 50%; z-index: calc(4 - var(--depth)); display: grid; place-items: center; overflow: hidden; width: var(--sf-fan-card); aspect-ratio: 1; margin-left: calc(var(--sf-fan-card) / -2); border-radius: var(--sf-radius); background: var(--sf-surface); box-shadow: 0 0 0 1px var(--sf-line), var(--sf-shadow); transform-origin: 50% 100%; translate: calc(var(--x) * var(--sf-fan-card) * var(--sf-fan-step)) calc(var(--depth) * var(--sf-fan-card) * .045); rotate: calc(var(--x) * var(--sf-fan-tilt)); scale: calc(1 - var(--depth) * .05); transition-property: translate, rotate, scale, opacity, visibility, transform; transition-duration: .6s, .6s, .6s, .45s, .45s, .2s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); } .sf-fan-card img { width: 100%; height: 100%; object-fit: contain; } .sf-fan-card:focus-visible { z-index: 5; } /* Reserva que dá a volta de uma ponta à outra: passa escondida e sem transição. */ .sf-fan-card.is-wrapping { transition: none; } .sf-fan-card[data-sf-fan-pos="-4"] { --x: -4; --depth: 4; } .sf-fan-card[data-sf-fan-pos="-3"] { --x: -3; --depth: 3; } .sf-fan-card[data-sf-fan-pos="-2"] { --x: -2; --depth: 2; } .sf-fan-card[data-sf-fan-pos="-1"] { --x: -1; --depth: 1; } .sf-fan-card[data-sf-fan-pos="1"] { --x: 1; --depth: 1; } .sf-fan-card[data-sf-fan-pos="2"] { --x: 2; --depth: 2; } .sf-fan-card[data-sf-fan-pos="3"] { --x: 3; --depth: 3; } .sf-fan-card[data-sf-fan-pos="4"] { --x: 4; --depth: 4; } /* Com o script, toda carta fica no layout para poder deslizar; a que passa do alcance some sem receber clique. */ .sf-fan.is-live .sf-fan-card { display: grid; } .sf-fan.is-live .sf-fan-card[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; } /* Entrada: quando o leque aparece na tela, as cartas saem juntas do centro e abrem do centro para as pontas. Só a animação parte do invisível; sem ela (sem script, extensão, falha), as cartas já estão no lugar. */ @keyframes sf-fan-enter { from { translate: 0 calc(var(--sf-fan-card) * .08); rotate: 0deg; opacity: 0; } } .sf-fan.is-entering .sf-fan-card { animation: sf-fan-enter .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--depth) * 70ms); } /* Setas montadas na borda da última carta visível (nem na borda da página nem no meio da carta central): na horizontal, centro da seta na borda externa da carta (a inclinação compensa a redução de escala); na vertical, meio da carta de fora, que desce com a profundidade. Sem passar da borda do palco. */ .sf-fan-arrow { --sf-fan-arrow-x: calc(var(--sf-fan-card) * (var(--sf-fan-reach) * var(--sf-fan-step) + .5)); position: absolute; top: calc(var(--sf-fan-card) * (.5 + .07 * var(--sf-fan-reach)) - 22px); z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-shadow-control); cursor: pointer; transition: transform .15s ease; } .sf-fan-arrow[hidden] { display: none; } .sf-fan-arrow .sf-icon { width: 22px; height: 22px; } .sf-fan-arrow:active { transform: scale(.94); } .sf-fan-prev { left: max(0px, calc(50% - var(--sf-fan-arrow-x) - 22px)); } .sf-fan-next { right: max(0px, calc(50% - var(--sf-fan-arrow-x) - 22px)); } @media (hover: hover) and (pointer: fine) { .sf-fan-card:hover { transform: translateY(-6px); } .sf-fan-arrow:hover { background: var(--sf-band); } } /* Fim do leque */ /* Card de produto no modelo Mercado Livre, o mesmo em todas as grades (home, categoria, busca, favoritos) e no trilho de relacionados: caixa branca com borda, capa colada na borda com divisória e o texto com respiro. Linhas em fluxo: linha ausente num card (estrelas, De riscado, vendidos) não reserva espaço e o resto sobe, mesmo que o vizinho tenha a linha. Preço e vendidos dividem a linha; se não couber, "vendidos" desce inteiro. */ .sf-card { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: baseline; column-gap: 6px; min-width: 0; padding: 0 16px 16px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius-card); box-shadow: 0 1px 2px rgba(49, 43, 54, .08); transition: box-shadow .2s ease; } .sf-card > * { flex: 1 1 100%; } .sf-card > :is(.sf-card-price, .sf-card-sold) { flex: 0 1 auto; } .sf-card-link { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; text-decoration: none; } .sf-card-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-inline: -16px; border-radius: calc(var(--sf-radius-card) - 1px) calc(var(--sf-radius-card) - 1px) 0 0; border-bottom: 1px solid var(--sf-line); background: var(--sf-surface); overflow: hidden; } .sf-card-media img { width: 100%; height: 100%; object-fit: contain; } .sf-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sf-line); font-family: var(--sf-font-display); font-size: 56px; } .sf-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; font-size: 16px; line-height: 1.35; } .sf-card-link:hover .sf-card-name { text-decoration: underline; } /* Estrelas + quantidade logo abaixo do título; quebra antes de gerar rolagem lateral. */ .sf-card-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: -2px 0 6px; color: var(--sf-muted); font-size: 13px; line-height: 1.35; } .sf-card-rating .sf-stars .sf-icon { width: 16px; height: 16px; } .sf-card-was { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; } .sf-card-off { padding: 2px 6px; border-radius: 4px; background: var(--sf-discount); color: var(--sf-surface); font-size: 13px; font-weight: 700; line-height: 1.35; } .sf-card-was s { color: var(--sf-muted); font-size: 14px; } .sf-card-price { display: flex; align-items: baseline; margin: 0; } .sf-card-price strong { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; } /* Centavos em cima sem mexer na altura da linha. */ .sf-card-price sup { position: relative; top: -.8em; margin-left: 2px; font-size: .5em; vertical-align: baseline; } .sf-card-sold { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.35; } .sf-card-owned { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; color: var(--sf-brand-text); font-size: 13px; font-weight: 600; line-height: 1.35; } .sf-card-owned .sf-icon { width: 16px; height: 16px; } /* Favoritos. Coração no canto da capa (Etsy): no mouse aparece ao passar sobre o card e fica fixo quando marcado; no toque, sempre à vista. Só existe depois que o script carrega. */ .sf-card { position: relative; } .sf-card-favorite { position: absolute; top: 10px; right: 10px; z-index: 1; display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-shadow-control); cursor: pointer; transition: transform .15s ease, opacity .15s ease; } .sf-favorites-ready .sf-card-favorite { display: grid; } .sf-card-favorite:hover { transform: scale(1.06); } .sf-card-favorite .sf-icon { width: 21px; height: 21px; } @media (hover: hover) and (pointer: fine) { .sf-card:hover { box-shadow: var(--sf-shadow-control); } .sf-card-favorite[aria-pressed="false"] { opacity: 0; } .sf-card:hover .sf-card-favorite, .sf-card:focus-within .sf-card-favorite, .sf-favorites-grid .sf-card-favorite { opacity: 1; } } /* "Você também pode gostar" no modelo Mercado Livre (product.ejs): trilho com o card comum, rolagem nativa (dedo, trackpad, Tab até o card) e snap no início de cada card. Computador: as setas passam uma página e somem na ponta sem mais nada (storefront.js, [data-sf-rail]). Toque: arrasta com o dedo e o próximo card fica cortado na borda da tela. O respiro em volta (padding com margem negativa) deixa a sombra e o foco sem corte; é menor que o espaço entre cards, então o vizinho nunca aparece nele. */ .sf-related-rail { position: relative; } .sf-related-track { --sf-rail-gap: 16px; display: flex; gap: var(--sf-rail-gap); margin: -4px -12px -16px; padding: 4px 12px 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; scrollbar-width: none; } .sf-related-track::-webkit-scrollbar { display: none; } .sf-related-track > .sf-card { flex: 0 0 calc((100% - 3 * var(--sf-rail-gap)) / 4); scroll-snap-align: start; } /* Seta do Mercado Livre: círculo branco com o chevron azul, no meio da altura do card e sobre a borda do trilho. Passa da borda do card, mas fica dentro da margem da página (24px): nunca cria rolagem lateral. */ .sf-rail-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-link); box-shadow: var(--sf-shadow-control); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; } .sf-rail-arrow[hidden] { display: none; } .sf-rail-arrow .sf-icon { width: 28px; height: 28px; } .sf-rail-arrow:active { transform: scale(.94); } .sf-rail-prev { left: -20px; } .sf-rail-next { right: -20px; } @media (hover: hover) and (pointer: fine) { .sf-rail-arrow:hover { box-shadow: var(--sf-shadow); } } /* Fim do trilho */ /* Seção "Categorias" (modelo Mercado Livre, partials/category-section.ejs): um componente só para todos os tamanhos. Do tablet em diante, cards deitados (imagem à esquerda, nome à direita) em grupos de 3 linhas que deslizam no trilho; as colunas (--sf-cat-cols) decidem o tamanho do grupo em storefront-categories.js. No celular, grade de 3 com a imagem em cima e "Mostrar mais categorias". A imagem nunca é cortada. */ /* Painel branco do Mercado Livre: a seção é um cartão com respiro dos lados (borda, não sombra: ele não flutua). */ .sf-cats { --sf-cat-cols: 4; --sf-cat-gap: 16px; margin-top: 56px; padding: 24px 28px 28px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-surface); } .sf-cats-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 18px; } .sf-cats-head h2 { margin: 0; font-size: 28px; line-height: 1.2; } .sf-cats-head h1 { margin: 0; font-size: 36px; line-height: 1.15; } .sf-cats-all { color: var(--sf-link); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; } .sf-cats-all:hover { text-decoration: underline; } /* Bolinhas: no máximo 6 à vista (dotWindow da galeria); o trilho desliza e as pontas encolhem. */ .sf-cats-dots { align-self: center; width: calc(var(--sf-dots, 3) * 16px); margin-left: auto; overflow: hidden; } .sf-cats-dots[hidden] { display: none; } .sf-cats-dots-strip { display: flex; transform: translateX(calc(var(--sf-dots-start, 0) * -16px)); transition: transform .25s ease; } .sf-cats-dots-strip button { display: grid; place-items: center; flex: 0 0 16px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .sf-cats-dots-strip button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--sf-ink) 22%, transparent); transition: background .2s ease, transform .2s ease; } .sf-cats-dots-strip button[aria-current="true"]::before { background: var(--sf-link); transform: scale(1.2); } .sf-cats-dots-strip button.is-edge::before { transform: scale(.6); } .sf-cats-dots-strip button:focus-visible { outline-offset: -3px; } .sf-cats-body { position: relative; } /* O respiro de 8px em volta deixa o foco e a sombra do card à vista dentro do trilho. */ .sf-cats-track { display: flex; gap: var(--sf-cat-gap); margin: -8px; padding: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: none; } .sf-cats-track::-webkit-scrollbar { display: none; } .sf-cats-grid { flex: 0 0 100%; align-self: flex-start; display: grid; grid-template-columns: repeat(var(--sf-cat-cols), minmax(0, 1fr)); align-content: start; gap: var(--sf-cat-gap); margin: 0; padding: 0; list-style: none; scroll-snap-align: start; } .sf-cats-item { display: flex; min-width: 0; } .sf-cat-card { flex: 1; display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); min-height: 112px; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-small); background: var(--sf-surface); color: var(--sf-ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } .sf-cat-media { display: grid; place-items: center; padding: 12px; background: var(--sf-tile); } /* multiply: imagem com fundo branco (JPG) se funde ao fundo do card, como a transparente. */ .sf-cat-media img { width: 100%; height: 88px; object-fit: contain; mix-blend-mode: multiply; } .sf-cat-media.is-empty { color: var(--sf-line-strong); } .sf-cat-media.is-empty .sf-icon { width: 36px; height: 36px; } /* Margem, não padding: o corte de linhas esconde a sobra só até a borda do conteúdo (padding deixaria a linha seguinte à vista). */ .sf-cat-name { display: -webkit-box; align-self: center; margin: 12px 16px; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Setas do Mercado Livre, como as do "Você também pode gostar": passam da borda do card, nunca da margem. */ /* A seta fica no meio do grupo à vista (--sf-cats-arrow-y, do script): no último grupo, mais curto, ela sobe junto. */ .sf-cats-arrow { position: absolute; top: var(--sf-cats-arrow-y, 50%); z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-link); box-shadow: var(--sf-shadow-control); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, top .25s ease; } .sf-cats-arrow[hidden] { display: none; } .sf-cats-arrow .sf-icon { width: 28px; height: 28px; } .sf-cats-arrow:active { transform: scale(.94); } .sf-cats-prev { left: -20px; } .sf-cats-next { right: -20px; } .sf-cats-more { display: none; } .sf-cats-more .sf-icon { width: 18px; height: 18px; transition: transform .2s ease; } .sf-cats-more[aria-expanded="true"] .sf-icon { transform: rotate(180deg); } .sf-cats.is-all { margin-top: 0; } .sf-cats.is-all .sf-cats-head { justify-content: center; margin-bottom: 24px; } .sf-cats.is-all .sf-cats-track { overflow: visible; } @media (hover: hover) and (pointer: fine) { .sf-cat-card:hover { border-color: var(--sf-line-strong); box-shadow: var(--sf-shadow); } .sf-cats-arrow:hover { box-shadow: var(--sf-shadow); } } /* Fim da seção Categorias */ .sf-header-favorites { position: relative; } /* Selo de notificação: preso ao canto superior direito do ícone (centralizado no botão), cobre só a ponta do desenho e cresce para fora, nunca para o centro. O número vai até "9+". */ .sf-header-count { position: absolute; top: calc(50% - 19px); left: calc(50% + 5px); display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-surface); box-shadow: 0 0 0 2px var(--sf-canvas); font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none; } .sf-header-count[hidden] { display: none; } .sf-favorites { margin-top: 28px; } .sf-favorites-head { margin-bottom: 20px; } /* Aviso do visitante: discreto, sem caixa, como o da Etsy. */ .sf-favorites-notice { display: flex; align-items: flex-start; gap: 12px; max-width: 640px; margin: 0 0 32px; } .sf-favorites-notice > .sf-icon { margin-top: 1px; } .sf-favorites-notice strong { font-size: 16px; font-weight: 600; } .sf-favorites-notice p { margin: 4px 0 6px; color: var(--sf-muted); font-size: 14px; } .sf-favorites-notice a, .sf-favorites-account a { color: var(--sf-link); font-weight: 600; text-underline-offset: 3px; } .sf-favorites-account { display: flex; align-items: flex-start; gap: 8px; max-width: 640px; margin: 0 0 32px; color: var(--sf-muted); font-size: 14px; } .sf-favorites-account .sf-icon { width: 20px; height: 20px; color: var(--sf-brand-text); } /* Desfavoritado na própria lista: esmaece e continua no lugar até a próxima visita. */ .sf-favorites-grid .sf-card > :not(.sf-card-favorite) { transition: opacity .2s ease; } .sf-favorites-grid .sf-card:has(.sf-card-favorite[aria-pressed="false"]) > :not(.sf-card-favorite) { opacity: .45; } .sf-favorites-grid[aria-busy="true"]:empty { min-height: 240px; } .sf-favorites-empty .sf-icon { width: 48px; height: 48px; margin: 0 auto 14px; color: var(--sf-line-strong); } .sf-favorites-empty .sf-button { margin-top: 24px; color: var(--sf-on-button); } .sf-owned-note { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--sf-brand-text); font-weight: 600; } .sf-owned-note .sf-icon { width: 20px; height: 20px; } .sf-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 50; max-width: min(440px, calc(100vw - 32px)); margin: 0; padding: 12px 20px; border-radius: var(--sf-pill); background: var(--sf-ink); color: var(--sf-surface); box-shadow: var(--sf-shadow); font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; } .sf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* Carrinho: botão da página do produto e gaveta lateral (storefront.js). Acima da barra fixa e do menu de categorias; o aviso (.sf-toast) continua por cima. */ .sf-cart-add { width: 100%; min-height: 52px; margin-top: 12px; border-width: 1px; } .sf-cart-add.is-in-cart { border-color: var(--sf-brand-text); color: var(--sf-brand-text); } .sf-cart { position: fixed; inset: 0; z-index: 45; } .sf-cart[hidden] { display: none; } .sf-cart-overlay { position: absolute; inset: 0; background: rgba(49, 43, 54, .3); opacity: 0; transition: opacity .22s ease; } .sf-cart-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 100vw); padding-top: env(safe-area-inset-top); background: var(--sf-surface); box-shadow: var(--sf-shadow); outline: none; transform: translateX(100%); transition: transform .22s cubic-bezier(.2, 0, 0, 1); } .sf-cart.is-open .sf-cart-overlay { opacity: 1; } .sf-cart.is-open .sf-cart-drawer { transform: none; } .sf-cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--sf-line); } .sf-cart-head h2 { margin: 0; font-family: var(--sf-font-display); font-size: 24px; font-weight: 500; } .sf-cart-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sf-ink); cursor: pointer; } .sf-cart-close:hover { background: var(--sf-band); } .sf-cart-added { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 24px; background: var(--sf-brand-soft); color: var(--sf-brand-text); font-weight: 600; } .sf-cart-added[hidden] { display: none; } .sf-cart-added .sf-icon { width: 20px; height: 20px; } .sf-cart-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px; } .sf-cart-list { margin: 0; padding: 0; list-style: none; transition: opacity .15s ease; } .sf-cart-list[aria-busy="true"] { opacity: .55; } .sf-cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--sf-line); } .sf-cart-item:last-child { border-bottom: 0; } .sf-cart-thumb { display: block; width: 64px; height: 80px; overflow: hidden; border-radius: var(--sf-radius-small); background: var(--sf-band); } .sf-cart-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .sf-cart-thumb-placeholder { display: grid; place-items: center; height: 100%; color: var(--sf-muted); font-family: var(--sf-font-display); font-size: 24px; } .sf-cart-item-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .sf-cart-item-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--sf-ink); font-weight: 500; line-height: 1.35; text-decoration: none; } .sf-cart-item-name:hover { text-decoration: underline; text-underline-offset: 3px; } .sf-cart-item-price { font-size: 16px; font-weight: 700; } .sf-cart-remove { margin-top: 2px; padding: 4px 0; border: 0; background: transparent; color: var(--sf-muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sf-cart-remove:hover { color: var(--sf-ink); } .sf-cart-empty { padding: 48px 0; color: var(--sf-muted); text-align: center; } .sf-cart-empty[hidden] { display: none; } .sf-cart-empty .sf-icon { display: block; width: 48px; height: 48px; margin: 0 auto 12px; color: var(--sf-line-strong); } .sf-cart-empty p { margin: 0; } .sf-cart-empty p + p { margin-top: 4px; font-size: 14px; } .sf-cart-empty .sf-button-secondary { margin-top: 20px; } .sf-cart-foot { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sf-line); background: var(--sf-surface); } .sf-cart-foot[hidden] { display: none; } .sf-cart-totals { margin: 0 0 4px; } .sf-cart-totals div { display: flex; justify-content: space-between; gap: 12px; } .sf-cart-totals div + div { margin-top: 4px; } .sf-cart-totals dt, .sf-cart-totals dd { margin: 0; } .sf-cart-totals div:first-child { color: var(--sf-muted); font-size: 14px; } .sf-cart-total { font-size: 18px; font-weight: 700; } .sf-cart-note { margin: 0; color: var(--sf-muted); font-size: 13px; } .sf-cart-checkout, .sf-cart-continue { width: 100%; } .sf-cart-checkout { color: var(--sf-on-button); } /* Categoria e busca */ .sf-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 16px; color: var(--sf-muted); font-size: 13px; } .sf-breadcrumb a { color: var(--sf-ink); text-underline-offset: 3px; } .sf-breadcrumb [aria-current] { color: var(--sf-muted); } .sf-catalog-head { margin: 8px 0 24px; } .sf-catalog-head h1 { margin: 0; font-size: 36px; line-height: 1.15; } .sf-catalog-head p { margin: 6px 0 0; color: var(--sf-muted); font-size: 14px; } .sf-catalog-head-center { text-align: center; } .sf-toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; } .sf-filter > summary { list-style: none; } .sf-filter > summary::-webkit-details-marker { display: none; } .sf-filter[open] > summary { background: var(--sf-band); } .sf-filter-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-primary); } .sf-filter-form { position: absolute; z-index: 10; top: calc(100% + 8px); left: 0; display: flex; flex-direction: column; gap: 12px; width: min(340px, 100%); padding: 20px; border-radius: var(--sf-radius); background: var(--sf-surface); box-shadow: var(--sf-shadow); } .sf-filter-range { margin: 0; color: var(--sf-muted); font-size: 13px; } .sf-filter-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sf-filter-fields label { display: flex; flex-direction: column; gap: 4px; color: var(--sf-muted); font-size: 12px; } .sf-filter-fields input, .sf-form input, .sf-form textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius-small); background: var(--sf-surface); } .sf-filter-fields input:focus, .sf-form input:focus, .sf-form textarea:focus { border-color: var(--sf-ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 30%, transparent); } .sf-filter-clear { color: var(--sf-muted); font-size: 13px; text-align: center; } /* "Ordenar por": pílula como a do filtro, que abre o mesmo painel branco (a lista nativa do navegador não segue a loja). */ .sf-sort { position: relative; } .sf-sort > summary { gap: 6px; padding-right: 14px; list-style: none; } .sf-sort > summary::-webkit-details-marker { display: none; } .sf-sort[open] > summary { background: var(--sf-band); } .sf-sort-label { color: var(--sf-muted); font-weight: 400; } .sf-sort > summary strong { font-weight: 600; } .sf-sort > summary .sf-icon { transition: transform .2s ease; } .sf-sort[open] > summary .sf-icon { transform: rotate(180deg); } .sf-sort-menu { position: absolute; z-index: 10; top: calc(100% + 8px); right: 0; min-width: 220px; margin: 0; padding: 8px; border-radius: var(--sf-radius); background: var(--sf-surface); box-shadow: var(--sf-shadow); list-style: none; } .sf-sort-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--sf-radius-small); color: var(--sf-ink); font-size: 15px; text-decoration: none; } .sf-sort-menu a:hover { background: var(--sf-band); } .sf-sort-menu a:focus-visible { outline-offset: -3px; } .sf-sort-menu a[aria-current="true"] { font-weight: 600; } .sf-sort-menu .sf-icon { width: 18px; height: 18px; color: var(--sf-brand-text); } .sf-search-page { margin-top: 28px; } .sf-empty { max-width: 480px; margin: 56px auto; text-align: center; } .sf-empty h1, .sf-empty h2 { margin: 0 0 8px; font-size: 26px; } .sf-empty p { margin: 0; color: var(--sf-muted); } .sf-empty a { color: var(--sf-brand-text); font-weight: 600; } /* Produto. Computador: galeria, descrição e avaliações à esquerda; título, preço, botão e detalhes à direita. Celular: uma coluna, com as informações antes da galeria. */ .sf-product { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "gallery info" "gallery buy" "feedback buy"; column-gap: 48px; align-items: start; } .sf-product-info { grid-area: info; margin-bottom: 18px; } .sf-product-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; color: var(--sf-muted); font-size: 13px; } .sf-product-facts { margin: 0; } .sf-product-facts span { margin: 0 4px; } .sf-rating-link { display: inline-flex; color: var(--sf-muted); text-decoration: none; white-space: nowrap; } .sf-rating-link:hover { color: var(--sf-ink); } .sf-rating-link > span { display: inline-flex; align-items: center; gap: 4px; } .sf-stars { display: inline-flex; gap: 1px; vertical-align: middle; } .sf-stars .sf-icon { width: 14px; height: 14px; color: var(--sf-line); } .sf-stars .sf-icon.is-on { color: var(--sf-star); } .sf-star-half { position: relative; display: inline-flex; } .sf-star-half .sf-icon.is-on { position: absolute; top: 0; left: 0; clip-path: inset(0 50% 0 0); } /* Selos (Loja virtual → Selos): mesma pílula no card e na página do produto. Fundo e tinta chegam por selo em --sf-badge-bg/--sf-badge-ink; o contorno leve segura fundos claros sobre o papel. */ .sf-badges { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0; } .sf-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px 3px 6px; border-radius: var(--sf-pill); background: var(--sf-badge-bg, var(--sf-highlight)); color: var(--sf-badge-ink, var(--sf-ink)); box-shadow: inset 0 0 0 1px rgba(49, 43, 54, .08); font-size: 12px; font-weight: 600; line-height: 1.3; } .sf-badge.is-text-only { padding-left: 10px; } .sf-badge .sf-icon { width: 16px; height: 16px; } .sf-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-product-info .sf-badges { margin-top: 10px; } .sf-product-info h1 { margin: 12px 0 0; font-family: var(--sf-font-display); font-size: 28px; font-weight: 500; line-height: 1.22; letter-spacing: -.015em; text-wrap: balance; } .sf-gallery { grid-area: gallery; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 8px; } .sf-gallery-main { grid-column: 2; grid-row: 1; display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--sf-radius); background: var(--sf-surface); transition: height .25s ease; } .sf-gallery-main::-webkit-scrollbar { display: none; } .sf-gallery-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; } /* A imagem ocupa toda a largura e a altura sai da proporção dela (1:1, 4:5, 9:16...): nada é cortado nem deformado, e imagem pequena é ampliada até a largura. */ .sf-gallery-slide img { display: block; width: 100%; height: auto; } .sf-gallery-slide.sf-card-placeholder { aspect-ratio: 1; } /* Vídeo na galeria: parece uma imagem da galeria. A caixa toma o formato real do vídeo (sem faixas) e fica centralizada num fundo neutro da loja; sem tela preta enquanto o player inicia (a capa fica até tocar). */ .sf-gallery-video { --sf-video-max-h: min(78vh, 720px); display: flex; justify-content: center; background: var(--sf-surface); } .sf-video-frame { position: relative; width: min(100%, calc(var(--sf-video-max-h) * var(--sf-video-ratio-value, 1.7778))); aspect-ratio: var(--sf-video-ratio, 16 / 9); overflow: hidden; background: color-mix(in srgb, var(--sf-ink) 6%, var(--sf-surface)); } .sf-video-frame.is-9x16 { --sf-video-ratio: 9 / 16; --sf-video-ratio-value: .5625; } .sf-video-frame.is-1x1 { --sf-video-ratio: 1 / 1; --sf-video-ratio-value: 1; } .sf-video-frame > .sf-video-poster, .sf-video-frame > .sf-video-placeholder, .sf-video-frame > .sf-video-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sf-video-frame > .sf-video-poster { object-fit: contain; } /* O player arredonda o vídeo a meio pixel e sobra um filete escuro nas bordas: 1% a mais o esconde. */ .sf-video-frame > .sf-video-player { transform: scale(1.01); } /* Miniatura de reserva do YouTube (4:3 com faixas): recortada para mostrar só o vídeo. */ .sf-video-frame > .sf-video-poster.is-cropped { object-fit: cover; } .sf-video-frame > .sf-video-placeholder { background: color-mix(in srgb, var(--sf-ink) 8%, var(--sf-surface)); } .sf-video-frame > [hidden] { display: none; } .sf-gallery-video:not(.is-ready) .sf-video-player { opacity: 0; } .sf-gallery-video.is-ready .sf-video-poster, .sf-gallery-video.is-ready .sf-video-placeholder, .sf-gallery-video.is-open .sf-video-play { display: none; } .sf-video-play { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-shadow-control); transform: translate(-50%, -50%); cursor: pointer; transition: transform .15s ease; } .sf-video-play:hover { transform: translate(-50%, -50%) scale(1.06); } .sf-video-play .sf-icon { width: 26px; height: 26px; margin-left: 3px; } /* Camada da loja por cima do player limpo: clique/toque pausa e o swipe horizontal rola o trilho. Sem comando (Drive, Panda), no toque só as bordas, para os controles do player continuarem acessíveis. */ .sf-video-gesture { position: absolute; inset: 0; z-index: 2; touch-action: pan-x pan-y; cursor: pointer; } .sf-video-frame.is-edges .sf-video-gesture { right: auto; width: 16%; cursor: default; } .sf-video-frame.is-edges .sf-video-gesture + .sf-video-gesture { right: 0; left: auto; } /* Controles da loja, discretos: aparecem no hover, com o vídeo pausado, com foco e sempre nas telas de toque. */ .sf-video-controls { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sf-video-controls > * { pointer-events: auto; } .sf-video-controls [data-sf-video-toggle] { margin-right: auto; } .sf-video-frame:hover .sf-video-controls, .sf-video-frame:focus-within .sf-video-controls, .sf-gallery-video.is-paused .sf-video-controls { opacity: 1; } .sf-video-control { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--sf-surface) 92%, transparent); color: var(--sf-ink); box-shadow: var(--sf-shadow-control); cursor: pointer; } .sf-video-control[hidden] { display: none; } .sf-video-control .sf-icon { width: 20px; height: 20px; } .sf-gallery-video.is-paused .sf-video-icon-pause, .sf-gallery-video:not(.is-paused) .sf-video-icon-play { display: none; } .sf-video-sound .sf-video-sound-on, .sf-video-sound[aria-pressed="true"] .sf-video-sound-off { display: none; } .sf-video-sound[aria-pressed="true"] .sf-video-sound-on { display: block; } @media (hover: none) { .sf-video-controls { opacity: 1; } .sf-video-control { width: 44px; height: 44px; } } .sf-video-frame:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; background: var(--sf-ink); } /* Plano B do som (iPhone): aviso por cima do player, sem bloquear o toque nos controles dele. */ .sf-video-hint { position: absolute; bottom: 68px; left: 50%; z-index: 3; max-width: calc(100% - 24px); margin: 0; padding: 8px 12px; border-radius: var(--sf-radius-small); background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-shadow-control); font-size: 14px; font-weight: 600; text-align: center; transform: translateX(-50%); pointer-events: none; } .sf-video-error { position: absolute; inset: auto 12px 12px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--sf-radius-small); background: var(--sf-surface); color: var(--sf-ink); font-size: 14px; text-align: center; } .sf-video-error button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } .sf-gallery-arrow { grid-column: 2; grid-row: 1; z-index: 1; display: grid; place-items: center; align-self: start; width: 44px; height: 44px; margin: calc(var(--sf-gallery-h, 480px) / 2 - 22px) 14px 0; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); box-shadow: var(--sf-shadow-control); cursor: pointer; transition: transform .15s ease; } .sf-gallery-arrow:hover { transform: scale(1.06); } .sf-gallery-arrow .sf-icon { width: 20px; height: 20px; } .sf-gallery-prev { justify-self: start; } .sf-gallery-next { justify-self: end; } /* Compartilhar (só no celular) e favoritar, no canto de cima da imagem. */ .sf-gallery-actions { grid-column: 2; grid-row: 1; z-index: 2; display: flex; gap: 8px; align-self: start; justify-self: end; margin: 14px; } .sf-gallery-actions[hidden] { display: none; } .sf-gallery-action { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sf-surface); color: var(--sf-ink); box-shadow: var(--sf-shadow-control); cursor: pointer; transition: transform .15s ease; } .sf-gallery-action:hover { transform: scale(1.06); } .sf-gallery-action .sf-icon { width: 22px; height: 22px; } .sf-favorite[aria-pressed="true"] { color: var(--sf-danger); } .sf-favorite[aria-pressed="true"] .sf-favorite-off, .sf-favorite:not([aria-pressed="true"]) .sf-favorite-on { display: none; } .sf-favorite.is-popping .sf-icon { animation: sf-favorite-pop .3s ease; } @keyframes sf-favorite-pop { 50% { transform: scale(1.25); } } .sf-share { display: none; position: relative; } .sf-share-menu { position: absolute; top: calc(100% + 8px); right: 0; display: grid; min-width: 200px; padding: 6px; border-radius: var(--sf-radius); background: var(--sf-surface); box-shadow: var(--sf-shadow); } .sf-share-menu[hidden] { display: none; } .sf-share-menu a, .sf-share-menu button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--sf-radius-small); background: transparent; color: var(--sf-ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; } .sf-share-menu a:hover, .sf-share-menu button:hover { background: var(--sf-band); } .sf-share-menu a:focus-visible, .sf-share-menu button:focus-visible { outline-offset: -3px; } .sf-share-menu .sf-icon { width: 20px; height: 20px; } /* Bolinhas: janela para até 6 (8px + 8px de espaço cada) e um trilho que desliza com a imagem ativa. */ .sf-gallery-dots { display: none; justify-self: center; width: calc(var(--sf-dots, 6) * 16px); padding-top: 12px; overflow: hidden; } .sf-gallery-dots-strip { display: flex; flex-shrink: 0; gap: 8px; padding: 2px 4px; transform: translateX(calc(var(--sf-dots-start, 0) * -16px)); transition: transform .25s ease; } .sf-gallery-dots-strip span { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--sf-ink) 22%, transparent); transition: background .2s ease, transform .2s ease; } .sf-gallery-dots-strip span[aria-current="true"] { background: var(--sf-ink); transform: scale(1.2); } /* Bolinha da ponta menor quando ainda há imagens daquele lado. */ .sf-gallery-dots-strip span.is-edge { transform: scale(.6); } .sf-gallery-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; max-height: max(var(--sf-gallery-h, 560px), 320px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .sf-gallery-thumbs::-webkit-scrollbar { display: none; } /* Sem barra visível: a borda com miniaturas escondidas esmaece (data-sf-fade, via storefront.js). */ .sf-gallery-thumbs[data-sf-fade] { --sf-fade-top: 0px; --sf-fade-bottom: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--sf-fade-top), #000 calc(100% - var(--sf-fade-bottom)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--sf-fade-top), #000 calc(100% - var(--sf-fade-bottom)), transparent); } .sf-gallery-thumbs[data-sf-fade~="top"] { --sf-fade-top: 28px; } .sf-gallery-thumbs[data-sf-fade~="bottom"] { --sf-fade-bottom: 28px; } .sf-gallery-thumbs button { flex-shrink: 0; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: var(--sf-radius-small); background: var(--sf-surface); overflow: hidden; cursor: pointer; opacity: .7; transition: opacity .15s ease; } .sf-gallery-thumbs button:hover { opacity: 1; } .sf-gallery-thumbs button[aria-current="true"] { border-color: var(--sf-ink); opacity: 1; } .sf-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; } /* Miniatura de vídeo: mesmo tamanho das de imagem, com o play por cima. */ .sf-gallery-thumbs button.is-video { position: relative; background: var(--sf-ink); } .sf-gallery-thumbs .is-video img { object-fit: cover; } .sf-gallery-thumbs .is-video img[hidden] { display: none; } .sf-thumb-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--sf-ink) 72%, transparent); color: var(--sf-surface); transform: translate(-50%, -50%); pointer-events: none; } .sf-thumb-play .sf-icon { width: 14px; height: 14px; margin-left: 2px; } .sf-gallery:not(:has(.sf-gallery-thumbs)) { grid-template-columns: minmax(0, 1fr); } .sf-gallery:not(:has(.sf-gallery-thumbs)) .sf-gallery-main, .sf-gallery:not(:has(.sf-gallery-thumbs)) .sf-gallery-actions { grid-column: 1; } .sf-buy { grid-area: buy; } .sf-buy-price { margin: 0 0 20px; } .sf-buy-price p { margin: 0; } .sf-buy-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .sf-buy-now { font-size: 26px; font-weight: 600; } .sf-buy-amount strong { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .sf-buy-amount s { color: var(--sf-muted); font-size: 18px; } .sf-buy-discount { margin-top: 4px !important; color: var(--sf-brand-text); font-size: 15px; font-weight: 600; } .sf-buy-installments { margin-top: 4px !important; color: var(--sf-muted); font-size: 14px; } .sf-buy-button { width: 100%; min-height: 56px; font-size: 18px; } .sf-accordions { margin-top: 28px; border-top: 1px solid var(--sf-line); } .sf-accordion { border-bottom: 1px solid var(--sf-line); } /* Título de uma linha continua com 64px; o que quebra em duas (celular) ganha respiro em cima e embaixo. */ .sf-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 0; cursor: pointer; list-style: none; } .sf-accordion summary::-webkit-details-marker { display: none; } .sf-accordion summary span { font-size: 21px; line-height: 1.25; } .sf-accordion summary .sf-icon { width: 20px; height: 20px; transform: rotate(90deg); transition: transform .2s ease; } .sf-accordion[open] summary .sf-icon { transform: rotate(-90deg); } /* Fechando com animação (storefront.js): o

só fecha no fim, mas a seta já vira. */ .sf-accordion[open].is-closing summary .sf-icon { transform: rotate(90deg); } .sf-accordion-body { margin: 0; padding: 0 0 22px; } .sf-accordion-body p { margin: 0 0 8px; } .sf-accordion-body a { text-underline-offset: 3px; } .sf-accordion-lead { font-weight: 600; } .sf-inline-icon { width: 1.2em; height: 1.2em; margin: 0 .3em 0 .05em; vertical-align: -.27em; } .sf-accordion-body a.sf-account-link { color: var(--sf-link); } .sf-highlights { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .sf-highlights li { display: flex; align-items: flex-start; gap: 12px; } .sf-assurance { display: flex; align-items: flex-start; gap: 12px; } .sf-assurance + .sf-assurance { margin-top: 14px; } .sf-assurance p { display: flex; flex-direction: column; margin: 0; color: var(--sf-muted); font-size: 14px; } .sf-assurance strong { color: var(--sf-ink); font-size: 15px; font-weight: 600; } /* Garantia: mesmo bloco com ícone, com respiro entre as linhas. Título e destaque no azul da loja; o texto traz a formatação do editor do admin (negrito, itálico, sublinhado e cor). */ .sf-guarantee p { gap: 8px; } .sf-guarantee .sf-guarantee-title, .sf-guarantee-highlight { color: var(--sf-link); } .sf-guarantee-subtitle { color: var(--sf-ink); font-weight: 600; } .sf-guarantee-highlight { font-weight: 600; } .sf-guarantee-text { margin-top: 4px; } /* Dúvidas frequentes: pergunta em destaque e a resposta logo abaixo, nos tamanhos do bloco da Garantia. */ .sf-faq { display: flex; flex-direction: column; gap: 18px; margin: 0; } .sf-faq dt { color: var(--sf-ink); font-size: 15px; font-weight: 600; } .sf-faq dd { margin: 4px 0 0; color: var(--sf-muted); font-size: 14px; } .sf-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sf-line); background: var(--sf-canvas); } .sf-sticky-buy div { display: flex; flex-direction: column; line-height: 1.2; } .sf-sticky-buy strong { font-size: 20px; font-weight: 700; } .sf-sticky-buy s { color: var(--sf-muted); font-size: 12px; } .sf-sticky-buy .sf-button { flex: 1; max-width: 260px; } /* Descrição: dentro de "Detalhes do produto", logo abaixo das linhas com ícone. */ .sf-feedback-title { margin: 0 0 18px; font-size: 26px; line-height: 1.2; } .sf-description-body { max-width: 72ch; line-height: 1.7; overflow-wrap: anywhere; } .sf-highlights + .sf-readmore { margin-top: 22px; } .sf-description-body > :first-child { margin-top: 0; } .sf-description-body > :last-child { margin-bottom: 0; } /* Descrição recolhível (modelo Etsy). As classes vêm do storefront.js; sem elas, a descrição fica inteira. */ .sf-readmore { --sf-readmore-preview: 8.5em; } .sf-readmore.is-collapsible .sf-description-body { position: relative; overflow: hidden; transition: max-height .35s ease; } .sf-readmore.is-collapsed .sf-description-body { max-height: var(--sf-readmore-preview); } .sf-readmore.is-collapsible .sf-description-body::after { content: ""; position: absolute; inset: auto 0 0; height: 4.5em; background: linear-gradient(to bottom, transparent, var(--sf-canvas)); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .sf-readmore.is-collapsed .sf-description-body::after { opacity: 1; } .sf-readmore-toggle { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px auto 0; padding: 8px 20px 4px; border: 0; border-radius: var(--sf-radius); background: transparent; color: var(--sf-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease; } .sf-readmore-toggle[hidden] { display: none; } @media (hover: hover) { .sf-readmore-toggle:hover { background: color-mix(in srgb, var(--sf-ink) 6%, transparent); } } .sf-readmore-toggle:active { background: color-mix(in srgb, var(--sf-ink) 10%, transparent); } .sf-readmore-toggle:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; } .sf-readmore-toggle .sf-icon { width: 20px; height: 20px; transform: rotate(90deg); transition: transform .25s ease; } .sf-readmore-toggle[aria-expanded="true"] .sf-icon { transform: rotate(-90deg); } .sf-description-body p { margin: 0 0 .75em; } .sf-description-body img { height: auto; margin: 16px 0; border-radius: var(--sf-radius); } .sf-description-body ul, .sf-description-body ol { padding-left: 1.3em; } .sf-description-body table { display: block; width: 100%; margin: 16px 0; overflow-x: auto; border-collapse: collapse; font-size: 14px; } .sf-description-body th, .sf-description-body td { padding: 8px 10px; border: 1px solid var(--sf-line); text-align: left; } .sf-description-body a { color: var(--sf-brand-text); } .sf-youtube { position: relative; margin: 18px 0; aspect-ratio: 16 / 9; border-radius: var(--sf-radius); overflow: hidden; background: #000; } .sf-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sf-feedback { grid-area: feedback; min-width: 0; margin-top: 48px; } .sf-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--sf-line); } .sf-tabs button { padding: 12px 0; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; color: var(--sf-muted); font-family: var(--sf-font-display); font-size: 24px; font-weight: 500; cursor: pointer; } .sf-tabs button[aria-selected="true"] { color: var(--sf-ink); border-bottom-color: var(--sf-ink); } .sf-tab-panel { padding: 24px 0 0; } .sf-tab-panel[hidden] { display: none; } .sf-rating-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .sf-rating-summary .sf-icon { width: 48px; height: 48px; color: var(--sf-star); } .sf-rating-summary strong { font-size: 56px; line-height: 1; } .sf-rating-summary p { display: flex; flex-direction: column; margin: 0; font-weight: 600; } .sf-rating-summary span { color: var(--sf-muted); font-size: 14px; font-weight: 400; } .sf-feedback-empty { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--sf-radius-small); background: var(--sf-highlight-soft); color: var(--sf-highlight-ink); font-size: 14px; } .sf-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--sf-radius-small); font-size: 14px; } .sf-alert-success { background: var(--sf-brand-soft); color: var(--sf-brand-text); } .sf-alert-error { background: var(--sf-danger-soft); color: var(--sf-danger); } .sf-review, .sf-question { padding: 20px 0; border-bottom: 1px solid var(--sf-line); } .sf-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .sf-review .sf-stars .sf-icon { width: 17px; height: 17px; } .sf-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--sf-muted); font-size: 13px; } .sf-verified .sf-icon { width: 16px; height: 16px; color: var(--sf-brand-text); } .sf-review-text, .sf-question p { margin: 8px 0; white-space: pre-line; } .sf-review-text { font-size: 16px; } .sf-review-by { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--sf-muted); font-size: 14px; } .sf-review-by strong { color: var(--sf-ink); font-weight: 600; } .sf-review-by span { color: var(--sf-line-strong); } .sf-review-likes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--sf-muted); font-size: 13px; } .sf-review-likes .sf-icon { width: 16px; height: 16px; color: var(--sf-danger); } .sf-question-answer { padding-left: 14px; border-left: 3px solid var(--sf-primary); color: var(--sf-muted); } .sf-form-toggle { margin-top: 24px; } .sf-form-toggle > summary { list-style: none; } .sf-form-toggle > summary::-webkit-details-marker { display: none; } .sf-form-toggle[open] > summary { display: none; } .sf-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; } .sf-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; } .sf-form label small { color: var(--sf-muted); font-weight: 400; } .sf-form textarea { resize: vertical; } .sf-form .sf-button { align-self: flex-start; } .sf-rating-input { margin: 0; padding: 0; border: 0; } .sf-rating-input legend { margin-bottom: 6px; font-size: 14px; font-weight: 600; } .sf-rating-input div { display: inline-flex; flex-direction: row-reverse; gap: 4px; } .sf-rating-input input { position: absolute; width: 1px; height: 1px; opacity: 0; } .sf-rating-input label { width: 36px; height: 36px; cursor: pointer; } .sf-rating-input label::before { content: "★"; color: var(--sf-line); font-size: 32px; line-height: 36px; } .sf-rating-input input:checked ~ label::before, .sf-rating-input label:hover::before, .sf-rating-input label:hover ~ label::before { color: var(--sf-star); } .sf-rating-input input:focus-visible + label { outline: 3px solid var(--sf-ink); outline-offset: 2px; border-radius: 6px; } /* Perguntas e respostas (aba Avaliações, depois da última avaliação): campo e "Perguntar" numa linha, como no Mercado Livre. Na aba Dúvidas, a pergunta pesa mais; resposta e data logo abaixo, depois do traço. */ .sf-ask-block { margin-top: 32px; } .sf-ask-title { margin: 0 0 14px; font-family: var(--sf-font-display); font-size: 21px; font-weight: 500; line-height: 1.25; } .sf-ask { display: flex; gap: 12px; align-items: stretch; } .sf-ask-input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius-small); background: var(--sf-surface); color: var(--sf-ink); font-size: 16px; } .sf-ask-input::placeholder { color: var(--sf-muted); } .sf-ask-input:focus { border-color: var(--sf-ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-primary) 30%, transparent); } .sf-ask-button { flex: none; } .sf-ask-button:disabled { opacity: .6; cursor: progress; } .sf-ask-feedback .sf-alert { margin: 12px 0 0; } .sf-question-ask { color: var(--sf-ink); font-size: 16px; font-weight: 600; } .sf-question-date { padding-left: 17px; color: var(--sf-muted); font-size: 13px; } /* "Ver todas" das abas: 10 por vez, o resto aparece de uma vez. */ .sf-review[hidden], .sf-question[hidden] { display: none; } /* "Ver todas" e "Avaliar produto" lado a lado, alinhados ao conteúdo. */ .sf-feedback-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 28px; } .sf-feedback-actions .sf-form-toggle { margin-top: 0; } .sf-feedback-actions .sf-form-toggle[open] { flex-basis: 100%; } /* Fotos e vídeos da avaliação: estrelas, miniaturas lado a lado, texto. */ .sf-review-media { display: flex; gap: 8px; margin: 12px 0 4px; padding: 0 0 4px; overflow-x: auto; list-style: none; scrollbar-width: thin; } .sf-review-media li { flex: 0 0 auto; } .sf-review-media-item, .sf-media-preview { position: relative; display: block; width: 88px; height: 88px; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-small); background: var(--sf-band); } .sf-review-media-item img, .sf-media-preview img, .sf-media-preview video { display: block; width: 100%; height: 100%; object-fit: cover; } .sf-review-media-item:hover img { opacity: .88; } .sf-review-media-item:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; } .sf-media-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--sf-ink) 72%, transparent); color: var(--sf-surface); transform: translate(-50%, -50%); pointer-events: none; } .sf-media-play .sf-icon { width: 16px; height: 16px; margin-left: 2px; } /* Campo "Adicionar fotos ou vídeos" do formulário de avaliação. */ .sf-media-field { position: relative; display: flex; flex-direction: column; gap: 8px; } .sf-media-input { position: absolute; width: 1px; height: 1px; opacity: 0; } .sf-form .sf-media-add { flex-direction: row; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 12px 16px; border: 1.5px dashed var(--sf-line-strong); border-radius: var(--sf-radius-small); background: var(--sf-surface); color: var(--sf-ink); font-size: 15px; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .sf-form .sf-media-add:hover { border-color: var(--sf-ink); background: var(--sf-band); } .sf-media-input:focus-visible + .sf-media-add { outline: 3px solid var(--sf-ink); outline-offset: 2px; } .sf-media-add .sf-icon { width: 24px; height: 24px; } .sf-media-field.is-full .sf-media-add { display: none; } .sf-media-field small { color: var(--sf-muted); font-size: 13px; } .sf-media-error { margin: 0; padding: 10px 12px; border-radius: var(--sf-radius-small); background: var(--sf-danger-soft); color: var(--sf-danger); font-size: 13px; white-space: pre-line; } .sf-media-error[hidden], .sf-media-previews[hidden] { display: none; } .sf-media-previews { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .sf-media-preview.is-unplayable { display: grid; place-items: end start; padding: 6px; } .sf-media-preview-name { position: relative; z-index: 1; overflow: hidden; max-width: 100%; color: var(--sf-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .sf-media-remove { position: absolute; top: 4px; right: 4px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--sf-ink) 78%, transparent); color: var(--sf-surface); cursor: pointer; } .sf-media-remove::before { content: ""; position: absolute; inset: -8px; } .sf-media-remove:hover { background: var(--sf-ink); } .sf-media-remove:focus-visible { outline: 3px solid var(--sf-primary); outline-offset: 1px; } .sf-media-remove .sf-icon { width: 14px; height: 14px; } /* Foto ampliada ou vídeo tocando, sobre a página escurecida. */ /* Mídia da avaliação ampliada (modelo Etsy): card sobre o fundo escuro, 65% mídia e 35% avaliação. O card ocupa o