/* ShopBase Custom CSS - Tailwind utility classes only in templates, this file for components and custom animations */

/* === SHOP FRONTEND (vh- prefix) === */
.vh-btn-primary { @apply inline-flex items-center justify-center px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-2xl transition-colors duration-200; }
.vh-btn-secondary { @apply inline-flex items-center justify-center px-6 py-3 border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 font-semibold rounded-2xl transition-colors duration-200; }
.vh-card { @apply bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 overflow-hidden; }
.vh-input { @apply w-full px-4 py-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-xl focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-500 transition-colors; }
.vh-badge-sale { @apply inline-flex px-2 py-0.5 bg-red-500 text-white text-xs font-semibold rounded-lg; }
.vh-badge-new { @apply inline-flex px-2 py-0.5 bg-green-500 text-white text-xs font-semibold rounded-lg; }
.vh-price { @apply font-bold text-gray-900 dark:text-white; }
.vh-price-original { @apply text-gray-400 line-through text-sm; }

/* === ADMIN (va- prefix) === */
.va-stat-card { @apply bg-white dark:bg-gray-800 rounded-2xl p-5 border border-gray-100 dark:border-gray-700; }
.va-table { @apply w-full text-sm; }
.va-table th { @apply text-left px-4 py-3 bg-gray-50 dark:bg-gray-900 text-xs font-semibold text-gray-500 uppercase tracking-wider; }
.va-table td { @apply px-4 py-3 border-t border-gray-100 dark:border-gray-700; }
.va-form-group { @apply mb-4; }
.va-form-label { @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1; }
.va-form-input { @apply w-full px-4 py-2.5 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-xl focus:outline-none focus:border-indigo-500 transition-colors text-sm; }
.va-btn-primary { @apply inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition-colors; }
.va-btn-danger { @apply inline-flex items-center px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 text-sm font-medium rounded-xl transition-colors; }
.va-btn-secondary { @apply inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-xl transition-colors; }
.va-sidebar-link { @apply flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white transition-colors; }
.va-sidebar-link-active { @apply bg-indigo-600 text-white; }

/* === Animations === */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-ring { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { transform: scale(0.95); } }
.animate-fade-in-up { animation: fadeInUp 0.4s ease forwards; }
.animate-slide-in-right { animation: slideInRight 0.3s ease forwards; }
.animate-pulse-ring { animation: pulse-ring 1.5s infinite; }

/* === Scrollbar hide === */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* === Image lazy loading === */
img[loading="lazy"] { background: #f3f4f6; }
/* Tailwind is now precompiled (no CDN runtime), so utility fallbacks are not needed.
   Keeping them here would override Tailwind's responsive variants (e.g. md:flex). */
[x-cloak]{display:none !important;}

/* ============================================================
   Page-builder "Banner (Image / Color)" block — vh- prefix
   Raw CSS (served as a plain <link>, so no @apply / no inline styles)
   ============================================================ */
.vh-banner {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    display: flex;
}
.vh-banner__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
/* Heights / padding presets */
.vh-banner--sm { min-height: 96px;  padding: 1.25rem 1.5rem; }
.vh-banner--md { min-height: 200px; padding: 2.25rem 2.5rem; }
.vh-banner--lg { min-height: 340px; padding: 3.5rem  3rem;   }

/* Image banner */
.vh-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.vh-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
}

/* Color / gradient presets */
.vh-banner--bg-primary { background: linear-gradient(90deg, #4f46e5, #6366f1); }
.vh-banner--bg-flash   { background: linear-gradient(90deg, #dc2626, #e11d48, #ea580c); }
.vh-banner--bg-sunset  { background: linear-gradient(90deg, #f97316, #ec4899); }
.vh-banner--bg-ocean   { background: linear-gradient(90deg, #2563eb, #0d9488); }
.vh-banner--bg-purple  { background: linear-gradient(90deg, #4f46e5, #7c3aed); }
.vh-banner--bg-green   { background: linear-gradient(90deg, #059669, #10b981); }
.vh-banner--bg-yellow  { background: #facc15; }
.vh-banner--bg-dark    { background: linear-gradient(90deg, #111827, #1f2937); }

/* Typography */
.vh-banner__title    { font-size: 1.5rem; }
.vh-banner__subtitle { margin-top: 0.5rem; }
.vh-banner__btn      { margin-top: 1rem; padding: 0.75rem 1.5rem; }

@media (min-width: 640px) {
    .vh-banner__title { font-size: 1.875rem; }
}
@media (max-width: 640px) {
    .vh-banner--lg { min-height: 220px; padding: 2rem 1.5rem; }
    .vh-banner--md { min-height: 160px; padding: 1.5rem; }
}

/* ============================================================
   Banner block — professional layout (full-width, icon, timer)
   vh-banner__timer marker; raw CSS, no @apply / no inline styles
   ============================================================ */
.vh-banner-wrap--full { width: 100%; }
.vh-banner--flush { border-radius: 0; }
.vh-banner__inner--contained { max-width: 80rem; margin-left: auto; margin-right: auto; }

.vh-banner__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
}
@media (min-width: 640px) { .vh-banner__row { flex-direction: row; } }

.vh-banner__main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 auto;
}
.vh-banner__icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
@media (min-width: 640px) { .vh-banner__icon { font-size: 2.5rem; } }
.vh-banner__title--upper { text-transform: uppercase; letter-spacing: 0.025em; }

/* Live countdown timer */
.vh-banner__timer { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.vh-banner__timer-label { font-size: 0.875rem; font-weight: 700; opacity: 0.85; display: none; }
@media (min-width: 640px) { .vh-banner__timer-label { display: block; } }
.vh-banner__units { display: flex; align-items: center; gap: 0.4rem; }
.vh-banner__unit { display: flex; flex-direction: column; align-items: center; }
.vh-banner__unit-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .vh-banner__unit-box { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; } }
.vh-banner__unit-cap { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; opacity: 0.6; margin-top: 0.15rem; }
.vh-banner__colon { font-weight: 800; font-size: 1.5rem; padding-bottom: 1rem; }

/* ============================================================
   Built-in feature widgets (Apps & Features) — vh- prefix, raw CSS
   ============================================================ */
/* WhatsApp button */
.vh-wa { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); color: #fff; }
.vh-wa svg { width: 30px; height: 30px; }

/* Back-to-top button */
.vh-totop { position: fixed; right: 18px; bottom: 82px; z-index: 55; width: 44px; height: 44px; border-radius: 50%; background: rgba(17,24,39,.85); color: #fff; display: none; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.vh-totop--show { display: flex; }
.vh-totop svg { width: 22px; height: 22px; }

/* Cookie consent bar */
.vh-cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 65; max-width: 560px; margin: 0 auto; background: #111827; color: #fff; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.vh-cookie__text { margin: 0; font-size: 13px; }
.vh-cookie__btn { background: #fff; color: #111827; border: none; border-radius: 8px; padding: 8px 16px; font-weight: bold; font-size: 13px; cursor: pointer; flex-shrink: 0; }

/* Sales / social-proof popup */
.vh-pop { position: fixed; left: 16px; bottom: 16px; z-index: 58; max-width: 300px; background: #fff; color: #111827; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 12px 28px 12px 14px; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; }
.vh-pop--show { opacity: 1; transform: translateY(0); }
.vh-pop__img { font-size: 24px; flex-shrink: 0; }
.vh-pop__name { margin: 0; font-weight: bold; font-size: 13px; line-height: 1.3; }
.vh-pop__meta { margin: 2px 0 0; font-size: 11px; color: #6b7280; }
.vh-pop__close { position: absolute; top: 6px; right: 8px; background: none; border: none; font-size: 16px; color: #9ca3af; cursor: pointer; line-height: 1; }
.dark .vh-pop { background: #1f2937; color: #f9fafb; border-color: #374151; }
.dark .vh-pop__meta { color: #9ca3af; }
@media (max-width: 480px) { .vh-pop { max-width: calc(100% - 32px); } }

.vh-cookie[hidden],.vh-pop[hidden]{display:none !important}

/* ============================================================
   PROMO / ANNOUNCEMENT BAR (vh-promo) — colourful top bar with
   icon+title+subtitle items, dividers and a CTA pill. Styling
   lives here (no inline CSS); content comes from admin settings.
   ============================================================ */
.vh-promo { width: 100%; color: #fff; }
.vh-promo__inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px 28px; flex-wrap: wrap;
}
.vh-promo__items { display: flex; align-items: center; gap: 0; flex-wrap: wrap; justify-content: center; }
.vh-promo__item {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 26px; position: relative;
}
.vh-promo__item + .vh-promo__item::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 30px; width: 1px; background: rgba(255,255,255,.30);
}
.vh-promo__icon { font-size: 24px; line-height: 1; opacity: .95; display: inline-flex; }
.vh-promo__text { display: flex; flex-direction: column; line-height: 1.15; }
.vh-promo__title { font-weight: 800; font-size: 16px; letter-spacing: -.2px; }
.vh-promo__sub { font-size: 12.5px; opacity: .9; }
.vh-promo__cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #d9f99d; color: #14532d; font-weight: 800; font-size: 14px;
  padding: 9px 22px; border-radius: 999px; transition: transform .15s ease, filter .15s ease;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.35);
  animation: vh-promo-bounce 2.6s ease-in-out infinite;
  will-change: transform;
}
.vh-promo__cta:hover { animation-play-state: paused; transform: scale(1.06); filter: brightness(1.05); }

/* Attention zoom: rest, then zoom forward and settle back each cycle. */
@keyframes vh-promo-bounce {
  0%, 55%, 100% { transform: scale(1); }
  68% { transform: scale(1.14); }
  80% { transform: scale(0.97); }
  90% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vh-promo__cta { animation: none; }
}
.vh-promo__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: rgba(255,255,255,.85); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px; border-radius: 6px;
}
.vh-promo__close:hover { color: #fff; background: rgba(255,255,255,.15); }
.vh-promo[hidden] { display: none !important; }

/* Gradient presets */
.vh-promo--sunset { background: linear-gradient(90deg,#f59e0b 0%,#ec4899 52%,#8b5cf6 100%); }
.vh-promo--grape  { background: linear-gradient(90deg,#7c3aed 0%,#db2777 55%,#f43f5e 100%); }
.vh-promo--ocean  { background: linear-gradient(90deg,#06b6d4 0%,#3b82f6 52%,#6366f1 100%); }
.vh-promo--forest { background: linear-gradient(90deg,#10b981 0%,#059669 50%,#0d9488 100%); }
.vh-promo--midnight { background: linear-gradient(90deg,#0f172a 0%,#312e81 55%,#7c3aed 100%); }
.vh-promo--brand  { background: linear-gradient(90deg,var(--primary,#4f46e5) 0%,var(--secondary,#7c3aed) 52%,var(--accent,#ec4899) 100%); }

/* Responsive: tighten on tablet, simplify on phone */
@media (max-width: 860px) {
  .vh-promo__item { padding: 2px 16px; gap: 8px; }
  .vh-promo__title { font-size: 14px; }
  .vh-promo__sub { display: none; }
  .vh-promo__icon { font-size: 20px; }
}
@media (max-width: 600px) {
  .vh-promo__inner { padding: 8px 40px 8px 12px; gap: 6px 12px; }
  .vh-promo__item--extra { display: none; }
  .vh-promo__item + .vh-promo__item::before { display: none; }
  .vh-promo__cta { padding: 7px 16px; font-size: 13px; }
}

/* ============================================================
   NAV BUTTONS (vh-navbtn) — highlighted menu items rendered as
   coloured pill buttons with an optional corner badge (e.g. SALE).
   ============================================================ */
.vh-navbtn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  color: #fff; line-height: 1; position: relative; transition: filter .15s ease, transform .15s ease;
}
.vh-navbtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.vh-navbtn i { font-size: 15px; }
.vh-navbtn--brand  { background: var(--primary, #4f46e5); }
.vh-navbtn--indigo { background: #4f46e5; }
.vh-navbtn--orange { background: #f97316; }
.vh-navbtn--green  { background: #16a34a; }
.vh-navbtn--dark   { background: #1f2937; }
.vh-navbtn--pink   { background: #db2777; }
.vh-navbtn--red    { background: #dc2626; }

.vh-navbadge {
  position: absolute; top: -7px; right: -8px;
  font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .3px;
  padding: 3px 6px; border-radius: 999px; color: #fff; text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.vh-navbadge--red    { background: #dc2626; }
.vh-navbadge--green  { background: #16a34a; }
.vh-navbadge--orange { background: #f97316; }
.vh-navbadge--indigo { background: #4f46e5; }

/* ============================================================
   TESTIMONIALS (vh-testi) — professional interactive layout:
   photo avatars, glowing active card, badge-style amber stars.
   ============================================================ */
.vh-testi { background: #eef6f0; }
.dark .vh-testi { background: rgba(17,24,39,.45); }
.vh-testi__wrap { max-width: 1180px; margin: 0 auto; padding: 4rem 1.5rem 4.75rem; }
.vh-testi__title { text-align: center; font-weight: 800; letter-spacing: -.5px; font-size: clamp(1.6rem, 3.2vw, 2.5rem); color: #111827; margin-bottom: 3rem; }
.dark .vh-testi__title { color: #fff; }
.vh-testi__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .vh-testi__grid { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; } }

.vh-testi__list { display: flex; flex-direction: column; gap: .5rem; }
.vh-testi__item { display: flex; align-items: center; gap: 1.1rem; width: 100%; text-align: left; padding: .95rem 1.15rem; border-radius: 1.25rem; background: transparent; border: 0; cursor: pointer; transition: background .2s ease, box-shadow .3s ease, transform .2s ease; }
.vh-testi__item:hover { background: rgba(255,255,255,.6); }
.vh-testi__item--active { background: #fff; box-shadow: 0 26px 55px -22px rgba(16,185,129,.5), 0 10px 24px -14px rgba(0,0,0,.15); transform: translateY(-1px); }
.dark .vh-testi__item--active { background: #1f2937; box-shadow: 0 26px 55px -22px rgba(16,185,129,.35); }
.vh-testi__radio { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center; }
.vh-testi__item--active .vh-testi__radio { border-color: #10b981; }
.vh-testi__radio span { width: 7px; height: 7px; border-radius: 999px; background: transparent; }
.vh-testi__item--active .vh-testi__radio span { background: #10b981; }
.vh-testi__avatar { width: 58px; height: 58px; border-radius: 999px; object-fit: cover; flex: none; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 6px 14px -6px rgba(0,0,0,.2); }
.vh-testi__avatar-fb { width: 58px; height: 58px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; color: #0f766e; background: #ccfbf1; box-shadow: 0 0 0 4px rgba(255,255,255,.85); }
.vh-testi__name { font-weight: 700; font-size: 1.06rem; color: #111827; line-height: 1.2; }
.dark .vh-testi__name { color: #fff; }
.vh-testi__role { font-size: .9rem; color: #6b7280; }

.vh-testi__panel { padding-top: .25rem; }
.vh-testi__qmark { display: inline-block; font-family: Georgia, 'Times New Roman', serif; font-size: 4rem; line-height: .8; font-weight: 800; color: #111827; }
.dark .vh-testi__qmark { color: #f9fafb; }
.vh-testi__qtitle { font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.55rem); color: #111827; margin: 1rem 0 1.1rem; letter-spacing: -.3px; }
.dark .vh-testi__qtitle { color: #fff; }
.vh-testi__qbody { color: #4b5563; font-size: 1.03rem; line-height: 1.85; max-width: 42rem; }
.dark .vh-testi__qbody { color: #9ca3af; }
.vh-testi__stars { display: flex; gap: .45rem; margin-top: 1.75rem; }
.vh-testi__star { width: 34px; height: 34px; border-radius: .65rem; background: #fde68a; display: flex; align-items: center; justify-content: center; color: #f59e0b; }
.dark .vh-testi__star { background: rgba(245,158,11,.18); }
.vh-testi__star svg { width: 19px; height: 19px; }
.vh-testi__star--off { background: #eef0f2; color: #cbd5e1; }
.dark .vh-testi__star--off { background: rgba(255,255,255,.06); color: #4b5563; }

/* ============================================================
   INDIAN FESTIVAL HEADER (vh-fest) — saffron / marigold / maroon
   festive theme. All colours/gradients here; blade uses classes only.
   ============================================================ */
.vh-fest-topbar { background: linear-gradient(90deg,#7f1d1d 0%,#b45309 50%,#7f1d1d 100%); color: #fffbeb; }
.vh-fest-topbar a { color: rgba(255,251,235,.85); transition: color .15s; }
.vh-fest-topbar a:hover { color: #fff; }
.vh-fest-topbar select { color: rgba(255,251,235,.85); background: transparent; }
.vh-fest-greet { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px 12px; font-weight: 600; }
/* Pennant bunting: a row of triangular flags hanging from a string */
.vh-fest-bunting { display: flex; flex-wrap: nowrap; align-items: flex-start; height: 26px; overflow: hidden; background: #fffaf0; position: relative; padding: 3px 4px 0; }
.dark .vh-fest-bunting { background: #1f2937; }
.vh-fest-bunting::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; height: 2px; background: #92400e; z-index: 0; }
.dark .vh-fest-bunting::before { background: #b45309; }
.vh-fest-flag { flex: 0 0 auto; width: 0; height: 0; margin: 0 3px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 18px solid currentColor; position: relative; z-index: 1; filter: drop-shadow(0 2px 1px rgba(0,0,0,.12)); transform-origin: top center; animation: vh-fest-sway 3.4s ease-in-out infinite; }
.vh-fest-flag--saffron { color: #ea580c; }
.vh-fest-flag--gold    { color: #f59e0b; }
.vh-fest-flag--maroon  { color: #9f1239; }
.vh-fest-flag--cream   { color: #fcd34d; }
.vh-fest-flag--green   { color: #10b981; }
.vh-fest-flag--red     { color: #dc2626; }
/* Staggered delays so the flags ripple like a wave instead of moving in unison */
.vh-fest-flag:nth-child(5n)   { animation-delay: -.5s; }
.vh-fest-flag:nth-child(5n+1) { animation-delay: -1.9s; }
.vh-fest-flag:nth-child(5n+2) { animation-delay: -2.7s; }
.vh-fest-flag:nth-child(5n+3) { animation-delay: -1.1s; }
.vh-fest-flag:nth-child(5n+4) { animation-delay: -3.2s; }
@keyframes vh-fest-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .vh-fest-flag { animation: none; } }
@media (max-width: 640px) {
  .vh-fest-bunting { height: 20px; }
  .vh-fest-flag { border-left-width: 8px; border-right-width: 8px; border-top-width: 13px; margin: 0 2px; }
}
.vh-fest-logorow { background: linear-gradient(180deg,#fffaf0,#fff7ed); border-bottom: 2px solid #fcd34d; }
.dark .vh-fest-logorow { background: linear-gradient(180deg,#1f2937,#111827); border-bottom-color: #92400e; }
.vh-fest-nav { background: #fff7ed; border-bottom: 1px solid #fcd34d; }
.dark .vh-fest-nav { background: #111827; border-bottom-color: #374151; }
.vh-fest-search { border: 2px solid #ea580c; border-radius: .75rem; overflow: hidden; }
.vh-fest-divide { border-right: 1px solid #fdba74; }
.vh-fest-btn { background: linear-gradient(135deg,#ea580c,#9f1239); color: #fff; transition: filter .15s; }
.vh-fest-btn:hover { filter: brightness(1.08); }
.vh-fest-badge { background: linear-gradient(135deg,#ea580c,#b91c1c) !important; }
.vh-fest-link { color: #7c2d12; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.dark .vh-fest-link { color: #fde68a; }
.vh-fest-link:hover { color: #b91c1c; border-bottom-color: #ea580c; }
.dark .vh-fest-link:hover { color: #fbbf24; border-bottom-color: #f59e0b; }
.vh-fest-link-active { color: #b91c1c; border-bottom: 2px solid #ea580c; font-weight: 600; }
.dark .vh-fest-link-active { color: #fbbf24; border-bottom-color: #f59e0b; }
.vh-fest-icon { color: #9a3412; transition: color .15s; }
.dark .vh-fest-icon { color: #fdba74; }
.vh-fest-icon:hover { color: #b91c1c; }
.dark .vh-fest-icon:hover { color: #fbbf24; }
.vh-fest-mobilehead { background: linear-gradient(90deg,#7f1d1d,#b45309); }

/* ============================================================
   PRODUCT VIDEO (vh-prodvideo) — "Watch video" button + modal player
   ============================================================ */
.vh-prodvideo-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: .75rem; padding: 9px 18px; border-radius: .8rem; background: #111827; color: #fff; font-weight: 600; font-size: .9rem; transition: filter .15s ease, transform .15s ease; }
.dark .vh-prodvideo-btn { background: #374151; }
.vh-prodvideo-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.vh-prodvideo-btn svg { width: 18px; height: 18px; color: #f59e0b; }
.vh-prodvideo-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.78); }
.vh-prodvideo-dialog { position: relative; width: 100%; max-width: 900px; }
.vh-prodvideo-close { position: absolute; top: -2.6rem; right: 0; color: #fff; font-size: 2.1rem; line-height: 1; background: transparent; border: 0; cursor: pointer; }
.vh-prodvideo-close:hover { color: #fbbf24; }
.vh-prodvideo-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 1rem; overflow: hidden; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.65); }
.vh-prodvideo-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   SITE LOADER (vh-loader) — full-screen preloader, auto-hidden
   on window load. Styling here (no inline CSS); shown only when
   site_loader_enabled is on. Uses the theme primary colour.
   ============================================================ */
.vh-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; background: #ffffff; transition: opacity .45s ease, visibility .45s ease; }
.dark .vh-loader { background: #0b0f19; }
.vh-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.vh-loader__logo { max-height: 56px; width: auto; }
.vh-loader__name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.3px; color: #111827; }
.dark .vh-loader__name { color: #ffffff; }
.vh-loader__spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(99,102,241,.18); border-top-color: var(--primary, #4f46e5); animation: vh-loader-spin .8s linear infinite; }
@keyframes vh-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vh-loader__spinner { animation-duration: 2s; } }
/* Loader brand: scale the shared logo-mark up for the preloader */
.vh-loader__brand { transform: scale(1.7); transform-origin: center; margin-bottom: .35rem; }
/* Water-fill (pour) loader: faint logo with a colour level rising/draining */
.vh-loader__pour { position: relative; display: inline-block; line-height: 0; }
.vh-loader__pour .vh-loader__brand { margin-bottom: 0; }
.vh-loader__pour-base { opacity: .16; }
.vh-loader__pour-fill { position: absolute; inset: 0; animation: vh-pour 2.4s ease-in-out infinite; }
@keyframes vh-pour { 0%, 100% { clip-path: inset(100% 0 0 0); } 50% { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .vh-loader__pour-fill { animation: none; clip-path: inset(0 0 0 0); } .vh-loader__pour-base { opacity: .4; } }

/* ============================================================
   COLUMNS ROW — stretch a box's cards to fill the equal-height
   column so the shorter column has no empty bottom gap.
   ============================================================ */
.vh-colbox { height: 100%; display: flex; flex-direction: column; }
.vh-colbox__grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
.vh-colbox__grid > * { height: 100%; }

/* ============================================================
   DOUBLE BANNER (banner-2col) colour presets — gradients here so
   the colour choices never depend on compiled Tailwind classes.
   ============================================================ */
.vh-bn-sub { color: rgba(255, 255, 255, .85); }
.vh-bn-indigo  { background-image: linear-gradient(to right, #4f46e5, #9333ea); }
.vh-bn-amber   { background-image: linear-gradient(to right, #f59e0b, #ea580c); }
.vh-bn-emerald { background-image: linear-gradient(to right, #10b981, #0d9488); }
.vh-bn-rose    { background-image: linear-gradient(to right, #f43f5e, #db2777); }
.vh-bn-blue    { background-image: linear-gradient(to right, #2563eb, #0891b2); }
.vh-bn-slate   { background-image: linear-gradient(to right, #334155, #0f172a); }

/* ============================================================
   HEADER NAV grouping — highlighted (CTA) items always sit in the
   right cluster regardless of their order; plain items stay left.
   ============================================================ */
.vh-nav-cta { order: 1; }
/* Space between right-side CTA buttons (not the first — it owns the ml-auto push) */
.vh-nav-cta-gap { margin-left: .625rem; }

/* ============================================================
   LOYALTY POINTS — storefront hints (earn note + balance pill)
   ============================================================ */
.vh-loyalty-earn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: #b45309; }
.dark .vh-loyalty-earn { color: #fbbf24; }
.vh-loyalty-earn svg { width: 1rem; height: 1rem; flex-shrink: 0; color: #f59e0b; }
.vh-loyalty-bal { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; background: #fef3c7; color: #b45309; }
.dark .vh-loyalty-bal { background: rgba(245, 158, 11, .18); color: #fbbf24; }

/* ============================================================
   PROFILE NAV — vertical sidebar on desktop; on mobile it becomes
   a horizontal, scrollable tab strip so account content isn't pushed
   below a tall menu. (no inline CSS)
   ============================================================ */
.vh-pnav { display: flex; flex-direction: column; gap: .25rem; }
@media (max-width: 639px) {
    .vh-pnav { flex-direction: row; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
    .vh-pnav > a, .vh-pnav > form { flex: 0 0 auto; }
    .vh-pnav a, .vh-pnav button { white-space: nowrap; }
    .vh-pnav .vh-pnav-divider { display: none; }
}

/* ============================================================
   MOBILE BOTTOM NAV — guaranteed full-width fixed bar (positioning
   here so it never depends on compiled Tailwind position utilities).
   Hidden from the md breakpoint up.
   ============================================================ */
.vh-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; }
.vh-bottomnav > a { flex: 1 1 0; min-width: 0; }
@media (min-width: 768px) { .vh-bottomnav { display: none; } }
/* Keep the chat launcher above the mobile bottom nav (phones only) */
@media (max-width: 767px) { .vh-above-bottomnav { bottom: 5rem; } }

/* ============================================================
   HERO "PEEK" CAROUSEL — centered banner card with neighbouring
   slides peeking in; snap-scroll + hidden scrollbar. (no inline CSS)
   ============================================================ */
.vh-peek { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .25rem; }
.vh-peek::-webkit-scrollbar { display: none; }
.vh-peek-card { scroll-snap-align: center; flex: 0 0 86%; height: 9.5rem; border-radius: 1rem; overflow: hidden; }
@media (min-width: 768px) { .vh-peek-card { flex: 0 0 66%; height: 19rem; } }

/* Mobile bottom-nav clearance: pad the page only while the fixed bottom
   navigation is visible (phones). Replaces the un-generated md:pb-0 utility. */
.vh-bottomnav-pad { padding-bottom: 5rem; }
@media (min-width: 768px) { .vh-bottomnav-pad { padding-bottom: 0; } }

/* ============================================================
   Live-chat widget (Intercom-style, multi-tab). Theme-driven
   via --c-primary-* CSS variables. No inline styles.
   ============================================================ */
.vh-chat-root { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
.vh-chat-root .is-hidden { display: none !important; }

/* Launcher */
.vh-chat-launcher { width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--c-primary-600); color: #fff; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.vh-chat-launcher:hover { transform: scale(1.06); }
.vh-chat-launcher-icon { width: 1.75rem; height: 1.75rem; }

/* Panel */
.vh-chat-panel { position: fixed; right: 1rem; bottom: 1rem; width: 23rem; max-width: calc(100vw - 2rem); height: 41rem; max-height: calc(100vh - 2rem); background: #fff; border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; animation: vh-chat-pop .22s ease; }
@keyframes vh-chat-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

.vh-chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Header (Home) */
.vh-chat-header { position: relative; padding: 1.75rem 1.25rem 1.5rem; color: #fff; background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500)); }
.vh-chat-brand { font-size: 1.5rem; font-weight: 800; margin: .6rem 0 .15rem; line-height: 1.1; }
.vh-chat-tagline { font-size: .95rem; opacity: .92; }

/* Close / bars */
.vh-chat-x { position: absolute; top: .85rem; right: .85rem; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(255,255,255,.15); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vh-chat-x:hover { opacity: .85; }
.vh-chat-x svg { width: 1.1rem; height: 1.1rem; }
.vh-chat-x--dark { background: #f1f3f5; color: #374151; position: static; }
.vh-chat-bar { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid #eef0f2; background: #fff; flex-shrink: 0; }
.vh-chat-back { background: none; border: none; cursor: pointer; color: #374151; display: flex; padding: .15rem; }
.vh-chat-back svg { width: 1.3rem; height: 1.3rem; }
.vh-chat-bar-title { font-weight: 700; color: #111827; flex: 1; min-width: 0; }
.vh-chat-bar-title--solo { font-size: 1.05rem; }

/* Avatars */
.vh-chat-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #e5e7eb; color: #374151; font-weight: 700; }
.vh-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vh-chat-avatar svg { width: 1.5rem; height: 1.5rem; }
.vh-chat-avatar--lg { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.4); }
.vh-chat-avatar--sm { width: 2rem; height: 2rem; }
.vh-chat-avatar--sm svg { width: 1.1rem; height: 1.1rem; }
.vh-chat-avatar--wa { background: #25d366; color: #fff; }

/* Scrollable body + cards */
.vh-chat-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: #f8fafc; }
.vh-chat-card { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; background: #fff; border: 1px solid #eef0f2; border-radius: 1rem; padding: .85rem; box-shadow: 0 4px 14px rgba(0,0,0,.06); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.vh-chat-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-1px); }
.vh-chat-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vh-chat-card-title { font-weight: 700; color: #111827; font-size: .95rem; }
.vh-chat-card-sub { color: #6b7280; font-size: .82rem; }
.vh-chat-chev { width: 1.1rem; height: 1.1rem; color: #9ca3af; flex-shrink: 0; }

/* Pre-chat + fields */
.vh-chat-prechat { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; flex: 1; }
.vh-chat-pretext { font-size: .9rem; color: #374151; }
.vh-chat-presub { font-size: .78rem; color: #6b7280; }
.vh-chat-field { width: 100%; padding: .6rem .8rem; font-size: .875rem; border: 1px solid #e5e7eb; border-radius: .6rem; background: #fff; color: #1f2937; outline: none; }
.vh-chat-field:focus { border-color: var(--c-primary-500); box-shadow: 0 0 0 2px var(--c-primary-100, rgba(124,58,237,.18)); }
.vh-chat-field--round { border-radius: 9999px; flex: 1; min-width: 0; }
.vh-chat-btn { width: 100%; padding: .65rem; background: var(--c-primary-600); color: #fff; border: none; border-radius: .6rem; font-weight: 700; font-size: .875rem; cursor: pointer; }
.vh-chat-btn:hover { filter: brightness(1.05); }

/* Conversation */
.vh-chat-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vh-chat-messages { flex: 1; overflow-y: auto; padding: .85rem; background: #f8fafc; }
.vh-chat-msg { display: flex; margin-bottom: .5rem; }
.vh-chat-msg--me { justify-content: flex-end; }
.vh-chat-bubble { max-width: 85%; border-radius: 1rem; padding: .5rem .75rem; font-size: .875rem; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.vh-chat-msg--me .vh-chat-bubble { background: var(--c-primary-600); color: #fff; border-bottom-right-radius: .25rem; }
.vh-chat-msg--bot .vh-chat-bubble { background: #f1f3f5; color: #1f2937; border-bottom-left-radius: .25rem; }
.vh-chat-msg-label { display: block; font-size: .65rem; font-weight: 700; opacity: .6; margin-bottom: .15rem; }
.vh-chat-msg-time { display: block; font-size: .65rem; opacity: .6; margin-top: .15rem; }
.vh-chat-quick { display: flex; flex-direction: column; gap: .4rem; padding: 0 .85rem .5rem; align-items: flex-end; background: #f8fafc; }
.vh-chat-qbtn { border: 1px solid var(--c-primary-200, #e5e0f7); color: var(--c-primary-700, var(--c-primary-600)); background: #fff; border-radius: 9999px; padding: .5rem .9rem; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s; text-align: center; }
.vh-chat-qbtn:hover { background: var(--c-primary-50, #f5f3ff); }
.vh-chat-input { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid #eef0f2; background: #fff; flex-shrink: 0; }
.vh-chat-send { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 9999px; background: var(--c-primary-600); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vh-chat-send svg { width: 1.05rem; height: 1.05rem; }

/* FAQ accordion */
.vh-chat-faq { border: 1px solid #eef0f2; border-radius: .75rem; background: #fff; flex-shrink: 0; }
.vh-chat-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .85rem; background: none; border: none; cursor: pointer; font-weight: 600; font-size: .875rem; color: #111827; text-align: left; }
.vh-chat-faq-q .vh-chat-chev { transition: transform .2s; }
.vh-chat-faq-a { max-height: 0; overflow: hidden; padding: 0 .85rem; font-size: .83rem; color: #4b5563; line-height: 1.5; transition: max-height .3s ease, padding .3s ease; }
.vh-chat-faq.is-open .vh-chat-faq-a { max-height: 60rem; padding: .15rem .85rem .8rem; }
.vh-chat-faq.is-open .vh-chat-faq-q .vh-chat-chev { transform: rotate(180deg); }

/* Articles */
.vh-chat-article { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid #eef0f2; border-radius: .85rem; padding: .6rem; text-decoration: none; transition: box-shadow .15s; }
.vh-chat-article:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.vh-chat-article-img { width: 3.25rem; height: 3.25rem; border-radius: .6rem; object-fit: cover; flex-shrink: 0; }
.vh-chat-article-text { display: flex; flex-direction: column; min-width: 0; }
.vh-chat-article-title { font-weight: 700; font-size: .875rem; color: #111827; }
.vh-chat-article-sub { font-size: .78rem; color: #6b7280; }
.vh-chat-empty { text-align: center; color: #9ca3af; font-size: .85rem; padding: 2rem 1rem; }

/* Bottom nav */
.vh-chat-nav { display: flex; border-top: 1px solid #eef0f2; background: #fff; flex-shrink: 0; }
.vh-chat-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem 0 .5rem; font-size: .7rem; color: #6b7280; background: none; border: none; cursor: pointer; }
.vh-chat-tab svg { width: 1.4rem; height: 1.4rem; }
.vh-chat-tab.is-active { color: var(--c-primary-600); font-weight: 600; }

/* Sit above the mobile bottom-nav; go fullscreen on small phones */
@media (max-width: 767px) { .vh-chat-root { bottom: 5.25rem; } }
@media (max-width: 480px) {
    .vh-chat-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; }
}

/* hidden panel/views must stay hidden even though they declare display:flex */
.vh-chat-root [hidden] { display: none !important; }

/* Quick replies now render inside the scrollable message flow — blend with it */
.vh-chat-messages .vh-chat-quick { padding: .35rem 0 .15rem; background: transparent; }

/* ── Back-in-stock notify block ── */
.vh-restock { margin: 1rem 0; padding: 1rem; border: 1px solid #fde68a; background: #fffbeb; border-radius: .75rem; }
.dark .vh-restock { border-color: #78350f; background: #1c1917; }
.vh-restock-head { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: .75rem; }
.vh-restock-ic { width: 1.5rem; height: 1.5rem; color: #d97706; flex-shrink: 0; }
.vh-restock-head strong { display: block; color: #92400e; font-size: .95rem; }
.dark .vh-restock-head strong { color: #fbbf24; }
.vh-restock-head span { display: block; color: #a16207; font-size: .8rem; margin-top: .125rem; }
.dark .vh-restock-head span { color: #d6d3d1; }
.vh-restock-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.vh-restock-input { flex: 1 1 12rem; min-width: 0; padding: .625rem .75rem; border: 1px solid #d1d5db; border-radius: .5rem; font-size: .875rem; background: #fff; color: #111827; }
.dark .vh-restock-input { background: #0c0a09; border-color: #44403c; color: #f5f5f4; }
.vh-restock-btn { padding: .625rem 1.25rem; background: #d97706; color: #fff; font-size: .875rem; font-weight: 600; border: 0; border-radius: .5rem; cursor: pointer; white-space: nowrap; transition: background .15s; }
.vh-restock-btn:hover { background: #b45309; }
.vh-restock-ok { margin-top: .625rem; color: #15803d; font-size: .85rem; }
.dark .vh-restock-ok { color: #4ade80; }
/* ── Frequently bought together ── */
.vh-fbt { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #e5e7eb; border-radius: .75rem; }
.dark .vh-fbt { border-color: #374151; }
.vh-fbt-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; color: #111827; }
.dark .vh-fbt-title { color: #f9fafb; }
.vh-fbt-grid { display: flex; flex-direction: column; gap: .5rem; }
.vh-fbt-item { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: .5rem; cursor: pointer; }
.vh-fbt-item:hover { background: #f9fafb; }
.dark .vh-fbt-item:hover { background: #1f2937; }
.vh-fbt-item em { font-style: normal; color: #9ca3af; font-size: .78rem; }
.vh-fbt-cb { width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: #4f46e5; }
.vh-fbt-img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .5rem; flex-shrink: 0; }
.vh-fbt-name { flex: 1; min-width: 0; font-size: .875rem; color: #374151; }
.dark .vh-fbt-name { color: #d1d5db; }
.vh-fbt-price { font-size: .875rem; font-weight: 600; color: #111827; white-space: nowrap; }
.dark .vh-fbt-price { color: #f9fafb; }
.vh-fbt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5e7eb; }
.dark .vh-fbt-foot { border-color: #374151; }
.vh-fbt-total { font-size: .95rem; color: #374151; }
.dark .vh-fbt-total { color: #d1d5db; }
.vh-fbt-btn { padding: .625rem 1.25rem; background: #4f46e5; color: #fff; font-size: .875rem; font-weight: 600; border: 0; border-radius: .5rem; cursor: pointer; transition: background .15s; }
.vh-fbt-btn:hover { background: #4338ca; }
.vh-fbt-btn:disabled { opacity: .6; cursor: default; }
/* ── Captcha widget spacing ── */
.vh-captcha { margin: 1rem 0; }
.vh-captcha-err { margin-top: .5rem; color: #dc2626; font-size: .85rem; }
/* ── Marketplace (Amazon-style) header ── */
.vh-amz { font-size: 14px; }
.vh-amz-top { background: #131921; color: #fff; }
.vh-amz-wrap { max-width: 80rem; margin: 0 auto; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; }
.vh-amz-burger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: #fff; background: transparent; border: 0; border-radius: .375rem; flex-shrink: 0; }
.vh-amz-burger:hover { outline: 1px solid #fff; }
.vh-amz-burger svg { width: 1.5rem; height: 1.5rem; }
.vh-amz-logo { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; padding: .25rem; border-radius: .375rem; flex-shrink: 0; }
.vh-amz-logo:hover { outline: 1px solid #fff; }
.vh-amz-brand { display: none; font-weight: 800; letter-spacing: -.01em; }
.vh-amz-deliver { display: none; align-items: center; gap: .25rem; color: #fff; text-decoration: none; padding: .25rem .35rem; border-radius: .375rem; white-space: nowrap; }
.vh-amz-deliver:hover { outline: 1px solid #fff; }
.vh-amz-deliver-ic { width: 1.15rem; height: 1.15rem; color: #fff; }
.vh-amz-deliver-txt { display: flex; flex-direction: column; line-height: 1.1; }
.vh-amz-deliver-sub { font-size: .72rem; color: #cfd6dc; }
.vh-amz-deliver-main { font-size: .82rem; font-weight: 700; }

.vh-amz-search { display: none; position: relative; flex: 1 1 auto; min-width: 0; align-items: stretch; border-radius: .375rem; overflow: hidden; }
.vh-amz-search:focus-within { box-shadow: 0 0 0 3px #f90; border-radius: .375rem; }
.vh-amz-cat { display: inline-flex; align-items: center; gap: .25rem; background: #e6e6e6; color: #333; border: 0; padding: 0 .6rem; font-size: .78rem; white-space: nowrap; cursor: pointer; max-width: 9rem; }
.vh-amz-cat:hover { background: #dcdcdc; }
.vh-amz-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-amz-cat svg { width: .9rem; height: .9rem; flex-shrink: 0; }
.vh-amz-input { flex: 1 1 auto; min-width: 0; border: 0; padding: .6rem .75rem; font-size: .9rem; color: #111; background: #fff; }
.vh-amz-input:focus { outline: none; }
.vh-amz-go { display: inline-flex; align-items: center; justify-content: center; background: #febd69; color: #111; border: 0; padding: 0 1rem; cursor: pointer; flex-shrink: 0; }
.vh-amz-go:hover { background: #f3a847; }
.vh-amz-go svg { width: 1.35rem; height: 1.35rem; }
.vh-amz-catmenu { position: absolute; top: 100%; left: 0; margin-top: .4rem; width: 15rem; max-height: 18rem; overflow-y: auto; background: #fff; color: #111; border: 1px solid #e5e7eb; border-radius: .5rem; box-shadow: 0 10px 25px rgba(0,0,0,.18); padding: .25rem 0; z-index: 60; }
.vh-amz-catopt { display: block; width: 100%; text-align: left; padding: .5rem 1rem; font-size: .82rem; color: #333; background: transparent; border: 0; cursor: pointer; }
.vh-amz-catopt:hover { background: #f3f4f6; }

.vh-amz-right { display: flex; align-items: center; gap: .15rem; margin-left: auto; flex-shrink: 0; }
.vh-amz-lang { display: none; align-items: center; gap: .3rem; color: #fff; text-decoration: none; padding: .4rem .5rem; border-radius: .375rem; font-weight: 700; font-size: .82rem; }
.vh-amz-lang:hover, .vh-amz-acct:hover, .vh-amz-orders:hover { outline: 1px solid #fff; }
.vh-amz-lang-ic { width: 1.1rem; height: 1.1rem; }
.vh-amz-acct { display: none; flex-direction: column; line-height: 1.1; color: #fff; text-decoration: none; padding: .35rem .5rem; border-radius: .375rem; white-space: nowrap; }
.vh-amz-acct-sub { font-size: .72rem; color: #cfd6dc; }
.vh-amz-acct-main { font-size: .82rem; font-weight: 700; }
.vh-amz-orders { display: none; flex-direction: column; line-height: 1.1; color: #fff; text-decoration: none; padding: .35rem .5rem; border-radius: .375rem; white-space: nowrap; }
.vh-amz-orders-sub { font-size: .72rem; color: #cfd6dc; }
.vh-amz-orders-main { font-size: .82rem; font-weight: 700; }

.vh-amz-cart { position: relative; display: inline-flex; align-items: flex-end; gap: .25rem; color: #fff; background: transparent; border: 0; padding: .35rem .4rem; border-radius: .375rem; cursor: pointer; }
.vh-amz-cart:hover { outline: 1px solid #fff; }
.vh-amz-cart-ic { position: relative; display: inline-flex; }
.vh-amz-cart-ic svg { width: 1.7rem; height: 1.7rem; }
.vh-amz-badge { position: absolute; top: -.35rem; left: .9rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: flex; align-items: center; justify-content: center; background: transparent; color: #f08804; font-size: .85rem; font-weight: 800; line-height: 1; }
.vh-amz-cart-label { display: none; font-size: .82rem; font-weight: 700; }

.vh-amz-search-m { display: flex; align-items: stretch; gap: 0; margin: 0 .25rem .25rem; border-radius: .375rem; overflow: hidden; }
.vh-amz-input-m { flex: 1 1 auto; min-width: 0; border: 0; padding: .6rem .75rem; font-size: .9rem; color: #111; background: #fff; }
.vh-amz-input-m:focus { outline: none; }
.vh-amz-go-m { display: inline-flex; align-items: center; justify-content: center; background: #febd69; color: #111; border: 0; padding: 0 1rem; flex-shrink: 0; }
.vh-amz-go-m svg { width: 1.3rem; height: 1.3rem; }

.vh-amz-nav { background: #232f3e; color: #fff; }
.vh-amz-navwrap { display: flex; align-items: center; gap: .25rem; padding: .25rem .5rem; overflow-x: auto; }
.vh-amz-all { display: inline-flex; align-items: center; gap: .3rem; color: #fff; background: transparent; border: 0; padding: .4rem .5rem; font-size: .85rem; font-weight: 700; border-radius: .375rem; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.vh-amz-all:hover { outline: 1px solid #fff; }
.vh-amz-all svg { width: 1.15rem; height: 1.15rem; }
.vh-amz-links { display: flex; align-items: center; gap: .1rem; overflow-x: auto; }
.vh-amz-link { color: #fff; text-decoration: none; padding: .4rem .6rem; font-size: .82rem; border-radius: .375rem; white-space: nowrap; }
.vh-amz-link:hover { outline: 1px solid #fff; }

.vh-amz-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70; }
.vh-amz-drawer { position: fixed; top: 0; left: 0; height: 100%; width: 18rem; max-width: 85vw; background: #fff; color: #111; z-index: 80; display: flex; flex-direction: column; box-shadow: 2px 0 20px rgba(0,0,0,.25); }
.dark .vh-amz-drawer { background: #111827; color: #f9fafb; }
.vh-amz-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: #232f3e; color: #fff; padding: .9rem 1rem; font-weight: 700; }
.vh-amz-drawer-head a { color: #fff; text-decoration: none; }
.vh-amz-drawer-x { color: #fff; background: transparent; border: 0; cursor: pointer; }
.vh-amz-drawer-x svg { width: 1.4rem; height: 1.4rem; }
.vh-amz-drawer-body { flex: 1; overflow-y: auto; padding: .5rem 0; }
.vh-amz-drawer-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .7rem 1rem; font-size: .9rem; color: #111; text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.dark .vh-amz-drawer-link { color: #e5e7eb; }
.vh-amz-drawer-link:hover { background: #f3f4f6; }
.dark .vh-amz-drawer-link:hover { background: #1f2937; }
.vh-amz-drawer-toggle svg { width: 1rem; height: 1rem; transition: transform .15s; }
.vh-amz-drawer-sublink { display: block; padding: .55rem 1rem .55rem 1.75rem; font-size: .85rem; color: #4b5563; text-decoration: none; }
.dark .vh-amz-drawer-sublink { color: #9ca3af; }
.vh-amz-drawer-sublink:hover { background: #f3f4f6; color: #111; }
.dark .vh-amz-drawer-sublink:hover { background: #1f2937; color: #fff; }
.vh-amz-drawer-sep { padding: .6rem 1rem .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }

@media (min-width: 768px) {
  .vh-amz-wrap { gap: .75rem; padding: .5rem 1rem; }
  .vh-amz-burger { display: none; }
  .vh-amz-brand { display: inline; }
  .vh-amz-deliver { display: inline-flex; }
  .vh-amz-search { display: flex; }
  .vh-amz-search-m { display: none; }
  .vh-amz-lang { display: inline-flex; }
  .vh-amz-acct { display: inline-flex; }
  .vh-amz-orders { display: inline-flex; }
  .vh-amz-cart-label { display: inline; }
}
/* ── Multi-vendor storefront ── */
.vh-soldby { display: inline-flex; align-items: center; gap: .4rem; margin: .75rem 0; padding: .4rem .75rem; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 9999px; font-size: .82rem; }
.dark .vh-soldby { background: #1e1b4b; border-color: #312e81; }
.vh-soldby-label { color: #6b7280; }
.dark .vh-soldby-label { color: #9ca3af; }
.vh-soldby-name { color: #4f46e5; font-weight: 600; text-decoration: none; }
.dark .vh-soldby-name { color: #a5b4fc; }
.vh-soldby-name:hover { text-decoration: underline; }
.vh-store-head { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; }
.dark .vh-store-head { background: #111827; border-color: #374151; }
.vh-store-logo { width: 5rem; height: 5rem; border-radius: .75rem; object-fit: cover; background: #f3f4f6; flex-shrink: 0; }
.vh-store-name { font-size: 1.5rem; font-weight: 800; color: #111827; }
.dark .vh-store-name { color: #f9fafb; }
.vh-store-sub { font-size: .82rem; color: #9ca3af; }
.vh-store-desc { margin-top: .5rem; font-size: .9rem; color: #4b5563; }
.dark .vh-store-desc { color: #d1d5db; }
/* ── Vendor store banner + policies ── */
.vh-store-banner { width: 100%; max-height: 260px; object-fit: cover; border-radius: 1rem; margin-bottom: 1rem; }
.vh-store-policies { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.vh-store-policies > div { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem 1.25rem; }
.dark .vh-store-policies > div { background: #111827; border-color: #374151; }
.vh-store-policies h3 { font-weight: 600; color: #111827; margin-bottom: .35rem; }
.dark .vh-store-policies h3 { color: #f9fafb; }
.vh-store-policies p { font-size: .9rem; color: #4b5563; white-space: pre-line; }
.dark .vh-store-policies p { color: #d1d5db; }
@media (min-width: 768px) { .vh-store-policies { grid-template-columns: 1fr 1fr; } }
/* ── Marketplace (Amazon-style) product page ── */
.vh-amzp-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.vh-amzp-title { font-size: 1.4rem; font-weight: 600; line-height: 1.3; color: #0f1111; }
.dark .vh-amzp-title { color: #f5f5f5; }
.vh-amzp-rating { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; text-decoration: none; }
.vh-amzp-stars { color: #ffa41c; letter-spacing: 1px; }
.vh-amzp-stars-lg { font-size: 1.25rem; }
.vh-amzp-rating-n { font-weight: 600; color: #0f1111; }
.dark .vh-amzp-rating-n { color: #f5f5f5; }
.vh-amzp-rating-c { color: #007185; font-size: .85rem; }
.vh-amzp-hr { border: 0; border-top: 1px solid #e7e7e7; margin: .9rem 0; }
.dark .vh-amzp-hr { border-color: #333; }
.vh-amzp-price-row { display: flex; align-items: center; gap: .5rem; }
.vh-amzp-disc { color: #cc0c39; font-size: 1.4rem; font-weight: 400; }
.vh-amzp-price { font-size: 1.8rem; font-weight: 600; color: #0f1111; }
.dark .vh-amzp-price { color: #f5f5f5; }
.vh-amzp-mrp { font-size: .85rem; color: #565959; margin-top: .15rem; }
.dark .vh-amzp-mrp { color: #b7b7b7; }
.vh-amzp-tax { font-size: .8rem; color: #565959; }
.dark .vh-amzp-tax { color: #b7b7b7; }
.vh-amzp-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1rem 0; }
.vh-amzp-offer { border: 1px solid #e7e7e7; border-radius: .5rem; padding: .6rem .75rem; }
.dark .vh-amzp-offer { border-color: #3a3a3a; }
.vh-amzp-offer-t { display: block; font-size: .82rem; font-weight: 700; color: #0f1111; }
.dark .vh-amzp-offer-t { color: #f5f5f5; }
.vh-amzp-offer-d { display: block; font-size: .74rem; color: #565959; }
.dark .vh-amzp-offer-d { color: #b7b7b7; }
.vh-amzp-about { margin-top: 1rem; }
.vh-amzp-h2 { font-size: 1.1rem; font-weight: 700; color: #0f1111; margin-bottom: .6rem; }
.dark .vh-amzp-h2 { color: #f5f5f5; }
.vh-amzp-bullets { list-style: disc; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .35rem; }
.vh-amzp-bullets li { font-size: .875rem; color: #333; }
.dark .vh-amzp-bullets li { color: #ccc; }

.vh-amzp-buybox { border: 1px solid #d5d9d9; border-radius: .75rem; padding: 1.1rem; align-self: start; }
.dark .vh-amzp-buybox { border-color: #3a3a3a; background: #161616; }
.vh-amzp-bb-price { font-size: 1.5rem; font-weight: 600; color: #0f1111; }
.dark .vh-amzp-bb-price { color: #f5f5f5; }
.vh-amzp-bb-deliver { font-size: .85rem; color: #565959; margin-top: .3rem; }
.dark .vh-amzp-bb-deliver { color: #b7b7b7; }
.vh-amzp-bb-deliver strong { color: #0f1111; }
.dark .vh-amzp-bb-deliver strong { color: #f5f5f5; }
.vh-amzp-bb-stock { margin: .6rem 0; font-size: 1.05rem; font-weight: 600; }
.vh-amzp-bb-stock.is-in { color: #007600; }
.vh-amzp-bb-stock.is-out { color: #cc0c39; }
.vh-amzp-qty { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .85rem; color: #565959; }
.vh-amzp-qtybtn { width: 2rem; height: 2rem; border: 1px solid #d5d9d9; border-radius: .4rem; background: #f7f8f8; color: #0f1111; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.dark .vh-amzp-qtybtn { background: #2a2a2a; color: #f5f5f5; border-color: #444; }
.vh-amzp-qtyval { min-width: 1.5rem; text-align: center; font-weight: 600; color: #0f1111; }
.dark .vh-amzp-qtyval { color: #f5f5f5; }
.vh-amzp-btn-cart, .vh-amzp-btn-buy { display: block; width: 100%; text-align: center; border: 0; border-radius: 999px; padding: .6rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer; margin-bottom: .55rem; }
.vh-amzp-btn-cart { background: #ffd814; color: #0f1111; }
.vh-amzp-btn-cart:hover { background: #f7ca00; }
.vh-amzp-btn-buy { background: #ffa41c; color: #0f1111; }
.vh-amzp-btn-buy:hover { background: #fa8900; }
.vh-amzp-secure { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: #565959; margin: .5rem 0; }
.vh-amzp-secure svg { width: 1rem; height: 1rem; }
.dark .vh-amzp-secure { color: #b7b7b7; }
.vh-amzp-bb-meta { border-top: 1px solid #e7e7e7; padding-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.dark .vh-amzp-bb-meta { border-color: #333; }
.vh-amzp-bb-meta > div { display: flex; justify-content: space-between; font-size: .8rem; }
.vh-amzp-bb-meta span { color: #565959; }
.dark .vh-amzp-bb-meta span { color: #b7b7b7; }
.vh-amzp-bb-meta strong { color: #007185; font-weight: 500; }
.vh-amzp-wish { width: 100%; margin-top: .7rem; border: 1px solid #d5d9d9; border-radius: 999px; padding: .5rem; background: #fff; color: #0f1111; font-size: .85rem; cursor: pointer; }
.dark .vh-amzp-wish { background: #2a2a2a; color: #f5f5f5; border-color: #444; }
.vh-amzp-wish:hover { background: #f7f8f8; }
.dark .vh-amzp-wish:hover { background: #333; }

.vh-amzp-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e7e7e7; }
.dark .vh-amzp-section { border-color: #333; }
.vh-amzp-spectable { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vh-amzp-spectable th, .vh-amzp-spectable td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid #eee; vertical-align: top; }
.dark .vh-amzp-spectable th, .dark .vh-amzp-spectable td { border-color: #333; }
.vh-amzp-spectable th { width: 32%; background: #f7f8f8; color: #0f1111; font-weight: 600; }
.dark .vh-amzp-spectable th { background: #1f1f1f; color: #f5f5f5; }
.vh-amzp-spectable td { color: #333; }
.dark .vh-amzp-spectable td { color: #ccc; }

.vh-amzp-reviews { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.vh-amzp-rbig { font-size: 2.5rem; font-weight: 700; color: #0f1111; }
.dark .vh-amzp-rbig { color: #f5f5f5; }
.vh-amzp-rcount { font-size: .8rem; color: #565959; margin-bottom: .75rem; }
.dark .vh-amzp-rcount { color: #b7b7b7; }
.vh-amzp-bars { display: flex; flex-direction: column; gap: .35rem; }
.vh-amzp-bar-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.vh-amzp-bar-label { color: #007185; white-space: nowrap; width: 2.5rem; }
.vh-amzp-bar-pct { color: #565959; width: 2.5rem; text-align: right; }
.dark .vh-amzp-bar-pct { color: #b7b7b7; }
.vh-amzp-meter { flex: 1; height: 1.1rem; border: 0; border-radius: .25rem; overflow: hidden; -webkit-appearance: none; appearance: none; background: #e7e7e7; }
.dark .vh-amzp-meter { background: #333; }
.vh-amzp-meter::-webkit-progress-bar { background: #e7e7e7; border-radius: .25rem; }
.dark .vh-amzp-meter::-webkit-progress-bar { background: #333; }
.vh-amzp-meter::-webkit-progress-value { background: #ffa41c; border-radius: .25rem; }
.vh-amzp-meter::-moz-progress-bar { background: #ffa41c; }
.vh-amzp-review { border-top: 1px solid #eee; padding: .8rem 0; }
.dark .vh-amzp-review { border-color: #333; }
.vh-amzp-review-head { display: flex; align-items: center; gap: .5rem; }
.vh-amzp-review-av { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #e7e7e7; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #555; }
.vh-amzp-review-name { font-size: .85rem; font-weight: 600; color: #0f1111; }
.dark .vh-amzp-review-name { color: #f5f5f5; }
.vh-amzp-review-stars { color: #ffa41c; font-size: .8rem; margin-left: auto; }
.vh-amzp-review-title { font-weight: 600; font-size: .875rem; margin-top: .4rem; color: #0f1111; }
.dark .vh-amzp-review-title { color: #f5f5f5; }
.vh-amzp-review-body { font-size: .85rem; color: #333; margin-top: .2rem; }
.dark .vh-amzp-review-body { color: #ccc; }
.vh-amzp-review-reply { margin-top: .5rem; padding: .5rem .75rem; background: #f7f8f8; border-radius: .5rem; font-size: .82rem; color: #444; }
.dark .vh-amzp-review-reply { background: #1f1f1f; color: #bbb; }

@media (min-width: 1024px) {
  .vh-amzp-grid { grid-template-columns: 42% 1fr 300px; align-items: start; }
  .vh-amzp-buybox { position: sticky; top: 90px; }
  .vh-amzp-offers { grid-template-columns: repeat(4, 1fr); }
  .vh-amzp-reviews { grid-template-columns: 300px 1fr; }
}
/* ==========================================================================
   Settings → Appearance
   Classes are added to <html>/<body> by App\Services\Appearance only when a
   setting differs from the theme default; values come from CSS variables
   printed in the layout's :root block.
   ========================================================================== */
html.ap-fs { font-size: var(--fs-base); }
html:not(.dark) body.ap-bg { background-color: var(--c-bg); }
html:not(.dark) body.ap-text,
html:not(.dark) body.ap-text .text-gray-900 { color: var(--c-text); }
body.ap-h1 h1 { font-size: var(--fs-h1); line-height: 1.2; }
body.ap-cw .max-w-7xl { max-width: var(--shop-container); }

/* Boxed / wide page frame */
html.ap-framed { background-color: #e5e7eb; }
html.dark.ap-framed { background-color: #000; }
body.ap-framed { max-width: var(--shop-frame); margin-left: auto; margin-right: auto; box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 12px 48px rgb(0 0 0 / .08); }

/* Header switches. .shop-hdr wraps every header style without adding a box. */
.shop-hdr { display: contents; }
.hdr-no-search .shop-hdr form[action$="/search"],
.hdr-no-search .shop-hdr [\@click*="searchOpen = !searchOpen"],
.hdr-no-search .shop-hdr [\@click*="searchOpen = true"],
.hdr-no-search .shop-hdr [x-show="searchOpen"],
.hdr-no-wishlist .shop-hdr a[href$="/wishlist"],
.hdr-no-cart .shop-hdr a[href$="/cart"],
.hdr-no-cart .shop-hdr [onclick^="openCart"],
.hdr-no-cart .shop-hdr [\@click*="cartOpen = true"],
.hdr-no-cart .shop-hdr [\@click*="cartOpen = !cartOpen"],
.hdr-no-cart .shop-hdr [aria-label*="cart" i],
.hdr-no-cart .shop-hdr [data-cart-trigger] { display: none; }

/* Footer: light style */
html:not(.dark) .vh-ftr--light { background-color: #fff; color: #4b5563; border-top: 1px solid #e5e7eb; }
html:not(.dark) .vh-ftr--light .text-white { color: #111827; }
html:not(.dark) .vh-ftr--light .text-gray-300,
html:not(.dark) .vh-ftr--light .text-gray-400 { color: #4b5563; }
html:not(.dark) .vh-ftr--light .text-gray-500 { color: #6b7280; }
html:not(.dark) .vh-ftr--light a:hover { color: var(--c-primary-600); }
html:not(.dark) .vh-ftr--light .bg-gray-800 { background-color: #f3f4f6; color: #374151; }
html:not(.dark) .vh-ftr--light .border-gray-800,
html:not(.dark) .vh-ftr--light .border-gray-700 { border-color: #e5e7eb; }
html:not(.dark) .vh-ftr--light input { color: #111827; }
html:not(.dark) .vh-ftr--light img.invert { filter: none; }

/* ==========================================================================
   Customer account area (/profile): dashboard, sidebar, reviews, coupons.
   Mobile-first; brand colours from the --c-primary-* variables.
   ========================================================================== */
.vh-acc-wrap, .vh-acc-side, .vh-acc-bnav { --acc-card: #fff; --acc-border: #eceff4; --acc-text: #111827; --acc-muted: #6b7280; --acc-soft: #f6f8fb; }
html.dark .vh-acc-wrap, html.dark .vh-acc-side, html.dark .vh-acc-bnav { --acc-card: #111827; --acc-border: #1f2937; --acc-text: #f3f4f6; --acc-muted: #9ca3af; --acc-soft: #0b1220; }
.vh-acc-wrap { max-width: 80rem; margin: 0 auto; padding: 1rem 1rem 2rem; color: var(--acc-text); }
.vh-acc-layout { display: flex; flex-direction: column; gap: 1.25rem; }
.vh-acc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.vh-acc-card { background: var(--acc-card); border: 1px solid var(--acc-border); border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 2px rgb(16 24 40 / .04); min-width: 0; }
.vh-acc-muted { color: var(--acc-muted); font-size: .8125rem; }
.vh-acc-strong { font-weight: 600; color: var(--acc-text); }
.vh-acc-nowrap { white-space: nowrap; }
.vh-acc-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-acc-title { font-size: 1.75rem; font-weight: 800; line-height: 1.2; color: var(--acc-text); }
.vh-acc-head { display: grid; gap: .25rem; }
.vh-acc-h2 { font-size: 1.0625rem; font-weight: 700; color: var(--acc-text); }
.vh-acc-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.vh-acc-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; color: var(--c-primary-600); white-space: nowrap; }
.vh-acc-link:hover { color: var(--c-primary-700); }
.vh-acc-chev { color: var(--acc-muted); flex-shrink: 0; }
@media (max-width: 767px) { .vh-acc-only-d { display: none !important; } }
@media (min-width: 768px) { .vh-acc-only-m { display: none !important; } }

/* Buttons + pills */
.vh-acc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .55rem 1rem; border-radius: .6rem; border: 1px solid var(--c-primary-600); background: var(--c-primary-600); color: #fff; font-size: .8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
.vh-acc-btn:hover { background: var(--c-primary-700); }
.vh-acc-btn:disabled { opacity: .5; cursor: not-allowed; }
.vh-acc-btn--ghost { background: transparent; color: var(--c-primary-600); border-color: var(--acc-border); }
.vh-acc-btn--ghost:hover { background: var(--c-primary-50); }
html.dark .vh-acc-btn--ghost:hover { background: rgb(255 255 255 / .05); }
.vh-acc-btn--sm { padding: .4rem .75rem; font-size: .75rem; }
.vh-acc-btn--block { width: 100%; }
.vh-acc-iconbtn { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid var(--acc-border); background: transparent; color: #dc2626; cursor: pointer; }
.vh-acc-iconbtn:hover { background: #fef2f2; }
.vh-acc-pill { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: .4rem; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.vh-acc-pill--green  { background: #dcfce7; color: #15803d; }
.vh-acc-pill--blue   { background: #dbeafe; color: #1d4ed8; }
.vh-acc-pill--yellow { background: #fef3c7; color: #b45309; }
.vh-acc-pill--orange { background: #ffedd5; color: #c2410c; }
.vh-acc-pill--red    { background: #fee2e2; color: #b91c1c; }
.vh-acc-pill--purple { background: #f3e8ff; color: #7e22ce; }
.vh-acc-pill--indigo { background: #e0e7ff; color: #4338ca; }
.vh-acc-pill--gray   { background: #f1f5f9; color: #475569; }
html.dark .vh-acc-pill { background: rgb(255 255 255 / .08); }

/* Tones for icon boxes */
.vh-acc-tone--blue   { --tone-bg: #eaf2ff; --tone-fg: #2563eb; }
.vh-acc-tone--green  { --tone-bg: #e8f8ef; --tone-fg: #16a34a; }
.vh-acc-tone--orange { --tone-bg: #fff4e5; --tone-fg: #f59e0b; }
.vh-acc-tone--purple { --tone-bg: #f3ecff; --tone-fg: #9333ea; }
.vh-acc-tone--pink   { --tone-bg: #ffeef3; --tone-fg: #e11d48; }
.vh-acc-tone--yellow { --tone-bg: #fff8e1; --tone-fg: #eab308; }
html.dark [class*="vh-acc-tone--"] { --tone-bg: rgb(255 255 255 / .06); }

/* Sidebar: pill row on phones, column from 640px */
.vh-acc-nav { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .125rem; }
.vh-acc-nav::-webkit-scrollbar { display: none; }
.vh-acc-nav__out { display: contents; }
.vh-acc-nav__out .vh-acc-nav__link { font: inherit; font-size: .875rem; font-weight: 500; text-align: left; }
.vh-acc-nav__link { position: relative; display: flex; align-items: center; gap: .75rem; padding: .55rem .9rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; color: var(--acc-muted); background: var(--acc-card); border: 1px solid var(--acc-border); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.vh-acc-nav__link .bi { font-size: 1.125rem; }
.vh-acc-nav__link:hover { color: var(--acc-text); }
.vh-acc-nav__link.is-active { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-primary-600) 25%, transparent); }
.vh-acc-nav__badge { min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.vh-acc-nav__go { display: none; }
.vh-acc-side--desktop { display: none; }
@media (min-width: 640px) {
    .vh-acc-layout { flex-direction: row; align-items: flex-start; }
    .vh-acc-side, .vh-acc-side--desktop { display: block; width: 13.5rem; flex-shrink: 0; position: sticky; top: 6rem; }
    .vh-acc-nav { flex-direction: column; overflow: visible; gap: .25rem; }
    .vh-acc-nav__link { border-color: transparent; background: transparent; padding: .7rem 1rem; }
    .vh-acc-nav__link:hover { background: var(--acc-soft); }
    .vh-acc-nav__link.is-active:hover { background: var(--c-primary-600); }
    .vh-acc-nav__out .vh-acc-nav__link { width: 100%; }
    .vh-acc-nav__label { flex: 1; }
    .vh-acc-nav__go { display: inline; font-size: .8rem; }
}
@media (min-width: 1024px) { .vh-acc-side, .vh-acc-side--desktop { width: 15rem; } .vh-acc-wrap { padding: 1.5rem 1.5rem 3rem; } }

/* Account bottom bar (phones) */
.vh-acc-bnav { background: var(--acc-card); border-top: 1px solid var(--acc-border); }
.vh-acc-bnav__link { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .55rem 0; font-size: .6875rem; font-weight: 500; color: #6b7280; }
.vh-acc-bnav__link .bi { font-size: 1.3rem; }
.vh-acc-bnav__link.is-active { color: var(--c-primary-600); }

/* Welcome (phones) + profile card */
.vh-acc-welcome { display: flex; align-items: center; gap: 1rem; }
.vh-acc-welcome__body { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.vh-acc-welcome__name { font-size: 1.25rem; font-weight: 800; color: var(--acc-text); }
.vh-acc-avatar { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.vh-acc-avatar--lg { width: 4rem; height: 4rem; }
.vh-acc-profile { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.vh-acc-profile__body { flex: 1; min-width: 8rem; display: grid; gap: .1rem; }

/* Stats */
.vh-acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.vh-acc-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .75rem .25rem; background: var(--tone-bg); border-color: transparent; }
.vh-acc-stat__icon { font-size: 1.5rem; color: var(--tone-fg); line-height: 1; }
.vh-acc-stat__body { display: grid; gap: .15rem; min-width: 0; }
.vh-acc-stat__label { font-size: .75rem; color: var(--acc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-acc-stat__value { font-size: 1.375rem; font-weight: 800; color: var(--acc-text); line-height: 1.1; }
@media (min-width: 768px) {
    .vh-acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .vh-acc-stat { flex-direction: row; text-align: left; align-items: center; gap: 1rem; padding: 1.1rem; background: var(--acc-card); border-color: var(--acc-border); }
    .vh-acc-stat__icon { width: 4.25rem; height: 4.25rem; border-radius: .9rem; background: var(--tone-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 1.85rem; flex-shrink: 0; }
    .vh-acc-stat__label { font-size: .8125rem; color: var(--acc-text); }
    .vh-acc-stat__value { font-size: 1.5rem; }
    .vh-acc-stat:hover .vh-acc-link { color: var(--c-primary-700); }
}
@media (min-width: 1280px) { .vh-acc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Main grid */
.vh-acc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.vh-acc-side2, .vh-acc-bottom { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 768px) { .vh-acc-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
    .vh-acc-grid { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "orders side" "bottom side"; }
    .vh-acc-orders { grid-area: orders; }
    .vh-acc-side2 { grid-area: side; }
    .vh-acc-bottom { grid-area: bottom; }
}

/* Orders */
.vh-acc-tablewrap { overflow-x: auto; }
.vh-acc-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.vh-acc-table th { text-align: left; font-weight: 600; padding: .65rem .75rem; background: var(--acc-soft); color: var(--acc-text); white-space: nowrap; }
.vh-acc-table th:first-child { border-radius: .5rem 0 0 .5rem; }
.vh-acc-table th:last-child { border-radius: 0 .5rem .5rem 0; }
.vh-acc-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--acc-border); vertical-align: middle; }
.vh-acc-table tr:last-child td { border-bottom: 0; }
.vh-acc-item { display: flex; align-items: center; gap: .65rem; min-width: 9rem; }
.vh-acc-ono { display: grid; gap: .1rem; font-size: .75rem; word-break: break-all; min-width: 7rem; }
.vh-acc-ono .vh-acc-muted { font-size: .75rem; word-break: normal; white-space: nowrap; }
.vh-acc-item__txt { display: grid; min-width: 0; }
.vh-acc-item__name { font-weight: 500; color: var(--acc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-acc-thumb { width: 2.75rem; height: 2.75rem; border-radius: .5rem; object-fit: cover; background: var(--acc-soft); flex-shrink: 0; }
.vh-acc-thumb--lg { width: 4.25rem; height: 4.25rem; border-radius: .75rem; }
.vh-acc-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--acc-muted); }
.vh-acc-olist { display: grid; }
.vh-acc-orow { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--acc-border); }
.vh-acc-orow:last-child { border-bottom: 0; padding-bottom: 0; }
.vh-acc-orow__body { flex: 1; min-width: 0; display: grid; gap: .05rem; font-size: .875rem; }

/* Shortcuts */
.vh-acc-shortcuts { display: grid; gap: .6rem; margin-top: .875rem; }
.vh-acc-shortcut { display: flex; align-items: center; gap: .875rem; padding: .7rem; border: 1px solid var(--acc-border); border-radius: .875rem; transition: border-color .15s, box-shadow .15s; }
.vh-acc-shortcut:hover { border-color: var(--c-primary-300); box-shadow: 0 4px 14px rgb(16 24 40 / .06); }
.vh-acc-shortcut__icon { width: 3rem; height: 3rem; border-radius: .75rem; background: var(--tone-bg); color: var(--tone-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.vh-acc-shortcut__body { flex: 1; min-width: 0; display: grid; gap: .1rem; }

/* Wishlist */
.vh-acc-wish { display: flex; gap: .75rem; overflow-x: auto; scrollbar-width: none; }
.vh-acc-wish::-webkit-scrollbar { display: none; }
.vh-acc-wcard { position: relative; flex: 0 0 9rem; display: flex; flex-direction: column; gap: .3rem; font-size: .8125rem; }
.vh-acc-wcard__img { display: block; aspect-ratio: 1; border-radius: .75rem; overflow: hidden; background: var(--acc-soft); }
.vh-acc-wcard__img img { width: 100%; height: 100%; object-fit: cover; }
.vh-acc-wcard__heart { position: absolute; top: .4rem; right: .4rem; width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 0; background: rgb(255 255 255 / .92); color: #e11d48; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .12); }
.vh-acc-wcard__name { font-weight: 600; color: var(--acc-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.1em; }
.vh-acc-wcard .vh-acc-btn { margin-top: auto; }
.vh-acc-stars { display: inline-flex; align-items: center; gap: .1rem; color: #f59e0b; font-size: .7rem; }
.vh-acc-stars .vh-acc-muted { margin-left: .25rem; font-size: .7rem; }
@media (min-width: 768px) {
    .vh-acc-wish { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); overflow: visible; }
    .vh-acc-wcard { flex: none; }
}

/* Addresses */
.vh-acc-addr { display: flex; gap: .875rem; padding: .875rem; border: 1px solid var(--acc-border); border-radius: .875rem; margin-bottom: .75rem; }
.vh-acc-addr__icon { width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: var(--c-primary-50); color: var(--c-primary-600); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
html.dark .vh-acc-addr__icon { background: rgb(255 255 255 / .06); }
.vh-acc-addr__body { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: .8125rem; }
.vh-acc-addr__body .vh-acc-strong { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vh-acc-addr__acts { display: flex; align-items: flex-start; gap: .4rem; }
.vh-acc-addbtn { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem; border-radius: .75rem; background: var(--c-primary-50); color: var(--c-primary-600); font-weight: 600; font-size: .875rem; border: 1px dashed var(--c-primary-200); }
html.dark .vh-acc-addbtn { background: rgb(255 255 255 / .04); }

/* Promo banner (phones) */
.vh-acc-banner { display: block; border-radius: 1rem; overflow: hidden; }
.vh-acc-banner img { width: 100%; height: auto; display: block; }

/* Empty states + pager */
.vh-acc-empty { display: grid; justify-items: center; gap: .5rem; padding: 1.75rem .5rem; text-align: center; color: var(--acc-muted); font-size: .875rem; }
.vh-acc-empty .bi { font-size: 2rem; opacity: .6; }


/* Reviews page */
.vh-acc-review { display: flex; gap: .875rem; padding: 1rem 0; border-bottom: 1px solid var(--acc-border); }
.vh-acc-review:first-child { padding-top: 0; }
.vh-acc-review:last-of-type { border-bottom: 0; }
.vh-acc-review__body { flex: 1; min-width: 0; display: grid; gap: .3rem; }
.vh-acc-review__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.vh-acc-review__title { font-size: .9rem; color: var(--acc-text); }
.vh-acc-review__text { font-size: .875rem; color: var(--acc-muted); white-space: pre-line; }
.vh-acc-reply { margin-top: .25rem; padding: .65rem .8rem; border-radius: .6rem; background: var(--acc-soft); font-size: .8125rem; }
.vh-acc-reply p { color: var(--acc-muted); margin-top: .15rem; }

/* Coupons page */
.vh-acc-coupons { display: grid; gap: .875rem; }
@media (min-width: 1024px) { .vh-acc-coupons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vh-acc-coupon { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.vh-acc-coupon__value { width: 5rem; padding: .6rem .25rem; border-radius: .75rem; background: var(--c-primary-50); color: var(--c-primary-700); display: grid; justify-items: center; text-align: center; flex-shrink: 0; }
html.dark .vh-acc-coupon__value { background: rgb(255 255 255 / .06); color: var(--c-primary-300); }
.vh-acc-coupon__value strong { font-size: 1.1rem; font-weight: 800; line-height: 1.1; }
.vh-acc-coupon__value span { font-size: .6875rem; font-weight: 700; letter-spacing: .05em; }
.vh-acc-coupon__body { flex: 1; min-width: 10rem; display: grid; gap: .15rem; justify-items: start; }
.vh-acc-code { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1.5px dashed var(--c-primary-400); border-radius: .6rem; background: transparent; color: var(--c-primary-700); font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; cursor: pointer; }
html.dark .vh-acc-code { color: var(--c-primary-300); }
.vh-acc-code__ok { display: none; font-family: inherit; font-weight: 600; color: #16a34a; }
.vh-acc-code.is-copied .vh-acc-code__ok { display: inline; }
.vh-acc-code.is-copied .bi { display: none; }

/* My Orders */
@media (max-width: 1439px) { .vh-acc-only-xl { display: none !important; } }
@media (min-width: 1440px) { .vh-acc-hide-xl { display: none !important; } }
.vh-acc-ohead { display: grid; gap: .875rem; }
.vh-acc-title .vh-acc-back { margin-right: .5rem; color: var(--acc-text); font-size: 1.35rem; vertical-align: -.1em; }
.vh-acc-ofilter { display: flex; gap: .5rem; min-width: 0; }
.vh-acc-search, .vh-acc-range { display: flex; align-items: center; gap: .5rem; padding: 0 .8rem; height: 2.75rem; border: 1px solid var(--acc-border); border-radius: .75rem; background: var(--acc-card); color: var(--acc-muted); }
.vh-acc-search { flex: 1; min-width: 0; }
.vh-acc-search input, .vh-acc-range select { border: 0; background: transparent; outline: none; font-size: .875rem; color: var(--acc-text); min-width: 0; width: 100%; padding: 0; box-shadow: none; }
.vh-acc-range { flex-shrink: 0; }
.vh-acc-range select { width: auto; cursor: pointer; }
.vh-acc-search:focus-within, .vh-acc-range:focus-within { border-color: var(--c-primary-500); }
@media (min-width: 768px) {
    .vh-acc-ohead { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .vh-acc-ofilter { width: min(100%, 30rem); }
}
.vh-acc-otabs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.vh-acc-otabs::-webkit-scrollbar { display: none; }
.vh-acc-otab { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: .75rem; border: 1px solid var(--acc-border); background: var(--acc-card); color: var(--acc-text); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.vh-acc-otab__n { min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--c-primary-50); color: var(--c-primary-700); font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.vh-acc-otab.is-active { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.vh-acc-otab.is-active .vh-acc-otab__n { background: #fff; color: var(--c-primary-700); }
html.dark .vh-acc-otab__n { background: rgb(255 255 255 / .08); color: var(--c-primary-300); }
@media (min-width: 768px) {
    .vh-acc-otabs { gap: 0; border-bottom: 1px solid var(--acc-border); }
    .vh-acc-otab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: .7rem 1rem; margin-bottom: -1px; }
    .vh-acc-otab.is-active { background: transparent; color: var(--c-primary-600); border-bottom-color: var(--c-primary-600); font-weight: 600; }
    .vh-acc-otab .vh-acc-otab__n { display: none; }
}
.vh-acc-ostats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1280px) {
    .vh-acc-ostats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
    .vh-acc-ostats .vh-acc-stat { padding: .9rem; gap: .75rem; }
    .vh-acc-ostats .vh-acc-stat__icon { width: 3rem; height: 3rem; font-size: 1.35rem; }
    .vh-acc-ostats .vh-acc-stat__label { white-space: normal; }
}
.vh-acc-tone--red { --tone-bg: #fdecec; --tone-fg: #dc2626; }
.vh-acc-ogrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.vh-acc-ogrid .vh-acc-table td, .vh-acc-ogrid .vh-acc-table th { padding-left: .55rem; padding-right: .55rem; }
.vh-acc-ogrid .vh-acc-item { min-width: 0; }
.vh-acc-ogrid .vh-acc-item__name { max-width: 24rem; }
.vh-acc-pagerow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.vh-acc-pager { display: inline-flex; gap: .4rem; }
.vh-acc-pager__btn { min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; border: 1px solid var(--acc-border); background: var(--acc-card); color: var(--acc-text); font-size: .875rem; font-weight: 600; }
.vh-acc-pager__btn:hover { border-color: var(--c-primary-400); color: var(--c-primary-600); }
.vh-acc-pager__btn.is-on { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.vh-acc-pager__btn.is-off { opacity: .45; }

/* Order cards (phones) */
.vh-acc-ocards { display: grid; gap: .875rem; }
.vh-acc-ocard { display: grid; gap: .75rem; }
.vh-acc-ocard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.vh-acc-ocard__mid { display: flex; align-items: center; gap: .75rem; }
.vh-acc-ocard__mid .vh-acc-btn { flex-shrink: 0; }
.vh-acc-onote { display: flex; align-items: center; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--acc-border); font-size: .8125rem; }
.vh-acc-onote > .bi:first-child { font-size: 1.4rem; color: var(--c-primary-600); }
.vh-acc-onote > span { flex: 1; display: grid; }

/* Timeline */
.vh-acc-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .5rem 0 .25rem; padding: 0; list-style: none; }
.vh-acc-tl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vh-acc-tl__step { position: relative; display: grid; justify-items: center; text-align: center; gap: .15rem; font-size: .6875rem; }
.vh-acc-tl__step::before { content: ""; position: absolute; top: .7rem; right: 50%; width: 100%; height: 2px; background: var(--acc-border); }
.vh-acc-tl__step:first-child::before { display: none; }
.vh-acc-tl__step.is-done::before, .vh-acc-tl__step.is-stopped::before { background: var(--c-primary-500); }
.vh-acc-tl__dot { position: relative; z-index: 1; width: 1.4rem; height: 1.4rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-card); border: 2px solid var(--acc-border); color: transparent; font-size: .9rem; }
.vh-acc-tl__step.is-done .vh-acc-tl__dot { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.vh-acc-tl__step.is-stopped .vh-acc-tl__dot { background: #dc2626; border-color: #dc2626; color: #fff; }
.vh-acc-tl__label { font-weight: 600; color: var(--acc-text); }
.vh-acc-tl__date { color: var(--acc-muted); min-height: 1em; }

/* Order boxes / totals */
.vh-acc-obox { display: flex; gap: .75rem; margin-top: .875rem; padding: .875rem; border: 1px solid var(--acc-border); border-radius: .875rem; font-size: .8125rem; }
.vh-acc-obox--col { flex-direction: column; gap: .6rem; }
.vh-acc-obox__icon { font-size: 1.2rem; color: var(--c-primary-600); }
.vh-acc-obox__body { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.vh-acc-obox__btn { justify-self: start; margin-top: .4rem; }
.vh-acc-orow2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vh-acc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; overflow-wrap: anywhere; color: var(--acc-text); }
.vh-acc-oitem { display: flex; align-items: center; gap: .65rem; }
.vh-acc-oitem__body { flex: 1; min-width: 0; display: grid; }
.vh-acc-oitem__end { display: grid; justify-items: end; gap: .3rem; }
.vh-acc-totals { margin-top: .875rem; display: grid; gap: .35rem; font-size: .8125rem; }
.vh-acc-totals > div { display: flex; justify-content: space-between; gap: .5rem; }
.vh-acc-totals dt { color: var(--acc-muted); }
.vh-acc-totals dd { color: var(--acc-text); font-weight: 500; }
.vh-acc-totals__grand { padding-top: .5rem; border-top: 1px solid var(--acc-border); font-size: .95rem; }
.vh-acc-totals__grand dt, .vh-acc-totals__grand dd { color: var(--acc-text); font-weight: 700; }
.vh-acc-good { color: #16a34a !important; }

/* Wishlist */
.vh-acc-flash { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: .75rem; background: #ecfdf3; color: #166534; font-size: .875rem; font-weight: 500; }
html.dark .vh-acc-flash { background: rgb(22 163 74 / .12); color: #86efac; }
.vh-wl-head { display: flex; align-items: flex-start; gap: .75rem; }
.vh-wl-head__icon { font-size: 1.9rem; color: #e11d48; line-height: 1.2; }
.vh-wl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1280px) { .vh-wl-grid { grid-template-columns: minmax(0, 1fr) 18.5rem; } }
.vh-wl-bar { display: grid; gap: .75rem; }
@media (min-width: 768px) {
    .vh-wl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
    .vh-wl-bar .vh-wl-tabs { flex: 1 1 auto; overflow: visible; }
    .vh-wl-filter { width: auto; margin-left: auto; }
}
.vh-wl-tabs .vh-acc-otab { font-weight: 500; }
.vh-wl-filter .vh-acc-search { flex: 1.4; }
@media (max-width: 767px) {
    .vh-wl-tabs { gap: 0; border-bottom: 1px solid var(--acc-border); }
    .vh-wl-tabs .vh-acc-otab { flex: 1; justify-content: center; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: .65rem .25rem; margin-bottom: -1px; }
    .vh-wl-tabs .vh-acc-otab.is-active { background: transparent; color: var(--c-primary-600); border-bottom-color: var(--c-primary-600); font-weight: 600; }
}
.vh-acc-range span { font-size: .8125rem; white-space: nowrap; }
.vh-wl-views { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid var(--acc-border); border-radius: .75rem; background: var(--acc-card); }
.vh-wl-view { width: 2.25rem; height: 2.25rem; border: 0; border-radius: .55rem; background: transparent; color: var(--acc-muted); cursor: pointer; }
.vh-wl-view.is-on { background: var(--c-primary-600); color: #fff; }

/* Cards: rows on phones (and in list view), grid on larger screens */
.vh-wl-list { display: grid; gap: .75rem; }
.vh-wl-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-areas: "img body" "img acts"; gap: .5rem .875rem; padding: .65rem; }
.vh-wl-card__img { grid-area: img; position: relative; display: block; aspect-ratio: 1; border-radius: .75rem; overflow: hidden; background: var(--acc-soft); align-self: start; }
.vh-wl-card__img img { width: 100%; height: 100%; object-fit: cover; }
.vh-wl-card__body { grid-area: body; display: grid; gap: .25rem; align-content: start; min-width: 0; }
.vh-wl-card__name { font-weight: 600; font-size: .875rem; color: var(--acc-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.vh-wl-card__acts { grid-area: acts; display: flex; align-items: center; gap: .5rem; }
.vh-wl-badge { position: absolute; left: .4rem; bottom: .4rem; padding: .15rem .45rem; border-radius: .35rem; font-size: .6875rem; font-weight: 600; }
.vh-wl-badge.is-in { background: #dcfce7; color: #15803d; }
.vh-wl-badge.is-low { background: #ffedd5; color: #c2410c; }
.vh-wl-badge.is-out { background: #fee2e2; color: #b91c1c; }
.vh-wl-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; font-size: .8125rem; }
.vh-wl-price strong { font-size: 1.05rem; font-weight: 800; color: var(--acc-text); }
.vh-wl-off { padding: .1rem .35rem; border-radius: .3rem; background: #fff1f2; color: #e11d48; font-size: .6875rem; font-weight: 700; }
html.dark .vh-wl-off { background: rgb(225 29 72 / .15); }
.vh-wl-heart { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border: 0; border-radius: 999px; background: transparent; color: #e11d48; font-size: 1.15rem; cursor: pointer; }
.vh-wl-cta { flex: 1; min-width: 0; }
.vh-wl-cta.is-set { cursor: default; }
.vh-wl-more { position: relative; flex-shrink: 0; }
.vh-wl-more__btn { width: 2.4rem; height: 2.4rem; border: 1px solid var(--acc-border); border-radius: .6rem; background: var(--acc-card); color: var(--acc-text); cursor: pointer; }
.vh-wl-more__menu { position: absolute; right: 0; bottom: calc(100% + .35rem); z-index: 20; min-width: 11rem; padding: .35rem; border: 1px solid var(--acc-border); border-radius: .75rem; background: var(--acc-card); box-shadow: 0 12px 32px rgb(16 24 40 / .14); display: grid; }
.vh-wl-more__menu a, .vh-wl-more__menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .5rem; background: transparent; color: var(--acc-text); font: inherit; font-size: .8125rem; text-align: left; cursor: pointer; }
.vh-wl-more__menu a:hover, .vh-wl-more__menu button:hover { background: var(--acc-soft); }
.vh-wl-more__menu .is-danger { color: #dc2626; }
@media (min-width: 768px) {
    .vh-wl-list:not(.is-list) { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1rem; }
    .vh-wl-list:not(.is-list) .vh-wl-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "body" "acts"; padding: .6rem; }
    .vh-wl-list:not(.is-list) .vh-wl-card__img { aspect-ratio: 4 / 3; }
    .vh-wl-list:not(.is-list) .vh-wl-heart { position: absolute; top: .9rem; right: .9rem; background: rgb(255 255 255 / .92); box-shadow: 0 1px 4px rgb(0 0 0 / .12); }
    .vh-wl-list:not(.is-list) .vh-wl-card { position: relative; }
    .vh-wl-list:not(.is-list) .vh-wl-card__acts { margin-top: auto; }
    .vh-wl-list.is-list .vh-wl-card { grid-template-columns: 7.5rem minmax(0, 1fr) auto; grid-template-areas: "img body acts"; align-items: center; }
    .vh-wl-list.is-list .vh-wl-card__acts { min-width: 16rem; }
}
.vh-wl-list--wide { margin-top: 1rem; }

/* Wishlist sidebar */
.vh-wl-side { display: grid; gap: 1rem; }
.vh-wl-side .vh-acc-card { display: grid; gap: .65rem; }
.vh-wl-side__title { display: flex; align-items: center; gap: .5rem; }
.vh-wl-side__title .bi { color: #e11d48; }
.vh-wl-side .vh-acc-totals { margin-top: 0; }
.vh-wl-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; margin-right: .45rem; }
.vh-wl-dot.is-in { background: #16a34a; }
.vh-wl-dot.is-out { background: #dc2626; }
.vh-wl-share { display: flex; align-items: center; gap: .4rem; padding: .3rem .3rem .3rem .7rem; border: 1px solid var(--acc-border); border-radius: .65rem; }
.vh-wl-share input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: .75rem; color: var(--acc-text); padding: 0; box-shadow: none; }
.vh-wl-share__copy { color: var(--c-primary-600); }
.vh-wl-share__copy.is-copied { color: #16a34a; border-color: #86efac; }
.vh-wl-unshare { justify-self: center; }
.vh-wl-unshare .vh-acc-link { border: 0; background: none; cursor: pointer; color: var(--acc-muted); font-weight: 500; }
.vh-wl-sugs { display: grid; gap: .65rem; }
.vh-wl-sug { display: flex; align-items: center; gap: .65rem; }
.vh-wl-sug__body { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: .8125rem; }

/* Addresses */
.vh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vh-wl-head .vh-acc-back { color: var(--acc-text); font-size: 1.35rem; line-height: 1.6; }
.vh-ad-head__icon { color: var(--acc-text); }
.vh-ad-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .vh-ad-grid { grid-template-columns: minmax(0, 1fr) 24rem; } }
.vh-ad-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon head" "icon body" "acts acts"; gap: .35rem 1rem; padding: 1rem; border: 1px solid var(--acc-border); border-radius: .875rem; margin-bottom: .875rem; transition: border-color .15s, box-shadow .15s; }
.vh-ad-card.is-default { border-color: var(--c-primary-300); background: color-mix(in srgb, var(--c-primary-50) 45%, var(--acc-card)); }
.vh-ad-card.is-editing { box-shadow: 0 0 0 3px var(--c-primary-100); border-color: var(--c-primary-500); }
.vh-ad-card__icon { grid-area: icon; align-self: start; width: 3.5rem; height: 3.5rem; border-radius: .875rem; background: var(--tone-bg); color: var(--tone-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.vh-ad-card__head { grid-area: head; display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.vh-ad-card__body { grid-area: body; display: grid; gap: .15rem; justify-items: start; font-size: .875rem; min-width: 0; }
.vh-ad-card__body .vh-acc-muted { font-size: .875rem; }
.vh-ad-card__title { font-size: 1rem; color: var(--acc-text); }
.vh-ad-card__acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.vh-ad-card__acts form { margin: 0; }
.vh-ad-del { color: #dc2626; border-color: #fecaca; }
.vh-ad-del:hover { background: #fef2f2; }
@media (min-width: 640px) {
    .vh-ad-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon head acts" "icon body body"; }
    .vh-ad-card__icon { width: 5rem; height: 5rem; font-size: 2rem; }
    .vh-ad-card__acts { align-self: start; justify-content: flex-end; margin-top: 0; }
}
.vh-ad-addlink { border: 0; background: none; cursor: pointer; padding: 0; }
.vh-ad-addbig { margin-top: .25rem; padding: .85rem; font-size: .95rem; }
@media (min-width: 1024px) { .vh-ad-mobile-only { display: none !important; } }

/* Form */
.vh-ad-formcard { display: none; scroll-margin-top: 6rem; }
.vh-ad-formcard.is-open { display: block; }
@media (min-width: 1024px) { .vh-ad-formcard { display: block; position: sticky; top: 6rem; } .vh-ad-close { display: none; } }
.vh-ad-form { display: grid; gap: .875rem; }
.vh-ad-field { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.vh-ad-label { font-size: .8125rem; font-weight: 600; color: var(--acc-text); }
.vh-ad-label em { font-style: normal; font-weight: 400; color: var(--acc-muted); }
.vh-ad-input { width: 100%; height: 2.75rem; padding: 0 .85rem; border: 1px solid var(--acc-border); border-radius: .65rem; background: var(--acc-card); color: var(--acc-text); font-size: .875rem; }
.vh-ad-input:focus { outline: none; border-color: var(--c-primary-500); box-shadow: 0 0 0 3px var(--c-primary-100); }
html.dark .vh-ad-input:focus { box-shadow: 0 0 0 3px rgb(255 255 255 / .06); }
.vh-ad-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .75rem; }
.vh-ad-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.vh-ad-kind { display: flex; align-items: center; justify-content: center; gap: .4rem; height: 3rem; border: 1px solid var(--acc-border); border-radius: .65rem; font-size: .875rem; font-weight: 500; color: var(--acc-text); cursor: pointer; }
.vh-ad-kind.is-on { border: 2px solid var(--c-primary-500); color: var(--c-primary-700); background: var(--c-primary-50); }
html.dark .vh-ad-kind.is-on { background: rgb(255 255 255 / .05); color: var(--c-primary-300); }
.vh-ad-kind:focus-within { box-shadow: 0 0 0 3px var(--c-primary-100); }
.vh-ad-check { display: flex; align-items: center; gap: .55rem; font-size: .875rem; color: var(--acc-text); cursor: pointer; }
.vh-ad-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-primary-600); }
.vh-ad-save { padding: .9rem; font-size: .95rem; }
.vh-ad-errors { display: flex; align-items: center; gap: .5rem; margin-bottom: .875rem; padding: .7rem .9rem; border-radius: .65rem; background: #fef2f2; color: #b91c1c; font-size: .8125rem; }
html.dark .vh-ad-errors { background: rgb(239 68 68 / .12); color: #fca5a5; }

/* Account Details */
.vh-ac-hero { display: grid; gap: 1rem; }
.vh-ac-hero__who { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.vh-ac-avatar { position: relative; flex-shrink: 0; margin: 0; }
.vh-ac-avatar img { width: 5.5rem; height: 5.5rem; border-radius: 999px; object-fit: cover; display: block; }
.vh-ac-avatar__cam { position: absolute; right: -.15rem; bottom: -.15rem; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--acc-card); border: 2px solid var(--acc-border); color: var(--c-primary-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .1); }
.vh-ac-hero__info { display: grid; gap: .25rem; min-width: 0; font-size: .875rem; color: var(--acc-muted); }
.vh-ac-hero__info span { display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.vh-ac-hero__name { font-size: 1.4rem; font-weight: 800; color: var(--acc-text); display: flex; align-items: center; gap: .4rem; }
.vh-ac-verified { color: var(--c-primary-600); font-size: 1.1rem; }
.vh-ac-promo { display: flex; align-items: center; gap: .875rem; padding: .9rem 1rem; border-radius: .875rem; background: #ecfdf3; flex-wrap: wrap; }
html.dark .vh-ac-promo { background: rgb(22 163 74 / .1); }
.vh-ac-promo__icon { font-size: 1.6rem; color: #f59e0b; }
.vh-ac-promo__body { flex: 1; min-width: 10rem; display: grid; gap: .1rem; font-size: .8125rem; color: var(--acc-muted); }
.vh-ac-promo__body strong { color: #15803d; font-size: .9rem; }
@media (min-width: 768px) {
    .vh-ac-avatar img { width: 7rem; height: 7rem; }
    .vh-ac-hero__info { font-size: .9375rem; }
    .vh-ac-hero__name { font-size: 1.6rem; }
}
@media (min-width: 1280px) { .vh-ac-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: center; } }

.vh-ac-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 640px) { .vh-ac-tabs { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
.vh-ac-tab { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .5rem .75rem; border: 1px solid var(--acc-border); border-radius: .75rem; background: var(--acc-card); color: var(--acc-text); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; text-align: left; }
.vh-ac-tab .bi { font-size: 1.1rem; }
.vh-ac-tab.is-active { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.vh-ac-tab.is-danger:not(.is-active) .bi { color: #dc2626; }
.vh-ac-tab.is-danger.is-active { background: #dc2626; border-color: #dc2626; }

.vh-ac-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 1280px) { .vh-ac-grid { grid-template-columns: minmax(0, 1fr) 24rem; } }
.vh-ac-panels, .vh-ac-side { display: grid; gap: 1rem; min-width: 0; }
.vh-ac-form { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .vh-ac-form:not(.vh-ac-form--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-ac-form--one { max-width: 28rem; } }
.vh-ac-form__foot { grid-column: 1 / -1; }
.vh-ac-form__foot .vh-acc-btn { min-width: 14rem; }
.vh-ac-req { color: #dc2626; font-weight: 600; }
.vh-ad-input[readonly] { background: var(--acc-soft); color: var(--acc-muted); cursor: not-allowed; }
.vh-ac-radios { display: flex; flex-wrap: wrap; gap: 1.25rem; min-height: 2.75rem; align-items: center; }
.vh-ac-radio { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--acc-text); cursor: pointer; }
.vh-ac-radio input { width: 1.15rem; height: 1.15rem; accent-color: var(--c-primary-600); }
.vh-ac-prefs { display: grid; margin-top: .75rem; }
.vh-ac-pref { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--acc-border); cursor: pointer; }
.vh-ac-pref.is-locked { cursor: default; }
.vh-ac-pref__body { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: .875rem; }
.vh-ac-prefs .vh-ac-form__foot { margin-top: 1rem; }
.vh-ac-switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--acc-border); cursor: pointer; transition: background .2s; }
.vh-ac-switch::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .2s; }
.vh-ac-switch:checked { background: var(--c-primary-600); }
.vh-ac-switch:checked::after { transform: translateX(1.15rem); }
.vh-ac-switch:focus-visible { outline: 2px solid var(--c-primary-400); outline-offset: 2px; }
.vh-ac-danger { border-color: #fecaca; }
.vh-ac-delete { background: #dc2626; border-color: #dc2626; }
.vh-ac-delete:hover { background: #b91c1c; }

.vh-ac-pic { display: flex; align-items: center; gap: 1rem; margin-top: .875rem; flex-wrap: wrap; }
.vh-ac-pic__img { width: 6rem; height: 6rem; }
.vh-ac-pic__body { flex: 1; min-width: 10rem; display: grid; gap: .65rem; }
.vh-ac-pic__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.vh-ac-pic__acts form { margin: 0; }
.vh-ac-pic__acts label { cursor: pointer; }
.vh-ac-info { display: grid; gap: .7rem; margin-top: .875rem; font-size: .875rem; }
.vh-ac-info > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.vh-ac-info dt { display: flex; align-items: center; gap: .55rem; color: var(--acc-text); }
.vh-ac-info dt .bi { color: var(--acc-muted); font-size: 1.05rem; }
.vh-ac-info dd { color: var(--acc-muted); text-align: right; }
.vh-ac-conn { display: flex; align-items: center; gap: .875rem; margin-top: .875rem; }
.vh-ac-conn__icon { font-size: 1.3rem; color: #ea4335; }
.vh-ac-conn__body { flex: 1; min-width: 0; display: grid; font-size: .875rem; }
.vh-ac-conn form { margin: 0; }

/* Notifications */
.vh-nt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vh-nt-head form { margin: 0; }
@media (max-width: 767px) {
    .vh-nt-tabs { gap: .5rem; border-bottom: 0; }
    .vh-nt-tabs .vh-acc-otab { flex: 0 0 auto; }
}
.vh-nt-listcard { padding: .5rem; display: grid; gap: .4rem; }
.vh-nt-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon body time more" "icon body dot more"; align-items: center; gap: .1rem .875rem; padding: .75rem; border-radius: .75rem; border: 1px solid var(--acc-border); }
.vh-nt-item.is-unread { background: color-mix(in srgb, var(--c-primary-50) 55%, var(--acc-card)); }
.vh-nt-item__icon { grid-area: icon; width: 3rem; height: 3rem; border-radius: .75rem; background: var(--tone-bg); color: var(--tone-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; align-self: start; }
.vh-nt-item__body { grid-area: body; display: grid; gap: .15rem; min-width: 0; font-size: .875rem; }
.vh-nt-item__title { font-weight: 700; color: var(--acc-text); }
.vh-nt-item.is-unread .vh-nt-item__title { color: var(--acc-text); }
.vh-nt-item:not(.is-unread) .vh-nt-item__title { font-weight: 600; }
.vh-nt-item__time { grid-area: time; font-size: .75rem; color: var(--acc-muted); white-space: nowrap; justify-self: end; align-self: start; }
.vh-nt-dot { grid-area: dot; justify-self: end; width: .6rem; height: .6rem; border-radius: 999px; background: var(--c-primary-600); }
.vh-nt-dot.is-read { background: var(--acc-border); }
.vh-nt-item .vh-wl-more { grid-area: more; }
.vh-nt-more { width: 2rem; height: 2rem; border: 0; border-radius: .5rem; background: transparent; color: var(--acc-muted); cursor: pointer; font-size: 1.1rem; }
.vh-nt-more:hover { background: var(--acc-soft); color: var(--acc-text); }
.vh-nt-menu { top: calc(100% + .25rem); bottom: auto; }
.vh-nt-menu form { margin: 0; }
@media (min-width: 768px) {
    .vh-nt-item { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "icon body time dot more"; }
    .vh-nt-item__time, .vh-nt-dot { align-self: center; }
}
.vh-nt-pager { justify-content: center; }
.vh-nt-prefs { display: grid; }
.vh-nt-pref { gap: .75rem; }
.vh-nt-pref__icon { width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .6rem; background: var(--acc-soft); color: var(--acc-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.vh-nt-prefs .vh-ad-save { margin-top: 1rem; }
.vh-nt-filters { display: grid; gap: .25rem; }
.vh-nt-filter { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: .65rem; font-size: .875rem; color: var(--acc-text); }
.vh-nt-filter > span:first-of-type { flex: 1; }
.vh-nt-filter:hover { background: var(--acc-soft); }
.vh-nt-filter.is-on { background: var(--c-primary-50); color: var(--c-primary-700); font-weight: 600; }
html.dark .vh-nt-filter.is-on { background: rgb(255 255 255 / .05); color: var(--c-primary-300); }

/* My Reviews */
.vh-rv-stars { display: inline-flex; gap: .15rem; color: #f59e0b; font-size: 1rem; }
.vh-rv-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; }
.vh-rv-card__prod { display: flex; gap: .875rem; align-items: flex-start; min-width: 0; }
.vh-rv-card__img { width: 5.5rem; height: 5.5rem; flex-shrink: 0; border-radius: .75rem; overflow: hidden; background: var(--acc-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--acc-muted); }
.vh-rv-card__img img { width: 100%; height: 100%; object-fit: cover; }
.vh-rv-card__pinfo { display: grid; gap: .2rem; font-size: .875rem; min-width: 0; }
.vh-rv-card__body { display: grid; gap: .35rem; align-content: start; min-width: 0; font-size: .875rem; }
.vh-rv-card__title { color: var(--acc-text); }
.vh-rv-card__text { color: var(--acc-muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vh-rv-imgs { display: flex; gap: .5rem; margin-top: .25rem; }
.vh-rv-imgs img, .vh-rv-imgs__more { width: 3.25rem; height: 3.25rem; border-radius: .5rem; object-fit: cover; background: var(--acc-soft); }
.vh-rv-imgs__more { display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary-600); font-weight: 600; font-size: .875rem; }
.vh-rv-card__side { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .8125rem; }
.vh-rv-helpful { display: inline-flex; align-items: center; gap: .35rem; color: var(--acc-muted); }
.vh-rv-card__acts { display: flex; gap: .5rem; margin-left: auto; }
.vh-rv-card__acts form { margin: 0; }
@media (min-width: 900px) {
    .vh-rv-card { grid-template-columns: 15rem minmax(0, 1fr) auto; align-items: start; }
    .vh-rv-card__side { flex-direction: column; align-items: flex-end; gap: .5rem; }
    .vh-rv-card__acts { margin-left: 0; margin-top: .25rem; }
}
.vh-rv-ov { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; margin-top: .5rem; }
.vh-rv-ov__avg { display: grid; gap: .2rem; font-size: .8125rem; }
.vh-rv-ov__avg strong { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--acc-text); }
.vh-rv-ov__bars { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.vh-rv-ov__bars li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 1.2rem; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--acc-text); }
.vh-rv-ov__bars .bi { color: #f59e0b; font-size: .75rem; }
.vh-rv-meter { width: 100%; height: .5rem; -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px; background: var(--acc-soft); }
.vh-rv-meter::-webkit-meter-bar { background: var(--acc-soft); border: 0; border-radius: 999px; height: .5rem; }
.vh-rv-meter::-webkit-meter-optimum-value { background: var(--c-primary-600); border-radius: 999px; }
.vh-rv-meter::-moz-meter-bar { background: var(--c-primary-600); border-radius: 999px; }
.vh-rv-activity { list-style: none; margin: .875rem 0 0; padding: 0; display: grid; gap: .1rem; }
.vh-rv-activity li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; padding: .5rem 0; font-size: .8125rem; }
.vh-rv-activity li:not(:last-child)::before { content: ""; position: absolute; left: .3rem; top: 1.4rem; bottom: -.6rem; width: 2px; background: var(--acc-border); }
.vh-rv-activity__dot { width: .65rem; height: .65rem; margin-top: .3rem; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }
.vh-rv-activity li.is-pending .vh-rv-activity__dot { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.vh-rv-activity li.is-replied .vh-rv-activity__dot { background: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-primary-100); }
.vh-rv-activity__body { display: grid; min-width: 0; }
.vh-rv-guides { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; font-size: .8125rem; color: var(--acc-text); }
.vh-rv-guides li { display: flex; gap: .55rem; align-items: flex-start; }
.vh-rv-guides .bi { color: var(--c-primary-600); margin-top: .1rem; }
.vh-rv-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(15 23 42 / .5); }
.vh-rv-modal__box { width: 100%; max-width: 32rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.vh-rv-pick { display: flex; gap: .35rem; }
.vh-rv-pick__star { font-size: 1.75rem; color: var(--acc-border); cursor: pointer; line-height: 1; }
.vh-rv-pick__star.is-on { color: #f59e0b; }
.vh-rv-pick__star:focus-within { outline: 2px solid var(--c-primary-400); outline-offset: 2px; border-radius: .25rem; }
.vh-rv-textarea { height: auto; padding: .7rem .85rem; resize: vertical; min-height: 7rem; }
.vh-rv-file { padding: .55rem .85rem; height: auto; }

/* My Coupons */
.vh-cp-section { display: grid; gap: .25rem; }
.vh-cp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; margin-top: .75rem; }
@media (min-width: 900px) { .vh-cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vh-cp-card { --cp: #db2777; --cp-bg: #fdf2f8; display: grid; border: 1px solid color-mix(in srgb, var(--cp) 18%, var(--acc-border)); border-left: 4px solid var(--cp); border-radius: .875rem; background: linear-gradient(135deg, var(--cp-bg), var(--acc-card) 70%); overflow: hidden; }
.vh-cp-card--green  { --cp: #16a34a; --cp-bg: #f0fdf4; }
.vh-cp-card--blue   { --cp: #2563eb; --cp-bg: #eff6ff; }
.vh-cp-card--red    { --cp: #e11d48; --cp-bg: #fff1f2; }
.vh-cp-card--orange { --cp: #ea580c; --cp-bg: #fff7ed; }
.vh-cp-card--purple { --cp: #7c3aed; --cp-bg: #f5f3ff; }
html.dark .vh-cp-card { --cp-bg: rgb(255 255 255 / .03); }
.vh-cp-card.is-expired { --cp: #94a3b8; --cp-bg: var(--acc-soft); opacity: .75; }
.vh-cp-card__top { display: flex; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .85rem; }
.vh-cp-card__info { display: grid; gap: .15rem; min-width: 0; font-size: .875rem; }
.vh-cp-card__code { font-size: 1.15rem; font-weight: 800; color: var(--acc-text); letter-spacing: .02em; overflow-wrap: anywhere; }
.vh-cp-card__value { font-size: 1.3rem; font-weight: 800; color: var(--cp); }
.vh-cp-card__aside { display: grid; justify-items: end; align-content: start; gap: .5rem; flex-shrink: 0; }
.vh-cp-badge { padding: .2rem .5rem; border-radius: .4rem; background: color-mix(in srgb, var(--cp) 12%, transparent); color: var(--cp); font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.vh-cp-card__icon { font-size: 2.2rem; color: color-mix(in srgb, var(--cp) 40%, transparent); }
.vh-cp-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-top: 1.5px dashed color-mix(in srgb, var(--cp) 25%, var(--acc-border)); flex-wrap: wrap; }
.vh-cp-card__meta { display: grid; gap: .1rem; font-size: .75rem; color: var(--acc-muted); }
.vh-cp-copy .vh-cp-copy__b { display: none; }
.vh-cp-copy.is-copied { background: #16a34a; border-color: #16a34a; }
.vh-cp-copy.is-copied .vh-cp-copy__a { display: none; }
.vh-cp-copy.is-copied .vh-cp-copy__b { display: inline; }
.vh-cp-used { display: flex; align-items: center; gap: .875rem; padding: .9rem 1rem; border: 1px dashed var(--acc-border); border-left: 4px dashed var(--acc-border); border-radius: .875rem; color: var(--acc-muted); }
.vh-cp-used__body { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: .8125rem; }
.vh-cp-used__body strong { font-size: 1.05rem; color: var(--acc-muted); }
.vh-cp-used__icon { font-size: 1.8rem; opacity: .55; }
.vh-cp-promo { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 1rem; overflow: hidden; background: linear-gradient(135deg, var(--c-primary-50), color-mix(in srgb, var(--c-accent-500, #ec4899) 14%, #fff)); }
html.dark .vh-cp-promo { background: linear-gradient(135deg, rgb(255 255 255 / .05), rgb(255 255 255 / .02)); }
.vh-cp-promo__body { flex: 1; min-width: 0; display: grid; gap: .5rem; justify-items: start; position: relative; z-index: 1; }
.vh-cp-promo__body strong { font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--acc-text); }
.vh-cp-promo__body span { font-size: .8125rem; color: var(--acc-muted); }
.vh-cp-promo__art { position: relative; flex-shrink: 0; width: 6rem; height: 6rem; border-radius: 999px; background: rgb(255 255 255 / .6); display: inline-flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--c-primary-600); }
.vh-cp-promo__pct { position: absolute; top: -.2rem; right: -.2rem; width: 2rem; height: 2rem; border-radius: 999px; background: #ec4899; color: #fff; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.vh-cp-steps { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .875rem; }
.vh-cp-steps li { display: flex; gap: .75rem; font-size: .8125rem; }
.vh-cp-steps li > span:last-child { display: grid; gap: .1rem; }
.vh-cp-steps__n { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 999px; background: #2563eb; color: #fff; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.vh-cp-step--2 .vh-cp-steps__n { background: #16a34a; }
.vh-cp-step--3 .vh-cp-steps__n { background: #9333ea; }
.vh-cp-help { justify-self: start; margin-top: .5rem; }

/* Support Tickets list */
.vh-tk-new { flex-shrink: 0; }
@media (max-width: 767px) { .vh-tk-new { width: 100%; padding: .8rem; } }
.vh-tk-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.vh-tk-filters .vh-acc-search { flex: 1 1 16rem; }
.vh-tk-filters__toggle { width: 2.75rem; height: 2.75rem; color: var(--acc-text); flex-shrink: 0; }
.vh-tk-filters__more { display: none; gap: .5rem; flex-wrap: wrap; width: 100%; }
.vh-tk-filters__more.is-open { display: flex; }
.vh-tk-filters__more .vh-acc-range { flex: 1 1 9rem; }
@media (min-width: 768px) { .vh-tk-filters__more { display: flex; width: auto; } .vh-tk-filters__more .vh-acc-range { flex: 0 0 auto; } }
.vh-tk-table td { vertical-align: middle; }
.vh-tk-table tr.is-unread td { background: color-mix(in srgb, var(--c-primary-50) 55%, transparent); }
.vh-tk-subj { display: grid; gap: .1rem; min-width: 11rem; max-width: 16rem; }
.vh-tk-subj .vh-acc-muted { font-size: .75rem; }
.vh-tk-cat { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .75rem; color: var(--acc-text); margin-top: .15rem; }
.vh-nt-filter > span.vh-tk-catic { flex: none; }
.vh-nt-filter > span.vh-tk-catname { flex: 1; }
.vh-tk-table th, .vh-tk-table td { padding-left: .5rem; padding-right: .5rem; }
.vh-tk-table .vh-acc-item { min-width: 0; }
.vh-tk-table .vh-acc-item__name { max-width: 8rem; }
.vh-tk-subj { max-width: 14rem; }
.vh-tk-when { display: grid; font-size: .8125rem; }
.vh-tk-when .vh-acc-muted { font-size: .75rem; }
.vh-tk-mcard { display: flex; align-items: flex-start; gap: .75rem; }
.vh-tk-mcard__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--tone-bg); color: var(--tone-fg); }
.vh-tk-mcard__body { flex: 1; min-width: 0; display: grid; gap: .1rem; font-size: .8125rem; }
.vh-tk-mcard__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .25rem; color: var(--acc-muted); font-size: .75rem; }
.vh-tk-mcard__side { display: grid; justify-items: end; gap: .2rem; font-size: .75rem; flex-shrink: 0; }
.vh-tk-mcard .vh-acc-chev { align-self: center; }
.vh-tk-hero { display: flex; align-items: center; gap: .875rem; margin: .5rem 0 .875rem; font-size: .8125rem; }
.vh-tk-hero__art { width: 4.5rem; height: 4.5rem; flex-shrink: 0; border-radius: 999px; background: var(--c-primary-50); color: var(--c-primary-600); display: inline-flex; align-items: center; justify-content: center; font-size: 2.1rem; }
html.dark .vh-tk-hero__art { background: rgb(255 255 255 / .06); }
.vh-tk-catic { width: 2rem; height: 2rem; border-radius: .5rem; background: var(--tone-bg); color: var(--tone-fg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vh-tk-help { display: grid; gap: .6rem; margin-top: .75rem; }
.vh-tk-help__contact { background: var(--c-primary-50); }
html.dark .vh-tk-help__contact { background: rgb(255 255 255 / .04); }

/* ==========================================================================
   Marketplace header (shop/headers/marketplace)
   ========================================================================== */
.vh-mh-welcome { color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-mh-promises { display: none; list-style: none; margin: 0; padding: 0; gap: 1.25rem; color: #e5e7eb; }
.vh-mh-promises li { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
@media (min-width: 1100px) { .vh-mh-promises { display: flex; } }
.vh-mh-track { display: inline-flex; align-items: center; gap: .35rem; color: #d1d5db; white-space: nowrap; }
.vh-mh-track:hover { color: #fff; }
.vh-mh-cart { display: flex; align-items: center; gap: .55rem; color: #4b5563; }
html.dark .vh-mh-cart { color: #9ca3af; }
.vh-mh-cart:hover { color: var(--c-primary-600); }
.vh-mh-cart__icon { position: relative; font-size: 1.5rem; line-height: 1; }
.vh-mh-cart__text { display: none; line-height: 1.15; font-size: .75rem; }
.vh-mh-cart__text strong { display: block; font-size: .875rem; color: #111827; }
html.dark .vh-mh-cart__text strong { color: #f9fafb; }
@media (min-width: 1024px) { .vh-mh-cart__text { display: block; } }
.vh-mh-allcats { position: relative; margin-right: .75rem; }
.vh-mh-allcats__btn { display: inline-flex; align-items: center; gap: .55rem; height: 2.75rem; padding: 0 1.1rem; width: 15rem; border: 0; border-radius: .6rem .6rem 0 0; background: var(--c-primary-600); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.vh-mh-allcats__chev { margin-left: auto; font-size: .75rem; }
.vh-mh-allcats__menu { position: absolute; left: 0; top: 100%; z-index: 60; width: 15rem; padding: .4rem; border: 1px solid #e5e7eb; border-radius: 0 0 .75rem .75rem; background: #fff; box-shadow: 0 16px 40px rgb(15 23 42 / .16); }
html.dark .vh-mh-allcats__menu { background: #1f2937; border-color: #374151; }
.vh-mh-allcats__item { position: relative; }
.vh-mh-allcats__item > a, .vh-mh-allcats__view { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: .5rem; font-size: .8125rem; color: #374151; }
html.dark .vh-mh-allcats__item > a, html.dark .vh-mh-allcats__view { color: #e5e7eb; }
.vh-mh-allcats__item > a:hover, .vh-mh-allcats__item:hover > a, .vh-mh-allcats__view:hover { background: var(--c-primary-50); color: var(--c-primary-700); }
html.dark .vh-mh-allcats__item:hover > a { background: rgb(255 255 255 / .06); }
.vh-mh-allcats__item > a .bi-chevron-right { margin-left: auto; font-size: .7rem; opacity: .6; }
.vh-mh-allcats__icon { width: 1.1rem; text-align: center; opacity: .75; }
.vh-mh-allcats__view { margin-top: .25rem; border-top: 1px solid #f3f4f6; font-weight: 600; }
.vh-mh-allcats__fly { display: none; position: absolute; left: 100%; top: 0; min-width: 13rem; margin-left: .35rem; padding: .4rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; box-shadow: 0 16px 40px rgb(15 23 42 / .16); }
html.dark .vh-mh-allcats__fly { background: #1f2937; border-color: #374151; }
.vh-mh-allcats__item:hover .vh-mh-allcats__fly { display: grid; }
.vh-mh-allcats__fly a { padding: .45rem .65rem; border-radius: .5rem; font-size: .8125rem; color: #374151; }
html.dark .vh-mh-allcats__fly a { color: #e5e7eb; }
.vh-mh-allcats__fly a:hover { background: #f9fafb; }
.vh-mh-deals { display: inline-flex; align-items: center; gap: .35rem; padding: .75rem 1rem; font-size: .875rem; font-weight: 700; color: #e11d48; }

/* Marketplace header: icon + two-line label actions (wishlist / account / cart) */
.vh-mh-act { display: none; align-items: center; gap: .55rem; color: #4b5563; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
html.dark .vh-mh-act { color: #9ca3af; }
.vh-mh-act:hover { color: var(--c-primary-600); }
.vh-mh-act__icon { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.vh-mh-act__text { display: none; line-height: 1.15; font-size: .75rem; }
.vh-mh-act__text strong { display: block; font-size: .875rem; color: #111827; white-space: nowrap; }
.vh-mh-act__text strong .bi { font-size: .65rem; }
html.dark .vh-mh-act__text strong { color: #f9fafb; }
@media (min-width: 640px) { .vh-mh-act { display: flex; } }
@media (min-width: 1024px) { .vh-mh-act__text { display: block; } }

/* ==========================================================================
   User panel shell (account pages; layouts/shop + profile/partials/panel-top)
   Desktop: brand cell + top bar, full-height sidebar rail. Below 1024px the
   account nav becomes a slide-in drawer opened from the top-bar menu button.
   ========================================================================== */
.vh-panel { --vh-pt-h: 70px; --vh-rail: 16rem; --vh-pt-bg: #fff; --vh-pt-border: #eceff4; --vh-pt-text: #111827; --vh-pt-muted: #6b7280; --vh-pt-soft: #f4f6fb; }
html.dark .vh-panel { --vh-pt-bg: #111827; --vh-pt-border: #1f2937; --vh-pt-text: #f9fafb; --vh-pt-muted: #9ca3af; --vh-pt-soft: #1f2937; }
.vh-panel #main-content { background: var(--vh-pt-soft); }
html.dark .vh-panel #main-content { background: #0b1120; }

.vh-pt { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: .5rem; height: 60px; padding: 0 .75rem; background: var(--vh-pt-bg); border-bottom: 1px solid var(--vh-pt-border); color: var(--vh-pt-text); }
.vh-pt__brand { display: flex; align-items: center; gap: .65rem; min-width: 0; color: inherit; text-decoration: none; }
.vh-pt__brandtext { display: grid; line-height: 1.1; min-width: 0; }
.vh-pt__brandtext strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.vh-pt__brandtext small { display: none; font-size: .72rem; color: var(--vh-pt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-pt__bar { display: contents; }
.vh-pt__burger { order: -1; }
.vh-pt__icon { position: relative; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 10px; background: none; color: var(--vh-pt-text); font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vh-pt__icon:hover { background: var(--vh-pt-soft); }
.vh-pt__dot { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--vh-pt-bg); border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: content-box; }
.vh-pt__search { display: none; }
.vh-pt__acts { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.vh-pt__track, .vh-pt__lang { display: none; }
.vh-pt__user { position: relative; }
.vh-pt__userbtn { display: flex; align-items: center; gap: .55rem; padding: 4px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.vh-pt__avatar { width: 38px; height: 38px; border-radius: 999px; object-fit: cover; }
.vh-pt__name, .vh-pt__chev { display: none; }
.vh-pt__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 15rem; padding: .4rem; border: 1px solid var(--vh-pt-border); border-radius: 12px; background: var(--vh-pt-bg); box-shadow: 0 16px 40px rgba(15, 23, 42, .16); }
.vh-pt__menuhead { display: grid; padding: .55rem .7rem .7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--vh-pt-border); }
.vh-pt__menuhead strong { font-size: .9rem; }
.vh-pt__menuhead span { font-size: .78rem; color: var(--vh-pt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-pt__menu a, .vh-pt__menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 8px; background: none; color: var(--vh-pt-text); font: inherit; font-size: .875rem; text-align: left; text-decoration: none; cursor: pointer; }
.vh-pt__menu a:hover, .vh-pt__menu button:hover { background: var(--vh-pt-soft); }
.vh-pt__menu button { color: #dc2626; }

@media (min-width: 640px) {
    .vh-pt__brandtext small { display: block; }
}
@media (min-width: 768px) {
    .vh-pt { height: var(--vh-pt-h); padding: 0 1.25rem; gap: .75rem; }
    .vh-pt__search { display: flex; align-items: center; gap: .6rem; flex: 1; max-width: 33rem; height: 44px; padding: 0 1rem; border: 1px solid var(--vh-pt-border); border-radius: 10px; background: var(--vh-pt-soft); color: var(--vh-pt-muted); }
    .vh-pt__search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--vh-pt-text); font: inherit; font-size: .9rem; outline: none; }
    .vh-pt__search:focus-within { border-color: var(--c-primary-600); }
    .vh-pt__track { display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1rem; border: 1px solid var(--vh-pt-border); border-radius: 10px; color: var(--vh-pt-text); font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
    .vh-pt__track:hover { border-color: var(--c-primary-600); color: var(--c-primary-600); }
    .vh-pt__lang { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .4rem; font-size: 1.1rem; }
    .vh-pt__langsel { color: var(--vh-pt-text); font-size: .875rem !important; }
    .vh-pt__lang:not(:has(select)) { display: none; }
}
@media (min-width: 1024px) {
    .vh-pt { display: grid; grid-template-columns: var(--vh-rail) minmax(0, 1fr); gap: 0; padding: 0; }
    .vh-pt__brand { height: 100%; padding: 0 1.25rem; border-right: 1px solid var(--vh-pt-border); box-sizing: border-box; }
    .vh-pt__bar { display: flex; align-items: center; gap: 1rem; padding: 0 1.75rem 0 1.25rem; min-width: 0; }
    .vh-pt__burger { order: 0; }
    .vh-pt__acts { gap: .75rem; }
    .vh-pt__name { display: inline; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 600; }
    .vh-pt__chev { display: inline; font-size: .75rem; color: var(--vh-pt-muted); }

    /* Sidebar rail + content */
    .vh-panel .vh-acc-wrap { max-width: none; margin: 0; padding: 0; }
    .vh-panel .vh-acc-layout { flex-direction: row; gap: 0; align-items: stretch; }
    .vh-panel .vh-acc-side, .vh-panel .vh-acc-side--desktop { display: block; width: var(--vh-rail); flex-shrink: 0; position: sticky; top: var(--vh-pt-h); align-self: flex-start; height: calc(100vh - var(--vh-pt-h)); overflow-y: auto; padding: 1.4rem 1rem; box-sizing: border-box; background: var(--vh-pt-bg); border-right: 1px solid var(--vh-pt-border); }
    .vh-panel .vh-acc-main { padding: 1.75rem 2rem 3rem; }
    .vh-panel .vh-acc-nav { gap: .3rem; }
    .vh-panel .vh-acc-nav__link { padding: .75rem 1rem; font-size: .95rem; color: var(--vh-pt-text); }
    .vh-panel .vh-acc-nav__link .bi { font-size: 1.25rem; }
    .vh-panel .vh-acc-nav__link.is-active { color: #fff; }
    .vh-panel .vh-acc-profile { flex-wrap: nowrap; align-items: flex-start; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .vh-panel { --vh-rail: 14rem; } .vh-panel .vh-acc-main { padding: 1.5rem 1.25rem 3rem; } }

/* Below 1024px: the account nav is a drawer (menu button in the top bar). */
.vh-pt-scrim { display: none; }
@media (max-width: 1023px) {
    .vh-panel .vh-acc-side, .vh-panel .vh-acc-side--desktop { display: none; }
    html.vh-panel-nav .vh-panel .vh-acc-side, html.vh-panel-nav .vh-panel .vh-acc-side--desktop { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 95; width: min(82vw, 18rem); padding: 1.25rem .9rem; overflow-y: auto; background: var(--vh-pt-bg); box-shadow: 0 0 40px rgba(15, 23, 42, .3); }
    html.vh-panel-nav .vh-panel .vh-acc-nav { flex-direction: column; overflow: visible; gap: .25rem; }
    html.vh-panel-nav .vh-panel .vh-acc-nav__link { border-color: transparent; background: transparent; padding: .75rem 1rem; color: var(--vh-pt-text); }
    html.vh-panel-nav .vh-panel .vh-acc-nav__link.is-active { background: var(--c-primary-600); color: #fff; }
    html.vh-panel-nav .vh-panel .vh-acc-nav__label { flex: 1; }
    html.vh-panel-nav .vh-panel .vh-acc-nav__out .vh-acc-nav__link { width: 100%; }
    html.vh-panel-nav .vh-pt-scrim { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(15, 23, 42, .45); }
}
/* Panel dashboard fit (demo: 4 wishlist cards per row, profile button beside the name) */
@media (min-width: 1280px) {
    .vh-panel .vh-acc-grid { grid-template-columns: minmax(0, 1fr) 23rem; }
    .vh-panel .vh-acc-wish { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
    .vh-panel .vh-acc-profile__body { min-width: 0; }
    .vh-panel .vh-acc-profile > .vh-acc-btn { flex-shrink: 0; }
}

/* ==========================================================================
   Customer sign-in pages (auth/layout: login · forgot · reset). Full-screen
   split: brand panel (left) + form card. Texts: config/auth_page.php.
   ========================================================================== */
.vh-bare #main-content { min-height: 100vh; background: #f5f7fb; }
html.dark .vh-bare #main-content { background: #0b1120; }
.vh-auth { --au-text: #0f172a; --au-muted: #64748b; --au-border: #e2e8f0; --au-card: #fff; --au-soft: #f8fafc; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100vh; color: var(--au-text); }
html.dark .vh-auth { --au-text: #f8fafc; --au-muted: #94a3b8; --au-border: #1f2937; --au-card: #111827; --au-soft: #0f172a; }

/* Brand panel */
.vh-auth__brand { position: relative; overflow: hidden; padding: 28px 20px 40px; background: radial-gradient(120% 90% at 0% 0%, var(--c-primary-50, #eef2ff) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #eaf2ff 0%, #f7faff 55%, #ffffff 100%); }
html.dark .vh-auth__brand { background: linear-gradient(160deg, #0f1b33 0%, #0b1120 100%); }
.vh-auth__brandin { position: relative; z-index: 2; max-width: 34rem; }
.vh-auth.has-img .vh-auth__brandin { max-width: 62%; }
.vh-auth__logo { display: inline-flex; align-items: center; gap: .75rem; color: var(--au-text); text-decoration: none; }
.vh-auth__logo strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.vh-auth__logo small { display: block; margin-top: 4px; font-size: .85rem; color: var(--au-muted); }
.vh-auth__headline { margin: 1.4rem 0 0; font-size: 2.1rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.vh-auth__headline span { display: block; color: var(--c-primary-600); }
.vh-auth__intro { margin: .9rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--au-muted); }
.vh-auth__features { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; }
.vh-auth__features li { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 5.25rem; text-align: center; font-size: .78rem; line-height: 1.25; }
.vh-auth__features small { display: none; }
.vh-auth__ficon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--c-primary-600); box-shadow: 0 6px 16px rgba(30, 64, 175, .1); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
html.dark .vh-auth__ficon { background: rgba(255, 255, 255, .06); }
.vh-auth__img { position: absolute; right: -6%; bottom: 0; z-index: 1; width: 46%; max-height: 92%; object-fit: contain; object-position: bottom right; pointer-events: none; }
.vh-auth__stats { display: none; }

/* Form panel */
.vh-auth__panel { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: center; margin-top: -1.5rem; padding: 0 .75rem 2rem; }
.vh-auth__card { width: 100%; max-width: 30rem; padding: 1.75rem 1.4rem; border-radius: 1.5rem; background: var(--au-card); border: 1px solid var(--au-border); box-shadow: 0 24px 60px rgba(15, 23, 42, .08); box-sizing: border-box; }
.vh-auth__title { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.vh-auth__sub { margin: .5rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--au-muted); }
.vh-auth__flash { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; padding: .75rem .9rem; border-radius: .75rem; font-size: .875rem; }
.vh-auth__flash.is-ok { background: #ecfdf5; color: #047857; }
.vh-auth__flash.is-error { background: #fef2f2; color: #b91c1c; }
.vh-auth__form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.vh-auth__field { display: grid; gap: .45rem; font-size: .92rem; font-weight: 600; }
.vh-auth__input { display: flex; align-items: center; gap: .7rem; height: 3.25rem; padding: 0 1rem; border: 1px solid var(--au-border); border-radius: .75rem; background: var(--au-card); color: var(--au-muted); font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.vh-auth__input:focus-within { border-color: var(--c-primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary-600) 15%, transparent); }
.vh-auth__input.is-invalid { border-color: #ef4444; }
.vh-auth__input > .bi { font-size: 1.15rem; }
.vh-auth__input input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--au-text); font: inherit; font-size: .95rem; outline: none; box-shadow: none; }
.vh-auth__eye { border: 0; background: none; color: var(--au-muted); font-size: 1.15rem; cursor: pointer; padding: .25rem; }
.vh-auth__err { color: #dc2626; font-size: .8rem; font-weight: 500; }
.vh-auth__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .9rem; }
.vh-auth__check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.vh-auth__check input { width: 1.15rem; height: 1.15rem; accent-color: var(--c-primary-600); }
.vh-auth__link, .vh-auth__foot a { color: var(--c-primary-600); font-weight: 600; text-decoration: none; }
.vh-auth__link:hover, .vh-auth__foot a:hover { text-decoration: underline; }
.vh-auth__btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; height: 3.4rem; border: 0; border-radius: .75rem; background: var(--c-primary-600); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: filter .15s; }
.vh-auth__btn:hover { filter: brightness(1.07); }
.vh-auth__or { display: flex; align-items: center; gap: .9rem; margin: 1.5rem 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--au-muted); }
.vh-auth__or::before, .vh-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--au-border); }
.vh-auth__social { display: grid; gap: .75rem; }
.vh-auth__soc { display: flex; align-items: center; justify-content: center; gap: .75rem; height: 3.25rem; border: 1px solid var(--au-border); border-radius: .75rem; background: var(--au-card); color: var(--au-text); font-size: .95rem; font-weight: 600; text-decoration: none; transition: background .15s; }
.vh-auth__soc:hover { background: var(--au-soft); }
.vh-auth__soc svg { width: 1.35rem; height: 1.35rem; }
.vh-auth__soc .bi { font-size: 1.3rem; color: var(--c-primary-600); }
.vh-auth__foot { margin: 1.5rem 0 0; text-align: center; font-size: .92rem; color: var(--au-muted); }

@media (min-width: 640px) {
    .vh-auth__brand { padding: 40px 40px 56px; }
    .vh-auth__headline { font-size: 2.75rem; }
    .vh-auth__card { padding: 2.5rem 2.25rem; }
}
@media (min-width: 1024px) {
    .vh-auth { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-content: stretch; }
    .vh-auth__brand { display: flex; flex-direction: column; justify-content: center; padding: 56px 6% 48px 7%; min-height: 100vh; box-sizing: border-box; }
    .vh-auth.has-img .vh-auth__brandin { max-width: 52%; }
    .vh-auth__headline { font-size: clamp(3rem, 4.4vw, 4.25rem); }
    .vh-auth__intro { font-size: 1.15rem; max-width: 28rem; }
    .vh-auth__features { flex-direction: column; flex-wrap: nowrap; gap: 1.1rem; margin-top: 2rem; }
    .vh-auth__features li { flex-direction: row; width: auto; text-align: left; gap: 1.1rem; font-size: 1rem; }
    .vh-auth__features strong { display: block; font-size: 1.05rem; }
    .vh-auth__features small { display: block; margin-top: 2px; font-size: .9rem; color: var(--au-muted); }
    .vh-auth__ficon { width: 60px; height: 60px; border-radius: 1rem; font-size: 1.6rem; }
    .vh-auth__img { width: 58%; right: -4%; max-height: 88%; }
    .vh-auth__stats { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-self: flex-start; gap: 1.25rem 2.25rem; list-style: none; margin: 2.5rem 0 0; padding: 1.1rem 1.75rem; border-radius: 1rem; background: rgba(255, 255, 255, .78); box-shadow: 0 10px 30px rgba(15, 23, 42, .06); backdrop-filter: blur(8px); }
    html.dark .vh-auth__stats { background: rgba(17, 24, 39, .8); }
    .vh-auth__stats li { display: flex; align-items: center; gap: .8rem; }
    .vh-auth__stats .bi { font-size: 1.75rem; }
    .vh-auth__stats strong { display: block; font-size: 1.2rem; font-weight: 800; }
    .vh-auth__stats small { font-size: .85rem; color: var(--au-muted); }
    .vh-auth__panel { align-items: center; margin: 0; padding: 3rem 2.5rem; }
    .vh-auth__card { padding: 3.25rem 3.25rem 2.75rem; }
}
/* Sign-up extras */
.vh-auth__opt { font-style: normal; font-weight: 400; font-size: .8rem; color: var(--au-muted); }
.vh-auth__pair { display: grid; gap: 1.1rem; }
.vh-auth__pair > * { min-width: 0; }
.vh-auth__field { grid-template-columns: minmax(0, 1fr); }
.vh-auth__input { min-width: 0; }
.vh-auth__hint { font-size: .8rem; font-weight: 400; color: var(--au-muted); }
.vh-auth__terms { align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--au-muted); }
.vh-auth__terms input { margin-top: .15rem; flex-shrink: 0; }
.vh-auth__notice { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.vh-auth__notice .vh-auth__btn { margin-top: 1.25rem; }
.vh-auth__noticeicon { width: 64px; height: 64px; margin-bottom: .75rem; border-radius: 999px; background: var(--c-primary-50, #eef2ff); color: var(--c-primary-600); font-size: 1.75rem; display: inline-flex; align-items: center; justify-content: center; }

/* Header category menus: overflow goes into "More" (assets/js/nav-fit.js) */
.vh-navfit-off { display: none !important; }
.vh-navmore { position: relative; flex-shrink: 0; }
.vh-navmore__btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.vh-navmore__btn:hover, .vh-navmore.is-open .vh-navmore__btn { color: var(--c-primary-600, #4f46e5); }
.vh-navmore__btn .bi { font-size: 12px; transition: transform .2s; }
.vh-navmore.is-open .vh-navmore__btn .bi, .vh-navmore:hover .vh-navmore__btn .bi { transform: rotate(180deg); }
.vh-navmore__menu { position: absolute; top: 100%; right: 0; z-index: 60; display: none; min-width: 210px; max-height: 70vh; overflow-y: auto; padding: 6px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .3); }
.vh-navmore:hover .vh-navmore__menu, .vh-navmore:focus-within .vh-navmore__menu, .vh-navmore.is-open .vh-navmore__menu { display: grid; }
.vh-navmore__link { padding: 9px 12px; border-radius: 8px; color: #374151; font-size: 14px; text-decoration: none; white-space: nowrap; }
.vh-navmore__link:hover { background: var(--c-primary-50, #eef2ff); color: var(--c-primary-600, #4f46e5); }
.dark .vh-navmore__menu { border-color: #374151; background: #1f2937; }
.dark .vh-navmore__link { color: #e5e7eb; }
.dark .vh-navmore__link:hover { background: #111827; }

/* ── Header Mega Menu (Admin → Navigation Menu → Menu Type "Mega Menu"; shop/partials/nav-mega) ── */
.vh-mega-scope { position: relative; }
.vh-mega__chev { margin-left: .3rem; font-size: .7rem; transition: transform .2s; }
.vh-mega:hover .vh-mega__chev, .vh-mega__chev.is-open { transform: rotate(180deg); }
.vh-mega__badge { margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; background: #e11d48; color: #fff; font-size: .65rem; font-weight: 700; line-height: 1.4; }
.vh-mega__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 1.25rem; border: 1px solid #e5e7eb; border-top: 0; border-radius: 0 0 1rem 1rem; background: #fff; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .25); }
.vh-mega__body { display: grid; gap: 1.5rem; }
.vh-mega__panel--category_grid .vh-mega__body:has(.vh-mega__products) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.vh-mega__panel--featured .vh-mega__body:has(.vh-mega__cats):has(.vh-mega__products) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.vh-mega__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem 1.25rem; align-content: start; }
.vh-mega__panel--featured .vh-mega__cats { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.vh-mega__cathead { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 700; color: #111827; text-decoration: none; }
.vh-mega__cathead:hover { color: var(--c-primary-600, #4f46e5); }
.vh-mega__panel--featured .vh-mega__cathead { padding: .45rem .5rem; border-radius: .6rem; font-weight: 600; }
.vh-mega__panel--featured .vh-mega__cathead:hover { background: var(--c-primary-50, #eef2ff); }
.vh-mega__caticon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: .6rem; background: var(--c-primary-50, #eef2ff); color: var(--c-primary-600, #4f46e5); overflow: hidden; font-size: 1.05rem; }
.vh-mega__caticon img { width: 100%; height: 100%; object-fit: cover; }
.vh-mega__cat ul { margin: .5rem 0 0 2.85rem; padding: 0; list-style: none; display: grid; gap: .3rem; }
.vh-mega__cat ul a, .vh-mega__link { font-size: .8125rem; color: #4b5563; text-decoration: none; }
.vh-mega__cat ul a:hover, .vh-mega__link:hover { color: var(--c-primary-600, #4f46e5); }
.vh-mega__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem 1.25rem; }
.vh-mega__link { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: .875rem; }
.vh-mega__label { margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }
.vh-mega__pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem .75rem; }
.vh-mega__product { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .65rem; align-items: center; padding: .4rem; border-radius: .75rem; text-decoration: none; color: #111827; }
.vh-mega__product:hover { background: var(--c-primary-50, #eef2ff); }
.vh-mega__pimg { grid-row: 1 / span 2; display: block; width: 3.5rem; height: 3.5rem; border-radius: .6rem; overflow: hidden; background: #f3f4f6; }
.vh-mega__pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.vh-mega__product:hover .vh-mega__pimg img { transform: scale(1.05); }
.vh-mega__pname { align-self: end; font-size: .8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-mega__pprice { align-self: start; font-size: .8125rem; font-weight: 700; color: var(--c-primary-600, #4f46e5); }
.vh-mega__pprice s { margin-left: .35rem; color: #9ca3af; font-weight: 500; }
.vh-mega__all { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-size: .8125rem; font-weight: 700; color: var(--c-primary-600, #4f46e5); text-decoration: none; }
.vh-mega__html { color: #374151; font-size: .875rem; }
.vh-mega__html img { max-width: 100%; height: auto; }
.vh-mm-icon { width: 1.25rem; font-size: 1.1rem; text-align: center; }
.dark .vh-mega__panel { background: #111827; border-color: #1f2937; }
.dark .vh-mega__cathead, .dark .vh-mega__product { color: #f3f4f6; }
.dark .vh-mega__cat ul a, .dark .vh-mega__link, .dark .vh-mega__html { color: #d1d5db; }
.dark .vh-mega__caticon { background: rgba(99, 102, 241, .16); }
.dark .vh-mega__pimg { background: #1f2937; }
.dark .vh-mega__panel--featured .vh-mega__cathead:hover { background: rgba(99, 102, 241, .14); }

/* Spam trap on public forms (shop/partials/honeypot): off-screen, never focusable for people. */
.vh-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }