/* phone one-step-at-a-time (ph.js) */
.phsteps{display:none}
.phback{display:none}
.phstrip,.phfields{display:none}
@media (max-width:980px){
  main.editor.onestep{position:relative}
  .editor.onestep .phsteps{display:flex;gap:6px;position:sticky;top:var(--phtop,0px);z-index:30;background:#fff;padding:8px 10px;border-bottom:1px solid var(--line,#e5e5e5);box-shadow:0 2px 8px rgba(0,0,0,.05)}
  .phsteps button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1.5px solid var(--line,#ddd);background:#fff;border-radius:12px;font:inherit;font-size:14px;color:#555;padding:4px 6px;cursor:pointer}
  .phsteps button b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#eee;font-size:13px;flex:none}
  .phsteps button.on{border-color:var(--teal,#006775);color:var(--teal,#006775);font-weight:700;background:#f1f9fa}
  .phsteps button.on b{background:var(--teal,#006775);color:#fff}
  .phsteps button.done b{background:#d8eef0;color:var(--teal,#006775)}
  .editor.onestep .col.phoff{position:absolute!important;left:0;right:0;top:0;height:0!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none}
  .editor.onestep .col{min-height:60vh}
  .editor.onestep .phback{display:block;width:100%;margin:14px 0 6px;min-height:46px;border:1.5px solid var(--line,#ddd);background:#fff;border-radius:12px;font:inherit;font-size:15px;color:var(--teal,#006775);cursor:pointer}
  .editor.onestep .c2 .nextl,.editor.onestep .c1 .nextl{display:block;text-align:center;background:var(--teal,#006775);color:#fff;padding:14px 16px;border-radius:12px;font-size:17px;margin:14px 0}
}
@media (max-width:980px){
  .editor.onestep .phstrip:not([hidden]){display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;margin:0 0 8px;-webkit-overflow-scrolling:touch;align-items:center}
  .phstrip .phs-more{font-size:11.5px;line-height:1.25;color:var(--teal,#006775);border:1.5px dashed var(--line,#ccc)!important;background:#fff!important}
  .editor.onestep #step3 .acts.buy{position:sticky;bottom:0;z-index:6;background:#fff;padding:8px 0;margin-bottom:0;box-shadow:0 -6px 12px -8px rgba(0,0,0,.15)}

  .phstrip button{flex:none;width:64px;height:90px;padding:0;border:2px solid transparent;border-radius:8px;background:#f4f4f4;overflow:hidden;scroll-snap-align:center;cursor:pointer}
  .phstrip button.on{border-color:var(--teal,#006775);box-shadow:0 0 0 2px rgba(0,103,117,.2)}
  .phstrip img,.phstrip canvas{width:100%;height:100%;object-fit:cover;display:block}
  .editor.onestep .phfields{display:block;margin:12px 0;border:1.5px solid var(--line,#ddd);border-radius:12px;background:#fff}
  .phfields>summary{cursor:pointer;padding:13px 14px;font-weight:700;color:var(--teal,#006775);list-style:none;min-height:46px}
  .phfields>summary::-webkit-details-marker{display:none}
  .phfields .phf-in{padding:0 8px 8px}
  .phfields .formcard{box-shadow:none;margin:0;border:0} /* P109: the sheet already has its own line */
}
@media (max-width:380px){ .phsteps button span{font-size:12.5px} }

/* phone one-step mode: the sticky step bar (1 Details / 2 Design / 3 Preview & buy) already names the step,
   so the "STEP N: ..." heading under it is hidden (only the heading of each step column; desktop unchanged) */
@media (max-width:980px){
  .editor.onestep #step1>.ch,.editor.onestep #step2>.ch,.editor.onestep #step3>.ch{display:none}
  .editor.onestep #step1,.editor.onestep #step2,.editor.onestep #step3{padding-top:10px}
}

/* #328 (Shimon Oct 17 10:26 PM): phone step nav = one row, Back (outlined, ~38%) + Next (filled); RTL mirrors by flex */
.phnav{display:contents}
@media (max-width:980px){
  .editor.onestep .phnav{display:flex;align-items:stretch;gap:10px;margin:14px 0 6px}
  .editor.onestep .phnav .phback{flex:0 0 38%;width:auto;margin:0;white-space:nowrap}
  .editor.onestep .phnav .nextl{flex:1 1 auto;min-width:0;margin:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;min-height:46px;box-sizing:border-box}
}

/* C28 (card 28, TheDekel 18/10): phone design strip moves like the old site — plain native momentum, no snapping
   back, the page's back-swipe never fires from it, and "All designs" stays pinned at the row's end (RTL: left, LTR: right)
   beside the scrolling cards, outside the scroller (ph.js wraps them in .phsw). */
.phsw{display:none}
.editor.onestep .phsw:not([hidden]){display:flex;align-items:flex-start;gap:8px;margin:0 0 8px}
@media (max-width:980px){ #step3 .cb>.phsw{order:0} }
.editor.onestep .phsw .phstrip:not([hidden]){flex:1;min-width:0;margin:0;scroll-snap-type:none;overscroll-behavior-x:contain;scrollbar-width:none}
.editor.onestep .phstrip::-webkit-scrollbar{display:none}
.phstrip button{scroll-snap-align:none}
.phsw .phs-more{flex:none;width:60px;height:90px;margin-top:4px;padding:0 4px;border-radius:8px;cursor:pointer;font:inherit;font-size:11.5px;line-height:1.25;color:var(--teal,#006775);border:1.5px dashed var(--line,#ccc);background:#fff}
:where(html.th-on) .phsw .phs-more{color:var(--teal,var(--th-c1))}
/* C28: design preview popup — swipe / arrows go to the next design in the same list */
.mk-stage{touch-action:pan-y;position:relative}
.c28nav{position:absolute;top:50%;z-index:3;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 2px 8px rgba(0,0,0,.18);color:#0e5e6a;font:700 20px/34px system-ui,sans-serif;cursor:pointer;padding:0}
.c28nav[disabled]{opacity:.25;cursor:default}
.c28nav.l{left:8px}.c28nav.r{right:8px}
.c28pos{text-align:center;font-size:12px;color:#6b6b6b;margin:6px 0 0}
.mk-stage.c28busy>:not(.c28nav){opacity:.35;transition:opacity .15s}