/* loja.css — carregado só com o WooCommerce ativo.
   1) Ícone do carrinho no menu (todas as páginas)
   2) Wrapper das páginas do WooCommerce (produto, carrinho, minha conta)
      renderizadas por woocommerce.php / page.php, para não ficarem
      coladas na navbar fixa e terem largura de leitura.
   O checkout em si continua estilizado pelos snippets / ShopEngine. */

/* ===== 1. Carrinho no menu ===== */
.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 4px;
  border-radius: 5px;
  transition: background 0.2s;
}
.nav-cart svg { width: 19px; height: 19px; }
.nav-cart:hover { background: rgba(0,0,0,0.06); }
.navbar.hero-nav .nav-cart { color: rgba(255,255,255,0.85); }
.navbar.hero-nav .nav-cart:hover { background: rgba(255,255,255,0.12); color: #fff; }
.navbar.scrolled .nav-cart,
.navbar.solid .nav-cart { color: var(--gray); }
.navbar.scrolled .nav-cart:hover,
.navbar.solid .nav-cart:hover { color: var(--graphite); }

.nav-cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--graphite);
  font-family: var(--font-number);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.nav-cart-count.is-empty { display: none; }

@media (max-width: 900px) {
  /* No mobile a navbar mostra só logo + hambúrguer; o carrinho vai junto. */
  .nav-cart { margin-right: 2px; }
}

/* ===== 2. Páginas do WooCommerce dentro do tema ===== */
.ecoexpo-woo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 108px 24px 80px;
  font-family: var(--font-body);
  color: var(--graphite);
}
.ecoexpo-woo a { color: var(--blue); }
.ecoexpo-woo .woocommerce-breadcrumb {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--gray-light);
  margin-bottom: 24px;
}
.ecoexpo-woo h1,
.ecoexpo-woo h2 {
  font-family: var(--font-display);
  color: var(--graphite);
  letter-spacing: -0.01em;
}

/* Botões do WooCommerce no estilo do tema */
.ecoexpo-woo .button,
.ecoexpo-woo .woocommerce-Button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  padding: 12px 22px;
  transition: background 0.2s, transform 0.15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

/* Avisos / mensagens */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--green);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--green);
}
.woocommerce .woocommerce-error { border-top-color: #e53935; }

@media (max-width: 600px) {
  .ecoexpo-woo { padding: 92px 16px 56px; }
}

/* Página genérica (modelo "Padrão") sob o hero simples — só o conteúdo,
   sem o padding-top que a .ecoexpo-woo usa pra limpar a navbar fixa. */
.ecoexpo-page-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 24px 80px;
  font-family: var(--font-body);
  color: var(--graphite);
  line-height: 1.7;
}
.ecoexpo-page-content a { color: var(--blue); }


/* =====================================================================
   3. Botões flutuantes — reforço (Elementor/ShopEngine sobrescrevem o
   botão do WhatsApp nas páginas da loja, deixando ele azul e sem ícone).
   ===================================================================== */
.whats-float-wrap .whats-float-btn {
  background: #25D366 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}
.whats-float-wrap .whats-float-btn svg { width: 30px !important; height: 30px !important; color: #fff !important; }
.whats-float-wrap .whats-float-popup-cta {
  background: var(--green) !important;
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.back-to-top { background: var(--blue-dark) !important; padding: 0 !important; }


/* =====================================================================
   4. Página de produto (WooCommerce padrão, dentro de woocommerce.php)
   ===================================================================== */

/* Template Elementor de produto (post 111) é full-width e não conta com
   nosso navbar fixo — empurra o conteúdo pra baixo pra não ficar
   colado/embaixo do menu. */
.elementor-location-single.product {
  padding-top: 90px !important;
}
@media (max-width: 600px) {
  .elementor-location-single.product { padding-top: 70px !important; }
}

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: 48px;
  align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 10px; }
.woocommerce div.product .summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.1 !important;
  color: var(--graphite) !important;
  margin-bottom: 12px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .price bdi {
  color: var(--green-dark) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  margin-bottom: 18px !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 22px;
}
.woocommerce div.product form.cart { margin: 0; }
.woocommerce div.product form.cart .variations {
  margin-bottom: 16px;
  border-collapse: collapse;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  display: block;
  width: 100%;
  padding: 0 0 6px;
  text-align: left;
}
.woocommerce div.product form.cart .variations label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  color: var(--graphite);
}
.woocommerce div.product form.cart .variations select,
.woocommerce div.product select[name^="attribute_"] {
  width: 100% !important;
  height: 46px !important;
  padding: 0 40px 0 12px !important;
  border: 1.5px solid var(--surface-2) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: var(--graphite) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
.woocommerce div.product form.cart .reset_variations { font-size: 12px; }
.woocommerce div.product form.cart .woocommerce-variation-price .price {
  font-size: 20px;
  margin: 10px 0;
}
.woocommerce div.product form.cart .quantity input.qty {
  height: 46px;
  width: 64px;
  border: 1.5px solid var(--surface-2);
  border-radius: 6px;
  text-align: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--green) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
  padding: 14px 28px !important;
  border-radius: 6px !important;
  height: auto !important;
  line-height: 1 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--green-dark) !important; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 40px; }
.woocommerce div.product .woocommerce-tabs .tabs { border: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs .tabs li {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs .tabs li.active { border-bottom-color: var(--green); background: transparent; }
.woocommerce div.product .woocommerce-tabs .tabs li a { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 12px; color: var(--gray); }
.woocommerce div.product .woocommerce-tabs .tabs li.active a { color: var(--graphite); }
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: 28px; }
}


/* =====================================================================
   5. Carrinho
   ===================================================================== */
.woocommerce-cart .woocommerce { max-width: 100%; }
.woocommerce table.shop_table {
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table thead th {
  background: var(--off-white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  color: var(--gray);
  padding: 14px 16px;
}
.woocommerce table.shop_table td { padding: 16px; vertical-align: middle; }
.woocommerce a.remove {
  color: var(--gray-light) !important;
  border: 1px solid var(--surface-2);
}
.woocommerce a.remove:hover { color: #e53935 !important; background: transparent !important; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .e-cart-totals {
  width: 100%;
  float: none;
  background: var(--off-white) !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 20px 22px;
}
.woocommerce .cart_totals h2,
.woocommerce .e-cart-totals h2 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  margin-bottom: 12px;
}
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce .e-cart-totals a.checkout-button,
.woocommerce a.checkout-button {
  background: var(--blue-dark) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 6px !important;
  padding: 15px 24px !important;
}
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce a.checkout-button:hover { background: var(--blue) !important; }
.woocommerce .e-shop-table table.shop_table,
.woocommerce .e-cart__container table.shop_table {
  border: none !important;
  border-radius: 0 !important;
}
.woocommerce .actions .coupon input#coupon_code {
  height: 44px;
  border: 1.5px solid var(--surface-2);
  border-radius: 6px;
}


/* =====================================================================
   5b. Caixa "Programação sujeita a alterações" (páginas de produto do
   Fórum) — era um bloco azul sólido do template antigo; estilo card
   branco/arredondado igual ao resto do site.
   ===================================================================== */
.elementor-element-2cb5163 {
  background: #fff !important;
  border: 1px solid var(--surface-2) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,.06)) !important;
  padding: 16px 20px !important;
}
.elementor-element-dbaebd5 .elementor-heading-title,
.elementor-element-dbaebd5 h1,
.elementor-element-dbaebd5 h2,
.elementor-element-dbaebd5 h3 {
  color: var(--graphite) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* =====================================================================
   6. Checkout — SÓ aparência (cores/bordas/raio). Estrutura e campos
   intocados. Vale tanto pro widget do ShopEngine quanto pro shortcode.
   ===================================================================== */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-checkout .shopengine-checkout h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--graphite);
}
.woocommerce form .form-row,
.woocommerce-checkout form.checkout .form-row {
  display: block !important;
  width: 100% !important;
  float: none !important;
}
/* Exceção: campos condicionais de Pessoa Física/Jurídica (plugin
   Brazilian Market — CPF, CNPJ, RG, Inscrição Estadual, Nome da
   Empresa). O plugin controla a exibição deles via JS (esconde/mostra
   por display:none inline conforme o "Tipo de Pessoa" escolhido), mas
   a regra ".form-row { display:block !important }" acima sobrescrevia
   esse inline e forçava CPF e CNPJ a aparecerem juntos sempre,
   independente da seleção. Precisa de !important aqui também pra
   ganhar da regra genérica (empate resolvido por especificidade: este
   seletor é mais específico por incluir ".person-type-field"). */
.woocommerce-checkout form.checkout .form-row.person-type-field:not(.is-active) {
  display: none !important;
}
.woocommerce form .form-row label,
.woocommerce-checkout form .form-row label {
  display: block !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--gray) !important;
}
.woocommerce form .form-row .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1.5px solid var(--surface-2) !important;
  border-radius: 6px !important;
  background: #fff !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--graphite) !important;
  box-shadow: none !important;
}
/* <select> nativo E o substituto visual do Select2 (país/estado): usar
   height+line-height (não padding vertical) pra centralizar o texto de
   verdade — com padding ele fica jogado pro rodapé em vários navegadores. */
.woocommerce-checkout form.checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
  border: 1.5px solid var(--surface-2) !important;
  border-radius: 6px !important;
  background: #fff !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  color: var(--graphite) !important;
  box-shadow: none !important;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding: 0 !important;
  color: var(--graphite) !important;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout form.checkout select:focus {
  border-color: var(--green) !important;
  outline: none !important;
}
.woocommerce-checkout #payment {
  background: var(--off-white);
  border: 1px solid var(--surface-2);
  border-radius: 10px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--surface-2); }
.woocommerce-checkout #payment div.payment_box {
  background: #fff;
  border: 1px solid var(--surface-2);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"],
.woocommerce-checkout .button.alt {
  background: var(--blue-dark) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 6px !important;
  padding: 15px 24px !important;
  width: 100%;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .button.alt:hover { background: var(--blue) !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .e-checkout__order_review table.shop_table {
  border: 1px solid var(--surface-2) !important;
  border-radius: 10px !important;
}
.woocommerce-checkout .e-checkout__order_review h3,
.woocommerce-checkout .e-checkout-secondary-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  color: var(--graphite) !important;
}