/* ===========================================
   Shoplazza-Style CSS - FORCE OVERRIDE
   Uses !important to override OpenCart Bootstrap
   =========================================== */

/* ========== RESET & BASE ========== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
h1,h2,h3,h4,h5 { font-weight: 500 !important; color: #1a1a1a !important; }
a { text-decoration: none !important; transition: color .2s ease !important; }
img { max-width: 100% !important; display: block !important; }

/* ========== TOP BAR ========== */
#top-bar {
  background: #f8f7f5 !important;
  border-bottom: 1px solid #e8e6e1 !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
}
.top-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.top-left, .top-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

#top-bar a {
  color: #999 !important;
  font-size: 12px !important;
}
#top-bar a:hover {
  color: #1a1a1a !important;
}
.top-account a {
  color: #666 !important;
  margin: 0 4px !important;
}
.top-account a:hover {
  color: #c9a96e !important;
}
.top-link i {
  color: #c9a96e !important;
}

/* Override OpenCart top bar dropdowns inside our wrapper */
#top-bar .dropdown-toggle {
  color: #999 !important;
  font-size: 12px !important;
}
#top-bar .dropdown-menu {
  border: 1px solid #e8e6e1 !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  padding: 6px 0 !important;
}
#top-bar .dropdown-item {
  font-size: 13px !important;
  padding: 5px 14px !important;
  color: #333 !important;
}
#top-bar .dropdown-item:hover {
  background: #f8f7f5 !important;
  color: #c9a96e !important;
}

/* ========== MAIN HEADER ========== */
#main-header {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e8e6e1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding: 0 !important;
}
.header-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}

/* Logo */
.site-logo img {
  height: 38px !important;
  width: auto !important;
}
.logo-text {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
}

/* Search Box - CRITICAL override */
.header-search {
  flex: 1 !important;
  max-width: 480px !important;
}
.header-search form,
.header-search .input-group {
  display: flex !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}
.header-search input[type="text"],
.header-search .form-control {
  border: 1px solid #e8e6e1 !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  background: #f8f7f5 !important;
  color: #1a1a1a !important;
  height: 44px !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
}
.header-search input[type="text"]:focus,
.header-search .form-control:focus {
  border-color: #c9a96e !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.12) !important;
}
.header-search input::placeholder {
  color: #999 !important;
}
.header-search button,
.header-search .btn {
  background: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 4px 4px 0 !important;
  color: #fff !important;
  width: 48px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 14px !important;
}
.header-search button:hover,
.header-search .btn:hover {
  background: #333 !important;
  border-color: #333 !important;
}

/* Cart Button - CRITICAL override */
.header-cart .dropdown,
.header-cart > div {
  display: block !important;
}
.header-cart button,
.header-cart .dropdown-toggle,
.header-cart .btn-dark,
.header-cart .btn {
  background: transparent !important;
  border: 1px solid #e8e6e1 !important;
  color: #1a1a1a !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  height: 44px !important;
  min-width: auto !important;
}
.header-cart button:hover,
.header-cart .dropdown-toggle:hover,
.header-cart .btn-dark:hover,
.header-cart .btn:hover {
  border-color: #c9a96e !important;
  color: #c9a96e !important;
  background: transparent !important;
}
.header-cart .dropdown-menu {
  border: 1px solid #e8e6e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  min-width: 320px !important;
  padding: 16px !important;
  margin-top: 8px !important;
}

/* ========== NAVIGATION MENU (the blue navbar) ========== */
.navbar, nav.main-nav, #menu, [class*="navbar"], header + main > *:first-child nav,
main > nav, main > .navbar, main > [class*="nav"] {
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.navbar-nav > li > a,
.navbar .nav-link,
#menu .nav-link,
[class*="navbar"] li a,
header + main > *:first-child nav a,
main > nav a,
main > .navbar a {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 14px 20px !important;
  border: none !important;
  background: transparent !important;
  transition: all .2s ease !important;
}
.navbar-nav > li > a:hover,
.navbar .nav-link:hover,
#menu .nav-link:hover,
[class*="navbar"] li a:hover,
main > nav a:hover,
main > .navbar a:hover {
  color: #c9a96e !important;
  background: rgba(255,255,255,0.05) !important;
}

/* ========== MAIN CONTENT ========== */
main {
  min-height: 60vh !important;
  padding: 32px 0 60px !important;
}
#common-home .container {
  max-width: 1320px !important;
}

/* ========== PRODUCT CARDS ========== */
.product-layout {
  margin-bottom: 28px !important;
}
.product-thumb {
  background: #fff !important;
  border: 1px solid #e8e6e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  height: 100% !important;
}
.product-thumb:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  border-color: transparent !important;
}
.product-thumb .image {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f8f7f5 !important;
  position: relative !important;
}
.product-thumb .image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.product-thumb .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease !important;
}
.product-thumb:hover .image img {
  transform: scale(1.05) !important;
}
.product-thumb .caption {
  padding: 16px 20px 20px !important;
}
.product-thumb .caption h4 {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}
.product-thumb .caption h4 a {
  color: #1a1a1a !important;
}
.product-thumb .caption h4 a:hover {
  color: #c9a96e !important;
}
.product-thumb .price {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 12px !important;
}
.product-thumb .price-new {
  color: #c9a96e !important;
}
.product-thumb .price-old {
  color: #999 !important;
  text-decoration: line-through !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}
.product-thumb .button-group {
  display: flex !important;
  gap: 8px !important;
}
.product-thumb .button-group button,
.product-thumb .button-group .btn {
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .3px !important;
  transition: all .25s ease !important;
}
.product-thumb .button-group .btn-primary,
.product-thumb .button-group .btn-warning {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #fff !important;
  flex: 1 !important;
}
.product-thumb .button-group .btn-primary:hover,
.product-thumb .button-group .btn-warning:hover {
  background: #333 !important;
  border-color: #333 !important;
}
.product-thumb .button-group .btn-outline-secondary,
.product-thumb .button-group .btn-light {
  background: transparent !important;
  border: 1px solid #e8e6e1 !important;
  color: #999 !important;
  width: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-thumb .button-group .btn-outline-secondary:hover,
.product-thumb .button-group .btn-light:hover {
  border-color: #c9a96e !important;
  color: #c9a96e !important;
  background: transparent !important;
}

/* ========== BUTTONS GLOBAL ========== */
.btn-primary {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}
.btn-primary:hover {
  background: #333 !important;
  border-color: #333 !important;
}
.btn-light {
  border-radius: 4px !important;
}
.btn-outline-secondary,
.btn-outline-light {
  border-radius: 4px !important;
  border-color: #e8e6e1 !important;
  color: #666 !important;
}
.btn-outline-secondary:hover,
.btn-outline-light:hover {
  background: #f8f7f5 !important;
  border-color: #c9a96e !important;
  color: #c9a96e !important;
}

/* ========== FOOTER ========== */
#main-footer {
  background: #1a1a1a !important;
  color: #999 !important;
  padding: 56px 0 0 !important;
  margin-top: 60px !important;
  border: none !important;
}
.footer-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: grid !important;
  grid-template-columns: 1.2fr 2fr !important;
  gap: 60px !important;
}
.footer-logo {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 12px !important;
}
.footer-logo span {
  color: #c9a96e !important;
}
.footer-tagline {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #888 !important;
}
.footer-links {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}
.footer-col h5 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}
.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-col ul li {
  margin-bottom: 8px !important;
}
.footer-col ul li a {
  font-size: 13px !important;
  color: #888 !important;
  transition: color .2s !important;
}
.footer-col ul li a:hover {
  color: #c9a96e !important;
}
.footer-bottom {
  border-top: 1px solid #2a2a2a !important;
  margin-top: 40px !important;
  padding: 18px 24px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #666 !important;
}
.footer-bottom p,
.footer-bottom a {
  color: #666 !important;
}
.footer-bottom a:hover {
  color: #c9a96e !important;
}

/* ========== SIDEBAR / WIDGETS ========== */
#column-left .card,
#column-right .card {
  border: 1px solid #e8e6e1 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#column-left .card-header,
#column-right .card-header {
  background: #f8f7f5 !important;
  border-bottom: 1px solid #e8e6e1 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  padding: 14px 18px !important;
}
#column-left .list-group-item,
#column-right .list-group-item {
  border-color: #e8e6e1 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  color: #666 !important;
}
#column-left .list-group-item:hover,
#column-right .list-group-item:hover {
  background: #f8f7f5 !important;
  color: #c9a96e !important;
}

/* ========== BREADCRUMB ========== */
.breadcrumb {
  background: transparent !important;
  padding: 16px 0 !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
  border: none !important;
}
.breadcrumb a {
  color: #999 !important;
}
.breadcrumb a:hover {
  color: #c9a96e !important;
}
.breadcrumb-item.active {
  color: #666 !important;
}

/* ========== PAGINATION ========== */
.pagination {
  justify-content: center !important;
}
.pagination .page-link {
  border-radius: 4px !important;
  border: 1px solid #e8e6e1 !important;
  color: #1a1a1a !important;
  margin: 0 3px !important;
  font-size: 13px !important;
  min-width: 38px !important;
  text-align: center !important;
}
.pagination .page-item.active .page-link {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #fff !important;
}

/* ========== ALERTS ========== */
.alert {
  border-radius: 4px !important;
  border: none !important;
  font-size: 14px !important;
}
.alert-success {
  background: #f0f9f0 !important;
  color: #2d7a2d !important;
}
.alert-danger {
  background: #fef2f2 !important;
  color: #c53030 !important;
}
.alert-info {
  background: #f0f7ff !important;
  color: #2563eb !important;
}

/* ========== FORMS ========== */
.form-control,
.form-select {
  border: 1px solid #e8e6e1 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
}
.form-control:focus,
.form-select:focus {
  border-color: #c9a96e !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.12) !important;
}

/* ========== TABLES ========== */
.table thead th {
  background: #f8f7f5 !important;
  border-bottom: 2px solid #e8e6e1 !important;
  color: #1a1a1a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.table td {
  vertical-align: middle !important;
  border-color: #e8e6e1 !important;
}

/* ========== CONTAINER WIDTH ========== */
.container {
  max-width: 1320px !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
  .header-inner {
    flex-wrap: wrap !important;
    height: auto !important;
    padding: 12px 24px !important;
    gap: 12px !important;
  }
  .header-search {
    order: 3 !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  #top-bar {
    display: none !important;
  }
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 768px) {
  .footer-links {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .product-layout {
    margin-bottom: 16px !important;
  }
  .product-thumb .caption {
    padding: 12px 14px 16px !important;
  }
  .product-thumb .caption h4 {
    font-size: 13px !important;
  }
}