/** Shopify CDN: Minification failed

Line 299:0 All "@import" rules must come first

**/
/* ── DISABLE ALL ANIMATIONS — NUCLEAR ────────────────────────── */
*, *::before, *::after {
  animation: none !important;
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* ── ANIMATION EXCEPTIONS ───────────────────────────────────── */

/* 1. Button + link hover micro-interactions */
.mb-btn-orange,
.mb-hero__wa-link,
.mb-rec-item,
.mb-rec-arrow,
.mb-checkout-btn,
.mb-wa-btn,
[class*="mb-cc-btn"],
.mb-hpp {
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease, filter 0.15s ease !important;
}
/* Button press micro-feedback */
.mb-btn-orange:active,
.mb-checkout-btn:active,
[class*="tbe-btn-"]:active,
[class*="ve-btn-"]:active,
[class*="uvse-btn-"]:active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: none !important;
  filter: brightness(0.96) !important;
  transition-duration: 0.06s !important;
}

/* 2. Proof bar logo carousel */
.mb-proof-bar__list {
  animation: mb-marquee var(--pb-speed, 28s) linear infinite !important;
  animation-duration: var(--pb-speed, 28s) !important;
  animation-delay: 0ms !important;
}
.mb-proof-bar:hover .mb-proof-bar__list {
  animation-play-state: paused !important;
}

/* 3. FAQ smooth open/close */
.mb-faq-item__a {
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.22s ease,
              padding 0.22s ease !important;
  display: block !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.mb-faq-item--open .mb-faq-item__a {
  max-height: 400px !important;
  opacity: 1 !important;
  padding-top: 10px !important;
  padding-bottom: 16px !important;
}
/* FAQ toggle icon rotation */
.mb-faq__q {
  transition: background-color 0.18s ease, border-color 0.18s ease !important;
}
.mb-faq-item__toggle {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.mb-faq-item--open .mb-faq-item__toggle {
  transform: rotate(45deg) !important;
}

/* 4. Homepage product card hover lift */
.mb-product-card {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.mb-product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(15,25,35,0.12) !important;
}

/* 5. Tier card selection highlight */
[class*="tbe-tier-"],
[class*="ve-tier-"],
[class*="uvse-qty-btn-"] {
  transition: background-color 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease !important;
}
[class*="tbe-tier-"]:hover,
[class*="ve-tier-"]:hover,
[class*="uvse-qty-btn-"]:hover {
  transform: translateY(-2px) !important;
}
/* Scale pop on tier selection */
[class*="tbe-tier--selected"],
[class*="ve-tier--selected"],
[class*="uvse-qty-btn--selected"],
[class*="tbe-tier"][aria-pressed="true"],
[class*="ve-tier"][aria-pressed="true"] {
  animation: mb-tier-pop 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}
@keyframes mb-tier-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.055) translateY(-2px); }
  100% { transform: scale(1) translateY(-2px); }
}

/* 6. Colour swatch selection scale */
[class*="tbe-swatch-"] {
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.15s ease !important;
}
[class*="tbe-swatch-"]:hover {
  transform: scale(1.12) !important;
}

/* 7. WhatsApp float button pulse — support indicator */
@keyframes mb-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
}
.mb-wa-float {
  animation: mb-wa-pulse 3s ease infinite !important;
  animation-delay: 4s !important;
}

/* mb-faq-simple (product page FAQ) */
.mb-sfaq__a {
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.28s ease !important;
}
.mb-sfaq__q {
  transition: background-color 0.15s ease !important;
}
.mb-sfaq__chevron {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.15s ease !important;
}

/* 8. Quiz step crossfade */
.mb-quiz__step,
.mb-quiz__result {
  animation: none !important; /* killed by nuclear — re-allow below */
}
.mb-quiz__step.mb-quiz__step--active,
.mb-quiz__result.mb-quiz__step--active {
  animation: mb-quiz-step-in 0.28s cubic-bezier(0.22,1,0.36,1) !important;
}
@keyframes mb-quiz-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* 9. Sticky bar slide up on scroll */
.mb-sticky-bar {
  transition: transform 0.30s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 9. Collection / proto card hover */
.product-grid__card {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.product-grid__card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(15,25,35,0.10) !important;
}

:root {
  --animation-speed: 0ms !important;
  --animation-speed-medium: 0ms !important;
  --animation-speed-slow: 0ms !important;
  --animation-easing: linear !important;
  --submenu-animation-speed: 0ms !important;
  --hover-transition-duration: 0.15s !important;
}

/* Kill ALL view transitions */
::view-transition-old(*),
::view-transition-new(*),
::view-transition-group(*),
::view-transition-image-pair(*) {
  animation: none !important;
  transition: none !important;
}

@view-transition {
  navigation: none;
}

results-list[initialized] .product-grid__item {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Ensure scroll reveal pending elements are always visible */
.mb-reveal-pending,
.mb-reveal-done {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   MerchBay — Base Design System
   File: assets/mb-base.css
   Include in layout/theme.liquid via:
   {{ 'mb-base.css' | asset_url | stylesheet_tag }}
   ============================================================ */


/* 10. Scroll reveal — mb-rv system (used sitewide) */
.mb-rv {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity 0.48s cubic-bezier(0.22,1,0.36,1),
              transform 0.48s cubic-bezier(0.22,1,0.36,1) !important;
}
.mb-rv--in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.mb-rv--d1 { transition-delay: 0.07s !important; }
.mb-rv--d2 { transition-delay: 0.14s !important; }
.mb-rv--d3 { transition-delay: 0.21s !important; }
.mb-rv--d4 { transition-delay: 0.28s !important; }
.mb-rv--d5 { transition-delay: 0.35s !important; }
.mb-rv--d6 { transition-delay: 0.42s !important; }


/* Suppress Horizon quick-add on collection grid — MerchBay uses engines */
.product-card__quick-add,
.quick-add,
.quick-add-modal__toggle,
[class*="quick-add"] {
  display: none !important;
}
/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Colours */
  --mb-navy:        #0F1923;
  --mb-navy-mid:    #1A2E42;
  --mb-navy-deep:   #0A1018;
  --mb-navy-faint:  #EBF0F7;
  --mb-orange:      #FF6B35;
  --mb-orange-faint:#FFF3EE;
  --mb-orange-mid:  rgba(255,107,53,0.12);
  --mb-green:       #22c55e;
  --mb-white:       #FFFFFF;

  /* Grey scale */
  --mb-grey-50:  #F8F9FB;
  --mb-grey-100: #F1F3F7;
  --mb-grey-200: #E2E6ED;
  --mb-grey-300: #C8D0DB;
  --mb-grey-400: #9AA3B2;
  --mb-grey-600: #5A6478;

  /* Text hierarchy */
  --mb-t1: #0F1923;
  --mb-t2: #5A6478;
  --mb-t3: #9AA3B2;

  /* Typography */
  --mb-fh: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mb-fb: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Border radius scale — frozen, never substitute */
  --mb-r6:  6px;
  --mb-r10: 10px;
  --mb-r14: 14px;
  --mb-r20: 20px;
  --mb-r24: 24px;

  /* Shadows */
  --mb-sh-sm: 0 1px 4px rgba(15,25,35,.06), 0 1px 2px rgba(15,25,35,.04);
  --mb-sh-md: 0 4px 20px rgba(15,25,35,.09);
  --mb-sh-lg: 0 16px 48px rgba(15,25,35,.14);

  /* Transitions — frozen, never substitute */
  --mb-ease:     0.18s ease;
  --mb-ease-out: 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── FONT IMPORTS ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:wght@400;500;600&display=swap');

/* ── RESET ADDITIONS ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── SECTION WRAPPER ────────────────────────────────────────── */
/* Every mb-* section uses .mb-section and .mb-container.
   Top/bottom padding is set via inline style from schema.
   Left/right padding is fixed here. */
.mb-section {
  padding-left: 32px;
  padding-right: 32px;
  width: 100%;
}

.mb-container {
  margin: 0 auto;
  width: 100%;
}

/* hide-on-mobile support */
@media screen and (max-width: 640px) {
  .mb-section { padding-left: 20px; padding-right: 20px; }
  .mb-section--hidden-mobile { display: none !important; }
}

/* ── SHARED TYPOGRAPHY ──────────────────────────────────────── */
/* Eyebrow label — orange, uppercase, small */
.mb-eyebrow {
  display: block;
  font-family: var(--mb-fh);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #CC4A1A;
  margin-bottom: 10px;
}

/* Section H2 */
.mb-sh2 {
  font-family: var(--mb-fh);
  font-size: 32px;
  font-weight: 800;
  color: var(--mb-navy);
  letter-spacing: -0.8px;
  line-height: 1.12;
  margin-bottom: 10px;
}

/* Section H2 white variant */
.mb-sh2--white { color: #fff; }

/* Section subtext */
.mb-s-sub {
  font-family: var(--mb-fb);
  font-size: 15px;
  color: var(--mb-t2);
  line-height: 1.68;
}
.mb-s-sub--white { color: rgba(255,255,255,0.58); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.mb-btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mb-orange);
  color: #1A1A1A;
  padding: 14px 28px;
  border-radius: var(--mb-r6);
  font-family: var(--mb-fh);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: var(--mb-ease-out);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mb-btn-orange:hover {
  filter: brightness(1.09);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,53,0.38);
}

.mb-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.55);
  font-family: var(--mb-fb);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 2px;
  transition: var(--mb-ease);
  cursor: pointer;
}
.mb-btn-ghost:hover { color: #fff; }

/* ── SCROLL REVEAL — disabled, handled by nuclear kill above ─── */

/* ── ANNOUNCEMENT BAR DOT ───────────────────────────────────── */
.mb-ann-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--mb-green);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── PRODUCT VISUAL SURFACE LIGHT ───────────────────────────── */
/* ::after overlay only when product image is present — prevents smudge on empty cards */
.mb-product-visual--has-img::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,0.045) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0,0,0,0.28) 0%, transparent 60%);
}

/* ── RESPONSIVE BREAKPOINTS (reference only — used in each section) ─ */
/* 1024px: tablet landscape */
/* 900px:  tablet portrait — hero stacks, some grids change */
/* 640px:  mobile — most grids go 1-col, smaller type */
/* ── Mobile product engine margin fix ────────────────
   Horizon hardcodes grid-column: 1 / -1 on mobile for
   .product-information__media which causes edge-to-edge
   bleed. This constrains it to the page margin column.  */
@media screen and (max-width: 749px) {
  .product-information__media {
    grid-column: 1 / -1;
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
  .product-information__media .media-gallery {
    border-radius: 12px;
    overflow: hidden;
  }
}
/* Hero product card staggered entrance */
@keyframes mb-card-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mb-hpp:nth-child(1) {
  animation: mb-card-rise 0.5s cubic-bezier(0.22,1,0.36,1) 0.18s both !important;
}
.mb-hpp:nth-child(2) {
  animation: mb-card-rise 0.5s cubic-bezier(0.22,1,0.36,1) 0.28s both !important;
}
.mb-hpp:nth-child(3) {
  animation: mb-card-rise 0.5s cubic-bezier(0.22,1,0.36,1) 0.38s both !important;
}
@media (prefers-reduced-motion: reduce) {
  .mb-hpp,
  .mb-rv,
  [class*="tbe-thumb-"],
  [class*="ve-thumb-"],
  [class*="uvse-thumb-"],
  .mb-quiz__step,
  .mb-quiz__result {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mb-rv { opacity: 1 !important; transform: none !important; }
}

/* Gallery thumbnail hover zoom */
[class*="tbe-thumb-"],
[class*="ve-thumb-"],
[class*="uvse-thumb-"] {
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.18s ease,
              border-color 0.18s ease !important;
  overflow: hidden;
}
[class*="tbe-thumb-"]:hover,
[class*="ve-thumb-"]:hover,
[class*="uvse-thumb-"]:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 4px 16px rgba(15,25,35,0.12) !important;
}
/* Cart drawer: clamp product title to 2 lines to keep remove button visible */
.cart-drawer .cart-items__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* ═══════════════════════════════════════════════════════
   CTA ATTENTION PULSE — fires every ~3.5s until tapped
   Applied to engine "Start My Order" buttons.
   Works on both enabled (orange) and disabled (grey) states.
═══════════════════════════════════════════════════════ */
@keyframes mb-cta-attention {
  0%, 86%, 100% { transform: scale(1); }
  90%  { transform: scale(1.03); }
  93%  { transform: scale(0.99); }
  96%  { transform: scale(1.015); }
}
@keyframes mb-cta-glow {
  0%, 86%, 100% { box-shadow: 0 4px 14px rgba(255,107,53,0.30); }
  90%  { box-shadow: 0 10px 30px rgba(255,107,53,0.60); }
  96%  { box-shadow: 0 6px 18px rgba(255,107,53,0.40); }
}
.mb-cta-pulse {
  animation: mb-cta-attention 3.5s ease-in-out infinite !important;
  transform-origin: center;
}
/* Glow only when the button is active (enabled). Disabled buttons just scale. */
.mb-cta-pulse:not(:disabled) {
  animation: mb-cta-attention 3.5s ease-in-out infinite,
             mb-cta-glow 3.5s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .mb-cta-pulse { animation: none !important; }
}
/* ── Cart drawer: hide quantity stepper — keep remove button visible ── */
.cart-items__quantity .quantity-selector,
.cart-items__quantity cart-quantity-selector-component,
.cart-items__quantity .quantity-selector-wrapper,
.cart-items__quantity-controls .volume-pricing-info {
  display: none !important;
}
.cart-items__quantity {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}
.cart-items__quantity-controls {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}
/* Cart drawer: clamp long product titles to keep remove button visible */
.cart-drawer .cart-items__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}