/* ==========================================================================
   JULLY · camada de acabamento da Identidade Visual v1.0
   --------------------------------------------------------------------------
   Fonte deste arquivo: /srv/evolury/stores/jully/marca/jully.css
   Publicado em: Tema da loja › Código Customizado › CSS customizado.
   Editou aqui? Publique de novo no campo (o tema não lê este arquivo).

   O painel já define cores, fonte, logos, card, cabeçalho e selos. Aqui fica
   só o que ele não alcança. Regra da marca que guia tudo: o AMARELO é só da
   compra (Comprar, Finalizar compra, Pagar). No tema, a "cor da marca" é o
   preto; o amarelo entra pelos seletores abaixo.

   Quando a regra do tema usa !important DENTRO de @layer components, só vence
   outro !important numa camada anterior: por isso alguns ajustes moram em
   @layer base (seção 15).
   ========================================================================== */

/* 1. Tokens do guia ---------------------------------------------------------- */
:root {
  --jully-preto: #0A0A0A;
  --jully-amarelo: #FFD900;
  --jully-ambar: #FFB400;
  --jully-amarelo-pressionado: #E6A200;
  --jully-branco: #FFFFFF;
  --jully-areia: #FAF7F0;
  --jully-cinza-100: #F1EFEA;
  --jully-cinza-200: #E2DFD8;
  --jully-cinza-400: #A8A49C;
  --jully-cinza-600: #6B6862;
  --jully-cinza-800: #2B2A27;
  --jully-sucesso: #1F9D5C; --jully-sucesso-texto: #14653B; --jully-sucesso-fundo: #E7F5EC;
  --jully-alerta: #E8590C;  --jully-alerta-texto: #9A3A05;  --jully-alerta-fundo: #FFF1E6;
  --jully-erro: #D93025;    --jully-erro-texto: #B3261E;    --jully-erro-fundo: #FCEBEA;
  --jully-info: #2D6CDF;    --jully-info-texto: #1E4FA8;    --jully-info-fundo: #EAF0FB;
  --raio-1: 2px;
  --raio-2: 6px;
  --raio-pilula: 999px;
  --sombra-1: 0 1px 2px rgba(10, 10, 10, .08);
  --sombra-2: 0 6px 20px rgba(10, 10, 10, .10);
  --sombra-3: 0 16px 48px rgba(10, 10, 10, .16);
  --jully-tracking: .12em;
  /* Ação (botões principais, etapas, selo NOVO): grafite quente. O preto puro
     fica para texto, ícone e logo; no hover a ação escurece até ele. */
  --jully-acao: var(--jully-cinza-800);
  --jully-acao-hover: var(--jully-preto);

  /* Busca com canto de 2 px (o painel só oferece 0, .5rem ou pílula). */
  --evo-search-radius: var(--raio-1);
  /* Cores funcionais do guia onde o tema lê o token direto. */
  --color-success-500: var(--jully-sucesso);
  --color-danger-500: var(--jully-erro);
  --color-warning-500: var(--jully-alerta);
  /* O tema deriva o hover da cor da marca escurecendo 12%: no preto isso dá
     #090909, sem diferença visível. O guia usa Cinza 800. */
  --evo-brand-aa-hover: var(--jully-cinza-800);
  --evo-accent-hover: var(--jully-cinza-800);
  /* Hover dos botões de compra: o tema calcula o amarelo 10% mais escuro (#E6C300); o guia
     pede âmbar. A grade de variações e a barra de compra leem este token. */
  --evo-buy-bg-hover: var(--jully-ambar);
  /* Espaçamento da caixa alta dos botões (painel → Botões → Texto em caixa alta, tema 0.115.0):
     o guia pede +12%; o padrão do tema é .06em. */
  --evo-btn-tracking: var(--jully-tracking);
}

::selection { background: var(--jully-amarelo); color: var(--jully-preto); }

/* 2. Tipografia (Montserrat vem do painel; aqui, peso, tamanho e espaçamento) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }

/* Display 64/68 · 600 · −2% */
.evo-hero__headline {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  line-height: 1.0625;
  font-weight: 600;
  letter-spacing: -.02em;
}
.evo-hero__subheadline { font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; }

/* Sobretítulo 13 · 600 · +12% */
.evo-section-heading__eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  color: var(--jully-preto);
}
/* H2 28/36 · 500 */
.evo-section-heading__title { font-size: 1.75rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -.01em; }
.evo-section-heading__description { font-size: 1rem; line-height: 1.625rem; color: var(--jully-cinza-600); }
@media (max-width: 767px) {
  .evo-section-heading__title { font-size: 1.5rem; line-height: 2rem; }
}

/* H1 44/52 · 600 · −1% (títulos de página e de categoria) */
.woocommerce-products-header__title,
.evo-page-content > h1:first-child {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.01em;
}
/* Nome do produto na PDP = H2 do guia */
.woocommerce div.product .product_title { font-size: 1.75rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -.01em; }

.evo-cta-banner__headline { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; }
.evo-cta-banner__text { font-size: 1rem; line-height: 1.625rem; }

/* Corpo 16/26 nos textos corridos */
:is(.evo-page-content, .evo-prose, .woocommerce-product-details__short-description) p { line-height: 1.625; }

/* 3. Botões: 2 px, caixa alta, +12% --------------------------------------- */
/* Cantos de 2 px e caixa alta vêm do painel (Botões → Cantos → Personalizado, 2, desde o tema
   0.114.0; Botões → Texto em caixa alta desde o 0.115.0, com o +12% pelo --evo-btn-tracking da
   seção 1). O botão "Comprar" do card fica fora da caixa alta do painel, de propósito do tema,
   e por isso mantém a dele aqui.
   Altura e margem lateral valem só para botões de texto. Os botões do card
   (comprar e visualização rápida) têm tamanho próprio no tema: a margem de
   28px espremia o ícone do olho até sumir. */
.evo-button {
  font-weight: 600;
  font-size: .8125rem;
}
.evo-button.evo-product-card__atc {
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evo-button:not(.evo-product-card__quick-view, .evo-product-card__atc) { min-height: 48px; padding-inline: 1.75rem; }
.evo-button--sm:not(.evo-product-card__quick-view, .evo-product-card__atc) { min-height: 40px; font-size: .75rem; padding-inline: 1.25rem; }
.evo-button--lg:not(.evo-product-card__quick-view, .evo-product-card__atc) { min-height: 56px; font-size: .875rem; padding-inline: 2.25rem; }
/* Visualização rápida: círculo branco sobre a foto, como o ícone do guia. */
.evo-button.evo-product-card__quick-view {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--jully-branco);
  color: var(--jully-preto);
  box-shadow: var(--sombra-1);
}
.evo-button.evo-product-card__quick-view:hover { background: var(--jully-acao); color: var(--jully-branco); }
.evo-product-card__quick-view-icon { stroke-width: 1.5; flex: none; }
/* Primário (Continuar, Entrar, Salvar): Cinza 800; hover em preto. O hover do
   tema ia para a cor da marca, e com texto claro isso não pode virar amarelo. */
.evo-button--primary { background: var(--jully-acao); color: var(--jully-branco); }
.evo-button--primary:hover { background: var(--jully-acao-hover); color: var(--jully-branco); }
/* Secundário (Ver detalhes, Filtrar): contorno Cinza 800. */
.evo-button--secondary { background: transparent; color: var(--jully-acao); border: 1px solid var(--jully-acao); }
.evo-button--secondary:hover { background: var(--jully-acao); color: var(--jully-branco); }
/* Link de texto: sublinhado preto (o tema força text-decoration:none). */
.evo-button.evo-button--ghost {
  background: transparent;
  color: var(--jully-preto);
  padding-inline: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.evo-button.evo-button--ghost:hover { background: transparent; border-bottom-width: 2px; }
/* Dentro de banner, a ação secundária é botão de contorno do mesmo tamanho do
   primário. O tema dá ali um contorno translúcido; somado ao sublinhado acima,
   o botão saía com borda torta. */
.evo-cta-banner__actions .evo-button.evo-button--ghost {
  color: inherit;
  padding-inline: 2.25rem;
  border: 1px solid currentColor;
  border-radius: var(--raio-1);
}
.evo-cta-banner__actions .evo-button.evo-button--ghost:hover {
  border-width: 1px;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.evo-cta-banner:is(.has-primary-700-background-color, .has-neutral-900-background-color, .has-black-background-color) { color: var(--jully-branco); }
/* Foco: contorno preto (amarelo sobre areia dá 1,3:1, abaixo dos 3:1 exigidos);
   sobre fundo escuro, amarelo. */
.evo-button:focus-visible { outline: 2px solid var(--jully-preto); outline-offset: 3px; }
.evo-hero .evo-button:focus-visible { outline-color: var(--jully-amarelo); }

/* Hero com foto (véu escuro): botões invertidos. */
.evo-hero .evo-button--primary { background: var(--jully-branco); color: var(--jully-preto); }
.evo-hero .evo-button--primary:hover { background: var(--jully-cinza-200); }
.evo-hero .evo-button--secondary { color: var(--jully-branco); border-color: var(--jully-branco); }
.evo-hero .evo-button--secondary:hover { background: var(--jully-branco); color: var(--jully-preto); }

/* Hero SEM foto: fundo Cinza 100 e texto preto. O padrão do tema é preto, que
   se fundia com o cabeçalho preto. Com foto, nada muda. Navegador sem :has()
   mantém o hero preto com botões invertidos (regras acima), que também é válido. */
.evo-hero:not(:has(.evo-hero__bg)) {
  background-color: var(--jully-cinza-100);
  color: var(--jully-preto);
  border-bottom: 1px solid var(--jully-cinza-200);
}
.evo-hero:not(:has(.evo-hero__bg))::before { display: none; }
.evo-hero:not(:has(.evo-hero__bg)) .evo-hero__subheadline { color: var(--jully-cinza-800); }
.evo-hero:not(:has(.evo-hero__bg)) .evo-button--primary { background: var(--jully-acao); color: var(--jully-branco); }
.evo-hero:not(:has(.evo-hero__bg)) .evo-button--primary:hover { background: var(--jully-acao-hover); }
.evo-hero:not(:has(.evo-hero__bg)) .evo-button--secondary { color: var(--jully-acao); border-color: var(--jully-acao); }
.evo-hero:not(:has(.evo-hero__bg)) .evo-button--secondary:hover { background: var(--jully-acao); color: var(--jully-branco); }
.evo-hero:not(:has(.evo-hero__bg)) .evo-button:focus-visible { outline-color: var(--jully-preto); }

/* Botões nativos do WooCommerce: peso e tamanho (cantos e caixa alta vêm do painel). */
.woocommerce :is(a.button, button.button, input.button) {
  font-weight: 600;
  font-size: .8125rem;
}

/* 4. COMPRA em amarelo (o único amarelo de botão da loja) -------------------- */
/* Desde o tema 0.114.0, a cor (#FFD900, texto #0A0A0A) e os cantos vêm do painel
   (Botões → Botões de compra). O hover âmbar vem do token --evo-buy-bg-hover (seção 1), que
   todas as superfícies de compra leem desde o tema 0.115.0. Ficam aqui o pressionado, o
   desabilitado, a altura e o tamanho e o peso da fonte. */
/* Página do produto */
.woocommerce div.product .single_add_to_cart_button.button {
  min-height: 56px;
  font-size: .875rem !important;
  font-weight: 600 !important;
  box-shadow: none;
}
.woocommerce div.product .single_add_to_cart_button.button:hover:not(.disabled):not(:disabled) { transform: none; box-shadow: none; }
.woocommerce div.product .single_add_to_cart_button.button:active { background-color: var(--jully-amarelo-pressionado) !important; }
.woocommerce div.product .single_add_to_cart_button.button:focus-visible { outline: 2px solid var(--jully-preto); outline-offset: 3px; }
.woocommerce div.product .single_add_to_cart_button.button:is(.disabled, :disabled) {
  background-color: var(--jully-cinza-100) !important;
  color: var(--jully-cinza-400) !important;
}

/* Barra fixa de compra */
.evo-sticky-atc-bar__cta { font-weight: 600; }

/* Sacola lateral: "Finalizar compra" amarelo, "Ver sacola" com contorno */
.evo-cart-drawer .woocommerce-mini-cart__buttons a.button {
  min-height: 48px;
  font-size: .8125rem;
}
.evo-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: transparent; color: var(--jully-acao); border: 1px solid var(--jully-acao); }
.evo-cart-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout):hover { background: var(--jully-acao); color: var(--jully-branco); border-color: var(--jully-acao); }

/* Carrinho e checkout em blocos: "Finalizar compra" e "Pagar" */
.wc-block-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Grade de atacado (adicionar a grade inteira à sacola): cor, cantos e caixa alta vêm do painel
   (a caixa alta desde o tema 0.116.0); aqui só o peso. */
body .evg__add { font-weight: 600; }

/* "Continuar" das etapas do checkout é primário (preto), não compra */
.evo-checkout-continue {
  font-size: .8125rem;
  font-weight: 600;
  box-shadow: none;
}

/* 5. Formulários: campo branco, 1 px, 2 px; foco = borda preta + anel amarelo */
:where(input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search],
       input[type=number], input[type=url], input:not([type]), select, textarea) {
  background-color: var(--jully-branco);
  border-radius: var(--raio-1);
}
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--jully-preto); box-shadow: 0 0 0 3px var(--jully-amarelo); }
.wc-block-checkout :is(input:not([type=checkbox]):not([type=radio]), textarea, select):focus,
.wc-block-cart :is(input:not([type=checkbox]):not([type=radio]), textarea, select):focus {
  border-color: var(--jully-preto) !important;
  box-shadow: 0 0 0 3px var(--jully-amarelo) !important;
}
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
  border-radius: var(--raio-1) !important;
  background-color: var(--jully-branco) !important;
}
body.woocommerce div.product form.cart .variations select { border-radius: var(--raio-1); background-color: var(--jully-branco); }
input[type=checkbox], input[type=radio] { accent-color: var(--jully-preto); }

/* 6. Faixa superior: amarelo de campanha, caixa alta espaçada --------------- */
.evo-topbar {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
  padding: .625rem 0;
}
.evo-topbar a { text-underline-offset: 3px; }
/* Celular: numa linha só (com .12em a frase quebrava e a faixa dobrava de altura). */
@media (max-width: 479px) {
  .evo-topbar { font-size: .6875rem; letter-spacing: .04em; padding: .5rem 0; }
}

/* 7. Cabeçalho branco (cores, logo e filete vêm do painel) ------------------ */
.evo-header svg, .evo-mobile-drawer svg, .evo-search-overlay svg { stroke-width: 1.5; }
.evo-nav--primary .evo-menu > li > a,
.evo-nav--split-left .evo-menu > li > a,
.evo-nav--split-right .evo-menu > li > a {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
/* Submenu do desktop: fundo branco e texto preto vêm do painel desde o tema 0.114.0
   (Cabeçalho → Submenu). Aqui, filete, sombra, cantos retos e tipografia. A gaveta mobile
   mora DENTRO do cabeçalho e tem fundo próprio: daí o :not(.evo-nav--mobile). */
.evo-header .evo-nav:not(.evo-nav--mobile) .evo-menu .sub-menu { border: 1px solid var(--jully-cinza-200); border-radius: 0; box-shadow: var(--sombra-2); }
.evo-header .evo-nav:not(.evo-nav--mobile) .evo-menu .sub-menu a { font-weight: 500; letter-spacing: .02em; text-transform: none; }
.evo-header .evo-nav:not(.evo-nav--mobile) .evo-menu .sub-menu a:hover { color: var(--jully-cinza-600); }
/* Item de menu com a classe CSS "jully-destaque" (ex.: SALE): amarelo sobre
   branco não tem contraste para texto, então o destaque é um filete amarelo
   embaixo no desktop e à esquerda na gaveta. */
.evo-header .evo-nav:not(.evo-nav--mobile) .evo-menu > li.jully-destaque > a { box-shadow: inset 0 -3px 0 var(--jully-amarelo); }
.evo-mobile-drawer .evo-menu > li.jully-destaque > a { box-shadow: inset 3px 0 0 var(--jully-amarelo); padding-left: .75rem; }
.evo-header__cart-count { font-weight: 700; }
.evo-mobile-drawer { color: var(--jully-preto); }
.evo-mobile-drawer .evo-menu > li > a {
  font-size: .875rem;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
  border-radius: 0;
}

/* Cabeçalho do carrinho/checkout: as cores seguem o cabeçalho da loja desde o tema 0.113.0
   (#404); aqui só a altura do logo. */
.evo-df-header__brand .evo-brand__logo[src$=".svg"] { height: 44px; }
@media (max-width: 767px) {
  .evo-df-header__brand .evo-brand__logo[src$=".svg"] { height: 36px; }
}
.evo-df-trust { color: var(--jully-sucesso-texto); }

/* 8. Rodapé ------------------------------------------------------------------ */
/* Desde o tema 0.114.0, o fundo Cinza 100 (e os tons de texto, links e filetes calculados
   sobre ele) e a altura do logo (98 / 74 px) vêm do painel: Rodapé → Cor de fundo e
   Logo do rodapé — altura. Aqui fica o que é tipografia e filete, e o texto corrido em
   Cinza 800: o tom que o tema calcula sobre o Cinza 100 é um cinza neutro (#4E4E4F), e o
   guia usa os cinzas quentes. */
.evo-footer { color: var(--jully-cinza-800); border-top: 1px solid var(--jully-cinza-200); }
.evo-footer a:not(.evo-button) { color: var(--jully-cinza-800); text-decoration: none; }
.evo-footer a:not(.evo-button):hover { color: var(--jully-preto); text-decoration: underline; text-underline-offset: 3px; }
.evo-footer__col-title {
  color: var(--jully-preto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evo-footer__logo { margin-bottom: 1.25rem; }
.evo-footer__brand-text { color: var(--jully-cinza-600); font-size: .875rem; line-height: 1.375rem; }
.evo-footer__payments { border-top-color: var(--jully-cinza-200); }
.evo-footer__payments-title {
  color: var(--jully-cinza-600);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evo-footer__payment-name { background: var(--jully-branco); border-color: var(--jully-cinza-200); border-radius: var(--raio-1); color: var(--jully-cinza-800); }
.evo-footer__bottom { border-top-color: var(--jully-cinza-200); }
.evo-footer__copyright { color: var(--jully-cinza-600); font-size: .75rem; }

/* 9. Vitrine e card --------------------------------------------------------- */
.evo-product-card__title { font-weight: 500; letter-spacing: 0; }
.evo-product-card__price { font-weight: 700; }
.evo-product-card__category {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evo-product-card--minimal .evo-product-card__atc { font-size: .8125rem; letter-spacing: var(--jully-tracking); }
.evo-badge { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; padding: .25rem .625rem; }
/* Selos do card em ícone (pedido da usuária em 28/10/2026): os dois selos em texto cobriam a foto
   e, no card estreito, o botão de visualização rápida. O texto continua no HTML para leitor de tela e
   aparece ao lado do ícone quando o mouse passa no card (com alt "" para não ser lido duas vezes). Relógio = sob encomenda (o mesmo ícone do
   cartão "Sob encomenda" da home); etiqueta de roupa = novo (o brilho lembrava ícone de IA). */
.evo-product-card__badges .evo-badge:is(.evo-badge--new, .evo-badge--on-order) {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  letter-spacing: 0;
  background: var(--jully-acao);
}
/* Ícone posicionado pelo círculo inteiro: o texto escondido virava um segundo item do grid e
   empurrava o ícone para cima. */
.evo-product-card__badges .evo-badge:is(.evo-badge--new, .evo-badge--on-order)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jully-branco);
  -webkit-mask: var(--jully-selo) center / 1rem 1rem no-repeat;
  mask: var(--jully-selo) center / 1rem 1rem no-repeat;
}
.evo-product-card__badges .evo-badge--on-order { --jully-selo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.evo-product-card__badges .evo-badge--new { --jully-selo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000'/%3E%3C/svg%3E"); }
.evo-product-card__badges .evo-badge:is(.evo-badge--new, .evo-badge--on-order)::after {
  position: absolute;
  left: calc(100% + .375rem);
  top: 50%;
  translate: 0 -50%;
  padding: .25rem .625rem;
  border-radius: 999px;
  background: var(--jully-acao);
  color: var(--jully-branco);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.25rem;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.evo-product-card__badges .evo-badge--on-order::after { content: "Sob encomenda"; content: "Sob encomenda" / ""; }
.evo-product-card__badges .evo-badge--new::after { content: "Novo"; content: "Novo" / ""; }
@media (hover: hover) {
  .evo-product-card:is(:hover, :focus-within) .evo-product-card__badges .evo-badge::after { opacity: 1; }
}
/* Nome em até 2 linhas (no celular o tema cortava em 1: "Baby doll Liganete …"). */
.evo-product-card__title,
.evo-product-card__title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
}
/* Altura de 2 linhas sempre, para o preço ficar na mesma altura nas duas colunas. */
.evo-product-card__title { min-height: 2lh; }
/* Estrelas só depois da primeira avaliação: 5 estrelas apagadas em todo card
   pareciam nota ruim. O rótulo é o que o WooCommerce dá ao produto sem nota. */
.evo-product-card__rating:has(.star-rating[aria-label="Ainda sem avaliações"]) { display: none; }
/* Fotos nunca arredondadas */
.evo-product-card__media, .evo-product-card__image,
.woocommerce div.product .woocommerce-product-gallery :is(img, .woocommerce-product-gallery__image) { border-radius: 0 !important; }

/* 10. Preço: atual em preto bold, anterior em Cinza 600, Pix em verde -------- */
:is(.price, .evo-price) del { color: var(--jully-cinza-600); font-weight: 400; }
:is(.price, .evo-price) ins { text-decoration: none; }
.woocommerce div.product p.price { color: var(--jully-preto); font-weight: 700; }
.evo-price-pm__off { background: var(--jully-sucesso-fundo); color: var(--jully-sucesso-texto); border-radius: var(--raio-pilula); }

/* 11. Raios e sombras: modal e alerta 6 px, sacola com sombra 3 ------------ */
.evo-account-modal__dialog { border-radius: var(--raio-2); box-shadow: var(--sombra-3); }
.evo-sheet { border-radius: var(--raio-2) var(--raio-2) 0 0; }
.evo-cart-drawer { box-shadow: var(--sombra-3); }

/* 12. Avisos nas cores funcionais do guia (cor + ícone + texto) ------------ */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border: 1px solid;
  border-radius: var(--raio-2);
  font-size: .875rem;
  line-height: 1.375rem;
}
.woocommerce-message { background: var(--jully-sucesso-fundo); color: var(--jully-sucesso-texto); border-color: rgb(31 157 92 / 35%); }
.woocommerce-message::before { color: var(--jully-sucesso); }
.woocommerce-info { background: var(--jully-info-fundo); color: var(--jully-info-texto); border-color: rgb(45 108 223 / 30%); }
.woocommerce-info::before { color: var(--jully-info); }
.woocommerce-error { background: var(--jully-erro-fundo); color: var(--jully-erro-texto); border-color: rgb(217 48 37 / 30%); }
.woocommerce-error::before { color: var(--jully-erro); }
.wc-block-components-notice-banner { border-radius: var(--raio-2); font-size: .875rem; }
.wc-block-components-notice-banner.is-success { background: var(--jully-sucesso-fundo); color: var(--jully-sucesso-texto); border-color: rgb(31 157 92 / 35%); }
.wc-block-components-notice-banner.is-success > svg { background-color: var(--jully-sucesso); }
.wc-block-components-notice-banner.is-info { background: var(--jully-info-fundo); color: var(--jully-info-texto); border-color: rgb(45 108 223 / 30%); }
.wc-block-components-notice-banner.is-info > svg { background-color: var(--jully-info); }
.wc-block-components-notice-banner.is-warning { background: var(--jully-alerta-fundo); color: var(--jully-alerta-texto); border-color: rgb(232 89 12 / 30%); }
.wc-block-components-notice-banner.is-warning > svg { background-color: var(--jully-alerta); }
.wc-block-components-notice-banner.is-error { background: var(--jully-erro-fundo); color: var(--jully-erro-texto); border-color: rgb(217 48 37 / 30%); }
.wc-block-components-notice-banner.is-error > svg { background-color: var(--jully-erro); }

/* 13. Barra de benefícios: 4 colunas iguais, ícone em cima, texto centrado e
   filete entre elas (o lado a lado do tema quebrava títulos em alturas diferentes). */
.evo-usp-bar.alignfull { padding-block: 2rem; }
.evo-usp-bar__list { gap: 0; row-gap: 1.75rem; }
.evo-usp-bar__item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding-inline: 1.25rem;
  border-radius: 0;
}
.evo-usp-bar__body { align-items: center; gap: .25rem; }
.evo-usp-bar svg { stroke-width: 1.5; }
.evo-usp-bar__title {
  font-size: .75rem;
  line-height: 1.125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.evo-usp-bar__text { font-size: .875rem; line-height: 1.375rem; color: var(--jully-cinza-600); }
@media (min-width: 1024px) {
  .evo-usp-bar__item + .evo-usp-bar__item { border-left: 1px solid var(--jully-cinza-200); }
}

/* 14. Espaçamento das páginas do construtor --------------------------------- */
/* A home ilustrada e a home-catálogo saíram em 06/11/2026 (a home voltou à base
   da Evolury); ficaram só as regras que valem para qualquer página. */
.evo-usp-bar.alignfull { border-bottom: 1px solid var(--jully-cinza-200); }
/* Faixa de campanha amarela (páginas institucionais) */
.jully-faixa-campanha { padding-block: 4.5rem; }
/* Ritmo vertical das páginas do construtor: 96 px entre seções (64 no celular).
   Faixas de largura total seguidas encostam uma na outra, sem fresta de areia. */
.evo-page-content > .evo-section-heading { padding-top: 6rem; padding-bottom: 2.5rem; }
.evo-page-content > * + .evo-cta-banner { margin-block-start: 6rem; }
.evo-page-content > .evo-cta-banner.alignfull + .evo-cta-banner.alignfull { margin-block-start: 0; }
.evo-page-content > .evo-cta-banner.alignfull:last-child { margin-block-end: 0; }
@media (max-width: 767px) {
  .evo-page-content > .evo-section-heading { padding-top: 4rem; padding-bottom: 1.5rem; }
  .evo-page-content > * + .evo-cta-banner { margin-block-start: 4rem; }
}

/* 15. Regras do tema com !important dentro de @layer components ------------ */
@layer base {
  /* Cupom: campo branco de 2 px; "Aplicar" é ação secundária (preto), não compra. */
  .wc-block-components-totals-coupon__form .wc-block-components-text-input input[type="text"] {
    border-radius: var(--raio-1) !important;
    background: var(--jully-branco) !important;
  }
  .wc-block-components-totals-coupon__button {
    border-radius: var(--raio-1) !important;
    background: var(--jully-acao) !important;
    color: var(--jully-branco) !important;
  }
  .wc-block-components-totals-coupon__button:hover:not(:disabled) { background: var(--jully-acao-hover) !important; }

  /* Login, cadastro e recuperação de senha: primário Cinza 800; hover sem amarelo. */
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select) {
    border-radius: var(--raio-1) !important;
    background: var(--jully-branco) !important;
  }
  /* Banner de cookies: cantos de 2 px (o peso igual de Aceitar e Recusar é do tema, de propósito). */
  .evo-consent__btn { border-radius: var(--raio-1) !important; }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) .button { background: var(--jully-acao) !important; border-radius: var(--raio-1) !important; }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) .button:hover { background: var(--jully-acao-hover) !important; }
  :is(.woocommerce-account .main, .evo-account-access) a.button { background: var(--jully-acao) !important; border-radius: var(--raio-1) !important; }
  /* Cartão de entrar/cadastrar: 6 px; abas retangulares de 2 px (eram pílulas). */
  #customer_login { border-radius: var(--raio-2) !important; }
  .evo-auth-tabs, .evo-auth-tab { border-radius: var(--raio-1) !important; }

  /* Checkout: campos e selects com 2 px; caixa do resumo com 6 px. */
  .wc-block-checkout :is(.wc-block-components-text-input input, .wc-blocks-components-select__container, .wc-blocks-components-select__select, .wc-block-components-combobox-control input) { border-radius: var(--raio-1) !important; }
  .wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block,
  .wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block { border-radius: var(--raio-2) !important; }
  /* Etapas e "Continuar": ação em Cinza 800. */
  .evo-checkout-step-tab.is-active .evo-checkout-step-tab__num { background: var(--jully-acao) !important; border-color: var(--jully-acao) !important; }
  .evo-checkout-continue { background: var(--jully-acao) !important; }
  .evo-checkout-continue:hover { background: var(--jully-acao-hover) !important; }
  /* CEP no resumo do carrinho: campo e botão com 2 px (o tema força 10 px). */
  .wp-block-woocommerce-cart-totals-block :is(.evo-cart-cep__input, .evo-cart-cep__btn) { border-radius: var(--raio-1) !important; }

  /* Checkout e carrinho: cantos de 2 px nos campos e no seletor de quantidade,
     6 px nas opções de frete e pagamento. */
  .wc-block-checkout .wc-block-components-textarea { border-radius: var(--raio-1) !important; }
  .wc-block-cart-items__row .wc-block-components-quantity-selector { border-radius: var(--raio-1) !important; }
  .wc-block-cart__submit-container .wc-block-components-button { border-radius: var(--raio-1) !important; }
  .wc-block-components-radio-control__option,
  .wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-option { border-radius: var(--raio-2) !important; }
  body.woocommerce-edit-address .woocommerce-Address { border-radius: var(--raio-2) !important; }
}

/* ==========================================================================
   16. PÁGINAS INSTITUCIONAIS · cards de ícone e painel de contato
   --------------------------------------------------------------------------
   Desde o tema 0.113.0 (#407) o ícone é a máscara de --evo-icone pintada na cor
   da marca: aqui só os ícones próprios da Jully e o de documento. Cards com
   cantos de 6 px (guia), sem sombra.
   ========================================================================== */
.evo-icon-card, .evo-contact-info { border-radius: var(--raio-2); border-color: var(--jully-cinza-200); }
.evo-icon-card { box-shadow: none; }
/* Card de dados da empresa: documento no lugar do relógio (o tema prevê "Horário de atendimento"). */
.evo-contact-info > p:nth-child(2) { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E"); }

/* Ícones próprios da Jully nos cards (home, Contato, Envio, Pagamento, Loja fechada). */
.evo-icon-card--jully-pronta { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16l2 2 4-4'/%3E%3Cpath d='M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14'/%3E%3Cpath d='M7.5 4.27l9 5.15'/%3E%3Cpath d='M3.29 7L12 12l8.71-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-encomenda { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-correios { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-transportadora { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-excursao { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6v6'/%3E%3Cpath d='M15 6v6'/%3E%3Cpath d='M2 12h19.6'/%3E%3Cpath d='M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Cpath d='M9 18h5'/%3E%3Ccircle cx='16' cy='18' r='2'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-credito { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-fotos { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-grade { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-fabrica { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-instagram { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }
.evo-icon-card--jully-troca { --evo-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 2v6h-6'/%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M3 22v-6h6'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3C/svg%3E"); }
/* Fileira de botões dentro do texto (página Trocas e Devoluções). */
.jully-acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem !important; }

/* ==========================================================================
   17. PRODUTO E COMPRA · grade, frete, avaliações, descrição, CEP do carrinho
   --------------------------------------------------------------------------
   Guia: 2 px em campo e botão, 6 px em caixa, filetes Cinza 200, cabeçalhos
   de tabela em Cinza 100. Ações secundárias (Calcular frete, OK, Avaliar) são
   contorno; o amarelo continua só no Comprar.
   ========================================================================== */
/* Grade de atacado ("Monte sua grade") */
.evg__panel { border-radius: var(--raio-2); border-color: var(--jully-cinza-200); }
.evg__title {
  color: var(--jully-preto);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evg-grid thead th { background: var(--jully-cinza-100); color: var(--jully-preto); font-weight: 600; }
.evg-grid :is(th, td) { border-color: var(--jully-cinza-200); }
.evg-cell .evg-qty { border-radius: var(--raio-1); border-color: var(--jully-cinza-600); }
.evg__foot { border-top-color: var(--jully-cinza-200); }
.evg__totals { color: var(--jully-cinza-600); }
/* Comprar desabilitado (grade zerada): Cinza 100 com texto Cinza 400, sem o
   amarelo desbotado do tema. */
body .evg__add:disabled { background: var(--jully-cinza-100); color: var(--jully-cinza-400); opacity: 1; cursor: not-allowed; }
/* Abas "Pronta entrega / Sob encomenda" da grade e aviso de encomenda (mínimo e prazo). */
.evg-tabs__head { border-radius: var(--raio-2); border-color: var(--jully-cinza-200); }
.evg-tabs__tab {
  border-radius: var(--raio-1);
  border-color: var(--jully-cinza-200);
  background: var(--jully-branco);
  color: var(--jully-cinza-800);
  font-weight: 600;
}
.evg-tabs__tab:hover { border-color: var(--jully-cinza-600); }
.evg-tabs__tab:is([aria-selected="true"], .is-active) { border-color: var(--jully-preto); background: var(--jully-cinza-100); color: var(--jully-preto); }
.evg-tabs__intro-text { color: var(--jully-cinza-600); }
.evg-enc { border-radius: var(--raio-2); border-color: var(--jully-cinza-200); background: var(--jully-cinza-100); }
.evg-enc__faixas summary { color: var(--jully-cinza-800); }

/* Simulador de frete na página do produto */
.evosim { border-radius: var(--raio-2); border-color: var(--jully-cinza-200); }
.evosim__cep, .evo-cart-cep__input { border-radius: var(--raio-1); border-color: var(--jully-cinza-600); }
.evosim__btn, .evo-cart-cep__btn {
  border-radius: var(--raio-1);
  background: transparent;
  color: var(--jully-acao);
  border: 1px solid var(--jully-acao);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evosim__btn:hover, .evo-cart-cep__btn:hover { background: var(--jully-acao); color: var(--jully-branco); }

/* Avaliações vazias: caixa de 6 px e "Seja o primeiro a avaliar" em contorno. */
.evo-rv-panel > .evo-rv-summary { border-radius: var(--raio-2); }
.evo-rv-summary__cta {
  border-radius: var(--raio-1);
  background: transparent;
  color: var(--jully-acao);
  border: 1px solid var(--jully-acao);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  text-transform: uppercase;
}
.evo-rv-summary__cta:hover { background: var(--jully-acao); color: var(--jully-branco); }

/* Descrição e informações: caixa de 6 px; texto em ~72 caracteres por linha
   (no desktop a linha chegava a 1.270 px). */
.evo-tab-item { border-radius: var(--raio-2); border-color: var(--jully-cinza-200); }
.evo-tab-item__panel > * { max-width: 45rem; }

/* Miniaturas da galeria e botão de filtros: foto sem canto, botão com 2 px. */
.evo-gallery__thumb { border-radius: 0; }
.evo-filters-trigger { border-radius: var(--raio-1); }

/* Aviso de esgotado no bloco do produto: 6 px como as outras caixas. */
.evo-oos { border-radius: var(--raio-2); }

/* ==========================================================================
   18. ENTRAR / CRIAR CONTA · popup, página Minha conta e recuperação de senha
   --------------------------------------------------------------------------
   Contraste: campo com borda Cinza 600 (5,55:1; a Cinza 200 dava 1,3:1), fundo
   branco, abas com sublinhado (as duas tinham quase o mesmo fundo) e links
   sublinhados. O azul do preenchimento automático do navegador vira branco.
   Em @layer base porque o tema usa !important em camada neste componente.
   ========================================================================== */
@layer base {
  .evo-account-modal__dialog { background: var(--jully-branco) !important; }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]) {
    border: 1px solid var(--jully-cinza-600) !important;
    color: var(--jully-preto) !important;
  }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"]):focus {
    border-color: var(--jully-preto) !important;
    box-shadow: 0 0 0 3px var(--jully-amarelo) !important;
  }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--jully-branco) inset !important;
    -webkit-text-fill-color: var(--jully-preto) !important;
  }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--jully-branco) inset, 0 0 0 3px var(--jully-amarelo) !important;
  }

  /* Abas: linha de base Cinza 200; ativa em preto com sublinhado de 2 px. */
  .evo-auth-tabs { background: transparent !important; border-bottom: 1px solid var(--jully-cinza-200) !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 1.5rem !important; }
  .evo-auth-tab {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--jully-cinza-600) !important;
    font-size: .8125rem !important;
    letter-spacing: var(--jully-tracking) !important;
    text-transform: uppercase;
  }
  .evo-auth-tab:hover { color: var(--jully-preto) !important; }
  .evo-auth-tab.is-active { color: var(--jully-preto) !important; box-shadow: inset 0 -2px 0 var(--jully-preto) !important; }

  /* Links do formulário ("Perdeu sua senha?", "Criar conta"): sublinhados. */
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) a:not(.button) { color: var(--jully-preto) !important; text-decoration: underline !important; text-underline-offset: 3px; }
  :is(.evo-account-modal, #customer_login, .evo-recover-shell) input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--jully-preto); }
  .evo-account-modal__close { border: 1px solid var(--jully-cinza-200) !important; color: var(--jully-preto) !important; }
  .evo-account-modal__close:hover { border-color: var(--jully-preto) !important; }
}

/* ==========================================================================
   19. HOME DA LOJA (06/11/2026) · banner e categorias
   --------------------------------------------------------------------------
   A home usa só blocos da Evolury (marca/scripts/home_loja.py); aqui, só o que
   os blocos não ajustam sozinhos.
   ========================================================================== */
/* Banner principal: foto da modelo com bolhas das outras estampas à direita dela,
   e o título (<h1>) com os botões ao lado. Blocos do WordPress (grupo + imagem). */
.jully-hero {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 2.5rem) var(--evo-container-pad, 1rem) 2.5rem;
  background: var(--jully-branco);
}
.evo-page-content > .jully-hero { margin-block: 0; }
.jully-hero > * { margin: 0 !important; }
@media (min-width: 1024px) {
  .jully-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    padding-inline: max(var(--evo-container-pad, 1rem), calc((100% - 1320px) / 2));
  }
}
/* A caixa da foto tem o tamanho da foto, para as bolhas se posicionarem pela modelo. */
.jully-hero__midia { position: relative; width: fit-content; max-width: 100%; margin-inline: auto !important; }
.jully-hero__foto { margin: 0; }
.jully-hero__foto img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(70vh, 540px); }
@media (min-width: 1024px) {
  .jully-hero__foto img { height: min(calc(100vh - 180px), 760px); max-height: none; }
}
/* Bolhas: círculo com borda branca e sombra leve, close na estampa (zoom no tronco). */
.jully-bolha {
  position: absolute;
  z-index: 1;
  width: clamp(56px, 7.5vw, 104px);
  aspect-ratio: 1;
  margin: 0 !important;
  overflow: hidden;
  border: 3px solid var(--jully-branco);
  border-radius: 50%;
  background: var(--jully-branco);
  box-shadow: 0 6px 18px rgb(10 10 10 / .16);
  transition: transform .2s ease;
}
.jully-bolha a { position: relative; display: block; width: 100%; height: 100%; }
/* Close na estampa: a foto com 2,6x a largura da bolha, o ponto de 34% da altura (o peito) no
   mesmo ponto da bolha. */
.jully-bolha img {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 260%;
  max-width: none;
  height: auto;
  translate: -50% -34%;
}
.jully-bolha:hover { transform: scale(1.06); }
.jully-bolha a:focus-visible { outline: 2px solid var(--jully-preto); outline-offset: 2px; border-radius: 50%; }
.jully-bolha--1 { top: 12%; right: 3%; }
.jully-bolha--2 { top: 32%; right: -2%; }
.jully-bolha--3 { top: 52%; right: 3%; }
.jully-bolha--4 { top: 72%; right: -2%; }
/* Melancias: a modelo está virada, o cabelo entrava na bolha; desce e desloca o close. */
.jully-bolha--2 img { top: 40%; left: 58%; translate: -50% -40%; }
@media (max-width: 1023px) {
  /* No celular a foto ocupa a largura toda: as bolhas não podem passar da borda. */
  .jully-bolha--2, .jully-bolha--4 { right: 1%; }
  .jully-bolha--1, .jully-bolha--3 { right: 6%; }
}
.jully-hero__texto { max-width: 560px; }
@media (max-width: 1023px) {
  .jully-hero__texto { margin-inline: auto !important; }
}
.jully-hero__texto > * { margin: 0 !important; }
.jully-hero__titulo { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.jully-hero__apoio { margin-top: 1rem !important; font-size: 1.125rem; line-height: 1.75rem; color: var(--jully-cinza-800); }
.jully-hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem !important; }
@media (max-width: 639px) {
  .jully-hero__acoes .evo-button { flex: 1 1 100%; }
}
/* Duas categorias: numa coluna central, para os cards não passarem de 560 x 750 px. */
.jully-categorias-home .evo-category-grid__list { max-width: 880px; margin-inline: auto; }
/* Passos "Como comprar": filete preto em cima, número em sobretítulo. */
.jully-passo { border-top: 1px solid var(--jully-preto); padding-top: 1.5rem; }
.jully-passo > * { margin: 0; }
.jully-passo__num {
  margin-bottom: 1rem !important;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: var(--jully-tracking);
  color: var(--jully-cinza-600);
}
.jully-passo__titulo { margin-bottom: .5rem !important; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
.jully-passo p:not(.jully-passo__num) { color: var(--jully-cinza-600); }
/* Newsletter: o botão (caixa alta, +12% de espaçamento) quebrava em 2 linhas no formulário de
   448 px e ficava mais alto que o campo. Uma linha só, mesma altura do campo. */
.evo-newsletter__form { align-items: stretch; }
.evo-newsletter__form .evo-button { flex-shrink: 0; white-space: nowrap; }
.evo-newsletter__input { min-height: 3rem; }

/* ==========================================================================
   20. CARRINHO EM CARTÕES (tema 0.117.0; revisto no 0.119.0, 08/11/2026)
   ========================================================================== */
/* Desde o tema 0.119.0 (mu 1.779.0), os cantos dos campos de quantidade e os nomes da venda
   cruzada em 2 linhas vêm do tema. Ficam aqui dois acertos dos campos (mini-carrinho e carrinho):
   - fundo branco, como o guia pede para campo e como a grade da página do produto: o tema usa a
     superfície da loja, que na Jully é areia;
   - no campo vazio, filete Cinza 600, como o da página do produto. O Cinza 200 do tema sobre o
     branco não chega ao contraste de 3:1 de um contorno de campo.
   O campo com peça (td.is-no-carrinho) segue o do tema: filete de 2 px em Cinza 800. O foco
   também segue o do tema. */
body .evo-mc-grade .evo-mc-tabela td .evo-mc-aberta__cel:not(:disabled),
body td.evg-aberta__celula .evg-aberta__qtd:not(:disabled) { background: var(--jully-branco); }
body .evo-mc-grade .evo-mc-tabela td:not(.is-no-carrinho) .evo-mc-aberta__cel:not(:disabled, :focus-visible),
body td.evg-aberta__celula:not(.is-no-carrinho) .evg-aberta__qtd:not(:disabled, :focus-visible) { border-color: var(--jully-cinza-600); }