/** Shopify CDN: Minification failed
Line 572:1 Expected identifier but found "<"
Line 572:51 Expected "}" to go with "{"
**/
/* ============================================================
BARREL EXHAUST — GLOBAL DARK THEME OVERRIDE
Inject into theme.liquid inside :
{{ 'barrel-global.css' | asset_url | stylesheet_tag }}
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600&family=Barlow+Condensed:wght@700&display=swap');
/* ── TOKENS ── */
:root {
--be-orange: #FF4D00;
--be-orange-dim: rgba(255,77,0,0.12);
--be-orange-glow: rgba(255,77,0,0.25);
--be-black: #080808;
--be-dark: #0f0f0f;
--be-card: #141414;
--be-border: #1e1e1e;
--be-border-light: #2a2a2a;
--be-white: #f0f0f0;
--be-gray: #888;
--be-gray-light: #777;
--be-font-display: 'Bebas Neue', sans-serif;
--be-font-body: 'DM Sans', sans-serif;
--be-font-cond: 'Barlow Condensed', sans-serif;
}
/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background-color: var(--be-black) !important;
color: var(--be-white) !important;
font-family: var(--be-font-body) !important;
}
/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6 { color: var(--be-white) !important; }
/* ── IMAGES ── */
img { max-width: 100%; height: auto; display: block; }
/* ── TAP DELAY ── */
a, button, [role="button"] { touch-action: manipulation; }
/* ── FOCUS RINGS ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid #FF4D00 !important;
outline-offset: 3px !important;
}
/* ══════════════════════════════════════
HEADER / NAV
══════════════════════════════════════ */
.shopify-section-header,
header,
.header,
.header__wrapper,
.site-header,
[class*="header"] {
background: rgba(8,8,8,0.95) !important;
/* REMOVE THESE TWO LINES ↓ */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 200 !important;
}
/* Remove all lines/borders/underlines from header */
.header__heading-link,
.header__heading-link::before,
.header__heading-link::after,
.header__icon,
header a,
header a:hover,
header button {
border: none !important;
border-bottom: none !important;
text-decoration: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Logo */
.header__heading-link,
.header__heading,
.site-header__logo a {
font-family: var(--be-font-display) !important;
font-size: 26px !important;
letter-spacing: 0.08em !important;
color: var(--be-white) !important;
}
/* Nav links */
.header__menu-item { color: var(--be-gray) !important; }
.header__menu-item a,
.header__nav a,
.site-nav a,
.nav-link,
header a {
color: var(--be-gray) !important;
font-family: var(--be-font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.header__menu-item a:hover,
.header__nav a:hover,
header a:hover { color: var(--be-white) !important; }
/* Dropdown trigger items */
.header__menu-item > summary,
.header__menu-item > button,
.header__menu-item > span,
.header__menu-item--active > a,
.header__menu-item--active > summary,
.header__submenu-toggle,
header details > summary,
header button,
header [role="button"],
header summary {
color: var(--be-gray) !important;
font-family: var(--be-font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
background: none !important;
border: none !important;
cursor: pointer !important;
}
header details > summary:hover,
header button:hover,
.header__submenu-toggle:hover { color: var(--be-white) !important; }
/* Cart, search, account icons */
.header__icon svg, .header__icon path {
fill: var(--be-gray) !important;
stroke: var(--be-gray) !important;
}
.header__icon:hover svg, .header__icon:hover path {
fill: var(--be-white) !important;
stroke: var(--be-white) !important;
}
/* Hamburger visible */
.header__icon--menu svg, .header__icon--menu path {
stroke: #f0f0f0 !important;
fill: none !important;
}
/* Reduce header height on mobile */
@media (max-width: 768px) {
.header__wrapper, .header, .site-header {
min-height: 48px !important;
height: 48px !important;
padding-top: 10 !important;
padding-bottom: 0 !important;
}
}
/* ══════════════════════════════════════
MOBILE MENU DRAWER
══════════════════════════════════════ */
/* ===== FIX: SINGLE SCROLL CONTAINER ===== */
/* ONLY the main drawer should scroll */
.menu-drawer {
background: #0f0f0f !important;
border-color: #1e1e1e !important;
z-index: 300 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
max-height: 100vh !important;
}
/* EVERYTHING ELSE: NO SCROLL */
.menu-drawer__container,
.menu-drawer__navigation,
.menu-drawer__navigation-container,
.header-drawer,
.header-drawer__inner,
[id*="menu-drawer"]:not(.menu-drawer),
[class*="menu-drawer"]:not(.menu-drawer) {
background: #0f0f0f !important;
border-color: #1e1e1e !important;
z-index: 300 !important;
overflow: visible !important;
max-height: none !important;
}
.menu-drawer__overlay, .overlay, .drawer__overlay {
background: rgba(0,0,0,0.75) !important;
}
.menu-drawer a,
.menu-drawer__navigation a,
.list-menu__item a,
.menu-drawer .header__menu-item a,
[class*="menu-drawer"] a,
.menu-drawer .header__menu-item,
.menu-drawer .list-menu__item,
.menu-drawer details > summary,
.menu-drawer summary {
color: #f0f0f0 !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
opacity: 1 !important;
visibility: visible !important;
}
.menu-drawer a:hover,
.menu-drawer__navigation a:hover { color: #FF4D00 !important; }
.menu-drawer__navigation,
.menu-drawer__navigation-container,
.list-menu {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
flex: 1 !important;
padding-bottom: 80px !important;
}
.menu-drawer__close-button, .drawer__close, .header-drawer__close {
background: transparent !important;
color: #f0f0f0 !important;
}
.menu-drawer__close-button svg, .drawer__close svg { stroke: #f0f0f0 !important; }
.menu-drawer__submenu, .header__submenu { background: #141414 !important; }
.menu-drawer .header__icon svg, .menu-drawer .header__icon path {
stroke: #f0f0f0 !important;
fill: none !important;
}
.menu-drawer__utility-links,
.menu-drawer__footer,
[class*="menu-drawer__utility"] {
position: sticky !important;
bottom: 0 !important;
background: #0f0f0f !important;
border-top: 1px solid #1e1e1e !important;
padding: 16px !important;
z-index: 10 !important;
}
/* ══════════════════════════════════════
FOOTER
══════════════════════════════════════ */
.shopify-section-footer,
footer, .footer, .site-footer {
background-color: var(--be-dark) !important;
border-top: 1px solid var(--be-border) !important;
color: var(--be-gray) !important;
}
footer a, .footer a, .site-footer a {
color: var(--be-gray) !important;
text-decoration: none !important;
transition: color 0.2s !important;
font-size: 13px !important;
}
footer a:hover, .footer a:hover { color: var(--be-orange) !important; }
footer h2, footer h3, footer h4, .footer__heading {
font-family: var(--be-font-display) !important;
color: var(--be-white) !important;
letter-spacing: 0.05em !important;
}
/* ══════════════════════════════════════
BUTTONS
══════════════════════════════════════ */
.button,
.btn,
button[type="submit"],
.product-form__submit {
background-color: var(--be-orange) !important;
color: #fff !important;
font-family: var(--be-font-body) !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.05em !important;
border: none !important;
border-radius: 4px !important;
padding: 14px 28px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
}
.button:hover, .btn:hover,
button[type="submit"]:hover,
.product-form__submit:hover {
background-color: #ff6620 !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px var(--be-orange-glow) !important;
}
.button--secondary, .btn--secondary {
background: transparent !important;
border: 1px solid var(--be-border-light) !important;
color: var(--be-white) !important;
}
.button--secondary:hover, .btn--secondary:hover {
border-color: var(--be-orange) !important;
color: var(--be-orange) !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
/* ══════════════════════════════════════
PRODUCT CARDS
══════════════════════════════════════ */
.card, .product-card, .card-wrapper, .card__inner {
background: var(--be-card) !important;
border: 1px solid var(--be-border) !important;
border-radius: 12px !important;
transition: all 0.3s ease !important;
overflow: hidden !important;
}
.card:hover, .product-card:hover, .card-wrapper:hover {
border-color: rgba(255,77,0,0.3) !important;
transform: translateY(-4px) !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}
.card__heading a, .card__heading, .product-card__title {
color: var(--be-white) !important;
font-family: var(--be-font-body) !important;
font-weight: 600 !important;
}
.price, .price__regular, .price-item {
color: var(--be-orange) !important;
font-family: var(--be-font-cond) !important;
font-size: 18px !important;
font-weight: 700 !important;
}
/* ══════════════════════════════════════
COLLECTION
══════════════════════════════════════ */
.collection-hero, .collection__header, .collection-hero__inner {
background: var(--be-dark) !important;
border-bottom: 1px solid var(--be-border) !important;
}
.collection__title, .collection-hero__title, h1.title {
font-family: var(--be-font-display) !important;
color: var(--be-white) !important;
letter-spacing: 0.02em !important;
}
/* ══════════════════════════════════════
MISC UI
══════════════════════════════════════ */
.breadcrumbs, nav.breadcrumb { color: var(--be-gray) !important; }
.breadcrumbs a, nav.breadcrumb a { color: var(--be-gray) !important; }
.breadcrumbs a:hover { color: var(--be-orange) !important; }
.pagination a, .pagination__item {
background: var(--be-card) !important;
border: 1px solid var(--be-border) !important;
color: var(--be-white) !important;
border-radius: 4px !important;
}
.pagination a:hover, .pagination__item--current {
background: var(--be-orange) !important;
border-color: var(--be-orange) !important;
color: white !important;
}
.badge, .product-badge, .card__badge {
background: var(--be-orange) !important;
color: white !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-radius: 2px !important;
}
.drawer, .modal, .cart-drawer {
background: var(--be-dark) !important;
border-color: var(--be-border) !important;
}
.cart-drawer__header, .drawer__header {
border-bottom: 1px solid var(--be-border) !important;
}
.shopify-section { background: var(--be-black); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--be-dark); }
::-webkit-scrollbar-thumb { background: var(--be-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--be-orange); }
/* ══════════════════════════════════════
UTILITY CLASSES
══════════════════════════════════════ */
.be-orange { color: var(--be-orange); }
.be-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--be-orange);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.be-eyebrow::before {
content: '';
width: 24px; height: 1px;
background: var(--be-orange);
flex-shrink: 0;
}
/* ══════════════════════════════════════
PAYPAL & CHECKOUT
══════════════════════════════════════ */
.shopify-payment-button__button--unbranded {
background-color: var(--be-orange) !important;
}
.shopify-payment-button__button--branded {
all: revert !important;
width: 100% !important;
min-height: 48px !important;
border-radius: 4px !important;
cursor: pointer !important;
}
.shopify-payment-button, .dynamic-checkout__content {
margin-top: 12px !important;
}
.shopify-payment-button::before {
content: 'or pay with';
display: block;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: #555;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 10px;
}
.shopify-payment-button::after {
content: '🌍 International orders — PayPal accepted at checkout';
display: block;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: #555;
letter-spacing: 0.06em;
margin-top: 12px;
padding: 10px 16px;
border: 1px solid #1e1e1e;
border-radius: 4px;
background: #0d0d0d;
}
.shopify-payment-button__more-options {
color: #555 !important;
font-size: 12px !important;
font-family: 'DM Sans', sans-serif !important;
text-align: center !important;
display: block !important;
margin-top: 8px !important;
}
.product-form__buttons::after,
.product-form__submit-container::after {
content: '✓ Secure checkout · ✓ PayPal for international · ✓ GST invoice included';
display: block;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 10px;
color: #444;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #1a1a1a;
}
/* Ensure submenu links are fully clickable */
.menu-drawer__submenu,
.header__submenu {
position: relative !important;
z-index: 401 !important;
}
/* Make sure parent summary/button doesn’t block child links */
.menu-drawer details[open] > summary {
pointer-events: auto !important;
}
.menu-drawer details[open] > summary + .menu-drawer__submenu {
pointer-events: auto !important;
}
/* DONOT REMOVE ANYTHING TILL HERE */
/* Ensure icon buttons align properly */
.header__icon--search,
.modal__toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
/* Your custom icon */
.header__icon--search::before,
.modal__toggle::before {
content: "";
width: 20px;
height: 20px;
display: block;
background: no-repeat center / contain url("data:image/svg+xml;utf8,");
transform: translateY(1px); /* micro-adjust */
}
/* ── Search modal z-index fix ── */
.search-modal {
z-index: 9990 !important;
}
.search-modal__content {
z-index: 9991 !important;
.dn-sl {
padding: 14px 18px 6px !important;
font-size: 10px !important;
letter-spacing: 0.25em !important;
color: rgba(255,77,0,0.5) !important;
border-top: 1px solid rgba(255,77,0,0.1) !important;
margin-top: 6px !important;
}
.dn-cg + .dn-cg {
margin-top: 8px !important;
}/* ── Dealer network state grouping ── */
.dn-sl {
padding: 16px 18px 6px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
color: rgba(255, 77, 0, 0.6) !important;
border-top: 1px solid rgba(255, 77, 0, 0.12) !important;
margin-top: 4px !important;
display: block !important;
}
.dn-sl:first-child {
border-top: none !important;
margin-top: 0 !important;
}
.dn-ch {
border-bottom: 1px solid rgba(255, 77, 0, 0.15) !important;
padding-bottom: 12px !important;
}
.section-header .header {
padding-top: 8px !important;
padding-bottom: 8px !important;
}\n