/** Shopify CDN: Minification failed

Line 37:27 Unexpected "*"
Line 97:23 Unexpected "*"

**/

/* ============================================
   MAXX VOLTS GLOBAL DARK MODE
   Applies to ALL pages site-wide
   ============================================ */

/* Base dark mode colors */
:root {
    --dark-bg: #0a0a0a;
    --dark-bg-secondary: #141414;
    --dark-bg-tertiary: #1e1e1e;
    --dark-text: #f0f0f0;
    --dark-text-muted: #a0a0a0;
    --dark-border: #333333;
    --accent-yellow: #f5c518;
    --accent-yellow-hover: #ffd700;
}

/* Global body and html */
html, body {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* All main containers */
.page-width,
.shopify-section,
main,
#MainContent,
.main-content,
#shopify-section-template--*,
[class*="section-"],
.content-for-layout {
    background-color: transparent !important;
    color: var(--dark-text) !important;
}

/* Header */
.header,
.header-wrapper,
#shopify-section-header,
.section-header,
header,
.header__heading,
.header__inline-menu {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Navigation */
nav, .nav, .menu, .header__menu {
    background-color: var(--dark-bg) !important;
}

nav a, .nav a, .menu a, .header__menu-item {
    color: var(--dark-text) !important;
}

nav a:hover, .nav a:hover, .menu a:hover {
    color: var(--accent-yellow) !important;
}

/* Footer */
footer,
.footer,
#shopify-section-footer,
.section-footer,
.footer-block {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

footer a, .footer a {
    color: var(--dark-text-muted) !important;
}

footer a:hover, .footer a:hover {
    color: var(--accent-yellow) !important;
}

/* Product pages */
.product,
.product-section,
.product__info-wrapper,
.product__info-container,
.product__description,
.product-form,
.product__title,
#ProductInfo-template--*,
.product-single__meta {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.product__title h1,
.product__title,
h1.product__title {
    color: var(--dark-text) !important;
}

/* Product cards / grid */
.product-card,
.card,
.card-wrapper,
.product-item,
.grid__item,
.collection-product-card {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.card__content,
.card__heading,
.card__information,
.product-card__title {
    color: var(--dark-text) !important;
}

/* Collection pages */
.collection,
.collection-hero,
.collection-hero__title,
.collection__title,
#Collection,
.collection-list {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Cart */
.cart,
.cart-items,
.cart__items,
.cart-drawer,
.drawer,
#cart-drawer,
.cart-notification {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Forms and inputs */
input, textarea, select {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

input::placeholder, textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

/* Search */
.search,
.search-modal,
.search__input,
.predictive-search,
.predictive-search__results,
#Search-In-Modal,
.search-modal__content {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Buttons - keep accent colors */
.button, .btn, 
button[type="submit"],
.shopify-payment-button button,
.product-form__submit {
    background-color: var(--accent-yellow) !important;
    color: #000 !important;
    border: none !important;
}

.button:hover, .btn:hover,
button[type="submit"]:hover {
    background-color: var(--accent-yellow-hover) !important;
}

/* Secondary buttons */
.button--secondary,
.btn--secondary {
    background-color: transparent !important;
    color: var(--dark-text) !important;
    border: 2px solid var(--dark-border) !important;
}

/* All text elements */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text) !important;
}

p, span, div, li, td, th, label {
    color: inherit;
}

a {
    color: var(--accent-yellow) !important;
}

a:hover {
    color: var(--accent-yellow-hover) !important;
}

/* Breadcrumbs */
.breadcrumbs, .breadcrumb {
    color: var(--dark-text-muted) !important;
}

/* Prices */
.price, .price__regular, .price__sale,
.product__price, .money {
    color: var(--accent-yellow) !important;
}

/* Quantity selectors */
.quantity, .quantity-selector,
.quantity__input, .quantity__button {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Announcements */
.announcement-bar,
.announcement,
#shopify-section-announcement-bar {
    background-color: var(--accent-yellow) !important;
    color: #000 !important;
}

/* Modals and popups */
.modal, .popup, .drawer__inner,
[role="dialog"], .overlay {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Tables */
table, th, td {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Accordions */
.accordion, .collapsible,
.accordion__content,
details, summary {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Sliders / Carousels */
.slider, .slideshow, .carousel,
.swiper, .flickity,
.slideshow__slide {
    background-color: var(--dark-bg) !important;
}

/* Rich text sections */
.rich-text, .rte,
.rich-text__text,
[class*="rich-text"] {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Image with text sections */
.image-with-text,
.media-with-text,
[class*="image-with-text"] {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Contact / pages */
.page, .page-width,
.shopify-policy__container,
.template-page {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Blog */
.blog, .article,
.blog-articles,
.article__content {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Customer account pages */
.customer, .account,
#customer, .template-customers {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* FAQ sections */
.faq, .faq-section {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Contact forms */
.contact, .contact-form {
    background-color: var(--dark-bg) !important;
}

/* Newsletter */
.newsletter, .newsletter-form {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Featured collections */
.featured-collection,
.collection-list,
.featured-products {
    background-color: var(--dark-bg) !important;
}

/* Testimonials */
.testimonials, .testimonial {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Icons */
svg, .icon {
    fill: currentColor;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    background-color: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--dark-border);
    border-radius: 4px;
}

/* Selection */
::selection {
    background-color: var(--accent-yellow);
    color: #000;
}

/* Fix white backgrounds that might slip through */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
    background-color: var(--dark-bg) !important;
}

/* Fix white text on dark backgrounds */
[style*="color: black"],
[style*="color: #000"] {
    color: var(--dark-text) !important;
}

/* Ensure images don't get inverted */
img, video, picture, svg:not(.icon) {
    filter: none !important;
}


/* ============================================
   FIX: Light-colored section boxes
   Force these to be dark or ensure text visible
   ============================================ */

/* Multicolumn sections (the trophy/features box) */
.multicolumn,
.multicolumn-card,
.multicolumn-card__info,
.multicolumn-list,
[class*="multicolumn"],
.section-multicolumn-padding {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

.multicolumn-card__info h3,
.multicolumn-card__info p,
.multicolumn-card .icon-with-text span,
.multicolumn h2, .multicolumn h3,
.multicolumn p, .multicolumn span {
    color: var(--dark-text) !important;
}

/* Rich text blocks that might have light backgrounds */
.rich-text,
.rich-text__wrapper,
.rich-text__blocks,
.rich-text__text,
.rich-text__heading,
section[class*="rich-text"] {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.rich-text h1, .rich-text h2, .rich-text h3,
.rich-text p, .rich-text span, .rich-text li {
    color: var(--dark-text) !important;
}

/* Custom content sections */
.custom-content,
.custom__item,
.custom__item-inner {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Collage sections */
.collage,
.collage-card,
.collage__item {
    background-color: var(--dark-bg-secondary) !important;
}

/* Banner/promo sections */
.banner,
.banner__box,
.banner__content,
[class*="banner__"] {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Image banner sections */
.image-banner,
.image-banner__content {
    color: var(--dark-text) !important;
}

/* Any section with gradient-background class */
.gradient-background,
.color-background-1,
.color-background-2,
.color-scheme-1,
.color-scheme-2,
.color-scheme-3,
.color-scheme-4,
.color-scheme-5 {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Shopify section wrappers */
.shopify-section [class*="color-"],
.shopify-section [class*="background-"] {
    background-color: var(--dark-bg-secondary) !important;
}

/* Icon columns / feature grids */
.icon-with-text,
.icon-with-text__text,
.icon-with-text__icon {
    color: var(--dark-text) !important;
}

/* Content wrappers with potential light backgrounds */
.content-container,
.section__content,
.block__content {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Force all section backgrounds that use inline styles */
section[style*="background"],
div[style*="background"] {
    background-color: var(--dark-bg-secondary) !important;
}

/* CTA sections (the teal "Not sure" box - keep it but ensure text visible) */
.cta-section,
.call-to-action,
[class*="cta"] {
    color: var(--dark-text) !important;
}

/* Any remaining white/light backgrounds */
.bg-white, .bg-light,
[class*="bg-white"],
[class*="bg-light"],
[class*="background-white"],
[class*="background-light"] {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

/* Product metafields / additional info blocks */
.product__metafields,
.product-metafield,
.metafield-rich_text_field,
.metafield {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Override any element with light text on light bg issue */
[style*="color: #f"],
[style*="color: white"],
[style*="color: rgb(255"] {
    color: var(--dark-text) !important;
}

/* Tabs and tab content */
.tabs, .tab-content,
.product-tabs, .product-tab-content {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Override rounded corner boxes that might be light */
[class*="rounded"],
[class*="radius"] {
    background-color: inherit;
}

/* Make sure emojis and icons are visible */
.emoji, [class*="emoji"],
.icon-wrapper {
    filter: none !important;
}

/* ============================================
   FIX: White box in header - grid cells
   ============================================ */

/* The header grid layout */
.site-header,
.site-header__mobile-nav,
.site-header .grid,
.site-header .grid__item,
.grid--table {
    background-color: transparent !important;
    background: transparent !important;
}

/* Specifically target the left grid cell (one-third) */
.medium-up--one-third,
.medium-up--push-one-third,
.grid__item.medium-up--one-third {
    background-color: transparent !important;
    background: transparent !important;
}

/* The search bar area */
.search-bar,
.search-bar.drawer,
.drawer--top,
.search-header,
.search-header__input {
    background-color: var(--dark-bg-secondary) !important;
}

/* Site header logo container */
.site-header__logo,
.site-header__logo-image,
.logo-align--center,
h1.site-header__logo {
    background-color: transparent !important;
    background: transparent !important;
}

/* All header icons wrapper */
.site-header__icons,
.site-header__icons-wrapper,
.site-header__icons--plus {
    background-color: transparent !important;
    background: transparent !important;
}

/* Any header element with potential white bg */
[class*="site-header"] {
    background-color: transparent !important;
}

/* Cart popup */
.cart-popup-wrapper {
    background-color: var(--dark-bg-secondary) !important;
}

/* Page container */
.page-container {
    background-color: var(--dark-bg) !important;
}

/* Skip links and accessibility elements */
.skip-link,
.in-page-link,
.visually-hidden {
    background-color: transparent !important;
}

/* Force all direct children of header to be transparent */
header > *,
header > div,
.site-header > *,
.site-header > div {
    background-color: transparent !important;
}

/* Target the exact grid structure from the theme */
.grid--no-gutters {
    background-color: transparent !important;
}

/* The search drawer at top */
.drawer {
    background-color: var(--dark-bg-secondary) !important;
}

/* Make sure header text is visible */
.site-header a,
.site-header button,
.site-header input {
    color: var(--dark-text) !important;
}

.site-header input {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}

/* Shopify section containing header */
.shopify-section--header,
#shopify-section-header {
    background-color: transparent !important;
}