:root {
  --brand-primary: #ff5722;
  --brand-primary-dark: #e64a19;
  --brand-navy: #14213d;
  --brand-bg-light: #f7f8fb;
}

body { font-family: 'Segoe UI', Roboto, -apple-system, sans-serif; color: #222; background: #fff; }

.brand-deal { color: var(--brand-navy); }
.brand-grab { color: var(--brand-primary); }
.brand-off  { color: var(--brand-navy); }

.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover { background-color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }
.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); }

.section-title { font-weight: 700; color: var(--brand-navy); position: relative; }

/* ---- Search ---- */
.search-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: #fff; border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: none; max-height: 320px; overflow-y: auto; }
.search-suggestions.show { display: block; }
.search-suggestions .list-group-item small { color: #888; }

/* ---- Hero slider ---- */
.slider-img { height: 420px; object-fit: cover; filter: brightness(0.75); }
.carousel-caption { text-align: left; left: 8%; right: auto; bottom: 15%; max-width: 520px; }
.carousel-caption h2 { font-weight: 800; font-size: 2.2rem; }
.slider-brand { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: .8rem; }

/* ---- Category grid ---- */
.category-card, .category-card-lg { display: block; text-align: center; background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 1.25rem .5rem; transition: transform .15s, box-shadow .15s; color: #222; }
.category-card:hover, .category-card-lg:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.category-icon { width: 52px; height: 52px; line-height: 52px; margin: 0 auto .5rem; background: linear-gradient(135deg, var(--brand-primary), #ff8a50); color: #fff; border-radius: 50%; font-weight: 700; font-size: 1.3rem; }
.category-name { font-weight: 600; font-size: .95rem; }

/* ---- Brand cards ---- */
.brand-scroll { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; }
.brand-card { flex: 0 0 240px; background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 1.25rem; text-align: center; }
.brand-logo { height: 60px; max-width: 140px; object-fit: contain; }
.brand-logo-lg { height: 88px; max-width: 200px; object-fit: contain; }
.brand-tile { border-radius: 14px; border: 1px solid #eee; }
.brand-desc { min-height: 42px; }

.brand-banner { background-size: cover; background-position: center; background-color: var(--brand-navy); color: #fff; }
.brand-banner h1 { color: #fff; }

/* ---- Deal / blog cards ---- */
.deal-card, .blog-card { border-radius: 14px; border: 1px solid #eee; overflow: hidden; }
.deal-card img, .blog-card img { height: 170px; object-fit: cover; }
.coupon-box { background: #fff3ea; border: 1px dashed var(--brand-primary); border-radius: 10px; padding: .75rem 1rem; }

footer a.footer-link { color: #bbb; text-decoration: none; }
footer a.footer-link:hover { color: #fff; }

.static-content, .blog-content { line-height: 1.7; }
.static-content h2, .blog-content h2 { margin-top: 1.5rem; }

@media (max-width: 767px) {
  .slider-img { height: 260px; }
  .carousel-caption { left: 5%; bottom: 8%; max-width: 90%; }
  .carousel-caption h2 { font-size: 1.4rem; }
}