/* ==========================================================================
   MERCADOPEÇAS — camada WooCommerce
   Entra depois da folha do plugin e reveste a loja com a identidade MP.
   Só toca no visual: nada aqui altera comportamento de carrinho ou checkout.
   ========================================================================== */

/* ------------------------------ Botões ---------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .widget_price_filter .price_slider_amount .button {
  background: var(--mp-amarelo);
  color: var(--mp-azul);
  font-family: var(--mp-font-corpo);
  font-weight: 700;
  font-size: var(--mp-fs-base);
  border-radius: var(--mp-r);
  padding: 12px var(--mp-6);
  border: 2px solid transparent;
  line-height: 1.2;
  text-shadow: none;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--mp-amarelo-escuro);
  color: var(--mp-azul);
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--mp-amarelo);
  color: var(--mp-azul);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--mp-amarelo-escuro);
  color: var(--mp-azul);
}
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop .button {
  background: transparent;
  color: var(--mp-azul);
  border-color: var(--mp-azul);
}
.woocommerce #respond input#submit.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled { opacity: .5; }

/* ------------------------------- Preços --------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--mp-cinza-900); font-weight: 700; }
.woocommerce div.product p.price { font-size: var(--mp-fs-2xl); line-height: 1.1; }
.woocommerce ul.products li.product .price { color: var(--mp-cinza-900); }
.woocommerce del { color: var(--mp-cinza-500); font-weight: 400; }
.woocommerce ins { text-decoration: none; }

/* --------------------------- Página do produto --------------------------- */
.woocommerce div.product {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  gap: var(--mp-8); align-items: start;
}
/* O WooCommerce impõe width:48% inline nas duas colunas; aqui quem manda é o grid. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
  float: none !important; width: auto !important; margin: 0;
  background: #fff; border: 1px solid var(--mp-cinza-200);
  border-radius: var(--mp-r); padding: var(--mp-6);
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { max-width: 460px; margin: 0 auto; }
.woocommerce div.product .woocommerce-product-gallery__image { aspect-ratio: 1; display: grid; place-items: center; }
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100%; height: 100%; object-fit: contain;
}

/*
 * Ordem do bloco de compra. Os plugins de frete injetam o simulador onde dá,
 * e ele acabava acima do preço. Aqui a leitura volta a ser a que o cliente
 * espera: o que é, quanto custa, se tem, comprar, e só então calcular o frete.
 */
.woocommerce div.product .summary { display: flex; flex-direction: column; }
.woocommerce div.product .summary > * { order: 50; }
.woocommerce div.product .summary > .product_title { order: 10; }
.woocommerce div.product .summary > .price { order: 20; }
.woocommerce div.product .summary > .woocommerce-product-details__short-description { order: 30; }
.woocommerce div.product .summary > .stock { order: 40; }
.woocommerce div.product .summary > form.cart { order: 45; }
.woocommerce div.product .summary > .product_meta { order: 90; }

/*
 * Dois plugins põem calculadora de frete na mesma tela. Fica a da Calculadora
 * de Frete para o Brasil, que já lê os métodos configurados na zona (Frenet
 * incluso) e tem a melhor interface. O simulador próprio do Frenet sai:
 * dois campos de CEP na mesma página só geram dúvida.
 */
.woocommerce div.product .summary #shipping-simulator,
.woocommerce div.product #shipping-simulator { display: none !important; }

/* Calculadora que fica: encostada no bloco de compra, com a cara do site. */
.woocommerce div.product .summary .idx-calc-shipping,
.woocommerce div.product .summary [class*="calc-shipping"] {
  border-top: 1px solid var(--mp-cinza-200);
  padding-top: var(--mp-5); margin-top: var(--mp-4);
}
.woocommerce div.product .summary [class*="calc-shipping"] button,
.woocommerce div.product .summary [class*="calc-shipping"] .button {
  background: var(--mp-azul); color: #fff; border-radius: var(--mp-r);
  padding: 11px var(--mp-5); border: 0; font-weight: 700; text-transform: none;
}

.woocommerce div.product .product_title { font-size: var(--mp-fs-lg); line-height: 1.3; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }
.woocommerce div.product form.cart { margin-bottom: var(--mp-5); display: flex; gap: var(--mp-3); align-items: center; flex-wrap: wrap; }
.woocommerce div.product form.cart .button {
  flex: 1; min-width: 220px; padding: 15px var(--mp-6);
  font-size: var(--mp-fs-md); white-space: nowrap;
}
.woocommerce .quantity .qty { border: 1px solid var(--mp-cinza-300); border-radius: var(--mp-r); height: 44px; padding: 0 var(--mp-2); }
.woocommerce div.product .stock { color: var(--mp-verde); font-weight: 700; font-size: var(--mp-fs-sm); }
.woocommerce div.product .out-of-stock { color: var(--mp-cinza-700); }
.woocommerce .product_meta { font-size: var(--mp-fs-xs); color: var(--mp-cinza-500); border-top: 1px solid var(--mp-cinza-200); padding-top: var(--mp-4); margin-top: var(--mp-4); }

/* Abas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; gap: var(--mp-1); padding: 0; margin: 0 0 var(--mp-6);
  border-bottom: 2px solid var(--mp-cinza-200); overflow-x: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0 0 -2px; padding: 0;
  border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: var(--mp-3) var(--mp-5); font-weight: 700; color: var(--mp-cinza-500);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--mp-amarelo); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--mp-azul); }
.woocommerce div.product .woocommerce-tabs .panel {
  background: #fff; border: 1px solid var(--mp-cinza-200); border-radius: var(--mp-r); padding: var(--mp-6);
}
.woocommerce table.shop_attributes th { background: var(--mp-cinza-100); color: var(--mp-cinza-700); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { padding: 11px var(--mp-4); border-bottom: 1px solid var(--mp-cinza-200); font-style: normal; }

.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 {
  font-family: var(--mp-font-titulo); text-transform: uppercase;
  font-size: var(--mp-fs-xl); color: var(--mp-azul);
}
.woocommerce .related ul.products, .woocommerce .upsells ul.products {
  display: grid; gap: var(--mp-4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); float: none;
}
.woocommerce .related ul.products li.product, .woocommerce .upsells ul.products li.product { width: auto; float: none; margin: 0; }

/* --------------------------- Grade de produtos --------------------------- */
.woocommerce ul.products {
  display: grid; gap: var(--mp-4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto; float: none; margin: 0; }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--mp-amarelo); color: var(--mp-azul); font-weight: 700;
  font-size: var(--mp-fs-xs); text-transform: uppercase; letter-spacing: .04em;
  min-height: 0; min-width: 0; line-height: 1; padding: 5px 10px; border-radius: var(--mp-r-full);
  top: var(--mp-3); left: var(--mp-3); right: auto; margin: 0;
}

/* --------------------------- Carrinho / checkout ------------------------- */
.woocommerce table.shop_table {
  background: #fff; border: 1px solid var(--mp-cinza-200); border-radius: var(--mp-r);
  border-collapse: collapse; overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--mp-cinza-100); color: var(--mp-cinza-700);
  font-family: var(--mp-font-corpo); font-weight: 700; font-size: var(--mp-fs-sm);
  padding: var(--mp-4);
}
.woocommerce table.shop_table td { padding: var(--mp-4); border-top: 1px solid var(--mp-cinza-200); }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { font-weight: 700; }
.woocommerce-cart table.cart img { width: 72px; border-radius: var(--mp-r-sm); border: 1px solid var(--mp-cinza-200); }

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: #fff; border: 1px solid var(--mp-cinza-200); border-radius: var(--mp-r); padding: var(--mp-6);
}
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3,
.woocommerce-additional-fields h3, #order_review_heading {
  font-family: var(--mp-font-titulo); text-transform: uppercase;
  font-size: var(--mp-fs-lg); color: var(--mp-azul);
}

.woocommerce form .form-row { padding: 0; margin-bottom: var(--mp-4); }
.woocommerce form .form-row label { font-size: var(--mp-fs-sm); font-weight: 700; margin-bottom: var(--mp-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  border: 1px solid var(--mp-cinza-300); border-radius: var(--mp-r);
  padding: 11px var(--mp-4); height: auto; background: #fff; line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none; border-color: var(--mp-azul); box-shadow: 0 0 0 3px var(--mp-azul-100);
}
.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
  border: 1px solid var(--mp-cinza-200); border-radius: var(--mp-r); background: #fff; padding: var(--mp-6);
}

/* ------------------- medidor de força da senha --------------------------
 * O WordPress só insere a barra de força quando o campo de senha perde o
 * foco. Isso acontece exatamente no mousedown do botão de cadastrar: a barra
 * entra, empurra o botão ~29px para baixo, e o mouseup cai fora dele. O
 * navegador então não gera o evento de clique e, para o cliente, o botão
 * simplesmente não funciona na primeira tentativa.
 *
 * Tirar a barra do fluxo elimina o pulo. O padding reserva o espaço para ela
 * não encobrir o que vem depois.
 * -------------------------------------------------------------------- */
.woocommerce form .form-row,
.woocommerce-form .form-row,
.woocommerce-form .woocommerce-form-row { position: relative; }

.woocommerce-password-strength,
.woocommerce-password-hint {
  position: absolute; left: 0; right: 0; top: 100%;
  margin: 6px 0 0; z-index: 2; font-size: var(--mp-fs-xs);
  border-radius: var(--mp-r-sm); padding: 4px 10px;
}

/* Espaço reservado onde o navegador entende :has() — evita sobreposição. */
.woocommerce-form .form-row:has(input[type="password"]),
.woocommerce-form .woocommerce-form-row:has(input[type="password"]),
.woocommerce form .form-row:has(input[type="password"]) { padding-bottom: 34px; }
.woocommerce-checkout #payment { background: var(--mp-cinza-100); border-radius: var(--mp-r); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--mp-cinza-200); }
.woocommerce-checkout #payment div.payment_box { background: var(--mp-azul-100); color: var(--mp-cinza-900); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--mp-azul-100); }
.woocommerce-checkout #payment div.form-row.place-order { padding: var(--mp-5); }

/* -------------------------------- Avisos --------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  border-top: 0; border-left: 4px solid var(--mp-amarelo);
  background: var(--mp-amarelo-claro); color: var(--mp-cinza-900);
  border-radius: 0 var(--mp-r) var(--mp-r) 0; padding: var(--mp-4) var(--mp-5) var(--mp-4) var(--mp-12);
}
.woocommerce-info { border-left-color: var(--mp-azul); background: var(--mp-azul-100); }
.woocommerce-message { border-left-color: var(--mp-verde); background: var(--mp-verde-bg); }
.woocommerce-error { border-left-color: var(--mp-vermelho); background: var(--mp-vermelho-bg); }
.woocommerce-message::before { color: var(--mp-verde); }
.woocommerce-info::before { color: var(--mp-azul); }
.woocommerce-error::before { color: var(--mp-vermelho); }

/* ------------------------------ Minha conta ------------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--mp-cinza-200); margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--mp-3) var(--mp-4); font-weight: 700; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--mp-azul); background: var(--mp-azul-100); }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff; border: 1px solid var(--mp-cinza-200); border-radius: var(--mp-r); padding: var(--mp-5);
}

/* ------------------------------ Ordenação -------------------------------- */
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--mp-cinza-300); border-radius: var(--mp-r);
  padding: 9px var(--mp-4); background: #fff; font-size: var(--mp-fs-sm);
}
.woocommerce .woocommerce-ordering { margin: 0; float: none; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: var(--mp-2); justify-content: center; margin-top: var(--mp-8); }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--mp-cinza-300); border-radius: var(--mp-r); padding: 8px 14px; background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mp-azul); color: #fff; border-color: var(--mp-azul);
}

/* ------------------------------- Widgets --------------------------------- */
.mp-filtros .widget_price_filter .ui-slider .ui-slider-range,
.mp-filtros .widget_price_filter .ui-slider .ui-slider-handle { background: var(--mp-azul); }
.mp-filtros ul { list-style: none; padding: 0; margin: 0; }
.mp-filtros li { font-size: var(--mp-fs-sm); margin-bottom: var(--mp-2); }
.mp-filtros .count { color: var(--mp-cinza-500); font-size: var(--mp-fs-xs); }

/* --------------------- Seletor de moeda (CURCY) -------------------------- */
/* O seletor vive na barra escura do topo. */
.mp-header__topo .woo-multi-currency,
.mp-header__topo .wmc-currency-wrapper { display: inline-flex; align-items: center; }
.mp-header__topo .wmc-currency-wrapper a,
.mp-header__topo .woo-multi-currency a { color: rgba(255, 255, 255, .88); }
.mp-header__topo select {
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--mp-r-full);
  padding: 3px 10px; font-size: var(--mp-fs-xs); cursor: pointer;
}
.mp-header__topo select option { color: var(--mp-cinza-900); }

/* Todo widget próprio do plugin some: o seletor do tema, no topo, é o único.
   Duas trocas de moeda na mesma tela confundem quem compra. */
.woo-multi-currency,
.wmc-currency-wrapper,
.wmc-fixed-left, .wmc-fixed-right { display: none !important; }

/* --------------------- Imagem do cartão de produto ----------------------- */
.mp-card__figura img,
.mp-item__figura img { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------ Responsivo ------------------------------- */
@media (max-width: 1024px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: var(--mp-6); }
}
@media (max-width: 780px) {
  .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--mp-3); }
  .woocommerce table.shop_table_responsive tr td { padding: var(--mp-3); }
}

/* ==========================================================================
   SEO — trilha, abertura das páginas de máquina e compatibilidade
   ========================================================================== */

.mp-trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-2);
  margin: var(--mp-5) 0 var(--mp-4);
  font-size: var(--mp-fs-sm);
  color: var(--mp-cinza-500);
}

.mp-trilha a { color: var(--mp-cinza-700); text-decoration: none; }
.mp-trilha a:hover { color: var(--mp-azul); text-decoration: underline; }
.mp-trilha__sep { color: var(--mp-cinza-300); }
.mp-trilha [aria-current="page"] { color: var(--mp-cinza-900); font-weight: 600; }

.mp-intro-maquina {
  max-width: 70ch;
  margin: 0 0 var(--mp-6);
  color: var(--mp-cinza-700);
  font-size: var(--mp-fs-base);
  line-height: 1.65;
}

.mp-intro-maquina p { margin: 0; }

.mp-compat {
  grid-column: 1 / -1;
  margin: var(--mp-8) 0 0;
  padding: var(--mp-5) var(--mp-6);
  background: var(--mp-cinza-100);
  border-radius: var(--mp-r-lg);
}

.mp-compat__titulo {
  margin: 0 0 var(--mp-3);
  font-family: var(--mp-font-destaque);
  font-size: var(--mp-fs-md);
  color: var(--mp-azul);
}