/* ════════════════════════════════════════════════════════════════════════
   STITCHA — PHONE REDESIGN (≤560px only)
   Loaded AFTER the document.write skin loader (index.html) so it wins
   source-order ties against customiser.css and the skin redesign-*.css
   layers (several of which carry !important at equal specificity).
   Pairs with js/modules/yh-mobile.js (gestures + phone chrome).
   Desktop and tablet (>560px) are untouched by construction — every rule
   lives inside the single media query below.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 560px) {

/* ── 0 · FOUNDATION ──────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

/* The ≤768 rule `#page4.active ~ * {pointer-events:none}` (styles.css) kills
   every body-level overlay that follows #page4 in the DOM — including the
   redesign's order modal, making phone checkout click-dead. Re-enable the
   interactive overlays + this layer's own chrome. (Mirrored at ≤768 in
   styles.css; repeated here so the fix survives even if that edit is lost.) */
#page4.active ~ #yhRvoRoot,
#page4.active ~ #collectOrdersOverlay,
#page4.active ~ #collectSuccessOverlay,
#page4.active ~ #payNowOverlay,
#page4.active ~ #sizeGuideModal,
#page4.active ~ #successOverlay,
#page4.active ~ #acctPopupOverlay,
#page4.active ~ #customModal,
#page4.active ~ #yhmMockRoot,
/* tc-overlays hide via opacity+pointer-events only — gate on .show or the
   invisible full-screen z-9999 divs shield every tap on the review page */
#page4.active ~ #teamCollOverlay.show,
#page4.active ~ #rosterOverlay.show,
#page4.active ~ #yhrdBar,
#page4.active ~ #yhrdFab,
#page4.active ~ #yhmColBar,
#page4.active ~ #yhmCanvasChip { pointer-events: auto; }

/* Fixed bottom bars: clear the iPhone home indicator. */
.mob-p2-sticky-bar, .mob-p3-sticky-bar, .mob-p4-sticky-bar,
#mobP2StickyBar, #mobP3StickyBar, #mobP4StickyBar {
  padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
}

/* ── 1 · HOME (.yhrd, JS-built by yh-redesign.js) ────────────────────── */

/* Header: at ≤680 the skin hides nav AND login with no replacement.
   Bring back a compact Log-in + keep the CTA; brand shrinks. */
.yhrd .hpb-hd { padding: 0.65rem 0.85rem; gap: 0.5rem; }
.yhrd .hpb-hd-brand { min-width: 0; overflow: hidden; }
.yhrd .hpb-hd-name { font-size: 13px; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yhrd .hpb-hd-tag { display: none; }
.yhrd .hpb-hd-nav { display: none; }
.yhrd .hpb-hd-actions { gap: 0.4rem; flex-shrink: 0; }
/* no !important — auth JS hides/swaps these via inline styles and the
   inline style must keep winning (e.g. #homeUserBtn stays hidden) */
.yhrd .hpb-hd-login { display: inline-flex; align-items: center;
  font-size: 12px; padding: 0.5rem 0.6rem; min-height: 40px;
  white-space: nowrap; }
.yhrd .hpb-hd-cta { font-size: 12px; padding: 0.55rem 0.75rem;
  min-height: 40px; white-space: nowrap; }

/* Hero: small-viewport units (no URL-bar jump), tighter type, stacked CTAs. */
.yhrd .dfl-hero { height: 86svh; min-height: 480px; max-height: 760px; }
.yhrd .dfl-hero-inner { padding: 0 1.25rem; }
.yhrd .dfl-title { font-size: clamp(1.9rem, 9vw, 2.5rem); line-height: 1.12; }
.yhrd .dfl-sub { font-size: 0.95rem; line-height: 1.5; }
.yhrd .dfl-ctas { flex-direction: column; width: 100%; gap: 0.6rem; }
.yhrd .dfl-cta, .yhrd .dfl-cta-ghost {
  width: 100%; justify-content: center; min-height: 48px; font-size: 14px; }
/* Demo-store CTA: phone-only — desktop keeps the header nav "Demo store"
   link, which is hidden ≤680. Ships inline display:none; shown here. */
.yhrd .dfl-cta-demo { display: inline-flex !important; }

/* Personas: 5-up grid → swipeable snap carousel; hover-reveal CTA always on. */
.yhrd .dfl-persona-grid {
  display: flex; overflow-x: auto; gap: 0.7rem;
  scroll-snap-type: x mandatory; scroll-padding-left: 1.25rem;
  padding: 0 1.25rem 0.75rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.yhrd .dfl-persona-grid::-webkit-scrollbar { display: none; }
.yhrd .dfl-persona { flex: 0 0 74%; max-width: 300px; min-height: 320px;
  scroll-snap-align: center; }
.yhrd .dfl-persona-go { opacity: 1 !important; transform: none !important;
  transition: none !important; }
/* Alt "who" variants (dev toolbar): keep them sane on a phone. */
.yhrd .hpb-spot-grid, .yhrd .rfd-spotlights { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.yhrd .cin-act2 { display: block; }
.yhrd .cin-act2-stage { min-height: 260px; margin-top: 0.75rem; }
.yhrd .cin-act2-sub { opacity: 1 !important; }

/* How it works: single tight column reads better than 4-up at 390px.
   Desktop spacing (3rem head margin; the 48px badge row carries its own
   1.1rem bottom margin, which inflated grid row 1 and opened a gulf
   between each step's title and copy) reads as dead gaps on a phone —
   stack icon+number in a narrow left column spanning BOTH text rows. */
.yhrd .hiw, .yhrd .hiw-stepper { padding: 2.5rem 1.25rem 2.75rem; }
.yhrd .hiw-head { margin-bottom: 1.15rem; }
.yhrd .hiw-steps { grid-template-columns: 1fr; gap: 1.1rem; }
.yhrd .hiw-step { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; }
.yhrd .hiw-step-top { grid-row: 1 / 3; flex-direction: column; align-items: center;
  gap: 0.35rem; margin-bottom: 0; }
.yhrd .hiw-badge { width: 40px; height: 40px; }
.yhrd .hiw-num { font-size: 18px; }
.yhrd .hiw-step h4, .yhrd .hiw-step p { grid-column: 2; margin: 0; }
.yhrd .hiw-track { flex-direction: column; gap: 1.1rem; }
.yhrd .hiw-stepper .hiw-track { grid-template-columns: 1fr; margin-top: 1rem; }
.yhrd .hiw-title { font-size: 1.5rem; }

/* Clubs + footer */
.yhrd .yh-clubs2-lbl { font-size: 10px; letter-spacing: 0.14em; }
.yhrd .featban-grid, .yhrd .featcards-grid { grid-template-columns: 1fr; gap: 1rem; }

/* Resume bar: tap-safe + home-indicator clearance. */
.yhrd .dfl-colbar { padding-bottom: env(safe-area-inset-bottom); }
.yhrd .dfl-colbar-in { padding: 0.55rem 1rem; gap: 0.6rem; }
.yhrd .dfl-colbar-cta { min-height: 48px; font-size: 13px; }

/* ── 2 · SHARED STEP HEADER (.cz-hd on collections / review) ─────────── */
/* Removed on phones entirely (owner ask): the fixed bottom bar
   (#yhmColBar, section 4) carries back/forward navigation on every step
   instead. Desktop keeps the full header — this lives inside ≤560. */
.cz-hd { display: none !important; }

/* ── 3 · COLLECTIONS (.yhrd-col overlay) ─────────────────────────────── */

/* The overlay must OWN the stacking order. The legacy ≤768 layer force-shows
   .workspace / .mobile-steps-bar / #p2ViewAllBar with !important — beating
   the inline display:none the overlay uses to hide legacy siblings — and
   their z-indexed chrome (sticky steps bar z-100, pinned view pill z-99,
   preset badges z-5, swipe dots) painted straight THROUGH the z-auto
   overlay. Lift the overlay above all of it… */
html[data-skin="yachting"] #page2 .yhrd-col { z-index: 150; }
/* …and kill the legacy phone chrome outright (the cz-hd step header and the
   fixed bottom bar replace both). Yachting-scoped: other niches still run
   the legacy lookbook UI on page2. */
html[data-skin="yachting"] #page2 .mobile-steps-bar,
html[data-skin="yachting"] #page2 #p2ViewAllBar,
html[data-skin="yachting"] #page2 #p2ViewAllBar.view-bar-pinned,
html[data-skin="yachting"] #page2 #p2ViewBarSpacer,
html[data-skin="yachting"] #page2 .mob-p2-view-bar-wrap,
html[data-skin="yachting"] #page2 #mobP2StickyBar { display: none !important; }

/* Collection setup leads (owner ask: upfront + expanded on load), then the
   products, then the rest of the right rail. The fixed bottom bar keeps the
   CTA + collection health reachable regardless of order. */
.yhrd-col .col-wrap { display: flex !important; flex-direction: column;
  align-items: stretch !important; /* skin uses align-items:start → children
  would size to max-content (tab row ≈ 433px) and overflow the viewport */
  gap: 1rem; padding: 0.9rem 1rem calc(86px + env(safe-area-inset-bottom)); }
.yhrd-col .col-left  { order: 0; min-width: 0; width: auto !important; max-width: 100%; }
.yhrd-col .col-main  { order: 1; min-width: 0; width: auto !important; max-width: 100%; }
.yhrd-col .col-right { order: 2; min-width: 0; width: auto !important; max-width: 100%; }

.yhrd-col .col-main-head h1 { font-size: 1.35rem; line-height: 1.2; }
.yhrd-col .col-main-sub { font-size: 0.85rem; }
.yhrd-col .col-tabs { display: flex; overflow-x: auto; gap: 0.4rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 0.35rem; flex-wrap: nowrap !important; }
.yhrd-col .col-tabs::-webkit-scrollbar { display: none; }
.yhrd-col .col-tab { flex: 0 0 auto; min-height: 40px; padding: 0.45rem 0.8rem;
  font-size: 12px; white-space: nowrap; }

/* Cards: retail 2-up; keep the 1:1 crop (the fake left-chest overlay is
   tuned to it). Always-visible but compact arrows (32px ate too much of a
   2-up card); swatches get real tap targets. */
.yhrd-col .col-ess-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.yhrd-col .col-card { min-width: 0; }
.yhrd-col .col-card-nav { opacity: 1 !important; width: 25px; height: 25px; }
.yhrd-col .col-card-nav svg { width: 12px; height: 12px; }
.yhrd-col .col-card-chk { width: 34px; height: 34px; }
.yhrd-col .col-card-name { font-size: 12.5px; }
.yhrd-col .col-card-desc { font-size: 10.5px; }
.yhrd-col .col-card-sw { gap: 7px; padding: 2px 0; }
.yhrd-col .col-sw { width: 18px; height: 18px; border-width: 2px; }
.yhrd-col .col-card-price { font-size: 12px; }
.yhrd-col .col-card-add { min-height: 42px; font-size: 12px; width: 100%; }

/* Setup rail: collapsible accordion (yh-mobile.js toggles .yhm-open). */
.yhrd-col .col-left.yhm-collapsible { border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px; padding: 0; overflow: hidden; }
.yhrd-col .col-left.yhm-collapsible .col-left-lbl {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 0.85rem 1rem; min-height: 48px; cursor: pointer;
  font-size: 12px; }
.yhrd-col .col-left.yhm-collapsible .col-left-lbl::after {
  content: '▾'; font-size: 13px; opacity: 0.55; transition: transform 0.18s ease; }
.yhrd-col .col-left.yhm-collapsible.yhm-open .col-left-lbl::after { transform: rotate(180deg); }
.yhrd-col .col-left.yhm-collapsible > *:not(.col-left-lbl) { display: none; }
.yhrd-col .col-left.yhm-collapsible.yhm-open > *:not(.col-left-lbl) { display: block; }
.yhrd-col .col-left.yhm-collapsible.yhm-open > .col-field,
.yhrd-col .col-left.yhm-collapsible.yhm-open > .col-note { margin: 0 1rem 0.9rem; }

/* Touch can't hover: logo-dismiss ✕ and item-remove ✕ always visible. */
.yhrd-col .col-logo-x { opacity: 1 !important; width: 30px; height: 30px; }
.yhrd-col .col-item-x { opacity: 1 !important; min-width: 34px; min-height: 34px; }

/* Right rail content stacks after products; its CTA dock is replaced by
   the fixed bottom bar (#yhmColBar), which also mirrors Collection health. */
.yhrd-col .col-continue-dock { display: none !important; }

/* Undo toast must clear the fixed bottom bar. */
#page2 .col-toast { bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  left: 1rem !important; right: 1rem !important; width: auto !important; }

/* ── 4 · PHONE CHROME built by yh-mobile.js ──────────────────────────── */
/* The universal step-nav bar: back + forward on pages 2/3/4, plus the
   collection-health banner on page 2 (syncColBar swaps the contents). */
#yhmColBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
  display: none; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.6rem 1rem calc(0.6rem + max(env(safe-area-inset-bottom), 8px));
  background: var(--navy, #14202e); color: #fff;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18); }
#yhmColBar .yhm-colbar-back { flex: 0 0 auto; min-height: 48px; min-width: 48px;
  padding: 0 0.85rem; border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px; background: transparent; color: #fff; font-size: 13px;
  font-weight: 600; white-space: nowrap; }
#yhmColBar .yhm-colbar-back:active { background: rgba(255,255,255,0.12); }
#yhmColBar .yhm-colbar-gap { flex: 1; display: none; }
/* Collection health banner (left of Customise) — band word tinted, thin
   score bar beneath; syncColBar mirrors it from the right-rail card. */
#yhmColBar .yhm-colbar-health { flex: 1; min-width: 0; display: flex;
  flex-direction: column; justify-content: center; gap: 4px; }
#yhmColBar .yhm-colbar-hlbl { font-size: 11.5px; opacity: 0.92;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#yhmColBar .yhm-colbar-hlbl b { font-weight: 700; }
#yhmColBar .yhm-colbar-hlbl b.strong { color: #79d9a6; }
#yhmColBar .yhm-colbar-hlbl b.good { color: #e9c87f; }
#yhmColBar .yhm-colbar-hlbl b.building { color: #fff; }
#yhmColBar .yhm-colbar-hbar { display: block; height: 4px; max-width: 180px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
#yhmColBar .yhm-colbar-hbar i { display: block; height: 100%; width: 0;
  border-radius: 999px; background: var(--dk-accent, #9c7f43);
  transition: width 0.3s ease; }
#yhmColBar .yhm-colbar-hbar i.strong { background: #4cae7e; }
#yhmColBar .yhm-colbar-cta { flex: 0 0 auto; min-height: 48px; padding: 0 1.2rem;
  border: 0; border-radius: 6px; /* matches the square cz-hd-next, not a pill */
  background: var(--dk-accent, var(--red, #c33));
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
#yhmColBar .yhm-colbar-cta:disabled { opacity: 0.45; }

#yhmCanvasChip { position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(162px + env(safe-area-inset-top)); z-index: 580; display: none;
  gap: 0.45rem; padding: 0.3rem; border-radius: 999px;
  background: rgba(20, 32, 46, 0.92); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
#yhmCanvasChip button { border: 0; border-radius: 999px; background: transparent;
  color: #fff; font-size: 12px; font-weight: 600; min-height: 40px;
  padding: 0 0.9rem; }
#yhmCanvasChip button:active { background: rgba(255,255,255,0.14); }

/* ── 5 · CUSTOMISER (#customModal / #page3) ──────────────────────────── */

/* Re-enable direct canvas interaction (the preset-only block disables it
   at every width). touch-action:manipulation — NOT none — so the canvas
   stays a scroll surface; the gesture controller preventDefaults only when
   a drag/pinch actually engages on the selected logo. */
#page3 .modal-canvas-stage canvas, #page3 #mCanvas,
.modal-canvas-stage canvas { pointer-events: auto !important; touch-action: manipulation; }

/* Selection chrome back on — outline + size tip only. Corner handles and
   the mouse drag-surface stay hidden: pinch/drag replaces them. */
#mOverlaySvg #mSelRect, #mSelRect {
  display: inline !important; visibility: visible !important; }
#mOverlaySvg #mSizeTip, #mSizeTip {
  display: inline !important; visibility: visible !important; }

/* Zone overlay is transient: visible only in placement mode (internal
   mobile.js callers keep repopulating it — CSS is the reliable gate).
   While placing, hide the in-zone logo previews: the canvas now draws the
   logos itself and previews would double-render. */
body:not(.yhm-placemode) #mobHotspotsOverlay { display: none !important; }
body.yhm-placemode .mob-hotspot img { display: none !important; }
body.yhm-placemode .mob-hotspot { background: rgba(31, 87, 146, 0.10); }

/* Bottom dock: the logo tray scrolls horizontally. (Placement happens via
   the transient zone overlay — the legacy #mobPlaceBtns chips stay hidden,
   as they were before this redesign.) */
#mobP2LogoGrid { display: flex !important; overflow-x: auto; gap: 0.55rem;
  padding: 0.35rem 0.9rem 0.55rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; grid-template-columns: none !important; }
#mobP2LogoGrid::-webkit-scrollbar { display: none; }
#mobP2LogoGrid > * { flex: 0 0 auto; width: 62px; min-height: 62px; }
.mob-p2-logo-tray-hd { padding: 0.4rem 0.9rem 0.1rem; }
.mob-p2-tray-actions button { min-height: 38px; }
.mob-p2-slider-row { padding: 0.3rem 0.9rem 0.5rem; }
.mob-p2-slider-row input[type="range"] { min-height: 36px; }

/* View pill above the canvas: real tap targets. */
.mob-view-pill .mob-view-arrow { min-width: 44px; min-height: 44px; font-size: 20px; }
.mob-view-pill .mob-view-label { font-size: 12px; }

/* ── 5b · GELATO-STYLE CUSTOMISER VARIANT (opt-in: ?cust=gelato) ─────── */
/* Alternative shell around the same canvas: top step bar + Continue, an
   undo/redo/preview tools row, bottom Product/Files/Text/Number/Personalise
   tabs. Built by yh-mobile.js inside #customModal .modal; body.yhm-gelato
   only while the modal is open AND the flag is set. */

/* hide the classic chrome — the shell replaces it. Also the yachting
   canvas extras Gelato doesn't have: the Full-view toggle and the round
   mid-canvas prev/next arrows (the view pill owns view switching). */
body.yhm-gelato #customModal .modal-hd,
body.yhm-gelato #customModal .mob-nike-steps,
body.yhm-gelato #customModal .mob-nike-panel,
body.yhm-gelato #customModal .modal-ft,
body.yhm-gelato #customModal #mFooterStep1Mob,
body.yhm-gelato #customModal #mobLogosFab,
body.yhm-gelato #yhFullViewBtn,
body.yhm-gelato .p3-cvs-arrow,
body.yhm-gelato #undoRedoContainer { display: none !important; }

/* canvas gets the space between the bars (top = tools 44px; bottom stack =
   nav ~56px + tabs 64px + the view-thumbnail strip 88px) */
body.yhm-gelato #customModal .modal-body {
  padding: 48px 0 calc(212px + max(env(safe-area-inset-bottom), 8px)) !important; }
/* the thumbnail strip replaces the arrow pill (Gelato has no pill) */
body.yhm-gelato #mobP2ViewTabs { display: none !important; }

/* Gelato view-thumbnail strip: Front/Back/Side L/Side R minis above the
   tab bar; the selected view gets the black outline like the reference. */
.yhmg-strip { position: absolute; left: 0; right: 0;
  bottom: calc(120px + max(env(safe-area-inset-bottom), 8px)); height: 88px;
  z-index: 10; display: flex; align-items: center; gap: 0.5rem;
  padding: 0 0.7rem; background: #fff;
  border-top: 1px solid rgba(0,0,0,0.07);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.yhmg-strip::-webkit-scrollbar { display: none; }
.yhmg-thumb { flex: 0 0 auto; width: 64px; border: 1.5px solid transparent;
  border-radius: 8px; background: transparent; padding: 3px 2px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* smart-cropped minis: cover + chest-area framing (no heads/legs);
   neck thumbs crop tight to the collar */
.yhmg-thumb img { width: 52px; height: 50px; object-fit: cover;
  object-position: 50% 24%; background: #f7f6f4; border-radius: 5px; }
.yhmg-thumb.neck img { object-position: 50% 2%; }
.yhmg-thumb span { font-size: 9.5px; font-weight: 600; color: #444;
  white-space: nowrap; }
.yhmg-thumb.on { border-color: #1a1d23; }
.yhmg-thumb.on span { color: #000; }

#yhmGShell { display: contents; }
/* Stitcha-branded chrome (paper/ink/gold, square corners). No top header
   bar (owner ask) — navigation lives in the bottom .yhmg-nav row; the
   tools row is the only top chrome. */
.yhmg-continue { flex: 0 0 auto; min-height: 40px; padding: 0 1rem;
  border: 0; border-radius: 6px; font-size: 12px; font-weight: 700;
  background: var(--dk-accent, #9c7f43); color: #fff;
  white-space: nowrap; }
.yhmg-nav { position: absolute; bottom: 0; left: 0; right: 0; z-index: 11;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem calc(0.5rem + max(env(safe-area-inset-bottom), 8px));
  background: var(--navy, #14202e); }
.yhmg-nav-back { flex: 0 0 auto; min-height: 40px; padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px;
  background: transparent; color: #fff; font-size: 12px; font-weight: 600;
  white-space: nowrap; }
.yhmg-nav-back:active { background: rgba(255,255,255,0.12); }
.yhmg-nav-gap { flex: 1; }
.yhmg-tools { position: absolute; top: 0; left: 0; right: 0; height: 44px;
  z-index: 10; display: flex; align-items: center; gap: 0.35rem;
  padding: 0 0.5rem; background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08); }
/* labelled tools (Linked / Preview / Views) are bordered chips; undo/redo
   stay bare icons. Active = gold, no strikethrough states. */
.yhmg-tools button { min-width: 40px; min-height: 36px;
  border: 1.5px solid #e3e1dd; border-radius: 8px; background: #fff;
  font-size: 11.5px; font-weight: 600; color: #1a1714; padding: 0 0.65rem; }
#yhmGUndo, #yhmGRedo { border: 0; background: transparent; font-size: 16px;
  min-width: 38px; padding: 0 0.45rem; }
.yhmg-tools button:disabled { opacity: 0.3; }
.yhmg-tools button.on { background: var(--dk-accent, #9c7f43);
  border-color: var(--dk-accent, #9c7f43); color: #fff; }
#yhmGLink { font-size: 11px; }
#yhmGLink:not(.on) { opacity: 0.65; }
/* the smart-crop pans the oversized stage inside the wrap — clip it, and
   let the canvas honour its zoomed size (max-width:100% would cap it and
   leave an edge gap) */
body.yhm-gelato #mCanvasWrap { overflow: hidden !important; }
body.yhm-gelato #mCanvas { max-width: none !important; max-height: none !important; }
.yhmg-tools-gap { flex: 1; }
.yhmg-tabs { position: absolute; left: 0; right: 0; z-index: 10;
  /* atop .yhmg-nav: 8px pad + 40px row + 8px pad + safe-area max */
  bottom: calc(56px + max(env(safe-area-inset-bottom), 8px));
  display: flex; align-items: stretch; padding: 4px 2px;
  background: #fff; border-top: 1px solid rgba(0,0,0,0.1); }
.yhmg-tabs button { flex: 1; min-height: 56px; border: 0;
  background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font-size: 10px;
  font-weight: 600; color: #1a1d23; }
.yhmg-tabs .yhmg-ic { font-size: 17px; font-weight: 700; line-height: 1; }

/* My logos slide-up pane (legacy #mobLogosPane, opened from the gelato
   Logos sheet): 56px circles were squint-sized — give them real presence. */
#mobLogosPane .mob-logos-circle { width: 82px; height: 82px; }
#mobLogosPane .mob-logos-circle img { width: 64px; height: 64px; }
#mobLogosPane .mob-logos-pane-item-label { font-size: 10.5px; max-width: 86px;
  overflow: hidden; text-overflow: ellipsis; }
#mobLogosPane #mobLogosGrid { grid-template-columns: repeat(3, 1fr); }

/* Gelato's print-area frame: dashed rectangle over the editable region
   (positioned by yh-mobile.js from the live contain-rect). */
#yhmGFrame { position: absolute; pointer-events: none; z-index: 3;
  border: 1.5px dashed rgba(110, 110, 110, 0.55); border-radius: 4px;
  display: none; }

/* generic mini-sheet (Product / Files / Views) — under the legacy sheets
   (z600) so chained flows stack naturally above it */
#yhmGSheet { position: fixed; inset: 0; z-index: 590; }
#yhmGSheet .yhmg-sheet-scrim { position: absolute; inset: 0;
  background: rgba(10, 14, 20, 0.45); }
#yhmGSheet .yhmg-sheet { position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0; max-height: 72dvh;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); }
#yhmGSheet .yhmg-sheet-hd { display: flex; align-items: center;
  justify-content: space-between; padding: 0.85rem 1rem 0.5rem;
  font-size: 14px; font-weight: 700; }
#yhmGSheet .yhmg-sheet-x { min-width: 40px; min-height: 40px; border: 0;
  background: transparent; font-size: 15px; }
#yhmGSheet .yhmg-sheet-body { overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 0 1rem 1rem; }
/* light, text-sheet-style buttons (the heavy black blocks looked off
   next to the iOS-native Add Text sheet) */
.yhmg-big { display: flex; align-items: center; gap: 0.6rem; width: 100%;
  min-height: 52px; margin-bottom: 0.6rem; border: 1.5px solid #e3e1dd;
  border-radius: 12px; background: #fff; color: #1a1d23; font-size: 14px;
  font-weight: 600; padding: 0 1rem; }
.yhmg-big:active { background: #f3f2f0; }
.yhmg-big.ghost { background: #f6f5f3; border-color: transparent; }
.yhmg-prow { display: flex; align-items: center; gap: 0.7rem; width: 100%;
  min-height: 60px; border: 0; border-bottom: 1px solid rgba(0,0,0,0.07);
  background: transparent; font-size: 13px; text-align: left; }
.yhmg-prow img { width: 46px; height: 46px; object-fit: cover;
  border-radius: 8px; background: #f4f4f4; }
.yhmg-prow span { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* brush = "this product has been edited" (replaces the coloured Editing text) */
.yhmg-prow .yhmg-brush { flex: 0 0 auto; color: var(--dk-accent, #9c7f43); }
.yhmg-prow.on { background: rgba(156, 127, 67, 0.10); }
.yhmg-empty { font-size: 13px; color: #777; padding: 0.5rem 0; }
.yhmg-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.yhmg-vcell span { display: block; text-align: center; font-size: 11px;
  font-weight: 600; padding-top: 0.3rem; }
.yhmg-vimg { position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 10px; background: #f6f6f6; }
.yhmg-vimg > img { width: 100%; height: 100%; object-fit: contain; }
.yhmg-vlogo { position: absolute; }

/* ── 6 · REVIEW (.yhrd-rv overlay + order modal) ─────────────────────── */
.yhrd-rv .rv-workspace { display: block !important; padding: 0 1rem 1.25rem; }
.yhrd-rv .rv-main-title { font-size: 1.3rem; line-height: 1.22; }
.yhrd-rv .rv-main-sub { font-size: 0.85rem; }
.yhrd-rv .rv-row { display: grid; grid-template-columns: 1fr !important; gap: 1rem; }
.yhrd-rv .rv-card { min-width: 0; }
.yhrd-rv .rv-card-nav { opacity: 1 !important; width: 36px; height: 36px; }
.yhrd-rv .rv-rail { position: static !important; width: auto !important;
  max-width: none !important; margin-top: 1.25rem; }
.yhrd-rv .rv-methods { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.yhrd-rv .rv-method { min-width: 0; }
.yhrd-rv .rv-method-cta { width: 100%; min-height: 50px; font-size: 14px; }

/* Order modal → full-screen sheet. */
.rvo-root { padding: 0 !important; align-items: stretch !important; }
.rvo-root .rvo-modal { width: 100% !important; max-width: none !important;
  height: 100dvh; max-height: none !important; border-radius: 0 !important;
  display: flex; flex-direction: column; }
.rvo-root .rvo-head { padding: 0.85rem 1rem; }
.rvo-root .rvo-head h2 { font-size: 1.15rem; }
.rvo-root .rvo-close { min-width: 44px; min-height: 44px; }
.rvo-root .rvo-body { display: flex !important; flex-direction: column;
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  grid-template-columns: none !important; gap: 0 !important; }
.rvo-root .rvo-col { width: auto !important; max-height: none !important;
  overflow: visible !important; padding: 0.4rem 1rem; }
.rvo-root .rvo-form input, .rvo-root .rvo-form select {
  font-size: 16px !important; min-height: 46px; }
.rvo-root .rvo-stepper button { min-width: 44px; min-height: 44px; font-size: 18px; }
.rvo-root .rvo-stepper input { min-height: 44px; width: 44px; font-size: 15px; }
.rvo-root .rvo-line-ctl select { min-height: 44px; font-size: 14px; }
.rvo-root .rvo-rowx { min-width: 40px; min-height: 40px; }
.rvo-root .rvo-addsize { min-height: 42px; }
.rvo-root .rvo-place { position: sticky; bottom: 0; width: 100%; min-height: 52px;
  font-size: 15px; margin: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom)); }

/* Store-setup + success overlays (legacy, inline-styled): keep usable. */
#collectOrdersOverlay > div, #collectSuccessOverlay > div {
  width: min(94vw, 460px) !important; max-height: 88dvh !important;
  overflow-y: auto !important; }

/* Dev toolbar FAB (?dev=1): keep it small, in the corner, above the new
   bottom bars — it was floating over product cards. */
#yhrdFab, .hpb-bar-fab {
  left: auto !important; right: 10px !important;
  bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  width: 40px !important; height: 40px !important;
  font-size: 15px !important; opacity: 0.8; }

/* Dev toolbar itself (?dev=1): desktop-shaped rows overflow a 390px screen
   and push the ▾ hide button OFF-SCREEN — the bar couldn't be closed on a
   phone. Compact + wrap everything, cap the height, and pin an always-
   visible close button to the bar's top-right corner. */
#yhrdBar.hpb-bar {
  position: fixed; left: 8px !important; right: 8px !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  transform: none !important; /* skin centres via translateX(-50%) */
  width: auto !important; max-width: none !important;
  max-height: 70dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.6rem 0.6rem !important; }
#yhrdBar .hpb-bar-row { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.3rem 0.45rem; padding: 0.25rem 0 !important; }
#yhrdBar .hpb-bar-steprow { padding-right: 44px !important; }
#yhrdBar .hpb-bar-lbl { font-size: 9px !important; flex: 0 0 100%; }
#yhrdBar .hpb-seg { display: flex; flex-wrap: wrap; gap: 0.25rem;
  min-width: 0; }
#yhrdBar .hpb-seg button { min-height: 36px; font-size: 10.5px !important;
  padding: 0.3rem 0.55rem !important; white-space: nowrap; }
#yhrdBar .hpb-bar-hide {
  position: absolute !important; top: 6px; right: 6px;
  width: 40px !important; height: 40px !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px !important; border-radius: 10px;
  background: rgba(255,255,255,0.14) !important; }
#yhrdBar .hpb-bar-reset { min-height: 38px; font-size: 11px !important; }
#yhmGDevRow { flex-wrap: wrap; }
#yhmGDevRow button { min-height: 36px; }

/* Design is locked (App V2) on mobile — remove the dev design-switcher toolbar
   and its re-open FAB on phones. Desktop (>560px) keeps them for redesign dev. */
#yhrdBar, #yhrdFab { display: none !important; }

} /* end @media (max-width:560px) */

/* Safety net: this layer's own chrome must never appear above the phone
   breakpoint (e.g. a phone rotated to landscape mid-session).
   `not all and (max-width:560px)` is the EXACT complement of the phone
   block — a plain min-width:561px left fractional widths between 560 and
   561 (browser zoom / display-zoom DPRs) covered by neither. */
@media not all and (max-width: 560px) {
  #yhmColBar, #yhmCanvasChip { display: none !important; }
}