/** Shopify CDN: Minification failed

Line 32:19 Unexpected "*"

**/
/* ============================================
   APEX GRIP CO. — Master Brand Stylesheet
   All brand colors, typography, 3D effects,
   glassmorphism, animations, particles
   ============================================ */

/* === CSS VARIABLES === */
:root {
  --apex-black: #0D0D0F;
  --apex-dark: #111114;
  --apex-card: rgba(26,26,36,0.6);
  --apex-card-solid: #1A1A24;
  --apex-border: rgba(42,42,58,0.5);
  --apex-white: #F5F5F7;
  --apex-slate: #6B7280;
  --apex-muted: #94A3B8;
  --apex-blue: #2563EB;
  --apex-cyan: #06B6D4;
  --apex-orange: #F97316;
  --apex-green: #10B981;
  --apex-grad: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
}

/* === GLOBAL DARK MODE === */
body,
.shopify-section,
.section-template--*,
.page-width {
  background-color: var(--apex-black) !important;
  color: var(--apex-white) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  color: var(--apex-white) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

p, span, li, a, label, input, select, textarea {
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* === GRADIENT TEXT UTILITY === */
.apex-gradient-text {
  background: var(--apex-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === HEADER / NAVBAR (GLASSMORPHISM) === */
.header-wrapper,
.section-header,
.shopify-section-header {
  background: rgba(13,13,15,0.6) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.header__heading-link {
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.header__inline-menu .header__menu-item {
  color: var(--apex-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: color 0.2s !important;
}

.header__inline-menu .header__menu-item:hover {
  color: var(--apex-white) !important;
}

/* === BUTTONS (GRADIENT + GLOW) === */
.button,
.shopify-payment-button__button,
button[name="add"],
.btn,
.button--primary {
  background: var(--apex-grad) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 15px 32px !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.button::before,
button[name="add"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.button:hover,
button[name="add"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(37,99,235,0.4) !important;
}

.button:hover::before,
button[name="add"]:hover::before {
  opacity: 1;
}

.button--secondary {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--apex-white) !important;
  backdrop-filter: blur(8px) !important;
}

.button--secondary:hover {
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* === PRODUCT CARDS (3D HOVER) === */
.card-wrapper,
.product-card-wrapper,
.card {
  background: var(--apex-card) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.card-wrapper:hover,
.product-card-wrapper:hover,
.card:hover {
  border-color: rgba(37,99,235,0.4) !important;
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 40px rgba(37,99,235,0.08) !important;
}

.card__heading,
.card__heading a {
  color: var(--apex-white) !important;
  font-weight: 700 !important;
}

.card__information {
  color: var(--apex-muted) !important;
}

/* Product images zoom on hover */
.card .media img,
.card-wrapper .media img {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}
.card:hover .media img,
.card-wrapper:hover .media img {
  transform: scale(1.08) !important;
}

/* === PRICES === */
.price-item--regular,
.price-item {
  color: var(--apex-white) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

.price-item--sale {
  color: var(--apex-orange) !important;
}

.price-item--regular.price-item--last {
  color: var(--apex-slate) !important;
  text-decoration: line-through !important;
}

/* === BADGES === */
.badge {
  background: var(--apex-grad) !important;
  color: white !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}

.badge--sale,
.badge[data-badge*="sale"],
.badge[data-badge*="Save"] {
  background: var(--apex-orange) !important;
}

/* === ANNOUNCEMENT BAR (GRADIENT) === */
.announcement-bar {
  background: var(--apex-grad) !important;
  color: white !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}

/* === IMAGE BANNER / HERO === */
.banner {
  position: relative !important;
}

.banner__content {
  background: transparent !important;
}

.banner__heading {
  font-size: clamp(36px, 5vw, 60px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -2px !important;
}

/* === RICH TEXT SECTIONS === */
.rich-text__text,
.rich-text__text p {
  color: var(--apex-muted) !important;
}

.rich-text__heading {
  color: var(--apex-white) !important;
}

/* === MULTICOLUMN (FEATURE CARDS) === */
.multicolumn-card {
  background: rgba(26,26,36,0.4) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  transition: all 0.4s !important;
  position: relative !important;
  overflow: hidden !important;
}

.multicolumn-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.3), transparent);
}

.multicolumn-card:hover {
  border-color: rgba(37,99,235,0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
}

/* === FEATURED PRODUCT === */
.product__title {
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
}

.product__description,
.product__description p {
  color: var(--apex-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.product__media-item {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--apex-border) !important;
}

/* === FOOTER (DARK) === */
.footer,
.section-footer {
  background: var(--apex-dark) !important;
  border-top: 1px solid var(--apex-border) !important;
  color: var(--apex-muted) !important;
}

.footer__content-bottom {
  border-top: 1px solid var(--apex-border) !important;
}

.footer-block__heading,
.footer h2 {
  color: var(--apex-white) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.footer a {
  color: var(--apex-muted) !important;
  transition: color 0.2s !important;
}

.footer a:hover {
  color: var(--apex-white) !important;
}

/* === INPUTS / FORMS === */
input, select, textarea,
.field__input {
  background: var(--apex-card-solid) !important;
  border: 1px solid var(--apex-border) !important;
  color: var(--apex-white) !important;
  border-radius: 10px !important;
}

input:focus, select:focus, textarea:focus,
.field__input:focus {
  border-color: var(--apex-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* === CART === */
.cart-items,
.cart,
.drawer {
  background: var(--apex-black) !important;
}

.cart-item {
  border-bottom: 1px solid var(--apex-border) !important;
}

/* Cart drawer glassmorphism */
.cart-drawer {
  background: rgba(13,13,15,0.95) !important;
  backdrop-filter: blur(24px) !important;
}

/* === COLLECTION PAGE === */
.collection-hero {
  background: var(--apex-dark) !important;
}

/* === EMAIL SIGNUP === */
.newsletter-form__field-wrapper .field__input {
  background: rgba(26,26,36,0.6) !important;
}

/* === SCROLL REVEAL ANIMATION === */
.apex-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.apex-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === FLOATING GRADIENT ORBS (BACKGROUND) === */
.apex-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.apex-orb-1 {
  width: 600px; height: 600px;
  background: #2563EB;
  top: -200px; left: -200px;
  animation: apexFloat1 20s ease-in-out infinite;
}

.apex-orb-2 {
  width: 500px; height: 500px;
  background: #06B6D4;
  bottom: -150px; right: -150px;
  animation: apexFloat2 25s ease-in-out infinite;
}

@keyframes apexFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(100px, 150px); }
}

@keyframes apexFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-120px, -100px); }
}

/* === GLOW EFFECT UNDER IMAGES === */
.apex-glow {
  position: relative;
}

.apex-glow::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 15%;
  right: 15%;
  height: 30px;
  background: var(--apex-blue);
  filter: blur(30px);
  opacity: 0.2;
  border-radius: 50%;
}

/* === GLASS CARD UTILITY === */
.apex-glass {
  background: rgba(26,26,36,0.4) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
}

/* === LINK COLORS === */
a {
  color: var(--apex-blue);
}

a:hover {
  color: var(--apex-cyan);
}

/* === LOADING / SKELETON === */
.skeleton {
  background: linear-gradient(90deg, var(--apex-card-solid) 25%, rgba(42,42,58,0.3) 50%, var(--apex-card-solid) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}