/* ═══════════════════════════════════════════════════════════════════════════
STITCHA STEP-3 CUSTOMISER — shared engine layer
───────────────────────────────────────────────────────────────────────────
The full Step-3 customiser redesign (preset-placement flow, mockup layout,
logo library, text/number styling, canvas hotspots) — promoted out of the
yachting skin so EVERY niche gets it. Themed entirely via --dk-* tokens (and
the --accent* bridges in design-kit.css), so each niche renders it in its own
colours. Loaded for all skins by index.html, after niche-home.css.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
STEP 3 — Premium fashion uplift (same direction as Step 2)
Cream bg, borderless left cards, refined right-panel controls,
serif section titles, restrained selected states.
═══════════════════════════════════════════════════════ */
#page3{background:var(--dk-paper);}
#page3 .p3-desktop-split{background:#fff;}
#page3 .p3-left-cards{background:#fff;border-right:1px solid rgba(0,0,0,0.06);}
#page3 .p3-right-customizer{background:#fff;}
#page3 .p3-left-header{background:var(--dk-paper);border-bottom:1px solid rgba(0,0,0,0.05);padding:1rem 1.25rem;height:auto;min-height:60px;}
/* Owner: the cards-panel header is empty on desktop (queue-meta + buttons hidden) — show a
"Your collection" title there instead of 60px of blank whitespace. Yachting-only. */
html[data-skin="yachting"] #page3 .p3-left-header{ min-height:0 !important; }
html[data-skin="yachting"] #page3 .p3-left-header::before{ content:'Your collection'; display:block; font-family:'Playfair Display',Georgia,serif; font-size:16px; font-weight:600; letter-spacing:-0.01em; color:#1a1d23; }
#page3 .p3-left-scroll{background:var(--dk-paper);}
/* Left-panel "Click a product..." hint — quieter */
#page3 .p3-highlight-hint{background:rgba(0,0,0,0.02) !important;border:none !important;border-radius:0 !important;color:var(--dk-paper-dim) !important;font-family:var(--dk-sans);font-size:11px !important;letter-spacing:0.01em;padding:10px 14px !important;margin:0 0 12px !important;}
/* "Remove All Edits" → subtle ghost */
#page3 .p3-left-header .btn-ghost{font-family:var(--dk-sans) !important;font-size:10.5px !important;letter-spacing:0.06em !important;text-transform:uppercase !important;color:var(--dk-paper-dim) !important;border:1px solid rgba(0,0,0,0.1) !important;background:var(--dk-paper) !important;padding:0.4rem 0.7rem !important;border-radius:2px !important;}
#page3 .p3-left-header .btn-ghost:hover{color:var(--dk-ink) !important;border-color:rgba(0,0,0,0.3) !important;}
/* View switcher in left panel — match Step 2 refined pills */
#page3 .view-all-bar{flex-wrap:nowrap;align-items:center;}
#page3 .view-all-bar > span{font-family:var(--dk-sans);font-size:10px;font-weight:600;color:var(--dk-paper-dim);text-transform:uppercase;letter-spacing:0.1em;margin-right:0.35rem;flex-shrink:0;}
#page3 .view-all-btn{font-family:var(--dk-sans);font-size:11px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;padding:0.5rem 0.85rem;border:1px solid rgba(0,0,0,0.12);background:transparent;color:#5a5550;border-radius:2px;white-space:nowrap;flex-shrink:0;min-width:0;line-height:1.1;}
#page3 .view-all-btn:hover{border-color:rgba(0,0,0,0.35);color:var(--dk-ink);}
#page3 .view-all-btn.active{background:var(--dk-ink);color:#fff;border-color:var(--dk-ink);}
/* Step 2 view switcher — smaller pills to match the minimal header */
#page2 .view-all-bar > span{font-family:var(--dk-sans);font-size:9.5px;font-weight:600;color:var(--dk-paper-dim);text-transform:uppercase;letter-spacing:0.1em;margin-right:0.4rem;}
#page2 .view-all-btn{font-family:var(--dk-sans);font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:0.35rem 0.7rem;border:1px solid rgba(0,0,0,0.12);background:transparent;color:#5a5550;border-radius:2px;white-space:nowrap;line-height:1.1;}
#page2 .view-all-btn:hover{border-color:rgba(0,0,0,0.35);color:var(--dk-ink);}
#page2 .view-all-btn.active{background:var(--dk-ink);color:#fff;border-color:var(--dk-ink);}
/* ── Left-panel coll-cards: borderless, fashion-catalogue style ── */
#page3 .coll-grid.p3-desk-grid{gap:1.25rem;padding:0 0.75rem 1rem;background:var(--dk-paper);}
#page3 .coll-card{background:transparent;border:none !important;box-shadow:none !important;border-radius:0;}
#page3 .coll-card:hover{box-shadow:none !important;}
#page3 .p3-desk-grid .coll-card.enquiry-on{border:none !important;box-shadow:none !important;}
#page3 .coll-img-wrap{background:#f3f0eb;border-radius:0;overflow:hidden;}
#page3 .coll-card .product-card-img,#page3 .coll-card .product-card-img-wrap{border-radius:0;background:#f3f0eb;}
/* Highlighted (currently in editor) card: subtle brass tick instead of red ring */
#page3 .p3-desk-grid .coll-card.p3-highlighted .coll-img-wrap::before{content:'';position:absolute;top:10px;right:10px;width:8px;height:8px;background:var(--red);border-radius:50%;z-index:7;box-shadow:0 0 0 3px rgba(255,255,255,0.9);}
#page3 .p3-desk-grid .coll-card:not(.p3-highlighted) .coll-img-wrap::after{background:rgba(251,250,247,0.55) !important;}
/* Card body text — Step 2 typography */
#page3 .coll-card .product-card-body{padding:0.75rem 0 0.25rem;background:transparent;}
#page3 .coll-card .product-card-name{font-family:var(--dk-serif);font-size:13.5px;font-weight:500;color:var(--dk-ink);line-height:1.3;letter-spacing:-0.005em;margin-bottom:5px;min-height:0;-webkit-line-clamp:initial;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#page3 .coll-card .product-card-meta{font-family:var(--dk-sans);font-size:10.5px;color:var(--dk-paper-dim);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;}
#page3 .coll-card .product-card-deco{display:none;}
#page3 .coll-card .product-card-footer{border-top:none;padding:0.4rem 0 0;background:transparent;min-height:0;}
#page3 .coll-card .product-card-footer>span:first-child{display:none;}
#page3 .coll-card .p2-swatch{width:11px;height:11px;border-width:1px;border-color:rgba(0,0,0,0.12);}
/* Inline view-switch bar overlaying the card image — refined squared edges */
#page3 .coll-card .card-view-switch{background:rgba(var(--dk-ink-rgb),0.78);border-radius:2px;padding:2px;border:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);gap:0;}
#page3 .coll-card .card-view-switch .cvs-btn{font-family:var(--dk-sans) !important;font-size:10px !important;letter-spacing:0.04em;font-weight:500 !important;color:rgba(255,255,255,0.65) !important;padding:0.3rem 0.55rem !important;border-radius:2px !important;white-space:nowrap;}
#page3 .coll-card .card-view-switch .cvs-btn.active{background:#fff !important;color:var(--dk-ink) !important;}
/* Top-left round buttons (dup, delete, edit) — softer */
#page3 .coll-card .dup-btn,#page3 .coll-card .dup-remove-btn,#page3 .coll-card .p3-edit-btn{background:rgba(255,255,255,0.95) !important;border:none !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 1px 4px rgba(0,0,0,0.08) !important;}
/* ── Right-panel customizer ── */
#page3 .p3-cust-body{background:var(--dk-paper);padding:2rem 1.75rem 1.5rem;}
#page3 .p3-cust-body .modal-body{background:var(--dk-paper);padding:0;}
/* Provide extra top breathing room so the customizer container's top edge isn't clipped against the parent boundary */
#page3 .p3-right-customizer{padding:0 !important;margin:0 !important;background:#fff !important;border-top:none !important;}
/* Aggressively zero-out any top gap so the right-column white surface is flush with the topnav */
html body #page3 .p3-cust-body{padding:0 !important;margin:0 !important;background:#fff !important;border-top:none !important;}
html body #page3 .p3-cust-body .modal-body{margin:0 !important;padding:0 !important;border-top:none !important;}
html body #page3 .p3-cust-body .modal-right{margin:0 !important;border-top:none !important;}
html body #page3 .p3-cust-body .modal-right > *:first-child{margin-top:0 !important;border-top:none !important;}
html body #page3 .p3-cust-body .modal-hd{display:none !important;}
/* "Editing N of N products" header + Save button */
#page3 .modal-canvas-stage{background:var(--dk-paper);}
#page3 [id*="editingCount"],#page3 [class*="editing-count"]{font-family:var(--dk-sans);font-size:11px;color:var(--dk-paper-dim);text-transform:uppercase;letter-spacing:0.1em;}
/* Section titles → premium serif caps */
#page3 .modal-sec-title{font-family:var(--dk-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.14em;color:var(--dk-paper-dim);margin-bottom:0.75rem;margin-top:1.5rem;}
#page3 .modal-sec-title:first-of-type,#page3 #viewTabsSection .modal-sec-title{margin-top:0;}
/* ── View tabs in customizer (front/back/sideL/sideR) ── */
#page3 .view-tabs{gap:0.3rem;}
#page3 .view-tab{border:1px solid rgba(0,0,0,0.12);background:var(--dk-paper);color:#5a5550;font-family:var(--dk-sans);font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;padding:0.5rem 0.4rem;border-radius:2px;}
#page3 .view-tab:hover{border-color:rgba(0,0,0,0.35);color:var(--dk-ink);}
#page3 .view-tab.active{background:var(--dk-ink);border-color:var(--dk-ink);color:#fff;}
/* ── Add Logos action cards (Upload / Generate / Text / Number) ── */
#page3 .add-logos-grid{gap:0.5rem !important;grid-template-columns:repeat(2,1fr) !important;}
#page3 .desktop-ai-gen-trigger{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:2px;padding:0.95rem 0.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;cursor:pointer;transition:all 0.18s ease;color:var(--dk-ink);min-height:78px;}
#page3 .desktop-ai-gen-trigger:hover{border-color:var(--dk-ink);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.06);}
#page3 .desktop-ai-gen-trigger svg{width:18px !important;height:18px !important;stroke:var(--dk-ink) !important;opacity:0.8;}
#page3 .desktop-ai-gen-trigger span{font-family:var(--dk-sans);font-size:11.5px;font-weight:500;color:var(--dk-ink);letter-spacing:0.01em;}
/* ── Placement pills (Right chest / Left chest / Large center) ── */
#page3 .p3-cust-body .place-grid{gap:0.5rem !important;grid-template-columns:repeat(3,1fr) !important;}
#page3 .p3-cust-body .place-btn{font-family:var(--dk-sans) !important;font-size:10.5px !important;font-weight:500 !important;letter-spacing:0.06em;text-transform:uppercase;border:1px solid rgba(0,0,0,0.12) !important;border-style:solid !important;background:var(--dk-paper) !important;color:#5a5550 !important;border-radius:2px !important;padding:0.65rem 0.4rem !important;min-height:auto !important;transition:all 0.15s ease;}
#page3 .p3-cust-body .place-btn:hover{border-color:rgba(0,0,0,0.35) !important;background:var(--dk-paper) !important;color:var(--dk-ink) !important;transform:none !important;}
#page3 .p3-cust-body .place-btn.active{background:var(--dk-ink) !important;border-color:var(--dk-ink) !important;color:#fff !important;}
/* ── "Your Logos" empty state ── */
#page3 [id*="LogosList"]:empty::before,#page3 .logos-list:empty::before{font-family:var(--dk-sans);font-size:11.5px;color:var(--dk-paper-dim);}
/* Mobile responsive */
@media (max-width:768px){
#page3 .coll-grid.p3-desk-grid{gap:1rem;padding:0.5rem;}
#page3 .p3-cust-body{padding:1rem;}
}
/* ══════════════════════════════════════════════════════════════════════
PRESET-ONLY MODE for Step 3 (yachting fork)
The free-drag customisation logic is preserved intact in:
- js/modules/canvas-editor.js
- js/modules/mobile.js (trackpad)
- All canvas SVG overlay handles in index.html (#mSelRect, .rh, etc.)
To restore free customisation, delete this entire block (one removal,
no JS changes needed).
══════════════════════════════════════════════════════════════════════ */
/* Hide drag/resize/rotate handles + selection rect + size tooltip */
#mSelRect, #mDragArea, #mhTL, #mhTR, #mhBL, #mhBR, .rh, #mSizeTip,
#mOverlaySvg .rh, #mOverlaySvg rect[id^="mh"], #mOverlaySvg #mSelRect,
#mOverlaySvg #mDragArea, #mOverlaySvg #mSizeTip{display:none !important;visibility:hidden !important;}
/* Block click/drag interaction on the canvas itself — presets are the only input */
#page3 .modal-canvas-stage canvas,
#page3 #mCanvas,
.modal-canvas-stage canvas{pointer-events:none !important;}
#page3 #mOverlaySvg,
.modal-canvas-stage svg{pointer-events:none !important;}
/* Hide mobile position trackpad (free-form drag alternative) */
.mob-p2-trackpad-wrap,
#mobP2TrackpadWrap{display:none !important;}
/* Hide standalone size slider section — preset zones own sizing */
#sizeSection,
.mob-modal-section #sizeSection{display:none !important;}
/* ── Hide "Your Logos" content but DO NOT touch the .modal-right wrapper
geometry — the customizer modal-body uses `display:grid; grid-template-columns:
230px 1fr 180px` (styles.css:292), and collapsing modal-right's height/width
doesn't change the grid track but somehow breaks the layout in p3CustBody.
Safest: hide only the content; the 180px column visually shows as empty padding. ── */
#page3 .modal-right .modal-sec-title,
#page3 #mUploadGrid,
#page3 #mUploadGridHint{display:none !important;}
/* ── Hide the per-card view selector on Step 3 left panel cards ── */
#page3 .coll-card .card-view-switch,
#page3 .p3-desk-grid .coll-card .card-view-switch{display:none !important;}
/* ── Dark-pill design for the main canvas view selector ──
Defensive: scope is only to elements that exist inside the canvas wrap or stage.
We deliberately do NOT touch view-tabs or card-view-switch elsewhere (left panel etc).
*/
#page3 .modal-canvas-wrap > .view-tabs,
#page3 .modal-canvas-stage > .view-tabs,
#page3 .modal-canvas-wrap .card-view-switch,
#page3 .modal-canvas-stage .card-view-switch{background:rgba(var(--dk-ink-rgb),0.78) !important;border-radius:2px !important;padding:2px !important;border:none !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;gap:0 !important;display:inline-flex !important;}
#page3 .modal-canvas-wrap > .view-tabs > .view-tab,
#page3 .modal-canvas-stage > .view-tabs > .view-tab,
#page3 .modal-canvas-wrap .card-view-switch .cvs-btn,
#page3 .modal-canvas-stage .card-view-switch .cvs-btn{font-family:var(--dk-sans) !important;font-size:10px !important;letter-spacing:0.04em !important;font-weight:500 !important;color:rgba(255,255,255,0.65) !important;padding:0.3rem 0.55rem !important;border-radius:2px !important;white-space:nowrap;background:transparent !important;border:none !important;flex:0 0 auto !important;}
#page3 .modal-canvas-wrap > .view-tabs > .view-tab.active,
#page3 .modal-canvas-stage > .view-tabs > .view-tab.active,
#page3 .modal-canvas-wrap .card-view-switch .cvs-btn.active,
#page3 .modal-canvas-stage .card-view-switch .cvs-btn.active{background:#fff !important;color:var(--dk-ink) !important;}
/* ── Placement-first flow ──
Placement is the entry point. Each preset is a card with a "+" icon.
Add Logos panel is hidden until a placement is tapped.
*/
/* ── Right-panel section harness: equal spacing, consistent titles. ──
Order: Library (Your Logos) first, then Placement. Both use the same title
styling and the same internal grid metrics for visual parity. */
#page3 .yh-logo-library{order:0 !important;margin:1.25rem 0 0 !important;padding:1.25rem 0 0 !important;border-top:1px solid rgba(0,0,0,0.06) !important;}
#page3 #placementSection{order:1 !important;margin:1.25rem 0 0 !important;padding:1.25rem 0 0 !important;border-top:1px solid rgba(0,0,0,0.06) !important;}
#page3 #placementSection .modal-sec-title,
#page3 .yh-logo-library .modal-sec-title{font-family:var(--dk-sans) !important;font-size:11px !important;color:var(--dk-ink) !important;font-weight:600 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;margin:0 0 0.85rem 0 !important;padding:0 !important;display:block !important;}
#page3 #placementSection .modal-sec-title::after{content:' · TAP TO ADD A LOGO';color:var(--accent);font-weight:500;letter-spacing:0.1em;font-size:10px;}
#page3 .yh-logo-library .modal-sec-title::after{content:' · DRAG TO PLACE';color:var(--accent);font-weight:500;letter-spacing:0.1em;font-size:10px;}
#page3 #placementSection .place-grid{padding:0;}
/* Add Logos panel → modal overlay (centered card + dimmed backdrop). The element stays
in DOM so its existing source-button handlers continue to work; CSS just reposes it. */
#page3 #addLogosSection{order:2;display:none !important;position:relative;}
#page3 #addLogosSection.yh-revealed{
display:block !important;
position:fixed !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
z-index:10001;
background:#fff;
padding:2.25rem 2.5rem 2rem !important;
border-radius:14px;
box-shadow:0 24px 80px rgba(var(--dk-ink-rgb),0.28), 0 0 0 1px rgba(0,0,0,0.04);
min-width:440px;
max-width:520px;
margin:0;
border:none !important;
border-top:none !important;
}
/* Display the title nicely with a Playfair heading prepended */
#page3 #addLogosSection.yh-revealed::before{content:'Add a logo';display:block;font-family:var(--dk-serif);font-size:22px;font-weight:700;color:#1a1d23;letter-spacing:-0.01em;margin-bottom:0.35rem;}
#page3 #addLogosSection.yh-revealed .modal-sec-title{font-family:var(--dk-sans) !important;font-size:11px !important;color:var(--muted) !important;font-weight:600 !important;letter-spacing:0.12em !important;margin-bottom:1.5rem !important;padding-right:32px !important;text-transform:uppercase !important;}
#page3 #addLogosSection.yh-revealed .modal-sec-title::after{content:'CHOOSE A SOURCE';color:var(--accent);font-weight:600;letter-spacing:0.12em;font-size:11px;}
/* 2x2 source-trigger button grid */
#page3 #addLogosSection.yh-revealed .add-logos-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:0.7rem !important;}
#page3 #addLogosSection.yh-revealed .desktop-ai-gen-trigger{background:#fff !important;border:1.5px solid var(--border) !important;border-radius:10px !important;padding:1.1rem 0.9rem !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:0.6rem !important;cursor:pointer !important;transition:all 0.18s ease !important;min-height:96px !important;}
#page3 #addLogosSection.yh-revealed .desktop-ai-gen-trigger:hover{border-color:var(--accent) !important;background:var(--accent-tint-2) !important;transform:translateY(-1px) !important;box-shadow:0 4px 14px rgba(var(--dk-accent-rgb),0.12) !important;}
#page3 #addLogosSection.yh-revealed .desktop-ai-gen-trigger svg{width:22px !important;height:22px !important;stroke:var(--accent) !important;opacity:1 !important;}
#page3 #addLogosSection.yh-revealed .desktop-ai-gen-trigger span{font-family:var(--dk-sans) !important;font-size:12.5px !important;font-weight:600 !important;color:#1a1d23 !important;letter-spacing:0 !important;}
.yh-addlogos-close{position:absolute !important;top:1.1rem !important;right:1.1rem !important;background:var(--offwhite) !important;border:none !important;cursor:pointer !important;color:var(--muted) !important;padding:0 !important;line-height:1 !important;font-size:18px !important;font-family:var(--dk-sans) !important;width:32px !important;height:32px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;transition:all 0.15s !important;}
.yh-addlogos-close:hover{background:var(--border) !important;color:#1a1d23 !important;}
/* Backdrop — darker + blur for premium feel */
.yh-addlogos-backdrop{position:fixed;inset:0;background:rgba(var(--dk-ink-rgb),0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10000;opacity:0;visibility:hidden;transition:opacity 0.22s ease,visibility 0s 0.22s;}
body.yh-addlogos-open .yh-addlogos-backdrop{opacity:1;visibility:visible;transition:opacity 0.22s ease,visibility 0s 0s;}
/* ── Saved-logos library: tiles matched to placement-box size for parity ── */
.yh-logo-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;min-height:0;padding:0;}
.yh-logo-tile{width:100%;max-width:76px;margin:0 auto;aspect-ratio:1;background-color:#fff;background-size:65% 65%;background-position:center;background-repeat:no-repeat;border:1px solid rgba(0,0,0,0.1);border-radius:3px;cursor:grab;transition:all 0.15s ease;position:relative;}
.yh-logo-tile:hover{border-color:var(--dk-ink);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.06);}
.yh-logo-tile:active{cursor:grabbing;}
.yh-logo-tile.yh-dragging{opacity:0.4;}
.yh-logo-tiles:empty::after{content:'No saved logos yet.';display:block;font-family:var(--dk-sans);font-size:10.5px;color:var(--dk-paper-dim);padding:0.25rem 0;grid-column:1 / -1;font-weight:400;letter-spacing:0.02em;text-transform:none;font-style:italic;}
/* Drag-over visual on placement cards when a tile is being dragged onto them */
#page3 .p3-cust-body .place-btn.yh-drag-over::before{border-color:var(--accent) !important;border-style:solid !important;background:var(--accent-tint) !important;box-shadow:0 0 0 2px rgba(var(--dk-accent-rgb),0.3) !important;}
/* Your Logos sits below */
#page3 [id*="LogosList"],
#page3 .your-logos-section,
#page3 [class*="your-logos"]{order:3;}
/* Placement preset buttons: 2-col grid, ~76px square boxes. Identical metrics
used by the library tiles below for visual parity. */
#page3 .p3-cust-body .place-grid{gap:0.6rem !important;grid-template-columns:repeat(2,1fr) !important;padding:0 !important;}
#page3 .p3-cust-body .place-grid .place-btn,
#page3 .p3-cust-body .place-btn{padding:0 !important;font-size:9.5px !important;font-weight:600 !important;letter-spacing:0.11em !important;text-transform:uppercase;border:none !important;background:transparent !important;color:#5a5550 !important;border-radius:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:flex-start !important;gap:0.4rem !important;min-height:auto !important;line-height:1.1 !important;transition:color 0.18s ease;position:relative;text-align:center;}
/* The "+"-or-check box rendered as ::before, ordered AFTER the label text. */
#page3 .p3-cust-body .place-btn::before{content:'+';order:2;display:flex;align-items:center;justify-content:center;width:100%;max-width:76px;aspect-ratio:1;height:auto;border-radius:3px;border:1.5px dashed rgba(0,0,0,0.18);font-family:var(--dk-sans);font-size:22px;font-weight:300;color:var(--dk-ink);line-height:1;background:#fff;transition:all 0.18s ease;box-sizing:border-box;margin:0 auto;}
/* When 3 placements total: 3rd spans both cols, its box centered */
/* Removed legacy 3rd-of-3 spanning — placements now always render in a 2x2 grid */
#page3 .p3-cust-body .place-btn:hover{color:var(--dk-ink) !important;}
#page3 .p3-cust-body .place-btn:hover::before{border-color:var(--dk-ink);border-style:solid;background:var(--dk-paper);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.04);}
/* Nuke the legacy .place-btn.active black-navy background from styles.css regardless of cascade.
Use a super-specific selector with !important on every relevant property. */
html body #page3 .p3-cust-body .place-grid .place-btn,
html body #page3 .p3-cust-body .place-grid .place-btn.active,
html body #page3 .p3-cust-body .place-grid .place-btn:hover,
html body #page3 .p3-cust-body .place-grid .place-btn:focus,
html body #page3 .p3-cust-body .place-grid .place-btn.yh-has-logo,
html body #page3 .p3-cust-body .place-grid .place-btn.yh-has-logo.active{background:transparent !important;background-color:transparent !important;background-image:none !important;border-color:transparent !important;}
/* Active state (no logo yet — user has just picked this placement zone): subtle, no black */
#page3 .p3-cust-body .place-btn.active:not(.yh-has-logo){color:var(--dk-ink) !important;font-weight:700 !important;}
#page3 .p3-cust-body .place-btn.active:not(.yh-has-logo)::before{content:'\2713';border-color:var(--dk-ink) !important;border-style:solid !important;background:#fff !important;color:var(--dk-ink) !important;font-size:18px !important;}
/* Has-logo state: the ::before becomes the logo display. */
#page3 .p3-cust-body .place-btn.yh-has-logo::before{content:'' !important;background-color:#fff !important;background-image:var(--yh-logo-img) !important;background-repeat:no-repeat !important;background-position:center !important;background-size:60% auto !important;border-color:var(--dk-ink) !important;border-style:solid !important;color:transparent !important;}
#page3 .p3-cust-body .place-btn.yh-has-logo.active::before{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(var(--dk-accent-rgb),0.18);}
#page3 .p3-cust-body .place-btn.yh-has-logo{color:var(--dk-ink) !important;font-weight:700 !important;}
/* Small "×" delete button — inside the top-right of the box area (using inset:0 + flex). */
.yh-place-delete{position:absolute;right:6px;bottom:50px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.95);border:1px solid rgba(0,0,0,0.12);font-family:var(--dk-sans);font-size:14px;font-weight:400;line-height:1;color:var(--dk-ink);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:5;transition:all 0.15s ease;box-shadow:0 1px 4px rgba(0,0,0,0.08);}
.yh-place-delete:hover{background:var(--dk-ink);color:#fff;border-color:var(--dk-ink);transform:scale(1.05);}
/* ══════════════════════════════════════════════════════════════════════
STEP 3 MOCKUP REDESIGN — visual + layout pass
Restructures the workspace to match the Claude Design mockup:
[264 cards] [1fr canvas] [332 control]
Inner customizer body becomes a 2-col grid (canvas + right column),
with modal-mid in col 1 spanning rows and modal-left + modal-right
stacked in col 2. Keeps the placement-first JS flow intact.
══════════════════════════════════════════════════════════════════════ */
/* Outer split — grid replaces flex. Critical: grid-template-rows:1fr forces the row to fill the
parent's available height (instead of sizing to the taller column's content), and align-self:stretch
makes each column stretch vertically to fill the row. Without these, the right column was bottom-
aligned to the bottom of the row driven by the left-cards' content height. */
/* Owner: cards 1-per-row but narrower — the details column was mostly empty. Slimmer cards
panel (was 380px) tightens the per-card details and gives the customiser more room. */
#page3 .p3-desktop-split{display:grid !important;grid-template-columns:330px 1fr !important;grid-template-rows:1fr !important;align-items:stretch !important;margin:0 !important;padding:0 !important;}
#page3 .topnav{margin-bottom:0 !important;}
#page3 .p3-left-cards{flex:none !important;min-width:0;align-self:stretch !important;min-height:0;overflow:hidden;}
#page3 .p3-right-customizer{flex:none !important;min-width:0;align-self:stretch !important;height:100% !important;min-height:0;}
/* The old free-drag mobile wrapper is superseded by the queue + full-screen modal editor — off everywhere. */
html body #page3 .p3-mobile-wrap{display:none !important;}
/* DESKTOP: the split layout owns navigation, so hide the mobile step + sticky bars there.
MOBILE (<=767): these two ARE the nav (step indicator + Back / Review) and are restored in the mobile block below. */
@media (min-width:768px){
html body #page3 .mobile-steps-bar,
html body #page3 .mob-p3-sticky-bar{display:none !important;}
}
/* Collapsed state: customizer hidden, cards span full width */
#page3 .p3-collapsed.p3-desktop-split,
.p3-collapsed#p3DesktopSplit{grid-template-columns:1fr !important;}
/* Inner customizer body — 2-col grid, canvas on left, right column stacks placements + logos.
Uses explicit grid placement to flip modal-left from col 1 to col 2 without HTML changes. */
#page3 .p3-cust-body .modal-body{
grid-template-columns:1fr 332px !important;
grid-template-rows:auto 1fr !important;
gap:0 1.25rem;
padding:0 !important;
background:transparent !important;
}
#page3 .p3-cust-body .modal-mid{grid-column:1;grid-row:1 / 3;min-width:0;display:flex;flex-direction:column;}
#page3 .p3-cust-body .modal-left{grid-column:2;grid-row:1;padding:0 !important;border:none !important;min-width:0;display:flex;flex-direction:column;gap:0.5rem;}
#page3 .p3-cust-body .modal-right{grid-column:2;grid-row:2;padding:0 !important;border:none !important;min-width:0;display:flex;flex-direction:column;}
/* Right column: pure white, extends to topnav, no padding gap.
Centre stays cream/grey so the canvas-stage card sits on it nicely. */
#page3 .p3-cust-body{padding:0 !important;background:#fff !important;}
#page3 .modal-canvas-wrap{
background:#eceae5 !important;
padding:1.25rem !important;
border-right:none !important;
margin:0 !important;
}
#page3 .modal-canvas-stage{
background:linear-gradient(160deg,#fbfaf8,#eeece6) !important;
border-radius:14px !important;
box-shadow:0 8px 32px rgba(0,0,0,0.08) !important;
overflow:hidden;
}
/* Step-3 topnav — gold accent + Yachting brand */
#page3 .topnav{background:#1a1d23;}
/* Active-step underline removed across all pages — the active state is
already signalled clearly by the filled brass/red number circle vs the
✓ checkmark on completed steps. */
.nav-step.active::after,.mobile-step.active::after{display:none !important;}
#page3 .nav-step.active .step-num{background:var(--accent);}
#page3 .nav-step.done .step-num{background:#2f9e6f;}
#page3 .nav-brand{font-family:var(--dk-serif);color:#fff;}
#page3 .nav-brand .yh-dot{color:var(--accent-bright);}
#page3 .nav-btn.primary,
#page3 .topnav .btn-red{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important;}
#page3 .nav-btn.primary:hover,
#page3 .topnav .btn-red:hover{background:var(--accent-deep) !important;border-color:var(--accent-deep) !important;}
/* ── Unified step header (cz-hd) — 4 toolbar-switchable designs (A Stepper / B Bold bar /
C Rail / D Segmented), ported from the design bundle (cx4.css). Built by yh-redesign.js's
czHeaderHTML and used across collections (#page2), customiser (#page3) and review (#page4);
yachting-only. Back sits left of next in the top-right, named after the previous step. ── */
html[data-skin="yachting"] .cz-hd{position:sticky;top:0;z-index:200;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1.8rem;flex-shrink:0;}
html[data-skin="yachting"] .cz-hd-brand{position:absolute;left:50%;transform:translateX(-50%);font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:600;}
html[data-skin="yachting"] .cz-hd-actions{display:flex;align-items:center;gap:.6rem;}
html[data-skin="yachting"] .cz-hd-back{background:none;border:1px solid rgba(0,0,0,.18);color:inherit;font-family:inherit;font-size:12.5px;font-weight:500;padding:.5rem .9rem;border-radius:6px;cursor:pointer;white-space:nowrap;}
html[data-skin="yachting"] .cz-hd-next{background:#9c7f43;border:none;color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;padding:.55rem 1.05rem;border-radius:6px;cursor:pointer;white-space:nowrap;}
html[data-skin="yachting"] .cz-hd-next:hover{background:#836a37;}
html[data-skin="yachting"] .cz-hd-next:disabled{opacity:.45;cursor:not-allowed;}
/* A — Stepper (light) */
html[data-skin="yachting"] .cz-hd-steps{background:#f6f1e9;border-bottom:1px solid rgba(0,0,0,.1);color:#1a1714;}
html[data-skin="yachting"] .cz-hd-stepper{display:flex;align-items:center;gap:.5rem;}
html[data-skin="yachting"] .cz-hd-step{display:flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;padding:0;}
html[data-skin="yachting"] .cz-hd-dot{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#8a8478;background:#fff;}
html[data-skin="yachting"] .cz-hd-step.on .cz-hd-dot{background:#9c7f43;border-color:#9c7f43;color:#fff;box-shadow:0 0 0 4px rgba(156,127,67,.18);}
html[data-skin="yachting"] .cz-hd-step.done .cz-hd-dot{background:#1a1714;border-color:#1a1714;color:#fff;}
html[data-skin="yachting"] .cz-hd-lbl{font-size:12.5px;font-weight:500;color:#6a655d;}
html[data-skin="yachting"] .cz-hd-step.on .cz-hd-lbl{color:#1a1714;font-weight:700;}
html[data-skin="yachting"] .cz-hd-step.done .cz-hd-lbl{color:#1a1714;}
html[data-skin="yachting"] .cz-hd-conn{width:30px;height:2px;background:rgba(0,0,0,.14);border-radius:2px;}
html[data-skin="yachting"] .cz-hd-conn.done{background:#9c7f43;}
/* B — Bold bar (dark) */
html[data-skin="yachting"] .cz-hd-bar{background:#0e1217;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;}
html[data-skin="yachting"] .cz-hd-bold{display:flex;gap:.5rem;}
html[data-skin="yachting"] .cz-bold-step{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font-family:inherit;font-size:12.5px;font-weight:600;padding:.45rem .9rem;border-radius:999px;cursor:pointer;}
html[data-skin="yachting"] .cz-bold-no{width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
html[data-skin="yachting"] .cz-bold-step.done{color:#fff;border-color:rgba(255,255,255,.3);}
html[data-skin="yachting"] .cz-bold-step.on{background:#9c7f43;border-color:#9c7f43;color:#fff;}
html[data-skin="yachting"] .cz-bold-step.on .cz-bold-no{border-color:#fff;background:rgba(255,255,255,.2);}
html[data-skin="yachting"] .cz-hd-bar .cz-hd-brand{color:#fff;}
html[data-skin="yachting"] .cz-hd-bar .cz-hd-back{border-color:rgba(255,255,255,.25);color:#fff;}
/* C — Progress rail (light) */
html[data-skin="yachting"] .cz-hd-rail{background:#faf8f3;border-bottom:1px solid rgba(0,0,0,.1);color:#1a1714;}
html[data-skin="yachting"] .cz-hd-railwrap{display:flex;flex-direction:column;gap:.45rem;min-width:340px;}
html[data-skin="yachting"] .cz-rail-track{height:3px;background:rgba(0,0,0,.12);border-radius:3px;position:relative;}
html[data-skin="yachting"] .cz-rail-fill{position:absolute;left:0;top:0;height:100%;background:#9c7f43;border-radius:3px;transition:width .35s ease;}
html[data-skin="yachting"] .cz-rail-labels{display:flex;gap:1.2rem;}
html[data-skin="yachting"] .cz-rail-lbl{display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;font-family:inherit;font-size:11.5px;font-weight:500;color:#8a8478;cursor:pointer;padding:0;}
html[data-skin="yachting"] .cz-rail-node{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.2);}
html[data-skin="yachting"] .cz-rail-lbl.done{color:#1a1714;}
html[data-skin="yachting"] .cz-rail-lbl.done .cz-rail-node,html[data-skin="yachting"] .cz-rail-lbl.on .cz-rail-node{background:#9c7f43;}
html[data-skin="yachting"] .cz-rail-lbl.on{color:#1a1714;font-weight:700;}
/* D — Segmented (joined pills) — default */
html[data-skin="yachting"] .cz-hd-pill{background:#f6f1e9;border-bottom:1px solid rgba(0,0,0,.1);color:#1a1714;}
html[data-skin="yachting"] .cz-hd-seg{display:flex;border:1px solid rgba(0,0,0,.16);border-radius:999px;overflow:hidden;}
html[data-skin="yachting"] .cz-seg-step{display:inline-flex;align-items:center;gap:.45rem;background:none;border:none;border-right:1px solid rgba(0,0,0,.12);color:#8a8478;font-family:inherit;font-size:12px;font-weight:600;padding:.5rem 1rem;cursor:pointer;}
html[data-skin="yachting"] .cz-seg-step:last-child{border-right:none;}
html[data-skin="yachting"] .cz-seg-no{width:18px;height:18px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
html[data-skin="yachting"] .cz-seg-step.done{color:#1a1714;background:rgba(0,0,0,.04);}
html[data-skin="yachting"] .cz-seg-step.on{background:#9c7f43;color:#fff;}
html[data-skin="yachting"] .cz-seg-step.on .cz-seg-no{border-color:#fff;}
/* wordmark — SY monogram + STITCHA YACHTING */
html[data-skin="yachting"] .cz-wm{display:flex;align-items:center;gap:.5rem;white-space:nowrap;}
html[data-skin="yachting"] .cz-wm-mono{font-family:'DM Sans',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;}
html[data-skin="yachting"] .cz-wm-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #9c7f43;border-radius:50%;font-family:'Playfair Display',serif;font-size:12px;letter-spacing:0;color:#9c7f43;}
/* ── Unified BLACK step-header chrome (owner: header always black w/ white STITCHA YACHTING;
the dev toolbar only swaps the progress-bar STYLE inside it — Segmented default). These come
after the per-design rules above so they win on equal specificity. ── */
html[data-skin="yachting"] .cz-hd,
html[data-skin="yachting"] .cz-hd-pill,
html[data-skin="yachting"] .cz-hd-steps,
html[data-skin="yachting"] .cz-hd-rail,
html[data-skin="yachting"] .cz-hd-bar{background:#0e1217;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;}
html[data-skin="yachting"] .cz-hd-brand{color:#fff;}
html[data-skin="yachting"] .cz-hd-back{border-color:rgba(255,255,255,.25);color:#fff;}
html[data-skin="yachting"] .cz-hd-back:hover{background:rgba(255,255,255,.08);}
/* Segmented (default) */
html[data-skin="yachting"] .cz-hd-seg{border-color:rgba(255,255,255,.22);}
html[data-skin="yachting"] .cz-seg-step{border-right-color:rgba(255,255,255,.16);color:rgba(255,255,255,.62);}
html[data-skin="yachting"] .cz-seg-step.done{color:#fff;background:rgba(255,255,255,.06);}
html[data-skin="yachting"] .cz-seg-step.on{background:#9c7f43;color:#fff;}
/* Stepper */
html[data-skin="yachting"] .cz-hd-dot{border-color:rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.7);}
html[data-skin="yachting"] .cz-hd-step.done .cz-hd-dot{background:#fff;border-color:#fff;color:#0e1217;}
html[data-skin="yachting"] .cz-hd-lbl{color:rgba(255,255,255,.65);}
html[data-skin="yachting"] .cz-hd-step.on .cz-hd-lbl,
html[data-skin="yachting"] .cz-hd-step.done .cz-hd-lbl{color:#fff;}
html[data-skin="yachting"] .cz-hd-conn{background:rgba(255,255,255,.2);}
/* Rail */
html[data-skin="yachting"] .cz-rail-track{background:rgba(255,255,255,.16);}
html[data-skin="yachting"] .cz-rail-lbl{color:rgba(255,255,255,.6);}
html[data-skin="yachting"] .cz-rail-lbl.on,
html[data-skin="yachting"] .cz-rail-lbl.done{color:#fff;}
html[data-skin="yachting"] .cz-rail-node{background:rgba(255,255,255,.25);}
@media (max-width:820px){html[data-skin="yachting"] .cz-hd-brand{display:none;}html[data-skin="yachting"] .cz-hd-lbl,html[data-skin="yachting"] .cz-rail-labels{display:none;}html[data-skin="yachting"] .cz-hd-railwrap{min-width:160px;}}
/* Phone: on the customiser the sticky mobile-steps-bar + fixed mob-p3-sticky-bar are the nav — hide the cz-hd there. */
@media (max-width:767px){html[data-skin="yachting"] #page3 .cz-hd{display:none;}}
/* Mobile fallback: only collapse to single-column at true mobile widths (< 768px).
Previously this kicked in at 900px which made DevTools-open browsers fall into the stacked layout. */
@media (max-width:767px){
#page3 .p3-desktop-split{grid-template-columns:1fr !important;}
#page3 .p3-cust-body .modal-body{grid-template-columns:1fr !important;}
/* the step + sticky bars ARE the mobile nav (step indicator + Back / Review) — restore them */
html body #page3 .mobile-steps-bar{ display:flex !important; }
html body #page3 .mob-p3-sticky-bar{ display:flex !important; }
/* clear the fixed bottom nav bar so the last queue cards aren't hidden behind it */
#page3 .p3-left-scroll{ padding-bottom:84px !important; }
/* larger tap targets in the full-screen editor modal on phones (Done is the primary close) */
.overlay .modal-close, .overlay .modal-close-done{ min-height:40px !important; display:inline-flex; align-items:center; justify-content:center; padding:.45rem .9rem !important; }
.modal-canvas-wrap .yh-fullview-btn{ min-height:34px; padding:.3rem .7rem; }
}
/* ── Step 3 desktop layout override: styles.css:3557-3559 forces
`.p3-cust-body .modal-body { grid-template-columns: 1fr 1fr !important; }`
and `.p3-cust-body .modal-left { display: none !important; }`.
We override to lay out as [canvas 1fr | right column 332px], with
modal-right being the single right-column container (everything is
reparented there at runtime). ── */
html body #page3 .p3-cust-body .modal-body{grid-template-columns:1fr 380px !important;grid-template-rows:1fr !important;gap:0 !important;}
html body #page3 .p3-cust-body .modal-left{display:none !important;}
html body #page3 .p3-cust-body .modal-canvas-wrap{grid-column:1;grid-row:1;}
html body #page3 .p3-cust-body .modal-right{grid-column:2;grid-row:1;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;align-items:stretch !important;gap:0 !important;max-width:none !important;padding:0 !important;margin:0 !important;background:#fff !important;border:none !important;border-top:none !important;overflow-y:auto;min-height:0;}
/* Defensive: no top spacing on any first-order visible child of modal-right (the one with order:1 = yh-apply-block) */
html body #page3 .p3-cust-body .modal-right > .yh-apply-block{margin-top:0 !important;padding-top:1rem !important;}
/* Final aggressive top-flush: nothing in the chain between topnav and yh-apply-block adds vertical space */
html body #page3 .p3-desktop-split,
html body #page3 .p3-desktop-split > .p3-right-customizer,
html body #page3 .p3-right-customizer > .p3-cust-body,
html body #page3 .p3-cust-body > .modal-body,
html body #page3 .modal-body > .modal-right{padding-top:0 !important;margin-top:0 !important;border-top:none !important;}
/* ══════════════════════════════════════════════════════════════════════
STEP 3 MOCKUP REDESIGN — left column + right column section styles
Matches the Claude Design mockup: garment-queue cards on left with
thumb + info + swatches + Included-toggle row, and a dense right
control panel with Apply / Your Logos / Selected / Placement sections.
══════════════════════════════════════════════════════════════════════ */
/* ── Left column header: VIEW tabs + queue meta + Remove All ── */
#page3 .p3-left-header{display:flex;flex-direction:column;gap:0.55rem;padding:0.7rem 0.85rem !important;background:#fff !important;border-bottom:1px solid var(--border) !important;}
#page3 .view-all-bar{display:flex;gap:0.25rem;flex-wrap:nowrap;}
#page3 .view-all-bar > span{display:none;}
#page3 .view-all-btn{flex:1;border:1.5px solid var(--border) !important;border-radius:6px !important;background:#fff !important;color:var(--muted) !important;font-family:var(--dk-sans) !important;font-size:10px !important;font-weight:700 !important;letter-spacing:0.03em !important;text-transform:uppercase !important;padding:0.35rem 0.2rem !important;transition:all 0.13s ease;}
#page3 .view-all-btn:hover{border-color:#1a1d23 !important;color:#1a1d23 !important;background:#fff !important;}
#page3 .view-all-btn.active{background:#1a1d23 !important;border-color:#1a1d23 !important;color:#fff !important;}
#page3 .yh-queue-meta{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;}
#page3 .yh-qm-label{font-size:11px;color:var(--muted);font-family:var(--dk-sans);}
#page3 .yh-qm-label b{color:#1a1d23;font-weight:700;}
#page3 .yh-link-pill{display:inline-flex;align-items:center;gap:0.3rem;font-size:10px;font-weight:700;padding:0.2rem 0.5rem;border-radius:20px;background:var(--accent-tint);color:var(--accent-deep);font-family:var(--dk-sans);}
#page3 .yh-link-pill svg{width:11px;height:11px;}
#page3 .yh-remove-all{color:var(--muted) !important;border:1px solid var(--border) !important;background:#fff !important;font-family:var(--dk-sans) !important;font-size:10px !important;font-weight:600 !important;letter-spacing:0.04em !important;text-transform:none !important;align-self:flex-end;}
#page3 .yh-remove-all:hover{color:#1a1d23 !important;border-color:var(--border2) !important;}
/* Hide the legacy "Click a product..." hint — mockup doesn't have it */
#page3 .p3-highlight-hint{display:none !important;}
/* ── Left column cards: horizontal layout with thumb + info + swatches + toggle ── */
#page3 .p3-left-scroll{background:#fff !important;padding-top:0.5rem;}
#page3 .coll-grid.p3-desk-grid{gap:0.6rem !important;padding:0.6rem 0.7rem 1rem !important;background:#fff !important;grid-template-columns:1fr !important;}
#page3 .coll-card{background:#fff !important;border:1.5px solid var(--border) !important;border-radius:11px !important;overflow:hidden !important;box-shadow:none !important;display:block !important;position:relative;transition:all 0.15s ease;}
#page3 .coll-card:hover{border-color:var(--border2) !important;box-shadow:0 2px 12px rgba(0,0,0,0.06) !important;}
#page3 .coll-card.p3-highlighted{border-color:var(--accent) !important;box-shadow:0 0 0 1.5px var(--accent) !important;}
#page3 .coll-card.p3-highlighted .coll-img-wrap::before{display:none !important;}
#page3 .coll-card.p3-highlighted .coll-img-wrap::after{background:transparent !important;}
/* Card content: thumb visual + body + footer + included-bar are placed via grid (see below).
Extra right padding on the info area keeps long product names from running under the
stacked action buttons (edit/copy/delete) on the right edge of the card. */
#page3 .coll-card .coll-img-wrap img,
#page3 .coll-card .product-card-img,
#page3 .coll-card .product-card-img-wrap{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:6px !important;background:var(--cream) !important;}
#page3 .coll-card .product-card-body,
#page3 .coll-card .product-card-footer{padding-right:2.4rem !important;}
/* Owner: let the full garment name wrap across up to two lines (don't truncate to one).
The body keeps padding-right:2.4rem (below) so the name never runs under the edit/copy
icons. display:block so wrapping isn't blockified away as a flex item. */
#page3 .coll-card .product-card-name{font-family:var(--dk-sans) !important;font-size:12px !important;font-weight:600 !important;color:#1a1d23 !important;line-height:1.3 !important;letter-spacing:0 !important;margin:0 !important;white-space:normal !important;word-break:break-word !important;display:block !important;overflow:hidden !important;padding-right:30px !important;}
#page3 .coll-card .product-card-meta{font-family:var(--dk-sans) !important;font-size:10.5px !important;color:var(--muted) !important;font-weight:500 !important;text-transform:none !important;letter-spacing:0 !important;margin-top:1px;}
#page3 .coll-card .product-card-deco{display:none !important;}
#page3 .coll-card .product-card-body{display:flex;flex-direction:column;gap:0.1rem;}
/* "No logo yet" / "Logo applied" status — driven by .yh-has-logo class */
#page3 .coll-card .product-card-body::after{content:'No logo yet';display:block;font-family:var(--dk-sans);font-size:9.5px;font-weight:700;color:var(--light);margin-top:0.3rem;text-transform:none;letter-spacing:0;}
#page3 .coll-card.yh-has-logo .product-card-body::after{content:'\2713 Logo applied';color:#2f9e6f;}
#page3 .coll-card .product-card-footer{display:flex !important;border:none !important;background:transparent !important;min-height:0 !important;gap:0.3rem;align-items:center;}
#page3 .coll-card .product-card-footer>span:first-child{display:none !important;}
#page3 .coll-card .p2-swatch{width:13px !important;height:13px !important;border:1.5px solid #fff !important;box-shadow:0 0 0 1px var(--border) !important;border-radius:50% !important;}
/* ── Right column: section blocks shared between modal-left and modal-right ── */
/* Wrap each block as a card-like section */
#page3 .p3-cust-body .modal-left{padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;gap:0.75rem !important;}
#page3 .p3-cust-body .modal-right{padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;gap:0.75rem !important;}
/* Section blocks — flat with bottom-border dividers (column is one continuous white surface) */
#page3 .yh-r-block,
#page3 #placementSection,
#page3 .yh-logo-library{background:#fff !important;border-radius:0 !important;padding:1rem 1.1rem !important;border:none !important;border-bottom:1px solid var(--border) !important;box-shadow:none !important;margin:0 !important;}
/* Eyebrow labels on every section */
#page3 .yh-r-eyebrow,
#page3 .yh-r-block .modal-sec-title,
#page3 #placementSection .modal-sec-title,
#page3 .yh-logo-library .modal-sec-title{font-family:var(--dk-sans) !important;font-size:10px !important;font-weight:700 !important;color:#1a1d23 !important;letter-spacing:0.08em !important;text-transform:uppercase !important;margin:0 0 0.5rem 0 !important;padding:0 !important;display:flex;align-items:center;gap:0.4rem;}
#page3 .yh-r-eyebrow .sub,
#page3 #placementSection .modal-sec-title::after,
#page3 .yh-logo-library .modal-sec-title::after{color:var(--accent) !important;font-weight:600 !important;letter-spacing:0.04em !important;font-size:9.5px !important;}
/* PLACEMENT subtag tracks the current view (data-view set by the polling loop) */
#page3 #placementSection .modal-sec-title::after{content:' · FRONT';}
#page3 #placementSection[data-view="front"] .modal-sec-title::after{content:' · FRONT';}
#page3 #placementSection[data-view="back"] .modal-sec-title::after{content:' · BACK';}
#page3 #placementSection[data-view="sideL"] .modal-sec-title::after{content:' · SIDE L';}
#page3 #placementSection[data-view="sideR"] .modal-sec-title::after{content:' · SIDE R';}
#page3 .yh-logo-library .modal-sec-title::after{content:' · TAP TO SELECT';}
/* APPLY LOGOS TO segmented control */
#page3 .yh-apply-seg{display:flex;background:var(--offwhite);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;margin-top:0.5rem;}
#page3 .yh-apply-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:0.35rem;padding:0.45rem 0.3rem;border:none;background:transparent;border-radius:7px;cursor:pointer;font-family:var(--dk-sans);font-size:11px;font-weight:700;color:var(--muted);transition:all 0.15s ease;}
#page3 .yh-apply-opt.yh-on{background:#fff;color:#1a1d23;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
#page3 .yh-apply-opt svg{width:13px;height:13px;}
#page3 .yh-apply-note{font-family:var(--dk-sans);font-size:10.5px;color:var(--muted);margin-top:0.55rem;line-height:1.5;}
#page3 .yh-apply-note b{color:#1a1d23;font-weight:600;}
/* SELECTED PLACEMENT empty state */
#page3 .yh-sel-empty{font-family:var(--dk-sans);font-size:11px;color:var(--light);line-height:1.5;font-style:italic;margin-top:0.4rem;}
/* ── PLACEMENT pills — horizontal layout per mockup ── */
/* Strip the existing 76px-square styles by overriding with high specificity */
#page3 .p3-cust-body #placementSection .place-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:0.45rem !important;padding:0 !important;margin-top:0.4rem !important;}
#page3 .p3-cust-body #placementSection .place-grid .place-btn,
#page3 .p3-cust-body .place-grid .place-btn{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;gap:0.5rem !important;padding:0.5rem 0.55rem !important;border:1.5px solid var(--border) !important;border-radius:8px !important;background:#fff !important;cursor:pointer;text-align:left !important;font-family:var(--dk-sans) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;color:#1a1d23 !important;min-height:auto !important;line-height:1.2 !important;transition:all 0.13s ease;position:relative;overflow:visible;}
#page3 .p3-cust-body .place-grid .place-btn:hover{border-color:#1a1d23 !important;background:#fff !important;transform:none !important;box-shadow:none !important;color:#1a1d23 !important;}
/* placements stay in their natural cells — 3rd one lands at bottom-left, no spanning */
/* Placement icon block — the dot is now drawn INTO the icon's background via radial-gradient,
so it's guaranteed to be inside the box regardless of button height. Per-zone background-position
shifts the dot to the correct relative position on the t-shirt silhouette. */
#page3 .p3-cust-body .place-grid .place-btn::before{
content:'' !important;
display:block !important;
width:28px !important;
height:34px !important;
max-width:28px !important;
aspect-ratio:auto !important;
border-radius:4px !important;
border:1.5px solid var(--accent-bright) !important;
background-color:var(--accent-tint-2) !important;
background-image:radial-gradient(circle 3px at 50% 30%, var(--accent) 0 3px, transparent 3.5px) !important;
background-repeat:no-repeat !important;
flex-shrink:0 !important;
position:relative !important;
margin:0 !important;
font-size:0 !important;
box-shadow:none !important;
transform:none !important;
}
/* No second dot; the ::after is unused now (kept blank so legacy rules don't reintroduce a stray dot) */
#page3 .p3-cust-body .place-grid .place-btn::after{content:none !important;display:none !important;}
/* Per-zone dot position — % coords within the 28x34 icon (chest area for top, sleeve for sides, etc.) */
#page3 .p3-cust-body .place-grid .place-btn[data-pos="top-left"]::before{background-image:radial-gradient(circle 3px at 28% 28%, var(--accent) 0 3px, transparent 3.5px) !important;}
#page3 .p3-cust-body .place-grid .place-btn[data-pos="top-right"]::before{background-image:radial-gradient(circle 3px at 72% 28%, var(--accent) 0 3px, transparent 3.5px) !important;}
#page3 .p3-cust-body .place-grid .place-btn[data-pos="top-center"]::before{background-image:radial-gradient(circle 3px at 50% 22%, var(--accent) 0 3px, transparent 3.5px) !important;}
#page3 .p3-cust-body .place-grid .place-btn[data-pos="center"]::before{background-image:radial-gradient(circle 3px at 50% 55%, var(--accent) 0 3px, transparent 3.5px) !important;}
#page3 .p3-cust-body .place-grid .place-btn[data-pos="bottom-center"]::before{background-image:radial-gradient(circle 3px at 50% 80%, var(--accent) 0 3px, transparent 3.5px) !important;}
/* Filled / has-logo state: accent border + tint. Boosted specificity (html body) so this beats
the per-zone radial-gradient ::before rules (which set the dot inside the empty icon block). */
html body #page3 .p3-cust-body .place-grid .place-btn.yh-has-logo{border-color:var(--accent) !important;background:var(--accent-tint-2) !important;}
html body #page3 .p3-cust-body .place-grid .place-btn.yh-has-logo::before{border-color:var(--accent) !important;background-image:var(--yh-logo-img) !important;background-color:#fff !important;background-repeat:no-repeat !important;background-position:center !important;background-size:75% auto !important;}
html body #page3 .p3-cust-body .place-grid .place-btn.yh-has-logo::after{display:none !important;}
/* Active (selected) state: gold ring */
html body #page3 .p3-cust-body .place-grid .place-btn.active:not(.yh-has-logo){background:#fff !important;border-color:var(--accent) !important;color:#1a1d23 !important;}
html body #page3 .p3-cust-body .place-grid .place-btn.active:not(.yh-has-logo)::before{border-color:var(--accent) !important;background:#fff !important;}
/* Drag-over visual */
#page3 .p3-cust-body .place-grid .place-btn.yh-drag-over::before{border-color:var(--accent) !important;background:var(--accent-tint) !important;box-shadow:0 0 0 2px rgba(var(--dk-accent-rgb),0.3) !important;}
/* Remove the legacy ::before "+" content path used by the old design (it shadowed our new icon block) */
html body #page3 .p3-cust-body .place-btn.active:not(.yh-has-logo)::before{content:'' !important;font-size:0 !important;}
/* Hide the legacy yh-place-delete (was positioned for 76px square layout); we'll restore a fitting delete affordance with the resize/tint work in phase 2 */
.yh-place-delete{display:none !important;}
/* ── YOUR LOGOS — 3-col chip grid replacing the 2-col 76px tiles ── */
#page3 .yh-logo-library .yh-logo-tiles{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:0.5rem !important;margin-top:0.4rem !important;padding:0 !important;}
#page3 .yh-logo-library .yh-logo-tile{aspect-ratio:1 !important;width:100% !important;max-width:none !important;margin:0 !important;border:1.5px solid var(--border) !important;border-radius:9px !important;background-color:var(--cream) !important;background-size:contain !important;background-origin:content-box !important;padding:6px !important;box-sizing:border-box !important;cursor:pointer;}
#page3 .yh-logo-library .yh-logo-tile:hover{border-color:var(--border2) !important;transform:none !important;box-shadow:none !important;}
/* Selected tile — brass ring (shows when mSelectedUploadIdx matches the tile's idx) */
#page3 .yh-logo-library .yh-logo-tile.yh-selected{border-color:var(--accent) !important;box-shadow:0 0 0 2px var(--accent), 0 4px 12px rgba(var(--dk-accent-rgb),0.18) !important;}
#page3 .yh-logo-library .yh-logo-tiles:empty::after{content:'No saved logos yet.';grid-column:1 / -1;font-family:var(--dk-sans);font-size:10.5px;font-style:italic;color:var(--light);padding:0.5rem 0;letter-spacing:0;text-transform:none;}
/* Upload / AI / Text inline buttons below the chip grid */
#page3 .yh-uploader-row{display:flex;gap:0.4rem;margin-top:0.55rem;}
#page3 .yh-up-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:0.3rem;padding:0.4rem;border:1px solid var(--border);border-radius:7px;background:#fff;cursor:pointer;font-family:var(--dk-sans);font-size:10.5px;font-weight:600;color:var(--muted);transition:all 0.13s ease;text-align:center;}
#page3 .yh-up-btn:hover{border-color:#1a1d23;color:#1a1d23;}
#page3 .yh-up-btn svg{width:12px;height:12px;}
#page3 .yh-up-btn input[type="file"]{display:none;}
/* Modal footer: large gold Save & continue button */
#page3 .modal-ft{padding:0.85rem 1rem !important;border-top:1px solid var(--border) !important;background:#fff !important;flex-wrap:nowrap !important;gap:0.6rem !important;}
#page3 .modal-ft #mFooterInfo{font-family:var(--dk-sans);font-size:10.5px;color:var(--muted);}
#page3 .modal-ft button.btn-red,
#page3 .modal-ft #mSaveBtn,
#page3 .modal-ft .btn-primary{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important;font-family:var(--dk-sans) !important;font-size:13px !important;font-weight:600 !important;padding:0.7rem 1.2rem !important;border-radius:8px !important;letter-spacing:0 !important;}
#page3 .modal-ft button.btn-red:hover,
#page3 .modal-ft #mSaveBtn:hover,
#page3 .modal-ft .btn-primary:hover{background:var(--accent-deep) !important;border-color:var(--accent-deep) !important;}
/* ── Tiny inline JS-driven count sync (read by the inline script in body) ── */
#page3 .p3-cust-body .modal-canvas-wrap{min-height:420px;}
/* ──────────────────────────────────────────────────────────────────────
Right-column ORDER + visibility
The reparenting in canvas-editor.js:108 ends up arranging children of
modal-right as: editSection, addLogos, placementSection, sizeSection,
yh-apply-block, yh-sel-block, "Your Logos" title, mUploadGrid, hint.
yh-logo-library is then injected after placementSection.
Mockup visual order is: Apply → Your Logos → Selected → Placement.
Use CSS `order` to flow children correctly inside the flex column.
────────────────────────────────────────────────────────────────────── */
#page3 .p3-cust-body .modal-right > #p3EditSettingsSection{display:none !important;}
/* Hide the legacy p3InlineActions bar — canvas-editor.js creates it (empty, cream bg) and its
`position:sticky;bottom:-0.9rem` was rendering as a 30-40px grey strip at the top of the column. */
#page3 .p3-cust-body .modal-right > #p3InlineActions{display:none !important;}
#page3 .p3-cust-body .modal-right > #addLogosSection{order:99;} /* hidden anyway when no placement clicked */
#page3 .p3-cust-body .modal-right > #sizeSection{order:99;display:none !important;}
#page3 .p3-cust-body .modal-right > .modal-sec-title{display:none !important;} /* duplicate "Your Logos" title (the library has its own) */
#page3 .p3-cust-body .modal-right > #mUploadGrid,
#page3 .p3-cust-body .modal-right > #mUploadGridHint{display:none !important;}
#page3 .p3-cust-body .modal-right > .yh-apply-block{order:1 !important;}
#page3 .p3-cust-body .modal-right > #yhLogoLibrary{order:2 !important;}
#page3 .p3-cust-body .modal-right > .yh-sel-block{order:3 !important;}
#page3 .p3-cust-body .modal-right > #placementSection{order:4 !important;}
#page3 .p3-cust-body .modal-right > #yhSaveContinue{order:99 !important;margin-top:auto !important;}
/* Preset controls sit just after Placement in the inline column. */
#page3 .p3-cust-body .modal-right > #presetSection{order:5 !important;}
/* ── Ready-made design (product preset) controls ── shown by mSyncPresetUI when
the current product has a preset. Styled to read as a quiet secondary action;
accent on hover themes per niche via --dk-accent. */
#page3 #presetSection .preset-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;width:100%;padding:0.6rem 0.7rem;font-family:var(--dk-sans);font-size:11.5px;font-weight:600;letter-spacing:0.01em;color:var(--dk-ink,#1a1d23);background:#fff;border:1px solid var(--border,#e2e2e2);border-radius:7px;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s;}
#page3 #presetSection .preset-action-btn svg{width:14px;height:14px;flex-shrink:0;}
#page3 #presetSection .preset-action-btn:hover{background:var(--dk-accent,var(--red));border-color:var(--dk-accent,var(--red));color:#fff;}
#page3 #presetSection .preset-action-btn.preset-action-reset{background:transparent;color:var(--dk-paper-dim,var(--muted));}
#page3 #presetSection .preset-action-btn.preset-action-reset:hover{background:#fff;color:var(--dk-ink,#1a1d23);border-color:var(--dk-ink,#1a1d23);}
#page3 #presetSection .preset-action-btn:disabled,
#page3 #presetSection .preset-action-btn:disabled:hover{opacity:0.4;cursor:not-allowed;background:#fff;border-color:var(--border,#e2e2e2);color:var(--dk-ink,#1a1d23);}
/* Mobile (panel-2 tray) preset buttons reuse .mob-p2-edit-remove; tint the swap accent. */
.mob-p2-tray-actions .mob-p2-preset-btn{display:inline-flex;align-items:center;gap:0.3rem;}
.mob-p2-tray-actions #mobP2SwapLogo{color:var(--dk-accent,var(--red));border-color:var(--dk-accent,var(--red));}
/* ── Left-column card layout — image is full card height (aspect-preserved), info on right ── */
#page3 .coll-card{
display:grid !important;
grid-template-columns:100px 1fr !important;
grid-template-rows:1fr auto auto !important;
grid-template-areas:
"thumb body"
"thumb footer"
"thumb incl" !important;
align-items:stretch;
gap:0 !important;
padding:0 !important;
position:relative;
float:none !important;
min-height:170px;
}
/* Image area: fills full card height, image cover-fits without changing aspect */
#page3 .coll-card .coll-img-wrap{grid-area:thumb !important;width:100px !important;height:100% !important;min-height:150px !important;margin:0 !important;float:none !important;overflow:hidden !important;border-radius:9px 0 0 9px !important;background:var(--cream) !important;align-self:stretch !important;}
#page3 .coll-card .coll-img-wrap canvas,
#page3 .coll-card .coll-img-wrap img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
#page3 .coll-card .product-card-body{grid-area:body !important;padding:0.7rem 0.7rem 0 0.7rem !important;margin:0 !important;}
#page3 .coll-card .product-card-footer{grid-area:footer !important;padding:0.3rem 0.7rem 0.6rem 0.7rem !important;margin:0 !important;}
/* "Included in edits" bottom bar — bronze rounded-square tick + label, in info column only */
#page3 .coll-card::after{
grid-area:incl !important;
content:'Included in edits';
display:flex;
align-items:center;
padding:0.5rem 0.7rem 0.5rem 2.05rem;
margin-top:auto;
border-top:1px solid var(--border);
background:var(--offwhite);
font-family:var(--dk-sans);
font-size:10.5px;
font-weight:600;
color:var(--muted);
letter-spacing:0;
text-transform:none;
border-radius:0 0 9px 0;
background-image:url("data:image/svg+xml;utf8,"), linear-gradient(var(--offwhite),var(--offwhite));
background-repeat:no-repeat, no-repeat;
background-position:0.7rem center, 0 0;
background-size:15px 15px, auto;
}
#page3 .coll-card.p3-highlighted::after{color:#1a1d23;}
/* Excluded state (Individually mode + this card isn't the one on canvas): hollow grey square, muted label */
#page3 .coll-card:not(.p3-highlighted)::after{
content:'Excluded from edits';
color:var(--light);
background-image:url("data:image/svg+xml;utf8,"), linear-gradient(var(--offwhite),var(--offwhite));
}
/* Action buttons (edit / copy / delete) — HIDDEN by default, vertically STACKED on right edge on hover */
#page3 .coll-card .dup-btn,
#page3 .coll-card .dup-remove-btn,
#page3 .coll-card .p3-edit-btn{position:absolute !important;right:0.45rem !important;left:auto !important;width:24px !important;height:24px !important;background:rgba(255,255,255,0.95) !important;border:1px solid #c8ccd3 !important;box-shadow:0 1px 4px rgba(0,0,0,0.08) !important;z-index:5;opacity:0 !important;pointer-events:none;transition:opacity 0.13s ease;border-radius:6px !important;}
#page3 .coll-card:hover .dup-btn,
#page3 .coll-card:hover .dup-remove-btn,
#page3 .coll-card:hover .p3-edit-btn{opacity:1 !important;pointer-events:auto;}
/* Vertical stack: edit on top, copy middle, delete bottom (28px each + 4px gap) */
#page3 .coll-card .p3-edit-btn{top:0.45rem !important;}
#page3 .coll-card .dup-btn{top:2.15rem !important;}
#page3 .coll-card .dup-remove-btn{top:3.85rem !important;}
/* Only the ONE card whose product is currently on canvas gets the always-visible brass edit button.
p3-highlighted is applied to every card by default (in renderCollection), so we don't use it here.
p3-on-canvas / p3-editing are the actual "currently editing this product" markers. */
#page3 .coll-card.p3-on-canvas .p3-edit-btn,
#page3 .coll-card.p3-editing .p3-edit-btn{
opacity:1 !important;
pointer-events:auto !important;
background:var(--accent) !important;
border-color:var(--accent) !important;
color:#fff !important;
}
#page3 .coll-card.p3-on-canvas .p3-edit-btn svg,
#page3 .coll-card.p3-editing .p3-edit-btn svg{stroke:#fff !important;}
/* Also hide the other top-thumb decorations (team icon, clear-canvas-x, enquiry-check) by default to keep the card clean */
#page3 .coll-card .p3-team-icon,
#page3 .coll-card .coll-clear-canvas,
#page3 .coll-card .enquiry-check{display:none !important;}
/* Hide the "Remove All Edits" button on mockup view (mockup doesn't show it) */
#page3 .yh-remove-all{display:none !important;}
/* ── Collapse tab — anchored to the right edge of the left column (not floating in space) ── */
#page3 .p3-collapse-tab{
position:absolute !important;
left:380px !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
width:18px !important;
height:56px !important;
border-radius:0 8px 8px 0 !important;
border:1px solid var(--border) !important;
border-left:none !important;
background:#fff !important;
box-shadow:2px 2px 8px rgba(0,0,0,0.08) !important;
z-index:10 !important;
cursor:pointer;
}
#page3 .p3-collapse-tab svg{width:11px;height:11px;stroke:var(--muted);stroke-width:2.5;fill:none;}
#page3 .p3-collapse-tab:hover{background:var(--offwhite) !important;}
#page3 .p3-collapse-tab:hover svg{stroke:#1a1d23;}
/* When collapsed, flip the chevron and anchor to the right edge of the (now full-width) view */
.p3-collapsed #page3 .p3-collapse-tab,
#page3 .p3-collapsed.p3-desktop-split .p3-collapse-tab{
left:auto !important;
right:0 !important;
transform:translate(50%,-50%) !important;
border-radius:8px 0 0 8px !important;
border:1px solid var(--border) !important;
border-right:none !important;
}
.p3-collapsed #page3 .p3-collapse-tab svg,
#page3 .p3-collapsed.p3-desktop-split .p3-collapse-tab svg{transform:rotate(180deg);}
/* ── Collapsed state: left column expands to full width, cards regrid to 4-per-row Step 2 style ── */
#page3 .p3-collapsed.p3-desktop-split,
#page3 .p3-desktop-split.p3-collapsed{grid-template-columns:1fr !important;}
#page3 .p3-collapsed .p3-right-customizer,
#page3 .p3-desktop-split.p3-collapsed .p3-right-customizer{display:none !important;}
#page3 .p3-desktop-split.p3-collapsed .p3-left-cards{border-right:none !important;}
/* 4-per-row card grid */
#page3 .p3-desktop-split.p3-collapsed .coll-grid.p3-desk-grid{
grid-template-columns:repeat(4, 1fr) !important;
gap:1.5rem !important;
padding:1rem 1.5rem 2rem !important;
background:#fff !important;
}
/* Each card switches to Step-2 vertical layout (image on top, info below) */
#page3 .p3-desktop-split.p3-collapsed .coll-card{
display:flex !important;
flex-direction:column !important;
grid-template-columns:none !important;
grid-template-rows:none !important;
grid-template-areas:none !important;
min-height:auto !important;
}
#page3 .p3-desktop-split.p3-collapsed .coll-card .coll-img-wrap{
width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:1/1 !important;
border-radius:11px 11px 0 0 !important;
margin:0 !important;
align-self:auto !important;
}
/* square full-view card: cover-crop the garment from the top so the head isn't cut off */
#page3 .p3-desktop-split.p3-collapsed .coll-card .coll-img-wrap canvas{ object-fit:cover !important; object-position:center top !important; }
#page3 .p3-desktop-split.p3-collapsed .coll-card .product-card-body{padding:0.7rem 0.85rem 0 !important;margin:0 !important;}
#page3 .p3-desktop-split.p3-collapsed .coll-card .product-card-footer{padding:0.3rem 0.85rem 0.5rem !important;margin:0 !important;}
#page3 .p3-desktop-split.p3-collapsed .coll-card::after{border-radius:0 0 9px 9px !important;}
/* Action buttons in the 4-col layout stay on right edge of card (vertical stack) */
#page3 .p3-desktop-split.p3-collapsed .coll-card .p3-edit-btn{top:0.55rem !important;}
#page3 .p3-desktop-split.p3-collapsed .coll-card .dup-btn{top:2.25rem !important;}
#page3 .p3-desktop-split.p3-collapsed .coll-card .dup-remove-btn{top:3.95rem !important;}
/* Responsive: drop to 3-per-row on narrower windows where 4 cards get cramped */
@media (max-width:1100px){
#page3 .p3-desktop-split.p3-collapsed .coll-grid.p3-desk-grid{grid-template-columns:repeat(3, 1fr) !important;}
}
@media (max-width:820px){
#page3 .p3-desktop-split.p3-collapsed .coll-grid.p3-desk-grid{grid-template-columns:repeat(2, 1fr) !important;}
}
/* ── Hide the legacy floating chevron tab — replaced by Full view / Expand panels buttons ── */
#page3 .p3-collapse-tab{display:none !important;}
/* Hide the bottom-of-canvas Front/Back/Side L/Side R pill — view tabs in the left column header
are the source of truth now. Removes the visual duplicate the user flagged. */
#page3 .p3-inline-view-btns{display:none !important;}
/* ── Yachting: prev/next view arrows ON the customiser canvas (injected into #mCanvasWrap by
yh-redesign.js), in place of the hidden Front/Back/Side tab pill. Edge-anchored like the
collections card arrows; each click cycles the view via the legacy p3InlineSetView (canvas + all
card thumbnails sync). #mCanvasWrap is a positioning context (it anchors the hidden pill above).
Default-hidden so they only appear once the canvas is reparented into #page3 on DESKTOP — on
mobile the canvas stays in the modal (with its own #customiserViewPill), so these never show. ── */
html[data-skin="yachting"] .p3-cvs-arrow{display:none;}
html[data-skin="yachting"] #page3 .p3-cvs-arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#1a1d23;font-size:22px;line-height:1;padding:0 0 2px;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:background .15s,box-shadow .15s,transform .15s;}
html[data-skin="yachting"] #page3 .p3-cvs-arrow.prev{left:12px;}
html[data-skin="yachting"] #page3 .p3-cvs-arrow.next{right:12px;}
html[data-skin="yachting"] #page3 .p3-cvs-arrow:hover{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2);}
html[data-skin="yachting"] #page3 .p3-cvs-arrow:active{transform:translateY(-50%) scale(.93);}
@media (max-width:767px){html[data-skin="yachting"] #page3 .p3-cvs-arrow{display:none;}}
/* Full-view mode: the canvas (#mCanvasWrap) is reparented into .modal (not under #page3),
so mirror the prev/next arrow styling there too (owner: include view-swap arrows in full view). */
html[data-skin="yachting"] .modal #mCanvasWrap{position:relative;}
html[data-skin="yachting"] .modal #mCanvasWrap .p3-cvs-arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#1a1d23;font-size:22px;line-height:1;padding:0 0 2px;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);}
html[data-skin="yachting"] .modal #mCanvasWrap .p3-cvs-arrow.prev{left:12px;}
html[data-skin="yachting"] .modal #mCanvasWrap .p3-cvs-arrow.next{right:12px;}
html[data-skin="yachting"] .modal #mCanvasWrap .p3-cvs-arrow:hover{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2);}
/* Replace (not duplicate) the left-column "apply view to all" Front/Back/Side L/Side R row with the
canvas arrows on DESKTOP — the arrows drive the same all-products view switch via p3InlineSetView.
Mobile keeps its own view pill + the left bar untouched (the tested mobile pass). */
@media (min-width:768px){html[data-skin="yachting"] #page3 #p3ViewAllBar{display:none !important;}}
/* ── Full view button — top-right of the canvas area ── */
#page3 .yh-fullview-btn{
position:absolute;
top:1rem;
right:1rem;
z-index:6;
display:inline-flex;
align-items:center;
gap:0.35rem;
padding:0.4rem 0.7rem;
background:#fff;
border:1px solid var(--border);
border-radius:7px;
font-family:var(--dk-sans);
font-size:11px;
font-weight:600;
color:#1a1d23;
cursor:pointer;
box-shadow:0 1px 3px rgba(0,0,0,0.06);
transition:all 0.13s ease;
}
#page3 .yh-fullview-btn:hover{border-color:#1a1d23;box-shadow:0 2px 8px rgba(0,0,0,0.1);}
#page3 .yh-fullview-btn svg{stroke:#1a1d23;}
/* In collapsed (gallery) view, hide Full view since the action is now Expand panels */
#page3 .p3-desktop-split.p3-collapsed .yh-fullview-btn{display:none !important;}
/* ── Gallery header buttons (All views + Expand panels) — hidden by default; shown in collapsed view ── */
#page3 .yh-header-actions{display:none;gap:0.5rem;align-items:center;}
#page3 .p3-desktop-split.p3-collapsed .yh-header-actions{display:flex !important;}
#page3 .yh-header-btn{
display:inline-flex;
align-items:center;
gap:0.35rem;
padding:0.45rem 0.75rem;
background:#fff;
border:1px solid var(--border);
border-radius:7px;
font-family:var(--dk-sans);
font-size:11.5px;
font-weight:600;
color:#1a1d23;
cursor:pointer;
transition:all 0.13s ease;
}
#page3 .yh-header-btn:hover{border-color:#1a1d23;}
#page3 .yh-header-btn.yh-active{background:var(--accent);border-color:var(--accent);color:#fff;}
#page3 .yh-header-btn.yh-active svg{stroke:#fff;}
#page3 .yh-header-btn svg{stroke:#1a1d23;}
/* ── Header layout when collapsed: queue-meta LEFT, view tabs CENTRE, action buttons RIGHT ── */
#page3 .p3-desktop-split.p3-collapsed .p3-left-header{
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
padding:0.85rem 1.5rem !important;
gap:1rem !important;
flex-wrap:nowrap !important;
}
#page3 .p3-desktop-split.p3-collapsed .yh-queue-meta{flex:0 0 auto;justify-content:flex-start !important;width:auto !important;}
#page3 .p3-desktop-split.p3-collapsed .view-all-bar{flex:0 0 auto;width:auto !important;margin:0 auto !important;}
#page3 .p3-desktop-split.p3-collapsed .view-all-bar > .view-all-btn{flex:0 0 auto !important;padding:0.4rem 0.85rem !important;}
/* ── All-views 2x2 thumbnail grid inside each card's image area ── */
/* Grid sits as an absolute-positioned overlay covering the entire image area, with white bg
visible in the 2px gap between tiles. Hides the underlying canvas via the more aggressive
CSS rule below. */
#page3 .yh-view-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
gap:2px;
width:100%;
height:100%;
background:#fff;
z-index:3;
}
/* Hide the original product canvas while in all-views mode so it can't bleed through the 2px gap */
#page3 .yh-all-views-on .coll-card canvas.coll-card-canvas{display:none !important;}
#page3 .coll-card .coll-img-wrap{position:relative;}
/* Hide "Included in edits" bottom bar in the full/collapsed view (mockup doesn't show it there) */
#page3 .p3-desktop-split.p3-collapsed .coll-card::after{display:none !important;}
#page3 .yh-view-tile{
position:relative;
background:var(--cream);
overflow:hidden;
}
#page3 .yh-view-canvas{
width:100% !important;
height:100% !important;
display:block !important;
}
#page3 .yh-view-label{
position:absolute;
top:0.35rem;
left:0.45rem;
font-family:var(--dk-sans);
font-size:8.5px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--muted);
background:rgba(255,255,255,0.9);
padding:2px 5px;
border-radius:3px;
pointer-events:none;
}
/* In all-views mode, ensure the image area shows the grid only (the original canvas is hidden by JS) */
#page3 .yh-all-views-on .coll-card .coll-img-wrap{display:flex !important;align-items:stretch !important;}
/* Hide the legacy canvas-editor.js text-style toolbar — yh-text-style-block replaces it.
Without this, both render simultaneously: the legacy one (no `order`, so 0 = top of column)
and the new one (order:5, below placement). */
#page3 #textStyleToolbar{display:none !important;}
/* ── Text/Number style block — appears in modal-right when a text/number library logo is selected ── */
#page3 .yh-text-style-block{order:5 !important;}
#page3 .yh-text-row{display:flex;gap:0.5rem;align-items:center;margin-top:0.55rem;}
#page3 .yh-text-input{flex:1;font-family:var(--dk-sans);font-size:13px;font-weight:600;color:#1a1d23;border:1.5px solid var(--border);border-radius:7px;padding:0.55rem 0.75rem;outline:none;letter-spacing:0.02em;}
#page3 .yh-text-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--dk-accent-rgb),0.15);}
#page3 .yh-font-row{display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.4rem;}
#page3 .yh-font-btn{padding:0.4rem 0.65rem;border:1px solid var(--border);border-radius:6px;background:#fff;font-size:11px;cursor:pointer;color:var(--muted);transition:all 0.13s;}
#page3 .yh-font-btn:hover{border-color:#1a1d23;color:#1a1d23;}
#page3 .yh-font-btn.yh-on{background:var(--accent-tint-2);border-color:var(--accent);color:#1a1d23;font-weight:700;}
#page3 .yh-text-colour-row{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.4rem;}
#page3 .yh-text-colour{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0;transition:transform 0.13s,box-shadow 0.13s;}
#page3 .yh-text-colour:hover{transform:scale(1.08);}
#page3 .yh-text-colour.yh-on{box-shadow:0 0 0 2px var(--accent);}
#page3 .yh-curve-val{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:10.5px;margin-left:0.5rem;}
/* Curve slider row — SVG frown on left, custom track in middle, SVG arch on right */
#page3 .yh-curve-row{display:flex;align-items:center;gap:0.5rem;margin-top:0.4rem;user-select:none;}
#page3 .yh-curve-arch{width:18px;height:14px;flex-shrink:0;color:var(--muted);}
#page3 .yh-curve-slider{flex:1;height:6px;background:#e5e7eb;border-radius:3px;position:relative;cursor:pointer;}
#page3 .yh-curve-thumb{position:absolute;top:50%;left:50%;width:18px;height:18px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,0.25);cursor:grab;}
#page3 .yh-curve-slider:active .yh-curve-thumb,
#page3 .yh-curve-slider:hover .yh-curve-thumb{cursor:grabbing;}
/* ── Canvas hotspot overlay — visible only while a library tile is being dragged.
Each zone is a drop target that places the logo at that placement on the canvas. ── */
#yhCanvasHotspots{position:absolute;inset:0;pointer-events:none;display:none;z-index:8;}
body.yh-dragging-logo #yhCanvasHotspots{display:block;}
.yh-canvas-zone{
position:absolute;
border:1.5px dashed var(--accent-bright);
background:var(--accent-tint-2);
border-radius:6px;
pointer-events:auto;
cursor:copy;
transition:all 0.13s ease;
}
.yh-canvas-zone-label{
position:absolute;
bottom:-20px;
left:50%;
transform:translateX(-50%);
font-family:var(--dk-sans);
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
color:var(--accent-deep);
white-space:nowrap;
background:rgba(255,255,255,0.9);
padding:1px 6px;
border-radius:3px;
pointer-events:none;
}
/* Top zones (chest, nape, shoulders) — label ABOVE the boundary so it doesn't land inside
the large-centre/back-centre boundary below. Centre zones keep label below as before. */
.yh-canvas-zone[data-pos="top-left"] .yh-canvas-zone-label,
.yh-canvas-zone[data-pos="top-right"] .yh-canvas-zone-label,
.yh-canvas-zone[data-pos="top-center"] .yh-canvas-zone-label{
top:-20px;
bottom:auto;
}
.yh-canvas-zone.yh-drag-over{
background:var(--accent-tint);
border-color:var(--accent);
border-style:solid;
box-shadow:0 0 0 2px var(--accent);
}
/* ── Left column header: view tabs full-width row, queue meta inline ── */
#page3 .p3-left-header{display:flex !important;flex-direction:column !important;gap:0.55rem !important;padding:0.7rem 0.85rem !important;background:#fff !important;border-bottom:1px solid var(--border) !important;}
#page3 .p3-left-header > .view-all-bar{display:flex !important;gap:0.25rem !important;width:100% !important;flex-wrap:nowrap !important;}
#page3 .p3-left-header > .view-all-bar > .view-all-btn{flex:1 1 0 !important;text-align:center !important;}
/* Owner: drop the "N of N in edit" + Linked pill — just the product cards. */
#page3 .p3-left-header > .yh-queue-meta{display:none !important;}
#page3 .p3-left-header > .yh-queue-meta > .yh-qm-label{text-align:left;}
#page3 .p3-left-header > .yh-queue-meta > .yh-link-pill{margin-left:auto;}
/* Card outline — always grey, no brass. Selected card = tinted background only, border unchanged. */
#page3 .p3-desk-grid .coll-card,
#page3 .p3-desk-grid .coll-card.enquiry-on,
#page3 .p3-desk-grid .coll-card.p3-highlighted,
#page3 .p3-desk-grid .coll-card.p3-highlighted.enquiry-on{border:1.5px solid #b8bcc4 !important;box-shadow:0 1px 3px rgba(0,0,0,0.04) !important;background:#fff !important;border-radius:11px !important;}
#page3 .p3-desk-grid .coll-card:hover,
#page3 .p3-desk-grid .coll-card.enquiry-on:hover,
#page3 .p3-desk-grid .coll-card.p3-highlighted:hover{border-color:#9a9ea8 !important;box-shadow:0 4px 14px rgba(0,0,0,0.08) !important;}
/* Selected/active card: light grey tinted background, no border change */
#page3 .p3-desk-grid .coll-card.p3-highlighted,
#page3 .p3-desk-grid .coll-card.p3-highlighted.enquiry-on,
#page3 .p3-desk-grid .coll-card.p3-editing,
#page3 .p3-desk-grid .coll-card.p3-on-canvas{background:#f0eee9 !important;}
/* ── Save & continue bar at the bottom of the right column. NOT sticky — sticky inside a
scrolling flex column was getting cut off; plain margin-top:auto pushes it to the bottom of
the visible column without overflow tricks. ── */
#page3 .yh-save-bar{padding:0.95rem 1.1rem !important;border-top:1px solid var(--border);background:#fff;flex-shrink:0;}
#page3 .yh-save-btn{width:100%;background:var(--accent);color:#fff;font-family:var(--dk-sans);font-size:13.5px;font-weight:600;padding:0.8rem 1rem;border:none;border-radius:8px;cursor:pointer;transition:background 0.15s;letter-spacing:0.01em;}
#page3 .yh-save-btn:hover{background:var(--accent-deep);}
/* Hide the legacy modal footer — we have our own sticky Save & continue now */
#page3 .p3-cust-body .modal-ft{display:none !important;}
/* ── SELECTED PLACEMENT — size slider + colour swatches when a logo is active ── */
#page3 .yh-prop-row{display:flex;align-items:center;gap:0.6rem;margin-top:0.55rem;}
#page3 .yh-prop-label{font-family:var(--dk-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);width:52px;flex-shrink:0;}
#page3 .yh-range{flex:1;accent-color:var(--accent);height:4px;cursor:pointer;}
#page3 .yh-prop-val{font-family:var(--dk-sans);font-size:11px;font-weight:700;color:#1a1d23;min-width:38px;text-align:right;}
#page3 .yh-tint-swatches{display:flex;gap:0.35rem;}
#page3 .yh-tint-sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;padding:0;transition:transform 0.13s,box-shadow 0.13s;}
#page3 .yh-tint-sw:hover{transform:scale(1.08);}
#page3 .yh-tint-sw.yh-on{box-shadow:0 0 0 2px var(--accent);}
#page3 .yh-prop-del{margin-top:0.6rem;width:100%;background:transparent;border:1px solid var(--border);border-radius:7px;padding:0.45rem;font-family:var(--dk-sans);font-size:10.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.13s;}
#page3 .yh-prop-del:hover{border-color:#1a1d23;color:#1a1d23;}
/* ── Delete (×) button on filled placement boxes ── */
.yh-place-delete{display:flex !important;position:absolute !important;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#1a1d23;border:1.5px solid #fff;color:#fff;font-family:var(--dk-sans);font-size:13px;line-height:1;cursor:pointer;padding:0;align-items:center;justify-content:center;z-index:5;transition:all 0.13s;box-shadow:0 2px 6px rgba(0,0,0,0.18);opacity:0;}
#page3 .p3-cust-body .place-btn.yh-has-logo:hover .yh-place-delete,
.yh-place-delete:hover{opacity:1;transform:scale(1.05);background:#000;}
#page3 .p3-cust-body .place-btn.yh-has-logo{overflow:visible !important;}
/* Tweak: "FRONT" subtag in PLACEMENT section title comes from JS now (per-view) */
/* ════════════ MOBILE POLISH SWEEP (phones ≤560) — safe tap-target + legibility bumps.
In-flow elements only (overlaid canvas/card controls left untouched). Desktop (>560) unaffected. ════════════ */
@media (max-width:560px){
/* progress step labels (Products / Customize / Review): 8.5px was hard to read */
.mobile-step-label{ font-size:10.5px !important; }
/* product colour·brand meta: 10.5 -> 11.5 */
#page2 .product-card-meta, #page3 .product-card-meta{ font-size:11.5px !important; }
/* collection-name input: 44px tall + 16px font (prevents iOS zoom on focus) */
.col-input{ min-height:44px !important; font-size:16px !important; }
/* primary bottom-nav CTA (Customise → / Review →): >=44px tap target */
.mob-nav-btn-fixed{ min-height:44px !important; }
/* view switch tabs (Front/Back/Side L/Side R): taller + more legible */
#page3 .view-all-btn{ min-height:38px !important; font-size:11px !important; padding:0.5rem 0.3rem !important; }
}