/* ============================================
   eOil.sk - Custom Bootstrap 5 Theme
   Navy/Industrial Color Scheme
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  --eoil-primary: #1a365d;
  --eoil-primary-dark: #0f2440;
  --eoil-primary-light: #2a4a7f;
  --eoil-accent: #2196F3;
  --eoil-accent-hover: #1976D2;
  --eoil-bg-light: #f8f9fa;
  --eoil-bg-card: #ffffff;
  --eoil-text: #1a1a2e;
  --eoil-text-muted: #6b7280;
  --eoil-border: #e5e7eb;
  --eoil-success: #16a34a;
  --eoil-danger: #dc2626;
  --eoil-shadow: 0 1px 3px rgba(0,0,0,0.1);
  --eoil-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --eoil-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --eoil-radius: 0.5rem;
  --eoil-radius-lg: 0.75rem;
}

/* ---------- Base ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--eoil-text);
  background-color: var(--eoil-bg-light);
}

a {
  color: var(--eoil-accent);
  text-decoration: none;
}
a:hover {
  color: var(--eoil-accent-hover);
}

/* ---------- Notice Bar ---------- */
.eoil-notice-bar {
  background-color: #fff8e1;
  color: #6d5d00;
  font-size: 0.7rem;
  padding: 0.25rem 0;
  text-align: center;
  border-bottom: 1px solid #ffe082;
  line-height: 1.3;
}
@media (max-width: 767.98px) {
  .eoil-notice-bar {
    font-size: 0.6rem;
    padding: 0.15rem 0.5rem;
    max-height: 2.6em;
    overflow: hidden;
    position: relative;
  }
}

/* ---------- Top Bar ---------- */
.eoil-topbar {
  background-color: var(--eoil-primary);
  color: #fff;
  font-size: 0.8125rem;
  padding: 0.35rem 0;
}
.eoil-topbar a {
  color: #fff;
  opacity: 0.9;
}
.eoil-topbar a:hover {
  opacity: 1;
  color: #fff;
}
.eoil-topbar .separator {
  opacity: 0.5;
}

/* ---------- Main Header ---------- */
.eoil-header {
  background-color: #fff;
  border-bottom: 1px solid var(--eoil-border);
  box-shadow: var(--eoil-shadow);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.eoil-header .navbar {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.eoil-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--eoil-text);
  font-weight: 700;
  font-size: 1.5rem;
}
.eoil-logo .logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--eoil-primary);
  border-radius: var(--eoil-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.eoil-logo .logo-text {
  color: var(--eoil-primary);
}
.eoil-logo .logo-text .sk {
  color: var(--eoil-accent);
}
.eoil-logo-img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}

/* Header search */
.eoil-header-search {
  position: relative;
  max-width: 480px;
  flex: 1;
}
.eoil-header-search .form-control {
  padding-left: 2.5rem;
  border-radius: 50rem;
  border-color: var(--eoil-border);
  background-color: var(--eoil-bg-light);
}
.eoil-header-search .form-control:focus {
  border-color: var(--eoil-accent);
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,0.15);
}
.eoil-header-search .search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eoil-text-muted);
  pointer-events: none;
}

/* Header nav actions */
.eoil-header-actions {
  flex-wrap: nowrap;
}
.eoil-header-actions .btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--eoil-text);
  border-radius: 50%;
  transition: background 0.2s;
  position: relative;
}
.eoil-header-actions .btn-icon:hover {
  background-color: var(--eoil-bg-light);
}
/* Header action links with text labels */
.header-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--eoil-text);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: var(--eoil-radius);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.header-action-link:hover {
  background: var(--eoil-bg-light);
  color: var(--eoil-accent);
  text-decoration: none;
}
.header-action-link i {
  font-size: 1rem;
}
.header-cart {
  position: relative;
  font-weight: 600;
}
.eoil-cart-badge {
  background-color: var(--eoil-accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 50rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.15rem;
}
/* B2B badge (green) */
.header-b2b-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--eoil-success);
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.2);
  padding: 0.25rem 0.6rem;
  border-radius: 50rem;
  white-space: nowrap;
}
/* B2B link (red/highlighted for non-B2B users) */
.header-b2b-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--eoil-danger);
  text-decoration: none;
  white-space: nowrap;
}
.header-b2b-link:hover {
  text-decoration: underline;
  color: var(--eoil-danger);
}

/* Nav links */
.eoil-nav .nav-link {
  color: var(--eoil-text);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.eoil-nav .nav-link:hover {
  color: var(--eoil-accent);
}
.eoil-nav .dropdown-menu {
  border: 1px solid var(--eoil-border);
  box-shadow: var(--eoil-shadow-lg);
  border-radius: var(--eoil-radius);
}

/* ---------- Main Navigation ---------- */
.eoil-mainnav {
  background-color: var(--eoil-primary);
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.eoil-mainnav .nav-link {
  color: rgba(255,255,255,.85);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  border-radius: var(--eoil-radius);
  transition: background .15s, color .15s;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.eoil-mainnav .nav-link:hover,
.eoil-mainnav .nav-link.active {
  color: #fff;
  background-color: rgba(255,255,255,.15);
}
.eoil-mainnav .dropdown-menu {
  border: 1px solid var(--eoil-border);
  box-shadow: var(--eoil-shadow-lg);
  border-radius: var(--eoil-radius);
  min-width: 220px;
}
.eoil-mainnav .dropdown-item {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}
.eoil-mainnav .dropdown-item:hover {
  background-color: var(--eoil-bg);
  color: var(--eoil-primary);
}

/* ---------- Hero Section ---------- */
.eoil-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(to right, rgba(15,36,64,0.85) 0%, rgba(15,36,64,0.5) 100%),
                     url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=1400');
  color: #fff;
}
.eoil-hero h1 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.eoil-hero .lead {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 600px;
}

/* Hero search */
.eoil-hero-search {
  position: relative;
  max-width: 580px;
  margin-top: 1.5rem;
}
.eoil-hero-search .form-control {
  height: 3.25rem;
  padding-left: 3rem;
  font-size: 1rem;
  border-radius: var(--eoil-radius-lg);
  border: none;
}
.eoil-hero-search .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eoil-text-muted);
  pointer-events: none;
  z-index: 2;
}
.eoil-hero-search .btn-search {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--eoil-accent);
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: var(--eoil-radius);
  font-weight: 600;
}
.eoil-hero-search .btn-search:hover {
  background-color: var(--eoil-accent-hover);
}

/* Viscosity quick filters */
.eoil-viscosity-tags {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.eoil-viscosity-tags .label {
  opacity: 0.7;
  font-size: 0.875rem;
}
.eoil-viscosity-tags .badge {
  background-color: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 50rem;
  cursor: pointer;
  transition: background 0.2s;
}
.eoil-viscosity-tags .badge:hover {
  background-color: rgba(255,255,255,0.25);
}

/* ---------- Trust Section ---------- */
.eoil-trust {
  background-color: #fff;
  padding: 3rem 0;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-trust-card {
  text-align: center;
  padding: 1.5rem 1rem;
}
.eoil-trust-card .icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  background-color: rgba(33,150,243,0.08);
  border-radius: var(--eoil-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eoil-accent);
}
.eoil-trust-card h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.eoil-trust-card p {
  font-size: 0.875rem;
  color: var(--eoil-text-muted);
  margin-bottom: 0;
}

/* ---------- Product Cards ---------- */
.eoil-product-card {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.eoil-product-card:hover {
  box-shadow: var(--eoil-shadow-lg);
  transform: translateY(-2px);
}
.eoil-product-card .card-img-top-wrap {
  position: relative;
  background-color: var(--eoil-bg-light);
  padding: 1.5rem;
  text-align: center;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eoil-product-card .card-img-top-wrap img {
  max-height: 140px;
  max-width: 100%;
  object-fit: contain;
}
.eoil-product-card .badge-discount {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: var(--eoil-danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--eoil-radius);
}
.eoil-product-card .badge-stock {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.eoil-product-card .badge-stock.in-stock {
  color: var(--eoil-success);
}
.eoil-product-card .card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.eoil-product-card .brand-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--eoil-accent);
  margin-bottom: 0.25rem;
}
.eoil-product-card .card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--eoil-text);
}
.eoil-product-card .product-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.eoil-product-card .product-tags .badge {
  background-color: var(--eoil-bg-light);
  color: var(--eoil-text);
  font-weight: 500;
  font-size: 0.6875rem;
  padding: 0.2rem 0.5rem;
  border-radius: 50rem;
}
.eoil-product-card .specs {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
  margin-bottom: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.eoil-product-card .price-row {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.eoil-product-card .price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--eoil-text);
}
.eoil-product-card .price-old {
  font-size: 0.875rem;
  color: var(--eoil-text-muted);
  text-decoration: line-through;
}

/* Add to cart button */
.btn-add-cart {
  background-color: var(--eoil-accent);
  color: #fff;
  border: none;
  font-weight: 600;
  width: 100%;
  padding: 0.6rem;
  border-radius: var(--eoil-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s;
}
.btn-add-cart:hover {
  background-color: var(--eoil-accent-hover);
  color: #fff;
}

/* ---------- Filter Sidebar ---------- */
.eoil-filter-sidebar {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 1.25rem;
}
.eoil-filter-sidebar h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.eoil-filter-group {
  border-bottom: 1px solid var(--eoil-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.eoil-filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.eoil-filter-group .form-check-label {
  font-size: 0.8125rem;
}

/* Viscosity filter chips */
.eoil-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--eoil-border);
  border-radius: 50rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
  color: var(--eoil-text);
}
.eoil-chip:hover, .eoil-chip.active {
  background-color: var(--eoil-primary);
  color: #fff;
  border-color: var(--eoil-primary);
}

/* Price range slider area */
.eoil-price-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.eoil-price-range .form-control {
  width: 80px;
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------- Section Headers ---------- */
.eoil-section-header {
  margin-bottom: 1.5rem;
}
.eoil-section-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
}
.eoil-section-header p {
  color: var(--eoil-text-muted);
}

/* ---------- Brand Logos ---------- */
.eoil-brands {
  padding: 2.5rem 0;
  background: var(--eoil-bg-light);
}
.eoil-brands .brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  background: #fff;
  border-radius: var(--eoil-radius);
  border: 1px solid var(--eoil-border);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--eoil-text-muted);
  transition: border-color 0.2s;
}
.eoil-brands .brand-item:hover {
  border-color: var(--eoil-accent);
  color: var(--eoil-text);
}

/* ---------- Footer ---------- */
.eoil-footer {
  background-color: var(--eoil-primary-dark);
  color: rgba(255,255,255,0.8);
  padding: 3rem 0 1.5rem;
}
.eoil-footer h6 {
  color: #fff;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.eoil-footer a {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
}
.eoil-footer a:hover {
  color: #fff;
}
.eoil-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.25rem;
  margin-top: 2rem;
  font-size: 0.8125rem;
  opacity: 0.7;
}
.eoil-footer .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* ---------- Breadcrumbs ---------- */
.eoil-breadcrumb {
  padding: 0.75rem 0;
  background: transparent;
  margin-bottom: 0;
}
.eoil-breadcrumb .breadcrumb {
  margin-bottom: 0;
  font-size: 0.8125rem;
}
.eoil-breadcrumb .breadcrumb-item a {
  color: var(--eoil-text-muted);
}
.eoil-breadcrumb .breadcrumb-item.active {
  color: var(--eoil-text);
}

/* ---------- Product Detail ---------- */
.eoil-product-detail .product-image-wrap {
  background: var(--eoil-bg-light);
  border-radius: var(--eoil-radius-lg);
  padding: 2rem;
  text-align: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eoil-product-detail .product-image-wrap img {
  max-height: 350px;
  max-width: 100%;
}
.eoil-product-detail .product-brand {
  color: var(--eoil-accent);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.eoil-product-detail .product-title {
  font-size: 1.75rem;
  font-weight: 700;
}
.eoil-product-detail .product-price {
  font-size: 2rem;
  font-weight: 700;
}
.eoil-product-detail .product-price .old {
  font-size: 1.125rem;
  color: var(--eoil-text-muted);
  text-decoration: line-through;
  font-weight: 400;
}
.eoil-product-detail .param-table th {
  font-weight: 500;
  color: var(--eoil-text-muted);
  font-size: 0.875rem;
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid var(--eoil-border);
  width: 40%;
}
.eoil-product-detail .param-table td {
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-product-detail .stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background-color: rgba(22,163,74,0.1);
  color: var(--eoil-success);
  border-radius: 50rem;
  font-size: 0.875rem;
  font-weight: 500;
}
/* ---------- Product Detail – price & chips ---------- */
.eoil-product-detail .price-section {
  margin-bottom: 0.75rem;
}
.eoil-product-detail .price-current {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--eoil-text);
}
.eoil-product-detail .price-old {
  font-size: 1.125rem;
  color: var(--eoil-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 0.25rem;
}
.param-chip {
  display: inline-block;
  background: var(--eoil-bg-light);
  border: 1px solid var(--eoil-border);
  border-radius: 50rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--eoil-text);
  white-space: nowrap;
}
.approval-badge {
  display: inline-block;
  background: var(--eoil-bg-light);
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 0.2rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--eoil-text);
  text-decoration: none;
}
.approval-badge:hover {
  background: var(--eoil-accent);
  color: #fff;
  border-color: var(--eoil-accent);
}
.btn-add-cart {
  background: var(--eoil-accent);
  color: #fff;
  border: none;
  border-radius: var(--eoil-radius);
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-add-cart:hover {
  background: var(--eoil-accent-dark, #1d4ed8);
}

.eoil-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  overflow: hidden;
}
.eoil-qty-control button {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: var(--eoil-bg-light);
  font-size: 1.125rem;
  cursor: pointer;
}
.eoil-qty-control button:hover {
  background: var(--eoil-border);
}
.eoil-qty-control input {
  width: 3rem;
  text-align: center;
  border: none;
  border-left: 1px solid var(--eoil-border);
  border-right: 1px solid var(--eoil-border);
  font-weight: 600;
}

/* ---------- Cart ---------- */
.eoil-cart-table th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--eoil-text-muted);
  border-bottom: 2px solid var(--eoil-border);
}
.eoil-cart-table td {
  vertical-align: middle;
  padding: 1rem 0.5rem;
}
.eoil-cart-table .product-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eoil-cart-table .product-cell img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: var(--eoil-bg-light);
  border-radius: var(--eoil-radius);
  padding: 0.5rem;
}
.eoil-cart-summary {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 1.5rem;
}
.eoil-cart-summary .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
}
.eoil-cart-summary .summary-row.total {
  border-top: 2px solid var(--eoil-border);
  font-weight: 700;
  font-size: 1.125rem;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}
.eoil-free-shipping {
  background-color: rgba(22,163,74,0.08);
  color: var(--eoil-success);
  border-radius: var(--eoil-radius);
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

/* ---------- Checkout ---------- */
.eoil-checkout-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
}
.eoil-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--eoil-text-muted);
  position: relative;
}
.eoil-step .step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  background-color: var(--eoil-bg-light);
  border: 2px solid var(--eoil-border);
}
.eoil-step.active .step-num {
  background-color: var(--eoil-accent);
  border-color: var(--eoil-accent);
  color: #fff;
}
.eoil-step.active {
  color: var(--eoil-text);
  font-weight: 600;
}
.eoil-step.completed .step-num {
  background-color: var(--eoil-success);
  border-color: var(--eoil-success);
  color: #fff;
}
.eoil-step-divider {
  width: 3rem;
  height: 2px;
  background-color: var(--eoil-border);
  align-self: center;
}
.eoil-step-divider.completed {
  background-color: var(--eoil-success);
}

/* Checkout cards */
.eoil-checkout-card {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.eoil-checkout-card h5 {
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Shipping options */
.eoil-shipping-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  cursor: pointer;
  transition: border-color 0.15s;
}
.eoil-shipping-option:hover {
  border-color: var(--eoil-accent);
}
.eoil-shipping-option.selected {
  border-color: var(--eoil-accent);
  background-color: rgba(33,150,243,0.04);
}

/* Payment options */
.eoil-payment-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  cursor: pointer;
  transition: border-color 0.15s;
  margin-bottom: 0.5rem;
}
.eoil-payment-option:hover {
  border-color: var(--eoil-accent);
}
.eoil-payment-option.selected {
  border-color: var(--eoil-accent);
  background-color: rgba(33,150,243,0.04);
}

/* ---------- Order Confirmation ---------- */
.eoil-order-success {
  text-align: center;
  padding: 3rem 1rem;
}
.eoil-order-success .success-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  background-color: rgba(22,163,74,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eoil-success);
}
.eoil-order-success h2 {
  font-weight: 700;
}
.eoil-order-success .order-number {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--eoil-accent);
}

/* ---------- Buttons ----------
   Selectors are written as .btn.btn-eoil-* (specificity 0,0,2,0) so they
   beat Bootstrap's `.btn { background-color: var(--bs-btn-bg); }` that
   is loaded AFTER this file. */
.btn.btn-eoil-primary,
a.btn-eoil-primary,
button.btn-eoil-primary {
  background-color: var(--eoil-accent);
  color: #fff;
  border: 1px solid var(--eoil-accent);
  font-weight: 600;
  border-radius: var(--eoil-radius);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn.btn-eoil-primary:hover,
a.btn-eoil-primary:hover,
button.btn-eoil-primary:hover,
.btn.btn-eoil-primary:focus,
a.btn-eoil-primary:focus,
button.btn-eoil-primary:focus {
  background-color: var(--eoil-accent-hover);
  border-color: var(--eoil-accent-hover);
  color: #fff;
}

.btn.btn-eoil-outline,
a.btn-eoil-outline,
button.btn-eoil-outline {
  background: transparent;
  color: var(--eoil-text);
  border: 1px solid var(--eoil-border);
  font-weight: 500;
  border-radius: var(--eoil-radius);
  transition: background-color 0.15s, border-color 0.15s;
}
.btn.btn-eoil-outline:hover,
a.btn-eoil-outline:hover,
button.btn-eoil-outline:hover {
  background-color: var(--eoil-bg-light);
  border-color: var(--eoil-primary);
  color: var(--eoil-primary);
}

/* ---------- Utilities ---------- */
.bg-eoil-light { background-color: var(--eoil-bg-light); }
.text-eoil-muted { color: var(--eoil-text-muted); }
.text-eoil-accent { color: var(--eoil-accent); }
.text-eoil-success { color: var(--eoil-success); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .eoil-hero h1 {
    font-size: 2rem;
  }
  .eoil-hero {
    min-height: 400px;
  }
}
@media (max-width: 767.98px) {
  .eoil-hero h1 {
    font-size: 1.625rem;
  }
  .eoil-hero {
    min-height: 350px;
  }
  .eoil-header-search {
    display: none;
  }
  .eoil-header-actions .btn-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
  }
  .eoil-header-actions {
    gap: 0.15rem !important;
  }
}

/* ---------- Enhanced Filter Components ---------- */

/* Filter section header (collapsible) */
.eoil-filter-section {
  border-bottom: 1px solid var(--eoil-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.eoil-filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.eoil-filter-section .filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--eoil-text);
  padding: 0;
  background: none;
  border: none;
  width: 100%;
}
.eoil-filter-section .filter-header i {
  transition: transform 0.2s;
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}
.eoil-filter-section .filter-header.collapsed i {
  transform: rotate(-90deg);
}

/* Category tree */
.eoil-category-tree {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.eoil-category-tree li {
  margin-bottom: 0.125rem;
}
.eoil-category-tree .cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-radius: var(--eoil-radius);
  font-size: 0.8125rem;
  color: var(--eoil-text);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.eoil-category-tree .cat-item:hover {
  background-color: var(--eoil-bg-light);
  color: var(--eoil-accent);
}
.eoil-category-tree .cat-item.active {
  background-color: rgba(33,150,243,0.08);
  color: var(--eoil-accent);
  font-weight: 600;
}
.eoil-category-tree .cat-count {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
  font-weight: 400;
}
.eoil-category-tree .cat-toggle {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--eoil-text-muted);
  padding: 0;
  cursor: pointer;
  font-size: 0.625rem;
}
.eoil-category-tree .cat-children {
  list-style: none;
  padding-left: 1.25rem;
  margin: 0;
}
.eoil-category-tree .cat-children .cat-item {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
}

/* Searchable multiselect */
.eoil-multiselect {
  position: relative;
}
.eoil-multiselect .multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  background: #fff;
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  cursor: pointer;
  transition: border-color 0.15s;
}
.eoil-multiselect .multiselect-trigger:hover,
.eoil-multiselect .multiselect-trigger:focus {
  border-color: var(--eoil-accent);
  outline: none;
}
.eoil-multiselect .multiselect-trigger i {
  font-size: 0.75rem;
  transition: transform 0.2s;
}
.eoil-multiselect.open .multiselect-trigger i {
  transform: rotate(180deg);
}
.eoil-multiselect .multiselect-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-top: none;
  border-radius: 0 0 var(--eoil-radius) var(--eoil-radius);
  box-shadow: var(--eoil-shadow-md);
  max-height: 220px;
  overflow: hidden;
}
.eoil-multiselect.open .multiselect-dropdown {
  display: block;
}
.eoil-multiselect .multiselect-search {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-multiselect .multiselect-search input {
  width: 100%;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  outline: none;
}
.eoil-multiselect .multiselect-search input:focus {
  border-color: var(--eoil-accent);
}
.eoil-multiselect .multiselect-options {
  max-height: 160px;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.eoil-multiselect .multiselect-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.1s;
}
.eoil-multiselect .multiselect-option:hover {
  background-color: var(--eoil-bg-light);
}
.eoil-multiselect .multiselect-option input[type="checkbox"] {
  accent-color: var(--eoil-accent);
}

/* Selected tags / chips for multiselect */
.eoil-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.eoil-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background-color: rgba(33,150,243,0.1);
  color: var(--eoil-accent);
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.eoil-selected-tag .remove-tag {
  cursor: pointer;
  font-size: 0.625rem;
  opacity: 0.7;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  line-height: 1;
}
.eoil-selected-tag .remove-tag:hover {
  opacity: 1;
}

/* Dual range slider */
.eoil-range-slider {
  margin-top: 0.75rem;
}
.eoil-range-slider .range-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.eoil-range-slider .range-inputs input[type="number"] {
  width: 90px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  font-size: 0.8125rem;
  text-align: center;
}
.eoil-range-slider .range-inputs input[type="number"]:focus {
  border-color: var(--eoil-accent);
  outline: none;
}
.eoil-range-slider .range-inputs .range-separator {
  color: var(--eoil-text-muted);
  font-size: 0.8125rem;
}
.eoil-range-slider .range-inputs .range-unit {
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
}
.eoil-range-slider .dual-range {
  position: relative;
  height: 2rem;
}
.eoil-range-slider .dual-range input[type="range"] {
  position: absolute;
  width: 100%;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.eoil-range-slider .dual-range input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--eoil-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.eoil-range-slider .dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--eoil-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.eoil-range-slider .range-track {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--eoil-border);
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.eoil-range-slider .range-track .range-fill {
  position: absolute;
  height: 100%;
  background: var(--eoil-accent);
  border-radius: 2px;
}

/* Active filter tags (above product grid) */
.eoil-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.eoil-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  background: rgba(33,150,243,0.08);
  border: 1px solid rgba(33,150,243,0.2);
  border-radius: 50rem;
  font-size: 0.8125rem;
  color: var(--eoil-accent);
  font-weight: 500;
}
.eoil-active-filter .bi-x {
  cursor: pointer;
  font-size: 0.875rem;
}
.eoil-active-filter .bi-x:hover {
  color: var(--eoil-danger);
}
.eoil-clear-filters {
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  cursor: pointer;
}
.eoil-clear-filters:hover {
  color: var(--eoil-danger);
}

/* Text utility */
.text-eoil-primary { color: var(--eoil-accent); }

/* ============================================
   COMPLETE COMPONENT LIBRARY
   Everything needed for Yii2 app development
   ============================================ */

/* ---------- Forms & Inputs ---------- */
.eoil-form-group {
  margin-bottom: 1.25rem;
}
.eoil-form-group label,
.eoil-form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--eoil-text);
  margin-bottom: 0.375rem;
  display: block;
}
.eoil-form-label .required {
  color: var(--eoil-danger);
  margin-left: 0.15rem;
}
.eoil-form-control {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.eoil-form-control:focus {
  border-color: var(--eoil-accent);
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,0.12);
}
.eoil-form-control.is-invalid {
  border-color: var(--eoil-danger);
}
.eoil-form-control.is-valid {
  border-color: var(--eoil-success);
}
.eoil-invalid-feedback {
  color: var(--eoil-danger);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}
.eoil-form-hint {
  color: var(--eoil-text-muted);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
/* Floating label */
.eoil-floating-label {
  position: relative;
}
.eoil-floating-label .form-control {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
.eoil-floating-label label {
  position: absolute;
  top: 0;
  left: 0.85rem;
  padding-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--eoil-text-muted);
  transition: all 0.15s;
  pointer-events: none;
}
.eoil-floating-label .form-control:focus ~ label,
.eoil-floating-label .form-control:not(:placeholder-shown) ~ label {
  font-size: 0.6875rem;
  padding-top: 0.35rem;
  color: var(--eoil-accent);
}
/* Checkbox & Radio custom */
.eoil-check .form-check-input:checked {
  background-color: var(--eoil-accent);
  border-color: var(--eoil-accent);
}
.eoil-check .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,0.15);
}
/* Toggle switch */
.eoil-switch .form-check-input:checked {
  background-color: var(--eoil-accent);
  border-color: var(--eoil-accent);
}
/* Input group addon */
.eoil-input-group .input-group-text {
  background-color: var(--eoil-bg-light);
  border-color: var(--eoil-border);
  color: var(--eoil-text-muted);
  font-size: 0.875rem;
}
/* Select styled */
.eoil-select {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  font-size: 0.875rem;
  padding: 0.6rem 2rem 0.6rem 0.85rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.eoil-select:focus {
  border-color: var(--eoil-accent);
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,0.12);
  outline: none;
}

/* ---------- Modals ---------- */
.eoil-modal .modal-content {
  border: none;
  border-radius: var(--eoil-radius-lg);
  box-shadow: var(--eoil-shadow-lg);
}
.eoil-modal .modal-header {
  border-bottom: 1px solid var(--eoil-border);
  padding: 1.25rem 1.5rem;
}
.eoil-modal .modal-header .modal-title {
  font-weight: 600;
  font-size: 1.125rem;
}
.eoil-modal .modal-body {
  padding: 1.5rem;
}
.eoil-modal .modal-footer {
  border-top: 1px solid var(--eoil-border);
  padding: 1rem 1.5rem;
  gap: 0.5rem;
}
/* Confirm dialog */
.eoil-modal-confirm .modal-body {
  text-align: center;
  padding: 2rem 1.5rem;
}
.eoil-modal-confirm .confirm-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}
.eoil-modal-confirm .confirm-icon.danger {
  background: rgba(220,38,38,0.1);
  color: var(--eoil-danger);
}
.eoil-modal-confirm .confirm-icon.warning {
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
}
.eoil-modal-confirm .confirm-icon.success {
  background: rgba(22,163,74,0.1);
  color: var(--eoil-success);
}
/* Quick view modal */
.eoil-modal-quickview .modal-dialog {
  max-width: 800px;
}

/* ---------- Alerts ---------- */
.eoil-alert {
  border: none;
  border-radius: var(--eoil-radius);
  padding: 0.85rem 1.25rem;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.eoil-alert i {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.eoil-alert-success {
  background-color: rgba(22,163,74,0.08);
  color: #15803d;
}
.eoil-alert-danger {
  background-color: rgba(220,38,38,0.08);
  color: #b91c1c;
}
.eoil-alert-warning {
  background-color: rgba(245,158,11,0.08);
  color: #92400e;
}
.eoil-alert-info {
  background-color: rgba(33,150,243,0.08);
  color: #1565c0;
}

/* ---------- Toast Notifications ---------- */
.eoil-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.eoil-toast {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  box-shadow: var(--eoil-shadow-lg);
  padding: 1rem 1.25rem;
  min-width: 300px;
  max-width: 420px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: eoilSlideIn 0.3s ease-out;
}
.eoil-toast.toast-success { border-left: 4px solid var(--eoil-success); }
.eoil-toast.toast-danger { border-left: 4px solid var(--eoil-danger); }
.eoil-toast.toast-warning { border-left: 4px solid #f59e0b; }
.eoil-toast.toast-info { border-left: 4px solid var(--eoil-accent); }
.eoil-toast .toast-icon { font-size: 1.25rem; flex-shrink: 0; }
.eoil-toast .toast-body { flex: 1; font-size: 0.875rem; }
.eoil-toast .toast-title { font-weight: 600; margin-bottom: 0.15rem; }
.eoil-toast .toast-close {
  background: none;
  border: none;
  color: var(--eoil-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
}
@keyframes eoilSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ---------- Tabs (Product Detail, Account) ---------- */
.eoil-tabs .nav-tabs {
  border-bottom: 2px solid var(--eoil-border);
  gap: 0;
}
.eoil-tabs .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--eoil-text-muted);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.eoil-tabs .nav-tabs .nav-link:hover {
  color: var(--eoil-text);
  border-bottom-color: #d1d5db;
  background: transparent;
}
.eoil-tabs .nav-tabs .nav-link.active {
  color: var(--eoil-accent);
  border-bottom-color: var(--eoil-accent);
  background: transparent;
  font-weight: 600;
}
.eoil-tabs .tab-content {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-top: none;
  border-radius: 0 0 var(--eoil-radius) var(--eoil-radius);
}

/* ---------- Alternatives product cards inside tabs ----------
   The alternatives grid reuses the full .eoil-product-card styling from
   the search results. Image-area anchor needs a tiny reset so the image
   thumbnail fills the padded image area without inheriting link styling. */
.eoil-tabs .eoil-product-card .card-img-top-wrap a {
  display: block;
  text-decoration: none;
}

/* ---------- Param table inside tabs ---------- */
.eoil-tabs .param-table {
  margin-bottom: 0;
}
.eoil-tabs .param-table th,
.eoil-tabs .param-table td {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  vertical-align: middle;
}
.eoil-tabs .param-table th {
  background-color: var(--eoil-bg-light);
  font-weight: 500;
  color: var(--eoil-text-muted);
  width: 35%;
  border-color: var(--eoil-border);
}
.eoil-tabs .param-table td {
  font-weight: 600;
  color: var(--eoil-text);
  border-color: var(--eoil-border);
}

/* ---------- Pagination ---------- */
.pagination .page-link,
.eoil-pagination .page-link {
  border: 1px solid var(--eoil-border);
  color: var(--eoil-text);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: var(--eoil-radius) !important;
  margin: 0 0.15rem;
  transition: all 0.15s;
}
.pagination .page-link:hover,
.eoil-pagination .page-link:hover {
  background-color: var(--eoil-bg-light);
  border-color: var(--eoil-accent);
  color: var(--eoil-accent);
}
.pagination .page-item.active .page-link,
.eoil-pagination .page-item.active .page-link {
  background-color: var(--eoil-accent);
  border-color: var(--eoil-accent);
  color: #fff;
}
.pagination .page-item.disabled .page-link,
.eoil-pagination .page-item.disabled .page-link {
  color: var(--eoil-text-muted);
  background: var(--eoil-bg-light);
}
/* Yii LinkPager renders disabled prev/next as <li class="disabled"><span> not <a class="page-link"> */
.pagination .disabled,
.pagination li.disabled {
  display: none;
}
.pagination {
  gap: 0.2rem;
}

/* ---------- Tables (Order History, Comparison) ---------- */
.eoil-table {
  font-size: 0.875rem;
}
.eoil-table thead th {
  background-color: var(--eoil-bg-light);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--eoil-text-muted);
  border-bottom: 2px solid var(--eoil-border);
  padding: 0.75rem;
}
.eoil-table td {
  padding: 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-table tbody tr:hover {
  background-color: rgba(33,150,243,0.03);
}
.eoil-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Status badges in tables */
.eoil-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.eoil-status-pending { background: rgba(245,158,11,0.1); color: #92400e; }
.eoil-status-processing { background: rgba(33,150,243,0.1); color: #1565c0; }
.eoil-status-shipped { background: rgba(99,102,241,0.1); color: #4338ca; }
.eoil-status-delivered { background: rgba(22,163,74,0.1); color: #15803d; }
.eoil-status-cancelled { background: rgba(220,38,38,0.1); color: #b91c1c; }

/* ---------- Rating Stars ---------- */
.eoil-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}
.eoil-rating .bi-star-fill { color: #f59e0b; }
.eoil-rating .bi-star-half { color: #f59e0b; }
.eoil-rating .bi-star { color: #d1d5db; }
.eoil-rating-count {
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  margin-left: 0.35rem;
}
/* Review card */
.eoil-review {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-review:last-child { border-bottom: none; }
.eoil-review .review-author {
  font-weight: 600;
  font-size: 0.9375rem;
}
.eoil-review .review-date {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}
.eoil-review .review-text {
  font-size: 0.875rem;
  color: var(--eoil-text);
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* ---------- Product Badges ---------- */
.eoil-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: var(--eoil-radius);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.eoil-badge-sale { background: var(--eoil-danger); color: #fff; }
.eoil-badge-new { background: var(--eoil-accent); color: #fff; }
.eoil-badge-bestseller { background: #f59e0b; color: #fff; }
.eoil-badge-outofstock { background: var(--eoil-bg-light); color: var(--eoil-text-muted); }
.eoil-badge-free-shipping { background: rgba(22,163,74,0.1); color: var(--eoil-success); }

/* ---------- Search Autocomplete ---------- */
.eoil-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-top: none;
  border-radius: 0 0 var(--eoil-radius-lg) var(--eoil-radius-lg);
  box-shadow: var(--eoil-shadow-lg);
  z-index: 1050;
  max-height: 400px;
  overflow-y: auto;
}
.eoil-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  color: var(--eoil-text);
}
.eoil-search-item:hover {
  background-color: var(--eoil-bg-light);
}
.eoil-search-item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--eoil-radius);
  background: var(--eoil-bg-light);
}
.eoil-search-item .search-item-title {
  font-size: 0.875rem;
  font-weight: 500;
}
.eoil-search-item .search-item-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--eoil-accent);
}
.eoil-search-category {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--eoil-text-muted);
  background: var(--eoil-bg-light);
  border-bottom: 1px solid var(--eoil-border);
}

/* ---------- Empty States ---------- */
.eoil-empty-state {
  text-align: center;
  padding: 4rem 2rem;
}
.eoil-empty-state .empty-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  background: var(--eoil-bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--eoil-text-muted);
}
.eoil-empty-state h3 {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.eoil-empty-state p {
  color: var(--eoil-text-muted);
  font-size: 0.9375rem;
  max-width: 400px;
  margin: 0 auto 1.5rem;
}

/* ---------- Loading / Skeleton ---------- */
.eoil-skeleton {
  background: linear-gradient(90deg, var(--eoil-bg-light) 25%, #e5e7eb 50%, var(--eoil-bg-light) 75%);
  background-size: 200% 100%;
  animation: eoilShimmer 1.5s infinite;
  border-radius: var(--eoil-radius);
}
.eoil-skeleton-text { height: 0.875rem; margin-bottom: 0.5rem; }
.eoil-skeleton-title { height: 1.25rem; width: 60%; margin-bottom: 0.75rem; }
.eoil-skeleton-image { height: 180px; }
.eoil-skeleton-button { height: 2.5rem; width: 100%; }
@keyframes eoilShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Spinner overlay */
.eoil-spinner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}
.eoil-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--eoil-border);
  border-top-color: var(--eoil-accent);
  border-radius: 50%;
  animation: eoilSpin 0.6s linear infinite;
}
@keyframes eoilSpin {
  to { transform: rotate(360deg); }
}

/* ---------- User Account ---------- */
.eoil-account-sidebar {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  overflow: hidden;
}
.eoil-account-sidebar .account-header {
  padding: 1.25rem;
  background: var(--eoil-primary);
  color: #fff;
  text-align: center;
}
.eoil-account-sidebar .account-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  font-size: 1.25rem;
}
.eoil-account-sidebar .account-name {
  font-weight: 600;
  font-size: 1rem;
}
.eoil-account-sidebar .account-email {
  font-size: 0.8125rem;
  opacity: 0.8;
}
.eoil-account-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.eoil-account-nav li {
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-account-nav li:last-child { border-bottom: none; }
.eoil-account-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  color: var(--eoil-text);
  font-size: 0.875rem;
  transition: background 0.1s;
  text-decoration: none;
}
.eoil-account-nav a:hover {
  background: var(--eoil-bg-light);
  color: var(--eoil-accent);
}
.eoil-account-nav a.active {
  background: rgba(33,150,243,0.06);
  color: var(--eoil-accent);
  font-weight: 600;
  border-left: 3px solid var(--eoil-accent);
}

/* ---------- Login / Register ---------- */
.eoil-auth-card {
  max-width: 440px;
  margin: 2rem auto;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 2rem;
}
.eoil-auth-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
}
.eoil-auth-card .auth-subtitle {
  text-align: center;
  color: var(--eoil-text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
}
.eoil-auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--eoil-text-muted);
  font-size: 0.8125rem;
}
.eoil-auth-divider::before,
.eoil-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--eoil-border);
}

/* ---------- Offcanvas / Mobile Menu ---------- */
.eoil-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--eoil-border);
  padding: 1rem 1.25rem;
}
.eoil-offcanvas .offcanvas-title {
  font-weight: 600;
  font-size: 1.125rem;
}
.eoil-offcanvas .offcanvas-body {
  padding: 1rem 1.25rem;
}

/* Mobile menu - full offcanvas */
.eoil-mobile-menu {
  width: min(340px, 88vw) !important;
  background: #fff;
}
.eoil-mobile-menu .offcanvas-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--eoil-border);
  background: #fff;
}
.eoil-mobile-menu .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--eoil-primary);
  margin: 0;
}
.eoil-mobile-menu-logo {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  background: var(--eoil-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
}
.eoil-mobile-menu .btn-close {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.eoil-mobile-menu .btn-close:hover { opacity: 1; }

.eoil-mobile-menu .offcanvas-body {
  padding: 1rem 0.5rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.eoil-mobile-menu-search {
  padding: 0 0.75rem 1rem;
}
.eoil-mobile-menu-search .position-relative {
  width: 100%;
}
.eoil-mobile-menu-search .form-control {
  padding-left: 2.5rem;
  padding-right: 0.85rem;
  border-radius: 50rem;
  border-color: var(--eoil-border);
  background-color: var(--eoil-bg-light);
  font-size: 0.9375rem;
  height: 2.5rem;
}
.eoil-mobile-menu-search .form-control:focus {
  border-color: var(--eoil-accent);
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,0.15);
  background-color: #fff;
}
.eoil-mobile-menu-search .search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eoil-text-muted);
  pointer-events: none;
  font-size: 0.95rem;
  z-index: 2;
}
/* Suggestions dropdown inside mobile menu: constrain height, flatter look */
.eoil-mobile-menu-search .search-suggestions {
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 0.75rem;
  box-shadow: var(--eoil-shadow-lg);
  z-index: 10;
}

/* Nav list */
.eoil-mobile-nav {
  list-style: none;
  padding: 0 0.25rem;
  margin: 0;
}
.eoil-mobile-nav li { margin: 0; }
.eoil-mobile-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem;
  color: var(--eoil-text);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.15s, color 0.15s;
}
.eoil-mobile-nav a .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: rgba(26, 54, 93, 0.06);
  color: var(--eoil-primary);
  font-size: 1rem;
  flex-shrink: 0;
  transition: background-color 0.15s, color 0.15s;
}
.eoil-mobile-nav a .label {
  flex: 1;
  line-height: 1.25;
}
.eoil-mobile-nav a .chev {
  color: var(--eoil-text-muted);
  font-size: 0.75rem;
  opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
}
.eoil-mobile-nav a:hover {
  background: var(--eoil-bg-light);
  color: var(--eoil-primary);
}
.eoil-mobile-nav a:hover .chev {
  opacity: 1;
  transform: translateX(2px);
}
.eoil-mobile-nav a:hover .icon {
  background: var(--eoil-primary);
  color: #fff;
}
.eoil-mobile-nav a.active {
  background: rgba(33, 150, 243, 0.08);
  color: var(--eoil-primary);
  font-weight: 600;
}
.eoil-mobile-nav a.active .icon {
  background: var(--eoil-accent);
  color: #fff;
}
.eoil-mobile-nav a.danger { color: var(--eoil-danger); }
.eoil-mobile-nav a.danger .icon {
  background: rgba(220, 38, 38, 0.08);
  color: var(--eoil-danger);
}
.eoil-mobile-nav a.danger:hover { background: rgba(220, 38, 38, 0.06); }
.eoil-mobile-nav a.danger:hover .icon {
  background: var(--eoil-danger);
  color: #fff;
}

.eoil-mobile-nav-secondary {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--eoil-border);
}

.eoil-mobile-menu-actions {
  padding: 1rem 0.75rem 0;
  margin-top: 0.75rem;
  border-top: 1px solid var(--eoil-border);
}

.eoil-mobile-menu-contact {
  margin-top: auto;
  padding: 1rem 0.75rem 0;
  border-top: 1px solid var(--eoil-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.eoil-mobile-menu-contact a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--eoil-text-muted);
  text-decoration: none;
  padding: 0.4rem 0;
  font-weight: 500;
  transition: color 0.15s;
}
.eoil-mobile-menu-contact a:hover { color: var(--eoil-primary); }
.eoil-mobile-menu-contact i {
  color: var(--eoil-accent);
  font-size: 0.95rem;
  width: 1rem;
  text-align: center;
}

/* ---------- Accordion (FAQ, Info) ---------- */
.eoil-accordion .accordion-button {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--eoil-text);
  background: #fff;
  box-shadow: none;
  padding: 1rem 1.25rem;
}
.eoil-accordion .accordion-button:not(.collapsed) {
  color: var(--eoil-accent);
  background-color: rgba(33,150,243,0.04);
}
.eoil-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}
.eoil-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232196F3' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.eoil-accordion .accordion-item {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius) !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.eoil-accordion .accordion-body {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--eoil-text-muted);
  line-height: 1.65;
}

/* ---------- Tooltips & Popovers ---------- */
.tooltip.eoil-tooltip .tooltip-inner {
  background-color: var(--eoil-primary);
  font-size: 0.8125rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--eoil-radius);
}
.popover.eoil-popover {
  border: 1px solid var(--eoil-border);
  box-shadow: var(--eoil-shadow-lg);
  border-radius: var(--eoil-radius);
}
.popover.eoil-popover .popover-header {
  background: var(--eoil-bg-light);
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--eoil-border);
}

/* ---------- Cookie Banner ---------- */
.eoil-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--eoil-border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  padding: 1rem 1.5rem;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.eoil-cookie-banner p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--eoil-text-muted);
}
.eoil-cookie-banner .cookie-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Back to Top ---------- */
.eoil-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--eoil-accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  box-shadow: var(--eoil-shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 1040;
}
.eoil-back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.eoil-back-to-top:hover {
  background: var(--eoil-accent-hover);
  transform: translateY(-2px);
}

/* ---------- Newsletter Signup ---------- */
.eoil-newsletter {
  background: var(--eoil-primary);
  color: #fff;
  padding: 2.5rem 0;
  text-align: center;
}
.eoil-newsletter h4 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.eoil-newsletter p {
  opacity: 0.8;
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}
.eoil-newsletter-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  gap: 0.5rem;
}
.eoil-newsletter-form .form-control {
  border: none;
  border-radius: var(--eoil-radius);
  padding: 0.7rem 1rem;
}
.eoil-newsletter-form .btn {
  white-space: nowrap;
  padding: 0.7rem 1.5rem;
  border-radius: var(--eoil-radius);
  font-weight: 600;
}

/* ---------- Wishlist / Compare ---------- */
.eoil-btn-wishlist {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--eoil-border);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eoil-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.eoil-btn-wishlist:hover {
  border-color: var(--eoil-danger);
  color: var(--eoil-danger);
}
.eoil-btn-wishlist.active {
  background: rgba(220,38,38,0.08);
  border-color: var(--eoil-danger);
  color: var(--eoil-danger);
}
.eoil-btn-compare {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--eoil-border);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eoil-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.eoil-btn-compare:hover {
  border-color: var(--eoil-accent);
  color: var(--eoil-accent);
}

/* ---------- Cards (Generic Info, Address, etc.) ---------- */
.eoil-card {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 1.5rem;
}
.eoil-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-card-header h5 {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}
/* Address card */
.eoil-address-card {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 1.25rem;
  position: relative;
  transition: border-color 0.15s;
}
.eoil-address-card:hover {
  border-color: var(--eoil-accent);
}
.eoil-address-card.default {
  border-color: var(--eoil-accent);
  background: rgba(33,150,243,0.02);
}
.eoil-address-card .address-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.eoil-address-card .address-text {
  font-size: 0.875rem;
  color: var(--eoil-text-muted);
  line-height: 1.6;
}
.eoil-address-card .address-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ---------- Dropdown Menus ---------- */
.eoil-dropdown .dropdown-menu {
  border: 1px solid var(--eoil-border);
  box-shadow: var(--eoil-shadow-lg);
  border-radius: var(--eoil-radius);
  padding: 0.35rem;
}
.eoil-dropdown .dropdown-item {
  border-radius: var(--eoil-radius);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.eoil-dropdown .dropdown-item:hover {
  background: var(--eoil-bg-light);
  color: var(--eoil-accent);
}
.eoil-dropdown .dropdown-divider {
  border-color: var(--eoil-border);
}

/* ---------- Progress Bar (Checkout, Loading) ---------- */
.eoil-progress {
  height: 0.375rem;
  background: var(--eoil-bg-light);
  border-radius: 50rem;
  overflow: hidden;
}
.eoil-progress .progress-bar {
  background: var(--eoil-accent);
  transition: width 0.4s ease;
}

/* ---------- List Groups ---------- */
.eoil-list-group .list-group-item {
  border-color: var(--eoil-border);
  padding: 0.85rem 1.25rem;
  font-size: 0.875rem;
}
.eoil-list-group .list-group-item.active {
  background-color: var(--eoil-accent);
  border-color: var(--eoil-accent);
}

/* ---------- Price Display Variants ---------- */
.eoil-price-tag { font-weight: 700; color: var(--eoil-text); }
.eoil-price-tag.sale { color: var(--eoil-danger); }
.eoil-price-original {
  text-decoration: line-through;
  color: var(--eoil-text-muted);
  font-weight: 400;
}
.eoil-price-per-unit {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}
.eoil-price-vat {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}

/* ---------- Comparison Table ---------- */
.eoil-comparison-table th {
  background: var(--eoil-bg-light);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  padding: 0.5rem 0.75rem;
  width: 25%;
}
.eoil-comparison-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--eoil-border);
}
.eoil-comparison-table .compare-product-cell {
  text-align: center;
  padding: 1rem;
}
.eoil-comparison-table .compare-product-cell img {
  max-height: 100px;
  margin-bottom: 0.75rem;
}

/* ---------- Image Gallery (Product Detail) ---------- */
.eoil-gallery-main {
  background: var(--eoil-bg-light);
  border-radius: var(--eoil-radius-lg);
  padding: 1.5rem;
  text-align: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.eoil-gallery-main img {
  max-height: 350px;
  max-width: 100%;
  object-fit: contain;
}
.eoil-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.eoil-gallery-thumb {
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 0.25rem;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eoil-gallery-thumb:hover,
.eoil-gallery-thumb.active {
  border-color: var(--eoil-accent);
}
.eoil-gallery-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Lightbox overlay */
.eoil-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eoil-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
.eoil-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Button Variants (Complete Set) ---------- */
.btn-eoil-danger {
  background-color: var(--eoil-danger);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: var(--eoil-radius);
}
.btn-eoil-danger:hover { background-color: #b91c1c; color: #fff; }
.btn-eoil-success {
  background-color: var(--eoil-success);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: var(--eoil-radius);
}
.btn-eoil-success:hover { background-color: #15803d; color: #fff; }
.btn-eoil-warning {
  background-color: #f59e0b;
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: var(--eoil-radius);
}
.btn-eoil-warning:hover { background-color: #d97706; color: #fff; }
.btn-eoil-ghost {
  background: transparent;
  color: var(--eoil-text-muted);
  border: none;
  font-weight: 500;
  border-radius: var(--eoil-radius);
}
.btn-eoil-ghost:hover { background: var(--eoil-bg-light); color: var(--eoil-text); }
.btn-eoil-sm {
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
}
.btn-eoil-lg {
  padding: 0.85rem 2rem;
  font-size: 1rem;
}
.btn-eoil-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--eoil-radius);
}

/* ---------- Spacing & Layout Utilities ---------- */
.eoil-section { padding: 3rem 0; }
.eoil-section-sm { padding: 2rem 0; }
.eoil-divider {
  border: none;
  border-top: 1px solid var(--eoil-border);
  margin: 1.5rem 0;
}
.eoil-card-grid { display: grid; gap: 1.5rem; }
.eoil-card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.eoil-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.eoil-card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Print Styles ---------- */
@media print {
  .eoil-topbar, .eoil-header, .eoil-footer,
  .eoil-cookie-banner, .eoil-back-to-top,
  .eoil-toast-container, .btn-add-cart,
  .eoil-filter-sidebar { display: none !important; }
  body { background: #fff; }
  .eoil-product-card { break-inside: avoid; }
}

/* ---------- Additional Responsive ---------- */
@media (max-width: 991.98px) {
  .eoil-card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .eoil-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .eoil-cookie-banner { flex-direction: column; text-align: center; }
  .eoil-newsletter-form { flex-direction: column; }
}
@media (max-width: 767.98px) {
  .eoil-card-grid-2,
  .eoil-card-grid-3,
  .eoil-card-grid-4 { grid-template-columns: 1fr; }
  .eoil-auth-card { margin: 1rem; padding: 1.5rem; }
  .eoil-toast-container { left: 0.5rem; right: 0.5rem; }
  .eoil-toast { min-width: auto; }
}

/* ============================================
   Legacy Page Overrides — homepage, content pages
   ============================================ */

/* ---------- Homepage: Lead + USP Band ---------- */
.home-lead {
  font-size: 1.05rem;
  color: var(--eoil-text-muted);
  max-width: 780px;
  margin: 1.5rem auto 0.5rem;
  line-height: 1.75;
  text-align: center;
}

.usp-band {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 1.75rem 1rem;
  margin-bottom: 2rem;
  box-shadow: var(--eoil-shadow);
}

.usp-item {
  padding: 0.75rem 1rem;
}

.usp-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--eoil-accent);
  line-height: 1;
  margin-bottom: 0.4rem;
  font-family: 'Inter', monospace;
}

.usp-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--eoil-text);
  margin-bottom: 0.2rem;
}

.usp-sub {
  font-size: 0.85rem;
  color: var(--eoil-text-muted);
}

/* ---------- Homepage: Search Card ---------- */
.search-card {
  background: var(--eoil-primary);
  border-radius: var(--eoil-radius);
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
}

.search-title {
  color: #fff !important;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.search-card .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 44px;
  font-size: 0.95rem;
}

.search-card .btn {
  height: 44px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ---------- Homepage: Old Product Grid ---------- */
.shop-item-list {
  display: flex !important;
  flex-wrap: wrap;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 -0.4rem 1.5rem !important;
}

.shop-item-li {
  padding: 0.4rem !important;
  /* column widths handled by Bootstrap col-lg-2 */
}

.shop-item {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.shop-item:hover {
  box-shadow: var(--eoil-shadow-md);
  border-color: var(--eoil-accent);
}

/* Image area */
.shop-item .thumbnail {
  background: var(--eoil-bg-light);
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: center;
}

.shop-item .thumbnail a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 0.5rem;
  color: var(--eoil-text-muted) !important;
  text-decoration: none !important;
  font-size: 0.7rem;
  overflow: hidden;
}

/* Broken-image fallback: hide alt text overflow, show grey placeholder */
.shop-item .thumbnail a img {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
}
.shop-item .thumbnail a img[alt]::after {
  content: '';
  display: block;
}

/* Text summary */
.shop-item-summary {
  padding: 0.65rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.shop-item-summary h2 {
  font-size: 0.8rem !important;
  line-height: 1.4;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: var(--eoil-text);
}

.shop-item-summary h2 a {
  color: var(--eoil-text) !important;
  text-decoration: none !important;
}

.shop-item-summary h2 a:hover {
  color: var(--eoil-accent) !important;
}

.shop-item-summary .packages {
  font-size: 0.75rem;
  margin-bottom: 0.3rem;
}
.shop-item-summary .packages a {
  color: var(--eoil-accent) !important;
  text-decoration: none;
  font-weight: 500;
}
.shop-item-summary .packages a:hover {
  text-decoration: underline;
}

.shop-item-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--eoil-text);
  margin-top: auto;
  padding-top: 0.4rem;
  line-height: 1.5;
}

.shop-item-price .small {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}

/* Button area */
.shop-item-buttons {
  padding: 0.5rem 0.65rem 0.7rem;
}

.shop-item-buttons .btn {
  width: 100%;
  font-size: 0.78rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--eoil-radius);
  font-weight: 600;
}
.shop-item-buttons .btn-primary {
  background: var(--eoil-accent) !important;
  border-color: var(--eoil-accent) !important;
  color: #fff !important;
}
.shop-item-buttons .btn-primary:hover {
  background: var(--eoil-accent-hover) !important;
  border-color: var(--eoil-accent-hover) !important;
}
.shop-item-buttons .btn-default,
.shop-item-buttons .cartDisabled {
  background: var(--eoil-bg-light) !important;
  border-color: var(--eoil-border) !important;
  color: var(--eoil-text-muted) !important;
  cursor: not-allowed;
}
/* Promotion ribbon */
.shop-item .promotion-ribbon .badge {
  font-size: 0.75rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 0.25rem;
}

/* ---------- Content Pages: Heading & Prose ---------- */
/* h1 on standalone content pages (kontakt, spolupráca, etc.) */
main > .container > div > h1,
main > .container > div > .content-wrapper > h1 {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--eoil-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--eoil-border);
}

/* Section h2 in content pages */
main > .container > div > div > h2,
main > .container > div > h2:not(.search-title) {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--eoil-primary);
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}

/* Prose paragraph spacing */
main > .container > div p {
  line-height: 1.75;
  color: var(--eoil-text);
}

/* ---------- Content Tables (Kontakt / Hodiny) ---------- */
main table:not(.param-table) {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}

main table:not(.param-table) td,
main table:not(.param-table) th {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--eoil-border);
  vertical-align: top;
}

main table:not(.param-table) tr:nth-child(even) td {
  background-color: var(--eoil-bg-light);
}

main table:not(.param-table) td strong {
  color: var(--eoil-text);
}

/* Map iframes */
main iframe {
  width: 100%;
  min-height: 350px;
  border: 0;
  border-radius: var(--eoil-radius);
  margin-bottom: 1rem;
}

/* ---------- Spolupraca CTA Link ---------- */
main a.btn.btn-primary[href*="kontakt"] {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.65rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--eoil-accent);
  border-color: var(--eoil-accent);
  border-radius: var(--eoil-radius);
}

main a.btn.btn-primary[href*="kontakt"]:hover {
  background-color: var(--eoil-accent-hover);
  border-color: var(--eoil-accent-hover);
}

/* ---------- Mazací plán (car/index) ---------- */
/* Brand links list styled as a neat link list */
.tab-content .tab-pane p a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  margin-bottom: 0.4rem;
  background: var(--eoil-bg-light);
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  color: var(--eoil-text);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tab-content .tab-pane p a:hover {
  background: var(--eoil-primary);
  border-color: var(--eoil-primary);
  color: #fff;
}

/* Collapse excess <br> spacing inside brand links list */
.tab-content .tab-pane p br {
  display: none;
}

.tab-content .tab-pane p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Car type selector list */
.car-group .list-group-item a {
  color: var(--eoil-text);
  font-weight: 500;
  text-decoration: none;
}

.car-group .list-group-item.active a {
  color: #fff;
}

/* Car fabrics list */
#fabrics-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

#fabrics-list li a {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: var(--eoil-bg-light);
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  color: var(--eoil-text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#fabrics-list li a:hover {
  background: var(--eoil-primary);
  border-color: var(--eoil-primary);
  color: #fff;
}

/* ---------- Search Autosuggest Dropdown ---------- */
.search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  box-shadow: var(--eoil-shadow-md);
  list-style: none;
  padding: 0.25rem 0;
  margin: 0;
  z-index: 1050;
  max-height: 420px;
  overflow-y: auto;
}

.search-suggestions li a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.85rem;
  color: var(--eoil-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.12s;
}

.search-suggestions li a:hover {
  background: var(--eoil-bg-light);
  color: var(--eoil-text);
  text-decoration: none;
}

.search-suggestions li img,
.search-suggestions li .sug-no-photo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--eoil-bg-light);
  border-radius: 4px;
}

.sug-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sug-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sug-producer {
  color: var(--eoil-text-muted);
  font-size: 0.78rem;
}

.sug-price {
  font-weight: 700;
  color: var(--eoil-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Checkout Step Indicator ---------- */
.eoil-checkout-steps { gap: 0; }
.eoil-step { display: flex; flex-direction: column; align-items: center; }
.step-circle {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .875rem;
  background: var(--eoil-bg-light);
  border: 2px solid var(--eoil-border);
  color: var(--eoil-text-muted);
}
.eoil-step.active .step-circle { background: var(--eoil-primary); border-color: var(--eoil-primary); color: #fff; }
.eoil-step.done .step-circle   { background: #28a745; border-color: #28a745; color: #fff; }
.step-label { font-size: .75rem; margin-top: .35rem; color: var(--eoil-text-muted); }
.eoil-step.active .step-label  { color: var(--eoil-primary); font-weight: 600; }
.step-connector {
  flex: 1; height: 2px; background: var(--eoil-border);
  margin-top: 1rem; min-width: 2rem; max-width: 4rem;
  align-self: flex-start;
}

/* ---------- Delivery/Payment Radio Cards ---------- */
.eoil-radio-card {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  align-items: center;
}
.eoil-radio-card:has(input:checked) {
  border-color: var(--eoil-primary);
  background: rgba(0, 82, 165, .04);
}
.eoil-radio-card input { cursor: pointer; }

/* ============================================
   Homepage: Hero Banner (Lovable-inspired)
   ============================================ */
.eoil-homepage-hero {
  position: relative;
  background: linear-gradient(135deg, #0f2440 0%, #1a365d 40%, #2a4a7f 100%);
  border-radius: var(--eoil-radius-lg);
  padding: 4rem 2rem 3.5rem;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.eoil-homepage-hero.has-photo-bg {
  background-image:
    radial-gradient(ellipse 65% 70% at 50% 50%, rgba(15,36,64,0.78) 0%, rgba(15,36,64,0.55) 60%, rgba(15,36,64,0.35) 100%),
    linear-gradient(135deg, rgba(15,36,64,0.82) 0%, rgba(26,54,93,0.68) 45%, rgba(42,74,127,0.62) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.eoil-homepage-hero.has-photo-bg h1,
.eoil-homepage-hero.has-photo-bg .hero-sub {
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.eoil-homepage-hero.has-photo-bg .hero-sub {
  opacity: 1;
  color: rgba(255,255,255,0.95);
}
.eoil-homepage-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(33,150,243,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(33,150,243,0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.eoil-homepage-hero .hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.eoil-homepage-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.eoil-homepage-hero .hero-sub {
  font-size: 1.05rem;
  opacity: 0.85;
  margin-bottom: 0;
  line-height: 1.5;
}

/* Hero search bar */
.hero-search-wrap {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero-search-form .input-group {
  background: #fff;
  border-radius: 50rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.hero-search-form .hero-search-icon {
  background: #fff;
  border: none;
  color: var(--eoil-text-muted);
  padding-left: 1.25rem;
  font-size: 1.1rem;
}
.hero-search-form .form-control {
  border: none;
  padding: 0.85rem 0.75rem;
  font-size: 0.95rem;
  box-shadow: none !important;
}
.hero-search-form .form-control:focus {
  box-shadow: none !important;
}
.hero-search-form .btn-accent {
  background: var(--eoil-accent);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: 0 50rem 50rem 0 !important;
  white-space: nowrap;
  transition: background 0.2s;
}
.hero-search-form .btn-accent:hover {
  background: var(--eoil-accent-hover);
  color: #fff;
}

/* Hero quick-search tags */
.hero-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hero-tags-label {
  font-size: 0.85rem;
  color: #fff;
  opacity: 0.9;
}
.hero-tag {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.hero-tag:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

@media (max-width: 575.98px) {
  .eoil-homepage-hero { padding: 2.5rem 1.25rem 2rem; }
  .eoil-homepage-hero h1 { font-size: 1.75rem; }
  .hero-search-form .btn-accent { padding: 0.75rem 1rem; font-size: 0.85rem; }
}

/* ============================================
   Homepage: Real Business Photo Strip
   ============================================ */
.eoil-real-business .rb-card {
  position: relative;
  border-radius: var(--eoil-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 2px 12px rgba(15,36,64,0.08);
  isolation: isolate;
}
.eoil-real-business .rb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.eoil-real-business .rb-card:hover .rb-img {
  transform: scale(1.05);
}
.eoil-real-business .rb-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(15,36,64,0.92) 0%, rgba(15,36,64,0.55) 60%, rgba(15,36,64,0) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}
.eoil-real-business .rb-overlay i {
  font-size: 1.1rem;
  color: var(--eoil-accent, #2196f3);
}
@media (max-width: 767.98px) {
  .eoil-real-business .rb-card { aspect-ratio: 16 / 9; }
}

/* ============================================
   Wholesale (B2B) Page
   ============================================ */
.eoil-wholesale-hero {
  padding: 3.5rem 2rem 3rem;
}
.eoil-wholesale-hero .wh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(33,150,243,0.18);
  border: 1px solid rgba(33,150,243,0.45);
  border-radius: 50rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.eoil-wholesale-hero .wh-eyebrow i { font-size: 0.95rem; }
@media (max-width: 575.98px) {
  .eoil-wholesale-hero { padding: 2.5rem 1.25rem 2rem; }
}

/* Benefits grid */
.eoil-wholesale-benefits .wh-benefit {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 1.5rem 1.25rem;
  height: 100%;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.eoil-wholesale-benefits .wh-benefit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,36,64,0.08);
  border-color: rgba(33,150,243,0.4);
}
.eoil-wholesale-benefits .wh-benefit-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(33,150,243,0.12) 0%, rgba(33,150,243,0.04) 100%);
  border-radius: 50%;
  color: var(--eoil-accent);
  font-size: 1.4rem;
}
.eoil-wholesale-benefits .wh-benefit h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--eoil-text);
}
.eoil-wholesale-benefits .wh-benefit p {
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Intro column */
.eoil-wholesale-main .wh-intro {
  padding: 0.5rem 0.25rem 0;
}
.eoil-wholesale-main .wh-h2 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--eoil-text);
  margin-bottom: 0.85rem;
}
.eoil-wholesale-main .wh-lead {
  color: var(--eoil-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.eoil-wholesale-main .wh-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.eoil-wholesale-main .wh-checklist li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  color: var(--eoil-text);
  font-weight: 500;
}
.eoil-wholesale-main .wh-checklist i {
  color: var(--eoil-accent);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.eoil-wholesale-main .wh-direct-contact {
  background: linear-gradient(135deg, rgba(15,36,64,0.04) 0%, rgba(33,150,243,0.06) 100%);
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.eoil-wholesale-main .wh-direct-contact strong {
  display: block;
  width: 100%;
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  font-weight: 600;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.eoil-wholesale-main .wh-direct-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--eoil-text);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.eoil-wholesale-main .wh-direct-contact a:hover {
  color: var(--eoil-accent);
}
.eoil-wholesale-main .wh-direct-contact a i {
  color: var(--eoil-accent);
}

/* Form card */
.wh-form-card {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(15,36,64,0.06);
}
.wh-form-head h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--eoil-text);
  margin-bottom: 0.4rem;
}
.wh-form-head p {
  color: var(--eoil-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.wh-field { margin-bottom: 1.1rem; }
.wh-field label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--eoil-text);
  margin-bottom: 0.4rem;
}
.wh-field label i {
  color: var(--eoil-accent);
  font-size: 0.95rem;
}
.wh-field label .req { color: #dc3545; margin-left: 0.15rem; }
.wh-field .form-control {
  border: 1px solid var(--eoil-border);
  border-radius: 0.6rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
  background: #fafbfc;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.wh-field .form-control:focus {
  border-color: var(--eoil-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.15);
  outline: none;
}
.wh-field textarea.form-control { resize: vertical; min-height: 100px; }
.wh-field.has-error .form-control {
  border-color: #dc3545;
  background: #fff5f6;
}
.wh-field.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}
.wh-help-error {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #dc3545;
  font-size: 0.8125rem;
  margin-top: 0.35rem;
  font-weight: 500;
}
.wh-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--eoil-border);
}
.wh-privacy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--eoil-text-muted);
  font-size: 0.78rem;
}
.wh-privacy i { color: var(--eoil-accent); }
.btn.wh-submit-btn,
.wh-submit-btn {
  --bs-btn-bg: var(--eoil-accent);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--eoil-accent);
  --bs-btn-hover-bg: var(--eoil-accent-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--eoil-accent-hover);
  --bs-btn-active-bg: var(--eoil-accent-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--eoil-accent-hover);
  background-color: var(--eoil-accent);
  color: #fff;
  border: 1px solid var(--eoil-accent);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 50rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(33,150,243,0.25);
}
.btn.wh-submit-btn:hover,
.wh-submit-btn:hover {
  background-color: var(--eoil-accent-hover);
  border-color: var(--eoil-accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(33,150,243,0.32);
}
.btn.wh-submit-btn:active,
.wh-submit-btn:active { transform: translateY(0); }
@media (max-width: 575.98px) {
  .wh-form-card { padding: 1.5rem 1.25rem; }
  .wh-form-footer { flex-direction: column; align-items: stretch; }
  .wh-submit-btn { justify-content: center; width: 100%; }
}

/* ============================================
   Homepage: Trust / Features Band
   ============================================ */
.eoil-trust-band {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 2rem 1.5rem;
}
.trust-item { padding: 0.5rem; }
.trust-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33,150,243,0.08);
  border-radius: 50%;
  color: var(--eoil-accent);
  font-size: 1.5rem;
}
.trust-item h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--eoil-text);
}
.trust-item p {
  font-size: 0.8125rem;
  color: var(--eoil-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ============================================
   Homepage: CTA Row
   ============================================ */
.cta-card {
  display: block;
  padding: 1.5rem;
  border-radius: var(--eoil-radius-lg);
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--eoil-shadow-lg);
  color: #fff;
}
.cta-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cta-card-inner > i:first-child {
  font-size: 2rem;
  opacity: 0.9;
}
.cta-card-inner h4 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.cta-card .cta-card-inner p {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.85;
  color: #fff;
}
.cta-card .cta-card-inner h4 {
  color: #fff;
}
.cta-arrow {
  margin-left: auto;
  font-size: 1.25rem;
  opacity: 0.7;
  transition: transform 0.2s;
}
.cta-card:hover .cta-arrow {
  transform: translateX(3px);
  opacity: 1;
}
.cta-products {
  background: linear-gradient(135deg, var(--eoil-accent) 0%, var(--eoil-accent-hover) 100%);
}
.cta-b2b {
  background: linear-gradient(135deg, var(--eoil-primary) 0%, var(--eoil-primary-light) 100%);
}

/* Section headings */
.section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--eoil-text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  position: relative;
}
.section-heading.text-center::after {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--eoil-accent);
  border-radius: 2px;
  margin: 0.6rem auto 0;
}

/* ============================================
   Homepage: Services / Features Grid
   ============================================ */
.eoil-services-section .service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 0.75rem;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  text-decoration: none;
  color: var(--eoil-text);
  transition: box-shadow 0.2s, border-color 0.2s;
  height: 100%;
}
.eoil-services-section .service-card:hover {
  box-shadow: var(--eoil-shadow-md);
  border-color: var(--eoil-accent);
}
.eoil-services-section .service-card i {
  font-size: 2rem;
  color: var(--eoil-primary);
  margin-bottom: 0.75rem;
}
.eoil-services-section .service-card:hover i {
  color: var(--eoil-accent);
}
.eoil-services-section .service-card h5 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  line-height: 1.3;
  color: var(--eoil-text);
}
.eoil-services-section .service-card small {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}

/* ============================================
   Homepage: Brand Logos Grid
   ============================================ */
.eoil-brands-section {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius-lg);
  padding: 2rem 1.5rem;
}
.brand-logo-item {
  padding: 0.65rem;
}
.brand-logo-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s;
  filter: grayscale(40%);
}
.brand-logo-item a:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}
.brand-logo-img {
  max-height: 55px;
  max-width: 100px;
  object-fit: contain;
}

/* ============================================
   Footer
   ============================================ */
.eoil-footer {
  background: var(--eoil-primary);
  color: #d1d5db;
}
.eoil-footer a {
  color: #d1d5db;
  text-decoration: none;
}
.eoil-footer a:hover {
  color: #fff;
}
.footer-contact .fs-4 {
  color: #fff;
}
.footer-heading {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.footer-links li {
  margin-bottom: 0.35rem;
}
.footer-links a {
  font-size: 0.875rem;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  font-size: 0.9rem;
}
.footer-social:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}
.footer-bottom {
  background: var(--eoil-primary-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ============================================
   Star Rating (Review Modal)
   ============================================ */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.15rem;
}
.star-rating input { display: none; }
.star-rating label {
  cursor: pointer;
  font-size: 1.5rem;
  color: #d1d5db;
  transition: color 0.15s;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #f59e0b;
}

/* ============================================
   Content Pages: Page Header & Breadcrumb
   ============================================ */
.breadcrumb {
  background: transparent;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--eoil-accent);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================================
   Content Pages: Heading Styles
   ============================================ */
.heading-title {
  margin-bottom: 1.5rem;
}
.heading-title h1,
.heading-border-bottom h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--eoil-primary);
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--eoil-accent);
  display: inline-block;
}

/* Content page H2 section headings */
.col-md-11 > h2,
.col-md-11 > .margin-bottom-30 > h2,
.col-md-11 > div > h2,
.tab-content h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--eoil-primary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--eoil-border);
  position: relative;
}
.col-md-11 > h3,
.col-md-11 > .margin-bottom-30 > h3,
.tab-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--eoil-text);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Content page body text */
.col-md-11 > p,
.col-md-11 > .margin-bottom-30 > p {
  line-height: 1.7;
  color: var(--eoil-text);
  font-size: 0.95rem;
}

/* Margin-bottom sections (spolupráca etc.) */
.margin-bottom-30 {
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  transition: box-shadow 0.2s;
}
.margin-bottom-30:hover {
  box-shadow: var(--eoil-shadow-sm);
}
.margin-bottom-30 > h2 {
  margin-top: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0.25rem !important;
}

/* ============================================
   Content Pages: Legal / Info Pages Wrapper
   ============================================ */
.col-md-11 {
  background: #fff;
  border-radius: var(--eoil-radius-lg);
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
}

/* ============================================
   Mazací Plán Page: Brand Selector
   ============================================ */
/* Style the nav tabs */
.nav-tabs.nav-justified {
  border-bottom: 2px solid var(--eoil-border);
  margin-bottom: 1.5rem;
}
.nav-tabs .nav-link {
  font-weight: 600;
  color: var(--eoil-text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  transition: color 0.2s, border-color 0.2s;
}
.nav-tabs .nav-link:hover {
  color: var(--eoil-primary);
  border-color: var(--eoil-border);
}
.nav-tabs .nav-link.active {
  color: var(--eoil-primary);
  border-bottom: 3px solid var(--eoil-accent);
  background: transparent;
  font-weight: 700;
}

/* Brand plan links as styled cards */
#ostatne a[target="_blank"],
#ostatne a[title^="Mazací plán"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  margin: 0.35rem 0.25rem;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  color: var(--eoil-text);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s;
}
#ostatne a[target="_blank"]:hover,
#ostatne a[title^="Mazací plán"]:hover {
  border-color: var(--eoil-accent);
  color: var(--eoil-accent);
  box-shadow: var(--eoil-shadow-sm);
  transform: translateY(-1px);
}
#ostatne a[target="_blank"]::before {
  content: '\F3BE';
  font-family: 'bootstrap-icons';
  font-size: 1rem;
  color: var(--eoil-accent);
}
/* Remove the <br> spacing since we use margin now */
#ostatne br {
  display: none;
}
#ostatne p {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* Car group / category list for eoil.sk mazací plán tab */
.car-group .list-group-item {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius) !important;
  margin-bottom: 0.5rem;
  padding: 0.6rem 1rem;
  transition: all 0.2s;
}
.car-group .list-group-item:hover {
  border-color: var(--eoil-accent);
  background: var(--eoil-bg-light);
}
.car-group .list-group-item a {
  color: var(--eoil-text);
  text-decoration: none;
  font-weight: 500;
}
.car-group .list-group-item:hover a {
  color: var(--eoil-accent);
}

/* ============================================
   Content Pages: Contact Tables
   ============================================ */
table.contact,
.col-md-11 table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
table.contact td,
table.contact th,
.col-md-11 table td,
.col-md-11 table th {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--eoil-border);
  font-size: 0.9rem;
}
table.contact tr:last-child td,
.col-md-11 table tr:last-child td {
  border-bottom: none;
}
table.contact tr:nth-child(even),
.col-md-11 table tbody tr:nth-child(even) {
  background: var(--eoil-bg-light);
}

/* ============================================
   Content Pages: Whiteboxarticle (mazací plán)
   ============================================ */
.whiteboxarticle {
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ============================================
   Content Pages: CTA Button Fix
   ============================================ */
.col-md-11 .btn-primary,
.col-sm-11 .btn-primary {
  background: var(--eoil-accent);
  border-color: var(--eoil-accent);
  color: #fff;
  padding: 0.6rem 2rem;
  font-weight: 600;
  border-radius: var(--eoil-radius);
  transition: background 0.2s, transform 0.2s;
}
.col-md-11 .btn-primary:hover,
.col-sm-11 .btn-primary:hover {
  background: var(--eoil-accent-hover);
  border-color: var(--eoil-accent-hover);
  transform: translateY(-1px);
}

/* ============================================
   Opening Hours: Style Fixes
   ============================================ */
#otvaracky-vianoce {
  background: var(--eoil-bg-light);
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* ========================================================================
   PHASE 3: New Facet Filter Components (generic, no property-specific styles)
   ======================================================================== */

/* --- Searchable checkbox filter --- */
.facet-searchable .facet-search-input {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
}
.facet-searchable .facet-search-input:focus {
  border-color: var(--eoil-accent);
  box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}
.facet-scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--eoil-border) transparent;
}
.facet-scrollable::-webkit-scrollbar { width: 4px; }
.facet-scrollable::-webkit-scrollbar-thumb { background: var(--eoil-border); border-radius: 2px; }

/* --- Group headers within facet lists --- */
.facet-group-header {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eoil-text-muted);
  padding: 0.5rem 0 0.15rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--eoil-border);
}
.facet-group-header:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* --- Grouped accordion (viscosity) --- */
.facet-accordion .facet-accordion-search {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
}
.facet-accordion .facet-accordion-search:focus {
  border-color: var(--eoil-accent);
  box-shadow: 0 0 0 2px rgba(33,150,243,0.15);
}
.facet-accordion .facet-group {
  border-top: 1px solid var(--eoil-border);
}
.facet-accordion .facet-group:first-of-type {
  border-top: none;
}
.facet-accordion .facet-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.5rem 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--eoil-text);
  cursor: pointer;
  text-align: left;
}
.facet-accordion .facet-group-toggle:hover {
  background: rgba(0,0,0,0.02);
}
.facet-accordion .facet-group-name {
  flex: 0 0 auto;
}
.facet-accordion .facet-group-count {
  margin-left: 0.4rem;
  font-weight: 400;
}
.facet-accordion .facet-group-chevron {
  font-size: 0.75rem;
  color: var(--eoil-text-muted);
}
.facet-accordion .facet-group-body {
  padding: 0.15rem 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* --- Facet items --- */
.facet-item { font-size: 0.8125rem; }
.facet-item.facet-zero { opacity: 0.45; }
.facet-item.facet-zero label { cursor: default; }
.facet-count { font-variant-numeric: tabular-nums; }
.facet-show-more { font-size: 0.8125rem; color: var(--eoil-accent); }
.facet-show-more:hover { color: var(--eoil-accent-hover); text-decoration: none; }

/* --- Autocomplete tags --- */
.facet-autocomplete .autocomplete-input {
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  font-size: 0.8125rem;
}
.facet-autocomplete .autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--eoil-border);
  border-radius: var(--eoil-radius);
  box-shadow: var(--eoil-shadow-md);
  z-index: 1050;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 2px;
}
.autocomplete-group-header {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eoil-text-muted);
  padding: 0.5rem 0.75rem 0.25rem;
  background: var(--eoil-bg-light);
}
.autocomplete-option {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.1s;
}
.autocomplete-option:hover {
  background: var(--eoil-bg-light);
}
.autocomplete-option.selected {
  background: rgba(33,150,243,0.06);
  color: var(--eoil-accent);
}
.autocomplete-option.d-none { display: none !important; }

/* Selected tags */
.selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.selected-tags .badge,
.autocomplete-tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.autocomplete-tag .tag-remove { font-size: 0.875rem; }
.autocomplete-tag .tag-remove:hover { color: #fff; opacity: 0.7; }

/* Popular chips */
.autocomplete-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.popular-chip {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 50rem;
}

/* --- Chip group (volume/pack pills) --- */
.facet-chip-group .facet-chip {
  border: 1px solid var(--eoil-border);
  border-radius: 50rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  background: #fff;
  color: var(--eoil-text);
  cursor: pointer;
  transition: all 0.15s;
}
.facet-chip-group .facet-chip:hover {
  border-color: var(--eoil-accent);
  color: var(--eoil-accent);
}
.facet-chip-group .facet-chip.active {
  background: var(--eoil-primary);
  color: #fff;
  border-color: var(--eoil-primary);
}
.facet-chip-group .facet-chip .facet-count {
  font-size: 0.6875rem;
  margin-left: 0.15rem;
}
.facet-chip-group .facet-chip.active .facet-count {
  color: rgba(255,255,255,0.7);
}
.facet-chip-group .facet-chip.facet-zero {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.autocomplete-option.facet-zero {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.cat-item.facet-zero { opacity: 0.45; }
.cat-item.facet-zero .cat-count { color: var(--eoil-text-muted, #999); }

/* --- Category tree --- */
.eoil-category-tree .cat-group-header {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--eoil-text-muted);
  margin: 0.75rem 0 0.35rem;
}
.eoil-category-tree .cat-group-header:first-child {
  margin-top: 0;
}
.eoil-category-tree .cat-toggle-spacer {
  width: 1.25rem;
  display: inline-block;
  flex-shrink: 0;
}
.eoil-category-tree .cat-name {
  color: var(--eoil-text);
  text-decoration: none;
  transition: color 0.15s;
}
.eoil-category-tree .cat-name:hover {
  color: var(--eoil-accent);
}
.eoil-category-tree .cat-item.active .cat-name {
  color: var(--eoil-accent);
  font-weight: 600;
}
.eoil-category-tree .cat-children {
  padding-left: 1.25rem;
}
.eoil-category-tree .cat-children .cat-item {
  font-size: 0.8125rem;
  padding: 0.2rem 0.5rem;
}

/* --- Dual range handle overrides --- */
.dual-range {
  position: relative;
  height: 2rem;
  margin-top: 0.5rem;
}
.dual-range .range-track {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--eoil-border);
  border-radius: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.dual-range .range-fill {
  position: absolute;
  height: 100%;
  background: var(--eoil-accent);
  border-radius: 2px;
}
.dual-range .range-handle {
  position: absolute;
  width: 100%;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  height: 0;
}
.dual-range .range-handle::-webkit-slider-thumb {
  pointer-events: all;
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--eoil-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  margin-top: 0;
}
.dual-range .range-handle::-moz-range-thumb {
  pointer-events: all;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--eoil-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* --- Badge: out of stock --- */
.badge-stock.out-stock {
  color: var(--eoil-text-muted);
}
.badge-stock.soon {
  color: #e67e22;
}

/* --- Product detail: thumbnail strip --- */
.product-thumb {
  width: 60px;
  height: 60px;
  padding: 2px;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .15s ease;
}
.product-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.product-thumb:hover,
.product-thumb.active {
  border-color: var(--bs-primary, #0d6efd);
}