/*
Theme Name: TrendCasual
Theme URI: https://trendcasualloja.com.br
Author: Supermix
Author URI: https://trendcasualloja.com.br
Description: Tema exclusivo para a loja de moda feminina TrendCasual. Feito para WooCommerce, com layout chamativo, integração de pagamentos (cartão e Pix via plugin), frete e gestão fácil de produtos/estoque pelo painel do WordPress.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trendcasual
Tags: e-commerce, custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =========================================================
   1. RESET & VARIÁVEIS
========================================================= */
:root{
  --tc-dark:      #1c1a19;
  --tc-cream:     #faf6f1;
  --tc-white:     #ffffff;
  --tc-accent:    #d94f70;   /* rosa/coral vibrante - CTA */
  --tc-accent-dk: #b53a58;
  --tc-gold:      #c9a76a;   /* detalhe premium */
  --tc-gray:      #746e69;
  --tc-gray-lt:   #e9e3dc;
  --tc-success:   #2f7a4f;
  --tc-radius:    14px;
  --tc-shadow:    0 10px 30px rgba(28,26,25,.08);
  --tc-font-head: "Playfair Display", Georgia, serif;
  --tc-font-body: "Jost", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tc-maxw:      1280px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--tc-font-body);
  color:var(--tc-dark);
  background:var(--tc-white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--tc-font-head); font-weight:600; line-height:1.2; margin:0 0 .5em; }
p{ margin:0 0 1em; }
.tc-container{ max-width:var(--tc-maxw); margin:0 auto; padding:0 24px; }
.screen-reader-text{ position:absolute !important; left:-9999px; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--tc-dark); color:#fff; padding:12px 20px; z-index:10000; }
.skip-link:focus{ left:16px; top:16px; }

/* Botões */
.tc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border-radius:999px; font-weight:600; letter-spacing:.02em;
  border:2px solid transparent; cursor:pointer; transition:all .2s ease; font-size:.95rem;
}
.tc-btn-primary{ background:var(--tc-accent); color:#fff; }
.tc-btn-primary:hover{ background:var(--tc-accent-dk); transform:translateY(-2px); }
.tc-btn-outline{ background:transparent; border-color:var(--tc-dark); color:var(--tc-dark); }
.tc-btn-outline:hover{ background:var(--tc-dark); color:#fff; }
.tc-btn-light{ background:#fff; color:var(--tc-dark); }
.tc-btn-light:hover{ background:var(--tc-cream); }

.tc-eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.15em; font-size:.75rem;
  color:var(--tc-accent); font-weight:700; margin-bottom:10px;
}
.tc-section{ padding:70px 0; }
.tc-section-title{ text-align:center; max-width:640px; margin:0 auto 46px; }
.tc-section-title h2{ font-size:2.1rem; }
.tc-section-title p{ color:var(--tc-gray); }

/* =========================================================
   2. TOPO / ANNOUNCEMENT BAR
========================================================= */
.tc-announce{
  background:var(--tc-dark); color:#fff; text-align:center;
  font-size:.82rem; letter-spacing:.03em; padding:9px 12px;
}
.tc-announce a{ color:var(--tc-gold); font-weight:600; }

/* =========================================================
   3. HEADER
========================================================= */
.tc-header{
  position:sticky; top:0; z-index:999; background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--tc-gray-lt);
}
.tc-header-inner{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:24px; padding:18px 24px;
}
.tc-header-left{ display:flex; align-items:center; gap:22px; justify-self:start; min-width:0; }
.tc-logo{ font-family:var(--tc-font-head); font-size:1.6rem; font-weight:700; letter-spacing:.02em; justify-self:center; }
.tc-logo img{ max-height:52px; width:auto; }
.tc-nav{ display:flex; min-width:0; }
.tc-nav ul{ display:flex; gap:30px; }
.tc-nav a{ font-weight:500; font-size:.95rem; text-transform:uppercase; letter-spacing:.03em; position:relative; padding:6px 0; }
.tc-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--tc-accent);
  transition:width .2s ease;
}
.tc-nav a:hover::after{ width:100%; }
.tc-header-actions{ display:flex; align-items:center; gap:20px; justify-self:end; }
.tc-icon-btn{ position:relative; display:inline-flex; padding:4px; }
.tc-icon-btn svg{ width:22px; height:22px; }
.tc-cart-count{
  position:absolute; top:-6px; right:-8px; background:var(--tc-accent); color:#fff;
  font-size:.68rem; font-weight:700; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.tc-menu-toggle{ display:none; background:none; border:0; cursor:pointer; }
.tc-menu-toggle svg{ width:26px; height:26px; }

@media (max-width: 900px){
  .tc-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--tc-gray-lt); box-shadow:var(--tc-shadow); }
  .tc-nav.is-open{ display:block; }
  .tc-nav ul{ flex-direction:column; gap:0; padding:10px 24px 20px; }
  .tc-nav li{ border-bottom:1px solid var(--tc-gray-lt); }
  .tc-nav a{ display:block; padding:14px 0; }
  .tc-menu-toggle{ display:inline-flex; }
}

/* =========================================================
   4. HERO
========================================================= */
.tc-hero{
  position:relative; min-height:560px; display:flex; align-items:center;
  background:linear-gradient(135deg, var(--tc-cream), var(--tc-gray-lt));
  background-size:cover; background-position:center;
  overflow:hidden;
}
.tc-hero::before{
  content:""; position:absolute; inset:0; background:rgba(28,26,25,.28);
}
.tc-hero.tc-has-image::before{ background:linear-gradient(90deg, rgba(28,26,25,.55) 10%, rgba(28,26,25,.05) 65%); }
.tc-hero-content{ position:relative; z-index:2; max-width:560px; padding:24px; color:var(--tc-dark); }
.tc-hero.tc-has-image .tc-hero-content{ color:#fff; }
.tc-hero-content h1{ font-size:3rem; margin-bottom:.35em; }
.tc-hero-content p{ font-size:1.15rem; margin-bottom:1.6em; opacity:.9; }

/* =========================================================
   5. TRUST BAR
========================================================= */
.tc-trustbar{ background:var(--tc-cream); padding:26px 0; }
.tc-trustbar ul{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
.tc-trustbar li{ display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; flex:1 1 200px; justify-content:center; }
.tc-trustbar svg{ width:22px; height:22px; color:var(--tc-accent); flex-shrink:0; }

/* =========================================================
   6. CATEGORIAS
========================================================= */
.tc-cats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.tc-cat-card{ position:relative; border-radius:var(--tc-radius); overflow:hidden; aspect-ratio:3/4; background:var(--tc-gray-lt); }
.tc-cat-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.tc-cat-card:hover img{ transform:scale(1.06); }
.tc-cat-card .tc-cat-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(28,26,25,.7), transparent 55%);
  display:flex; align-items:flex-end; padding:20px; color:#fff; font-family:var(--tc-font-head); font-size:1.2rem;
}
@media (max-width:900px){ .tc-cats-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   7. PRODUTOS (grid genérico + integração WooCommerce)
========================================================= */
.tc-products-block ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:28px; }
@media (max-width:1000px){ .tc-products-block ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
ul.products li.product{
  list-style:none; background:#fff; border-radius:var(--tc-radius); padding:14px; transition:box-shadow .2s ease;
}
ul.products li.product:hover{ box-shadow:var(--tc-shadow); }
ul.products li.product img{ border-radius:calc(var(--tc-radius) - 6px); aspect-ratio:3/4; object-fit:cover; margin-bottom:12px; }
ul.products li.product .woocommerce-loop-product__title{ font-family:var(--tc-font-body); font-weight:600; font-size:.98rem; margin:6px 0 4px; }
ul.products li.product .price{ color:var(--tc-accent); font-weight:700; }
ul.products li.product .price del{ color:var(--tc-gray); font-weight:400; opacity:.7; }
ul.products li.product .button{
  margin-top:10px; display:block; text-align:center; padding:11px; border-radius:999px;
  background:var(--tc-dark); color:#fff !important; font-size:.85rem; font-weight:600;
}
ul.products li.product .button:hover{ background:var(--tc-accent); }
ul.products li.product .onsale{
  background:var(--tc-accent) !important; border-radius:999px; font-size:.7rem; font-weight:700;
  padding:5px 12px !important; min-height:auto !important; line-height:1.4 !important;
}

/* =========================================================
   8. BANNER PROMOCIONAL
========================================================= */
.tc-promo{
  border-radius:24px; overflow:hidden; position:relative; display:flex; align-items:center;
  min-height:320px; background:var(--tc-dark); color:#fff; background-size:cover; background-position:center;
}
.tc-promo::before{ content:""; position:absolute; inset:0; background:rgba(28,26,25,.45); }
.tc-promo-content{ position:relative; z-index:2; padding:50px; max-width:520px; }
.tc-promo-content h2{ color:#fff; font-size:2.2rem; }

/* =========================================================
   9. DEPOIMENTOS
========================================================= */
.tc-testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.tc-testimonial{ background:var(--tc-cream); border-radius:var(--tc-radius); padding:30px; }
.tc-testimonial .stars{ color:var(--tc-gold); letter-spacing:2px; margin-bottom:10px; }
.tc-testimonial .name{ font-weight:700; margin-top:14px; }
@media (max-width:900px){ .tc-testimonials{ grid-template-columns:1fr; } }

/* =========================================================
   10. INSTAGRAM
========================================================= */
.tc-instagrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.tc-instagrid a{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:8px; background:var(--tc-gray-lt); display:flex; align-items:center; justify-content:center; color:var(--tc-gray); }
@media (max-width:900px){ .tc-instagrid{ grid-template-columns:repeat(3,1fr); } }

/* =========================================================
   11. NEWSLETTER
========================================================= */
.tc-newsletter{ background:var(--tc-dark); color:#fff; text-align:center; padding:60px 24px; }
.tc-newsletter h2{ color:#fff; }
.tc-newsletter p{ color:#d8d3ce; }
.tc-newsletter-form{ display:flex; max-width:440px; margin:0 auto; gap:10px; flex-wrap:wrap; justify-content:center; }
.tc-newsletter-form input[type=email]{
  flex:1 1 260px; padding:14px 18px; border-radius:999px; border:0; font-size:.95rem;
}
.tc-newsletter-note{ font-size:.75rem; color:#9a938c; margin-top:12px; }

/* =========================================================
   12. FOOTER
========================================================= */
.tc-footer{ background:#141212; color:#cfc9c3; padding:60px 0 20px; }
.tc-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:40px; }
.tc-footer-logo-link{ display:inline-block; }
.tc-footer-logo{ max-height:34px; width:auto; display:block; margin-bottom:16px; filter:brightness(0) invert(1); }
.tc-footer h4{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; }
.tc-footer ul li{ margin-bottom:10px; }
.tc-footer a:hover{ color:#fff; }
.tc-payment-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tc-payment-badges span{
  border:1px solid #3a3634; border-radius:6px; padding:5px 10px; font-size:.72rem; font-weight:600; color:#cfc9c3;
}
.tc-social{ display:flex; gap:14px; margin-top:14px; }
.tc-social a{ width:36px; height:36px; border-radius:50%; border:1px solid #3a3634; display:flex; align-items:center; justify-content:center; }
.tc-social svg{ width:16px; height:16px; }
.tc-footer-bottom{ border-top:1px solid #2c2825; padding-top:20px; text-align:center; font-size:.8rem; color:#8a847d; }
@media (max-width:900px){ .tc-footer-grid{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   13. WHATSAPP FLUTUANTE
========================================================= */
.tc-whatsapp{
  position:fixed; bottom:22px; right:22px; z-index:998; background:#25D366; width:58px; height:58px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.tc-whatsapp svg{ width:28px; height:28px; fill:#fff; }

/* =========================================================
   14. PÁGINAS GENÉRICAS / WOOCOMMERCE (loja, produto, carrinho)
========================================================= */
.tc-shop-wrap{ max-width:var(--tc-maxw); margin:40px auto; padding:0 24px; min-height:50vh; }
.tc-shop-wrap .woocommerce-breadcrumb{ font-size:.85rem; color:var(--tc-gray); margin-bottom:24px; }
.tc-shop-wrap h1.entry-title, .tc-shop-wrap h1.page-title{ font-size:2rem; margin-bottom:24px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noticeel{
  border-top-color:var(--tc-accent) !important; border-radius:10px;
}
.single_add_to_cart_button.button{
  background:var(--tc-accent) !important; border-radius:999px !important; padding:15px 40px !important;
  font-weight:700 !important; border:none !important;
}
.single_add_to_cart_button.button:hover{ background:var(--tc-accent-dk) !important; }
.tc-pay-note{
  margin-top:18px; padding:14px 18px; background:var(--tc-cream); border-radius:10px; font-size:.85rem; color:var(--tc-gray);
}

/* =========================================================
   15. RESPONSIVO GERAL
========================================================= */
@media (max-width:600px){
  .tc-hero-content h1{ font-size:2.1rem; }
  .tc-section{ padding:46px 0; }
  .tc-promo-content{ padding:30px; }
  .tc-footer-grid{ grid-template-columns:1fr; }
}