/* ============================================================
   TR Organic Seeds Natural – Traditional Indian Premium Theme
   ============================================================ */

/* ---- Root Palette: Earthy Greens + Saffron + Turmeric ---- */
:root {
  --green-deep:    #0d3319;
  --green-dark:    #14421f;
  --green-mid:     #1e6b2e;
  --green-rich:    #2d8a40;
  --green-light:   #4db860;
  --green-pale:    #e6f4ea;
  --green-xpale:   #f0f9f2;

  --saffron:       #e8861a;
  --saffron-light: #f5a832;
  --turmeric:      #d4961e;
  --turmeric-pale: #fdf3d6;
  --gold:          #c8881a;
  --gold-light:    #f5d98a;
  --gold-pale:     #fdf6e3;

  --earth:         #6b4423;
  --earth-mid:     #8b5e34;
  --earth-pale:    #f5ede0;
  --cream:         #fef9f0;
  --parchment:     #fdf8f0;
  --warm-white:    #fffef8;

  --text-dark:     #1a1a1a;
  --text-mid:      #3d3d3d;
  --text-body:     #5a5a5a;
  --text-light:    #888;

  --border:        #e2ddd4;
  --border-green:  #b8d9c2;
  --border-gold:   #e8c97a;

  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-xs:  0 1px 4px rgba(0,0,0,.06);
  --shadow-sm:  0 2px 10px rgba(0,0,0,.09);
  --shadow-md:  0 6px 28px rgba(0,0,0,.13);
  --shadow-lg:  0 16px 56px rgba(0,0,0,.16);
  --shadow-green: 0 8px 32px rgba(30,107,46,.3);
  --shadow-gold:  0 8px 28px rgba(200,136,26,.3);

  --transition: .22s cubic-bezier(.4,0,.2,1);
  --font-head:  'Playfair Display', Georgia, serif;
  --font-body:  'Inter', system-ui, sans-serif;
}

/* ---- Traditional Pattern backgrounds ---- */
.trad-pattern-bg {
  background-color: var(--green-dark);
  background-image:
    radial-gradient(circle at 20px 20px, rgba(255,255,255,.03) 2px, transparent 2px),
    radial-gradient(circle at 60px 60px, rgba(255,255,255,.02) 2px, transparent 2px);
  background-size: 80px 80px;
}

.saffron-divider {
  height: 4px;
  background: linear-gradient(90deg, var(--green-dark), var(--saffron), var(--turmeric), var(--saffron), var(--green-dark));
  border-radius: 2px;
}

.trad-border-top {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--green-dark), var(--saffron), var(--turmeric), var(--saffron), var(--green-dark)) 1;
}

/* ---- Header: Traditional deep green ---- */
.site-header {
  background: rgba(255, 254, 248, .98) !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg, var(--green-dark), var(--saffron) 50%, var(--green-dark)) 1 !important;
}

/* ---- Announcement bar: saffron ---- */
.announcement-bar, .ann-bar {
  background: linear-gradient(90deg, #0d3319 0%, #1e6b2e 40%, #c8881a 70%, #1e6b2e 85%, #0d3319 100%) !important;
}

/* ---- Hero: Traditional feel ---- */
.hero-slide, .page-hero {
  background-image:
    linear-gradient(135deg, rgba(13,51,25,.93) 0%, rgba(30,107,46,.82) 60%, rgba(200,136,26,.3) 100%),
    var(--hero-bg, none) !important;
  position: relative;
}

/* Traditional Paisley border on sections */
.trad-section-border {
  position: relative;
  padding-top: 24px;
}
.trad-section-border::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--turmeric), var(--saffron), transparent);
  border-radius: 2px;
}

/* ---- Product Cards: traditional warmth ---- */
.product-card, .pc {
  background: var(--parchment) !important;
  border: 1px solid #d8c9a0 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.product-card::before, .pc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-dark), var(--saffron), var(--turmeric));
  opacity: 0;
  transition: opacity .3s;
}
.product-card:hover::before, .pc:hover::before { opacity: 1; }
.product-card:hover, .pc:hover {
  box-shadow: 0 12px 36px rgba(30,107,46,.18), 0 4px 12px rgba(200,136,26,.12) !important;
  transform: translateY(-6px) !important;
  border-color: var(--saffron) !important;
}

/* ---- Product image wrapper ---- */
.product-img-wrap, .product-card a[style*="aspect-ratio"],
.pc a[style*="aspect-ratio"] {
  background: linear-gradient(135deg, #e8f5e0 0%, #fdf8f0 50%, #e8f5e0 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Traditional leaf decoration on product images */
.product-img-wrap::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(200,136,26,.08), transparent 70%);
  border-radius: 50%;
}

/* ---- ATС Button: Traditional style ---- */
.atc-wrap {
  border: 2px solid var(--green-dark) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: white;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.atc-wrap .qty-minus, .atc-wrap .qty-plus {
  background: linear-gradient(180deg, var(--green-mid), var(--green-dark)) !important;
  color: white !important;
  font-size: 1.1rem !important;
  transition: all .2s !important;
}
.atc-wrap .qty-minus:hover, .atc-wrap .qty-plus:hover {
  background: linear-gradient(180deg, var(--saffron), var(--gold)) !important;
}
.atc-wrap .add-label, .atc-wrap .atc-label {
  background: white !important;
  color: var(--green-dark) !important;
  font-weight: 700 !important;
  font-size: .84rem !important;
  letter-spacing: .06em !important;
  transition: all .2s !important;
}
.atc-wrap:hover .add-label, .atc-wrap:hover .atc-label {
  background: linear-gradient(90deg, #f0f9f2, #fdf8f0) !important;
}

/* ---- Section headers: Traditional ---- */
.section-header h2, h2[id*="title"] {
  font-family: var(--font-head);
  color: var(--green-dark);
  position: relative;
  display: inline-block;
}

/* ---- Trust bar: Traditional warmth ---- */
.trust-bar {
  background: linear-gradient(90deg, var(--green-xpale), var(--turmeric-pale), var(--green-xpale)) !important;
  border-top: 3px solid transparent !important;
  border-bottom: 3px solid transparent !important;
  border-image: linear-gradient(90deg, var(--green-dark), var(--saffron), var(--green-dark)) 1 !important;
}

/* ---- Why cards: traditional feel ---- */
.why-card {
  background: var(--parchment) !important;
  border-left: 4px solid var(--saffron) !important;
  border-top: 1px solid var(--border-gold) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.why-card:hover {
  border-left-color: var(--turmeric) !important;
  background: linear-gradient(135deg, var(--parchment), var(--gold-pale)) !important;
}
.why-icon { font-size: 2.4rem; margin-bottom: 14px; }

/* ---- Testimonial cards ---- */
.testimonial-card {
  background: linear-gradient(135deg, var(--parchment), white) !important;
  border: 1px solid var(--border-gold) !important;
}
.testimonial-card::before {
  content: '"';
  font-family: var(--font-head);
  font-size: 5rem;
  color: var(--turmeric-pale);
  position: absolute;
  top: 10px; right: 18px;
  line-height: 1;
}

/* ---- Buttons: traditional ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--green-rich), var(--green-dark)) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(30,107,46,.3) !important;
  letter-spacing: .02em;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--saffron), var(--gold)) !important;
  box-shadow: 0 6px 20px rgba(200,136,26,.4) !important;
}
.btn-gold {
  background: linear-gradient(135deg, var(--saffron), var(--gold)) !important;
  box-shadow: 0 4px 14px rgba(200,136,26,.3) !important;
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--turmeric), var(--earth)) !important;
}

/* ---- Combo banner: premium saffron ---- */
.combo-banner {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 50%, var(--saffron) 150%) !important;
}

/* ---- Discount/CTA banner ---- */
.discount-banner {
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid)) !important;
  position: relative;
  overflow: hidden;
}
.discount-banner::before {
  content: '';
  position: absolute;
  top: -50%; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,136,26,.15), transparent 70%);
}

/* ---- Blog cards ---- */
.blog-card {
  background: var(--parchment) !important;
  border: 1px solid var(--border-gold) !important;
}
.blog-card:hover { border-color: var(--saffron) !important; }

/* ---- Newsletter: warm parchment ---- */
.newsletter {
  background: linear-gradient(135deg, var(--turmeric-pale), var(--gold-pale), var(--turmeric-pale)) !important;
  border-top: 4px solid var(--saffron) !important;
  border-bottom: 4px solid var(--saffron) !important;
}

/* ---- Footer: deep traditional green ---- */
.site-footer {
  background: var(--green-deep) !important;
  position: relative;
}
.site-footer::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--green-dark), var(--saffron), var(--turmeric), var(--saffron), var(--green-dark));
}

/* ---- WhatsApp button: enhanced ---- */
.wa-float, .whatsapp-float {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  box-shadow: 0 6px 24px rgba(18,140,126,.4) !important;
  border: 2px solid rgba(255,255,255,.2) !important;
}

/* ---- Goal cards: traditional ---- */
.goal-card {
  background: var(--parchment) !important;
  border: 1px solid var(--border-gold) !important;
}
.goal-card:hover {
  background: linear-gradient(135deg, var(--green-pale), var(--turmeric-pale)) !important;
  border-color: var(--saffron) !important;
}

/* ---- Process steps: earthy ---- */
.process-step {
  background: linear-gradient(135deg, var(--green-pale), var(--turmeric-pale)) !important;
  border: 1px solid var(--border-gold) !important;
}
.step-num { color: var(--saffron) !important; }

/* ---- Page hero traditional decorative line ---- */
.page-hero-deco {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--gold-light), var(--saffron), transparent);
  margin: 16px auto;
  width: 200px;
  border-radius: 2px;
}

/* ---- Product dummy image styles ---- */
.product-dummy-img {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  background: linear-gradient(135deg, var(--green-pale) 0%, var(--turmeric-pale) 50%, var(--green-pale) 100%);
  position: relative;
  overflow: hidden;
}
.product-dummy-img::before {
  content: '';
  position: absolute;
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  background: radial-gradient(ellipse at 60% 40%, rgba(200,136,26,.08), transparent 60%),
              radial-gradient(ellipse at 30% 70%, rgba(30,107,46,.06), transparent 50%);
}
.product-dummy-img .pdi-label {
  font-family: var(--font-head);
  font-size: .72rem;
  color: var(--earth);
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

/* Traditional dot-border badge */
.trad-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  color: white;
  padding: 5px 16px;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(30,107,46,.3);
}
.trad-badge.gold {
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  box-shadow: 0 3px 10px rgba(200,136,26,.3);
}

/* ---- Section category banners: earthy gradient ---- */
.cat-banner-honey  { background: linear-gradient(135deg, #8b5e1a, var(--saffron), #c8881a) !important; }
.cat-banner-ghee   { background: linear-gradient(135deg, #4a2e10, var(--earth), #8b5e34) !important; }
.cat-banner-masala { background: linear-gradient(135deg, #5c1010, #8b2020, #c04020) !important; }
.cat-banner-jaggery{ background: linear-gradient(135deg, #2e1a08, #5c4010, #8b6020) !important; }

/* ---- Mobile responsive improvements ---- */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 1.9rem !important; line-height: 1.2; }
  .hero-sub        { font-size: .95rem !important; }
  .section-header h2 { font-size: 1.6rem !important; }
  .product-card, .pc { margin-bottom: 0; }
  .trust-bar .trust-item { justify-content: flex-start; }
  .trad-section-border::before { display: none; }
}

/* ---- Price: traditional ---- */
.price-now, .p-price { color: var(--green-dark) !important; }
.price-save, .p-save {
  background: linear-gradient(90deg, var(--turmeric-pale), var(--gold-pale)) !important;
  color: var(--saffron) !important;
  border: 1px solid var(--border-gold) !important;
  font-weight: 700 !important;
}

/* ---- Ratings: saffron stars ---- */
.stars { color: var(--saffron) !important; }

/* ---- Category tag pills ---- */
.product-cat {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---- WhatsApp order banner ---- */
.wa-order-banner {
  background: linear-gradient(135deg, #075e54, #128C7E, #25D366);
  color: white;
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.wa-order-banner::before {
  content: '';
  position: absolute;
  top: -40%; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  border-radius: 50%;
}
.wa-order-banner h2 { font-family: var(--font-head); font-size: 1.8rem; margin-bottom: 8px; }
.wa-order-banner p  { opacity: .9; font-size: .95rem; margin-bottom: 16px; }
.wa-order-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.wa-step { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; opacity: .9; }
.wa-step-num { background: rgba(255,255,255,.2); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.wa-cta-btn { background: white; color: #075e54; padding: 13px 28px; border-radius: 50px; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: all .2s; }
.wa-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }

@media (max-width: 600px) { .wa-order-banner { padding: 24px; } .wa-order-steps { grid-template-columns: 1fr; } }