/* ============================================================
   Kala Teeb — WordPress / WooCommerce style sheet
   Matches the look of the Kala Teeb showcase site.
   Paste into: Appearance → Customize → Additional CSS
   (or a child theme's style.css)
   ============================================================ */

/* --- 1. Fonts (load in <head> via a plugin like "Use Any Font",
        or add the Google Fonts <link> in your theme) --- */

:root {
  --kt-background: #fbfbf8;        /* warm cream */
  --kt-foreground: #3a4539;        /* deep forest charcoal */
  --kt-card: #f4f3ee;
  --kt-primary: #3e5544;           /* forest green */
  --kt-primary-foreground: #fbfbf8;
  --kt-secondary: #f1f0ea;
  --kt-muted: #84857c;             /* soft grey-green for small text */
  --kt-accent: #e3e5d8;
  --kt-border: #e0dfd8;
  --kt-destructive: #b0381f;
  --kt-radius: 4px;
  --kt-font-body: 'DM Sans', sans-serif;
  --kt-font-display: 'Cormorant Garamond', Georgia, serif;
}

/* --- 2. Base --- */
body {
  background: var(--kt-background);
  color: var(--kt-foreground);
  font-family: var(--kt-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wp-block-heading,
.woocommerce-products-header__title,
.product_title {
  font-family: var(--kt-font-display);
  font-weight: 500;
  color: var(--kt-foreground);
  letter-spacing: 0;
}

a { color: var(--kt-foreground); }
a:hover { color: var(--kt-muted); }

::selection { background: var(--kt-accent); }

/* --- 3. Buttons (incl. WooCommerce) --- */
button, .button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--kt-primary);
  color: var(--kt-primary-foreground);
  border: 1px solid var(--kt-primary);
  border-radius: var(--kt-radius);
  font-family: var(--kt-font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 26px;
  transition: background .2s, color .2s;
}
button:hover, .button:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--kt-foreground);
  color: var(--kt-primary-foreground);
}

/* Outline / secondary buttons */
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.add_to_cart_button {
  background: transparent;
  color: var(--kt-foreground);
  border: 1px solid var(--kt-border);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.add_to_cart_button:hover {
  background: var(--kt-secondary);
  color: var(--kt-foreground);
}

/* --- 4. WooCommerce product grid --- */
.woocommerce ul.products li.product {
  text-align: left;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--kt-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--kt-foreground);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
  color: var(--kt-muted);
  font-size: 13px;
}
.woocommerce ul.products li.product a img {
  background: var(--kt-secondary);
}

/* --- 5. Forms & inputs --- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea, select, .input-text {
  background: var(--kt-background);
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius);
  color: var(--kt-foreground);
  font-family: var(--kt-font-body);
  padding: 10px 12px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--kt-primary);
}

/* --- 6. WooCommerce notices & messages --- */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--kt-primary);
  background: var(--kt-secondary);
  color: var(--kt-foreground);
}
.woocommerce-message::before, .woocommerce-info::before {
  color: var(--kt-primary);
}
.woocommerce-error {
  border-top-color: var(--kt-destructive);
}

/* --- 7. Sale badge & stars --- */
.woocommerce span.onsale {
  background: var(--kt-primary);
  color: var(--kt-primary-foreground);
  border-radius: var(--kt-radius);
}
.woocommerce .star-rating { color: var(--kt-primary); }

/* --- 8. Header & footer hints (block themes) --- */
.site-title, .wp-block-site-title a {
  font-family: var(--kt-font-display) !important;
  font-weight: 600;
  color: var(--kt-foreground) !important;
  text-decoration: none;
}
.wp-block-navigation a { color: var(--kt-foreground); }
.wp-block-navigation a:hover { color: var(--kt-muted); }

footer, .wp-block-template-part footer {
  border-top: 1px solid var(--kt-border);
  color: var(--kt-muted);
  font-size: 12px;
}

/* --- 9. Footer wordmark: small, not a page heading --- */
footer .wp-block-site-title,
footer .wp-block-site-title a,
.wp-block-template-part--footer .wp-block-site-title,
.wp-block-template-part--footer .wp-block-site-title a {
  font-family: var(--kt-font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  color: var(--kt-foreground) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Front page (v1.5) --- */
.kt-eyebrow{font-size:12px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--kt-muted)}
.kt-hero .kt-eyebrow,.kt-hero .kt-hero-lede{color:#fbfbf8;opacity:.9}
.kt-hero-title{font-family:var(--kt-font-display);font-size:clamp(3rem,7vw,5.5rem)!important;line-height:1!important;color:#fbfbf8!important;margin:.5rem 0 1.25rem}
.kt-hero-lede{max-width:28rem;font-size:1.1rem}
.kt-hero-btn .wp-block-button__link{background:#fbfbf8;color:var(--kt-foreground);border-color:#fbfbf8}
.kt-strip p{margin:0;font-size:14px;color:var(--kt-muted)}
.kt-strip strong{font-family:var(--kt-font-display);font-size:1.15rem;font-weight:500;color:var(--kt-foreground)}
.kt-section-title{font-size:clamp(2.2rem,4vw,3.4rem)!important;line-height:1.05!important;margin-top:.5rem}
.kt-piece img{border-radius:var(--kt-radius);width:100%}
.wp-site-blocks > footer{margin-top:0}