/* S3DESK #70/#71 (desktop design page) - layout only, nothing changes below 981px or on touch screens */
@media (min-width:981px) and (hover:hover){
  #step3 .cb.s3d .pvbar #proBtn{flex:1 1 100%;justify-content:center}
  #step3 .cb.s3d .pvbar .pvlinks{display:flex;width:100%}
  #step3 .cb.s3d .c48id{display:none}
  #step3 .cb.s3d .stage{position:relative}
  #step3 .cb.s3d .stage #wmNote{position:absolute;inset-inline:0;bottom:0;margin:0;padding:7px 10px;background:rgba(17,24,39,.72);color:#fff;font-size:12.5px;line-height:1.3;text-align:center;border-radius:0 0 14px 14px;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:3}
  #step3 .cb.s3d .stage:hover #wmNote,#step3 .cb.s3d .stage:focus-within #wmNote{opacity:1}
  #step3 .cb.s3d .stage #wmNote:empty{display:none}
  /* G70b (TheDekel #70, 19/10 11:50 "also the preview button only when the mouse is over the design"): the Preview pill fades in on hover / keyboard focus, like the watermark strip */
  #step3 .cb.s3d .stage>.p71pv:not([hidden]){opacity:0;transition:opacity .2s ease}
  #step3 .cb.s3d .stage:hover>.p71pv:not([hidden]),#step3 .cb.s3d .stage:focus-within>.p71pv:not([hidden]){opacity:1}
  #step3 .cb.s3d #varRow{direction:ltr;justify-content:flex-start;margin-top:8px}
  #step3 .cb.s3d #addFold{margin-top:6px}
  #step3 .cb.s3d #addFold .addons{gap:2px!important}
  #step3 .cb.s3d #addFold .addon{padding-top:5px!important;padding-bottom:5px!important;min-height:0!important}
  #step3 .cb.s3d .totrow{display:flex!important;align-items:baseline;justify-content:space-between;gap:10px;margin:10px 2px 8px;font-size:16px}
  #step3 .cb.s3d .totrow b{font-size:18px}
  #step3 .cb.s3d .totrow small{display:inline!important;font-size:13px;color:#5b6670;font-weight:600}
  #step3 .cb.s3d .acts.buy{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  #step3 .cb.s3d .acts.buy #buyAmt,#step3 .cb.s3d .acts.buy .s3d-dash{display:none}
  #step3 .cb.s3d .acts.buy>.btn{width:100%;min-height:46px;justify-content:center;margin:0}
  #step3 .cb.s3d #cartBtn{display:inline-flex!important;align-items:center;gap:6px;width:100%}
  #step3 .cb.s3d #cartBtn .ux-plus{display:none}
  #step3 .cb.s3d .acts.ux-fs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr)) 38px;gap:6px;margin-top:8px}
  #step3 .cb.s3d .acts.ux-fs>#saveOneBtn{font-size:0!important;padding:0!important;gap:0}
  #step3 .cb.s3d .acts.ux-fs>#saveOneBtn svg{width:17px;height:17px}
  #step3 .cb.s3d .acts.ux-fs>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:4px 6px!important;border:1px solid #d9e0e2;border-radius:999px;background:#fff;color:#1f2933;font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  #step3 .cb.s3d .acts.ux-fs>button svg{flex:none;width:16px;height:16px}
  /* I #71b + L #81 (TheDekel 19/10): Save big beside Buy now, Add to cart small (icon + "+") at the end of the small row; Pro editor icon and text on one line */
  #step3 .cb.s3d .acts.buy>#saveOneBtn{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600}
  #step3 .cb.s3d .acts.buy>#saveOneBtn svg{width:18px;height:18px;flex:none}
  #step3 .cb.s3d .acts.ux-fs{grid-template-columns:repeat(3,minmax(0,1fr)) 52px}
  #step3 .cb.s3d .acts.ux-fs>#cartBtn{width:auto;min-width:0;flex:none;gap:2px!important;padding:0 6px!important;direction:ltr}
  #step3 .cb.s3d .acts.ux-fs>#cartBtn .ux-plus{display:inline!important;font-size:15px;font-weight:700;line-height:1}
  #step3 .cb.s3d .acts.ux-fs>#cartBtn .s3d-ct{display:none}
  #step3 .cb.s3d .pvbar #proBtn{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;white-space:nowrap}
  #step3 .cb.s3d .pvbar #proBtn svg{flex:none;margin:0!important}
  #step3 .cb.s3d .acts.ux-fs>button:focus-visible,#step3 .cb.s3d .acts.buy>.btn:focus-visible{outline:2px solid var(--teal,#006775);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){ #step3 .cb.s3d .stage #wmNote,#step3 .cb.s3d .stage>.p71pv{transition:none} }
/* #68 end tile: the original site's longer text scales with the tile width (all screens) */
#dgrid.dgrid .xend-card .xe-s{font-size:clamp(.72rem,6.4cqi,.95rem);line-height:1.38}
#dgrid.dgrid .xend-card .xe-main{gap:8px} /* XE68 */
@container (max-width:240px){ #dgrid.dgrid .xend-card .xe-meta{flex-wrap:wrap;row-gap:2px} #dgrid.dgrid .xend-card .xe-tag{display:block!important;flex:1 0 100%;order:-1;font-size:.8rem;font-weight:600} #dgrid.dgrid .xend-card .xe-chips{margin-inline-start:auto} } /* #68: #YourChoice stays visible on a narrow tile, on its own line */

/* #68b (TheDekel 19/10 10:00, old-site reference): end tile - "Loading..." outlined pill on top, heart + #YourChoice + three two-line boxed chips at the bottom */
#dgrid .xend-card .xe-cta.xe-load{border:1px solid #1f2933;border-radius:999px;background:#fff;color:#111;font-size:clamp(13px,6.2cqi,17px);font-weight:400;line-height:1.25;padding:5px 20px;letter-spacing:.01em;direction:ltr}
#dgrid .xend-card .xe-meta{gap:8px;padding:0 4px}
#dgrid .xend-card .xe-hrt{color:#b8c2c0}
#dgrid .xend-card .xe-tag{font-size:clamp(.8rem,5.4cqi,1rem);color:#111}
#dgrid .xend-card .xe-chips{gap:4px}
#dgrid .xend-card .xe-chips i{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:38px;padding:3px 6px;border:1px solid #111;border-radius:4px 9px 4px 9px;background:#fff;color:#111;font-style:normal;line-height:1.05;white-space:nowrap;text-align:center}
#dgrid .xend-card .xe-chips i b{font-size:11px;font-weight:700}
#dgrid .xend-card .xe-chips i span{font-size:10px;font-weight:400}
@container (max-width:240px){ #dgrid .xend-card .xe-chips i{min-width:30px;padding:2px 4px} #dgrid .xend-card .xe-chips i b{font-size:10px} #dgrid .xend-card .xe-chips i span{font-size:9px} }