/* Wando's Interior storefront.
   Colours come from settings.THEME and are injected as CSS variables in
   base.html (:root). The values below are only fallbacks. */
:root {
  --brand-primary: #2e6b4f;
  --brand-primary-dark: #1f4a37;
  --brand-dark: #16251d;
  --brand-accent: #b8893b;
  --brand-cream: #faf6ef;
  --brand-ink: #1f2937;
  --whatsapp: #25d366;
}

body { font-family: 'Plus Jakarta Sans', "Segoe UI", Roboto, Arial, sans-serif; color: var(--brand-ink); background: #fff; }
h1, h2, h3, .font-display { font-family: 'Raleway', Georgia, 'Times New Roman', serif; }

/* Bootstrap colour overrides -> brand */
.btn-primary {
  --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-dark); --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-bg: var(--brand-primary-dark); --bs-btn-active-border-color: var(--brand-primary-dark);
  --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary); --bs-btn-active-border-color: var(--brand-primary);
}
.btn-accent { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.btn-accent:hover { filter: brightness(.92); color: #fff; }
.text-primary { color: var(--brand-primary) !important; }
a { color: var(--brand-primary); }
.bg-cream { background: var(--brand-cream); }
.text-accent { color: var(--brand-accent) !important; }

.top-bar { background: var(--brand-dark); color: #fff; }
.top-bar .announce { background: var(--brand-accent); color: #fff; font-weight: 600; letter-spacing: .02em; }
.navbar-brand img { height: 44px; width: auto; }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--brand-primary); }

.footer-link { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-link:hover { color: #fff; }
.site-footer { background: var(--brand-dark); }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-primary-dark) 60%, var(--brand-primary));
  color: #fff; padding: 4.5rem 0;
}
.hero .eyebrow { color: var(--brand-accent); letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; font-weight: 700; }
.hero-img { border-radius: .75rem; object-fit: cover; width: 100%; aspect-ratio: 4/3; box-shadow: 0 1rem 2rem rgba(0,0,0,.3); }

.section-title { text-align: center; margin-bottom: 1.75rem; }
.section-title h2 { font-weight: 700; margin-bottom: .25rem; }
.section-title p { color: #6b7280; margin: 0; }
.section-title .rule { width: 56px; height: 3px; background: var(--brand-accent); margin: .6rem auto 0; border-radius: 2px; }

/* Product cards */
.product-card { border: 1px solid #ece7dd; border-radius: .6rem; transition: box-shadow .15s ease, transform .15s ease; height: 100%; font-size: .875rem; background: #fff; }
.product-card:hover { box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.09); transform: translateY(-2px); }
.product-card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; border-radius: .6rem .6rem 0 0; background: var(--brand-cream); }
.product-card .card-body { padding: .7rem .8rem !important; }
.product-card .product-title { min-height: 2.4em; font-size: .88rem; line-height: 1.25; }
.product-card .product-category { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.product-card .btn { font-size: .8rem; padding: .35rem .5rem; }
.badge-sale { position: absolute; top: .5rem; left: .5rem; font-size: .68rem; z-index: 2; }
.badge-flag { position: absolute; top: .5rem; right: .5rem; font-size: .65rem; z-index: 2; background: var(--brand-accent); color: #fff; }
.price-old { text-decoration: line-through; color: #9ca3af; font-size: .78rem; }
.price-new { color: var(--brand-primary); font-weight: 700; font-size: 1rem; }

/* Category tile */
.category-tile { border-radius: .7rem; overflow: hidden; position: relative; display: block; color: #fff; text-decoration: none; }
.category-tile img { width: 100%; height: 190px; object-fit: cover; transition: transform .3s ease; background: var(--brand-cream); }
.category-tile:hover img { transform: scale(1.05); }
.category-tile .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,37,29,.85), rgba(22,37,29,.05) 70%); display: flex; align-items: flex-end; padding: 1rem; }

/* Service + feature cards */
.service-card { border: 1px solid #ece7dd; border-radius: .7rem; padding: 1.4rem; height: 100%; background: #fff; }
.service-card i { font-size: 1.8rem; color: var(--brand-accent); }
.feature-img { border-radius: .7rem; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--brand-cream); }
.check-list { list-style: none; padding: 0; }
.check-list li::before { content: "\2714"; color: var(--brand-primary); margin-right: .5rem; }

/* WhatsApp */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 1050; width: 56px; height: 56px; border-radius: 50%;
  background: var(--whatsapp); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,.25); text-decoration: none;
}
.whatsapp-float:hover { color: #fff; filter: brightness(1.05); }
.btn-whatsapp-order { background-color: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }
.btn-whatsapp-order:hover { background-color: #1ebc59; border-color: #1ebc59; color: #fff; }

/* Cart / checkout */
.cart-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: .4rem; background: var(--brand-cream); }

/* Policy pages */
.policy h2 { font-size: 1.05rem; font-weight: 700; margin-top: 1.75rem; }
.policy table { font-size: .92rem; }

img { max-width: 100%; height: auto; }