/* ════════════════════════════════════════════════════
   KAFCO Brand System — Applied April 2026
   Brand: Navy #1B2A4A | Orange #F47B20 | Blue #4A7BA7
════════════════════════════════════════════════════ */

/* ── 1. Brand Variables ── */
:root {
  --primary-color:     #F47B20;
  --kaf-navy:          #1B2A4A;
  --kaf-navy-dark:     #111D33;
  --kaf-navy-mid:      #243558;
  --kaf-orange:        #F47B20;
  --kaf-orange-hover:  #E06A10;
  --kaf-orange-soft:   #FEF0E6;
  --kaf-blue:          #4A7BA7;
  --kaf-blue-pale:     #EBF3FA;
  --kaf-off:           #F8F9FC;
  --kaf-border:        #E2E8F0;
  --kaf-text:          #1A2038;
  --kaf-text2:         #4A5578;
  --kaf-text3:         #8A95B0;
}

/* ── 2. Announcement Bar ── */
.kaf-ann {
  background: var(--kaf-navy-dark);
  color: rgba(255,255,255,.82);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  flex-wrap: wrap;
  gap: 0;
}
.kaf-ann__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
}
.kaf-ann__item:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.12);
}
.kaf-ann__pip {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--kaf-orange);
  flex-shrink: 0;
  animation: kafPip 2s infinite;
}
@keyframes kafPip { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (max-width: 767px) {
  .kaf-ann__item:not(:first-child) { display: none; }
  .kaf-ann { padding: 8px 12px; }
}

/* ── 3. Navbar — apply KAFCO navy ── */
.container.navbar.navbar-expand-lg.center-nav.transparent.navbar-light,
nav.navbar, .navbar.navbar-expand-lg {
  background-color: var(--kaf-navy) !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  box-shadow: 0 2px 16px rgba(17,29,51,.25) !important;
}
/* desktop nav links */
.navbar .navbar-nav .nav-link,
.navbar .nav-link {
  color: rgba(255,255,255,.75) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  border-radius: 7px !important;
  transition: all .18s !important;
}
.navbar .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.navbar .navbar-nav .nav-link.active {
  color: var(--kaf-orange) !important;
  background: rgba(244,123,32,.1) !important;
}
/* header icons (cart, search) */
.navbar .header-icon,
.navbar .header-icon svg,
.navbar .header-icon i {
  color: rgba(255,255,255,.75) !important;
  stroke: rgba(255,255,255,.75) !important;
}
.navbar .header-icon:hover,
.navbar .header-icon:hover svg,
.navbar .header-icon:hover i {
  color: var(--kaf-orange) !important;
  stroke: var(--kaf-orange) !important;
}
/* hamburger on mobile */
.navbar-toggler {
  border-color: rgba(255,255,255,.3) !important;
}
.navbar-toggler-icon {
  filter: invert(1) !important;
}
/* top-bar items (Contact, Language, Login) */
.topbar-text-color, .nva-color {
  background-color: var(--kaf-navy-dark) !important;
}
.text-light { color: rgba(255,255,255,.8) !important; }
/* logo sizing */
.navbar .brand-logo-link {
  max-height: 46px !important;
  width: auto !important;
}
.navbar .logo-img { display: flex; align-items: center; }

/* ── 4. Offcanvas / mobile menu ── */
.offcanvas {
  background: var(--kaf-navy) !important;
}
.offcanvas .nav-link {
  color: rgba(255,255,255,.78) !important;
}
.offcanvas .nav-link:hover,
.offcanvas .nav-link.active {
  color: var(--kaf-orange) !important;
}
.offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.08); }

/* ── 5. Trust Strip ── */
.kaf-trust {
  background: var(--kaf-navy-mid);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 3px solid var(--kaf-orange);
}
.kaf-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-right: 1px solid rgba(255,255,255,.06);
  flex: 1;
  min-width: 170px;
  justify-content: center;
}
.kaf-trust__item:last-child { border-right: none; }
.kaf-trust__icon { font-size: 17px; flex-shrink: 0; }
.kaf-trust__text { display: flex; flex-direction: column; gap: 1px; }
.kaf-trust__main { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.3; }
.kaf-trust__sub  { font-size: 10px;   color: rgba(255,255,255,.38); }
@media (max-width: 767px) { .kaf-trust { display: none; } }

/* ── 6. Primary buttons & badges ── */
.badge-primary, .add-to-cart,
.subscribe-form button, .custom-row, .copyright,
.button-success, .button-success:hover,
.nav-pills .nav-link.active,
.toggle-input:checked+.toggle.switch {
  background-color: var(--kaf-orange) !important;
}
.btn-primary, .btn-yellow {
  background-color: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.btn-primary:hover, .btn-yellow:hover {
  background-color: var(--kaf-orange-hover) !important;
  border-color: var(--kaf-orange-hover) !important;
}
.btn-outline-primary {
  color: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
}
/* add-to-cart outline button on product cards */
.btn-outline-secondary {
  --bs-btn-border-color: var(--kaf-orange) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-hover-bg: var(--kaf-orange) !important;
  --bs-btn-hover-border-color: var(--kaf-orange) !important;
  --bs-btn-color: var(--kaf-navy) !important;
}

/* ── 7. Link / text color overrides ── */
.see-all-category, .setting-icon, .link-color,
.featured-section-view-more, .footer-menu li:hover a,
.category li:hover .cat-name, .product-grid:hover .title a,
.span-color, .header-icon:hover,
.link-color circle, .link-color polyline, .link-color path {
  color: var(--kaf-orange) !important;
  stroke: var(--kaf-orange) !important;
}

/* ── 8. Product cards ── */
.product-grid {
  border-radius: 12px !important;
  border: 1.5px solid var(--kaf-border) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.product-grid:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 24px rgba(244,123,32,.12) !important;
  transform: translateY(-3px) !important;
}
.product-grid:hover .title a {
  color: var(--kaf-orange) !important;
}

/* ── 9. Category swiper slides ── */
.swiper-slide-category img {
  border: 2px solid rgba(244,123,32,.12) !important;
}
.swiper-slide-category:hover img {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 18px rgba(244,123,32,.15) !important;
}
.swiper-slide-category h6 { color: var(--kaf-navy) !important; }
.swiper-pagination-bullet-active {
  background: var(--kaf-orange) !important;
}

/* ── 10. Section title decorator ── */
.kaf-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--kaf-orange);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kaf-section-label::before {
  content: '';
  width: 22px; height: 2px;
  background: var(--kaf-orange);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── 11. Slider/swiper nav arrows ── */
.swiper-button-next::after,
.swiper-button-prev::after {
  color: var(--kaf-orange) !important;
  font-size: 18px !important;
}

/* ── 12. Footer ── */
.kaf-footer {
  background: var(--kaf-navy-dark) !important;
}
.kaf-footer__policy:hover,
.kaf-footer__link:hover {
  color: var(--kaf-orange) !important;
}
.kaf-footer__divider {
  background: rgba(244,123,32,.15) !important;
}

/* ── 13. Progress bar ── */
.progress-bar {
  background-image: linear-gradient(
    to right, var(--kaf-blue), var(--kaf-orange)
  ) !important;
}

/* ── 14. Breadcrumb ── */
.colored-breadcrumb, .page-footer {
  background-color: var(--kaf-navy) !important;
}
.breadcrumb-item.active,
.breadcrumb-item a {
  color: rgba(255,255,255,.7) !important;
}

/* ── 15. Search input focus ── */
.form-control:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.12) !important;
}

/* ── 16. Stat strip on hero ── */
.kaf-stat-strip {
  background: var(--kaf-navy-mid);
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 16px 40px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.kaf-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.kaf-stat__n {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -.5px; line-height: 1;
}
.kaf-stat__l { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .03em; }
@media (max-width: 575px) { .kaf-stat-strip { gap: 20px; padding: 12px 16px; } }

/* ── 17. Home feature cards (favourite suppliers / most ordered) ── */
.home-feature-card {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 12px !important;
  transition: all .2s !important;
}
.home-feature-card:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 4px 20px rgba(244,123,32,.1) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════
   KAFCO Products Listing Page — Brand Styles
   Added: April 2026
══════════════════════════════════════════════ */

/* ── Breadcrumb bar ── */
.wrapper.bg-soft-grape,
section.wrapper.bg-soft-grape {
  background: var(--kaf-navy) !important;
  padding: 14px 0 !important;
}
.wrapper.bg-soft-grape .breadcrumb-item a,
.wrapper.bg-soft-grape .breadcrumb-item.active,
.wrapper.bg-soft-grape .breadcrumb-item.active a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none !important;
}
.wrapper.bg-soft-grape .breadcrumb-item a:hover {
  color: var(--kaf-orange) !important;
}
.wrapper.bg-soft-grape .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.3) !important;
}
.wrapper.bg-soft-grape .breadcrumb-item.active:last-child,
.wrapper.bg-soft-grape .breadcrumb-item.active:last-child a {
  color: var(--kaf-orange) !important;
  font-weight: 600 !important;
}

/* ── Page background ── */
.listing-page.bg-light,
section.wrapper.listing-page {
  background: var(--kaf-off) !important;
}

/* ── Explore Categories section ── */
.explore-categories {
  margin-bottom: 24px;
}
.explore-categories .title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--kaf-orange) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.explore-categories .title::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--kaf-orange);
  border-radius: 1px;
  flex-shrink: 0;
  display: inline-block;
}

/* Category tiles */
.cat-tile {
  background: var(--tile-bg, #F0F4F8) !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  transition: all .2s !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
}
.cat-tile:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 4px 16px rgba(244,123,32,.15) !important;
  transform: translateY(-3px) !important;
}
.cat-tile.active {
  border-color: var(--kaf-orange) !important;
  background: var(--kaf-orange-soft) !important;
  box-shadow: 0 4px 16px rgba(244,123,32,.2) !important;
}
.cat-tile .cat-icon img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 8px;
}
.cat-tile .cat-icon i {
  font-size: 24px;
  color: var(--kaf-navy);
}
.cat-tile.active .cat-icon i { color: var(--kaf-orange); }
.cat-tile .cat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--kaf-navy) !important;
  line-height: 1.3 !important;
}
.cat-tile.active .cat-label { color: var(--kaf-orange) !important; }
.cat-tile:hover .cat-label  { color: var(--kaf-orange) !important; }

/* ── Sort / filter bar ── */
.listing-page .display-6 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.3px !important;
}
.listing-page .form-select {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kaf-text) !important;
  padding: 7px 32px 7px 12px !important;
  background-color: var(--white) !important;
  cursor: pointer !important;
  transition: border-color .18s !important;
}
.listing-page .form-select:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.1) !important;
}

/* Popular / Recent tab pills */
.listing-page .btn-sm.btn-primary {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 12px !important;
}
.listing-page .btn-sm.btn-outline-primary {
  color: var(--kaf-text2) !important;
  border-color: var(--kaf-border) !important;
  background: var(--white) !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 5px 16px !important;
  font-size: 12px !important;
}
.listing-page .btn-sm.btn-outline-primary:hover {
  color: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  background: var(--kaf-orange-soft) !important;
}

/* ── Product grid cards (desktop) ── */
.product-grid {
  background: var(--white) !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.product-grid:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 28px rgba(244,123,32,.12) !important;
  transform: translateY(-3px) !important;
}

/* Product title */
.product-grid .title a,
.product-grid .product-title a,
.list-product-title a {
  color: var(--kaf-navy) !important;
  font-weight: 700 !important;
  transition: color .18s !important;
}
.product-grid:hover .title a,
.list-product-title a:hover {
  color: var(--kaf-orange) !important;
}

/* Price */
.product-grid .price,
.price.text-dark,
span#price {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
}
.product-grid .price .text-muted { color: var(--kaf-text3) !important; }

/* Supplier line */
.small.text-muted.mb-1 {
  font-size: 11.5px !important;
  color: var(--kaf-text3) !important;
  font-weight: 500 !important;
}

/* Sale tag */
.sale_tag, .avatar.sale_tag {
  background: var(--kaf-orange) !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

/* Add to cart link (list view style) */
.add_to_cart {
  color: var(--kaf-orange) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border: 1.5px solid var(--kaf-orange) !important;
  border-radius: 7px !important;
  padding: 5px 14px !important;
  transition: all .18s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: transparent !important;
}
.add_to_cart:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.add_to_cart i { font-size: 14px !important; }

/* Add to cart circle button (grid view) */
.add_to_cart.btn.btn-light {
  background: var(--kaf-navy) !important;
  border-color: var(--kaf-navy) !important;
  color: #fff !important;
  border-radius: 50% !important;
}
.add_to_cart.btn.btn-light:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
}

/* ── List view cards ── */
.product-content.product_listing_list {
  padding: 12px 16px !important;
}
.d-flex.py-4 {
  background: var(--white) !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
  padding: 16px !important;
  transition: all .2s !important;
}
.d-flex.py-4:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 4px 20px rgba(244,123,32,.1) !important;
}

/* ── Pagination ── */
.page-item.active .page-link {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  font-weight: 700 !important;
}
.page-link {
  color: var(--kaf-navy) !important;
  border-radius: 7px !important;
  border-color: var(--kaf-border) !important;
  transition: all .18s !important;
}
.page-link:hover {
  color: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  background: var(--kaf-orange-soft) !important;
}

/* ── "No products" empty state ── */
.listing-page .text-center img + h3,
.listing-page .text-center h3 {
  color: var(--kaf-navy) !important;
  font-weight: 700 !important;
}

/* ── Product image hover overlay ── */
.product-grid .figure:hover .desktop_quick_view,
.product-grid figure:hover .desktop_quick_view {
  opacity: 1 !important;
}
.desktop_quick_view .add-to-fav-btn:hover i,
.desktop_quick_view .add-to-fav-btn:hover {
  color: var(--kaf-orange) !important;
}

/* ══════════════════════════════════════
   KAFCO Hero Section
══════════════════════════════════════ */
.kaf-hero {
  background: var(--kaf-navy);
  position: relative;
  overflow: hidden;
  padding: 52px 40px 48px;
}
.kaf-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.kaf-hero__shape {
  position: absolute;
  border-radius: 50%;
}
.kaf-hero__shape--1 {
  width: 500px; height: 500px;
  top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(74,123,167,.15) 0%, transparent 70%);
}
.kaf-hero__shape--2 {
  width: 300px; height: 300px;
  bottom: -60px; left: 30%;
  background: radial-gradient(circle, rgba(244,123,32,.07) 0%, transparent 70%);
}
.kaf-hero__shape--3 {
  width: 200px; height: 200px;
  top: 20%; left: -60px;
  background: radial-gradient(circle, rgba(255,255,255,.03) 0%, transparent 70%);
}

.kaf-hero__inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 1199px) {
  .kaf-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .kaf-hero { padding: 36px 20px 32px; }
}

/* Eyebrow */
.kaf-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,123,32,.12);
  border: 1px solid rgba(244,123,32,.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--kaf-orange);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.kaf-hero__pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kaf-orange);
  animation: kafPip 2s infinite;
  flex-shrink: 0;
}

/* Headline */
.kaf-hero__h1 {
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
.kaf-hero__orange { color: var(--kaf-orange); }
@media (max-width: 767px) {
  .kaf-hero__h1 { font-size: 32px; }
}

/* Subtext */
.kaf-hero__sub {
  font-size: 15.5px;
  color: rgba(255,255,255,.58);
  font-weight: 300;
  max-width: 540px;
  line-height: 1.65;
  margin-bottom: 30px;
}

/* Search bar */
.kaf-hero__search {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(244,123,32,.15);
  margin-bottom: 18px;
  max-width: 640px;
}
.kaf-hero__search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 18px;
  font-size: 14px;
  font-family: inherit;
  color: var(--kaf-text);
  height: 52px;
  background: transparent;
}
.kaf-hero__search-input::placeholder { color: var(--kaf-text3); }
.kaf-hero__search-btn {
  background: var(--kaf-orange);
  border: none;
  padding: 0 24px;
  height: 52px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .18s;
  white-space: nowrap;
  letter-spacing: .02em;
}
.kaf-hero__search-btn:hover { background: var(--kaf-orange-hover); }

/* Category pills */
.kaf-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 640px;
}
.kaf-hero__pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}
.kaf-hero__pill:hover {
  background: rgba(244,123,32,.15);
  border-color: rgba(244,123,32,.4);
  color: var(--kaf-orange);
  text-decoration: none;
}
.kaf-hero__pill--all {
  background: rgba(244,123,32,.12);
  border-color: rgba(244,123,32,.3);
  color: var(--kaf-orange);
  font-weight: 700;
}

/* Right panel */
.kaf-hero__right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kaf-hero__panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(4px);
}
.kaf-hero__panel-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kaf-hero__panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none;
  transition: background .15s;
  border-radius: 6px;
}
.kaf-hero__panel-row:last-child { border-bottom: none; }
.kaf-hero__panel-row:hover { background: rgba(255,255,255,.04); }
.kaf-hero__panel-emoji {
  font-size: 20px;
  width: 34px;
  text-align: center;
  flex-shrink: 0;
}
.kaf-hero__panel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kaf-hero__panel-name {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kaf-hero__panel-sub {
  font-size: 10px;
  color: rgba(255,255,255,.35);
}
.kaf-hero__panel-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--kaf-orange);
  flex-shrink: 0;
  text-align: right;
}
.kaf-hero__panel-price small {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255,255,255,.3);
  display: block;
}

/* Stats panel */
.kaf-hero__panel--stats { border-color: rgba(74,123,167,.2); }
.kaf-hero__panel-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.kaf-hero__panel-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.kaf-hero__panel-stat strong {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}
.kaf-hero__panel-stat span {
  font-size: 10px;
  color: rgba(255,255,255,.35);
}

/* Register button in panel */
.kaf-hero__register-btn {
  display: block;
  background: var(--kaf-orange);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 14px 20px;
  transition: background .18s;
  letter-spacing: .02em;
}
.kaf-hero__register-btn:hover {
  background: var(--kaf-orange-hover);
  color: #fff;
  text-decoration: none;
}

/* ══════════════════════════════════════
   KAFCO Hero — Full-bleed fix
   Breaks out of Bootstrap container
══════════════════════════════════════ */
.kaf-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 56px 5% 52px !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
}
.kaf-hero__inner {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 40px !important;
  align-items: center !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}
.kaf-hero__h1 {
  font-size: 44px !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.08 !important;
  letter-spacing: -1.5px !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.kaf-hero__sub {
  font-size: 15px !important;
  color: rgba(255,255,255,.6) !important;
  margin-bottom: 28px !important;
  display: block !important;
  max-width: 520px !important;
  line-height: 1.65 !important;
}
.kaf-hero__eyebrow {
  display: inline-flex !important;
  margin-bottom: 18px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.kaf-hero__search {
  display: flex !important;
  margin-bottom: 18px !important;
  max-width: 600px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.3) !important;
}
.kaf-hero__search-input {
  height: 54px !important;
  flex: 1 !important;
  display: block !important;
  padding: 0 18px !important;
}
.kaf-hero__search-btn {
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 24px !important;
  white-space: nowrap !important;
}
.kaf-hero__pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.kaf-hero__left {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
}
/* Remove d-none that might hide the old slider container */
section.kaf-hero {
  display: block !important;
}
@media (max-width: 1199px) {
  .kaf-hero__inner {
    grid-template-columns: 1fr !important;
  }
  .kaf-hero__right { display: none !important; }
}
@media (max-width: 767px) {
  .kaf-hero {
    padding: 36px 4% 32px !important;
  }
  .kaf-hero__h1 { font-size: 30px !important; }
  .kaf-hero__sub { font-size: 14px !important; }
}

/* ══════════════════════════════════════
   Hero full-bleed — escape template wrapper
   template.php puts everything in a div
   we need the hero to be truly full-width
══════════════════════════════════════ */

/* If template wraps in .page-content or similar */
.page-content .kaf-hero,
.content-area .kaf-hero,
main .kaf-hero,
#main .kaf-hero,
.main-content .kaf-hero,
div > section.kaf-hero {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Ensure hero is always block and visible */
section.kaf-hero {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 420px !important;
  background: #1B2A4A !important;
}

/* ══════════════════════════════════════
   HERO — Definitive layout fix
   Template has NO wrapper, so hero
   just needs its own structure enforced
══════════════════════════════════════ */
section.kaf-hero {
  display: block !important;
  background: #1B2A4A !important;
  padding: 60px 40px 56px !important;
  min-height: 440px !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Remove the vw breakout — not needed, template has no container */
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}
.kaf-hero__inner {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 40px !important;
  align-items: start !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}
.kaf-hero__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.kaf-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(244,123,32,.12) !important;
  border: 1px solid rgba(244,123,32,.25) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #F47B20 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  width: fit-content !important;
}
.kaf-hero__pip {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #F47B20 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
.kaf-hero__h1 {
  font-size: 46px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.06 !important;
  letter-spacing: -1.5px !important;
  margin: 0 0 16px 0 !important;
  display: block !important;
}
.kaf-hero__orange { color: #F47B20 !important; }
.kaf-hero__sub {
  font-size: 15px !important;
  color: rgba(255,255,255,.58) !important;
  line-height: 1.65 !important;
  margin: 0 0 28px 0 !important;
  max-width: 520px !important;
  display: block !important;
}
.kaf-hero__search {
  display: flex !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.3) !important;
  margin-bottom: 18px !important;
  max-width: 600px !important;
  height: 54px !important;
}
.kaf-hero__search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  color: #1A2038 !important;
  height: 54px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.kaf-hero__search-btn {
  background: #F47B20 !important;
  border: none !important;
  padding: 0 24px !important;
  height: 54px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  transition: background .18s !important;
}
.kaf-hero__search-btn:hover { background: #E06A10 !important; }
.kaf-hero__pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: 600px !important;
}
.kaf-hero__pill {
  display: inline-block !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.72) !important;
  text-decoration: none !important;
  transition: all .18s !important;
  white-space: nowrap !important;
}
.kaf-hero__pill:hover {
  background: rgba(244,123,32,.15) !important;
  border-color: rgba(244,123,32,.4) !important;
  color: #F47B20 !important;
  text-decoration: none !important;
}
.kaf-hero__pill--all {
  background: rgba(244,123,32,.12) !important;
  border-color: rgba(244,123,32,.3) !important;
  color: #F47B20 !important;
  font-weight: 700 !important;
}
.kaf-hero__right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
@media (max-width: 1199px) {
  .kaf-hero__inner { grid-template-columns: 1fr !important; }
  .kaf-hero__right { display: none !important; }
  section.kaf-hero { padding: 48px 24px 44px !important; }
}
@media (max-width: 767px) {
  section.kaf-hero { padding: 36px 16px 32px !important; min-height: 0 !important; }
  .kaf-hero__h1 { font-size: 30px !important; }
  .kaf-hero__search { height: 48px !important; }
  .kaf-hero__search-input { height: 48px !important; }
  .kaf-hero__search-btn { height: 48px !important; padding: 0 16px !important; }
}

/* ══════════════════════════════════════
   KAFCO Sellers / Suppliers Page
══════════════════════════════════════ */

/* Page title */
.listing-page h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.3px !important;
  margin-bottom: 20px !important;
}

/* Sort bar */
.listing-page #product_sort_by,
.listing-page #seller_search,
.listing-page .form-control {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: var(--kaf-text) !important;
  transition: border-color .18s !important;
}
.listing-page #product_sort_by:focus,
.listing-page #seller_search:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.1) !important;
}

/* Seller grid cards */
.listing-page .card.text-center {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all .2s !important;
  box-shadow: none !important;
  background: var(--white) !important;
}
.listing-page .card.text-center:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 28px rgba(244,123,32,.12) !important;
  transform: translateY(-3px) !important;
}

/* Seller image area */
.seller-image-container {
  background: var(--kaf-off) !important;
  border-bottom: 1.5px solid var(--kaf-border) !important;
  position: relative !important;
}
.fig_seller_image {
  width: 100% !important;
  max-height: 180px !important;
  object-fit: contain !important;
  padding: 16px !important;
}

/* Seller name */
.listing-page .card .title a {
  color: var(--kaf-navy) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  transition: color .18s !important;
  text-decoration: none !important;
}
.listing-page .card:hover .title a {
  color: var(--kaf-orange) !important;
}

/* Store name (subtitle) */
.listing-page .card .price.fs-14 {
  color: var(--kaf-text3) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 4px 0 12px !important;
}

/* Rating stars */
.listing-page .card .rating {
  margin: 8px 0 4px !important;
}

/* Heart / favourite button */
.seller-heart {
  background: rgba(255,255,255,.95) !important;
  border: 1px solid var(--kaf-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
  transition: all .18s !important;
}
.seller-heart:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 2px 12px rgba(244,123,32,.2) !important;
}
.seller-heart.active .uil { color: #dc3545 !important; }

/* View Products button */
.listing-page .view-products.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  transition: all .18s !important;
  text-decoration: none !important;
}
.listing-page .view-products.btn-outline-primary:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}

/* List view seller cards */
.listing-page .card.mt-5 {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: all .2s !important;
}
.listing-page .card.mt-5:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 4px 20px rgba(244,123,32,.1) !important;
}
.listing-page .card .list-product-title a {
  color: var(--kaf-navy) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.listing-page .card .list-product-title a:hover {
  color: var(--kaf-orange) !important;
}
.listing-page .card .text-muted.list-product-desc {
  color: var(--kaf-text3) !important;
  font-size: 13px !important;
}

/* Grid/list view toggle icons */
#product_grid_view_btn,
#product_list_view_btn {
  color: var(--kaf-text2) !important;
  transition: color .18s !important;
}
#product_grid_view_btn:hover,
#product_list_view_btn:hover {
  color: var(--kaf-orange) !important;
}

/* "Our Suppliers" page heading section */
.listing-page .product-listing {
  background: var(--white) !important;
  border-radius: 14px !important;
  border: 1px solid var(--kaf-border) !important;
  padding: 24px !important;
}

/* ══════════════════════════════════════════
   FULL HOMEPAGE OVERHAUL — April 2026
   Fix: navbar gap, hero light bg, all sections
══════════════════════════════════════════ */

/* ─── 1. Navbar gap fix ─── */
header.wrapper,
header.wrapper.bg-soft-primary {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--kaf-navy) !important;
}
.kaf-ann { margin-bottom: 0 !important; }
nav.navbar.navbar-clone.fixed,
nav.navbar.navbar-expand-lg {
  margin-top: 0 !important;
  top: 0 !important;
}
/* Kill any Bootstrap spacing that creates the gap */
.wrapper.bg-soft-primary > nav,
header > nav { margin-top: 0 !important; }

/* ─── 2. Hero → LIGHT background ─── */
section.kaf-hero {
  background: linear-gradient(135deg, #F8F9FC 0%, #EBF3FA 60%, #F0F6FF 100%) !important;
  border-bottom: 3px solid var(--kaf-orange) !important;
  min-height: 460px !important;
  padding-bottom: 60px !important;
}
.kaf-hero__bg { display: none !important; }
.kaf-hero__h1 {
  color: var(--kaf-navy) !important;
  font-size: 46px !important;
}
.kaf-hero__orange { color: var(--kaf-orange) !important; }
.kaf-hero__sub {
  color: var(--kaf-text2) !important;
  font-size: 15px !important;
}
.kaf-hero__eyebrow {
  background: rgba(244,123,32,.1) !important;
  border-color: rgba(244,123,32,.3) !important;
  color: var(--kaf-orange) !important;
}
.kaf-hero__pip { background: var(--kaf-orange) !important; }
/* Pills on light bg */
.kaf-hero__pill {
  background: rgba(27,42,74,.06) !important;
  border: 1px solid rgba(27,42,74,.14) !important;
  color: var(--kaf-text2) !important;
}
.kaf-hero__pill:hover,
.kaf-hero__pill--all {
  background: rgba(244,123,32,.1) !important;
  border-color: rgba(244,123,32,.4) !important;
  color: var(--kaf-orange) !important;
}
/* Right panel on light bg */
.kaf-hero__panel {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  box-shadow: 0 4px 20px rgba(27,42,74,.08) !important;
}
.kaf-hero__panel-label { color: var(--kaf-text3) !important; }
.kaf-hero__panel-name { color: var(--kaf-navy) !important; }
.kaf-hero__panel-sub { color: var(--kaf-text3) !important; }
.kaf-hero__panel-row { border-bottom-color: var(--kaf-border) !important; }
.kaf-hero__panel-row:hover { background: var(--kaf-off) !important; }
.kaf-hero__panel--stats { border-color: rgba(74,123,167,.2) !important; }
.kaf-hero__panel-stat strong { color: var(--kaf-navy) !important; }
.kaf-hero__panel-stat span { color: var(--kaf-text3) !important; }
/* Search on light bg */
.kaf-hero__search {
  box-shadow: 0 4px 24px rgba(27,42,74,.12) !important;
  border: 1.5px solid var(--kaf-border) !important;
}
/* Pills fully visible - extra bottom space */
.kaf-hero__pills { margin-bottom: 12px !important; }

/* ─── 3. Trust strip + stat bar tightening ─── */
.kaf-trust { margin-top: 0 !important; }

/* ─── 4. Favourite Suppliers / Most Ordered cards ─── */
.home-feature-card,
a.home-feature-card {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: all .2s !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.home-feature-card:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 24px rgba(244,123,32,.12) !important;
  transform: translateY(-2px) !important;
}
.home-feature-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kaf-navy) !important;
}
.home-feature-meta {
  font-size: 12px !important;
  color: var(--kaf-text3) !important;
}
.home-feature-cta {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--kaf-orange) !important;
  background: rgba(244,123,32,.1) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
}
/* Section wrapper for fav/most-ordered */
.home-feature-hero,
section.home-feature-hero {
  background: var(--kaf-off) !important;
  padding: 32px 0 !important;
}

/* ─── 5. Category tiles section ─── */
.category-tiles,
.explore-categories .cat-tiles,
.kaf-categories {
  background: #fff !important;
}
/* Section heading for categories */
.section-heading,
.featured-section-title,
.my-4.featured-section-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--kaf-orange) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.featured-section-title::before {
  content: '' !important;
  width: 20px !important;
  height: 2px !important;
  background: var(--kaf-orange) !important;
  border-radius: 1px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
/* The category swiper section */
.odd-section { background: #fff !important; }
section.wrapper.bg-body { background: var(--kaf-off) !important; }

/* ─── 6. "Latest Products" section ─── */
.home-products-section,
div:has(> .mySwiper) {
  background: var(--kaf-off) !important;
}
/* Latest Products title */
h2:contains("Latest Products"),
.section-title {
  font-family: inherit !important;
  color: var(--kaf-navy) !important;
  font-weight: 800 !important;
}
/* Product swiper cards on homepage */
.mySwiper .swiper-slide .fdp-card,
.swiper-slide.shadow-xl.product-bg {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 12px !important;
  transition: all .2s !important;
}
.swiper-slide.shadow-xl.product-bg:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 24px rgba(244,123,32,.12) !important;
  transform: translateY(-2px) !important;
}
/* "Shop More" / "View all" buttons */
a.btn[href*="products"],
.btn.btn-outline-primary.rounded-pill {
  border-color: var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  font-weight: 700 !important;
}
a.btn[href*="products"]:hover,
.btn.btn-outline-primary.rounded-pill:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}

/* ─── 7. App Download section ─── */
.app-download-section,
section:has(.app-download),
div:has(> img[src*="kaf_app"]),
div:has(> img[alt*="Download"]),
.kaf-app-section {
  background: var(--kaf-navy) !important;
  border-radius: 0 !important;
}
/* Target the phone mockup section - light blue bg → navy */
.section.bg-soft-primary,
section.bg-soft-primary,
div.bg-soft-primary {
  background: var(--kaf-navy) !important;
}
/* Text inside app section */
.bg-soft-primary h2,
.bg-soft-primary h3,
.bg-soft-primary p,
.bg-soft-primary .h2,
.bg-soft-primary .h3 {
  color: #fff !important;
}
/* App store buttons */
a[href*="app-store"],
a[href*="play.google"],
a[href*="apple.com"] {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all .18s !important;
}
a[href*="app-store"]:hover,
a[href*="play.google"]:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
}

/* ─── 8. General section backgrounds ─── */
/* Any light grey sections → clean white or off-white */
.bg-light:not(.navbar):not(.dropdown-menu) {
  background: var(--kaf-off) !important;
}
section.wrapper.bg-light {
  background: var(--kaf-off) !important;
}

/* ─── 9. "Latest Products" & section headings ─── */
.section-title-wrapper,
.d-flex.align-items-center.justify-content-between.mb-4,
.d-flex.align-items-center.justify-content-between.my-4 {
  border-bottom: 2px solid var(--kaf-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
}

/* ─── 10. Swiper navigation buttons ─── */
.swiper-button-next,
.swiper-button-prev {
  color: var(--kaf-orange) !important;
  background: #fff !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.12) !important;
  border: 1.5px solid var(--kaf-border) !important;
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 14px !important; }
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
}

/* ─── 11. Footer section above footer ─── */
.kaf-footer { margin-top: 0 !important; }

/* ══════════════════════════════════════════
   KAFCO New Homepage Sections
   Suppliers | Why KAFCO | CTA Band
   + Feature cards improvement
══════════════════════════════════════════ */

/* ─── Shared section layout ─── */
.kaf-sec-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 32px;
}
.kaf-sec-header {
  text-align: center;
  margin-bottom: 40px;
}
.kaf-sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,123,32,.1);
  border: 1px solid rgba(244,123,32,.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 800;
  color: var(--kaf-orange);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kaf-sec-title {
  font-size: 30px;
  font-weight: 900;
  color: var(--kaf-navy);
  letter-spacing: -.5px;
  line-height: 1.15;
  margin-bottom: 10px;
}
.kaf-sec-sub {
  font-size: 15px;
  color: var(--kaf-text2);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ─── Favourite / Most Ordered improved ─── */
.kaf-feature-section {
  padding: 32px 0 !important;
  background: transparent !important;
}
.home-feature-card {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  transition: all .22s !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.06) !important;
}
.home-feature-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 3px !important;
  background: linear-gradient(90deg, var(--kaf-navy), var(--kaf-orange)) !important;
}
.home-feature-card:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 8px 32px rgba(244,123,32,.14) !important;
  transform: translateY(-3px) !important;
  text-decoration: none !important;
}
.home-feature-media {
  flex-shrink: 0 !important;
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--kaf-off) !important;
  border-radius: 12px !important;
  border: 1px solid var(--kaf-border) !important;
}
.home-feature-media img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
}
.home-feature-body { flex: 1 !important; min-width: 0 !important; }
.home-feature-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.2px !important;
}
.home-feature-meta {
  font-size: 13px !important;
  color: var(--kaf-text3) !important;
  font-weight: 400 !important;
}
.home-feature-cta {
  flex-shrink: 0 !important;
  background: rgba(244,123,32,.1) !important;
  color: var(--kaf-orange) !important;
  border: 1px solid rgba(244,123,32,.25) !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  transition: all .18s !important;
}
.home-feature-card:hover .home-feature-cta {
  background: var(--kaf-orange) !important;
  color: #fff !important;
  border-color: var(--kaf-orange) !important;
}

/* ─── Suppliers Section ─── */
.kaf-suppliers-section {
  background: var(--kaf-off);
  padding: 64px 0;
}
.kaf-sup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 991px) { .kaf-sup-grid { grid-template-columns: 1fr; } }
.kaf-sup-card {
  background: #fff;
  border: 1.5px solid var(--kaf-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all .22s;
}
.kaf-sup-card:hover {
  border-color: var(--kaf-orange);
  box-shadow: 0 8px 32px rgba(244,123,32,.12);
  transform: translateY(-3px);
}
.kaf-sup-top {
  background: linear-gradient(135deg, var(--kaf-navy) 0%, #243558 100%);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kaf-sup-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.kaf-sup-name {
  font-size: 16px; font-weight: 800;
  color: #fff; margin-bottom: 3px; letter-spacing: -.2px;
}
.kaf-sup-loc { font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 7px; }
.kaf-sup-badge {
  display: inline-block;
  background: rgba(244,123,32,.2);
  border: 1px solid rgba(244,123,32,.35);
  border-radius: 4px; padding: 2px 8px;
  font-size: 10px; font-weight: 700; color: var(--kaf-orange); letter-spacing: .04em;
}
.kaf-sup-kpis {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
  padding: 16px 20px;
  background: var(--kaf-off);
  border-bottom: 1px solid var(--kaf-border);
}
.kaf-sup-kpi { text-align: center; }
.kaf-sup-kpi strong {
  display: block; font-size: 18px; font-weight: 900;
  color: var(--kaf-navy); letter-spacing: -.3px;
}
.kaf-sup-kpi span { font-size: 10px; color: var(--kaf-text3); }
.kaf-sup-footer {
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.kaf-sup-live {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--kaf-navy);
}
.kaf-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E; flex-shrink: 0;
  animation: kafPip 2s infinite;
}
.kaf-live-amber { background: #F59E0B !important; }
.kaf-sup-btn {
  background: var(--kaf-navy); color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 12px; font-weight: 700;
  text-decoration: none; transition: background .18s;
}
.kaf-sup-btn:hover { background: var(--kaf-orange); color: #fff; text-decoration: none; }
.kaf-sup-cta-row { text-align: center; }
.kaf-outline-btn {
  display: inline-block;
  border: 2px solid var(--kaf-navy); color: var(--kaf-navy);
  border-radius: 25px; padding: 12px 28px;
  font-size: 14px; font-weight: 700;
  text-decoration: none; transition: all .18s;
}
.kaf-outline-btn:hover {
  background: var(--kaf-navy); color: #fff; text-decoration: none;
}

/* ─── Why KAFCO Section ─── */
.kaf-why-section {
  background: var(--kaf-navy);
  padding: 64px 0;
}
.kaf-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 991px) { .kaf-why-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575px) { .kaf-why-grid { grid-template-columns: 1fr; } }
.kaf-why-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 28px 22px;
  transition: all .22s;
}
.kaf-why-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(244,123,32,.3);
  transform: translateY(-2px);
}
.kaf-why-icon {
  width: 50px; height: 50px; border-radius: 12px;
  background: rgba(244,123,32,.12);
  border: 1px solid rgba(244,123,32,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px;
}
.kaf-why-title {
  font-size: 15px; font-weight: 800; color: #fff;
  margin-bottom: 10px; letter-spacing: -.2px;
}
.kaf-why-desc { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; }

/* ─── CTA Band ─── */
.kaf-cta-band {
  background: linear-gradient(135deg, var(--kaf-orange) 0%, #D06010 100%);
  padding: 60px 32px;
  position: relative; overflow: hidden;
}
.kaf-cta-band::before {
  content: ''; position: absolute;
  right: -80px; top: -80px; width: 320px; height: 320px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.kaf-cta-inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 40px;
  flex-wrap: wrap; position: relative; z-index: 1;
}
.kaf-cta-label {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.65);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.kaf-cta-title {
  font-size: 34px; font-weight: 900; color: #fff;
  letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px;
}
.kaf-cta-sub { font-size: 15px; color: rgba(255,255,255,.75); max-width: 440px; line-height: 1.6; }
.kaf-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.kaf-cta-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; border-radius: 12px;
  text-decoration: none; transition: all .2s; border: none;
  font-family: inherit;
}
.kaf-cta-btn--navy { background: var(--kaf-navy); }
.kaf-cta-btn--navy:hover { background: var(--kaf-navy-dark); text-decoration: none; }
.kaf-cta-btn--outline {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.3);
}
.kaf-cta-btn--outline:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.kaf-cta-btn-ico { font-size: 20px; }
.kaf-cta-btn-txt {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
}
.kaf-cta-btn-txt small { font-size: 10px; color: rgba(255,255,255,.7); font-weight: 400; }
.kaf-cta-btn-txt strong { font-size: 14px; color: #fff; font-weight: 800; letter-spacing: .01em; }

/* ─── App Download Section ─── */
.kaf-app-section {
  background: var(--kaf-navy) !important;
}
.kaf-app-section h1,
.kaf-app-section h3,
.kaf-app-section p,
.kaf-app-section .lead { color: rgba(255,255,255,.9) !important; }
.kaf-app-section .btn-dark {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
.kaf-app-section .btn-dark:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
}
.kaf-app-section .btn-green {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
}
.kaf-app-section .btn-green:hover { background: #E06A10 !important; }

/* ─── Footer copyright fix ─── */
.kaf-footer__copy { color: rgba(255,255,255,.45) !important; font-size: 13px !important; }

/* ══════════════════════════════════════
   SECTION SIZING FIXES — Full width
══════════════════════════════════════ */

/* Suppliers section full width */
.kaf-suppliers-section {
  padding: 72px 40px !important;
  width: 100% !important;
}
.kaf-sup-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 24px !important;
  max-width: 1300px !important;
  margin: 0 auto 32px !important;
}
.kaf-sup-cta-row { max-width: 1300px; margin: 0 auto; }

/* Why KAFCO full width */
.kaf-why-section {
  padding: 72px 40px !important;
  width: 100% !important;
}
.kaf-why-grid {
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 20px !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}
.kaf-why-card {
  padding: 32px 24px !important;
  min-height: 200px !important;
}

/* CTA band full width */
.kaf-cta-band {
  padding: 64px 40px !important;
  width: 100% !important;
}
.kaf-cta-inner {
  max-width: 1300px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  flex-wrap: wrap !important;
}
.kaf-cta-title {
  font-size: 36px !important;
  margin-bottom: 14px !important;
}
.kaf-cta-sub { max-width: 480px !important; }
.kaf-cta-btns {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}
.kaf-cta-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  min-width: 200px !important;
}

/* App download section */
section.wrapper.kaf-app-section {
  background: var(--kaf-navy) !important;
  padding: 60px 40px !important;
}
.kaf-app-section .display-4 { color: #fff !important; }
.kaf-app-section h1,
.kaf-app-section h2,
.kaf-app-section h3,
.kaf-app-section p,
.kaf-app-section .lead,
.kaf-app-section .header-p {
  color: rgba(255,255,255,.85) !important;
}

/* Favourite/Most ordered full width */
.kaf-feature-section {
  padding: 48px 40px !important;
  max-width: 100% !important;
}

/* Section heading shared */
.kaf-sec-header { margin-bottom: 48px !important; }
.kaf-sec-title { font-size: 32px !important; }

/* Responsive */
@media (max-width: 991px) {
  .kaf-sup-grid { grid-template-columns: 1fr !important; }
  .kaf-why-grid { grid-template-columns: repeat(2,1fr) !important; }
  .kaf-cta-inner { flex-direction: column !important; text-align: center !important; }
  .kaf-cta-btns { justify-content: center !important; }
  .kaf-cta-sub { margin: 0 auto !important; }
}
@media (max-width: 575px) {
  .kaf-suppliers-section,
  .kaf-why-section,
  .kaf-cta-band { padding: 48px 20px !important; }
  .kaf-why-grid { grid-template-columns: 1fr !important; }
  .kaf-cta-title { font-size: 26px !important; }
}

/* ── Hide app download section (heavy image, old design) ── */
section.wrapper.kaf-app-section,
section.wrapper[style*="background-color:#1B2A4A"] {
  display: none !important;
}

/* ── CTA band full visibility fix ── */
.kaf-cta-band {
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 64px 40px !important;
}
.kaf-cta-band::before {
  z-index: 0 !important;
  pointer-events: none !important;
}
.kaf-cta-inner {
  position: relative !important;
  z-index: 2 !important;
}
.kaf-cta-text { flex: 1 !important; min-width: 280px !important; }
.kaf-cta-title {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
  letter-spacing: -.5px !important;
  display: block !important;
}
.kaf-cta-label {
  display: block !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.kaf-cta-sub {
  display: block !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* ── Category tiles improvements ── */
.category-tiles {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 16px !important;
  padding: 0 20px 32px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}
.category-tiles a {
  border-radius: 14px !important;
  border: 1.5px solid var(--kaf-border) !important;
  transition: all .2s !important;
  text-decoration: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 16px 20px !important;
  gap: 14px !important;
  background: var(--tile-bg, #fff) !important;
  position: relative !important;
}
.category-tiles a::after {
  content: '→' !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: var(--kaf-text3) !important;
  transition: all .2s !important;
}
.category-tiles a:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 4px 20px rgba(244,123,32,.12) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
.category-tiles a:hover::after { color: var(--kaf-orange) !important; right: 12px !important; }
.category-tiles img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.category-tiles h6,
.category-tiles span,
.category-tiles p {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kaf-navy) !important;
  margin: 0 !important;
}
.category-tiles a:hover h6,
.category-tiles a:hover span {
  color: var(--kaf-orange) !important;
}
/* Section title above categories */
.category-tiles-title,
div:has(+ .category-tiles) {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--kaf-orange) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 32px 20px 16px !important;
}

@media (max-width: 991px) {
  .category-tiles { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575px) {
  .category-tiles { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════
   KAFCO Categories — Full redesign
   Horizontal scrolling B2B category browser
══════════════════════════════════════════════ */

/* Wrapper */
div.category-tiles.ml-3.mr-3 {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 14px !important;
  padding: 8px 40px 32px !important;
  margin: 0 !important;
  max-width: 100% !important;
  grid-template-columns: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--kaf-orange) var(--kaf-border) !important;
  -webkit-overflow-scrolling: touch !important;
}
div.category-tiles.ml-3.mr-3::-webkit-scrollbar {
  height: 4px !important;
}
div.category-tiles.ml-3.mr-3::-webkit-scrollbar-track {
  background: var(--kaf-border) !important;
  border-radius: 2px !important;
}
div.category-tiles.ml-3.mr-3::-webkit-scrollbar-thumb {
  background: var(--kaf-orange) !important;
  border-radius: 2px !important;
}

/* Before the category tiles — add section label via CSS */
div.category-tiles.ml-3.mr-3::before {
  display: none !important;
}

/* Individual category tile — horizontal pill card */
div.category-tiles.ml-3.mr-3 a.cat-tile {
  flex: 0 0 auto !important;
  width: 180px !important;
  height: 110px !important;
  border-radius: 16px !important;
  border: 1.5px solid var(--kaf-border) !important;
  background: var(--tile-bg, #F8F9FC) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .22s !important;
  text-decoration: none !important;
}
div.category-tiles.ml-3.mr-3 a.cat-tile::after {
  content: '→' !important;
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  font-size: 16px !important;
  color: var(--kaf-text3) !important;
  transition: all .22s !important;
}
div.category-tiles.ml-3.mr-3 a.cat-tile:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 8px 28px rgba(244,123,32,.18) !important;
  transform: translateY(-4px) !important;
  text-decoration: none !important;
}
div.category-tiles.ml-3.mr-3 a.cat-tile:hover::after {
  color: var(--kaf-orange) !important;
  right: 10px !important;
}

/* Image inside tile */
div.category-tiles.ml-3.mr-3 .cat-img-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
div.category-tiles.ml-3.mr-3 .cat-img-wrap img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  border: none !important;
}

/* Category title */
div.category-tiles.ml-3.mr-3 .cat-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--kaf-navy) !important;
  line-height: 1.3 !important;
  max-width: 130px !important;
  margin: 0 !important;
}
div.category-tiles.ml-3.mr-3 a.cat-tile:hover .cat-title {
  color: var(--kaf-orange) !important;
}

/* Hide the grey dot */
div.category-tiles.ml-3.mr-3 .cat-dot { display: none !important; }

/* Add a heading above the category section */
div.category-tiles.ml-3.mr-3 {
  margin-top: 0 !important;
}

/* Section label above categories — inject via adjacent element */
.kaf-feature-section + div.category-tiles.ml-3.mr-3,
section.container.my-4.kaf-feature-section ~ div.category-tiles.ml-3.mr-3 {
  padding-top: 0 !important;
}

/* Category section header wrapper */
.kaf-cat-header {
  padding: 40px 40px 16px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}

/* Mobile */
@media (max-width: 767px) {
  div.category-tiles.ml-3.mr-3 {
    padding: 8px 16px 20px !important;
    gap: 10px !important;
  }
  div.category-tiles.ml-3.mr-3 a.cat-tile {
    width: 140px !important;
    height: 96px !important;
  }
}

/* ══════════════════════════════════════════════
   KAFCO Products Section — "Latest Products"
   Elevated B2B procurement style
══════════════════════════════════════════════ */

/* Section title area */
.featured-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 16px 0 !important;
  border-bottom: 2px solid var(--kaf-border) !important;
  margin-bottom: 24px !important;
}
.featured-section-title .section-title,
h3.mb-0.section-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.3px !important;
  position: relative !important;
}
h3.mb-0.section-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 4px !important;
  height: 22px !important;
  background: var(--kaf-orange) !important;
  border-radius: 2px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* View all link */
.featured-section-view-more {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--kaf-orange) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: gap .18s !important;
  border: 1.5px solid var(--kaf-orange) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
}
.featured-section-view-more:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
  gap: 8px !important;
}

/* fdp-card — product card on homepage */
.fdp-card {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all .22s !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: 0 2px 8px rgba(27,42,74,.04) !important;
}
.fdp-card:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 8px 28px rgba(244,123,32,.14) !important;
  transform: translateY(-3px) !important;
}

/* Override the coloured backgrounds */
.mySwiper .swiper-slide:nth-child(3n+2) .fdp-card,
.mySwiper .swiper-slide:nth-child(3n+3) .fdp-card {
  background: #fff !important;
}

/* Product image area */
.fdp-card .product-image,
.fdp-card figure,
.fdp-card .fig_image,
.fdp-card img.pic-1 {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--kaf-border) !important;
}

/* Category label on card */
.fdp-card .category-color-text,
.fdp-card .text-muted.small,
.fdp-card small {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--kaf-orange) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* Product title */
.fdp-card .title a,
.fdp-card h5 a,
.fdp-card .product-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  text-decoration: none !important;
  transition: color .18s !important;
}
.fdp-card:hover .title a { color: var(--kaf-orange) !important; }

/* Seller line */
.fdp-card .seller-name,
.fdp-card .text-muted {
  font-size: 11px !important;
  color: var(--kaf-text3) !important;
}

/* Price */
.fdp-card .price,
.fdp-card #price {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.3px !important;
}

/* Sale badge */
.fdp-card .badge,
.fdp-card .sale-badge,
.fdp-card .avatar.sale_tag {
  background: var(--kaf-orange) !important;
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #fff !important;
  padding: 2px 8px !important;
  letter-spacing: .04em !important;
}

/* Add to cart button on product cards */
.fdp-card .add_to_cart.btn,
.fdp-card .add-to-cart,
.fdp-card .btn-outline-secondary {
  background: var(--kaf-navy) !important;
  border-color: var(--kaf-navy) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .18s !important;
  flex-shrink: 0 !important;
}
.fdp-card .add_to_cart.btn:hover,
.fdp-card .add-to-cart:hover,
.fdp-card .btn-outline-secondary:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
}

/* Swiper nav buttons */
.mySwiper ~ .swiper-button-next,
.mySwiper ~ .swiper-button-prev,
.swiper-button-next, .swiper-button-prev {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.1) !important;
  transition: all .18s !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 13px !important;
  color: var(--kaf-navy) !important;
  font-weight: 900 !important;
}
.swiper-button-next:hover::after,
.swiper-button-prev:hover::after { color: #fff !important; }

/* "Shop More" button */
a[href*="products"].btn,
.btn.btn-outline-primary.rounded-pill[href*="products"] {
  border: 2px solid var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  border-radius: 25px !important;
  padding: 12px 32px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all .18s !important;
  display: inline-block !important;
  text-decoration: none !important;
}
a[href*="products"].btn:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}

/* Section background */
section:has(.mySwiper),
div:has(> .featured-section-title) {
  background: var(--kaf-off) !important;
  padding: 40px !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════
   CATEGORY FIX — full height + no clip
══════════════════════════════════════ */
div.category-tiles.ml-3.mr-3 {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 48px !important;
  padding-top: 16px !important;
  align-items: stretch !important;
}
div.category-tiles.ml-3.mr-3 a.cat-tile {
  width: 160px !important;
  min-width: 160px !important;
  height: 130px !important;
  min-height: 130px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-sizing: border-box !important;
  padding: 18px 16px 14px !important;
  justify-content: space-between !important;
  overflow: visible !important;
}
/* Image wrap bigger */
div.category-tiles.ml-3.mr-3 .cat-img-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
}
div.category-tiles.ml-3.mr-3 .cat-img-wrap img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}
/* Title at bottom of card */
div.category-tiles.ml-3.mr-3 .cat-title {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  line-height: 1.3 !important;
  max-width: 130px !important;
  margin-top: auto !important;
}
/* Arrow stays bottom right */
div.category-tiles.ml-3.mr-3 a.cat-tile::after {
  bottom: 12px !important;
  right: 12px !important;
  font-size: 14px !important;
}
/* Remove any parent clip */
div.category-tiles.ml-3.mr-3 {
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* ══════════════════════════════════════
   LATEST PRODUCTS — Creative header
══════════════════════════════════════ */

/* Target the section title container */
.featured-section-title {
  background: linear-gradient(135deg, var(--kaf-navy) 0%, #243558 100%) !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  margin-bottom: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: none !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Decorative circle behind title */
.featured-section-title::before {
  content: '' !important;
  position: absolute !important;
  right: -40px !important;
  top: -40px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: rgba(244,123,32,.08) !important;
  pointer-events: none !important;
}
.featured-section-title::after {
  content: '' !important;
  position: absolute !important;
  left: 30% !important;
  bottom: -30px !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: rgba(74,123,167,.06) !important;
  pointer-events: none !important;
}
/* Section title text */
.featured-section-title .section-title,
h3.mb-0.section-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -.3px !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Remove old orange bar ::before */
h3.mb-0.section-title::before {
  display: none !important;
}
/* Add eyebrow label before title */
.featured-section-title .section-title::before {
  content: 'Ready to Order' !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--kaf-orange) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  font-family: inherit !important;
}
/* View more link styled for dark bg */
.featured-section-view-more {
  background: rgba(244,123,32,.15) !important;
  border: 1.5px solid rgba(244,123,32,.35) !important;
  color: var(--kaf-orange) !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all .18s !important;
}
.featured-section-view-more:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
  border-color: var(--kaf-orange) !important;
}
/* Sub text below title */
.featured-section-title .section-title::after {
  content: 'Real wholesale prices · MOQ shown · Delivery time guaranteed' !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.45) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 5px !important;
}

/* Product section wrapper bg */
section.wrapper.bg-light,
.odd-section,
div.container.pb-14 {
  background: var(--kaf-off) !important;
}

/* ══════════════════════════════════════
   KAFCO Products Header — branded
══════════════════════════════════════ */
.kaf-products-header {
  background: linear-gradient(135deg, #1B2A4A 0%, #243558 60%, #1B2A4A 100%);
  border-radius: 18px;
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
}
.kaf-products-header::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(244,123,32,.07);
  pointer-events: none;
}
.kaf-products-header::after {
  content: '';
  position: absolute;
  left: 25%; bottom: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(74,123,167,.06);
  pointer-events: none;
}
.kaf-products-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  position: relative;
  z-index: 1;
}
.kaf-products-header__label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #F47B20;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kaf-products-header__title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.kaf-products-header__sub {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-weight: 400;
}
.kaf-products-header__cta {
  background: rgba(244,123,32,.15);
  border: 1.5px solid rgba(244,123,32,.4);
  color: #F47B20;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 24px;
  transition: all .18s;
}
.kaf-products-header__cta:hover {
  background: #F47B20;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 767px) {
  .kaf-products-header__inner { flex-direction: column; gap: 16px; text-align: center; }
  .kaf-products-header__cta { margin-left: 0; }
  .kaf-products-header__title { font-size: 18px; }
}

/* ══════════════════════════════════════════════
   KAFCO Product Detail Page — Full Brand
   File: product-page.php
══════════════════════════════════════════════ */

/* ── Page wrapper ── */
.wrapper.bg-light .container.main-content {
  padding-top: 40px !important;
  padding-bottom: 60px !important;
}

/* ── Gallery — main image ── */
.gallery-top-1 .swiper-slide img,
.swiper.gallery-top-1 img {
  border-radius: 16px !important;
  border: 1.5px solid var(--kaf-border) !important;
  background: var(--kaf-off) !important;
}
.product-main-nav {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  color: var(--kaf-navy) !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.1) !important;
  transition: all .18s !important;
}
.product-main-nav:hover {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
}

/* ── Thumbnails ── */
.gallery-thumbs-1 .swiper-slide img {
  border-radius: 10px !important;
  border: 1.5px solid var(--kaf-border) !important;
  transition: border-color .18s !important;
}
.gallery-thumbs-1 .swiper-slide:hover img {
  border-color: var(--kaf-orange) !important;
}
.gallery-thumbs-1 .swiper-slide-thumb-active img {
  border: 2px solid var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.12) !important;
}

/* ── Product title ── */
.product-page-div h1,
.product-page-div .product-title,
.main-content h1 {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.4px !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}

/* ── Rating ── */
.product-page-div .product-rating-small {
  margin-bottom: 12px !important;
}
.product-page-div .text-muted {
  color: var(--kaf-text3) !important;
  font-size: 13px !important;
}

/* ── Price ── */
.product-page-div .price,
.product-page-div #price,
.product-page-div .product-price {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
}
.product-page-div .striped-price s,
.product-page-div .special-price {
  font-size: 16px !important;
  color: var(--kaf-text3) !important;
  font-weight: 400 !important;
}

/* ── Supplier link ── */
.product-page-div a.text-danger,
.product-page-div .seller-link {
  color: var(--kaf-orange) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(244,123,32,.3) !important;
  transition: color .18s !important;
}
.product-page-div a.text-danger:hover { color: var(--kaf-navy) !important; }

/* ── Short description ── */
.product-page-div p.mb-5 {
  font-size: 14px !important;
  color: var(--kaf-text2) !important;
  line-height: 1.7 !important;
}

/* ── Quantity input ── */
.num-in.form-control {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  min-width: 130px !important;
}
.num-in.form-control .minus,
.num-in.form-control .plus {
  color: var(--kaf-navy) !important;
  background: var(--kaf-off) !important;
  border-radius: 999px !important;
  transition: all .18s !important;
}
.num-in.form-control .minus:hover,
.num-in.form-control .plus:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}
.num-in.form-control input.in-num {
  font-weight: 700 !important;
  color: var(--kaf-navy) !important;
}

/* ── Add to Cart button ── */
.product-page-div .btn-yellow,
.product-page-div .add_to_cart.btn-yellow,
.product-page-div a.btn-yellow {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  padding: 0 24px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all .18s !important;
  text-decoration: none !important;
}
.product-page-div .btn-yellow:hover {
  background: var(--kaf-orange-hover) !important;
  border-color: var(--kaf-orange-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(244,123,32,.3) !important;
}

/* ── Buy Now button ── */
.product-page-div .btn-danger,
.product-page-div .buy_now {
  background: var(--kaf-navy) !important;
  border-color: var(--kaf-navy) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  height: 46px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all .18s !important;
}
.product-page-div .btn-danger:hover {
  background: #0D1B30 !important;
  box-shadow: 0 4px 16px rgba(27,42,74,.25) !important;
  transform: translateY(-1px) !important;
}

/* ── Favourite button ── */
.product-page-div .item-like.fav_button_dif {
  border: 1.5px solid var(--kaf-border) !important;
  color: var(--kaf-text2) !important;
  background: #fff !important;
  border-radius: 999px !important;
  height: 46px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all .18s !important;
}
.product-page-div .item-like.fav_button_dif:hover {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}
.product-page-div .item-like.fav_button_dif.text-danger {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
}

/* ── Outline primary buttons ── */
.product-page-div .btn-outline-primary {
  border-color: var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.product-page-div .btn-outline-primary:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}

/* ── Stock badge ── */
.product-page-div .badge-success,
.product-page-div .badge-in-stock {
  background: #22C55E !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}
.product-page-div .badge-danger,
.product-page-div .badge-out-stock {
  background: #EF4444 !important;
  border-radius: 6px !important;
}

/* ── Right column info box ── */
.product-page-div .card,
.main-content .card {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.06) !important;
}
.product-page-div .card-header {
  background: var(--kaf-navy) !important;
  color: #fff !important;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-bottom: none !important;
}

/* ── Product tabs ── */
.nav-tabs-basic {
  border-bottom: 2px solid var(--kaf-border) !important;
  gap: 0 !important;
  padding: 0 !important;
}
.nav-tabs-basic .product-nav-tab {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kaf-text2) !important;
  border: 0 !important;
  background: transparent !important;
  padding: 14px 24px !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  border-radius: 0 !important;
  transition: all .18s !important;
}
.nav-tabs-basic .product-nav-tab:hover {
  color: var(--kaf-navy) !important;
  background: var(--kaf-off) !important;
}
.nav-tabs-basic .product-nav-tab.active {
  color: var(--kaf-orange) !important;
  border-bottom: 3px solid var(--kaf-orange) !important;
  font-weight: 800 !important;
}
.nav-tabs-basic .product-nav-tab:focus {
  box-shadow: none !important;
}

/* ── Tab content ── */
#nav-tabContent {
  padding: 24px 0 !important;
}
#nav-tabContent .tab-pane {
  padding: 0 !important;
  font-size: 14px !important;
  color: var(--kaf-text2) !important;
  line-height: 1.75 !important;
}

/* ── Breadcrumb ── (already navy but ensure product page) ── */
.product-page-div ~ .wrapper.bg-soft-grape,
.deeplink_wrapper .wrapper.bg-soft-grape {
  background: var(--kaf-navy) !important;
}

/* ── Related products section ── */
.product-page-div ~ section .section-title,
.main-content ~ section h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
}

/* ── MOQ / indicator badge ── */
.product-page-div .badge-warning,
.product-page-div .indicator-badge {
  background: var(--kaf-orange-soft) !important;
  color: var(--kaf-orange) !important;
  border: 1px solid rgba(244,123,32,.25) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}

/* ── Variant selectors ── */
.product-page-div .variant-btn,
.product-page-div .btn-variant {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 8px !important;
  color: var(--kaf-navy) !important;
  font-weight: 600 !important;
  transition: all .18s !important;
}
.product-page-div .variant-btn.active,
.product-page-div .variant-btn:hover {
  border-color: var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  background: var(--kaf-orange-soft) !important;
}

/* ══════════════════════════════════════
   LATEST PRODUCTS HEADER — Final fix
   Targets the actual DB-driven section
══════════════════════════════════════ */

/* The real featured-section-title (not hidden one) */
div.my-4.featured-section-title:not([style*="display:none"]) {
  background: linear-gradient(135deg, #1B2A4A 0%, #243558 60%, #1B2A4A 100%) !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  border-bottom: none !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
div.my-4.featured-section-title:not([style*="display:none"])::before {
  content: '' !important;
  position: absolute !important;
  right: -40px !important; top: -40px !important;
  width: 180px !important; height: 180px !important;
  border-radius: 50% !important;
  background: rgba(244,123,32,.07) !important;
  pointer-events: none !important;
}
/* Title text */
div.my-4.featured-section-title:not([style*="display:none"]) h3.mb-0.section-title,
div.my-4.featured-section-title:not([style*="display:none"]) .section-title {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -.3px !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Eyebrow label above title */
div.my-4.featured-section-title:not([style*="display:none"]) h3.mb-0.section-title::before {
  content: 'Ready to Order' !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #F47B20 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  font-family: inherit !important;
}
/* Subtitle text */
div.my-4.featured-section-title:not([style*="display:none"]) h6.title-sm,
div.my-4.featured-section-title:not([style*="display:none"]) .text-muted {
  color: rgba(255,255,255,.4) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  position: relative !important;
  z-index: 1 !important;
}
/* View more link */
div.my-4.featured-section-title:not([style*="display:none"]) .featured-section-view-more,
div.my-4.featured-section-title:not([style*="display:none"]) a {
  background: rgba(244,123,32,.15) !important;
  border: 1.5px solid rgba(244,123,32,.4) !important;
  color: #F47B20 !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1 !important;
  transition: all .18s !important;
}
div.my-4.featured-section-title:not([style*="display:none"]) a:hover {
  background: #F47B20 !important;
  color: #fff !important;
}

/* Hide the "Check KAF latest products" subtitle via CSS */
h6.title-sm.text-muted.font-weight-light {
  display: none !important;
}

/* ══════════════════════════════════════════════
   HOMEPAGE PRODUCT CARDS — Creative B2B Style
══════════════════════════════════════════════ */

/* Card wrapper */
.swiper-slide.shadow-xl.product-bg.slide_image,
.mySwiper .swiper-slide > div,
.swiper-slide .fdp-card,
.slide_image {
  border-radius: 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(27,42,74,.05) !important;
  transition: all .22s ease !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.swiper-slide.shadow-xl.product-bg.slide_image:hover,
.mySwiper .swiper-slide:hover > div,
.swiper-slide:hover .fdp-card {
  border-color: #F47B20 !important;
  box-shadow: 0 8px 32px rgba(244,123,32,.15) !important;
  transform: translateY(-4px) !important;
}

/* Product image area */
.slide_image .product-image,
.fdp-card .product-image,
.swiper-slide .fig_image,
.swiper-slide img.pic-1 {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-bottom: 1px solid #E2E8F0 !important;
  border-radius: 14px 14px 0 0 !important;
  background: #F8F9FC !important;
  display: block !important;
}

/* Card body */
.slide_image .product-content,
.fdp-card .product-content,
.swiper-slide .product-content {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 4px !important;
}

/* Category pill */
.slide_image .category-color-text,
.fdp-card .category-color-text,
.swiper-slide small,
.swiper-slide .text-uppercase {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #4A7BA7 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: #EBF3FA !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
  margin-bottom: 4px !important;
}

/* Product name */
.slide_image .title a,
.slide_image h4.title a,
.fdp-card .fdp-title a,
.swiper-slide .post-title a,
.swiper-slide h4.title a {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1B2A4A !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  display: block !important;
  margin-bottom: 4px !important;
  transition: color .18s !important;
}
.swiper-slide:hover h4.title a,
.swiper-slide:hover .post-title a {
  color: #F47B20 !important;
}

/* Seller name */
.swiper-slide .seller-name,
.swiper-slide small.text-muted,
.swiper-slide .text-muted {
  font-size: 11px !important;
  color: #8A95B0 !important;
  font-weight: 500 !important;
}

/* Price row */
.swiper-slide .price,
.swiper-slide #price,
.fdp-card .price {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #1B2A4A !important;
  letter-spacing: -.5px !important;
  margin-top: auto !important;
}
.swiper-slide .striped-price s,
.swiper-slide .special-price s {
  font-size: 13px !important;
  color: #aab !important;
  font-weight: 400 !important;
}

/* Bottom row: price + cart button */
.swiper-slide .d-flex.align-items-center.justify-content-between,
.swiper-slide .product-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
}

/* Cart button */
.swiper-slide .add_to_cart.btn,
.swiper-slide .add_to_cart.btn-light,
.swiper-slide button.add_to_cart,
.fdp-card .add_to_cart {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #1B2A4A !important;
  border: none !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all .18s !important;
  font-size: 15px !important;
}
.swiper-slide .add_to_cart.btn:hover,
.swiper-slide button.add_to_cart:hover,
.fdp-card .add_to_cart:hover {
  background: #F47B20 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(244,123,32,.3) !important;
}

/* SALE badge */
.swiper-slide .sale_tag,
.swiper-slide .avatar.sale_tag,
.swiper-slide .badge {
  background: #F47B20 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  text-transform: uppercase !important;
}

/* ── View More / Shop More button ── */
a[href*="products"].btn.btn-outline-primary,
.btn.rounded-pill[href*="products"],
a.btn.btn-outline-primary.rounded-pill,
button.btn-outline-primary.rounded-pill {
  background: #fff !important;
  border: 2px solid #F47B20 !important;
  color: #F47B20 !important;
  border-radius: 25px !important;
  padding: 12px 40px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  transition: all .22s !important;
  text-decoration: none !important;
  display: inline-block !important;
}
a[href*="products"].btn.btn-outline-primary:hover,
a.btn.btn-outline-primary.rounded-pill:hover {
  background: #F47B20 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(244,123,32,.3) !important;
  transform: translateY(-2px) !important;
}

/* Shop More specific */
a.btn[href*="cart"],
.btn-outline-primary.rounded-pill {
  border-color: #F47B20 !important;
  color: #F47B20 !important;
}

/* ── Section wrapper background ── */
section.wrapper.bg-light {
  background: #F8F9FC !important;
  padding: 40px 0 !important;
}

/* ── Swiper padding so cards don't clip ── */
.mySwiper {
  padding: 8px 4px 16px !important;
}
.mySwiper .swiper-slide {
  padding: 4px 6px !important;
  box-sizing: border-box !important;
}

/* ── Responsive product cards ── */
@media (max-width: 991px) {
  .slide_image img.pic-1,
  .swiper-slide img.fig_image { height: 160px !important; }
}
@media (max-width: 575px) {
  .slide_image img.pic-1,
  .swiper-slide img.fig_image { height: 140px !important; }
  .swiper-slide h4.title a { font-size: 13px !important; }
  .swiper-slide .price { font-size: 16px !important; }
}

/* ── View all / featured-section-view-more button ── */
.featured-section-view-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(244,123,32,.12) !important;
  border: 1.5px solid rgba(244,123,32,.35) !important;
  color: #F47B20 !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all .18s !important;
}
.featured-section-view-more:hover {
  background: #F47B20 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════
   PRODUCT CARDS V2 — Fixed layout
══════════════════════════════════════════════ */

/* Fix swiper slide width so cards aren't squished */
.mySwiper .swiper-wrapper {
  align-items: stretch !important;
}
.mySwiper .swiper-slide {
  padding: 6px 8px !important;
  box-sizing: border-box !important;
  height: auto !important;
}

/* Card — fixed proportions */
.swiper-slide .shadow-xl,
.swiper-slide.shadow-xl,
.shadow-xl.product-bg.slide_image,
.slide_image {
  border-radius: 16px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.06) !important;
  transition: all .22s !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 340px !important;
}
.shadow-xl.product-bg.slide_image:hover {
  border-color: #F47B20 !important;
  box-shadow: 0 8px 28px rgba(244,123,32,.15) !important;
  transform: translateY(-3px) !important;
}

/* Image — fixed height, no overflow */
.slide_image figure,
.slide_image .product-image figure {
  margin: 0 !important;
  height: 180px !important;
  overflow: hidden !important;
  border-bottom: 1px solid #E2E8F0 !important;
  background: #F8F9FC !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px 14px 0 0 !important;
}
.slide_image img.fig_image,
.slide_image img.pic-1 {
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  border-radius: 14px 14px 0 0 !important;
  border: none !important;
  background: #F8F9FC !important;
  display: block !important;
}

/* Card body */
.slide_image .product-content,
.slide_image > div:not(.product-image):not(figure) {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Category label */
.slide_image .category-color-text,
.slide_image .text-muted.small {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #4A7BA7 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* Product title */
.slide_image h4.title,
.slide_image .post-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1B2A4A !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}
.slide_image h4.title a,
.slide_image .post-title a {
  color: #1B2A4A !important;
  text-decoration: none !important;
  transition: color .18s !important;
}
.slide_image:hover h4.title a { color: #F47B20 !important; }

/* Seller — grey, NOT orange */
.slide_image .seller-name,
.slide_image p.seller-name,
.slide_image small {
  font-size: 11px !important;
  color: #8A95B0 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  margin-bottom: 10px !important;
}

/* Price — inline, no wrapping */
.slide_image .price,
.slide_image p.price {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1B2A4A !important;
  white-space: nowrap !important;
  letter-spacing: -.5px !important;
  margin: auto 0 0 0 !important;
  line-height: 1.2 !important;
}
.slide_image .price span#price {
  white-space: nowrap !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1B2A4A !important;
}
.slide_image .striped-price s,
.slide_image s {
  font-size: 12px !important;
  color: #aab !important;
  font-weight: 400 !important;
}

/* Bottom row: price left, button right */
.slide_image .d-flex.justify-content-between,
.slide_image .product-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}

/* Cart button */
.slide_image .add_to_cart,
.slide_image .btn.btn-light,
.slide_image button[class*="add"] {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #1B2A4A !important;
  border: none !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.slide_image .add_to_cart:hover,
.slide_image .btn.btn-light:hover {
  background: #F47B20 !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(244,123,32,.35) !important;
}
.slide_image .add_to_cart i,
.slide_image .btn.btn-light i {
  font-size: 15px !important;
  color: #fff !important;
}

/* Heart/fav icon */
.slide_image .add-fav-btn,
.slide_image .item-like {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

/* Shop More button */
.text-center a.btn.btn-outline-primary.rounded-pill,
a.btn.btn-outline-primary.rounded-pill {
  background: transparent !important;
  border: 2px solid #F47B20 !important;
  color: #F47B20 !important;
  border-radius: 25px !important;
  padding: 13px 44px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  transition: all .22s !important;
  text-decoration: none !important;
  display: inline-block !important;
  letter-spacing: .02em !important;
}
.text-center a.btn.btn-outline-primary.rounded-pill:hover {
  background: #F47B20 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(244,123,32,.3) !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════
   KAFCO Profile Page — /my-account/profile
══════════════════════════════════════════════ */

/* Page background */
.my-account-section {
  background: var(--kaf-off) !important;
  min-height: 70vh !important;
}

/* ── Avatar ── */
.profile_image {
  margin-bottom: 24px !important;
}
.profile_image .avatar,
#profile_avatar_preview {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--kaf-orange) !important;
  box-shadow: 0 4px 20px rgba(244,123,32,.2) !important;
  display: block !important;
}

/* ── Card header ── */
.my-account-section .card-header {
  background: transparent !important;
  border-bottom: 2px solid var(--kaf-border) !important;
  padding: 0 0 16px 0 !important;
  margin-bottom: 24px !important;
}
.my-account-section .card-header h1 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.3px !important;
  margin: 0 !important;
}

/* ── Main card ── */
.my-account-section .card.p-7 {
  background: #fff !important;
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(27,42,74,.06) !important;
  padding: 32px !important;
}
/* Remove the extra hr */
.my-account-section hr.mt-5.mb-5 {
  display: none !important;
}

/* ── Form labels ── */
.my-account-section .col-form-label,
.my-account-section label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--kaf-text2) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 6px !important;
}

/* ── Form inputs ── */
.my-account-section .form-control {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  color: var(--kaf-text) !important;
  background: #fff !important;
  transition: border-color .18s, box-shadow .18s !important;
  height: auto !important;
}
.my-account-section .form-control:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.1) !important;
  outline: none !important;
}
.my-account-section .form-control[readonly] {
  background: var(--kaf-off) !important;
  color: var(--kaf-text3) !important;
  cursor: not-allowed !important;
}
.my-account-section input[type="file"].form-control {
  padding: 8px 12px !important;
  cursor: pointer !important;
}

/* ── Form groups spacing ── */
.my-account-section .form-group {
  margin-bottom: 20px !important;
}
.my-account-section .form-row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}
.my-account-section .form-row .form-group {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ── Save button ── */
.my-account-section .btn-primary.submit_btn,
.my-account-section button.btn-primary {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 25px !important;
  padding: 12px 36px !important;
  transition: all .2s !important;
  box-shadow: none !important;
  letter-spacing: .02em !important;
}
.my-account-section .btn-primary.submit_btn:hover {
  background: var(--kaf-orange-hover) !important;
  border-color: var(--kaf-orange-hover) !important;
  box-shadow: 0 6px 20px rgba(244,123,32,.3) !important;
  transform: translateY(-1px) !important;
}

/* ── Sidebar (dashboard view) ── */
.my-account-section .col-lg-3 .card,
.my-account-section .col-lg-3 nav {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.06) !important;
}
.my-account-section .col-lg-3 .nav-link,
.my-account-section .col-lg-3 a.list-group-item {
  color: var(--kaf-text2) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 13px 20px !important;
  border-radius: 0 !important;
  transition: all .18s !important;
  border-bottom: 1px solid var(--kaf-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.my-account-section .col-lg-3 .nav-link:hover,
.my-account-section .col-lg-3 a.list-group-item:hover {
  background: var(--kaf-orange-soft) !important;
  color: var(--kaf-orange) !important;
  padding-left: 24px !important;
}
.my-account-section .col-lg-3 .nav-link.active,
.my-account-section .col-lg-3 a.list-group-item.active,
.my-account-section .col-lg-3 .sidenav .active {
  background: var(--kaf-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--kaf-orange-hover) !important;
}
.my-account-section .col-lg-3 .nav-link i,
.my-account-section .col-lg-3 a i {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Sidebar header / user info card */
.my-account-section .col-lg-3 .card-header,
.my-account-section .col-lg-3 .sidebar-header {
  background: var(--kaf-navy) !important;
  color: #fff !important;
  padding: 20px !important;
  border-radius: 14px 14px 0 0 !important;
  border-bottom: none !important;
}
.my-account-section .col-lg-3 .card-header h6,
.my-account-section .col-lg-3 .card-header p,
.my-account-section .col-lg-3 .sidebar-header * {
  color: rgba(255,255,255,.85) !important;
}

/* ── Profile page: fix footer overlap ── */
.kaf-sidebar {
  position: sticky !important;
  top: 80px !important;
  z-index: 1 !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}
.kaf-sidebar::-webkit-scrollbar { display: none !important; }

/* Ensure footer sits below content */
.kaf-footer-v2 {
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
}

/* My account section — add bottom padding so footer doesn't clip */
section[style*="min-height:80vh"] {
  padding-bottom: 80px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Fix the footer showing through sidebar */
.kaf-footer-v2,
footer.kaf-footer-v2 {
  margin-top: 0 !important;
}

/* ── Profile sidebar — no sticky, natural flow ── */
.kaf-sidebar {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ── Profile: sidebar always fully visible ── */
.kaf-sidebar {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}
.kaf-nav {
  height: auto !important;
  overflow: visible !important;
}
/* Row stretches to tallest column */
.my-account-section .row,
section[style*="background:#F8F9FC"] .row {
  align-items: flex-start !important;
}
/* Make sure footer is always BELOW the account section */
section[style*="background:#F8F9FC"] {
  padding-bottom: 60px !important;
  overflow: visible !important;
  display: block !important;
}
/* Fix z-index stacking */
.kaf-footer-v2 {
  position: relative !important;
  z-index: 5 !important;
  clear: both !important;
  margin-top: 0 !important;
}

/* ══════════════════════════════════════
   MY-ACCOUNT — Global layout fix
   Applies to ALL /my-account/* pages
══════════════════════════════════════ */
.my-account-section {
  min-height: 100vh !important;
  padding-bottom: 80px !important;
  display: block !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 2 !important;
}
.my-account-section .container {
  position: relative !important;
  z-index: 2 !important;
}
/* Profile page section (inline style) */
section[style*="background:#F8F9FC"] {
  min-height: 100vh !important;
  padding-bottom: 100px !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
}
/* Footer always below */
footer.kaf-footer-v2,
.kaf-footer-v2 {
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
}
/* Sidebar never clips */
.kaf-sidebar,
.account-sidebar {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  z-index: 2 !important;
}

/* ══════════════════════════════════════
   MY-ACCOUNT — Definitive layout fix
   The ROW needs min-height, not section
══════════════════════════════════════ */

/* Target the row containing sidebar + content on ALL account pages */
.my-account-section .container .row,
.my-account-section > .container > .row {
  min-height: calc(100vh - 200px) !important;
  align-items: flex-start !important;
}

/* Profile page row (no my-account-section class) */
section[style*="background:#F8F9FC"] .container .row {
  min-height: calc(100vh - 200px) !important;
  align-items: flex-start !important;
}

/* Sidebar column stretches with row */
.col-lg-3.mb-4:has(.kaf-sidebar),
.col-lg-3.mb-4:has(.account-sidebar) {
  display: flex !important;
  flex-direction: column !important;
}

/* The actual sidebar fills its column */
.kaf-sidebar,
.account-sidebar {
  flex: 1 !important;
}

/* Main content column also stretches */
.col-lg-9 {
  min-height: inherit !important;
}

/* ══════════════════════════════════════
   STICKY FOOTER — Global fix
   Body stretches, footer always bottom
══════════════════════════════════════ */
html {
  height: 100% !important;
}
body {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Everything between header and footer grows */
body > *:not(nav):not(header):not(footer):not(.kaf-ann):not(.kaf-trust):not(.kaf-stat-strip) {
  flex: 1 0 auto !important;
}
/* Header and footer don't grow */
header, nav.navbar, footer.kaf-footer-v2 {
  flex-shrink: 0 !important;
}
footer.kaf-footer-v2 {
  margin-top: auto !important;
}

/* ══════════════════════════════════════════════
   MY-ACCOUNT PAGES — Premium Design System
   Covers: orders, wallet, transactions, tickets,
   address, favorites, suppliers, refer, branches
══════════════════════════════════════════════ */

/* ── Shared page header ── */
.my-account-section .col-lg-9 > .card-header,
.my-account-section .col-lg-9 > div > .card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 20px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.my-account-section .col-lg-9 h1.h4,
.my-account-section .col-lg-9 h1 {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -.3px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.my-account-section .col-lg-9 h1.h4::before {
  content: '' !important;
  width: 4px !important;
  height: 22px !important;
  background: var(--kaf-orange) !important;
  border-radius: 2px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* ── Shared card styling ── */
.my-account-section .col-lg-9 .card,
.my-account-section .col-lg-9 .card.p-7 {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.06) !important;
  overflow: hidden !important;
}

/* ── Primary buttons ── */
.my-account-section .btn-primary,
.my-account-section .btn-primary.viewmorebtn {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 25px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  transition: all .18s !important;
}
.my-account-section .btn-primary:hover {
  background: var(--kaf-orange-hover) !important;
  box-shadow: 0 4px 14px rgba(244,123,32,.3) !important;
  transform: translateY(-1px) !important;
}
.my-account-section .btn-outline-primary {
  border-color: var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.my-account-section .btn-outline-primary:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}
.my-account-section .btn-danger {
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* ── Tables ── */
.my-account-section .table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.my-account-section .table thead th {
  background: var(--kaf-navy) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 14px 16px !important;
  border: none !important;
  white-space: nowrap !important;
}
.my-account-section .table thead th:first-child {
  border-radius: 10px 0 0 0 !important;
}
.my-account-section .table thead th:last-child {
  border-radius: 0 10px 0 0 !important;
}
.my-account-section .table tbody tr {
  background: #fff !important;
  transition: all .18s !important;
}
.my-account-section .table tbody tr:hover {
  background: var(--kaf-off) !important;
}
.my-account-section .table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--kaf-border) !important;
  border-top: none !important;
  font-size: 13.5px !important;
  color: var(--kaf-text) !important;
  vertical-align: middle !important;
}
.my-account-section .table-striped tbody tr:nth-of-type(odd) {
  background: #FAFBFC !important;
}

/* ── Status badges ── */
.my-account-section .badge,
.my-account-section [class*="badge-"] {
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}
.my-account-section .badge-success,
.my-account-section .badge-delivered,
.my-account-section [class*="badge"][class*="success"] {
  background: rgba(34,197,94,.12) !important;
  color: #16A34A !important;
  border: 1px solid rgba(34,197,94,.25) !important;
}
.my-account-section .badge-warning,
.my-account-section .badge-pending {
  background: rgba(245,158,11,.12) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245,158,11,.25) !important;
}
.my-account-section .badge-danger,
.my-account-section .badge-cancelled {
  background: rgba(239,68,68,.1) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239,68,68,.2) !important;
}
.my-account-section .badge-primary,
.my-account-section .badge-info {
  background: rgba(74,123,167,.12) !important;
  color: var(--kaf-blue) !important;
  border: 1px solid rgba(74,123,167,.25) !important;
}

/* ── ORDERS PAGE ── */
/* Order cards if they exist */
.my-account-section .order-row,
.my-account-section tr[data-order-id] {
  cursor: pointer !important;
}
.my-account-section .order-id {
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  font-size: 13px !important;
}
.my-account-section .order-date {
  font-size: 12px !important;
  color: var(--kaf-text3) !important;
}
/* Order status pill */
.my-account-section .order-status,
.my-account-section td .text-capitalize {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* ── WALLET PAGE ── */
.my-account-section .wallet-balance,
.my-account-section [class*="wallet"] h2,
.my-account-section [class*="wallet"] h3 {
  font-size: 36px !important;
  font-weight: 900 !important;
  color: var(--kaf-navy) !important;
  letter-spacing: -1px !important;
}
/* Wallet top card */
.my-account-section .col-lg-9 .card:first-of-type .card-body {
  background: linear-gradient(135deg, var(--kaf-navy) 0%, #243558 100%) !important;
  border-radius: 14px !important;
  color: #fff !important;
}
.my-account-section .col-lg-9 .card:first-of-type h2,
.my-account-section .col-lg-9 .card:first-of-type h3,
.my-account-section .col-lg-9 .card:first-of-type p {
  color: #fff !important;
}

/* ── TRANSACTIONS PAGE ── */
.my-account-section .transaction-type-credit {
  color: #16A34A !important;
  font-weight: 700 !important;
}
.my-account-section .transaction-type-debit {
  color: #DC2626 !important;
  font-weight: 700 !important;
}

/* ── TICKETS PAGE ── */
.my-account-section .home_faq .card {
  border-radius: 14px !important;
}
.my-account-section .ticket_button {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
}
/* Ticket form fields */
.my-account-section .display_fields input,
.my-account-section .display_fields textarea,
.my-account-section .display_fields select {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  transition: border-color .18s !important;
}
.my-account-section .display_fields input:focus,
.my-account-section .display_fields textarea:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.1) !important;
}
.my-account-section .display_fields .btn-primary {
  width: 100% !important;
  padding: 13px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  margin-top: 8px !important;
}

/* ── ADDRESS PAGE ── */
.my-account-section .address-card,
.my-account-section [class*="address"] .card {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  transition: all .2s !important;
}
.my-account-section .address-card:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 4px 20px rgba(244,123,32,.1) !important;
}
.my-account-section .btn-outline-danger {
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.my-account-section .btn-outline-warning {
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-color: var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
}

/* ── FAVORITES PAGE ── */
.my-account-section .product-grid {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  transition: all .2s !important;
  overflow: hidden !important;
}
.my-account-section .product-grid:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 24px rgba(244,123,32,.12) !important;
  transform: translateY(-3px) !important;
}
.my-account-section .product-grid .title a {
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
}
.my-account-section .product-grid:hover .title a {
  color: var(--kaf-orange) !important;
}
.my-account-section .product-grid .add_to_cart {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
}

/* ── FAVOURITE SUPPLIERS PAGE ── */
.my-account-section .seller-card,
.my-account-section [class*="supplier"] .card,
.my-account-section .card.text-center {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 16px !important;
  transition: all .2s !important;
  overflow: hidden !important;
}
.my-account-section .card.text-center:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 24px rgba(244,123,32,.12) !important;
  transform: translateY(-3px) !important;
}
.my-account-section .view-products.btn-outline-primary {
  border-color: var(--kaf-orange) !important;
  color: var(--kaf-orange) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.my-account-section .view-products.btn-outline-primary:hover {
  background: var(--kaf-orange) !important;
  color: #fff !important;
}

/* ── MOST ORDERED PAGE ── */
.my-account-section .card.h-100.shadow-l {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: all .2s !important;
  overflow: hidden !important;
}
.my-account-section .card.h-100.shadow-l:hover {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 6px 20px rgba(244,123,32,.12) !important;
  transform: translateY(-3px) !important;
}
.my-account-section .card-body h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kaf-navy) !important;
}
.my-account-section .card-body h3 {
  font-size: 13px !important;
  color: var(--kaf-orange) !important;
  font-weight: 600 !important;
}

/* ── REFER & EARN PAGE ── */
.my-account-section .refer_and_earn_border,
.my-account-section #text-to-copy {
  background: linear-gradient(135deg, var(--kaf-navy) 0%, #243558 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 28px !important;
  text-align: center !important;
}
.my-account-section #text-to-copy h2 {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 6px !important;
  margin: 0 !important;
  font-family: monospace !important;
}
.my-account-section .copy-button {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  color: #fff !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  transition: all .18s !important;
}
.my-account-section .copy-button:hover {
  background: var(--kaf-orange-hover) !important;
  box-shadow: 0 4px 16px rgba(244,123,32,.3) !important;
  transform: translateY(-1px) !important;
}
.my-account-section h6.text-body-secondary {
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  margin-top: 12px !important;
}
.my-account-section h4.fw-semibold {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.5) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: 16px !important;
}

/* ── BRANCHES PAGE ── */
.my-account-section .table-striped {
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* Add branch form */
.my-account-section .card.p-7 input,
.my-account-section .card.p-7 select,
.my-account-section .card.p-7 textarea {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  transition: border-color .18s !important;
}
.my-account-section .card.p-7 input:focus,
.my-account-section .card.p-7 select:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.1) !important;
}

/* ── Page section headers (inline labels) ── */
.my-account-section .col-lg-9 > .row > .col-lg-7,
.my-account-section .col-lg-9 > .row > .col-lg-5 {
  padding: 0 12px !important;
}

/* ── Empty state styling ── */
.my-account-section .text-center img + h4,
.my-account-section .text-center h4 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--kaf-navy) !important;
  margin-top: 16px !important;
}
.my-account-section .text-center p.text-muted {
  color: var(--kaf-text3) !important;
  font-size: 14px !important;
}

/* ── Forms across all pages ── */
.my-account-section label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--kaf-text2) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 7px !important;
}
.my-account-section .form-control {
  border: 1.5px solid var(--kaf-border) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  color: var(--kaf-text) !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.my-account-section .form-control:focus {
  border-color: var(--kaf-orange) !important;
  box-shadow: 0 0 0 3px rgba(244,123,32,.1) !important;
}

/* ── Pagination ── */
.my-account-section .page-item.active .page-link {
  background: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  font-weight: 700 !important;
}
.my-account-section .page-link {
  color: var(--kaf-navy) !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
  border-color: var(--kaf-border) !important;
}
.my-account-section .page-link:hover {
  color: var(--kaf-orange) !important;
  border-color: var(--kaf-orange) !important;
  background: var(--kaf-orange-soft) !important;
}

/* ── Alert boxes ── */
.my-account-section .alert {
  border-radius: 12px !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.my-account-section .alert-success {
  background: rgba(34,197,94,.1) !important;
  color: #166534 !important;
  border-left: 4px solid #22C55E !important;
}
.my-account-section .alert-danger {
  background: rgba(239,68,68,.08) !important;
  color: #991B1B !important;
  border-left: 4px solid #EF4444 !important;
}
.my-account-section .alert-info {
  background: rgba(74,123,167,.1) !important;
  color: #1e4d7b !important;
  border-left: 4px solid var(--kaf-blue) !important;
}

/* ══════════════════════════════════════
   SELLERS PAGE — Light mode hero
══════════════════════════════════════ */

/* Hero → light gradient */
.sellers-hero-section,
section[style*="background:linear-gradient(135deg,#1B2A4A"][style*="padding:52px"] {
  background: linear-gradient(135deg, #F8F9FC 0%, #EBF3FA 60%, #F0F6FF 100%) !important;
  border-bottom: 3px solid #F47B20 !important;
}
/* Hero text → navy on light bg */
section[style*="padding:52px 40px 48px"] h1 { color: #1B2A4A !important; }
section[style*="padding:52px 40px 48px"] p { color: #4A5578 !important; }
section[style*="padding:52px 40px 48px"] > div > div:first-child { color: #F47B20 !important; }

/* Stat cards → white on light bg */
section[style*="padding:52px 40px 48px"] div[style*="rgba(255,255,255,.06)"] {
  background: #fff !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 12px rgba(27,42,74,.08) !important;
}
section[style*="padding:52px 40px 48px"] div[style*="rgba(255,255,255,.06)"] div:first-child {
  color: #1B2A4A !important;
}
section[style*="padding:52px 40px 48px"] div[style*="rgba(255,255,255,.06)"] div:last-child {
  color: #8A95B0 !important;
}
/* Search shadow on light bg */
section[style*="padding:52px 40px 48px"] form {
  box-shadow: 0 4px 24px rgba(27,42,74,.12) !important;
  border: 1.5px solid #E2E8F0 !important;
}