/* Vape Hub BD — Black / Orange / White brand theme */
:root {
    --vh-orange: #FF7900;
    --vh-orange-hover: #E66A00;
    --vh-orange-dark: #C65F00;
    --vh-black: #111111;
    --vh-white: #FFFFFF;
    --vh-page: #F7F7F7;
    --vh-border: #E5E5E5;
}

/* General storefront surfaces */
html { scroll-behavior: smooth; }
body { background-color: var(--vh-page); }
a { transition: color .18s ease; }

/* Header: black primary bar and white branding */
header.sticky {
    background: var(--vh-black) !important;
    color: var(--vh-white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
}
header.sticky > div:first-child {
    background: var(--vh-black);
}
header.sticky > div:first-child > div:first-of-type img {
    background: var(--vh-orange);
    border-color: var(--vh-orange);
}
header.sticky > div:first-child > div:first-of-type span,
header.sticky .text-gray-800,
header.sticky .text-gray-700,
header.sticky .text-gray-600 {
    color: var(--vh-white) !important;
}
header.sticky nav {
    background: var(--vh-black) !important;
    border-top-color: #333333 !important;
    color: var(--vh-white) !important;
}
header.sticky nav a,
header.sticky nav .group > span {
    color: #F5F5F5;
}
header.sticky nav a:hover,
header.sticky nav .group > span:hover {
    color: var(--vh-orange) !important;
}
header.sticky nav .group > div {
    background: #FFFFFF;
    border-color: var(--vh-border);
}
header.sticky nav .group > div a {
    color: #222222;
}
header.sticky nav .group > div a:hover {
    background: #FFF3E6;
    color: var(--vh-orange-dark) !important;
}

/* Search */
#site-search-input:focus {
    border-color: var(--vh-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 121, 0, .16) !important;
}
#site-search-form button[type="submit"] {
    background: var(--vh-orange) !important;
    box-shadow: 0 2px 8px rgba(255, 121, 0, .25);
}
#site-search-form button[type="submit"]:hover {
    background: var(--vh-orange-hover) !important;
}

/* Cart and badges */
#cart-btn {
    background: #1B1B1B;
    border-color: #404040;
    color: #FFFFFF !important;
}
#cart-btn:hover {
    background: #292929;
    border-color: var(--vh-orange);
}
#cart-btn > i,
#cart-count-badge,
#wishlist-count-badge-desktop {
    color: #FFFFFF !important;
}
#cart-count-badge,
#wishlist-count-badge-desktop {
    background: var(--vh-orange) !important;
}
#cart-drawer h2 i { color: var(--vh-orange) !important; }
#cart-actions button,
#cart-actions a {
    background-color: var(--vh-orange) !important;
    color: #FFFFFF !important;
}
#cart-actions button:hover,
#cart-actions a:hover {
    background-color: var(--vh-orange-hover) !important;
}

/* Mobile navigation and drawer retain readable white surfaces */
#mobile-menu > div:nth-child(2) {
    background: #FFFFFF;
    color: #222222;
}
#mobile-menu > div:nth-child(2) > div:first-child {
    background: #FFF3E6;
}
#mobile-menu details summary:focus,
#mobile-menu a:hover {
    color: var(--vh-orange-dark) !important;
    background-color: #FFF8F1;
}
#mobile-menu .text-orange-600 { color: var(--vh-orange-dark) !important; }
body > nav.fixed.bottom-0 {
    border-top: 2px solid var(--vh-orange) !important;
}
nav.fixed.bottom-0 a:hover,
nav.fixed.bottom-0 a:focus {
    color: var(--vh-orange-dark) !important;
}

/* Reusable Tailwind accent utilities across storefront pages */
.text-blue-600, .text-blue-500, .text-blue-400,
.text-orange-600 {
    color: var(--vh-orange-dark) !important;
}
.bg-blue-600, .bg-orange-600 {
    background-color: var(--vh-orange) !important;
}
.hover\:bg-blue-700:hover, .hover\:bg-orange-700:hover {
    background-color: var(--vh-orange-hover) !important;
}
.border-blue-500, .focus\:border-blue-500:focus,
.focus\:border-orange-500:focus {
    border-color: var(--vh-orange) !important;
}
.focus\:ring-blue-500:focus,
.focus\:ring-orange-500:focus {
    --tw-ring-color: var(--vh-orange) !important;
}
.bg-blue-50, .bg-orange-50 {
    background-color: #FFF3E6 !important;
}

/* Footer: deep black with orange interactive accents */
footer.bg-\[\#0a192f\] {
    background: var(--vh-black) !important;
    border-top: 3px solid var(--vh-orange);
}
footer a:hover {
    color: var(--vh-orange) !important;
}
footer .text-blue-400,
footer .text-orange-400 {
    color: #FFAC66 !important;
}

/* Product cards */
.vh-card {
    background: #FFFFFF;
    border-color: var(--vh-border);
}
.vh-card:hover {
    border-color: #FFB366;
    box-shadow: 0 8px 22px rgba(17, 17, 17, .09);
}
.vh-card .vh-card-title:hover {
    color: var(--vh-orange-dark) !important;
}

/* Product details: selection controls and primary actions */
.vh-pill:hover {
    border-color: var(--vh-orange) !important;
}
.vh-pill.on {
    border-color: var(--vh-orange) !important;
    background: #FFF3E6 !important;
    color: var(--vh-orange-dark) !important;
}

/* Checkout: payment selection and primary purchase action */
#chk-place-btn {
    background: var(--vh-orange) !important;
    box-shadow: 0 6px 18px rgba(255, 121, 0, .2) !important;
}
#chk-place-btn:hover {
    background: var(--vh-orange-hover) !important;
}
#pm-cod, #pm-bkash {
    accent-color: var(--vh-orange);
}
label:has(#pm-cod:checked),
label:has(#pm-bkash:checked) {
    border-color: var(--vh-orange) !important;
    background: #FFF8F1 !important;
}

/* Consistent keyboard focus */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline-color: var(--vh-orange);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}


/* VH BLACK ORANGE WHITE FINISH V1 */
:root {
    --vh-orange: #FF7900;
    --vh-orange-hover: #E66A00;
    --vh-orange-dark: #C65F00;
    --vh-black: #111111;
    --vh-white: #FFFFFF;
}

/* Hero: retain existing image, sizing, copy and responsive layout. */
#vh-premium-hero {
    background-color: var(--vh-black);
}
#vh-premium-hero .vh-hero-blue,
#vh-premium-hero .vh-hero-points i {
    color: var(--vh-orange) !important;
}
#vh-premium-hero .vh-hero-button {
    background: var(--vh-orange) !important;
    color: var(--vh-white) !important;
    box-shadow: 0 7px 22px rgba(255, 121, 0, .24);
}
#vh-premium-hero .vh-hero-button:hover {
    background: var(--vh-orange-dark) !important;
}
/* Orange accents for existing category shortcuts and product cards. */
#vh-category-shortcuts .vh-category-link:hover {
    border-color: var(--vh-orange);
}
.vh-card .vh-card-title:hover {
    color: var(--vh-orange-dark) !important;
}

/* Keep primary interactive controls consistent with the brand. */
#site-search-form button[type="submit"],
#chk-place-btn {
    background-color: var(--vh-orange) !important;
}
#site-search-form button[type="submit"]:hover,
#chk-place-btn:hover {
    background-color: var(--vh-orange-hover) !important;
}