/* ── Card de produto — minimalista, fundo transparente (mesma cor da pagina) ──
Decisao 2026-04-28:
- Card vira unico (sem botao "Ver produto" interno)
- Estado normal: transparente — herda fundo da pagina (branco)
- Hover: ganha box-shadow leve + translateY (efeito de elevar/destacar)
(fundo branco explicito no hover garante consistencia mesmo se a pagina
tiver fundo diferente em alguma sessao) */
.product-card {
background: transparent;
border: none;
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
min-height: 400px;
padding: 0; /* 2026-04-28: imagem encosta nas laterais do card */
width: 100%;
/* sem max-width — cards ocupam 1fr da celula (alinhamento archiproducts decisao 2026-04-28) */
}
.product-card:hover {
background: var(--cor-branco);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
}
/* Wrap quadrado 1:1 — fundo transparente herda do card (cinza-050 normal / branco hover).
Antes: fundo branco fixo. Mudou em 2026-04-28 com efeito archiproducts.
Padding agora aplicado no .product-card-track (decisao 2026-05-06). */
.product-card-img-wrap {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: transparent;
flex-shrink: 0;
position: relative;
}
/* Link cobre a area do wrap inteira; track fica embaixo dele.
Setas e dots ficam acima do link via z-index. */
.product-card-link {
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Track — todas as imagens lado a lado, deslizam via translateX.
inset: 8% gera a 'respiracao' interna (substituiu padding do wrap). */
.product-card-track {
position: absolute;
inset: 8%;
display: flex;
overflow: hidden;
}
.product-card-img-wrap .product-card-img {
flex: 0 0 100%;
width: 100%;
height: 100%;
/* 2026-09-05 (gestor): a foto do produto aparece INTEIRA no card, sem corte. Antes era
`cover`, pensado para as fotos quadradas da Stella (599 de 617); as 18 não quadradas —
pendentes Ark e perfis 3:2 — perdiam as laterais (o refletor do Capello saía do card).
Junto: `add_image_size('product-card', …, false)` para o WordPress parar de recortar
ao gerar a miniatura — sem isso o corte já vinha do arquivo e nenhum CSS resolveria. */
object-fit: contain;
display: block;
transform: translateX(0);
transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Quando o carousel muda de slide, todas as imgs se movem juntas (translateX no parent) */
.product-card-track[data-active-index="1"] .product-card-img { transform: translateX(-100%); }
.product-card-track[data-active-index="2"] .product-card-img { transform: translateX(-200%); }
.product-card-track[data-active-index="3"] .product-card-img { transform: translateX(-300%); }
.product-card-track[data-active-index="4"] .product-card-img { transform: translateX(-400%); }
.product-card-track[data-active-index="5"] .product-card-img { transform: translateX(-500%); }
.product-card-track[data-active-index="6"] .product-card-img { transform: translateX(-600%); }
.product-card-track[data-active-index="7"] .product-card-img { transform: translateX(-700%); }
.product-card-track[data-active-index="8"] .product-card-img { transform: translateX(-800%); }
.product-card-track[data-active-index="9"] .product-card-img { transform: translateX(-900%); }
/* ─── Setas do carousel — chevron solto sem caixa, halo sutil pra contraste ─── */
.product-card-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 28px; height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: var(--cor-preto);
/* halo branco difuso garante visibilidade contra fundos escuros sem caixa */
filter: drop-shadow(0 0 2px rgba(255,255,255,0.85)) drop-shadow(0 1px 2px rgba(0,0,0,0.18));
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity 180ms ease, color 180ms ease, transform 180ms ease;
padding: 0;
}
.product-card:hover .product-card-nav { opacity: 1; }
.product-card-nav:hover { color: var(--cor-azul); transform: translateY(-50%) scale(1.15); }
.product-card-nav--prev { left: 6px; }
.product-card-nav--next { right: 6px; }
.product-card-nav:focus-visible { opacity: 1; outline: 2px solid var(--cor-azul); outline-offset: 2px; }
.product-card-nav svg { width: 18px; height: 18px; }
/* ─── Dots no rodape da imagem ─── */
.product-card-dots {
position: absolute;
bottom: 8px;
left: 0; right: 0;
display: flex;
justify-content: center;
gap: 6px;
z-index: 3;
pointer-events: none;
}
.product-card-dot {
pointer-events: auto;
width: 6px; height: 6px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(0,0,0,0.20);
cursor: pointer;
transition: background 180ms ease, transform 180ms ease;
}
.product-card-dot.is-active {
background: var(--cor-preto);
transform: scale(1.2);
}
.product-card-dot:hover { background: rgba(0,0,0,0.45); }
.product-card-info {
/* Texto avancado a esquerda em 3 espacos (var(--space-3) = 12px) e respiracao top/bottom */
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
/* SKU / código — espacamento minimo do titulo (decisao 2026-04-25) */
.product-card-sku {
font-family: var(--font-body);
font-size: var(--font-size-xs);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-secondary);
margin-top: 0;
}
/* Nome do produto — peso regular (sem negrito).
rc860 (gestor): reserva 3 linhas SEMPRE (13px×1.35×3 ≈ 53px) para todos os cards
alinharem preço/botões na mesma altura; corta com reticências acima de 3. */
.product-card-title {
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
line-height: 1.35;
margin: 0;
color: var(--text-primary);
transition: color var(--transition-fast);
min-height: 53px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}
/* rc874: em card estreito (2 colunas no celular ≈ 158px) o justify estica os espaços
entre palavras — "Perfil LED Arandela". Alinhado à esquerda a partir daí. */
@media (max-width: 640px) {
.product-card-title { text-align: left; }
}
/* Hover do card NAO altera cor do titulo (decisao 2026-04-28 — visual mais sobrio) */
/* Preço — 3 precos (regular riscado, promocional, a vista azul ML) + parcelamento.
Decisao 2026-04-25: filter PHP em functions.php gera o HTML com 4 spans. */
.product-card-price {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--space-1);
min-height: 80px;
font-family: var(--font-body);
text-align: left;
}
/* Estrutura de precos — 4 linhas centralizadas (decisao 2026-04-25):
1) de R$ XXX (regular riscado)
2) por R$ YYY (a vista, DESTAQUE azul ML)
3) no Pix/Boleto ou R$ ZZZ (promocional)
4) em ate 10X de R$ X,XX sem juros */
.ark-price-de {
font-size: 13px;
color: var(--text-secondary);
display: block;
}
.ark-price-de del {
text-decoration: line-through;
color: var(--text-secondary);
font-weight: 400;
}
/* rc860: etiqueta "Preço por metro" removida do card a pedido do gestor (era .ark-price-perfil-warn) */
/* rc863: card Pro voltou ao formato "a partir de R$X/m" (kit de 1 m do rc861 removido a pedido do gestor) */
/* Prefixo "a partir" como overline pequeno (separado do preco em destaque na linha seguinte) */
.ark-price-vista-prefix {
display: block;
font-size: 11px;
color: var(--text-secondary);
line-height: 1;
margin-top: 2px;
}
.ark-price-vista {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 6px;
margin-top: 1px;
font-size: 13px;
color: var(--text-secondary);
}
.ark-price-vista strong {
color: #3483FA;
font-weight: 600;
font-size: 18px;
line-height: 1.1;
}
.ark-price-promo {
font-size: 12px;
color: var(--text-secondary);
display: block;
margin-top: 3px;
}
.ark-price-parcelas {
font-size: 12px;
color: var(--text-secondary);
display: block;
margin-top: 2px;
}
.ark-price-parcelas strong {
color: var(--text-primary);
font-weight: 700;
}
.product-card-price del {
font-size: var(--font-size-xs);
color: var(--text-secondary);
font-weight: 400;
}
.product-card-price-pix {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.product-card-price-pix-label {
font-family: var(--font-body);
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cor-vermelho); /* único lugar onde vermelho aparece no preço */
}
.product-card-price-pix-value {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: 500;
color: var(--text-primary); /* preto, não vermelho */
line-height: 1;
}
.product-card-price-installment {
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
/* Botao "Ver produto" do card REMOVIDO em 2026-04-28 — card inteiro virou .
Regras .product-card-info .btn/.button preservadas para outros contextos
(ex: pagina de produto single, paginas customizadas) caso voltem a usar. */
/* ─── Bottom do card: info (titulo+preco) + actions (qty + add to cart) ───
flex:1 + margin-top:auto no .product-card-actions garante que o botao Adicionar
fique sempre alinhado no rodape do card, independente da altura do bloco de preco
(Perfil LED tem retangulo vermelho extra na linha 1 — sem isso desalinha entre cards) */
.product-card-bottom {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-3);
flex: 1;
}
.product-card-bottom .product-card-info {
padding: 0;
text-decoration: none;
color: inherit;
}
.product-card-actions {
display: flex;
align-items: stretch;
gap: 8px;
padding-top: var(--space-3);
border-top: 1px solid var(--cor-cinza-100);
margin-top: auto;
}
/* Qty group — 3 col grid: − [input] + */
.product-card-qty {
display: inline-flex;
align-items: stretch;
border: 1px solid #E5E5E5;
border-radius: 6px;
overflow: hidden;
background: var(--cor-branco);
flex: 0 0 auto;
}
.product-card-qty .qty-btn {
width: 30px;
height: 36px;
border: 0;
background: transparent;
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--cor-preto);
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
padding: 0;
line-height: 1;
}
.product-card-qty .qty-btn:hover { background: var(--cor-cinza-050); color: var(--cor-azul); }
.product-card-qty .qty-input {
width: 32px;
height: 36px;
border: 0;
border-left: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
background: transparent;
text-align: center;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--cor-preto);
-moz-appearance: textfield;
padding: 0;
}
.product-card-qty .qty-input::-webkit-outer-spin-button,
.product-card-qty .qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.product-card-qty .qty-input:focus { outline: none; }
/* Botao Adicionar — azul ML, alinhado em altura com qty (36px) */
.product-card-add {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
border: 0;
border-radius: 6px;
background: var(--cor-azul);
color: var(--cor-branco);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 150ms ease, transform 150ms ease;
padding: 0 12px;
}
.product-card-add:hover { background: var(--cor-azul-esc); }
.product-card-add:active { transform: scale(0.97); }
.product-card-add.is-adding { opacity: 0.7; cursor: wait; }
.product-card-add.is-added {
background: #2EA84F; /* verde de feedback de sucesso */
}
.product-card-add .icon-cart { flex-shrink: 0; }
/* rc442 — Mobile (≤600px): card grid 2-col deixa cada card ~180px de largura.
Qty stepper (90px) + gap (8) + add button (= ~80px) cortava texto "Adicionar".
Solução: STACK VERTICAL — qty acima (centralizado), botão abaixo full-width. */
@media (max-width: 600px) {
.product-card-actions {
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
}
.product-card-qty {
width: 100% !important;
justify-content: center !important;
}
.product-card-qty .qty-btn { flex: 1 1 auto; max-width: 44px; height: 34px; }
.product-card-qty .qty-input { flex: 0 0 50px; height: 34px; font-size: 13px; }
.product-card-add {
width: 100% !important;
flex: 0 0 auto !important;
height: 36px !important;
font-size: 12.5px !important;
padding: 0 8px !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
}
}
/* ============================================================
CONFIGURADOR DE PERFIL LED ARK NO DRAWER (Fase 1A — 2026-05-10)
Drawer entra em modo .is-configuring ao clicar Adicionar em card
Perfil LED. Body normal + footer ficam ocultos durante config.
============================================================ */
.ark-drawer.is-configuring .ark-drawer-body,
.ark-drawer.is-configuring .ark-drawer-footer,
.ark-drawer.is-configuring .ark-drawer-cta-fixed {
display: none !important;
}
.ark-drawer.is-configuring .ark-drawer-config,
.ark-drawer.is-configuring .ark-drawer-subheader {
display: block !important;
}
.ark-drawer.is-configuring .ark-drawer-title { display: none; }
.ark-drawer.is-configuring .ark-drawer-title-config { display: block; }
/* Sub-header com mini-thumbs dos itens existentes */
.ark-drawer-subheader {
padding: 8px 20px;
background: #fafafa;
border-bottom: 1px solid var(--cor-cinza-100);
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11px;
color: var(--text-secondary);
}
.ark-drawer-subheader[hidden] { display: none !important; }
.ark-drawer-subheader-thumbs {
display: inline-flex;
gap: 4px;
}
.ark-drawer-subheader-thumbs img {
width: 28px;
height: 28px;
border: 1px solid var(--cor-cinza-100);
background: #f7f6f3;
object-fit: contain;
}
/* Container externo do configurador */
.ark-drawer-config {
padding: 16px 20px;
overflow-y: auto;
flex: 1;
}
.ark-drawer-config-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Cabeca: thumb + nome + sku */
.ark-config-product {
display: flex;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--cor-cinza-100);
}
.ark-config-thumb {
flex: 0 0 64px;
width: 64px; height: 64px;
background: #f7f6f3;
border: 1px solid var(--cor-cinza-100);
object-fit: contain;
}
.ark-config-product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ark-config-product-sku {
font-size: 9.5px;
color: var(--cor-cinza-500);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ark-config-product-name { font-size: 12px; color: var(--cor-preto); font-weight: 400; line-height: 1.35; }
/* Grupos de chips */
.ark-config-group { display: flex; flex-direction: column; gap: 6px; }
.ark-config-group-label {
font-size: 10.5px;
font-weight: 600;
color: var(--cor-preto);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ark-config-group-label .selected-value {
font-weight: 400;
color: var(--text-secondary);
text-transform: none;
letter-spacing: 0;
margin-left: 4px;
}
.ark-config-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ark-config-chips .chip {
height: 28px;
padding: 0 10px;
border: 1px solid #ddd;
background: #fff;
font-size: 11px;
font-weight: 500;
color: var(--cor-preto);
cursor: pointer;
display: inline-flex;
align-items: center;
border-radius: 0;
transition: background 120ms, color 120ms, border-color 120ms;
}
.ark-config-chips .chip:hover:not(.is-selected):not(:disabled) {
border-color: var(--cor-preto);
}
/* rc773: seleção do drawer IGUAL à da página (borda preta + bold, sem fundo escuro) — pedido do gestor */
.ark-config-chips .chip.is-selected {
background: var(--cor-branco);
color: var(--cor-preto);
border: 1px solid var(--cor-preto);
font-weight: 600;
}
.ark-config-chips .chip:disabled,
.ark-config-chips .chip.is-hidden {
opacity: 0.35;
cursor: not-allowed;
}
/* Tamanho */
.ark-config-tamanho-row {
display: flex;
gap: 8px;
align-items: center;
}
.ark-config-tamanho-input {
flex: 1;
height: 32px;
border: 1px solid #ddd;
padding: 0 8px;
font-size: 13px;
font-family: inherit;
border-radius: 0;
}
.ark-config-tamanho-suffix { font-size: 11px; color: var(--text-secondary); }
.ark-config-tamanho-cobrado {
display: block;
font-size: 11px;
color: var(--text-secondary);
margin-top: 2px;
}
.ark-config-tamanho-cobrado strong { color: var(--cor-preto); font-weight: 600; }
/* hidden HTML attribute precisa de !important pra vencer display:block acima (rc173 fix) */
.ark-config-tamanho-cobrado[hidden] { display: none !important; }
.ark-config-tamanho-tolerancia {
display: block;
font-size: 10.5px;
color: var(--cor-cinza-500);
font-style: italic;
margin-top: 2px;
}
/* Bloco de informações embaixo do tamanho (rc179 → rc180)
3 parágrafos como observações independentes, separados, justificados, sem itálico.
Cada parágrafo recebe bullet "•" + leve recuo, parecido com "nota técnica". */
.ark-tamanho-info {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ark-tamanho-info p {
margin: 0;
padding: 0 0 0 14px;
position: relative;
font-size: 12px;
line-height: 1.5;
color: var(--cor-cinza-700);
text-align: justify;
font-style: normal;
font-family: var(--font-body);
}
.ark-tamanho-info p::before {
content: '•';
position: absolute;
left: 2px;
top: 0;
color: var(--cor-azul);
font-weight: 700;
}
.ark-tamanho-info p strong {
color: var(--cor-preto);
font-weight: 600;
}
/* Driver dimerizavel vinculado: qty travada (sem botoes +/-) */
.ark-driver-bound-qty {
font-size: 11px;
color: var(--cor-cinza-500);
font-style: italic;
white-space: nowrap;
}
/* ============================================================
DRAWER mini-cart — variações em LINHAS SEPARADAS (rc179)
Grid 2 colunas (label / valor). Label negrito, valor regular, sem itálico.
============================================================ */
.cart-item-info dl.variation,
.cart-item-info .variation {
display: grid !important;
grid-template-columns: max-content 1fr;
column-gap: 0; /* rc257: zebra ponta-a-ponta — respiro via padding interno */
row-gap: 0;
font-size: 10.5px !important;
color: var(--cor-cinza-700) !important;
margin: 6px 0 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
font-style: normal !important;
font-family: var(--font-body) !important;
width: 100%;
}
.cart-item-info dl.variation dt,
.cart-item-info .variation dt {
display: block !important;
font-weight: 600 !important;
color: var(--cor-preto) !important;
font-style: normal !important;
margin: 0 !important;
padding: 4px 10px 4px 8px !important; /* rc257: respiro à direita sem gap externo */
white-space: nowrap;
}
.cart-item-info dl.variation dd,
.cart-item-info .variation dd {
display: block !important;
font-weight: 400 !important;
color: var(--cor-cinza-700) !important;
font-style: normal !important;
margin: 0 !important;
padding: 4px 8px !important;
}
.cart-item-info dl.variation dd p,
.cart-item-info .variation dd p {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
}
.cart-item-info dl.variation dt::after,
.cart-item-info .variation dt::after { content: '' !important; }
.cart-item-info dl.variation dd::after,
.cart-item-info .variation dd::after { content: '' !important; }
/* Zebra striping mais visível (cinza #EFEFEF rc182) */
.cart-item-info dl.variation dt:nth-of-type(even),
.cart-item-info dl.variation dt:nth-of-type(even) + dd,
.cart-item-info .variation dt:nth-of-type(even),
.cart-item-info .variation dt:nth-of-type(even) + dd {
background: #EFEFEF !important;
}
/* Linhas ímpares com fundo branco explícito (sobrescreve qualquer pai) */
.cart-item-info dl.variation dt:nth-of-type(odd),
.cart-item-info dl.variation dt:nth-of-type(odd) + dd,
.cart-item-info .variation dt:nth-of-type(odd),
.cart-item-info .variation dt:nth-of-type(odd) + dd {
background: #FFFFFF !important;
}
/* Obs sem name (dt vazio) ocupa as 2 colunas em itálico discreto */
.cart-item-info dl.variation dt:empty + dd,
.cart-item-info .variation dt:empty + dd {
grid-column: 1 / -1;
font-size: 10.5px !important;
color: var(--cor-cinza-500) !important;
font-style: italic !important;
}
.cart-item-info dl.variation dt:empty,
.cart-item-info .variation dt:empty {
display: none !important;
}
/* ============================================================
PAGINA /CARRINHO/ — tabela 7 colunas estilo "pedido de projeto" (rc178/rc179)
Foto · Descrição do Produto · Código/Ambiente · Preço · Qtd · Subtotal · ×
Cores: azul Ark (--cor-azul) substitui verde
============================================================ */
/* FIX rc179: WooCommerce cart usa wrapper .container.page-layout que tem max-width:800px
(regra global pra páginas estáticas em linha 2677). Sobrescreve quando body é cart/checkout. */
body.woocommerce-cart .container.page-layout,
body.woocommerce-checkout .container.page-layout {
max-width: var(--container-max, 1440px);
padding-top: 0 !important;
}
/* rc183: oculta breadcrumb + page-title default no cart/checkout (gestor não quer "Início › Cart" + h1 "Cart") */
body.woocommerce-cart .breadcrumb,
body.woocommerce-cart .page-content > .page-title,
body.woocommerce-checkout .breadcrumb,
body.woocommerce-checkout .page-content > .page-title {
display: none !important;
}
.ark-cart-page {
width: 100%;
max-width: 1380px;
margin: 32px auto;
padding: 0 24px;
font-family: var(--font-body);
}
/* Força fonte padrão em TODOS os elementos do cart (rc189) — evita herança serif default browser */
.ark-cart-page,
.ark-cart-page input,
.ark-cart-page button,
.ark-cart-page select,
.ark-cart-page textarea,
.ark-cart-page label,
.ark-cart-page span,
.ark-cart-page strong,
.ark-cart-page p,
.ark-cart-page a {
font-family: var(--font-body);
}
/* rc208: linha do título com botão Imprimir à direita */
.ark-cart-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 24px;
padding-bottom: 14px;
border-bottom: 1px solid var(--cor-cinza-100);
}
.ark-cart-title {
font-size: 26px;
font-weight: 600;
margin: 0;
padding: 0;
border: 0;
}
.ark-cart-print-btn, .ark-cart-clear-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 14px;
background: transparent;
color: var(--cor-cinza-700);
border: 1px solid var(--cor-cinza-200, #ddd);
border-radius: 3px;
font-size: 11px;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
}
.ark-cart-print-btn, .ark-cart-clear-btn:hover {
background: var(--cor-azul);
color: #fff;
border-color: var(--cor-azul);
}
.ark-cart-print-btn, .ark-cart-clear-btn svg { display: block; }
/* rc255: variação destrutiva pro Limpar carrinho — hover vermelho em vez de azul */
.ark-cart-clear-btn:hover { background: #DC2626; border-color: #DC2626; color: #fff; }
.ark-cart-clear-btn:disabled { opacity: 0.55; cursor: progress; }
/* ============================================================
PRINT VIEW DEDICADA — mockup cart-print-v2.html (rc218)
Hidden na tela. JS move pro body antes do print(); CSS @media print
esconde resto do body e mostra .ark-cart-print-view.
Tokens:
--cor-azul #3483FA → Subtotal, Total, doc-number
--cor-vermelho #E8001D → borda lateral do bloco Atenção
#f0f0f0 → header da products-table
#EFEFEF (zebra) → linhas pares das tabelas info-table e variation
============================================================ */
.ark-cart-print-view { display: none; }
@media print {
/* rc447/rc448: NEUTRALIZA regras mobile do tema (overflow-x:clip de header.css:854,
max-width restritivos) que vazam pro contexto de print no Chrome Android.
Sem isso o body fica preso em 412px (viewport mobile) → Chrome escala pra A4 landscape
(~1122px) gerando 3 páginas com conteúdo apertado em vez de 1 página igual ao PC.
rc448: ALÉM de resetar overflow/max-width, FORÇAMOS min-width em mm (unidade física
que o print engine reconhece como largura da PÁGINA, não do viewport). 247mm = A4
landscape (297mm) - margens laterais (50mm). Assim body cresce até a largura útil
da página A4, igualando layout mobile = desktop. */
html, body {
width: 247mm !important;
min-width: 247mm !important;
max-width: none !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
}
.ark-cart-page,
.ark-co-wrap,
.ark-co-form,
.container,
.site-main,
.site-content {
overflow: visible !important;
max-width: none !important;
min-width: 247mm !important;
width: 247mm !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.ark-cart-print-view {
width: 247mm !important;
min-width: 247mm !important;
max-width: none !important;
}
/* rc219: margens laterais 10mm → 15mm (gestor).
rc221: counter(page)/counter(pages) via @page margin box (fixed extrai do contexto de paginação).
rc222: paginação centralizada (@bottom-right → @bottom-center). Rodapé HTML removido.
rc224: @bottom-center → @bottom-left (razão social/CNPJ/endereço) + @bottom-right (Página X de Y).
rc225: @bottom-left REMOVIDO — razão social/CNPJ/endereço volta como rodapé HTML (.doc-footer)
posicionado fixed, para incluir mini logo + texto centralizados.
@bottom-right (Página X de Y) MANTIDO.
rc227: .doc-footer migra de `position: fixed` para `position: running(rodape)` —
CSS Paged Media Level 3. HTML do rodapé é extraído pro margin box `@bottom-left`,
ficando NA MESMA LINHA Y do `@bottom-right` (counter page/pages).
Margin inferior do @page aumentada (10mm → 18mm) pra acomodar rodapé
com linha horizontal acima + texto a ~3-4mm do fundo.
rc228: REVERSÃO de `position: running()` — Chromium/Blink (motor do Chrome) NÃO
implementa CSS Paged Media Level 3 running elements. `position: running(rodape)`
era ignorado e `content: element(rodape)` ficava vazio, fazendo o