/* ===========================================================
   Loja (WooCommerce) — padrão escuro Mercado Full
   Vitrine (/shop/), página de produto, carrinho.
   =========================================================== */

/* ---------- Fundo e tipografia base ---------- */
body.post-type-archive-product,
body.tax-product_cat,
body.single-product {
  background: #0a0a0a;
  color: #fff;
}

/* ---------- VITRINE: grade de produtos ---------- */
.woocommerce ul.products li.product,
ul.products li.product {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 16px !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  margin-bottom: 12px !important;
  background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  padding: 0 14px !important;
  font-size: 14.5px !important;
  font-weight: 600;
  line-height: 1.45;
  color: #fff !important;
}
.woocommerce ul.products li.product .price {
  padding: 6px 14px 0 !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800;
}
.woocommerce ul.products li.product .price del {
  color: rgba(255, 255, 255, 0.4) !important;
  font-weight: 400;
  font-size: 13px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: #fff !important;
}
.woocommerce ul.products li.product .button,
ul.products li.product .button {
  margin: 12px 14px 0 !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  transition: transform 0.12s ease, box-shadow 0.2s ease !important;
}
.woocommerce ul.products li.product .button:hover {
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.35);
}
.woocommerce ul.products li.product .button:active { transform: scale(0.96); }

/* Selo de oferta. */
.woocommerce span.onsale {
  background: #3b82f6 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: 0 !important;
  line-height: 1.6 !important;
}

/* Paginação e ordenação. */
.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 3px;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 10px;
  padding: 10px 15px;
  color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #fff !important;
  color: #000 !important;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-ordering select {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #141414;
  color: #fff;
}
.woocommerce-result-count { color: rgba(255, 255, 255, 0.55) !important; }

/* ---------- PÁGINA DE PRODUTO ---------- */
/* Título. */
.single-product .product_title,
.elementor-widget-woocommerce-product-title h1 {
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
/* Preço. */
.single-product .price,
.elementor-widget-woocommerce-product-price .price {
  color: #fff !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 800 !important;
}
.single-product .price del { color: rgba(255, 255, 255, 0.4) !important; }
.single-product .price ins { text-decoration: none; }

/* Descrição curta. */
.woocommerce-product-details__short-description,
.elementor-widget-woocommerce-product-short-description {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 15px;
  line-height: 1.7;
}

/* Imagem/galeria do produto. */
.single-product .woocommerce-product-gallery,
.single-product .elementor-widget-image img {
  border-radius: 16px;
  overflow: hidden;
}
.single-product .woocommerce-product-gallery img {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #fff;
}

/* Quantidade + Comprar. */
.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.single-product form.cart .quantity .qty {
  height: 100%;
  min-height: 48px;
  width: 74px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #141414;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 13px 26px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, box-shadow 0.2s ease !important;
}
.single-product form.cart .single_add_to_cart_button:hover {
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.4);
}
.single-product form.cart .single_add_to_cart_button:active { transform: scale(0.97); }

/* Metadados (SKU, categoria). */
.single-product .product_meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.single-product .product_meta a { color: #60a5fa; }
/* SKU é interno (chave do estoque/UpSeller) — não mostrar ao cliente. */
.single-product .product_meta .sku_wrapper { display: none !important; }

/* Calculadora de frete do Melhor Envio no produto — tema escuro. */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
  margin: 14px 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto input[type="text"],
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto input {
  padding: 11px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: #141414 !important;
  color: #fff !important;
}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto button,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .btn,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto input[type="submit"] {
  padding: 11px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  background: #fff !important;
  color: #000 !important;
  font-weight: 700 !important;
  cursor: pointer;
}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto a {
  color: #60a5fa !important;
  font-size: 13px;
}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto table,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto td,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto th {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

/* Abas de descrição (se existirem). */
.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
}
.woocommerce-tabs ul.tabs li a { color: rgba(255, 255, 255, 0.6) !important; }
.woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.woocommerce-tabs .panel { color: rgba(255, 255, 255, 0.75) !important; }

/* Relacionados: herda a grade da vitrine. */
.single-product .related.products > h2,
.elementor-widget-woocommerce-product-related h3,
.elementor-widget-woocommerce-product-related .products > h2 {
  color: #fff !important;
  font-weight: 800 !important;
  margin-bottom: 20px;
}

/* Mensagens/avisos do Woo (adicionado ao carrinho etc.). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #141414 !important;
  color: #fff !important;
  border-top-color: #3b82f6 !important;
  border-radius: 0 0 12px 12px;
}
.woocommerce-message a.button,
.woocommerce-info a.button {
  background: #fff !important;
  color: #000 !important;
  border-radius: 8px !important;
}

/* Breadcrumb. */
.woocommerce-breadcrumb {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px;
}
.woocommerce-breadcrumb a { color: rgba(255, 255, 255, 0.75) !important; }

/* ---------- CARRINHO (página /cart/) ---------- */
.woocommerce-cart table.cart,
.woocommerce table.shop_table {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  color: #fff;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85);
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #141414;
  color: #fff;
  padding: 10px 14px;
}
.woocommerce .cart-collaterals .cart_totals h2 { color: #fff; }
.woocommerce button.button,
.woocommerce a.checkout-button {
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.woocommerce a.checkout-button {
  background: #fff !important;
  color: #000 !important;
}

/* ===========================================================
   VITRINE — wrapper e hero
   =========================================================== */
.mf-loja-arquivo,
.mf-loja-produto,
.mf-pagina {
  background: #0a0a0a;
  color: #fff;
}
.mf-loja-hero {
  padding: 140px 24px 34px; /* topo compensa o header flutuante */
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 55%),
    #0a0a0a;
}
.mf-loja-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  color: #fff;
}
.mf-loja-hero-sub {
  margin: 0 auto;
  max-width: 520px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
.mf-loja-arquivo-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px 90px;
}
.mf-loja-produto-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 130px 24px 90px; /* topo compensa o header flutuante */
}
.mf-loja-arquivo .woocommerce-breadcrumb,
.mf-loja-produto .woocommerce-breadcrumb {
  margin-bottom: 26px !important;
}

/* ===========================================================
   PRODUTO ÚNICO — layout, galeria, abas
   =========================================================== */
.mf-loja-produto div.product {
  color: #fff;
}
/* Galeria: imagem principal + miniaturas. */
.mf-loja-produto .woocommerce-product-gallery {
  margin-bottom: 26px !important;
}
.mf-loja-produto .woocommerce-product-gallery .flex-viewport {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  background: #fff;
}
.mf-loja-produto .woocommerce-product-gallery ol.flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px !important;
  padding: 0;
}
.mf-loja-produto .woocommerce-product-gallery ol.flex-control-thumbs li {
  width: 76px !important;
  float: none !important;
}
.mf-loja-produto .woocommerce-product-gallery ol.flex-control-thumbs li img {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  background: #fff;
}
.mf-loja-produto .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.mf-loja-produto .woocommerce-product-gallery ol.flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: rgba(96, 165, 250, 0.7);
}
.mf-loja-produto .woocommerce-product-gallery__trigger {
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: 50%;
}

/* Resumo (coluna direita). */
.mf-loja-produto .summary .product_title {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 10px;
}
.mf-loja-produto .summary .woocommerce-product-rating .star-rating {
  color: #f59e0b;
}
.mf-loja-produto .summary form.cart {
  margin: 22px 0 !important;
}

/* Selos de confiança no produto. */
.mf-prod-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 6px 0 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.mf-prod-selos span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.mf-prod-selos svg { color: #60a5fa; flex: 0 0 auto; }
.mf-prod-pag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mf-prod-pag-rotulo {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.mf-prod-pag-chip {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* Abas (Descrição / Avaliações). */
.mf-loja-produto .woocommerce-tabs {
  margin-top: 46px !important;
  clear: both;
}
.mf-loja-produto .woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex;
  gap: 6px;
}
.mf-loja-produto .woocommerce-tabs ul.tabs::before,
.mf-loja-produto .woocommerce-tabs ul.tabs li::before,
.mf-loja-produto .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}
.mf-loja-produto .woocommerce-tabs ul.tabs li {
  border-radius: 10px 10px 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mf-loja-produto .woocommerce-tabs ul.tabs li a {
  padding: 13px 20px !important;
  font-weight: 700 !important;
  font-size: 14.5px;
}
.mf-loja-produto .woocommerce-tabs ul.tabs li.active {
  background: rgba(59, 130, 246, 0.1) !important;
  border-bottom: 2px solid #3b82f6 !important;
}
.mf-loja-produto .woocommerce-tabs .panel {
  padding: 26px 4px 0 !important;
  font-size: 15px;
  line-height: 1.7;
}
.mf-loja-produto .woocommerce-tabs .panel h2:first-of-type { display: none; }
.mf-loja-produto .woocommerce-tabs .panel h2,
.mf-loja-produto .woocommerce-tabs .panel h3 { color: #fff; }

/* ===========================================================
   RELACIONADOS / UPSELLS — mesma grade uniforme da vitrine
   (o Woo usa float aqui; viram cards de altura idêntica)
   =========================================================== */
.mf-loja-produto .related.products ul.products,
.mf-loja-produto .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}
.mf-loja-produto .related.products ul.products::before,
.mf-loja-produto .related.products ul.products::after,
.mf-loja-produto .upsells.products ul.products::before,
.mf-loja-produto .upsells.products ul.products::after {
  display: none !important;
}
.mf-loja-produto .related.products ul.products li.product,
.mf-loja-produto .upsells.products ul.products li.product {
  position: relative;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.mf-loja-produto .related.products li.product .woocommerce-LoopProduct-link,
.mf-loja-produto .upsells.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Título com 2 linhas fixas = todos os cards do mesmo tamanho. */
.mf-loja-produto .related.products li.product .woocommerce-loop-product__title,
.mf-loja-produto .upsells.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
/* Preço/parcelas empurrados pro pé (alinhados entre cards). */
.mf-loja-produto .related.products li.product .price,
.mf-loja-produto .upsells.products li.product .price {
  margin-top: auto !important;
  margin-bottom: 2px;
}
.mf-loja-produto .related.products li.product .mf-card-parcelas,
.mf-loja-produto .upsells.products li.product .mf-card-parcelas {
  padding-bottom: 4px;
}
/* Botão circular +carrinho na foto (igual à vitrine). */
.mf-loja-produto .related.products li.product .button,
.mf-loja-produto .upsells.products li.product .button {
  position: absolute !important;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.7'/%3E%3Ccircle cx='17' cy='20' r='1.7'/%3E%3Cpath d='M2 3h2l2.4 11.5a1 1 0 0 0 1 .8h9.5a1 1 0 0 0 1-.8L19.5 8H5.2'/%3E%3Cpath d='M12 3.5v4M10 5.5h4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.mf-loja-produto .related.products li.product .button.added,
.mf-loja-produto .upsells.products li.product .button.added {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 10 18.5 20 6.5'/%3E%3C/svg%3E") !important;
}
.mf-loja-produto .related.products li.product a.added_to_cart,
.mf-loja-produto .upsells.products li.product a.added_to_cart {
  display: none !important;
}

/* CTA depois dos relacionados. */
.mf-rel-cta {
  clear: both;
  margin: 46px auto 0;
  padding: 34px 24px;
  max-width: 720px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.mf-rel-cta p {
  margin: 0 0 18px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.mf-rel-cta-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* Botões do CTA (o home.css não carrega em páginas de produto). */
.mf-rel-cta .mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.mf-rel-cta .mf-btn-solido,
.mf-rel-cta .mf-btn-solido:hover,
.mf-rel-cta .mf-btn-solido:visited {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
}
.mf-rel-cta .mf-btn-solido:hover { box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35); }
.mf-rel-cta .mf-btn-contorno,
.mf-rel-cta .mf-btn-contorno:hover,
.mf-rel-cta .mf-btn-contorno:visited {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}
.mf-rel-cta .mf-btn-contorno:hover { background: rgba(255, 255, 255, 0.08) !important; }
.mf-rel-cta .mf-btn:active { transform: scale(0.97); }

@media (max-width: 1024px) {
  .mf-loja-produto .related.products ul.products,
  .mf-loja-produto .upsells.products ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .mf-loja-produto .related.products ul.products,
  .mf-loja-produto .upsells.products ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mf-rel-cta { padding: 26px 18px; }
  .mf-rel-cta .mf-btn { width: 100%; }
}

/* Relacionados / upsells. */
.mf-loja-produto .related.products,
.mf-loja-produto .upsells.products {
  margin-top: 54px;
  clear: both;
}
.mf-loja-produto .related.products > h2,
.mf-loja-produto .upsells.products > h2 {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 22px;
}

/* ===========================================================
   CHECKOUT — layout 2 colunas (dados | resumo do pedido)
   =========================================================== */
.mf-checkout form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  grid-template-areas:
    "dados resumo"
    "dados pagamento";
  align-items: start;
  gap: 24px 34px;
}
.mf-checkout form.checkout > .woocommerce-notices-wrapper,
.mf-checkout form.checkout > .woocommerce-error,
.mf-checkout form.checkout > .woocommerce-info,
.mf-checkout form.checkout > .woocommerce-message {
  grid-column: 1 / -1;
}
.mf-checkout #customer_details { grid-area: dados; }
.mf-checkout #order_review_heading { grid-area: resumo; margin: 0 0 14px !important; }
.mf-checkout #order_review {
  grid-area: pagamento;
  position: sticky;
  top: 96px;
}
/* Dentro de "dados", billing e adicionais empilham (largura total). */
.mf-checkout #customer_details.col2-set { display: block; }
.mf-checkout #customer_details .col-1,
.mf-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.mf-checkout #customer_details .col-2 { margin-top: 8px; }
/* Caixa do resumo destacada. */
.mf-checkout #order_review {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.03);
}
.mf-checkout #order_review_heading {
  font-size: 18px !important;
  font-weight: 800 !important;
}
@media (max-width: 900px) {
  .mf-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr;
    grid-template-areas: "dados" "resumo" "pagamento";
  }
  .mf-checkout #order_review { position: static; }
}

/* ===========================================================
   CHECKOUT — formulário escuro completo
   =========================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #141414 !important;
  color: #fff !important;
  font-size: 14.5px !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none !important;
  border-color: rgba(96, 165, 250, 0.7) !important;
}
.woocommerce form .form-row label {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13.5px;
  font-weight: 600;
}
.woocommerce form .form-row .required { color: #f87171 !important; }

/* Select2 (país/estado) no escuro. */
.select2-container--default .select2-selection--single {
  height: auto !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #141414 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  line-height: 1.5 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
}
.select2-dropdown {
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #3b82f6 !important;
}
.select2-search--dropdown .select2-search__field {
  background: #0a0a0a !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-radius: 8px;
}

/* Títulos e caixas do checkout. */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
#order_review_heading {
  color: #fff !important;
  font-weight: 800;
}
.woocommerce-checkout #payment {
  background: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 18px !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  color: rgba(255, 255, 255, 0.85);
}
.woocommerce-checkout #payment div.payment_box {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-radius: 10px;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.woocommerce-checkout #payment div.form-row.place-order { padding: 18px !important; }
#place_order {
  width: 100%;
  padding: 15px 26px !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  transition: transform 0.12s ease, box-shadow 0.2s ease !important;
}
#place_order:hover { box-shadow: 0 10px 28px rgba(59, 130, 246, 0.4); }
#place_order:active { transform: scale(0.98); }

/* Tabela de revisão do pedido. */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Cupom / login no topo do checkout. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
  border-radius: 12px;
}
.woocommerce form.checkout_coupon,
.woocommerce form.login {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  background: #121212;
}

/* ===========================================================
   CARRINHO (página /cart/) — layout lado a lado + cores
   =========================================================== */
/* Itens à esquerda, totais à direita. */
.mf-carrinho .mf-conta-inner .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}
.mf-carrinho .mf-conta-inner .woocommerce > .woocommerce-notices-wrapper,
.mf-carrinho .mf-conta-inner .woocommerce > .woocommerce-message,
.mf-carrinho .mf-conta-inner .woocommerce > .woocommerce-info {
  grid-column: 1 / -1;
}
.mf-carrinho form.woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
  margin: 0;
}
.mf-carrinho .cart-collaterals {
  grid-column: 2;
  width: 100% !important;
  margin: 0 !important;
}
.mf-carrinho .cart-collaterals .cart_totals {
  width: 100% !important;
  float: none !important;
}
@media (max-width: 900px) {
  .mf-carrinho .mf-conta-inner .woocommerce { grid-template-columns: 1fr; }
  .mf-carrinho .cart-collaterals { grid-column: 1; }
}

/* Cores legíveis (o kit pintava links de rosa). */
.mf-carrinho table.cart td.product-name a,
.mf-carrinho table.cart td.product-name a:visited {
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
}
.mf-carrinho table.cart td.product-name a:hover { color: #93c5fd !important; }
.mf-carrinho .cart_totals a,
.mf-carrinho .woocommerce-shipping-calculator a,
.mf-carrinho a.shipping-calculator-button {
  color: #60a5fa !important;
}
.mf-carrinho .woocommerce-shipping-destination { color: rgba(255, 255, 255, 0.7); }

/* Botão X de remover — padrão dos botões de fechar do site. */
.mf-carrinho table.cart a.remove,
.woocommerce-cart table.cart a.remove {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 0 auto;
  transform-origin: center center;
  transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.2s ease !important;
}
.mf-carrinho table.cart a.remove:hover,
.woocommerce-cart table.cart a.remove:hover {
  background: #dc2626 !important;
  color: #fff !important;
  transform: rotate(90deg) scale(1.06);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.55);
}

/* ===========================================================
   CARRINHO (página) — refinos
   =========================================================== */
.woocommerce-cart .cart_totals {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  background: #121212;
}
.woocommerce-cart table.cart img {
  border-radius: 10px;
  background: #fff;
}
.woocommerce a.remove {
  color: #f87171 !important;
}
.woocommerce a.remove:hover {
  background: #dc2626 !important;
  color: #fff !important;
}
.woocommerce-cart table.cart td.actions .button,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Campos com autofill do navegador no escuro. */
.woocommerce input,
.woocommerce select,
.woocommerce textarea { color-scheme: dark; }

/* ===========================================================
   MINHA CONTA (/my-account/) — tema escuro
   =========================================================== */
body.woocommerce-account { background: #0a0a0a; color: #fff; }

/* Tag azul do hero (o template da conta usa o woo.css). */
.mf-loja-hero .mf-sec-tag {
  display: inline-block;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #60a5fa;
}
.mf-conta-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 24px 90px;
}
.mf-conta { background: #0a0a0a; }

/* Neutraliza caixas brancas do widget do Elementor. */
body.woocommerce-account .elementor-widget-woocommerce-my-account,
body.woocommerce-account .e-my-account-tab,
body.woocommerce-account .e-my-account-tab > .woocommerce {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Deslogado: cartões de Entrar / Cadastrar. --- */
body.woocommerce-account .u-columns { gap: 22px; }
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 26px 24px !important;
}
body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  margin-bottom: 14px;
}
body.woocommerce-account form.login,
body.woocommerce-account form.register {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.woocommerce-account .woocommerce-form-login__rememberme {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13.5px;
}
body.woocommerce-account .woocommerce-LostPassword a {
  color: #60a5fa !important;
  font-size: 13.5px;
}
body.woocommerce-account .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce-privacy-policy-text p {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12.5px;
}
body.woocommerce-account button.woocommerce-form-login__submit,
body.woocommerce-account button.woocommerce-form-register__submit {
  width: 100%;
  padding: 13px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  font-weight: 800 !important;
  transition: transform 0.12s ease, box-shadow 0.2s ease !important;
}
body.woocommerce-account button.woocommerce-form-login__submit:hover,
body.woocommerce-account button.woocommerce-form-register__submit:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

/* --- Logado: navegação da conta.
   O Woo flutua o menu numa coluna estreita (30%) — viramos uma barra
   horizontal centralizada em cima, com o conteúdo em largura total. --- */
body.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
  margin: 0 0 30px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-account .e-my-account-tabs-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a,
body.woocommerce-account .e-my-account-tabs-nav li a {
  display: block;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
body.woocommerce-account .e-my-account-tabs-nav li a:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(59, 130, 246, 0.1);
  color: #fff !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .e-my-account-tabs-nav li.e-my-account-tab__dashboard--active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li[class*="--active"] a {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* Conteúdo da conta. */
body.woocommerce-account .woocommerce-MyAccount-content {
  color: rgba(255, 255, 255, 0.8);
}
body.woocommerce-account .woocommerce-MyAccount-content a { color: #60a5fa; }
body.woocommerce-account .woocommerce-MyAccount-content .button {
  border-radius: 10px !important;
  background: #fff !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Endereços (cartões). */
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-Addresses .col-2 {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px;
}
body.woocommerce-account .woocommerce-Address-title h3 { color: #fff; }
body.woocommerce-account address { color: rgba(255, 255, 255, 0.7); font-style: normal; }

/* Fieldsets (trocar senha etc.). */
body.woocommerce-account fieldset {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px;
  margin: 18px 0;
}
body.woocommerce-account fieldset legend {
  color: #fff;
  font-weight: 700;
  padding: 0 8px;
}

@media (max-width: 767px) {
  body.woocommerce-account .u-column1,
  body.woocommerce-account .u-column2 { padding: 20px 16px !important; }
}

/* ===========================================================
   VITRINE MARKETPLACE — chips + sidebar de filtros
   =========================================================== */
.mf-loja-hero--compacto { padding-bottom: 22px; }

/* Chips de categorias. */
.mf-chips {
  display: flex;
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4px 24px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mf-chips::-webkit-scrollbar { display: none; }
.mf-chip {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.mf-chip small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 3px;
}
.mf-chip:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(59, 130, 246, 0.1);
  transform: translateY(-2px);
}
.mf-chip--ativo {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}
.mf-chip--ativo small { color: rgba(0, 0, 0, 0.5); }

/* Layout: sidebar + produtos. */
.mf-loja-layout {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.mf-loja-main { min-width: 0; }

/* Sidebar. */
.mf-filtros {
  position: sticky;
  top: 96px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.mf-filtros summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mf-filtros summary::-webkit-details-marker { display: none; }
.mf-filtros summary svg { color: #60a5fa; }
.mf-filtros-corpo { padding: 6px 18px 18px; }
.mf-filtro-bloco { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mf-filtro-bloco:last-of-type { border-bottom: none; }
.mf-filtro-bloco h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60a5fa;
}

/* Busca. */
.mf-busca-linha { display: flex; gap: 8px; }
.mf-busca-linha input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #141414;
  color: #fff;
  font-size: 13.5px;
}
.mf-busca-linha button {
  flex: 0 0 auto;
  width: 40px;
  border-radius: 10px;
  border: none;
  background: #fff !important;
  color: #000 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Árvore de categorias. */
.mf-cats, .mf-cats-sub { list-style: none; margin: 0; padding: 0; }
.mf-cats > li { margin-bottom: 2px; }
.mf-cats a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.mf-cats a small { color: rgba(255, 255, 255, 0.35); font-size: 11px; }
.mf-cats a:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; }
.mf-cat--ativa > a {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #fff !important;
  font-weight: 700;
}
.mf-cats-sub {
  margin: 2px 0 6px 12px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.mf-cats-sub a { font-size: 12.5px; padding: 6px 10px; }

/* Preço. */
.mf-preco-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.4);
}
.mf-preco-linha input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #141414;
  color: #fff;
  font-size: 13.5px;
}
.mf-filtro-aplicar {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #fff !important;
  color: #000 !important;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}
.mf-filtro-aplicar:hover { box-shadow: 0 6px 18px rgba(59, 130, 246, 0.35); }
.mf-filtro-aplicar:active { transform: scale(0.97); }

/* Toggle de ofertas. */
.mf-oferta-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
}
.mf-oferta-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mf-oferta-toggle--on .mf-oferta-check {
  background: #3b82f6;
  border-color: #3b82f6;
}
.mf-oferta-toggle--on .mf-oferta-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}

.mf-filtro-limpar {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #f87171 !important;
  text-decoration: none !important;
}
.mf-filtro-limpar:hover { text-decoration: underline !important; }

/* ===========================================================
   CARDS UNIFORMES + MINI-GALERIA + AVALIAÇÃO
   =========================================================== */
/* Grade real (o Woo usa float — trocamos por grid = alturas iguais). */
.mf-loja-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 30px !important;
  width: 100% !important;
}
.mf-loja-main ul.products::before,
.mf-loja-main ul.products::after { display: none !important; }
.mf-loja-main ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.mf-loja-main ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Título com altura fixa (2 linhas) = cards alinhados. */
.mf-loja-main ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
/* Botão sempre no pé do card. */
.mf-loja-main ul.products li.product .button {
  margin-top: auto !important;
  align-self: flex-start;
}
.mf-loja-main ul.products li.product .price { margin-bottom: 4px; }

/* Avaliação (estrelas) — aparece quando o produto tem nota. */
.mf-loja-main ul.products .star-rating {
  margin: 4px 14px 0 !important;
  color: #f59e0b !important;
  font-size: 12px;
}

/* Nota + quantidade de avaliações (ex.: ★★★★☆ 4.8 (37)). */
.mf-aval {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mf-aval .star-rating { margin: 0 !important; }
.mf-aval-qtd {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.mf-loja-main ul.products .mf-aval { margin: 4px 14px 0; }
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; }

/* Parcelamento no card (estilo Mercado Livre). */
.mf-card-parcelas {
  padding: 2px 14px 0;
  font-size: 12.5px;
  color: #4ade80;
}
.mf-card-parcelas .woocommerce-Price-amount { color: #4ade80; }

/* Parcelamento na página do produto. */
.mf-prod-parcelas {
  margin: -4px 0 14px;
  font-size: 14.5px;
  color: #4ade80;
}
.mf-prod-parcelas .woocommerce-Price-amount { color: #4ade80; }

/* Slide de vídeo na galeria (2º item, estilo ML). */
.mf-video-slide {
  background: #000;
}
.mf-video-slide video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: contain;
  background: #000;
}

/* Mini-galeria do card. */
.mf-card-gal {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #fff;
  margin-bottom: 12px;
}
.mf-card-gal-trilho {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mf-card-gal-trilho img {
  flex: 0 0 100%;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  margin: 0 !important;
  aspect-ratio: auto !important;
}
/* Setas: aparecem só no hover. */
.mf-card-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.75) !important;
  color: #fff !important;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mf-card-ant { left: 8px; }
.mf-card-prox { right: 8px; }
li.product:hover .mf-card-seta { opacity: 1; }
.mf-card-seta:hover { background: #3b82f6 !important; }
.mf-card-seta:active { transform: translateY(-50%) scale(0.9); }
/* Bolinhas indicadoras. */
.mf-card-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.mf-card-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.mf-card-dots span.mf-dot-ativo {
  background: #3b82f6;
  transform: scale(1.25);
}

/* ===========================================================
   SCROLL INFINITO
   =========================================================== */
body.mf-infinito .woocommerce-pagination { display: none !important; }
.mf-loja-carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 0 10px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
.mf-loja-fim { color: rgba(255, 255, 255, 0.45); }
.mf-loja-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #3b82f6;
  animation: mf-girar 0.8s linear infinite;
}
.mf-loja-fim .mf-loja-spinner { display: none; }
@keyframes mf-girar { to { transform: rotate(360deg); } }

/* ===========================================================
   CARRINHO MOBILE — imagem visível com o X no canto dela
   =========================================================== */
@media (max-width: 768px) {
  .mf-carrinho table.cart tr.cart_item {
    position: relative;
    display: block;
    min-height: 128px;
    padding: 14px 0 14px 110px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Imagem: o Woo esconde no mobile — trazemos de volta, à esquerda. */
  .mf-carrinho table.cart td.product-thumbnail {
    display: block !important;
    position: absolute;
    left: 0;
    top: 14px;
    width: 94px;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
  .mf-carrinho table.cart td.product-thumbnail::before { display: none !important; }
  .mf-carrinho table.cart td.product-thumbnail img {
    width: 94px !important;
    height: 94px;
    object-fit: cover;
    border-radius: 12px;
  }
  /* X de remover: canto superior direito DA IMAGEM. */
  .mf-carrinho table.cart td.product-remove {
    display: block !important;
    position: absolute;
    left: 72px;
    top: 8px;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    z-index: 2;
  }
  .mf-carrinho table.cart td.product-remove::before { display: none !important; }
  .mf-carrinho table.cart a.remove,
  .woocommerce-cart table.cart a.remove {
    width: 26px !important;
    height: 26px !important;
    font-size: 14px !important;
    background: rgba(10, 10, 10, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }
  /* Demais células empilham à direita da imagem, compactas. */
  .mf-carrinho table.cart td.product-name,
  .mf-carrinho table.cart td.product-price,
  .mf-carrinho table.cart td.product-quantity,
  .mf-carrinho table.cart td.product-subtotal {
    display: block !important;
    padding: 3px 0 !important;
    border: none !important;
    background: none !important;
    text-align: left !important;
  }
  .mf-carrinho table.cart td::before {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
  }
}

/* ===========================================================
   FORMULÁRIOS (conta/checkout) NO MOBILE — campos em coluna única
   (o plugin de campos BR flutua metades e desalinha em tela estreita)
   =========================================================== */
@media (max-width: 768px) {
  body.woocommerce-account .form-row,
  body.woocommerce-account .form-row-first,
  body.woocommerce-account .form-row-last,
  body.woocommerce-account .form-row-wide,
  .woocommerce-checkout .form-row,
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===========================================================
   CARD ESTILO MERCADO LIVRE — sem botão de comprar aparente;
   botãozinho circular +carrinho no canto da foto
   =========================================================== */
.mf-loja-main ul.products li.product { position: relative; }
.mf-loja-main ul.products li.product .button {
  position: absolute !important;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.7'/%3E%3Ccircle cx='17' cy='20' r='1.7'/%3E%3Cpath d='M2 3h2l2.4 11.5a1 1 0 0 0 1 .8h9.5a1 1 0 0 0 1-.8L19.5 8H5.2'/%3E%3Cpath d='M12 3.5v4M10 5.5h4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
.mf-loja-main ul.products li.product .button:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45);
}
/* Spinner do AJAX no lugar do ícone. */
.mf-loja-main ul.products li.product .button.loading {
  background-image: none !important;
}
.mf-loja-main ul.products li.product .button.loading::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 0, 0, 0.2);
  border-top-color: #000;
  animation: mf-girar 0.7s linear infinite;
  margin: 0;
}
/* Link "Ver carrinho" que o Woo injeta após adicionar — o popup já resolve. */
.mf-loja-main ul.products li.product a.added_to_cart { display: none !important; }
/* Check de adicionado. */
.mf-loja-main ul.products li.product .button.added {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 10 18.5 20 6.5'/%3E%3C/svg%3E") !important;
}

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .mf-loja-layout { grid-template-columns: 1fr; gap: 18px; }
  .mf-filtros { position: static; }
}
@media (max-width: 760px) {
  .mf-loja-main ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mf-card-seta { opacity: 1; width: 28px; height: 28px; } /* no touch as setas ficam visíveis */
}
@media (max-width: 560px) {
  .single-product form.cart .single_add_to_cart_button { width: 100%; flex: 1 1 100%; }
  .mf-loja-arquivo-inner { padding: 6px 16px 70px; }
  .mf-loja-produto-inner { padding: 104px 16px 70px; }
  .mf-loja-hero { padding: 108px 18px 26px; }
  .mf-chips { padding: 4px 16px 16px; }
}
