@charset "UTF-8";
/* =========================================================================
   YLLIME — Pós-compra e conta
   Detalhes do pedido, pagamento pendente, meus pedidos, ver pedido e o
   painel da conta. Depende de cart.css (.cart-line) e checkout.css.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Selo de status
   ------------------------------------------------------------------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-1) var(--s-3);
  border:1px solid currentColor;
  border-radius:99px;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  white-space:nowrap;
}
/* A cor carrega significado: verde concluído, âmbar esperando, vermelho
   parado, cinza encerrado. */
.badge--completed{color:var(--c-success)}
.badge--processing{color:var(--c-green-700)}
.badge--on-hold,
.badge--pending{color:var(--c-warn)}
.badge--failed,
.badge--cancelled{color:var(--c-error)}
.badge--refunded{color:var(--c-muted)}


/* -------------------------------------------------------------------------
   Detalhes do pedido
   ------------------------------------------------------------------------- */
.order-detail{margin-top:var(--s-8);text-align:left}
.order-detail__title{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--s-4);
}

.order-lines{list-style:none;margin:0;padding:0;border-top:var(--hairline)}
.order-line{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:var(--s-4);
  align-items:center;
  padding-block:var(--s-4);
  border-bottom:1px solid var(--c-line-soft);
}

.order-line__media{position:relative;border:1px solid var(--c-line);background:var(--c-surface)}
/* Dentro da caixa: .ratio tem overflow:hidden e cortava o selo quando ele
   ficava para fora. */
.order-line__qty{
  position:absolute;
  top:4px;right:4px;
  min-width:20px;height:20px;
  padding:0 5px;
  display:grid;place-items:center;
  background:var(--c-green-700);
  color:#fff;
  font-size:11px;
  line-height:1;
  border-radius:10px;
}

.order-line__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.order-line__name{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
  line-height:var(--lh-snug);
}
.order-line__name a:hover{color:var(--c-green-700)}
.order-line__body .wc-item-meta,
.order-line__body .variation{
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--t-xs);
  color:var(--c-muted);
}
.order-line__body .wc-item-meta p,
.order-line__body .variation p{margin:0;max-width:none}
.order-line__note{font-size:var(--t-xs);color:var(--c-muted)}
.order-line__total{font-size:var(--t-sm);color:var(--c-ink)}

.order-totals-list{margin-top:var(--s-5)}
.order-totals-list .cart-line--strong{
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--c-line);
  font-size:var(--t-base);
}
.order-totals-list .cart-line--strong span:last-child{color:var(--c-ink);font-weight:500}

.order-detail__note{
  margin-top:var(--s-5);
  padding:var(--s-4);
  background:var(--c-canvas);
  border-left:2px solid var(--c-line);
}
.order-detail__note-label{
  display:block;
  margin-bottom:var(--s-1);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.order-detail__note p{margin:0;font-size:var(--t-sm)}


/* -------------------------------------------------------------------------
   Endereços
   ------------------------------------------------------------------------- */
.order-addresses{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-6);
  margin-top:var(--s-8);
  text-align:left;
}
.order-address address{
  font-style:normal;
  font-size:var(--t-sm);
  line-height:var(--lh-loose);
  color:var(--c-body);
}
.order-address__line{display:block}
.order-address a{color:var(--c-green-700);text-decoration:underline;text-underline-offset:.2em}

@media (max-width:640px){
  .order-addresses{grid-template-columns:1fr;gap:var(--s-5)}
}


/* -------------------------------------------------------------------------
   Pagamento pendente
   ------------------------------------------------------------------------- */
.pay__head{max-width:56ch;margin:0 auto var(--s-8);text-align:center}
.pay__mark{
  display:grid;place-items:center;
  width:60px;height:60px;
  margin:0 auto var(--s-5);
  border-radius:50%;
  background:#FBF3E8;
  border:1px solid var(--c-warn);
  color:var(--c-warn);
}
.pay__head h1{font-size:var(--t-xl);margin-bottom:var(--s-3)}
.pay__head .lead{margin-inline:auto;text-wrap:balance}

.pay__grid{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:var(--s-8);
  align-items:start;
}
.pay__main{min-width:0}
.pay__aside{position:sticky;top:calc(84px + var(--s-5))}

@media (max-width:1024px){
  .pay__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .pay__aside{position:static;order:-1}
}


/* -------------------------------------------------------------------------
   Área da conta
   ------------------------------------------------------------------------- */
/*
 * :not(.yllime-auth) porque entrar, criar conta e recuperar senha também
 * carregam a classe woocommerce-account — o plugin as declara como página
 * de conta para o WooCommerce. Sem a exclusão, a grade de duas colunas do
 * painel se aplicava a um formulário que não tem barra lateral nenhuma.
 */
.woocommerce-account:not(.yllime-auth) .woocommerce{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:var(--s-8);
  align-items:start;
}

.account-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.account-nav__item a{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-sm);
  color:var(--c-muted);
  border-left:2px solid transparent;
  transition:color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.account-nav__item a:hover{background:var(--c-canvas);color:var(--c-ink)}
.account-nav__item svg{flex:none;stroke-width:1.3}
.account-nav__item.is-active a{
  background:var(--c-canvas);
  border-left-color:var(--c-green-700);
  color:var(--c-ink);
}
.account-nav__item--customer-logout a{color:var(--c-faint)}
.account-nav__item--customer-logout a:hover{color:var(--c-error)}

@media (max-width:900px){
  .woocommerce-account:not(.yllime-auth) .woocommerce{grid-template-columns:1fr;gap:var(--s-6)}
  .account-nav__list{
    flex-direction:row;
    overflow-x:auto;
    scrollbar-width:none;
    border-bottom:var(--hairline);
  }
  .account-nav__list::-webkit-scrollbar{display:none}
  .account-nav__item a{
    white-space:nowrap;
    border-left:0;
    border-bottom:2px solid transparent;
  }
  .account-nav__item.is-active a{border-left:0;border-bottom-color:var(--c-green-700)}
}


/* ---- Painel ---- */
.account-dash__hello{font-size:var(--t-md);margin-bottom:var(--s-6)}
/*
 * Três colunas fixas, e não auto-fit.
 *
 * São cinco atalhos: com auto-fit a linha cabia quatro e sobrava um sozinho
 * na segunda, além de espremer "Comparar produtos" em duas linhas. Três por
 * linha fecham 3 + 2, e cada cartão ganha largura para o rótulo caber inteiro.
 */
.account-dash__grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
}
@media (max-width:900px){.account-dash__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.account-dash__grid{grid-template-columns:1fr}}
.account-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  height:100%;
  padding:var(--s-5);
  border:1px solid var(--c-line);
  transition:border-color var(--dur-fast) var(--ease);
}
.account-card:hover{border-color:var(--c-green-700)}
.account-card__icon{color:var(--c-green-700)}
.account-card__label{font-size:var(--t-sm);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--c-ink)}
.account-card__text{font-size:var(--t-xs);color:var(--c-muted)}


/* ---- Meus pedidos ---- */
.orders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-4)}

.order-card{
  padding:var(--s-5);
  border:1px solid var(--c-line);
  background:var(--c-surface);
}
.order-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--c-line-soft);
}
.order-card__number{font-size:var(--t-sm);color:var(--c-muted)}
.order-card__number strong{color:var(--c-ink);font-weight:500}

.order-card__facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-4);
  margin:var(--s-4) 0 0;
}
.order-card__facts dt{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:2px;
}
.order-card__facts dd{margin:0;font-size:var(--t-sm);color:var(--c-ink)}

.order-card__thumbs{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.order-card__thumb{
  width:48px;
  flex:none;
  border:1px solid var(--c-line-soft);
  background:var(--c-canvas);
}

.order-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--c-line-soft);
}

.orders__pagination{display:flex;gap:var(--s-3);margin-top:var(--s-5)}

@media (max-width:640px){
  .order-card__facts{grid-template-columns:repeat(2,1fr)}
}


/* ---- Ver pedido ---- */
.order-view__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
  padding-bottom:var(--s-5);
  border-bottom:var(--hairline);
}
.order-view__number{font-size:var(--t-lg);margin-bottom:2px}

.order-view__pending{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
  margin-top:var(--s-5);
  padding:var(--s-4) var(--s-5);
  background:#FBF3E8;
  border-left:3px solid var(--c-warn);
}
.order-view__pending p{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin:0;
  max-width:none;
  font-size:var(--t-sm);
  color:#6b4d17;
}
.order-view__pending svg{flex:none;color:var(--c-warn)}

/* ---- Linha do tempo ---- */
.timeline{margin-top:var(--s-7)}
.timeline__list{list-style:none;margin:0;padding:0}
.timeline__item{
  position:relative;
  padding:0 0 var(--s-5) var(--s-6);
  border-left:1px solid var(--c-line);
}
.timeline__item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline__dot{
  position:absolute;
  left:-4.5px;top:5px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--c-green-700);
}
.timeline__date{
  display:block;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--s-1);
}
.timeline__text p{margin:0;font-size:var(--t-sm);color:var(--c-body);max-width:60ch}


/* ---- Vazio ---- */
.account-empty{
  padding:var(--s-8) var(--s-5);
  border:1px dashed var(--c-line);
  text-align:center;
}
.account-empty__icon{display:block;color:var(--c-line);margin-bottom:var(--s-4)}
.account-empty__title{font-size:var(--t-lg);color:var(--c-ink);margin-bottom:var(--s-2)}
.account-empty p{max-width:none}
.account-empty .btn{margin-top:var(--s-5)}


/* -------------------------------------------------------------------------
   Formulários da conta
   Mesma altura de controle e mesma grade do checkout.
   ------------------------------------------------------------------------- */
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper,
.woocommerce-form-login,
.woocommerce-form-register{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s-4);
  max-width:640px;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row{grid-column:span 12;max-width:none}

/* O fieldset e a legenda estão mais abaixo, junto do bloco de troca de senha. */

/* Os cartões de endereço estão logo abaixo, com as demais telas internas. */


/* -------------------------------------------------------------------------
   Telas internas — título, endereços e botões
   ------------------------------------------------------------------------- */
.account-title{
  font-size:var(--t-xl);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
  color:var(--c-ink);
  margin-bottom:var(--s-4);
}

/* A frase que explica a tela, logo abaixo do título. */
.account-lead{
  margin:0 0 var(--s-6);
  max-width:56ch;
  color:var(--c-muted);
  font-size:var(--t-sm);
}

/* O <h3> que o WooCommerce imprime no formulário de endereço. */
.woocommerce-address-fields h3,
.woocommerce-MyAccount-content form > h3,
.woocommerce-MyAccount-content > h3{
  font-size:var(--t-xl);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
  color:var(--c-ink);
  margin-bottom:var(--s-6);
}

.woocommerce-MyAccount-content > p:first-of-type{
  margin-bottom:var(--s-6);
  color:var(--c-muted);
  font-size:var(--t-sm);
}

/* ---- Os dois cartões de endereço ---- */
.woocommerce-Addresses{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--grid-gap);
}
@media (max-width:760px){.woocommerce-Addresses{grid-template-columns:1fr}}

.woocommerce-Address{
  padding:var(--s-5);
  border:var(--hairline);
}
.woocommerce-Address-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--c-line-soft);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin:0;
}
.woocommerce-Address-title .edit{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-green-700);
  border-bottom:1px solid currentColor;
  white-space:nowrap;
}
.woocommerce-Address address{
  font-style:normal;
  font-size:var(--t-sm);
  line-height:var(--lh-base);
  color:var(--c-body);
}
.woocommerce-Address p{font-size:var(--t-sm);color:var(--c-muted);margin:0;max-width:none}

/* ---- Botão de salvar das telas de conta ---- */
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"]{
  width:auto;
  min-width:220px;
  height:var(--control-h);
  margin-top:var(--s-6);
  padding-inline:var(--s-6);
  border:0;
  background:var(--c-green-700);
  color:#FFFFFF;
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover{background:var(--c-ink)}

/* ---- Bloco de troca de senha ----

   Sem filete no fieldset. O navegador desenha a borda dele recortando um
   vão para o <legend>, e o resultado é uma linha atravessando o texto —
   comportamento antigo do HTML que nenhum grid-column desarma. O que separa
   o bloco é o espaço, como no checkout, onde os títulos fazem o mesmo papel
   sem precisar de traço. */
.woocommerce-EditAccountForm fieldset{
  grid-column:span 12;
  margin-top:var(--s-7);
  padding:0;
  border:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s-4);
}
/*
 * Sendo o fieldset uma grade, o <legend> vira item de grade e perde o
 * comportamento especial de ficar montado sobre a borda — que era o que
 * fazia o filete atravessar o texto "Trocar a senha".
 *
 * Mas item de grade sem coluna definida ocupa uma das doze: medido, a
 * legenda saiu com 53px de largura num fieldset de 640 e quebrou em três
 * linhas. Daí o 1 / -1.
 */
.woocommerce-EditAccountForm legend{
  grid-column:1 / -1;
  padding:0;
  margin-bottom:var(--s-4);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}

/* Nome e sobrenome dividem a linha, como no checkout. */
.woocommerce-EditAccountForm > .form-row-first,
.woocommerce-EditAccountForm > .form-row-last{grid-column:span 6}
@media (max-width:640px){
  .woocommerce-EditAccountForm > .form-row-first,
  .woocommerce-EditAccountForm > .form-row-last{grid-column:span 12}
}


/* =========================================================================
   FORMULÁRIOS DO WOOCOMMERCE — grade, controles e select2

   Nasceu no checkout e mudou para cá: são os mesmos campos em três telas —
   finalizar compra, editar endereço e editar dados da conta. O mesmo plugin
   de campos brasileiros os monta nas três, com os mesmos ids. Deixar em
   checkout.css obrigaria a copiar tudo para a conta, e duas cópias da mesma
   regra divergem na primeira correção que só uma delas receber.

   account.css carrega na conta e no checkout — é o lugar que alcança as três.
   ========================================================================= */

/*
 * Grade de 12 colunas.
 *
 * Com duas colunas, um campo de meia largura seguido de um de largura cheia
 * deixava meia linha vazia — o CEP sozinho à esquerda, um buraco à direita.
 * Doze colunas permitem dar a cada campo a largura que o conteúdo pede
 * (CEP 4, Endereço 8) e fechar todas as linhas.
 *
 * O padrão é largura cheia: campo que este tema não conhece — de plugin novo,
 * por exemplo — entra ocupando a linha, que é o comportamento seguro.
 */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--s-4);
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin:0;
  min-width:0;
  grid-column:span 12;
  /*
   * O WooCommerce monta cada linha como <p>, e a medida de leitura global
   * (p{max-width:68ch}) cortava as linhas de largura cheia em 608px dentro
   * de uma coluna de 736 — o campo de e-mail e o de país ficavam mais
   * estreitos que a soma dos pares ao lado. Aqui não se lê texto corrido.
   */
  max-width:none;
}

/*
 * Meia linha. A ordem dos campos vem do WooCommerce, e os pares abaixo
 * fecham todas as linhas: país+CEP, bairro+cidade, estado+telefone.
 */
#billing_first_name_field, #shipping_first_name_field,
#billing_last_name_field,  #shipping_last_name_field,
#billing_persontype_field, #billing_cpf_field, #billing_cnpj_field,
#billing_birthdate_field,  #billing_gender_field, #billing_sex_field,
#billing_company_field,
#billing_country_field,  #shipping_country_field,
#billing_postcode_field, #shipping_postcode_field,
#billing_neighborhood_field, #shipping_neighborhood_field,
#billing_city_field,  #shipping_city_field,
#billing_state_field, #shipping_state_field,
#billing_phone_field, #billing_cellphone_field{
  grid-column:span 6;
}

/* A rua fica com o grosso da linha; o número é curto. */
#billing_address_1_field, #shipping_address_1_field{grid-column:span 8}
#billing_number_field,    #shipping_number_field{grid-column:span 4}

@media (max-width:640px){
  .form-row,
  .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-shipping-fields__field-wrapper > .form-row{grid-column:span 12}
}


/* -------------------------------------------------------------------------
   Controles
   Bloco com especificidade alta de propósito: o plugin de campos brasileiros
   zera o padding de alguns selects, e a diferença aparecia como 52px de
   input contra 48px de select na mesma linha.
   ------------------------------------------------------------------------- */
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row input:not([type="checkbox"]):not([type="radio"]),
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row select,
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row textarea{
  width:100%;
  height:var(--control-h);
  padding:0 var(--s-4);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background-color:var(--c-surface);
  color:var(--c-ink);
  font-size:var(--t-base);
  line-height:normal;
  box-shadow:none;
}
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row textarea{
  height:auto;
  min-height:110px;
  padding-block:var(--s-3);
  line-height:var(--lh-base);
}

:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:var(--s-7);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235F6A5C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--s-4) center;
  background-size:12px 8px;
}

:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row input:focus,
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row select:focus,
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row textarea:focus{border-color:var(--c-green-700);outline:none}
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row input:focus-visible,
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row select:focus-visible,
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row textarea:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px}

/* -------------------------------------------------------------------------
   select2
   O WooCommerce e o plugin de campos brasileiros trocam tipo de pessoa,
   gênero, país e estado por um widget do select2. O <select> real fica com
   1px de altura, escondido — o que se vê é este widget, e é ele que precisa
   parecer com os outros campos.
   ------------------------------------------------------------------------- */
/*
 * O container precisa de altura e largura próprias.
 *
 * Ele estava com 48px enquanto a caixa interna tinha 52, e o campo ao lado
 * na mesma linha ficava 4px mais alto. A largura vem inline do JavaScript do
 * select2 e congela no valor do carregamento — daí o !important, que aqui é
 * a única forma de vencer um atributo style.
 */
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .form-row .select2-container{
  display:block;
  width:100%!important;
  height:var(--control-h);
}

:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default .select2-selection--single{
  height:var(--control-h);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:var(--c-surface);
}
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default .select2-selection__rendered{
  line-height:calc(var(--control-h) - 2px);
  padding-left:var(--s-4);
  padding-right:var(--s-7);
  color:var(--c-ink);
  font-size:var(--t-base);
}
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default .select2-selection__placeholder{color:var(--c-faint)}

/* Fora o triângulo do select2; entra o mesmo chevron dos selects nativos. */
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default .select2-selection__arrow{
  height:calc(var(--control-h) - 2px);
  width:var(--s-7);
  right:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235F6A5C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 8px;
}
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default .select2-selection__arrow b{display:none}

:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default.select2-container--open .select2-selection--single,
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--c-green-700);
}
:is(.checkout, .woocommerce-address-fields, .woocommerce-EditAccountForm) .select2-container--default.select2-container--open .select2-selection__arrow{rotate:180deg}

/* Menu que abre */
.select2-container--default .select2-dropdown{
  border:1px solid var(--c-green-700);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(28,27,25,.08);
}
.select2-container--default .select2-results__option{
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-sm);
  color:var(--c-body);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{
  background:var(--c-green-50);
  color:var(--c-ink);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"]{
  background:var(--c-green-700);
  color:#fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  height:44px;
  padding:0 var(--s-3);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  font-size:var(--t-sm);
}

.form-row label{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.form-row label .required{color:var(--c-error);text-decoration:none;border:0}
.form-row .optional{color:var(--c-faint);text-transform:none;letter-spacing:normal}

.form-row .description,
.form-row small{font-size:var(--t-xs);color:var(--c-muted);line-height:1.45}

/* Validação do WooCommerce */
.woocommerce-invalid input,
.woocommerce-invalid select,
.woocommerce-invalid .select2-selection{border-color:var(--c-error)!important}
.woocommerce-validated input,
.woocommerce-validated select{border-color:var(--c-line)}

/* Caixas de "enviar para outro endereço" e "criar conta" */
.woocommerce-shipping-fields__field-wrapper{margin-top:var(--s-4)}
#ship-to-different-address{margin:var(--s-6) 0 0}

/* O bloco de observações colava no checkbox de endereço diferente. */
.woocommerce-additional-fields{margin-top:var(--s-6)}
#ship-to-different-address label,
.woocommerce-account-fields label.checkbox{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font-size:var(--t-sm);
  letter-spacing:normal;
  text-transform:none;
  color:var(--c-ink);
  cursor:pointer;
}
#ship-to-different-address input,
.woocommerce-account-fields input[type=checkbox]{width:auto;min-height:0;flex:none}

@media (max-width:560px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper,
  .woocommerce-EditAccountForm{grid-template-columns:1fr}
}