:root {
  --crdi-blue: #1477b8;
  --crdi-blue-dark: #0c4f7c;
  --crdi-blue-light: #e8f4fb;
  --crdi-green: #3fa845;
  --crdi-green-dark: #2d7d32;
  --crdi-dark: #1b2430;
  --crdi-text: #333c46;
  --crdi-muted: #6c7680;
  --crdi-bg: #f4f7fa;
  --crdi-border: #e4e9ee;
  --crdi-radius: 10px;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--crdi-text);
  background: #fff;
}

a { text-decoration: none; }
.text-crdi-blue { color: var(--crdi-blue) !important; }
.text-crdi-green { color: var(--crdi-green) !important; }
.bg-crdi-blue { background-color: var(--crdi-blue) !important; }
.bg-crdi-light { background-color: var(--crdi-bg) !important; }

.btn-crdi {
  background: linear-gradient(135deg, var(--crdi-blue) 0%, var(--crdi-green) 130%);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: filter .15s ease, transform .1s ease;
}
.btn-crdi:hover { filter: brightness(1.08); color: #fff; }
.btn-crdi:active { transform: scale(0.98); }

.btn-outline-crdi {
  border: 1.5px solid var(--crdi-blue);
  color: var(--crdi-blue);
  font-weight: 600;
  background: transparent;
}
.btn-outline-crdi:hover { background: var(--crdi-blue); color: #fff; }

/* ---- Topbar ---- */
.topbar {
  background: var(--crdi-dark);
  color: #cfd6dd;
  font-size: .82rem;
}
.topbar a { color: #cfd6dd; }
.topbar a:hover { color: #fff; }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--crdi-border); }
.brand-logo { height: 42px; width: auto; }
.brand-name {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--crdi-dark);
}
.brand-name span { color: var(--crdi-green); }

.search-form .form-control {
  border-color: var(--crdi-border);
  border-right: none;
}
.search-form .btn {
  background: var(--crdi-blue);
  color: #fff;
  border: 1px solid var(--crdi-blue);
}

.header-icon-link {
  color: var(--crdi-dark);
  position: relative;
  text-align: center;
}
.header-icon-link .bi { font-size: 1.4rem; }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--crdi-green);
  color: #fff;
  border-radius: 50%;
  font-size: .68rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ---- Category nav ---- */
.category-nav {
  background: #fff;
  border-bottom: 1px solid var(--crdi-border);
}
.category-nav .nav-link {
  color: var(--crdi-text);
  font-weight: 500;
  font-size: .92rem;
  padding: .65rem .85rem;
}
.category-nav .nav-link:hover { color: var(--crdi-blue); }
.category-nav .dropdown-menu { border-radius: 0 0 8px 8px; border-color: var(--crdi-border); }

/* ---- Hero / banners ---- */
.hero-banner {
  border-radius: var(--crdi-radius);
  overflow: hidden;
  background: linear-gradient(120deg, var(--crdi-blue-dark), var(--crdi-blue) 60%, var(--crdi-green));
  color: #fff;
  min-height: 300px;
}
.hero-banner img { object-fit: cover; }
.category-quicklink {
  border: 1px solid var(--crdi-border);
  border-radius: var(--crdi-radius);
  padding: 1rem .5rem;
  text-align: center;
  color: var(--crdi-text);
  transition: box-shadow .15s ease, transform .1s ease;
  height: 100%;
}
.category-quicklink:hover { box-shadow: 0 6px 18px rgba(20,119,184,.15); transform: translateY(-2px); color: var(--crdi-blue); }
.category-quicklink .icon-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--crdi-blue-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .5rem;
  font-size: 1.5rem;
  color: var(--crdi-blue);
}

/* ---- Product cards ---- */
.product-card {
  border: 1px solid var(--crdi-border);
  border-radius: var(--crdi-radius);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .15s ease, transform .1s ease;
  background: #fff;
}
.product-card:hover { box-shadow: 0 10px 24px rgba(20,30,40,.1); transform: translateY(-3px); }
.product-card .product-thumb {
  aspect-ratio: 1 / 1;
  background: var(--crdi-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-card .product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.product-card .product-body { padding: .75rem .85rem 1rem; }
.product-card .product-title {
  font-size: .9rem; font-weight: 500; color: var(--crdi-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.product-card .price { font-weight: 700; color: var(--crdi-dark); }
.product-card .price-old { color: var(--crdi-muted); text-decoration: line-through; font-size: .82rem; }
.badge-discount {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--crdi-green); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 6px;
}
.badge-outofstock {
  position: absolute; inset: 0; background: rgba(255,255,255,.72);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #dc3545; font-size: .85rem;
}
.wishlist-btn {
  position: absolute; top: .5rem; right: .5rem; background: #fff;
  border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--crdi-border); color: var(--crdi-muted);
}
.wishlist-btn.active, .wishlist-btn:hover { color: #dc3545; border-color: #dc3545; }
.rating-stars { color: #ffb100; font-size: .82rem; }

.section-title { font-weight: 800; color: var(--crdi-dark); }
.section-title .accent { color: var(--crdi-green); }

/* ---- Footer ---- */
.site-footer { background: var(--crdi-dark); color: #b7c0c9; }
.site-footer h6 { color: #fff; font-weight: 700; }
.site-footer a { color: #b7c0c9; }
.site-footer a:hover { color: #fff; }
.payment-badges img, .payment-badges span {
  background: #fff; border-radius: 4px; padding: .25rem .5rem; font-size: .72rem; color: var(--crdi-dark); font-weight: 600;
}

/* ---- Misc ---- */
.step-indicator .step {
  display: flex; align-items: center; gap: .5rem; color: var(--crdi-muted); font-weight: 600;
}
.step-indicator .step.active { color: var(--crdi-blue); }
.step-indicator .step .num {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.order-status-badge { padding: .3rem .7rem; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.status-pending { background: #fff3cd; color: #997404; }
.status-processing { background: #cfe2ff; color: #084298; }
.status-shipped { background: #e2d9f3; color: #4b2e83; }
.status-delivered { background: #d1e7dd; color: #0f5132; }
.status-cancelled, .status-returned { background: #f8d7da; color: #842029; }

.lang-switch a { font-weight: 600; }
.lang-switch a.active { color: var(--crdi-green); }

@media (max-width: 767px) {
  .brand-name { font-size: 1.05rem; }
  .hero-banner { min-height: 200px; }
}