/* ==========================================================================
   REDESIGN SURFACE B: shop, product quick view, cart presentation (2026-10-30)
   --------------------------------------------------------------------------
   Owner: surface B (see site-redesign/DESIGN-PLAN.md). Loads AFTER styles.css, sitev2.css, shopv2.css and
   css/redesign-base.css. js/products.js also injects this file on any page that opens the quick view, so the buy
   panel looks the same on home, custom and the /p/ pages.
   Rules: tokens come from redesign-base.css (--r-*), each with a fallback so this file still renders on a page
   that does not link the base file. Classes are .rs-* (surface B). Presentation only: nothing here changes a
   price, a total or a checkout call.
   ========================================================================== */

/* ---------- shared bits ---------- */
.rs-hide{ display:none !important; }
.rs-link{
  display:inline-flex; align-items:center; min-height:var(--r-tap,44px); padding:0 var(--r-s2,8px);
  color:var(--r-action,#e0c074); font-weight:600; text-decoration:underline; text-underline-offset:3px;
}
.rs-link:focus-visible, .rs-showall:focus-visible, .rs-sb-buy:focus-visible, .rs-upload:focus-within{
  outline:3px solid var(--r-focus,#ffd98a); outline-offset:2px;
}

/* ==========================================================================
   SHOP PAGE (change 9)
   ========================================================================== */
.rs-hero-trust{ margin-top:var(--r-s3,12px); font-size:var(--r-fs-sm,.875rem); color:var(--r-text-2,#b7bcc4); }

/* search: a full 48px field (the category chips below are the sticky rail, from shopv2.css) */
.rs-searchbar .shop-search{ min-height:var(--r-tap-primary,48px); font-size:var(--r-fs-md,1rem); }

/* Chrome Ruler slot at the top of the grid (the component itself is .r-ruler from redesign-base.css) */
.rs-ruler-wrap{ margin:var(--r-s4,16px) 0 0; }
.rs-ruler-more{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--r-s4,16px); margin:var(--r-s1,4px) 0 0; font-size:var(--r-fs-sm,.875rem); }

/* category chips: edge fade + right-arrow hint so a phone buyer can tell the rail scrolls */
.rs-shop .cat-nav{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);
}
.rs-shop .cat-nav a, .rs-shop .cat-nav button{ min-height:var(--r-tap,44px); }

/* first 12 per category, then "Show all (N)" (js/shopv2.js clipGrids) */
.rs-clip > .rs-extra{ display:none !important; }
#shop-sections.rs-q .rs-clip > .rs-extra{ display:revert !important; }
#shop-sections.rs-q .rs-showall{ display:none; }
.rs-showall{
  display:flex; margin:var(--r-s4,16px) auto 0; min-height:var(--r-tap-primary,48px); padding:0 var(--r-s5,24px);
  border-radius:var(--r-rad-pill,999px); font-weight:600;
}

/* cards: one calm image box, real alt text, no layout jump (img has width/height attributes) */
#shop-sections .card-media img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
#shop-sections .card-foot .btn{ min-height:var(--r-tap,44px); }

/* ==========================================================================
   QUICK VIEW (changes 1, 2, 3, 7, 10)
   ========================================================================== */

/* numbered step headings (js/qvpicker.js numberSteps) */
.qv-body .rs-step, .qv-body .qvp-lab{
  font:700 var(--r-fs-sm,.875rem)/1.2 var(--r-font-body,Inter,system-ui,sans-serif);
  letter-spacing:.02em; text-transform:none; color:var(--r-ink,#fff); margin:var(--r-s5,24px) 0 var(--r-s2,8px);
}
.qv-body .qvp{ margin:0; }

/* ---- step 1: size as a Chrome Ruler (same look as .r-ruler, built from the picker chips) ---- */
.rs-qruler .qvp-chips{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--r-bg-alt,#131418); border-radius:var(--r-rad-sm,6px); overflow:hidden;
}
.rs-qruler .qvp-chips::before, .rs-qruler .qvp-chips::after{
  content:""; position:absolute; left:0; right:0; height:7px; pointer-events:none; z-index:1;
  background:
    repeating-linear-gradient(90deg, rgba(220,226,234,.85) 0 1px, transparent 1px 10px) top/100% 6px no-repeat,
    var(--r-chrome, linear-gradient(180deg,#f6f8fa 0%,#c4cad3 42%,#9aa1ac 58%,#e8ebef 100%)) top/100% 1px no-repeat;
}
.rs-qruler .qvp-chips::before{ top:0; }
.rs-qruler .qvp-chips::after{ bottom:0; transform:scaleY(-1); }
.rs-qruler .qvp-chip{
  position:relative; min-height:64px; padding:20px 2px 10px; border:0; border-left:1px solid var(--r-line,rgba(255,255,255,.12));
  border-radius:0; background:transparent; color:var(--r-ink,#fff); transform:none !important;
}
.rs-qruler .qvp-chip:first-child{ border-left:0; }
.rs-qruler .qvp-chip .qvp-t{ font:500 var(--r-fs-sm,.875rem)/1.2 var(--r-font-body,Inter,sans-serif); color:var(--r-text-2,#b7bcc4); white-space:nowrap; }
.rs-qruler .qvp-chip .qvp-p{ font:700 var(--r-fs-lg,1.125rem)/1.15 var(--r-font-body,Inter,sans-serif); color:var(--r-ink,#fff); font-variant-numeric:tabular-nums; }
.rs-qruler .qvp-chip.on{ background:rgba(224,192,116,.14); box-shadow:inset 0 0 0 2px var(--r-action,#e0c074); color:var(--r-ink,#fff); }
.rs-qruler .qvp-chip.on .qvp-t{ color:var(--r-ink,#fff); }
.rs-qruler .qvp-chip.on .qvp-p{ color:var(--r-action,#e0c074); }
.rs-qruler .rs-qruler-quote{
  grid-column:1 / -1; flex-direction:row; gap:var(--r-s2,8px); min-height:var(--r-tap-primary,48px); padding:var(--r-s2,8px);
  border-left:0; border-top:1px solid var(--r-line,rgba(255,255,255,.12)); text-decoration:none;
}
.rs-qruler .rs-qruler-quote .qvp-p{ font-size:var(--r-fs-sm,.875rem); color:var(--r-action,#e0c074); font-weight:600; }
.rs-qr-tag{
  position:absolute; top:7px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:700 10px/1 var(--r-font-body,Inter,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:var(--r-action,#e0c074);
}
.rs-qr-cap{ margin:var(--r-s2,8px) 0 0; font-size:var(--r-fs-sm,.875rem); color:var(--r-text-2,#b7bcc4); }
/* the exact-inches box stays (source of truth), quiet and inline */
.qv-body .qvp-exact{ display:flex; align-items:center; gap:var(--r-s3,12px); margin-top:var(--r-s3,12px); }
.qv-body .qvp-exact label{ margin:0 !important; }
.qv-body .qvp-exact input{ max-width:110px; min-height:var(--r-tap,44px); font-size:var(--r-fs-md,1rem); }

/* ---- step 2: layer chips (Double carries "Most popular") ---- */
[data-qvp-layer] .qvp-chips{ grid-template-columns:repeat(3,1fr); }
[data-qvp-layer] .qvp-chip{ position:relative; min-height:64px; padding-top:20px; }
.rs-qr-sub{ display:block; margin-top:2px; font-size:var(--r-fs-xs,.75rem); font-weight:500; opacity:.8; }
[data-qvp-layer] .qvp-chip.on .rs-qr-tag{ color:#5a4515; }

/* ---- step 3: labeled color swatches (change 7) ---- */
.qv-body .swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:var(--r-s2,8px); }
.qv-body .swatch.rs-sw{
  width:auto !important; height:auto !important; min-height:72px; border-radius:var(--r-rad-sm,6px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px;
  padding:8px 4px; background:transparent !important; border:1px solid var(--r-line,rgba(255,255,255,.12));
  line-height:1.15; color:var(--r-text-2,#b7bcc4); transform:none !important;
}
.qv-body .swatch.rs-sw .rs-sw-dot{
  width:30px; height:30px; border-radius:50%; flex:none; border:1px solid rgba(255,255,255,.32);
}
.qv-body .swatch.rs-sw .rs-sw-name{ font:500 var(--r-fs-xs,.75rem)/1.2 var(--r-font-body,Inter,sans-serif); text-align:center; }
.qv-body .swatch.rs-sw.sel{
  border-color:var(--r-action,#e0c074); background:rgba(224,192,116,.1) !important;
  box-shadow:inset 0 0 0 1px var(--r-action,#e0c074) !important; color:var(--r-ink,#fff);
}
.qv-body .swatch.rs-sw.low::after{ top:6px; right:6px; }
.qv-body .rs-colornote{ font-size:var(--r-fs-sm,.875rem); color:var(--r-text-2,#b7bcc4); }

/* ---- step 4: styled upload (change 10) ---- */
.rs-opt{ color:var(--r-text-3,#9aa0a8); font-weight:400; }
.rs-upload{ position:relative; display:block; }
.rs-upload .rs-file{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2; font-size:16px;
}
.rs-upload-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--r-s2,8px); min-height:var(--r-tap-primary,48px);
  border:1px dashed rgba(224,192,116,.55); border-radius:var(--r-rad-md,12px); background:rgba(224,192,116,.05);
  color:var(--r-ink,#fff); font-weight:600;
}
.rs-upload:hover .rs-upload-btn{ border-color:var(--r-action,#e0c074); }
.rs-upload-ic{ font-size:1.25rem; line-height:1; color:var(--r-action,#e0c074); }
.rs-upload-help{ margin:var(--r-s2,8px) 0 0; font-size:var(--r-fs-sm,.875rem); color:var(--r-text-2,#b7bcc4); }
.rs-upload-legal{ margin:var(--r-s1,4px) 0 0; font-size:var(--r-fs-xs,.75rem); color:var(--r-text-3,#9aa0a8); }
.rs-upload-legal a{ display:inline-flex; align-items:center; min-height:var(--r-tap,44px); color:var(--r-action,#e0c074); }

/* ---- shipping line + the one details disclosure ---- */
.rs-shipline{ margin:var(--r-s3,12px) 0 0; font-size:var(--r-fs-sm,.875rem); line-height:1.5; color:var(--r-text-2,#b7bcc4); text-align:center; }
.rs-shipline--audio{ color:var(--r-text,#e4e6ea); }
.rs-more{
  margin:var(--r-s4,16px) 0 0; border:1px solid var(--r-line,rgba(255,255,255,.12)); border-radius:var(--r-rad-md,12px);
  background:rgba(255,255,255,.02);
}
.rs-more > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  min-height:var(--r-tap-primary,48px); padding:0 var(--r-s4,16px); font-weight:600; color:var(--r-ink,#fff);
}
.rs-more > summary::-webkit-details-marker{ display:none; }
.rs-more > summary::after{ content:"+"; color:var(--r-action,#e0c074); font-size:1.25rem; }
.rs-more[open] > summary::after{ content:"\2212"; }
.rs-more > summary:focus-visible{ outline:3px solid var(--r-focus,#ffd98a); outline-offset:2px; border-radius:var(--r-rad-md,12px); }
.rs-more-body{ padding:0 var(--r-s4,16px) var(--r-s4,16px); }
.rs-more-body > :first-child{ margin-top:var(--r-s2,8px) !important; }
.rs-more-body .qv-sizeguide{ margin-top:var(--r-s3,12px); }
.rs-taxline{ color:var(--r-text-2,#b7bcc4); }

/* ---- the sticky buy bar: ONE row (change 3, fix round) ----
   The bar is the REAL .qv-actions row (styles.css keeps it position:sticky at the bottom of the .qv scroller on phones
   and desktop; its history note explains why a separate proxy bar cannot work, and why .qv-sticky stays display:none).
   products.js marks the buyable row .rs-bar: live total + "Buy now" text link on the left, "Add to cart" on the right. */
.qv-actions.rs-bar{
  display:flex; align-items:center; gap:var(--r-s3,12px);
}
.rs-sb-left{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; flex:none; }
.rs-sb-price{ font:700 var(--r-fs-xl,1.375rem)/1.1 var(--r-font-body,Inter,sans-serif); color:var(--r-ink,#fff); font-variant-numeric:tabular-nums; }
.rs-sb-buy{
  position:relative; min-height:28px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--r-action,#e0c074); font:600 var(--r-fs-sm,.875rem)/1.2 var(--r-font-body,Inter,sans-serif);
  text-decoration:underline; text-underline-offset:3px;
}
/* the 28px text link sits inside a 44px hit area */
.rs-sb-buy::before{ content:""; position:absolute; inset:-8px -6px; }
.qv-actions.rs-bar .rs-sb-add{ flex:1; width:auto; margin:0; min-height:var(--r-tap-primary,48px); justify-content:center; }
.rs-sb-buy:disabled, .rs-sb-add:disabled{ opacity:.5; cursor:not-allowed; }
/* the remake promise and first-order line now sit under the bar, as plain lines */
.qv-body .qv-actions.rs-bar + .qv-guarantee{ margin-top:var(--r-s3,12px) !important; }
@media (max-width:680px){
  .qv-actions.rs-bar{
    min-height:64px; margin-top:var(--r-s4,16px);
    padding:var(--r-s2,8px) var(--r-s4,16px) calc(var(--r-s2,8px) + env(safe-area-inset-bottom,0px));
    background:var(--surface,#101114);
  }
  .qv-actions.rs-bar .btn{ min-height:var(--r-tap-primary,48px); }
  /* the on-screen keyboard is up: the bar steps aside so the field stays visible */
  .qv-actions.rs-bar.rs-kb{ display:none; }
}
/* one-variant products (sunroof $69, rack $475): the single flat-price line */
.qv-body .rs-fixedline{ margin:var(--r-s2,8px) 0 0; color:var(--r-text,#e4e6ea); font-weight:600; }

/* ---- phone height budget (fix round): a standard decal sheet at 375px stays under 1,600px ----
   Same controls, same order, tighter spacing: shorter photo, 2-line blurb, compact ruler and layer chips, a 6-across
   labeled swatch grid, inline quantity, a slim upload row and a one-row "Goes great with". Nothing is removed. */
@media (max-width:680px){
  .qv-media img{ max-height:20vh !important; }
  .qv-body{ padding-top:var(--r-s4,16px) !important; }
  .qv-body h3{ margin-bottom:var(--r-s1,4px); }
  .qv-body .qv-blurb{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin:0 0 var(--r-s2,8px); font-size:var(--r-fs-sm,.875rem); line-height:1.45;
  }
  .qv-body .qv-trust{ margin-bottom:var(--r-s2,8px); }
  .qv-body .qv-thumbs{ margin-bottom:0; }
  .qv-body .qv-thumbs .qv-thumb{ width:44px; height:44px; }
  .qv-body .qv-thumbs .qv-thumb img{ width:100%; height:100%; object-fit:cover; }
  .qv-body .qv-field{ margin-bottom:var(--r-s3,12px); }
  .qv-body .rs-step, .qv-body .qvp-lab{ margin:var(--r-s3,12px) 0 var(--r-s2,8px); }

  /* step 1 + 2: compact ruler and layer chips (still 44px+ tap targets) */
  .rs-qruler .qvp-chip{ min-height:54px; padding:17px 2px 6px; }
  .rs-qruler .rs-qruler-quote{ min-height:var(--r-tap,44px); padding:0 var(--r-s2,8px); }
  .rs-qr-tag{ top:5px; font-size:9px; }
  .rs-qr-cap{ margin-top:var(--r-s1,4px); font-size:var(--r-fs-xs,.75rem); }
  .qv-body .qvp-exact{ margin:var(--r-s2,8px) 0 0; }
  .qv-body .qvp-exact label{ font-size:var(--r-fs-xs,.75rem); }
  [data-qvp-layer] .qvp-chip{ min-height:54px; padding-top:16px; padding-bottom:4px; }
  /* the size readout repeats the ruler and the bar price: kept for screen readers, not drawn */
  .qv-body .qv-live{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; border:0; }

  /* step 3: 6-across labeled swatches */
  .qv-body .qv-field-head{ margin-bottom:var(--r-s1,4px); }
  .qv-body .swatches{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--r-s1,4px); }
  .qv-body .swatch.rs-sw{ min-height:var(--r-tap,44px); padding:5px 1px 4px; gap:3px; }
  .qv-body .swatch.rs-sw .rs-sw-dot{ width:22px; height:22px; }
  .qv-body .swatch.rs-sw .rs-sw-name{
    font-size:10px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .qv-body .rs-colornote{ margin-top:var(--r-s1,4px) !important; font-size:var(--r-fs-xs,.75rem); line-height:1.4; }

  /* step 4: text box hint and a slim upload row */
  .qv-body .qv-field > .qv-note{ font-size:var(--r-fs-xs,.75rem); margin-top:var(--r-s1,4px); }
  .rs-upfield > label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .rs-upload-help, .rs-upload-legal{ display:inline; margin:0; font-size:var(--r-fs-xs,.75rem); }
  /* fix round 2: a full 44x44 hit box that still sits inline (negative margins keep the line short) */
  .rs-upload-legal a{ display:inline-block; box-sizing:border-box; min-height:44px; min-width:44px; line-height:44px; padding:0 6px; margin:-14px -6px; vertical-align:middle; text-align:center; }
  .qv-body [data-logo-preview]{ margin-top:0 !important; }

  /* quantity on one line */
  .qv-body .qv-field:has(> [data-qty]){ display:flex; align-items:center; gap:var(--r-s3,12px); }
  .qv-body .qv-field:has(> [data-qty]) > label{ margin:0; }

  /* top of the sheet: small tag, and on a buyable product the title price steps aside (the sticky bar shows the live
     total the whole time, so the same number is never on screen twice) */
  .qv-body > .card-tag{ margin-bottom:var(--r-s2,8px) !important; padding:3px 8px; font-size:10px; }
  .qv-body:has(.qv-actions.rs-bar) > .qv-price{ display:none; }
  .qv-body .qv-trust{ gap:.3rem .8rem; }
  /* the ruler ends with its "Bigger?" segment on the same row */
  .rs-qruler .qvp-chips{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .rs-qruler .qvp-chip .qvp-t{ font-size:var(--r-fs-xs,.75rem); }
  .rs-qruler .qvp-chip .qvp-p{ font-size:var(--r-fs-md,1rem); }
  .rs-qruler .rs-qruler-quote{ grid-column:auto; flex-direction:column; gap:0; min-height:54px; padding:6px 2px; border-top:0; border-left:1px solid var(--r-line,rgba(255,255,255,.12)); text-align:center; }
  .rs-qruler .rs-qruler-quote .qvp-p{ font-size:var(--r-fs-xs,.75rem); line-height:1.2; }
  .qv-body .qvp-exact{ margin:var(--r-s1,4px) 0 0 !important; }
  [data-qvp-layer] .qvp-chip{ min-height:50px; padding-top:14px; padding-bottom:2px; }
  /* step 4 names the field, so its own label is kept for screen readers only */
  .qv-body [data-rs-step="design"] + .qv-field > label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .rs-upload-help{ display:inline; }
  .rs-upload-help::after{ content:" "; }
  .qv-body .rs-upfield{ line-height:1.4; }
  .qv-body .rs-upload{ margin-bottom:var(--r-s1,4px); }
  .qv-body [data-logo-preview]:empty{ display:none; }

  /* step 3: the selected color name sits on the step heading's line instead of a second "Color" heading. Single-color
     products only; double and triple keep their per-layer headings. The matte note is said by the swatch labels. */
  .qv-body [data-colors-area]{ position:relative; }
  .qv-body [data-colors-area] > .qv-field-head:has(+ [data-role="color"]){ position:absolute; right:0; top:-34px; margin:0; min-height:0; }
  .qv-body [data-colors-area] > .qv-field-head:has(+ [data-role="color"]) > label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .qv-body [data-role="color"] + .rs-colornote{ display:none; }
  /* the trust strip stays on one line (checkout says Square again at the pay step) */
  .qv-body .qv-trust > span:last-child:not(:first-child){ display:none; }
  /* the club picker's first option already says "Pick your club"; its label is kept for screen readers only */
  .qv-body .qv-field:has(> [data-club]) > label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  /* the "bigger? get a quote" callout, tighter */
  .qv-body .qv-quote-callout{ margin:var(--r-s2,8px) 0 !important; padding:var(--r-s2,8px) var(--r-s3,12px) !important; font-size:var(--r-fs-xs,.75rem) !important; line-height:1.45 !important; }
  /* the exact-inches box shares a line with the ruler caption (same input, same handlers; the ruler wrapper becomes
     display:contents so its heading, chips and caption join the row's grid). Its label stays for screen readers. */
  .qv-body .qv-row:has(> .rs-qruler){ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--r-s3,12px); align-items:center; gap:0 var(--r-s3,12px); }
  .qv-body .qv-row:has(> .rs-qruler) > *{ grid-column:1 / -1; }
  .qv-body .qv-row > .rs-qruler{ display:contents; }
  .qv-body .qv-row > .rs-qruler > *{ grid-column:1 / -1; }
  .qv-body .qv-row > .rs-qruler > .rs-qr-cap{ grid-column:1; margin:var(--r-s1,4px) 0 0; }
  .qv-body .qv-row > .qvp-exact{ grid-column:2; margin:var(--r-s1,4px) 0 0 !important; gap:var(--r-s1,4px); }
  .qv-body .qv-row > .qvp-exact > label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .qv-body .qv-row > .qvp-exact input{ width:72px; }
  .qv-body .qv-row > .qvp-exact::after{ content:"in"; font-size:var(--r-fs-sm,.875rem); color:var(--r-text-2,#b7bcc4); }
  [data-qvp-layer] .rs-qr-sub{ display:none; }
  /* "Goes great with": one compact row of two */
  .qv-body .qv-xsell{ margin-top:var(--r-s4,16px) !important; padding-top:var(--r-s3,12px) !important; }
  .qv-body .qv-xsell .qv-xs-card{ flex-direction:row !important; align-items:center; gap:var(--r-s2,8px) !important; padding:6px !important; }
  .qv-body .qv-xsell .qv-xs-card img{ width:44px !important; height:44px; aspect-ratio:1/1 !important; flex:none; }
  .qv-body .qv-xsell .qv-xs-card > span{ font-size:var(--r-fs-xs,.75rem) !important; }
  .qv-body .qv-xsell .qv-xs-card{ display:grid !important; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:var(--r-s2,8px); row-gap:2px; }
  .qv-body .qv-xsell .qv-xs-card img{ grid-row:1 / span 2; }
}

@media (prefers-reduced-motion: reduce){
  .rs-qruler .qvp-chip, .qv-body .swatch.rs-sw, .rs-showall, .rs-upload-btn{ transition:none !important; }
}