/** Shopify CDN: Minification failed

Line 13:14 Unexpected "3D"
Line 19:60 Unterminated string token

**/
/* ============================================================
   XEIST Backpack Customizer — ported from Release theme base.css
   (lines 5148+). Self-contained so it does not depend on the
   live theme having base.css. body-class selectors adapted to
   the live theme separately after inspecting its DOM.
   ============================================================ */
   KITBUILDER 3D CUSTOMIZER — DESKTOP STICKY PREVIEW
   The 3D preview panel sticks to the viewport top while
   the edit panel (coach panel + KitBuilder controls) scrolls
   naturally.  This prevents the logo-upload / roster expansion
   from pushing the bag off-screen.

   NOTE: KitBuilder's cross-origin CSS applies float:left on
   .kb-preview-panel with !important.  CSS alone cannot override
   cross-origin !important, so the float→sticky swap is handled
   by inline-style JS in theme.liquid (search: STICKY-PREVIEW-JS).
   ============================================ */

@media screen and (min-width: 990px) {
  /* Let the wrapper grow to natural height instead of clamping */
  body.template-page #kitBuilder {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Remove overflow:hidden from KitBuilder's app root
     (set by KB's vendor CSS) — required for position:sticky */
  body.template-page #kb-app.kb-wrapper {
    overflow: visible !important;
  }

  /* Convert the float-collapsed parent to flex so sticky works.
     (The JS also applies display:flex inline as a belt-and-suspenders.) */
  body.template-page .kb-customise-page {
    display: flex !important;
    align-items: flex-start !important;
  }

  /* Preview panel: cap height, hide overflow, keep canvas contained.
     overflow:hidden clips the canvas to the panel box — the bag is centered
     into the visible band via a translateY on .kb-preview-panel-inner (see
     centerPreviewBag in theme.liquid), and clipping keeps the lifted canvas
     from covering the breadcrumb/header above the panel.
     position:sticky + float:none are applied via JS (see note above). */
  body.template-page .kb-preview-panel {
    max-height: 75vh !important;
    overflow: hidden !important;
    z-index: 10 !important;
  }

  body.template-page .kb-preview-panel canvas {
    max-height: 75vh !important;
    object-fit: contain;
  }
}

/* ============================================
   CUSTOMIZER LOAD SKELETON
   Branded placeholder shown while the heavy KitBuilder engine boots, so the
   preview area is never blank. Injected/removed by theme.liquid.
   ============================================ */
#xeist-customizer-skeleton {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  /* Light backdrop matching the customizer page so the real bag photo
     cross-fades seamlessly into the live 3D canvas (no dark flash). */
  background: radial-gradient(120% 90% at 50% 38%, #ffffff 0%, #f3f3f6 55%, #ececf1 100%);
  opacity: 1;
  transition: opacity 0.45s ease;
}
#xeist-customizer-skeleton.xeist-skel--hide { opacity: 0; }

#xeist-customizer-skeleton .xeist-skel__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: xeistSkelFloat 3.4s ease-in-out infinite;
}
#xeist-customizer-skeleton .xeist-skel__photo {
  width: min(58vw, 300px);
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(20,20,40,0.22));
}
#xeist-customizer-skeleton .xeist-skel__photo--flat {
  /* JPG posters (light studio backdrop): a drop-shadow would silhouette the
     rectangle, not the garment — render shadowless and let the near-white
     backdrop blend into the loader gradient. */
  filter: none;
}
#xeist-customizer-skeleton .xeist-skel__photo--flat + .xeist-skel__glow { display: none; }
#xeist-customizer-skeleton .xeist-skel__glow {
  position: absolute;
  left: 50%; bottom: -6%;
  width: 60%; height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 50%, rgba(20,20,40,0.18), rgba(20,20,40,0) 70%);
  filter: blur(2px);
  z-index: -1;
}
#xeist-customizer-skeleton .xeist-skel__bar {
  width: min(280px, 64vw);
  height: 6px;
  border-radius: 999px;
  background: rgba(20,20,40,0.10);
  overflow: hidden;
}
#xeist-customizer-skeleton .xeist-skel__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6d4bff, #a98bff);
  transition: width 0.4s cubic-bezier(.22,.61,.36,1);
}
#xeist-customizer-skeleton .xeist-skel__status {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(30,30,45,0.62);
  min-height: 1.15em;
  transition: opacity 0.25s ease;
}
@keyframes xeistSkelFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  #xeist-customizer-skeleton .xeist-skel__stage { animation: none; }
  #xeist-customizer-skeleton .xeist-skel__fill { transition: none; }
}

/* ============================================
   KITBUILDER — MOBILE: Add Logo / Add Number buttons
   On desktop these float at top-right of the wide preview (top:100px,
   right:20px via inline JS). On a narrow phone panel that crowds the
   right edge, clips the label, and overlaps the bag. Reposition them as
   a top-left / top-right pair above the model, and enforce a >=44px
   touch target. Stylesheet !important overrides the (non-important)
   inline styles set by theme.liquid.
   ============================================ */
@media screen and (max-width: 989px) {
  #xeist-add-logo-overlay,
  #xeist-add-number-overlay {
    z-index: 1000 !important;
    padding: 11px 14px !important;
    min-height: 44px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    /* Anchor BOTH to the left. The KB preview panel can be wider than the
       viewport on mobile, so a right-anchored button lands off-screen.
       Left-anchoring + stacking is immune to that overflow and keeps the
       buttons clear of KB's right-side scroll chevrons. */
    left: 8px !important;
    right: auto !important;
  }
  #xeist-add-logo-overlay   { top: 8px !important; }
  #xeist-add-number-overlay { top: 62px !important; }

  /* KB "locker room" / save buttons clip off the right on mobile. They're
     already hidden on desktop (the coach panel replaces this chrome); hide
     them on mobile too rather than leaving broken, half-off-screen buttons. */
  body.template-page .kb-locker-room-buttons,
  body.template-page .xei-extra-locker-room-buttons {
    display: none !important;
  }
}

/* ============================================
   KITBUILDER — VISUAL CLEANUP (desktop)
   Hide native KitBuilder chrome that the coach panel replaces.
   Also hide nav panel elements exposed by the sticky preview
   fix (overflow:visible makes previously-clipped content visible).
   ============================================ */

@media screen and (min-width: 990px) {
  body.template-page .kb-nav-panel,
  body.template-page .kb-nav-panel-inner,
  body.template-page .kb-product-pricing-table,
  body.template-page .kb-product-pricing-table-container,
  body.template-page .kb-product-total-cost,
  body.template-page .kb-product-currency-note,
  body.template-page .kb-aggregate-size-quantity-container,
  body.template-page .kb-button-single-item-checkout-add-to-cart,
  body.template-page .kb-product-lead-time,
  body.template-page .xei-extra-locker-room-buttons,
  body.template-page .kb-locker-room-buttons {
    display: none !important;
  }
}

/* ============================================
   STICKY BOTTOM BAR — Tesla-style price + CTA
   Fixed to viewport bottom on the customizer page.
   ============================================ */

#xeist-bottom-bar {
  display: none;  /* shown by JS once coach panel is mounted */
}

body.xeist-coach-panel-ready #xeist-bottom-bar {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
  padding: 12px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.xeist-bottom-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}

.xeist-bottom-bar__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.xeist-bottom-bar__amount {
  font-size: 22px;
  font-weight: 700;
  color: #171a20;
  letter-spacing: -0.02em;
}

.xeist-bottom-bar__label {
  font-size: 12px;
  color: #5c5e62;
  margin-top: -2px;
}

.xeist-bottom-bar__cta {
  background: #171a20;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 40px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
}

.xeist-bottom-bar__cta:hover {
  background: #000;
}

/* Give the page bottom padding so content isn't hidden behind the bar */
body.xeist-coach-panel-ready {
  padding-bottom: 72px;
}

.xeist-backpack-price-pill {
  /* 2026-08-28 (Justin): back to the PURPLE pill docked to the bottom of
     the screen, for BOTH products (orbit + compression). The pill is
     viewport-fixed, so where the JS mounts it in the DOM no longer
     matters visually. Palette flipped to white-on-purple. */
  --xeist-pill-bg: linear-gradient(145deg, rgba(74, 27, 122, 0.97) 0%, rgba(46, 13, 82, 0.97) 100%);
  --xeist-pill-edge: rgba(255, 255, 255, 0.22);
  --xeist-pill-border: rgba(255, 255, 255, 0.18);
  --xeist-pill-ink: #ffffff;
  --xeist-pill-muted: rgba(255, 255, 255, 0.72);
  --xeist-pill-accent: #5e2394;
  --xeist-pill-accent-2: #13c8ff;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 9998;
  width: min(calc(100vw - 24px), 380px);
  margin: 0;
  border: 1px solid var(--xeist-pill-border);
  border-radius: 28px;
  background: var(--xeist-pill-bg);
  box-shadow:
    0 20px 34px rgba(13, 8, 20, 0.15),
    inset 0 1px 0 var(--xeist-pill-edge);
  color: var(--xeist-pill-ink);
  font-family: var(--font-body-family);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backdrop-filter: blur(18px);
  overflow: hidden;
}

/* Mobile: the KB step bar is fixed at bottom:0 (z 9999) — lift the pill
   clear of it so both stay usable. */
@media screen and (max-width: 768px) {
  .xeist-backpack-price-pill {
    bottom: 92px;
    width: min(calc(100vw - 16px), 380px);
  }
}

.xeist-backpack-price-pill,
.xeist-backpack-price-pill button,
.xeist-backpack-price-pill input,
.xeist-backpack-price-pill label,
.xeist-backpack-price-pill p,
.xeist-backpack-price-pill span,
.xeist-backpack-price-pill strong {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.xeist-backpack-price-pill--overlay {
  /* 2026-08-28: overlay mode used to pin the pill top-left inside the
     preview panel; the pill is now viewport-fixed at the bottom in every
     mode, so overlay just keeps pointer events. */
  position: fixed;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 9998;
  width: min(calc(100vw - 24px), 380px);
  margin: 0;
  pointer-events: auto;
}

.xeist-backpack-price-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(94, 35, 148, 0.2) 0%, rgba(94, 35, 148, 0) 42%),
    radial-gradient(circle at top right, rgba(19, 200, 255, 0.14) 0%, rgba(19, 200, 255, 0) 34%);
}

.xeist-backpack-price-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 35, 148, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 200, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 36px, 36px 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 76%);
  opacity: 0.7;
}

.xeist-backpack-price-pill__inner {
  position: relative;
  z-index: 1;
  padding: 22px 26px 18px 28px !important;
}

.xeist-backpack-price-pill__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-left: 10px !important;
}

.xeist-backpack-price-pill__kicker {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xeist-pill-muted);
}

.xeist-backpack-price-pill__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  color: var(--xeist-pill-ink);
  white-space: nowrap;
}

.xeist-backpack-price-pill__status[data-tone="busy"] {
  background: rgba(255, 255, 255, 0.2);
  color: #d9b8ff;
}

.xeist-backpack-price-pill__status[data-tone="success"] {
  background: rgba(19, 200, 255, 0.14);
  color: #9ee9ff;
}

.xeist-backpack-price-pill__status[data-tone="error"] {
  background: rgba(191, 41, 82, 0.12);
  color: #ffa8c0;
}

.xeist-backpack-price-pill__eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xeist-pill-muted);
}

.xeist-backpack-price-pill__price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.xeist-backpack-price-pill__price-block {
  min-width: 0;
  padding-right: 4px !important;
  padding-left: 10px !important;
}

.xeist-backpack-price-pill__total {
  margin: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.24rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--xeist-pill-ink);
  transition: transform 0.22s ease, opacity 0.22s ease;
  will-change: transform, opacity;
}

.xeist-backpack-price-pill__meta {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--xeist-pill-muted);
}

.xeist-backpack-price-pill__unit {
  min-width: 88px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 11, 28, 0.96) 0%, rgba(44, 26, 68, 0.98) 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 18px rgba(20, 11, 33, 0.2);
}

.xeist-backpack-price-pill__unit span {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.xeist-backpack-price-pill__unit strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
}

.xeist-backpack-price-pill__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  justify-items: start;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.xeist-backpack-price-pill__controls > * {
  min-width: 0;
}

.xeist-backpack-price-pill__stepper {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 6px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
  overflow: hidden;
  isolation: isolate;
}

.xeist-backpack-price-pill__stepper-btn {
  border: 0;
  border-radius: 14px;
  height: 42px;
  background: linear-gradient(180deg, rgba(24, 14, 39, 0.96) 0%, rgba(54, 31, 84, 0.96) 100%) !important;
  background-color: #221432 !important;
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 14px rgba(20, 11, 33, 0.16);
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  z-index: 1;
}

.xeist-backpack-price-pill__stepper-btn::before,
.xeist-backpack-price-pill__stepper-btn::after,
.xeist-backpack-price-pill__cta::before,
.xeist-backpack-price-pill__cta::after {
  content: none !important;
}

.xeist-backpack-price-pill__stepper-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(20, 11, 33, 0.24);
}

.xeist-backpack-price-pill__qty-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.xeist-backpack-price-pill__qty-field span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--xeist-pill-muted);
}

.xeist-backpack-price-pill__qty-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--xeist-pill-ink);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0;
  appearance: textfield;
}

.xeist-backpack-price-pill__qty-input::-webkit-outer-spin-button,
.xeist-backpack-price-pill__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.xeist-backpack-price-pill__qty-input:focus {
  outline: none;
}

.xeist-backpack-price-pill__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  overflow: hidden;
  appearance: none !important;
  border: 0;
  border-radius: 8px;
  min-height: 41px;
  padding: 10px 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #3f9f28 0%, #57be39 55%, #63d341 100%) !important;
  background-color: #57be39 !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(63, 159, 40, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  text-align: center;
  isolation: isolate;
  z-index: 2;
  -webkit-appearance: none !important;
  justify-self: start;
}

.xeist-backpack-price-pill__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(63, 159, 40, 0.55);
}

.xeist-backpack-price-pill__cta:disabled {
  cursor: wait;
  opacity: 0.82;
}

.xeist-backpack-price-pill__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.xeist-backpack-price-pill__signal {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 11, 33, 0.05);
  color: var(--xeist-pill-muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(20, 11, 33, 0.06);
}

.xeist-backpack-price-pill__signal[data-active="true"][data-accent="logo"] {
  background: rgba(94, 35, 148, 0.12);
  color: #5e2394;
}

.xeist-backpack-price-pill__signal[data-active="true"][data-accent="number"] {
  background: rgba(19, 200, 255, 0.14);
  color: #9ee9ff;
}

.xeist-backpack-price-pill__signal--base,
.xeist-backpack-price-pill__signal[data-active="true"] {
  color: var(--xeist-pill-ink);
}

.xeist-backpack-price-pill.is-updating .xeist-backpack-price-pill__total {
  transform: translateY(-2px) scale(0.985);
  opacity: 0.68;
}

.xeist-backpack-price-pill.is-submitting .xeist-backpack-price-pill__cta {
  opacity: 0.92;
}

.kb-group-order .xeist-backpack-price-pill,
.kb-customise-edit-panel .xeist-backpack-price-pill {
  /* 2026-08-28: pill is viewport-fixed — container mounts no longer size it */
  width: min(calc(100vw - 24px), 380px);
  margin: 0;
}

@media screen and (max-width: 989px) {
  .xeist-backpack-price-pill--overlay {
    /* fixed bottom dock on all breakpoints (2026-08-28) */
    position: fixed;
    width: min(calc(100vw - 16px), 380px);
  }

  .xeist-backpack-price-pill__price-grid {
    grid-template-columns: 1fr;
  }

  .xeist-backpack-price-pill__unit {
    min-width: 0;
  }

  .xeist-backpack-price-pill__controls {
    grid-template-columns: 1fr;
  }

}

@media screen and (max-width: 749px) {
  .xeist-backpack-price-pill__topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .xeist-backpack-price-pill__stepper {
    width: 100%;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }
}

/* ============================================
   KITBUILDER 3D CUSTOMIZER — MOBILE OVERRIDE v5
   Fixes three issues on mobile:
   1. Shopify theme containers constrain KitBuilder width
   2. KitBuilder's cross-origin CSS hides .kb-customise-edit-panel
      (CSS alone can't fully override — JS in theme.liquid assists)
   3. 3D canvas sets touch-action:none, hijacking page scroll

   How it works:
   - CSS below removes Shopify width constraints, unfloats KitBuilder
     panels so they stack vertically, and hides Shopify chrome
   - JS in theme.liquid forces inline styles on the edit panel
     (to beat cross-origin CSS), fixes canvas touch-action, and
     dispatches a resize event so KitBuilder recalculates canvas
     size for the full-width layout
   ============================================ */

@media screen and (max-width: 768px) {
  /* Remove Shopify theme container width constraints */
  body.template-page:has(#kitBuilder) .main-page,
  body.template-page:has(#kitBuilder) .container.max-w-narrower,
  body.template-page:has(#kitBuilder) .main-page__content.rte {
    overflow: visible;
    max-width: 100vw;
    width: 100vw;
    padding: 0;
    margin: 0;
  }

  /* Full-width KitBuilder wrapper */
  body.template-page #kitBuilder,
  body.template-page .kb-wrapper-parent {
    width: 100vw !important;
    position: relative;
    overflow: visible !important;
  }

  /* Fix float-collapsed containers */
  body.template-page .kb-general-mobile-styles,
  body.template-page .kb-customise-page,
  body.template-page .kb-partial-wrap {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  body.template-page .kb-general-mobile-styles::after,
  body.template-page .kb-customise-page::after,
  body.template-page .kb-partial-wrap::after {
    content: "";
    display: table;
    clear: both;
  }

  /* PREVIEW PANEL — full width, natural height.
     Let KitBuilder's own canvas sizing determine the height.
     The JS dispatches a resize event so KB recalculates for
     the unfloated full-width layout. */
  body.template-page .kb-preview-panel {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* FIX SCROLL HIJACK — KitBuilder's JS sets touch-action:none
     on the 3D canvas via inline style, swallowing all vertical
     scroll gestures. Override to pan-y so the page scrolls
     normally while horizontal swipes still rotate the 3D model. */
  body.template-page .kb-preview-panel canvas,
  body.template-page .kb-3d-wrapper canvas {
    touch-action: pan-y !important;
  }

  /* EDIT PANEL — stack below preview.
     KitBuilder's cross-origin CSS hides this with rules that
     beat our !important. The JS in theme.liquid sets inline
     styles as a reliable override. */
  body.template-page .kb-customise-edit-panel {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    clear: both !important;
    padding: 12px !important;
  }

  /* Show KitBuilder's mobile navigation (hidden by .kb-embed-hide) */
  body.template-page .kb-customize-mobile-nav.kb-embed-hide {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  body.template-page .kb-nav-panel {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    z-index: 100;
  }

  /* Hide Shopify header/footer on customizer page */
  body.template-page:has(#kitBuilder) #shopify-section-header,
  body.template-page:has(#kitBuilder) #shopify-section-footer,
  body.template-page:has(#kitBuilder) #shopify-section-footer-promotions {
    display: none !important;
  }

  body.template-page:has(#kitBuilder) #MainContent {
    padding: 0;
    margin: 0;
  }

  body.template-page:has(#kitBuilder) .main-page h1 {
    display: none;
  }
}

/* ============================================
   KITBUILDER — Mobile Step Bar Highlight
   Makes the active step visually distinct and
   keeps the step bar fixed at viewport bottom.
   The JS in theme.liquid applies inline styles
   to beat cross-origin CSS specificity.
   ============================================ */

@media screen and (max-width: 768px) {
  /* Sticky step bar at bottom of viewport */
  body.template-page .kb-customize-mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4) !important;
    background: #000 !important;
  }

  /* Pad edit panel so content isn't hidden behind sticky bar */
  body.template-page .kb-customise-edit-panel {
    padding-bottom: 110px !important;
  }

  /* Inactive steps — dimmed */
  body.template-page .kb-customize-mobile-nav-item a {
    opacity: 0.35 !important;
    background: #111 !important;
    transition: all 0.25s ease !important;
  }

  /* Active step — XEIST red highlight */
  body.template-page .kb-customize-mobile-nav-item.kb-customize-mobile-nav-item-active a {
    opacity: 1 !important;
    background: #e63946 !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
}

/* ============================================================
   LIVE KB v3.6.4 ADAPTATION
   The live KitBuilder build puts its step wizard + upload UI in
   .kb-customise-edit-panel (with .kb-wizard-breadcrumbs). The coach
   panel + floating Add Logo/Add Number overlays replace all of it, so
   hide the native edit column and let the preview fill the row, which
   centers the bag in the viewport. The bridge drives the (hidden)
   native controls via Angular, so upload/add-to-cart still work.
   ============================================================ */
@media screen and (min-width: 990px) {
  body.template-page #kb-app .kb-customise-edit-panel,
  body.template-page #kb-app .kb-wizard-breadcrumbs {
    display: none !important;
  }
  body.template-page #kb-app .kb-preview-panel {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
  }
  body.template-page #kb-app .kb-customise-page { justify-content: center !important; }
}

/* ============================================================
   LIVE KB — compact the bottom bar (desktop)
   At the live theme's widths the coach bar's subtotal note wraps to
   several lines, inflating the bar to ~318px and squeezing the bag's
   vertical band. Tighten it (ID specificity beats the theme) so the
   band — and the bag — get the room they need.
   ============================================================ */
@media screen and (min-width: 990px) {
  #xeist-bottom-bar .xeist-bottom-bar__note { display: none !important; }
  #xeist-bottom-bar .xeist-bottom-bar__inner {
    padding: 1rem 1.6rem !important;
    gap: 1rem 1.4rem !important;
    align-items: center !important;
  }
  #xeist-bottom-bar .xeist-bottom-bar__kicker { white-space: nowrap !important; }
  #xeist-bottom-bar .xeist-bottom-bar__amount { font-size: 2.4rem !important; line-height: 1.05 !important; }
  #xeist-bottom-bar .xeist-bottom-bar__shipnote { padding: 0.5rem 1.4rem !important; margin-bottom: 0.5rem !important; }
}

/* ============================================================
   LIVE KB — shrink the bottom bar further (desktop)
   It was still ~254px tall, squeezing the bag's band. Tighten the
   amounts, stepper and padding so the bar is ~150px and the bag gets
   the vertical room.
   ============================================================ */
@media screen and (min-width: 990px) {
  #xeist-bottom-bar .xeist-bottom-bar__inner { padding: 0.8rem 1.6rem !important; gap: 0.8rem 1.4rem !important; }
  #xeist-bottom-bar .xeist-bottom-bar__amount { font-size: 2rem !important; }
  #xeist-bottom-bar .xeist-bottom-bar__kicker { font-size: 0.85rem !important; }
  #xeist-bottom-bar .xeist-bottom-bar__stepper-btn,
  #xeist-bottom-bar .xeist-bottom-bar__qty-input { min-height: 3.6rem !important; }
  #xeist-bottom-bar .xeist-bottom-bar__cta { min-height: 4rem !important; font-size: 1.3rem !important; padding: 0 1.6rem !important; }
  #xeist-bottom-bar .xeist-bottom-bar__shipnote { padding: 0.4rem 1.2rem !important; margin-bottom: 0.4rem !important; font-size: 1.05rem !important; }
}