/* =============================================================
   TTS Storefront — GREEN THEME OVERRIDE
   Loaded AFTER style.css to convert orange → green
   T&T Supermarket inspired green
   ============================================================= */

:root {
  /* Overriding brand colors from style.css */
  --brand-orange:       #1B7B3F !important;  /* deep T&T green */
  --brand-orange-light: #2E9E56 !important;  /* medium green */
  --brand-orange-dark:  #0F5D2E !important;  /* dark forest green */
  --brand-yellow:       #C6E64C !important;  /* lime accent (like T&T stripe) */

  --grad-brand:  linear-gradient(135deg, #0F5D2E 0%, #1B7B3F 55%, #C6E64C 100%) !important;
  --grad-sunset: linear-gradient(135deg, #C6E64C 0%, #2E9E56 50%, #0F5D2E 100%) !important;
}

/* ===== Announcement bar ===== */
.announce {
  background: linear-gradient(90deg, #0F5D2E 0%, #1B7B3F 50%, #2E9E56 100%) !important;
  color: #fff !important;
}
.announce strong { color: #C6E64C !important; }

/* ===== Header ===== */
.header .nav-main a:hover,
.header .nav-main a.active { color: #1B7B3F !important; }
.header .search-btn { background: #1B7B3F !important; }
.header .search-btn:hover { background: #0F5D2E !important; }
.search-box:focus-within { border-color: #1B7B3F !important; }
.icon-btn:hover { color: #1B7B3F !important; }

/* Login CTA */
.login-cta:hover { border-color: #1B7B3F !important; }
.login-cta-avatar { background: linear-gradient(135deg, #1B7B3F, #2E9E56) !important; }

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, #1B7B3F, #2E9E56) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(27, 123, 63, 0.35) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0F5D2E, #1B7B3F) !important;
  box-shadow: 0 10px 24px rgba(27, 123, 63, 0.45) !important;
}
.btn-outline:hover { border-color: #1B7B3F !important; color: #1B7B3F !important; }
.btn-light { background: #C6E64C !important; color: #0F5D2E !important; }
.btn-light:hover { background: #B5D63E !important; }

/* ===== Category cards (home) ===== */
.cat-card:hover {
  border-color: #C6E64C !important;
  box-shadow: 0 10px 24px rgba(27, 123, 63, 0.15) !important;
}
.cat-card.c1 .cat-icon-wrap { background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important; }
.cat-card.c2 .cat-icon-wrap { background: linear-gradient(135deg, #F1F8E9, #DCEDC8) !important; }
.cat-card.c3 .cat-icon-wrap { background: linear-gradient(135deg, #E0F2F1, #B2DFDB) !important; }
.cat-card.c4 .cat-icon-wrap { background: linear-gradient(135deg, #F9FBE7, #F0F4C3) !important; }
.cat-card.c5 .cat-icon-wrap { background: linear-gradient(135deg, #E8F5E9, #A5D6A7) !important; }
.cat-card.c6 .cat-icon-wrap { background: linear-gradient(135deg, #DCEDC8, #C5E1A5) !important; }

/* ===== Product Cards ===== */
.product-card:hover { border-color: #C6E64C !important; box-shadow: 0 12px 28px rgba(27,123,63,0.10) !important; }
.product-card .badge-flag { background: linear-gradient(135deg, #1B7B3F, #2E9E56) !important; color: #fff !important; }
.product-card .badge-flag.bestseller { background: linear-gradient(135deg, #0F5D2E, #1B7B3F) !important; }
.product-card .badge-flag.trending   { background: linear-gradient(135deg, #C6E64C, #B5D63E) !important; color: #0F5D2E !important; }
.product-card .badge-flag.new        { background: linear-gradient(135deg, #2E9E56, #43A047) !important; }
.product-card .badge-flag.premium    { background: linear-gradient(135deg, #0F5D2E, #1B5E20) !important; }
.product-card .badge-flag.hot        { background: linear-gradient(135deg, #558B2F, #33691E) !important; }
.product-card .wishlist-btn.active svg { color: #1B7B3F !important; }

/* ===== Hero Slider ===== */
.hero-slide.bg-orange {
  background: linear-gradient(135deg, #0F5D2E 0%, #1B7B3F 50%, #2E9E56 100%) !important;
}
.hero-slide.bg-night {
  background: linear-gradient(135deg, #0F172A 0%, #1B5E20 50%, #1B7B3F 100%) !important;
}
.hero-slide.bg-green {
  background: linear-gradient(135deg, #1B7B3F 0%, #2E9E56 50%, #C6E64C 100%) !important;
}
.hero-content .eyebrow { color: #C6E64C !important; }
.hero-content h1 span { color: #C6E64C !important; }
.hero-dots button.active { background: #C6E64C !important; }

/* ===== Promo double banner ===== */
.promo-card.bg-blue {
  background: linear-gradient(135deg, #0F5D2E 0%, #1B7B3F 100%) !important;
}
.promo-card.bg-orange {
  background: linear-gradient(135deg, #1B7B3F 0%, #2E9E56 50%, #C6E64C 100%) !important;
}
.promo-card .small-tag { background: rgba(198, 230, 76, 0.25) !important; color: #C6E64C !important; }
.promo-card .btn { background: #C6E64C !important; color: #0F5D2E !important; }

/* ===== Deal section ===== */
.deal-section {
  background: linear-gradient(180deg, rgba(198, 230, 76, 0.08) 0%, transparent 100%) !important;
}
.deal-head h2 .fire { color: #1B7B3F !important; }
.countdown .timer .unit {
  background: linear-gradient(135deg, #1B7B3F, #2E9E56) !important;
  color: #fff !important;
}

/* ===== Featured banner ===== */
.featured-banner {
  background: linear-gradient(135deg, #0F5D2E 0%, #1B7B3F 60%, #2E9E56 100%) !important;
}
.featured-banner .yellow { color: #C6E64C !important; }
.featured-banner .btn { background: #C6E64C !important; color: #0F5D2E !important; }

/* ===== Section head ===== */
.section-head .eyebrow { color: #1B7B3F !important; }
.view-all { color: #1B7B3F !important; }
.view-all-cats { border-color: #1B7B3F !important; color: #1B7B3F !important; }
.view-all-cats:hover { background: #1B7B3F !important; color: #fff !important; }

/* ===== Trust strip ===== */
.trust-item .ico { background: rgba(27, 123, 63, 0.1) !important; color: #1B7B3F !important; }

/* ===== Newsletter ===== */
.newsletter {
  background: linear-gradient(135deg, #0F5D2E 0%, #1B7B3F 100%) !important;
  color: #fff !important;
}
.news-form button { background: #C6E64C !important; color: #0F5D2E !important; }

/* ===== Filter panel (shop) ===== */
.filter-list a.active { background: rgba(27, 123, 63, 0.08) !important; color: #1B7B3F !important; }
.filter-list a:hover { color: #1B7B3F !important; }

/* ===== Cart, checkout ===== */
.cs-line.total span:last-child,
.summary-row.total span:last-child { color: #1B7B3F !important; }
.coupon-box button { background: #1B7B3F !important; }
.pd-actions .btn-primary { background: linear-gradient(135deg, #1B7B3F, #2E9E56) !important; }

/* Size buttons / color swatches active */
.size-btn.active { background: #1B7B3F !important; border-color: #1B7B3F !important; }
.color-swatch.active { border-color: #1B7B3F !important; box-shadow: 0 4px 12px rgba(27,123,63,0.3) !important; }

/* Payment method cards on checkout */
.pay-card:has(input:checked) { border-color: #1B7B3F !important; background: rgba(27,123,63,0.04) !important; }
.addr-pick:has(input:checked) { border-color: #1B7B3F !important; background: rgba(27,123,63,0.04) !important; }

/* Auth (login/register) side panel */
.auth-side { background: linear-gradient(135deg, #0F5D2E 0%, #1B7B3F 60%, #2E9E56 100%) !important; }
.auth-tab.active { color: #1B7B3F !important; border-bottom-color: #1B7B3F !important; }
.auth-foot a, .form-meta a { color: #1B7B3F !important; }
.field input:focus, .field select:focus { border-color: #1B7B3F !important; }

/* Account sidebar */
.acct-user { background: linear-gradient(135deg, #0F5D2E, #1B7B3F, #2E9E56) !important; }
.acct-avatar { background: rgba(198, 230, 76, 0.35) !important; color: #fff !important; }
.acct-menu a:hover { color: #1B7B3F !important; }
.acct-menu a.active { background: rgba(27,123,63,0.08) !important; color: #1B7B3F !important; }
.addr-card.default { border-color: #1B7B3F !important; background: rgba(27,123,63,0.03) !important; }
.addr-card .tag { background: #1B7B3F !important; }
.stat-card.orange { background: linear-gradient(135deg, rgba(27,123,63,0.10), rgba(198,230,76,0.10)) !important; border-color: rgba(27,123,63,0.18) !important; }
.stat-card.blue { background: linear-gradient(135deg, rgba(46,158,86,0.10), rgba(67,160,71,0.08)) !important; border-color: rgba(46,158,86,0.18) !important; }

/* Order status timeline */
.tl-step.done .tl-dot { background: #1B7B3F !important; }
.tl-step.done:not(:last-child)::after { background: #1B7B3F !important; }
.tl-step.done span { color: #1B7B3F !important; }

/* Bottom nav (mobile) */
.bottom-nav .bnav-item.active { color: #1B7B3F !important; }
.bottom-nav .bnav-item.center .ico-wrap {
  background: linear-gradient(135deg, #1B7B3F, #2E9E56) !important;
  box-shadow: 0 6px 16px rgba(27,123,63,0.35) !important;
}
.bottom-nav .badge { background: #C6E64C !important; color: #0F5D2E !important; }

/* Header badges */
.header .badge { background: #C6E64C !important; color: #0F5D2E !important; }

/* Alerts */
.alert-success { background: #E8F5E9 !important; color: #0F5D2E !important; border-color: #A5D6A7 !important; }

/* Discount flag on product card */
.product-card .discount-flag { background: #0F5D2E !important; }

/* Footer */
.footer { background: #0F172A !important; }
.footer ul a:hover { color: #C6E64C !important; }

/* ===== LOGO — force white background (no black) ===== */
.logo-link img, .drawer-head img, .footer-brand img {
  background: #fff !important;
  padding: 4px !important;
  border-radius: 8px !important;
  object-fit: contain !important;
}
.footer-brand img { background: rgba(255,255,255,0.95) !important; }

/* ===== PRODUCT GRID compactness ===== */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}
.product-card .product-img { aspect-ratio: 1 / 1.15 !important; }
.product-card .product-info { padding: 12px 12px 14px !important; }
.product-card .product-name { font-size: 13px !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 36px !important; }
.product-card .product-price .price { font-size: 16px !important; }
.product-card .product-price .mrp { font-size: 12px !important; }

/* ===== Header logo size ===== */
.header .logo-link img { max-height: 42px !important; width: auto !important; }
@media (max-width: 768px) { .header .logo-link img { max-height: 36px !important; } }