/*
 * Tela de produto. Números MEDIDOS: mockup do dono (mapa/mockup-home §2) onde ele
 * cobre a peça — ele vence o clone; gabarito (clone v1, medido ao vivo) no resto.
 * Por cima, a regra de CONTROLE da v2 (alvo ≥44px, input ≥16px) vence os dois.
 * Breakpoints da casa: 1023.98 / 767.98 (max-width).
 */

.single-product .elf-conteudo { max-width: var(--elf-container); padding: 0 14px 28px; }

/* o woocommerce.css flutua o resumo em 48% — a grade da tela é NOSSA */
.single-product div.product div.summary.entry-summary { float: none; width: auto; }   /* vence o "float:right;width:48%" do Woo */
/* o Woo abre 2em embaixo do form — o mockup pede 14px entre blocos */
.single-product div.product form.cart { margin-bottom: 0 !important; }
/* o clearfix do Woo virava um ITEM FLEX invisível e empurrava a linha de compra 10px */
.single-product div.product form.cart::before,
.single-product div.product form.cart::after { content: none; }

/* selo e card de produto vivem no loja.css, a migalha no casco.css (peças de mais de uma tela) */

/* ── galeria própria: scroll-snap NATIVO (gesto do SO) + <dialog> NATIVO ── */
.elf-galeria { margin: 12px 0 0; }
/* foto quadrada num quadro branco com margem mínima (dono, B37: "sem a foto solta no fundo") */
.elf-gal-quadro {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(30, 11, 54, .07), 0 16px 40px -8px rgba(30, 11, 54, .2);
  /* sem overflow: hidden viraria o rolo da lupa sticky, e clip corta a foto vizinha que o navegador adianta */
}
.elf-gal-trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.elf-gal-trilho::-webkit-scrollbar { display: none; }
.elf-gal-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 320 no celular (dono, B37); contain: foto que não for quadrada ganha faixa, nunca corte */
.elf-gal-slide img { width: 320px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 9px; }
/* do tablet pra cima a foto enche o quadro, como no gabarito (700 no iPad em pé; A68) */
@media (min-width: 768px) { .elf-gal-slide img { width: 100%; } }
/* e no tablet o quadro (quadrado) não passa da altura livre acima da barra de baixo: tela baixa, como o notebook
   com zoom e o celular grande deitado, continua com a foto inteira na tela (A91) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .elf-gal-palco { max-width: calc(100svh - 55px - var(--elf-safe-b)); margin-inline: auto; }
}
/* lupa no canto inferior direito, ícone no rosa escuro (dono, validação do B37; o rosa claro no branco dá 2,85:1).
   No celular é sticky ("que não conflite com iPhone"): enquanto o pé da foto está atrás da barra fixa (iPhone 13,
   na chegada), ela gruda 12 px acima da barra (67 = barra 55 + 12). Margem 4 + 8 do quadro = 12 do canto */
.elf-gal-lupa {
  position: sticky; bottom: calc(67px + var(--elf-safe-b)); z-index: 2; margin: -42px 4px 4px auto;
  width: 38px; height: 38px; min-height: 38px; min-width: 38px;
  background: var(--elf-bg); border: 1px solid var(--elf-border-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--elf-rosa-escuro); cursor: pointer; padding: 0;
}
/* alvo real de 44px sem inchar o desenho (contrato: ≥44px): o ::after conta da caixa interna (36) */
.elf-gal-lupa::after { content: ""; position: absolute; inset: -4px; }
/* D15: na tela baixa a barra de baixo sai (casco.css) e a lupa gruda 12 px acima do chão */
@media (max-width: 1023.98px) and (max-height: 540px) { .elf-gal-lupa { bottom: calc(12px + var(--elf-safe-b)); } }
/* o voltar-ao-topo ocupa o canto da lupa grudada: aqui ele some na hora, sem o fade de .3s por cima dela */
.elf-scrolltop:not(.elf-visivel) { transition: none; }
.elf-gal-labels { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
/* setas de 44 (o alvo de toque do contrato): a foto desliza pro lado (o trilho é scroll-snap). No celular a 1/3
   da foto: no meio, a ‹ ficava embaixo do WhatsApp fixo na chegada do iPhone 13 (o toque abria o WhatsApp) */
.elf-gal-seta {
  position: absolute; top: 33%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--elf-text);
  background: rgba(255, 255, 255, .92); border: 1px solid #E4E4EA; box-shadow: 0 2px 8px rgba(30, 11, 54, .14);
}
.elf-gal-seta svg { stroke-width: 2.2; }
.elf-gal-seta-ant { left: 14px; }
.elf-gal-seta-prox { right: 14px; }
/* na 1ª foto a ‹ e na última a › apagadas: não têm pra onde ir (A18) */
.elf-gal-seta[aria-disabled="true"] { opacity: .35; cursor: default; }

.elf-gal-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
/* relative: pinta por cima da sombra do quadro da foto (static, ficava embaixo dela e escurecia) */
.elf-gal-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--elf-border); cursor: pointer; }
/* alvo da bolinha (A109): até a metade do vão de cada lado, pra não encavalar na vizinha, e o espaço livre em cima
   (até o quadro) e embaixo (até o preço) — sem cobrir a foto nem o preço */
.elf-gal-dot::after { content: ""; position: absolute; inset: -20px -3px -4px; }
.elf-gal-dot.elf-on { background: var(--elf-roxo); }
.elf-gal-dot:nth-child(6) { display: none; }   /* 5 no celular, 6 no computador (dono, B37) */
.elf-gal-thumbs { display: none; }

/* lightbox: <dialog> nativo; dedo de lado e pinça nativos pelo touch-action. Aberto, a página não rola por trás (A13) */
html:has(.elf-lightbox[open]) { overflow: hidden; }
.elf-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 0; background: #000; }
.elf-lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.elf-lightbox-trilho { display: flex; height: 100dvh; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.elf-lightbox-trilho::-webkit-scrollbar { display: none; }
.elf-lightbox-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center;
  overflow: auto; touch-action: pan-x pinch-zoom;        /* o dedo de lado passa a foto (A09); a pinça aproxima */
}
/* width auto: o width do HTML esticava a caixa do img, e o preto do lado da foto era o próprio img (o toque fora não fechava, A14) */
.elf-lightbox-slide img { width: auto; max-width: 100%; max-height: 100dvh; object-fit: contain; }
/* a prévia (a foto da galeria) no meio, embaixo da grande que ainda chega (A153) */
.elf-lightbox-previa { position: absolute; inset: 0; margin: auto; z-index: -1; }
.elf-lightbox-x, .elf-lightbox-seta {
  position: fixed; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.elf-lightbox-x { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; }
/* setas no meio dos lados e contador no canto de cima, como no gabarito (PhotoSwipe do clone). No celular a seta
   fica em cima da foto: fundo escuro pro ícone branco aparecer na foto clara */
.elf-lightbox-seta { top: 50%; translate: 0 -50%; background: rgba(0, 0, 0, .5); }
.elf-lightbox-seta-ant { left: 10px; }
.elf-lightbox-seta-prox { right: 10px; }
.elf-lightbox-conta {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 3;
  margin: 0; line-height: 2.75rem; font-size: 0.875rem; color: #fff;
}

/* ── identificação (mockup) ── */
/* B71 (#97): marca à esquerda e estrelas no canto direito da mesma linha, centradas no logo */
.elf-marca-linha { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.elf-marca { font-size: 1rem; font-weight: 800; letter-spacing: 2px; color: var(--elf-text); margin: 0; }
/* 2 classes: o `.woocommerce-page img { height: auto }` do Woo (classe + tag) ganhava de 1 classe */
.elf-marca .elf-marca-logo {
  display: block; height: 32px; width: auto;
  transform-origin: 0 50%; animation: elf-pulso 1.9s .6s ease-in-out both;
}
/* pulso de luz ao abrir, 2 vezes (opção D do dono, "coloca mais brilho"): núcleo branco + halos rosa e azul.
   Roda até com "menos movimento" pedido no aparelho: decisão do dono (B34). */
@keyframes elf-pulso {
  0%, 4% { transform: scale(1); filter: none; }
  16%, 44% {
    transform: scale(1.1);
    filter: brightness(1.25) saturate(1.4) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(236, 72, 153, 1)) drop-shadow(0 0 20px rgba(99, 102, 241, 1));
  }
  30% { transform: scale(1.02); filter: brightness(1.05) drop-shadow(0 0 4px rgba(236, 72, 153, .5)); }
  62%, 100% { transform: scale(1); filter: none; }
}
.single-product .product_title {
  font-size: 1.3125rem; font-weight: 700; line-height: 1.25; color: var(--elf-text); margin: 6px 0 8px;
}
.elf-vendido-por { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; color: var(--elf-text-secondary); }
.elf-vendido-por .elf-icon { color: var(--elf-rosa-escuro); }
.elf-vendido-por strong { color: var(--elf-rosa-escuro-hover); font-weight: 600; }   /* K23: o rosa escuro dá 4,03 no cinza do celular */
/* estrelas: o Woo joga pra direita e calcula a largura em 5.4em da fonte "star" — com o
   letter-spacing do mockup a 5ª estrela era cortada, então ele cai aqui (registrado) */
/* B71: link pras Avaliações; o padding com margem negativa leva o alvo a 44 px sem mexer na linha */
.elf-estrelas {
  display: flex; align-items: center; gap: 5px; margin: -13px 0 -13px auto; padding: 13px 0;
  font-size: 0.8125rem; line-height: 1; color: var(--elf-text-secondary); text-decoration: none;
}
.elf-estrelas .star-rating {
  color: #F5A623; font-size: 0.9375rem; line-height: 1; letter-spacing: normal;
  height: 1.2em; margin: 0; float: none; display: block;
}
/* as estrelas do Woo ("s" vazia, "S" cheia) desenhadas em SVG no lugar da fonte de ícones: sem ela
   (internet lenta) o cliente via as letras "sssss" (A45). 1 estrela = 1078/1024 em, como na fonte */
.woocommerce .star-rating::before, .woocommerce .star-rating span::before {
  content: ""; width: 5.264em; height: 1.06em; background-color: currentColor;
  -webkit-mask: var(--elf-estrela) 0 0 / 1.0527em repeat-x;
  mask: var(--elf-estrela) 0 0 / 1.0527em repeat-x;
}
.woocommerce .star-rating::before { --elf-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1078 1078'%3E%3Cpath d='M538 48 372 385 0 439 269 701 206 1069 538 896 869 1069 806 701 1075 439 704 385ZM538 197 662 444 941 485 739 678 788 950 538 821 288 950 336 678 134 485 414 444Z'/%3E%3C/svg%3E"); }
.woocommerce .star-rating span::before { --elf-estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1078 1078'%3E%3Cpath d='M538 45 704 382 1076 436 808 698 871 1069 538 894 205 1069 269 698 0 436 372 382Z'/%3E%3C/svg%3E"); }
.elf-banner-slot { margin: 14px 0 2px; }
.elf-banner-slot img { display: block; width: 100%; height: auto; border-radius: var(--elf-radius); }

/* ── preço (a régua de preco.php desenhada) ── */
.elf-preco { margin-top: 6px; }
.elf-preco-topo { display: flex; align-items: center; }
.elf-preco-velho, .elf-preco-velho .woocommerce-Price-amount {
  font-size: 0.8125rem; font-weight: 400; color: var(--elf-text-tertiary); text-decoration: line-through;
}
.elf-preco-pix, .elf-preco-pix .woocommerce-Price-amount {
  font-size: 1.875rem; font-weight: 800; color: var(--elf-rosa-escuro); line-height: 1.1;
}
.elf-preco-pix { margin-top: 2px; }
.elf-avista-pix { font-size: 0.8125rem; color: var(--elf-text); margin-top: 2px; }
.elf-avista-pix strong { font-weight: 700; }
.elf-parcelas { font-size: 0.8125rem; color: #444; margin-top: 8px; }
.elf-parcelas strong, .elf-parcelas .woocommerce-Price-amount { font-weight: 700; font-size: 0.8125rem; color: #444; }

/* ── sabores: <select> NATIVO com a cara da pílula do gabarito (o dropup JS da v1 morreu) ── */
.single-product form.variations_form table.variations,
.single-product form.variations_form table.variations tbody,
.single-product form.variations_form table.variations tr,
.single-product form.variations_form table.variations th,
.single-product form.variations_form table.variations td {
  display: block; width: 100%; padding: 0; border: none;
}
.single-product table.variations { margin: 14px 0 0 !important; }
.single-product table.variations th.label label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--elf-text); margin-bottom: 8px; display: block;
}
.single-product form.variations_form table.variations select {
  width: 100%; min-height: 44px; padding: 11px 40px 11px 14px;
  border: 1.5px solid var(--elf-border); border-radius: var(--elf-radius);
  background-color: var(--elf-bg); color: var(--elf-text);
  font-size: 1rem;                                  /* CONTROLE: mata o auto-zoom do iOS */
  font-family: var(--elf-font); line-height: 1.2;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* o woocommerce.css deixa esse select `inline-block` com `margin-right:1em` — a linha de
   texto em volta + a margem faziam a página rolar 2–3px pro lado no Android (360 e 480).
   Seletor mais específico que o dele de propósito. */
.single-product div.product form.cart table.variations select { display: block; margin-right: 0; }
.single-product form.variations_form table.variations select:focus { border-color: var(--elf-roxo); outline: none; }
.single-product form.variations_form table.variations select:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 1px; }
.single-product .reset_variations { display: inline-block; margin-top: 8px; font-size: 0.75rem; color: var(--elf-text-tertiary); text-decoration: none; }
/* o Woo esconde o "Limpar" por visibility — a caixa continuava lá abrindo um vão de 40px
   entre a pílula de sabores e os botões, que o mockup não tem */
.single-product .reset_variations[style*="hidden"] { display: none; }
/* e antes do JS do Woo (K13, A47): fora do fluxo sem sabor escolhido — a mesma regra dele (chosenCount > 0) */
.single-product table.variations:not(:has(option:checked:not([value=""]))) .reset_variations { display: none; }
/* o preço da variação sai: o bloco de preço acima já é a fonte (igual ao gabarito) */
.single-product .woocommerce-variation-price { display: none; }

/* ── Leve mais, pague menos (B28): o quadro de desconto por quantidade do elfbar.ae, MEDIDO
      ao vivo no 390 (gabarito). Paleta (D27): rosa claro nas linhas, na borda da faixa escolhida
      e na bolinha; rosa escuro onde há texto branco (rosa claro com branco dá 2,8:1).
      CONTROLE vence o gabarito: select 44px com fonte 16, caixinha 48px (a da casa). ── */
/* com 1 atributo o sabor mora nas faixas (o <template> só existe aí); a caixinha do Woo muda
   pro quadro pelo produto.js — esconder antes evita o salto da linha de compra na carga */
.single-product form.variations_form:has(.elf-leve template) table.variations,
.single-product form.variations_form:has(.elf-leve) .woocommerce-variation-add-to-cart > .quantity { display: none; }
.elf-leve { margin-top: 18px; }
.elf-leve-titulo {
  display: flex; align-items: center; gap: 6px; margin: 0 0 20px; white-space: nowrap;
  font-size: 0.875rem; font-weight: 600; color: var(--elf-text);
}
.elf-leve-titulo::before, .elf-leve-titulo::after { content: ""; flex: 1; height: 1.6px; background: var(--elf-pink); }
/* minmax(0,1fr): sem ele o nome comprido do sabor alarga a coluna e empurra o preço pra fora.
   14 = a fita sobe 10 acima da faixa + 4 de folga até a de cima (dono, B37: respiro mínimo) */
.elf-leve-faixas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.elf-leve-faixa { position: relative; padding: 15px; border: 2px solid #E9CCD4; border-radius: 14px; background: var(--elf-bg); }
.elf-leve-faixa.elf-on { border-color: var(--elf-pink); background: #FFE5EC; }
.elf-leve-escolha { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.elf-leve-escolha input {
  appearance: none; width: 20px; height: 20px; margin: 0; flex-shrink: 0; cursor: pointer;
  border: 2px solid #E9CCD4; border-radius: 50%; background: #fff;
}
.elf-leve-escolha input:checked { border: 5px solid var(--elf-pink); }
.elf-leve-escolha input:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 2px; }
.elf-leve-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.elf-leve-nome { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--elf-text); }
/* B89 (dono): a unidade num quadro roxo claro, o valor em negrito e maior; sem lugar, "unidade no Pix" desce dentro dele */
.elf-leve-un {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; padding: 3px 8px;
  border: 1px solid #C9A6F2; border-radius: 6px; background: #F3E8FF; color: #6E1DC2; font-size: 0.75rem; line-height: 1.3;
}
.elf-leve-un [data-elf-un] { font-size: 1rem; font-weight: 700; }
/* coluna da direita com largura mínima igual nas 4 faixas: os totais e os quadros roxos se alinham */
.elf-leve-precos { min-width: 7.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.elf-leve-rotulo { font-size: 0.75rem; color: #5C5C5C; }
.elf-leve-pix { font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--elf-rosa-escuro-hover); }   /* K23: o rosa escuro dá 3,88 no rosa da faixa marcada */
.elf-leve-de { font-size: 0.8125rem; color: #5C5C5C; }
/* fitas ("Super oferta", "Frete grátis"): abas dobradas sobre a borda, em fila no canto — as orelhas
   escuras são a dobra */
.elf-leve-fitas { position: absolute; top: -10px; right: 22px; z-index: 1; display: flex; gap: 16px; }
.elf-leve-fita {
  position: relative; padding: 4px 8px; border-radius: 0 0 8px 8px;
  background: var(--elf-rosa-escuro); color: #fff; font-size: 0.75rem; font-weight: 600; line-height: 0.9375rem;
}
.elf-leve-fita::before, .elf-leve-fita::after { content: ""; position: absolute; top: 0; width: 8px; height: 10px; background: #9E1F4D; }
.elf-leve-fita::before { left: -8px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.elf-leve-fita::after { right: -8px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
/* K21 (A142): zoom, letra grande ou tela estreita — sem lugar pro preço ao lado do nome, ele desce pra
   linha de baixo (e o selo pra baixo do "Leve N") em vez de um passar por cima do outro */
.elf-leve-faixas { container-type: inline-size; }
@container (max-width: 16.5em) {
  .elf-leve-escolha, .elf-leve-nome { flex-wrap: wrap; row-gap: 2px; }
  .elf-leve-precos { flex-basis: 100%; }
  /* as fitas entram no fluxo, penduradas na borda como antes (-25 = 15 de padding + os 10 do top:-10): quando
     a letra delas quebra em 2 linhas, empurram o "Leve N" pra baixo em vez de cobri-lo */
  .elf-leve-fitas { position: relative; top: auto; right: auto; justify-content: flex-end; margin: -25px 5px 2px; }
}
/* um <select> NATIVO por unidade, só na faixa escolhida */
.elf-leve-sabores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-top: 7px; }
.elf-leve-sabores:empty { display: none; }
.elf-leve-sabores p { margin: 0 0 -1px; font-size: 0.75rem; font-weight: 700; color: #000; }
.elf-leve-sabor { position: relative; display: flex; align-items: center; margin: 0; }
/* 24px e não os 20 do gabarito: o "#10" (23px) invadia a caixa do select */
.elf-leve-sabor > span[aria-hidden]:first-child { width: 24px; flex-shrink: 0; font-size: 0.78125rem; font-weight: 600; color: #111; }
/* A53: a caixa mostra o nome escolhido inteiro, quebrando linha — o <select> corta seco no WebKit (sem "…").
   O <select> NATIVO fica por cima dela, transparente: o toque abre a lista do aparelho, como antes */
.elf-leve-sabor-nome {
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 34px 6px 10px; display: flex; align-items: center;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px; color: #000;
  font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere;
  background: rgba(0, 0, 0, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") no-repeat right 10px center;
}
/* left 24 = a largura do #N: o select cobre só a caixa */
.single-product .elf-leve-sabor select {
  position: absolute; top: 0; left: 24px; width: calc(100% - 24px); height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; font-size: 1rem; appearance: none;   /* 16px: sem o zoom do iOS no toque */
  /* sem o corte, o WebKit mede o nome longo inteiro e a página passa da tela (B35: 554px com o Kiwi Watermelon Apple) */
  overflow: hidden; white-space: nowrap;
}
.elf-leve-sabor:has(select:focus-visible) .elf-leve-sabor-nome { outline: 2px solid var(--elf-roxo); outline-offset: 1px; }
/* a caixinha do Woo mora aqui (produto.js); 48px reservados = sem salto quando ela chega */
.elf-leve-qtd {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; min-height: 48px;
  font-size: 0.875rem; font-weight: 600; color: var(--elf-text);
}
/* K21 (A143): o rótulo encolhe até a palavra mais longa; sem lugar nem assim, a caixinha desce pra linha de baixo */
.elf-leve-qtd > span { flex: 1; }

/* ── estoque ── */
.single-product div.product p.stock,
.single-product .woocommerce-variation-availability p {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem !important; line-height: 1.2; font-weight: 600; margin: 14px 0 10px;
}
.single-product div.product p.stock.out-of-stock { color: #B50808; }
.single-product .summary p.stock.in-stock,
.single-product .woocommerce-variation-availability p.in-stock { color: var(--elf-verde-estoque); }
.single-product .summary p.stock.in-stock::before,
.single-product .woocommerce-variation-availability p.in-stock::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
}

/* ── botões de compra (mockup: comprar full-width; linha2 = qtd + adicionar + zap) ── */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 10px;
}
.single-product .elf-comprar-agora {
  order: -1; flex: 1 1 100%; width: 100%; height: 48px; min-height: 48px; padding: 0 24px;
  background: var(--elf-roxo); color: #fff; border: 0; border-radius: var(--elf-radius);
  font-size: 0.9375rem; font-weight: 600; font-family: var(--elf-font); line-height: 1; cursor: pointer;
  transition: background .15s;
}
.single-product .elf-comprar-agora:hover { background: var(--elf-roxo-hover); }
/* caixinha na opção C do dono (B30): sem caixa — o − e o + são círculos de 44px no roxo suave
   da loja (o do "Adicionar"), o número fica no meio. A caixa transparente de antes sumia no fundo. */
.single-product form.cart .quantity {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 48px; flex-shrink: 0; min-width: 136px;    /* reserva o espaço dos +/- do JS: zero CLS */
}
.single-product form.cart .quantity input.qty {
  width: 36px; height: 46px; min-height: 0; border: 0; text-align: center; padding: 0;
  font-size: 1.125rem; font-weight: 700;                /* CONTROLE: ≥16px */
  font-family: var(--elf-font); background: transparent; -moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .elf-qtd-btn {
  width: 44px; height: 44px; min-height: 0; min-width: 44px;  /* CONTROLE: ≥44px (gabarito 32px) */
  border: 0; border-radius: 50%; background: var(--elf-roxo-suave); color: var(--elf-roxo);
  font-size: 1.375rem; font-weight: 600; line-height: 1; cursor: pointer; padding: 0; transition: background .15s;
}
.single-product .elf-qtd-btn:hover { background: rgba(130, 36, 227, .14); }   /* o hover do "Adicionar" */
.single-product form.cart button.single_add_to_cart_button {
  flex: 1 1 0; min-width: 0; height: 48px; min-height: 48px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  background: var(--elf-roxo-suave); color: var(--elf-roxo); border: 0; border-radius: var(--elf-radius);
  font-size: 0.875rem; font-weight: 600; font-family: var(--elf-font); line-height: 1; cursor: pointer;
  transition: background .15s;
}
.single-product form.cart button.single_add_to_cart_button:hover { background: rgba(130, 36, 227, .14); color: var(--elf-roxo-hover); }
/* o woocommerce.css pinta o disabled de roxo-padrão com texto branco; o gabarito mantém
   a mesma pele do botão habilitado — só o clique não vale */
.single-product form.cart button.single_add_to_cart_button.disabled,
.single-product form.cart button.single_add_to_cart_button:disabled,
/* e com o mouse em cima: o :hover do woocommerce.css (0,5,1) ganhava das duas de cima e pintava de roxo (B40) */
.single-product div.product form.cart button.single_add_to_cart_button:is(.disabled, :disabled):hover {
  background: var(--elf-roxo-suave); color: var(--elf-roxo); opacity: 1; cursor: default;
}
.single-product .elf-zap-produto {
  width: 46px; height: 46px; flex: 0 0 46px; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--elf-whatsapp); border-radius: 50%; color: #fff; text-decoration: none; transition: background .15s;
}
.single-product .elf-zap-produto:hover { background: var(--elf-whatsapp-hover); color: #fff; }
/* campo escondido não pode virar item da linha (empurrava a linha 10px pra dentro) */
.single-product form.cart input[type="hidden"] { display: none; }

/* ── frete por CEP (a caixa é do tema, na largura do resumo; a conta mora no elfvape-loja).
      Contorno igual ao das faixas do "Leve mais" (dono, B37) ── */
.single-product #wc-shipping-simulator {
  border: 2px solid #E9CCD4; border-radius: 14px;
  padding: 14px; margin-top: 14px; background: var(--elf-bg);
}
.single-product #wc-shipping-simulator::before {
  content: "CONSULTE FRETE"; display: block;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .5px; color: var(--elf-rosa-escuro);
  margin-bottom: 10px; padding-left: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D6336C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") no-repeat left center;
}
/* a linha tem 52 e o campo 48: os 4px de folga embaixo vêm do desenho do plugin antigo */
.single-product #wc-shipping-simulator .shipping-simulator-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
/* 6.5em = o CEP inteiro com o padding (K21, A146): sem esse lugar ao lado do OK, o OK desce */
.single-product #wc-shipping-simulator .shipping-simulator-wrapper label { flex: 1 1 6.5em; height: 52px; }
.single-product #wc-shipping-simulator input.cep-number {
  width: 100%; height: 48px; padding: 0 12px;   /* mesma altura do OK, ≥44 do contrato */
  border: 1px solid var(--elf-border); border-radius: 8px;
  font-size: 1rem;                                  /* CONTROLE: ≥16px */
  font-family: var(--elf-font); background: var(--elf-bg); outline: none;
}
.single-product #wc-shipping-simulator input.cep-number:focus { border-color: var(--elf-rosa-escuro); }
.single-product #wc-shipping-simulator input.cep-number:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 1px; }
.single-product #wc-shipping-simulator button.calculate {
  height: 48px; min-height: 0; width: auto; min-width: 64px; padding: 0 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--elf-bg); color: var(--elf-rosa-escuro); border: 1.5px solid var(--elf-rosa-escuro);
  border-radius: 8px; font-size: 0.8125rem; font-weight: 700; font-family: var(--elf-font); cursor: pointer; transition: all .15s;
}
/* carregando: o OK vira o girador DENTRO do botão (como a lifepod, LD19) */
.single-product #wc-shipping-simulator.loading button.calculate { font-size: 0; cursor: default; }
.single-product #wc-shipping-simulator.loading button.calculate::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(214, 51, 108, .25); border-top-color: var(--elf-rosa-escuro);
  animation: elf-frete-gira .5s linear infinite;
}
/* gira pra todos, também com "menos movimento" (decisão do dono no B34; A90) */
@keyframes elf-frete-gira { to { transform: rotate(360deg); } }
.single-product #wc-shipping-simulator #fshipping-results { font-size: 0.8125rem; font-family: var(--elf-font); }
/* resultado no molde do mapa/mockup-frete (K26): "Entregar em …" em cima, uma linha por forma de entrega
   (ícone, nome, prazo embaixo, valor à direita) e, enquanto calcula, as mesmas linhas em cinza */
.single-product #fshipping-results .elf-frete-destino {
  margin: 14px 0 0; padding: 10px 12px 10px 36px; border-radius: 8px;
  background: var(--elf-cinza-topo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238224E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat 12px 11px;
  font-size: 0.78125rem; line-height: 1.4; color: var(--elf-text-secondary);
}
.single-product #fshipping-results .elf-frete-destino b { color: var(--elf-text); font-weight: 600; }
.single-product #fshipping-results .elf-frete-opcoes {
  list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--elf-border); border-radius: 10px; overflow: hidden;
}
.single-product #fshipping-results .elf-frete-opcao {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 0 10px; padding: 12px; min-height: 56px;
}
.single-product #fshipping-results .elf-frete-opcao + .elf-frete-opcao { border-top: 1px solid var(--elf-cinza-topo-borda); }
.single-product #fshipping-results .elf-frete-opcao::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  background: var(--elf-roxo-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238224E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") no-repeat center;
}
.single-product #fshipping-results .elf-frete-nome { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--elf-text); }
.single-product #fshipping-results .elf-frete-prazo { grid-column: 2; font-size: 0.75rem; line-height: 1.35; color: var(--elf-text-secondary); }
.single-product #fshipping-results .elf-frete-valor {
  grid-column: 3; font-size: 0.9375rem; font-weight: 700; white-space: nowrap; text-align: right; color: var(--elf-text);
}
.single-product #fshipping-results .elf-frete-opcao:has(.elf-frete-prazo) .elf-frete-valor { grid-row: 1 / span 2; }   /* o prazo desce sob o nome; o ícone fica na 1ª linha, ao lado do nome (mockup-frete) */
.single-product #fshipping-results .elf-frete-gratis { background: color-mix(in srgb, var(--elf-verde-estoque) 8%, transparent); }
.single-product #fshipping-results .elf-frete-gratis::before {
  background: color-mix(in srgb, var(--elf-verde-estoque) 15%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") no-repeat center;
}
.single-product #fshipping-results .elf-frete-gratis .elf-frete-valor { color: var(--elf-verde-estoque); text-transform: uppercase; font-size: 0.875rem; letter-spacing: .3px; }
.single-product #fshipping-results .elf-frete-cinza .elf-frete-opcao::before { background-image: none; }
.single-product #fshipping-results .elf-frete-cinza span { background: var(--elf-cinza-topo); border-radius: 4px; }
.single-product #fshipping-results .elf-frete-cinza .elf-frete-nome { width: 60%; height: 14px; }
.single-product #fshipping-results .elf-frete-cinza .elf-frete-prazo { width: 40%; height: 11px; margin-top: 5px; }
.single-product #fshipping-results .elf-frete-cinza .elf-frete-valor { width: 54px; height: 15px; }
.single-product #wc-shipping-simulator #fshipping-results .error,
.single-product .elf-aviso-compra {   /* falha do Adicionar/Comprar (produto.js): o mesmo tom do erro do frete */
  padding: 9px 14px;
  color: #c0392b; background: #ffdbd4; border: 1px solid #f6c4bf; border-radius: 2px;
}
.single-product #wc-shipping-simulator #fshipping-results .error {   /* erro curto com o alerta e o WhatsApp (mockup-frete) */
  margin-top: 14px; padding: 10px 12px 10px 36px; border-radius: 8px; line-height: 1.4;
  background: #ffdbd4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") no-repeat 12px 11px;
}
.single-product #fshipping-results .error a { color: inherit; font-weight: 600; text-decoration: underline; }
.single-product #fshipping-results .error span { white-space: nowrap; }   /* o CEP não quebra no hífen */
/* a letra e a margem do erro do frete, e não as do título "Sabores" (.elf-leve-sabores p), onde ele cai */
.single-product .elf-aviso-compra { margin: 15px 0 0; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; }   /* no td.value do kit herdaria o 2em do Woo */
.single-product .elf-cep-link {
  display: inline-block; margin-top: 10px; font-size: 0.75rem;
  color: var(--elf-rosa-escuro) !important; text-decoration: underline;
}

/* ── selos ── */
.elf-selos { margin-top: 14px; font-size: 0.75rem; color: var(--elf-text-secondary); display: flex; flex-direction: column; gap: 6px; }
.elf-selos > div { display: flex; align-items: center; gap: 7px; }
.elf-selos .elf-icon { color: var(--elf-text-secondary); }

/* ── abas: accordion de aberta única no 390; tira de abas no desktop ── */
.elf-abas { display: flex; flex-wrap: wrap; margin-top: 24px; }
.elf-aba {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 0; min-height: 66px;  /* alvo do gabarito */
  background: none; border: 0; border-bottom: 1px solid var(--elf-border-light);
  font-size: 0.875rem; font-family: var(--elf-font); color: var(--elf-text); text-align: left; cursor: pointer;
}
.elf-aba::after {
  content: ""; margin-left: auto; width: 16px; height: 16px; transition: transform .2s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
}
.elf-aba[aria-expanded="true"] { color: var(--elf-roxo); font-weight: 600; }
.elf-aba[aria-expanded="true"]::after { transform: rotate(180deg); }
.elf-aba-corpo { width: 100%; font-size: 0.875rem; line-height: 1.7; color: var(--elf-text-secondary); padding: 14px 0 20px; }
/* o texto das abas é CONTEÚDO CONGELADO — a régua tipográfica é a do gabarito */
.elf-aba-corpo h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: #242424; margin: 20px 0 10px; }
.elf-aba-corpo h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.4; color: #242424; margin: 18px 0 8px; }
.elf-aba-corpo h4 { font-size: 1.125rem; font-weight: 600; color: #242424; }
.elf-aba-corpo a { color: var(--elf-roxo); text-decoration: none; }
.elf-aba-corpo a:hover { text-decoration: underline; }
.elf-aba-corpo strong, .elf-aba-corpo b { font-weight: 600; }
.elf-aba-corpo p { margin: 0 0 12px; }
.elf-aba-corpo table { width: 100%; border-collapse: collapse; }
.elf-aba-corpo th, .elf-aba-corpo td { padding: 8px 0; border-bottom: 1px solid var(--elf-border-light); text-align: left; font-weight: 400; }
/* K21 (A149): abaixo dos 320 px da WCAG (zoom de 200%, letra grande) a tabela empilha, rótulo em cima e
   valor embaixo, e palavra longa quebra: o texto é congelado e passava da tela */
@media (max-width: 19.99em) {
  .elf-aba-corpo { overflow-wrap: break-word; }
  .elf-aba-corpo :is(table, thead, tbody, tr, th, td) { display: block; }
  .elf-aba-corpo :is(th, td):not(:last-child) { padding-bottom: 0; border-bottom: 0; }
}

/* ── relacionados (o CARD é componente compartilhado: loja.css) ── */
.elf-relacionados { margin-top: 28px; }
.elf-relacionados > h2 { font-size: 1.125rem; font-weight: 700; text-align: left; margin: 0 0 16px; color: var(--elf-text); }

/* ══ 390: identificação → galeria → banner → preço → form → frete → selos, a ordem do próprio HTML (K11).
      As caixas somem e as peças viram itens de uma coluna flex: os espaços entre elas ficam os aprovados
      (no flex as margens não se juntam) ══ */
@media (max-width: 1023.98px) {
  .single-product div.product { display: flex; flex-direction: column; }
  .single-product .summary, .elf-identificacao, .elf-compra { display: contents; }
}

/* Abaixo do alvo da obra (390) o rótulo "Adicionar ao carrinho" não cabe numa linha — e a
   maioria dos Android reporta 360dp. Deixa quebrar em duas dentro do mesmo botão de 48px,
   em vez de o texto vazar por cima do WhatsApp. O 390 aprovado fica intacto. */
@media (max-width: 389.98px) {
  .single-product form.cart button.single_add_to_cart_button {
    white-space: normal; line-height: 1.15; padding: 0 6px;
  }
}
/* Abaixo dos 360, com a caixinha na mesma linha, sobravam 86 px e o texto quebrava em 3 (A67): o botão desce pra
   linha de baixo, junto do WhatsApp (46 + vão de 10), e a caixinha fica sozinha em cima, como no Leve mais */
@media (max-width: 359.98px) {
  .single-product form.cart button.single_add_to_cart_button { flex-basis: calc(100% - 56px); }
}

/* ── síntese de notas no topo da aba Avaliações (como no gabarito) ── */
.elf-notas { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 4px 0 18px; border-bottom: 1px solid var(--elf-border-light); margin-bottom: 18px; }
.elf-notas-media { display: flex; flex-direction: column; gap: 4px; }
.elf-notas-numero { font-size: 2.125rem; font-weight: 800; line-height: 1; color: var(--elf-text); }
.elf-notas-media .star-rating { color: #F5A623; font-size: 0.8125rem; float: none; margin: 0; }
.elf-notas-total { font-size: 0.75rem; color: var(--elf-text-tertiary); }
.elf-notas-barras { flex: 1 1 200px; min-width: min(180px, 100%); display: flex; flex-direction: column; gap: 5px; }
.elf-notas-linha { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--elf-text-secondary); }
.elf-notas-trilho { flex: 1; height: 7px; border-radius: 999px; background: var(--elf-bg-secondary); overflow: hidden; }
.elf-notas-cheio { display: block; height: 100%; background: #F5A623; }
.elf-notas-qtd { min-width: 16px; text-align: right; }

/* ══ desktop (mockup do dono, B37: docs/b37-provas/mockup/): a coluna da galeria mede a foto e fica
      parada enquanto o quadro de compra rola; miniaturas em coluna ao lado da foto ══ */
@media (min-width: 1024px) {
  .single-product .elf-conteudo { padding: 0 22px 40px; }
  /* no HTML a galeria fica entre a identificação e o resto do quadro de compra (K11): a galeria ocupa a
     coluna da esquerda nas 3 linhas, e a 3ª, vazia, recebe o que ela tiver a mais que o quadro (produto
     esgotado) sem abrir vão dentro dele. Sem vão entre linhas: os 28 dele entram na margem das abas */
  .single-product div.product {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0 32px; align-items: start; padding-top: 16px;
  }
  .single-product div.product > .elf-abas,
  .single-product div.product > .elf-relacionados { grid-column: 1 / -1; }
  .single-product div.product > .elf-abas { margin-top: 52px; }
  .single-product div.product > .elf-relacionados { margin-top: 56px; }
  /* a coluna da galeria estica até o fim do quadro de compra e a foto + miniaturas grudam DENTRO dela
     (sticky num item de grid não para na linha dele no Chrome: invadia as abas). 136 = topo fixo 120 + 16.
     A foto e as 6 bolinhas embaixo dela cabem inteiras na 1ª tela (254 = topo 120 + categorias e trilha 98
     + bolinhas 20 + 16) e deixam o quadro de compra com 420 ou mais (606 = respiro 44 + vão 32 + 420 +
     coluna das miniaturas 110).
     row-reverse: miniaturas à esquerda; produto de 1 foto não tem coluna vazia */
  .elf-galeria {
    --lado: min(calc(100vh - 254px), 680px, calc(100vw - 606px));
    grid-area: 1 / 1 / 4;
    margin: 0; align-self: stretch; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 14px;
  }
  .elf-gal-palco, .elf-gal-thumbs { position: sticky; top: 136px; }
  .elf-gal-palco { flex: none; width: var(--lado); }
  .elf-gal-quadro { padding: 10px; }
  .elf-gal-lupa { position: absolute; right: 12px; bottom: 12px; margin: 0; }
  .elf-gal-seta { top: 50%; }
  .elf-gal-seta-ant { left: 18px; }
  .elf-gal-seta-prox { right: 18px; }
  .elf-gal-dot:nth-child(6) { display: block; }
  /* coluna na altura da foto, rolando por dentro; a última some num degradê pra avisar que rola. A margem de
     baixo são as bolinhas (20) do palco: no fim da coluna as miniaturas param junto com a foto */
  .elf-gal-thumbs {
    flex: 0 0 96px; height: var(--lado); margin-bottom: 20px;
    display: flex; flex-direction: column; gap: 10px; padding: 4px;
    overflow-y: auto; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  }
  .elf-gal-thumbs.elf-fim { -webkit-mask-image: none; mask-image: none; }   /* no fim não há mais o que avisar (A17) */
  .elf-gal-thumb {
    position: relative; flex: 0 0 auto; aspect-ratio: 1; padding: 3px; cursor: pointer;
    background: #fff; border: 1px solid #E4E4EA; border-radius: 9px;
  }
  .elf-gal-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
  /* anel da ativa (cinza, do B33) por fora do quadrinho */
  .elf-gal-thumb::after {
    content: ""; position: absolute; inset: -4px; pointer-events: none;
    border: 2px solid transparent; border-radius: 12px; transition: border-color .15s;
  }
  .elf-gal-thumb.elf-on::after { border-color: #8a8a8a; }
  /* o foco de teclado pinta o próprio anel de roxo (um outline ficaria por baixo do cinza na ativa) */
  .elf-gal-thumb:focus-visible { outline: none; }
  .elf-gal-thumb:focus-visible::after { border-color: var(--elf-roxo); }

  /* o resumo é o quadro de compra: branco com sombra, tudo dentro na mesma largura. margin 0: o 2em do
     woocommerce.css esticava a linha e a galeria passava 32px do fim do quadro */
  .single-product div.product > div.summary {
    grid-area: 2 / 2;
    margin: 0; background: #fff; border-radius: 16px; padding: 28px 32px 30px;
    box-shadow: 0 1px 3px rgba(30, 11, 54, .07), 0 16px 40px -8px rgba(30, 11, 54, .2);
  }
  /* a identificação vai pro topo do quadro: ele sobe pra linha dela e o conteúdo dele fica na de baixo
     (subgrid). Sem subgrid (navegador antigo) ela fica logo acima do quadro, fora dele. relative: pinta
     por cima do fundo do quadro (um z-index tirava o antialiasing fino do título no Chromium) */
  .elf-identificacao { grid-area: 1 / 2; position: relative; padding: 28px 32px 0; }
  @supports (grid-template-rows: subgrid) {
    .single-product div.product > div.summary { grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; }
    .elf-compra { grid-row: 2; }
  }
  .elf-marca { font-size: 1.1875rem; }
  .elf-marca .elf-marca-logo { height: 38px; }
  .single-product .product_title { font-size: 1.625rem; }
  .elf-preco-pix, .elf-preco-pix .woocommerce-Price-amount { font-size: 2.125rem; }
  /* ícone de carrinho no botão (mockup mostra só no desktop) */
  .single-product form.cart button.single_add_to_cart_button { padding: 0 24px; }
  .single-product form.cart button.single_add_to_cart_button::before {
    content: ""; width: 17px; height: 17px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%238224E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") no-repeat center;
  }

  /* abas viram tira: botões na linha 1, corpo embaixo em largura cheia */
  .elf-abas { border-bottom: 1px solid var(--elf-border-light); column-gap: 26px; }
  .elf-aba { width: auto; padding: 0 0 10px; min-height: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .elf-aba::after { display: none; }
  /* inativa 400, aberta 600 como no mockup; o rótulo em negrito escondido reserva a largura da aberta,
     senão o negrito alarga a aba e empurra as vizinhas a cada clique (A38) */
  .elf-aba > [data-rotulo]::after { content: attr(data-rotulo); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
  .elf-aba[aria-expanded="true"] { border-bottom-color: var(--elf-roxo); }
  .elf-aba-corpo { order: 1; flex: 1 0 100%; }
}
/* o tablet deitado cai na tira do computador: com o dedo, a aba volta a ter o alvo de 44 (A69) */
@media (min-width: 1024px) and (pointer: coarse) {
  .elf-aba { min-height: 44px; }
}