/* ============================================
   WIZCART DESIGN SYSTEM — BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--wz-font-primary);
  font-size: var(--wz-fs-base);
  line-height: var(--wz-lh-normal);
  color: var(--wz-text-primary);
  background-color: var(--wz-bg-body);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wz-font-heading);
  font-weight: var(--wz-fw-bold);
  line-height: var(--wz-lh-tight);
  margin-bottom: var(--wz-space-3);
}

h1 { font-size: var(--wz-fs-4xl); }
h2 { font-size: var(--wz-fs-3xl); }
h3 { font-size: var(--wz-fs-2xl); }
h4 { font-size: var(--wz-fs-xl); }
h5 { font-size: var(--wz-fs-lg); }
h6 { font-size: var(--wz-fs-md); }

p { margin-bottom: var(--wz-space-4); color: var(--wz-text-secondary); }

a {
  color: var(--wz-text-link);
  text-decoration: none;
  transition: color var(--wz-transition-fast);
}
a:hover { color: var(--wz-accent-hover); }

ul, ol { list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

::selection { background-color: var(--wz-accent); color: var(--wz-white); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--wz-gray-100); }
::-webkit-scrollbar-thumb { background: var(--wz-gray-400); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--wz-gray-500); }

:focus-visible { outline: 2px solid var(--wz-accent); outline-offset: 2px; }

hr { border: none; border-top: 1px solid var(--wz-gray-200); margin: var(--wz-space-6) 0; }
table { border-collapse: collapse; width: 100%; }

/* ── Bootstrap Overrides ── */
.btn-primary {
  background-color: var(--wz-accent) !important;
  border-color: var(--wz-accent) !important;
  color: var(--wz-white) !important;
  font-weight: var(--wz-fw-semibold);
  border-radius: var(--wz-radius-md);
  transition: all var(--wz-transition-fast);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--wz-accent-hover) !important;
  border-color: var(--wz-accent-hover) !important;
  box-shadow: var(--wz-shadow-glow) !important;
}

.btn-secondary {
  background-color: var(--wz-primary) !important;
  border-color: var(--wz-primary) !important;
  color: var(--wz-white) !important;
  font-weight: var(--wz-fw-semibold);
  border-radius: var(--wz-radius-md);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--wz-primary-dark) !important;
  border-color: var(--wz-primary-dark) !important;
}

.btn-lg {
  padding: var(--wz-space-3) var(--wz-space-8) !important;
  font-size: var(--wz-fs-base) !important;
  border-radius: var(--wz-radius-md) !important;
}

/* ── Breadcrumb Overrides ── */
.breadcrumbs {
  /* background: linear-gradient(135deg, var(--wz-primary) 0%, var(--wz-primary-light) 100%) !important; */
  color: #1c1d36 !important;
  padding: var(--wz-space-6) 0 !important;
}
.breadcrumbs .bread {
  color: var(--wz-gray-400) !important;
  font-size: var(--wz-fs-sm);
}
.breadcrumbs .bread a {
  color: var(--wz-primary-dark) !important;
  transition: color var(--wz-transition-fast);
}
.breadcrumbs .bread a:hover {
  color: var(--wz-accent) !important;
}

/* ── Hero Slider Button Overrides ── */
.flexslider .btn-primary {
  background-color: var(--wz-accent) !important;
  border-color: var(--wz-accent) !important;
  border-radius: var(--wz-radius-full) !important;
  padding: var(--wz-space-3) var(--wz-space-8) !important;
  font-weight: var(--wz-fw-bold) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: var(--wz-fs-sm) !important;
}
.flexslider .btn-primary:hover {
  background-color: var(--wz-accent-hover) !important;
  box-shadow: var(--wz-shadow-glow) !important;
  transform: translateY(-2px);
}

/* ── Featured Section Overrides ── */
.colorlib-featured .btn-primary {
  background-color: var(--wz-accent) !important;
  border-color: var(--wz-accent) !important;
  border-radius: var(--wz-radius-full) !important;
}
.colorlib-featured .btn-primary:hover {
  background-color: var(--wz-accent-hover) !important;
}

/* ── Product Section Overrides ── */
.colorlib-product .btn-primary,
.colorlib-product .btn-secondary {
  border-radius: var(--wz-radius-md) !important;
}