/*
Theme Name: Tree Herbal
Theme URI: https://treeherbal.com
Author: Tree Herbal
Description: E-commerce theme for a licensed California cannabis retailer. Built for WooCommerce. Category-driven shop, strain/effect filtering, lab reports page, journal, and compliance-ready footer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tree-herbal
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* =========================================================
   1. COLOR SYSTEM
   Dark forest green primary (matches deep cannabis-retail
   palette), warm cream background, gold accent for sale/CTA.
   ========================================================= */
:root{
  --th-green-900: #08220f;   /* primary brand / header / footer */
  --th-green-800: #0d3018;
  --th-green-700: #12401f;
  --th-green-600: #1c5a2c;
  --th-green-500: #2f7a3f;   /* buttons, links */
  --th-green-100: #e7f1e8;   /* soft section backgrounds */
  --th-cream:     #faf8f3;   /* page background */
  --th-white:     #ffffff;
  --th-gold:      #c99b45;   /* sale badges, accents */
  --th-gold-dark: #a67c33;
  --th-ink:       #16201a;   /* body text */
  --th-ink-soft:  #4b564f;   /* secondary text */
  --th-line:      #e2e0d6;   /* borders/dividers */
  --th-red:       #b23b3b;   /* strike price / alerts */
  --th-radius:    14px;
  --th-shadow:    0 6px 24px rgba(8,34,15,0.08);
}

* { box-sizing: border-box; }

body{
  background: var(--th-cream);
  color: var(--th-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  margin: 0;
}

h1,h2,h3,h4 { font-family: Georgia, "Times New Roman", serif; color: var(--th-green-900); margin: 0 0 .4em; }
a { color: var(--th-green-600); text-decoration: none; }
a:hover { color: var(--th-green-500); }
img { max-width: 100%; display: block; }

.th-container{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.th-btn{
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--th-green-900); color: var(--th-white); font-weight: 600;
  border: none; cursor: pointer; transition: background .15s ease;
}
.th-btn:hover{ background: var(--th-green-700); color:#fff; }
.th-btn--outline{ background: transparent; color: var(--th-green-900); border: 1.5px solid var(--th-green-900); }
.th-btn--gold{ background: var(--th-gold); color: var(--th-green-900); }
.th-btn--gold:hover{ background: var(--th-gold-dark); }

/* =========================================================
   2. TOP UTILITY BAR + HEADER
   ========================================================= */
.th-topbar{
  background: var(--th-green-900); color: #cfe6d2; font-size: 13px;
  padding: 8px 0; overflow: hidden; white-space: nowrap;
}
.th-topbar .th-container{ display:flex; gap: 28px; align-items:center; justify-content:center; }
.th-topbar span{ opacity:.9; }

.th-header{
  background: var(--th-white); border-bottom: 1px solid var(--th-line);
  position: sticky; top: 0; z-index: 50;
}
.th-header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; }
.th-logo{ font-family: Georgia, serif; font-size: 24px; font-weight:700; color: var(--th-green-900); letter-spacing:.3px; }
.th-logo span{ color: var(--th-gold-dark); }

.th-nav{ display:flex; gap: 26px; list-style:none; margin:0; padding:0; }
.th-nav a{ color: var(--th-ink); font-weight:600; font-size:15px; }
.th-nav a:hover{ color: var(--th-green-600); }

.th-header-actions{ display:flex; align-items:center; gap:18px; }
.th-age-pill{
  font-size:12px; font-weight:700; border:1.5px solid var(--th-green-900);
  color: var(--th-green-900); border-radius:999px; padding:4px 10px;
}
.th-icon-btn{ background:none; border:none; cursor:pointer; color: var(--th-green-900); font-size:18px; }

/* =========================================================
   3. HERO
   ========================================================= */
.th-hero{
  background: linear-gradient(180deg, var(--th-green-900) 0%, var(--th-green-800) 100%);
  color: #fff; padding: 72px 0 60px;
}
.th-hero-eyebrow{ color: var(--th-gold); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; }
.th-hero h1{ color:#fff; font-size: 44px; max-width: 640px; margin: 14px 0 16px; }
.th-hero p{ color:#d8e6da; max-width: 560px; font-size:17px; margin-bottom:26px; }
.th-hero-stats{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; color:#cfe6d2; font-size:13px; }

/* =========================================================
   4. CATEGORY GRID
   ========================================================= */
.th-section{ padding: 60px 0; }
.th-section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 28px; }
.th-section-head p{ color: var(--th-ink-soft); margin:4px 0 0; }

.th-category-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.th-category-card{
  background: var(--th-green-100); border-radius: var(--th-radius); overflow:hidden;
  text-align:center; padding: 22px 12px; transition: transform .15s ease;
}
.th-category-card:hover{ transform: translateY(-3px); }
.th-category-thumb{
  width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background: var(--th-green-600); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px;
}
.th-category-card strong{ display:block; color: var(--th-green-900); font-size:15px; }
.th-category-card small{ color: var(--th-ink-soft); }

/* =========================================================
   5. PRODUCT GRID / CARDS
   ========================================================= */
.th-product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.th-product-card{
  background:#fff; border:1px solid var(--th-line); border-radius: var(--th-radius);
  overflow:hidden; position:relative; box-shadow: var(--th-shadow);
}
.th-product-media{ aspect-ratio: 1/1; background: var(--th-green-100); position:relative; }
.th-badge{
  position:absolute; top:10px; left:10px; background: var(--th-gold); color: var(--th-green-900);
  font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; text-transform:uppercase;
}
.th-badge--new{ background: var(--th-green-600); color:#fff; }
.th-product-body{ padding: 14px 16px 18px; }
.th-product-brand{ font-size:12px; color: var(--th-ink-soft); text-transform:uppercase; letter-spacing:.5px; }
.th-product-name{ font-size:15px; font-weight:700; margin:2px 0 6px; color: var(--th-green-900); }
.th-product-meta{ font-size:12px; color: var(--th-ink-soft); margin-bottom:10px; }
.th-strain-tag{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background: var(--th-green-100); color: var(--th-green-700); margin-right:6px;
}
.th-price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.th-price{ font-weight:800; color: var(--th-green-900); font-size:16px; }
.th-price--was{ text-decoration: line-through; color: var(--th-red); font-size:13px; }
.th-add-btn{ width:100%; }

/* =========================================================
   6. FILTER SIDEBAR (shop archive)
   ========================================================= */
.th-shop-layout{ display:grid; grid-template-columns: 240px 1fr; gap: 34px; }
.th-filter-group{ margin-bottom: 26px; }
.th-filter-group h4{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; color: var(--th-green-900); }
.th-filter-group label{ display:flex; align-items:center; gap:8px; font-size:14px; color: var(--th-ink-soft); margin-bottom:6px; }

/* =========================================================
   7. WHY US / TRUST STRIP
   ========================================================= */
.th-trust{ background: var(--th-green-900); color:#fff; padding: 56px 0; }
.th-trust h2{ color:#fff; }
.th-trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; margin-top: 30px; }
.th-trust-num{ color: var(--th-gold); font-family:Georgia,serif; font-size:22px; margin-bottom:8px; }
.th-trust-grid p{ color:#cfe6d2; font-size:14px; }

.th-stats-strip{ display:flex; justify-content:space-around; margin-top:46px; flex-wrap:wrap; gap:20px; }
.th-stat{ text-align:center; }
.th-stat strong{ display:block; font-size:26px; color: var(--th-gold); font-family:Georgia,serif; }
.th-stat span{ color:#cfe6d2; font-size:13px; }

/* =========================================================
   8. TESTIMONIALS
   ========================================================= */
.th-testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.th-testimonial-card{ background:#fff; border:1px solid var(--th-line); border-radius: var(--th-radius); padding:22px; }
.th-testimonial-card p{ font-style: italic; color: var(--th-ink); }
.th-testimonial-name{ font-weight:700; color: var(--th-green-900); }

/* =========================================================
   9. FOOTER
   ========================================================= */
.th-footer{ background: var(--th-green-900); color:#cfe6d2; padding: 56px 0 24px; margin-top: 40px; }
.th-footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.th-footer h5{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:14px; }
.th-footer ul{ list-style:none; padding:0; margin:0; }
.th-footer li{ margin-bottom:8px; }
.th-footer a{ color:#cfe6d2; font-size:14px; }
.th-footer a:hover{ color:#fff; }
.th-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px;
  font-size:12px; color:#9db99f; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.th-disclaimer{ font-size:12px; color:#9db99f; max-width:900px; line-height:1.6; margin-top:16px; }

/* =========================================================
   10. AGE GATE MODAL
   ========================================================= */
.th-age-gate{
  position: fixed; inset:0; background: rgba(8,34,15,0.96); z-index: 9999;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.th-age-gate-box{ max-width: 420px; padding: 20px; }
.th-age-gate h2{ color:#fff; }
.th-age-gate p{ color:#cfe6d2; margin-bottom:26px; }
.th-age-gate-actions{ display:flex; gap:14px; justify-content:center; }

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .th-category-grid, .th-product-grid{ grid-template-columns: repeat(2,1fr); }
  .th-trust-grid, .th-testimonial-grid{ grid-template-columns: 1fr; }
  .th-shop-layout{ grid-template-columns: 1fr; }
  .th-footer-grid{ grid-template-columns: 1fr 1fr; }
  .th-nav{ display:none; }
  .th-hero h1{ font-size: 32px; }
}