/* Loja Core · lc-archive.css — ajustes finos (rodada de polimento 2026-09-11). Carrega depois de lc-chrome.css. */ /* ============================================================ Arquivos de produto (loja, categoria, marca, tag, busca) — woocommerce/archive-product.php Mesma família da PDP v2 e do rodapé: fundo #EDEDED, superfícies brancas raio 8 com sombra suave, link azul #3483FA, verde #00A650 (Pix/frete), preço navy. Coluna de 1280px (1312 − 2×16), a mesma do rodapé (.lcf__in). Sobrescreve as regras antigas de lc-redesign.css (.nob-archive-*). ============================================================ */ /* header-mo-v2.css pinta o body com !important (papel bege); aqui o fundo é o cinza da PDP */ body.woocommerce.archive, body.post-type-archive-product { background: #EDEDED !important; } /* `html, body { overflow-x: hidden }` (lc-redesign/Blocksy) transforma o em contêiner de rolagem e mata qualquer position:sticky (mesmo diagnóstico de checkout-rebuild.css). `clip` recorta igual sem criar contêiner — é o que deixa a barra de ordenar/filtrar grudar no celular. O cabeçalho continua rolando junto com a página, exatamente como hoje no resto do site. */ @supports (overflow: clip) { body.woocommerce.archive { overflow-x: clip; } body.woocommerce.archive .ob-header-wrap, body.woocommerce.archive .mo-hdr-wrap.is-sticky { position: relative !important; } } .nob-archive { --arc-bg: #EDEDED; --arc-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 8px rgba(0, 0, 0, .04); --arc-shadow-hover: 0 1px 3px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .07); --arc-line: rgba(0, 0, 0, .08); --arc-ink: var(--lc-ink, #1A1C21); --arc-ink-2: var(--lc-ink-2, #454A54); --arc-ink-3: var(--lc-ink-3, #6B7280); --arc-blue: #3483FA; --arc-blue-hover: #2968C8; --arc-blue-soft: #E3EDFB; --arc-blue-soft-hover: #D3E3F9; --arc-green: #00A650; --arc-ease: cubic-bezier(.2, 0, 0, 1); --arc-max: 1312px; --arc-pad: 16px; color: var(--arc-ink); font-family: var(--lc-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .nob-archive *, .nob-archive *::before, .nob-archive *::after { box-sizing: border-box; } /* ─── Coluna única de 1280px ─────────────────────────────────── */ body .nob-archive .nob-archive-hero, body .nob-archive .nob-archive-head, body .nob-archive .nob-archive-body { width: 100%; max-width: var(--arc-max); margin-left: auto; margin-right: auto; padding-left: var(--arc-pad); padding-right: var(--arc-pad); } /* ─── Trilha (como na PDP: sobre o fundo, links azuis) ───────── */ body .nob-archive .nob-archive-hero { background: none; border: 0; padding-top: 16px; } body .nob-archive .nob-archive-breadcrumb { display: block; padding: 0; font-size: 13px; line-height: 20px; color: var(--arc-ink-3); } .nob-archive-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; } .nob-archive-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0; } .nob-archive-breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid rgba(0, 0, 0, .3); border-right: 1.5px solid rgba(0, 0, 0, .3); transform: rotate(45deg); flex: none; } body .nob-archive .nob-archive-breadcrumb a { color: var(--arc-blue); text-decoration: none; transition: color .15s var(--arc-ease); } body .nob-archive .nob-archive-breadcrumb a:hover { color: var(--arc-blue-hover); } body .nob-archive .nob-archive-breadcrumb__current { color: var(--arc-ink-2); font-weight: 500; } /* ─── Cabeçalho (substitui o banner com listras/degradê) ─────── */ body .nob-archive .nob-archive-head { padding-top: 10px; padding-bottom: 20px; } .nob-archive-head__kicker { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--arc-ink-3); } body .nob-archive .nob-archive-head__title { margin: 0; font-family: var(--lc-font-display); font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--arc-ink); text-wrap: balance; overflow-wrap: anywhere; } .nob-archive-head__title em { font-style: normal; color: var(--arc-green); } .nob-archive-head__sub { margin: 6px 0 0; max-width: 76ch; font-size: 14px; line-height: 1.5; color: var(--arc-ink-3); text-wrap: pretty; } /* Atalhos de subcategoria: só abaixo de 1024px (no desktop a mesma lista está nos filtros) */ .nob-archive-chips { display: none; } body .nob-archive .nob-archive-chip { /* .nob-archive-chip antigo (lc-redesign) tinha borda navy e 11px */ position: relative; border: 0; cursor: pointer; flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: var(--arc-shadow); color: var(--arc-ink); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; scroll-snap-align: start; transition-property: background-color, color, scale; transition-duration: .15s; transition-timing-function: var(--arc-ease); } body .nob-archive .nob-archive-chip::after { content: ""; position: absolute; inset: -2px 0; } /* alvo de 40px */ body .nob-archive .nob-archive-chip:active { scale: .96; } body .nob-archive .nob-archive-chip:hover { background: #fff; color: var(--arc-ink); } body .nob-archive .nob-archive-chip.is-on { background: var(--arc-blue-soft); color: var(--arc-blue); box-shadow: inset 0 0 0 1px rgba(52, 131, 250, .3); font-weight: 600; } /* ─── Corpo: filtros + resultados ────────────────────────────── */ body .nob-archive .nob-archive-body { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 0; padding-bottom: 0; } body .nob-archive .nob-archive-body--solo { grid-template-columns: minmax(0, 1fr); } .nob-archive-backdrop { display: none; } /* ─── Filtros ─────────────────────────────────────────────────── */ body .nob-archive .nob-archive-sidebar { position: static; top: auto; background: #fff; border: 0; border-radius: 8px; box-shadow: var(--arc-shadow); padding: 4px 16px 6px; outline: none; } body .nob-archive .nob-archive-sidebar__header { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0 4px; } body .nob-archive .nob-archive-sidebar__title { flex: 1; margin: 0; font-family: var(--lc-font-body); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--arc-ink); } body .nob-archive .nob-archive-sidebar__clear { position: relative; font-size: 13px; font-weight: 500; color: var(--arc-blue); text-decoration: none; transition: color .15s var(--arc-ease); } body .nob-archive .nob-archive-sidebar__clear::after { content: ""; position: absolute; inset: -12px -8px; } body .nob-archive .nob-archive-sidebar__clear:hover { color: var(--arc-blue-hover); } .nob-archive-sidebar__close, .nob-archive-sidebar__foot { display: none; } body .nob-archive .nob-filter-group { padding: 0; border: 0; box-shadow: inset 0 1px 0 var(--arc-line); } body .nob-archive .nob-filter-group:first-child { box-shadow: none; } body .nob-archive .nob-filter-group__header { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--arc-ink); font-family: var(--lc-font-body); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; user-select: none; } body .nob-archive .nob-filter-group__header:hover { background: none; color: var(--arc-ink); } body .nob-archive .nob-filter-group__header:focus-visible { box-shadow: var(--lc-focus); border-radius: 4px; } /* +/− do JS continua no DOM (lc-redesign.js); visualmente vira chevron */ body .nob-archive .nob-filter-group__toggle { position: relative; flex: none; width: 16px; height: 16px; font-size: 0; color: var(--arc-ink-3); } body .nob-archive .nob-filter-group__toggle::before { content: ""; position: absolute; left: 4.5px; top: 3px; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--arc-ease); } body .nob-archive .nob-filter-group__header[aria-expanded="true"] .nob-filter-group__toggle::before { transform: translateY(3px) rotate(-135deg); } body .nob-archive .nob-filter-group__body { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0 0 10px; } body .nob-archive .nob-filter-group__body.is-hidden { display: none; } body .nob-archive .nob-filter-check { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; margin: 0; padding: 7px 0; font-size: 14px; line-height: 1.3; color: var(--arc-ink-2); cursor: pointer; } body .nob-archive .nob-filter-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--arc-blue); cursor: pointer; } body .nob-archive .nob-filter-check__label { flex: 1; min-width: 0; transition: color .15s var(--arc-ease); } body .nob-archive .nob-filter-check:hover .nob-filter-check__label { color: var(--arc-ink); } body .nob-archive .nob-filter-check:has(input:checked) .nob-filter-check__label { color: var(--arc-ink); font-weight: 600; } body .nob-archive .nob-filter-check__label--green, body .nob-archive .nob-filter-check:hover .nob-filter-check__label--green { color: var(--arc-green); font-weight: 600; } body .nob-archive .nob-filter-check__count { margin-left: auto; font-family: var(--lc-font-body); font-size: 12px; line-height: 18px; color: var(--arc-ink-3); font-variant-numeric: tabular-nums; } /* Faixa de preço (widget do WC com jQuery UI) — o trilho nem aparecia */ body .nob-archive .price_slider_wrapper { padding: 6px 2px 0; } body .nob-archive .price_slider.ui-slider { position: relative; height: 4px; margin: 8px 9px 20px; border: 0; border-radius: 2px; background: #E6E6E6; } body .nob-archive .price_slider .ui-slider-range { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--arc-blue); } body .nob-archive .price_slider .ui-slider-handle { position: absolute; top: 50%; z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06); cursor: grab; outline: none; touch-action: none; } body .nob-archive .price_slider .ui-slider-handle::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; } body .nob-archive .price_slider .ui-slider-handle:focus-visible { box-shadow: 0 1px 3px rgba(0, 0, 0, .28), var(--lc-focus); } body .nob-archive .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body .nob-archive .price_slider_amount .price_label { order: -1; flex: 1 1 100%; display: block; margin: 0; font-size: 13px; color: var(--arc-ink-2); font-variant-numeric: tabular-nums; } body .nob-archive .price_slider_amount .clear { display: none; } body .nob-archive .nob-filter-group__body .price_slider_amount button[type="submit"], body .nob-archive .nob-filter-group__body .price_slider_amount .button { flex: 1 1 100%; width: 100% !important; height: 36px; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 6px !important; background: var(--arc-blue-soft) !important; color: var(--arc-blue) !important; font-family: var(--lc-font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 36px !important; box-shadow: none !important; transition-property: background-color, scale; transition-duration: .15s; } body .nob-archive .nob-filter-group__body .price_slider_amount button[type="submit"]:hover { background: var(--arc-blue-soft-hover) !important; } body .nob-archive .nob-filter-group__body .price_slider_amount button[type="submit"]:active { scale: .96; } /* ─── Barra: contagem + ordenar ──────────────────────────────── */ .nob-archive-results { min-width: 0; } body .nob-archive .nob-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } body .nob-archive .nob-archive-toolbar__count { margin: 0; font-size: 14px; color: var(--arc-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } body .nob-archive .nob-archive-toolbar__right { display: flex; align-items: center; gap: 8px; min-width: 0; } .nob-archive-sort-form { display: flex; align-items: center; gap: 8px; margin: 0; } body .nob-archive .nob-archive-sort-label { margin: 0; font-size: 14px; color: var(--arc-ink-2); white-space: nowrap; } .nob-archive-sort-wrap { position: relative; display: inline-flex; min-width: 0; } .nob-archive-sort-wrap::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid var(--arc-ink-2); border-bottom: 1.6px solid var(--arc-ink-2); transform: rotate(45deg); pointer-events: none; } body .nob-archive .nob-archive-sort { -webkit-appearance: none; appearance: none; height: 40px; min-width: 0; max-width: 100%; margin: 0; padding: 0 34px 0 12px; border: 0; border-radius: 6px; background: #fff; box-shadow: var(--arc-shadow); color: var(--arc-ink); font-family: var(--lc-font-body); font-size: 14px; font-weight: 500; line-height: 40px; text-overflow: ellipsis; cursor: pointer; transition: box-shadow .15s var(--arc-ease); } body .nob-archive .nob-archive-sort:hover { box-shadow: var(--arc-shadow-hover); } body .nob-archive .nob-archive-sort:focus-visible { box-shadow: var(--arc-shadow), var(--lc-focus); outline: none; } .nob-archive-filter-btn { display: none; } /* Aviso de frete: linha branca discreta (antes: faixa navy com selo verde, repetindo a barra do topo) */ body .nob-archive .nob-archive-promo-banner { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 12px; padding: 10px 16px; border-radius: 8px; background: #fff; box-shadow: var(--arc-shadow); color: var(--arc-ink-2); font-size: 14px; line-height: 1.4; } .nob-archive-promo-banner__ic { flex: none; color: var(--arc-green); } body .nob-archive .nob-archive-promo-banner__text { flex: 1; min-width: 0; font-size: inherit; text-wrap: pretty; } .nob-archive-promo-banner__text b { color: var(--arc-green); font-weight: 600; } body .nob-archive .nob-archive-promo-banner__link { position: relative; flex: none; color: var(--arc-blue); font-size: 14px; font-weight: 500; letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: color .15s var(--arc-ease); } body .nob-archive .nob-archive-promo-banner__link::after { content: ""; position: absolute; inset: -12px -8px; } body .nob-archive .nob-archive-promo-banner__link:hover { color: var(--arc-blue-hover); } /* ─── Grade ───────────────────────────────────────────────────── */ body .nob-archive .nob-archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch; } @media (max-width: 1279.98px) { body .nob-archive .nob-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } } /* ─── Carregar mais ───────────────────────────────────────────── */ body .nob-archive .nob-archive-load-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; min-height: 0; margin: 28px 0 0; color: var(--arc-ink-3); font-family: var(--lc-font-body); font-size: 14px; font-weight: 400; } body .nob-archive .nob-archive-load-more.is-single { display: none; } body .nob-archive .nob-archive-load-more.is-complete { color: var(--arc-ink-3); } body .nob-archive .nob-archive-load-more.has-error { color: #C22536; } .nob-archive-load-more__progress { flex-basis: 100%; margin: 0; text-align: center; font-size: 13px; color: var(--arc-ink-3); font-variant-numeric: tabular-nums; } .nob-archive-load-more__progress b { color: var(--arc-ink-2); font-weight: 600; } body .nob-archive .nob-archive-load-more__prev { position: relative; margin-left: 12px; color: var(--arc-blue); text-decoration: none; } body .nob-archive .nob-archive-load-more__prev::after { content: ""; position: absolute; inset: -12px -6px; } body .nob-archive .nob-archive-load-more__prev:hover { color: var(--arc-blue-hover); } /* no estado "pronto para clicar" o texto de status repete o botão: fica só para leitor de tela */ body .nob-archive .nob-archive-load-more.has-manual:not(.is-loading):not(.has-error) .nob-archive-load-more__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body .nob-archive .nob-archive-load-more__spinner { width: 18px; height: 18px; border: 2px solid rgba(52, 131, 250, .2); border-top-color: var(--arc-blue); } body .nob-archive .nob-archive-load-more.has-manual .nob-archive-load-more__btn, body .nob-archive .nob-archive-load-more__btn { justify-content: center; min-width: 260px; min-height: 44px; padding: 0 24px; border: 0; border-radius: 6px; background: var(--arc-blue-soft); color: var(--arc-blue); font-family: var(--lc-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; transition-property: background-color, scale, opacity; transition-duration: .15s; transition-timing-function: var(--arc-ease); } body .nob-archive .nob-archive-load-more__btn:hover { background: var(--arc-blue-soft-hover); color: var(--arc-blue); } body .nob-archive .nob-archive-load-more__btn:active { scale: .96; } body .nob-archive .nob-archive-load-more.is-loading .nob-archive-load-more__btn { display: none; } body .nob-archive .nob-archive-load-more.is-complete .nob-archive-load-more__btn { display: none; } /* ─── Estado vazio ────────────────────────────────────────────── */ .nob-archive-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px 52px; border-radius: 8px; background: #fff; box-shadow: var(--arc-shadow); text-align: center; } .nob-archive-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: #F5F5F5; color: var(--arc-ink-3); } body .nob-archive .nob-archive-empty__title { margin: 0; font-family: var(--lc-font-body); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--arc-ink); text-wrap: balance; } .nob-archive-empty__text { max-width: 44ch; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--arc-ink-3); text-wrap: pretty; } .nob-archive-empty__tips { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; font-size: 14px; line-height: 1.45; color: var(--arc-ink-2); } .nob-archive-empty__tips li { position: relative; margin: 0; padding-left: 16px; text-wrap: pretty; } .nob-archive-empty__tips li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(0, 0, 0, .25); } .nob-archive-empty__actions { margin-top: 22px; } body .nob-archive .nob-archive-empty__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 24px; border-radius: 6px; background: var(--arc-blue); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition-property: background-color, scale; transition-duration: .15s; transition-timing-function: var(--arc-ease); } body .nob-archive .nob-archive-empty__btn:hover { background: var(--arc-blue-hover); color: #fff; } body .nob-archive .nob-archive-empty__btn:active { scale: .96; } /* ─── Tablet e celular (< 1024px): filtros viram gaveta, barra gruda no topo ─── */ @media (max-width: 1023.98px) { body .nob-archive .nob-archive-head { padding-bottom: 16px; } body .nob-archive .nob-archive-head__title { font-size: 24px; } .nob-archive-chips { display: flex; gap: 8px; margin: 14px calc(-1 * var(--arc-pad)) -4px; padding: 2px var(--arc-pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--arc-pad); scrollbar-width: none; } .nob-archive-chips::-webkit-scrollbar { display: none; } body .nob-archive .nob-archive-body { grid-template-columns: minmax(0, 1fr); gap: 0; } body .nob-archive .nob-archive-sidebar { position: fixed; z-index: 1450; /* acima da tabbar (1400) e do WhatsApp (1300); abaixo do menu (1500) */ top: 0; bottom: 0; left: 0; align-self: stretch; /* lc-redesign põe flex-start, que encolhe o box fixo para a altura do conteúdo */ display: flex; flex-direction: column; width: min(88vw, 380px); padding: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 8px 0 32px rgba(0, 0, 0, .18); transform: translateX(-104%); visibility: hidden; transition: transform .28s var(--arc-ease), visibility 0s linear .28s; } html.nob-filters-open body .nob-archive .nob-archive-sidebar { transform: none; visibility: visible; transition: transform .28s var(--arc-ease), visibility 0s; } html.nob-filters-open { overflow: hidden; } body .nob-archive .nob-archive-sidebar__header { flex: none; min-height: 56px; padding: 8px 8px 8px 16px; box-shadow: 0 1px 0 var(--arc-line); } body .nob-archive .nob-archive-sidebar__title { font-size: 17px; } body .nob-archive .nob-archive-sidebar__close { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--arc-ink-2); cursor: pointer; transition-property: background-color, scale; transition-duration: .15s; } body .nob-archive .nob-archive-sidebar__close:hover { background: #F5F5F5; color: var(--arc-ink); } body .nob-archive .nob-archive-sidebar__close:active { scale: .96; } .nob-archive-sidebar__groups { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 8px; } body .nob-archive .nob-archive-sidebar__foot { display: block; flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -1px 0 var(--arc-line); } body .nob-archive .nob-archive-sidebar__done { width: 100%; height: 48px; margin: 0; border: 0; border-radius: 6px; background: var(--arc-blue); color: #fff; font-family: var(--lc-font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; cursor: pointer; transition-property: background-color, scale; transition-duration: .15s; } body .nob-archive .nob-archive-sidebar__done:hover { background: var(--arc-blue-hover); } body .nob-archive .nob-archive-sidebar__done:active { scale: .96; } body .nob-archive .nob-filter-check { min-height: 40px; padding: 11px 0; } .nob-archive-backdrop { display: block; position: fixed; inset: 0; z-index: 1440; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .28s var(--arc-ease), visibility 0s linear .28s; } html.nob-filters-open .nob-archive-backdrop { opacity: 1; visibility: visible; transition: opacity .28s var(--arc-ease), visibility 0s; } /* barra grudada: contagem | ordenar | filtros */ body .nob-archive .nob-archive-toolbar { position: sticky; top: 0; z-index: 900; gap: 8px; min-height: 56px; margin: 0 calc(-1 * var(--arc-pad)) 12px; padding: 8px var(--arc-pad); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } body .nob-archive .nob-archive-toolbar__count { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; } body .nob-archive .nob-archive-sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body .nob-archive .nob-archive-sort { max-width: 158px; font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); } body .nob-archive .nob-archive-sort:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .24); } body .nob-archive .nob-archive-filter-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 6px; background: var(--arc-blue-soft); box-shadow: none; color: var(--arc-blue); font-family: var(--lc-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; transition-property: background-color, scale; transition-duration: .15s; transition-timing-function: var(--arc-ease); } body .nob-archive .nob-archive-filter-btn:hover { background: var(--arc-blue-soft-hover); color: var(--arc-blue); } body .nob-archive .nob-archive-filter-btn:active { scale: .96; } .nob-archive-filter-btn__n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--arc-blue); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } body .nob-archive .nob-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (max-width: 639.98px) { .nob-archive { --arc-pad: 12px; } body .nob-archive .nob-archive-hero { padding-top: 12px; } body .nob-archive .nob-archive-breadcrumb { font-size: 12.5px; } /* trilha curta no celular: o item atual já é o H1 logo abaixo, e "Loja" sai quando há categoria-mãe */ .nob-archive-breadcrumb li:last-child:not(:nth-child(2)), .nob-archive-breadcrumb li:nth-child(2):not(:nth-last-child(-n+2)) { display: none; } body .nob-archive .nob-archive-head { padding-top: 6px; padding-bottom: 14px; } body .nob-archive .nob-archive-head__title { font-size: 22px; } .nob-archive-head__sub { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body .nob-archive .nob-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } body .nob-archive .nob-archive-promo-banner { gap: 8px; padding: 8px 12px; font-size: 13px; } body .nob-archive .nob-archive-promo-banner__link { font-size: 13px; } body .nob-archive .nob-archive-load-more__btn { width: 100%; min-width: 0; } .nob-archive-empty { padding: 36px 20px 40px; } } @media (prefers-reduced-motion: reduce) { body .nob-archive .nob-archive-sidebar, .nob-archive-backdrop, body .nob-archive .nob-filter-group__toggle::before { transition: none !important; } } /* ─── Vantagem de frete da categoria (inc/shipping-perks.php) ──── */ body .nob-archive .lc-perk-strip { display: flex; align-items: center; gap: 12px; width: calc(100% - 2 * var(--arc-pad)); max-width: calc(var(--arc-max) - 2 * var(--arc-pad)); margin: 0 auto 16px; padding: 10px 8px 10px 12px; border-radius: 12px; background: #EBFAEE; box-shadow: inset 0 0 0 1px rgba(0, 131, 63, .18); color: #0B5E33; font-size: 14px; line-height: 1.4; } body .nob-archive .lc-perk-strip__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #00A650; color: #fff; } body .nob-archive .lc-perk-strip__txt { flex: 1 1 auto; min-width: 0; text-wrap: pretty; } body .nob-archive .lc-perk-strip__txt strong { font-weight: 700; color: #00833F; } body .nob-archive .lc-perk-strip__link { flex: none; position: relative; padding: 0 8px; font-weight: 600; color: #00833F; text-decoration: none; white-space: nowrap; } body .nob-archive .lc-perk-strip__link::after { content: ""; position: absolute; inset: -12px 0; } /* alvo de 40px */ body .nob-archive .lc-perk-strip__link:hover { text-decoration: underline; } @media (max-width: 640px) { body .nob-archive .lc-perk-strip { align-items: flex-start; font-size: 13px; } body .nob-archive .lc-perk-strip__link { display: none; } } /* Frete fixo por região (ex.: betoneiras): azul — é vantagem, mas não é "grátis" */ body .nob-archive .lc-perk-strip--flat { background: #E3EDFB; box-shadow: inset 0 0 0 1px rgba(41, 104, 200, .2); color: #1B3E73; } body .nob-archive .lc-perk-strip--flat .lc-perk-strip__icon { background: #2968C8; } body .nob-archive .lc-perk-strip--flat .lc-perk-strip__txt strong, body .nob-archive .lc-perk-strip--flat .lc-perk-strip__link { color: #1F57AD; }