/* ============================================================
   Shreeji Pulses — Shared Site Styles
   Used by: index.html, shop.html, About.html, contact.html,
   Privacy.html, T&c.html, ShippingPolicy.html, Return&refund.html
   ============================================================ */
:root{
  --brown-900:#2E1B0E;
  --brown-800:#402410;
  --brown-700:#573416;
  --brown-500:#8B6136;
  --brown-200:#E5DDCC;
  --green-800:#20361B;
  --green-700:#2E4A25;
  --green-600:#3B5C30;
  --gold-600:#A9762F;
  --gold-500:#C08A3E;
  --bg:#FFFFFF;
  --bg-alt:#FAF7F1;
  --img-bg:#F1ECE1;
  --text:#221609;
  --wa-green:#25D366;
  --radius:4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.has-float-bar{padding-bottom:66px;}
h1,h2,h3,.display{font-family:'Fraunces',serif; font-weight:600; letter-spacing:.2px;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
svg{display:block;}
img{max-width:100%;}

/* TOP BAR */
.top-bar{
  background:var(--brown-900); color:#EADFC7;
  font-size:12px; text-align:center; padding:8px 12px;
  display:flex; justify-content:center; gap:0; flex-wrap:wrap;
  letter-spacing:.15px;
}
.top-bar span{display:flex; align-items:center;}
.top-bar .sep{margin:0 16px; color:var(--gold-500); opacity:.7;}
.top-bar b{color:var(--gold-500); font-weight:600;}

/* HEADER */
header{
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--brown-200);
}
.header-main{
  max-width:1200px; margin:0 auto;
  padding:16px 20px;
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-logo{
  width:48px;height:48px;border-radius:50%;
  background:var(--brown-800);
  display:flex;align-items:center;justify-content:center;
  color:#F5E9D0; font-family:'Fraunces',serif; font-size:19px;
  border:1.5px solid var(--gold-500);
  overflow:hidden;
  flex-shrink:0;
}
.brand-logo img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-logo .logo-fallback{display:none; align-items:center; justify-content:center; width:100%; height:100%;}
.brand-text h1{font-size:23px;margin:0;line-height:1.1;color:var(--brown-900); letter-spacing:.2px;}
.brand-text span{font-size:11px;color:var(--brown-500); letter-spacing:.6px;}
.header-search{
  flex:1; max-width:480px; display:flex; margin:0 auto;
}
.header-search input{
  width:100%; padding:11px 16px; border-radius:2px 0 0 2px;
  border:1.5px solid var(--brown-200); border-right:none;
  font-family:'Inter',sans-serif; font-size:13.5px; outline:none; background:var(--bg-alt);
}
.header-search input:focus{border-color:var(--brown-500);}
.header-search button{
  border:1.5px solid var(--brown-800); background:var(--brown-800); color:#fff;
  border-radius:0 2px 2px 0; padding:0 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.icon-btn{
  position:relative;
  background:var(--bg-alt); border:1px solid var(--brown-200);
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; color:var(--brown-800);
}
.icon-btn.cart{background:var(--green-700); border-color:var(--green-700); color:#fff;}
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--gold-500); color:var(--brown-900);
  font-size:10.5px; font-weight:700;
  min-width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px; border:2px solid var(--bg);
}

/* PAGE NAV (site-wide pages: Home / Shop / About / Contact / Policies) */
.page-nav{
  background:var(--brown-800);
}
.page-nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; gap:24px; overflow-x:auto;
  padding:10px 20px;
  scrollbar-width:none;
}
.page-nav-inner::-webkit-scrollbar{display:none;}
.page-nav-inner a{
  flex-shrink:0; font-size:12.5px; font-weight:600; color:#EADFC7;
  white-space:nowrap; letter-spacing:.2px; padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.page-nav-inner a:hover, .page-nav-inner a.active{color:#fff; border-color:var(--gold-500);}

/* CATEGORY NAV (shop.html only) */
.cat-nav{
  max-width:1200px; margin:0 auto;
  display:flex; gap:26px; overflow-x:auto;
  padding:11px 20px; border-top:1px solid var(--brown-200);
  scrollbar-width:none;
}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-nav a{
  flex-shrink:0; font-size:13px; font-weight:600; color:var(--brown-700);
  white-space:nowrap; padding-bottom:2px; border-bottom:2px solid transparent;
}
.cat-nav a:hover{color:var(--green-700); border-color:var(--green-700);}

/* HERO (shop search hero) */
.hero{
  background:linear-gradient(180deg,var(--bg-alt),var(--bg));
  padding:40px 20px 26px; text-align:center;
}
.hero h2{font-size:30px; margin:0 0 8px; color:var(--brown-900); line-height:1.25;}
.hero p{font-size:15px; color:var(--brown-700); margin:0; max-width:520px; margin:0 auto; line-height:1.6;}

main{max-width:1200px; margin:0 auto; padding:6px 20px 40px;}

.category-section{margin-top:38px; scroll-margin-top:150px;}
.category-head{
  display:flex; align-items:baseline; gap:10px; justify-content:space-between;
  border-bottom:2px solid var(--brown-800); padding-bottom:9px; margin-bottom:18px;
}
.category-head h3{font-size:21px; margin:0; color:var(--brown-900); font-weight:600;}
.category-head .count{font-size:12px; color:var(--brown-500);}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;
}
.card{
  background:var(--bg);
  border:1px solid var(--brown-200);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .15s, transform .15s, border-color .15s;
}
.card:hover{box-shadow:0 10px 24px rgba(46,27,14,.1); transform:translateY(-2px); border-color:var(--brown-500);}
.p-img{
  position:relative; aspect-ratio:1/1; background:var(--img-bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.p-img img{width:100%; height:100%; object-fit:cover; display:block;}
.p-img-fallback{
  width:100%; height:100%; align-items:center; justify-content:center;
  color:var(--brown-500); opacity:.4;
}
.p-img-fallback svg{width:34%; height:34%;}
.p-body{padding:12px; display:flex; flex-direction:column; gap:8px; flex:1;}
.p-name{
  font-size:13.5px; font-weight:600; color:var(--brown-900);
  line-height:1.3; min-height:34px;
}
.variant-row{display:flex; gap:6px; flex-wrap:wrap;}
.variant-btn{
  border:1.5px solid var(--brown-200); background:var(--bg);
  color:var(--brown-700); font-size:11px; font-weight:600;
  padding:4px 9px; border-radius:2px; cursor:pointer;
}
.variant-btn.active{background:var(--green-700); border-color:var(--green-700); color:#fff;}
.price-line{font-size:16px; font-weight:700; color:var(--brown-800); font-family:'Fraunces',serif;}
.qty-row{display:flex; align-items:center; gap:10px;}
.qty-row button{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--brown-200);
  background:var(--bg-alt); font-size:15px; cursor:pointer; color:var(--brown-800);
  display:flex;align-items:center;justify-content:center; line-height:1;
}
.qty-row span{font-size:14px; font-weight:600; min-width:16px; text-align:center;}
.add-btn{
  background:var(--brown-800); color:#fff; border:none;
  padding:9px 10px; border-radius:2px; font-weight:600; font-size:12.5px;
  cursor:pointer; margin-top:auto; letter-spacing:.2px;
}
.add-btn:hover{background:var(--green-700);}
.add-btn.added{background:var(--gold-500); color:var(--brown-900);}

/* FLOATING BAR (shop.html) */
.float-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:45;
  background:var(--bg); border-top:1px solid var(--brown-200);
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-shadow:0 -3px 10px rgba(0,0,0,.06);
}
.float-bar .total{font-size:14px; font-weight:600; color:var(--brown-800);}
.float-bar button{
  background:var(--green-700); color:#fff; border:none;
  padding:10px 22px; border-radius:2px; font-weight:600; font-size:13px; cursor:pointer; letter-spacing:.2px;
}

/* CART DRAWER (shop.html) */
.overlay{
  position:fixed; inset:0; background:rgba(30,18,8,.5); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px,92vw);
  background:var(--bg); z-index:51;
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
  box-shadow:-4px 0 18px rgba(0,0,0,.2);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  background:var(--brown-800); color:#F5E9D0;
  padding:18px 16px; display:flex; justify-content:space-between; align-items:center;
}
.drawer-head h3{margin:0; font-size:20px;}
.drawer-head button{background:none; border:none; color:#F5E9D0; font-size:22px; cursor:pointer; line-height:1;}
.drawer-body{flex:1; overflow-y:auto; padding:14px;}
.cart-item{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-alt); border:1px solid var(--brown-200);
  border-radius:2px; padding:10px 12px; margin-bottom:10px; gap:8px;
}
.cart-item .ci-name{font-size:13.5px; font-weight:600; color:var(--brown-900);}
.cart-item .ci-sub{font-size:12px; color:var(--brown-500);}
.cart-item .ci-qty{display:flex; align-items:center; gap:8px;}
.cart-item .ci-qty button{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--brown-200);
  background:var(--bg); cursor:pointer; font-size:13px; line-height:1;
}
.cart-item .ci-price{font-size:13.5px; font-weight:700; color:var(--brown-800); min-width:56px; text-align:right;}
.empty-cart{text-align:center; color:var(--brown-500); padding:44px 10px; font-size:14px; line-height:1.7;}

.order-form label{font-size:12px; font-weight:600; color:var(--brown-700); display:block; margin:10px 0 4px; letter-spacing:.2px;}
.order-form input, .order-form textarea{
  width:100%; padding:9px 10px; border-radius:2px; border:1.5px solid var(--brown-200);
  font-family:'Inter',sans-serif; font-size:13.5px; outline:none; background:var(--bg);
}
.order-form input:focus, .order-form textarea:focus{border-color:var(--brown-500);}
.order-form textarea{resize:vertical; min-height:50px;}
.cod-note{
  background:var(--bg-alt); border:1px dashed var(--brown-500);
  border-radius:2px; padding:11px 12px; font-size:12.5px; color:var(--brown-800);
  margin-top:12px; line-height:1.6;
}
.cod-note strong{color:var(--brown-900);}
.drawer-foot{padding:14px 16px; border-top:1px solid var(--brown-200); background:var(--bg);}
.total-row{display:flex; justify-content:space-between; font-size:17px; font-weight:700; color:var(--brown-900); margin-bottom:10px; font-family:'Fraunces',serif;}
.wa-order-btn{
  width:100%; background:var(--wa-green); color:#fff; border:none;
  padding:13px; border-radius:2px; font-size:14.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; letter-spacing:.2px;
}

/* ============ NEW: GENERIC PAGE / CONTENT STYLES ============ */

/* Hero banner (Home page) */
.hero-banner{
  position:relative; background:var(--brown-900); color:#F5E9D0;
  overflow:hidden; min-height:360px;
  display:flex; align-items:center;
}
.hero-banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38;
}
.hero-banner-inner{
  position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:70px 20px;
  text-align:center; width:100%;
}
.hero-banner .eyebrow{
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-500); font-weight:700; margin-bottom:12px;
}
.hero-banner h2{font-size:38px; margin:0 0 14px; line-height:1.2; color:#fff;}
.hero-banner p{font-size:15.5px; max-width:560px; margin:0 auto 26px; line-height:1.7; color:#EADFC7;}
.hero-cta{
  display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.btn-primary{
  background:var(--gold-500); color:var(--brown-900); border:none;
  padding:13px 26px; border-radius:2px; font-weight:700; font-size:14px; letter-spacing:.2px; cursor:pointer;
}
.btn-primary:hover{background:#d49b4d;}
.btn-outline{
  background:transparent; color:#F5E9D0; border:1.5px solid #F5E9D0;
  padding:12px 25px; border-radius:2px; font-weight:600; font-size:14px; letter-spacing:.2px; cursor:pointer;
}
.btn-outline:hover{background:rgba(255,255,255,.1);}

/* Promo banners grid */
.banner-section{padding:44px 20px 10px; max-width:1200px; margin:0 auto;}
.banner-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.banner-card{
  background:var(--bg-alt); border:1px solid var(--brown-200); border-radius:var(--radius);
  padding:22px 18px; text-align:center;
}
.banner-card .b-icon{
  width:52px;height:52px;border-radius:50%; background:var(--green-700); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.banner-card h4{margin:0 0 6px; font-size:15px; color:var(--brown-900);}
.banner-card p{margin:0; font-size:12.5px; color:var(--brown-700); line-height:1.6;}

/* Story / About section */
.story-section{
  max-width:1200px; margin:0 auto; padding:54px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
}
.story-img{
  aspect-ratio:4/3; background:var(--img-bg); border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--brown-200);
}
.story-img img{width:100%; height:100%; object-fit:cover;}
.story-text .eyebrow{
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:10px;
}
.story-text h2{font-size:27px; margin:0 0 14px; color:var(--brown-900); line-height:1.3;}
.story-text p{font-size:14.5px; color:var(--brown-700); line-height:1.8; margin:0 0 14px;}
.story-points{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
.story-point{display:flex; gap:12px; align-items:flex-start;}
.story-point .sp-icon{
  width:30px;height:30px;border-radius:50%; background:var(--brown-800); color:#F5E9D0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.story-point div p{margin:0; font-size:13px; color:var(--brown-700); line-height:1.6;}
.story-point div strong{font-size:13.5px; color:var(--brown-900);}

/* Category teaser (Home page) */
.cat-teaser-section{max-width:1200px; margin:0 auto; padding:20px 20px 54px;}
.section-title{text-align:center; margin-bottom:26px;}
.section-title .eyebrow{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:8px;}
.section-title h2{font-size:26px; margin:0; color:var(--brown-900);}
.cat-teaser-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.cat-teaser-card{
  background:var(--bg); border:1px solid var(--brown-200); border-radius:var(--radius);
  overflow:hidden; text-align:center; transition:box-shadow .15s, transform .15s;
}
.cat-teaser-card:hover{box-shadow:0 10px 24px rgba(46,27,14,.1); transform:translateY(-2px);}
.cat-teaser-img{aspect-ratio:1/1; background:var(--img-bg); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cat-teaser-img img{width:100%;height:100%;object-fit:cover;}
.cat-teaser-card span{display:block; padding:12px 8px; font-size:13px; font-weight:600; color:var(--brown-900);}

/* Simple page header (About / Contact / Policies) */
.page-hero{
  background:var(--bg-alt); border-bottom:1px solid var(--brown-200);
  padding:36px 20px; text-align:center;
}
.page-hero .eyebrow{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:8px;}
.page-hero h2{font-size:28px; margin:0; color:var(--brown-900);}
.page-hero p{font-size:14px; color:var(--brown-700); margin:8px auto 0; max-width:520px; line-height:1.6;}

/* Policy / long-text content */
.policy-content{max-width:820px; margin:0 auto; padding:40px 20px 60px;}
.policy-content h3{font-size:18px; color:var(--brown-900); margin:28px 0 10px;}
.policy-content h3:first-child{margin-top:0;}
.policy-content p{font-size:14px; line-height:1.85; color:var(--brown-700); margin:0 0 14px;}
.policy-content ul{margin:0 0 14px; padding-left:0;}
.policy-content ul li{
  font-size:14px; line-height:1.8; color:var(--brown-700); margin-bottom:8px;
  padding-left:20px; position:relative;
}
.policy-content ul li::before{
  content:"—"; position:absolute; left:0; color:var(--gold-600); font-weight:700;
}
.policy-updated{font-size:12px; color:var(--brown-500); text-align:center; margin-bottom:0; padding:0 20px;}

/* About page */
.about-grid{
  max-width:1200px; margin:0 auto; padding:50px 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
}
.about-highlights{
  max-width:1200px; margin:0 auto; padding:0 20px 54px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.highlight-card{
  background:var(--bg-alt); border:1px solid var(--brown-200); border-radius:var(--radius);
  padding:22px 18px; text-align:center;
}
.highlight-card .h-num{font-family:'Fraunces',serif; font-size:26px; color:var(--brown-800); font-weight:700;}
.highlight-card p{margin:6px 0 0; font-size:12.5px; color:var(--brown-700); line-height:1.6;}

/* Contact page */
.contact-grid{
  max-width:1200px; margin:0 auto; padding:44px 20px 60px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:36px;
}
.contact-card{
  background:var(--bg-alt); border:1px solid var(--brown-200); border-radius:var(--radius); padding:26px;
}
.contact-card h3{margin:0 0 18px; font-size:18px; color:var(--brown-900);}
.contact-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px;}
.contact-row:last-child{margin-bottom:0;}
.contact-row .c-icon{
  width:38px;height:38px;border-radius:50%; background:var(--brown-800); color:#F5E9D0; flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.contact-row strong{display:block; font-size:13.5px; color:var(--brown-900); margin-bottom:2px;}
.contact-row span, .contact-row a{font-size:13px; color:var(--brown-700); line-height:1.6;}
.contact-form-card{
  background:var(--bg); border:1px solid var(--brown-200); border-radius:var(--radius); padding:26px;
}
.contact-form-card h3{margin:0 0 6px; font-size:18px; color:var(--brown-900);}
.contact-form-card > p{margin:0 0 18px; font-size:13px; color:var(--brown-700); line-height:1.6;}

/* FOOTER */
footer{background:var(--brown-900); color:#E7DCC3; margin-top:24px;}
.footer-grid{
  max-width:1200px; margin:0 auto; padding:48px 20px 26px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:28px;
}
.footer-col h4{font-size:15px; color:#F5E9D0; margin:0 0 14px; font-family:'Fraunces',serif; font-weight:600;}
.footer-col p, .footer-col li{font-size:13px; line-height:1.9; color:#CBBB99;}
.footer-col li a:hover{color:var(--gold-500);}
.footer-brand-logo{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.footer-brand-logo .brand-logo{width:38px;height:38px;font-size:15px;}
.footer-brand-logo span{font-family:'Fraunces',serif; font-size:18px; color:#F5E9D0;}
.footer-bottom{
  border-top:1px solid #5B4529; text-align:center; padding:16px 20px;
  font-size:12px; color:#B7A57F;
}

@media(max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .header-search{display:none;}
  .story-section, .about-grid{grid-template-columns:1fr;}
  .banner-grid{grid-template-columns:1fr;}
  .cat-teaser-grid{grid-template-columns:repeat(2,1fr);}
  .about-highlights{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .hero-banner h2{font-size:29px;}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}