/* builder.php — Universal Kit Builder CSS */

:root{
  /* ── Layout & Background Surfaces ── */
  --cream:#FFFFFF;--warm-white:#FFFFFF;--stone:#F2F2F2;

  /* ── Core Text / Structural ── */
  --charcoal:#2B6777;--graphite:#2B6777;--mid:#5C7A82;--muted:#8DA8B0;

  /* ── Primary Action / Active States ── */
  --accent:#FF3300;--accent-light:#FFF0ED;--accent2:#CC2900;

  /* ── Legacy green → mapped to teal for compatibility ── */
  --green:#2B6777;--green-light:#E6F2F5;

  /* ── Borders ── */
  --border:#C8D8E4;--border-strong:#B0CAD6;

  /* ── Typography ── */
  --fh:\'Plus Jakarta Sans\',sans-serif;
  --fb:\'Inter\',sans-serif;
  --fm:\'Inter\',monospace;

  /* ── Misc ── */
  --pill-h:40px;
  --r:14px;--r-sm:8px;--r-pill:100px;
  --shadow-sm:0 1px 3px rgba(43,103,119,.08);
  --shadow-md:0 4px 16px rgba(43,103,119,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fb);background:#F2F2F2;color:var(--charcoal);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased}

/* ── HEADER ── */
.hdr{background:var(--charcoal);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:300;border-bottom:2px solid var(--accent)}
.logo-wrap{display:flex;align-items:center;gap:11px}
.logo-tri{width:30px;height:30px;background:var(--accent);clip-path:polygon(50% 0%,100% 100%,0% 100%);flex-shrink:0}
.logo-name{font-family:var(--fh);font-size:22px;font-weight:800;color:#fff;letter-spacing:3px;line-height:1}
.logo-sub{font-size:9px;color:rgba(255,255,255,.6);letter-spacing:2px;text-transform:uppercase;font-weight:600}
.hdr-amt{font-family:var(--fh);font-size:26px;font-weight:700;color:var(--accent);letter-spacing:1px;line-height:1;text-align:right}
.hdr-lbl{font-size:9px;color:rgba(255,255,255,.5);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}

/* ── STEP NAV ── */
.step-nav{background:var(--warm-white);border-bottom:1px solid var(--border);padding:0 28px;display:flex;overflow-x:auto;scrollbar-width:none}
.step-nav::-webkit-scrollbar{display:none}
.step-tab{padding:11px 15px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:all .18s;display:flex;align-items:center;gap:7px;user-select:none}
.step-tab:hover{color:var(--charcoal)}
.step-tab.active{color:var(--charcoal);border-bottom-color:var(--accent)}
.step-tab.done{color:var(--green)}
.snum{width:20px;height:20px;border-radius:50%;background:var(--stone);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0;font-family:var(--fh);transition:all .18s}
.step-tab.active .snum{background:var(--accent);color:#fff}
.step-tab.done .snum{background:var(--green);color:#fff}

/* ── LAYOUT ── */
.wrap{display:block;min-height:calc(100vh - 103px)}
/* FIX: grid lives on .builder-body (nav is a full-width sibling on top).
   Markup uses .left-panel (form) + .right-panel (preview); old .left/.right kept for safety. */
.builder-body{display:grid;grid-template-columns:45fr 55fr;min-height:calc(100vh - 103px)}
.left-panel{padding:26px 28px;border-right:1px solid var(--border);overflow-y:auto;max-height:calc(100vh - 103px)}
.right-panel{padding:26px 28px;overflow-y:auto;max-height:calc(100vh - 103px)}
.left{padding:26px 28px;border-right:1px solid var(--border);overflow-y:auto;max-height:calc(100vh - 103px)}
.panel{display:none}
.panel.active{display:block}
.ptitle{font-family:var(--fh);font-size:36px;font-weight:800;letter-spacing:2px;text-transform:uppercase;line-height:1;margin-bottom:6px;color:var(--charcoal)}
.psub{font-size:12px;color:var(--mid);margin-bottom:20px;font-weight:400;font-family:var(--fb)}

/* ═══════════════════════════════════════
   UNIVERSAL PILL CHIP — THE BASE STYLE
   (matches the image exactly)
═══════════════════════════════════════ */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  height:var(--pill-h);padding:0 18px;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r-pill);
  font-family:var(--fb);font-size:13px;font-weight:600;
  color:var(--mid);background:var(--warm-white);
  cursor:pointer;user-select:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s;
  white-space:nowrap;
}
.chip:hover{border-color:var(--charcoal);color:var(--charcoal);box-shadow:var(--shadow-sm)}
.chip.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff;box-shadow:var(--shadow-sm)}
/* multi-select variant — amber active */
.chip.multi.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.chip .chip-price{font-family:var(--fb);font-size:10px;color:var(--accent);margin-left:2px;font-weight:600}
.chip.active .chip-price{color:rgba(255,255,255,.8)}
/* chip row */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* backward compat aliases */
.bchip{display:inline-flex;align-items:center;gap:6px;height:var(--pill-h);padding:0 18px;border:1.5px solid var(--border-strong);border-radius:var(--r-pill);font-family:var(--fb);font-size:13px;font-weight:600;color:var(--mid);background:var(--warm-white);cursor:pointer;user-select:none;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}
.bchip:hover{border-color:var(--charcoal);color:var(--charcoal)}
.bchip.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.btn-grp{display:flex;flex-wrap:wrap;gap:8px}
/* wash chips */
.wash-price{font-family:var(--fb);font-size:10px;color:var(--accent);margin-left:3px;font-weight:700}
.bchip.wash-chip{border-style:solid;border-color:var(--border-strong)}
.bchip.wash-chip:hover{border-color:var(--charcoal)}
.bchip.wash-chip.active{background:var(--charcoal)!important;border-color:var(--charcoal)!important;color:#fff!important}
.bchip.wash-chip.active .wash-price{color:var(--accent)!important}

/* ═══════════════════════════════════════
   SECTION LABEL
═══════════════════════════════════════ */
.flabel{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.fsec{margin-bottom:20px}

/* ── FORM INPUTS ── */
.finput{width:100%;padding:10px 14px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:var(--fb);font-size:13px;background:var(--warm-white);color:var(--charcoal);transition:border .18s;font-weight:500}
.finput:focus{outline:none;border-color:var(--charcoal)}
.fsel{width:100%;padding:10px 14px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);font-family:var(--fb);font-size:13px;background:var(--warm-white);color:var(--charcoal);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'11\' height=\'11\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%23666\' stroke-width=\'2\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.fsel:focus{outline:none;border-color:var(--charcoal)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp2{grid-column:1/-1}

/* ═══════════════════════════════════════
   PRODUCT GRID
═══════════════════════════════════════ */
.prod-grid{display:flex;flex-wrap:wrap;gap:8px}
.prod-card{
  height:40px;padding:0 20px;
  background:var(--warm-white);
  border:1.5px solid var(--border-strong);
  border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;position:relative;flex:0 0 auto;
  transition:border-color .15s,background .15s,color .15s;
}
.prod-card:hover{border-color:var(--charcoal)}
.prod-card:hover .pc-nm{color:var(--charcoal)}
.prod-card.selected{background:var(--charcoal);border-color:var(--charcoal)}
.prod-card.selected .pc-nm{color:#fff!important}
.pc-chk{display:none!important}
.pc-ico{display:none!important}
.pc-nm{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--mid);letter-spacing:.1px;transition:color .15s;white-space:nowrap}

/* ═══════════════════════════════════════
   PRODUCT DETAIL DROPDOWN
═══════════════════════════════════════ */
.pdp{display:none;margin-top:14px;background:var(--warm-white);border:1.5px solid var(--border-strong);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md);animation:sd .2s ease}
.pdp.open{display:block}
@keyframes sd{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.pdp-hdr{background:var(--charcoal);padding:14px 18px;display:flex;align-items:center;gap:12px}
.pdp-ico{font-size:26px}
.pdp-ttl{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff}
.pdp-sttl{font-size:11px;color:#888;font-weight:500}
.pdp-body{padding:16px 18px}
.sec-lbl{font-family:var(--fb);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:9px}

/* Style option cards */
.styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:9px;margin-bottom:16px}
.style-opt{border:1.5px solid var(--border-strong);border-radius:var(--r-sm);padding:12px 13px;cursor:pointer;transition:all .15s;position:relative;background:var(--warm-white)}
.style-opt:hover{border-color:var(--charcoal);box-shadow:var(--shadow-sm)}
.style-opt.sel{border-color:var(--charcoal);background:var(--stone)}
.style-opt .so-chk{background:var(--charcoal)}
.so-art{font-family:var(--fb);font-size:9px;color:var(--muted);margin-bottom:3px;letter-spacing:1px}
.so-nm{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:1px;color:var(--charcoal);margin-bottom:2px}
.so-det{font-size:11px;color:var(--mid);font-weight:400;margin-bottom:4px;font-family:var(--fb)}
.so-mat{font-size:10px;color:var(--muted);margin-bottom:5px;font-weight:400;font-family:var(--fb)}
.so-price{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--charcoal);letter-spacing:1px}
.so-price span{font-size:11px;color:var(--muted);font-family:var(--fb);font-weight:500}
.so-chk{position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--charcoal);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:800}
.style-opt.sel .so-chk{display:flex}

/* Color dots in PDP */
.pdp-colors{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.pdp-cdot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform .13s,border-color .13s;position:relative;flex-shrink:0}
.pdp-cdot:hover{transform:scale(1.15)}
.pdp-cdot.active{border-color:var(--charcoal)}
.pdp-cdot.active::after{content:\'✓\';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.pdp-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.meta-cell{background:var(--stone);border-radius:var(--r-sm);padding:10px 12px;text-align:center}
.meta-k{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.meta-v{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--charcoal);letter-spacing:.5px}

/* ═══════════════════════════════════════
   FABRIC COLOR DOTS (Step 2)
═══════════════════════════════════════ */
.fab-cdots{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.fab-cdot{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.fab-cdot-circle{width:32px;height:32px;border-radius:50%;border:2.5px solid transparent;transition:transform .13s,border-color .13s;position:relative;flex-shrink:0}
.fab-cdot:hover .fab-cdot-circle{transform:scale(1.12)}
.fab-cdot.active .fab-cdot-circle{border-color:var(--charcoal)}
.fab-cdot.active .fab-cdot-circle::after{content:\'✓\';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.fab-cdot-lbl{font-size:9px;color:var(--mid);font-weight:600;white-space:nowrap;max-width:44px;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* ═══════════════════════════════════════
   GSM BUTTONS — pill style
═══════════════════════════════════════ */
.gsm-btns{display:flex;gap:8px;flex-wrap:wrap}
.gsm-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:64px;height:var(--pill-h);padding:0 16px;
  border:1.5px solid var(--border-strong);border-radius:var(--r-pill);
  font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;background:var(--warm-white);color:var(--mid);
  transition:all .15s;user-select:none;line-height:1.1;
}
.gsm-btn:hover{border-color:var(--charcoal);color:var(--charcoal)}
.gsm-btn.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.gsm-btn .gsm-sub{font-family:var(--fb);font-size:9px;font-weight:600;opacity:.7;letter-spacing:.3px}

/* ═══════════════════════════════════════
   SELECTED FABRIC DISPLAY BAR
═══════════════════════════════════════ */
.fab-selected-bar{background:var(--charcoal);border-radius:var(--r-sm);padding:11px 15px;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fsb-swatch{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.25);flex-shrink:0}
.fsb-name{font-family:var(--fh);font-size:16px;font-weight:700;color:#fff;letter-spacing:1px}
.fsb-gsm{font-family:var(--fb);font-size:11px;color:var(--accent);margin-left:auto;font-weight:600}

/* ═══════════════════════════════════════
   TECHNIQUE LIST
═══════════════════════════════════════ */
.tlist{display:block;padding:0}
.titem{display:none!important}
.tadd{display:none!important}
.tentries{display:none!important}

/* ── Logo entry card ── */
.logo-entry{background:transparent;border:none;padding:0}
.logo-entry-top{display:none}
.logo-entry-title{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--charcoal)}
.dbtn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px}
.dbtn:hover{color:var(--accent2)}

/* Upload zone */
.upload-zone{border:2px dashed var(--border-strong);border-radius:var(--r-sm);padding:20px;text-align:center;cursor:pointer;transition:all .18s;background:var(--warm-white);position:relative;overflow:hidden}
.upload-zone:hover{border-color:var(--charcoal);background:var(--stone)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uz-icon{font-size:28px;margin-bottom:6px}
.uz-text{font-family:var(--fb);font-size:12px;font-weight:700;color:var(--mid)}
.uz-sub{font-size:10px;color:var(--muted);margin-top:3px}

/* Logo size buttons — pill style */
.logo-preview-wrap{margin-bottom:8px;display:flex;align-items:center;gap:10px}
.logo-preview-img{width:64px;height:64px;object-fit:contain;border-radius:8px;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0/10px 10px;flex-shrink:0;border:1.5px solid var(--border-strong)}
.logo-preview-meta{flex:1;min-width:0}
.logo-size-live{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--charcoal);letter-spacing:1px;line-height:1}
.logo-price-live{font-family:var(--fb);font-size:11px;color:var(--accent);font-weight:700;margin-top:2px}
.bg-done-badge{background:var(--green-light);color:var(--green);border-radius:20px;padding:3px 10px;font-size:9px;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:4px;margin-bottom:8px}
.bg-removing{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--accent-light);border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--charcoal)}
.logo-size-row{margin-top:6px}
.logo-size-btns{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.lsz-btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:48px;height:44px;padding:0 8px;
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  font-family:var(--fh);font-size:16px;font-weight:700;
  cursor:pointer;background:var(--warm-white);color:var(--mid);
  transition:all .15s;user-select:none;line-height:1.1;
}
.lsz-btn:hover{border-color:var(--charcoal);color:var(--charcoal)}
.lsz-btn.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.lsz-btn .lsz-px{font-family:var(--fb);font-size:8px;font-weight:600;opacity:.7}
.lsz-btn .lsz-price{font-family:var(--fb);font-size:9px;color:var(--accent);display:block}
.lsz-btn.active .lsz-price{color:var(--accent)}

/* Non-logo price grid */
.pszcell{display:flex;flex-direction:column;gap:3px}
.pszcell .sz{font-size:9px;color:var(--mid);font-weight:700;letter-spacing:.5px;text-align:center}
.pszcell input{width:100%;padding:5px 3px;border:1.5px solid var(--border);border-radius:4px;font-size:12px;text-align:center;background:var(--warm-white);font-family:var(--fb);font-weight:600}
.pszcell input:focus{outline:none;border-color:var(--charcoal)}

/* ═══════════════════════════════════════
   SLEEVE TOGGLE — pill style
═══════════════════════════════════════ */
.slv-tog{display:flex;background:var(--stone);border-radius:var(--r-pill);padding:3px;gap:3px;width:fit-content;margin-bottom:14px;border:1px solid var(--border)}
.slv-btn{padding:7px 18px;border-radius:var(--r-pill);font-family:var(--fb);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;color:var(--mid);user-select:none}
.slv-btn.active{background:var(--charcoal);color:#fff}

/* ═══════════════════════════════════════
   COLOR VARIANTS (Step 4.5)
═══════════════════════════════════════ */
.cv-section{background:var(--warm-white);border:1.5px solid var(--border-strong);border-radius:var(--r);padding:16px 18px;margin-bottom:14px}
.cv-section-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.cv-section-ttl{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);display:flex;align-items:center;gap:8px}
.cv-section-sub{font-family:var(--fm);font-size:10px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}

.cv-color-dot{
  position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform .13s;
}
.cv-color-dot:hover{transform:scale(1.08)}
.cv-dot-circle{
  width:38px;height:38px;border-radius:50%;
  border:2.5px solid transparent;transition:border-color .13s,box-shadow .13s;
  position:relative;flex-shrink:0;
}
.cv-color-dot.cv-active .cv-dot-circle{border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(0,0,0,.15)}
.cv-color-dot.cv-active .cv-dot-circle::after{
  content:\'✓\';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);font-weight:800;
}
.cv-dot-lbl{font-size:9px;color:var(--mid);font-weight:600;white-space:nowrap;max-width:50px;overflow:hidden;text-overflow:ellipsis;text-align:center}
.cv-variant-tag{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:100px;font-size:10px;font-weight:700;color:#fff;
  position:relative;cursor:pointer;transition:opacity .13s;
}
.cv-variant-tag:hover{opacity:.8}
.cv-tag-swatch{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex-shrink:0}
.cv-tag-x{font-size:9px;opacity:.7;margin-left:2px}

/* Right panel — multi-color preview */
/* ── Color Variants Right Panel — Big Slider ── */
.cv-slider-wrap{
  display:flex;flex-direction:column;align-items:center;
  width:100%;gap:12px;padding:8px 0;
}
.cv-slider-canvas{
  position:relative;width:100%;
  background:rgba(255,255,255,.04);
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  aspect-ratio:5/6;max-height:calc(100vh - 280px);
  display:flex;align-items:center;justify-content:center;
}
.cv-slider-svg{width:75%;height:75%;display:block;pointer-events:none}
.cv-slider-logos{position:absolute;inset:0;pointer-events:none}
.cv-slider-logos img{position:absolute;object-fit:contain}
.cv-slider-nav{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;gap:8px;padding:0 4px;
}
.cv-nav-arrow{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);border:none;
  color:#fff;font-size:18px;font-weight:700;
  cursor:pointer;transition:background .15s;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cv-nav-arrow:hover{background:var(--accent);color:var(--charcoal)}
.cv-nav-arrow:disabled{opacity:.25;cursor:not-allowed}
.cv-slider-dots{display:flex;gap:6px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap}
.cv-slider-dot{
  height:28px;padding:0 12px;border-radius:100px;
  font-family:var(--fb);font-size:10px;font-weight:700;
  cursor:pointer;transition:all .15s;border:1.5px solid transparent;
  display:inline-flex;align-items:center;gap:5px;
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);
}
.cv-slider-dot:hover{color:#fff;background:rgba(255,255,255,.12)}
.cv-slider-dot.active{background:var(--accent);color:var(--charcoal);border-color:transparent}
.cv-slider-dot-swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cv-slide-label{
  text-align:center;
}
.cv-slide-name{
  font-family:var(--fh);font-size:16px;font-weight:800;
  letter-spacing:1.5px;color:#fff;text-transform:uppercase;
}
.cv-slide-meta{font-family:var(--fm);font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
/* keep old cv-preview classes for backward compat */
.cv-preview-wrap{display:none}

/* ── Color size tabs ── */
.color-sz-tab{
  display:inline-flex;align-items:center;gap:7px;
  min-height:40px;padding:6px 16px;border-radius:100px;
  font-family:var(--fb);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;
  border:2px solid var(--border-strong);
  background:var(--warm-white);color:var(--mid);
  user-select:none;white-space:nowrap;
}
.color-sz-tab:hover{border-color:var(--charcoal);color:var(--charcoal)}
.color-sz-tab.active{
  background:var(--charcoal)!important;
  border-color:var(--charcoal)!important;
  color:#fff!important;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.color-sz-tab .ctab-dot{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.5);
}
.color-sz-tab:not(.active) .ctab-dot{border-color:rgba(0,0,0,.15)}
.ctab-label{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.1}
.ctab-name{font-size:12px;font-weight:700;letter-spacing:.2px}
.ctab-count{font-family:var(--fh);font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.3px}
.color-sz-tab.active .ctab-count{color:rgba(255,51,0,.85)}
.color-sz-tab.has-filled:not(.active){border-color:var(--charcoal);color:var(--charcoal)}
.ctab-rem{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.12);color:var(--mid);
  font-size:8px;font-weight:900;cursor:pointer;
  margin-left:2px;flex-shrink:0;transition:background .12s;
}
.ctab-rem:hover{background:var(--accent2);color:#fff}
.color-sz-tab.active .ctab-rem{background:rgba(255,255,255,.2);color:#fff}
.color-sz-tab.active .ctab-rem:hover{background:var(--accent2)}

/* ── Size button cells (replaces input boxes) ── */
.sz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px}
.szcell{display:flex;flex-direction:column;gap:4px;align-items:center}
.szcell .szl{font-family:var(--fh);font-size:11px;font-weight:700;color:var(--mid);letter-spacing:.5px;text-transform:uppercase}
.sz-btn{
  width:100%;height:52px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);
  background:var(--warm-white);
  cursor:pointer;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;transition:all .15s;position:relative;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.sz-btn:hover{border-color:var(--charcoal)}
.sz-btn.has-qty{
  background:var(--charcoal);
  border-color:var(--charcoal);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.sz-btn .sz-name{
  font-family:var(--fh);font-size:14px;font-weight:800;
  letter-spacing:.5px;color:var(--mid);transition:color .15s;
}
.sz-btn.has-qty .sz-name{color:#fff}
.sz-btn .sz-qty{
  font-family:var(--fm);font-size:10px;font-weight:700;
  color:var(--accent);display:none;
}
.sz-btn.has-qty .sz-qty{display:block}
.sz-btn .sz-input-wrap{
  position:absolute;inset:0;opacity:0;pointer-events:none;
}
.sz-btn.editing{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,51,0,.15);
  background:var(--warm-white);
}
.sz-btn.editing .sz-name{color:var(--charcoal)}
.sz-qty-input{
  position:absolute;inset:0;width:100%;height:100%;
  border:none;background:transparent;
  font-family:var(--fh);font-size:18px;font-weight:800;
  text-align:center;color:var(--charcoal);cursor:text;
  padding:0;outline:none;
}


.itip{background:var(--accent-light);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;font-size:12px;color:var(--charcoal);margin-bottom:16px;display:flex;gap:8px;align-items:flex-start;font-weight:500;line-height:1.5;font-family:var(--fb)}

/* ═══════════════════════════════════════
   ADDON GRID — pill/card hybrid
═══════════════════════════════════════ */
.addon-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.addon-pill{
  height:40px;padding:0 18px;
  background:var(--warm-white);
  border:1.5px solid var(--border-strong);
  border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fb);font-size:13px;font-weight:600;color:var(--mid);
  cursor:pointer;user-select:none;flex:0 0 auto;
  transition:border-color .15s,background .15s,color .15s;
  white-space:nowrap;
}
.addon-pill:hover{border-color:var(--charcoal);color:var(--charcoal)}
.addon-pill-active{background:var(--charcoal)!important;border-color:var(--charcoal)!important;color:#fff!important}
.addon-pill.open{background:var(--charcoal);border-color:var(--charcoal);color:#fff;border-radius:100px 100px 0 0}
.addon-pill-price{font-family:var(--fm);font-size:10px;color:var(--accent);font-weight:700}
.addon-pill-active .addon-pill-price{color:rgba(255,255,255,.6)}
.addon-pill.open .addon-pill-price{color:rgba(255,255,255,.6)}

/* ── Inline Addon PDP Dropdown (same feel as Step 1) ── */
#addon-pdp-drop{margin-top:-2px;margin-bottom:14px;animation:sd .18s ease}
.addon-pdp-inner{
  background:var(--warm-white);
  border:1.5px solid var(--charcoal);
  border-radius:0 var(--r) var(--r) var(--r);
  padding:16px;
}
.addon-pdp-hdr{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px dashed var(--border);flex-wrap:wrap;
}
.addon-pdp-name{font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal)}
.addon-pdp-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.addon-pdp-tag{font-family:var(--fm);font-size:10px;color:var(--mid);font-weight:600;background:var(--stone);padding:3px 9px;border-radius:100px;border:1px solid var(--border-strong)}
.addon-pdp-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.addon-pdp-colors-lbl{font-family:var(--fb);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.addon-pdp-colors{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.addon-pdp-cdot{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform .13s,border-color .13s}
.addon-pdp-cdot:hover{transform:scale(1.13)}
.addon-pdp-cdot.active{border-color:var(--charcoal)}
.addon-pdp-cdot.active::after{content:\'✓\';display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:11px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.addon-pdp-actions{display:flex;gap:8px;padding-top:10px;border-top:1px dashed var(--border);flex-wrap:wrap}
.addon-pdp-remove{height:34px;padding:0 14px;border:1.5px solid var(--border-strong);border-radius:var(--r-pill);font-family:var(--fb);font-size:11px;font-weight:700;color:var(--mid);cursor:pointer;background:transparent;transition:all .15s}
.addon-pdp-remove:hover{border-color:var(--accent2);color:var(--accent2)}
.addon-pdp-customize{height:34px;padding:0 18px;background:var(--charcoal);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:background .15s;white-space:nowrap}
.addon-pdp-customize:hover{background:var(--accent)}
.bmini{height:30px;padding:0 14px;border-radius:100px;font-family:var(--fb);font-size:11px;font-weight:700;cursor:pointer;border:none;background:var(--charcoal);color:#fff;transition:all .14s;display:inline-flex;align-items:center;gap:4px}
.bmini:hover{background:#333}
.bmini.danger{background:transparent;border:1.5px solid var(--border-strong);color:var(--mid)}
.bmini.danger:hover{border-color:var(--accent2);color:var(--accent2)}
.bmini.primary{background:var(--charcoal);color:#fff}
.bmini.primary:hover{background:#333}

/* ═══════════════════════════════════════
   SIZE / QTY
═══════════════════════════════════════ */
.lpbox{background:var(--charcoal);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;color:#fff}
.lpl{font-family:var(--fb);font-size:9px;color:#888;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.lpv{font-family:var(--fh);font-size:28px;font-weight:700;color:var(--accent);letter-spacing:1px}
.lpq{font-size:12px;color:#bbb;font-weight:500}
.kit-sum{background:var(--charcoal);border-radius:var(--r);padding:14px 18px;color:#fff;margin-bottom:16px}
.kit-sum h3{font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:9px;color:var(--accent)}
.kit-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px}
.kit-row:last-child{border:none}
.szblk{background:var(--warm-white);border:1.5px solid var(--border-strong);border-radius:var(--r);padding:14px;margin-bottom:12px}
.szblk-ttl{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mid);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.szgrplbl{font-family:var(--fb);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:7px 0 6px}
.sz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px}

/* ═══════════════════════════════════════
   ORDER REVIEW
═══════════════════════════════════════ */
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rcard{background:var(--warm-white);border:1.5px solid var(--border-strong);border-radius:var(--r);padding:15px}
.rcard h3{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:11px;color:var(--charcoal);border-bottom:2px solid var(--charcoal);padding-bottom:7px}
.rrow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--stone);font-size:12px;font-family:var(--fb)}
.rrow:last-child{border:none}
.rrow .rk{color:var(--mid);font-weight:600;font-family:var(--fb);font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.rrow .rv{font-weight:700;color:var(--charcoal);text-align:right;font-family:var(--fb);font-size:13px}
.ttag{display:inline-flex;align-items:center;height:26px;background:var(--stone);color:var(--charcoal);border-radius:var(--r-pill);padding:0 10px;font-size:10px;font-family:var(--fb);font-weight:700;margin:2px;border:1px solid var(--border-strong)}
.tot-bar{background:var(--charcoal);border-radius:var(--r);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.tot-bar .tl{color:#aaa;font-size:11px;font-family:var(--fb);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.tot-bar .ta{font-family:var(--fh);font-size:36px;font-weight:700;color:var(--accent);letter-spacing:2px}

/* ═══════════════════════════════════════
   NAV BUTTONS
═══════════════════════════════════════ */
.navrow{display:flex;gap:10px;margin-top:24px}
.bprev{
  height:44px;padding:0 20px;
  border:1.5px solid var(--border-strong);border-radius:var(--r-pill);
  font-family:var(--fb);font-size:12px;font-weight:700;letter-spacing:.3px;
  cursor:pointer;background:transparent;color:var(--graphite);
  transition:all .15s;display:inline-flex;align-items:center;gap:6px;
}
.bprev:hover{border-color:var(--charcoal);color:var(--charcoal)}
.bnext{
  flex:1;height:44px;padding:0 20px;
  background:var(--charcoal);color:#fff;border:none;
  border-radius:var(--r-pill);
  font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.bnext:hover{background:var(--accent)}
.bsub{
  flex:1;height:44px;padding:0 20px;
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--r-pill);
  font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all .15s;
}
.bsub:hover{background:var(--charcoal);color:#fff}

/* ═══════════════════════════════════════
   RIGHT PANEL
═══════════════════════════════════════ */
.right{background:var(--warm-white);padding:18px 22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:11px;min-height:calc(100vh - 103px);border-left:1px solid var(--border)}
.cvs-title{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--charcoal);text-align:center;width:100%}

/* View toggle — pill */
.vtog{display:flex;background:var(--stone);border-radius:var(--r-pill);padding:3px;gap:3px;border:1px solid var(--border)}
.vbtn{padding:7px 18px;border-radius:var(--r-pill);font-family:var(--fb);font-size:10px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:all .15s;color:var(--mid);user-select:none}
.vbtn.active{background:var(--charcoal);color:#fff}

.stypill{background:var(--stone);color:var(--charcoal);border-radius:var(--r-pill);padding:6px 16px;font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;display:none;width:100%;border:1.5px solid var(--border-strong)}
.stypill.show{display:block}
.cvs-zone{width:100%;flex:0 0 auto;min-height:480px;display:flex;align-items:center;justify-content:center}
.gmt-prev{width:100%;max-width:380px;aspect-ratio:3/4;background:var(--stone);border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1.5px solid var(--border-strong);box-shadow:var(--shadow-md)}
.gmt-svg{width:85%;height:85%}
.ovl-badges{position:absolute;bottom:0;left:0;right:0;padding:7px;display:flex;flex-wrap:wrap;gap:4px;background:linear-gradient(transparent,rgba(0,0,0,.3))}
.obadge{background:rgba(43,103,119,.85);color:#fff;border-radius:var(--r-pill);padding:3px 9px;font-size:9px;font-family:var(--fb);font-weight:700;border:1px solid rgba(255,255,255,.15)}

/* ── Canvas Garment Clipping Zone ──
   The #canvas-logos wrapper is positioned over the garment SVG.
   A hidden SVG clipPath (id="garment-clip") is updated dynamically
   whenever the product or view changes via updateGarmentClipPath().
   This ensures logos never bleed outside the physical garment silhouette. ── */
#canvas-logos{
  position:absolute;inset:0;
  /* CSS overflow hidden as first layer of protection */
  overflow:hidden;
  border-radius:14px;
  /* clip-path applied dynamically via JS — see updateGarmentClipPath() */
}

/* Spec pills */
.spec-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.spill{
  height:28px;padding:0 11px;
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:var(--r-pill);font-size:10px;font-family:var(--fb);font-weight:600;
  color:var(--graphite);display:inline-flex;align-items:center;gap:5px;
}
.spdot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex-shrink:0}
.price-disp{text-align:center;background:var(--stone);border:1.5px solid var(--border-strong);border-radius:var(--r);padding:10px 16px;width:100%}
.pd-lbl{font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--fb);font-weight:700}
.pd-amt{font-family:var(--fh);font-size:30px;font-weight:700;color:var(--charcoal);letter-spacing:2px}
#rt-sum{width:100%;display:none}
.rt-lbl{font-family:var(--fb);font-weight:700;font-size:9px;color:var(--mid);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
#rt-list{display:flex;flex-wrap:wrap;gap:5px}

/* ── Draggable Logo Overlays ── */
.clogo{position:absolute;cursor:move;user-select:none;touch-action:none}
.clogo img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.clogo-ring{position:absolute;inset:-3px;border:2px dashed rgba(17,17,17,.5);border-radius:4px;pointer-events:none;opacity:0;transition:opacity .15s}
.clogo:hover .clogo-ring,.clogo.dragging .clogo-ring{opacity:1}
.clogo-resize{position:absolute;bottom:-6px;right:-6px;width:14px;height:14px;background:var(--charcoal);border-radius:50%;cursor:se-resize;z-index:10;border:2px solid #fff}
.clogo-del{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:var(--accent2);border-radius:50%;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:800;opacity:0;transition:opacity .15s}
.clogo:hover .clogo-del{opacity:1}
.canvas-drop-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;opacity:0;transition:opacity .3s}
.canvas-drop-hint.show{opacity:1}
.canvas-drop-hint .dh-icon{font-size:28px}
.canvas-drop-hint .dh-text{font-family:var(--fb);font-size:11px;color:rgba(0,0,0,.4);font-weight:600}
.clogo-price-tag{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);background:var(--charcoal);color:var(--accent);font-family:var(--fh);font-size:13px;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap;pointer-events:none;letter-spacing:.5px;z-index:5;border:1.5px solid rgba(255,51,0,.4)}

/* ── Design View Skip Buttons (Step 3 nav) ── */
.bskip-view{
  height:44px;padding:0 16px;
  background:transparent;
  border:1.5px solid var(--border-strong);
  border-radius:var(--r-pill);
  font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;color:var(--mid);
  transition:all .15s;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.bskip-view:hover{border-color:var(--charcoal);color:var(--charcoal);background:var(--stone)}
.bskip-view.bskip-done{border-color:var(--green);color:var(--green);background:var(--green-light)}
.bskip-view.bskip-done:hover{border-color:#1e4f34;color:#1e4f34;background:#d0eedd}
.bskip-view.done{border-color:var(--green);color:var(--green);background:var(--green-light)}
.prod-view-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;background:var(--stone);border-radius:var(--r-pill);padding:4px;border:1px solid var(--border);width:fit-content}
.pvt-btn{padding:8px 16px;border-radius:var(--r-pill);font-family:var(--fb);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;color:var(--mid);user-select:none;white-space:nowrap;display:flex;align-items:center;gap:5px}
.pvt-btn:hover{color:var(--charcoal)}
.pvt-btn.active{background:var(--charcoal);color:#fff}
.pvt-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:800;padding:0 3px}

/* ── Addon Full Flow — Centered Modal ── */
#addon-popup{display:none;position:fixed;inset:0;background:rgba(20,20,20,.75);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:20px}
#addon-popup.open{display:flex}
.ap-sheet{background:var(--warm-white);border-radius:20px;width:100%;max-width:1180px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:ap-in .25s ease;box-shadow:0 24px 80px rgba(0,0,0,.25)}
@keyframes ap-in{from{transform:scale(.96) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.ap-hdr{background:var(--charcoal);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
.ap-ttl{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff}
.ap-cls{width:32px;height:32px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:16px;transition:background .15s;flex-shrink:0}
.ap-cls:hover{background:var(--accent2)}

/* Two-column body: LEFT=big canvas slider, RIGHT=customizer */
.ap-body{display:grid;grid-template-columns:minmax(360px,440px) 1fr;flex:1;overflow:hidden;min-height:0}

/* ── BIG CANVAS PREVIEW (matches Step 3 design preview size) ── */
.ap-canvas-zone{background:var(--charcoal);display:flex;flex-direction:column;padding:18px 18px 16px;gap:10px;flex-shrink:0;overflow:hidden;position:relative}
.ap-canvas-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.ap-canvas-label{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ap-canvas-name{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:1px;color:#fff;text-transform:uppercase}

/* Item slider (top): swipe between addon items */
.ap-item-slider{display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.06);border-radius:100px;padding:5px;flex-shrink:0}
.ap-item-slider-track{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.ap-item-slider-track::-webkit-scrollbar{display:none}
.ap-slider-dot{flex-shrink:0;padding:6px 12px;border-radius:100px;font-family:var(--fb);font-size:10px;font-weight:700;color:rgba(255,255,255,.6);cursor:pointer;white-space:nowrap;transition:all .15s;scroll-snap-align:start;letter-spacing:.3px;text-transform:uppercase}
.ap-slider-dot:hover{color:#fff}
.ap-slider-dot.active{background:var(--accent);color:#fff}
.ap-slider-arrow{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:13px;font-weight:700;border:none;transition:background .15s}
.ap-slider-arrow:hover{background:var(--accent)}
.ap-slider-arrow:disabled{opacity:.3;cursor:not-allowed}

/* Big preview area */
.ap-preview-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:340px;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(0,0,0,.15) 100%);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.ap-preview-inner{position:relative;width:100%;height:100%;max-width:340px;max-height:380px;display:flex;align-items:center;justify-content:center}
.ap-preview-svg-big{width:100%;height:100%;display:block}
.ap-preview-logos{position:absolute;inset:0;pointer-events:none}
.ap-preview-logos .clogo{pointer-events:auto}
.ap-preview-logos .canvas-drop-hint{pointer-events:none}
/* Brighter ring for dark addon canvas */
.ap-preview-logos .clogo-ring{border-color:rgba(255,51,0,.85)!important}
.ap-preview-logos .clogo-resize{background:var(--accent)!important;border-color:#fff!important;width:16px!important;height:16px!important;bottom:-8px!important;right:-8px!important}

/* View slider (bottom of canvas): Front/Back/Sleeve */
.ap-view-slider{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;background:rgba(255,255,255,.05);border-radius:100px;padding:5px 8px}
.ap-view-dot{padding:6px 14px;border-radius:100px;font-family:var(--fb);font-size:11px;font-weight:700;color:rgba(255,255,255,.55);cursor:pointer;transition:all .15s;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.ap-view-dot:hover{color:#fff}
.ap-view-dot.active{background:var(--accent);color:#fff}

.ap-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.ap-meta-name{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:1px;color:#fff;text-transform:uppercase}
.ap-meta-price{font-family:var(--fb);font-size:12px;color:var(--accent);font-weight:700}

/* RIGHT scroll area */
.ap-scroll{overflow-y:auto;flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:0}

/* Addon pills inside popup ── */
.ap-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ap-item-pill{
  height:40px;padding:0 18px;
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:100px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fb);font-size:13px;font-weight:600;color:var(--mid);
  cursor:pointer;user-select:none;flex:0 0 auto;
  transition:all .15s;white-space:nowrap;
}
.ap-item-pill:hover{border-color:var(--charcoal);color:var(--charcoal)}
.ap-item-pill-active{
  background:var(--charcoal)!important;border-color:var(--charcoal)!important;color:#fff!important;
}
.ap-item-pill.open{
  background:var(--accent)!important;border-color:var(--accent)!important;color:var(--charcoal)!important;
  border-radius:100px 100px 0 0!important;
}
.ap-pill-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;border-radius:50%;padding:0 4px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;font-family:var(--fh);
}
.ap-pill-price{font-family:var(--fb);font-size:10px;color:var(--accent);font-weight:700}
.ap-item-pill-active .ap-pill-price{color:rgba(255,255,255,.6)}

/* ── Addon PDP section (in-popup article selection) ── */
.ap-pdp-section{background:var(--stone);border:1.5px solid var(--border-strong);border-radius:var(--r);padding:14px;margin-bottom:14px}
.ap-pdp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.ap-pdp-ttl{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal)}
.ap-pdp-toggle{font-family:var(--fb);font-size:10px;font-weight:700;color:var(--mid);cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:100px;border:1px solid var(--border-strong);background:var(--warm-white);transition:all .15s}
.ap-pdp-toggle:hover{border-color:var(--charcoal);color:var(--charcoal)}
.ap-pdp-body{display:block}
.ap-pdp-body.collapsed{display:none}
.ap-pdp-section-lbl{font-family:var(--fb);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:7px;margin-top:4px}
.ap-styles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.ap-style-opt{border:1.5px solid var(--border-strong);border-radius:var(--r-sm);padding:10px 11px;cursor:pointer;transition:all .15s;background:var(--warm-white);position:relative}
.ap-style-opt:hover{border-color:var(--charcoal)}
.ap-style-opt.sel{border-color:var(--charcoal);background:#fff;box-shadow:var(--shadow-sm)}
.ap-style-opt.sel::after{content:\'✓\';position:absolute;top:6px;right:6px;width:16px;height:16px;background:var(--charcoal);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800}
.ap-so-art{font-family:var(--fb);font-size:8px;color:var(--muted);letter-spacing:1px;margin-bottom:2px}
.ap-so-nm{font-family:var(--fh);font-size:14px;font-weight:700;letter-spacing:.8px;color:var(--charcoal);margin-bottom:2px}
.ap-so-det{font-size:10px;color:var(--mid);font-weight:500;margin-bottom:3px;line-height:1.3}
.ap-so-mat{font-size:9px;color:var(--muted);margin-bottom:4px;font-weight:500}
.ap-so-price{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--charcoal);letter-spacing:.5px}
.ap-so-price span{font-size:10px;color:var(--muted);font-family:var(--fb);font-weight:500}

/* Addon color dots (in PDP) */
.ap-color-dots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.ap-cdot{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform .13s,border-color .13s;position:relative;flex-shrink:0}
.ap-cdot:hover{transform:scale(1.13)}
.ap-cdot.active{border-color:var(--charcoal)}
.ap-cdot.active::after{content:\'✓\';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* Customize header */
.ap-customize-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:8px 12px;background:var(--charcoal);border-radius:var(--r-sm);color:#fff}
.ap-customize-ttl{font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.ap-customize-sub{font-size:10px;color:rgba(255,255,255,.6);font-weight:500}

/* Mini kit builder (now matches main builder style) */
.mini-kb{display:block;background:transparent;border:none;padding:0;margin:0}
.mini-kb-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-strong)}
.mkb-add-more{flex:1;height:38px;padding:0 14px;border:1.5px dashed var(--border-strong);border-radius:var(--r-pill);font-family:var(--fb);font-size:11px;font-weight:700;color:var(--mid);cursor:pointer;background:transparent;transition:all .15s;white-space:nowrap}
.mkb-add-more:hover{border-color:var(--charcoal);color:var(--charcoal)}
.mkb-goto-sizes{flex:1;height:38px;padding:0 14px;background:var(--accent);border:none;border-radius:var(--r-pill);font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:1px;color:#fff;cursor:pointer;transition:background .15s;white-space:nowrap}
.mkb-goto-sizes:hover{background:#CC2900}
.mini-kb.open{display:block;animation:sd .2s ease}
.mini-kb-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mini-kb-ttl{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);display:flex;align-items:center;gap:8px}
.mini-kb-price{font-family:var(--fb);font-size:12px;color:var(--accent);font-weight:700}
/* mini-loc-tog (view tabs inside customize) hidden — using ap-view-slider on canvas instead */
.mini-loc-tog{display:none!important}
.mini-tlist{display:flex;flex-direction:column;gap:6px}
.mini-titem{background:var(--warm-white);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);overflow:hidden}
.mini-titem.has-e{border-color:var(--charcoal)}
.mini-thdr{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;gap:8px}
.mini-thdr:hover{background:var(--stone)}
.mini-tadd{height:28px;padding:0 12px;background:var(--charcoal);color:#fff;border-radius:var(--r-pill);font-family:var(--fb);font-size:10px;font-weight:700;cursor:pointer;transition:background .14s;white-space:nowrap;display:inline-flex;align-items:center}
.mini-tadd:hover{background:var(--accent)}
.mini-tentries{border-top:1px solid var(--border);padding:8px 12px;display:none;flex-direction:column;gap:6px}
.mini-titem.has-e .mini-tentries{display:flex}

.ap-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-shrink:0;background:var(--warm-white)}
.ap-skip{flex:1;height:44px;padding:0 20px;border:1.5px dashed var(--border-strong);border-radius:var(--r-pill);font-family:var(--fb);font-size:12px;font-weight:700;text-align:center;cursor:pointer;color:var(--mid);transition:all .15s;background:transparent;display:inline-flex;align-items:center;justify-content:center}
.ap-skip:hover{border-color:var(--accent2);color:var(--accent2)}
.ap-done{flex:2;height:44px;padding:0 20px;background:var(--charcoal);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;justify-content:center}
.ap-done:hover{background:var(--accent)}

/* ═══════════════════════════════════════
   TECHNIQUE PILL ROWS (same style as product grid)
═══════════════════════════════════════ */
.tech-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tech-pill{
  height:40px;padding:0 18px;
  background:var(--warm-white);
  border:1.5px solid var(--border-strong);
  border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--fb);font-size:13px;font-weight:600;color:var(--mid);
  cursor:pointer;user-select:none;
  transition:border-color .15s,background .15s,color .15s;
  white-space:nowrap;
  flex:0 0 auto;
}
.tech-pill:hover{border-color:var(--charcoal);color:var(--charcoal)}
.tech-pill-active{background:var(--charcoal)!important;border-color:var(--charcoal)!important;color:#fff!important}
.tech-pill-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;border-radius:50%;padding:0 4px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:800;font-family:var(--fh);
}

/* ── Technique entry cards (below pill row) ── */
.tech-entries-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;margin-top:2px}
.added-section-label{font-family:var(--fb);font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:6px}

/* Per-tech group block */
.tech-group-block{
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:12px;overflow:hidden;
}
.tgb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:var(--stone);border-bottom:1px solid var(--border);
  gap:10px;flex-wrap:wrap;
}
.tgb-header-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0;flex-wrap:wrap}
.tgb-name{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);white-space:nowrap}
.tgb-count{font-family:var(--fb);font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.5px}
.tgb-entries{display:flex;flex-direction:column;gap:0}

/* Price grade — inline with technique name, bigger & clearer */
.tgb-price-grade{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.tgb-pg-item{
  display:inline-flex;flex-direction:column;align-items:center;
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:7px;padding:4px 8px;min-width:36px;
  transition:border-color .13s;
}
.tgb-pg-sz{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--charcoal);letter-spacing:.5px;line-height:1.2}
.tgb-pg-pr{font-family:var(--fb);font-size:9px;color:var(--accent);font-weight:700;line-height:1.3}

/* Logo grid layout */
.tgb-logo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;
  padding:10px;
}

/* Individual logo grid card */
.tgc-card{
  position:relative;
  background:var(--stone);
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:8px 6px 6px;
  gap:4px;
  min-height:120px;
  transition:border-color .13s;
}
.tgc-card:hover{border-color:var(--charcoal)}
.tgc-del{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(30,30,30,.85);border:1.5px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;font-size:10px;font-weight:800;
  z-index:10;transition:all .12s;padding:0;
  pointer-events:auto;
}
.tgc-del:hover{background:var(--accent2);border-color:var(--accent2)}
.tgc-thumb{
  width:64px;height:64px;
  background:repeating-conic-gradient(#d0d0d0 0% 25%,#f5f5f5 0% 50%) 0 0/8px 8px;
  border-radius:7px;border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.tgc-thumb img{width:100%;height:100%;object-fit:contain}
.tgc-badge{
  height:16px;padding:0 6px;border-radius:20px;
  font-size:7px;font-weight:800;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:2px;
}
.tgc-badge.bg-off{background:var(--green-light);color:var(--green)}
.tgc-badge.orig{background:var(--stone);color:var(--mid);border:1px solid var(--border-strong)}
.tgc-badge.uploaded{background:var(--accent-light);color:var(--charcoal)}
.tgc-price{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--accent)}
.tgc-sizes{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
/* Size selector — hidden by default, shown on card hover */
.tgc-size-sel{
  display:flex;gap:2px;flex-wrap:wrap;justify-content:center;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .2s ease, opacity .2s ease;
  pointer-events:none;
}
.tgc-card:hover .tgc-size-sel{
  max-height:60px;opacity:1;pointer-events:auto;
}
.tgc-sz{
  min-width:20px;height:20px;padding:0 3px;
  border:1.5px solid var(--border-strong);border-radius:4px;
  font-family:var(--fh);font-size:10px;font-weight:700;
  cursor:pointer;background:var(--warm-white);color:var(--mid);
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .12s;user-select:none;
}
.tgc-sz:hover{border-color:var(--charcoal);color:var(--charcoal)}
.tgc-sz.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}

/* Upload card */
.tgc-upload{background:transparent;padding:0;border:none;min-height:120px}
.tgc-upload-inner{
  position:relative;width:100%;height:100%;min-height:120px;
  background:linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 100%);
  border-radius:10px;border:1.5px solid rgba(255,51,0,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;transition:border-color .2s;padding:8px;
}
.tgc-upload-inner:hover{border-color:var(--accent)}
.tgc-upload-inner input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;width:100%;height:100%}

/* Individual logo entry row inside group */
.tge-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;
  border-bottom:1px solid var(--stone);
  position:relative;
}
.tge-row:last-child{border-bottom:none}
.tge-thumb{
  width:44px;height:44px;flex-shrink:0;
  border-radius:7px;
  background:repeating-conic-gradient(#d0d0d0 0% 25%,#f5f5f5 0% 50%) 0 0/8px 8px;
  border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.tge-thumb img{width:100%;height:100%;object-fit:contain}
.tge-thumb-empty{font-size:18px;color:var(--muted)}
.tge-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tge-badges{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.tge-badge-bg{
  height:18px;padding:0 7px;border-radius:20px;
  background:var(--green-light);color:var(--green);
  font-size:8px;font-weight:800;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:3px;
}
.tge-badge-orig{
  height:18px;padding:0 7px;border-radius:20px;
  background:var(--stone);color:var(--mid);
  font-size:8px;font-weight:700;letter-spacing:.3px;
  display:inline-flex;align-items:center;
}
.tge-price{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--accent)}
.tge-upload-prompt{
  font-family:var(--fb);font-size:10px;color:var(--muted);font-weight:600;font-style:italic;
}
/* Size buttons inside row — compact horizontal strip */
.tge-sizes{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px}
.tge-sz{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:34px;height:36px;padding:0 4px;
  border:1.5px solid var(--border-strong);border-radius:6px;
  font-family:var(--fh);font-size:13px;font-weight:700;
  cursor:pointer;background:var(--warm-white);color:var(--mid);
  transition:all .13s;user-select:none;line-height:1.1;
}
.tge-sz:hover{border-color:var(--charcoal);color:var(--charcoal)}
.tge-sz.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.tge-sz .tge-sz-px{font-family:var(--fb);font-size:7px;font-weight:600;opacity:.65;line-height:1}
.tge-sz .tge-sz-pr{font-family:var(--fm);font-size:8px;color:var(--accent);display:block;line-height:1}
.tge-sz.active .tge-sz-pr{color:rgba(255,201,74,.9)}
.tge-del{
  width:24px;height:24px;border-radius:50%;
  background:transparent;border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);font-size:10px;font-weight:800;
  transition:all .13s;flex-shrink:0;
}
.tge-del:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}

/* Upload zone inside group row */
.tge-upload-zone{
  flex:1;cursor:pointer;position:relative;
}
.tge-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}

.tech-entry-card{
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:12px;padding:13px 15px;
}
.tec-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tec-name{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--charcoal)}
.tec-num{font-family:var(--fm);font-size:10px;color:var(--muted);font-weight:400;letter-spacing:.5px;text-transform:none}

/* Remove old titem/thdr styles — keep for backward compat but hide */
.titem{display:none}


/* ═══════════════════════════════════════
   ACTION BUTTONS GRID
═══════════════════════════════════════ */
.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}
.action-card{
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:var(--r);padding:18px 16px;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .12s;
  text-align:center;
}
.action-card:hover{border-color:var(--charcoal);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.action-card.accent{background:var(--charcoal);border-color:var(--charcoal)}
.action-card.accent .ac-label{color:#fff}
.action-card.accent .ac-desc{color:rgba(255,255,255,.6)}
.action-card.accent .ac-icon{filter:grayscale(0)}
.ac-icon{font-size:28px;margin-bottom:8px}
.ac-label{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--charcoal);margin-bottom:3px}
.ac-desc{font-size:11px;color:var(--muted);font-weight:500}

/* ── Payment info bar ── */
.payment-info-bar{
  display:flex;gap:0;background:var(--stone);border-radius:var(--r);
  overflow:hidden;margin-bottom:8px;border:1.5px solid var(--border-strong);
}
.pib-item{
  flex:1;padding:12px 10px;text-align:center;
  border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:4px;
}
.pib-item:last-child{border:none}
.pib-icon{font-size:20px}
.pib-text{font-size:10px;color:var(--graphite);font-weight:500;line-height:1.4}
.pib-text strong{font-weight:700;color:var(--charcoal);display:block;margin-bottom:1px}

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(17,17,17,.7);backdrop-filter:blur(4px);
  z-index:600;align-items:center;justify-content:center;padding:16px;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--warm-white);border-radius:20px;
  width:100%;max-width:480px;max-height:90vh;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.2);
  animation:mopen .22s ease;
}
@keyframes mopen{from{opacity:0;transform:scale(.96)translateY(8px)}to{opacity:1;transform:none}}
.modal-hdr{
  background:var(--charcoal);padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.modal-ttl{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff}
.modal-cls{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;font-size:14px;transition:background .15s;
}
.modal-cls:hover{background:var(--accent2)}
.modal-body{padding:20px;overflow-y:auto;flex:1}

/* ── Payment Plans ── */
.payment-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.payment-plan{
  border:2px solid var(--border-strong);border-radius:var(--r);
  padding:16px 14px;cursor:pointer;transition:all .15s;text-align:center;
  position:relative;
}
.payment-plan:hover{border-color:var(--charcoal)}
.payment-plan.selected{border-color:var(--charcoal);background:var(--stone)}
.rv-plan-dark{border-color:rgba(255,255,255,.15)!important;background:rgba(255,255,255,.06)!important}
.rv-plan-dark:hover{border-color:var(--accent)!important;background:rgba(255,255,255,.1)!important}
.rv-plan-dark.selected{border-color:var(--accent)!important;background:rgba(255,51,0,.1)!important;box-shadow:0 0 0 1px var(--accent)}
.pp-badge{
  display:inline-block;
  background:var(--stone);color:var(--mid);
  border-radius:100px;padding:2px 10px;
  font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:8px;
}
.pp-badge.accent{background:var(--charcoal);color:var(--accent)}
.pp-title{font-family:var(--fh);font-size:16px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;color:var(--charcoal)}
.pp-amount{font-family:var(--fh);font-size:26px;font-weight:700;color:var(--charcoal);letter-spacing:1px;margin-bottom:5px}
.pp-amount span{font-size:12px;color:var(--muted);font-family:var(--fb);font-weight:500}
.pp-desc{font-size:10px;color:var(--mid);font-weight:500;line-height:1.5}

/* ── Gift chips ── */
.gift-chip{
  height:36px;padding:0 14px;
  background:var(--warm-white);border:1.5px solid var(--border-strong);
  border-radius:100px;font-family:var(--fb);font-size:12px;font-weight:600;
  color:var(--mid);cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;white-space:nowrap;
}
.gift-chip:hover{border-color:var(--charcoal);color:var(--charcoal)}
.gift-chip.active{background:var(--charcoal);border-color:var(--charcoal);color:#fff}

/* ── Saved designs list ── */
.saved-design-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:var(--stone);border-radius:var(--r-sm);
  margin-bottom:6px;cursor:pointer;transition:all .14s;border:1.5px solid transparent;
}
.saved-design-item:hover{border-color:var(--charcoal)}
.sdi-name{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.sdi-date{font-size:10px;color:var(--muted);font-weight:500}
.sdi-actions{display:flex;gap:6px}
.sdi-load{height:28px;padding:0 12px;background:var(--charcoal);color:#fff;border-radius:100px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--fb);border:none;display:inline-flex;align-items:center}
.sdi-del{height:28px;padding:0 10px;background:transparent;color:var(--muted);border-radius:100px;font-size:10px;font-weight:700;cursor:pointer;font-family:var(--fb);border:1.5px solid var(--border)}
.sdi-del:hover{border-color:var(--accent2);color:var(--accent2)}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤900px) · Mobile (≤600px) · XS (≤400px)
═══════════════════════════════════════════════════════════ */

/* ── TABLET ≤900px ── */
@media(max-width:900px){
  /* Layout */
  .wrap{display:block!important}
  .right{display:none!important}
  .left{max-height:none!important;overflow-y:visible!important;padding:18px 16px!important;border:none!important}

  /* Header */
  .hdr{padding:0 16px;height:52px}
  .logo-name{font-size:19px}
  .logo-sub{font-size:9px}

  /* Step nav */
  .step-nav{padding:0 12px}
  .step-tab{padding:10px 12px;font-size:10px;gap:5px}
  .snum{width:18px;height:18px;font-size:8px}

  /* Step panels */
  .ptitle{font-size:28px}
  .panel{padding:20px 16px}

  /* Product grid */
  .prod-grid{gap:6px}
  .prod-card{height:36px;padding:0 14px}
  .pc-nm{font-size:12px}
  /* FIX: stack form + preview vertically on mobile */
  .builder-body{grid-template-columns:1fr}
  .left-panel{border-right:none;border-bottom:1px solid var(--border);max-height:none}
  .right-panel{max-height:none}
  .styles-grid{grid-template-columns:1fr 1fr}
  .pdp-meta{grid-template-columns:1fr 1fr 1fr}

  /* Fabric */
  .gsm-btns{gap:6px}
  .gsm-btn{height:36px;padding:0 12px;font-size:15px}
  .fab-cdots{gap:10px}

  /* Techniques */
  .tech-pill{height:36px;padding:0 14px;font-size:12px}
  .tgb-logo-grid{grid-template-columns:repeat(3,1fr)}

  /* Addons */
  .addon-pill{height:36px;padding:0 14px;font-size:12px}
  #addon-popup{padding:10px}
  .ap-sheet{max-height:96vh}
  .ap-body{grid-template-columns:1fr!important}
  .ap-canvas-zone{padding:14px;gap:8px;max-height:48vh}
  .ap-preview-wrap{min-height:220px}
  .ap-scroll{padding:14px}
  .ap-styles-grid{grid-template-columns:1fr 1fr}

  /* Colors */
  .cv-section{padding:14px}

  /* Sizes */
  .sz-grid{grid-template-columns:repeat(4,1fr)}
  .szblk{padding:14px}

  /* Review */
  .rev-grid{grid-template-columns:1fr 1fr}
  .rcard.sp2{grid-column:span 2}
  .g2{grid-template-columns:1fr 1fr}
  .action-grid{grid-template-columns:1fr 1fr}

  /* Payment */
  .payment-plan-grid{grid-template-columns:1fr}
  .payment-info-bar{flex-direction:column}
  .pib-item{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;text-align:left;gap:10px}
  .pib-item:last-child{border:none}

  /* Nav */
  .navrow{gap:8px;margin-top:18px}
  .bnext{font-size:14px;height:42px}
  .bprev{height:38px;padding:0 12px;font-size:10px}
}

/* ── MOBILE ≤600px ── */
@media(max-width:600px){
  /* Header */
  .hdr{padding:0 12px;height:48px;gap:8px}
  .logo-name{font-size:16px;letter-spacing:2px}
  .logo-sub{display:none}
  .logo-tri{width:22px;height:22px}
  .hdr-right{gap:6px}
  #hdr-total{display:none}            /* hide price in header on mobile */
  .hdr-acct-btn{height:30px;padding:0 10px;font-size:10px}

  /* Step nav — compact scrollable */
  .step-nav{padding:0 8px;-webkit-overflow-scrolling:touch}
  .step-tab{padding:8px 9px;font-size:9px;gap:4px;letter-spacing:0}
  .snum{width:16px;height:16px;font-size:7px;flex-shrink:0}
  .step-tab .stab-lbl{display:none}   /* show only numbers on very small screens */

  /* Panels */
  .panel{padding:16px 12px}
  .ptitle{font-size:22px;letter-spacing:2px;margin-bottom:6px}
  .psub{font-size:11px;margin-bottom:14px}
  .itip{font-size:11px;padding:9px 12px}
  .fsec{margin-bottom:14px}
  .flabel{font-size:9px;margin-bottom:5px}
  .finput{height:38px;font-size:13px;padding:0 11px}
  select.finput{height:42px}

  /* Product grid — 2 cols */
  .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .prod-card{height:40px;padding:0 12px;border-radius:10px}
  .pc-ico{font-size:14px}
  .pc-nm{font-size:11px;letter-spacing:.3px}
  .styles-grid{grid-template-columns:1fr}
  .style-opt{padding:12px}
  .pdp-meta{grid-template-columns:1fr 1fr}

  /* Fabric */
  .gsm-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .gsm-btn{height:38px;font-size:13px;padding:0 8px}
  .fab-cdots{gap:8px}
  .fab-cdot{width:34px;height:34px}
  .fit-row{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .fit-chip{height:38px;font-size:11px}
  .wash-row{display:flex;flex-wrap:wrap;gap:5px}
  .wash-chip{height:34px;padding:0 12px;font-size:11px}

  /* Techniques */
  .tech-pill-row{display:flex;flex-wrap:wrap;gap:5px}
  .tech-pill{height:34px;padding:0 12px;font-size:11px;border-radius:10px}
  .tgb-header{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px}
  .tgb-logo-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tgc-card{border-radius:10px}
  .tgc-thumb img{height:70px}
  .tgc-size-sel{gap:3px}
  .tgc-sz{min-width:26px;height:22px;font-size:8px;padding:0 3px}
  .logo-preview-row{flex-direction:column;gap:8px}
  .lsz-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}

  /* Addons */
  #addon-popup{padding:0;align-items:flex-end}
  .ap-sheet{border-radius:20px 20px 0 0;max-height:96vh;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .ap-hdr{padding:13px 16px}
  .ap-ttl{font-size:17px;letter-spacing:1.5px}
  .ap-body{grid-template-columns:1fr;display:flex;flex-direction:column}
  .ap-canvas-zone{max-height:44vh;padding:10px 12px;gap:6px;border-radius:0}
  .ap-preview-wrap{min-height:180px;border-radius:10px}
  .ap-preview-inner{max-width:240px;max-height:280px}
  .ap-view-slider{padding:4px 6px;gap:4px}
  .ap-view-dot{padding:5px 10px;font-size:9px}
  .ap-item-slider{padding:3px 4px}
  .ap-slider-dot{padding:4px 9px;font-size:9px}
  .ap-slider-arrow{width:22px;height:22px;font-size:11px}
  .ap-scroll{padding:12px;max-height:none;flex:1}
  .ap-styles-grid{grid-template-columns:1fr}
  .ap-pdp-section{padding:10px 12px}
  .ap-so-nm{font-size:12px}
  .ap-color-dots{gap:6px}
  .ap-cdot{width:24px;height:24px}
  .mini-kb-actions{flex-direction:column;gap:6px}
  .mkb-add-more,.mkb-goto-sizes{width:100%;justify-content:center}

  /* Color variants */
  .cv-section{padding:11px 12px;margin-bottom:10px}
  .cv-section-ttl{font-size:15px}
  .cv-color-dot .cv-dot-circle{width:36px;height:36px}
  .color-sz-tab{height:30px;padding:0 10px;font-size:10px}

  /* Sizes */
  .sz-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .szcell{padding:7px 4px}
  .szl{font-size:9px}
  .sz-btn{height:46px} .sz-btn .sz-name{font-size:12px}
  .szblk{padding:12px}
  .szblk-ttl{font-size:13px;flex-wrap:wrap;gap:4px}
  .szgrplbl{font-size:9px}
  #sz-validation-error{font-size:11px;padding:9px 12px}

  /* Review */
  .rev-grid{grid-template-columns:1fr;gap:10px}
  .rcard{padding:12px 13px}
  .rcard.sp2{grid-column:span 1}
  .rcard h3{font-size:12px;margin-bottom:8px}
  .rrow{padding:5px 0;font-size:11px}
  .rk{font-size:9px}
  .tot-bar{padding:12px 14px;flex-direction:column;gap:4px;align-items:flex-start}
  .ta{font-size:28px}

  /* Client form */
  .g2{grid-template-columns:1fr;gap:10px}
  .g2 .sp2{grid-column:span 1}

  /* Action grid */
  .action-grid{grid-template-columns:1fr 1fr;gap:8px}
  .action-card{padding:12px 10px;border-radius:12px}
  .ac-icon{font-size:20px;margin-bottom:5px}
  .ac-label{font-size:11px}
  .ac-desc{font-size:9px}

  /* Payment plans */
  .payment-plan-grid{grid-template-columns:1fr;gap:8px}
  .payment-plan{padding:12px 14px;border-radius:12px}
  .pp-title{font-size:14px}
  .pp-amount{font-size:22px}
  .payment-info-bar{flex-direction:column;gap:0;padding:12px 14px}
  .pib-item{border-right:none;border-bottom:1px solid var(--border);flex-direction:row;text-align:left;gap:10px;padding:8px 0}
  .pib-item:last-child{border:none}
  .pib-icon{font-size:18px}

  /* Modals */
  .modal-box{max-height:90vh;border-radius:16px;margin:0 8px}
  .modal-hdr{padding:14px 16px}
  .modal-ttl{font-size:17px}
  .modal-body{padding:14px 16px}

  /* Nav buttons */
  .navrow{gap:6px;margin-top:14px}
  .bnext{font-size:13px;height:44px;letter-spacing:.5px}
  .bprev{height:38px;padding:0 10px;font-size:10px}
  .ap-skip{height:38px;font-size:11px}
}

/* ── XS ≤400px ── */
@media(max-width:400px){
  .panel{padding:14px 10px}
  .ptitle{font-size:19px;letter-spacing:1.5px}
  .prod-grid{grid-template-columns:1fr 1fr}
  .prod-card{height:38px;padding:0 10px}
  .pc-nm{font-size:10px}
  .sz-grid{grid-template-columns:repeat(2,1fr)}
  .gsm-btns{grid-template-columns:repeat(2,1fr)}
  .tgb-logo-grid{grid-template-columns:1fr 1fr}
  .action-grid{grid-template-columns:1fr 1fr}
  .step-tab{padding:7px 8px;font-size:8px}
  .snum{width:15px;height:15px;font-size:7px}
  .ap-preview-inner{max-width:200px;max-height:240px}
  .hdr{padding:0 10px;height:44px}
  .logo-name{font-size:14px;letter-spacing:1.5px}
}

/* ── Mobile sticky bottom CTA ── */
#mob-sticky-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--warm-white);
  border-top:1px solid var(--border-strong);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  z-index:200;
  gap:8px;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
}
#mob-sticky-nav .mob-prev{
  flex:0 0 auto;height:44px;padding:0 16px;border:1.5px solid var(--border-strong);
  background:transparent;border-radius:var(--r-pill);font-family:var(--fb);font-size:11px;
  font-weight:700;color:var(--mid);cursor:pointer;white-space:nowrap;
}
#mob-sticky-nav .mob-next{
  flex:1;height:44px;background:var(--charcoal);color:#fff;border:none;
  border-radius:var(--r-pill);font-family:var(--fh);font-size:16px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;
}
#mob-sticky-nav .mob-next.accent{background:var(--accent);color:var(--charcoal)}
/* Push panel content above sticky nav on mobile */
@media(max-width:600px){
  #mob-sticky-nav{display:flex}
  .navrow{display:none!important}  /* hide inline navrow on mobile — use sticky instead */
  .panel{padding-bottom:72px!important}  /* ensure content clears sticky bar */
  .left{padding-bottom:0!important}
  /* Touch targets */
  .prod-card,.tech-pill,.addon-pill,.gsm-btn,.wash-chip,.fit-chip{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  /* Prevent text selection on tappable elements */
  .prod-card,.step-tab,.ap-slider-dot,.ap-view-dot,.color-sz-tab{
    -webkit-user-select:none;user-select:none;
  }
  /* Larger tap zones for color dots */
  .fab-cdot{width:38px;height:38px}
  .cv-dot-circle{width:38px!important;height:38px!important}
  /* Smooth scroll in panels */
  .ap-scroll,.ap-item-slider-track{-webkit-overflow-scrolling:touch}
}

/* ── Per-color piece summary bar ── */
.color-sz-summary-bar{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 14px;
  background:var(--charcoal);
  border-radius:var(--r-sm);
}
.csb-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:100px;
  font-family:var(--fb);font-size:11px;font-weight:700;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
  transition:all .15s;
}
.csb-item.has-qty{background:rgba(255,255,255,.14);color:#fff}
.csb-item.is-active{background:var(--accent);color:var(--charcoal)}
.csb-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.csb-name{letter-spacing:.3px}
.csb-pcs{font-family:var(--fh);font-size:13px;font-weight:800;color:var(--accent);margin-left:4px}
.csb-item.is-active .csb-pcs{color:var(--charcoal)}
.csb-item.has-qty:not(.is-active) .csb-pcs{color:rgba(255,51,0,.85)}
.csb-zero .csb-pcs{display:none}

/* Addon summary under addon tabs */
.addon-color-summary{
  display:flex;flex-wrap:wrap;gap:5px;
  margin-bottom:10px;
  padding:8px 12px;
  background:var(--stone);border-radius:var(--r-sm);
  border:1px solid var(--border-strong);
}
.acs-item{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:100px;
  font-family:var(--fb);font-size:10px;font-weight:700;
  background:var(--warm-white);color:var(--mid);
  border:1.5px solid var(--border-strong);
}
.acs-item.has-qty{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.acs-item.is-active{border-color:var(--accent)}
.acs-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.acs-pcs{font-family:var(--fh);font-size:12px;font-weight:800;color:var(--accent);margin-left:3px}
.acs-item.has-qty .acs-pcs{color:rgba(255,51,0,.85)}
.acs-zero .acs-pcs{display:none}
/* ── Review section canvas & techniques ── */
.rv-canvas-card{background:var(--charcoal)!important;border-color:var(--charcoal)!important;min-height:280px}
.rv-canvas-card h3{color:rgba(255,255,255,.6)!important;border-color:rgba(255,255,255,.1)!important}
.rv-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:center}
.rv-gmt-prev{width:100%;max-width:180px;aspect-ratio:5/6;background:rgba(255,255,255,.04);border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.rv-view-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.rv-vtab{padding:4px 10px;border-radius:100px;font-family:var(--fb);font-size:9px;font-weight:700;cursor:pointer;transition:all .15s;color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);border:none}
.rv-vtab.active{background:var(--accent);color:#fff}
.rv-tech-section{margin-bottom:10px}
.rv-tech-view-lbl{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.rv-tech-tags{display:flex;flex-wrap:wrap;gap:5px}
.rv-tech-tag{display:inline-flex;align-items:center;gap:5px;background:var(--stone);border:1.5px solid var(--border-strong);border-radius:100px;padding:4px 10px;font-family:var(--fb);font-size:11px;font-weight:700;color:var(--charcoal)}
.rv-tech-logo{width:20px;height:20px;border-radius:3px;object-fit:contain;background:repeating-conic-gradient(#ccc 0% 25%,#f5f5f5 0% 50%) 0 0/5px 5px;flex-shrink:0}
.mob-canvas-strip{
  display:none;
  background:var(--charcoal);border-radius:14px;
  padding:12px 14px;margin-bottom:16px;
  flex-direction:column;gap:10px;
}
.mob-cvs-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.mob-cvs-title{font-family:var(--fh);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45)}
.mob-vtog{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.mob-vbtn{padding:5px 11px;border-radius:100px;font-family:var(--fb);font-size:10px;font-weight:700;color:rgba(255,255,255,.55);cursor:pointer;transition:all .15s;user-select:none;border:1px solid transparent}
.mob-vbtn.active{background:var(--accent);color:#fff}
.mob-cvs-price{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--accent);letter-spacing:.5px;white-space:nowrap}
.mob-cvs-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.mob-gmt-prev{
  width:100%;max-width:320px;height:280px;
  background:rgba(255,255,255,.04);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);
}
.mob-gmt-prev svg{width:75%;height:75%}
.mob-spec-pills{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;width:100%}
.mob-spec-pills .spill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.75);font-size:10px;height:26px;padding:0 10px}
.mob-spec-pills .spdot{border-color:rgba(255,255,255,.2)}
.mob-tech-summary{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:100%}
.mob-tech-row{font-size:10px;color:rgba(255,255,255,.6);font-weight:600;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:100px}
.mob-tech-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
@media(max-width:600px){
  .mob-canvas-strip{display:flex}
}

/* ── Always-visible delete button on touch devices ── */
@media(hover:none),(pointer:coarse){
  .clogo-del{opacity:1!important;width:22px!important;height:22px!important;top:-10px!important;right:-10px!important;font-size:11px!important}
  .clogo-ring{opacity:1!important;border-style:solid!important;border-color:rgba(255,51,0,.6)!important}
  .clogo-resize{width:18px!important;height:18px!important;bottom:-9px!important;right:-9px!important}
  .tgc-del{opacity:1!important}
}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--charcoal);color:#fff;padding:10px 22px;border-radius:var(--r-pill);font-family:var(--fb);font-size:13px;font-weight:600;z-index:9999;display:none;box-shadow:var(--shadow-md);white-space:nowrap}
#toast.success{background:var(--green)}
#toast.error{background:var(--accent2)}

/* ── SUCCESS ── */
#sov{display:none;position:fixed;inset:0;background:rgba(20,20,20,.9);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#sov.show{display:flex}
.scard{background:var(--warm-white);border-radius:20px;padding:36px;text-align:center;max-width:400px;width:90%;box-shadow:var(--shadow-md)}
.sico{font-size:50px;margin-bottom:13px}
.sttl{font-family:var(--fh);font-size:34px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:7px}
.ssub{color:var(--mid);font-size:13px;margin-bottom:18px;font-weight:500}
.sref{background:var(--stone);color:var(--charcoal);font-family:var(--fb);font-size:18px;font-weight:700;letter-spacing:3px;border-radius:var(--r-sm);padding:10px 18px;margin-bottom:16px;display:inline-block;border:1.5px solid var(--border-strong)}
.scls{height:40px;padding:0 24px;background:var(--charcoal);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--fb);font-weight:700;cursor:pointer;font-size:12px}

/* Spinner */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2.5px solid rgba(0,0,0,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;flex-shrink:0}

/* BG popup removed */

/* ══════════════════════════════
   DYNAMIC UPLOAD ZONE REDESIGN
══════════════════════════════ */
.upload-zone{
  border:2px dashed var(--border-strong);border-radius:var(--r-sm);
  padding:20px;text-align:center;cursor:pointer;transition:all .18s;
  background:var(--warm-white);position:relative;overflow:hidden;
}
.upload-zone:hover{border-color:var(--charcoal);background:var(--stone)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-zone.uz-dynamic{
  border:none;padding:0;background:transparent;
  border-radius:14px;overflow:hidden;
}
.uz-dynamic input[type=file]{z-index:10}
.uz-dynamic-inner{
  position:relative;
  background:linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 40%,#111 100%);
  border-radius:14px;overflow:hidden;
  padding:22px 18px 18px;
  border:1.5px solid rgba(255,51,0,.18);
  transition:border-color .2s,box-shadow .2s;
  cursor:pointer;
}
.uz-dynamic:hover .uz-dynamic-inner{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,51,0,.08),0 8px 28px rgba(0,0,0,.28);
}
/* Animated grid lines bg */
.uz-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,51,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,51,0,.04) 1px,transparent 1px);
  background-size:24px 24px;
  animation:ugrid 18s linear infinite;
}
@keyframes ugrid{from{background-position:0 0}to{background-position:24px 24px}}
/* Corner accents */
.uz-corner{position:absolute;width:14px;height:14px;border-color:var(--accent);border-style:solid;pointer-events:none}
.uz-corner.tl{top:8px;left:8px;border-width:2px 0 0 2px}
.uz-corner.tr{top:8px;right:8px;border-width:2px 2px 0 0}
.uz-corner.bl{bottom:8px;left:8px;border-width:0 0 2px 2px}
.uz-corner.br{bottom:8px;right:8px;border-width:0 2px 2px 0}
/* Orb glow */
.uz-orb{
  position:absolute;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,51,0,.2) 0%,transparent 70%);
  top:-20px;right:-10px;pointer-events:none;
  animation:uorb 3s ease-in-out infinite alternate;
}
@keyframes uorb{from{transform:scale(1);opacity:.7}to{transform:scale(1.4);opacity:.3}}
.uz-icon-wrap{
  position:relative;z-index:1;
  width:44px;height:44px;margin:0 auto 10px;
  background:rgba(255,51,0,.08);border-radius:12px;
  border:1px solid rgba(255,51,0,.2);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.uz-dynamic:hover .uz-icon-wrap{transform:scale(1.08) rotate(-3deg)}
.uz-icon-svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.uz-main-text{
  position:relative;z-index:1;
  font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:#fff;margin-bottom:3px;line-height:1;
}
.uz-sub-text{
  position:relative;z-index:1;
  font-size:10px;color:rgba(255,255,255,.45);font-weight:500;margin-bottom:12px;
  letter-spacing:.3px;
}
.uz-tags{position:relative;z-index:1;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.uz-tag{
  height:20px;padding:0 8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:100px;font-size:9px;font-family:var(--fb);font-weight:700;
  color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:4px;
}
.uz-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
/* BG badge */
.uz-bg-badge{
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--accent);color:var(--charcoal);
  font-family:var(--fb);font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;
  display:flex;align-items:center;gap:3px;
}



.hdr{display:none!important}