/** Shopify CDN: Minification failed

Line 301:13 Unexpected "{"
Line 301:22 Expected ":"
Line 308:13 Unexpected "{"
Line 308:22 Expected ":"
Line 315:13 Unexpected "{"
Line 315:22 Expected ":"
Line 316:13 Unexpected "{"
Line 316:22 Expected ":"
Line 326:13 Unexpected "{"
Line 326:22 Expected ":"
... and 92 more hidden warnings

**/
/* ==============================
   Scale Tool – SAFE CSS ONLY
   - Teal status + warning boxes
   - Darker grid lines
   - Does NOT change your form layout beyond this tool
================================= */

.scale-tool { width: 100%; }

/* Teal boxes (Status + DPI) */
.scale-tool .st-status,
.scale-tool [data-st-status]{
  background: rgba(0, 160, 170, .12) !important;
  border: 1px solid rgba(0, 160, 170, .40) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
}

.scale-tool .st-dpi-warning,
.scale-tool [data-st-dpi-warning]{
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
}

/* Keep your warning color classes (if JS sets them) */
.scale-tool .st-dpi-ok{
  background: rgba(0, 160, 170, .12) !important;
  border: 1px solid rgba(0, 160, 170, .40) !important;
}
.scale-tool .st-dpi-warn{
  background: rgba(255, 180, 0, .14) !important;
  border: 1px solid rgba(255, 180, 0, .45) !important;
}
.scale-tool .st-dpi-bad{
  background: rgba(255, 60, 60, .12) !important;
  border: 1px solid rgba(255, 60, 60, .35) !important;
}

/* Darker grid lines (canvas-drawn grid stays light, so we darken DOM rulers + canvas border) */
.scale-tool .st-canvasWrap{
  border: 1px solid rgba(0,0,0,.25) !important;
  border-radius: 12px;
  overflow: hidden;
}

/* Outside rulers: darker + aligned */
.scale-tool .st-rulerTop,
.scale-tool .st-rulerLeft{
  color: rgba(0,0,0,.70) !important;
  font-weight: 600;
  font-size: 12px;
}

/* Push numbers closer to the grid line (not centered in the box) */
.scale-tool .st-rulerTop span{
  display: flex;
  align-items: flex-end;     /* pushes down toward line */
  justify-content: center;
  padding-bottom: 2px;
}

.scale-tool .st-rulerLeft span{
  display: flex;
  align-items: center;
  justify-content: flex-end; /* pushes right toward line */
  padding-right: 6px;
}

/* Make ruler “line” areas slightly darker with subtle separators */
.scale-tool .st-rulerTop span,
.scale-tool .st-rulerLeft span{
  border-color: rgba(0,0,0,.18) !important;
}

/* If your ruler containers have background, keep it clean */
.scale-tool .st-rulerTop,
.scale-tool .st-rulerLeft{
  background: transparent !important;
}
/* ==============================
   Scale Tool – SAFE CSS ONLY
   - Only styles teal boxes + ruler text + preview border
   - Does NOT touch layout/grid/positioning
================================= */

/* Teal boxes (Status + DPI) — inside the tool only */
[data-scale-tool] .st-status,
[data-scale-tool] [data-st-status]{
  background: rgba(0, 160, 170, .12) !important;
  border: 1px solid rgba(0, 160, 170, .40) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
  color: rgba(0,0,0,.78) !important;
}

[data-scale-tool] .st-dpi-warning,
[data-scale-tool] [data-st-dpi-warning]{
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
}

/* Keep your warning color classes (JS sets them) */
[data-scale-tool] .st-dpi-ok{
  background: rgba(0, 160, 170, .12) !important;
  border: 1px solid rgba(0, 160, 170, .40) !important;
}
[data-scale-tool] .st-dpi-warn{
  background: rgba(255, 180, 0, .14) !important;
  border: 1px solid rgba(255, 180, 0, .45) !important;
}
[data-scale-tool] .st-dpi-bad{
  background: rgba(255, 60, 60, .12) !important;
  border: 1px solid rgba(255, 60, 60, .35) !important;
}

/* Preview border only (does not change layout) */
[data-scale-tool] .st-canvasWrap{
  border: 1px solid rgba(0,0,0,.28) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Outside rulers: darker text only */
[data-scale-tool] .st-rulerTop,
[data-scale-tool] .st-rulerLeft{
  color: rgba(0,0,0,.70) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  background: transparent !important;
}
/* =========================
   SCALE TOOL SAFE OVERRIDES
   ========================= */

/* Force preview to stay reasonable size */
[data-scale-tool] .scale-tool__preview,
[data-scale-tool] .st-previewCard,
[data-scale-tool] .st-canvasWrap{
  max-width: 760px !important;
}

/* Force teal boxes styling (in case CSS broke) */
[data-scale-tool] [data-st-status],
[data-scale-tool] [data-st-dpi-warning]{
  background: rgba(0,160,170,.12) !important;
  border: 1px solid rgba(0,160,170,.4) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  display:block !important;
}
/* =========================================
   SCALE TOOL FINAL OVERRIDES (SCOPED ONLY)
   Fixes:
   - Preview/grid not oversized
   - Top ruler aligns with grid/canvas
   - Status + DPI boxes forced under Scale input
========================================= */

/* 1) Keep preview from stretching wider than the canvas */
[data-scale-tool] .scale-tool__preview{
  max-width: 640px !important;   /* tweak: 600–720 if you want */
  width: 100% !important;
}

/* Make the preview card shrink-to-fit its contents (canvas + rulers) */
[data-scale-tool] .st-previewCard{
  display: inline-block !important;
  max-width: 640px !important;
  width: 100% !important;
}

/* Canvas wrapper controls the true width */
[data-scale-tool] .st-canvasWrap{
  max-width: 640px !important;
  width: 100% !important;
}

/* Canvas scales responsively to wrapper */
[data-scale-tool] .st-canvas{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 2) Force rulers to be EXACTLY the same width as the canvas */
[data-scale-tool] .st-previewRow{
  width: 100% !important;
  max-width: 640px !important;
}

[data-scale-tool] .st-rulerTop{
  width: 100% !important;
  max-width: 640px !important;
}

/* Keep ruler text a bit smaller so it doesn’t look “oversized” */
[data-scale-tool] .st-rulerTop,
[data-scale-tool] .st-rulerLeft{
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0,0,0,.70) !important;
}

/* 3) Teal boxes styling (status + dpi warning) */
[data-scale-tool] [data-st-status],
[data-scale-tool] [data-st-dpi-warning]{
  background: rgba(0,160,170,.12) !important;
  border: 1px solid rgba(0,160,170,.40) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  display: block !important;
}
/* ==========================================
   SCALE TOOL FINAL FIX OVERRIDES (BOTTOM)
   - Forces teal boxes under scale input
   - Forces rulers to align to canvas width
   - Does not touch anything outside [data-scale-tool]
========================================== */

/* Force the scale control area to stack vertically */
[data-scale-tool] .st-control--scaling{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Force repeat input + boxes to be full width and on new lines */
[data-scale-tool] .st-control--scaling [data-st-repeat]{
  display: block !important;
  width: 100% !important;
}

[data-scale-tool] .st-control--scaling [data-st-status],
[data-scale-tool] .st-control--scaling [data-st-dpi-warning]{
  display: block !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;

  /* keep teal look */
  background: rgba(0,160,170,.12) !important;
  border: 1px solid rgba(0,160,170,.40) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
}

/* --- RULER ALIGNMENT --- */

/* These are the real classes in YOUR liquid: st-rulerTop / st-rulerLeft / st-previewRow / st-canvasWrap */
[data-scale-tool] .st-rulerTop{
  /* JS will set exact px width; this prevents stretching */
  justify-self: start !important;
  align-self: start !important;
  margin-left: 0 !important;
}

/* Keep ruler numbers sitting on grid lines (not centered) */
[data-scale-tool] .st-rulerTop span{
  justify-self: start !important;
  transform: translateX(-50%) !important;
  line-height: 1 !important;
  padding-bottom: 4px !important;
}
[data-scale-tool] .st-rulerTop span:first-child{
  transform: translateX(0%) !important;
}

/* Left ruler */
[data-scale-tool] .st-rulerLeft span{
  align-self: start !important;
  transform: translateY(-50%) !important;
  padding-right: 6px !important;
  line-height: 1 !important;
}
[data-scale-tool] .st-rulerLeft span:first-child{
  transform: translateY(0%) !important;
}
/* ===== FINAL SAFE OVERRIDES (ONLY THIS TOOL) ===== */
#scale-tool-{{ section.id }} .st-control--scaling{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Force the teal boxes to ALWAYS sit directly under the scale input */
#scale-tool-{{ section.id }} .st-after-scale{
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
}

/* Keep teal look (status + dpi warning) */
#scale-tool-{{ section.id }} .st-status,
#scale-tool-{{ section.id }} .st-dpi-warning{
  border-radius: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(15,111,122,.25) !important;
  background: rgba(15,111,122,.12) !important;
  color: rgba(0,0,0,.78) !important;
  margin-top: 0 !important; /* spacing handled by .st-after-scale */
}

/* Preview ruler alignment (numbers sit on the grid lines) */
#scale-tool-{{ section.id }} .st-previewRow{
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  gap: 0 !important;
}

#scale-tool-{{ section.id }} .st-rulerTop{
  margin-left: 28px !important; /* match left ruler width */
  padding-bottom: 4px !important;
}

#scale-tool-{{ section.id }} .st-rulerTop span{
  justify-self: start !important;
  transform: translateX(-50%) !important;
  line-height: 1 !important;
}

#scale-tool-{{ section.id }} .st-rulerTop span:first-child{
  transform: translateX(0%) !important;
}

#scale-tool-{{ section.id }} .st-rulerLeft{
  width: 28px !important;
  padding-right: 6px !important;
}

#scale-tool-{{ section.id }} .st-rulerLeft span{
  align-self: start !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
}

#scale-tool-{{ section.id }} .st-rulerLeft span:first-child{
  transform: translateY(0%) !important;
}
/* ===== FINAL “DON’T BREAK ANYTHING” OVERRIDES ===== */
/* Scope to this section only */
#scale-tool-{{ section.id }} .st-control--scaling{
  display: block !important;            /* prevent weird flex/grid inheritance */
  width: 100% !important;
}

/* FORCE teal boxes to behave like normal blocks under the scale input */
#scale-tool-{{ section.id }} .st-status,
#scale-tool-{{ section.id }} .st-dpi-warning{
  position: static !important;          /* kills absolute positioning */
  float: none !important;               /* kills float layout */
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 0 !important;          /* space under hint */
  box-sizing: border-box !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(15,111,122,.25) !important;
  background: rgba(15,111,122,.12) !important;
  color: rgba(0,0,0,.75) !important;
}

/* Keep the warning color states if JS adds them */
#scale-tool-{{ section.id }} .st-dpi-warning.st-dpi-ok{
  border-color: rgba(15,111,122,.35) !important;
  background: rgba(15,111,122,.12) !important;
}
#scale-tool-{{ section.id }} .st-dpi-warning.st-dpi-warn{
  border-color: rgba(180,120,0,.35) !important;
  background: rgba(180,120,0,.10) !important;
}
#scale-tool-{{ section.id }} .st-dpi-warning.st-dpi-bad{
  border-color: rgba(180,0,0,.35) !important;
  background: rgba(180,0,0,.10) !important;
}

/* ===== RULER ALIGNMENT FIX (numbers line up with grid) ===== */
/* Make preview a single column stack: top ruler then row with left ruler + canvas */
#scale-tool-{{ section.id }} .scale-tool__preview{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Top ruler must be aligned to canvas start (after left ruler width) */
#scale-tool-{{ section.id }} .st-rulerTop{
  width: 100% !important;
  padding-left: 28px !important;        /* match left ruler column */
  box-sizing: border-box !important;
  margin: 0 0 6px 0 !important;
}

/* Two-column row: left ruler + canvas */
#scale-tool-{{ section.id }} .st-previewRow{
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Left ruler fixed width */
#scale-tool-{{ section.id }} .st-rulerLeft{
  width: 28px !important;
}

/* Make labels sit ON the grid lines */
#scale-tool-{{ section.id }} .st-rulerTop span{
  justify-self: start !important;
  transform: translateX(-50%) !important;
  line-height: 1 !important;
  padding-bottom: 2px !important;
}
#scale-tool-{{ section.id }} .st-rulerTop span:first-child{
  transform: translateX(0%) !important;
}

#scale-tool-{{ section.id }} .st-rulerLeft span{
  align-self: start !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  padding-right: 6px !important;
}
#scale-tool-{{ section.id }} .st-rulerLeft span:first-child{
  transform: translateY(0%) !important;
}
/* ===== SCALE TOOL OVERRIDES (ONLY THIS SECTION) ===== */
#scale-tool-{{ section.id }} .scale-tool__grid{
  /* force single column layout so "left boxes" drop below preview */
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* put preview first, controls second (no Liquid changes needed) */
#scale-tool-{{ section.id }} .scale-tool__preview{ order: 1 !important; }
#scale-tool-{{ section.id }} .scale-tool__controls{ order: 2 !important; }

/* keep preview scale looking like your "good" screenshot (centered, same feel) */
#scale-tool-{{ section.id }} .scale-tool__preview{
  max-width: 760px !important;   /* keeps it from going huge */
  width: 100% !important;
  margin: 0 auto !important;     /* centers preview */
}

/* controls below preview, same width as preview */
#scale-tool-{{ section.id }} .scale-tool__controls{
  max-width: 760px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* IMPORTANT: force the scaling control to stack vertically so teal boxes can’t drift left */
#scale-tool-{{ section.id }} .st-control--scaling{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* make sure these always sit full-width directly under the scale input */
#scale-tool-{{ section.id }} .st-control--scaling .st-status,
#scale-tool-{{ section.id }} .st-control--scaling .st-dpi-warning{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (optional but safe) tighten the rulers/preview spacing a touch when centered */
#scale-tool-{{ section.id }} .st-previewRow{
  justify-content: center !important;
}
/* === MOVE ADD TO CART UNDER SCALE TOOL BOXES === */

/* Make product form stack below scale tool */
#scale-tool-{{ section.id }} {
  display: block !important;
}

/* Force Add to Cart to appear after scale tool */
#scale-tool-{{ section.id }} ~ form,
#scale-tool-{{ section.id }} ~ .product-form,
#scale-tool-{{ section.id }} ~ .product-form__buttons {
  margin-top: 16px !important;
}

/* Move Add to Cart button visually under scale */
#scale-tool-{{ section.id }} .st-control--scaling {
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure status boxes stay above Add to Cart */
#scale-tool-{{ section.id }} .st-status,
#scale-tool-{{ section.id }} .st-dpi-warning {
  order: 1 !important;
}

/* Pull Add to Cart button into scale column */
form[action*="/cart/add"] button[type="submit"],
.product-form__submit,
button[name="add"] {
  display: block !important;
  margin-top: 14px !important;
  width: 100% !important;
}
/* ===== SCALE TOOL: SAFE COMPACT + KILL EMPTY TEAL BOX (NO GRID CHANGES) ===== */

/* 1) Make controls feel less "big" WITHOUT changing layout columns */
#scale-tool-{{ section.id }} .st-label{
  margin-bottom: 4px !important;
  font-size: 11px !important;
}

#scale-tool-{{ section.id }} .st-row{
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#scale-tool-{{ section.id }} .st-input{
  padding: 8px 10px !important;   /* slightly tighter */
  border-radius: 10px !important;
}

#scale-tool-{{ section.id }} .st-hint{
  margin-top: 4px !important;
  font-size: 11px !important;
}

/* 2) Keep the upload area from stretching weirdly */
#scale-tool-{{ section.id }} [data-st-file]{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 3) ✅ Remove the extra teal “half box” under No file loaded.
      Reason: :empty fails if whitespace exists.
      Your JS only adds .st-dpi-ok/.st-dpi-warn/.st-dpi-bad when it has content.
      So hide the warning box unless one of those classes is present. */
#scale-tool-{{ section.id }} .st-dpi-warning:not(.st-dpi-ok):not(.st-dpi-warn):not(.st-dpi-bad){
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
/* ===== SCALE TOOL: FORCE ALL CONTROL ROWS TO SINGLE COLUMN ===== */
#scale-tool-{{ section.id }} .scale-tool__controls .st-row{
  grid-template-columns: 1fr !important;
}
/* ===== SCALE TOOL: HIDE BUY NOW BUTTON ===== */
button[name="buy_now"],
.shopify-payment-button,
.shopify-payment-button__button {
  display: none !important;
}
/* ===== SCALE TOOL: MOVE ADD TO CART UNDER SCALE BOXES ===== */
#scale-tool-{{ section.id }} {
  position: relative;
}

#scale-tool-{{ section.id }} ~ form[action*="/cart/add"] {
  display: block !important;
  margin-top: 12px !important;
}
.st-add-to-cart {
  width: 100%;
  background: #000 !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 16px;
  border: none;
}

.st-add-to-cart:hover {
  background: #222 !important;
}