.spp-builder{max-width:980px;margin:0 auto;padding:24px 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.spp-step{background:#fff;border:1px solid #e6e6e6;border-radius:14px;padding:20px;margin:18px 0;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.spp-step h2{margin:0 0 8px;font-size:34px;letter-spacing:-.02em}
.spp-sub{margin:0 0 14px;color:#444;font-size:16px}
.spp-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.spp-btn{border-radius:10px;border:1px solid #d0d0d0;background:#fff;padding:10px 14px;font-weight:600;cursor:pointer}
.spp-btn[disabled]{opacity:.55;cursor:not-allowed}
.spp-btn-primary{background:#111;color:#fff;border-color:#111}
.spp-btn-secondary{background:#fff;color:#111}
.spp-gallery{columns:160px;column-gap:12px}
@media (max-width:520px){.spp-gallery{columns:2}}
.spp-thumb{position:relative;display:inline-block;width:100%;margin:0 0 12px;border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;background:#fafafa}
.spp-thumb img{width:100%;height:auto;display:block}
.spp-thumb .spp-x{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.9);cursor:pointer;font-weight:800}
.spp-thumb .spp-check{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.92);cursor:pointer;display:flex;align-items:center;justify-content:center}
.spp-thumb .spp-check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:6px;border:2px solid #0b5fff;display:block}
.spp-thumb .spp-check input:checked{background:#0b5fff}
.spp-thumb .spp-check input:checked::after{content:"";display:block;width:6px;height:10px;border:2px solid #fff;border-top:none;border-left:none;transform:translate(5px,1px) rotate(45deg)}
.spp-thumb.is-excluded{opacity:.55}
.spp-thumb.is-excluded .spp-badge{background:rgba(0,0,0,.62)}
.spp-badge{position:absolute;left:8px;bottom:8px;font-size:12px;background:rgba(0,0,0,.72);color:#fff;padding:4px 8px;border-radius:999px}
.spp-thumb.is-active{outline:3px solid #111;outline-offset:2px}

.spp-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
@media (max-width:900px){.spp-grid{grid-template-columns:1fr}}
.spp-preview-card{border:1px solid #ececec;border-radius:14px;padding:14px;background:#fff}
.spp-preview-header{margin-bottom:10px}
.spp-preview-title{font-size:20px;font-weight:800}
.spp-preview-sub{font-size:13px;color:#555;margin-top:2px}

/* Printful status line */
.spp-pf-status{margin-top:6px;font-size:12px;color:#666}
.spp-pf-status.is-ok{color:#16803c}
.spp-pf-status.is-error{color:#b91c1c}
.spp-pf-status.is-loading{color:#555}
.spp-pf-bar{margin-top:6px;height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.spp-pf-bar-inner{height:100%;width:40%;background:#111827;border-radius:999px;animation:sppPfInd 1.2s ease-in-out infinite}
@keyframes sppPfInd{0%{transform:translateX(-120%)}100%{transform:translateX(300%)}}

.spp-mockups-debug{margin-top:10px}
.spp-mockups-debug summary{cursor:pointer;font-size:12px;color:#555}
.spp-mockups-debug-pre{white-space:pre-wrap;max-height:220px;overflow:auto;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:10px;margin-top:6px;font-size:11px}

.spp-product-mock{border-radius:14px;background:transparent;border:0;padding:0}
.spp-mock-frame{position:relative;min-height:520px;border-radius:14px;background:transparent;border:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0}
.spp-mock-frame::after{content:attr(data-mock);position:absolute;top:10px;left:10px;font-size:12px;color:#666;background:rgba(255,255,255,.85);padding:4px 8px;border-radius:999px;border:1px solid #eee;text-transform:capitalize}
.spp-mock-frame[data-mock="mug"]{background:transparent}
.spp-mock-frame[data-mock="mug"]::before{content:none}
.spp-mock-frame[data-mock="calendar"]::before{content:"";position:absolute;top:18px;left:18px;right:18px;height:18px;border-radius:10px;background:#e9e9e9}
.spp-mock-frame[data-mock="cards"]::before{content:"";position:absolute;inset:24px;border:2px dashed #e0e0e0;border-radius:12px}
.spp-mock-frame[data-mock=]::before{content:"";position:absolute;left:18px;right:18px;top:30px;bottom:18px;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.08);border:1px solid #e8e8e8}
.spp-mock-frame[data-mock="tshirt"]::before{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:220px;height:240px;border-radius:40px 40px 28px 28px;background:linear-gradient(180deg,#fafafa,#f1f1f1);border:1px solid #e7e7e7}

.spp-carousel{position:relative;width:100%;max-width:640px}
.spp-track-wrap{overflow:hidden;padding:10px 0}
.spp-track{display:flex;gap:14px;align-items:center;will-change:transform;transition:transform .35s ease}
.spp-slide{flex:0 0 auto;width:220px;aspect-ratio:1.3/1;border-radius:10px;overflow:hidden;border:2px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 12px 18px rgba(0,0,0,.07);transform:scale(.82);transition:transform .25s ease, opacity .25s ease}
.spp-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Mug slides: let the handle render and remove 'thumbnail card' framing */
.spp-slide.is-mug{
  width:520px;
  aspect-ratio:16/9;
  overflow:visible;
  border:0;
  box-shadow:none;
  background:transparent;
  transform:scale(1);
}
.spp-slide.is-mug.is-active{transform:scale(1)}
.spp-slide.is-mug .spp-mug-canvas{
  width:100%;
  height:100%;
  display:block;
}

/* Product pills: enforce visible labels */
.spp-pill{color:#111}

.spp-slide.is-excluded{opacity:.45}
.spp-slide .spp-size-pill{position:absolute;top:8px;left:8px;right:8px;margin:0 auto;max-width:80%;text-align:center;font-size:11px;color:#777;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.08);padding:4px 8px;border-radius:999px;cursor:pointer;user-select:none}
.spp-slide{position:relative}

/* Mug mock inside slide */
.spp-mug{position:absolute;inset:0;border-radius:0;background:transparent;border:0;overflow:visible}
.spp-mug::after{content:none}
.spp-mug-print{position:absolute;left:0;right:0;top:0;bottom:0}
.spp-mug-print img{width:120%;height:100%;object-fit:cover;transform:translateX(-6%) perspective(600px) rotateY(-10deg)}
.spp-mug-print.standard img{object-fit:contain;width:100%;transform:none;background:#fff}
.spp-mug-print.standard{background:#fff;padding:10px}
.spp-mug-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(0,0,0,.04);color:#555;font-weight:600;letter-spacing:.2px}

/* Lightbox */
.spp-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:99999;padding:18px}
.spp-lightbox.is-open{display:flex}
.spp-lightbox-inner{max-width:96vw;max-height:92vh;background:#111;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.spp-lightbox-inner img{display:block;max-width:100%;max-height:92vh}
.spp-lightbox-close{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.35);color:#fff;font-size:28px;line-height:40px;font-weight:800;cursor:pointer;z-index:100000}

/* Size chooser popover */
.spp-pop{position:absolute;z-index:10000;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:8px;min-width:190px}
.spp-pop button{width:100%;text-align:left;border:none;background:transparent;padding:10px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.spp-pop button:hover{background:#f3f3f3}
.spp-slide.is-active{transform:scale(1);opacity:1;border-color:rgba(0,0,0,.22)}
.spp-slide:not(.is-active){opacity:.82}
.spp-arrow{position:absolute;top:46%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.9);cursor:pointer;font-size:28px;line-height:40px;font-weight:800}
.spp-arrow-left{left:-12px}
.spp-arrow-right{right:-12px}
.spp-dots{display:flex;gap:6px;justify-content:center;padding:10px 0 0}
.spp-dot{width:8px;height:8px;border-radius:999px;background:#d6d6d6;border:none;cursor:pointer}
.spp-dot.is-active{background:#111}

.spp-preview-actions{display:flex;justify-content:flex-end;margin-top:12px}
.spp-products{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.spp-pill{border-radius:999px;border:1px solid #ddd;background:#fff;padding:10px 12px;font-weight:700;cursor:pointer}
.spp-pill.is-selected{background:#111;color:#fff;border-color:#111}
.spp-options{border:1px solid #ececec;border-radius:14px;padding:14px}
.spp-opt-title{margin:0 0 10px;font-size:18px}
.spp-field{display:grid;gap:6px;margin:10px 0}
.spp-field label{font-weight:700}
.spp-field select,.spp-field input{border-radius:10px;border:1px solid #d6d6d6;padding:10px 12px}
.spp-add-to-cart{margin-top:14px}
.spp-submit{width:100%;padding:12px 14px;font-size:16px}
.spp-hint{font-size:12px;color:#555;margin-top:8px}




.spp-mug-canvas{width:100%;height:100%;display:block;border-radius:14px;}

/* ===== Mug preview layout fixes (v0.2.4) ===== */
.spp-mock-frame[data-mock="mug"]{min-height:360px}
.spp-mock-frame[data-mock="mug"] .spp-carousel{max-width:980px}
.spp-mock-frame[data-mock="mug"] .spp-track-wrap{padding:0}
.spp-mock-frame[data-mock="mug"] .spp-track{gap:18px}
.spp-mock-frame[data-mock="mug"] .spp-slide{width:520px;aspect-ratio:16/9;background:transparent;border:0;box-shadow:none;border-radius:0;transform:scale(.9)}
.spp-mock-frame[data-mock="mug"] .spp-slide.is-active{transform:scale(1)}
.spp-mock-frame[data-mock="mug"] .spp-slide:not(.is-active){opacity:.55}
.spp-mock-frame[data-mock="mug"] .spp-slide .spp-size-pill{display:none}
.spp-mock-frame[data-mock="mug"] .spp-mug{position:relative;inset:auto;border:0;background:transparent;overflow:visible}
.spp-mock-frame[data-mock="mug"] .spp-mug-print{position:relative;inset:auto;width:100%;height:100%}
.spp-mock-frame[data-mock="mug"] .spp-mug-canvas{border-radius:0}



/* Product card grid (mockup-based picker) */
.spp-product-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 900px){
  .spp-product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spp-product-card{
  text-align:left;
  border: 1px solid #e6e6e6;
  background:#fff;
  border-radius: 12px;
  padding: 10px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .06s ease, border-color .06s ease;
}
.spp-product-card:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.spp-product-card[aria-pressed="true"], .spp-product-card.is-active{
  border-color:#111;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.08);
}
.spp-card-img{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow:hidden;
  background: #f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
}
.spp-card-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.spp-card-label{
  margin-top: 8px;
  font-weight: 600;
  font-size: 14px;
}

/* Generated mockups strip */
.spp-mockup-strip{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.spp-mockup-strip-title{
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 8px;
}
.spp-mockup-strip-items{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 6px;
}
.spp-mockup-thumb{
  border: 1px solid #e6e6e6;
  background:#fff;
  border-radius: 10px;
  width: 74px;
  height: 56px;
  padding: 0;
  cursor:pointer;
  overflow:hidden;
  flex: 0 0 auto;
}
.spp-mockup-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.spp-mockup-thumb.is-active{
  border-color:#111;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.08);
}