/* ============================================================
   ASTROPÉ — CSS "de outra galáxia"
   Cole em: Aparência → Personalizar → CSS adicional → Publicar
   Seguro: só muda aparência, não mexe em layout nem em plugin.
   ============================================================ */

:root{
  --astro-1:#0b1026;      /* espaço profundo */
  --astro-2:#2a1b5e;      /* violeta */
  --astro-3:#7cc4ff;      /* azul-lua */
  --astro-acento:#ffd166; /* dourado */
  --astro-ok:#16a34a;
}

/* ---------- 1. CARD DE PRODUTO: levita e brilha ---------- */
.woocommerce ul.products li.product{
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(11,16,38,.07);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),
             box-shadow .28s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 38px rgba(42,27,94,.22);
}
.woocommerce ul.products li.product img{
  border-radius:14px;
  transition:transform .5s ease;
}
.woocommerce ul.products li.product:hover img{ transform:scale(1.06); }

/* nome do produto sem quebrar o card */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight:700; font-size:.95rem; line-height:1.3;
  min-height:2.6em; overflow:hidden;
}

/* ---------- 2. PREÇO EM DESTAQUE ---------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  color:var(--astro-2)!important;
  font-weight:800!important;
  font-size:1.25rem!important;
}
.woocommerce div.product p.price{ font-size:2rem!important; }
.woocommerce ul.products li.product .price del{
  color:#9aa0b4!important; font-weight:500; font-size:.85rem;
}
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* ---------- 3. SELO DE PROMOÇÃO ---------- */
.woocommerce span.onsale{
  background:linear-gradient(135deg,var(--astro-2),var(--astro-3))!important;
  color:#fff!important; font-weight:800; letter-spacing:.5px;
  border-radius:999px!important; padding:.45em 1em!important;
  box-shadow:0 6px 16px rgba(42,27,94,.35); min-height:0!important;
  line-height:1.4!important;
}

/* ---------- 4. BOTÕES ---------- */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt{
  background:linear-gradient(135deg,#1a1240,#4326a8)!important;
  color:#fff!important; border-radius:999px!important;
  font-weight:800!important; letter-spacing:.3px;
  padding:.85em 1.8em!important; border:0!important;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  transform:translateY(-2px); filter:brightness(1.12);
  box-shadow:0 12px 26px rgba(67,38,168,.4);
}
/* botão principal de compra: dourado, chama o clique */
.woocommerce div.product form.cart button.single_add_to_cart_button{
  background:linear-gradient(135deg,#ffb703,#ff8500)!important;
  color:#1a1240!important; font-size:1.1rem!important; width:100%;
}

/* ---------- 5. FAIXA DE CONFIANÇA NO PRODUTO ---------- */
.woocommerce div.product form.cart::after{
  content:"🚀 Frete grátis acima de R$199   ·   💳 até 12x sem juros   ·   🔄 troca fácil em 7 dias   ·   🔒 compra segura";
  display:block; margin-top:14px; padding:12px 16px;
  background:#f3f1ff; border:1px solid #e0dbff; border-radius:14px;
  color:#3a2f6b; font-size:.9rem; font-weight:600; text-align:center;
}

/* ---------- 6. TÍTULOS DE SEÇÃO ---------- */
.woocommerce h2, .site-main h2{
  font-weight:900; letter-spacing:-.5px;
}
.woocommerce h2::after, .site-main .storefront-product-section h2::after{
  content:""; display:block; width:64px; height:4px; margin-top:10px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--astro-2),var(--astro-3));
}

/* ---------- 7. MENU DE CATEGORIAS EM PÍLULAS ---------- */
.woocommerce-widget-layered-nav ul li a,
.widget_product_categories ul li a{
  display:inline-block; padding:.35em .9em; margin:.15em 0;
  border-radius:999px; background:#f2f0ff; color:#3a2f6b;
  font-weight:600; text-decoration:none; transition:all .2s ease;
}
.woocommerce-widget-layered-nav ul li a:hover,
.widget_product_categories ul li a:hover{
  background:var(--astro-2); color:#fff;
}

/* ---------- 8. AVISO DE ESTOQUE ---------- */
.woocommerce div.product .stock.in-stock{
  color:var(--astro-ok)!important; font-weight:700;
}
.woocommerce div.product .stock.in-stock::before{ content:"✓ "; }

/* ---------- 9. GALERIA DO PRODUTO ---------- */
.woocommerce div.product div.images img{ border-radius:18px; }
.woocommerce div.product div.images .flex-control-thumbs li img{
  border-radius:10px; opacity:.65; transition:opacity .2s, transform .2s;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active{
  opacity:1; transform:scale(1.06);
}

/* ---------- 10. RODAPÉ E DETALHES ---------- */
.site-footer{
  background:linear-gradient(160deg,var(--astro-1),var(--astro-2))!important;
  color:#dcd9f0!important;
}
.site-footer a{ color:var(--astro-3)!important; }

::selection{ background:var(--astro-2); color:#fff; }
html{ scroll-behavior:smooth; }

/* ============================================================
   V2 — correções com os SELETORES REAIS do tema astrope-pro
   (medidos ao vivo no site em 02/08/2026)
   ============================================================ */

/* ---------- RODAPÉ LEGÍVEL (títulos estavam pretos no fundo escuro) --- */
#colophon .astrope-ft{ color:#c9cce8; }
#colophon .astrope-ft h4{
  color:#fff!important; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; font-size:.82rem; opacity:.95;
}
#colophon .astrope-ft__tag{ color:#c3c7e8!important; }
#colophon .astrope-ft a:not(.astrope-logo){
  color:#9fd0ff!important; text-decoration:none;
  display:inline-block; padding:2px 0;
}
#colophon .astrope-ft a:not(.astrope-logo):hover{
  color:#fff!important; text-decoration:underline;
}
#colophon .astrope-logo--ft{ color:#fff!important; }
#colophon .astrope-ft__bottom,
#colophon .astrope-ft__bottom *{ color:#9ea3cd!important; }
#colophon .astrope-pay span{
  background:rgba(255,255,255,.1)!important;
  color:#e6e8ff!important;
  border:1px solid rgba(255,255,255,.18)!important;
}

/* ---------- FUNDO DA LOJA (cards brancos sumiam no fundo branco) ----- */
body.woocommerce-page:not(.woocommerce-checkout):not(.woocommerce-cart),
body.post-type-archive-product, body.tax-product_cat{
  background:#f5f4fb;
}

/* ---------- CARDS v2: borda visível, título forte, botão inteiro ----- */
.woocommerce ul.products li.product{
  border:1px solid #e9e6fb;
  padding:14px 14px 18px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.02rem; color:#181b31; line-height:1.35;
  min-height:0; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce ul.products li.product .price{
  font-size:1.3rem!important;
}
.woocommerce ul.products li.product .button{
  display:block; width:100%; text-align:center; margin-top:.7em;
}

/* ---------- PAGINAÇÃO em pílulas (estava quadrada e apagada) --------- */
.woocommerce nav.woocommerce-pagination ul{ border:0; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0 4px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:999px; min-width:42px; padding:.7em 0;
  font-weight:700; background:#fff; color:#3a2f6b;
  border:1px solid #e9e6fb;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:linear-gradient(135deg,var(--astro-2),#4326a8);
  color:#fff; border-color:transparent;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:#efeaff; color:var(--astro-2);
}

/* contagem de resultados e ordenação mais discretas */
.woocommerce .woocommerce-result-count{ color:#8b8fae; }
.woocommerce .woocommerce-ordering select{
  border-radius:999px; padding:.5em 2em .5em 1em;
  border:1px solid #e0dcf7; background-color:#fff; color:#3a2f6b;
}

/* barra de rolagem (só em telas grandes) */
@media (min-width:1024px){
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background:#f1eff8; }
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--astro-2),var(--astro-3));
    border-radius:999px;
  }
}

/* ---------- 11. CELULAR: cards maiores e preço legível ---------- */
@media (max-width:768px){
  .woocommerce ul.products li.product{ border-radius:14px; }
  .woocommerce ul.products li.product .price{ font-size:1.15rem!important; }
  .woocommerce div.product form.cart button.single_add_to_cart_button{
    position:sticky; bottom:10px; z-index:20;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
}


/* ---------- convite para instalar o app ---------- */
#astro-instalar{
  position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
  bottom:18px;z-index:99998;display:flex;align-items:center;gap:14px;
  padding:12px 14px 12px 12px;border-radius:999px;
  background:linear-gradient(135deg,#141a3c,#3a1f77);
  box-shadow:0 16px 40px rgba(11,16,38,.45);color:#fff;
  font-family:"Segoe UI",system-ui,sans-serif;
  max-width:min(94vw,430px);
  transition:transform .45s cubic-bezier(.2,.9,.2,1);
}
#astro-instalar.aberto{transform:translateX(-50%) translateY(0)}
#astro-instalar img{width:44px;height:44px;border-radius:12px;flex:0 0 auto}
#astro-instalar .txt{line-height:1.25;font-size:.9rem}
#astro-instalar .txt b{display:block;font-size:.98rem;margin-bottom:2px}
#astro-instalar .txt span{color:#c3c7e8;font-size:.8rem}
#astro-instalar button{
  border:0;border-radius:999px;cursor:pointer;font-weight:800;
  padding:11px 20px;background:#fff;color:#171c3f;font-size:.88rem;
  white-space:nowrap;
}
#astro-instalar .fechar{
  background:transparent;color:#9ea3cd;font-size:1.4rem;padding:0 6px;
  font-weight:400;line-height:1;
}
@media(max-width:420px){#astro-instalar .txt span{display:none}}