/* Late-loaded site styles (loaded at the end of <body> so they win over route bundles):
   phone step-2 controls, the admin field-group table, step-2 design cards. */

/* ---------- Phone step 2: custom multi-selects, view toggle, step-2 tab ---------- */
/* P69CF + P69VW + P69S2T (helper p69 CF+VW+S2T, Shimon Oct 16 10:16-10:18 AM) - PHONE only (<=760px); desktop untouched */
.p69s2t{display:none}
@media (max-width:760px){
  /* custom multi-select filters (Color...) = same box as Style/Sort (box copied by p69cf.js) + inline list inside the sheet */
  #step2 .fbar.p68-open>.p68ms.p69cf{flex-wrap:wrap;align-items:center}
  #step2 .fbar.p68-open>.p68ms.p69cf>.p68dd{display:contents}
  #step2 .fbar.p68-open>.p68ms.p69cf .p68btn{margin:0;text-align:start;padding-inline:10px 30px;font-weight:400;border-radius:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1 5l4-4 4 4M1 9l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:10px 14px}
  #step2 .fbar.p68-open>.p68ms.p69cf .p68btn:dir(rtl){padding-inline:10px 30px;background-position:left 10px center}
  #step2 .fbar.p68-open>.p68ms.p69cf .p68btn::after{display:none}
  #step2 .fbar.p68-open>.p68ms.p69cf .p68pop{position:static!important;inset:auto!important;order:9;flex:0 0 100%;width:100%;max-height:none;min-width:0;margin:8px 0 2px;padding:4px;box-shadow:none;border:1px solid var(--line,#d9e0e2);border-radius:10px;z-index:auto;box-sizing:border-box}
  /* View outside the sheet, in the Filters-button row, at the row's inline end */
  #step2>.dens.p69vw{display:inline-flex!important;align-items:center;gap:4px;float:right;margin:8px 14px 0 0;font-size:13px;color:#555}
  #step2>.dens.p69vw:dir(rtl){float:right;margin:8px 14px 0 0} /* P69VW root 15:10Z: physical right in he/yi too (Shimon: בצד ימין) */
  #step2>.dens.p69vw~.cb{clear:both}
  /* the step-1 simcha title on phone step 2, above the designs */
  #step2 .p69s2t{display:block;margin:2px 14px 12px;text-align:center}
}

/* ---------- Admin field-group editor table ---------- */
/* field-group editor table, every control in its own column, no overlaps */
#gEd .gt col.c-vis{width:110px}#gEd .gt col.c-sty{width:120px}#gEd .gt col.c-s123{width:110px}#gEd .gt col.c-chk{width:92px}#gEd .gt col.c-m3{width:150px}#gEd col.c-keep{width:118px}
#gEd .gt:has(col.c-vis){min-width:1720px}
#gEd .gt th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gEd .gt td{overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
#gEd .gt td select,#gEd .gt td input:not([type=checkbox]){max-width:100%;min-width:0;box-sizing:border-box;text-overflow:ellipsis}
#gEd .gt-st1 select,#gEd .gt-st3 select,#gEd .gt-styc select,#gEd .gt-m3c select,#gEd select.sd-keep{display:block;width:100%;margin:0}
#gEd .gt-styc .gt-sty,#gEd .gt-m3c .gt-m3{display:block;margin:0}
#gEd .gt-chkc{text-align:center}#gEd .gt-chkc .gt-chk{display:inline-flex;justify-content:center;white-space:nowrap}
#gEd .gt td.s2{overflow:hidden}#gEd .gt .gt-id{display:flex;align-items:center;max-width:100%;min-width:0;overflow:hidden}#gEd .gt .gt-id input{min-width:0;flex:1 1 auto;width:100%}
#gEd .gt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.p70ts #p70tsB{overflow-x:auto}

/* P70FGT resize handle on each header cell's inline-end edge */
#gEd .gt .p70rz{position:absolute;top:0;bottom:0;inset-inline-end:-4px;width:9px;cursor:col-resize;z-index:3;touch-action:none;user-select:none}
#gEd .gt .p70rz::after{content:"";position:absolute;top:22%;bottom:22%;inset-inline-start:4px;width:2px;border-radius:1px;background:rgba(0,0,0,.14)}
#gEd .gt .p70rz:hover::after,#gEd .gt .p70rz.on::after{background:var(--teal,#14a3a3);top:0;bottom:0}
body.p70rzing,body.p70rzing *{cursor:col-resize!important;user-select:none!important}
@media(pointer:coarse){#gEd .gt .p70rz{width:18px;inset-inline-end:-9px}}

/* Text styles tab rows (the popup's grid, now in its own tab) */
#p70tsB{max-width:640px}#p70tsB .p66sr{display:grid;grid-template-columns:1fr 72px 120px 52px 36px;gap:6px;align-items:center;margin:6px 0}#p70tsB .p66sh{font-size:12px;opacity:.7;font-weight:600}#p70tsB .p66sr input,#p70tsB .p66sr select{width:100%;min-width:0}#p70tsB .p66f{display:flex;gap:8px;justify-content:space-between;margin-top:12px}

/* ---------- Step-2 design cards ---------- */
/* step-2 design cards like Shimon's original site (Oct 16 12:13): very light grey canvas, white rounded cards,
   price pill at the top corner over the image, heart + code + rounded-square version swatches in one row under it, strip scrolls with chevrons */
#dgrid.dgrid{padding:16px;border-radius:16px;gap:16px}
#dgrid .dcard{position:relative;background:#fff;border:1.5px solid transparent;padding:10px;gap:10px;min-width:0;transition:border-color .15s}
#dgrid .dcard:hover,#dgrid .dcard.sel{border-color:var(--teal,#006775)}
#dgrid .dcard .dth,#dgrid .dcard .dth:hover,#dgrid .dcard.sel .dth{border:0;padding:0;background:transparent;}
#dgrid .dcard>.price{position:absolute;z-index:2;top:18px;inset-inline-end:18px;background:#fff;color:#1f2933;border-radius:999px;padding:5px 12px;font-size:14px;font-weight:700;line-height:1.2;box-shadow:0 2px 10px rgba(0,0,0,.16);pointer-events:none;white-space:nowrap}
#dgrid .dcard .dmeta{gap:6px;min-width:0;width:100%;align-self:stretch;box-sizing:border-box;flex-wrap:nowrap;min-height:34px}
#dgrid .dcard .dmeta .heart{margin-inline-start:0;flex:none;color:#3f4650;font-size:20px;padding:0}
#dgrid .dcard .dmeta .heart.on{color:var(--teal,#006775)}
#dgrid .dcard .dmeta .code{flex:none;color:#1f2933;font-weight:700;white-space:nowrap}
#dgrid .crdsw{display:flex;align-items:center;gap:2px;flex:1 1 0;min-width:0;margin-inline-start:2px}
#dgrid .crdsc{flex:1 1 auto;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
#dgrid .crdsc::-webkit-scrollbar{display:none}
#dgrid .dcard .crdsc .p68sw{flex-wrap:nowrap;}
#dgrid .dcard .crdsc .p68b{width:30px;height:27px;border-radius:7px;border:2px solid #fff;box-shadow:0 0 0 1px #d5dbe0}
#dgrid .crdch{flex:none;width:14px;height:28px;border:0;background:none;color:#3f4650;font-size:20px;line-height:1;cursor:pointer;padding:0;display:none}
#dgrid .crdsw.ovf .crdch:not(:disabled){display:block}
#dgrid.d2 .dcard .crdsc .p68b{width:40px;height:36px;border-radius:8px}
@media (max-width:600px){
  /* #326 (Shimon Oct 17 10:24 PM): the grey canvas behind the cards runs edge-to-edge on phone */
  #dgrid.dgrid{padding:12px 10px;gap:10px;border-radius:0;width:auto;margin-inline:calc(50% - 50vw);box-sizing:border-box}
  main.editor{overflow-x:clip}
  #dgrid .dcard{padding:8px;gap:8px;border-radius:14px}
  #dgrid .dcard .dth,#dgrid .dcard .dth canvas{border-radius:10px}
  #dgrid .dcard>.price{top:14px;inset-inline-end:14px;font-size:12px;padding:3px 8px}
  #dgrid .dcard .dmeta{gap:5px;font-size:13px;min-height:32px}
  #dgrid .dcard .dmeta .heart{font-size:18px}
  #dgrid .crdsw{margin-inline-start:2px}
  #dgrid .dcard .crdsc .p68sw{gap:5px;padding:2px}
  #dgrid .dcard .crdsc .p68b,#dgrid.d2 .dcard .crdsc .p68b{width:28px;height:25px;border-radius:7px}
  #dgrid .crdch{width:13px;height:26px;font-size:18px}
}

/* #325 phone Filters sheet: all filter chips (language / colour / orientation / new / price) in ONE horizontally scrollable row */
@media (max-width:760px){
  html #step2 .fbar.p68-open>#xfBar:not([hidden]){flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  html #step2 .fbar.p68-open>#xfBar::-webkit-scrollbar{display:none}
  html #step2 .fbar.p68-open>#xfBar .xf-g{flex-wrap:nowrap!important;width:auto!important;flex:none!important}
}

/* P71SR #320: phone step 2 one row (original-site look): Filters | Sort By | compact search (expands on focus) | Views — same physical order in every language, all 40 px outlined pills */
.p71sort,.p71pop{display:none}
@media (max-width:760px){
  #step2 .p71row{display:flex;align-items:center;gap:6px;direction:ltr;position:relative;width:100%;box-sizing:border-box;padding:4px 12px 12px;margin:0;clear:both}
  [dir=rtl] #step2 .p71row>*{direction:rtl} [dir=ltr] #step2 .p71row>*{direction:ltr}
  #step2 .p71row>.p68-fltb,#step2 .p71row>.p71sort{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;flex:none;height:40px;box-sizing:border-box;margin:0!important;float:none!important;padding:0 12px;border:1px solid #d9e0e2;border-radius:999px;background:#fff;color:#222;font:inherit;font-size:14px;font-weight:600;box-shadow:none;white-space:nowrap;cursor:pointer}
  #step2 .p71row>.p68-fltb{order:1} #step2 .p71row>.p71sort{order:2}
  #step2 .p71row>.dsrch{order:3;flex:1 1 0;min-width:44px;margin:0!important;padding:0!important}
  #step2 .p71row>.dsrch input{display:block;width:100%;height:40px;min-height:40px;box-sizing:border-box;padding:0 10px 0 34px;border:1px solid #d9e0e2;border-radius:999px;font-size:16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 12px center/16px 16px;text-overflow:ellipsis}
  [dir=rtl] #step2 .p71row>.dsrch input{padding:0 34px 0 10px;background-position:right 12px center}
  #step2 .p71row>.dens{order:4;display:inline-flex!important;align-items:center;justify-content:center;gap:2px;flex:none;height:40px;box-sizing:border-box;margin:0!important;float:none!important;padding:0 8px;border:1px solid #d9e0e2;border-radius:999px;background:#fff;font-size:0!important;color:#555}
  #step2 .p71row>.dens button{font-size:12px}
  #step2 .p71row.p71x>.p68-fltb,#step2 .p71row.p71x>.p71sort,#step2 .p71row.p71x>.dens{display:none!important}
  #step2 .p71row.p71x>.dsrch{flex:1 1 auto}
  #step2 .p71row>.p71pop{display:flex;flex-direction:column;position:absolute;top:calc(100% - 6px);z-index:60;min-width:190px;padding:6px;background:#fff;border:1px solid #d9e0e2;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
  #step2 .p71pop .p71opt{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:#222;font:inherit;font-size:15px;text-align:start;cursor:pointer}
  #step2 .p71pop .p71opt.on{background:#eef6f6;font-weight:600}
}

/* P71MS #325 part 2: phone Filters sheet - the Color box opens the phone's own picker (transparent native multi-select over the box) */
@media (max-width:760px){
  #step2 .fbar.p68-open>.p68ms.p69cf .p68dd{position:relative;display:block;flex:0 0 auto}
  #step2 .fbar.p68-open>.p68ms.p69cf select.p71msel{position:absolute;inset:0;width:100%;height:100%;max-width:none!important;min-width:0!important;opacity:0;margin:0;padding:0;border:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none;z-index:2}
  #step2 .fbar.p68-open>.p68ms.p69cf .p68pop{display:none!important}
}

/* P71SL #319: overlays keep their own scroll; the page under them never chains */
@media (max-width:760px){ .hdp,.hdp-backdrop,.fi-tp-bd,.fi-sheet,.fi-tp,.p65cb-l,.p68pop,.p68-bub,.l3-list,.icp-bd,.p71pop{overscroll-behavior:contain} }

/* P71PV #321 phone step 3: design full width, no grey frame; "Preview" pill top-center over the design */
@media (max-width:760px){
  #step3 .stage{background:none!important;padding:0!important;border-radius:0!important;display:block!important}
  #step3 .stage canvas{display:block;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;border-radius:14px;box-shadow:0 3px 12px rgba(0,0,0,.14)}
  .p71pv{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1f2a30;border:0;border-radius:999px;padding:9px 18px;font-family:inherit;font-size:14px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer}
  .p71pv svg{width:16px;height:16px;flex:none}
  .p71pv[hidden]{display:none!important}
}
@media (min-width:761px){ .p71pv{display:none!important} }

/* ===== P71HM (p71home) — #322 home top row like the original + sticky phone top row, #329 phone step bar slides in on scroll, #323 footer ===== */
@media (max-width:820px){
 /* #322 sticky top row, PHONE ONLY: account / language / menu stays at the top while scrolling */
 header.home-h{z-index:80}
 .home-h.fc-full>.hh-top,.home-h>.hh-top{position:fixed;top:0;left:0;right:0;z-index:80;height:56px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#fff;transition:box-shadow .2s}
 .h2-bg-deep>.hh-top,.h2-has-img>.hh-top{background:#0e4f58}
 html.p71hm-sc .home-h>.hh-top{box-shadow:0 2px 10px rgba(0,0,0,.08)}
 .home-h>.hh-top .hh-r{display:contents}
 .home-h>.hh-top .hh-burger{order:0;width:40px;flex:none}
 .home-h>.hh-top .dkh-lang{order:1;margin:0 auto}
 .home-h>.hh-top .hh-ics{order:2;display:flex!important;width:40px;justify-content:flex-end;flex:none}
 .home-h>.hh-top .hh-ics .dkh-ic:not(.dkh-user),.home-h>.hh-top .hh-ics .dkh-uname{display:none!important}
 .dkh{padding-top:58px}
 .dkh>.dkh-top{position:fixed;top:0;left:0;right:0;z-index:61;transition:box-shadow .2s}
 html.p71hm-sc .dkh>.dkh-top{box-shadow:0 2px 10px rgba(0,0,0,.12)}
 .ac-bar,.sm-bar{top:var(--p71top,0px)}
}
@media (max-width:760px){
 /* #322 home colours like the original on the phone: white page, no decoration (the "deep" style and a hero image are kept) */
 header.home-h.h2-bg-aurora,header.home-h.h2-bg-confetti,header.home-h.h2-bg-aurora.hx-hbase,header.home-h.h2-bg-confetti.hx-hbase{background:#fff!important}
 header.home-h.h2-bg-aurora .h2-deco,header.home-h.h2-bg-confetti .h2-deco{display:none}
 /* #322 search field: white space right of the icons */
 header.home-h form.search .p68-sic{padding-right:14px}
}
@media (max-width:980px){
 /* #329 the 3-step bar is hidden at the top of the page, slides in from the top once you scroll, slides out again back at the top */
 .editor.onestep .phsteps{position:fixed!important;left:0;right:0;transform:translateY(-115%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
 html.p71st-in .editor.onestep .phsteps{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
 /* C32 (card 32, TheDekel 5:34 PM "אמור להיות למעלה מכסה את הכותרת ... לא כמו עכשיו שזה אחד על השני"): the bar sits at the very top of the screen
    and covers the header row while it shows (61px over the 58px row, so nothing peeks between). It used to sit under the row at a live offset
    read from the header's on-screen position, which iPhone Safari misreports while its address bar animates and while the keyboard is open,
    so the bar landed lower than the row and the content under it showed through the gap. Only transform/visibility change: nothing moves. */
 .editor.onestep .phsteps{top:0!important;z-index:82;padding-top:calc(8px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line,#e5e5e5);box-shadow:0 2px 10px rgba(0,0,0,.10)}
}
/* #323 footer: smaller logo, light line under the line below the logo, outline buttons (no fill, white frame, white text, a bit smaller) */
footer.foot .logo{zoom:.78}
footer.foot .logo img{max-height:44px}
footer.foot .foot-in>p:first-of-type{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.3);width:min(100%,520px);text-align:center}
footer.foot .fc-ab a.fc-ab-b,footer.foot .fc-ab .fc-ab-b,footer.foot .fc-ab button,footer.foot .fc-ab a.fc-ab-call,footer.foot .fc-ab a.fc-ab-wa,footer.foot .fc-ab a.fc-ab-ct{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:none!important;font-size:13.5px;min-height:38px;padding:6px 14px}
footer.foot .fc-ab .fc-ab-b svg,footer.foot .fc-ab button svg,footer.foot .fc-ab a.fc-ab-wa svg{color:#fff!important;width:16px;height:16px}
footer.foot .fc-ab .fc-ab-b:hover,footer.foot .fc-ab button:hover{background:rgba(255,255,255,.12)!important;transform:none}
@media (max-width:640px){ footer.foot .logo img{max-height:32px} footer.foot .fc-ab>a,footer.foot .fc-ab>button{font-size:12px!important;padding:6px 6px!important;min-height:36px} }

/* P71ID #309 language line + #313 search code */
.p71ln{margin:4px 2px 10px;font-size:13px;color:#667085;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.p71ln .lnk{background:none;border:0;padding:0;color:var(--brand,#2563eb);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.sr-card .sr-code{color:#98a2b3;font-weight:400;font-size:.85em}

/* ===== C32 (card 32, TheDekel 18/10 5:36 PM "מעבר בין השפות בשלב 1 ... להנפיש את זה משהו יותר נח וקלסי"):
   design-language switch on step 1 — the selected pill slides to the chosen language and the fields crossfade (opacity only). ===== */
.langsel.c32p{position:relative;isolation:isolate}
.langsel.c32p .c32pill{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;background:#e9f3f3;border:1px solid #0e5e6a;box-sizing:border-box;pointer-events:none;transition:none}
.langsel.c32p.c32on .c32pill{transition:transform .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1)}
.langsel.c32p .lang-radio{background:transparent;transition:color .2s ease,border-color .2s ease}
.langsel.c32p .lang-radio:has(input:checked){background:transparent;border-color:transparent}
:where(html.th-on) .langsel.c32p .c32pill{border-color:var(--th-c2,#0e5e6a)}
:where(html.th-on) .langsel.c32p .lang-radio:has(input:checked){border-color:transparent}
#fields.c32out{opacity:0;transition:opacity .14s ease}
#fields.c32in{animation:c32in .2s ease both}
@keyframes c32in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .langsel.c32p.c32on .c32pill,.langsel.c32p .lang-radio{transition:none} #fields.c32out{transition:none} #fields.c32in{animation:none} }
/* C32 iOS: sheets scroll inside themselves and never hand the swipe to the page under them; their height follows the visible screen */
.xs-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:640px){ .xs-card{max-height:80svh} }
.dkh-ovp,.sm-modal>*,.dkai-ov>*,.ac-filters{overscroll-behavior:contain}
/* C32 iOS: on the iPhone a sheet's "vh" is the screen WITHOUT the browser bars, so a bottom sheet could run under the bottom toolbar; use the visible height where the browser knows it */
@supports (height:1svh){ @media (max-width:760px){
 .hdp.hdp-sheet,.sm-box,.sh-box,.bx-box{max-height:92svh}
 .ac-filters,#step2 .fbar.p68-open{max-height:80svh}
 .ux-unch-c{max-height:90svh}
 .modal canvas{max-height:92svh}
 .dkh-dd,.dkh-sug,.sug{max-height:70svh}
} }
/* C32 iOS: a tap leaves :hover stuck on touch screens — no lift/zoom left behind on tapped cards and buttons */
@media (hover:none){
 .ac-tile:hover,.ccard:hover,.home-cats a:hover .ic,.xfaq-circ:hover i,.dkhub-main:hover,.dkhub-it:hover i,.hx-car-btn:hover,.foot .fc-ab .fc-ab-b:hover,.foot .fc-ab button:hover{transform:none}
}

/* C36 (card 36, TheDekel 18/10 6:56 PM "תתקן את החיפוש בשלב 2 שיהיה בשורה אחת עם המסננים והתצוגה. והעיצוב תבדוק באתר המקורי שלי יש שם רק רקע לבן וצל קטן"):
   1) desktop/tablet step 2: the design search sits on ONE row with the filters (Style / Color / Sort) and the Views toggle.
      Pure layout: the column becomes a 3-row grid (title / search+filters / designs); the designs row keeps the C35 one-screen height.
      Each select is as wide as its chosen value; when the column is narrow (laptops) the words "Style" / "Sort by" are hidden
      visually (still read out by screen readers), so everything fits on the one row. Phones keep the P71SR one-row bar (<761px).
   2) design cards like the original site: white card, small soft shadow, light background, no frame or shadow around the picture. */
@media (min-width:761px){
  #step2.col.c2{display:grid;grid-template-columns:minmax(104px,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);align-items:center;column-gap:0;container:dks2/inline-size}
  #step2.col.c2>*{grid-column:1/-1;min-width:0}
  #step2.col.c2>.ch{grid-row:1}
  #step2.col.c2>.dsrch{grid-column:1;grid-row:2;margin:0 0 10px!important;padding:0 0 0 20px!important;box-sizing:border-box}
  [dir=rtl] #step2.col.c2>.dsrch{padding:0 20px 0 0!important}
  #step2.col.c2>.dsrch input{min-height:36px;height:36px;font-size:15px;padding:4px 14px}
  #step2.col.c2>.p68-fltb{grid-column:2;grid-row:2;display:none}
  #step2.col.c2>.fbar{grid-column:2;grid-row:2;align-self:center;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 8px;padding:0 20px 10px 10px;margin:0;max-width:100%;box-sizing:border-box}
  [dir=rtl] #step2.col.c2>.fbar{padding:0 10px 10px 20px}
  #step2.col.c2>.fbar>label{white-space:nowrap;display:flex;align-items:center;gap:4px;flex:none;font-size:13px}
  #step2.col.c2>.fbar select{max-width:120px;height:34px;margin:0;font-size:14px;text-overflow:ellipsis;field-sizing:content;min-width:56px}
  #step2.col.c2>.fbar>.dens{margin:0!important;flex:none;font-size:0;gap:2px}
  #step2.col.c2>.fbar>.dens button{font-size:11px}
  #step2.col.c2>.cb{grid-row:3;align-self:stretch;border-top:1px solid #d7dfe2}
  #step2.col.c2>.fbar{border-bottom:0}
  #step2.ux-few.col.c2>.cb{border-top:0}
  #step2.ux-few.col.c2>.dsrch{grid-column:1/-1;padding-inline-end:20px!important}
}
@container dks2 (max-width:540px){
  #step2>.fbar{gap:4px 5px!important;padding-inline:6px 12px!important}
  #step2>.dsrch{padding-inline-start:12px!important}
  #step2>.fbar select{padding-inline:6px!important;max-width:104px!important}
  #step2>.dsrch input{padding-inline:10px!important}
  #step2>.fbar>.dens button{padding:2px 3px!important;font-size:9px!important;letter-spacing:-1px}
}
@container dks2 (max-width:700px){
  #step2>.fbar>label{font-size:0!important;gap:3px!important}
  #step2>.fbar>label>select{font-size:14px}
  #step2>.fbar>.p68ms>.p68lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #step2>.fbar>.p68ms{gap:3px}
  #step2>.fbar>.p68ms::before{content:"";flex:none;width:15px;height:15px;background:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23e57373'/%3E%3Ccircle cx='16' cy='8' r='4' fill='%2364b5f6'/%3E%3Ccircle cx='8' cy='16' r='4' fill='%23ffd54f'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%2381c784'/%3E%3C/svg%3E")}
  #step2>.fbar>label:has(>select)::before{content:"";flex:none;width:16px;height:16px;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E")}
  #step2>.fbar>label:has(>#fSort)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4'/%3E%3C/svg%3E")}
}
#dgrid.dgrid{background:#f9f9f9}
#dgrid .dcard{border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
#dgrid .dcard .dth,#dgrid .dcard .dth:hover,#dgrid .dcard.sel .dth{border-radius:6px}
#dgrid .dcard .dth canvas{box-shadow:none;border-radius:6px}
@media (max-width:760px){ #dgrid .dcard{border-radius:10px} #dgrid .dcard .dth,#dgrid .dcard .dth canvas{border-radius:6px} }
/* /C36 */

/* C45 reverted (TheDekel 7:26 PM: the steps bar must only appear once you start scrolling, as in #329) */
/* C44 (card 44, TheDekel 18/10 7:12 PM): the step-3 "add to cart" button keeps its icon order in every language: cart on the left, "+" on the right */
.acts .ux-cartic{direction:ltr}
/* /C45 */

/* ===== C46–C54 design polish release (TheDekel cards #46–#54, Oct 18) ===== */

/* C46 add-ons like the original: no "Add-ons" heading, no shared frame; one row each with a round selector (ring + teal dot when on) */
#addFold.ux-addfold,#addFold.p68ao{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin:6px 0 4px!important;border-radius:0!important}
#addFold>summary{display:none!important}
#addFold .addons{display:flex!important;flex-direction:column;gap:2px;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important}
#addFold .addons .addon{position:relative;display:flex!important;align-items:center;gap:12px;width:100%;min-height:40px;margin:0!important;padding:4px 2px!important;border:0!important;border-radius:8px!important;background:none!important;box-shadow:none!important;color:#1f2a30;font:inherit;font-size:14px;font-weight:400;line-height:1.3;text-align:start;cursor:pointer}
#addFold .addons .addon .ad-ic{display:none!important}
#addFold .addons .addon .ad-t{flex:1 1 auto;min-width:0;color:#1f2a30;font-weight:400}
#addFold .addons .addon:not(.chk)::before{content:"";flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:1px solid #c3ced2;background:#fff}
#addFold .addons .addon:not(.chk)::after{content:"";position:absolute;top:50%;inset-inline-start:5px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--th-c2,#006775);transform:scale(0);transition:transform .2s ease;pointer-events:none}
#addFold .addons .addon.on:not(.chk)::after,#addFold .addons .addon[aria-pressed="true"]:not(.chk)::after{transform:scale(1)}
#addFold .addons .addon.on:not(.chk)::before,#addFold .addons .addon[aria-pressed="true"]:not(.chk)::before{border-color:var(--th-c2,#006775)}
#addFold .addons .addon.chk input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;box-sizing:border-box;border-radius:50%;border:1px solid #c3ced2;background:#fff;cursor:pointer}
#addFold .addons .addon.chk input[type=checkbox]:checked{border-color:var(--th-c2,#006775);background:radial-gradient(circle,var(--th-c2,#006775) 0 5.5px,#fff 6px)}
#addFold .addons .addon:focus-visible,#addFold .addons .addon.chk:has(input:focus-visible){outline:2px solid var(--th-c2,#006775);outline-offset:2px}
#addFold .addons .addon.chk input:focus-visible{outline:none}
#addFold .addons .addon .ad-x{flex:none;color:#8a3b34;padding:6px}
#addFold .addons .addon.hidden,#addFold .addons .hidden{display:none!important}
@media (prefers-reduced-motion:reduce){ #addFold .addons .addon::after{transition:none} }
/* /C46 */

/* C47 one Preview: "Real-life view" is gone from view (its handler stays; the on-design Preview pill clicks it); the pill shows on desktop too */
#step3 #mockBtn{display:none!important}
@media (min-width:761px){
  #step3 .stage>.p71pv:not([hidden]){display:inline-flex!important;position:absolute;top:32px;left:50%;transform:translateX(-50%);z-index:4;align-items:center;gap:6px;background:#fff;color:#1f2a30;border:0;border-radius:999px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:700;line-height:1;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer}
  #step3 .stage>.p71pv svg{width:16px;height:16px;flex:none}
}
.p71pv:focus-visible{outline:2px solid var(--teal,#006775);outline-offset:2px}
@media (max-width:760px){ #step3 .cb>.pvbar{display:none!important} }
/* /C47 */

/* C48 design ID + watermark note in one tidy row right under the design (like the original's phone layout), desktop and phone */
#step3 .c48id{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:8px 2px 2px;min-height:20px}
#step3 .c48id #pvName{flex:none;font-size:14px;font-weight:600;color:#1f2a30;line-height:20px;direction:ltr;unicode-bidi:isolate}
#step3 .c48id #pvName:empty::before{content:'\a0'}
#step3 .c48id .wm-note{flex:1 1 160px;margin:0!important;padding:0;font-size:12px;line-height:1.4;color:#5f6f75;text-align:start!important}
#step3 .c48id .wm-note.hidden{display:none!important}
@media (max-width:760px){ #step3 .cb>.c48id{order:1} }
/* /C48 */

/* C49 "More texts on the card" is not shown (fixed design texts keep rendering on the card from the design defaults / saved step-3 edits) */
#visS3{display:none!important}
/* /C49 */

/* C50 Favorite / Share = white buttons like the original, under the fields; the "Total = $…" line + ID are not shown (the price is on the Buy button) */
#step3 .totrow{display:none!important}
#step3 .acts.ux-fs{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
#step3 .acts.ux-fs .lnk{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 16px;border:1px solid #d7dfe2;border-radius:999px;background:#fff;color:#545c5f;font:inherit;font-size:14px;font-weight:400;text-decoration:none;cursor:pointer}
#step3 .acts.ux-fs .lnk svg{width:16px;height:16px}
#step3 .acts.ux-fs .lnk.on,#step3 .acts.ux-fs .fav3[aria-pressed="true"]{color:#c0392b;border-color:#e3b7b2}
#step3 .acts.ux-fs .lnk:focus-visible{outline:2px solid var(--teal,#006775);outline-offset:2px}
#step3 .acts.ux-fs .lnk.hidden{display:none}
@media (max-width:760px){
  #step3 .cb>.acts.ux-fs,#step3 .cb>#shareBox{order:4}
  #step3 .cb>#xRel,#step3 .cb>#status,#step3 .cb>.bx-slot,#step3 .cb>.acts.buy,#step3 .cb>.bb-note{order:5}
}
/* /C50 */

/* C51 phone step 2: view toggle without the pill frame; simcha name + "Showing designs…" line aligned to the start side */
@media (max-width:760px){
  html #step2 .p71row>.dens{direction:ltr;align-self:center;height:29px;padding:2px!important;gap:2px;border:1px solid #d7dfe2!important;border-radius:30px!important;background:#fff!important;box-shadow:none!important} /* #51 (19/10): framed "1 | 2" pill like the header language switch */
  #step2 .cb>.p69s2t{text-align:start!important;margin:6px 14px 2px!important;font-size:19px!important;line-height:1.3!important}
  #step2 .p71ln{margin:0 14px 10px!important;justify-content:flex-start}
}
/* /C51 */

/* C52 card row: heart + ID on the LEFT, colour swatches at the RIGHT end (same physical sides in Hebrew, like the original);
   swatch shape like the original: 20×20, top-left + bottom-right corners rounded, the other two square */
#dgrid .dcard .dmeta{direction:ltr}
#dgrid .dcard .dmeta .code{direction:ltr;unicode-bidi:isolate}
#dgrid .dcard .dmeta .crdsw{flex:0 1 auto;margin-inline-start:auto}
#dgrid .dcard .dmeta .crdsc{flex:0 1 auto}
/* C143 (TheDekel 19/10 17:55): heart + design code a bit smaller and finer, not so bold. The glyph shrinks; the tap area grows to 40px tall via ::after (no layout change, row height unchanged). */
#dgrid .dcard .dmeta .heart{font-size:17px;color:#5b6470;position:relative}
#dgrid .dcard .dmeta .heart.on{color:var(--teal,#006775)}
#dgrid .dcard .dmeta .heart .dki{stroke-width:1.5}
#dgrid .dcard .dmeta .heart::after{content:'';position:absolute;inset:-10px -3px -10px -10px}
#dgrid .dcard .dmeta .code{font-size:12.5px;font-weight:500;color:#4a5562;letter-spacing:.01em}
@media (max-width:600px){#dgrid .dcard .dmeta .heart{font-size:15px}#dgrid .dcard .dmeta .heart::after{inset:-11px -3px -11px -11px}#dgrid .dcard .dmeta .code{font-size:12px}}
#dgrid .dcard .crdsc .p68sw{gap:4px;padding:3px}
#dgrid .dcard .crdsc .p68b,#dgrid.d2 .dcard .crdsc .p68b{position:relative;width:20px;height:20px;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} /* #144 (TheDekel 19/10 5:56 PM): circles, not the leaf shape; a two-colour version (swatch2) shows as a half/half circle (opts.js p68sw) */
#dgrid .dcard .crdsc .p68b::after{content:"";position:absolute;inset:-6px -2px;border-radius:8px} /* #144: hit area 24×32 (the 4px gap limits the width) */
#dgrid .dcard .dmeta .crdsc{padding-block:3px;margin-block:-3px} /* #144: the strip clips its overflow; 3px more room above/below so the 32px hit area is not cut, with no change to the row height */
#dgrid .dcard .crdsc .p68b.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 1px #fff,0 0 0 2.5px var(--teal,#006775)}
#dgrid .dcard .crdsc .p68b:focus-visible{outline:2px solid var(--teal,#006775);outline-offset:3px}
@media (min-width:761px){ #dgrid .dcard .crdsc .p68b,#dgrid.d2 .dcard .crdsc .p68b{width:22px;height:22px} }
/* C158 (TheDekel 19/10 6:21 PM "a bit more space between the circles"): colour circles on design cards 4px -> 7px apart (8px on desktop), step-3 "Colour:" row 8px -> 14px.
   Circle size, row height and card height unchanged; hit areas widened to fill the bigger gap (27x32 phone, 30x32 desktop); many colours: the card strip keeps its scroll + chevrons, step 3 wraps. */
#dgrid .dcard .crdsc .p68sw{gap:7px}
#dgrid .dcard .crdsc .p68b::after{inset:-6px -3.5px}
@media (min-width:761px){ #dgrid .dcard .crdsc .p68sw{gap:8px} #dgrid .dcard .crdsc .p68b::after{inset:-5px -4px} }
#step3 .varrow{column-gap:14px;row-gap:10px;flex-wrap:wrap}
/* /C158 */
/* C160 (TheDekel 19/10 6:23 PM): phone step 3 - "Show all fields" inside the fields frame, centred under the category title, no box of its own;
   the extra fields it reveals open right under it (steps123.js moves them there). Hidden while the form is back in step 1. */
main.editor.onestep .phfields .formcard>.s123-all{justify-content:center;gap:8px;width:max-content;max-width:100%;box-sizing:border-box;margin:0 auto 6px;padding:8px 12px;min-height:40px;border:0;border-radius:10px;background:none;font-size:.95rem}
main.editor.onestep .phfields .formcard>.s123-all:has(input:focus-visible){outline:2px solid var(--teal,#006775);outline-offset:-2px}
main.editor.onestep .phfields .formcard>#s1gS3{margin:0 0 4px}
main.editor.onestep .phfields .formcard>#s1gS3 .s1g-s3{margin:0;border:0;padding:0;background:none}
main.editor.onestep .phfields .formcard>#s1gS3 .hint{display:none}
#step1 .formcard>.s123-all,#step1 .formcard>#s1gS3{display:none!important}
/* /C160 */
/* /C52 */

/* C54 step 3: no "Colour N" name next to the swatches; no "Print size" line (kept in the markup, visually hidden); phone note about the pro editor */
#step3 .varrow .vname{display:none!important}
#step3 #pvInfo{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* /C54 */

/* C53 loading "snake": softer + slower (2.6s a lap), a fading tail, and a light shimmer that runs back through the snake; GPU-light (stroke paint only, no layout) */
.snk.c53{transition:opacity .25s ease}
.snk.c53 rect{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.snk.c53 .snk-b{stroke:var(--teal,#006775);stroke-width:2.5;opacity:.10}
.snk.c53 .snk-r{stroke:var(--teal,#006775);stroke-width:3;animation:snk 2.6s linear infinite}
.snk.c53 .snk-t1{stroke-dasharray:34 66;opacity:.20}
.snk.c53 .snk-t2{stroke-dasharray:22 78;opacity:.5;animation-delay:-0.312s}
.snk.c53 .snk-h{stroke-dasharray:11 89;opacity:.95;animation-delay:-0.598s}
.snk.c53 .snk-s{stroke:#fff;stroke-width:1.6;stroke-dasharray:6 94;opacity:0;animation:c53sh 2.6s linear infinite}
.snk.c53 .snk-p{display:none}
@keyframes c53sh{0.00%{stroke-dashoffset:-28.00;opacity:0}9.00%{stroke-dashoffset:-31.96;opacity:1}41.00%{stroke-dashoffset:-46.04;opacity:1}49.95%{stroke-dashoffset:-49.98;opacity:0}50.00%{stroke-dashoffset:-78.00;opacity:0}59.00%{stroke-dashoffset:-81.96;opacity:1}91.00%{stroke-dashoffset:-96.04;opacity:1}99.95%{stroke-dashoffset:-99.98;opacity:0}100%{stroke-dashoffset:-128.00;opacity:0}}
canvas.snk-dim{opacity:.78;transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){
  .snk.c53 .snk-r,.snk.c53 .snk-s{display:none;animation:none}
  .snk.c53 .snk-p{display:inline;stroke:var(--teal,#006775);stroke-width:2.5;animation:c53pulse 1.8s ease-in-out infinite alternate}
  @keyframes c53pulse{from{opacity:.2}to{opacity:.6}}
}
/* /C53 */

/* C48b: no sideways nudge of the note while the ID fills in */
#step3 .c48id:has(#pvName:empty) .wm-note{visibility:hidden}
/* C49b phone: the step-1 extra-fields group (#s1gS3) shows only with "Show all fields"; it used to flash 73px tall on load until that toggle was set up (now visible on screen because step 3 is shorter) */
@media (max-width:980px){ main.editor.onestep:not(.s123-all-on) #s1gS3{display:none!important} }

/* C51b -> #51 (19/10): the two view buttons look like the header language switch (.dkh-lang.dark): "1" and "2", the active one filled teal */
@media (max-width:760px){
  html #step2 .p71row>.dens button{position:relative;border:0!important;background:transparent!important;box-shadow:none!important;min-width:0;height:23px;line-height:23px;padding:0 10px!important;border-radius:20px!important;font-size:13px!important;letter-spacing:0!important;font-family:inherit;color:#5a6162!important;cursor:pointer}
  html #step2 .p71row>.dens button.on{background:var(--dk-teal,#006775)!important;color:#fff!important}
  html #step2 .p71row>.dens button:focus-visible{outline:2px solid var(--teal,#006775);outline-offset:1px}
  html #step2 .p71row>.dens button::after{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px}
}

/* C50b old price inside the Buy button on a sale */
#buyBtn .c50-was{display:inline;opacity:.75;font-size:.85em;margin-inline-end:.35em;color:inherit}
/* /C50b */

/* FORMVIS (stranger test 19/10): when the browser jumps to a field that is missing or wrong (or focuses it), keep it below the sticky top bar instead of under it. Scroll position only, no layout change. */
#app input,#app textarea,#app select{scroll-margin-top:110px}

/* TWINSFIT #12 (19/10): step 1 "Twins" toggle, small pill beside the simcha title (no extra row; it is in the first paint, so nothing moves) */
.formcard>.tw1{float:left;display:inline-flex;align-items:center;gap:5px;height:28px;margin:0 0 4px 8px;padding:0 11px;border:1px solid #d7dfe2;border-radius:30px;background:#fff;color:#5a6162;font:inherit;font-size:13px;line-height:1;cursor:pointer}
[dir=rtl] .formcard>.tw1{float:left;margin:0 8px 4px 0}
[dir=ltr] .formcard>.tw1{float:right;margin:0 0 4px 8px}
.formcard>.tw1.on{background:var(--dk-teal,#006775);border-color:var(--dk-teal,#006775);color:#fff}
.formcard>.tw1:focus-visible{outline:2px solid var(--teal,#006775);outline-offset:2px}

/* MOCKPHOTO #11 (19/10): real mockup photo with the design placed on it (same rules in the admin editor and for the customer) */
.mk-photo{position:relative;display:inline-block;max-width:100%;line-height:0;overflow:hidden;border-radius:8px}
.mk-photo .mk-ph-bg{display:block;max-width:100%;max-height:70vh;width:auto;height:auto}
.mk-photo .mk-ph-d{position:absolute;height:auto;transform-origin:50% 50%;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.mk-mini .mk-photo .mk-ph-bg{max-height:none}
.mp-stage-w{margin:8px 0}.mp-stage{max-width:min(460px,100%)}.mp-stage .mk-ph-bg{max-height:60vh}.mp-stage .mk-ph-d{cursor:move;touch-action:none;outline-offset:2px}.mp-stage .mk-ph-d:focus-visible{outline:2px solid var(--teal,#006775)}