/* ==========================================================================
   VS-CAR Mobile Header 2026
   Mobile-first, layered on top of the existing Bootstrap 3 + FontAwesome 4.7
   ========================================================================== */

/* ---- 1. CSS custom properties (override these from admin if needed) ---- */
:root {
  --vhc-primary: #cc2229;            /* brand red */
  --vhc-primary-fg: #ffffff;         /* text on primary */
  --vhc-bg: #ffffff;
  --vhc-bg-elev: #ffffff;
  --vhc-fg: #1d1d1f;                 /* primary text */
  --vhc-fg-muted: #6e6e73;           /* secondary text */
  --vhc-border: rgba(0, 0, 0, 0.08);
  --vhc-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  --vhc-glass-bg: rgba(255, 255, 255, 0.82);
  --vhc-glass-border: rgba(0, 0, 0, 0.06);
  --vhc-scrim: rgba(0, 0, 0, 0.42);
  --vhc-header-h: 56px;
  --vhc-search-h: 44px;
  --vhc-tabbar-h: 60px;
  --vhc-radius: 12px;
  --vhc-icon-size: 22px;
  --vhc-z-topbar: 1030;
  --vhc-z-drawer: 1040;
  --vhc-z-overlay: 1050;
  --vhc-z-tabbar: 1020;
  --vhc-z-skip: 1060;
  --vhc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --vhc-dur: 220ms;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --vhc-bg: #1c1c1e;
    --vhc-bg-elev: #2c2c2e;
    --vhc-fg: #f5f5f7;
    --vhc-fg-muted: #98989d;
    --vhc-border: rgba(255, 255, 255, 0.10);
    --vhc-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    --vhc-glass-bg: rgba(28, 28, 30, 0.78);
    --vhc-glass-border: rgba(255, 255, 255, 0.08);
  }
}

/* ---- 2. Skip-to-content link ---- */
.vhc-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--vhc-z-skip);
  padding: 10px 16px;
  background: var(--vhc-primary);
  color: var(--vhc-primary-fg);
  border-radius: var(--vhc-radius);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 180ms var(--vhc-ease);
}
.vhc-skip:focus,
.vhc-skip:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---- 3. Mobile top bar ---- */
.vhc-topbar {
  position: sticky;
  top: 0;
  z-index: var(--vhc-z-topbar);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  height: var(--vhc-header-h);
  padding: 0 4px;
  padding-top: env(safe-area-inset-top);
  background: var(--vhc-bg);
  border-bottom: 1px solid var(--vhc-border);
  /* No transitions on the bar itself - just on the inner pill */
  will-change: background-color, backdrop-filter;
}
.vhc-topbar.is-scrolled {
  background: var(--vhc-glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--vhc-glass-border);
  box-shadow: var(--vhc-shadow);
}

.vhc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--vhc-fg);
  font-size: var(--vhc-icon-size);
  line-height: 1;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: background-color 120ms var(--vhc-ease);
}
.vhc-iconbtn:hover,
.vhc-iconbtn:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: 0;
}
@media (prefers-color-scheme: dark) {
  .vhc-iconbtn:hover,
  .vhc-iconbtn:focus-visible {
    background: rgba(255, 255, 255, 0.08);
  }
}
.vhc-iconbtn:focus-visible {
  outline: 2px solid var(--vhc-primary);
  outline-offset: -2px;
}

.vhc-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  height: 36px;            /* reverted from 56px — original size */
  min-width: 0;
  text-decoration: none;
  color: var(--vhc-fg);
}
.vhc-logo img,
.vhc-logo-img {
  height: 28px;            /* reverted from 56px — original size */
  max-width: 160px;        /* reverted from 240px — original size */
  width: auto;
  display: block;
}
.vhc-logo-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vhc-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--vhc-primary);
  color: var(--vhc-primary-fg);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Cart badge (used in top bar AND tab bar) */
.vhc-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--vhc-primary);
  color: var(--vhc-primary-fg);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--vhc-bg);
  transform-origin: center;
}
.vhc-topbar.is-scrolled .vhc-badge {
  box-shadow: 0 0 0 2px var(--vhc-glass-bg);
}
.vhc-badge.is-pulse {
  animation: vhc-pulse 380ms var(--vhc-ease);
}
@keyframes vhc-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.vhc-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* ---- 4. Search row (sits BELOW top bar, hides on scroll) ---- */
.vhc-searchbar {
  background: var(--vhc-bg);
  border-bottom: 1px solid var(--vhc-border);
  padding: 6px 10px;
  padding-bottom: calc(6px + env(safe-area-inset-top, 0px) * 0); /* no inset here */
  display: flex;
  align-items: center;
  gap: 8px;
}
.vhc-topbar.is-scrolled + .vhc-searchbar {
  display: none;
}
.vhc-search-form {
  flex: 1;
  display: flex;
  align-items: center;
  height: var(--vhc-search-h);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 22px;
  padding: 0 14px 0 12px;
  gap: 8px;
  border: 1px solid transparent;
  transition: border-color 120ms var(--vhc-ease), background 120ms var(--vhc-ease);
}
.vhc-search-form:focus-within {
  border-color: var(--vhc-primary);
  background: var(--vhc-bg);
}
.vhc-search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--vhc-fg);
  font-size: 15px;
  height: 100%;
  font-family: inherit;
}
.vhc-search-form input::placeholder {
  color: var(--vhc-fg-muted);
}
.vhc-search-form .fa {
  color: var(--vhc-fg-muted);
  font-size: 16px;
}
.vhc-search-form .vhc-search-submit {
  background: var(--vhc-primary);
  color: var(--vhc-primary-fg);
  border: 0;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* When the user has scrolled, the top bar shows a search icon on the right.
   That icon toggles the overlay instead of the inline search. */
.vhc-topbar.is-scrolled .vhc-search-toggle {
  display: inline-flex;
}
.vhc-topbar:not(.is-scrolled) .vhc-search-toggle {
  display: none;
}

/* ---- 5. Off-canvas drawer (hamburger menu) ---- */
.vhc-scrim {
  position: fixed;
  inset: 0;
  background: var(--vhc-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vhc-dur) var(--vhc-ease);
  z-index: var(--vhc-z-drawer);
}
.vhc-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.vhc-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(88vw, 380px);
  max-width: 100%;
  background: var(--vhc-bg-elev);
  color: var(--vhc-fg);
  z-index: calc(var(--vhc-z-drawer) + 1);
  transform: translateX(-100%);
  transition: transform var(--vhc-dur) var(--vhc-ease);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--vhc-border);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.10);
  /* iOS rubber-band scroll containment */
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top);
}
.vhc-drawer.is-open {
  transform: translateX(0);
}
.vhc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--vhc-border);
  flex-shrink: 0;
}
.vhc-drawer-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.vhc-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}

.vhc-drawer-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--vhc-border);
}
.vhc-drawer-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vhc-fg-muted);
  margin: 0 0 8px;
  font-weight: 600;
}

.vhc-drawer-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--vhc-fg);
}
.vhc-drawer-account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vhc-primary);
  color: var(--vhc-primary-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.vhc-drawer-account-name {
  font-weight: 600;
  font-size: 15px;
}
.vhc-drawer-account-sub {
  font-size: 13px;
  color: var(--vhc-fg-muted);
}

.vhc-drawer-contacts {
  display: grid;
  gap: 6px;
}
.vhc-drawer-contacts a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--vhc-fg);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.vhc-drawer-contacts a:hover,
.vhc-drawer-contacts a:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: 0;
}
.vhc-drawer-contacts .fa {
  width: 28px;
  text-align: center;
  font-size: 18px;
  color: var(--vhc-primary);
}
.vhc-drawer-contacts .vhc-wa { color: #25D366; }
.vhc-drawer-contacts .vhc-tg  { color: #2AABEE; }
.vhc-drawer-contacts .vhc-vb  { color: #7360F2; }

/* Category accordion */
.vhc-cat {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vhc-cat > li {
  border-bottom: 1px solid var(--vhc-border);
}
.vhc-cat > li:last-child {
  border-bottom: 0;
}
.vhc-cat-row {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 8px 0 0;
}
.vhc-cat-row > a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  text-decoration: none;
  color: var(--vhc-fg);
  font-size: 15px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.vhc-cat-toggle {
  width: 44px;
  height: 48px;
  background: transparent;
  border: 0;
  color: var(--vhc-fg-muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.vhc-cat-toggle:focus-visible {
  outline: 2px solid var(--vhc-primary);
  outline-offset: -2px;
}
.vhc-cat-toggle .fa {
  transition: transform 180ms var(--vhc-ease);
}
.vhc-cat > li.is-open > .vhc-cat-row .vhc-cat-toggle .fa {
  transform: rotate(180deg);
}
.vhc-cat-children {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 8px 16px;
  background: rgba(0, 0, 0, 0.02);
}
.vhc-cat > li.is-open > .vhc-cat-children {
  display: block;
}
@media (prefers-color-scheme: dark) {
  .vhc-cat-children {
    background: rgba(255, 255, 255, 0.03);
  }
}
.vhc-cat-children a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--vhc-fg-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.vhc-cat-children a:hover,
.vhc-cat-children a:focus-visible {
  color: var(--vhc-fg);
  outline: 0;
}

/* drawer links list (info pages, etc.) */
.vhc-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vhc-linklist a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 8px;
  text-decoration: none;
  color: var(--vhc-fg);
  font-size: 15px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.vhc-linklist a:hover,
.vhc-linklist a:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: 0;
}
.vhc-linklist .fa {
  width: 24px;
  text-align: center;
  font-size: 16px;
  color: var(--vhc-fg-muted);
}
.vhc-drawer-hint {
  margin: 6px 4px 4px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--vhc-fg-muted);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border-left: 3px solid var(--vhc-primary);
}
@media (prefers-color-scheme: dark) {
  .vhc-drawer-hint {
    background: rgba(255, 255, 255, 0.06);
  }
}

/* ---- 6. Bottom tab bar ---- */
.vhc-tabbar-spacer {
  /* Push page content above the fixed tab bar so the last product isn't hidden */
  height: calc(var(--vhc-tabbar-h) + env(safe-area-inset-bottom));
}
.vhc-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--vhc-z-tabbar);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--vhc-tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--vhc-glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--vhc-border);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.vhc-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0 2px;
  background: transparent;
  border: 0;
  color: var(--vhc-fg-muted);
  font-size: 11px;
  line-height: 1.1;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  font-family: inherit;
}
.vhc-tab .fa {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 1px;
  transition: transform 120ms var(--vhc-ease);
}
.vhc-tab:focus-visible {
  outline: 0;
}
.vhc-tab:focus-visible::before {
  content: '';
  position: absolute;
  inset: 4px 8px;
  border: 2px solid var(--vhc-primary);
  border-radius: 12px;
  pointer-events: none;
}
.vhc-tab.is-active {
  color: var(--vhc-primary);
}
.vhc-tab.is-active .fa {
  transform: translateY(-1px);
}
.vhc-tab.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--vhc-primary);
  border-radius: 0 0 2px 2px;
}
.vhc-tab-badge {
  position: absolute;
  top: 2px;
  margin-left: 12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--vhc-primary);
  color: var(--vhc-primary-fg);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--vhc-glass-bg);
}
.vhc-tab-badge.is-pulse {
  animation: vhc-pulse 380ms var(--vhc-ease);
}

/* ---- 7. Search overlay ---- */
.vhc-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--vhc-z-overlay);
  background: var(--vhc-bg);
  display: none;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.vhc-overlay.is-open {
  display: flex;
}
.vhc-overlay-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--vhc-header-h);
  padding: 0 12px;
  border-bottom: 1px solid var(--vhc-border);
  flex-shrink: 0;
}
.vhc-overlay-form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 40px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 0 14px;
  gap: 10px;
}
.vhc-overlay-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--vhc-fg);
  font-family: inherit;
}
.vhc-overlay-form input:focus {
  outline: 0;
}
.vhc-overlay-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.vhc-overlay-hint {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vhc-fg-muted);
  margin: 16px 0 8px;
  font-weight: 600;
}
.vhc-overlay-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.vhc-overlay-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 8px;
  text-decoration: none;
  color: var(--vhc-fg);
  font-size: 15px;
  border-radius: 10px;
}
.vhc-overlay-list a:hover,
.vhc-overlay-list a:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: 0;
}
.vhc-overlay-list .fa {
  color: var(--vhc-fg-muted);
  width: 22px;
  text-align: center;
}

/* ---- 8. Body offset so fixed tab bar doesn't cover page content ---- */
body.vhc-has-tabbar {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- 9. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .vhc-topbar,
  .vhc-drawer,
  .vhc-scrim,
  .vhc-tab .fa,
  .vhc-cat-toggle .fa,
  .vhc-badge,
  .vhc-tab-badge {
    transition: none !important;
    animation: none !important;
  }
  .vhc-badge.is-pulse,
  .vhc-tab-badge.is-pulse {
    animation: none !important;
  }
}

/* ---- 10. Desktop (≥ 992 px) — restore the original layout ---- */
@media (min-width: 992px) {
  /* Hide everything we added for mobile */
  .vhc-topbar,
  .vhc-searchbar,
  .vhc-tabbar,
  .vhc-drawer,
  .vhc-scrim,
  .vhc-overlay,
  .vhc-skip {
    display: none !important;
  }
  .vhc-tabbar-spacer {
    height: 0;
  }
  body.vhc-has-tabbar {
    padding-bottom: 0;
  }
  /* Show the original desktop <header> */
  .vhc-desktop-only {
    display: block !important;
  }
}

/* Hide the original desktop <header> on mobile (default state) */
@media (max-width: 991.98px) {
  .vhc-desktop-only,
  body > header {
    display: none !important;
  }
}

/* ---- 11. Tablet (≥ 768 px) — slight refinements ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .vhc-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .vhc-logo-text {
    font-size: 17px;
  }
}