/* =========================================================================
   TERRALMA — WooCommerce
   Loja, categoria, produto, carrinho, checkout, minha conta, busca, 404.
   ========================================================================= */

/* Reset de elementos padrão do WooCommerce que não usaremos --------------- */
.woocommerce-breadcrumb{ all: unset; }
.woocommerce ul.products{ list-style: none; margin: 0; padding: 0; }

/* MENSAGENS ---------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  list-style: none; margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  font-size: var(--fs-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap;
}
.woocommerce-message{ border-color: var(--color-olive); }
.woocommerce-error{ border-color: var(--color-error); color: var(--color-error); }
.woocommerce-message a.button, .woocommerce-error a.button{ order: 2; }
.woocommerce-error li{ list-style: none; }

/* LOJA / CATEGORIA ----------------------------------------------------------- */
/* Mesmo motivo da página de produto: o respiro de .section (até 132px) é do ritmo
   editorial da Home e aqui só afasta o conteúdo do cabeçalho. */
.shop-page{ padding-top: clamp(28px, 3vw, 48px); }
.shop-header{ margin-bottom: var(--space-lg); }
.shop-header-media{ margin-bottom: var(--space-lg); aspect-ratio: 16/6; overflow: hidden; }
.shop-header-media img{ width: 100%; height: 100%; object-fit: cover; }
/* Título de categoria não é hero: em fs-3xl a palavra sozinha dominava a página. */
.shop-header .page-title{ font-size: var(--fs-2xl); margin-bottom: var(--space-2xs); }
.shop-description{ max-width: 640px; color: var(--color-text-muted); }
.shop-description:empty{ display: none; }
.shop-toolbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap;
}
.shop-result-count{ font-size: var(--fs-sm); color: var(--color-text-muted); margin-right: auto; }
.shop-result-count p{ margin: 0; }
.shop-toolbar-right{ display: flex; gap: var(--space-sm); align-items: center; }
.shop-filter-toggle{ display: none; }
.shop-filters-heading{ display: none; }
.shop-filter-close{
  appearance: none; border: 0; background: transparent; color: var(--color-text);
  font-size: 32px; line-height: 1; padding: 4px; cursor: pointer;
}
/* O select vinha sem borda e sem fundo, parecendo texto solto: ao abrir, a lista do
   navegador surgia "do nada", sem um campo de origem visível. Com aparência de campo
   (borda, fundo, seta própria) a lista passa a se ancorar nele.
   A lista aberta em si é desenhada pelo sistema operacional e não aceita CSS. */
.woocommerce-ordering select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: auto; min-width: 230px; padding: .7em 2.6em .7em 1em;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767166' stroke-width='1.8' 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 12px center; background-size: 16px;
  font-size: var(--fs-sm); color: var(--color-text); cursor: pointer;
  transition: border-color var(--transition-fast);
}
.woocommerce-ordering select:hover{ border-color: var(--color-charcoal); }

.shop-layout{ display: grid; grid-template-columns: 260px 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 900px){
  .shop-layout{ grid-template-columns: 1fr; }
  .shop-filters{ display: none; position: fixed; inset: 0; z-index: 1100; background: var(--color-bg); padding: var(--space-md); overflow-y: auto; }
  .shop-filters.is-open{ display: block; }
  .shop-filter-toggle{ display: inline-flex; }
  .shop-filters-heading{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
  body.shop-filters-open{ overflow: hidden; }
}
/* Filete separando cada grupo. :last-of-type é o último .filter-group (os irmãos
   seguintes são o botão e o link de limpar), então o último grupo não ganha linha. */
.filter-group{ margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.filter-group:last-of-type{ margin-bottom: var(--space-lg); padding-bottom: 0; border-bottom: 0; }
/* margin: 0 no topo — a regra global de tipografia cobre só h1..h4, então o h5 ficava
   com a margem superior padrão do navegador (~1,67em) e derrubava a sidebar inteira
   alguns pixels abaixo da coluna de produtos. */
.filter-group h5{ font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: 0 0 var(--space-sm); }
.filter-accordion-toggle{
  appearance: none; width: 100%; border: 0; padding: 0; background: transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-xs);
  font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  cursor: pointer; text-align: left;
}
.filter-accordion-icon{ width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.filter-accordion.is-open .filter-accordion-icon{ transform: rotate(225deg); }
.filter-accordion-panel{ display: none; padding-top: var(--space-sm); }
.filter-accordion.is-open .filter-accordion-panel{ display: block; }
.filter-group ul{ list-style: none; }
.filter-group li{ margin-bottom: var(--space-2xs); }
.filter-group label{ display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--fs-sm); cursor: pointer; margin-bottom: 0; }
/* Caixa de seleção própria: a nativa vem no azul do sistema e destoa da paleta.
   appearance:none remove o desenho do navegador; o "v" é um pseudo-elemento com
   clip-path, sem imagem nem fonte de ícones. */
.filter-group input[type="checkbox"]{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 18px; height: 18px; flex: 0 0 18px; margin: 0;
  display: inline-grid; place-content: center;
  border: 1px solid var(--color-border-strong); border-radius: 2px;
  background: var(--color-surface); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.filter-group input[type="checkbox"]::before{
  content: ''; width: 10px; height: 10px; background: #fff;
  transform: scale(0); transition: transform .12s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.filter-group input[type="checkbox"]:checked{ background: var(--color-olive); border-color: var(--color-olive); }
.filter-group input[type="checkbox"]:checked::before{ transform: scale(1); }
.filter-group label:hover input[type="checkbox"]:not(:checked){ border-color: var(--color-charcoal); }
.filter-group input[type="checkbox"]:focus-visible{ outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filter-price-values, .filter-price-limits{ display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: var(--fs-xs); }
.filter-price-values{ margin-bottom: 16px; color: var(--color-text); }
.filter-price-values span:nth-child(2){ color: var(--color-text-muted); }
.filter-price-limits{ margin-top: 8px; color: var(--color-text-muted); }
.filter-price-range{ --range-start: 0%; --range-end: 100%; position: relative; height: 20px; }
.filter-price-track{ position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(to right, var(--color-border-strong) 0 var(--range-start), var(--color-terracotta) var(--range-start) var(--range-end), var(--color-border-strong) var(--range-end) 100%); }
.filter-price-range input[type="range"]{ appearance: none; -webkit-appearance: none; position: absolute; inset: 0; width: 100%; height: 20px; margin: 0; background: transparent; pointer-events: none; }
.filter-price-range input[type="range"]::-webkit-slider-runnable-track{ height: 2px; background: transparent; }
.filter-price-range input[type="range"]::-webkit-slider-thumb{ appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border: 2px solid var(--color-terracotta); border-radius: 50%; background: var(--color-bg); cursor: grab; pointer-events: auto; }
.filter-price-range input[type="range"]::-moz-range-track{ height: 2px; background: transparent; }
.filter-price-range input[type="range"]::-moz-range-thumb{ width: 16px; height: 16px; border: 2px solid var(--color-terracotta); border-radius: 50%; background: var(--color-bg); cursor: grab; pointer-events: auto; }
.filter-price-range input[type="range"]:focus-visible::-webkit-slider-thumb{ outline: 2px solid var(--color-focus); outline-offset: 2px; }
.filter-clear{ font-size: var(--fs-xs); text-decoration: underline; color: var(--color-text-muted); }

ul.products, .product-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* A Home usa 3 colunas (6 produtos = 2 fileiras cheias); a loja segue em 4, conforme
   loop_shop_columns em inc/woocommerce.php. São grades diferentes de propósito. */
.product-grid{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ ul.products, .product-grid{ grid-template-columns: repeat(2, 1fr); } }
/* Uma coluna no celular: em duas, o card fica com ~150px de largura e a foto do
   produto, o nome e o preço deixam de ser legíveis. */
@media (max-width: 640px){
  ul.products, .product-grid, ul.products.columns-3{ grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Card de produto — igual ao .product-card do modelo de referência */
.product-card{ background: var(--color-offwhite); border: 1px solid var(--color-border); }
.product-visual{ aspect-ratio: 4/5; position: relative; background: var(--color-cream); overflow: hidden; display: block; }
.product-visual img{ transition: opacity var(--transition-slow); width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.product-visual .img-secondary{ opacity: 0; }
.product-card:hover .img-secondary{ opacity: 1; }
.product-card:hover .img-primary{ opacity: 0; }
.product-visual.is-illustrated{ display: flex; align-items: center; justify-content: center; }
.product-visual.is-illustrated .mini-candle{
  position: relative; width: 110px; height: 155px; border-radius: 4px 4px 10px 10px;
  background: rgba(242,231,215,.9); box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.product-visual.is-illustrated .mini-candle::after{
  content: "TERRALMA"; position: absolute; left: 8px; right: 8px; top: 44px; padding: 10px 3px;
  background: rgba(255,255,255,.8); color: #333; text-align: center; font: 10px var(--font-display); letter-spacing: .1em;
}
.product-card-badges{ position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.product-card-badges .badge{
  position: static; background: rgba(246,240,232,.94); color: var(--color-charcoal);
  padding: 6px 9px; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; border-radius: 0;
}
.product-info{ padding: 18px; }
.product-info h3{ font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 3px; font-weight: 400; }
.product-info h3 a{ color: var(--color-charcoal); }
.product-info p{ font-size: .78rem; color: var(--color-text-muted); margin: 0; }
.price{ display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-weight: 600; }
.price del{ color: var(--color-text-muted); margin-right: var(--space-2xs); opacity: 0.7; font-weight: 400; }
.price ins{ text-decoration: none; }
.add{
  width: 34px; height: 34px; border: 1px solid var(--color-charcoal); border-radius: 50%; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; line-height: 1;
  color: var(--color-charcoal); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.add:hover{ background: var(--color-charcoal); color: #fff; }
.add.is-disabled{ opacity: .4; cursor: not-allowed; }
.add.loading{ opacity: .6; }

/* PÁGINA DE PRODUTO — igual ao modelo terralma-produto.html ----------------------- */
/* O respiro editorial do .section (até 132px) foi pensado para as seções da Home.
   Na página de produto ele vira um vão vazio entre o cabeçalho e o breadcrumb —
   aqui o conteúdo já entra denso, então o topo é bem menor (o rodapé mantém o respiro). */
.section-product{ padding-top: clamp(28px, 3vw, 48px); padding-bottom: clamp(40px, 5vw, 72px); }

.product-hero{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; margin-bottom: var(--space-2xl); }
/* A coluna da direita é sempre mais alta que a galeria: no desktop a imagem acompanha
   a rolagem para as duas colunas terminarem visualmente juntas. */
@media (min-width: 1025px){
  .product-hero-gallery{ position: sticky; top: calc(var(--header-height) + var(--space-md)); }
}
@media (max-width: 1024px){ .product-hero{ grid-template-columns: 1fr; gap: var(--space-lg); } }

/* Galeria: imagem principal com selos sobrepostos + miniaturas em grade abaixo */
.gallery-wrap{ display: grid; gap: 16px; }
.main-media{ position: relative; border: 1px solid var(--color-border); background: var(--color-cream); aspect-ratio: 4/4.6; overflow: hidden; }
.main-media-slide{ position: absolute; inset: 0; }
.main-media img{ width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.main-media img.is-zoomed{ cursor: zoom-out; }
.discount-tag, .best-seller-tag{
  position: absolute; top: 16px; z-index: 2; padding: 8px 12px; border-radius: 2px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.best-seller-tag{ left: 16px; background: rgba(80,86,65,.95); }
.discount-tag{ right: 16px; background: rgba(189,161,122,.95); }
.thumbs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.thumb{
  border: 1px solid var(--color-border); background: var(--color-cream); aspect-ratio: 1/1.05;
  padding: 0; overflow: hidden; cursor: pointer; transition: .25s border-color, .25s transform;
}
.thumb img{ width: 100%; height: 100%; object-fit: cover; }
.thumb.active, .thumb:hover{ border-color: var(--color-olive); transform: translateY(-1px); }
@media (max-width: 640px){ .thumbs{ grid-template-columns: repeat(4, 1fr); gap: 8px; } }

.product-summary{ position: relative; }
.product-summary .eyebrow{ font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-olive); font-weight: 700; margin: 0; }
/* 48px no desktop (o h1 global vai até 4,6rem/73px, grande demais para um nome de
   produto que costuma ocupar três linhas). O clamp só reduz em telas estreitas. */
.product-summary .title{ font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); margin: 10px 0 8px; }
.product-summary-tagline.subtitle{ font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-text-muted); margin: 0 0 var(--space-md); line-height: 1.45; font-style: normal; }
.product-summary .price{ font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 600; margin-bottom: 0; display: block; }
.product-summary .price del{ font-size: 0.55em; opacity: 0.6; margin-right: var(--space-2xs); font-family: var(--font-body); text-decoration: line-through; }
.product-installments.installments{ font-size: var(--fs-xs); color: var(--color-text-muted); margin: var(--space-2xs) 0 var(--space-md); }

/* Selos (pills) abaixo do título -------------------------------------------- */
.product-summary .badges{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-sm); }
.product-summary .badges .badge{
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; padding: 8px 10px;
  border: 1px solid var(--color-olive); color: var(--color-olive); border-radius: 999px;
  background: #fff; font-weight: 400;
}
.product-summary .badges .badge.hot{ background: var(--color-terracotta); color: #fff; border-color: var(--color-terracotta); }

/* Caixa de urgência (avisos de procura/lote) -------------------------------- */
.urgency-box{ background: #FFF5EE; border: 1px solid #EFCFBF; padding: 15px 16px; margin: var(--space-md) 0 var(--space-sm); }
.urgency-item{ display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; color: #5A534B; }
.urgency-item .icon{ width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--color-terracotta-dark); }
.urgency-item + .urgency-item{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed #E2C8BA; }
.urgency-item b{ color: var(--color-terracotta-dark); }

/* Estoque em destaque (barra de escassez) ----------------------------------- */
.stock{ font-size: var(--fs-sm); color: var(--color-text); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.stock-dot{ width: 8px; height: 8px; background: var(--color-terracotta); border-radius: 50%; flex-shrink: 0; }
.progress{ height: 6px; background: var(--color-cream); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-md); }
.progress span{ display: block; height: 100%; background: var(--color-terracotta); }
.product-stock-status{ font-size: var(--fs-sm); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-2xs); }
.product-stock-status.in-stock{ color: var(--color-olive-dark); }
.product-stock-status.out-of-stock{ color: var(--color-error); }

/* "Pessoas vendo agora" (prova social simulada, calculada só via JS) -------- */
.viewers-now{ display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.viewers-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--color-olive); flex-shrink: 0; animation: terralma-viewers-pulse 1.8s ease-in-out infinite; }
@keyframes terralma-viewers-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }
.viewers-now [data-viewers-count]{ font-weight: 600; color: var(--color-text); }

/* Caixa de compra: quantidade + adicionar + favoritos ----------------------- */
.buybox{ margin-top: var(--space-md); }
.buybox form.cart{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.buybox .quantity{ flex: 0 0 auto; height: 54px; }
.buybox .quantity .qty{ height: 54px; }
.buybox .qty-btn{ height: 54px; }
.buybox .single_add_to_cart_button{
  flex: 1; min-width: 160px; height: 54px; background: var(--color-olive); color: #fff; border: 0;
  font-weight: 700; letter-spacing: .04em; padding: 0 18px; text-transform: none; cursor: pointer;
  transition: background-color .2s ease;
}
.buybox .single_add_to_cart_button:hover{ background: var(--color-olive-dark); }
.buybox .single_add_to_cart_button.disabled{ background: var(--color-text-muted); cursor: not-allowed; }
.wish{
  width: 54px; height: 54px; border: 1px solid var(--color-border-strong); background: #fff;
  display: grid; place-items: center; color: var(--color-text-muted); flex-shrink: 0; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.wish .icon{ width: 20px; height: 20px; }
.wish[aria-pressed="true"]{ color: var(--color-terracotta); border-color: var(--color-terracotta); }
.wish[aria-pressed="true"] .icon{ fill: currentColor; }
/* No celular os três controles somavam mais que a largura da tela e o favoritos
   caía sozinho para a linha de baixo. Aqui tudo encolhe o suficiente para caber
   numa linha só: o botão principal absorve o espaço que sobra. */
@media (max-width: 560px){
  .buybox form.cart{ flex-wrap: nowrap; gap: 8px; }
  .buybox .quantity,
  .buybox .quantity .qty,
  .buybox .qty-btn,
  .buybox .single_add_to_cart_button{ height: 48px; }
  .buybox .quantity .qty{ width: 34px; }
  .buybox .qty-btn{ width: 30px; }
  .buybox .single_add_to_cart_button{ flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: .82rem; }
  .wish{ width: 48px; height: 48px; flex: 0 0 48px; }
}
.microcopy{ font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 10px; }
.countdown{ display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); margin-top: 10px; color: var(--color-text-muted); }
.countdown .icon{ width: 16px; height: 16px; flex-shrink: 0; }

.product-quick-facts{ list-style: none; display: flex; flex-direction: column; gap: var(--space-2xs); margin: var(--space-md) 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.product-quick-facts li{ display: flex; gap: var(--space-2xs); }
.product-quick-facts .icon{ color: var(--color-terracotta); }

/* Caixa de confiança (cera, pavios, recipiente, duração) --------------------
   O fundo era --color-offwhite, que é exatamente o --color-bg da página: a caixa
   ficava invisível e os quatro itens liam como texto solto. Creme dá o contorno,
   e as duas colunas encurtam o bloco pela metade. */
.trust{
  background: var(--color-cream); border: 1px solid var(--color-border);
  margin: var(--space-md) 0 var(--space-sm); padding: var(--space-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
}
.trust-item{ display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.45; }
.trust-item .icon{ width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; color: var(--color-olive); }
.trust-item strong{ font-weight: 600; }
@media (max-width: 560px){ .trust{ grid-template-columns: 1fr; } }

/* Acordeão: Descrição / Perfil Olfativo / Como usar / Frete e Entrega ------- */
.accordion{ border-top: 1px solid var(--color-border); margin-top: var(--space-md); }
.acc-item{ border-bottom: 1px solid var(--color-border); }
.acc-head{
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 0;
  background: none; border: 0; text-align: left; font-family: var(--font-body); font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-charcoal); cursor: pointer;
}
.acc-body{ display: none; padding: 0 0 18px; font-size: var(--fs-base); color: var(--color-text-muted); line-height: 1.8; }
.acc-item.open .acc-body{ display: block; }
.acc-item.open .acc-plus{ transform: rotate(45deg); }
.acc-plus{ font-size: 1.25rem; line-height: 1; transition: transform .2s ease; }

.variations{ margin-bottom: var(--space-md); }
.variations td{ display: block; padding: 0; }
.variations label{ margin-bottom: var(--space-2xs); font-size: var(--fs-sm); }
table.variations{ width: 100%; }
.reset_variations{ font-size: var(--fs-xs); text-decoration: underline; display: inline-block; margin-top: var(--space-2xs); }

.quantity{ display: inline-flex; align-items: stretch; border: 1px solid var(--color-border-strong); }
.quantity .qty{ width: 52px; text-align: center; border: none; padding: 0.6em 0; }
.qty-btn{ background: none; border: none; width: 38px; cursor: pointer; font-size: 1.1rem; }
.cart-form-actions{ display: flex; gap: var(--space-sm); align-items: stretch; flex-wrap: wrap; }
.single_add_to_cart_button{ flex: 1; min-width: 200px; }
.single_add_to_cart_button.disabled{ background: var(--color-text-muted); border-color: var(--color-text-muted); cursor: not-allowed; }
.terralma-price-pix{ display:block; margin-top:6px; color:var(--color-olive-dark); font-size:.76rem; font-weight:500; }
.terralma-kit-summary{ margin:0 0 18px; padding:16px; background:var(--color-surface, #f3eadf); font-size:var(--fs-sm); }
.terralma-kit-summary ul{ margin:8px 0; padding-left:18px; }
.terralma-kit-pix{ margin:8px 0 0; color:var(--color-olive-dark); font-weight:600; }
.buybox form.terralma-kit-builder{ display:block; width:100%; }
.terralma-kit-heading{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.terralma-kit-heading p{ margin:4px 0 0; color:var(--color-text-muted); font-size:var(--fs-xs); }
.terralma-kit-counter{ white-space:nowrap; padding:7px 10px; border:1px solid var(--color-border); font-size:var(--fs-xs); }
.terralma-kit-options{ display:grid; gap:8px; margin-bottom:16px; }
.terralma-kit-option{ display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:8px; border:1px solid var(--color-border); background:rgba(255,255,255,.3); }
.terralma-kit-option img{ width:52px; height:52px; object-fit:cover; }
.terralma-kit-option-info{ display:flex; flex-direction:column; gap:2px; font-size:var(--fs-xs); }
.terralma-kit-option-info small{ color:var(--color-error); }
.terralma-kit-option.is-unavailable{ opacity:.55; }
.terralma-kit-stepper{ display:flex; align-items:center; border:1px solid var(--color-border-strong); }
.terralma-kit-stepper button{ width:31px; height:34px; padding:0; border:0; background:transparent; cursor:pointer; font-size:1rem; }
.terralma-kit-stepper input{ width:36px; height:34px; padding:0; border:0; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); background:transparent; text-align:center; appearance:textfield; }
.terralma-kit-stepper input::-webkit-inner-spin-button{ appearance:none; }
.terralma-kit-totals{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.terralma-kit-totals div{ padding:10px 12px; border:1px solid var(--color-border); display:flex; flex-direction:column; gap:2px; }
.terralma-kit-totals span{ color:var(--color-text-muted); font-size:var(--fs-xs); }
.terralma-kit-totals strong{ font-size:var(--fs-md); }
.terralma-kit-message{ min-height:20px; margin:0 0 10px; font-size:var(--fs-xs); color:var(--color-text-muted); }
.terralma-kit-builder .single_add_to_cart_button{ width:100%; }
.terralma-kit-builder .single_add_to_cart_button:disabled{ opacity:.55; cursor:not-allowed; }
@media (max-width:600px){
  .terralma-kit-option{ grid-template-columns:46px 1fr; }
  .terralma-kit-option img{ width:46px; height:46px; }
  .terralma-kit-stepper{ grid-column:1 / -1; justify-self:stretch; justify-content:space-between; }
  .terralma-kit-stepper input{ flex:1; }
}

.product-shipping-estimate{ margin-top: var(--space-md); border-top: 1px solid var(--color-border); padding-top: var(--space-md); }
.product-shipping-estimate label{ margin-bottom: var(--space-2xs); }
.product-shipping-estimate form{ display: flex; gap: 10px; max-width: 360px; }
.product-shipping-estimate input{ flex: 1 1 auto; min-width: 0; }
.product-shipping-estimate .btn{ flex: 0 0 auto; }
.product-shipping-estimate .result{ font-size: var(--fs-sm); margin-top: var(--space-xs); }

/* Sem margem inferior: quando não há relacionados/upsell, a faixa de características
   é o último elemento, e os 70px daqui somavam com o padding do .section-product. */
.product-editorial.editorial{ border-top: 1px solid var(--color-border); margin: 88px 0 0; padding-top: var(--space-2xl); }
.care-subsection{ margin-bottom: var(--space-md); }
.care-subsection h4{ font-size: var(--fs-md); }
.tip-box{ background: var(--color-cream); padding: var(--space-md); border-left: 3px solid var(--color-terracotta); margin-top: var(--space-md); }

/* Bloco editorial — abertura centralizada da faixa terracota, sem caixa própria.
   Substitui o antigo par texto+imagem: a foto dependia do formato do arquivo
   enviado pelo admin e desestabilizava a altura da seção inteira. */
/* Sem borda própria: o filete que separa este bloco do seguinte é do .profile-blocks,
   para todas as divisórias da faixa terem a mesma largura (esta caixa é mais estreita
   que o container, então uma borda aqui sairia mais curta que as de baixo). */
.editorial-feature{ text-align: center; max-width: 760px; margin: 0 auto var(--space-xl); }
.editorial-badge{
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; margin-bottom: var(--space-md);
  background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #F7EFE4;
}
.editorial-badge .icon{ width: 26px; height: 26px; }
.editorial-feature h2{
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl);
  line-height: 1.15; margin: 0 0 var(--space-sm); color: #fff;
}
/* Medida de linha confortável: texto centralizado em linhas longas cansa, porque
   o olho perde o ponto de partida da linha seguinte. */
.editorial-feature-text{ max-width: 58ch; margin-inline: auto; }
.editorial-feature-text p{ line-height: 1.82; color: #F7EFE4; margin: 0 0 var(--space-sm); }
.editorial-feature-text p:last-child{ margin-bottom: 0; }

/* Faixa "Harmoniza com" / "Detalhes da [produto]" ----------------------------
   Sem caixas: o conteúdo assenta direto na terracota e a estrutura vem de filetes
   e espaçamento. Texto sempre em opacidade cheia — creme sobre #A94F2B dá 4,8:1 e
   branco 5,5:1, mas qualquer transparência derruba abaixo do mínimo legível. */
.profile{ background: var(--color-terracotta); color: #F7EFE4; padding: var(--space-2xl) 0; }
/* Um bloco por linha, cada um ocupando a largura toda. Lado a lado, "Harmoniza com"
   (3 itens curtos) deixava metade da faixa vazia enquanto o título dos detalhes,
   que carrega o nome do produto, quebrava em duas linhas na coluna estreita. */
.profile-blocks{ display: grid; gap: var(--space-xl); }
.editorial-feature + .profile-blocks{ border-top: 1px solid rgba(255, 255, 255, .25); padding-top: var(--space-xl); }
.profile-block + .profile-block{ border-top: 1px solid rgba(255, 255, 255, .25); padding-top: var(--space-xl); }
.profile-block h3{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400;
  color: #fff; margin: 0 0 var(--space-lg); text-align: center;
}
.profile-block h3 .icon{ width: 22px; height: 22px; flex: 0 0 22px; color: #F7EFE4; }

/* Harmonizações como pastilhas, centralizadas na linha. */
.chips{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin: 0; padding: 0; }
.chip{
  display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px;
  font-size: var(--fs-sm); color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .45);
}

/* Detalhes em quatro colunas separadas por filete, sem gap — a divisória precisa
   encostar nas células vizinhas para funcionar como separador. */
.profile-specs{ list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; }
.profile-spec{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 0 var(--space-lg); border-left: 1px solid rgba(255, 255, 255, .25);
}
.profile-spec:first-child{ border-left: 0; padding-left: 0; }
.profile-spec:last-child{ padding-right: 0; }
.profile-spec .icon{ width: 19px; height: 19px; flex: 0 0 19px; margin-top: 3px; color: #F7EFE4; }
.profile-spec-label{
  display: block; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: #F7EFE4; margin-bottom: 4px;
}
.profile-spec-value{ display: block; font-size: var(--fs-base); line-height: 1.5; color: #fff; }

@media (max-width: 900px){
  .profile-specs{ grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); }
  /* Em duas colunas, o filete some no início de cada linha e a 3ª célula reinicia. */
  .profile-spec:nth-child(odd){ border-left: 0; padding-left: 0; }
  .profile-spec:nth-child(even){ padding-right: 0; }
}
@media (max-width: 560px){
  .profile-specs{ grid-template-columns: 1fr; row-gap: var(--space-md); }
  .profile-spec{ border-left: 0; padding: 0; }
}

/* Barra de características (5 colunas) ---------------------------------------
   Antes cada célula tinha seu próprio border-top e havia gap entre elas: saíam
   cinco tracinhos soltos em vez de uma linha, e nada fechava o bloco embaixo.
   Agora a moldura é do container e as células se separam por divisórias internas. */
.features{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin: var(--space-2xl) 0 0;
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.feat{
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: var(--space-lg) var(--space-sm);
  border-left: 1px solid var(--color-border);
  text-align: center; color: var(--color-text);
}
.feat:first-child{ border-left: 0; }
.feat .icon{ width: 26px; height: 26px; flex: 0 0 26px; margin: 0; color: var(--color-sand); display: block; }
/* text-wrap: balance divide os rótulos de duas linhas em partes iguais, em vez de
   deixar uma linha cheia e uma palavra órfã embaixo (o "Brasil" solto). */
.feat b{
  display: block; color: var(--color-charcoal); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.45; max-width: 20ch; text-wrap: balance;
}
@media (max-width: 900px){
  .features{ grid-template-columns: 1fr 1fr; }
  .feat{ border-left: 0; border-top: 1px solid var(--color-border); }
  .feat:nth-child(-n+2){ border-top: 0; }
}
@media (max-width: 520px){
  .features{ grid-template-columns: 1fr; }
  .feat{ flex-direction: row; gap: 14px; text-align: left; padding: var(--space-md) var(--space-2xs); }
  .feat:nth-child(2){ border-top: 1px solid var(--color-border); }
  .feat b{ max-width: none; }
}

.related, .upsells, .cross-sells{ border-top: 1px solid var(--color-border); padding-top: var(--space-2xl); margin-top: var(--space-2xl); }
.related h2, .upsells h2{ font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); margin: 0 0 var(--space-lg); }
.cross-sells h2{ font-size: var(--fs-lg); }
/* As duas regras precisam de min-width. Elas vêm DEPOIS da regra de 1 coluna lá no
   topo do arquivo e têm a mesma especificidade — sem fechar a faixa, venceriam
   também no celular e o "Complete seu ritual" voltaria a três colunas. */
@media (min-width: 641px){ ul.products.columns-3{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 641px) and (max-width: 900px){ ul.products.columns-3{ grid-template-columns: repeat(2, 1fr); } }

/* ESTADOS ------------------------------------------------------------------- */
.stock.out-of-stock{ display: none; }
p.stock.out-of-stock ~ form.cart{ display: none; }
.onsale{ display: none; } /* substituído pela badge custom */

/* CARRINHO — revisão visual: cartões discretos, sem blocos de cor sólida ---------- */
.cart-page-layout{ display: grid; grid-template-columns: 1fr 360px; gap: var(--space-xl); align-items: start; }
@media (max-width: 900px){ .cart-page-layout{ grid-template-columns: 1fr; } }

table.shop_table{ width: 100%; border-collapse: collapse; }
table.shop_table thead th{
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted); font-weight: 500; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border-strong);
}
table.shop_table td{ padding: var(--space-md) var(--space-xs); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
table.shop_table tbody tr:hover{ background: rgba(36,37,34,0.02); }
.cart-item-thumb img{ width: 84px; height: 105px; object-fit: cover; background: var(--color-cream); }
.cart-item-name{ font-family: var(--font-display); font-size: var(--fs-md); }
.cart-item-name:hover{ color: var(--color-terracotta); }
.cart-item-variation{ font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 4px; }
.remove-cart-item, td.product-remove .remove{
  color: var(--color-text-muted); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px;
}
.remove-cart-item:hover, td.product-remove .remove:hover{ color: var(--color-error); }
td.product-remove{ text-align: center; }
td.product-remove a.remove{
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; font-size: 1.1rem; text-decoration: none; line-height: 1;
}
td.product-remove a.remove:hover{ background: var(--color-cream); }
tr.actions td{ border-bottom: none; padding-top: var(--space-lg); }
tr.actions .button{ text-decoration: none; }

/* Painel lateral — cartão discreto (borda fina, sem preenchimento sólido de cor) */
.cart-collaterals, .order-review-panel{
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: var(--space-lg); position: sticky; top: calc(var(--header-height) + var(--space-md));
}
.cart_totals h2, #order_review_heading{
  font-size: var(--fs-lg); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border);
}
.cart_totals table, #order_review table.shop_table{ width: 100%; border-collapse: collapse; }
.cart_totals table td, .cart_totals table th,
#order_review table.shop_table td, #order_review table.shop_table th{
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); text-align: left; font-weight: 400;
}
.cart_totals table th{ color: var(--color-text-muted); width: 40%; }
/* A quantidade vem dentro da célula do nome (marcação do WooCommerce). Em flex com
   space-between ela era empurrada para a borda direita da célula, colando na coluna
   do preço. Como linha própria abaixo do nome, cada informação fica no seu lugar. */
#order_review .cart_item .product-name{ display: block; }
#order_review .cart_item .product-quantity{
  display: block; margin-top: 4px; font-weight: 400;
  font-size: var(--fs-xs); color: var(--color-text-muted);
}
#order_review .cart_item .product-total{ text-align: right; white-space: nowrap; vertical-align: top; }
#order_review .cart_item .product-name dl.variation{ font-size: var(--fs-xs); color: var(--color-text-muted); margin: 4px 0 0; }
tr.order-total td, tr.order-total th{
  border-bottom: none; padding-top: var(--space-md); font-size: var(--fs-lg); font-family: var(--font-display); font-weight: 500;
}
.free-shipping-bar{ margin-bottom: var(--space-lg); }
.free-shipping-bar-track{ height: 3px; background: rgba(40,41,39,0.1); overflow: hidden; margin-top: var(--space-2xs); }
.free-shipping-bar-fill{ height: 100%; background: var(--color-terracotta); transition: width var(--transition-slow); }
.free-shipping-bar-message{ font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
/* Cupom — dentro do painel de totais. Antes ficava na linha .actions da tabela,
   ocupando a largura inteira do carrinho (~1100px) para um campo de 8 caracteres. */
.coupon-form{ margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.coupon-form label{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); margin-bottom: var(--space-2xs); }
.coupon-form-fields{ display: flex; gap: var(--space-2xs); }
.coupon-form-fields input{ flex: 1 1 auto; min-width: 0; padding: 0.7em 0.8em; }
.coupon-form-fields .btn{ flex: 0 0 auto; min-height: 0; padding: 0 14px; font-size: .7rem; }

/* CTA do carrinho: "Finalizar" preenchido, "Continuar comprando" só com contorno.
   O botão do WooCommerce vem com as classes .checkout-button/.button, que não têm
   estilo aqui (o CSS do plugin está desativado) — por isso aparecia como texto puro. */
.wc-proceed-to-checkout .checkout-button{
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; margin-top: var(--space-md); padding: 0 20px;
  background: var(--color-terracotta); color: #fff; border: 1px solid var(--color-terracotta);
  font-weight: 600; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: .25s ease;
}
.wc-proceed-to-checkout .checkout-button:hover{ background: var(--color-charcoal); border-color: var(--color-charcoal); color: #fff; }
.continue-shopping{ margin-top: var(--space-2xs); }
.cross-sells-cart{ margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); }
.cross-sells-cart h2{ font-size: var(--fs-xl); margin-bottom: var(--space-md); }

/* MINI-CART DRAWER --------------------------------------------------------------- */
/* 90% em vez de 100%: a faixa de véu que sobra ao lado dá uma segunda saída no
   celular. Em tela cheia o único jeito de sair é o X, e se ele falhar não há escape. */
.cart-drawer{
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 90%); z-index: 960;
  background: var(--color-surface); transform: translateX(100%); transition: transform var(--transition-slow);
  display: flex; flex-direction: column;
}
.cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer-header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
.cart-drawer-header h2{ font-size: var(--fs-lg); margin: 0; }
/* Área de toque de 44px (mínimo recomendado para o dedo) e tamanho explícito no
   ícone — sem isso o SVG cai no padrão de 300x150 e o botão fica irreconhecível. */
.cart-drawer-close{
  background: none; border: 0; cursor: pointer; padding: 0;
  width: 44px; height: 44px; margin-right: -10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-text);
}
.cart-drawer-close svg{ width: 22px; height: 22px; }
.cart-drawer-close:hover{ color: var(--color-terracotta); }
.cart-drawer-freeshipping{ padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); }
.cart-drawer-items{ flex: 1; overflow-y: auto; padding: var(--space-md); }
.cart-drawer-item{ display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-sm); margin-bottom: var(--space-md); }
.cart-drawer-item img{ width: 72px; height: 90px; object-fit: cover; }
.cart-drawer-item-name{ font-family: var(--font-display); font-size: var(--fs-sm); margin-bottom: var(--space-3xs); }
.cart-drawer-item-meta{ font-size: var(--fs-xs); color: var(--color-text-muted); }
.cart-drawer-item-qty{ display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-2xs); }
/* align-self: start impede o botão de esticar até a altura da linha do grid, e o
   reset de fundo/borda/padding tira o visual de botão padrão do navegador — sem isso
   ele aparece como uma caixa cinza do tamanho do item inteiro. */
.cart-drawer-item-remove{
  align-self: start; justify-self: end;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-xs);
  text-decoration: underline; color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.cart-drawer-item-remove:hover{ color: var(--color-error); }
.cart-drawer-item.is-loading{ opacity: .5; pointer-events: none; }
.cart-drawer-footer{ border-top: 1px solid var(--color-border); padding: var(--space-md); }
.cart-drawer-subtotal{ display: flex; justify-content: space-between; font-size: var(--fs-md); margin-bottom: var(--space-sm); }
.cart-drawer-actions{ display: flex; flex-direction: column; gap: var(--space-2xs); }
.cart-drawer-empty{ text-align: center; padding: var(--space-2xl) var(--space-md); }

/* CHECKOUT — revisão visual: seções numeradas automaticamente, painel discreto ----- */
.woocommerce-checkout.woocommerce-page .section-utility{ padding-top: var(--space-md); }

/* Título à esquerda, etapas à direita, na mesma linha e centralizados entre si.
   O h1 desce para --fs-2xl: no tamanho de hero ele esmagava as etapas ao lado. */
.checkout-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border);
}
.checkout-head h1{ margin: 0; font-size: var(--fs-2xl); }
@media (max-width: 820px){
  .checkout-head{ flex-direction: column; align-items: stretch; gap: var(--space-md); }
}

.checkout-steps{
  display: flex; align-items: center; justify-content: center; list-style: none;
  width: 100%; max-width: 460px; margin: 0; padding: 0; flex-shrink: 0;
}
@media (max-width: 820px){ .checkout-steps{ margin-inline: auto; } }
.checkout-step{ display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); flex-shrink: 0; }
.checkout-step-icon{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted); background: var(--color-surface);
}
.checkout-step-icon svg{ width: 18px; height: 18px; }
.checkout-step-label{ font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.checkout-step.is-complete .checkout-step-icon{ background: var(--color-charcoal); border-color: var(--color-charcoal); color: #fff; }
.checkout-step.is-complete .checkout-step-label{ color: var(--color-text); }
.checkout-step.is-current .checkout-step-icon{ border-color: var(--color-terracotta); color: var(--color-terracotta); }
.checkout-step.is-current .checkout-step-label{ color: var(--color-terracotta); font-weight: 600; }
.checkout-step-line{ flex: 1; height: 1px; background: var(--color-border-strong); margin: 0 var(--space-2xs) 20px; }

.woocommerce-checkout .checkout-layout{ display: grid; grid-template-columns: 1fr 400px; gap: var(--space-xl); align-items: start; }
@media (max-width: 960px){ .woocommerce-checkout .checkout-layout{ grid-template-columns: 1fr; } }

/* Grade de duas colunas para os campos do checkout. O WooCommerce já marca cada campo
   com form-row-first / form-row-last / form-row-wide, mas o tema não tinha nenhuma
   regra para essas classes — por isso Nome e Sobrenome caíam em linhas separadas. */
/* =========================================================================
   CHECKOUT — ORDEM E ETAPAS
   O WooCommerce monta o formulário do jeito dele; o tema não sobrescreve template
   nem filtra o array de campos. Ordem e largura são resolvidas aqui, por ID de
   campo, usando flexbox + a propriedade `order`. Reordenar visualmente não mexe no
   DOM: os campos continuam na mesma sequência do HTML, com os mesmos nomes e regras,
   e o envio ao WooCommerce é exatamente o mesmo.
   ========================================================================= */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{
  display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--space-sm);
}
/* Padrão: linha inteira, no fim da fila. Campos de plugins (CPF, empresa, bairro)
   caem aqui e aparecem no fim da etapa de endereço, sem precisar de regra própria. */
.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row{ width: 100%; order: 200; }

#billing_first_name_field{ order: 10; width: calc(50% - (var(--space-sm) / 2)); }
#billing_last_name_field { order: 20; width: calc(50% - (var(--space-sm) / 2)); }
#billing_email_field     { order: 30; width: calc(50% - (var(--space-sm) / 2)); }
#billing_phone_field     { order: 40; width: calc(50% - (var(--space-sm) / 2)); }
.checkout-nav-next       { order: 50; }
.checkout-nav-back       { order: 60; }
#billing_postcode_field  { order: 70; width: calc(50% - (var(--space-sm) / 2)); }
#billing_city_field      { order: 80; width: calc(50% - (var(--space-sm) / 2)); }
#billing_address_1_field { order: 90; }
#billing_address_2_field { order: 100; }
#billing_state_field     { order: 110; width: calc(50% - (var(--space-sm) / 2)); }
#billing_country_field   { order: 120; width: calc(50% - (var(--space-sm) / 2)); }

@media (max-width: 560px){
  .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-shipping-fields__field-wrapper > .form-row{ width: 100%; }
  #billing_first_name_field, #billing_last_name_field,
  #billing_email_field, #billing_phone_field,
  #billing_postcode_field, #billing_city_field,
  #billing_state_field, #billing_country_field{ width: 100%; }
}

/* Etapas. As classes .terralma-s1 / .terralma-s2 são postas pelo checkout.js — a
   única coisa que o JavaScript faz é marcar e alternar; nada é movido de lugar.
   Sem o script, nenhum data-checkout-step existe e o formulário aparece inteiro. */
[data-checkout-step="1"] .terralma-s2,
[data-checkout-step="1"] .checkout-nav-back,
[data-checkout-step="2"] .terralma-s1,
[data-checkout-step="2"] .checkout-nav-next{ display: none; }

.checkout-nav{ width: 100%; }
.checkout-nav-next{ width: 100%; margin-top: var(--space-sm); }
.checkout-nav-back{
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: var(--space-sm); background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.checkout-nav-back:hover{ color: var(--color-terracotta); }

.form-row.is-invalid input,
.form-row.is-invalid select{ border-color: var(--color-error); }
/* Enquanto o CEP é consultado, o campo sinaliza que algo está acontecendo. */
.form-row.is-loading input{ opacity: .6; }

.checkout-fields-col{ counter-reset: checkout-step; }
#customer_details .col-1, #customer_details .col-2{ width: 100%; float: none; margin-bottom: var(--space-xl); }

/* Numera automaticamente as seções nativas do checkout (cobrança, informação adicional)
   sem precisar sobrescrever os templates form-billing.php/form-shipping.php do WooCommerce. */
.woocommerce-billing-fields,
.woocommerce-additional-fields{
  padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border);
}
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3{
  counter-increment: checkout-step;
  display: flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--space-md);
}
.woocommerce-billing-fields > h3::before,
.woocommerce-additional-fields > h3::before{
  content: counter(checkout-step);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-charcoal); color: #fff;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
}
/* "Enviar para um endereço diferente?" — checkbox, não é uma seção numerada */
.woocommerce-shipping-fields{ margin-bottom: var(--space-lg); }
.woocommerce-shipping-fields > h3{ font-size: var(--fs-sm); font-weight: 500; text-transform: none; margin: 0 0 var(--space-md); }
.woocommerce-shipping-fields > h3 label{ display: flex; align-items: center; gap: var(--space-2xs); cursor: pointer; margin-bottom: 0; }
.shipping_address{ margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-border); }

.woocommerce-checkout .form-row{ margin-bottom: var(--space-sm); }
#order_review table{ width: 100%; }
.woocommerce-checkout-payment{ background: var(--color-cream); border: 1px solid var(--color-border); padding: var(--space-md); margin-top: var(--space-md); }
.woocommerce-checkout-payment ul.payment_methods{ list-style: none; margin: 0; }
.woocommerce-checkout-payment li{ padding: var(--space-sm) 0; border-bottom: 1px solid rgba(36,37,34,.1); }
.woocommerce-checkout-payment li:last-child{ border-bottom: none; }
.woocommerce-checkout-payment label{ display: flex; align-items: baseline; gap: var(--space-2xs); cursor: pointer; margin-bottom: 0; font-weight: 500; }
.payment_box{ margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-text-muted); padding: var(--space-sm); background: var(--color-surface); }
.woocommerce-checkout-payment .woocommerce-notice{
  font-size: var(--fs-sm); color: var(--color-text-muted); background: var(--color-surface);
  border: 1px solid var(--color-border); padding: var(--space-sm); margin: 0;
}
#place_order{ width: 100%; margin-top: var(--space-md); padding: 1.1em; font-size: var(--fs-sm); }
/* Login / Criar conta ---------------------------------------------------------
   Com o cadastro desativado sobra uma coluna só, e o bloco antigo ficava preso na
   metade esquerda de um grid de 2 colunas, deixando metade da tela vazia ao lado. */
.customer-login{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.customer-login h2{ margin-bottom: var(--space-md); }
.customer-login--single{ grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
.customer-login--single h2{ text-align: center; }
@media (max-width: 768px){ .customer-login{ grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

.woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-coupon{ background: var(--color-cream); border: 1px solid var(--color-border); padding: var(--space-md); margin-bottom: var(--space-md); }
.woocommerce-info a.showlogin, .woocommerce-info a.showcoupon{ text-decoration: underline; font-weight: 600; }
.checkout-account-fields{ background: var(--color-cream); border: 1px solid var(--color-border); padding: var(--space-md); margin-top: var(--space-sm); }
.woocommerce .blockUI.blockOverlay{ position: relative; }
.woocommerce .blockUI.blockOverlay::after{
  content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px;
  border: 3px solid var(--color-border-strong); border-top-color: var(--color-terracotta); border-radius: 50%;
  animation: terralma-spin 0.7s linear infinite; top: calc(50% - 14px); left: calc(50% - 14px);
}

/* THANK YOU / PEDIDO RECEBIDO ------------------------------------------------------- */
.order-received-hero{ text-align: center; max-width: 640px; margin: 0 auto var(--space-lg); }
.order-received-hero .icon{ font-size: 2.4rem; color: var(--color-terracotta); margin-bottom: var(--space-sm); }
.order-status-banner{ padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border-strong); text-align: center; margin-bottom: var(--space-lg); font-size: var(--fs-sm); }
.order-status-banner.status-pending{ background: var(--color-cream); border-color: var(--color-terracotta); }
.order-status-banner.status-failed{ background: #F6DEDB; border-color: var(--color-error); color: var(--color-error); }
ul.order_details{ list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; padding: var(--space-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-lg); }
ul.order_details li{ font-size: var(--fs-sm); text-align: center; }
ul.order_details li strong{ display: block; font-family: var(--font-display); font-size: var(--fs-md); }
.order-editorial-note{ background: var(--color-cream); padding: var(--space-lg); text-align: center; margin-top: var(--space-2xl); }
.order-actions-row{ display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); flex-wrap: wrap; }

/* MINHA CONTA ----------------------------------------------------------------------- */
.woocommerce-account-layout{ display: grid; grid-template-columns: 240px 1fr; gap: var(--space-xl); }
@media (max-width: 900px){ .woocommerce-account-layout{ grid-template-columns: 1fr; } }
.woocommerce-MyAccount-navigation ul{ list-style: none; }
.woocommerce-MyAccount-navigation li{ border-bottom: 1px solid var(--color-border); }
.woocommerce-MyAccount-navigation a{ display: block; padding: var(--space-sm) 0; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.woocommerce-MyAccount-navigation li.is-active a{ color: var(--color-terracotta); }
.account-dashboard-welcome{ margin-bottom: var(--space-lg); }
table.my_account_orders{ width: 100%; }
table.my_account_orders .button{ font-size: var(--fs-xs); padding: 0.5em 1em; }
.order-status-pill{ display: inline-block; padding: 0.25em 0.9em; border-radius: 999px; font-size: var(--fs-xs); background: var(--color-cream); }
.order-status-pill.completed{ background: #DCE7DA; }
.order-status-pill.processing{ background: var(--color-sand); }
.order-status-pill.pending, .order-status-pill.on-hold{ background: #F1E4C9; }
.order-status-pill.cancelled, .order-status-pill.failed{ background: #F6DEDB; }
.woocommerce-address-fields{ max-width: 480px; }
.addresses{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
@media (max-width: 640px){ .addresses{ grid-template-columns: 1fr; } }
.woocommerce-Address{ border: 1px solid var(--color-border); padding: var(--space-md); }
.woocommerce-Address-title{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }

/* BUSCA ------------------------------------------------------------------------------ */
/* Painel compacto ancorado abaixo do cabeçalho, sobre um véu escuro.
   Clicar no véu (fora do painel) fecha — ver assets/js/search-modal.js. */
.search-modal{
  position: fixed; inset: 0; z-index: 970;
  display: flex; align-items: flex-start; justify-content: center;
  padding: calc(var(--header-height) + 20px) var(--container-padding) var(--space-lg);
  background: rgba(36, 37, 34, .42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.search-modal.is-open{ opacity: 1; visibility: visible; }
.search-modal-inner{
  position: relative; width: min(560px, 100%);
  max-height: calc(100vh - var(--header-height) - 60px); overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px rgba(36, 37, 34, .18);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  transform: translateY(-10px); transition: transform var(--transition-fast);
}
.search-modal.is-open .search-modal-inner{ transform: translateY(0); }
.search-modal-close{
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  display: grid; place-items: center; background: none; border: none;
  color: var(--color-text-muted); cursor: pointer;
}
.search-modal-close:hover{ color: var(--color-terracotta); }
.search-modal-close svg{ width: 18px; height: 18px; }
.search-modal-form{ display: flex; gap: var(--space-2xs); align-items: center; border-bottom: 1px solid var(--color-border-strong); padding-bottom: var(--space-2xs); }
.search-modal-form input{ border: none; background: none; font-family: var(--font-body); font-size: var(--fs-md); padding: 0; }
.search-modal-form input:focus{ outline: none; }
.search-modal-suggestions:not(:empty){ margin-top: var(--space-md); }
.search-modal-suggestions h5{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.search-result-item{ display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); }
.search-result-item img{ width: 50px; height: 62px; object-fit: cover; }
.search-page-results ul.products{ margin-top: var(--space-lg); }

/* 404 ------------------------------------------------------------------------------- */
.error-404-content{ text-align: center; padding: var(--space-3xl) var(--space-md); max-width: 560px; margin-inline: auto; }
.error-404-content .code{ font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--color-terracotta); }
.error-404-actions{ display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); flex-wrap: wrap; }
.error-404-search{ margin-top: var(--space-lg); max-width: 380px; margin-inline: auto; display: flex; gap: var(--space-2xs); }

/* =========================================================================
   SELECT2 — País e Estado do checkout
   O WooCommerce troca esses <select> por um componente select2, que esconde o
   campo original e desenha um <span> no lugar. Por isso as regras de `select`
   não os alcançavam e eles continuavam com a aparência e a altura do plugin.
   Aqui a caixa fechada recebe exatamente a mesma forma dos inputs do tema.
   ========================================================================= */
.select2-container--default .select2-selection--single{
  display: flex; align-items: center;
  height: 48px; padding: 0 2.6em 0 1em;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding: 0; line-height: 1.4; color: var(--color-text); font-size: var(--fs-base);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color: var(--color-text-muted); }
/* Troca o triângulo do plugin pelo mesmo chevron dos selects nativos do tema. */
.select2-container--default .select2-selection--single .select2-selection__arrow{ top: 0; right: 12px; width: 16px; height: 100%; }
.select2-container--default .select2-selection--single .select2-selection__arrow b{ display: none; }
.select2-container--default .select2-selection--single .select2-selection__arrow::after{
  content: ''; position: absolute; top: 50%; right: 0; width: 16px; height: 16px; transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767166' stroke-width='1.8' 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: center; background-size: 16px;
}
.select2-container--default.select2-container--open .select2-selection--single{ border-color: var(--color-terracotta); }
.select2-container--default .select2-selection--single:hover{ border-color: var(--color-charcoal); }

/* A lista aberta do select2 é HTML de verdade — diferente do <select> nativo,
   aqui dá para estilizar também o menu. */
.select2-dropdown{ border-color: var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); }
.select2-container--default .select2-results__option{ padding: 10px 14px; font-size: var(--fs-sm); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{ background: var(--color-olive); color: #fff; }
.select2-container--default .select2-results__option[aria-selected="true"]{ background: var(--color-cream); color: var(--color-text); }
.select2-search--dropdown .select2-search__field{ min-height: 40px; padding: .5em .8em; border-color: var(--color-border-strong); }

/* =========================================================================
   MOBILE — ESPAÇAMENTOS
   Bloco propositalmente no FIM do arquivo. As regras aqui têm a mesma
   especificidade das que sobrescrevem, então precisam vir depois delas para
   valer. Numa tentativa anterior este bloco ficou no meio do arquivo e as
   regras de .features e .related, declaradas mais abaixo, continuavam vencendo.
   ========================================================================= */
@media (max-width: 640px){
  .product-editorial.editorial{ margin-top: var(--space-lg); padding-top: var(--space-md); }
  .profile{ padding: var(--space-lg) 0; }
  .editorial-feature{ margin-bottom: var(--space-md); }
  .editorial-feature + .profile-blocks{ padding-top: var(--space-md); }
  .profile-blocks{ gap: var(--space-md); }
  .profile-block + .profile-block{ padding-top: var(--space-md); }
  .features{ margin-top: var(--space-lg); }
  .related, .upsells, .cross-sells{ margin-top: var(--space-lg); padding-top: var(--space-md); }
  .related h2, .upsells h2{ margin-bottom: var(--space-md); }
  .cross-sells-cart{ margin-top: var(--space-lg); padding-top: var(--space-md); }
  .product-hero{ margin-bottom: var(--space-lg); }
  .trust{ margin: var(--space-sm) 0; }
}