/*
Theme Name: Astra Child — MIC Camisas de Time
Template: astra
Version: 1.1.0
Description: Child theme da migração Shopify → WooCommerce (ARPEE). Identidade visual do tema "19/06/26 - Tema-mic-preco-pix": azul MIC, Archivo Narrow + Assistant.
Author: ARPEE Mídias Digitais
*/

/* ===== Design tokens (tema Shopify da MIC) ===== */
:root {
  --mic-azul: #034bb2;
  --mic-azul-2: #334fb4;
  --mic-texto: #121212;
  --mic-fundo: #ffffff;
  --mic-fundo-suave: #f6f6f6;
  --mic-escuro-bg: #000000;
  --mic-escuro-texto: #ffffff;
  --mic-frete-verde: #22c55e;
  --mic-frete-verde-escuro: #166534;
  --mic-frete-fundo: #f0fdf4;
  --mic-alerta: #ef4444;

  /* Variáveis globais do Astra */
  --ast-global-color-0: var(--mic-azul);
  --ast-global-color-1: var(--mic-azul-2);
  --ast-global-color-2: var(--mic-texto);
  --ast-global-color-3: var(--mic-texto);
  --ast-global-color-4: var(--mic-fundo);
  --ast-global-color-5: var(--mic-fundo-suave);
}

/* ===== Tipografia ===== */
body, button, input, select, textarea {
  font-family: 'Assistant', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
}

/* ===== Botões e elementos WooCommerce no azul MIC ===== */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.wp-block-button__link,
.ast-button, .button, .menu-toggle {
  background-color: var(--mic-azul);
  color: #ffffff;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background-color: var(--mic-azul-2);
  color: #ffffff;
}
.woocommerce span.onsale {
  background-color: var(--mic-alerta);
}
.woocommerce .price, .woocommerce div.product p.price {
  color: var(--mic-azul);
}

/* ===== Letreiro rolante (equivalente ao "textorolante" da Shopify) =====
   Uso: <div class="mic-marquee"><span>TEXTO • TEXTO • TEXTO</span></div> */
.mic-marquee {
  overflow: hidden;
  background: var(--mic-escuro-bg);
  color: var(--mic-escuro-texto);
  white-space: nowrap;
  padding: 8px 0;
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mic-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: mic-marquee 18s linear infinite;
}
@keyframes mic-marquee {
  to { transform: translateX(-100%); }
}

/* ===== Barra de anúncio (announcement-bar) =====
   Uso: <div class="mic-announcement">FRETE GRÁTIS ACIMA DE R$X</div> */
.mic-announcement {
  background: var(--mic-azul);
  color: #ffffff;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* ===== Selo de frete grátis / progresso (paleta do carrinho Shopify) ===== */
.mic-frete-barra {
  background: var(--mic-frete-fundo);
  border: 1px solid #bbf7d0;
  color: var(--mic-frete-verde-escuro);
  border-radius: 8px;
  padding: 10px 14px;
}

/* ===== Seções escuras de destaque (esquema 3 da Shopify) ===== */
.mic-secao-escura {
  background: var(--mic-escuro-bg);
  color: var(--mic-escuro-texto);
}
.mic-secao-escura h1, .mic-secao-escura h2, .mic-secao-escura h3 {
  color: var(--mic-escuro-texto);
}

/* ===== Card da vitrine: segunda imagem no hover (efeito do tema Shopify) ===== */
.astra-shop-thumbnail-wrap {
  position: relative;
}
.astra-shop-thumbnail-wrap .mic-hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.astra-shop-thumbnail-wrap:hover .mic-hover-image {
  opacity: 1;
}

/* ===== Paginação da vitrine (estilo Dawn/Shopify: números soltos, centralizados) ===== */
.woocommerce nav.woocommerce-pagination {
  width: 100%;
  text-align: center;
  margin: 40px 0 10px;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none !important;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0;
  float: none;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  color: rgba(18, 18, 18, 0.75) !important;
  font-family: "Assistant", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  color: var(--mic-texto) !important;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  color: var(--mic-texto) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 8px;
  height: 1px;
  background: currentColor;
}

/* ===== Filtros da lateral (estilo Dawn/Shopify: tipografia 14-15px, seções com separador) ===== */
.sidebar-main {
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
}
.sidebar-main .mic-filtrar-titulo {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.85) !important;
  margin: 0 0 15px;
}
.sidebar-main .ast-woo-sidebar-widget {
  margin-bottom: 0;
  border: none;
  padding: 0;
}
.sidebar-main .widget_price_filter .widget-title {
  display: none !important;
}

/* Seções recolhíveis (Disponibilidade / Preço), como os facets verticais da Dawn */
.sidebar-main .mic-facet {
  border-top: 1px solid rgba(18, 18, 18, 0.1);
}
.sidebar-main .mic-facet summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 2px 15px 0;
  font-size: 14px;
  font-weight: 400;
  color: rgba(18, 18, 18, 0.75);
  cursor: pointer;
  list-style: none;
}
.sidebar-main .mic-facet summary::-webkit-details-marker {
  display: none;
}
.sidebar-main .mic-facet summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin: -3px 4px 0 0;
  transition: transform 0.15s ease;
}
.sidebar-main .mic-facet[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.sidebar-main .mic-facet-lista {
  display: flex;
  flex-direction: column;
  padding: 0 0 12px;
}
.sidebar-main .mic-facet-lista label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
  cursor: pointer;
  margin: 0;
}
.sidebar-main .mic-facet-lista input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #121212;
  margin: 0;
}
.sidebar-main .mic-facet-corpo {
  padding: 6px 2px 16px;
}
/* Slider de preço no traço da Dawn */
.sidebar-main .price_slider.ui-slider {
  height: 2px;
  background: rgba(18, 18, 18, 0.1);
  border: none;
  margin: 10px 6px 24px;
}
.sidebar-main .price_slider .ui-slider-range {
  background: #121212;
}
.sidebar-main .price_slider .ui-slider-handle {
  width: 12px;
  height: 12px;
  top: -5px;
  background: #121212;
  border: none;
  border-radius: 50%;
}
/* Rodapé do slider: faixa de valores em cima, botão embaixo, sem quebra torta */
.sidebar-main .price_slider_amount {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
}
.sidebar-main .price_slider_amount .price_label {
  font-size: 14px;
  color: rgba(18, 18, 18, 0.75);
}
.sidebar-main .price_slider_amount .button {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 18px;
}
.sidebar-main .price_slider_amount .clear {
  display: none;
}

/* ===== Respiro entre o cabeçalho e o conteúdo (como a Shopify) ===== */
body.ast-woo-shop-archive #content > .ast-container {
  padding-top: 42px;
}
body.single-product #content > .ast-container {
  padding-top: 28px;
}

/* ===== Sidebar da vitrine na largura da Shopify (260px) ===== */
@media (min-width: 922px) {
  body.ast-woo-shop-archive.ast-left-sidebar #content > .ast-container {
    grid-template-columns: 260px 1fr !important;
  }
  body.ast-woo-shop-archive #secondary {
    width: auto !important;
    padding-right: 0 !important;
  }
}

/* ===== Badge "Esgotado" no selo azul da Dawn — grade da loja/categorias ===== */
ul.products li.product .ast-shop-product-out-of-stock {
  position: absolute;
  left: 10px;
  bottom: 10px;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  transform: none !important;
  margin: 0 !important;
  background: var(--mic-azul) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  line-height: 1 !important;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  text-transform: none !important;
}

/* ===== Badge "Esgotado" nos carrosséis da home (Essential Addons) ===== */
.eael-onsale.outofstock {
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  right: auto !important;
  background: var(--mic-azul) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  box-shadow: none !important;
}
.eael-onsale.outofstock::before {
  display: none !important;
}
.eael-onsale.outofstock::after {
  content: "Esgotado";
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffffff;
}

/* ===== Página de produto no layout da Shopify (galeria larga + resumo sticky) ===== */
body.single-product #content .ast-container {
  max-width: 1600px !important;
}
.mic-product-cols {
  display: flex !important;
  gap: 4%;
  align-items: flex-start;
}
.mic-product-cols .woocommerce-product-gallery {
  width: 61% !important;
  max-width: none !important;
  float: none !important;
}
.mic-product-cols .summary.entry-summary {
  width: 35% !important;
  float: none !important;
  position: sticky;
  top: 24px;
  margin-top: 0 !important;
}
@media (max-width: 921px) {
  .mic-product-cols {
    display: block !important;
  }
  .mic-product-cols .woocommerce-product-gallery,
  .mic-product-cols .summary.entry-summary {
    width: 100% !important;
    position: static;
  }
}

/* Título e preço na tipografia da Shopify */
.single-product .summary .product_title {
  font-family: "Inter Tight", sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
}
.single-product .summary > .price {
  font-size: 25px !important;
  font-weight: 400 !important;
  color: var(--mic-texto) !important;
}
.single-product .summary > .price .woocommerce-Price-amount {
  font-weight: 400 !important;
}

/* Rótulo "Tamanho" visível acima das opções, como na Shopify */
.single-product .summary table.variations,
.single-product .summary .variations tbody,
.single-product .summary .variations tr,
.single-product .summary .variations th,
.single-product .summary .variations td {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
.single-product .summary .variations th.label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(18, 18, 18, 0.75) !important;
  margin: 12px 0 8px !important;
}

/* Pills de tamanho (CFVSW) no estilo Dawn */
.cfvsw-swatches-option {
  background: #f5f5f5 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.cfvsw-swatches-option.cfvsw-selected-swatch {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}
.cfvsw-swatches-option[style*="line-through"],
.cfvsw-swatches-option.cfvsw-disabled-option,
.cfvsw-swatches-option.cfvsw-unavailable-option {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Formulário de compra em coluna: quantidade em cima, botão azul largo embaixo */
.single-product form.cart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.single-product form.cart .quantity {
  margin: 0 !important;
}
.single-product form.cart .single_add_to_cart_button {
  width: 100% !important;
  margin: 0 !important;
}
.single-product .single_add_to_cart_button::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7.2 14h9.9a2 2 0 0 0 1.9-1.4L21.6 6H5.8L5.2 3H2v2h1.6l2.7 9.6A2 2 0 0 0 7.2 14z"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7.2 14h9.9a2 2 0 0 0 1.9-1.4L21.6 6H5.8L5.2 3H2v2h1.6l2.7 9.6A2 2 0 0 0 7.2 14z"/%3E%3C/svg%3E') center / contain no-repeat;
}

/* "Desconto progressivo" como o selo preto VALOR PARA ATACADO da Shopify */
.mic-desc-prog {
  display: inline-block !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 14px !important;
  margin: 14px 0 4px !important;
}

/* Acordeão ATACADO emenda com os demais sem borda dupla */
.mic-acc-atacado {
  margin-bottom: 0 !important;
}
.mic-acc-atacado + .mic-accordions,
.mic-accordions + .mic-accordions {
  margin-top: 0 !important;
  border-top: none !important;
}

/* Relacionados no padrão da Shopify */
.single-product .related.products > h2 {
  font-family: "Inter Tight", sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  text-transform: none;
  text-align: left;
  margin-bottom: 24px;
}

/* Precedência sobre o CSS do Customizer (que carrega depois do child) */
body.single-product #primary.content-area {
  width: 100% !important;
  max-width: none !important;
}
.mic-product-cols div.images.woocommerce-product-gallery {
  width: 61% !important;
  flex: 0 0 61% !important;
}
.mic-product-cols div.summary.entry-summary {
  width: 35% !important;
  flex: 0 0 35% !important;
}
.single-product .summary div.mic-desc-prog {
  display: inline-block !important;
  width: auto !important;
  color: #ffffff !important;
  background: #1a1a1a !important;
  font-size: 12px !important;
  text-align: left !important;
}
.single-product .summary .reset_variations {
  display: none !important;
}

/* Quantidade em cima, botão largo embaixo (vence o CSS do Customizer) */
body.single-product div.product form.cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px;
}
body.single-product div.product form.cart .single_add_to_cart_button {
  width: 100% !important;
}

/* A Shopify não mostra disponibilidade nem preço da variação repetido */
.single-product .summary .woocommerce-variation-availability,
.single-product .summary p.stock,
.single-product .summary .woocommerce-variation-price {
  display: none !important;
}

/* Imagem da tabela de atacado abaixo do botão */
/* O resumo é flex com "order" (CSS do Customizer): form=6, acordeões=7 */
.mic-tabela-atacado,
.summary .mic-tabela-atacado {
  order: 6;
  display: block;
  width: 100%;
  height: auto;
  margin: 18px 0 6px;
  border-radius: 8px;
}

/* Junta o grupo ATACADO com os demais acordeões (sem vão no meio) */
.summary .mic-acc-atacado {
  margin-bottom: 0 !important;
}
.summary .mic-acc-atacado + .mic-accordions {
  margin-top: 0 !important;
  border-top: none !important;
}


/* ===== Produto: sem vao a esquerda e no topo (igual Shopify) =====
   O body usa layout ast-left-sidebar; sem sidebar no produto, o grid do Astra
   reservava a coluna esquerda vazia + #primary com padding-left e margin 64px. */
body.single-product #content > .ast-container {
  display: block !important;
  padding-top: 6px !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
}
body.single-product #primary.content-area {
  padding-left: 0 !important;
  margin-top: 0 !important;
}
@media (max-width: 921px) {
  body.single-product #content > .ast-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Sidebar vazia do layout left-sidebar: os margins dela colapsam e empurram o produto 64px para baixo */
body.single-product #content #secondary {
  display: none !important;
}

/* ===== Resumo do produto: espacos entre textos/valores iguais a Shopify (medidos 22/07) ===== */
/* preco e parcelas formam um bloco (5px); parcelas -> caixa PIX 15px */
.single-product .summary > p.price { margin-bottom: 5px !important; }
.single-product .summary .mic-installments { margin-bottom: 15px !important; }
/* caixa PIX -> selo VALOR PARA ATACADO 15px */
.single-product .summary .mic-pix-box { margin-bottom: 15px !important; }
/* Tamanho -> proximo bloco 14px (a tabela tinha mb16 + div vazio com margem 19) */
.single-product .summary table.variations { margin-bottom: 0 !important; }
.single-product .summary .single_variation_wrap .woocommerce-variation.single_variation { margin: 0 !important; }
/* quantidade -> botao comprar 14px (estavam colados dentro do variation-add-to-cart) */
.single-product .summary .woocommerce-variation-add-to-cart .single_add_to_cart_button { margin-top: 14px !important; }
/* botao -> tabela de atacado -> acordeoes: 25px cada (acordeao ja tem mt25) */
.single-product .summary .mic-tabela-atacado { margin: 25px 0 0 !important; }

/* Ajustes finos do resumo (2a rodada): clearfix do form virava item do flex (gap fantasma 14px) */
body.single-product div.product form.cart::before,
body.single-product div.product form.cart::after { display: none !important; content: none !important; }
/* preco -> parcelas 5px (precisa de ID para vencer o CSS do Customizer, que carrega depois) */
body.single-product #primary .summary > p.price { margin-bottom: 5px !important; }