*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#1a1d23; --navy2:#252830;
  --white:#fff; --offwhite:#f6f5f3; --cream:#faf9f7;
  --border:#e2e4e8; --border2:#d0d3da;
  --text:#1a1d23; --muted:#6b7280; --light:#9ca3af;
  --red:#e63329; --red-h:#c42920; --red-light:rgba(230,51,41,0.08);
  --green:#22c55e; --blue:#3b6fe8; --gold:#D4AF37;
  --shadow:0 2px 12px rgba(0,0,0,0.08); --shadow-lg:0 8px 32px rgba(0,0,0,0.14);
}
html{height:100%;}
body{font-family:'DM Sans',sans-serif;background:var(--offwhite);color:var(--text);font-size:13px;display:flex;flex-direction:column;height:100vh;min-height:600px;overflow:hidden;}

/* Pages */
.page{display:none;flex-direction:column;height:100%;}
.page.active{display:flex;}

/* Top Nav */
.topnav{background:var(--navy);color:white;display:flex;align-items:center;height:48px;padding:0 1.25rem;position:relative;flex-shrink:0;z-index:100;}
.nav-steps{display:flex;align-items:center;}
.nav-step{display:flex;align-items:center;gap:0.45rem;padding:0 1rem;height:48px;color:rgba(255,255,255,0.4);white-space:nowrap;cursor:pointer;font-size:11.5px;font-weight:500;transition:color 0.15s;border-right:1px solid rgba(255,255,255,0.07);position:relative;}
.nav-step:hover{color:rgba(255,255,255,0.7);}
.nav-step.active{color:white;}
.nav-step.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red);}
.nav-step.done{color:rgba(255,255,255,0.65);}
.step-num{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.nav-step.active .step-num{background:var(--red);}
.nav-step.done .step-num{background:var(--green);}
.nav-brand{position:absolute;left:50%;transform:translateX(-50%);font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:white;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:0.5rem;}
.nav-btn{font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;padding:0.35rem 0.9rem;border-radius:5px;border:1px solid rgba(255,255,255,0.2);background:transparent;color:white;cursor:pointer;transition:all 0.15s;}
.nav-btn:hover:not(:disabled){background:rgba(255,255,255,0.1);}
.nav-btn.primary{background:var(--red);border-color:var(--red);}
.nav-btn.primary:hover:not(:disabled){background:var(--red-h);}
.nav-btn:disabled{opacity:0.4;cursor:not-allowed;}

/* Page 1 workspace is 3-col with right preview panel */
#p1workspace{grid-template-columns:252px 1fr 272px;}

/* Robot avatar */
.robot-avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.robot-avatar svg{width:18px;height:18px;}
.robot-avatar-sm{width:26px;height:26px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.robot-avatar-sm svg{width:15px;height:15px;}

/* 3-col workspace */
.workspace{display:grid;grid-template-columns:252px 1fr 292px;flex:1;min-height:0;overflow:hidden;}

/* Left Panel */
.left-panel{background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.left-scroll{flex:1;overflow-y:auto;}
.left-scroll::-webkit-scrollbar{width:3px;}
.left-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* Process Steps */
.process-step{display:flex;align-items:flex-start;gap:0.75rem;padding:0.85rem 1rem;cursor:pointer;transition:background 0.15s;border-left:3px solid transparent;}
.process-step:hover{background:var(--offwhite);}
.process-step.active{background:var(--red-light);border-left-color:var(--red);}
.ps-circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:var(--muted);}
.process-step.active .ps-circle{border-color:var(--red);background:var(--red);color:white;}
.process-step.done .ps-circle{border-color:var(--green);background:var(--green);color:white;}
.ps-name{font-size:12px;font-weight:600;color:var(--muted);}
.process-step.active .ps-name{color:var(--red);}
.process-step.done .ps-name{color:var(--text);}
.ps-desc{font-size:10.5px;color:var(--light);margin-top:1px;line-height:1.4;}
.ps-connector{width:2px;height:10px;background:var(--border);margin-left:calc(1rem + 14px - 1px);}

/* Centre Panel */
.centre-panel{display:flex;flex-direction:column;background:var(--cream);overflow:hidden;}
.centre-header{background:var(--white);border-bottom:1px solid var(--border);padding:0 1.25rem;height:52px;display:flex;align-items:center;gap:0.75rem;flex-shrink:0;position:sticky;top:0;z-index:10;}
.centre-title{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;}
.centre-sub{font-size:10px;color:var(--muted);margin-top:1px;}
.centre-body{flex:1;overflow-y:auto;padding:1.25rem;}
.centre-body::-webkit-scrollbar{width:3px;}
.centre-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* Right panel (chat) */
.right-panel{background:var(--white);border-left:1px solid var(--border);display:flex;flex-direction:column;}
.right-header{height:52px;padding:0 1.25rem;border-bottom:1px solid var(--border);background:var(--offwhite);display:flex;align-items:center;gap:0.6rem;}
.ai-avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.ai-avatar svg{width:16px;height:16px;}
.ai-name{font-size:12px;font-weight:600;}
.ai-status{font-size:10px;color:var(--green);display:flex;align-items:center;gap:3px;}
.ai-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;}
.right-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.6rem;}
.right-body::-webkit-scrollbar{width:3px;}
.right-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.chat-msg{display:flex;gap:0.5rem;align-items:flex-start;}
.chat-avatar-sm{width:24px;height:24px;border-radius:50%;background:var(--navy);color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;font-family:'Playfair Display',serif;}.chat-avatar-sm svg{width:13px;height:13px;}
.chat-bubble{background:var(--offwhite);border-radius:0 8px 8px 8px;padding:0.5rem 0.7rem;font-size:11.5px;line-height:1.55;color:var(--text);max-width:200px;}
.chat-bubble.user-msg{background:var(--navy);color:white;border-radius:8px 8px 0 8px;max-width:200px;}
.chat-name{font-size:9.5px;font-weight:600;color:var(--muted);margin-bottom:0.2rem;}
.chat-user-row{display:flex;justify-content:flex-end;}
.chip-wrap{display:flex;flex-wrap:wrap;gap:0.2rem;max-width:220px;}
.chip{padding:0.3rem 0.65rem;border:1px solid var(--border);border-radius:20px;background:white;cursor:pointer;font-size:11px;color:var(--text);transition:all 0.13s;font-family:'DM Sans',sans-serif;}
.chip:hover{border-color:var(--navy);}
.right-footer{padding:0.65rem 0.85rem;border-top:1px solid var(--border);display:flex;align-items:center;box-sizing:border-box;}
.chat-input-row{display:flex;align-items:center;gap:0.4rem;border:1.5px solid var(--border);border-radius:8px;background:var(--offwhite);padding:0.4rem 0.6rem;transition:border-color 0.15s;width:100%;}
.chat-input-row:focus-within{border-color:var(--navy);}
.chat-inp{flex:1;border:none;background:none;outline:none;font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--text);}
.chat-inp::placeholder{color:var(--light);}
.chat-send-btn{width:24px;height:24px;border-radius:50%;background:var(--red);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-send-btn:hover{background:var(--red-h);}
.chat-send-btn svg{width:11px;height:11px;fill:white;}

/* Buttons */
.btn{font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:600;padding:0.6rem 1.1rem;border-radius:6px;border:none;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:0.4rem;}
.btn-red{background:var(--red);color:white;}
.btn-red:hover{background:var(--red-h);}
.btn-ghost{background:white;color:var(--text);border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-navy{background:var(--navy);color:white;}
.btn-navy:hover{background:var(--navy2);}
.btn:disabled{opacity:0.35;cursor:not-allowed;}

.holding-line{font-size:11.5px;font-weight:600;color:var(--muted);height:20px;line-height:20px;white-space:nowrap;text-align:center;flex-shrink:0;}

.brief-edit-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--light);font-size:9px;cursor:pointer;padding:0.15rem 0.35rem;line-height:1;font-family:'DM Sans',sans-serif;flex-shrink:0;transition:all 0.13s;}
.brief-edit-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-light);}

/* ── CHAT BRIEF UI ───────────────────────── */
.brief-msg{display:flex;gap:0.65rem;align-items:flex-start;animation:msgIn 0.3s ease;}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.brief-bubble{background:var(--offwhite);border-radius:2px 12px 12px 12px;padding:0.7rem 0.9rem;font-size:12.5px;line-height:1.6;color:var(--text);max-width:460px;border:1px solid var(--border);}
.brief-bubble strong{color:var(--navy);}
.brief-bubble-user{background:var(--navy);color:white;border-radius:12px 2px 12px 12px;padding:0.6rem 0.9rem;font-size:12.5px;line-height:1.55;max-width:400px;}
.brief-user-row{display:flex;justify-content:flex-end;}
.brief-avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:white;flex-shrink:0;}
.brief-opt-chip{padding:0.4rem 0.85rem;border:1.5px solid var(--border);border-radius:24px;background:white;cursor:pointer;font-size:12px;font-weight:500;color:var(--text);transition:all 0.15s;font-family:'DM Sans',sans-serif;box-shadow:0 1px 4px rgba(0,0,0,0.05);}
.brief-opt-chip:hover{border-color:var(--navy);background:var(--navy);color:white;transform:translateY(-1px);box-shadow:0 3px 8px rgba(26,29,35,0.15);}
.brief-opt-chip.skip{border-style:dashed;color:var(--muted);}
.brief-opt-chip.skip:hover{border-color:var(--muted);background:var(--offwhite);color:var(--muted);transform:none;}
.inspo-pill-wrap{display:flex;flex-wrap:wrap;gap:0.35rem;margin-top:0.5rem;}
.inspo-pill{padding:0.3rem 0.7rem;border:1.5px solid var(--border);border-radius:20px;background:white;cursor:pointer;font-size:11px;font-weight:500;color:var(--text);transition:all 0.15s;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.inspo-pill:hover{border-color:var(--navy);background:var(--navy);color:white;}
.brief-typing{display:flex;gap:4px;align-items:center;padding:0.5rem 0.7rem;}
.brief-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typingDot 1.2s infinite;}
.brief-typing span:nth-child(2){animation-delay:0.2s;}
.brief-typing span:nth-child(3){animation-delay:0.4s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:0.4;}30%{transform:translateY(-4px);opacity:1;}}
.brief-summary-tag{display:inline-flex;align-items:center;gap:3px;background:var(--navy);color:white;border-radius:4px;padding:0.15rem 0.45rem;font-size:10.5px;font-weight:500;margin:1px;}
.brief-summary-row{margin-bottom:0.35rem;display:flex;align-items:baseline;gap:0.35rem;flex-wrap:wrap;}
.brief-summary-label{font-size:9.5px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;color:var(--light);flex-shrink:0;}
.brief-progress{display:flex;gap:3px;margin-bottom:0.5rem;}
.brief-progress-dot{width:6px;height:6px;border-radius:50%;background:transparent;border:1.5px solid var(--border2);transition:all 0.3s;}
.brief-progress-dot.done{background:var(--green);border-color:var(--green);}
.brief-progress-dot.active{background:var(--red);border-color:var(--red);}
.brief-complete-banner{background:linear-gradient(135deg,var(--navy) 0%,#2d3349 100%);border-radius:10px;padding:1rem 1.25rem;margin:0.5rem 0;color:white;border:1px solid rgba(255,255,255,0.08);}
.brief-kw-tag{display:inline-flex;align-items:center;gap:3px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:white;border-radius:4px;padding:0.2rem 0.5rem;font-size:11px;margin:2px;cursor:pointer;transition:all 0.13s;}
.brief-kw-tag:hover{background:rgba(255,255,255,0.2);}
.brief-kw-tag.selected{background:var(--red);border-color:var(--red);}
/* Inspiration collection cards (Pinterest-style) */
.inspo-grid{display:flex;gap:0.5rem;margin-top:0.6rem;overflow-x:auto;padding-bottom:0.25rem;}
.inspo-card{flex:0 0 130px;height:160px;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.inspo-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.25);}
.inspo-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.7) saturate(1.1);}
.inspo-card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.15) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:0.6rem 0.7rem;}
.inspo-card-title{color:white;font-size:12px;font-weight:700;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.inspo-card-sub{color:rgba(255,255,255,0.75);font-size:9px;font-weight:500;margin-top:2px;text-transform:uppercase;letter-spacing:0.04em;}

/* ── PAGE 1 BRIEF ─────────────────────────── */
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;}
.brief-card{background:white;border-radius:10px;border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow);}
.brief-card-hd{padding:1rem 1.25rem;border-bottom:1px solid var(--border);}
.brief-card-hd.dark{background:var(--navy);}
.brief-card-hd.dark .bc-title{color:white;}
.brief-card-hd.dark .bc-sub{color:rgba(255,255,255,0.5);}
.bc-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:600;}
.bc-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.brief-form{padding:1.1rem 1.25rem;}
.fg{margin-bottom:0.9rem;}
.flabel{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);margin-bottom:0.3rem;}
.ftextarea{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:0.7rem;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--text);resize:vertical;min-height:90px;outline:none;transition:border-color 0.15s;background:var(--offwhite);}
.ftextarea:focus{border-color:var(--navy);}
.fselect{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:0.55rem 0.75rem;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--text);outline:none;background:var(--offwhite);transition:border-color 0.15s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%236b7280'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;}
.fselect:focus{border-color:var(--navy);}
.tag-wrap{border:1.5px solid var(--border);border-radius:6px;padding:0.4rem;display:flex;flex-wrap:wrap;gap:0.3rem;background:var(--offwhite);cursor:text;transition:border-color 0.15s;}
.tag-wrap:focus-within{border-color:var(--navy);}
.tag{display:inline-flex;align-items:center;gap:0.3rem;background:var(--navy);color:white;border-radius:4px;padding:0.2rem 0.45rem;font-size:11px;font-weight:500;}
.tag-x{cursor:pointer;opacity:0.6;font-size:13px;line-height:1;}
.tag-x:hover{opacity:1;}
.tag-inp{border:none;background:none;outline:none;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text);min-width:100px;flex:1;}
.qtags{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem;}
.qtag{padding:0.2rem 0.55rem;border:1px solid var(--border);border-radius:20px;font-size:11px;cursor:pointer;color:var(--muted);background:white;transition:all 0.13s;font-family:'DM Sans',sans-serif;}
.qtag:hover{border-color:var(--navy);color:var(--text);}

/* Preview strip */
.preview-section{margin-top:0;}
.filter-banner{background:var(--navy);color:white;border-radius:8px;padding:0.8rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem;font-size:12px;}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.75rem;}
.preview-card{background:white;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.18s;position:relative;}
.preview-card:hover{border-color:var(--navy);box-shadow:var(--shadow);}
.preview-card-img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top;display:block;background:var(--offwhite);transition:opacity 0.25s;}
.preview-img-wrap{width:100%;aspect-ratio:2/3;position:relative;background:var(--offwhite);overflow:hidden;}
.preview-card-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;}
.preview-card-img.loading{opacity:0;}
.preview-card-body{padding:0.4rem 0.5rem 0.5rem;}
.preview-card-name{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preview-card-color{font-size:10px;color:var(--muted);}

/* ── PAGE 2 PRODUCT SELECT ─────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.75rem;}
.product-card{background:white;border:1.5px solid var(--border);border-radius:10px;overflow:visible;cursor:pointer;transition:all 0.18s;position:relative;display:flex;flex-direction:column;}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.product-card.selected{border-color:var(--red);box-shadow:0 0 0 4px rgba(230,51,41,0.25), 0 0 16px rgba(230,51,41,0.15);border-width:2px;}
.product-card-img-wrap{width:100%;aspect-ratio:2/3;position:relative;background:var(--offwhite);overflow:hidden;border-radius:10px 10px 0 0;}
.product-card-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:opacity 0.25s;background:var(--offwhite);}
.product-card-img.loading{opacity:0;}
.product-check{display:none !important;}
.product-badge{display:none;}
/* View switcher inside product card */
.card-view-switch{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:2px;gap:1px;box-shadow:0 2px 12px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.04);z-index:4;}
.cvs-btn{padding:4px 10px;font-size:9px;font-weight:600;color:rgba(26,29,35,0.5);border:none;background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s ease;border-radius:16px;white-space:nowrap;letter-spacing:0.02em;}
.cvs-btn:hover{color:rgba(26,29,35,0.8);}
.cvs-btn.active{color:white;background:var(--navy);box-shadow:0 1px 4px rgba(26,29,35,0.25);}
.product-card-body{padding:0.65rem 0.75rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;}
.product-card-name{font-size:12.5px;font-weight:600;margin-bottom:3px;line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.product-card-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-card-deco{font-size:11px;color:var(--muted);display:flex;gap:0.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-card-deco span{display:inline-flex;align-items:center;gap:2px;}
.deco-tick{color:#4caf50;}.deco-cross{color:#ccc;}
.product-card-footer{padding:0.55rem 0.75rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;min-height:38px;flex-shrink:0;gap:0.5rem;overflow:visible;}
.product-card-footer span:first-child{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.p2-swatch-row{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow:visible;padding:4px 2px;}
.p2-swatch{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:inline-block;cursor:pointer;transition:transform 0.12s, box-shadow 0.15s;}
.p2-swatch:hover{transform:scale(1.18);}
.p2-swatch.swatch-selected{box-shadow:0 0 0 2px white, 0 0 0 4px var(--navy);border-color:transparent;}
.p2-swatch-label{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p2-swatch-more{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);transition:transform 0.12s;}
.p2-swatch-more:hover{transform:scale(1.18);}
.colour-popup-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.45);animation:cpFadeIn 0.2s ease;}
@keyframes cpFadeIn{from{opacity:0}to{opacity:1}}
.colour-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:601;background:white;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,0.22);max-height:80vh;width:min(90vw,720px);display:flex;flex-direction:column;animation:cpScaleIn 0.2s ease;}
@keyframes cpScaleIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.colour-popup-handle{display:none;}
.colour-popup-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;flex-shrink:0;border-bottom:1px solid var(--border);}
.colour-popup-title{font-size:13px;font-weight:600;color:var(--text);}
.colour-popup-close{width:28px;height:28px;border-radius:50%;background:var(--offwhite);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);flex-shrink:0;transition:background 0.12s;}
.colour-popup-close:hover{background:var(--border);}
.colour-popup-scroll{overflow-y:auto;padding:14px 16px;flex:1;}
.colour-popup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:14px 10px;}
.colour-popup-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
.colour-popup-swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform 0.12s,border-color 0.12s;flex-shrink:0;}
.colour-popup-swatch:hover{transform:scale(1.1);border-color:var(--navy);}
.colour-popup-swatch-label{font-size:9px;color:var(--muted);text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.match-pct{font-size:10px;color:var(--green);font-weight:600;white-space:nowrap;flex-shrink:0;}
.match-pct{font-size:10px;color:var(--green);font-weight:600;}
.filter-bar{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;}
.filter-chip{padding:0.28rem 0.6rem;border:1.5px solid var(--border);border-radius:5px;font-size:10.5px;font-weight:600;cursor:pointer;transition:all 0.13s;background:white;font-family:'DM Sans',sans-serif;color:var(--muted);}
.filter-chip.active{background:var(--navy);border-color:var(--navy);color:white;}
.filter-chip:hover:not(.active){border-color:var(--navy);color:var(--text);}

/* ── PAGE 3 ARTWORK ────────────────────────── */
.coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.coll-card{background:white;border:1.5px solid var(--border);border-radius:10px;overflow:visible;position:relative;transition:all 0.18s;}
.coll-card:hover{box-shadow:var(--shadow);}
.coll-card.enquiry-on{border-color:var(--red);box-shadow:0 0 0 4px rgba(230,51,41,0.25), 0 0 16px rgba(230,51,41,0.15);border-width:2px;}
.coll-img-wrap{width:100%;aspect-ratio:4/5;position:relative;background:var(--offwhite);overflow:hidden;border-radius:10px 10px 0 0;}
.coll-card-canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.coll-logo-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.coll-footer{padding:0.45rem 0.6rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);}
.coll-name{font-size:10.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:95px;}
.coll-customise-btn{font-size:10.5px;font-weight:600;color:var(--red);cursor:pointer;background:none;border:none;font-family:'DM Sans',sans-serif;padding:0;}
.coll-customise-btn-desktop{display:block;width:100%;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;color:white;background:var(--red);border:none;border-radius:20px;padding:0.4rem 0;cursor:pointer;letter-spacing:0.02em;margin-top:0.3rem;transition:background 0.15s, transform 0.15s, box-shadow 0.15s;}
.coll-customise-btn-desktop:hover{transform:scale(1.05);}
.coll-customise-btn-mobile{display:none;}
.coll-clear-btn-mobile{display:none;}
.coll-customise-btn:hover{color:var(--red-h);}
.coll-customise-btn-desktop:hover{color:white !important;}
.apply-banner{background:var(--red-light);border:1px solid rgba(230,51,41,0.2);border-radius:8px;padding:0.65rem 0.9rem;font-size:11.5px;color:var(--red);font-weight:500;display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;}

/* ── CUSTOMISE MODAL ────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:2vh 1vw;overflow-y:auto;}
.overlay.open{display:flex;}
.modal{background:white;border-radius:14px;width:min(960px,98vw);height:min(680px,92vh);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,0.25);overflow:hidden;}
.modal-hd{background:var(--navy);color:white;padding:0.9rem 1.2rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-hd-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:600;}
.modal-hd-title-mobile{display:none;}
.modal-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.12);border:none;color:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:rgba(255,255,255,0.25);}
.modal-close-done{display:none;}
.modal-body{display:grid;grid-template-columns:230px 1fr 180px;flex:1;min-height:0;overflow:hidden;}
.modal-left{background:var(--offwhite);border-right:1px solid var(--border);padding:0.9rem;overflow-y:auto;display:flex;flex-direction:column;gap:0.8rem;min-width:0;max-width:230px;}
/* Hide mobile Nike-style panels on desktop */
.mob-nike-steps,.mob-nike-panel{display:none;}
.modal-left::-webkit-scrollbar{width:3px;}
.modal-sec-title{font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;color:var(--muted);margin-bottom:0.35rem;}
.modal-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:var(--cream);position:relative;overflow:hidden;}
.modal-right{background:var(--offwhite);border-left:1px solid var(--border);padding:0.9rem;overflow-y:auto;display:flex;flex-direction:column;gap:0.5rem;}
.modal-canvas-stage{position:relative;display:inline-flex;max-width:100%;max-height:100%;box-shadow:var(--shadow-lg);border-radius:4px;overflow:hidden;}
.canvas-text-edit-input{position:absolute;z-index:50;border:2px solid var(--coral);border-radius:4px;background:rgba(255,255,255,0.95);padding:4px 8px;outline:none;text-align:center;font-weight:bold;box-shadow:0 2px 12px rgba(0,0,0,0.25);min-width:60px;}
.modal-canvas-stage canvas{display:block;max-width:100%;max-height:calc(min(680px,92vh) - 130px);}
#mOverlaySvg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.drag-hint{position:absolute;bottom:0.75rem;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);background:white;padding:0.2rem 0.6rem;border-radius:3px;border:1px solid var(--border);pointer-events:none;white-space:nowrap;opacity:0;transition:opacity 0.3s;}
.drag-hint.show{opacity:1;}
.modal-ft{padding:0.8rem 1.2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
/* Logo grid */
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.35rem;}
.logo-tile{border:1.5px solid var(--border);border-radius:4px;background:white;cursor:pointer;padding:0.3rem 0.25rem 1.1rem;transition:all 0.13s;position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;}
.logo-tile:hover{border-color:var(--navy);}
.logo-tile.active{border-color:var(--red);box-shadow:0 0 0 2px var(--red-light);}
.logo-tile svg{width:100%;height:28px;}
.logo-tname{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:0.04em;text-transform:uppercase;color:var(--light);}
/* Uploaded logo tiles */
.logo-tile-uploaded{border:1.5px solid var(--border);border-radius:4px;background:#f0f0f0;cursor:pointer;padding:0.2rem;transition:all 0.13s;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;overflow:hidden;min-width:0;}
.logo-tile-uploaded:hover{border-color:var(--navy);}
.logo-tile-uploaded.active{border-color:var(--red);box-shadow:0 0 0 2px var(--red-light);}
.logo-tile-uploaded img{max-width:100%;max-height:100%;object-fit:contain;}
.logo-tile-x{position:absolute;top:1px;right:1px;width:14px;height:14px;border-radius:50%;background:rgba(0,0,0,0.5);color:white;font-size:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity 0.13s;line-height:1;z-index:2;}
.logo-tile-uploaded:hover .logo-tile-x{opacity:1;}
.logo-tile-x:hover{background:var(--red);}
.upload-zone{border:1.5px dashed var(--border2);border-radius:6px;padding:0.65rem;text-align:center;cursor:pointer;position:relative;background:white;transition:all 0.13s;}
.upload-zone:hover{border-color:var(--navy);}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-zone p{font-size:10px;color:var(--muted);}
/* Placement */
.place-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.2rem;}
.place-btn{padding:0.25rem;border:1px solid var(--border);border-radius:3px;background:white;cursor:pointer;font-size:8.5px;font-weight:500;color:var(--muted);transition:all 0.13s;font-family:'DM Sans',sans-serif;}
.place-btn:hover{border-color:var(--navy);}
.place-btn.active{background:var(--navy);border-color:var(--navy);color:white;}
/* View tabs modal */
.view-tabs{display:flex;gap:0.25rem;}
.view-tab{flex:1;padding:0.35rem;border:1.5px solid var(--border);border-radius:4px;background:white;cursor:pointer;font-size:10px;font-weight:500;color:var(--muted);transition:all 0.13s;font-family:'DM Sans',sans-serif;text-align:center;}
.view-tab.active{background:var(--navy);border-color:var(--navy);color:white;}
/* Sliders */
.slider-row{margin-bottom:0.5rem;}
.slider-lbl{display:flex;justify-content:space-between;font-size:11px;font-weight:500;margin-bottom:0.2rem;}
.slider-lbl .sval{color:var(--red);}
input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--border);outline:none;border-radius:2px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--navy);cursor:pointer;border:2px solid white;box-shadow:0 0 0 1px var(--navy);}
/* Swatches */
.swatches{display:flex;gap:0.3rem;flex-wrap:wrap;}
.swatch{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.13s;}
.swatch:hover,.swatch.active{border-color:var(--text);transform:scale(1.15);}
/* AI Logo Generator */
.ai-gen-wrap{display:flex;flex-direction:column;gap:0.4rem;}
.ai-gen-input{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:0.45rem 0.6rem;font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--text);resize:none;min-height:48px;outline:none;background:var(--offwhite);transition:border-color 0.15s;line-height:1.45;}
.ai-gen-input:focus{border-color:var(--navy);}
.ai-gen-input::placeholder{color:var(--light);}
.ai-gen-row{display:flex;gap:0.3rem;align-items:center;flex-wrap:wrap;}
.ai-gen-style{padding:0.2rem 0.5rem;border:1px solid var(--border);border-radius:20px;font-size:10px;cursor:pointer;color:var(--muted);background:white;transition:all 0.13s;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.ai-gen-style:hover{border-color:var(--navy);color:var(--text);}
.ai-gen-style.active{background:var(--navy);border-color:var(--navy);color:white;}
.ai-gen-btn{width:100%;padding:0.45rem 0.75rem;border:none;border-radius:6px;background:linear-gradient(135deg,var(--red),#c42920);color:white;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:0.35rem;}
.ai-gen-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px);}
.ai-gen-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.ai-gen-btn svg{width:12px;height:12px;fill:white;}
.ai-gen-preview{display:grid;grid-template-columns:1fr;gap:0.3rem;margin-top:0.15rem;}
.ai-gen-tile{border:1.5px solid var(--border);border-radius:6px;background:repeating-conic-gradient(#e8e8e8 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;cursor:pointer;padding:0.35rem;min-height:80px;display:flex;align-items:center;justify-content:center;transition:all 0.13s;position:relative;overflow:hidden;}
.ai-gen-tile:hover{border-color:var(--navy);box-shadow:var(--shadow);}
.ai-gen-tile.active{border-color:var(--red);box-shadow:0 0 0 2px var(--red-light);}
.ai-gen-tile img{max-width:100%;max-height:120px;object-fit:contain;}
.ai-gen-loading{display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.6rem;color:var(--muted);font-size:10.5px;}
.ai-gen-loading .dot{width:5px;height:5px;border-radius:50%;background:var(--red);animation:genPulse 1s ease-in-out infinite;}
.ai-gen-loading .dot:nth-child(2){animation-delay:0.15s;}
.ai-gen-loading .dot:nth-child(3){animation-delay:0.3s;}
@keyframes genPulse{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);}}
.ai-gen-error{font-size:10px;color:var(--red);padding:0.25rem 0;}
.ai-gen-cost{font-size:9px;color:var(--light);text-align:center;}
/* Upload processing loader */
.upload-loader{position:absolute;inset:0;background:rgba(255,255,255,0.96);border-radius:8px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:0.6rem;z-index:20;}
.upload-loader.show{display:flex;}
.upload-loader-spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.upload-loader-msg{font-size:11px;font-weight:500;color:var(--muted);text-align:center;max-width:140px;line-height:1.4;min-height:2em;}
#mSelRect{fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 3;pointer-events:none;}
#mDragArea{fill:transparent;cursor:move;pointer-events:all;}
.rh{fill:white;stroke:var(--red);stroke-width:1.5;pointer-events:all;cursor:nwse-resize;}
.rh-tl,.rh-tr{cursor:nesw-resize;}
#mSizeTip{font-family:'DM Sans',sans-serif;font-size:9px;fill:var(--red);pointer-events:none;}

/* ── PAGE 4 REVIEW ─────────────────────────── */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem;}
.review-card{background:white;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 52px - 52px - 2.5rem);}
.review-card-img{width:100%;aspect-ratio:2/3;background:var(--offwhite);position:relative;overflow:hidden;flex:1 1 auto;min-height:0;}
.review-card-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.review-card-body{padding:0.7rem 0.75rem;flex-shrink:0;}
.review-card-name{font-size:12px;font-weight:600;margin-bottom:0.1rem;}
.review-card-color{font-size:11px;color:var(--muted);margin-bottom:0.5rem;}
.qty-row{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.5rem;}
.qty-lbl{font-size:11px;color:var(--muted);flex:1;}
.qty-ctrl{display:flex;align-items:center;gap:0.35rem;}
.qty-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);background:white;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;font-weight:600;transition:all 0.13s;}
.qty-btn:hover{border-color:var(--navy);}
.qty-val{font-size:13px;font-weight:700;min-width:18px;text-align:center;}
.size-pills{display:flex;gap:0.25rem;flex-wrap:wrap;}
.sz-pill{padding:0.15rem 0.4rem;border:1.5px solid var(--border);border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;transition:all 0.13s;font-family:'DM Sans',sans-serif;}
.sz-pill.on{background:var(--navy);border-color:var(--navy);color:white;}
/* Contact form */
.order-summary-card{display:none;}
.contact-card{background:white;border:1.5px solid var(--border);border-radius:10px;padding:1.25rem;}
.contact-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:600;margin-bottom:1rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}
.form-field{display:flex;flex-direction:column;gap:0.3rem;}
.form-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);}
.form-inp{border:1.5px solid var(--border);border-radius:6px;padding:0.55rem 0.7rem;font-family:'DM Sans',sans-serif;font-size:13px;outline:none;background:var(--offwhite);transition:border-color 0.15s;}
.form-inp:focus{border-color:var(--navy);}

/* Clear artwork button on collection cards */
.coll-clear-btn{font-size:9.5px;font-weight:600;color:var(--muted);cursor:pointer;background:none;border:1px solid var(--border);font-family:'DM Sans',sans-serif;padding:0.15rem 0.45rem;border-radius:4px;transition:all 0.13s;white-space:nowrap;}
.coll-clear-btn:hover{color:var(--red);border-color:var(--red);background:var(--red-light);}
.coll-clear-canvas{position:absolute;bottom:36px;right:8px;z-index:5;background:white;border:1.5px solid var(--border);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0;font-size:13px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,0.10);}
.coll-clear-canvas:hover{border-color:var(--red);background:var(--red);color:white;box-shadow:0 2px 8px rgba(230,51,41,0.3);}
/* Remove all / start over bar */
.artwork-actions-bar{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;}
/* Enquiry selection on page 3 cards */
.coll-card .enquiry-check{display:none !important;}
/* Duplicate card button (top-left circle) */
.coll-card .dup-btn{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:white;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.10);padding:0;}
.coll-card .dup-btn:hover{border-color:var(--navy);background:var(--navy);box-shadow:0 2px 8px rgba(26,29,35,0.25);}
.coll-card .dup-btn:hover svg{stroke:white;}
.coll-card .dup-btn svg{width:12px;height:12px;stroke:var(--muted);stroke-width:2;fill:none;}
/* Remove duplicate button (top-left, replaces dup-btn on cloned cards) */
.coll-card .dup-remove-btn{position:absolute;top:8px;left:36px;width:24px;height:24px;border-radius:50%;background:white;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.10);padding:0;}
.coll-card .dup-remove-btn svg{width:12px;height:12px;stroke:var(--muted);stroke-width:2;fill:none;}
.coll-card .dup-remove-btn:hover{border-color:var(--red);background:var(--red);box-shadow:0 2px 8px rgba(230,51,41,0.3);}
.coll-card .dup-remove-btn:hover svg{stroke:white;}
.enquiry-bar{display:none;align-items:center;gap:0.6rem;padding:0.65rem 0.9rem;background:var(--navy);color:white;border-radius:8px;margin-bottom:1rem;font-size:12px;}
.enquiry-bar .enq-count{font-weight:700;font-size:13px;}
/* Size-qty grid in review — 3×2 grid */
.size-qty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:0.4rem;}
.size-qty-item{display:flex;align-items:center;justify-content:space-between;background:var(--offwhite);border-radius:6px;padding:0.25rem 0.3rem;border:1px solid var(--border);transition:all 0.13s;overflow:hidden;gap:2px;min-height:28px;}
.size-qty-item.has-qty{border-color:var(--navy);background:rgba(26,29,35,0.04);}
.size-qty-item .sq-label{font-size:9px;font-weight:700;color:var(--muted);text-align:center;min-width:0;flex-shrink:0;}
.size-qty-item.has-qty .sq-label{color:var(--navy);}
.size-qty-item .sq-ctrl{display:flex;align-items:center;gap:0;flex-shrink:1;min-width:0;}
.sq-btn{width:20px;height:20px;min-width:20px;border-radius:50%;border:1px solid var(--border);background:white;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700;transition:all 0.13s;font-family:'DM Sans',sans-serif;color:var(--text);padding:0;line-height:1;flex-shrink:0;}
.sq-btn:hover{border-color:var(--navy);background:var(--offwhite);}
.sq-val-input{width:22px;text-align:center;border:none;background:transparent;font-size:10px;font-weight:700;font-family:'DM Sans',sans-serif;color:var(--text);outline:none;padding:0;-moz-appearance:textfield;flex-shrink:1;min-width:14px;}
.sq-val-input::-webkit-outer-spin-button,.sq-val-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.sq-mob-ctrl{display:none;}
/* Review card logo overlay canvas */
.review-logo-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
/* View-all toggle bar */
.mob-p2-view-bar-wrap{display:none;}
.view-all-bar{display:flex;align-items:center;gap:0.3rem;}
.view-all-btn{padding:0.28rem 0.6rem;border:1.5px solid var(--border);border-radius:5px;font-size:10.5px;font-weight:600;cursor:pointer;transition:all 0.13s;background:white;font-family:'DM Sans',sans-serif;color:var(--muted);}
.view-all-btn.active{background:var(--navy);border-color:var(--navy);color:white;}
.view-all-btn:hover:not(.active){border-color:var(--navy);color:var(--text);}
/* Modal remove buttons */
.modal-remove-row{display:flex;gap:0.35rem;margin-top:0.4rem;}
.modal-remove-btn{font-size:10px;font-weight:500;padding:0.3rem 0.55rem;border:1px solid var(--border);border-radius:4px;background:white;cursor:pointer;color:var(--muted);transition:all 0.13s;font-family:'DM Sans',sans-serif;}
.modal-remove-btn:hover{color:var(--red);border-color:var(--red);background:var(--red-light);}
.btn-remove-footer{font-size:11px;padding:0.45rem 0.75rem;border:1px solid var(--border);border-radius:6px;background:white;cursor:pointer;color:var(--muted);transition:all 0.15s;font-family:'DM Sans',sans-serif;font-weight:500;white-space:nowrap;}
.btn-remove-footer:hover{color:var(--red);border-color:var(--red);background:var(--red-light);}
/* Sidebar order items */
.sidebar-item{display:flex;justify-content:space-between;font-size:11.5px;padding:0.35rem 0;border-bottom:1px solid var(--border);}
.sidebar-item:last-child{border-bottom:none;}

/* Success */
.success-overlay{position:fixed;inset:0;background:var(--navy);z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;padding:2rem;}
.success-overlay.show{display:flex;}
.success-icon{width:80px;height:80px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:36px;animation:popIn 0.4s ease;}
@keyframes popIn{0%{transform:scale(0);}80%{transform:scale(1.1);}100%{transform:scale(1);}}
.success-title{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;margin-bottom:0.75rem;}
.success-sub{font-size:14px;color:rgba(255,255,255,0.6);max-width:420px;line-height:1.6;}

/* ── Create Account popup on success screen ── */
.acct-popup-overlay{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;animation:cpFadeIn 0.2s ease;}
.acct-popup-overlay.open{display:flex;}
.acct-popup{background:white;border-radius:14px;width:min(400px,90vw);box-shadow:0 8px 40px rgba(0,0,0,0.3);overflow:hidden;animation:acctPopIn 0.25s ease;}
@keyframes acctPopIn{from{opacity:0;transform:scale(0.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.acct-popup-header{background:var(--navy);padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;}
.acct-popup-header h3{font-family:'Playfair Display',serif;font-size:16px;font-weight:600;color:white;margin:0;}
.acct-popup-close{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.12);border:none;color:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}
.acct-popup-close:hover{background:rgba(255,255,255,0.25);}
.acct-popup-body{padding:1.5rem 1.4rem;}
.acct-popup-body p{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 1.2rem;}
.acct-popup-body .acct-email-display{font-size:13px;color:var(--text);font-weight:600;background:var(--offwhite);border:1px solid var(--border);border-radius:8px;padding:0.6rem 0.85rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem;}
.acct-popup-body .acct-email-display svg{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
.acct-popup-body .acct-pw-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:0.4rem;display:block;}
.acct-popup-body .acct-pw-field{position:relative;margin-bottom:0.3rem;}
.acct-popup-body .acct-pw-inp{width:100%;padding:0.6rem 2.5rem 0.6rem 0.85rem;border:1px solid var(--border);border-radius:8px;font-size:13px;outline:none;transition:border-color 0.15s;box-sizing:border-box;}
.acct-popup-body .acct-pw-inp:focus{border-color:var(--navy);}
.acct-popup-body .acct-pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;display:flex;align-items:center;}
.acct-popup-body .acct-pw-hint{font-size:11px;color:var(--light);margin:0 0 1rem;}
.acct-popup-body .acct-pw-error{font-size:11px;color:var(--red);margin:0 0 0.6rem;display:none;}
.acct-popup-body .acct-create-btn{width:100%;padding:0.7rem;border:none;border-radius:8px;background:var(--navy);color:white;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;}
.acct-popup-body .acct-create-btn:hover{background:var(--navy2);}
.acct-popup-body .acct-create-btn:disabled{opacity:0.5;cursor:not-allowed;}
.acct-popup-body .acct-skip{display:block;text-align:center;margin-top:0.85rem;font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none;text-decoration:underline;text-underline-offset:2px;}
.acct-popup-body .acct-skip:hover{color:var(--text);}
/* Success state inside the popup */
.acct-popup-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.4rem;}
.acct-popup-success.show{display:flex;}
.acct-popup-success .acct-success-icon{width:56px;height:56px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:24px;color:white;animation:popIn 0.4s ease;}
.acct-popup-success h4{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--text);margin:0 0 0.5rem;}
.acct-popup-success p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 1.2rem;max-width:300px;}
.acct-popup-success .acct-done-btn{padding:0.6rem 2rem;border:none;border-radius:8px;background:var(--navy);color:white;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;}
.acct-popup-success .acct-done-btn:hover{background:var(--navy2);}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE — Pinterest-style landing
   ═══════════════════════════════════════════════════════ */
#pageHome{background:var(--offwhite);overflow:hidden;}
#pageHome.active{display:flex;flex-direction:column;}
.home-topbar{background:var(--navy);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;flex-shrink:0;z-index:100;}
.home-brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:white;letter-spacing:-0.01em;}
.home-brand span{color:var(--red);}
.home-tagline{font-size:11.5px;color:rgba(255,255,255,0.5);font-weight:400;letter-spacing:0.03em;}
.home-nav-links{display:flex;align-items:center;gap:1.5rem;}
.home-nav-link{font-size:12px;color:rgba(255,255,255,0.55);font-weight:500;cursor:pointer;transition:color 0.15s;text-decoration:none;}
.home-nav-link:hover{color:white;}
.home-start-btn{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;padding:0.45rem 1.1rem;border-radius:6px;border:none;background:var(--red);color:white;cursor:pointer;transition:all 0.15s;}
.home-start-btn:hover{background:var(--red-h);}

.home-hero{padding:0.75rem 2rem 0.5rem;text-align:center;flex-shrink:0;}
.home-hero-title{font-family:'Playfair Display',serif;font-size:clamp(22px,2.5vw,32px);font-weight:700;color:var(--navy);line-height:1.15;margin-bottom:0.35rem;}
.home-hero-title span{color:var(--red);}
.home-hero-sub{font-size:13px;color:var(--muted);max-width:520px;margin:0 auto;line-height:1.5;}

.home-scroll-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 2rem 3rem;}
.home-scroll-area::-webkit-scrollbar{width:4px;}
.home-scroll-area::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

/* Masonry layout — CSS columns for true Pinterest stagger */
.home-masonry{column-count:5;column-gap:14px;max-width:1500px;margin:0 auto;padding:6px;}
.home-card{break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;transition:transform 0.35s cubic-bezier(0.4,0,0.2,1),box-shadow 0.35s ease,opacity 0.4s ease,filter 0.4s ease;box-shadow:0 2px 12px rgba(0,0,0,0.1);display:inline-block;width:100%;}
.home-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.18);}
.home-card-img{width:100%;display:block;object-fit:cover;background:var(--navy);}
.home-card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.15) 35%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;transition:background 0.3s ease;}
.home-card:hover .home-card-overlay{background:linear-gradient(0deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.05) 100%);}
.home-card-tag{position:absolute;top:12px;left:12px;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;background:rgba(255,255,255,0.92);color:var(--navy);padding:0.25rem 0.6rem;border-radius:20px;backdrop-filter:blur(4px);}
.home-card-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:white;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,0.4);}
.home-card-sub{font-size:11.5px;color:rgba(255,255,255,0.75);margin-top:4px;font-weight:400;}
.home-card-arrow{position:absolute;bottom:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s,transform 0.3s;transform:translateX(-4px);}
.home-card:hover .home-card-arrow{opacity:1;transform:translateX(0);}
.home-card-arrow svg{width:14px;height:14px;fill:white;}

/* Active/expanded card gets highlighted ring + glow + subtle dark overlay */
.home-card.home-active{box-shadow:0 0 0 3px var(--red),0 0 30px rgba(230,51,41,0.3),0 12px 40px rgba(0,0,0,0.2);transform:translateY(-2px);z-index:2;}
.home-card.home-active .home-card-overlay{background:linear-gradient(0deg,rgba(230,51,41,0.75) 0%,rgba(0,0,0,0.5) 40%,rgba(0,0,0,0.35) 100%);}

/* Hidden cards when a collection is expanded */
.home-card.home-collapsed{display:none !important;}

/* Product tiles shown inline in masonry */
.home-product-tile{break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;display:inline-block;width:100%;box-shadow:0 2px 12px rgba(0,0,0,0.12);transition:transform 0.25s,box-shadow 0.25s;animation:prodTileIn 0.4s cubic-bezier(0.4,0,0.2,1) both;}
.home-product-tile:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,0.22);border:2px solid rgba(255,255,255,0.6);}
.home-product-tile-arrow{position:absolute;bottom:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.25s,transform 0.25s,background 0.25s;transform:translateX(-4px);z-index:2;}
.home-product-tile:hover .home-product-tile-arrow{opacity:1;transform:translateX(0);}
.home-product-tile:hover .home-product-tile-arrow:hover{background:var(--red);}
.home-product-tile-arrow svg{width:13px;height:13px;fill:white;}
@keyframes prodTileIn{from{opacity:0;transform:translateY(16px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.home-product-tile img{width:100%;display:block;object-fit:cover;background:var(--navy);}
.home-product-tile-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.1) 35%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;}
.home-product-tile-title{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:white;line-height:1.2;text-shadow:0 2px 6px rgba(0,0,0,0.4);}
.home-product-tile-sub{font-size:10.5px;color:rgba(255,255,255,0.7);margin-top:3px;}

/* View Collection button tile */
.home-cta-tile{break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;display:inline-block;width:100%;background:var(--red);cursor:pointer;transition:all 0.25s;animation:prodTileIn 0.4s cubic-bezier(0.4,0,0.2,1) both;text-align:center;padding:2rem 1rem;min-height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.home-cta-tile:hover{background:var(--red-h);transform:translateY(-3px);box-shadow:0 10px 32px rgba(230,51,41,0.3);}
.home-cta-tile-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:white;}
.home-cta-tile-sub{font-size:11px;color:rgba(255,255,255,0.75);margin-top:4px;}

/* Return to all collections tile */
.home-back-tile{break-inside:avoid;margin-bottom:16px;border-radius:14px;overflow:hidden;display:inline-block;width:100%;background:var(--navy);cursor:pointer;transition:all 0.25s;animation:prodTileIn 0.4s cubic-bezier(0.4,0,0.2,1) both;text-align:center;padding:2rem 1rem;min-height:185px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,0.12);}
.home-back-tile:hover{background:var(--navy2);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,0.25);border-color:rgba(255,255,255,0.25);}
.home-back-tile-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;color:white;}
.home-back-tile-sub{font-size:11px;color:rgba(255,255,255,0.5);margin-top:4px;}

/* "Build your own" card */
.home-card-custom{background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.5rem;min-height:260px;}
.home-card-custom .home-custom-icon{width:52px;height:52px;border-radius:50%;border:2px dashed rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:border-color 0.3s,transform 0.3s;}
.home-card:hover .home-custom-icon{border-color:var(--red);transform:scale(1.08);}
.home-custom-icon svg{width:24px;height:24px;fill:none;stroke:rgba(255,255,255,0.6);stroke-width:2;stroke-linecap:round;}
.home-card-custom .home-custom-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:white;margin-bottom:0.4rem;}
.home-card-custom .home-custom-sub{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.5;}
.home-card:hover .home-custom-title{color:var(--red);}

/* ═══════════════════════════════════════════════════════
   MOBILE STYLES — only applies ≤ 768px, desktop unchanged
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide hover-back image on mobile */
  .p2-hover-back { display: none !important; }
  /* Hide desktop AI FAB and popup on mobile */
  .desktop-ai-fab, .desktop-ai-popup { display: none !important; }
  /* Step 3: show mobile wrap, hide desktop split */
  .p3-mobile-wrap { display: block !important; }
  .p3-desktop-split { display: none !important; }
  #page3.active { overflow: visible !important; }

  /* ── Base body — allow natural scroll on mobile ─── */
  body {
    overflow-y: auto !important;
    overflow-x: hidden;
    font-size: 14px;
    height: auto !important;
    min-height: 100dvh;
  }
  html { height: auto; min-height: 100dvh; }

  /* ── Pages — natural height, no overflow clip ───── */
  .page { height: auto !important; overflow: visible !important; min-height: 100dvh; }

  /* ── Homepage mobile ───────────────────────────── */
  .home-topbar{height:50px;padding:0 1rem;}
  .home-brand{font-size:18px;}
  .home-tagline{display:none;}
  .home-nav-links{gap:0.75rem;}
  .home-nav-link{display:none;}
  .home-hero{padding:1.5rem 1rem 1rem;}
  .home-hero-title{font-size:26px;}
  .home-hero-sub{font-size:13px;}
  .home-scroll-area{padding:0 0.75rem 2rem;}
  .home-masonry{column-count:2;column-gap:10px;}
  .home-card{margin-bottom:10px;border-radius:10px;}
  .home-card-overlay{opacity:1;background:linear-gradient(0deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.02) 40%,transparent 100%);}
  .home-card-arrow{opacity:1;transform:translateX(0);width:28px;height:28px;bottom:10px;right:10px;}
  .home-card-title{font-size:14px;}
  .home-card-sub{font-size:10px;}
  .home-card-custom{min-height:200px;padding:1.5rem 1rem;}
  .home-card-custom .home-custom-title{font-size:15px;}
  .home-card-custom .home-custom-sub{font-size:11px;}
  #pageHome.active{min-height:100dvh;height:auto !important;overflow:visible !important;}
  #pageHome .home-scroll-area{overflow:visible;flex:none;}
  .home-product-tile{margin-bottom:10px;border-radius:10px;}
  .home-product-tile-title{font-size:12px;}
  .home-cta-tile{margin-bottom:10px;border-radius:10px;padding:2rem 0.75rem;min-height:185px;}
  .home-cta-tile-title{font-size:14px;}
  .home-back-tile{margin-bottom:10px;border-radius:10px;padding:2rem 0.75rem;min-height:185px;}
  .home-back-tile-title{font-size:14px;}

  /* ── Top Nav — scrolls away with page ─────────────── */
  .topnav {
    height: auto;
    min-height: 48px;
    padding: 0 0.75rem;
    flex-wrap: nowrap;
    gap: 0;
    position: static !important;
  }
  /* Hide desktop steps text in nav, show compact step dots */
  .nav-steps { display: none !important; }
  /* Brand stays centred */
  .nav-brand {
    position: static;
    transform: none;
    flex: 1;
    text-align: center;
    font-size: 16px;
  }
  /* Mobile step indicator — STICKY at top, stays when topnav scrolls away */
  .mobile-steps-bar {
    display: flex !important;
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,0.08);
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mobile-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.25rem;
    gap: 3px;
    color: rgba(255,255,255,0.4);
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.07);
    transition: color 0.15s;
  }
  .mobile-step:last-child { border-right: none; }
  .mobile-step.active { color: white; }
  .mobile-step.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--red);
  }
  .mobile-step.done { color: rgba(255,255,255,0.65); }
  .mobile-step-num {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700;
  }
  .mobile-step.active .mobile-step-num { background: var(--red); }
  .mobile-step.done .mobile-step-num { background: var(--green); font-size: 9px; }
  .mobile-step-label { white-space: nowrap; font-size: 8.5px; letter-spacing: 0.01em; }

  /* ── Hide left sidebar & right chat panel entirely ─── */
  .left-panel,
  .right-panel { display: none !important; }

  /* ── Workspace: single-column, full width ────────── */
  .workspace {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    overflow: visible !important;
    flex: unset !important;
    min-height: 0;
  }
  #p1workspace {
    grid-template-columns: unset !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    flex: unset !important;
  }

  /* ── Centre panel — natural height, no overflow clip ── */
  .centre-panel {
    flex: unset !important;
    min-height: 0;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
  }
  .centre-header {
    height: auto;
    min-height: 48px;
    padding: 0.6rem 0.85rem;
    flex-wrap: wrap;
    gap: 0.4rem;
    position: static !important;
  }
  .centre-title { font-size: 13px; }
  .centre-sub { font-size: 10px; }
  .centre-body {
    flex: unset !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem;
    padding-bottom: 5rem;
  }

  /* Hide page 1 "Build Your Collection" header on mobile */
  .mob-hide-p1-header { display: none !important; }

  /* Mobile continue row (start over + continue) */
  #mobP1ContinueRow { display: none; }
  #mobP1ContinueRow.show { display: flex !important; }

  /* ── Base body ─────── override offwhite to white on mobile ── */
  body { background: white !important; }

  /* ── Page 1 brief chat ───────────────────────────── */
  #chatBriefPanel { flex: unset !important; min-height: 0; overflow: visible !important; }
  #chatBriefBody { height: auto !important; overflow: visible !important; flex: unset !important; }
  #briefScrollArea { overflow: visible !important; flex: unset !important; }
  #briefChatMessages { padding: 1rem 0.85rem 0.5rem; gap: 0.85rem; }
  .brief-bubble { font-size: 13px; max-width: 88%; }
  .brief-bubble-user { font-size: 13px; max-width: 85%; }
  .brief-opt-chip { font-size: 13px; padding: 0.55rem 1rem; }
  .inspo-card { flex: 0 0 115px; height: 145px; }
  .inspo-card-title { font-size: 11.5px; }
  /* ── Page 1 brief chat input — fixed to bottom ────── */
  #briefChatInputArea {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    padding: 0.6rem 0.75rem;
    padding-bottom: calc(0.6rem + max(env(safe-area-inset-bottom), 10px));
    background: white;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  }
  /* Space at bottom of chat so content isn't hidden behind fixed bar — updated dynamically by mobSyncInputPad() */
  #briefScrollArea {
    padding-bottom: 120px;
  }
  /* Make page 1 chat area all white */
  #chatBriefPanel,
  #chatBriefBody,
  #briefScrollArea,
  #briefChatMessages {
    background: white !important;
  }

  /* Page 1 — hide right matched products panel (shown as badge) */
  #p1RightPanel { display: none !important; }

  /* Page 1 continue footer needs to be visible above chat fab */
  #p1ContinueFooter {
    padding: 0.65rem 0.85rem !important;
    padding-bottom: calc(0.65rem + max(env(safe-area-inset-bottom), 10px)) !important;
  }

  /* ── Product grid — 2 cols on mobile ─────────────── */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }
  .product-card-body { height: auto; min-height: 60px; padding: 0.5rem 0.6rem; }
  .product-card-name { font-size: 12px; }
  .product-card-meta { font-size: 10px; }
  .product-card-deco { font-size: 10px; }
  .product-card-footer { height: auto; padding: 0.4rem 0.6rem; }

  /* View-all bar wraps nicely */
  .view-all-bar { gap: 0.25rem; flex-wrap: wrap; }
  .view-all-btn { padding: 0.3rem 0.5rem; font-size: 10px; }

  /* Filter chips */
  #filterBar { gap: 0.3rem; }
  .filter-chip { font-size: 10px; padding: 0.25rem 0.5rem; }

  /* ── Collection grid (page 3) — 2 cols ───────────── */
  .coll-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem;
  }
  .coll-name { max-width: 80px; font-size: 10px; }

  /* ── Review grid (page 4) — 1 col ───────────────── */
  .review-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
  }

  /* ── Page 4: snap-scroll card viewport on mobile ── */
  /*
     On mobile the page uses natural document scroll (body overflow-y:auto, page height:auto).
     We override just the page-4 centre-body to be a fixed, full-screen scroller so
     one card occupies exactly one viewport at a time.
     Chrome = 48px topnav (scrolls away) + 52px sticky steps bar (stays)
     Bottom = fixed sticky bar ~72px + safe area
  */
  #page4 .centre-body {
    /* Override the generic mobile centre-body (overflow:visible, flex:unset) */
    position: fixed !important;
    top: 52px !important;          /* sticky steps bar height */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    padding: 0 !important;
    padding-bottom: calc(72px + max(env(safe-area-inset-bottom), 10px)) !important;
    background: var(--offwhite);
    z-index: 10;
  }
  /* Hide topnav on page 4 mobile — steps bar provides navigation */
  #page4 .topnav { display: none !important; }

  /* When page4 is active, prevent body from also scrolling */
  #page4.active ~ * { pointer-events: none; }

  #page4 .review-grid {
    gap: 0;
    margin-bottom: 0;
    padding: 0;
  }

  #page4 .review-card {
    /* Each card fits viewport: steps bar (52px) + bottom sticky bar (~70px) + safe area */
    height: calc(100dvh - 52px - 70px - max(env(safe-area-inset-bottom), 10px));
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
    margin: 0;
  }

  /* Image fills remaining space after the card body */
  #page4 .review-card-img {
    aspect-ratio: unset !important;
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
  }

  /* Body sits at the bottom of the card, fixed size */
  #page4 .review-card-body {
    flex-shrink: 0;
    padding: 0.65rem 0.85rem 0.75rem;
    border-top: 1px solid var(--border);
    background: white;
  }
  #page4 .review-card-name { font-size: 13px; margin-bottom: 0.1rem; }
  #page4 .review-card-color { margin-bottom: 0.35rem; }
  #page4 .size-qty-grid { gap: 5px; margin-top: 0.3rem; }
  #page4 .size-qty-item { min-height: 36px; padding: 0.25rem 0.35rem; }

  /* Order summary card — mobile only */
  #page4 .order-summary-card {
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    margin: 0;
    min-height: calc(100dvh - 52px - 70px - max(env(safe-area-inset-bottom), 10px));
  }
  .order-summary-card .contact-title { margin-bottom: 0.75rem; }
  .os-table { width: 100%; border-collapse: collapse; }
  .os-table th { text-align: left; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
  .os-table th:last-child { text-align: right; }
  .os-table td { font-size: 12px; color: var(--text); padding: 0.5rem 0; border-bottom: 1px solid var(--offwhite); }
  .os-table td:last-child { text-align: right; font-weight: 600; }
  .os-sizes { font-size: 10px; color: var(--muted); margin-top: 2px; }
  .os-total-row td { font-weight: 700; border-top: 1.5px solid var(--border); border-bottom: none; font-size: 13px; padding-top: 0.65rem; }

  /* Contact card sits below order summary in the same scroll container */
  #page4 .contact-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0;
    min-height: calc(100dvh - 52px - 70px - max(env(safe-area-inset-bottom), 10px));
  }
  .contact-card { padding: 1rem; }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem;
  }

  /* ── Size-qty grid: mobile — label | number | dropdown arrow ── */
  .size-qty-grid { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .size-qty-item {
    padding: 0.3rem 0.5rem;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
  }
  .sq-ctrl { display: none !important; }
  .sq-label { font-size: 11px; flex-shrink: 0; }
  .sq-mob-ctrl {
    display: flex !important;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    gap: 0;
    position: relative;
  }
  .sq-mob-input {
    width: 0;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    outline: none;
    padding: 0;
    -moz-appearance: textfield;
  }
  .sq-mob-input::-webkit-outer-spin-button,
  .sq-mob-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .size-qty-item.has-qty .sq-mob-input { color: var(--navy); }
  /* Arrow wrapper with invisible select overlay */
  .sq-mob-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    font-size: 14px;
    color: var(--muted);
  }
  .size-qty-item.has-qty .sq-mob-arrow { color: var(--navy); }
  .sq-mob-dropdown {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  /* ── Customize Modal — full-screen bottom sheet on mobile ── */
  .overlay {
    align-items: stretch !important;
    padding: 0 !important;
    background: rgba(0,0,0,0.7) !important;
  }
  .modal {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .modal-hd {
    padding: 0.8rem 1rem;
    border-radius: 0;
    flex-shrink: 0;
  }
  .modal-hd-title { font-size: 13px; }
  .modal-hd-title-desktop { display: none; }
  .modal-hd-title-mobile { display: inline; }
  .modal-close-done {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    border-radius: 20px !important;
    background: var(--red) !important;
    color: white !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  .modal-close-done:active { opacity: 0.8; }

  /* Stack: canvas FIRST, then controls below — using order */
  .modal-body {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }
  /* Canvas goes first (order: 1) */
  .modal-canvas-wrap {
    order: 1;
    min-height: 240px;
    max-height: 42dvh;
    flex-shrink: 0;
    padding: 0.75rem;
    background: var(--cream);
    flex-direction: column;
  }
  .modal-canvas-wrap.mob-canvas-expand {
    flex: 1;
    max-height: none;
  }
  .modal-canvas-stage canvas {
    max-height: calc(42dvh - 1.5rem) !important;
  }

  .mob-canvas-expand .modal-canvas-stage canvas {
    max-height: calc(100dvh - 230px) !important;
  }
  /* Controls panel goes second (order: 2) */
  .modal-left {
    order: 2;
    border-right: none !important;
    border-top: 1px solid var(--border);
    padding: 0;
    flex-direction: column;
    gap: 0;
    overflow-y: visible;
    max-width: none !important;
  }

  /* ── Hide sample logos entirely on mobile ── */
  .mob-hide-sample-logos { display: none !important; }
  #mDragHint { display: none !important; }
  /* ── Hide inline "Your Logos" state on mobile — access via FAB instead ── */
  .mob-hide-has-logos { display: none !important; }

  /* ── Hide old action tiles on mobile (replaced by Nike-style steps) ── */
  .mob-logo-actions { display: none !important; }
  .mob-ai-prompt-panel { display: none !important; }
  .mob-uploads-section { display: none !important; }

  /* ══════════════════════════════════════════════
     NIKE ID-STYLE MOBILE CUSTOMISER
  ══════════════════════════════════════════════ */

  /* Step navigator bar — like "Logo 1/2" with arrows */
  .mob-nike-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: white;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mob-nike-step-arrow {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
  }
  .mob-nike-step-arrow:active { background: var(--offwhite); }
  .mob-nike-step-arrow:disabled, .mob-nike-step-arrow[disabled] {
    opacity: 0.25;
    cursor: default;
  }
  .mob-nike-step-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    flex: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }
  .mob-nike-step-label span {
    display: inline;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    margin-top: 0;
  }

  /* Step panels — each is a scrollable panel */
  .mob-nike-panel {
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    background: var(--white);
  }
  .mob-nike-panel.active { display: flex; }

  /* ── STEP 1: Logo choice buttons ── */
  .mob-nike-logo-btns {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 1rem 0;
  }
  .mob-nike-logo-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 0.5rem;
    border-radius: 30px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--text);
    background: white;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
    position: relative;
  }
  .mob-nike-logo-btn.primary {
    background: var(--text);
    color: white;
  }
  .mob-nike-logo-btn:active { opacity: 0.8; }
  .mob-nike-logo-btn input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  .mob-nike-logo-btn svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
  }

  /* AI generate sub-panel inside step 1 */
  /* ── Logo choice screen ── */
  .mob-nike-logo-choice {
    padding: 0.85rem 1rem 0;
  }
  .mob-nike-choice-hint {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 0.75rem;
    line-height: 1.4;
  }
  /* Hide hint text on logo upload step (panel 1) so garment image gets more space */
  #mobNikePanel1 .mob-nike-choice-hint { display: none; }
  #mobNikePanel1 .mob-nike-logo-choice { padding-top: 0.25rem; }
  /* Hide hint text on placement step (panel 2) too */
  #mobNikePanel2 .mob-nike-choice-hint { display: none; }
  #mobNikePanel2 .mob-nike-logo-choice { padding-top: 0.25rem; }

  /* ── Loading spinner & animated text ── */
  .mob-nike-upload-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem;
  }
  .mob-nike-loading-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: mobNikeSpin 0.8s linear infinite;
    flex-shrink: 0;
  }
  @keyframes mobNikeSpin { to { transform: rotate(360deg); } }
  .mob-nike-loading-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
  }

  /* ── AI panel ── */
  /* Old inline AI panel — no longer used on mobile */
  .mob-nike-ai-panel { display: none !important; }

  /* ══ AI Generate bottom sheet ══ */
  .mob-ai-gen-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .mob-ai-gen-backdrop.open {
    pointer-events: all;
    opacity: 1;
  }
  .mob-ai-gen-sheet {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    max-height: 80dvh;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    z-index: 601;
  }
  .mob-ai-gen-backdrop.open .mob-ai-gen-sheet {
    transform: translateY(0);
  }
  .mob-ai-gen-handle {
    display: block;
    height: 4px; width: 36px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .mob-ai-gen-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mob-ai-gen-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .mob-ai-gen-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--offwhite);
    border: none; cursor: pointer;
    font-size: 16px;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s;
  }
  .mob-ai-gen-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
  }
  .mob-ai-gen-body .ai-gen-input {
    font-size: 14px;
    min-height: 100px;
    border-radius: 12px;
    padding: 0.85rem;
    border: 1.5px solid var(--border);
    font-family: 'DM Sans', sans-serif;
    resize: none;
  }
  .mob-ai-gen-body .ai-gen-input:focus {
    border-color: var(--navy);
    outline: none;
  }
  .mob-ai-gen-body .ai-gen-row { flex-wrap: wrap; gap: 0.35rem; }
  .mob-ai-gen-body .ai-gen-btn {
    font-size: 14px;
    padding: 0.8rem;
    border-radius: 10px;
    width: 100%;
  }

  /* AI generate success state */
  .mob-ai-gen-success-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 16px;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    animation: mobAiSuccessFadeIn 0.4s ease;
    overflow: visible;
  }
  .mob-ai-gen-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
    animation: mobAiSuccessFadeIn 0.4s ease;
  }
  @keyframes mobAiSuccessFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .mob-ai-gen-success-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
  }
  .mob-ai-gen-success-icon svg {
    width: 20px; height: 20px;
  }
  .mob-ai-gen-success-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
  }
  .mob-ai-gen-success-img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    border-radius: 12px;
    background: var(--offwhite);
    border: 2px solid var(--border);
    padding: 6px;
  }
  .mob-ai-gen-success-btns {
    display: flex;
    gap: 0.65rem;
    width: 100%;
    padding-top: 0.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
  }
  .mob-ai-gen-success-btns .mob-nike-logo-btn {
    font-size: 13px;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .mob-ai-gen-success-btns .mob-ai-gen-done-btn {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: white !important;
  }
  .mob-ai-gen-success-btns .mob-ai-gen-done-btn:active {
    background: var(--red-h) !important;
  }

  /* ── Text / Number bottom sheet ── */
  .mob-text-sheet-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .mob-text-sheet-backdrop.open {
    pointer-events: all;
    opacity: 1;
  }
  .mob-text-sheet {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    max-height: 70dvh;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    z-index: 601;
  }
  .mob-text-sheet-backdrop.open .mob-text-sheet {
    transform: translateY(0);
  }
  .mob-text-sheet-handle {
    display: block;
    height: 4px; width: 36px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .mob-text-sheet-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mob-text-sheet-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
  }
  .mob-text-sheet-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--offwhite);
    border: none; cursor: pointer;
    font-size: 16px;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
  }
  .mob-text-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
  }
  .mob-text-sheet-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }
  .mob-text-sheet-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    outline: none;
    background: var(--offwhite);
    transition: border-color 0.15s;
    letter-spacing: 0.04em;
  }
  .mob-text-sheet-input:focus {
    border-color: var(--navy);
  }
  .mob-text-sheet-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .mob-text-sheet-preview {
    width: 100%;
    height: 64px;
    background: var(--offwhite);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 28px;
    color: var(--text);
    letter-spacing: 0.04em;
  }
  .mob-font-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
  }
  .mob-font-chips::-webkit-scrollbar { display: none; }
  .mob-font-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: white;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.13s;
    white-space: nowrap;
  }
  .mob-font-chip.active {
    background: var(--navy);
    border-color: var(--navy);
    color: white;
  }
  .mob-text-sheet-add-btn {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--red), #c42920);
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
  }
  .mob-text-sheet-add-btn:active {
    background: var(--red-h);
  }
  .mob-text-sheet-add-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  /* ── Decoration method bottom sheet ── */
  .mob-deco-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mob-deco-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
  }
  .mob-deco-card:active {
    border-color: var(--red);
    background: var(--red-light);
  }
  .mob-deco-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--offwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
  }
  .mob-deco-card-body {
    flex: 1;
    min-width: 0;
  }
  .mob-deco-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mob-deco-card-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .mob-deco-info-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: white;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
  }
  .mob-deco-info-btn:active {
    background: var(--offwhite);
  }
  .mob-deco-info {
    display: none;
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--offwhite);
    border-radius: 8px;
    margin-top: 6px;
  }
  .mob-deco-info.open {
    display: block;
  }

  /* Logo selection circles / bubbles */
  .mob-nike-logo-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
  }
  .mob-nike-logo-divider::before,
  .mob-nike-logo-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .mob-nike-logo-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.25rem 1rem 0.25rem;
    justify-content: flex-start;
  }
  .mob-nike-bubble {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-nike-bubble-img {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    background: var(--offwhite);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
  }
  .mob-nike-bubble-img img,
  .mob-nike-bubble-img svg {
    width: 46px; height: 46px;
    object-fit: contain;
  }
  .mob-nike-bubble.selected .mob-nike-bubble-img {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(26,29,35,0.12);
  }
  .mob-nike-bubble-img .bubble-check {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(26,29,35,0.55);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .mob-nike-bubble-img .bubble-check svg {
    width: 20px; height: 20px;
    fill: white;
  }
  .mob-nike-bubble.selected .mob-nike-bubble-img .bubble-check { display: flex; }
  .mob-nike-bubble-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
  }
  .mob-nike-bubble.selected .mob-nike-bubble-label {
    color: var(--text);
    font-weight: 600;
  }

  /* ── STEP 2: Text on garment ── */
  .mob-nike-text-section {
    padding: 0.75rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .mob-nike-text-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }
  .mob-nike-text-hint {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
  }
  .mob-nike-text-input {
    width: 100%;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    letter-spacing: 0.04em;
    outline: none;
    background: var(--offwhite);
    transition: border-color 0.15s;
    text-transform: uppercase;
  }
  .mob-nike-text-input:focus { border-color: var(--text); background: white; }
  .mob-nike-text-input::placeholder {
    color: var(--light);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  .mob-nike-text-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--muted);
  }
  .mob-nike-char-count {
    font-weight: 600;
    color: var(--text);
  }

  /* Number input for back number */
  .mob-nike-number-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .mob-nike-number-input {
    width: 100px;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    outline: none;
    background: var(--offwhite);
    transition: border-color 0.15s;
  }
  .mob-nike-number-input:focus { border-color: var(--text); background: white; }

  /* Step 3: Placement & Size (slimmed Nike style) */
  .mob-nike-placement-section {
    padding: 0.6rem 1rem 0;
  }

  /* ── Sections below action tiles — padding + borders ── */
  .mob-modal-section {
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--border);
  }
  .mob-modal-section .modal-sec-title {
    margin-bottom: 0.5rem;
  }

  /* ── Uploaded logos grid (shown after upload, under tiles) ── */
  .mob-uploads-section {
    padding: 0.65rem 0.85rem 0;
  }
  .mob-uploads-section .logo-grid {
    grid-template-columns: repeat(4,1fr);
    gap: 0.4rem;
  }
  .logo-tile { min-height: 52px; padding: 0.3rem 0.2rem 1rem; }
  .logo-tile-uploaded { min-height: 52px; aspect-ratio: auto !important; }

  /* Placement grid bigger tap targets */
  .place-grid { gap: 0.35rem; }
  .place-btn { padding: 0.5rem 0.2rem; font-size: 11px; border-radius: 6px; }

  /* View tabs full-width */
  .view-tabs { gap: 0.3rem; }
  .view-tab { padding: 0.5rem; font-size: 11px; }

  /* Sliders larger touch area */
  input[type=range] { height: 6px; }
  input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; }

  /* Upload zone — hidden on mobile (replaced by tile) */
  .mob-hide-upload-zone { display: none !important; }

  /* Remove artwork row */
  .modal-remove-row { gap: 0.5rem; }
  .modal-remove-btn { font-size: 11px; padding: 0.45rem 0.75rem; flex: 1; text-align: center; }

  /* Footer */
  .modal-ft {
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + max(env(safe-area-inset-bottom), 10px));
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .modal-ft #mFooterInfo { display: none; }
  .modal-ft #mFooterBtns { display: flex; gap: 0.5rem; width: 100%; }
  .modal-ft .btn-remove-footer { display: none !important; }
  .modal-ft #mFooterStep1Mob { width: 100%; }
  .modal-ft .btn { flex: 1; justify-content: center; font-size: 13px; padding: 0.65rem; }

  /* ── Floating AI chat button (pages 2-4) ────────── */
  .mob-ai-fab {
    display: none; /* hidden by default; JS shows it on pages 2-4 */
    position: fixed;
    bottom: calc(1.1rem + max(env(safe-area-inset-bottom), 10px));
    right: 1rem;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--navy);
    border: 2px solid rgba(255,255,255,0.15);
    color: white;
    align-items: center; justify-content: center;
    z-index: 150;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.2s;
  }
  .mob-ai-fab.visible {
    display: flex !important;
  }
  .mob-ai-fab:active { transform: scale(0.93); }
  .mob-ai-fab svg { width: 22px; height: 22px; }
  /* Unread badge on FAB */
  .mob-ai-fab .fab-badge {
    position: absolute;
    top: -3px; right: -3px;
    width: 14px; height: 14px;
    background: var(--red);
    border-radius: 50%;
    border: 2px solid var(--navy);
    display: none;
  }
  .mob-ai-fab .fab-badge.show { display: block; }

  /* ── Mobile AI Chat Drawer ───────────────────────── */
  .mob-chat-drawer {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 300;
    align-items: flex-end;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
  }
  .mob-chat-drawer.open {
    pointer-events: all;
    opacity: 1;
  }
  .mob-chat-inner {
    width: 100%;
    height: 72dvh;
    background: white;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
  }
  .mob-chat-drawer.open .mob-chat-inner { transform: translateY(0); }
  .mob-chat-handle-bar {
    height: 4px; width: 36px;
    background: var(--border2);
    border-radius: 2px;
    margin: 0.65rem auto 0;
    flex-shrink: 0;
  }
  .mob-chat-hd {
    height: 46px;
    padding: 0 1rem;
    display: flex; align-items: center; gap: 0.6rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mob-chat-hd .ai-name { font-size: 13px; }
  .mob-chat-close {
    margin-left: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--offwhite);
    border: none; cursor: pointer;
    font-size: 14px; display: flex; align-items: center; justify-content: center;
  }
  .mob-chat-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem;
    display: flex; flex-direction: column; gap: 0.65rem;
  }
  .mob-chat-body .chat-bubble { max-width: 85%; font-size: 13px; }
  .mob-chat-body .chat-bubble.user-msg { max-width: 85%; }
  .mob-chat-body .chip-wrap { max-width: 100%; }
  .mob-chat-body .chip { font-size: 12px; padding: 0.35rem 0.75rem; }
  .mob-chat-footer {
    padding: 0.65rem 0.85rem;
    padding-bottom: calc(0.65rem + max(env(safe-area-inset-bottom), 10px));
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  /* ── Page 2 — selected summary chip area ────────── */
  #p2sub { font-size: 10px; }

  /* ── Nav buttons smaller ─────────────────────────── */
  .nav-btn { font-size: 11px; padding: 0.3rem 0.65rem; }

  /* ── Brief summary on page 1 hidden (in left panel) ─ */
  /* already handled by hiding left-panel */

  /* ── Qty row bigger tap targets ──────────────────── */
  .qty-btn { width: 30px; height: 30px; font-size: 16px; }
  .qty-val { font-size: 15px; }

  /* ── Mobile: swap Customize / Clear positions on cards ── */
  .coll-customise-btn-desktop { display: none !important; }
  .coll-clear-btn-desktop { display: none !important; }
  .coll-customise-btn-mobile {
    display: block !important;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: var(--red);
    border: none;
    border-radius: 20px;
    padding: 0.45rem 0;
    cursor: pointer;
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
    -webkit-tap-highlight-color: transparent;
  }
  .coll-clear-btn-mobile { display: inline-block !important; }

  /* ── Mobile: X button at bottom of canvas (no view tabs) ── */
  .coll-clear-canvas { bottom: 8px !important; }

  /* ── Card swipe: hide button bar, show dot indicators ── */
  .card-view-switch { display: none !important; }

  .swipe-dots {
    position: absolute;
    bottom: 6px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    z-index: 4;
  }
  .swipe-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
  }
  .swipe-dot.active {
    background: var(--red);
    transform: scale(1.3);
  }
  /* Subtle swipe hint arrow on first card load */
  .swipe-hint-arrow {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    pointer-events: none;
    animation: swipeHintFade 2s ease 0.6s both;
    z-index: 4;
  }
  @keyframes swipeHintFade {
    0%   { opacity: 0; transform: translateY(-50%) translateX(0); }
    25%  { opacity: 1; transform: translateY(-50%) translateX(-5px); }
    65%  { opacity: 1; transform: translateY(-50%) translateX(-5px); }
    100% { opacity: 0; transform: translateY(-50%) translateX(-10px); }
  }

  /* ── Submit button full-width on mobile ──────────── */
  #submitBtn, .mob-hide-submit { display: none !important; }

  /* ── Page 4 mobile: hide nav buttons + centre-header ── */
  #page4 .nav-right { display: none !important; }
  .mob-hide-p4-header { display: none !important; }

  /* ── Page 4 sticky bottom nav bar ───────────────── */
  .mob-p4-sticky-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 120;
    background: white;
    border-top: 2px solid var(--border);
    padding: 0.7rem 0.85rem;
    padding-bottom: calc(0.7rem + max(env(safe-area-inset-bottom), 10px));
    gap: 0.65rem;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  }
  /* page 4 centre-body is handled by the fixed viewport block above */

  /* ── Page 2 mobile: hide nav Back/Add Artwork buttons ── */
  #page2 .nav-right { display: none !important; }

  /* ── Page 2 mobile: hide entire centre-header (title + filters) ── */
  #page2 .centre-header {
    display: none !important;
  }

  /* ── Page 2 mobile: cover-fit product images (no letterboxing) ── */
  .product-card-img {
    object-fit: cover !important;
  }

  /* ── Page 3 mobile: hide nav Back/Review Order buttons ── */
  #page3 .nav-right { display: none !important; }

  /* ── Page 3 mobile: hide entire "Your Collection" centre-header ── */
  #page3 .centre-header { display: none !important; }

  /* ── Page 3 mobile: view-switch bar (matches p2 pill style) ── */
  #mobP3ViewBar {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--border);
    background: white;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem 0.5rem;
    gap: 5px;
    position: sticky;
    top: 48px;
    z-index: 99;
  }
  #mobP3ViewBar .view-all-btn { display: none; }
  #mobP3ViewBar.view-bar-pinned {
    position: fixed !important;
    top: 48px !important;
    left: 0; right: 0;
    z-index: 99;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  #p3ViewBarSpacer { display: none; height: 0; }
  #p3ViewBarSpacer.active { display: block; }

  /* ── Page 3 sticky bottom nav bar ───────────────── */
  .mob-p3-sticky-bar {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 120;
    background: white;
    border-top: 2px solid var(--border);
    padding: 0.5rem 0.85rem;
    padding-bottom: calc(0.5rem + max(env(safe-area-inset-bottom), 10px));
    gap: 0.4rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  }
  .mob-p3-enq-row {
    display: none;
  }
  .mob-p3-enq-btn {
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    padding: 0.35rem 0;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--offwhite);
    color: var(--text);
    cursor: pointer;
    transition: all 0.12s;
  }
  .mob-p3-enq-btn:active { background: var(--border); }
  .mob-p3-nav-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
  }
  .mob-p3-enq-count {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-p3-enq-count strong {
    color: var(--text);
    font-weight: 700;
  }
  #page3 .centre-body { padding-bottom: 7.5rem; }
  .enquiry-bar { display: none !important; }
  /* ── VIEW row: full-width, equal-width buttons ─────── */
  .mob-view-pill { display: flex !important; }
  .mob-view-hint { display: inline !important; }
  .card-tap-prev { display: block !important; }
  .card-tap-next { display: block !important; }
  .card-select-btn { display: flex !important; }
  /* Mobile glow on page 3 cards when in inquiry */
  .coll-card.enquiry-on { border-color: var(--red); box-shadow: 0 0 0 4px rgba(230,51,41,0.25), 0 0 16px rgba(230,51,41,0.15); border-width: 2px; }
  /* Hide old product-check on mobile (replaced by card-select-btn) */
  .product-check { display: none !important; }

  /* ── Mobile view navigator: single pill with arrows ── */
  #p2ViewAllBar {
    display: flex !important;
    width: 100%;
    background: white;
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    gap: 0;
  }
  #p2ViewAllBar > span { display: none; }
  #p2ViewAllBar .view-all-btn { display: none; }
  #p2ViewBarDesktop { display: none !important; }
  /* The pill navigator sits inside the bar */
  .mob-view-pill {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--offwhite);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    height: 34px;
  }
  .mob-view-arrow {
    width: 36px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    font-size: 18px; color: var(--navy);
    font-weight: 300; line-height: 1;
    flex-shrink: 0;
  }
  .mob-view-arrow:active { background: var(--border); }
  .mob-view-label {
    font-size: 12px; font-weight: 700;
    color: var(--navy);
    min-width: 60px; text-align: center;
    padding: 0 4px;
    pointer-events: none;
    letter-spacing: 0.02em;
  }
  .mob-view-divider {
    width: 1px; height: 20px;
    background: var(--border);
    flex-shrink: 0;
  }
  /* Instruction hint below pill */
  .mob-view-hint {
    font-size: 10px;
    color: var(--muted);
    margin-left: 10px;
    white-space: nowrap;
  }
  /* Left/right tap zones on card image */
  .card-tap-prev, .card-tap-next {
    position: absolute;
    top: 0; bottom: 0;
    width: 38%;
    z-index: 5;
    cursor: pointer;
  }
  .card-tap-prev { left: 0; }
  .card-tap-next { right: 0; }
  /* Select circle button — always visible bottom-left */
  .card-select-btn {
    position: absolute;
    top: 8px; right: 8px;
    bottom: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  }
  .card-select-btn svg { width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 2.5; }
  .product-card.selected .card-select-btn {
    background: var(--red);
    border-color: var(--red);
  }
  .product-card.selected .card-select-btn svg { stroke: white; }
  /* ── Mobile view bar: sticky below steps bar ── */
  #p2ViewAllBar {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    background: white;
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem 0.5rem;
    gap: 5px;
    position: sticky;
    top: 48px;
    z-index: 99;
  }
  /* When pinned via JS — fixed below steps bar, slides in from top */
  #p2ViewAllBar.view-bar-pinned {
    position: fixed !important;
    top: 48px !important;
    left: 0; right: 0;
    z-index: 99;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  /* Spacer to prevent content jump when bar goes fixed */
  #p2ViewBarSpacer {
    display: none;
    height: 0;
  }
  #p2ViewBarSpacer.active {
    display: block;
  }
  #p2ViewAllBar > span { display: none; }
  #p2ViewAllBar .view-all-btn { display: none; }
  /* The pill navigator sits inside the bar */
  .mob-view-pill {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--offwhite);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    height: 36px;
    width: min(300px, 88vw);
  }
  .mob-view-arrow {
    width: 44px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    font-size: 20px; color: var(--navy);
    font-weight: 300; line-height: 1;
    flex-shrink: 0;
  }
  .mob-view-arrow:active { background: var(--border); }
  .mob-view-label {
    font-size: 13px; font-weight: 700;
    color: var(--navy);
    flex: 1; text-align: center;
    padding: 0 4px;
    pointer-events: none;
    letter-spacing: 0.02em;
  }
  .mob-view-divider {
    width: 1px; height: 20px;
    background: var(--border);
    flex-shrink: 0;
  }
  /* Hint below pill — centred, two lines */
  .mob-view-hint {
    font-size: 10px;
    color: var(--muted);
    margin-left: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 1.5;
  }
  /* ── Filter bar: hidden on mobile ── */
  #filterBar {
    display: none !important;
    width: 100%;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    background: white;
    padding: 0.55rem 0.85rem !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    min-height: 42px;
    box-sizing: border-box;
  }
  #filterBar::-webkit-scrollbar { display: none; }
  #filterBar > span { display: none; }
  #filterBar .filter-chip {
    flex-shrink: 0;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    background: white;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
  }
  #filterBar .filter-chip.active {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
  }
  /* centre-body needs bottom padding for sticky bar */
  #page2 .centre-body {
    padding-bottom: 5.5rem;
  }

  /* ── Page 2 sticky bottom nav bar ───────────────── */
  .mob-nav-btn-fixed {
    width: 110px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mob-p2-sticky-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 120;
    background: white;
    border-top: 2px solid var(--border);
    padding: 0.7rem 0.85rem;
    padding-bottom: calc(0.7rem + max(env(safe-area-inset-bottom), 10px));
    gap: 0.65rem;
    align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  }
  .mob-p2-sticky-bar .mob-p2-sel-count {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    text-align: center;
  }
  .mob-p2-sticky-bar .mob-p2-sel-count strong {
    color: var(--text);
    font-weight: 700;
  }

  /* ── Page 2 colour swatches on cards ─────────────── */
  .p2-card-footer-desktop { display: none !important; }
  .p2-card-footer-mobile { display: block; width: 100%; }
  .p2-swatch-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 4px 2px;
  }
  .p2-swatch {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.12s;
  }
  .p2-swatch:hover { transform: scale(1.18); }
  .p2-swatch.swatch-selected { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--navy); border-color: transparent; }
  .p2-swatch-label {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Rainbow "more colours" button */
  .p2-swatch-more {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    transition: transform 0.12s;
    position: relative;
  }
  .p2-swatch-more:hover { transform: scale(1.18); }
  /* Colour popup */
  .colour-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.45);
    animation: cpFadeIn 0.2s ease;
  }
  @keyframes cpFadeIn { from { opacity:0; } to { opacity:1; } }
  .colour-popup {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: auto;
    z-index: 601;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
    padding: 0 0 env(safe-area-inset-bottom, 16px);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    animation: cpSlideUp 0.28s cubic-bezier(0.32,0.72,0,1);
  }
  @keyframes cpSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .colour-popup-handle {
    display: block;
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .colour-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
  }
  .colour-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0;
    margin-bottom: 0;
  }
  .colour-popup-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--offwhite);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .colour-popup-scroll {
    overflow-y: auto;
    padding: 14px 16px;
    flex: 1;
  }
  .colour-popup-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px 8px;
  }
  .colour-popup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  .colour-popup-swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
    flex-shrink: 0;
  }
  .colour-popup-swatch:active { transform: scale(0.92); border-color: var(--navy); }
  .colour-popup-swatch-label {
    font-size: 9px;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }


  /* ── Mobile matched products strip (page 1) ─────── */
  #mobMatchedStrip { display: none; }
  #mobMatchedStrip.show { display: block !important; }
  .mob-matched-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    gap: 0.5rem;
  }
  .mob-matched-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .mob-matched-badge {
    background: var(--red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 0.1rem 0.45rem;
  }
  .mob-matched-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .mob-matched-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
  }
  .mob-matched-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: contain;
    object-position: center top;
    display: block;
    background: var(--offwhite);
  }
  .mob-matched-card-body {
    padding: 0.4rem 0.5rem 0.45rem;
  }
  .mob-matched-card-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-matched-card-color {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mob-matched-more {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    padding: 0.5rem 0 0;
    font-style: italic;
  }

  /* ══ My Logos FAB button ══ */
  .modal-canvas-wrap { position: relative; }
  .mob-logos-fab {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--navy);
    border: 2px solid rgba(255,255,255,0.15);
    color: white;
    display: flex;
    align-items: center; justify-content: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-logos-fab:active { transform: scale(0.93); }
  .mob-logos-fab svg { width: 20px; height: 20px; }
  .mob-logos-fab .fab-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    background: var(--red);
    border-radius: 9px;
    border: 2px solid white;
    font-size: 10px; font-weight: 700;
    color: white;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
  }
  @keyframes fabFlash {
    0%   { box-shadow: 0 3px 14px rgba(0,0,0,0.3); }
    25%  { box-shadow: 0 0 0 6px rgba(230,51,41,0.45), 0 3px 14px rgba(0,0,0,0.3); }
    50%  { box-shadow: 0 0 0 10px rgba(230,51,41,0), 0 3px 14px rgba(0,0,0,0.3); }
    100% { box-shadow: 0 3px 14px rgba(0,0,0,0.3); }
  }
  .mob-logos-fab.fab-flash {
    animation: fabFlash 0.6s ease-out;
  }

  /* ══ My Logos draw-up pane (colour-swatch style) ══ */
  .mob-logos-pane-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.45);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .mob-logos-pane-backdrop.open {
    pointer-events: all;
    opacity: 1;
  }
  .mob-logos-pane {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    max-height: 55dvh;
    background: white;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
    z-index: 601;
  }
  .mob-logos-pane-backdrop.open .mob-logos-pane {
    transform: translateY(0);
  }
  .mob-logos-pane-handle {
    display: block;
    height: 4px; width: 36px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .mob-logos-pane-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mob-logos-pane-title {
    font-size: 13px; font-weight: 600;
    color: var(--text);
  }
  .mob-logos-pane-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--offwhite);
    border: none; cursor: pointer;
    font-size: 16px;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s;
  }
  .mob-logos-pane-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
  }
  .mob-logos-pane-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-logos-pane-item:active .mob-logos-circle { transform: scale(0.92); border-color: var(--navy); }
  .mob-logos-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--offwhite);
    border: 2px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, border-color 0.12s;
    flex-shrink: 0;
  }
  .mob-logos-circle img {
    width: 42px; height: 42px;
    object-fit: contain;
  }
  .mob-logos-pane-item-label {
    font-size: 9px; font-weight: 500;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ══ View-specific placement buttons ══ */
  .mob-place-btns {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0;
  }
  .mob-place-btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
  }
  .mob-place-btn.active {
    border-color: var(--text);
    background: var(--navy);
    color: white;
  }
  .mob-place-btn:active { opacity: 0.8; }

  /* ══ Step 3.2 — Garment-centric placement (mockup style) ══ */
  #mobNikePanel2 .mob-nike-logo-choice { padding-top: 0; }
  #mobNikePanel2 .mob-place-btns { display: none !important; }

  .mob-p2-view-tabs {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1rem;
    margin: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }
  .mob-view-pill-customiser {
    display: flex !important;
  }
  .mob-p2-view-tab {
    flex: 1;
    padding: 0.6rem 0;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
  }
  .mob-p2-view-tab.active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    font-weight: 600;
  }

  .mob-p2-edit-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem 0.35rem;
    background: var(--white);
  }
  .mob-p2-edit-name {
    display: none;
  }
  .mob-p2-edit-name.placeholder {
    color: var(--muted);
    font-weight: 500;
  }
  .mob-p2-edit-remove {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: var(--red);
    border: none;
    border-radius: 20px;
    padding: 0.3rem 0.9rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.02em;
  }
  .mob-p2-edit-remove:active { opacity: 0.8; }
  .mob-p2-apply-all-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    background: var(--red-light);
    border: 1.5px solid var(--red);
    border-radius: 20px;
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .mob-p2-apply-all-btn:active { opacity: 0.7; }

  .mob-p2-slider-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 1rem 0.5rem;
    background: var(--white);
  }
  .mob-p2-slider-label {
    font-size: 11px;
    color: var(--muted);
    min-width: 28px;
    flex-shrink: 0;
  }
  .mob-p2-slider-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
  }
  .mob-p2-slider-row input[type=range] {
    flex: 1;
    height: 4px;
    accent-color: var(--navy);
  }

  /* ── Position trackpad (overlaid on canvas, bottom-right) ── */
  .mob-p2-trackpad-wrap {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 50;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: auto;
  }
  .mob-p2-trackpad-wrap.active {
    display: flex;
  }
  .mob-p2-trackpad-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 0 4px rgba(255,255,255,0.9);
  }
  .mob-p2-trackpad {
    width: 76px;
    height: 76px;
    background: rgba(255,255,255,0.88);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    touch-action: none;
    cursor: crosshair;
    overflow: hidden;
  }
  .mob-p2-trackpad:active {
    border-color: var(--navy);
    background: rgba(230,51,41,0.03);
  }
  .mob-p2-trackpad-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: none;
  }
  .mob-p2-trackpad-crosshair-h,
  .mob-p2-trackpad-crosshair-v {
    position: absolute;
    background: rgba(0,0,0,0.08);
    pointer-events: none;
  }
  .mob-p2-trackpad-crosshair-h {
    left: 0; right: 0; height: 1px;
    top: 50%;
  }
  .mob-p2-trackpad-crosshair-v {
    top: 0; bottom: 0; width: 1px;
    left: 50%;
  }

  .mob-p2-logo-tray {
    background: var(--white);
    border-radius: 0;
    margin-top: 0;
    padding: 0.75rem 1rem 0.5rem;
    border-top: none;
  }
  .mob-p2-logo-tray-handle {
    display: none;
  }
  .mob-p2-logo-tray-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    min-height: 28px;
    height: 28px;
  }
  .mob-p2-logo-tray-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
  }
  .mob-p2-tray-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .mob-p2-logo-tray-upload {
    background: var(--navy);
    color: var(--white);
    border: none;
    border-radius: 16px;
    padding: 0.35rem 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-p2-logo-grid {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .mob-p2-logo-grid::-webkit-scrollbar { display: none; }
  .mob-p2-logo-item {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: var(--offwhite);
    border-radius: 10px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
  .mob-p2-logo-item img {
    width: 70%;
    height: 70%;
    object-fit: contain;
  }
  .mob-p2-logo-item.selected {
    border-color: var(--red);
    background: var(--red-light);
  }
  .mob-p2-logo-add {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: var(--offwhite);
    border-radius: 10px;
    border: 1.5px dashed var(--border2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: var(--muted);
    -webkit-tap-highlight-color: transparent;
    padding: 4px;
  }
  .mob-p2-logo-add svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
  }
  .mob-p2-logo-add span {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .mob-p2-logo-gen {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: var(--offwhite);
    border-radius: 10px;
    border: 1.5px dashed var(--border2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: var(--muted);
    -webkit-tap-highlight-color: transparent;
    padding: 4px;
  }
  .mob-p2-logo-gen svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
  }
  .mob-p2-logo-gen span {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-align: center;
  }

  /* ══ Placement hotspot zones on canvas ══ */
  .mob-hotspot {
    position: absolute;
    border: 2px dashed var(--border2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.02);
    cursor: pointer;
    pointer-events: all;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-hotspot:active {
    background: rgba(0,0,0,0.06);
  }
  .mob-hotspot .hotspot-plus {
    font-size: 18px;
    color: var(--light);
    line-height: 1;
  }
  .mob-hotspot.has-logo {
    border-color: var(--red);
    background: rgba(230,51,41,0.06);
  }
  .mob-hotspot.has-logo .hotspot-plus {
    display: none;
  }
  .mob-hotspot-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    background: rgba(0,0,0,0.06);
    color: var(--muted);
  }
  .mob-hotspot.has-logo .mob-hotspot-label {
    background: var(--red);
    color: white;
  }
  .mob-hotspot-logo-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    pointer-events: none;
  }
  .mob-hotspot-diamond {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    color: var(--red);
    line-height: 1;
    pointer-events: none;
  }
}

/* Hide mobile-only elements on desktop */
.mobile-steps-bar { display: none; }
.mob-ai-fab { display: none; }
.mob-chat-drawer { display: none; }
#mobMatchedStrip { display: none; }
#mobP1ContinueRow { display: none; }
.p2-card-footer-mobile { display: none; }
.mob-p2-sticky-bar { display: none; }
.mob-p3-sticky-bar { display: none; }
.mob-p4-sticky-bar { display: none; }
.mob-view-pill { display: none; }
.mob-view-hint { display: none; }
.card-tap-prev { display: none; }
.card-tap-next { display: none; }
.card-select-btn { display: none; }
/* Desktop: hide per-card view switch on Step 2 product cards */
#page2 .card-view-switch { display: none !important; }
/* Desktop: hover on product card shows back view */
#page2 .product-card .product-card-img-wrap .p2-hover-back { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity 0.3s ease;z-index:1;background:var(--offwhite); }
#page2 .product-card:hover .product-card-img-wrap .p2-hover-back { opacity:1; }
/* Desktop: Step 2 layout — hide left/right panels, full-width centre */
#page2 .workspace { grid-template-columns: 1fr !important; }
#page2 .left-panel { display: none !important; }
/* Desktop: Step 3 — hide mobile wrap, show desktop split */
.p3-mobile-wrap { display: none !important; }
.p3-desktop-split { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.p3-left-cards { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--cream); }
.p3-left-header { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: white; gap: 0.4rem; }
.p3-left-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.75rem; }
.p3-left-scroll::-webkit-scrollbar { width: 3px; }
.p3-left-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
.p3-desk-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.7rem !important; }
.p3-desk-grid .coll-img-wrap { aspect-ratio: 4/5 !important; }
.p3-desk-grid .coll-card { min-width: 0; }
.p3-desk-grid .product-card-name { white-space: normal; word-wrap: break-word; font-size: 11px; line-height: 1.3; }
.p3-desk-grid .product-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3-desk-grid .coll-customise-btn-desktop { display: none !important; }
.p3-desk-grid .coll-footer { display: none !important; }
.p3-desk-grid .coll-clear-canvas { display: none !important; }
.p3-desk-grid .product-card-footer { padding-bottom: 0.35rem; }
/* Pencil edit button on cards — top-right, matching dup-btn style */
.p3-edit-btn { position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:white;border:1.5px solid var(--border);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.10);padding:0; }
.p3-edit-btn svg { width:12px;height:12px;stroke:var(--muted);stroke-width:2;fill:none; }
.p3-edit-btn:hover { border-color:var(--navy);background:var(--navy);box-shadow:0 2px 8px rgba(26,29,35,0.25); }
.p3-edit-btn:hover svg { stroke:white; }
.p3-desk-grid .p3-edit-btn { display:flex; }
/* Highlight card being edited — red pen icon only, no border glow */
.p3-desk-grid .coll-card.p3-editing .p3-edit-btn { background:var(--red);border-color:var(--red); }
.p3-desk-grid .coll-card.p3-editing .p3-edit-btn svg { stroke:white; }
#page3.active { overflow: hidden; }
.p3-desk-grid .coll-card { cursor: pointer; }
.p3-desk-grid .coll-card.p3-editing { /* no border glow — indicated by red pen icon */ }
.p3-right-customizer { flex: 2; display: flex; flex-direction: column; background: white; min-width: 0; overflow: hidden; transition: flex 0.3s ease, opacity 0.3s ease; }
/* ── Collapse toggle tab ── */
.p3-collapse-tab { position: absolute; left: calc(33.33% - 7px); top: 50%; transform: translateY(-50%); width: 14px; height: 48px; background: white; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.15s; box-shadow: 0 1px 6px rgba(0,0,0,0.1); }
.p3-collapse-tab:hover { background: var(--offwhite); width: 18px; }
.p3-collapse-tab svg { width: 10px; height: 10px; stroke: var(--muted); stroke-width: 2.5; fill: none; transition: transform 0.3s ease; }
/* Arrow points right (collapse) by default, rotates to left (expand) when collapsed */
.p3-collapsed .p3-collapse-tab svg { transform: rotate(180deg); }
/* ── Collapsed state ── */
.p3-collapsed .p3-right-customizer { display: none !important; }
.p3-collapsed .p3-left-cards { flex: 1 !important; border-right: none; }
.p3-collapsed .p3-desk-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
.p3-collapsed .p3-collapse-tab { left: auto; right: 0; }
/* Toggle bar removed — buttons are now on the canvas overlay */
.p3-cust-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* When modal-body is reparented into inline customizer */
.p3-cust-body .modal-body { flex: 1; min-height: 0; }
.p3-cust-body .modal-ft { display: none !important; }
.p3-cust-body .modal-hd { display: none; }
.p3-cust-body .modal-canvas-stage canvas { max-width: 100%; max-height: calc(100vh - 80px); }
/* Inline: hide view tabs from left column (moved to canvas bottom) */
.p3-cust-body #viewTabsSection { display: none !important; }
/* Inline: Add Logos 2x2 grid when moved to right column */
.p3-cust-body #addLogosSection .add-logos-grid { grid-template-columns: repeat(2, 1fr) !important; }
.p3-cust-body #addLogosSection .desktop-ai-gen-trigger { flex-direction: column; text-align: center; gap: 0.2rem; padding: 0.4rem 0.3rem; min-height: 48px; }
.p3-cust-body #addLogosSection .desktop-ai-gen-trigger span { font-size: 9.5px; }
/* Inline: canvas view buttons — pill style matching card-view-switch */
.p3-inline-view-btns { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: 2px; gap: 1px; box-shadow: 0 2px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); z-index: 5; }
.p3-inline-view-btns .cvs-btn { padding: 4px 10px; font-size: 9px; font-weight: 600; color: rgba(26,29,35,0.5); border: none; background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.2s ease; border-radius: 16px; white-space: nowrap; letter-spacing: 0.02em; }
.p3-inline-view-btns .cvs-btn.active { color: white; background: var(--navy); box-shadow: 0 1px 4px rgba(26,29,35,0.25); }
.p3-inline-view-btns .cvs-btn:hover:not(.active) { color: rgba(26,29,35,0.8); }
/* Inline: toggle buttons — now hidden on canvas (moved to right panel) */
.p3-inline-toggle { display: none !important; }
/* ── Edit Settings section in right panel ── */
.p3-edit-settings-section { padding: 0 0 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.p3-section-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
.p3-edit-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.p3-edit-toggle-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0.4rem 0.3rem; border: 1.5px dashed var(--border2); border-radius: 6px; background: white; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s; min-height: 48px; }
.p3-edit-toggle-btn span { font-size: 9.5px; font-weight: 600; color: var(--text); }
.p3-edit-toggle-btn:hover { border-color: var(--navy); background: var(--offwhite); transform: translateY(-1px); }
.p3-edit-toggle-btn:hover span { color: var(--navy); }
.p3-edit-toggle-btn:hover svg { stroke: var(--navy); }
.p3-edit-toggle-btn.active { border-color: var(--navy); background: var(--navy); border-style: solid; }
.p3-edit-toggle-btn.active span { color: white; }
.p3-edit-toggle-btn.active svg { stroke: white; }
/* Inline: placement buttons match Add Logos button sizes */
.p3-cust-body .place-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.4rem !important; }
.p3-cust-body .place-btn { padding: 0.4rem 0.3rem; font-size: 9.5px; font-weight: 600; border-radius: 6px; border: 1.5px dashed var(--border2); min-height: 48px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.p3-cust-body .place-btn:hover { border-color: var(--navy); background: var(--offwhite); transform: translateY(-1px); }
.p3-cust-body .place-btn.active { background: var(--navy); border-color: var(--navy); border-style: solid; color: white; }
/* Inline: hide footer info text */
.p3-cust-body #mFooterInfo { display: none !important; }
/* Inline: footer — right-align buttons */
.p3-cust-body .modal-ft { justify-content: flex-end; }
/* Inline: narrow left controls, maximize canvas, widen right panel */
.p3-cust-body .modal-body { grid-template-columns: 1fr 1fr !important; }
.p3-cust-body .modal-left { display: none !important; }
.p3-cust-body .modal-right { max-width: none; }
.p3-cust-body .modal-canvas-wrap { padding: 0.25rem; }
/* Inline action buttons — sticky at bottom of right panel */
.p3-inline-actions { position: sticky; bottom: -0.9rem; background: var(--offwhite); padding: 0.5rem 0.9rem 0.9rem; margin: auto -0.9rem -0.9rem; border-top: 1px solid var(--border); display: flex; gap: 0.4rem; flex-wrap: wrap; z-index: 2; }
.p3-action-btn { font-size: 11px !important; padding: 0.45rem 0.7rem !important; flex: 1; justify-content: center; text-align: center; white-space: nowrap; }
/* Size +/- buttons */
.p3-size-adj { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); background: white; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: all 0.15s; font-family: 'DM Sans', sans-serif; line-height: 1; }
.p3-size-adj:hover { border-color: var(--navy); color: var(--navy); background: var(--offwhite); }
/* Inline: consistent logo tile sizing — always 2-col, uniform aspect ratio */
.p3-cust-body .logo-tile, .p3-cust-body .logo-tile-uploaded { aspect-ratio: 1/1; min-height: 0; padding: 0.25rem; }
.p3-cust-body .logo-tile svg { height: 32px; }
.p3-cust-body .logo-tname { font-size: 7px; }
#page2 .right-panel { display: none !important; }
/* Desktop: Step 4 — hide right panel, widen grid */
#page4 .right-panel { display: none !important; }
#page4 .review-card-color { margin-bottom: 0; }
#page4 .review-card { overflow: visible; max-height: none; }
#page4 .review-card-img { aspect-ratio: 4/5; max-height: calc(100vh - 260px); }
#page4 .review-card-body { padding: 0.5rem 0.65rem; }
#page4 .review-card-name { font-size: 11px; }
#page4 .centre-body { padding: 0 0.25rem; }
#page4 .workspace { grid-template-columns: 252px 1fr !important; }
#page4 .review-grid { grid-template-columns: repeat(4, 1fr); margin-top: 1rem; }
/* ── Team Collection ── */
.tc-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s; }
.tc-overlay.show { opacity:1;pointer-events:auto; }
.tc-popup { background:white;border-radius:14px;padding:1.5rem;max-width:380px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,0.25);position:relative;max-height:85vh;overflow-y:auto; }
.tc-close { position:absolute;top:10px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:0 4px; }
.tc-option-btn { display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0.8rem;border:1.5px solid var(--border);border-radius:10px;background:white;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s;text-align:left;width:100%; }
.tc-option-btn:hover { border-color:var(--navy);background:var(--offwhite);transform:translateY(-1px); }
.roster-table { width:100%;border-collapse:collapse;font-family:'DM Sans',sans-serif; }
.roster-table th { font-size:10px;font-weight:600;color:var(--muted);text-align:left;padding:0.3rem 0.4rem;border-bottom:1.5px solid var(--border); }
.roster-table td { padding:0.25rem 0.3rem; }
.roster-table input { width:100%;padding:0.35rem 0.5rem;border:1.5px solid var(--border2);border-radius:5px;font-size:12px;font-family:'DM Sans',sans-serif;box-sizing:border-box; }
.roster-table input:focus { border-color:var(--navy);outline:none; }
.roster-del { background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px; }
.roster-del:hover { color:var(--red); }
.tc-banner { padding:0.6rem 0.7rem;border:1.5px solid var(--border);border-radius:8px;background:var(--offwhite);margin-top:0.5rem; }
.tc-banner-btn { flex:1;padding:0.35rem 0.5rem;border-radius:6px;font-size:10.5px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.15s; }
.tc-banner-no { background:white;border:1.5px solid var(--border);color:var(--text); }
.tc-banner-no:hover { border-color:var(--navy); }
.tc-banner-yes { background:var(--red);border:1.5px solid var(--red);color:white; }
.tc-banner-yes:hover { opacity:0.9; }
.tc-banner.dismissed { display:none; }
.p3-team-icon { position:absolute;top:8px;right:40px;width:24px;height:24px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.p3-team-icon svg { width:13px;height:13px; }
.p3-team-icon.hidden { display:none; }
/* Step 4: quantity collapsible section */
.p4-qty-summary { margin-top: 0.3rem; }
.p4-est-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.25rem; }
.p4-est-row { display: flex; gap: 4px; margin-bottom: 0.4rem; flex-wrap: wrap; }
.p4-est-btn { font-size: 10px; font-weight: 600; color: var(--navy); background: var(--offwhite); border: 1.5px solid var(--border); border-radius: 5px; padding: 0.25rem 0.5rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.13s; white-space: nowrap; flex: 1; text-align: center; min-width: 0; }
.p4-est-btn:hover { border-color: var(--navy); background: rgba(26,29,35,0.04); }
.p4-est-btn.active { border-color: var(--navy); background: var(--navy); color: white; }
.p4-qty-toggle { font-size: 10.5px; font-weight: 500; color: var(--muted); background: none; border: none; border-bottom: 1px dashed var(--border); border-radius: 0; padding: 0.2rem 0; cursor: pointer; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 0.3rem; transition: all 0.15s; width: 100%; justify-content: space-between; box-sizing: border-box; }
.p4-qty-toggle:hover { color: var(--navy); border-color: var(--navy); }
.p4-qty-toggle .p4-qty-arrow { font-size: 8px; color: var(--muted); transition: transform 0.2s; }
.p4-qty-toggle.open .p4-qty-arrow { transform: rotate(180deg); }
.p4-qty-dropdown { display: none; padding: 0.5rem 0 0; }
.p4-qty-dropdown.open { display: block; }
/* Desktop AI FAB for Step 2 */
.desktop-ai-fab { position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:var(--navy);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.25);z-index:300;transition:transform 0.15s,box-shadow 0.15s; }
.desktop-ai-fab:hover { transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,0.35); }
.desktop-ai-fab svg { width:24px;height:24px; }
.desktop-ai-fab.visible { display:flex; }
/* Desktop AI chat popup */
@keyframes desktopAiPopIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.desktop-ai-popup { position:fixed;bottom:88px;right:24px;width:320px;max-height:480px;background:white;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,0.22);z-index:301;display:none;flex-direction:column;overflow:hidden;animation:desktopAiPopIn 0.2s ease; }
.desktop-ai-popup.open { display:flex; }
.desktop-ai-popup .right-header { flex-shrink:0; }
.desktop-ai-popup .right-body { flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.6rem;max-height:340px; }
.desktop-ai-popup .right-body::-webkit-scrollbar { width:3px; }
.desktop-ai-popup .right-body::-webkit-scrollbar-thumb { background:var(--border2);border-radius:2px; }
.desktop-ai-popup .right-footer { padding:0.65rem 0.85rem;border-top:1px solid var(--border); }
.desktop-ai-popup .popup-close { position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--offwhite);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);z-index:5; }
.desktop-ai-popup .popup-close:hover { background:var(--border); }
/* Desktop: duplicate button on product cards (Step 2) */
.p2-dup-btn { position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:white;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;transition:all 0.15s;box-shadow:0 1px 4px rgba(0,0,0,0.10);padding:0; }
.p2-dup-btn:hover { border-color:var(--navy);background:var(--navy);box-shadow:0 2px 8px rgba(26,29,35,0.25); }
.p2-dup-btn:hover svg { stroke:white; }
.p2-dup-btn:hover span { color:white !important; }
.p2-dup-btn svg { width:12px;height:12px;stroke:var(--muted);stroke-width:2;fill:none; }
.p2-dup-remove:hover { border-color:var(--red);background:var(--red);box-shadow:0 2px 8px rgba(230,51,41,0.3); }
.p2-dup-remove:hover svg { stroke:white; }
/* Mobile modal elements hidden on desktop */
.mob-logo-actions { display: none; }
.mob-ai-prompt-panel { display: none; }
.mob-uploads-section { display: none; }
/* mob-modal-section is a transparent wrapper on desktop — no padding/border */
.mob-modal-section { padding: 0; border: none; display: contents; }
/* New mobile-only elements hidden on desktop */
.mob-logos-fab { display: none; }
.mob-logos-pane-backdrop { display: none; }
.mob-ai-gen-backdrop { display: none; }
.mob-text-sheet-backdrop { display: none; }
.mob-deco-sheet-backdrop { display: none; }
.mob-p2-trackpad-wrap { display: none; }
/* Step 1 mobile footer hidden on desktop — inline style="display:none" is default */
.mob-place-btns { display: none; }
/* Rainbow "more colours" button — always visible */
.mob-colour-more {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  flex-shrink: 0;
  display: inline-block;
  cursor: pointer;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red) !important;
  transition: transform 0.12s;
}
.mob-colour-more:hover, .mob-colour-more:active {
  transform: scale(1.15);
}
/* Desktop AI Gen trigger button */
.desktop-ai-gen-trigger {
  border: 1.5px dashed var(--border2);
  border-radius: 6px;
  padding: 0.65rem;
  text-align: center;
  cursor: pointer;
  background: white;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.desktop-ai-gen-trigger:hover {
  border-color: var(--navy);
  background: var(--offwhite);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.desktop-ai-gen-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.35);
  animation: cpFadeIn 0.2s ease;
}
.desktop-ai-gen-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 601;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  padding: 1.2rem 1.4rem;
  width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  animation: cpScaleIn 0.2s ease;
}