/* =========================
   CORES BASE
========================= */

:root {
  --color1: #001f3f; /* azul escuro principal */
  --color2: #014f9e; /* azul médio (hover/nav) */
  --color3: rgba(84, 63, 48, 0.85); /* tom do cart sidebar/footer */
  --color4: #6f42c1; /* roxo (bg-purple) */
  --color5: #ff7a1a; /* laranja futuro (escolhi #ff7a1a como base, pode trocar) */
  --color6: #5ca0e8; /* azul claro */
}

:root {
  --color1: #d4001f; /* vermelho vibrante (principal) */
  --color2: #005522; /* verde profundo (folhas escuras) */
  --color3: #222222; /* quase preto para fundos */
  --color4: #66bb6a; /* verde claro (hover/nav) */
  --color5: #ff9800; /* laranja suave para CTAs */
  --color6: #f4f4f4; /* cinza claro de fundo */
}

:root {
  --color1: #b50018; /* vermelho principal do logo */
  --color2: #007a2f; /* verde médio (folhas) */
  --color3: rgba(84, 63, 48, 0.85); /* neutro escuro já usado */
  --color4: #4caf50; /* verde claro para hover/destaques */
  --color5: #ff7a1a; /* laranja futuro (pode ser CTA/botões) */
  --color6: #333333; /* cinza escuro neutro para textos */
}

:root {
  --color1: #9e1b32; /* vermelho fechado, elegante */
  --color2: #2e7d32; /* verde escuro (folhas) */
  --color3: #5d4037; /* marrom para dar tom natural/terra */
  --color4: #81c784; /* verde claro de contraste */
  --color5: #ff7043; /* laranja avermelhado suave */
  --color6: #5d4037; /* quase branco, fundo clean */
}
/* =========================
   Base / Reset leve
========================= */
html,
body {
  font-family: "Hiragino Kaku Gothic ProN", /* macOS */ "Hiragino Sans",
    /* macOS novos */ "Yu Gothic UI", "Yu Gothic", /* Windows */ "Meiryo",
    /* fallback Windows */ "Noto Sans JP",
    /* Google Noto (se instalada) */ -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reserva o espaço da barra de rolagem SEMPRE, evitando o salto */
html {
  scrollbar-gutter: stable both-edges;
}

/* Fallback p/ navegadores sem scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  } /* força a presença do trilho */
}

body {
  background: #f9f9f9 !important;
}

/* Paleta utilitária */
.bg-navy {
  background-color: var(--color1) !important;
} /* exemplo */
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

/* =========================
   Header / Topbar sticky
========================= */
/* Header NÃO sticky */
.ms-header {
  position: static;
  background: #fff;
  border-bottom: 1px solid #ededed;
  transition: transform 0.4s ease;
}

/* APENAS a topbar é sticky (fora do header) */
.ms-topbar {
  position: sticky;
  top: 0;
  z-index: 1030; /* acima do conteúdo */
  background: #fff;
  border-bottom: 1px solid #ededed;
  padding: 10px 0;
  /* opcional: sombra quando colado (sutil e sempre igual) */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* WordPress admin-bar offset */
.admin-bar .ms-topbar {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .ms-topbar {
    top: 46px;
  }
}

/* Menu principal NÃO sticky */
.ms-mainnav {
  position: static;
  padding: 8px 0; /* altura confortável */
}

/* Evitar quebra do sticky por overflow no ancestral */
#wrapper,
#page-content-wrapper {
  overflow: visible;
}

/* =========================
   Menu principal (desktop)
========================= */
.ms-mainnav .navbar-nav .nav-link {
  text-transform: uppercase;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 35px;
  padding: 0 10px;
}

/* Dropdowns (se houver) */
.ms-mainnav .dropdown-item {
  line-height: 25px !important;
  border-bottom: 1px solid #ccc;
  font-size: 13px !important;
  padding: 10px 10px;
  transition: padding-left 0.3s ease-in-out, background-color 0.2s ease-in-out;
}
.ms-mainnav .dropdown-menu li:last-child > .dropdown-item {
  border-bottom: 0;
}

.ms-mainnav .dropdown-item:hover {
  padding-left: 15px !important;
}

/* Garantir que dropdowns do menu principal apareçam sobre o conteúdo */
.ms-mainnav .dropdown-menu {
  z-index: 1040;
}

/* Variação mais “bold” no menu */
.ms-menu-bold .navbar-nav .nav-link {
  font-weight: 700;
}
/* cor on mouse hover */
.ms-mainnav .nav-link:hover {
  background-color: var(--color2);
  color: #fff;
}

/* =========================
   Menu mobile (collapse)
========================= */
/* Indentação dos subitens no menu mobile */
.list-group-item.depth-1 {
  padding-left: 1.5rem;
}
.list-group-item.depth-2 {
  padding-left: 2rem;
}
.list-group-item.depth-3 {
  padding-left: 2.5rem;
}

/* (opcional) diferença visual leve */
.list-group-item.depth-1 {
  background-color: rgba(0, 0, 0, 0.02);
}

/* =========================
   Layout boxed (como no seu CSS)
========================= */
body.boxed #page-content-wrapper {
  background: #fff;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1240px;
  }

  .container-full-width,
  .fullcontainer .container,
  .fullcontainer .container-lg,
  .fullcontainer .container-md,
  .fullcontainer .container-sm,
  .fullcontainer .container-xl {
    max-width: 1600px;
    width: 100% !important;
  }

  /* boxed layout */
  body.boxed #page-content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    min-width: 1140px !important;
    padding: 0 15px;
    background: #fff;
  }
  body.boxed #sidebar-wrapper {
    display: none !important;
  }

  /* Largura da busca, se usar um wrapper .search */
  .ms-topbar .search {
    width: 400px;
  }
}

/* =========================
   Acessórios visuais
========================= */
.navbar-toggler {
  border: none;
}

/* Acessibilidade: reduzir animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .ms-header {
    transition: none;
  }
  .ms-mainnav .dropdown-item {
    transition: none;
  }
}

/* =========================
   Botões estilo "app" (como no seu menu mobile)
========================= */
/* Botão estilo "app" */
.btn-app {
  border-radius: 3px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  color: #6c757d;
  font-size: 12px;
  height: 60px;
  margin: 5px;
  padding: 15px 5px;
  position: relative;
  text-align: center;
  min-width: 60px;
}
.btn-app:focus-visible {
  outline: 2px solid var(--color2); /* fallback por enquanto */
  outline-offset: 2px;
}

.btn-app i {
  display: block;
  font-size: 20px;
  margin-bottom: 1px;
  color: #666;
}
.btn-app > .badge {
  right: 0;
  top: 3px;
  font-size: 10px !important;
}

.btn-app .badge {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 0.35em 0.5em;
  border-radius: 50%;
}

/* Cores de destaque */
.btn-app:hover {
  background: #f8f9fa;
  border-color: #ccc;
  color: #000;
  text-decoration: none;
}

.btn-app:active {
  background: #e9ecef;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Exemplo de cor personalizada para badge */
.bg-purple {
  background-color: var(--color4) !important;
  color: #fff !important;
}

/* =========================
   Product Produto page tweaks
========================= */

/* 0) Contenção imediata (single product apenas) */
body.single-product {
  overflow-x: hidden;
} /* fallback amplo */
@supports (overflow: clip) {
  body.single-product {
    overflow-x: clip;
  } /* usa clip quando disponível */
}

/* Galeria de miniaturas WooCommerce - deixar horizontal e scrollable */
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem; /* espaço entre thumbs */
  overflow-x: auto; /* scroll horizontal */
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  scrollbar-width: thin; /* Firefox */
}

/* Override do estilo padrão das thumbs do WooCommerce */
.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto !important; /* libera o tamanho natural */
  float: none !important; /* remove o grid antigo */
  flex: 0 0 auto; /* cada thumb ocupa apenas o necessário */
  margin: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: 0.5rem; /* bordas arredondadas */
  border: 1px solid #ddd; /* borda leve */
  transition: transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  max-width: 80px; /* limita o tamanho das thumbs */
  height: auto;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover {
  border-color: var(--color2, #014f9e); /* usa sua var de cor se existir */
  transform: scale(1.05);
}

/* botão de comprar (mantido do seu tema) */
.single_add_to_cart_button.button,
.button.alt,
.wp-block-button__link.add_to_cart_button {
  background-color: var(--color1) !important;
  color: #ffffff !important;
  border-color: var(--color1) !important;
}
.single_add_to_cart_button.button:hover {
  background-color: var(--color2) !important;
  color: #ffffff !important;
}

/* meta do produto */
.product_meta {
  font-size: 12px;
  display: flex;
  flex-direction: column;
}

/* extras */
.botao-reserva-estoque {
  margin: 10px 0;
}
a.reset_variations {
  background-color: var(--color1) !important;
  color: #ffffff !important;
  padding: 10px;
}
/* tabs color6 */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--color6);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #fff;
}

/* Hover no link do produto (categorias, shortcodes, busca etc.) */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link:hover {
  color: var(--color2) !important;
  text-decoration: none; /* opcional, remove sublinhado */
}

/* Também força os elementos internos (título, preço, rating) herdarem a cor */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover h2,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover .price,
.woocommerce
  ul.products
  li.product
  a.woocommerce-LoopProduct-link:hover
  .star-rating {
  color: var(--color2) !important;
}

/* =========================
   FIM Product page tweaks
========================= */

/* =========================
   WOOCOMMERCE OVERRIDES
========================= */
.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
  color: var(--color1) !important;
}

.woocommerce-LoopProduct-link.woocommerce-loop-product__link:hover {
  color: var(--color2) !important;
}

.button.product_type_variable.add_to_cart_button,
.button.product_type_variable {
  background-color: var(--color1) !important;
  color: white !important;
  display: block !important;
  text-align: center;
}

#place_order {
  background-color: var(--color1) !important;
  color: white !important;
  display: block !important;
  width: 100%;
  text-align: center;
}

#place_order:hover {
  background-color: var(--color5) !important;
}

.woocommerce-message a.button,
.checkout-button {
  background-color: var(--color1) !important;
  color: white !important;
}

.woocommerce-checkout #payment {
  color: #fff !important;
  background-color: var(--color2) !important;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: white;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
  border: 1em solid white;
  border-top-color: white;
  border-right-color: white;
  border-left-color: white;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}

.woocommerce-message {
  border-top-color: var(--color1) !important;
}

.button.product_type_variable.add_to_cart_button:hover,
.button.product_type_variable:hover {
  background-color: var(--color2) !important;
}

/* Botão "Ir para checkout" no bloco de carrinho */
.wc-block-cart__submit-button {
  display: inline-block; /* força estilo de botão */
  background-color: var(--color1) !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.25rem;
  text-align: center;
  text-decoration: none !important;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus {
  background-color: var(--color2) !important; /* azul médio no hover */
  color: #fff !important;
  outline: none;
}

.woocommerce-Button.button,
.button {
  background-color: var(--color1) !important;
  color: #fff !important;
}

/* Ajustes no checkout */

.woocommerce-checkout .form-row {
  margin-bottom: 1rem;
}

.woocommerce-input-wrapper {
  width: 100%;
}

.woocommerce-checkout-review-order {
  background-color: #f8f9fa;
  border: none !important;
}

.woocommerce form label {
  font-weight: 100 !important;
  font-size: 15px;
  width: 100%;
  color: black;
  font-weight: 800;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: auto;
}


/* texto principal da frase */
.woocommerce-terms-and-conditions-checkbox-text {
  color: #fff !important;
  font-weight: 500;
}

/* link dentro do texto ("利用規約") */
.woocommerce-terms-and-conditions-checkbox-text a,
.woocommerce-terms-and-conditions-link {
  color: #fff !important;
  text-decoration: underline;
  font-weight: 700;
  transition: color 0.2s ease-in-out;
}

/* cor ao passar o mouse */
.woocommerce-terms-and-conditions-checkbox-text a:hover,
.woocommerce-terms-and-conditions-link:hover {
  color: var(--color5) !important; /* laranja suave (hover) */
}


.woocommerce-terms-and-conditions{
  background-color: #fff !important;
}

.woocommerce-terms-and-conditions li, .woocommerce-terms-and-conditions p{
  color: #000 !important;
}

#ship-to-different-address label {
  color: #fff !important;
}



.wc_payment_method label {
  width: auto !important;
}

/* === GRID COM ALTURAS IGUAIS + BOTÃO NO RODAPÉ === */

/* 1) Troca o UL para flex com wrap: cada linha iguala a altura pelo item mais alto */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* garante que os <li> estiquem na altura da linha */
}

/* 2) Cancela floats do Woo e transforma cada <li> em coluna flex */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important; /* Woo usa float; cancelamos pra flex funcionar */
  display: flex;
  flex-direction: column; /* empilha: [link com conteúdo] + [botão] */
}

/* 3) Faz o bloco clicável (imagem+título+preço) crescer e ocupar o espaço */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* ocupa o “meio” do card */
}

/* 4) Botão sempre encostado no fundo do card */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  margin-top: auto; /* empurra o botão pro rodapé da <li> */
}

/* (Opcional) Aparar títulos muito longos e evitar “pulos” visuais */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* limita a 4 linhas */
  line-clamp: 4; /* futura compatibilidade */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Já que você quer 1 por linha no mobile, mantém este override: */
@media (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 100% !important;
    margin: 0 0 2rem !important;
  }
}

/* Oculta o botão "Imprimir recibo" que está no bloco de detalhes do pedido */
.woocommerce-order-details a.button[onclick*="window.print"] {
  display: none !important;
}

/* =========================
   FIM WOOCOMMERCE OVERRIDES
========================= */

/* ocultando itens desnecessários */
.woocommerce-form-coupon-toggle {
  display: none !important;
}
.wc-block-components-totals-coupon {
  display: none !important;
}
#billing_country_field,
#shipping_country_field {
  display: none !important;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before,
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
  display: none !important;
}

/* ===== Checkout: layout sólido sem override ===== */

/* Mobile: tudo empilhado (comportamento padrão) */
form.woocommerce-checkout {
  display: block;
}

/* Desktop: 2 colunas (7/5) + áreas nomeadas */
@media (min-width: 992px) {
  form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "note     heading"
      "customer review"
      "extra    review";
    gap: 2rem;
    align-items: start;
    grid-auto-rows: min-content; /* evita linhas gigantes */
  }

  /* Coluna ESQUERDA */
  form.woocommerce-checkout #frase_adicional_checkout {
    grid-area: note;
  }
  form.woocommerce-checkout #customer_details {
    grid-area: customer;
  }
  form.woocommerce-checkout .woocommerce-additional-fields {
    grid-area: extra;
  }

  /* Coluna DIREITA (título + review/pagamento/botão) */
  form.woocommerce-checkout #order_review_heading {
    grid-area: heading;
    margin-top: 0;
  }
  form.woocommerce-checkout #order_review {
    grid-area: review;
    align-self: start;
    position: static !important;
    top: auto !important;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    background: #fff;
  }
}

/* Desativa o 50/50 interno do Woo dentro da coluna esquerda */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  margin-right: 0 !important;
}
.woocommerce-checkout #customer_details .col-2 {
  margin-top: 1rem;
}

/* Inputs 100% (alguns temas ainda flutuam .form-row) */
.woocommerce form .form-row,
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 100% !important;
  float: none !important;
}

/* Some o “buraco” quando o endereço de entrega está oculto */
.woocommerce
  .woocommerce-shipping-fields
  .shipping_address[style*="display: none"] {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Título da coluna direita mais discreto */
#order_review_heading {
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.25rem 0;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid #e9ecef;
  color: #333;
  background: transparent !important;
}

.wc_payment_method label {
  width: auto !important;
  color: white !important;
}

/* =========================
   FIM geral
========================= */

/* =========================
 POSTS
========================= */

/* imagem 1:1 com cover */
.img-square {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
/* se quiser zerar o espaço “extra” no topo do card */
.card .card-img-top {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
/* =========================
   FIM posts
========================= */

/* ========================= */
/* FOOTER */
/* ========================= */
#footer-info .footer-logo {
  max-height: 48px; /* ajusta a altura do logo no desktop */
  width: auto;
}
@media (max-width: 575.98px) {
  #footer-info .footer-logo {
    max-height: 40px;
  } /* um pouco menor no mobile */
}
#footer-info .footer-company p {
  margin-bottom: 0.25rem;
} /* compacta os parágrafos */
#footer-info .list-group-item {
  border: 0; /* sem bordas */
  padding-left: 0; /* alinha à esquerda */
  background: transparent;
}
#footer-info .list-group-item:hover {
  text-decoration: underline;
}

/* =========================
   CART FOOTER
========================= */

/* Barra fixa do carrinho (BS5) */
.ms-cartbar {
  inset: auto 0 0 0;
} /* ajuda o iOS com fixed-bottom */
.ms-cartbar .ms-cartbar-inner {
  font-size: 12px;
  min-height: 68px;
  padding: 0.5rem 0.75rem;
  border-radius: 14px 14px 0 0;
  background: var(--color3); /* seu tom translúcido */
  color: #fff;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.12);
}

/* Espaçamento inferior quando a barra aparece */
.has-cartbar {
  padding-bottom: 100px;
} /* evitar que a barra cubra conteúdo */

/* Ajustes responsivos */
@media (max-width: 575.98px) {
  .ms-cartbar .ms-cartbar-inner {
    min-height: 64px;
    padding: 0.5rem 0.75rem;
  }
}

/* Quando estiver em páginas de carrinho/checkout, não precisamos do padding extra (se quiser) */
body.woocommerce-cart.has-cartbar,
body.woocommerce-checkout.has-cartbar {
  padding-bottom: 0;
}
/* =========================
   Fim CART FOOTER
========================= */
/* =========================
CATEGORIAS, BUSCA, ARQUIVOS
========================= */
.mirai_title {
  display: block;
  background-image: url("../img/mirai-page-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 50px;
  padding-bottom: 50px;
  color: #fff;
  text-align: center;
  margin: 0;
}

/* =========================
   Paginas internas (ex.: conteudo de página, single)
========================= */
.page_mirai h1,
.page_mirai h2 {
  font-weight: 700;
  margin-top: 20px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--color1);
  color: var(--color1);
}

.page_mirai h3 {
  font-weight: 700;
  background-color: var(--color2);
  color: #fff;
  padding: 0.25rem 0.5rem;
  margin-top: 30px;
  border-radius: 4px; /* opcional, para suavizar */
}
.page_mirai h3 a,
.page_mirai h3 strong {
  color: #fff;
  text-decoration: none;
}
.page_mirai h3 a:hover,
.page_mirai h3 a:focus {
  text-decoration: underline;
}

.page_mirai h4 {
  font-weight: 700;
  color: var(--color2);
  margin-top: 20px;
}

.page_mirai strong {
  color: var(--color1);
  font-weight: 700;
}

.page_mirai a {
  color: var(--color2);
  font-weight: 700;
  text-decoration: none;
}
.page_mirai a:hover,
.page_mirai a:focus {
  text-decoration: underline;
}
.image_content img {
  display: block; /* permite centralizar */
  margin: 1.5rem auto; /* centraliza horizontalmente e adiciona espaço vertical */
  border-radius: 10px; /* bordas arredondadas */
  border: 1px solid #ddd; /* borda cinza clara */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* sombra leve */
  max-width: 100%; /* evita ultrapassar a largura do container */
  height: auto; /* mantém proporção da imagem */
}
.page_mirai {
  line-height: 1.6; /* melhora a legibilidade do texto */
  color: #333; /* cor do texto */
  font-size: 16px; /* tamanho da fonte */
  padding-left: 15px;
  padding-right: 10px;
}

/* =========================
   Categoria HERO
========================= */
/* ===== Hero do título de categoria ===== */
/* Se a imagem ficar em /assets/img/, use ../img/arquivo.ext no url() */
/* Se preferir deixar na mesma pasta do CSS, use apenas url('arquivo.ext') */

.mirai_product_title {
  /* layout */
  display: flex;
  align-items: center;
  min-height: 250px; /* altura base da arte (1200x250) */
  padding: 24px 24px 24px 250px; /* recuo de 250px no desktop */
  border-radius: 12px;
  overflow: hidden;

  /* tipografia */
  margin: 0 0 1rem 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);

  /* imagem de fundo */
  background-image: url("../img/mirai-categoria-hero.webp"); /* <- ajuste o caminho */
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;

  /* camada de contraste para legibilidade */
  position: relative;
  isolation: isolate;
}
/*
.mirai_product_title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: -1;
} */

/* Conteúdo por cima da máscara */
.mirai_product_title > * {
  position: relative;
  z-index: 1;
}

/* ===== Responsivo ===== */
@media (max-width: 991.98px) {
  .mirai_product_title {
    min-height: 200px;
    padding: 20px 20px 20px 180px; /* reduz o recuo no tablet */
    background-position: center left;
  }
}

@media (max-width: 575.98px) {
  .mirai_product_title {
    min-height: 120px;
    padding: 10px;
    padding-left: 100px;
    text-align: center;
    background-position: left;
  }
}
/* =========================
   FIM Categoria HERO
========================= */
/* ========================================================================
   Mirai Seeds Slideshow (Posts)
   Versão: 1.0.1
   Data: 2025-10-16
   Autor: Mirai Seeds Dev Team
   Descrição: Estilos do carrossel de posts com fundo escuro fixo,
               efeito de entrada suave e layout responsivo.
   Dependências: Bootstrap 5 / FontAwesome
   ======================================================================== */

/* === Container principal === */
.mirai-posts-slider {
  position: relative;
  background: #222222; /* fundo escuro fixo */
  border-radius: 12px;
  overflow: hidden; /* aplica o radius em todo conteúdo */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

/* === Imagem === */
.mirai-posts-slider .mirai-slide-img-wrap {
  min-height: 320px;
  aspect-ratio: 16 / 9; /* evita CLS (salto visual ao carregar) */
}
.mirai-posts-slider .object-fit-cover {
  object-fit: cover;
  object-position: center;
  display: block;
  width: 100%;
  height: 100%;
}

/* === Painel de texto (lado direito) === */
.mirai-posts-slider .mirai-slide-content {
  position: relative;
  color: #fff;
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.6) 100%
    ),
    url("../img/slideshow-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: saturate(1.1) brightness(0.95);
}
.mirai-posts-slider .mirai-slide-content::before {
  display: none;
}
.mirai-posts-slider .mirai-slide-content > * {
  position: relative;
  z-index: 1;
}

/* === Ajuste mobile: altura fixa do bloco de texto === */
@media (max-width: 575.98px) {
  .mirai-posts-slider .slide-text {
    height: 200px !important; /* altura fixa p/ evitar salto */
    overflow: hidden;
  }
  .mirai-posts-slider .slide-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5)
    );
    pointer-events: none;
  }
}

/* === Botão === */
.mirai-posts-slider .slide-cta.btn-color1 {
  background-color: var(--color1);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease, box-shadow 0.25s ease;
}
.mirai-posts-slider .slide-cta.btn-color1:hover,
.mirai-posts-slider .slide-cta.btn-color1:focus {
  background-color: var(--color2);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  text-decoration: none;
}
.mirai-posts-slider .slide-cta.btn-color1:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

/* === Responsivo === */
@media (max-width: 767.98px) {
  .mirai-posts-slider .mirai-slide-img-wrap {
    min-height: 160px;
    aspect-ratio: 4 / 2;
  }
}
@media (max-width: 575.98px) {
  .mirai-posts-slider .mirai-slide-img-wrap {
    min-height: 150px;
  }
  .mirai-posts-slider .slide-cta {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
  .mirai-posts-slider .mirai-slide-content {
    padding-top: 2px !important;
    padding: 12px;
    height: auto;
    overflow: hidden;
  }
}

/* === Acessibilidade === */
@media (prefers-reduced-motion: reduce) {
  .mirai-posts-slider .carousel-item {
    transition: none !important;
  }
}

/* === Efeitos de entrada (CSS-only) === */
.mirai-posts-slider .carousel-item .mirai-slide-img-wrap,
.mirai-posts-slider .carousel-item .slide-text,
.mirai-posts-slider .carousel-item .slide-cta {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.mirai-posts-slider .carousel-item.active .mirai-slide-img-wrap {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s; /* 1º: imagem */
}
.mirai-posts-slider .carousel-item.active .slide-text {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s; /* 2º: texto */
}
.mirai-posts-slider .carousel-item.active .slide-cta {
  opacity: 1;
  transform: none;
  transition-delay: 0.34s; /* 3º: botão */
}

/* === Em telas grandes, imagem entra da esquerda === */
@media (min-width: 768px) {
  .mirai-posts-slider .carousel-item .mirai-slide-img-wrap {
    transform: translateX(-12px);
  }
  .mirai-posts-slider .carousel-item.active .mirai-slide-img-wrap {
    transform: none;
  }
}

/* === Reduz animações conforme preferência do usuário === */
@media (prefers-reduced-motion: reduce) {
  .mirai-posts-slider .carousel-item .mirai-slide-img-wrap,
  .mirai-posts-slider .carousel-item .slide-text,
  .mirai-posts-slider .carousel-item .slide-cta {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =========================
   FIM slideshow (posts)
========================= */

/*=========================
  REGISTER FORM
========================= */

/* Alinhar checkbox + label numa linha */
#terms_agree_field .woocommerce-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5em; /* espaço entre checkbox e texto */
}

#terms_agree_field label.checkbox {
  display: flex;
  align-items: center;
  margin: 0; /* remove margem extra */

  font-weight: normal; /* opcional: mantém consistente com outros labels */
}

#terms_agree_field input[type="checkbox"] {
  margin: 0; /* alinha melhor */
  margin-right: 10px;
  width: auto;
}