/*
 * Gaveta do carrinho — global: ela abre em qualquer tela.
 * Números medidos no gabarito (clone v1, 390) em `docs/b6-provas/medidas-gabarito*.json`.
 * Correções de CONTROLE da régua v2 por cima (o contrato manda a v2 vencer aqui):
 *   altura 664px (vh do Safari) → 100dvh · stepper 25×32 → 44 · X 20×20 → 44 · campo 14px → 16px.
 * O 18,2px do gabarito é o rem sobre o html{14px} do WoodMart: na v2 (root 16) vira 18px.
 */

/* ═══ a gaveta ═══ */
.elf-carrinho-veu {
  position: fixed;
  inset: 0;
  z-index: 100200;
  background: rgba(0, 0, 0, .7);          /* medido: .wd-close-side */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.elf-carrinho-veu.elf-open { opacity: 1; pointer-events: auto; }

.elf-carrinho {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100201;
  width: 300px;                            /* medido */
  max-width: 86vw;
  height: 100dvh;                          /* v2: o gabarito usa 664px de vh mentiroso */
  background: var(--elf-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* K20: fechada, fora do Tab e do leitor de tela, como o menu (casco.css) */
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s;
}
.elf-carrinho.elf-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

.elf-carrinho-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;                         /* K21: sem lugar (zoom, letra grande), o Fechar desce e fica à direita */
  min-height: 66px;                        /* medido: 66,48 */
  padding: 10px 15px;
  border-bottom: 1px solid var(--elf-border-light);
}
.elf-carrinho-titulo { font-size: 1.125rem; font-weight: 700; color: var(--elf-text); }
.elf-carrinho-fechar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  min-height: var(--elf-toque);
  padding: 0 0 0 12px;                     /* medido: o texto encosta nos 15px da coluna */
  border: 0;
  background: none;
  font-size: 0.875rem;                         /* medido */
  font-weight: 600;                        /* medido */
  color: var(--elf-text-secondary);
  cursor: pointer;
}
.elf-carrinho-fechar .elf-icon { width: 15px; height: 16px; }   /* medido: o × antes da palavra */
.elf-carrinho-fechar:hover { color: var(--elf-text); }

.elf-carrinho-conteudo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Q02: a mudança que deu certo só o leitor de tela ouve (.elf-carrinho-aviso é elf-sr-only); a que falhou aparece
   aqui (carrinho.js), no rosa-escuro do erro do carrinho (C28: o vermelho no rosa do frete dava 4,2:1 e não era da loja) */
.elf-carrinho-erro {
  margin: 10px 15px 0;
  padding: 9px 14px;
  border: 1px solid var(--elf-rosa-escuro);
  border-radius: var(--elf-radius);
  background: var(--elf-bg);
  color: var(--elf-rosa-escuro-hover);
  font-size: 0.8125rem;
  line-height: 1.4;
}
/* Q03: o aviso de estoque mora na linha do item, embaixo do nome (gaveta e página) */
.elf-mc-corpo .elf-carrinho-erro,
.cart_item .elf-carrinho-erro { margin: 8px 0 0; }

/* ═══ itens ═══ */
.elf-mc-lista {
  flex: 1;                                 /* a lista cresce: o rodapé fica colado embaixo */
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elf-mc-item {
  position: relative;
  display: grid;
  grid-template-columns: 65px 1fr;         /* medido: foto 65 + coluna do nome */
  column-gap: 15px;
  padding: 15px;                           /* medido: o gabarito não risca entre itens */
}
.elf-mc-foto { display: block; width: 65px; }
.elf-mc-foto img { width: 65px; height: 65px; border-radius: 16.67px; object-fit: contain; }
.elf-mc-corpo { min-width: 0; }
.elf-mc-nome {
  display: block;
  padding-right: 34px;                     /* o texto nunca passa por baixo do alvo de 44 do X */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;                        /* medido: 19,6/14 */
  color: var(--elf-text);
  text-decoration: none;
}
.elf-mc-nome:hover { color: var(--elf-roxo); }
.elf-mc-linha { display: block; margin-top: 6px; font-size: 0.7875rem; color: var(--elf-text-secondary); }
.elf-mc-linha .amount { font-weight: 600; }   /* medido: só o preço é forte na linha */
/* Q08 (A177): as escolhas que o nome não traz (refis e cor do kit), na gaveta e na página com o mesmo desenho.
   O Woo só escreve o atributo que falta no nome: o pod comum não ganha linha. Uma escolha por linha, rótulo e valor */
.elf-mc-corpo dl.variation,
body.woocommerce-cart td.product-name dl.variation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 4px;
  margin: 4px 0 0;
  font-size: 0.7875rem;
  line-height: 1.4;
  color: var(--elf-text-secondary);
}
.elf-mc-corpo dl.variation :is(dt, dd, p),
body.woocommerce-cart td.product-name dl.variation :is(dt, dd, p) { float: none; margin: 0; padding: 0; }
.elf-mc-corpo dl.variation dt,
body.woocommerce-cart td.product-name dl.variation dt { font-weight: 400; }
.elf-mc-corpo dl.variation dd,
body.woocommerce-cart td.product-name dl.variation dd { font-weight: 600; color: var(--elf-text); }

/* X remover: o gabarito tem 20×20 — a régua v2 manda 44 (o alvo cresce, o desenho não) */
.elf-mc-x {
  position: absolute;
  /* o alvo é 44, mas o DESENHO fica onde o gabarito põe: centro a 20px da borda direita
     e 23px do topo do item (o padding-left empurra o ícone dentro da caixa maior) */
  top: 1px;
  right: 0;
  width: var(--elf-toque);
  height: var(--elf-toque);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 4px;
  border: 0;
  background: none;
  color: #333;
  cursor: pointer;
}
.elf-mc-x:hover { color: var(--elf-rosa-escuro); }
/* V184, V40: enquanto salva, só o item que o X tira fica apagado e sem toque (a gaveta inteira deixava a página de
   trás aparecer); depois o aviso fica no lugar dele, na mesma altura (carrinho.js). Na /carrinho/, o que vai pra rota */
.elf-mc-item[aria-busy="true"], body.woocommerce-cart .elf-conteudo [aria-busy="true"] { opacity: .6; pointer-events: none; transition: opacity .2s; }
.elf-mc-removido { display: flex; align-items: center; padding: 15px; font-size: 0.875rem; color: var(--elf-text-secondary); }
/* D5: o aviso do Woo que entra ali ("… removido. Desfazer?") tem essa mesma cara em toda tela: sem a faixa do woocommerce.css,
   a pílula do /carrinho/ (abaixo) ou a caixa da conta; o Desfazer com o toque de 44 px */
.elf-carrinho .elf-mc-removido :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { all: unset; }
.elf-carrinho .elf-mc-removido :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }
.elf-carrinho .elf-mc-removido :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a { display: inline-flex; align-items: center; min-height: var(--elf-toque); color: var(--elf-roxo); text-decoration: underline; }

/* ═══ stepper (gaveta e página usam o mesmo desenho) ═══
   Q11 (B38-15): o da tela de produto, opção C do B30 (produto.css) — sem caixa, o − e o + em círculos de 44 px no
   roxo suave da loja, o número 18 em negrito no meio. Sem overflow: ele cortava o anel de foco do número (C39).
   Na página quem embrulha o campo é o `.quantity` do Woo (o template dele não deixa pôr classe nossa) */
.elf-stepper,
.elf-stepper-pagina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.elf-stepper { margin-top: 8px; }
.elf-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--elf-toque);
  height: var(--elf-toque);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--elf-roxo-suave);
  color: var(--elf-roxo);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.elf-stepper-btn:hover { background: rgba(130, 36, 227, .14); }   /* o hover do "Adicionar", como na tela de produto */
.elf-stepper-campo,
body.woocommerce-cart td.product-quantity .quantity input.qty {
  width: 36px;
  height: 46px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--elf-text);
  background: transparent;
  box-shadow: none;
  -moz-appearance: textfield;
}
.elf-stepper-campo:focus-visible,
body.woocommerce-cart td.product-quantity .quantity input.qty:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 1px; }
.elf-stepper-campo::-webkit-outer-spin-button,
.elf-stepper-campo::-webkit-inner-spin-button,
body.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══ rodapé da gaveta ═══ */
.elf-mc-rodape {
  flex: none;
  padding-bottom: var(--elf-safe-b);
  background: var(--elf-bg);
}
.elf-mc-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;                         /* K21: sem lugar, o valor desce e fica à direita */
  column-gap: 8px;
  margin: 0;
  padding: 15px;
  border-top: 1px solid var(--elf-border-light);
  font-size: 1.125rem;
  line-height: 1.4;                        /* medido: a faixa tem 56px, não 58 */
  color: var(--elf-text);
}

.elf-mc-total-valor { margin-left: auto; font-weight: 700; }
/* Q07 (A25): o Pix do Total da página, no rosa dela, colado no Subtotal */
.elf-mc-pix {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 8px;
  margin: -8px 0 0;
  padding: 0 15px 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--elf-rosa-escuro);
}
.elf-mc-pix b { margin-left: auto; font-size: 1.1875rem; }
.elf-mc-botoes { padding: 0 15px 15px; }

/* botões da casa (a gaveta e a tela do vazio bebem daqui) */
.elf-btn-pri,
.elf-btn-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;                            /* medido */
  padding: 0 12px;
  text-align: center;                      /* K21: o texto que quebra em 2 linhas fica no meio, longe da borda */
  border-radius: var(--elf-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.elf-btn-sec { background: var(--elf-roxo-suave); color: var(--elf-roxo); margin-bottom: 8px; }
.elf-btn-sec:hover { background: rgba(130, 36, 227, .14); }
.elf-btn-pri { background: var(--elf-roxo); color: #fff; }
.elf-mc-botoes .elf-btn-pri { margin-bottom: 8px; }   /* medido: o rodapé fecha com 23px de sobra */
.elf-btn-pri:hover { background: var(--elf-roxo-hover); color: #fff; }

/* ═══ gaveta vazia ═══ */
.elf-mc-vazio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.elf-mc-vazio .elf-icon { color: rgba(0, 0, 0, .12); }
.elf-mc-vazio p { margin: 0; font-size: 0.875rem; color: var(--elf-text-secondary); }
.elf-mc-vazio .elf-btn-pri { padding: 0 20px; }

/* ═══ o "Ver carrinho" que o Woo cola no card depois do add ═══
   O add do card é AJAX (add-to-cart.js do core) e ele injeta um link atrás do botão.
   O gabarito não tem esse link — a gaveta é que responde ao add. */
.added_to_cart { display: none !important; }

/* ═══ avisos do Woo: a pílula do /carrinho/ (Q11) vale também na home do /?add-to-cart= (Q16) e na tela de produto
   do Adicionar sem AJAX — um desenho só pro "adicionado", o erro e o info. O Desfazer do remover mora aqui ═══ */
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-message,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-info,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-error {
  position: relative;
  margin: 0 0 20px;
  padding: 18px 30px 18px 65px;
  border: 0;
  border-radius: 25px;
  background: var(--elf-verde-estoque);   /* C28: o azul da casa dava 3,9:1 com o branco; o verde do estoque, 7,1 (e não parece o Aplicar) */
  color: #fff;
  font-size: 0.875rem;
  list-style: none;
}
/* o ::before do Woo vinha verde-oliva dentro da faixa */
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-message::before,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-info::before,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-error::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;          /* o Blink TRUNCA border-width fracionário */
  border-radius: 50%;
  font-size: 0.8125rem;
  line-height: 1;
  color: #fff;
}
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-info::before { content: "i"; font-style: italic; }
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-error::before { content: "!"; }
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-error { background: var(--elf-rosa-escuro-hover); }   /* C28: o âmbar dava 1,97:1 com o branco; o rosa-escuro do hover dá 5,6 (o normal, 4,6, fica no limite) */
/* o Woo dá foco na tarja (tabindex=-1) e o navegador desenha o anel; na home o anel genérico
   (.home .elf-conteudo :focus-visible, home.css) ainda trocava o canto por 4 px */
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-message:focus,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-info:focus,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-error:focus { outline: none; border-radius: 25px; }
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-message a,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-info a,
body:is(.woocommerce-cart, .home, .single-product) .woocommerce-error a {
  display: inline-flex;
  align-items: center;
  min-height: var(--elf-toque);
  color: #fff;
  text-decoration: underline;
}
/* o anel roxo da casa some no verde (1,2:1): no aviso ele é branco */
body:is(.woocommerce-cart, .home, .single-product) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* o "Ver carrinho" (home e produto; no /carrinho/ ele some): botão da loja (D27, canto 10). O roxo cheio sumiria na
   pílula verde (1,2:1 entre os dois fundos): vai branco com o texto roxo (6,3:1) */
body:is(.home, .single-product) .woocommerce-message a.button {
  justify-content: center;
  margin-left: 12px;
  padding: 0 16px;
  border-radius: var(--elf-radius);
  background: var(--elf-bg);
  color: var(--elf-roxo);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
body:is(.home, .single-product) .woocommerce-message a.button:hover { color: var(--elf-roxo-hover); }
/* com espaço, texto e botão numa linha e no mesmo meio (o float do Woo deixava o texto 11 px acima do botão); no
   celular o float fica: o texto contorna o botão e a tarja não cresce */
@media (min-width: 768px) {
  body:is(.home, .single-product) .woocommerce-message:has(> a.button) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  body:is(.home, .single-product) .woocommerce-message:has(> a.button)::after { content: none; }
  body:is(.home, .single-product) .woocommerce-message > a.button { float: none; margin-left: auto; }
}

/* K21 (A144): abaixo de 288 px (zoom de 150–200%, letra grande) a coluna ao lado da foto fica menor que o
   − 1 + (138 px): a gaveta ocupa a tela e o item empilha — foto, nome, seletor */
@media (max-width: 17.99em) {
  .elf-carrinho { max-width: 100vw; }
  .elf-mc-item { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .elf-mc-nome { padding-right: 0; }      /* o nome fica abaixo da foto, fora do alvo do X */
}

/* Q07 (C109, C125): tela baixa (letra grande, zoom de 200%, celular deitado). O rodapé preso (214 px com o Pix) deixava
   pra lista menos que um item e o + ficava sob o Subtotal: a gaveta rola inteira, e o topo com o Fechar fica preso */
@media (max-height: 35em) {
  .elf-carrinho { overflow-y: auto; }
  .elf-carrinho-topo { position: sticky; top: 0; z-index: 1; background: var(--elf-bg); }
  .elf-carrinho-conteudo,
  .elf-mc-lista { flex: 1 0 auto; overflow-y: visible; }
}

@media (min-width: 768px) {
  .elf-carrinho { width: 340px; }         /* medido no 1440 */
}