/*
Theme Name:     CBDGreenZen
Theme URI:      https://cbdgreenzen.fr
Description:    Child theme GeneratePress pour CBDGreenZen — Le CBD au naturel made in France. Direction "Risograph Nature" : palette forest + cream + jaune, type Bricolage Grotesque + Inter Tight, layouts WooCommerce custom.
Author:         CBDGreenZen
Author URI:     https://cbdgreenzen.fr
Template:       generatepress
Version:        1.0.0
Text Domain:    cbdgreenzen
License:        GPL v2 or later
*/

/* ============================================================
   1. FONT FACES (self-hosted)
   ============================================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('assets/fonts/BricolageGrotesque-Variable.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('assets/fonts/InterTight-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
  --cz-bg: #F5EFE0;
  --cz-bg-alt: #EBE2CC;
  --cz-card: #FFFCF3;
  --cz-ink: #0F3D2E;
  --cz-ink-soft: #1F5D44;
  --cz-primary: #1F7A4D;
  --cz-primary-deep: #0F3D2E;
  --cz-yellow: #F4C430;
  --cz-tomato: #E5532D;
  --cz-sky: #B8D8C9;
  --cz-line: #0F3D2E;
  --cz-muted: #6B7A6F;

  --cz-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --cz-body: 'Inter Tight', 'Helvetica Neue', sans-serif;
  --cz-mono: 'JetBrains Mono', ui-monospace, monospace;

  --cz-radius: 20px;
  --cz-radius-lg: 32px;
  --cz-border: 1.5px solid var(--cz-line);
  --cz-shadow: 4px 4px 0 var(--cz-ink);
}

/* ============================================================
   3. GLOBAL — body, links, headings
   ============================================================ */

body {
  background: var(--cz-bg);
  color: var(--cz-ink);
  font-family: var(--cz-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, .site-title {
  font-family: var(--cz-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--cz-ink);
}

h1 { font-size: clamp(48px, 7vw, 96px); }
h2 { font-size: clamp(36px, 5vw, 56px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }

p { line-height: 1.6; }
a { color: var(--cz-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--cz-primary); }

::selection { background: var(--cz-yellow); color: var(--cz-ink); }

/* ============================================================
   4. UTILITY HELPERS
   ============================================================ */

.cz-eyebrow {
  font-family: var(--cz-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cz-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cz-eyebrow::before {
  content: ""; width: 24px; height: 1.5px; background: var(--cz-ink);
}

.cz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: var(--cz-border);
  font-family: var(--cz-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--cz-card);
  text-decoration: none;
  color: var(--cz-ink);
}
.cz-chip.green { background: var(--cz-primary); color: white; }
.cz-chip.yellow { background: var(--cz-yellow); }
.cz-chip.tomato { background: var(--cz-tomato); color: white; }

.cz-btn,
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  border: var(--cz-border);
  font-family: var(--cz-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  color: var(--cz-ink);
  background: var(--cz-card);
  transition: transform .15s;
}
.cz-btn:hover { transform: translateY(-2px); }
.cz-btn-primary, .is-style-cz-primary .wp-block-button__link {
  background: var(--cz-ink) !important;
  color: var(--cz-bg) !important;
  border-color: var(--cz-ink) !important;
}
.cz-btn-yellow, .is-style-cz-yellow .wp-block-button__link {
  background: var(--cz-yellow) !important;
  color: var(--cz-ink) !important;
  border-color: var(--cz-ink) !important;
  box-shadow: var(--cz-shadow) !important;
}

.cz-sticker {
  display: inline-grid;
  place-items: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--cz-yellow);
  border: var(--cz-border);
  font-family: var(--cz-display);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  transform: rotate(8deg);
  box-shadow: var(--cz-shadow);
}

/* ============================================================
   5. ANNOUNCE BAR
   ============================================================ */

.cz-announce {
  background: var(--cz-ink);
  color: var(--cz-bg);
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--cz-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cz-announce .marquee { display: flex; gap: 48px; flex-wrap: nowrap; overflow: hidden; }
.cz-announce .marquee span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cz-announce .marquee .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cz-yellow); }

/* ============================================================
   6. HEADER / NAVIGATION
   ============================================================ */

.site-header,
.cz-header {
  background: var(--cz-bg) !important;
  border-bottom: var(--cz-border);
  padding: 0;
}
.cz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.cz-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cz-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--cz-ink);
}
.cz-logo svg { width: 32px; height: 32px; }
.cz-nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.cz-nav-links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--cz-ink);
  padding: 4px 0;
  position: relative;
}
.cz-nav-links a:hover, .cz-nav-links li.current-menu-item > a {
  color: var(--cz-ink);
}
.cz-nav-links li.current-menu-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px; background: var(--cz-yellow);
}
.cz-nav-actions { display: flex; gap: 12px; align-items: center; }
.cz-icon-btn {
  width: 40px; height: 40px;
  border: var(--cz-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cz-card);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: var(--cz-ink);
}
.cz-icon-btn .badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--cz-tomato); color: white;
  font-size: 10px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--cz-body);
}

/* ============================================================
   7. RIBBON (marquee categories)
   ============================================================ */

.cz-ribbon {
  background: var(--cz-primary);
  color: var(--cz-bg);
  padding: 18px 0;
  border-bottom: var(--cz-border);
  border-top: var(--cz-border);
  overflow: hidden;
}
.cz-ribbon-track {
  display: flex;
  gap: 48px;
  font-family: var(--cz-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  align-items: center;
  animation: cz-ribbon-scroll 30s linear infinite;
}
.cz-ribbon-track > span { display: inline-flex; align-items: center; gap: 48px; }
.cz-ribbon-track > span::after {
  content: "✦"; color: var(--cz-yellow); font-size: 20px;
}
@keyframes cz-ribbon-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   8. WOOCOMMERCE — product cards + single
   ============================================================ */

.woocommerce ul.products li.product,
.cz-product-card {
  border: var(--cz-border);
  border-radius: var(--cz-radius);
  background: var(--cz-card);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  position: relative;
  transition: transform .2s;
  padding: 0 !important;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }

.woocommerce ul.products li.product a img {
  margin: 0;
  border-bottom: var(--cz-border);
  border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cz-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  padding: 16px 16px 0 !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price {
  font-family: var(--cz-display);
  font-size: 22px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cz-ink) !important;
  padding: 0 16px 14px !important;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: var(--cz-border);
  padding-top: 14px !important;
  background: var(--cz-bg-alt);
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  border-radius: 999px !important;
  background: var(--cz-ink) !important;
  color: var(--cz-bg) !important;
  border: var(--cz-border) !important;
  font-weight: 600 !important;
  margin: 0 16px 16px !important;
  padding: 10px 16px !important;
}

.woocommerce span.onsale,
.cz-product-tag {
  background: var(--cz-tomato) !important;
  color: white !important;
  border: var(--cz-border) !important;
  border-radius: 999px !important;
  font-family: var(--cz-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 6px 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  margin: 0 !important;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--cz-display);
  font-size: 64px !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 16px !important;
}
.woocommerce div.product p.price {
  font-family: var(--cz-display);
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--cz-ink) !important;
}
.woocommerce div.product form.cart .button {
  background: var(--cz-yellow) !important;
  color: var(--cz-ink) !important;
  border: var(--cz-border) !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  font-weight: 700 !important;
  box-shadow: var(--cz-shadow) !important;
}

/* ============================================================
   9. CART / CHECKOUT
   ============================================================ */

.woocommerce-cart table.cart,
.woocommerce-checkout #order_review {
  border: var(--cz-border);
  border-radius: var(--cz-radius);
  background: var(--cz-card);
  overflow: hidden;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--cz-ink) !important;
  color: var(--cz-bg) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 12px 22px !important;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-checkout #place_order {
  background: var(--cz-yellow) !important;
  color: var(--cz-ink) !important;
  border: var(--cz-border) !important;
  box-shadow: var(--cz-shadow) !important;
}

/* ============================================================
   10. POSTS / JOURNAL
   ============================================================ */

.cz-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .cz-journal-grid { grid-template-columns: 1fr; }
}
.cz-journal-card {
  border: var(--cz-border);
  border-radius: var(--cz-radius);
  overflow: hidden;
  background: var(--cz-card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--cz-ink);
}
.cz-journal-card .thumb {
  aspect-ratio: 4/3;
  background: var(--cz-sky);
  border-bottom: var(--cz-border);
}
.cz-journal-card .body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.cz-journal-card .meta {
  font-family: var(--cz-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cz-ink-soft);
  margin-bottom: 12px;
}
.cz-journal-card h3 {
  font-family: var(--cz-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.cz-journal-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cz-ink-soft);
  margin: 0 0 auto;
}
.cz-journal-card .read {
  font-family: var(--cz-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

.single-post .entry-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}
.single-post .entry-content h2 { margin-top: 48px; }

/* ============================================================
   11. FOOTER
   ============================================================ */

.site-footer,
.cz-footer {
  background: var(--cz-ink) !important;
  color: var(--cz-bg) !important;
  padding: 64px 32px 32px !important;
}
.cz-footer-inner { max-width: 1280px; margin: 0 auto; }
.cz-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 900px) {
  .cz-footer-grid { grid-template-columns: 1fr 1fr; }
}
.cz-footer h4 {
  font-family: var(--cz-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--cz-yellow);
}
.cz-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cz-footer ul a { color: var(--cz-bg); text-decoration: none; opacity: 0.85; font-size: 14px; }
.cz-footer ul a:hover { opacity: 1; }
.cz-footer-brand p { font-size: 14px; opacity: 0.8; line-height: 1.6; max-width: 280px; }
.cz-footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 12px;
  opacity: 0.7;
  font-family: var(--cz-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cz-footer-newsletter {
  display: flex;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  margin-top: 14px;
}
.cz-footer-newsletter input {
  flex: 1; background: transparent; border: none;
  color: var(--cz-bg); outline: none;
  font-family: inherit; font-size: 14px;
}
.cz-footer-newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.cz-footer-newsletter button {
  background: var(--cz-yellow);
  color: var(--cz-ink);
  border: none; border-radius: 999px;
  padding: 8px 16px; font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: inherit;
}

/* ============================================================
   12. RESPONSIVE TWEAKS
   ============================================================ */

/* Prevent horizontal overflow globally */
body { overflow-x: hidden; }

@media (max-width: 900px) {
  .cz-nav-links { display: none; }
  .cz-announce { font-size: 10px; padding: 8px 16px; }
  .cz-announce .marquee span:nth-child(n+3) { display: none; }
  .cz-ribbon-track { font-size: 18px; gap: 24px; }
  .cz-ribbon-track > span { gap: 24px; }

  /* Footer: single column sur mobile */
  .cz-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .cz-footer {
    padding: 48px 20px 28px !important;
  }
  .cz-footer-legal {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Hero: empilement vertical */
  .cz-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .cz-hero-grid > div:last-child {
    height: 260px !important;
  }

  /* Hero: réduction padding section */
  .cz-hero {
    padding: 40px 20px 56px !important;
  }

  /* Catégories: 2 colonnes au lieu de 5 */
  .cz-cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Section naturel: empilement vertical */
  .cz-natural {
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 48px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cz-natural > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 32px;
  }

  /* Sections générales: padding réduit */
  .cz-categories,
  .cz-products,
  .cz-journal-teaser {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Stats hero: wrap si nécessaire */
  .cz-hero-grid > div:first-child > div[style*="gap:32px"] {
    gap: 20px !important;
  }
}