/* NoFussDeal /surprise-me.
   Loaded on top of editorial.css. The masonry wall is the live page's original
   card design, translated out of Tailwind utility classes so it can run under
   the editorial layout, which ships no Tailwind. Colour is mapped onto the
   site palette; structure, rhythm and behaviour are unchanged. */

/* ---------- masthead ----------
   On the ink ground the homepage already uses for its trust bar and How We
   Test — this page earns being the loudest on the site by being the only one
   on a dark field, not by inventing a palette. Kept deliberately short: the
   point of a discovery page is the discovery, and that is below this band. */
.sm-head{background:var(--ink);color:#f3ece2;padding:38px 0 34px}
/* Claim left, action right. The band is short enough now that a centred
   button on the right reads as the other half of a sentence rather than as
   something stranded in a field of dark. */
.sm-head-in{display:grid;grid-template-columns:1fr auto;gap:20px 52px;align-items:center}
.sm-kick{margin:0 0 12px;font:800 11px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mustard)}
.sm-head h1{margin:0;max-width:23ch;
  font:400 clamp(32px,4.2vw,50px)/1.06 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  letter-spacing:-.024em;color:#fff;text-wrap:balance}
.sm-lede{margin:15px 0 0;max-width:58ch;font-size:17.5px;line-height:1.6;color:#ded4c7}

.sm-cta{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
/* --flame-deep, not --flame: white on --flame measures 3.96:1, under the 4.5
   a 14px bold label needs. Every solid CTA on the site uses the deep step. */
.sm-deal{display:inline-flex;align-items:center;gap:11px;padding:16px 26px;
  background:var(--flame-deep);color:#fff;border:0;cursor:pointer;
  font:800 13.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s ease,transform .12s ease}
.sm-deal:hover{background:#8d280b}
.sm-deal:active{transform:translateY(1px)}
.sm-deal svg{transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.sm-deal:hover svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.sm-deal svg,.sm-deal:hover svg{transition:none;transform:none}}
.sm-key{font:400 12.5px/1 "Helvetica Neue",Arial,sans-serif;color:#9c9186}
.sm-key kbd{display:inline-block;padding:2px 6px;border:1px solid #4a4139;
  font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#ded4c7}
/* A keyboard shortcut is noise on a device with no keyboard. */
@media(hover:none){.sm-key{display:none}}
/* On the header band (editorial.css), like every other page head: the ink
   field made this page look like it belonged to another site. */
.sm-head{background:var(--band)}
.sm-lede{color:var(--band-text)}
.sm-key{color:var(--band-muted)}
.sm-key kbd{border-color:rgba(255,255,255,.3);color:#eef7f6}

/* ---------- control strip ----------
   Sticky, because on a page you scroll forever the controls must stay
   reachable. Mounted on a rule rather than floated on a blur panel. Categories
   are chips here rather than a list in the masthead: one control, not two. */
.sm-bar{position:sticky;top:0;z-index:30;background:var(--surface);
  border-bottom:1px solid var(--rule);box-shadow:0 1px 0 rgba(60,48,34,.04)}
/* padding-top/bottom only, found 24 Sept 2026: this element is both .wrap and
   .sm-bar-in (same div), and `padding:11px 0` here sets padding-left/right to
   0 as part of its shorthand - equal specificity to .wrap's own 28px/20px
   gutter and later in the cascade, so it has always won, on every screen
   size. The bar has been sitting flush against the edge since this page
   shipped; every other band on the site keeps .wrap's gutter. */
.sm-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:11px;padding-bottom:11px}
.sm-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.sm-chips button{display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 13px;min-height:34px;background:var(--canvas);
  border:1px solid var(--rule);cursor:pointer;
  font:600 12.5px/1.2 "Helvetica Neue",Arial,sans-serif;color:var(--body);
  transition:border-color .18s ease,color .18s ease}
.sm-chips button:hover{border-color:var(--flame-deep);color:var(--flame-deep)}
.sm-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.sm-chips em{font-style:normal;font:400 11.5px/1 Georgia,serif;color:var(--muted);
  font-variant-numeric:tabular-nums}
.sm-chips button:hover em{color:var(--flame-deep)}
.sm-chips button[aria-pressed="true"] em{color:#bdb1a2}

.sm-refine{display:flex;align-items:center;gap:8px}
.sm-refine select{appearance:none;-webkit-appearance:none;
  padding:8px 28px 8px 11px;min-height:34px;background:var(--canvas);
  border:1px solid var(--rule);color:var(--ink);
  font:400 13.5px/1.2 Charter,Georgia,serif;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b6159' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.sm-refine select:focus-visible{outline:2px solid var(--flame-deep);outline-offset:1px}
.sm-clear{background:0;border:0;padding:8px 4px;min-height:34px;cursor:pointer;
  font:600 12.5px/1 "Helvetica Neue",Arial,sans-serif;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px}
.sm-clear:hover{color:var(--flame-deep)}
.sm-count{margin:0 0 0 auto;font:400 13.5px/1.4 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.sm-count b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.sm-reshuffle{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;min-height:34px;
  background:var(--flame-deep);color:#fff;border:0;cursor:pointer;
  font:800 11.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.sm-reshuffle:hover{background:#8d280b}

/* ---------- the wall ----------
   This is the ORIGINAL masonry card, kept as it is on the live site and simply
   translated out of Tailwind utility classes into plain CSS so it can run under
   the editorial layout, which does not ship Tailwind.

   Everything that made the live wall work is still here: rounded cards, the
   varied 3:4 / 1:1 / 4:5 aspect cycle, the image zoom on hover, the gradient
   caption with gold stars, lift-and-shadow on hover, the card fade-in, the red
   video pill with hover-to-preview, and the amber Amazon button on one card in
   four. The only substantive change is colour: the stock purple and grey
   accents are mapped onto this site's palette, because leaving purple hovers
   under an orange-and-ink header is what would actually look broken. */
/* Real column elements, not CSS multi-column.
   `columns` re-balances the whole wall every time more cards are appended:
   measured on this page, 9 of the 12 cards already on screen jumped to a
   different column when the next page arrived. Nothing was loading slowly -
   the content was being pulled out from under itself, and the last column took
   the worst of it. With one element per column a new card is placed in
   whichever column is currently shortest and nothing already on screen ever
   moves again.
   The count lives in a custom property so the breakpoints stay in CSS and the
   script just reads what the stylesheet decided. */
.sm-wall{--cols:4;display:flex;align-items:flex-start;gap:16px;padding:24px 0 10px}
.sm-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
@media(max-width:1100px){.sm-wall{--cols:3}}
@media(max-width:860px){.sm-wall{--cols:2}}
@media(max-width:620px){.sm-wall{--cols:1}}

@keyframes smIn{from{opacity:0;transform:translateY(20px) scale(.95)}
                to{opacity:1;transform:none}}
.sm-card{position:relative;background:var(--surface);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(60,48,34,.06);
  animation:smIn .4s ease-out both;
  transition:transform .3s ease,box-shadow .3s ease}
.sm-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -12px rgba(30,20,10,.22)}
@media(prefers-reduced-motion:reduce){
  .sm-card{animation:none;transition:none}
  .sm-card:hover{transform:none}
}

.sm-shot{display:block;position:relative;overflow:hidden;line-height:0;
  background:var(--sand);text-decoration:none;color:inherit}
.sm-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.sm-card:hover .sm-shot img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.sm-card:hover .sm-shot img{transform:none}}
/* The height cycle that gives the wall its stagger. Flatter than the live
   page's 3:4 / 1:1 / 4:5, because at four columns a 3:4 shot is 424px of
   picture before a word of text and the card ends up nearly twice as tall as
   it is wide. The spread is kept - the stagger is the point - just shifted
   down so more of the wall fits on a screen. */
.sm-a0 .sm-shot{aspect-ratio:4/5}
.sm-a1 .sm-shot{aspect-ratio:1/1}
.sm-a2 .sm-shot{aspect-ratio:5/4}
.sm-vcard .sm-shot{aspect-ratio:16/9}

/* Stronger at the foot than the live gradient, so white type clears 4.5:1 over
   a pale photograph rather than only over a lucky one. */
.sm-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,0) 72%)}

.sm-cap{position:absolute;left:0;right:0;bottom:0;padding:13px;line-height:normal;color:#fff}
.sm-stars{display:inline-flex;align-items:center;gap:1px;vertical-align:middle}
.sm-stars svg{width:13px;height:13px;display:block}
.sm-star-on{color:var(--mustard)}
.sm-star-off{color:rgba(255,255,255,.45)}
.sm-rate{margin-left:6px;font:400 12px/1 "Helvetica Neue",Arial,sans-serif;
  color:#fff;font-variant-numeric:tabular-nums;vertical-align:middle}
.sm-cap h3{margin:6px 0 0;
  font:600 15.5px/1.3 Charter,Georgia,serif;color:#fff;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.sm-card:hover .sm-cap h3{color:var(--mustard)}
.sm-brandline{display:block;margin-top:4px;
  font:700 9.5px/1.2 "Helvetica Neue",Arial,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:#e8e0d6}

/* Badges. The live page runs an orange-to-pink discount pill and a red video
   pill; both are re-cut in palette colours that still read as "deal" and
   "video" without importing two more hues into the site. */
.sm-off{position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:999px;
  background:var(--flame-deep);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);
  font:700 11px/1.3 "Helvetica Neue",Arial,sans-serif;letter-spacing:.03em}
.sm-vpill{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:999px;background:var(--con);color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  font:700 11px/1.3 "Helvetica Neue",Arial,sans-serif}
.sm-vpill svg{width:11px;height:11px}

/* Video card: thumbnail, muted preview on hover, click to open the lightbox. */
.sm-prev{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .3s ease;
  pointer-events:none;border:0}
.sm-prev iframe{width:100%;height:100%;border:0;display:block}
.sm-vcard.on .sm-prev{opacity:1}
.sm-vcard.on .sm-shot img,.sm-vcard.on .sm-vgrad,
.sm-vcard.on .sm-play{opacity:0;transition:opacity .3s ease}
.sm-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);border:0;cursor:pointer;transition:background .3s ease;padding:0}
.sm-vcard:hover .sm-play{background:rgba(0,0,0,.4)}
.sm-play span{display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.94);
  color:var(--flame-deep);padding-left:4px;box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .3s ease}
.sm-vcard:hover .sm-play span{transform:scale(1.1)}
.sm-play:focus-visible{outline:3px solid var(--mustard);outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.sm-vcard:hover .sm-play span{transform:none}}
.sm-hint{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;opacity:0;
  transition:opacity .3s ease;pointer-events:none}
.sm-vcard:hover .sm-hint{opacity:1}
.sm-hint span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:rgba(0,0,0,.78);color:#fff;
  font:500 11.5px/1.4 "Helvetica Neue",Arial,sans-serif}
.sm-hint i{width:7px;height:7px;border-radius:999px;background:#ff6a5a;display:block}

/* The video card's own gradient, which on the live page darkens the foot of
   the thumbnail so the pill and hint sit on something. No text rides here. */
.sm-vgrad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 46%)}

/* ---------- below the picture ---------- */
.sm-below{padding:13px}
.sm-vhead{margin:0 0 9px}
.sm-vrate{display:block;margin:0 0 6px}
.sm-vrate .sm-star-off{color:var(--rule)}
.sm-vrate .sm-rate{color:var(--muted)}
.sm-vhead h3{margin:0;font:600 15.5px/1.3 Charter,Georgia,serif;color:var(--ink)}
/* The clamp lives on the anchor so the anchor is a block and therefore a real
   target. Padding on the TOP only, pulled back by an equal negative margin:
   the box grows past 24px without moving, and with no bottom padding there is
   nowhere for the clamped third line to leak into. */
.sm-vhead h3 a{color:inherit;text-decoration:none;padding-top:6px;margin-top:-6px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.sm-card:hover .sm-vhead h3 a{color:var(--flame-deep)}
.sm-vbrand{display:block;margin-top:4px;
  font:700 9.5px/1.2 "Helvetica Neue",Arial,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
/* Vertical space as margin, never padding: a clamped -webkit-box paints its
   next line inside its own bottom padding. */
.sm-fact{margin:0 0 11px;font:400 12.5px/1.55 "Helvetica Neue",Arial,sans-serif;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.sm-prices{display:flex;align-items:baseline;gap:8px;margin:0 0 11px}
.sm-price{font:700 19px/1 Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.sm-was{font:400 12.5px/1 Georgia,serif;color:var(--muted);text-decoration:line-through}
.sm-save{margin-left:auto;padding:3px 8px;border-radius:999px;background:#e2efe8;color:#155c3a;
  font:700 10.5px/1.35 "Helvetica Neue",Arial,sans-serif}

.sm-acts{display:flex;gap:8px}
/* Amazon on one card in four. The live page's amber-to-orange gradient already
   sits inside this palette - mustard into flame is the same ramp - so it keeps
   its shape, with ink type on it rather than stock near-black grey. */
.sm-buy{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;min-height:36px;border-radius:10px;text-decoration:none;
  background:linear-gradient(to right,var(--mustard),#ef8a1c);color:var(--ink);
  font:700 12.5px/1 "Helvetica Neue",Arial,sans-serif;
  transition:filter .25s ease,box-shadow .25s ease}
.sm-buy:hover{filter:brightness(.94);box-shadow:0 4px 14px rgba(60,48,34,.18)}
.sm-buy svg{width:14px;height:14px;flex:none}
.sm-read{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;min-height:36px;border-radius:10px;text-decoration:none;
  background:var(--ground);color:var(--body);
  font:600 12.5px/1 "Helvetica Neue",Arial,sans-serif;
  transition:background .25s ease,color .25s ease}
.sm-read:hover{background:var(--cream);color:var(--flame-deep)}
.sm-read svg{width:15px;height:15px;flex:none}
/* When Amazon takes the row the review link shrinks to the arrow square the
   live page uses - kept at 44px so it still clears the target minimum. */
.sm-read--icon{flex:0 0 auto;width:38px;padding:0}

/* ---------- states ----------
   Skeletons shaped like the thing that is coming, so the wall does not jump
   when it arrives. Varied heights, because the real cards have them. */
.sm-skel{background:var(--surface);border:1px solid var(--hairline);padding:0 0 14px}
.sm-skel i{display:block;background:var(--sand)}
.sm-skel i:first-child{height:190px}
.sm-skel em{display:block;height:11px;margin:13px 15px 0;background:var(--sand)}
.sm-skel em:nth-of-type(2){width:72%}
.sm-skel em:nth-of-type(3){width:44%}
.sm-col>.sm-skel:nth-child(3n) i:first-child{height:250px}
.sm-col>.sm-skel:nth-child(3n+2) i:first-child{height:150px}
@media(prefers-reduced-motion:no-preference){
  .sm-skel i,.sm-skel em{animation:smpulse 1.4s ease-in-out infinite}
  @keyframes smpulse{0%,100%{opacity:1}50%{opacity:.55}}
}

.sm-end{margin:14px 0 0;padding:34px 0 8px;border-top:1px solid var(--rule);text-align:center}
.sm-end h2{margin:0 0 10px;
  font:400 26px/1.2 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;color:var(--ink)}
.sm-end p{margin:0 auto 20px;max-width:52ch;font:400 16.5px/1.6 Charter,Georgia,serif;color:var(--body)}
.sm-end-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sm-end-links a,.sm-end-links button{padding:11px 18px;background:var(--surface);border:1px solid var(--rule);
  text-decoration:none;font:700 12px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;color:var(--body);cursor:pointer}
.sm-end-links a:hover,.sm-end-links button:hover{border-color:var(--flame-deep);color:var(--flame-deep)}

.sm-empty{padding:56px 0;text-align:center}
.sm-empty h2{margin:0 0 10px;font:400 25px/1.2 "Iowan Old Style",Charter,Georgia,serif;color:var(--ink)}
.sm-empty p{margin:0 0 18px;font:400 16.5px/1.6 Charter,Georgia,serif;color:var(--body)}

/* ---------- video lightbox ---------- */
.sm-modal{position:fixed;inset:0;z-index:90;display:none;background:rgba(12,9,7,.86);padding:20px}
.sm-modal.on{display:flex;align-items:center;justify-content:center}
.sm-modal-in{position:relative;width:100%;max-width:940px;background:#000;
  border:1px solid rgba(255,255,255,.16)}
.sm-modal iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.sm-close{position:absolute;right:0;top:-44px;min-width:36px;min-height:36px;
  background:0;border:0;color:#fff;cursor:pointer;font:400 24px/1 Georgia,serif}
.sm-close:hover{color:var(--flame)}

@media(max-width:860px){
  .sm-head{padding:30px 0 28px}
  .sm-head-in{grid-template-columns:1fr;gap:22px}
  .sm-count{margin-left:0;order:9;width:100%}
  .sm-bar-in{gap:9px 12px}
}

/* ---------- phones ----------
   Found 24 Sept 2026: at 375px the chips (flex-wrap:wrap) and the two selects
   each fell onto their own stack of rows - seven category chips alone ran to
   four rows before a single product card was visible. Nothing here is a
   redesign; the bar keeps its three groups (chips, refine, count+shuffle), each
   is just given exactly one row instead of as many as it needs. Chips and the
   refine selects scroll sideways rather than wrap - the standard mobile filter
   pattern - so the whole control strip holds to about three compact rows
   regardless of how many categories the site grows into. The hero is trimmed
   for the same reason: this band is an invitation, not the destination. */
@media(max-width:640px){
  .sm-head{padding:20px 0 18px}
  .sm-head h1{font-size:clamp(24px,7.5vw,30px)}
  /* Two lines is enough of the pitch on a phone; a third just pushes the
     button that actually does something further down the screen. */
  .sm-lede{margin-top:10px;font-size:14.5px;line-height:1.5;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .sm-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
  .sm-deal{padding:13px 20px}

  /* wrap, not nowrap: chips/refine/count are each a flex:1 1 100% group meant
     to fall onto its OWN line - nowrap on the parent was fighting that and
     squeezing the price select and the count onto one cramped row instead.
     padding-top/bottom only: .sm-bar-in is the same element as .wrap (the
     markup is <div class="wrap sm-bar-in">), so a plain `padding:9px 0` here
     clobbered .wrap's own left/right padding down to 0 and let the chip strip
     overshoot the real viewport edge. */
  .sm-bar-in{flex-wrap:wrap;align-items:flex-start;padding-top:9px;padding-bottom:9px;gap:7px 0}

  /* Row 1: categories. One row, scrolling, never wrapping. -webkit-mask fades
     the trailing edge so a chip cut off mid-word reads as "more this way",
     not as a layout bug. */
  /* -28px bleeds to the screen edge against .wrap's own padding (editorial.css):
     28px above 560px, 20px at and below it - matched here at both steps rather
     than guessed once, or the strip stops 8px short of the edge on a real phone. */
  .sm-chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -28px;padding:0 28px 3px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .sm-chips::-webkit-scrollbar{display:none}
  .sm-chips button{flex:none}

  /* Row 2: the two refine selects, same scrolling treatment, small enough that
     it rarely needs to actually scroll but never forced to wrap either. */
  .sm-refine{flex:1 1 100%;order:2;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:4px -28px 0;padding:0 28px 3px}
  .sm-refine::-webkit-scrollbar{display:none}
  .sm-refine select,.sm-clear{flex:none}

  /* Row 3: the one number worth having, and the button that does something,
     sharing a line instead of each claiming one of their own. */
  .sm-count{order:3;margin:2px 0 0;width:auto;flex:1 1 auto}
  .sm-reshuffle{order:4;flex:none}
}
@media(max-width:560px){
  .sm-chips{margin:0 -20px;padding:0 20px 3px}
  .sm-refine{margin:4px -20px 0;padding:0 20px 3px}
}