/*!
 * Voltix theme for OpenCart 4.1
 * Layered on Bootstrap 5.3. Brand colours come from the theme settings as
 * --vx-primary, --vx-accent, --vx-ink-brand, --vx-surface-brand, --vx-topbar, --vx-nav.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --vx-primary: #2346FF;
  --vx-accent: #FF5A1F;
  --vx-ink-brand: #141B2D;
  --vx-surface-brand: #EEF1F6;
  --vx-topbar: #2346FF;
  --vx-nav: #141B2D;
  --vx-radius: 14px;
  --vx-container: 1320px;
  --vx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --vx-radius-sm: calc(var(--vx-radius) * .6);
  --vx-radius-lg: calc(var(--vx-radius) * 1.6);
  --vx-gutter: 16px;
  --vx-header-h: 76px;
  --vx-ease: cubic-bezier(.2, .7, .2, 1);
}

:root,
[data-bs-theme="light"] {
  --vx-bg: var(--vx-surface-brand);
  --vx-card: #FFFFFF;
  --vx-ink: var(--vx-ink-brand);
  --vx-muted: #5B6478;
  --vx-faint: #8A93A6;
  --vx-line: #DCE1EA;
  --vx-line-strong: #C5CCD9;
  --vx-media: #F4F6FA;
  --vx-soft: color-mix(in srgb, var(--vx-primary) 8%, #FFFFFF);
  --vx-soft-accent: color-mix(in srgb, var(--vx-accent) 12%, #FFFFFF);
  --vx-on-primary: #FFFFFF;
  --vx-success: #0E8A4F;
  --vx-warn: #B45309;
  --vx-danger: #C8102E;
  --vx-shadow: 0 1px 2px rgba(20, 27, 45, .06), 0 8px 24px -12px rgba(20, 27, 45, .18);
  --vx-shadow-pop: 0 18px 50px -18px rgba(20, 27, 45, .35);
}

[data-bs-theme="dark"] {
  --vx-bg: #0C111C;
  --vx-card: #151C2B;
  --vx-ink: #E7EBF4;
  --vx-muted: #A0A9BC;
  --vx-faint: #7D879B;
  --vx-line: #263047;
  --vx-line-strong: #34405C;
  --vx-media: #1B2335;
  --vx-soft: color-mix(in srgb, var(--vx-primary) 18%, #151C2B);
  --vx-soft-accent: color-mix(in srgb, var(--vx-accent) 20%, #151C2B);
  --vx-success: #34D399;
  --vx-warn: #FBBF24;
  --vx-danger: #FB7185;
  --vx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --vx-shadow-pop: 0 18px 50px -18px rgba(0, 0, 0, .8);
  --bs-body-bg: #0C111C;
  --bs-body-color: #E7EBF4;
  --bs-secondary-bg: #1B2335;
  --bs-tertiary-bg: #151C2B;
  --bs-border-color: #263047;
  color-scheme: dark;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html.vx {
  --bs-body-font-family: var(--vx-font);
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--vx-ink);
  --bs-body-bg: var(--vx-bg);
  --bs-border-color: var(--vx-line);
  --bs-border-radius: var(--vx-radius-sm);
  --bs-link-color-rgb: 35, 70, 255;
  --bs-primary: var(--vx-primary);
  scroll-padding-top: 120px;
}

body.vx-body {
  font-family: var(--vx-font);
  background: var(--vx-bg);
  color: var(--vx-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.vx-body.vx-has-tabbar { padding-bottom: 0; }

@media (max-width: 991.98px) {
  body.vx-body.vx-has-tabbar { padding-bottom: 68px; }
}

.vx h1, .vx h2, .vx h3, .vx h4, .vx h5, .vx h6 {
  color: var(--vx-ink);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.vx h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.vx h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.vx h3 { font-size: 1.2rem; }

.vx a { color: var(--vx-ink); text-decoration: none; }
.vx a:hover { color: var(--vx-primary); }
.vx #content a:not(.btn):not(.nav-link):not(.vx-card-img):not(.dropdown-item):not(.list-group-item):not(.page-link) { color: var(--vx-primary); }
.vx #content .vx-card a,
.vx #content .vx-cat,
.vx #content .vx-banner,
.vx #content .vx-promo,
.vx #content .vx-post a,
.vx #content .vx-subcat,
.vx #content .vx-pdp-brand { color: inherit; }
.vx #content .vx-card-title a:hover,
.vx #content .vx-post-title a:hover { color: var(--vx-primary); }

.vx img { max-width: 100%; }

.vx :focus-visible {
  outline: 2px solid var(--vx-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.vx-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--vx-ink);
  color: var(--vx-card) !important;
  padding: .6rem 1rem;
  border-radius: var(--vx-radius-sm);
}

.vx-skip:focus { top: 12px; }

.vx-container,
.vx .container {
  width: 100%;
  max-width: var(--vx-container);
  margin-inline: auto;
  padding-inline: var(--vx-gutter);
}

@media (min-width: 768px) {
  :root { --vx-gutter: 24px; }
}

#container { min-height: 100vh; display: flex; flex-direction: column; }
#vx-main { flex: 1 0 auto; }

.vx-page { padding-bottom: 3rem; }

/* Bootstrap component alignment ------------------------------------------- */
.vx .btn { border-radius: var(--vx-radius-sm); font-weight: 600; }

.vx .btn-primary {
  --bs-btn-bg: var(--vx-primary);
  --bs-btn-border-color: var(--vx-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--vx-primary) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--vx-primary) 86%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--vx-primary) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--vx-primary) 78%, #000);
  --bs-btn-disabled-bg: var(--vx-primary);
  --bs-btn-disabled-border-color: var(--vx-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

.vx .btn-light {
  --bs-btn-bg: var(--vx-card);
  --bs-btn-border-color: var(--vx-line);
  --bs-btn-hover-bg: var(--vx-media);
  --bs-btn-hover-border-color: var(--vx-line-strong);
  --bs-btn-color: var(--vx-ink);
  --bs-btn-hover-color: var(--vx-ink);
}

.vx .form-control,
.vx .form-select {
  border-radius: var(--vx-radius-sm);
  border-color: var(--vx-line);
  background-color: var(--vx-card);
  color: var(--vx-ink);
  min-height: 44px;
}

.vx .form-control:focus,
.vx .form-select:focus {
  border-color: var(--vx-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-primary) 22%, transparent);
}

.vx .form-label,
.vx .col-form-label { font-weight: 600; font-size: .9rem; }

.vx div.required .col-form-label::before,
.vx div.required .form-label::before { content: "* "; color: var(--vx-danger); font-weight: 700; }

.vx .form-switch-lg { font-size: 20px; min-height: 30px; line-height: 30px; }
.vx .form-check-input:checked { background-color: var(--vx-primary); border-color: var(--vx-primary); }

.vx .card,
.vx .list-group-item,
.vx .table { --bs-table-bg: var(--vx-card); }

.vx .card { border-color: var(--vx-line); border-radius: var(--vx-radius); background: var(--vx-card); }

.vx .table { color: var(--vx-ink); border-color: var(--vx-line); }
.vx .table-bordered > :not(caption) > * > * { border-color: var(--vx-line); }
.vx .table > thead { background: var(--vx-media); }

.vx .list-group { --bs-list-group-bg: var(--vx-card); --bs-list-group-border-color: var(--vx-line); --bs-list-group-color: var(--vx-ink); border-radius: var(--vx-radius); }
.vx .list-group-item.active { background: var(--vx-primary); border-color: var(--vx-primary); color: #fff !important; }
.vx .list-group-item-action:hover { background: var(--vx-soft); }

.vx .dropdown-menu {
  --bs-dropdown-bg: var(--vx-card);
  --bs-dropdown-border-color: var(--vx-line);
  --bs-dropdown-link-color: var(--vx-ink);
  --bs-dropdown-link-hover-bg: var(--vx-soft);
  --bs-dropdown-link-hover-color: var(--vx-primary);
  --bs-dropdown-link-active-bg: var(--vx-primary);
  border-radius: var(--vx-radius);
  box-shadow: var(--vx-shadow-pop);
  padding: .4rem;
}

.vx .dropdown-item { border-radius: var(--vx-radius-sm); padding: .5rem .75rem; font-size: .9rem; }

.vx .nav-tabs { border-bottom-color: var(--vx-line); }
.vx .nav-tabs .nav-link { color: var(--vx-muted); font-weight: 600; }
.vx .nav-tabs .nav-link.active { color: var(--vx-ink); background: var(--vx-card); border-color: var(--vx-line) var(--vx-line) var(--vx-card); }

.vx .alert { border-radius: var(--vx-radius); }

.vx .pagination { --bs-pagination-color: var(--vx-ink); --bs-pagination-bg: var(--vx-card); --bs-pagination-border-color: var(--vx-line); --bs-pagination-active-bg: var(--vx-primary); --bs-pagination-active-border-color: var(--vx-primary); --bs-pagination-hover-bg: var(--vx-soft); --bs-pagination-hover-color: var(--vx-primary); gap: .3rem; margin: 0; flex-wrap: wrap; }
.vx .page-link { border-radius: var(--vx-radius-sm) !important; min-width: 40px; text-align: center; font-weight: 600; }

/* Breadcrumb */
.vx .breadcrumb {
  margin: 1.1rem 0 1.2rem;
  padding: 0;
  font-size: .84rem;
  background: none;
  --bs-breadcrumb-divider-color: var(--vx-faint);
  --bs-breadcrumb-item-active-color: var(--vx-muted);
}

.vx .breadcrumb-item a { color: var(--vx-muted) !important; }
.vx .breadcrumb-item a:hover { color: var(--vx-primary) !important; }
.vx .breadcrumb-item:last-child a { color: var(--vx-ink) !important; font-weight: 600; pointer-events: none; }
.vx .breadcrumb-item + .breadcrumb-item::before { content: "/"; }

/* Columns from layouts */
.vx #column-left,
.vx #column-right { margin-bottom: 1.5rem; }

@media (min-width: 992px) {
  .vx #column-left { flex: 0 0 280px; max-width: 280px; }
  .vx #column-right { flex: 0 0 280px; max-width: 280px; }
}

.vx #column-left .list-group,
.vx #column-right .list-group { margin-bottom: 1.25rem; }

/* Alerts as toasts */
#alert {
  position: fixed;
  z-index: 2050;
  top: 16px;
  right: 16px;
  left: auto;
  width: min(380px, calc(100vw - 32px));
  margin: 0;
  pointer-events: none;
}

#alert .alert {
  pointer-events: auto;
  margin-bottom: .6rem;
  box-shadow: var(--vx-shadow-pop);
  border: 1px solid var(--vx-line);
  background: var(--vx-card);
  color: var(--vx-ink);
  padding: .9rem 2.6rem .9rem 1rem;
  font-size: .9rem;
  animation: vx-toast .35s var(--vx-ease);
}

#alert .alert i { margin-right: .35rem; }
#alert .alert-success i { color: var(--vx-success); }
#alert .alert-danger { border-left: 4px solid var(--vx-danger); }
#alert .alert-danger i { color: var(--vx-danger); }
#alert .alert-success { border-left: 4px solid var(--vx-success); }
#alert .alert a { color: var(--vx-primary); font-weight: 600; }
[data-bs-theme="dark"] #alert .btn-close { filter: invert(1); }

@keyframes vx-toast {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Cookie bar */
#cookie {
  position: fixed;
  z-index: 2040;
  inset: auto 16px 16px 16px;
  height: auto;
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--vx-radius);
  background: var(--vx-nav);
  color: #fff;
  padding: 1rem 1.2rem;
  box-shadow: var(--vx-shadow-pop);
  opacity: 1;
}

#cookie div { font-size: .9rem; color: #fff; }
#cookie .container { padding: 0; }
#cookie a { color: #fff; text-decoration: underline; }

@media (max-width: 991.98px) {
  #cookie { bottom: 84px; }
}

/* ==========================================================================
   3. Buttons & small parts
   ========================================================================== */
.vx-btn {
  --vx-btn-bg: var(--vx-card);
  --vx-btn-fg: var(--vx-ink);
  --vx-btn-border: var(--vx-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .55rem 1.2rem;
  border: 1px solid var(--vx-btn-border);
  border-radius: var(--vx-radius-sm);
  background: var(--vx-btn-bg);
  color: var(--vx-btn-fg) !important;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  transition: background-color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}

.vx-btn:hover { --vx-btn-border: var(--vx-line-strong); }
.vx-btn:active { transform: translateY(1px); }

.vx-btn-primary { --vx-btn-bg: var(--vx-primary); --vx-btn-fg: #fff; --vx-btn-border: var(--vx-primary); }
.vx-btn-primary:hover { --vx-btn-bg: color-mix(in srgb, var(--vx-primary) 86%, #000); --vx-btn-border: var(--vx-btn-bg); }
.vx-btn-accent { --vx-btn-bg: var(--vx-accent); --vx-btn-fg: #fff; --vx-btn-border: var(--vx-accent); }
.vx-btn-accent:hover { --vx-btn-bg: color-mix(in srgb, var(--vx-accent) 86%, #000); --vx-btn-border: var(--vx-btn-bg); }
.vx-btn-ink { --vx-btn-bg: var(--vx-ink-brand); --vx-btn-fg: #fff; --vx-btn-border: var(--vx-ink-brand); }
.vx-btn-ink:hover { --vx-btn-bg: var(--vx-primary); --vx-btn-border: var(--vx-primary); }
.vx-btn-ghost { --vx-btn-bg: transparent; }
.vx-btn-ghost:hover { --vx-btn-bg: var(--vx-soft); --vx-btn-border: var(--vx-primary); --vx-btn-fg: var(--vx-primary); }
.vx-btn-lg { min-height: 52px; padding-inline: 1.5rem; font-size: 1rem; }

.vx-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vx-ink) !important;
  font-size: 1.15rem;
  flex: 0 0 auto;
  transition: background-color .15s;
}

.vx-icon-btn:hover { background: var(--vx-soft); color: var(--vx-primary) !important; }
.vx-icon-btn-outline { border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm); width: 52px; height: 52px; }

.vx-round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--vx-line);
  background: var(--vx-card);
  color: var(--vx-ink);
  font-size: .8rem;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}

.vx-round-btn:hover:not(:disabled) { background: var(--vx-ink); border-color: var(--vx-ink); color: var(--vx-card); }
.vx-round-btn:disabled { opacity: .35; cursor: default; }

.vx-link-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  background: none;
  padding: .35rem 0;
  color: var(--vx-muted) !important;
  font-weight: 600;
  font-size: .9rem;
}

.vx-link-btn:hover { color: var(--vx-primary) !important; }

.vx-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--vx-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--vx-card);
}

.vx-badge[hidden] { display: none; }

.vx-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 .55rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.vx-tag-sale { background: var(--vx-accent); color: #fff; }
.vx-tag-new { background: var(--vx-ink-brand); color: #fff; }
[data-bs-theme="dark"] .vx-tag-new { background: #fff; color: #141B2D; }
.vx-tag-muted { background: var(--vx-media); color: var(--vx-muted); border: 1px solid var(--vx-line); }

.vx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vx-line-strong); flex: 0 0 auto; }

.vx-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vx-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-success) 22%, transparent);
  flex: 0 0 auto;
}

.vx-count-pill {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--vx-media);
  font-size: .8rem;
  font-weight: 700;
  vertical-align: middle;
}

.vx-progress { height: 6px; border-radius: 3px; background: var(--vx-media); overflow: hidden; }
.vx-progress span { display: block; height: 100%; background: var(--vx-success); border-radius: inherit; transition: width .4s var(--vx-ease); }

.vx-note {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .75rem 1rem;
  border-radius: var(--vx-radius-sm);
  background: var(--vx-soft);
  font-size: .88rem;
  margin-top: 1rem;
}

.vx-empty { text-align: center; padding: 2.5rem 1rem; color: var(--vx-muted); }
.vx-empty > i { font-size: 2.4rem; color: var(--vx-line-strong); margin-bottom: 1rem; }
.vx-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--vx-ink); margin-bottom: .3rem; }
.vx-empty .btn { margin-top: 1rem; }
.vx-empty-page { background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); }

/* ==========================================================================
   4. Top bar
   ========================================================================== */
.vx-topbar {
  background: var(--vx-topbar);
  color: rgba(255, 255, 255, .92);
  font-size: .8rem;
}

.vx-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
}

.vx-ticker {
  position: relative;
  flex: 1 1 auto;
  height: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.vx-ticker li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s, transform .4s var(--vx-ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-ticker li.is-active { opacity: 1; transform: none; }

@media (max-width: 767.98px) {
  .vx-ticker li { justify-content: center; }
}

.vx-topbar-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}

.vx-topbar-links li { display: flex; align-items: center; }
.vx-topbar a,
.vx-topbar .dropdown-toggle,
.vx-topbar .btn-link { color: rgba(255, 255, 255, .92) !important; font-size: .8rem; text-decoration: none; }
.vx-topbar a:hover { color: #fff !important; text-decoration: underline; }
.vx-topbar .fa-phone { margin-right: .35rem; }

/* Core currency / language dropdowns inside the top bar */
.vx-topbar-select form { margin: 0; }
.vx-topbar-select .dropdown > a,
.vx-topbar-select .dropdown-toggle { display: inline-flex; align-items: center; gap: .3rem; padding: 0; background: none; border: 0; }
.vx-topbar-select .dropdown-toggle strong { font-weight: 600; }
.vx-topbar-select .dropdown-menu { font-size: .85rem; }
.vx-topbar-select .dropdown-menu a,
.vx-topbar-select .dropdown-item { color: var(--vx-ink) !important; text-decoration: none !important; }
.vx-topbar-select .d-none.d-md-inline { display: none !important; }

@media (max-width: 767.98px) {
  .vx-topbar-links { gap: .8rem; }
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.vx-header {
  position: relative;
  z-index: 1030;
  background: var(--vx-card);
  border-bottom: 1px solid var(--vx-line);
}

.vx-header.is-sticky { position: sticky; top: 0; }
.vx-header.is-scrolled { box-shadow: var(--vx-shadow); }

.vx-header-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--vx-header-h);
  transition: min-height .2s var(--vx-ease);
}

@media (min-width: 992px) {
  .vx-header.is-scrolled .vx-header-main { min-height: 64px; }
}

.vx-logo { flex: 0 0 auto; margin-right: auto; }
.vx-logo img { display: block; max-height: 44px; width: auto; }
.vx-logo-text { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--vx-ink) !important; }

@media (min-width: 992px) {
  .vx-logo { margin-right: 0; min-width: 180px; }
  .vx-header-search { flex: 1 1 auto; max-width: 720px; margin-inline: auto; }
}

@media (max-width: 991.98px) {
  .vx-header-main { gap: .25rem; }
  .vx-logo { flex: 1 1 auto; min-width: 0; margin-inline: .25rem; }
  .vx-logo img { max-height: 34px; max-width: 100%; object-fit: contain; object-position: left center; }
  .vx-actions { gap: 0; }
  .vx-action { padding: 0 .35rem; }
}

@media (max-width: 374.98px) {
  .vx-theme-toggle { display: none; }
}

.vx-actions { display: flex; align-items: center; gap: .15rem; flex: 0 0 auto; }

.vx-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 44px;
  padding: 0 .55rem;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--vx-ink);
  font-size: 1.15rem;
  transition: background-color .15s;
}

.vx-action:hover { background: var(--vx-soft); }
.vx-action-label { flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.vx-action-label small { font-size: .72rem; color: var(--vx-muted); }
.vx-action-label strong { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.vx-theme-toggle .vx-when-dark { display: none; }
[data-bs-theme="dark"] .vx-theme-toggle .vx-when-dark { display: inline; }
[data-bs-theme="dark"] .vx-theme-toggle .vx-when-light { display: none; }

.vx-cart-btn { padding-left: .4rem; }
.vx-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vx-primary);
  color: #fff;
  font-size: 1rem;
}

.vx-cart-icon .vx-badge { top: -4px; right: -6px; }

.vx-header-search-mobile { padding-bottom: .75rem; }

/* Search ----------------------------------------------------------------- */
.vx-search {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 48px;
  border: 2px solid var(--vx-ink);
  border-radius: 24px;
  background: var(--vx-card);
  transition: border-color .15s;
}

.vx-search:focus-within { border-color: var(--vx-primary); }

.vx-search-cat {
  flex: 0 0 auto;
  max-width: 170px;
  border: 0;
  border-right: 1px solid var(--vx-line);
  border-radius: 22px 0 0 22px;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235B6478' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right .7rem center / 12px 10px;
  padding: 0 2rem 0 1.1rem;
  color: var(--vx-ink);
  font-size: .85rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.vx-search-cat:focus { outline: none; background-color: var(--vx-soft); }

.vx-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 1rem;
  color: var(--vx-ink);
  font-size: .95rem;
}

.vx-search-input:focus { outline: none; }
.vx-search-input::placeholder { color: var(--vx-faint); }
.vx-search-input::-webkit-search-cancel-button { display: none; }

.vx-search-btn {
  flex: 0 0 auto;
  width: 52px;
  margin: 4px;
  border: 0;
  border-radius: 18px;
  background: var(--vx-ink);
  color: #fff;
  font-size: 1rem;
  transition: background-color .15s;
}

.vx-search-btn:hover { background: var(--vx-primary); }
[data-bs-theme="dark"] .vx-search { border-color: var(--vx-line-strong); }
[data-bs-theme="dark"] .vx-search-btn { background: var(--vx-primary); }

@media (max-width: 575.98px) {
  .vx-search-cat { display: none; }
  .vx-search { height: 46px; }
}

.vx-livesearch {
  position: absolute;
  z-index: 1060;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
  box-shadow: var(--vx-shadow-pop);
  overflow: hidden;
}

.vx-ls-list { list-style: none; margin: 0; padding: .4rem; }

.vx-ls-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .45rem .6rem;
  border-radius: var(--vx-radius-sm);
  color: var(--vx-ink) !important;
}

.vx-ls-item img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; }
.vx-ls-item:hover,
.vx-ls-item.is-active { background: var(--vx-soft); }
.vx-ls-name { font-size: .9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vx-ls-price { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.vx-ls-price.is-sale { color: var(--vx-accent); }

.vx-ls-all {
  display: block;
  padding: .8rem 1rem;
  border-top: 1px solid var(--vx-line);
  font-weight: 600;
  font-size: .88rem;
  color: var(--vx-primary) !important;
}

.vx-ls-all.is-active,
.vx-ls-all:hover { background: var(--vx-soft); }
.vx-ls-empty { margin: 0; padding: 1rem 1.1rem; color: var(--vx-muted); font-size: .9rem; }

/* ==========================================================================
   6. Navigation bar
   ========================================================================== */
.vx-nav { background: var(--vx-nav); color: #fff; }

.vx-nav-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 52px;
}

.vx-allcats { position: relative; flex: 0 0 auto; align-self: stretch; display: flex; }

.vx-allcats-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: 260px;
  padding: 0 1.1rem;
  border: 0;
  background: var(--vx-primary);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
}

.vx-allcats-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 260px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s var(--vx-ease), visibility 0s .15s;
  z-index: 20;
}

.vx-allcats.is-open .vx-allcats-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

.vx-allcats-list {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-top: 0;
  border-radius: 0 0 var(--vx-radius) var(--vx-radius);
  box-shadow: var(--vx-shadow-pop);
}

.vx-allcats-list > li > a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1rem;
  color: var(--vx-ink);
  font-size: .9rem;
  font-weight: 500;
}

.vx-allcats-list > li > a img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; }
.vx-allcats-list > li > a span { flex: 1 1 auto; }
.vx-allcats-list > li > a .fa-chevron-right { font-size: .65rem; color: var(--vx-faint); }
.vx-allcats-list > li:hover > a { background: var(--vx-soft); color: var(--vx-primary); }

.vx-flyout {
  position: absolute;
  top: 0;
  left: 100%;
  min-height: 100%;
  width: min(640px, 60vw);
  padding: 1.25rem 1.5rem;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: 0 var(--vx-radius) var(--vx-radius) 0;
  box-shadow: var(--vx-shadow-pop);
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s, visibility 0s .12s;
}

.vx-allcats-list > li:hover > .vx-flyout,
.vx-allcats-list > li:focus-within > .vx-flyout { visibility: visible; opacity: 1; transition-delay: 0s; }

.vx-flyout-head { margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--vx-line); }
.vx-flyout-head a { font-weight: 700; color: var(--vx-primary) !important; }
.vx-flyout-cols,
.vx-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem 1.5rem; }
.vx-flyout-title { display: block; font-weight: 700; font-size: .9rem; color: var(--vx-ink) !important; margin-bottom: .35rem; }
.vx-flyout-title:hover { color: var(--vx-primary) !important; }
.vx-flyout-col ul { list-style: none; margin: 0; padding: 0; }
.vx-flyout-col li a { display: block; padding: .2rem 0; font-size: .86rem; color: var(--vx-muted) !important; }
.vx-flyout-col li a:hover { color: var(--vx-primary) !important; }

.vx-menu {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 .5rem;
  padding: 0;
  list-style: none;
  align-self: stretch;
}

.vx-menu-item { position: static; display: flex; }

.vx-menu-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .85rem;
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}

.vx-menu-link .fa-chevron-down { font-size: .6rem; opacity: .7; }
.vx-menu-link:hover,
.vx-menu-item:focus-within > .vx-menu-link { color: #fff !important; border-bottom-color: var(--vx-accent); }
.vx-menu-deals { color: #fff !important; }
.vx-menu-deals i { color: var(--vx-accent); }

.vx-menu-badge {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: 4px;
  background: var(--vx-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}

.vx-nav-inner { position: relative; }

.vx-mega {
  position: absolute;
  top: 100%;
  left: var(--vx-gutter);
  right: var(--vx-gutter);
  padding: 1.5rem 1.75rem;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: 0 0 var(--vx-radius) var(--vx-radius);
  box-shadow: var(--vx-shadow-pop);
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s var(--vx-ease), visibility 0s .15s;
  z-index: 15;
}

.vx-menu-item.has-mega:hover > .vx-mega,
.vx-menu-item.has-mega:focus-within > .vx-mega { visibility: visible; opacity: 1; transform: none; transition-delay: .08s; }

.vx-mega-all { display: inline-block; margin-top: 1.25rem; font-weight: 700; color: var(--vx-primary) !important; }

.vx-menu-more { position: relative; }
.vx-menu-more > button { background: none; border: 0; }
.vx-more-list {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: 0 0 var(--vx-radius) var(--vx-radius);
  box-shadow: var(--vx-shadow-pop);
  display: none;
  z-index: 16;
}

.vx-menu-more:hover .vx-more-list,
.vx-menu-more.is-open .vx-more-list,
.vx-menu-more:focus-within .vx-more-list { display: block; }
.vx-more-list a { display: block; padding: .5rem .75rem; border-radius: var(--vx-radius-sm); color: var(--vx-ink) !important; font-size: .9rem; font-weight: 500; }
.vx-more-list a:hover { background: var(--vx-soft); color: var(--vx-primary) !important; }

.vx-nav-note {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  white-space: nowrap;
}

.vx-nav-note i { color: var(--vx-accent); }

@media (max-width: 1199.98px) {
  .vx-nav-note { display: none; }
  .vx-allcats-btn { width: 220px; }
  .vx-menu-link { padding: 0 .6rem; }
}

/* Off-canvas (mobile menu, cart) ------------------------------------------ */
.vx-offcanvas {
  --bs-offcanvas-width: min(400px, 92vw);
  --bs-offcanvas-bg: var(--vx-card);
  --bs-offcanvas-color: var(--vx-ink);
  border-color: var(--vx-line) !important;
}

.vx-offcanvas .offcanvas-header { border-bottom: 1px solid var(--vx-line); padding: .9rem 1rem .9rem 1.25rem; }
.vx-offcanvas .offcanvas-title { font-size: 1.1rem; font-weight: 700; margin: 0; }

.vx-mobile-account { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.vx-mobile-menu,
.vx-mobile-links { list-style: none; margin: 0; padding: 0; }
.vx-mobile-menu > li { border-bottom: 1px solid var(--vx-line); }

.vx-mobile-menu > li > a,
.vx-mobile-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
  border: 0;
  background: none;
  color: var(--vx-ink) !important;
  font-weight: 600;
  font-size: .95rem;
  text-align: left;
}

.vx-mobile-toggle i { font-size: .75rem; transition: transform .2s; }
.vx-mobile-toggle:not(.collapsed) i { transform: rotate(180deg); }
.vx-mobile-sub { list-style: none; padding: 0 0 .75rem .75rem; margin: 0; }
.vx-mobile-sub a { display: block; padding: .4rem 0; color: var(--vx-muted) !important; font-size: .9rem; }
.vx-mobile-links { margin-top: 1.25rem; }
.vx-mobile-links a { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; color: var(--vx-ink) !important; font-size: .92rem; }
.vx-mobile-links i { width: 18px; text-align: center; color: var(--vx-muted); }

/* ==========================================================================
   7. Cart drawer
   ========================================================================== */
.vx-cart-drawer .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
.vx-cart-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; }

.vx-ship-progress { padding: 1rem 1.25rem; border-bottom: 1px solid var(--vx-line); background: var(--vx-media); }
.vx-ship-progress p { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; }

.vx-cart-items { list-style: none; margin: 0; padding: .5rem 1.25rem; flex: 1 1 auto; overflow-y: auto; }

.vx-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--vx-line);
}

.vx-cart-item:last-child { border-bottom: 0; }
.vx-cart-thumb { display: block; width: 72px; height: 72px; border-radius: var(--vx-radius-sm); background: #fff; border: 1px solid var(--vx-line); overflow: hidden; }
.vx-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vx-cart-name { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; color: var(--vx-ink) !important; margin-bottom: .2rem; }
.vx-cart-meta { list-style: none; margin: 0 0 .4rem; padding: 0; font-size: .78rem; color: var(--vx-muted); }
.vx-cart-line { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--vx-muted); }
.vx-cart-line strong { color: var(--vx-ink); font-variant-numeric: tabular-nums; }
.vx-cart-item form { margin: 0; }

.vx-cart-remove {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--vx-faint);
}

.vx-cart-remove:hover { background: color-mix(in srgb, var(--vx-danger) 12%, transparent); color: var(--vx-danger); }

.vx-cart-foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--vx-line); background: var(--vx-card); position: sticky; bottom: 0; }
.vx-cart-totals { margin: 0 0 1rem; }
.vx-cart-totals > div { display: flex; justify-content: space-between; font-size: .88rem; padding: .15rem 0; color: var(--vx-muted); }
.vx-cart-totals dt { font-weight: 500; }
.vx-cart-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.vx-cart-totals .is-grand { color: var(--vx-ink); font-size: 1.05rem; padding-top: .5rem; margin-top: .35rem; border-top: 1px dashed var(--vx-line); }
.vx-cart-totals .is-grand dt,
.vx-cart-totals .is-grand dd { font-weight: 700; }
.vx-cart-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ==========================================================================
   8. Sections & shared module layout
   ========================================================================== */
.vx-home { padding-bottom: 1rem; }
.vx-wrap { width: 100%; }

.vx-home-top > .vx-section > .vx-wrap,
.vx-home-bottom > .vx-section > .vx-wrap {
  max-width: var(--vx-container);
  margin-inline: auto;
  padding-inline: var(--vx-gutter);
}

.vx-home-top > *:not(.vx-section),
.vx-home-bottom > *:not(.vx-section) {
  max-width: var(--vx-container);
  margin-inline: auto;
  padding-inline: var(--vx-gutter);
}

.vx-section { margin-block: 2.25rem; }
.vx-home-top > .vx-section:first-child { margin-top: 1.25rem; }
#content .vx-section:first-child { margin-top: 0; }

.vx-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-bottom: 1.1rem;
}

.vx-section-title { margin: 0; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem) !important; }
.vx-section-sub { margin: .2rem 0 0; color: var(--vx-muted); font-size: .92rem; }
.vx-section-tools { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.vx-carousel-nav { display: flex; gap: .4rem; }

.vx-view-all {
  font-weight: 600;
  font-size: .9rem;
  color: var(--vx-ink) !important;
  border-bottom: 2px solid var(--vx-accent);
  padding-bottom: 1px;
}

.vx-view-all:hover { color: var(--vx-primary) !important; }

.vx-pills { gap: .35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.vx-pills::-webkit-scrollbar { display: none; }

.vx-pills .nav-link {
  border: 1px solid var(--vx-line);
  border-radius: 20px;
  padding: .4rem 1rem;
  background: var(--vx-card);
  color: var(--vx-muted);
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
}

.vx-pills .nav-link:hover { color: var(--vx-ink); border-color: var(--vx-line-strong); }
.vx-pills .nav-link.active { background: var(--vx-ink); border-color: var(--vx-ink); color: var(--vx-card); }

/* Grid and carousel tracks */
.vx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
}

@media (max-width: 575.98px) {
  .vx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

.vx-stack { display: grid; gap: .75rem; }

.vx-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 1rem) / 5);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vx-carousel::-webkit-scrollbar { display: none; }
.vx-carousel-item { scroll-snap-align: start; min-width: 0; display: flex; }
.vx-carousel-item > .vx-card { width: 100%; }

@media (max-width: 1199.98px) { .vx-carousel { grid-auto-columns: calc((100% - 3 * 1rem) / 4); } }
@media (max-width: 991.98px) { .vx-carousel { grid-auto-columns: calc((100% - 2 * 1rem) / 3); } }
@media (max-width: 767.98px) { .vx-carousel { grid-auto-columns: calc((100% - .6rem) / 2.15); gap: .6rem; } }

#content .vx-carousel { grid-auto-columns: calc((100% - 3 * 1rem) / 4); }
@media (max-width: 991.98px) { #content .vx-carousel { grid-auto-columns: calc((100% - 2 * 1rem) / 3); } }
@media (max-width: 767.98px) { #content .vx-carousel { grid-auto-columns: calc((100% - .6rem) / 2.15); } }

/* ==========================================================================
   9. Product card
   ========================================================================== */
.vx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.vx-card:hover { border-color: var(--vx-line-strong); box-shadow: var(--vx-shadow); }

.vx-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-bottom: 1px solid var(--vx-line);
}

.vx-card-img { position: absolute; inset: 0; display: block; padding: 8%; }

.vx-card-img img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
  transition: opacity .35s, transform .5s var(--vx-ease);
}

.vx-card-alt { opacity: 0; }

@media (hover: hover) {
  .vx-card.has-hover:hover .vx-card-img img:first-child { opacity: 0; }
  .vx-card.has-hover:hover .vx-card-alt { opacity: 1; }
  .vx-card:not(.has-hover):hover .vx-card-img img { transform: scale(1.04); }
}

.vx-card.is-oos .vx-card-img img { opacity: .55; }

.vx-card-badges { position: absolute; top: .65rem; left: .65rem; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; pointer-events: none; }

.vx-card-tools {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.vx-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--vx-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #141B2D;
  font-size: .85rem;
  transition: background-color .15s, color .15s, transform .2s var(--vx-ease), opacity .2s;
}

.vx-tool:hover { background: var(--vx-ink-brand); border-color: var(--vx-ink-brand); color: #fff; }
.vx-tool.is-loading { opacity: .5; }

@media (hover: hover) and (min-width: 768px) {
  .vx-tool { opacity: 0; transform: translateX(8px); }
  .vx-card:hover .vx-tool,
  .vx-card:focus-within .vx-tool { opacity: 1; transform: none; }
  .vx-card:hover .vx-tool:nth-child(2) { transition-delay: .03s; }
  .vx-card:hover .vx-tool:nth-child(3) { transition-delay: .06s; }
}

.vx-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .85rem .95rem 1rem; }
.vx-card-body .description { flex: 1 1 auto; }
.vx-card-brand { margin: 0 0 .15rem; color: var(--vx-faint); font-size: .75rem; font-weight: 600; }

.vx-card-title {
  margin: 0 0 .35rem;
  font-size: .92rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.vx-card-title a { color: var(--vx-ink) !important; }
.vx-card-desc { display: none; color: var(--vx-muted); font-size: .88rem; }

.vx-rating { display: inline-flex; align-items: center; gap: 2px; color: #F5A524; font-size: .72rem; margin-bottom: .5rem; }
.vx-rating .fa-regular { color: var(--vx-line-strong); }
.vx-rating-count { color: var(--vx-faint); margin-left: .3rem; font-size: .75rem; }

.vx-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.vx-card-foot form { margin: 0; flex: 0 0 auto; }

.vx-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; min-width: 0; }
.price-new { font-weight: 700; font-size: 1.08rem; color: var(--vx-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.price-new.is-sale { color: var(--vx-accent); }
.price-old { color: var(--vx-faint); text-decoration: line-through; font-size: .85rem; font-variant-numeric: tabular-nums; }
.price-tax { display: block; width: 100%; color: var(--vx-faint); font-size: .75rem; }

.vx-card-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--vx-soft);
  color: var(--vx-primary);
  font-size: .95rem;
  transition: background-color .15s, color .15s;
}

.vx-card-cart span { display: none; font-weight: 600; font-size: .88rem; }
.vx-card-cart:hover { background: var(--vx-primary); color: #fff; }

@media (max-width: 575.98px) {
  .vx-card-body { padding: .7rem .75rem .8rem; }
  .vx-card-title { font-size: .85rem !important; }
  .price-new { font-size: .98rem; }
  .vx-card-cart { width: 36px; height: 36px; }
  .vx-tool { width: 32px; height: 32px; font-size: .78rem; }
  .vx-card-tools .vx-tool:nth-child(2) { display: none; }
}

/* Vertical (sidebar) lists */
.vx-stack .vx-card { flex-direction: row; }
.vx-stack .vx-card-media { flex: 0 0 96px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--vx-line); }
.vx-stack .vx-card-tools,
.vx-stack .vx-card-badges,
.vx-stack .vx-card-brand,
.vx-stack .vx-rating { display: none; }
.vx-stack .vx-card-body { padding: .6rem .75rem; }
.vx-stack .vx-card-title { min-height: 0; font-size: .85rem !important; }

/* ==========================================================================
   10. Listing pages (category, specials, brand, search)
   ========================================================================== */
.vx-listing-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-lg);
}

.vx-listing-hero h1 { margin: 0; }
.vx-listing-hero-copy { flex: 1 1 auto; min-width: 0; }
.vx-listing-desc { margin-top: .6rem; color: var(--vx-muted); max-width: 70ch; }
.vx-listing-desc p:last-child { margin-bottom: 0; }
.vx-listing-hero-img { flex: 0 0 auto; width: 140px; height: 140px; object-fit: contain; border-radius: var(--vx-radius); background: #fff; }

@media (max-width: 575.98px) {
  .vx-listing-hero { padding: 1.25rem; }
  .vx-listing-hero-img { display: none; }
}

.vx-subcats { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.5rem; padding-bottom: 2px; }
.vx-subcats::-webkit-scrollbar { display: none; }

.vx-subcat {
  flex: 0 0 auto;
  padding: .5rem 1rem;
  border: 1px solid var(--vx-line);
  border-radius: 20px;
  background: var(--vx-card);
  font-weight: 600;
  font-size: .88rem;
  color: var(--vx-ink) !important;
}

.vx-subcat:hover { border-color: var(--vx-primary); color: var(--vx-primary) !important; }

.vx-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: .6rem .6rem .6rem 1rem;
  margin-bottom: 1rem;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
}

.vx-toolbar-count { margin: 0; color: var(--vx-muted); font-size: .85rem; }
.vx-toolbar-controls { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.vx-select { display: flex; align-items: center; gap: .5rem; }
.vx-select label { font-size: .82rem; color: var(--vx-muted); white-space: nowrap; }
.vx-select .form-select { min-height: 38px; padding-top: .3rem; padding-bottom: .3rem; font-size: .88rem; width: auto; }

.vx-view-toggle { border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm); overflow: hidden; }
.vx-view-toggle button { width: 38px; height: 36px; border: 0; background: var(--vx-card); color: var(--vx-faint); }
.vx-view-toggle button.active { background: var(--vx-ink); color: var(--vx-card); }

/* Grid ignores Bootstrap row-cols so sidebars and widths stay tidy */
#product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 1rem;
  margin: 0;
}

#product-list > .col { width: auto; max-width: none; padding: 0; margin: 0 !important; display: flex; }
#product-list > .col > .vx-card { width: 100%; }

@media (max-width: 575.98px) {
  #product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

#product-list.product-list { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .product-list .vx-card { flex-direction: row; }
  .product-list .vx-card-media { flex: 0 0 260px; border-bottom: 0; border-right: 1px solid var(--vx-line); }
  .product-list .vx-card-body { padding: 1.25rem 1.5rem; }
  .product-list .vx-card-title { font-size: 1.1rem !important; min-height: 0; }
  .product-list .vx-card-desc { display: block; }
  .product-list .vx-card-cart { width: auto; border-radius: var(--vx-radius-sm); padding: 0 1.1rem; background: var(--vx-primary); color: #fff; }
  .product-list .vx-card-cart span { display: inline; }
}

.vx-pagination { display: flex; justify-content: center; margin-top: 2rem; }

/* Search page form */
#product-search #content > .row:first-of-type,
#product-search .input-group { margin-bottom: 1rem; }
#product-search #display-control,
#product-special #display-control,
#product-manufacturer #display-control {
  padding: .6rem;
  margin: 0 0 1rem;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
  align-items: center;
}

#product-search #display-control > div,
#product-search #display-control .mb-3 { margin-bottom: 0 !important; }
#product-search { padding-bottom: 3rem; }

/* Manufacturer list */
#product-manufacturer h2 { margin-top: 1.5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--vx-line); }

/* ==========================================================================
   11. Product page
   ========================================================================== */
.vx-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-lg);
}

@media (max-width: 991.98px) {
  .vx-pdp { grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; }
}

/* Gallery */
.vx-gallery { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; position: sticky; top: 140px; }
.vx-gallery-main { position: relative; grid-column: 2; grid-row: 1; }

.vx-gallery-stage {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--vx-radius);
  background: #fff;
  border: 1px solid var(--vx-line);
  cursor: zoom-in;
}

.vx-gallery-stage img,
.vx-qv .vx-gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s var(--vx-ease); }
.vx-gallery-stage.is-zoomed img { transform: scale(1.8); }
.vx-gallery-badge { position: absolute; top: 1rem; left: 1rem; height: 28px; font-size: .85rem; }

.vx-gallery-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.vx-gallery-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 4px;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-sm);
  background: #fff;
  transition: border-color .15s;
}

.vx-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vx-gallery-thumb:hover { border-color: var(--vx-line-strong); }
.vx-gallery-thumb.is-active { border-color: var(--vx-primary); box-shadow: 0 0 0 1px var(--vx-primary); }

.vx-gallery:not(:has(.vx-gallery-thumbs)) { grid-template-columns: 1fr; }
.vx-gallery:not(:has(.vx-gallery-thumbs)) .vx-gallery-main { grid-column: 1; }

@media (max-width: 767.98px) {
  .vx-gallery { grid-template-columns: 1fr; position: static; }
  .vx-gallery-main { grid-column: 1; }
  .vx-gallery-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; max-height: none; }
  .vx-gallery-thumb { width: 64px; height: 64px; }
}

.vx-gallery-thumbs.is-row { flex-direction: row; grid-row: 2; grid-column: 1 / -1; overflow-x: auto; }

/* Info */
.vx-pdp-brand {
  display: inline-block;
  margin-bottom: .35rem;
  color: var(--vx-primary) !important;
  font-weight: 700;
  font-size: .85rem;
}

.vx-pdp-title { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem) !important; margin: 0 0 .6rem; }

.vx-pdp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.25rem;
  margin-bottom: 1.1rem;
  color: var(--vx-muted);
  font-size: .85rem;
}

.vx-pdp-meta .vx-rating { margin: 0; font-size: .8rem; color: #F5A524 !important; }
.vx-pdp-meta .vx-rating span { color: var(--vx-muted); margin-left: .4rem; font-size: .85rem; }
.vx-pdp-meta .vx-rating:hover span { color: var(--vx-primary); text-decoration: underline; }

.vx-pdp-price {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: var(--vx-radius);
  background: var(--vx-media);
}

.vx-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.vx-pdp-price .price-new { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; }
.vx-pdp-price .price-old { font-size: 1rem; }
.vx-pdp-price .price-tax { margin: .35rem 0 0; font-size: .82rem; }

.vx-save {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 .6rem;
  border-radius: 6px;
  background: var(--vx-soft-accent);
  color: color-mix(in srgb, var(--vx-accent) 80%, #000);
  font-weight: 700;
  font-size: .8rem;
}

[data-bs-theme="dark"] .vx-save { color: var(--vx-accent); }

.vx-discounts { list-style: none; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px dashed var(--vx-line-strong); display: grid; gap: .25rem; font-size: .85rem; }
.vx-discounts li { display: flex; justify-content: space-between; }

.vx-countdown-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: .9rem;
}

.vx-countdown { display: inline-flex; gap: .35rem; font-variant-numeric: tabular-nums; }

.vx-countdown > span {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  min-width: 46px;
  justify-content: center;
  padding: .3rem .45rem;
  border-radius: 8px;
  background: var(--vx-ink-brand);
  color: #fff;
}

.vx-countdown b { font-size: 1.05rem; font-weight: 700; }
.vx-countdown small { font-size: .7rem; opacity: .7; }
.vx-countdown.is-dark > span { background: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .vx-countdown > span { background: var(--vx-media); }

.vx-pdp-facts { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .88rem; }
.vx-stock { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--vx-success); }
.vx-stock.is-low { color: var(--vx-warn); }
.vx-stock.is-low .vx-led { background: var(--vx-warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-warn) 22%, transparent); }
.vx-stock.is-out { color: var(--vx-danger); }
.vx-stock.is-out .vx-led { background: var(--vx-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-danger) 22%, transparent); }

/* Options as chips */
.vx-options { padding-top: 1rem; border-top: 1px solid var(--vx-line); }
.vx-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.vx-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: .35rem .9rem;
  border: 1px solid var(--vx-line-strong);
  border-radius: var(--vx-radius-sm);
  background: var(--vx-card);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.vx-chip img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; }
.vx-chip small { color: var(--vx-muted); font-weight: 500; }
.vx-chip:hover { border-color: var(--vx-ink); }
.btn-check:checked + .vx-chip { border-color: var(--vx-primary); background: var(--vx-soft); box-shadow: 0 0 0 1px var(--vx-primary); }
.btn-check:focus-visible + .vx-chip { outline: 2px solid var(--vx-primary); outline-offset: 2px; }
.vx-chips.is-invalid .vx-chip,
.vx-chip.is-invalid { border-color: var(--vx-danger); }
.vx .invalid-feedback.d-block { color: var(--vx-danger); font-weight: 600; }

/* Buy row */
.vx-buy { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; margin-top: 1rem; }
.vx-buy .vx-btn { flex: 1 1 160px; }

.vx-qty {
  display: inline-flex;
  align-items: stretch;
  height: 52px;
  border: 1px solid var(--vx-line-strong);
  border-radius: var(--vx-radius-sm);
  background: var(--vx-card);
  overflow: hidden;
  flex: 0 0 auto;
}

.vx-qty button { width: 42px; border: 0; background: none; color: var(--vx-ink); font-size: .8rem; }
.vx-qty button:hover { background: var(--vx-soft); color: var(--vx-primary); }

.vx-qty input {
  width: 48px;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 700;
  color: var(--vx-ink);
  -moz-appearance: textfield;
}

.vx-qty input::-webkit-outer-spin-button,
.vx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vx-qty input:focus { outline: none; }

.vx-pdp-secondary { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1rem 0 0; }

.vx-trust {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
  font-size: .88rem;
}

.vx-trust-delivery { display: flex; gap: .6rem; align-items: center; margin: 0 0 .6rem; font-weight: 600; }
.vx-trust-delivery i { color: var(--vx-primary); }
.vx-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; color: var(--vx-muted); }
.vx-trust li { display: flex; gap: .6rem; align-items: center; }
.vx-trust li i { color: var(--vx-success); }
.vx-trust:not(:has(.vx-trust-delivery)) ul { margin-top: 0; }

/* Tabs */
.vx-pdp-tabs { margin-bottom: 2rem; background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: var(--vx-radius-lg); overflow: hidden; }
.vx-tabs { border-bottom: 1px solid var(--vx-line); padding: 0 1rem; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }

.vx-tabs .nav-link {
  padding: 1rem .9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--vx-muted) !important;
  font-weight: 700;
  white-space: nowrap;
}

.vx-tabs .nav-link:hover { color: var(--vx-ink) !important; }
.vx-tabs .nav-link.active { color: var(--vx-ink) !important; border-bottom-color: var(--vx-primary); background: none; }
.vx-pdp-tabs .tab-content { padding: 1.5rem; }
.vx-prose { max-width: 80ch; line-height: 1.7; }
.vx-prose img { height: auto; border-radius: var(--vx-radius-sm); }
.vx-tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vx-tags a { padding: .2rem .7rem; border-radius: 14px; background: var(--vx-media); font-size: .82rem; color: var(--vx-ink) !important; }

.vx-specs h3 { font-size: 1rem !important; margin: 1.5rem 0 .5rem; }
.vx-specs h3:first-child { margin-top: 0; }
.vx-specs dl { margin: 0; border: 1px solid var(--vx-line); border-radius: var(--vx-radius-sm); overflow: hidden; }
.vx-specs dl > div { display: grid; grid-template-columns: minmax(140px, 35%) 1fr; }
.vx-specs dl > div:nth-child(odd) { background: var(--vx-media); }
.vx-specs dt,
.vx-specs dd { margin: 0; padding: .65rem 1rem; font-size: .9rem; }
.vx-specs dt { font-weight: 600; color: var(--vx-muted); }

/* Reviews (core form) */
#tab-review #form-review { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--vx-line); }
#tab-review .table { border-radius: var(--vx-radius-sm); }

/* Related */
.vx-related { margin-top: 1rem; }

/* Sticky buy bar */
.vx-sticky-buy {
  position: fixed;
  z-index: 1035;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--vx-card);
  border-top: 1px solid var(--vx-line);
  box-shadow: 0 -10px 30px -18px rgba(20, 27, 45, .4);
  animation: vx-rise .25s var(--vx-ease);
}

.vx-sticky-buy[hidden] { display: none; }
.vx-sticky-buy-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.vx-sticky-buy img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--vx-line); }
.vx-sticky-buy-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vx-sticky-buy-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.vx-sticky-buy-name span { font-weight: 700; color: var(--vx-primary); font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
  .vx-has-tabbar .vx-sticky-buy { bottom: 64px; }
}

@keyframes vx-rise {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ==========================================================================
   12. Quick view
   ========================================================================== */
.vx-modal .modal-content {
  position: relative;
  border: 0;
  border-radius: var(--vx-radius-lg);
  background: var(--vx-card);
  color: var(--vx-ink);
}

.vx-modal .modal-body { padding: 1.75rem; }
.vx-modal-close { position: absolute; top: .75rem; right: .75rem; z-index: 3; }
.vx-qv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.vx-qv-gallery { display: grid; gap: .75rem; }
.vx-qv .vx-gallery-main { aspect-ratio: 1 / 1; border-radius: var(--vx-radius); background: #fff; border: 1px solid var(--vx-line); overflow: hidden; }
.vx-qv .vx-gallery-main,
.vx-qv .vx-gallery-thumbs { grid-column: 1; }
.vx-qv-desc { color: var(--vx-muted); font-size: .9rem; }
.vx-qv .vx-buy { margin: 1.25rem 0 1rem; }
.vx-qv-more { font-weight: 600; color: var(--vx-primary) !important; border-bottom: 2px solid currentColor; }

@media (max-width: 767.98px) {
  .vx-qv { grid-template-columns: 1fr; gap: 1rem; }
  .vx-modal .modal-body { padding: 1rem; }
}

/* ==========================================================================
   13. Hero slider (the signature piece)
   ========================================================================== */
.vx-hero-grid { display: grid; gap: 1rem; }
.vx-hero.has-promos .vx-hero-grid { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }

@media (max-width: 991.98px) {
  .vx-hero.has-promos .vx-hero-grid { grid-template-columns: 1fr; }
}

.vx-slider {
  position: relative;
  border-radius: var(--vx-radius-lg);
  overflow: hidden;
  min-height: 460px;
  isolation: isolate;
}

.vx-slides { position: relative; height: 100%; min-height: inherit; }

.vx-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 1rem;
  padding: 3rem 3rem 4.5rem 3.5rem;
  background:
    radial-gradient(circle at 78% 45%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 52%),
    var(--vx-slide-bg);
  color: #141B2D;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--vx-ease), visibility 0s .6s;
}

.vx-slide.is-active { position: relative; opacity: 1; visibility: visible; transition-delay: 0s; min-height: 460px; }

.vx-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: .9rem;
  color: #141B2D;
}

.vx-slide-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--vx-accent); }

.vx .vx-slide-title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  font-weight: 800 !important;
  color: #141B2D !important;
  max-width: 13ch;
  text-wrap: balance;
}

.vx-slide-text { margin: 0 0 1.75rem; max-width: 38ch; font-size: 1.05rem; color: #3A4256; }

.vx-slide-visual { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; }

.vx-slide-visual img {
  position: relative;
  z-index: 1;
  max-height: 360px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(20, 27, 45, .22));
}

.vx-slide.is-active .vx-slide-visual img { animation: vx-float-in .9s var(--vx-ease) both; }
.vx-slide.is-active .vx-slide-copy > * { animation: vx-copy-in .7s var(--vx-ease) both; }
.vx-slide.is-active .vx-slide-copy > *:nth-child(2) { animation-delay: .06s; }
.vx-slide.is-active .vx-slide-copy > *:nth-child(3) { animation-delay: .12s; }
.vx-slide.is-active .vx-slide-copy > *:nth-child(4) { animation-delay: .18s; }

@keyframes vx-float-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes vx-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Spec callouts: a label with a leader line pointing at the product */
.vx-callout {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: #141B2D;
  white-space: nowrap;
}

.vx-callout > span {
  padding: .4rem .7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(20, 27, 45, .12);
  box-shadow: 0 6px 18px -8px rgba(20, 27, 45, .35);
  backdrop-filter: blur(4px);
}

.vx-callout::after {
  content: "";
  width: 46px;
  height: 0;
  border-top: 1.5px dashed rgba(20, 27, 45, .5);
}

.vx-callout::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vx-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vx-accent) 25%, transparent);
}

.vx-callout-1 { top: 14%; left: -2%; }
.vx-callout-1::before { right: -4px; }
.vx-callout-2 { top: 46%; right: -2%; flex-direction: row-reverse; }
.vx-callout-2::before { left: -4px; }
.vx-callout-3 { bottom: 12%; left: 4%; }
.vx-callout-3::before { right: -4px; }

.vx-slide.is-active .vx-callout { animation: vx-copy-in .6s var(--vx-ease) both; animation-delay: .45s; }
.vx-slide.is-active .vx-callout-2 { animation-delay: .55s; }
.vx-slide.is-active .vx-callout-3 { animation-delay: .65s; }

.vx-slider-controls {
  position: absolute;
  z-index: 3;
  left: 3.5rem;
  right: 1.5rem;
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vx-slider-dots { display: flex; gap: .4rem; }

.vx-slider-dot {
  width: 34px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
}

.vx-slider-dot span {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(20, 27, 45, .18);
  overflow: hidden;
}

.vx-slider-dot.is-active span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #141B2D;
  transform-origin: left;
  animation: vx-progress var(--vx-interval, 6000ms) linear both;
}

.vx-slider.is-paused .vx-slider-dot.is-active span::after { animation-play-state: paused; }

@keyframes vx-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.vx-slider-arrows { display: flex; gap: .4rem; }
.vx-slider .vx-round-btn { background: rgba(255, 255, 255, .85); border-color: transparent; color: #141B2D; }
.vx-slider .vx-round-btn:hover { background: #141B2D; color: #fff; }

@media (max-width: 767.98px) {
  .vx-slider,
  .vx-slide.is-active { min-height: 0; }
  .vx-slide { grid-template-columns: 1fr; padding: 1.75rem 1.5rem 4rem; text-align: left; }
  .vx-slide-visual { order: -1; min-height: 200px; }
  .vx-slide-visual img { max-height: 210px; }
  .vx-slide-text { font-size: .95rem; margin-bottom: 1.25rem; }
  .vx-callout { font-size: .7rem; }
  .vx-callout::after { width: 22px; }
  .vx-callout-1 { left: 0; top: 4%; }
  .vx-callout-2 { right: 0; }
  .vx-callout-3 { display: none; }
  .vx-slider-controls { left: 1.5rem; right: 1rem; bottom: 1rem; }
  .vx-slider-arrows { display: none; }
}

/* Side promos */
.vx-hero-promos { display: grid; gap: 1rem; grid-template-rows: 1fr 1fr; }

.vx-promo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 1.5rem;
  border-radius: var(--vx-radius-lg);
  background: var(--vx-promo-bg);
  color: #141B2D !important;
  overflow: hidden;
  min-height: 160px;
}

.vx-promo-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; max-width: 60%; }
.vx-promo-copy strong { font-size: 1.3rem; line-height: 1.1; letter-spacing: -.02em; }
.vx-promo-copy span { font-size: .88rem; color: #3A4256; }
.vx-promo img { position: absolute; right: -4%; bottom: -6%; width: 52%; max-width: 200px; transition: transform .4s var(--vx-ease); }
.vx-promo:hover img { transform: translateY(-4px) rotate(-2deg); }

@media (max-width: 991.98px) {
  .vx-hero-promos { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .vx-hero-promos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Category showcase
   ========================================================================== */
.vx-cats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1rem;
}

.vx-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  height: 100%;
  padding: 1.25rem .75rem 1rem;
  text-align: center;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
  color: var(--vx-ink) !important;
  transition: border-color .2s;
}

.vx-cat:hover { border-color: var(--vx-primary); }

.vx-cat-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: var(--vx-media);
  overflow: hidden;
  transition: background-color .2s;
}

.vx-cat-media img { width: 76%; height: 76%; object-fit: contain; transition: transform .35s var(--vx-ease); }
.vx-cat-media i { font-size: 2rem; color: var(--vx-primary); transition: transform .35s var(--vx-ease); }
.vx-cat:hover .vx-cat-media { background: var(--vx-soft); }
.vx-cat:hover .vx-cat-media img,
.vx-cat:hover .vx-cat-media i { transform: scale(1.08); }
.vx-cat-name { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.vx-cat-count { font-size: .78rem; color: var(--vx-faint); }

@media (max-width: 575.98px) {
  .vx-cats-list { display: flex; overflow-x: auto; scrollbar-width: none; gap: .6rem; }
  .vx-cats-list::-webkit-scrollbar { display: none; }
  .vx-cats-list > li { flex: 0 0 120px; }
  .vx-cat-media { width: 72px; height: 72px; }
  .vx-cat-media i { font-size: 1.5rem; }
}

/* ==========================================================================
   15. Deals
   ========================================================================== */
.vx-deals-panel {
  padding: 1.5rem;
  border-radius: var(--vx-radius-lg);
  background: var(--vx-ink-brand);
  color: #fff;
}

[data-bs-theme="dark"] .vx-deals-panel { background: #182037; border: 1px solid var(--vx-line); }

.vx-deals-head { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.vx-deals .vx-section-title { color: #fff !important; }
.vx-deals .vx-section-title i { color: var(--vx-accent); margin-right: .25rem; }
.vx-deals .vx-section-sub { color: rgba(255, 255, 255, .7); }
.vx-deals-timer { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: rgba(255, 255, 255, .75); font-weight: 600; }
.vx-deals .vx-view-all { color: #fff !important; }
.vx-deals .vx-round-btn { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.vx-deals .vx-round-btn:hover:not(:disabled) { background: #fff; color: #141B2D; border-color: #fff; }
.vx-deals .vx-card { border-color: transparent; }

/* ==========================================================================
   16. Brands, services, banners, blog
   ========================================================================== */
.vx-brands-strip {
  display: flex;
  overflow: hidden;
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.vx-brands-strip:not(.is-scrolling) { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }

.vx-brands-track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 100%;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vx-brands-strip.is-scrolling .vx-brands-track { animation: vx-marquee 40s linear infinite; }
.vx-brands-strip.is-scrolling:hover .vx-brands-track { animation-play-state: paused; }

@keyframes vx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.vx-brands-track li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 92px;
  padding: 1rem 1.5rem;
  color: var(--vx-muted) !important;
  font-weight: 800;
  font-size: 1.1rem;
}

.vx-brands-track img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.vx-brands-track a:hover img { filter: none; opacity: 1; }
[data-bs-theme="dark"] .vx-brands-track img { filter: grayscale(1) invert(1); }
[data-bs-theme="dark"] .vx-brands-track a:hover img { filter: invert(1); }

.vx-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--vx-card);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius);
}

.vx-services-list li { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; }
.vx-services-list li + li { border-left: 1px solid var(--vx-line); }
.vx-services-list i { font-size: 1.6rem; color: var(--vx-primary); width: 40px; text-align: center; }
.vx-services-list strong { display: block; font-size: .95rem; }
.vx-services-list span { font-size: .84rem; color: var(--vx-muted); }

@media (max-width: 991.98px) {
  .vx-services-list { grid-template-columns: 1fr 1fr; }
  .vx-services-list li + li { border-left: 0; }
  .vx-services-list li:nth-child(even) { border-left: 1px solid var(--vx-line); }
  .vx-services-list li:nth-child(n+3) { border-top: 1px solid var(--vx-line); }
}

@media (max-width: 575.98px) {
  .vx-services-list { grid-template-columns: 1fr; }
  .vx-services-list li:nth-child(even) { border-left: 0; }
  .vx-services-list li + li { border-top: 1px solid var(--vx-line); }
  .vx-services-list li { padding: 1rem 1.25rem; }
}

.vx-banners-grid { display: grid; gap: 1rem; grid-template-columns: repeat(var(--vx-cols, 3), minmax(0, 1fr)); }

@media (max-width: 991.98px) {
  .vx-banners-grid { grid-template-columns: repeat(min(var(--vx-cols, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .vx-banners-grid { grid-template-columns: 1fr; }
}

.vx-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 200px;
  padding: 1.75rem;
  border-radius: var(--vx-radius-lg);
  background: var(--vx-banner-bg);
  color: #141B2D !important;
  overflow: hidden;
}

.vx-banner-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; max-width: 58%; }
.vx-banner-eyebrow { font-size: .82rem; font-weight: 700; color: #3A4256; }
.vx-banner-title { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); line-height: 1.12; letter-spacing: -.02em; }
.vx-banner-btn { margin-top: .6rem; font-weight: 700; font-size: .88rem; border-bottom: 2px solid #141B2D; }
.vx-banner img { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 44%; max-height: 86%; object-fit: contain; transition: transform .4s var(--vx-ease); }
.vx-banner:hover img { transform: translateY(-53%) scale(1.03); }

.vx-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.vx-post { display: flex; flex-direction: column; background: var(--vx-card); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: hidden; }
.vx-post-media { display: block; aspect-ratio: 16 / 10; background: var(--vx-media); overflow: hidden; }
.vx-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--vx-ease); }
.vx-post:hover .vx-post-media img { transform: scale(1.04); }
.vx-post-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: var(--vx-line-strong); }
.vx-post-body { padding: 1rem 1.15rem 1.25rem; }
.vx-post-meta { display: flex; gap: .75rem; margin: 0 0 .35rem; color: var(--vx-faint); font-size: .8rem; }
.vx-post-title { font-size: 1.05rem !important; margin: 0 0 .4rem; }
.vx-post-body > p:last-child { margin: 0; color: var(--vx-muted); font-size: .9rem; }

/* Core OpenCart modules shown in Voltix style */
.vx-core-products.is-vertical .vx-section-title { font-size: 1.05rem !important; }
.vx-home-top > .carousel,
.vx-home-bottom > .carousel { margin-block: 1.5rem; }
.vx .carousel .img-fluid { border-radius: var(--vx-radius); }
.vx #column-left h3,
.vx #column-right h3 { font-size: 1.05rem; }

/* ==========================================================================
   17. Newsletter & footer
   ========================================================================== */
.vx-newsletter { margin-top: 2rem; background: var(--vx-primary); color: #fff; }

.vx-newsletter-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem 3rem;
  padding-block: 2.5rem;
}

.vx-newsletter h2 { color: #fff !important; margin: 0 0 .35rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem) !important; }
.vx-newsletter p { margin: 0; color: rgba(255, 255, 255, .82); }

.vx-newsletter-form { display: flex; flex-wrap: wrap; gap: .5rem; }

.vx-newsletter-form input {
  flex: 1 1 240px;
  min-height: 52px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--vx-radius-sm);
  background: #fff;
  color: #141B2D;
  font-size: .95rem;
}

.vx-newsletter-form input:focus { outline: 3px solid rgba(255, 255, 255, .5); }
.vx-newsletter-form .vx-btn { min-height: 52px; }
.vx-newsletter-msg { flex: 1 0 100%; margin: 0; min-height: 1.2em; font-size: .88rem; font-weight: 600; }
.vx-newsletter-msg.is-error { color: #FFE1D6; }

@media (max-width: 767.98px) {
  .vx-newsletter-inner { grid-template-columns: 1fr; padding-block: 2rem; }
}

.vx-footer { background: var(--vx-nav); color: rgba(255, 255, 255, .72); font-size: .9rem; }
.vx-newsletter + .vx-footer { margin-top: 0; }
.vx-footer:first-child { margin-top: 3rem; }

.vx-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding-block: 3rem 2.5rem;
}

@media (max-width: 1199.98px) {
  .vx-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx-footer-about { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .vx-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .vx-footer-contact { grid-column: 1 / -1; }
}

.vx-footer-logo { display: inline-block; margin-bottom: 1rem; color: #fff !important; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.vx-footer-logo img { max-height: 42px; width: auto; }
.vx-footer-about p { max-width: 42ch; margin-bottom: 1.25rem; }
.vx-footer h2 { color: #fff !important; font-size: .95rem !important; margin: 0 0 1rem; letter-spacing: 0 !important; }
.vx-footer ul { list-style: none; margin: 0; padding: 0; }
.vx-footer-col li { margin-bottom: .5rem; }
.vx-footer a { color: rgba(255, 255, 255, .72) !important; }
.vx-footer a:hover { color: #fff !important; }
.vx-footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.vx-footer-contact i { margin-top: .25rem; width: 16px; color: var(--vx-accent); }

.vx-socials { display: flex; gap: .5rem; }

.vx-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .15s, border-color .15s;
}

.vx-socials a:hover { background: var(--vx-primary); border-color: var(--vx-primary); }

.vx-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.vx-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.25rem; }
.vx-copyright { margin: 0; font-size: .84rem; }
.vx-payments { display: flex; gap: .6rem; font-size: 1.7rem; color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   18. Mobile tab bar & back to top
   ========================================================================== */
.vx-tabbar {
  position: fixed;
  z-index: 1036;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--vx-card);
  border-top: 1px solid var(--vx-line);
  box-shadow: 0 -6px 20px -12px rgba(20, 27, 45, .25);
}

.vx-tabbar a,
.vx-tabbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
  color: var(--vx-muted) !important;
  font-size: .68rem;
  font-weight: 600;
}

.vx-tabbar i { font-size: 1.15rem; }
.vx-tabbar a:hover,
.vx-tabbar button:hover { color: var(--vx-primary) !important; }
.vx-tabbar .vx-badge { top: 6px; right: calc(50% - 22px); }

.vx-totop {
  position: fixed;
  z-index: 1034;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--vx-ink-brand);
  color: #fff;
  box-shadow: var(--vx-shadow-pop);
}

.vx-totop[hidden] { display: none; }
.vx-totop:hover { background: var(--vx-primary); }
.has-sticky-buy .vx-totop { bottom: 88px; }

@media (max-width: 991.98px) {
  .vx-has-tabbar .vx-totop { bottom: 80px; }
  .vx-has-tabbar.has-sticky-buy .vx-totop { bottom: 148px; }
}

/* ==========================================================================
   19. Account, checkout, information pages (core markup)
   ========================================================================== */
.vx #account-account #content,
.vx #checkout-cart #content,
.vx #checkout-checkout #content,
.vx #information-contact #content,
.vx #information-information #content,
.vx #information-sitemap #content,
.vx #account-login #content,
.vx #account-register #content { padding-bottom: 3rem; }

.vx #checkout-checkout fieldset,
.vx #account-login .border,
.vx #account-login .col-sm-6 > div,
.vx #information-information #content > div,
.vx #information-contact #content form {
  background: var(--vx-card);
}

.vx legend { font-size: 1.05rem; font-weight: 700; border-bottom: 1px solid var(--vx-line); padding-bottom: .5rem; margin-bottom: 1rem; }

.vx #checkout-checkout #content > .row > .col-md-7,
.vx #checkout-checkout #content > .row > .col-md-5 { margin-bottom: 1.5rem; }

.vx #checkout-checkout #content .row > div > div:not(.row),
.vx #account-login #content .row > .col > div,
.vx #account-login #content .row > div > .border {
  border: 1px solid var(--vx-line) !important;
  border-radius: var(--vx-radius);
  padding: 1.25rem;
  background: var(--vx-card);
}

.vx #account-login #content .row > div > .border { margin-bottom: 1rem; }
.vx #checkout-cart .table img { border-radius: var(--vx-radius-sm); }
.vx #checkout-cart .input-group .form-control { max-width: 70px; }

.vx-404 { max-width: 560px; margin: 2rem auto 3rem; text-align: center; }
.vx-404 .vx-404-code { margin: 0; font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; color: var(--vx-primary); }
.vx-404 p { color: var(--vx-muted); }
.vx-404-search { margin: 1.5rem 0; text-align: left; }

/* Blog pages (core) */
.blog-thumb { border: 1px solid var(--vx-line); border-radius: var(--vx-radius); overflow: hidden; background: var(--vx-card); margin-bottom: 1rem; }
.blog-thumb .image img { width: 100%; }
.blog-thumb .description { padding: 1rem; }
.blog-thumb h4 { font-size: 1.05rem; }

/* ==========================================================================
   20. Motion preferences & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vx *,
  .vx *::before,
  .vx *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .vx-brands-strip.is-scrolling .vx-brands-track { animation: none; }
  .vx-brands-strip.is-scrolling { overflow-x: auto; }
}

@media print {
  .vx-topbar,
  .vx-nav,
  .vx-tabbar,
  .vx-totop,
  .vx-newsletter,
  .vx-sticky-buy,
  .vx-actions,
  .vx-header-search,
  .vx-header-search-mobile { display: none !important; }
  .vx-header { position: static; }
}