/* S2GRID (TheDekel 19/10 14:17-14:21, old-site screenshot). Remove the include to roll back.
   A) ALL step-2 cards have the same height, phone and desktop: a fixed image box per simcha (--s2ar, set by s2grid.js from the simcha's
      "Card size" admin setting; default = the proportion most of its designs have = today's look); a design of another size fits inside
      (contain, nothing cropped). The "It's Not The End!" tile no longer sets the row height (size containment): it takes exactly the
      design-card height, so it is never taller than the card beside it, also alone in the last row. */
#dgrid.s2ar>.dcard{align-self:stretch}
#dgrid.s2ar .dcard .dth{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:var(--s2ar);overflow:hidden}
#dgrid.s2ar .dcard .dth>canvas{display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%;aspect-ratio:auto!important;object-fit:contain;background:transparent!important}
#dgrid.s2ar .dcard .dmeta{margin-top:auto}
html #dgrid.dgrid.dgrid.s2ar:has(.xend-card){grid-auto-rows:1fr}
html #dgrid.dgrid.s2ar>.xend-card{min-height:0;container-type:size;overflow:hidden}
html #dgrid.dgrid.s2ar>.xend-card .xe-main{min-height:0;overflow:hidden;justify-content:center;gap:min(8px,1.6cqh)}
html #dgrid.dgrid.s2ar>.xend-card .xe-main>b{font-size:clamp(.9rem,min(11cqi,8.5cqh),1.6rem)}
html #dgrid.dgrid.s2ar>.xend-card .xe-s{font-size:clamp(.6rem,min(6.4cqi,4.4cqh),.95rem);line-height:1.32;flex:0 1 auto;min-height:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--xe-lines,14)}
html #dgrid.dgrid.s2ar>.xend-card .xe-meta{flex:none}
/* when the tile is too small for the whole text (very narrow columns), s2grid.js sets --xe-lines so it ends on a whole line with an ellipsis */

/* B) desktop, like the old site: the WHOLE step-2 column on light grey #F9F9F9 (also behind "STEP 2"), search + Style / Color / Sort by /
      Views in ONE white rounded bar floating on the grey, white rounded design cards (15px padding, image with rounded corners, no shadow),
      price glass pill 12px inside the image corner. Phones keep their current look. */
@media (min-width:981px){
  html body main section.col.c2#step2{background:#F9F9F9}
  html body main section.col.c2#step2>.cb{background:#F9F9F9;border-top:0}
  html body #step2.col.c2>.dsrch,html body #step2.col.c2>.fbar{background:#fff;align-self:stretch;margin:0 0 15px!important;display:flex;align-items:center;box-sizing:border-box}
  html body #step2.col.c2>.dsrch{margin-inline-start:20px!important;padding:6px 0!important;padding-inline-start:10px!important;border-start-start-radius:10px;border-end-start-radius:10px}
  html body #step2.col.c2>.fbar{margin-inline-end:20px!important;padding:6px 10px!important;border-start-end-radius:10px;border-end-end-radius:10px}
  html body #step2.ux-few.col.c2>.dsrch{margin-inline-end:20px!important;border-radius:10px}
  html body #step2.col.c2>.dsrch input{border-color:#e3e8ea}
  html body #step2 #dgrid.dgrid{background:transparent;padding:4px 0 16px;gap:15px;border-radius:0}
  html body #step2 #dgrid .dcard,html body #step2 #dgrid .xend-card{border-radius:10px;padding:15px;box-shadow:none}
  html body #step2 #dgrid .dcard .dth,html body #step2 #dgrid .dcard .dth>canvas{border-radius:10px}
  html body #step2 #dgrid .dcard>.price{top:27px;inset-inline-end:27px}
  html body #step2 #dgrid .xend-card .xe-cta.xe-load{top:27px;inset-inline-end:27px}
}