/*
Theme Name: 2B Habituals
Theme URI: https://2bhabituals.com
Author: 2B Habituals Wellness Pvt. Ltd.
Description: Illustrated storytelling theme for 2B Habituals — protein-infused tea & coffee. WooCommerce-ready.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: 2bhabituals
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;800&family=Caveat:wght@500;700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --cream:#fbf6ec; --cocoa:#3a2a1e; --sage:#7fa37a;
  --mustard:#e7b94d; --terracotta:#c97043; --border:#e2d6c2;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:'DM Sans', sans-serif; background:var(--cream); color:var(--cocoa);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(231,185,77,.10) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(201,112,67,.10) 0, transparent 45%);
}
h1,h2,h3,h4 { font-family:'Fraunces', serif; font-weight:600; letter-spacing:-.02em; margin:0 0 .5em; }
.font-hand { font-family:'Caveat', cursive; color:var(--terracotta); }
a { color:var(--terracotta); text-decoration:none; }
.container { max-width:1200px; margin:0 auto; padding:0 1.25rem; }
.site-header { position:sticky; top:0; z-index:40; background:rgba(251,246,236,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.site-header .inner { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; }
.brand { display:flex; align-items:center; gap:.75rem; font-family:'Fraunces',serif; font-size:1.25rem; font-weight:700; color:var(--cocoa); }
.brand img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.main-nav a { margin:0 .9rem; font-weight:500; color:var(--cocoa); }
.main-nav a:hover { color:var(--terracotta); }
.btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--terracotta); color:#fff; padding:.7rem 1.4rem; border-radius:999px; font-weight:600; box-shadow:3px 3px 0 var(--cocoa); border:none; cursor:pointer; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--cocoa); color:#fff; }
.btn-ghost { background:transparent; color:var(--cocoa); border:1.5px solid var(--cocoa); box-shadow:none; }
.paper-card { background:#fff; border:1.5px solid var(--border); border-radius:1.25rem; box-shadow:4px 6px 0 rgba(58,42,30,.08); padding:1.5rem; }

.hero { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; padding:4rem 0; }
.hero h1 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.05; }
.hero p { color:#6b5d4f; font-size:1.1rem; max-width:34rem; }
.hero img { width:100%; border-radius:1.5rem; border:1px solid var(--border); }
@media (max-width:768px) { .hero { grid-template-columns:1fr; padding:2rem 0; } }

.section { padding:3.5rem 0; }
.section h2 { font-size:clamp(2rem,4vw,3rem); }

.products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-top:2rem; }
.product-card { background:#fff; border:1.5px solid var(--border); border-radius:1rem; padding:1rem; }
.product-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:.75rem; }
.product-card h3 { font-size:1.25rem; margin-top:.75rem; }
.price { font-family:'Fraunces',serif; font-size:1.25rem; }

.calculator { background:#fff; border:1.5px solid var(--border); border-radius:1.5rem; padding:2rem; }
.calculator input[type=range] { width:100%; accent-color:var(--terracotta); }
.calc-result { background:var(--cream); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; margin-top:1rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.calc-result .num { font-family:'Fraunces',serif; font-size:2.25rem; color:var(--terracotta); }

.newsletter { background:var(--cocoa); color:var(--cream); border-radius:1.5rem; padding:3rem; margin:4rem 0; }
.newsletter form { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.newsletter input[type=email] { flex:1; min-width:240px; padding:.85rem 1.25rem; border-radius:999px; border:none; font-family:inherit; }

.site-footer { background:var(--cocoa); color:var(--cream); padding:3rem 0 1rem; margin-top:4rem; }
.site-footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; }
.site-footer h4 { color:var(--cream); font-size:1.1rem; }
.site-footer a { color:var(--cream); opacity:.85; display:block; margin:.3rem 0; font-size:.9rem; }
.copyright { text-align:center; font-size:.8rem; opacity:.6; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.15); margin-top:2rem; }