/*
Theme Name: Giranoi (Storefront Child)
Theme URI: https://example.com
Description: Tema filho do Storefront com a identidade visual da Giranoi (verde-pinho, creme e terracota), adaptado a partir do layout de demonstração giranoi-store.html.
Author: Você
Template: storefront
Version: 1.0.0
Text Domain: giranoi-child
*/

/* ==========================================================
   1. TOKENS (mesmas variáveis do site de demonstração)
   ========================================================== */
:root{
  --ink:#221f1d;
  --cream:#fff6db;
  --cream-2:#f6e9c3;
  --pine:#1f3a2e;
  --pine-dark:#142720;
  --rust:#a6472b;
  --brass:#b08d57;
  --white:#fffdf9;
  --line: rgba(34,31,29,0.14);
}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
}
h1,h2,h3,h4,.site-title,.site-title a{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
}
a{ color:var(--pine); }
a:hover{ color:var(--rust); }

/* ==========================================================
   2. BARRA DE FRETE GRÁTIS (injetada via functions.php)
   ========================================================== */
.giranoi-promo-bar{
  background:var(--pine);
  color:var(--cream);
  text-align:center;
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:9px 0;
}

/* ==========================================================
   3. CABEÇALHO (sobrescreve o header padrão do Storefront)
   ========================================================== */
.site-header{
  background:var(--cream) !important;
  border-bottom:1px solid var(--line);
  box-shadow:none !important;
}
.site-branding .site-title a{
  font-size:26px; font-weight:600;
}
#site-navigation ul.nav-menu > li > a{
  font-family:'Work Sans', sans-serif;
  font-size:13.5px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink);
}
#site-navigation ul.nav-menu > li > a:hover{ color:var(--rust); }
.storefront-primary-navigation{ background:var(--cream); }

/* ==========================================================
   4. HERO (shortcode [giranoi_hero])
   ========================================================== */
.giranoi-hero{
  position:relative;
  background:var(--cream-2);
  overflow:hidden;
  padding:90px 28px 100px;
}
.giranoi-hero-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
}
.giranoi-hero h1{
  font-size:clamp(42px, 6vw, 74px);
  line-height:0.98; margin:0;
}
.giranoi-hero h1 .accent{ font-style:italic; color:var(--rust); font-weight:400; }
.giranoi-hero p.lede{ max-width:420px; margin-top:22px; font-size:16.5px; color:#3f3a35; }
.giranoi-hero .cta-row{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }
.giranoi-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--pine); color:var(--white) !important;
  padding:15px 28px; border-radius:2px;
  font-size:13.5px; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--pine);
}
.giranoi-btn:hover{ background:var(--pine-dark); color:var(--white) !important; }
.giranoi-btn.ghost{ background:transparent; color:var(--pine) !important; }
.giranoi-hero-visual{
  aspect-ratio:4/5; background:var(--pine); display:flex; align-items:center; justify-content:center;
}
@media (max-width:880px){ .giranoi-hero-inner{ grid-template-columns:1fr; } }

/* etiqueta (elemento assinatura, reaproveitado no badge de promoção) */
.giranoi-tag{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  background:var(--cream); border:1px solid var(--ink);
  padding:10px 16px 10px 26px; font-size:12px;
  letter-spacing:0.06em; text-transform:uppercase;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.giranoi-tag.rust{ background:var(--rust); color:var(--white); border-color:var(--rust); }

/* ==========================================================
   5. GRID DE PRODUTOS (WooCommerce nativo)
   ========================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--white);
  border:1px solid var(--line);
  padding:0 0 20px;
  margin-bottom:22px;
}
.woocommerce ul.products li.product img{
  background:var(--cream-2);
  margin-bottom:16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Work Sans', sans-serif;
  font-size:15.5px; font-weight:500;
  padding:0 20px; color:var(--ink);
}
.woocommerce ul.products li.product .price{
  padding:0 20px;
}
.woocommerce ul.products li.product .price del{
  color:#8a8079; font-size:13px; opacity:1;
}
.woocommerce ul.products li.product .price ins{
  text-decoration:none;
  font-family:'Fraunces', serif;
  font-weight:600; font-size:20px;
  color:var(--rust);
}
.woocommerce span.onsale{
  background:var(--rust) !important;
  color:var(--white) !important;
  font-family:'Work Sans', sans-serif;
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  min-height:0; min-width:0; line-height:1;
  padding:8px 12px; border-radius:0;
  top:14px; left:0; right:auto;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .single_add_to_cart_button{
  background:var(--pine) !important;
  color:var(--white) !important;
  border-radius:2px !important;
  font-family:'Work Sans', sans-serif;
  font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
  padding:14px 24px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover{ background:var(--pine-dark) !important; }

/* ==========================================================
   6. FAIXA DE CONFIANÇA (shortcode [giranoi_trust])
   ========================================================== */
.giranoi-trust{ background:var(--pine); color:var(--cream); }
.giranoi-trust-grid{
  max-width:1180px; margin:0 auto; padding:52px 28px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}
.giranoi-trust-grid h4{ color:var(--cream); font-size:14.5px; margin-bottom:6px; }
.giranoi-trust-grid p{ color:rgba(243,236,221,0.75); font-size:13px; margin:0; }
@media (max-width:880px){ .giranoi-trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================
   7. RODAPÉ
   ========================================================== */
#colophon, .site-footer{
  background:var(--ink) !important;
  color:rgba(243,236,221,0.82) !important;
}
#colophon a, .site-footer a{ color:rgba(243,236,221,0.82); }
#colophon a:hover, .site-footer a:hover{ color:var(--brass); }
#colophon h1, #colophon h2, #colophon h3, #colophon h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4{
  color:var(--cream) !important;
}