/** Shopify CDN: Minification failed

Line 3853:0 Unexpected end of file

**/
/*!
 * @copyright 2026 Fortee Custom Apparel Inc. All rights reserved.
 * @license PROPRIETARY - Unauthorized copying prohibited.
 * Protected under the Canadian Copyright Act (R.S.C., 1985, c. C-42).
 */
/* ​‌​​​‌‌​‍​‌​​‌‌‌‌‍​‌​‌​​‌​‍​‌​‌​‌​​‍​‌​​​‌​‌‍​‌​​​‌​‌‍​​‌​‌‌​‌‍​​‌‌​​‌​‍​​‌‌​​​​‍​​‌‌​​‌​‍​​‌‌​‌‌​‍​​‌​‌‌​‌‍​‌​‌​‌‌​‍​​‌‌​​‌​‍​​‌​‌‌​‌‍​‌​​​​‌​‍​‌​​‌‌​​‍​‌​​​‌​​‍​‌​​‌​‌‌‍​‌​​​‌​‌‍​‌​‌‌​​‌‍​​‌​‌‌​‌‍​​‌‌​​​‌‍​‌‌​​‌​‌‍​​‌‌​‌​​‍​​‌‌​​‌‌‍​​‌‌​‌​​‍​‌‌​​​​‌‍​‌‌​​‌​‌‍​‌‌​​​‌‌‍​​‌‌​​​​‍​​‌‌​​​‌‍​​‌‌​​​‌‍​‌‌​​​‌​ */
/* ==========================================================================
   single-builder.css
   Styles for the Single Product Builder (v2.0 continuous scroll layout).
   Most shared styles live in builder-shared.css; this file contains
   single-builder-specific layout and component styles.
   ========================================================================== */

/* === Single Builder Container === */
.single-builder {
  max-width: 800px;
  margin: 0 auto;
}

/* === Color Swatches (SNGL-03) === */
.ftb-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* The 2px opaque border used to paint over a ring of the swatch colour, so the
   colour never reached the circle's edge. Rim is now an inset shadow that
   overlays the colour, giving a solid circular swatch; the selection ring is a
   separate outset shadow so it never eats into the colour either. */
.ftb-color-swatch {
  width: 26px;
  height: 26px;
  min-width: unset;
  min-height: unset;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
  border: 0;
  background-clip: border-box;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ftb-color-swatch--selected {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--ftb-primary),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

.ftb-color-swatch--white {
  box-shadow: inset 0 0 0 1px #c5c5c5, 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ftb-color-swatch--white.ftb-color-swatch--selected {
  box-shadow: inset 0 0 0 1px #c5c5c5, 0 0 0 2px var(--ftb-primary),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

.ftb-color-name {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  font-family: var(--ftb-font-body);
  margin-left: 4px;
}

/* === Product Preview Image (DECO-05) === */
.ftb-product-preview {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 16px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--ftb-radius-lg, 12px);
  background-color: var(--ftb-bg-muted, #f9fafb);
}

.ftb-product-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === Decoration Summary (DECO-06) === */
.ftb-decoration-summary {
  margin-top: 8px;
  padding: 6px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 11px;
  color: #16a34a;
  font-weight: 600;
  font-family: var(--ftb-font-body);
}

.ftb-decoration-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--ftb-border-color, #e5e7eb);
}

.ftb-decoration-summary-item:last-child {
  border-bottom: none;
}

.ftb-decoration-summary-dims {
  font-size: 12px;
  color: var(--ftb-text-muted, #6b7280);
}

.ftb-decoration-summary-zone-canvas {
  margin-top: 8px;
}

/* === Configure Step Layout === */
.ftb-configure-section {
  margin-bottom: 24px;
}

.ftb-configure-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ftb-text, #111827);
}

/* === Size Quantity Stepper (SNGL-05) === */
.ftb-size-steppers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ftb-size-stepper {
  text-align: center;
}

.ftb-size-stepper-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #666;
  margin-bottom: 4px;
  font-family: var(--ftb-font-heading);
}

.ftb-size-stepper-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ftb-border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.ftb-size-stepper-btn {
  width: 30px;
  height: 36px;
  min-width: unset;
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--ftb-bg-muted, #f8f9fa);
  font-size: 16px;
  font-weight: 700;
  color: var(--ftb-dark);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ftb-size-stepper-btn:active {
  background: #e5e7eb;
}

.ftb-size-stepper-input {
  width: 36px;
  height: 36px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  border: none;
  padding: 0;
  -moz-appearance: textfield;
}

.ftb-size-stepper-input::-webkit-outer-spin-button,
.ftb-size-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* === Quantity Counter (inline with step header) === */
.ftb-qty-counter {
  font-size: 12px;
  font-weight: 700;
  color: var(--ftb-primary);
  font-family: var(--ftb-font-heading);
}

/* === Size Presets (SNGL-06) === */
.ftb-size-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.ftb-size-preset {
  flex: 1;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ftb-primary) 10%, transparent);
  font-size: 11px;
  font-weight: 700;
  color: var(--ftb-primary);
  font-family: var(--ftb-font-heading);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ftb-size-preset:active,
.ftb-size-preset--active {
  background: color-mix(in srgb, var(--ftb-primary) 20%, transparent);
}

/* === MOQ Warning (SNGL-07) === */
.ftb-moq-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff4ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #ea580c;
  font-family: var(--ftb-font-body);
  margin-top: 10px;
}

.ftb-moq-met {
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  font-family: var(--ftb-font-body);
  margin-top: 8px;
}

/* === Quantity Summary === */
.ftb-quantity-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  font-family: var(--ftb-font-body);
}

/* === Price Breakdown (SNGL-08, PRCE-02) === */
.ftb-price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ftb-price-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}

.ftb-price-breakdown-row--total {
  border-top: 1px solid var(--ftb-border-color, #e5e7eb);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 700;
}

.ftb-price-breakdown-label {
  color: var(--ftb-text-muted, #6b7280);
  font-size: 13px;
}

.ftb-price-breakdown-row--total .ftb-price-breakdown-label {
  color: var(--ftb-text, #111827);
  font-size: 14px;
}

.ftb-price-breakdown-value {
  font-weight: 700;
  color: var(--ftb-text, #111827);
  font-family: var(--ftb-font-heading);
}

.ftb-price-breakdown-row--total .ftb-price-breakdown-value {
  font-size: 16px;
  color: var(--ftb-primary);
}

/* === Regios Volume Discount Badge (PRCE-03) === */
.ftb-volume-discount {
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #3b82f6;
  border-radius: var(--ftb-radius, 8px);
  font-size: 14px;
  color: #1e40af;
  margin-top: 8px;
}

/* ==========================================================================
   Multi-Color Size Grid (PROD-02, PROD-07)
   Per-color rows with stepper controls, quick fill, Add More Colors
   ========================================================================== */

/* Color Row Container */
.ftb-color-row {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

/* The row whose colour the mockup is currently showing. Step 4 lost its
   duplicate swatch strip, so the row header IS the colour switch now — this is
   the only thing tying "the preview shows Cobalt" back to a row on screen. */
.ftb-color-row--active {
  border-color: var(--ftb-primary, #009afd);
  box-shadow: inset 0 0 0 1px var(--ftb-primary, #009afd);
}

/* Color Row Header */
.ftb-color-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Mini Color Swatch (shared by row header and color picker) */
.ftb-color-swatch-mini {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background-clip: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

/* Color Row Name */
.ftb-color-row-name {
  font-weight: 600;
  font-size: 14px;
  font-family: var(--ftb-font-heading);
  color: var(--ftb-dark, #111827);
}

/* Color Row Chevron */
.ftb-color-row-chevron {
  margin-left: auto;
  transition: transform 0.2s;
  flex-shrink: 0;
  color: #94a3b8;
}
.ftb-color-row-chevron--open {
  transform: rotate(180deg);
}

/* Color Row Total (auto-pushed right) */
.ftb-color-row-total {
  margin-left: auto;
  font-size: 13px;
  color: #6b7280;
  font-family: var(--ftb-font-body);
}

/* Quick Fill Buttons */
.ftb-quick-fill {
  display: flex;
  gap: 4px;
  align-items: center;
}

.ftb-quick-split-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #94a3b8;
  margin-right: 4px;
  white-space: nowrap;
}

.ftb-quick-fill-btn {
  width: 32px;
  height: 28px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ftb-font-heading);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  min-width: unset;
  min-height: unset;
}

.ftb-quick-fill-btn:hover {
  background: #f3f4f6;
}

/* Remove Color Button (bottom of color row) */
.ftb-remove-color-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
  padding: 6px 12px;
  background: none;
  border: none;
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ftb-font-body);
  cursor: pointer;
  min-width: unset;
  min-height: unset;
}
.ftb-remove-color-btn:hover {
  color: #dc2626;
  text-decoration: underline;
}

/* Size Grid (horizontal scroll on mobile) */
/* Size Grid — mobile-first: 3 cols (matches mockup) */
.ftb-size-grid {
  display: grid;
  /* minmax(0,1fr) lets columns shrink below their content width so the grid
     stays contained in narrow panels instead of overflowing / getting clipped. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 4px;
}

/* Individual Size Cell */
.ftb-size-cell {
  text-align: center;
}

/* Size Label */
.ftb-size-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  letter-spacing: 0.3px;
}

/* Size Stepper (container for -/input/+) — fills its cell and shrinks with it */
.ftb-size-stepper {
  display: flex;
  width: 100%;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* Stepper Buttons */
.ftb-size-stepper-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 36px;
  background: #f8f9fa;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: var(--ftb-dark, #1d3557);
  padding: 0;
  min-width: unset;
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ftb-size-stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ftb-size-stepper-btn:active:not(:disabled) {
  background: #e5e7eb;
}

/* Size Input — 16px font prevents iOS Safari zoom on focus.
   flex:1 + min-width:0 lets it absorb spare width and shrink so the stepper
   always fits its cell (buttons stay a fixed, tappable size). */
.ftb-size-input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 36px;
  text-align: center;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  padding: 0;
  background: #fff;
  color: var(--ftb-dark, #1d3557);
  -moz-appearance: textfield;
}

.ftb-size-input::-webkit-outer-spin-button,
.ftb-size-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add More Colors Button */
.ftb-add-color-wrap {
  position: relative;
}

.ftb-add-color-btn {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--ftb-font-heading);
  cursor: pointer;
  background: transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, color 0.15s;
  min-width: unset;
  min-height: unset;
}

.ftb-add-color-btn:hover {
  border-color: #009afd;
  color: #009afd;
}

/* Color Picker Overlay + Modal */
.ftb-color-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ftb-color-picker-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0;
}

.ftb-color-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 14px 14px 0 0;
  z-index: 1;
}

.ftb-color-picker-title {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  color: var(--ftb-dark, #111827);
}

.ftb-color-picker-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #64748b;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.ftb-color-picker-close:hover {
  color: #111;
  background: #f1f5f9;
}

.ftb-color-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px;
}

.ftb-color-pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 6px 8px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: unset;
}
.ftb-color-pick-card:hover {
  border-color: var(--ftb-primary, #009afd);
  box-shadow: 0 2px 8px rgba(0,154,253,0.12);
}

.ftb-color-pick-img {
  width: 80px;
  height: 90px;
  object-fit: contain;
}

.ftb-color-pick-name {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  color: var(--ftb-dark, #111827);
  text-align: center;
}

/* Legacy dropdown (replaced by modal) */
.ftb-color-picker-dropdown {
  display: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.ftb-color-pick-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: var(--ftb-font-body);
  color: var(--ftb-dark, #111827);
  text-align: left;
  min-width: unset;
  min-height: unset;
}

.ftb-color-pick-option:hover {
  background: #f3f4f6;
}

/* MOQ Warning (multi-color grid specific) */
.ftb-moq-warning {
  background: #fef3c7;
  color: #92400e;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--ftb-font-body);
  margin-top: 12px;
}

/* Total Quantity Display */
.ftb-qty-total {
  font-size: 16px;
  padding: 8px 0;
  margin-top: 8px;
  font-family: var(--ftb-font-body);
  color: var(--ftb-dark, #111827);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ftb-qty-total-min {
  font-size: 13px;
  color: #6b7280;
}

/* Size Guide Link (in step header) */
.ftb-size-guide-link {
  font-size: 13px;
  color: #009afd;
  margin-left: auto;
  text-decoration: underline;
  font-family: var(--ftb-font-body);
  font-weight: 600;
}

/* ==========================================================================
   v2.0 Continuous Scroll Layout (sp-editor)
   Mobile-first: single column with sticky product image
   Desktop (1024px+): two-column sidebar layout
   ========================================================================== */

/* === sp-editor Container (mobile-first: column) === */
.ftb-editor {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* === Image Column === */
.ftb-image-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.ftb-product-img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

/* === Front/Back View Toggle (PROD-13) === */
.ftb-view-toggle {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ftb-view-btn {
  padding: 8px 20px;
  border: 2px solid var(--ftb-border-color, #e5e7eb);
  border-radius: var(--ftb-radius, 8px);
  background: var(--ftb-bg, #ffffff);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.ftb-view-btn--active {
  border-color: var(--ftb-accent, #009afd);
  background: var(--ftb-accent, #009afd);
  color: #fff;
}

/* === Logo Overlay ===
   NO MARGIN HERE. This carried `margin-top: 8px` from 7d4f365, the original CSS
   namespacing pass, back when .ftb-logo-overlay was a normal-flow element that
   needed spacing from the control above it.
   It is now an absolutely positioned overlay whose top is computed in
   painted-image pixels by _measuredOverlayStyle, so the margin did nothing but
   push the logo 8px BELOW the rectangle it is clamped to. The print-area
   boundary carries no such margin, so the two disagreed by a constant 8px: a
   visible gap when the logo was dragged to the top of the zone, and 8px of
   overflow when dragged to the bottom. Measured, not inferred -- pure geometry
   said 0.000px overflow while Chrome painted 8.00px.
   This is why the corner card was never affected: it is
   .ftb-mobile-sticky-hero-overlay, which never matched this selector.
   An absolutely positioned element positioned in computed pixels must carry no
   margin. Do not reintroduce one. */

/* === Configuration Column === */
.ftb-config {
  padding: 0 16px;
  padding-bottom: 80px;
  font-family: var(--ftb-font-body);
}

/* === Section Dividers === */
.ftb-section {
  margin-bottom: 12px;
  padding: 20px 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.ftb-section:last-child {
  margin-bottom: 20px;
}

/* === Section Title === */
.ftb-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ftb-dark);
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* === Add to Cart Button === */
.ftb-add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--ftb-radius-lg, 14px);
  background: linear-gradient(135deg, var(--ftb-primary), #0070c0);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--ftb-font-heading);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ftb-primary) 30%, transparent);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
}

.ftb-add-to-cart:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ftb-primary) 40%, transparent);
}

.ftb-add-to-cart:disabled {
  background: #e5e7eb;
  color: #999;
  box-shadow: none;
  cursor: not-allowed;
}

/* === Method Comparison (PROD-12) — collapsible toggle === */

/* .ftb-step4-colors / .ftb-step4-colors-label removed — the Step 4 swatch strip
   they styled is gone. See the note in main-single-builder.liquid at Step 4. */

.ftb-deco-info-toggle {
  background: none;
  border: none;
  color: var(--ftb-primary, #009afd);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ftb-font-body);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-width: unset;
  min-height: unset;
}

.ftb-deco-info-toggle--inline {
  font-size: 11px;
  font-weight: 600;
  margin-left: 8px;
  padding: 2px 8px;
  vertical-align: middle;
  background: rgba(0, 154, 253, 0.08);
  border: 1px solid rgba(0, 154, 253, 0.25);
  border-radius: 4px;
  text-decoration: none;
}

/* (compare-grid/compare-card removed in 08-07; replaced by method-card-grid/method-card) */

/* === Override location zones padding inside sp-editor === */
.ftb-section .ftb-location-zones {
  padding: 0;
  gap: 8px;
}

/* === Upload Hint (shown when no zone selected) === */
.ftb-upload-hint {
  text-align: center;
  color: var(--ftb-text-muted, #6b7280);
  font-size: 14px;
  padding: 16px;
}

/* === Logo Badge (small artwork indicator in image area) === */
.ftb-logo-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--ftb-accent, #009afd);
  overflow: hidden;
  background: #fff;
}

.ftb-logo-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === Step Indicators (numbered badges with completion state) === */
.ftb-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ftb-step-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ftb-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--ftb-font-heading);
  flex-shrink: 0;
  transition: background 0.2s;
}

.ftb-step-badge--complete,
.ftb-step-badge--done {
  background: var(--ftb-success);
}

.ftb-step-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ftb-dark);
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === Garment View Thumbnails (legacy SVG styles removed in 08-03; now uses gallery-thumb and placement-picker view-thumb) === */

/* === Product Header Block === */
.ftb-product-header {
  padding: 16px 16px 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.ftb-badge {
  display: inline-block;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--ftb-primary) 9%, transparent);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ftb-primary);
  font-family: var(--ftb-font-heading);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ftb-product-name {
  font-size: 24px;
  font-weight: 900;
  color: var(--ftb-dark);
  font-family: var(--ftb-font-heading);
  line-height: 1.2;
  margin: 0 0 4px;
}

.ftb-product-desc {
  font-size: 13px;
  color: #666;
  font-family: var(--ftb-font-body);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* Rich (formatted) description: keep the product's real HTML structure but
   tame it to the compact builder — tight paragraph/list spacing, readable
   emphasis, contained media. */
.ftb-product-desc--rich > *:first-child { margin-top: 0; }
.ftb-product-desc--rich > *:last-child { margin-bottom: 0; }
.ftb-product-desc--rich p { margin: 0 0 8px; }
.ftb-product-desc--rich ul,
.ftb-product-desc--rich ol { margin: 0 0 8px; padding-left: 18px; }
.ftb-product-desc--rich li { margin-bottom: 4px; }
.ftb-product-desc--rich li::marker { color: var(--ftb-primary, #009afd); }
.ftb-product-desc--rich strong,
.ftb-product-desc--rich b { color: #374151; font-weight: 700; }
.ftb-product-desc--rich a { color: var(--ftb-primary, #009afd); text-decoration: underline; }
.ftb-product-desc--rich h1,
.ftb-product-desc--rich h2,
.ftb-product-desc--rich h3,
.ftb-product-desc--rich h4,
.ftb-product-desc--rich h5,
.ftb-product-desc--rich h6 {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin: 10px 0 4px;
  font-family: var(--ftb-font-heading);
}
.ftb-product-desc--rich img { max-width: 100%; height: auto; border-radius: 6px; }
.ftb-product-desc--rich table { width: 100%; font-size: 12px; border-collapse: collapse; }

/* Collapsed state: clamp to 3 lines until "Read more" is clicked. */
.ftb-product-desc--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ftb-product-desc-wrap .ftb-product-desc {
  margin-bottom: 4px;
}
.ftb-desc-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  color: var(--ftb-primary, #009afd);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  cursor: pointer;
}
.ftb-desc-toggle:hover {
  text-decoration: underline;
}

.ftb-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ftb-price-current {
  font-size: 28px;
  font-weight: 900;
  color: var(--ftb-primary);
  font-family: var(--ftb-font-heading);
}

.ftb-price-unit {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

/* === Review Title === */
.ftb-review-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ftb-dark);
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* === Skip Upload Override (matches mockup orange hint box) === */
.ftb-section .ftb-upload-step-skip {
  margin-top: 8px;
  padding: 8px;
  background: #fff4ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #ea580c;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  text-decoration: underline;
}

/* === Upload Zone: Uploadcare widget styled as branded blue box === */
.ftb-upload-zone {
  margin: 8px 0;
}
.ftb-uc-uploader {
  display: block;
  width: 100%;
  --uc-radius: 12px;
  --uc-padding: 32px 16px;
  --uc-font-family: var(--ftb-font-body, 'Inter', sans-serif);
  --uc-font-size: 16px;
  --uc-simple-btn-light: var(--ftb-primary, #009afd);
  --uc-simple-btn-foreground-light: #fff;
  --uc-simple-btn-padding: 32px 20px;
  --uc-simple-btn-font-family: var(--ftb-font-body, 'Inter', sans-serif);
  --uc-simple-btn-font-size: 16px;
}

/* --- Uploadcare source-picker modal: fit the phone, free the Cancel button ---
   Two defects in Uploadcare's own modal, both reproduced on live at 360px and
   390px before this rule existed.

   1. The dialog is laid out `left:0; right:0` with `margin-right:-40px`, so its
      used width resolves to viewport+40 and the right edge is cut off — 40px
      lost at 390px, 70px at 360px. Pinning the inline margins lets left/right
      resolve the width honestly; the max-inline-size is a belt-and-braces cap
      in case the negative margin moves to another edge in a future release.

   2. `a.uc-credits` is absolutely positioned straight across the Cancel button.
      It is later in paint order, so it won the hit test at Cancel's centre and
      Cancel was untappable at EVERY viewport tested. Lifting the button wins the
      tap back without hiding or disabling the attribution link, which stays
      visible and still clickable outside the button's box — pointer-events:none
      on the link would have been the smaller rule but it disables an
      attribution link we do not own. */
.ftb-uc-uploader uc-modal dialog {
  /* !important: Uploadcare sets these from inside uc-modal and wins otherwise.
     Verified — without it the dialog stays 430px and the overflow survives. */
  margin-inline: 0 !important;
  max-inline-size: 100vw !important;
}

.ftb-uc-uploader uc-modal dialog .uc-secondary-btn {
  position: relative;
  z-index: 1;
}

.ftb-upload-zone-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ftb-primary), #0070c0);
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ftb-upload-zone-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--ftb-dark);
  font-family: var(--ftb-font-heading);
  margin: 0 0 2px;
}

.ftb-upload-zone-formats {
  font-size: 9px;
  color: #888;
  font-family: var(--ftb-font-body);
}

/* === Live price chip (small floating sticky display) === */
.ftb-price-chip {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45; /* below modals (100) and the old sticky bar (50) */
  background: var(--ftb-bg, #fff);
  border: 1px solid var(--ftb-border-color, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 10px 14px;
  min-width: 128px;
  pointer-events: none; /* purely informational — never block clicks */
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.ftb-price-chip-unit {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.ftb-price-chip-amount {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ftb-text, #111827);
}
.ftb-price-chip-per {
  font-size: 12px;
  color: var(--ftb-text-muted, #6b7280);
}
.ftb-price-chip-total {
  font-size: 12px;
  color: var(--ftb-text-muted, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
}
.ftb-price-chip-total strong {
  font-weight: 700;
  color: var(--ftb-text, #111827);
}
/* Flash highlight when the unit price changes */
.ftb-price-chip--flash {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 6px 20px rgba(16, 185, 129, 0.25);
  transform: translateY(-2px);
}
@media (max-width: 639px) {
  .ftb-price-chip {
    right: 10px;
    bottom: 10px;
    padding: 8px 12px;
    min-width: 0;
  }
  .ftb-price-chip-amount { font-size: 18px; }
}

/* === Sticky Bottom Bar (mobile + desktop) === */
.ftb-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateZ(0);
}

.ftb-sticky-bar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ftb-sticky-bar-label {
  display: none;
  font-weight: 600;
  color: #374151;
  font-size: 13px;
  font-family: var(--ftb-font-heading);
}

.ftb-sticky-bar-qty {
  font-size: 13px;
  color: #6b7280;
  font-family: var(--ftb-font-body);
}

.ftb-sticky-bar-multiply {
  margin: 0 2px;
}

.ftb-sticky-bar-total {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  font-family: var(--ftb-font-heading);
}

.ftb-sticky-bar-cta {
  min-width: 160px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ftb-sticky-bar-cta--active {
  background: #009afd;
  color: #fff;
}

.ftb-sticky-bar-cta--active:hover {
  background: #0087de;
}

.ftb-sticky-bar-cta--disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

/* === Volume Discount Tiers (PROD-06) === */
.ftb-volume-tiers {
  margin-top: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.ftb-volume-tiers-title {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ftb-dark, #111827);
  margin: 0 0 8px;
}

.ftb-volume-tiers-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ftb-volume-tier {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--ftb-font-body);
}

.ftb-volume-tier--active {
  border-color: #009afd;
  background: color-mix(in srgb, #009afd 8%, white);
}

.ftb-volume-tier-qty {
  font-weight: 700;
  color: var(--ftb-dark, #111827);
}

.ftb-volume-tier-price {
  color: #6b7280;
}

.ftb-volume-tier-badge {
  background: #16a34a;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ==========================================================================
   Desktop Breakpoint (1024px+): Two-Column Sidebar Layout
   ========================================================================== */
@media (min-width: 1024px) {
  .ftb-editor {
    flex-direction: row;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 32px;
  }

  .ftb-image {
    flex: 0 0 52%;
    max-width: 620px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    height: fit-content;
  }

  .ftb-image-sticky {
    position: static;
    max-height: none;
    box-shadow: none;
  }

  .ftb-product-img {
    max-height: 480px;
    border-radius: var(--ftb-radius-lg, 12px);
  }

  /* Height cap deliberately absent here: the base .ftb-hero-img rule sits LATER
     in this file, so a cap declared in this block loses on source order. The
     desktop cap is redeclared right after that base rule instead. */
  .ftb-hero-img {
    border-radius: var(--ftb-radius-lg, 12px);
  }

  .ftb-config {
    flex: 1;
    min-width: 0;
    padding: 0;
    padding-bottom: 80px;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .ftb-product-name { font-size: 28px; }
  .ftb-price-current { font-size: 32px; }

  .ftb-sticky-bar {
    padding: 16px 24px;
  }

  .ftb-sticky-bar-info {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .ftb-sticky-bar-label {
    display: inline;
  }

  /* Spacing deliberately absent here for the same reason as .ftb-hero-img above:
     the base .ftb-gallery-thumbs rule is later in the file and would win. Only
     justify-content survives, because the base rule never declares it. */
  .ftb-gallery-thumbs {
    justify-content: flex-start;
  }

  .ftb-slider-arrow {
    width: 32px;
    height: 32px;
  }
  .ftb-slider-arrow--left { left: -8px; }
  .ftb-slider-arrow--right { right: -8px; }

  /* Desktop: 3 cols, larger steppers */
  .ftb-size-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .ftb-size-label {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .ftb-size-stepper {
    border-radius: 10px;
  }
  .ftb-size-stepper-btn {
    width: 36px;
    height: 44px;
    font-size: 18px;
  }
  .ftb-size-input {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  /* Desktop: quick fill inline next to color name */
  .ftb-color-row-header {
    flex-wrap: nowrap;
  }
}

/* === Stacked Layout Override (EDIT-05) === */
@media (min-width: 1024px) {
  .ftb-editor--stacked {
    flex-direction: column;
    max-width: 800px;
  }
  .ftb-editor--stacked .ftb-image {
    flex: none;
    max-width: 100%;
    position: static;
    width: 100%;
  }
  .ftb-editor--stacked .ftb-image-sticky {
    position: static;
  }
  .ftb-editor--stacked .ftb-config {
    width: 100%;
  }
}

/* ==========================================================================
   Gallery Thumbnails (image area, 4 views)
   ========================================================================== */
/* === Gallery Card Slider === */
.ftb-gallery-slider {
  position: relative;
  width: 100%;
  padding: 0 4px;
}

.ftb-gallery-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
  background: #fff;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ftb-gallery-thumbs::-webkit-scrollbar {
  display: none;
}
/* Center thumbnails when they all fit (no horizontal overflow). Higher
   specificity so it overrides the desktop @media flex-start rule. */
.ftb-gallery-slider .ftb-gallery-thumbs--center {
  justify-content: center;
}

.ftb-gallery-thumb {
  /* max-width caps the rendered width so the strip stays a secondary control
     next to the hero; the flex basis (~4 across, 3 gaps) is the fill fallback
     on narrow viewports where the cap never binds. Extras scroll via arrows. */
  flex: 0 0 calc((100% - 18px) / 4);
  max-width: 72px;
  min-width: 0;
  cursor: pointer;
  scroll-snap-align: start;
}

/* `cover` cropped the garment against the fixed 3/4 box — sleeves and hems were
   sliced off whenever the source image wasn't 3:4. `contain` keeps the whole
   product visible and centred at its true aspect ratio; the small padding stops
   a contained image from butting against the border. Box stays 3/4 so the strip
   keeps a consistent rhythm regardless of source dimensions. */
.ftb-gallery-thumb-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  background: #fff;
  border-radius: 8px;
  border: 2px solid var(--ftb-border-color, #e5e7eb);
  background: #fff;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ftb-gallery-thumb--active .ftb-gallery-thumb-img {
  border-color: var(--ftb-primary, #009afd);
  box-shadow: 0 0 0 1.5px var(--ftb-primary, #009afd), 0 2px 8px rgba(0,154,253,0.15);
}

/* Desktop strip sizing redeclared HERE, after the base rules — equal specificity means source order decides (same trap as the arrow override below). */
@media (min-width: 1024px) {
  .ftb-gallery-thumbs { gap: 8px; padding: 6px 0; }
  .ftb-gallery-thumb { max-width: 96px; }
}

/* Slider arrows — plain chevrons, no dark disc. The 28px black circle read as a
   heavy overlay sitting on the thumbnails. The hit area stays 28px for touch;
   only the disc is gone. A soft white halo keeps the stroke legible against a
   dark garment without reintroducing a visible button. */
.ftb-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: color 0.15s, opacity 0.15s;
  padding: 0;
  color: #1f2937;
  opacity: 0.75;
}
.ftb-slider-arrow:hover {
  background: none;
  color: var(--ftb-primary, #009afd);
  opacity: 1;
}
.ftb-slider-arrow:focus-visible {
  outline: 2px solid var(--ftb-primary, #009afd);
  outline-offset: 2px;
  border-radius: 4px;
}
.ftb-slider-arrow--left { left: -4px; }
.ftb-slider-arrow--right { right: -4px; }
/* stroke follows the button's colour (was hard-coded #fff for the dark disc).
   The drop-shadow is the legibility fallback now that there's no disc behind. */
.ftb-slider-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
}

/* Mobile tap target. The @media block earlier in this file already tried to set
   32px, but it sits ABOVE the base .ftb-slider-arrow rule — equal specificity,
   so the base 28px always won and that override has been dead. Redeclared here,
   after the base, and bumped to 40px for touch. */
@media (max-width: 767px) {
  .ftb-slider-arrow {
    width: 40px;
    height: 40px;
  }
  .ftb-slider-arrow--left { left: -10px; }
  .ftb-slider-arrow--right { right: -10px; }
}

/* ==========================================================================
   3-Level Placement Picker (08-03)
   ========================================================================== */
.ftb-placement-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Level 1: View Thumbnails (inside Step 3) */
.ftb-placement-picker .ftb-view-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: visible;
  padding: 0;
  background: transparent;
}

.ftb-view-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  background: var(--ftb-bg-muted, #f9fafb);
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ftb-view-thumb--active {
  border-color: var(--ftb-primary, #009afd);
  box-shadow: 0 0 0 1px var(--ftb-primary, #009afd);
}

.ftb-view-thumb--has-logo {
  border-color: var(--ftb-primary, #009afd);
}

.ftb-view-thumb--active.ftb-view-thumb--has-logo {
  border-color: var(--ftb-primary, #009afd);
  box-shadow: 0 0 0 1px var(--ftb-primary, #009afd);
}

.ftb-view-thumb-img {
  width: 100%;
  height: 48px;
  object-fit: contain;
  border-radius: 6px 6px 0 0;
}

.ftb-view-thumb-label {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #999;
}

.ftb-view-thumb--active .ftb-view-thumb-label {
  color: var(--ftb-primary, #009afd);
}

.ftb-view-check {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ftb-success, #16a34a);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.ftb-view-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  min-width: unset;
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Level 2: Decoration Method Buttons */
.ftb-methods {
  display: flex;
  gap: 8px;
}

.ftb-method-btn {
  padding: 10px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--ftb-font-heading);
  color: var(--ftb-dark, #111827);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 40px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ftb-method-btn--active {
  background: #009afd;
  border-color: #009afd;
  color: #fff;
}

/* Level 3: Sub-location Buttons */
.ftb-sublocations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ftb-subloc-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ftb-font-body);
  color: var(--ftb-dark, #111827);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 36px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ftb-subloc-btn--active {
  background: #009afd;
  border-color: #009afd;
  color: #fff;
}

/* Placement Summary */
.ftb-placement-summary {
  margin-top: 12px;
}

.ftb-placement-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #374151;
  font-family: var(--ftb-font-body);
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}

.ftb-placement-line:last-child {
  border-bottom: none;
}

.ftb-placement-remove {
  background: none;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  padding: 3px 8px;
  color: #94a3b8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--ftb-font-body);
  font-weight: 600;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ftb-placement-remove:hover {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239,68,68,0.05);
}

/* ==========================================================================
   Reuse Logo Dialog (08-03)
   ========================================================================== */
.ftb-reuse-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ftb-reuse-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.ftb-reuse-dialog-content {
  position: relative;
  max-width: 400px;
  width: calc(100% - 32px);
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ftb-reuse-dialog-content h3 {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--ftb-font-heading);
  color: var(--ftb-dark, #111827);
  margin: 0 0 16px;
}

.ftb-reuse-dialog-thumb {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block;
}

.ftb-reuse-dialog-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}

/* Artwork Library grid. Grid rather than flex-wrap (quick 260816-9ik): the
   library now PERSISTS across sessions and products, so it routinely holds a
   dozen entries instead of the one or two a single session produced, and a
   wrapping flex row lays those out ragged with a stranded last line. */
.ftb-logo-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ftb-logo-library-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 2px solid var(--ftb-border-color, #e2e8f0);
  border-radius: var(--ftb-radius-lg, 10px);
  background: var(--ftb-bg, #f9fafb);
  cursor: pointer;
  width: 100%;
  min-height: unset;
}

.ftb-logo-library-item:hover {
  border-color: var(--ftb-primary, #009afd);
  background: var(--ftb-bg-accent, #f0f9ff);
}

.ftb-logo-library-item:focus-visible {
  outline: none;
  box-shadow: var(--fortee-focus-ring);
}

/* Checkerboard, matching what the 2-step already ships. A transparent logo on
   flat white reads as "my background was NOT removed" — on a checker it reads
   as transparency, which is the thing the pipeline just spent an API call on.
   The literal sits INSIDE the var() so a token-load failure degrades to a
   visible checker rather than an invisible one. */
.ftb-logo-library-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background-color: var(--fortee-paper, #ffffff);
  background-image:
    linear-gradient(45deg, var(--ftb-bg-muted, #f1f4f7) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ftb-bg-muted, #f1f4f7) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ftb-bg-muted, #f1f4f7) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ftb-bg-muted, #f1f4f7) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border-radius: var(--ftb-radius, 4px);
}

.ftb-logo-library-label {
  font-size: 10px;
  color: var(--ftb-text-muted, #6b7280);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ftb-reuse-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ftb-reuse-btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  border: none;
}

.ftb-reuse-btn--primary {
  background: #009afd;
  color: #fff;
}

.ftb-reuse-btn--secondary {
  background: #fff;
  border: 2px solid #009afd;
  color: #009afd;
}

.ftb-reuse-btn--cancel {
  background: transparent;
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
}

/* Close button for dialog */
.ftb-reuse-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 6px;
  min-height: unset;
  min-width: unset;
}
.ftb-reuse-dialog-close:hover {
  background: #f3f4f6;
  color: #111827;
}

/* Logo library item wrapper (logo + delete) */
.ftb-logo-library-item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Destructive SECONDARY action: quiet by design — the tile itself is the thing
   the customer came to click. Quiet is not the same as unreachable, though: the
   rule used to unset min-height AND min-width on an 11px control, which is the
   44px tap-target gap the design system flags as C5/P2. Padding brings it to a
   comfortable target without giving it visual weight it should not have. */
.ftb-logo-library-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  border-radius: var(--ftb-radius, 4px);
  cursor: pointer;
  color: var(--fortee-danger, #c4291c);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  min-height: 32px;
  min-width: unset;
}
.ftb-logo-library-delete:hover {
  text-decoration: underline;
  background: var(--fortee-danger-surface, #fdeae7);
}
.ftb-logo-library-delete:focus-visible {
  outline: none;
  box-shadow: var(--fortee-focus-ring);
}

/* ==========================================================================
   ADD ARTWORK FOR [VIEW] inline button
   ========================================================================== */
.ftb-add-artwork-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin: 6px 0;
  background: #f0f9ff;
  border: 2px dashed var(--ftb-primary, #009afd);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
  color: #374151;
  cursor: pointer;
  text-align: center;
  min-height: 44px;
}
.ftb-add-artwork-btn:hover {
  background: #dbeafe;
  border-color: #2563eb;
}

/* ==========================================================================
   Send Logo Later (PROD-09)
   ========================================================================== */
.ftb-send-later {
  background: #fef3c7;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 12px;
  font-family: var(--ftb-font-body);
}

.ftb-send-later-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.ftb-send-later-btn {
  color: #009afd;
  font-weight: 600;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--ftb-font-body);
  padding: 0;
  min-width: unset;
  min-height: unset;
}

.ftb-send-later-confirmed {
  background: #d1fae5;
  padding: 12px 16px;
  border-radius: 8px;
  color: #065f46;
  font-size: 14px;
  margin-top: 12px;
  font-family: var(--ftb-font-body);
}

.ftb-send-later-undo {
  color: #009afd;
  font-weight: 600;
  margin-left: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--ftb-font-body);
  padding: 0;
  min-width: unset;
  min-height: unset;
}

/* ==========================================================================
   Order Summary (PROD-09)
   ========================================================================== */
.ftb-order-summary {
  background: #f9fafb;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin: 24px 16px 0;
}

.ftb-summary-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.ftb-summary-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ftb-summary-label {
  font-size: 13px;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  font-weight: 600;
  font-family: var(--ftb-font-heading);
}

.ftb-summary-color-row {
  margin-bottom: 8px;
}

.ftb-summary-color-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 600;
  font-family: var(--ftb-font-heading);
  font-size: 14px;
  color: var(--ftb-dark, #111827);
}

.ftb-summary-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ftb-summary-size-tag {
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--ftb-font-body);
}

.ftb-summary-placement {
  font-size: 14px;
  color: #374151;
  margin-bottom: 4px;
  font-family: var(--ftb-font-body);
}

.ftb-summary-artwork-status {
  font-size: 14px;
  color: #374151;
  font-family: var(--ftb-font-body);
}

.ftb-summary-pricing {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #e2e8f0;
}

.ftb-summary-price-line {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  gap: 6px;
  font-family: var(--ftb-font-body);
}

.ftb-summary-total {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  font-family: var(--ftb-font-heading);
  color: var(--ftb-dark, #111827);
}

.ftb-summary-cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  margin-top: 16px;
  background: var(--ftb-primary, #009afd);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  min-height: 52px;
  transition: background 0.15s, opacity 0.15s;
}
.ftb-summary-cta:hover:not(:disabled) {
  background: #0080dd;
}
.ftb-summary-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ftb-cart-error {
  background: #fef2f2;
  color: #991b1b;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 12px;
  font-family: var(--ftb-font-body);
}

/* ==========================================================================
   Hero-to-Sticky-Thumbnail Transition (08-07)
   Mobile: full hero shrinks to sticky 64px thumbnail after artwork upload.
   Desktop: stays full size (no thumbnail behavior needed).
   ========================================================================== */
.ftb-gallery-sticky {
  position: relative;
  width: 100%;
}

.ftb-hero-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ftb-hero-inner {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.ftb-hero-img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  display: block;
}
/* Desktop cap redeclared HERE, after the base rule — equal specificity means source order decides (same trap as the arrow override note above). */
@media (min-width: 1024px) {
  .ftb-hero-img { max-height: 480px; }
}
.ftb-logo-overlay {
  pointer-events: none;
}
.ftb-logo-overlay-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Logo start point inside the zone box. The img fills the box, so the flex
     align on the overlay can't shift it — object-position governs. Driven by
     the print area's logo-pin anchors via --ftb-logo-pos (x=horizontal,
     y=vertical); falls back to the legacy top/center. */
  object-position: var(--ftb-logo-pos, center top);
}
.ftb-zone-indicator {
  pointer-events: none;
}
.ftb-hero-view-label {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ftb-sticky-thumb {
  position: sticky;
  top: 8px;
  float: right;
  width: 64px;
  height: 64px;
  border: 2px dashed var(--ftb-primary);
  border-radius: 8px;
  overflow: hidden;
  z-index: 10;
}

.ftb-sticky-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.ftb-sticky-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 9px;
  text-align: center;
  padding: 2px;
  font-weight: 700;
  font-family: var(--ftb-font-heading);
}

@media (min-width: 1024px) {
  .ftb-sticky-thumb {
    float: none;
    width: 100%;
    height: auto;
    max-height: 500px;
    border: none;
    position: static;
  }

  .ftb-sticky-thumb-img {
    object-fit: contain;
  }

  .ftb-sticky-thumb-label {
    display: none;
  }
}

/* ==========================================================================
   Upload Zone Success State (08-07)
   ========================================================================== */
.ftb-upload-zone--success {
  border-color: var(--ftb-success, #16a34a);
  background: color-mix(in srgb, var(--ftb-success) 5%, transparent);
}

.ftb-upload-zone--success .ftb-upload-zone-icon {
  background: linear-gradient(135deg, var(--ftb-success), #059669);
}

/* ==========================================================================
   Circular Swatch Aliases (08-07)
   Applied alongside existing bw-color-swatch classes for BEM consistency.
   ========================================================================== */
.ftb-swatch--circle {
  border-radius: 50%;
}

.ftb-swatch--selected {
  /* Ring handled by bw-color-swatch--selected; no extra shadow needed */
}

/* ==========================================================================
   Typography Scoping (08-07)
   Ensure all headings in the editor use Space Grotesk; body text uses Inter.
   ========================================================================== */
.ftb-editor h1,
.ftb-editor h2,
.ftb-editor h3,
.ftb-editor h4 {
  font-family: var(--ftb-font-heading);
}

.ftb-editor p,
.ftb-editor span,
.ftb-editor label,
.ftb-editor li {
  font-family: var(--ftb-font-body);
}

/* ==========================================================================
   Method Comparison Cards (PROD-12, 08-07)
   Two-column grid on desktop, single column on mobile.
   Printing (DTF) = blue accent, Embroidery = purple accent.
   ========================================================================== */
.ftb-method-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 639px) {
  .ftb-method-card-grid {
    grid-template-columns: 1fr;
  }
}

.ftb-method-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  background: #fff;
}

.ftb-method-card h4 {
  font-family: var(--ftb-font-heading);
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ftb-dark, #111827);
}

.ftb-method-card p,
.ftb-method-card li {
  font-family: var(--ftb-font-body);
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.ftb-method-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.ftb-method-card li {
  margin-bottom: 4px;
}

.ftb-method-card--printing {
  border-left: 3px solid #009afd;
}

.ftb-method-card--embroidery {
  border-left: 3px solid #8b5cf6;
}

/* Compact variant for Print vs Embroidery */
.ftb-section-title--sm {
  font-size: 13px;
  margin-bottom: 8px;
}

.ftb-method-card-grid--compact {
  gap: 10px;
}

.ftb-method-card--sm {
  padding: 10px 12px;
}

.ftb-method-card--sm h4 {
  font-size: 13px;
  margin: 0 0 4px;
}

.ftb-method-card--sm p {
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 4px;
}

.ftb-method-card--sm li {
  font-size: 12px;
  margin-bottom: 2px;
}

.ftb-method-card--sm ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

/* ==========================================================================
   08-07 fix: Send Logo Later — mockup-matching orange bordered box
   ========================================================================== */
.ftb-send-later {
  background: #fff8f0;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  margin-top: 12px;
  font-family: var(--ftb-font-body);
  color: #92400e;
}

/* ==========================================================================
   08-07 fix: Decoration Method Card Buttons (mockup-matching)
   ========================================================================== */
.ftb-methods-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ftb-success, #16a34a) 18%, transparent);
}

.ftb-methods-header .ftb-deco-info-toggle--inline {
  margin-left: auto;
}

/* Unselected sub-step prompt — draws the eye to the required choice */
.ftb-header-prompt {
  color: var(--ftb-primary, #009afd);
  font-weight: 700;
}

/* Attention pulse on the method buttons when they first appear, so the
   auto-selected default doesn't hide the fact that the method is a choice.
   Plays twice then settles (x-show re-triggers it each time the row reveals). */
@keyframes ftb-method-attention {
  0%   { box-shadow: 0 0 0 0 rgba(0, 154, 253, 0); }
  35%  { box-shadow: 0 0 0 4px rgba(0, 154, 253, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(0, 154, 253, 0); }
}

.ftb-methods-section .ftb-methods {
  border-radius: 12px;
  animation: ftb-method-attention 1.1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .ftb-methods-section .ftb-methods {
    animation: none;
  }
}

.ftb-methods-title {
  font-family: var(--ftb-font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin: 0 0 8px;
}

.ftb-method-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  padding: 10px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ftb-font-heading);
}

.ftb-method-card-btn--active {
  background: linear-gradient(135deg, #009afd, #0070c0);
  border-color: #009afd;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 154, 253, 0.3);
}

.ftb-method-card-btn:not(.ftb-method-card-btn--active):hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.ftb-method-card-name {
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   08-07 fix: Sub-location section with "Placement:" header
   ========================================================================== */
.ftb-sublocations-section {
  margin-top: 12px;
  background: color-mix(in srgb, var(--ftb-success, #16a34a) 5%, transparent);
  border-radius: 10px;
  padding: 12px;
}

.ftb-subloc-header {
  font-family: var(--ftb-font-heading);
  font-size: 13px;
  color: #374151;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ftb-subloc-header-check {
  color: var(--ftb-success, #16a34a);
  font-weight: 700;
  font-size: 14px;
}

.ftb-subloc-btn--active {
  background: var(--ftb-success, #16a34a);
  border-color: var(--ftb-success, #16a34a);
  color: #fff;
}

/* ==========================================================================
   08-07 fix: Quick Clear button for size grid
   ========================================================================== */
.ftb-quick-clear-btn {
  padding: 4px 10px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--ftb-font-heading);
  white-space: nowrap;
}

.ftb-quick-clear-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

/* ==========================================================================
   08-08 Fix 1: Compact logo preview after upload
   Mobile: 120px max-height, Desktop: 160px max-height
   ========================================================================== */
.ftb-logo-preview-compact {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.ftb-bg-status-label {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  margin-top: 4px;
}

@media (min-width: 1024px) {
  .ftb-logo-preview-compact {
    max-height: 160px;
  }
}

/* ==========================================================================
   08-08 Fix 2: Sticky hero thumbnail on mobile
   Floats top-right on mobile after logo upload, hidden on desktop
   ========================================================================== */
/* Vertical anchor: sit just under the sticky Fortee header in every scroll
   state. --ftb-header-bottom is published by the tracker in
   main-single-builder.liquid (Ugo, quick 260730-kr2), which publishes the
   header's live bottom edge. That script had no consumer — this is it. The
   12px fallback is the previous fixed value, so a page without the header
   element behaves exactly as before. */
.ftb-mobile-sticky-hero {
  position: fixed;
  top: calc(var(--ftb-header-bottom, 4px) + 8px);
  right: 8px;
  z-index: 50;
  width: 55vw;
  max-width: 240px;
}

.ftb-mobile-sticky-hero-inner {
  position: relative;
  width: 100%;
  border: 2px solid var(--ftb-primary, #009afd);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.ftb-mobile-sticky-hero-img {
  width: 100%;
  display: block;
}

.ftb-mobile-sticky-hero-overlay {
  position: absolute;
  pointer-events: none;
}

.ftb-mobile-sticky-hero-label {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  font-family: var(--ftb-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Expand icon (bottom-right of mini thumb) */
.ftb-mobile-sticky-hero-expand {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Backdrop overlay when expanded */
.ftb-mobile-sticky-hero-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: -1;
}

/* Close button (top-right when expanded) */
.ftb-mobile-sticky-hero-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  min-width: unset;
  min-height: unset;
  padding: 0;
}

/* Expanded state — centered fullscreen-ish */
.ftb-mobile-sticky-hero--expanded {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 92vw;
  max-width: 420px;
}

.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-inner {
  cursor: default;
}

.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-img {
  width: 100%;
  display: block;
}

.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-label {
  font-size: 12px;
  padding: 4px 12px;
  bottom: 8px;
}

/* On desktop, hide sticky hero — the left-column gallery serves this purpose */
@media (min-width: 1024px) {
  .ftb-mobile-sticky-hero {
    display: none !important;
  }
}
/* When in responsive/device mode, override if container is narrow */
@media (max-width: 1023px) {
  .ftb-mobile-sticky-hero {
    display: block;
  }
}

/* Mobile: one preview at a time.
   Once artwork exists the corner card is up and it overlaps the top of the big
   hero, so the two read as a rendering fault rather than two previews. The class
   is bound to hasArtwork — the corner card's own x-show predicate — so this rule
   is live for exactly as long as that card is.

   NOT display:none, and this is the whole subtlety. _activeGeoContext measures
   .ftb-hero-img with getBoundingClientRect + naturalWidth, and a display:none
   image measures zero, so the context goes null and STAYS null: the logo size
   slider loses its ceiling (logoWidthMaxIn), restoreStandardPlacement no-ops,
   and — the real damage — the cart-time compositor drops _opts.logoRect, so the
   baked mockup silently ignores the customer's size and position. Every one of
   those reads is a layout read, and visibility:hidden keeps layout intact.

   position:absolute is what collapses the space the brief asks for: out of the
   flex column, so Step 1 rises to the top of the builder with no hole left
   behind. width:100% reproduces the stretch width the flex item had (the section
   sets vertical padding only), so the painted rect the geometry depends on is
   the same rect it was measuring before. */
@media (max-width: 1023px) {
  .ftb-editor--corner-preview > .ftb-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Hide the corner card for the whole life of the prep overlay.
   .ftb-prep-active is toggled on <html> by the _prepOpen watcher in
   assets/single-builder.js — on the root because the card is teleported to
   <body>, out of the component's subtree.

   visibility, not display, for the same reason as the .ftb-image rule below:
   syncStickyHeroW() sizes the whole sticky overlay from this subtree's
   offsetWidth, and a display:none element measures 0 — which is precisely the
   zero-width failure that function's own comment exists to describe. Because
   the card is position:fixed, hiding it this way reflows nothing, so the page
   under the overlay stays exactly where _scrollToLogoSectionOnMobile put it. */
.ftb-prep-active .ftb-mobile-sticky-hero {
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================================
   Phase 37 — logo size & position overlay chrome (SPEC §E)

   Idle vs active treatment for the measured logo box, its resize handle, the
   centre-snap guide and the live measurement chip.

   Deliberately absent: any alarm state. All logos are vectorized free by the
   art team, so there is no such thing as "too small to print" here and the
   overlay must never suggest otherwise (CONTEXT DO NOT BUILD). If you are
   adding a colour to this block that is not blue, ink, white or the ForTee
   hairline, stop.
   ========================================================================== */

/* NOTE: the .ftb-logo-box.is-measured rules live further down, in one place.
   An earlier duplicate here was overridden and only caused confusion. */

/* Resize handle — 14px visual square in a 40x40 transparent hit area, pinned
   to the bottom-right corner of the measured box. */
.ftb-logo-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Mostly OUTSIDE the box.
     A 40px target centred on the corner covered almost the whole box once the
     logo got small, so every pointerdown hit the handle and the logo resized
     when the customer meant to drag it. Now only ~10px of the target overlaps
     the box; the rest hangs outside, where there is nothing to steal from. */
  width: 34px;
  height: 34px;
  margin: 0 -24px -24px 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 3;
}

/* The handle moved out of .ftb-logo-box and into .ftb-logo-chrome, which does
   not clip. The old `.ftb-logo-box.is-measured .ftb-logo-handle` selector can
   no longer match — the chrome layer's own x-show gates visibility now. */
.ftb-logo-chrome .ftb-logo-handle {
  display: flex;
  pointer-events: auto;
}

.ftb-logo-handle::after {
  content: '';
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border: 1px solid #101317;
}

.ftb-logo-chrome.is-resizing .ftb-logo-handle::after {
  background: #009AFF;
}

/* MOVE control — top-left, diagonally opposite the resize corner so the two
   can never be confused or hit by the same thumb. Same visual language as the
   resize handle: white fill, dark hairline, no colour until it is active. */
.ftb-logo-move {
  position: absolute;
  left: 0;
  top: 0;
  /* Mirrors the resize handle's offset so both hang the same distance outside
     the measured box, keeping the artwork itself unobstructed. */
  width: 34px;
  height: 34px;
  margin: -24px 0 0 -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  z-index: 3;
}

.ftb-logo-chrome.is-dragging .ftb-logo-move {
  cursor: grabbing;
}

.ftb-logo-move svg {
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border: 1px solid #101317;
  border-radius: 50%;
  padding: 2px;
  color: #101317;
  box-sizing: content-box;
}

.ftb-logo-chrome.is-dragging .ftb-logo-move svg {
  background: #009AFF;
  color: #FFFFFF;
}

.ftb-logo-move:focus-visible {
  outline: none;
}

.ftb-logo-move:focus-visible svg {
  box-shadow: 0 0 0 2px #009AFF;
}

.ftb-logo-handle:focus-visible {
  outline: none;
}

.ftb-logo-handle:focus-visible::after {
  box-shadow: 0 0 0 2px #009AFF;
  outline-offset: 2px;
}

/* Centre-snap guide — a hairline at the zone's horizontal centre. The element
   is zero-width; the dashes come from the left border. */
.ftb-logo-snap-guide {
  border-left: 1px dashed #009AFF;
}

/* Live measurement chip — while resizing only. Space Mono per the ForTee type
   scale; 12px is the floor. */
.ftb-logo-measure-chip {
  transform: translate(-100%, -100%);
  background: #009AFF;
  color: #000000;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

/* The zone outline picks up the active treatment too, so the print area and
   the logo box read as one system while a gesture is in flight. */

/* The artwork must FILL the measured box exactly.
   The legacy overlay was a flex container that centred a naturally-sized image
   capped by max-width/max-height. The measured box is not a flex container —
   it IS the logo's exact bounds — so the image needs explicit dimensions or it
   collapses and the box renders empty. Box aspect equals artwork aspect, so
   contain here is an exact fill with no letterboxing. */
.ftb-logo-box.is-measured .ftb-logo-overlay-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* Print-area outline, SPEC §E.
   The legacy rule was rgba(59,130,246,.35) — effectively invisible on a dark
   garment. The spec calls for a white hairline at rest so the customer can see
   the boundary they must stay inside, turning blue while a gesture is active. */


/* Zone label — "Print area W × H", Space Mono 12px, just above the boundary. */
.ftb-zone-label {
  position: absolute;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  color: #8A929C;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-100%);
  padding-bottom: 4px;
  z-index: 3;
}

/* Print-area boundary — ForTee blue, always.
   The SPEC drew a white hairline at rest, but on real dark garments it reads as
   noise rather than a boundary. Ugo's call on 2026-07-28: blue at both states,
   heavier while a gesture is active. State classes are bound directly on the
   element — no :has() on an ancestor, which was silently failing. */
.ftb-zone-indicator.is-measured {
  border: 1px dashed rgba(0, 154, 255, 0.55);
  border-radius: 0;
}

.ftb-zone-indicator.is-active {
  border: 1px dashed #009AFF;
}

/* TWO boxes, always both visible, deliberately different:
     - the PRINT AREA is a wide dashed blue rectangle (drawn inline in JS)
     - the LOGO is a tight SOLID WHITE outline
   Making the logo's outline transparent at rest was a mistake: it left exactly
   one visible rectangle sitting just outside the artwork, which reads as a box
   hugging the logo rather than as a limit the logo sits inside. */
/* NO permanent outline on the artwork (Ugo's spec 2026-07-29 rule 3).
   The white hairline above was intended to read as a selection but, being
   always on, read as a box drawn around the logo — competing with the print
   area, which is the box that actually means something. The logo now renders
   clean; a thin blue edge appears only DURING a gesture, as live feedback. */
.ftb-logo-box.is-measured.is-dragging,
.ftb-logo-box.is-measured.is-resizing {
  border: 1px solid #009AFF;
}

.ftb-zone-label {
  color: #009AFF;
}

/* The print-area boundary is the LOUD element — it is the constraint the
   customer needs to understand. Dashes stay clearly visible at rest and the
   whole area gets a faint blue wash so the printable region reads as a region,
   not just four lines. */
.ftb-zone-indicator.is-measured {
  border: 2px dashed rgba(0, 154, 255, 0.85);
  background: rgba(0, 154, 255, 0.07);
}

.ftb-zone-indicator.is-active {
  border-color: #009AFF;
  background: rgba(0, 154, 255, 0.12);
}

/* Measurement chip — anchored below-right of the box, never over the artwork. */
.ftb-logo-measure-chip {
  /* Parked under the print-area boundary — no transform, no chasing the logo. */
  transform: none;
}

/* The zone label sits above the boundary; keep it off the garment's busy area. */
.ftb-zone-label {
  font-size: 11px;
  opacity: 0.9;
}

/* ==========================================================================
   PRINT AREA BOX — the maximum printable region.

   Border and fill live HERE, not in an inline style. Emitting them inline kept
   failing silently on staging; the element rendered with position and size but
   no visible edge. The JS getter now supplies geometry only.
   ========================================================================== */
/* BORDER, not outline.
   This was briefly an outline, on the theory that a border drawn inside the box
   would hide under a logo fitted to 100% of the print area. It would not — see
   the stroke-outside rule below, which puts the ink beyond the content edge the
   artwork is clamped to. Meanwhile an outline paints outside the element
   box, and .ftb-mobile-sticky-hero-view clips with overflow:hidden while
   collapsed — so the outline was clipped away and the boundary disappeared from
   the corner thumbnail entirely, while still rendering on the desktop hero and
   the expanded card, which do not clip (Ugo, 2026-07-30).
   A border is inside the box, so nothing can clip it. */
/* THE STROKE SITS OUTSIDE THE BOUNDARY, not inside it. With box-sizing:border-box
   the 2px dashed stroke was painted in the outermost 2px OF the print area, so a
   logo filling the area exactly covered the stroke and read as sitting ~2px
   outside the dashes on all four sides (Ugo, 2026-07-30). The getters emit the
   exact boundary as width/height, content-box keeps that as the content edge, and
   margin:-2px pulls the border box back so the stroke lands just outside it.
   This is the ONLY element that draws the print-area rectangle. */
.ftb-print-area-box {
  position: absolute;
  display: block;
  border: 2px dashed #009AFF;
  background: rgba(0, 154, 255, 0.08);
  box-sizing: content-box;
  margin: -2px;
  border-radius: 0;
  pointer-events: none;
  /* BELOW THE ARTWORK (which is z-index:2, emitted by getLogoBoxStyle and its
     three siblings). This was z-index:3 — the box, translucent blue fill and
     all, painted ON TOP of the customer's logo, so every uploaded mark was
     seen through a wash that doubles to 0.16 alpha the moment a drag or resize
     starts (.is-active below). It read as the logo not rendering at all, which
     is how Ugo reported it on 2026-08-02.
     Nothing is lost by dropping underneath: the 2px stroke sits OUTSIDE this
     element's content box (box-sizing:content-box + margin:-2px above), and the
     artwork is clamped to the print area's exact rect, so the logo can never
     reach the dashes and cover them. The fill now reads as the REMAINING print
     area around the mark, which is what it should have meant all along. */
  z-index: 1;
}

.ftb-print-area-box.is-active {
  border-color: #009AFF;
  background: rgba(0, 154, 255, 0.16);
}

/* Corner ticks so the maximum reads as a frame, not a shaded panel. */
.ftb-print-area-box::before,
.ftb-print-area-box::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #009AFF;
}

.ftb-print-area-box::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.ftb-print-area-box::after {
  right: -2px;
  bottom: -2px;
  border-left: none;
  border-top: none;
}

/* Empty-state instruction, shown while a placement is chosen but no artwork has
   landed on this view yet. A real child element, not a pseudo-element: ::before
   and ::after above are already spent on the corner ticks.

   inset:0 + flex centring rather than a translate(-50%,-50%), because the box is
   as narrow as ~50px on a left chest. Centring on the full box lets the two words
   wrap to two lines and stay inside the stroke instead of spilling past it, and
   overflow:hidden keeps a zone too small for even that from leaking text onto the
   garment. x-show writes display:none inline and clears it on show, so the flex
   here is what the element falls back to — no :style is involved. */
.ftb-print-area-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  color: #009AFF;
  overflow: hidden;
  pointer-events: none;
}

/* Collapsed corner thumbnail: same treatment as .ftb-zone-label--quiet — the text
   goes transparent rather than the element leaving the layout, so the box keeps
   its exact geometry. */
.ftb-print-area-empty--quiet {
  color: transparent;
}

/* ==========================================================================
   MOBILE MOCKUP EDITOR (2026-07-29)

   Everything below is deliberately at the END of the file. Several rules here
   override declarations that appear earlier (.ftb-logo-handle at ~3183,
   .ftb-mobile-sticky-hero-* at ~2742). A @media block adds no specificity, so
   an override placed in the mobile section higher up would lose to the base
   rule on source order alone — the exact trap that left the desktop gallery
   overrides dead until 2026-07-29. Keep additions here, not up there.
   ========================================================================== */

/* Control layer. Geometry is inline (getLogoChromeStyle); this only guarantees
   the layer never eats pointer events between its two controls. */
.ftb-logo-chrome {
  pointer-events: none;
}

/* --- Touch targets ------------------------------------------------------ */
/* 34px is a mouse-sized target. Below the desktop breakpoint both controls go
   to 44px — the iOS minimum — and their negative margins grow to match, so the
   larger target still hangs outside the artwork instead of covering it. */
@media (max-width: 1023px) {
  .ftb-logo-handle {
    width: 44px;
    height: 44px;
    margin: 0 -30px -30px 0;
  }

  .ftb-logo-move {
    width: 44px;
    height: 44px;
    margin: -30px 0 0 -30px;
  }

  .ftb-logo-handle::after {
    width: 18px;
    height: 18px;
  }

  .ftb-logo-move svg {
    width: 18px;
    height: 18px;
  }

  /* The chip and the print-area label are the two readouts the customer needs
     at arm's length; 11px was set for a desktop hero. */
  .ftb-logo-measure-chip {
    font-size: 13px;
    padding: 5px 9px;
  }

  .ftb-zone-label {
    font-size: 12px;
  }
}

/* --- Size chip is now permanent ----------------------------------------- */
/* It used to appear only mid-resize, so it never needed to survive a busy
   garment behind it. Now that it is always on, it needs its own separation. */
.ftb-logo-measure-chip {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.ftb-logo-measure-chip.is-active {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* --- Expanded mobile preview -------------------------------------------- */
/* The inner wrapper clips (overflow:hidden) to keep the image inside its
   rounded border. That also clipped every piece of chrome positioned outside
   the garment: the print-area label sits ABOVE the boundary, the size chip
   BELOW it, and both handles hang outside the logo box. Expanded, the clip is
   released and the radius moves onto the image itself so the corners still
   look right. Collapsed it keeps clipping — nothing should escape a 40vw
   thumbnail floating over the page. */
.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-inner {
  overflow: visible;
}

.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-img {
  border-radius: 8px;
}

/* The close button has to clear the chrome that now paints outside the image. */
.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-close {
  z-index: 6;
}

/* --- Collapsed corner thumbnail ----------------------------------------- */
/* It is a status indicator, not the editor; tapping it opens the editor.
   Sized between the original 55vw/240px (which covered the upload panel it
   floats over) and the 40vw/168px that replaced it — 168px was chosen to make
   room for a measurement line and a tap sheet below the image, and both of
   those are gone (Ugo, 2026-07-30: the thumbnail carries garment + logo and
   nothing else, which is what SPEC §E1 asked for in the first place). With the
   card back to just the image, it can afford the width. */
.ftb-mobile-sticky-hero {
  width: 48vw;
  max-width: 200px;
}

/* Slightly narrower than the old 92vw/420px so the chrome that now escapes the
   image (labels above, chip below, handles outside) is not flush against the
   viewport edge. Must stay AFTER the collapsed width above — same specificity,
   so source order is what makes --expanded win. */
.ftb-mobile-sticky-hero--expanded {
  width: 88vw;
  max-width: 400px;
}

/* PRINT-AREA CAPTION only. The rectangle is drawn by .ftb-print-area-box and
   by nothing else — the ::after that used to draw a second copy of it here was
   deleted on 2026-08-02. The two were positioned from different origins, so in
   the empty state (placement chosen, no artwork) they painted as two misaligned
   dashed rectangles. Do not reintroduce a drawing here. */
.ftb-zone-label {
  position: absolute;
  z-index: 3;
}

/* Text hidden on the collapsed corner thumbnail, where "Print area W x H" is
   illegible at ~40vw and reads as clutter. Transparent text rather than
   display:none, so this stays a purely cosmetic class and x-show remains the
   single writer of the element's visibility. */
.ftb-zone-label--quiet {
  color: transparent;
}

/* ==========================================================================
   Phase 37 — logo size control block (SPEC §D, all six rows)

   Lives in the existing "Decoration locations" card, below the placement
   picker, separated from it by the hairline on .ftb-logo-size.

   The native range input this block used to carry is gone, and so are its
   ::-webkit-slider-* / ::-moz-range-* pseudo-element rules: SPEC §D calls for a
   fully custom control ("native range can't be styled inline"), so those rules
   would have been dead styling attached to an element that no longer exists.

   Type stacks match the three families SPEC §Design tokens allows — Archivo for
   display and buttons, Space Mono for labels and measurements, the inherited
   body face (Inter) for the helper line. 12px is the floor throughout.
   ========================================================================== */
.ftb-logo-size {
  border-top: 1px solid #DDE3E9;
  padding: 13px 14px 15px;
  border-radius: 4px;
}


/* On mobile this wrapper becomes the nested panel; on desktop it is only the
   column that carries the row gap. */
.ftb-logo-size-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Row 1: label + unit toggle ----------------------------------------- */
.ftb-logo-size-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ftb-logo-size-label {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5B6470;
}

.ftb-logo-unit {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid #DDE3E9;
  border-radius: 999px;
  overflow: hidden;
}

.ftb-logo-unit-btn {
  min-height: 44px;
  padding: 0 16px;
  margin: 0;
  border: none;
  background: #FFFFFF;
  color: #5B6470;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.ftb-logo-unit-btn.is-active {
  background: #E8F4FF;
  color: #000000;
  font-weight: 700;
}

/* --- Row 2: the hero readout -------------------------------------------- */
.ftb-logo-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* The largest thing in the block. Sized in character units so the field is as
   wide as the number it holds and no wider — a percentage width would leave the
   multiplication mark floating away from the digits. */
.ftb-logo-readout-w {
  width: 3.6ch;
  min-width: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 2px dashed #DDE3E9;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000000;
}

.ftb-logo-readout-w:focus {
  outline: none;
  border-bottom: 2px solid #009AFF;
}

.ftb-logo-readout-x {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  color: #8A929C;
}

.ftb-logo-readout-h {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #5B6470;
}

.ftb-logo-readout-unit {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5B6470;
}

/* --- Row 3: status chips ------------------------------------------------ */
.ftb-logo-size-chips {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The centred state carries a word, never colour alone (SPEC §Accessibility). */
.ftb-logo-chip {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  background: #E8F4FF;
  border: 1px solid #009AFF;
  color: #000000;
  padding: 3px 9px;
  border-radius: 999px;
}

/* The readout-row copy of the chip. Desktop shows the one in the chips row
   instead; the markup renders both and the breakpoint chooses. */
.ftb-logo-chip--inline {
  display: none;
}

.ftb-logo-ratio {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #8A929C;
}

/* --- Row 4: the slider -------------------------------------------------- */
.ftb-logo-slider {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The hit row IS the slider element — role, tab index, ARIA and both handlers
   live on it, and onSliderPointerDown measures its rect. touch-action:none is
   what makes a touch drag adjust the width instead of scrolling the page. */
.ftb-logo-slider-hit {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.ftb-logo-slider-track {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #DDE3E9;
}

.ftb-logo-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: #009AFF;
}

/* Offset by half its width so the thumb's centre, not its left edge, tracks
   the value. pointer-events:none keeps every press on the hit row, which is the
   element the value fraction is measured against. */
.ftb-logo-slider-thumb {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  box-sizing: border-box;
  border: 2px solid #000000;
  border-radius: 50%;
  background: #FFFFFF;
  pointer-events: none;
}

.ftb-logo-slider-hit:active .ftb-logo-slider-thumb {
  background: #009AFF;
}

/* Max only — SPEC §D is explicit that there is no min label and no tick. */
.ftb-logo-slider-max {
  align-self: flex-end;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #8A929C;
}

/* --- Row 5: the one restore control ------------------------------------- */
.ftb-logo-standard {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #8A929C;
  border-radius: 4px;
  background: transparent;
  color: #000000;
  cursor: pointer;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ftb-logo-standard:hover {
  background: #F1F4F7;
}

/* The at-standard indicator is a glyph, so the state survives being read
   aloud or seen without colour. */
.ftb-logo-standard-check {
  color: #16A34A;
  font-size: 15px;
  line-height: 1;
}

/* --- Row 6: the helper line --------------------------------------------- */
.ftb-logo-size-help {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #5B6470;
}

.ftb-logo-size-help--mobile {
  display: none;
}

/* --- Focus ---------------------------------------------------------------
   The contract's ring, on every focusable element in the block. The readout
   also swaps its dashed underline for a solid blue one on plain :focus, so the
   hero reads as active whether it was reached by pointer or by keyboard. */
.ftb-logo-unit-btn:focus-visible,
.ftb-logo-slider-hit:focus-visible,
.ftb-logo-standard:focus-visible,
.ftb-logo-readout-w:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #009AFF;
}

/* --- Mobile -------------------------------------------------------------
   1023px, matching the breakpoint at which .ftb-editor stops being a two-column
   layout and the pinned preview appears — the same point at which the mobile
   helper string ("tap the preview and expand") becomes true. */
@media (max-width: 1023px) {
  .ftb-logo-size {
    padding: 12px;
  }

  /* The nested panel treatment, matching the builder's existing nested
     placement panel. */
  .ftb-logo-size-panel {
    background: #F1F4F7;
    border: 1px solid #DDE3E9;
    border-radius: 4px;
    padding: 12px;
    gap: 10px;
  }

  .ftb-logo-unit-btn {
    padding: 0 14px;
  }

  .ftb-logo-readout-w {
    font-size: 38px;
    /* Denser hairline: #DDE3E9 all but disappears against the tinted panel.
       SPEC §D names this value for exactly this case. */
    border-bottom-color: #C6D0DA;
  }

  .ftb-logo-readout-x {
    font-size: 26px;
  }

  .ftb-logo-readout-h {
    font-size: 38px;
  }

  .ftb-logo-readout-unit {
    font-size: 14px;
  }

  /* "Ratio locked" folds into the helper line here, and the centred chip moves
     inline to the right of the readout row. */
  .ftb-logo-size-chips {
    display: none;
  }

  .ftb-logo-chip--inline {
    display: inline-block;
    align-self: center;
    margin-left: auto;
  }

  .ftb-logo-standard {
    align-self: stretch;
    width: 100%;
  }

  .ftb-logo-size-help--desktop {
    display: none;
  }

  .ftb-logo-size-help--mobile {
    display: block;
    font-size: 13px;
  }
}

/* ==========================================================================
   Phase 37 — the pinned mobile preview (SPEC §B)

   Deliberately last in the file. Every rule here overrides a base
   .ftb-mobile-sticky-hero-* declaration at ~2742 or an override in the mobile
   mockup editor section at ~3447, and a @media block adds no specificity — so
   source order is what makes these win. Same reason that section gives.

   SPEC §E rule 1 governs what is NOT here: no bounding box, resize handle,
   move control or snap guide is styled into the pinned card. The dashed
   print-area boundary IS the exception the rule allows (Ugo, 2026-07-30,
   ratified into the SPEC 2026-08-01) — it is what makes the thumbnail
   readable — and it is drawn by .ftb-print-area-box / .ftb-zone-label, not by
   any rule in this block. Rule 2 keeps dragging on the large preview, so
   nothing here invites a gesture either.
   ========================================================================== */

/* The card. Blue border, 4px radius, 5px padding, and the one shadow the
   design system uses. The clip moves off this element onto the inner viewport
   below, so the measurement line and the tap sheet can sit under the image. */
.ftb-mobile-sticky-hero-inner {
  border: 2px solid #009AFF;
  border-radius: 4px;
  padding: 5px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(16, 19, 23, 0.16);
  overflow: visible;
}

/* The inner viewport: its own background, its own radius, its own clip — and
   the positioned ancestor every overlay resolves against, at the image's exact
   origin and width. */
.ftb-mobile-sticky-hero-view {
  position: relative;
  overflow: hidden;
  background: #F1F4F7;
  border-radius: 2px;
}

/* Expanded, the clip is released so the chrome that paints outside the garment
   (the print-area label above it, the size chip below it, the two handles
   outside the logo box) is not cut off. That override used to sit on -inner;
   it follows the clip onto -view. */
.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-view {
  overflow: visible;
}

/* View chip — dark translucent fill, Space Mono, uppercase, white. */
.ftb-mobile-sticky-hero-label {
  bottom: 6px;
  padding: 4px 10px;
  border-radius: 2px;
  background: rgba(16, 19, 23, 0.86);
  color: #FFFFFF;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ftb-mobile-sticky-hero--expanded .ftb-mobile-sticky-hero-label {
  bottom: 10px;
  font-size: 12px;
  padding: 4px 10px;
}

/* Expand affordance — 32px circle, same dark fill. A real button now, so it
   needs the button reset the span never did. */
.ftb-mobile-sticky-hero-expand {
  bottom: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: rgba(16, 19, 23, 0.86);
  z-index: 5;
}







.ftb-mobile-sticky-hero-expand:focus-visible,