:root {
  --ov-bg: #eef2f7;
  --ov-card: #ffffff;
  --ov-text: #0f172a;
  --ov-muted: #5c6f8a;
  --ov-primary: #1f4bc1;
  --ov-accent: #fbbf24;
  --ov-line: #dce5f2;
}

body {
  background: var(--ov-bg) !important;
  color: var(--ov-text);
  font-family: 'Cairo', sans-serif;
}

/* Clean homepage: keep only core sections */
.utilityBar,
.quickCatsWrap,
.flashDeals,
.promoStrip,
.statsBand,
.newsletter,
.testimonials,
.brands,
.blog {
  display: none !important;
}

/* Header */
.topbar {
  background: linear-gradient(180deg, #0a2460, #0b2a6f) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.topbar__inner {
  min-height: 74px;
  padding: 12px 0 !important;
}

.brand__name {
  color: #ffffff !important;
}

.brand__sub {
  display: none;
}

.headerSearch .input {
  min-height: 44px;
  border-radius: 12px;
  background: #ffffff;
}

/* Hero */
.heroGrid {
  display: block !important;
  margin-top: 14px;
}

.heroSide {
  display: none !important;
}

.heroSlider {
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.13);
}

.heroSlide {
  min-height: 360px;
  background-size: cover;
  background-position: center;
}

.heroSlide__overlay {
  background: linear-gradient(100deg, rgba(9, 30, 77, 0.84), rgba(9, 30, 77, 0.44)) !important;
}

.heroSlide__content {
  max-width: 56%;
  padding: 36px !important;
}

.heroSlide h1,
.heroSlide h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.14;
  color: #ffffff;
}

.heroSlide p {
  font-size: clamp(16px, 1.45vw, 22px);
  color: #dbeafe;
}

.heroTag {
  display: none;
}

.heroActions .btn.primary {
  background: var(--ov-accent) !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 800;
}

/* Service row */
.servicesBand {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.serviceCard {
  background: transparent;
  border: none;
  box-shadow: none;
  justify-content: center;
  text-align: center;
}

.serviceCard p {
  display: none;
}

/* Headings */
.sectionHead {
  margin-top: 22px !important;
  align-items: flex-end !important;
}

.secTitle {
  font-size: clamp(32px, 3.1vw, 50px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.01em;
  color: #0f2b5d;
}

.secSub {
  margin-top: 8px !important;
  font-size: clamp(14px, 1.15vw, 18px) !important;
  color: var(--ov-muted) !important;
}

/* ALL in section head stays hidden (as requested earlier) */
.sectionHead .qCat {
  display: none !important;
}

/* Categories */
.departments {
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px !important;
}

.deptCard {
  border: 1px solid #d9e4f3 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  border-radius: 14px !important;
  min-height: 86px;
  padding: 12px 14px !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  align-items: flex-start;
}

.deptCard:hover {
  transform: translateY(-2px);
  border-color: #bcd0ef !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.deptCard > span {
  width: 36px;
  height: 36px;
  border-radius: 10px !important;
  display: grid;
  place-items: center;
  background: #edf3ff;
  color: var(--ov-primary);
  font-size: 18px;
}

.deptCard b {
  font-size: 14px !important;
  color: #102a56;
  line-height: 1.2;
}

.deptCard small {
  font-size: 11px !important;
  color: #60728f;
  line-height: 1.25;
}

/* Products */
.toolbar {
  margin-top: 18px !important;
  padding: 20px 22px !important;
  border-radius: 20px;
  background: color-mix(in srgb, var(--card) 97%, #99b1d7 3%) !important;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.toolbar .input {
  min-height: 46px;
  border-radius: 16px;
}

.grid,
.productsGrid,
.gridProducts,
#productsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.productCard,
.product {
  background: color-mix(in srgb, var(--card) 97%, #95acd1 3%) !important;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.06);
}

.product__img,
.productCard img,
.product img {
  height: 300px;
  object-fit: contain;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary-soft) 28%, var(--card) 72%) 0%,
    color-mix(in srgb, var(--card) 98%, transparent) 100%
  ) !important;
}

.product__name {
  color: var(--text) !important;
}

.product__desc,
.product__hint {
  color: var(--muted) !important;
}

.price {
  color: var(--text) !important;
}

.btn.primary,
.addToCart {
  background: var(--ov-primary) !important;
  border-radius: 10px;
  border: none;
}

/* Footer (bottom navbar area) */
.footer {
  margin-top: 34px !important;
  padding: 24px 18px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 0 !important;
  border-radius: 20px;
  background: linear-gradient(135deg, #0b2460 0%, #103177 54%, #1f4bc1 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
}

.footerGrid {
  gap: 16px !important;
}

.footerBrand {
  color: #ffffff !important;
  font-size: 24px !important;
  margin-bottom: 10px !important;
}

.footerGrid h4 {
  color: #dbeafe !important;
  font-size: 15px !important;
  margin-bottom: 8px !important;
}

.footerGrid a,
.footerGrid p {
  color: #dce7f8 !important;
  opacity: .95;
}

.footerGrid a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.companyInfo span {
  color: #eef4ff !important;
  font-weight: 600;
}

.payBadge {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  color: #f8fbff !important;
}

.footer__copy {
  color: #cfd9ec !important;
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin-top: 8px;
  padding-top: 10px;
}

/* Cart bottom bar */
.cartBar {
  background: rgba(11, 36, 96, .95) !important;
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 12px !important;
}

.cartBar .btn.primary {
  background: var(--ov-accent) !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800;
  padding: 10px 14px !important;
}

.cartBar__total,
.cartBar__total span,
.cartBar__total b,
#cartTotal {
  color: #ffffff !important;
  font-weight: 700;
}

#cartBar .badge {
  background: #1e40af !important;
  color: #ffffff !important;
}

/* Dark mode fix: keep readability and full consistency */
html[data-theme="dark"] body {
  background: var(--bg) !important;
}

html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .product,
html[data-theme="dark"] .deptCard,
html[data-theme="dark"] .servicesBand {
  background: color-mix(in srgb, var(--card) 97%, #8ca3c9 3%) !important;
  border-color: color-mix(in srgb, var(--line) 86%, transparent) !important;
}

html[data-theme="dark"] .product__img,
html[data-theme="dark"] .productCard img,
html[data-theme="dark"] .product img {
  background: linear-gradient(180deg, #101c33 0%, #0f1a2f 100%) !important;
}

html[data-theme="dark"] .product__name,
html[data-theme="dark"] .price,
html[data-theme="dark"] .secTitle {
  color: #eaf2ff !important;
}

html[data-theme="dark"] .product__desc,
html[data-theme="dark"] .product__hint,
html[data-theme="dark"] .secSub,
html[data-theme="dark"] .deptCard small {
  color: #9db0ca !important;
}

html[data-theme="dark"] .deptCard b {
  color: #e6eefc !important;
}

@media (max-width: 1200px) {
  .departments {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid,
  .productsGrid,
  .gridProducts,
  #productsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .heroSlide__content {
    max-width: 100%;
    padding: 28px !important;
  }

  .heroSlide h1,
  .heroSlide h2 {
    font-size: 34px !important;
  }

  .heroSlide p {
    font-size: 18px !important;
  }

  .servicesBand {
    grid-template-columns: 1fr 1fr;
  }

  .secTitle {
    font-size: clamp(28px, 7vw, 38px) !important;
  }

  .departments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .deptCard {
    min-height: 82px;
    padding: 11px 12px !important;
  }

  .grid,
  .productsGrid,
  .gridProducts,
  #productsGrid {
    grid-template-columns: 1fr 1fr;
  }

  .footer {
    padding: 20px 14px 12px !important;
  }
}

@media (max-width: 640px) {
  .grid,
  .productsGrid,
  .gridProducts,
  #productsGrid {
    grid-template-columns: 1fr;
  }

  .product__img,
  .productCard img,
  .product img {
    height: 240px;
  }
}

/* ===== Patch: Service strip consistency (keep like light screenshot in all themes) ===== */
.servicesBand {
  background: #f8fafc !important;
  border: 1px solid #dde6f3 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
}

.serviceCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.serviceCard h3 {
  color: #0f2b5d !important;
  font-weight: 800 !important;
}

.serviceCard p {
  color: #5d6f8a !important;
}

html[data-theme="dark"] .servicesBand {
  background: #f8fafc !important;
  border-color: #dde6f3 !important;
}

html[data-theme="dark"] .serviceCard h3 {
  color: #0f2b5d !important;
}

html[data-theme="dark"] .serviceCard p {
  color: #5d6f8a !important;
}

/* ===== Fix: footer was looking narrow — make it full and filled ===== */
main > .container > .footer {
  position: relative;
  width: 100dvw;
  max-width: 100dvw;
  margin-inline: calc(50% - 50dvw) !important;
  padding: 30px 0 16px !important;
  border-radius: 0 !important;
}

@supports not (width: 100dvw) {
  main > .container > .footer {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw) !important;
  }
}

main > .container > .footer .footerGrid,
main > .container > .footer .footer__copy {
  width: min(1280px, 94%);
  margin-inline: auto;
}

main > .container > .footer .footerGrid {
  grid-template-columns: minmax(320px, 1.45fr) minmax(220px, 0.95fr) minmax(250px, 1.05fr);
  gap: clamp(14px, 2.4vw, 34px) !important;
}

@media (max-width: 980px) {
  main > .container > .footer .footerGrid,
  main > .container > .footer .footer__copy {
    width: min(1280px, 95%);
  }

  main > .container > .footer .footerGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  main > .container > .footer .footerGrid {
    grid-template-columns: 1fr;
  }
}