/** Shopify CDN: Minification failed

Line 258:17 Unexpected "#3d-preview-container"

**/
/* ============================================================================
   sv-customiser-ui.css
   Externalised from sections/jacket.liquid on 2026-06-06 — the section template
   hit Shopify's 256 KB limit, so two inline <style> blocks were moved here.
   Assets have no size limit. Loaded via stylesheet_tag at the SAME DOM position
   the first inline block occupied, so the cascade is identical (no <style> or
   stylesheet sat between the two original blocks). Rollback = restore the two
   inline <style> blocks in jacket.liquid.

   BLOCK A — selected badge tile ring + drawer peek + placement pill/chip
   BLOCK B — premium badge gallery, filter chips, tiles, long-press preview
   ============================================================================ */

/* ===== BLOCK A (was inline ~L1028) ======================================== */

/* Selected badge tile — brand-green border + tinted background */
.mobile-sv-badge-item.sv-tile-selected {
  border-color: #298a30 !important;
  border-width: 3px !important;
  background: rgba(41, 138, 48, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(41, 138, 48, 0.25), 0 4px 14px rgba(41, 138, 48, 0.18) !important;
}

/* Bottom-sheet collapsed peek (set via inline transform; class for transition) */
.nike-bottom-sheet.sv-drawer-collapsed {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* 2-class specificity beats the engine's `.nike-bottom-sheet{transform:
     translateY(0)!important}` (1 class), so the auto-collapse on badge-select
     actually moves the sheet down to reveal the jacket. Inline style (no
     !important) was losing to the engine rule. */
  transform: translateY(45%) !important;
}

/* Sticky top pill (anchored below header, brand-green pulse) */
.sv-place-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 88px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 10000;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  background: rgba(8, 8, 9, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(41, 138, 48, 0.55);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-place-pill.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sv-place-pill::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #298a30;
  box-shadow: 0 0 0 0 rgba(41, 138, 48, 0.7);
  animation: svPillPulse 1.4s ease-out infinite;
  flex-shrink: 0;
}
@keyframes svPillPulse {
  0%   { box-shadow: 0 0 0 0   rgba(41, 138, 48, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(41, 138, 48, 0); }
  100% { box-shadow: 0 0 0 0   rgba(41, 138, 48, 0); }
}

/* Floating bottom chip (above drawer, shows the selected badge + cancel) */
.sv-place-chip {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  max-width: calc(100vw - 32px);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid #298a30;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sv-place-chip.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sv-place-chip img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
  background: #f6f6f6;
  padding: 4px;
  flex-shrink: 0;
}
.sv-place-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sv-place-chip-name {
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1e;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.sv-place-chip-price {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.2;
}
.sv-place-chip-cancel {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.sv-place-chip-cancel:active {
  background: #e5e7eb;
  color: #1d1d1e;
}

/* ===== BLOCK B (was inline ~L2886) ======================================== */

/* 2026-05-21 (I3 v4): radically simplified tile layout after Sam's
   "stacked cards" feedback. Goals:
    - Fixed-height tiles (no aspect-ratio variability)
    - Image always renders at consistent size
    - Name on 1 line with tight ellipsis
    - Price ALWAYS visible at bottom
    - No "raised tile" animation that suggests stacking
    - Removed gradient fade backgrounds (visual noise) */
/* ============================================================
   2026-05-29 (I2-P2 v2): premium gallery + category FILTER CHIPS.
   Single scroll: the gallery flows inside the bottom-sheet (the sheet
   is the only scroll container) — removing the inner overflow kills the
   nested-scroll trap ("scroll down but can't get back up"). Category =
   filter chips (not stacked section headers, which ate space + glitched).
   Tiles are engine-generated with inline style so overrides need
   !important. Jost; ink text/price; #298a30 reserved for SELECTED only.
   ============================================================ */
#mobile-sv-badge-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 4px 0 8px !important;
  padding: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Jost', sans-serif;
}
.mobile-sv-badge-item.sv-cat-hide { display: none !important; }  /* category filter */

/* Compact controls: search icon + horizontal category chips */
.sv-ctrl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sv-search-toggle {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: #f2f2f0; border: 1px solid rgba(14,14,15,0.10); color: #0e0e0f;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sv-search-toggle.is-active { background: #0e0e0f; color: #fff; border-color: #0e0e0f; }
.sv-chips {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; flex: 1 1 auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sv-chips::-webkit-scrollbar { display: none; }
.sv-cat-chip {
  flex: 0 0 auto; border: 1px solid rgba(14,14,15,0.12); background: #fff;
  border-radius: 999px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600;
  color: #0e0e0f; padding: 7px 13px; white-space: nowrap; cursor: pointer; transition: .14s;
}
.sv-cat-chip.is-active { background: #0e0e0f; border-color: #0e0e0f; color: #fff; }  /* active = near-black */
.sv-search-input {
  display: none; width: 100%; padding: 10px 12px; box-sizing: border-box;
  border: 2px solid #e5e7eb; border-radius: 8px;
  font-family: 'Jost', sans-serif; font-size: 14px; margin-bottom: 10px;
}
.sv-search-input.is-open { display: block; }
.sv-engine-cats { display: none; }

/* ---- Dynamic fit (I2-P2 v3) ----
   When Step 4 is active, the bottom-sheet becomes a flex column that
   fits the viewport: handle / step-nav (incl. the right arrow) / chips
   stay fixed, and ONLY the badge gallery scrolls. The sheet itself is
   overflow:hidden, so there is a SINGLE scroll region (no nested-scroll
   pinch trap) and the sheet can never grow past the screen. Scoped via a
   JS-toggled class so other steps are untouched. */
.nike-bottom-sheet.sv-sheet-fit {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: 80vh !important;
}
.nike-bottom-sheet.sv-sheet-fit .step-content[data-step="4"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
/* Dissolve the wrapper so the gallery is a direct flex child that can grow */
.nike-bottom-sheet.sv-sheet-fit .sv-badge-body { display: contents !important; }
.nike-bottom-sheet.sv-sheet-fit #mobile-sv-badge-gallery {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* iOS (I2-P2 v3): kill the long-press Copy/Find/Look-Up/Save-Image
   callout across the whole customiser — it hijacked BOTH the gallery
   long-press preview AND the engine's tap-and-hold-to-remove gesture
   (the "Copy / Find Selection / Look Up" bar in Sam's screenshot). */
.jacket-customizer-wrapper, .jacket-customizer-wrapper * { -webkit-touch-callout: none !important; }
.viewer-section, #3d-preview-container, #3d-preview-container canvas {
  -webkit-user-select: none !important; user-select: none !important;
}

/* Floating placement toolbar — clear the header + streamline so it's
   obvious what to press (Sam: "I don't know what I'm clicking"):
   count = plain "N placed" label (not a button); Done = primary;
   Clear all = muted secondary with a trash icon + visible label. */
@media (max-width: 768px) {
  .floating-badge-toolbar { top: calc(env(safe-area-inset-top, 0px) + 64px) !important; gap: 6px; }
  #toolbar-badge-count-label {
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: #6b7280 !important; font-family: 'Jost', sans-serif !important;
    font-size: 12px !important; font-weight: 600 !important; padding: 0 4px !important;
    pointer-events: none !important; min-width: 0 !important;
  }
  #toolbar-badge-count-label::after { content: ' placed'; }
  .toolbar-done-btn {
    background: #0e0e0f !important; color: #fff !important; border: none !important;
    border-radius: 999px !important; font-family: 'Jost', sans-serif !important;
    font-size: 13px !important; font-weight: 700 !important; padding: 8px 16px !important;
  }
  .toolbar-clear-btn { background: transparent !important; color: #9ca3af !important; gap: 4px; }
  .toolbar-clear-btn .toolbar-btn-label {
    display: inline !important; font-family: 'Jost', sans-serif !important;
    font-size: 12px !important; font-weight: 600 !important; color: #9ca3af !important;
  }
  .toolbar-clear-btn.confirming, .toolbar-clear-btn.confirming .toolbar-btn-label { color: #e4564f !important; }
}
/* Premium card tile (overrides the engine's inline style) */
.mobile-sv-badge-item {
  height: auto !important;
  min-height: 104px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 5px 7px !important;
  background: #fff !important;
  border: 1px solid rgba(14, 14, 15, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
  user-select: none; -webkit-user-select: none;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Jost', sans-serif;
}
.mobile-sv-badge-item:active {
  transform: scale(0.97) !important;  /* gentle press feedback */
}
.mobile-sv-badge-item img {
  width: 100% !important;
  height: 50px !important;            /* FIXED image area — uniform */
  object-fit: contain !important;
  flex-shrink: 0;
  margin: 0 0 5px 0 !important;
}
/* Name — readable single line, ink, Jost */
.mobile-sv-badge-item *:not(img):not(button) {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: #0e0e0f !important;
  display: block !important;
  word-break: normal !important;
  hyphens: none !important;
  margin: 0 !important;
}
/* Price — near-black bold (green is reserved for the selected state) */
.mobile-sv-badge-item [style*="£"],
.mobile-sv-badge-item [style*="color: #10b981"],
.mobile-sv-badge-item [style*="color: rgb(16"],
.mobile-sv-badge-item [style*="color: green"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0e0e0f !important;
  margin-top: 3px !important;
  letter-spacing: 0.2px !important;
}
/* Hide red "failed: ..." error text that JS injects when an image 404s */
.mobile-sv-badge-item [style*="color: red"],
.mobile-sv-badge-item [style*="color:red"],
.mobile-sv-badge-item [style*="color: #ef4444"],
.mobile-sv-badge-item [style*="color: #dc2626"],
.mobile-sv-badge-item [style*="color: rgb(239"],
.mobile-sv-badge-item [style*="color: rgb(220"] {
  display: none !important;
}
/* Selected tile — green tick (pairs with the green ring in BLOCK A) */
.mobile-sv-badge-item.sv-tile-selected::after {
  content: "\2713";
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #298a30; color: #fff; font-size: 12px; font-weight: 700;
  text-align: center; line-height: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); border: 2px solid #fff;
}
/* Long-press preview overlay (I2-P2) — hold a tile to view it bigger */
.sv-lp-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 9, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
}
.sv-lp-overlay.is-visible { opacity: 1; pointer-events: auto; }
.sv-lp-card {
  background: #fff; border-radius: 20px; padding: 22px 22px 18px;
  max-width: 78vw; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  transform: scale(0.9); transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: 'Jost', sans-serif;
}
.sv-lp-overlay.is-visible .sv-lp-card { transform: scale(1); }
.sv-lp-card img { width: 200px; max-width: 60vw; height: auto; object-fit: contain; display: block; margin: 0 auto 12px; }
.sv-lp-card .sv-lp-name { font-size: 15px; font-weight: 600; color: #0e0e0f; }
.sv-lp-card .sv-lp-price { font-size: 14px; font-weight: 700; color: #0e0e0f; margin-top: 4px; }
.sv-lp-card .sv-lp-hint { font-size: 11px; color: #9ca3af; margin-top: 10px; letter-spacing: 0.02em; }

/* ---- WS-replace: Replace badge action + "pick a design" banner ----------
   The base .sv-badge-action-item (white text, svg, hover) is defined in
   jacket.css and already styles this button. Replace is the safe/primary
   action, so we keep it white (Remove stays red via .danger) and tint the
   hover with the customiser brand green to read as distinct from Remove. */
.sv-badge-action-item.sv-replace-action:hover { background: rgba(41, 138, 48, 0.22); }
.sv-badge-action-item.sv-replace-action svg { color: #4ade80; }

/* Banner mirrors .sv-place-pill (dark glass, green border, pill) and adds an
   inline Cancel. Below the action menu (z 100000) but above the gallery. */
.sv-replace-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 88px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 18px;
  background: rgba(8, 8, 9, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(41, 138, 48, 0.55);
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sv-replace-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sv-replace-banner-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-replace-banner-cancel {
  flex-shrink: 0;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sv-replace-banner-cancel:hover,
.sv-replace-banner-cancel:active { background: rgba(255, 255, 255, 0.24); }