/* Vista: the Windows Vista "Aero" skin for the Vista style. Linked by templates/base.html on Vista's own pages (body
   .theme-vista) and on the style listings (its tile and New flag) -- never on another style's page. It sits outside
   style.css, so the OS's launch:vista block there (re-written on every relaunch or re-theme) never touches it; the
   tokens here simply win because this file loads later. Gradients and inline SVG only, no image files.
   Aurora wallpaper, black-glass taskbar, glass windows with a caption strip, glossy Aero buttons, Segoe UI. */

.theme-vista {
  --vsans: "Segoe UI", "Segoe UI Variable Text", Selawik, "Frutiger", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --aero-deep: #1c5a9c; --aero: #3b8edb; --aero-sky: #7fc4f5; --black-glass: #0b1220; --vista-green: #5fd24a;
  --bg: #020611; --bg2: #04122a; --panel: #0b1a31; --panel-2: #10233f;
  --white: #ffffff; --text: #e2ecf8; --muted: #afc3db;
  --hair: rgba(127, 196, 245, .16); --hair-2: rgba(127, 196, 245, .34);
  --accent: #3b8edb; --accent-2: #7fc4f5; --accent-3: #1c5a9c;
  --glow: rgba(127, 196, 245, .55); --glow-soft: rgba(59, 142, 219, .22);
  --sans: var(--vsans); --display: var(--vsans);
  --radius: 10px; --radius-s: 6px;
  /* glass: tint, blur, the 1px light inner border and the soft outer glow */
  --vg-tint: rgba(8, 20, 40, .7);
  --vg-blur: blur(18px) saturate(1.6);
  --vg-sheen: linear-gradient(180deg, rgba(255, 255, 255, .11) 0, rgba(255, 255, 255, .035) 34%, rgba(255, 255, 255, 0) 60%);
  --vg-streak: linear-gradient(112deg, rgba(255, 255, 255, 0) 0 22%, rgba(255, 255, 255, .045) 22% 34%, rgba(255, 255, 255, 0) 34% 40%, rgba(255, 255, 255, .03) 40% 44%, rgba(255, 255, 255, 0) 44%);
  --vg-edge: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .38);
  --vg-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .5), 0 0 34px rgba(59, 142, 219, .16);
}
@media (prefers-reduced-transparency: reduce) {
  .theme-vista { --vg-tint: #0b1a31; --vg-blur: none; --vg-streak: linear-gradient(transparent, transparent); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-vista { --vg-tint: rgba(9, 22, 42, .94); }
}

/* ---------- the page: Aurora wallpaper, Segoe UI ---------- */
body.theme-vista { background-color: var(--bg); background-image: none; font-family: var(--vsans); }
body.theme-vista::before { opacity: .03; }   /* the brand's film grain, barely: Aero is clean glass */
body.theme-vista::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* the swooshes: thin bright rims of huge ellipses, like Vista's Aurora */
    radial-gradient(135% 75% at -8% 112%, transparent 57%, rgba(95, 210, 74, .12) 60.3%, rgba(160, 255, 200, .34) 61.9%, rgba(255, 255, 255, .3) 62.4%, rgba(60, 200, 190, .2) 63.6%, rgba(40, 150, 200, .06) 66%, transparent 70%),
    radial-gradient(110% 60% at 40% 118%, transparent 50%, rgba(95, 210, 74, .07) 58%, rgba(60, 210, 190, .12) 63%, transparent 72%),
    radial-gradient(150% 82% at 2% 124%, transparent 59%, rgba(40, 200, 180, .12) 62%, rgba(140, 240, 230, .22) 63.4%, rgba(40, 170, 200, .10) 65%, transparent 70%),
    radial-gradient(120% 90% at 118% 118%, transparent 54%, rgba(59, 142, 219, .12) 58%, rgba(127, 196, 245, .30) 60.2%, rgba(230, 248, 255, .24) 60.6%, rgba(59, 142, 219, .14) 62%, transparent 67%),
    radial-gradient(160% 70% at 60% 140%, transparent 57%, rgba(127, 196, 245, .14) 60%, rgba(200, 240, 255, .18) 60.8%, transparent 64%),
    /* the light behind them */
    radial-gradient(55% 45% at 12% 92%, rgba(95, 210, 74, .30), transparent 70%),
    radial-gradient(45% 40% at 40% 100%, rgba(30, 190, 175, .26), transparent 70%),
    radial-gradient(65% 55% at 92% 88%, rgba(28, 90, 156, .62), transparent 72%),
    radial-gradient(80% 50% at 50% -12%, rgba(59, 142, 219, .26), transparent 66%),
    linear-gradient(180deg, #020611 0%, #03102a 52%, #062048 100%);
}
body.theme-vista ::selection { background: var(--aero); color: #fff; }

body.theme-vista :focus-visible { outline: 2px solid var(--aero-sky); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 4px rgba(59, 142, 219, .38), 0 0 18px rgba(127, 196, 245, .7); }

/* type: Segoe UI everywhere; light, airy display sizes; no italics */
body.theme-vista :is(h1, h2, h3, .price, .tile-name, .mini-name, .cart-price, .deal-title, .deal-kicker, .pop h2) {
  font-family: var(--vsans); font-style: normal; font-stretch: normal; letter-spacing: -.01em;
}
body.theme-vista h1 { font-weight: 300; letter-spacing: -.025em; text-shadow: 0 0 30px rgba(127, 196, 245, .35); }
body.theme-vista h2 { font-weight: 300; }
body.theme-vista :is(h1, h2) em {
  font-style: normal; color: #fff; text-shadow: none;
  background: linear-gradient(180deg, #ffffff 0%, #e6f4ff 46%, #9fd6fb 54%, #c9ecff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(127, 196, 245, .55));
}
body.theme-vista .price { font-weight: 600; text-shadow: 0 0 18px rgba(127, 196, 245, .35); }
body.theme-vista :is(.kicker, .fine, .lede) { letter-spacing: 0; }

/* ---------- taskbar: the header is a full-width black glass bar ---------- */
body.theme-vista header.top {
  border-image: linear-gradient(180deg, rgba(255, 255, 255, .22) 0 1px, rgba(38, 48, 66, .9) 1px, rgba(20, 27, 40, .92) 50%, rgba(6, 9, 16, .95) 50%, rgba(3, 6, 12, .97) calc(100% - 2px), #000 calc(100% - 2px) calc(100% - 1px), rgba(127, 196, 245, .4) calc(100% - 1px)) fill 0 / 0 / 0 100vw;
  padding-top: 14px; padding-bottom: 14px;
}
/* the Start orb behind the mark: a glass sphere with the green and blue glow */
body.theme-vista .logo { position: relative; isolation: isolate; }
body.theme-vista .logo::before, body.theme-vista .logo::after { content: ""; position: absolute; left: -5px; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; pointer-events: none; }
body.theme-vista .logo::before {
  z-index: -1;
  background: radial-gradient(circle at 50% 104%, rgba(95, 210, 74, .9), rgba(95, 210, 74, 0) 52%), radial-gradient(circle at 50% 46%, #1f63ad 0%, #0c2f5c 52%, #030b18 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(127, 196, 245, .55), 0 0 16px rgba(95, 210, 74, .35), 0 0 26px rgba(59, 142, 219, .4);
}
body.theme-vista .logo::after { z-index: 1; background: radial-gradient(ellipse 72% 46% at 50% 24%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 72%); }
body.theme-vista .logo img.mark { position: relative; filter: drop-shadow(0 0 6px rgba(95, 210, 74, .55)); }
body.theme-vista .logo:hover { filter: none; }
body.theme-vista .logo:hover::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(127, 196, 245, .8), 0 0 22px rgba(95, 210, 74, .6), 0 0 38px rgba(127, 196, 245, .6); }
body.theme-vista .logo img.wordmark-img { margin-left: 10px; }

/* taskbar buttons */
body.theme-vista header nav.nav-desktop { gap: 4px; }
body.theme-vista header nav.nav-desktop a { padding: 7px 12px; border-radius: 4px; border: 1px solid transparent; color: #d5e2f2; font-weight: 400; text-shadow: none; }
body.theme-vista header nav.nav-desktop a:hover { color: #fff; border-color: rgba(0, 0, 0, .6); background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 51%, rgba(127, 196, 245, .2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 12px rgba(127, 196, 245, .35); }
body.theme-vista header nav.nav-desktop a.on { color: #fff; border-color: rgba(0, 0, 0, .7); background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(59, 142, 219, .22) 55%, rgba(127, 196, 245, .32)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(127, 196, 245, .3); }

/* ---------- glass ---------- */
body.theme-vista :is(.pack, .wallcard, .product-info, .promo, .note, .cart-panel, .nav-menu nav, .pop) {
  background: var(--vg-sheen), var(--vg-streak), var(--vg-tint);
  -webkit-backdrop-filter: var(--vg-blur); backdrop-filter: var(--vg-blur);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius);
  box-shadow: var(--vg-edge), var(--vg-shadow);
}
body.theme-vista :is(.pack, .wallcard):hover { border-color: rgba(127, 196, 245, .5); box-shadow: var(--vg-edge), 0 0 0 1px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .5), 0 0 40px rgba(59, 142, 219, .32); }
body.theme-vista .pack.soon { border-style: solid; }

/* a window: the kicker becomes its caption strip, with the caption buttons drawn in */
body.theme-vista .pack { padding: 0 24px 24px; overflow: hidden; }
body.theme-vista .pack > .kicker {
  position: relative; margin: 0 -24px 8px; padding: 9px 104px 9px 16px; min-height: 36px;
  font-size: 13px; font-weight: 400; color: #fff; text-shadow: 0 0 10px rgba(127, 196, 245, .9), 0 1px 1px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 50%, rgba(255, 255, 255, 0) 51%, rgba(127, 196, 245, .1) 100%), linear-gradient(90deg, rgba(28, 90, 156, .55), rgba(59, 142, 219, .2) 55%, rgba(127, 196, 245, .12));
  border-bottom: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
body.theme-vista .pack > .kicker::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 80px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='18' viewBox='0 0 80 18'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff' stop-opacity='.5'/><stop offset='.48' stop-color='%23fff' stop-opacity='.14'/><stop offset='.52' stop-color='%23000' stop-opacity='.12'/><stop offset='1' stop-color='%239fd4ff' stop-opacity='.3'/></linearGradient><linearGradient id='r' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f2a58f'/><stop offset='.48' stop-color='%23d3614a'/><stop offset='.52' stop-color='%23b02c15'/><stop offset='1' stop-color='%23e47a55'/></linearGradient></defs><rect x='.5' y='.5' width='79' height='17' rx='4' fill='%23203a5e' fill-opacity='.55'/><path d='M48 .5h27.5a4 4 0 0 1 4 4v9a4 4 0 0 1-4 4H48z' fill='url(%23r)'/><rect x='.5' y='.5' width='79' height='17' rx='4' fill='url(%23g)' stroke='%23000' stroke-opacity='.65'/><rect x='1.5' y='1.5' width='77' height='15' rx='3' fill='none' stroke='%23fff' stroke-opacity='.3'/><path d='M24 1v16M48 1v16' stroke='%23000' stroke-opacity='.5'/><path d='M8.5 12h7' stroke='%23fff' stroke-width='2.2'/><rect x='31.5' y='5' width='9' height='7.5' fill='none' stroke='%23fff' stroke-width='1.4'/><path d='M31.5 5.9h9' stroke='%23fff' stroke-width='2'/><path d='M60 5.3l7 7.4m0-7.4l-7 7.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat;
  filter: drop-shadow(0 0 4px rgba(127, 196, 245, .35));
}
body.theme-vista .pack h2 { font-weight: 400; }

/* ---------- buttons: glossy Aero ---------- */
body.theme-vista .btn {
  border-radius: 6px; font-family: var(--vsans); font-weight: 600; letter-spacing: .01em; color: #fff;
  border: 1px solid rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .17) 48%, rgba(255, 255, 255, .02) 50%, rgba(127, 196, 245, .14) 100%), rgba(22, 40, 66, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  transition: background .2s ease, box-shadow .25s ease, border-color .2s ease, transform .15s ease;
}
body.theme-vista .btn:hover, body.theme-vista .btn:focus-visible {
  transform: none; color: #fff; border-color: rgba(0, 20, 50, .85);
  background: linear-gradient(180deg, rgba(220, 242, 255, .42) 0%, rgba(160, 215, 250, .2) 48%, rgba(30, 110, 190, .32) 50%, rgba(110, 200, 255, .5) 100%), rgba(20, 52, 92, .82);
  box-shadow: inset 0 0 0 1px rgba(200, 235, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -8px 14px -6px rgba(140, 225, 255, .75), 0 0 16px rgba(127, 196, 245, .6), 0 0 34px rgba(59, 142, 219, .35);
}
body.theme-vista .btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(0, 18, 40, .6) 0%, rgba(20, 70, 130, .5) 48%, rgba(30, 100, 170, .55) 50%, rgba(90, 170, 235, .5) 100%), rgba(16, 40, 72, .9);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(127, 196, 245, .35), 0 0 10px rgba(127, 196, 245, .45);
}
/* primary: Aero blue. The text sits on the darker half and the blue below the shine, so white keeps AA. */
body.theme-vista .btn.primary {
  color: #fff; border-color: #0a2c57;
  background: linear-gradient(180deg, #74b8ee 0%, #3a86d2 22%, #2a70bb 49%, #164e8e 51%, #1b5ea6 78%, #2f86d6 100%);
  box-shadow: inset 0 0 0 1px rgba(170, 220, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(0, 0, 0, .5), 0 0 14px rgba(59, 142, 219, .3);
  text-shadow: 0 -1px 0 rgba(0, 30, 70, .55), 0 1px 2px rgba(0, 20, 50, .5);
}
body.theme-vista .btn.primary:hover, body.theme-vista .btn.primary:focus-visible {
  color: #fff; border-color: #062448;
  background: linear-gradient(180deg, #8dcaf6 0%, #4192dc 22%, #2c76c2 49%, #175494 51%, #1f69b4 74%, #4aa8ee 100%);
  box-shadow: inset 0 0 0 1px rgba(190, 232, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -8px 14px -6px rgba(150, 230, 255, .85), 0 0 18px rgba(127, 196, 245, .75), 0 0 40px rgba(59, 142, 219, .45);
}
body.theme-vista .btn.primary:active { background: linear-gradient(180deg, #0f3d72 0%, #1a5a9e 50%, #2a78c6 100%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 12px rgba(127, 196, 245, .5); }
body.theme-vista .btn.ghost:hover { background: linear-gradient(180deg, rgba(220, 242, 255, .42) 0%, rgba(160, 215, 250, .2) 48%, rgba(30, 110, 190, .32) 50%, rgba(110, 200, 255, .5) 100%), rgba(20, 52, 92, .82); }
body.theme-vista .btn:focus-visible { outline: 2px solid var(--aero-sky); outline-offset: 2px; }

/* cart and menu buttons: small glass pills, the count a green Vista badge */
body.theme-vista :is(.cart-menu summary, .nav-menu summary, .cp-face, .country-pick.big select) {
  border-radius: 6px; border: 1px solid rgba(0, 0, 0, .7); color: #fff; font-weight: 400;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .09) 49%, rgba(255, 255, 255, 0) 51%, rgba(127, 196, 245, .14) 100%), rgba(16, 26, 44, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .45);
}
body.theme-vista :is(.cart-menu summary:hover, .cart-menu[open] summary, .nav-menu[open] summary, .country-pick:is(:hover, :focus-within) :is(.cp-face, select)) { border-color: rgba(0, 20, 50, .85); box-shadow: inset 0 0 0 1px rgba(200, 235, 255, .4), inset 0 -8px 14px -6px rgba(140, 225, 255, .7), 0 0 16px rgba(127, 196, 245, .55); }
body.theme-vista .cart-count { color: #072400; background: linear-gradient(180deg, #c4f5b8 0%, #7fe06a 48%, #4cbf36 52%, #6fdb58 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 40, 0, .6), 0 0 8px rgba(95, 210, 74, .6); }
body.theme-vista .nav-menu nav a:hover, body.theme-vista .nav-menu nav a.on { background: linear-gradient(180deg, rgba(127, 196, 245, .3), rgba(59, 142, 219, .18)); box-shadow: inset 0 0 0 1px rgba(127, 196, 245, .5); }

/* ---------- the deal strip, the music orb, the phone cart bar (a taskbar) ---------- */
body.theme-vista .toast { color: #c6d7ec; background: linear-gradient(180deg, rgba(127, 196, 245, .18), rgba(28, 90, 156, .2) 50%, rgba(11, 18, 32, .6) 51%, rgba(11, 18, 32, .75)), #0a1528; border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(127, 196, 245, .2); }
body.theme-vista .toast a { color: #fff; }
body.theme-vista .amb {
  border: 1px solid rgba(0, 0, 0, .8);
  background: radial-gradient(ellipse 78% 48% at 50% 24%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%), radial-gradient(circle at 50% 104%, rgba(127, 196, 245, .8), rgba(59, 142, 219, 0) 58%), radial-gradient(circle at 50% 50%, #1b406c, #040c19 78%);
  box-shadow: inset 0 0 0 1px rgba(127, 196, 245, .5), 0 0 14px rgba(59, 142, 219, .45);
}
body.theme-vista .amb:hover, body.theme-vista .amb:focus-visible { border-color: #000; box-shadow: inset 0 0 0 1px rgba(170, 225, 255, .8), 0 0 18px rgba(127, 196, 245, .8), 0 0 34px rgba(95, 210, 74, .35); }
@media (max-width: 720px) {
  body.theme-vista .cart-bar { border-radius: 8px; border: 1px solid #000; background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0 1px, rgba(38, 48, 66, .88) 1px, rgba(20, 27, 40, .9) 50%, rgba(6, 9, 16, .93) 50%), rgba(4, 7, 14, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 22px rgba(59, 142, 219, .3), 0 14px 40px rgba(0, 0, 0, .6); }
  body.theme-vista .nav-menu summary { background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .09) 49%, rgba(255, 255, 255, 0) 51%, rgba(127, 196, 245, .14) 100%), rgba(8, 14, 26, .78); }
}

/* ---------- style page ---------- */
/* the crumb is an Explorer address bar, with its round back button */
body.theme-vista .crumb a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 12px 3px 4px; border-radius: 15px;
  color: #dbe8f7; border: 1px solid rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, 0) 51%), rgba(10, 20, 36, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
body.theme-vista .crumb a::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M12.5 6.5L8 11l4.5 4.5M8.5 11h6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 22px no-repeat, radial-gradient(ellipse 80% 50% at 50% 22%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 75%), linear-gradient(180deg, #4ea2e8, #1c5a9c 55%, #2c86d8);
  box-shadow: 0 0 0 1px #0a2c57, inset 0 0 0 1px rgba(170, 220, 255, .5);
}
body.theme-vista .crumb a:hover { color: #fff; text-shadow: none; border-color: rgba(0, 20, 50, .85); box-shadow: inset 0 0 0 1px rgba(170, 220, 255, .35), 0 0 14px rgba(127, 196, 245, .5); }
body.theme-vista .crumb { font-size: 12px; }

/* Photo Gallery frames, with the glossy floor reflection where they sit in a row */
body.theme-vista :is(.gallery img, .hero-stage, .product-media img.cover, .wall-mock, .ba img, .video, .swatch.big) {
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 10px 24px rgba(0, 0, 0, .5), 0 0 22px rgba(59, 142, 219, .14);
}
body.theme-vista .gallery img { transition: box-shadow .25s ease, transform .25s ease; }
body.theme-vista .gallery img:hover { box-shadow: 0 0 0 1px rgba(127, 196, 245, .9), 0 0 18px rgba(127, 196, 245, .6), 0 10px 24px rgba(0, 0, 0, .5); transform: translateY(-2px); }
@media (min-width: 721px) {
  body.theme-vista .style-media .gallery img { -webkit-box-reflect: below 3px linear-gradient(transparent 72%, rgba(255, 255, 255, .2)); }
}
body.theme-vista .thumb { border-radius: 4px; border-color: rgba(255, 255, 255, .22); }

/* palette swatches: glossy orbs */
body.theme-vista .dot { width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, .7); background-image: radial-gradient(ellipse 70% 44% at 50% 24%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .05) 80%, rgba(255, 255, 255, 0) 82%), radial-gradient(circle at 50% 110%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 10px rgba(127, 196, 245, .25); }

/* price row, the badge, and "coming soon" as a Vista progress bar (it is on its way) */
body.theme-vista .pricerow { border-top-color: rgba(127, 196, 245, .2); }
body.theme-vista .points li::before { content: ""; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #c9ecff, #3b8edb 60%, #1c5a9c); box-shadow: 0 0 6px rgba(127, 196, 245, .7); }
body.theme-vista .sold, body.theme-vista .newflag.theme-vista {
  color: #fff; font-family: var(--vsans); font-weight: 600; border: 1px solid #0a2c57; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 49%, rgba(255, 255, 255, 0) 51%), linear-gradient(180deg, #2b78c5, #1c5a9c 50%, #2a7fd0);
  box-shadow: inset 0 0 0 1px rgba(170, 220, 255, .45), 0 0 12px rgba(127, 196, 245, .45);
  text-shadow: 0 1px 1px rgba(0, 20, 50, .6);
}
.newflag.theme-vista { color: #fff; font-family: "Segoe UI", Selawik, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; font-weight: 600; border: 1px solid #0a2c57; background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .12) 49%, rgba(255, 255, 255, 0) 51%), linear-gradient(180deg, #2b78c5, #1c5a9c 50%, #2a7fd0); box-shadow: inset 0 0 0 1px rgba(170, 220, 255, .45), 0 0 12px rgba(127, 196, 245, .5), 0 4px 14px rgba(0, 0, 0, .35); text-shadow: 0 1px 1px rgba(0, 20, 50, .6); }
:is(.sold, .newflag.theme-vista) .flame { fill: #7fe06a; filter: drop-shadow(0 0 5px rgba(95, 210, 74, .9)); }
body.theme-vista :is(.pack.soon .pricerow .fine, .product-info:has(.soon-note) .pricerow .fine) {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; align-self: center; padding: 2px 12px; border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; color: #0b2300;
  border: 1px solid #4d5f73;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, 0) 52%), linear-gradient(90deg, #3fb52e, #6fdc58) 0 0 / 64% 100% no-repeat, linear-gradient(180deg, #eef2f6, #d3dbe4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 10px rgba(95, 210, 74, .25);
}
body.theme-vista :is(.pack.soon .pricerow .fine, .product-info:has(.soon-note) .pricerow .fine)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)) -40% 0 / 36% 100% no-repeat;
  animation: vista-glint 2.8s ease-in-out infinite;
}
@keyframes vista-glint { 0% { background-position: -60% 0; } 70%, 100% { background-position: 160% 0; } }

/* the other looks: glass-framed thumbnails */
body.theme-vista .mini { border: 1px solid rgba(255, 255, 255, .26); border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 20px rgba(0, 0, 0, .45); }
body.theme-vista .mini:hover, body.theme-vista .mini:focus-visible { border-color: rgba(127, 196, 245, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 18px rgba(127, 196, 245, .55), 0 14px 30px rgba(0, 0, 0, .5); }
body.theme-vista .mini-name { font-weight: 600; font-size: 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
body.theme-vista .also { border-top-color: rgba(127, 196, 245, .18); }

/* ---------- product page ---------- */
body.theme-vista .product-info { padding: 22px 28px 26px; align-self: start; }
body.theme-vista .soon-note {
  position: relative; padding: 11px 14px 11px 42px; border-radius: 6px; color: #e2ecf8;
  border: 1px solid rgba(127, 196, 245, .5); background: linear-gradient(180deg, rgba(127, 196, 245, .2), rgba(59, 142, 219, .1) 50%, rgba(28, 90, 156, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.theme-vista .soon-note::before {
  content: ""; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%238fd0fa'/><stop offset='.5' stop-color='%232f7fd0'/><stop offset='1' stop-color='%231c5a9c'/></linearGradient></defs><circle cx='10' cy='10' r='9.2' fill='url(%23b)' stroke='%230a2c57'/><ellipse cx='10' cy='6.4' rx='6.4' ry='3.8' fill='%23fff' fill-opacity='.4'/><circle cx='10' cy='5.8' r='1.4' fill='%23fff'/><path d='M10 9v6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 20px no-repeat;
  filter: drop-shadow(0 0 4px rgba(127, 196, 245, .6));
}
body.theme-vista .inside details, body.theme-vista .review { border-color: rgba(127, 196, 245, .16); }
body.theme-vista .inside summary { padding-left: 8px; margin: 2px 0; border-radius: 4px; border: 1px solid transparent; }
body.theme-vista .inside summary:hover, body.theme-vista .inside details[open] summary { text-shadow: none; border-color: rgba(127, 196, 245, .55); background: linear-gradient(180deg, rgba(127, 196, 245, .22), rgba(59, 142, 219, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
body.theme-vista .inside details p { padding: 0 8px; }
body.theme-vista .inside :is(.inside-title), body.theme-vista .reviews .inside-title { font-family: var(--vsans); color: var(--muted); }
body.theme-vista .paybadges span { border-radius: 4px; border-color: rgba(127, 196, 245, .2); background: rgba(127, 196, 245, .05); }

/* the deal pop: a Vista dialog, its close the red caption button */
body.theme-vista .pop-close { width: 46px; height: 24px; border-radius: 4px; color: #fff; font-size: 17px; border: 1px solid #4a0d04; background: linear-gradient(180deg, #f2a58f 0%, #d3614a 48%, #b02c15 52%, #e47a55 100%); box-shadow: inset 0 0 0 1px rgba(255, 200, 180, .45); text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
body.theme-vista .pop-close:hover, body.theme-vista .pop-close:focus-visible { color: #fff; border-color: #4a0d04; box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .7), 0 0 14px rgba(255, 110, 70, .75); }
body.theme-vista .pop-tag { color: #072400; background: linear-gradient(180deg, #c4f5b8, #7fe06a 48%, #4cbf36 52%, #6fdb58); }
body.theme-vista .pop::backdrop { background: rgba(2, 6, 17, .55); }

body.theme-vista footer { border-top-color: rgba(127, 196, 245, .18); }
body.theme-vista .foot-links a:hover { color: #fff; text-shadow: 0 0 12px rgba(127, 196, 245, .8); }

/* ---------- the Vista tile on the style listings (no theme on those pages: literal colours) ---------- */
.tile[href$="/style/vista"] { border: 1px solid rgba(255, 255, 255, .34); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 26px rgba(59, 142, 219, .22); }
.tile[href$="/style/vista"]:is(:hover, :active, :focus-visible) { border-color: rgba(127, 196, 245, .95); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(127, 196, 245, .6), 0 24px 60px rgba(0, 0, 0, .55); }
.tile[href$="/style/vista"] .tile-text {
  left: 10px; right: 10px; bottom: 10px; padding: 12px 14px 12px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 20px rgba(59, 142, 219, .25);
  background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, 0) 43%), linear-gradient(180deg, rgba(12, 24, 44, .66), rgba(4, 10, 20, .82));
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}
.tile[href$="/style/vista"] .tile-name { font-family: "Segoe UI", Selawik, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; font-style: normal; font-stretch: normal; font-weight: 300; letter-spacing: -.02em; text-shadow: 0 0 16px rgba(127, 196, 245, .7); }
@media (prefers-reduced-transparency: reduce) {
  .tile[href$="/style/vista"] .tile-text { -webkit-backdrop-filter: none; backdrop-filter: none; background: #08101e; }
}

@media (max-width: 720px) {
  .tile[href$="/style/vista"] .tile-text { left: 6px; right: 6px; bottom: 6px; padding: 9px 10px; }
  body.theme-vista .product-info { padding: 16px 16px 20px; }
  body.theme-vista .pack { padding: 0 18px 20px; }
  body.theme-vista .pack > .kicker { margin: 0 -18px 6px; padding-left: 14px; }
  body.theme-vista .logo::before, body.theme-vista .logo::after { width: 42px; height: 42px; margin-top: -21px; left: -4px; }
  body.theme-vista .logo img.wordmark-img { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-vista :is(.pack.soon .pricerow .fine, .product-info:has(.soon-note) .pricerow .fine)::after { animation: none; display: none; }
}