/* BFCM landing (bfcm.html) — the Free Gift BFCM landing v12, ported to Bundle.
   Source: macmini.tail53026c.ts.net/bfcm/css/bfcm-v12.css (v8 base + v12 overrides, merged here into one pass).
   Kept as is: ticker, nav countdown, hero copy + try box, halftone, coins, end block, mobile dock.
   Swapped: the right-column stage plays a Volume discount on a product page, then the theme's
   "added to cart" popup, instead of the Free Gift milestone bar + gift popup.
   Self-contained skin with its own palette and fonts: it does not read css/tokens.css on purpose.
   Ink + white, yellow only for emphasis, red only for the error mark. 2px ink borders, square corners,
   offset yellow shadow with an ink rim. */

:root {
  --ink: #111111;
  --y: #FFD23F;
  --cut: #FF5A36;
  --muted: #6E6B66;
  --num: #4A4844;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --shadow-lg: 8px 8px 0 var(--y), 8px 8px 0 2px var(--ink);
  --shadow-btn: 4px 4px 0 var(--y), 4px 4px 0 2px var(--ink);
  --shadow-btn-down: 2px 2px 0 var(--y), 2px 2px 0 2px var(--ink);

  --gutter: 40px;
  --shell: 1200px;
  --bars: 107.5px; /* ticker 39.5 + nav 68, desktop */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

.shell { width: 100%; max-width: calc(var(--shell) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes bf-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes bf-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes bf-scroll { to { transform: translateX(-50%); } }

/* ───────── ticker ───────── */
.ticker { overflow: hidden; white-space: nowrap; background: var(--ink); }
.ticker__track {
  display: inline-block; padding: 11px 0;
  font: 700 16px/1 var(--display); letter-spacing: -.01em; color: var(--y);
  animation: bf-scroll 42s linear infinite;
}
.ticker__track span { display: inline-flex; align-items: center; }
.ticker__track span::after { content: ""; width: 7px; height: 7px; margin: 0 26px; background: #fff; }
/* the band between the hero and the end block runs the other way */
.ticker--rev { border-top: 2px solid var(--ink); }
.ticker--rev .ticker__track { animation-direction: reverse; }

/* ───────── nav: logo | countdown + Install app ───────── */
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.nav__brand { display: block; color: var(--ink); }
.nav__logo { display: block; width: 100px; height: auto; }
.nav__end { display: flex; align-items: center; gap: 20px; }
.nav__install {
  padding: 7px 12px; border: 1.5px solid var(--ink); text-decoration: none;
  font: 500 14px/1.2 var(--body); transition: background .1s, color .1s;
}
.nav__install:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.count { display: flex; align-items: center; gap: 12px; }
.count__label { font: 500 12px/1.2 var(--mono); color: var(--num); }
.count__cells { display: flex; gap: 4px; }
.count__cell {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 6px 7px 5px;
  background: var(--ink); color: var(--y); font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums;
}
.count__cell b { font-weight: 500; font-size: 16px; line-height: 1; min-width: 2ch; text-align: right; }
.count__cell i { font-style: normal; font-size: 11px; line-height: 1; }

/* ───────── hero: copy + try box (left) | the stage (right) ───────── */
.hero { position: relative; }
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 40px; align-items: start;
  padding-top: 32px; padding-bottom: 48px;
}
/* H1 → lead → try box share ONE right edge (--col). H1 line 1 "Black Friday ads cost" is 9.7 × font-size wide
   (Space Grotesk, measured on the FG page) → font = col / 9.8 lands it inside the box edge.
   cqi resolves at the use site = the copy column. */
.hero__copy { min-width: 0; container-type: inline-size; --col: min(560px, 100cqi - 8px); }
.hero__title {
  font: 700 calc(var(--col) / 9.8)/1.18 var(--display); letter-spacing: -.03em;
  text-wrap: balance;
}
.hero__title .hero__l1 { padding-bottom: .08em; }
.hero__title > span, .end__title > span { display: block; }
/* line 2: yellow on the text run only (cloned per wrapped line), never a full-width bar */
.hero__title em, .end__title em {
  font-style: normal; padding: 0 .1em; background: var(--y); color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__lead { max-width: var(--col); margin-top: 20px; font: 400 17px/1.55 var(--body); color: var(--num); text-wrap: pretty; }

/* try box: badge → title → intro → joined field + button → status → 3-step line */
.pv { max-width: var(--col); margin: 28px 8px 0 0; padding: 24px; border: 2px solid var(--ink); background: #fff; box-shadow: var(--shadow-lg); }
.pv__tag { display: inline-block; margin-bottom: 12px; padding: 6px 8px; background: var(--ink); color: var(--y); font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pv__title { font: 700 22px/1.25 var(--display); letter-spacing: -.01em; }
.pv__intro { margin: 8px 0 18px; font: 400 15px/1.5 var(--body); color: var(--num); text-wrap: pretty; }
.pv__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font: 400 13px/1.3 var(--body); color: var(--num); }
.pv__flow i { font-style: normal; color: #b8960b; }

/* the box carries the shadow, so the joined bar inside never moves: hover / press only deepen the button */
.run-form { display: flex; border: 2px solid var(--ink); background: #fff; }
.run-form:has(.field[aria-invalid="true"]) { border-color: var(--cut); }
.field {
  flex: 1; width: 100%; min-width: 0; height: 56px; padding: 0 16px;
  background: #fff; border: 0; border-radius: 0;
  font: 500 16px/1 var(--body); color: var(--ink);
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { outline: none; box-shadow: inset 0 -4px 0 var(--y); }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 56px; padding: 0 22px; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 0;
  box-shadow: var(--shadow-btn);
  font: 700 16px/1 var(--body);
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
}
.cta:active { transform: translate(2px, 2px); box-shadow: var(--shadow-btn-down); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.run-form .cta { border: 0; box-shadow: none; transition: background .12s ease; }
.run-form .cta:active { transform: none; box-shadow: none; background: #000; color: #fff; }
.run-form .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .cta:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-btn-down); }
  .run-form .cta:hover { transform: none; box-shadow: none; background: #000; color: #fff; }
  .nav__install:hover { background: var(--ink); color: #fff; }
}

/* status from js/run.js: "Loading your store…" (.is-info) or an error, which gets the one red mark */
.run-status { display: flex; gap: 9px; margin-top: 14px; font: 500 14px/1.45 var(--body); color: var(--ink); }
.run-status:empty { display: none; }
.run-status:not(.is-info)::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; background: var(--cut); }
.run-status:not(:empty) + .pv__flow { margin-top: 10px; }

/* ── the stage column: the frame on top, two coins behind it peeking out of two corners ── */
/* max-width = the frame + its shadow, so the coins stay on the frame's corners at every width
   (v12 used 600px: below 1024 and above 1600 the $ coin drifted ~70px off the frame) */
.art { position: relative; justify-self: end; width: 100%; max-width: 488px; }
.stages { position: relative; z-index: 1; min-width: 0; width: 100%; max-width: 488px; }
.art__coin { position: absolute; z-index: 0; display: block; }
.art__coin img { width: 100%; height: auto; rotate: var(--r, 0deg); } /* real ratio of each coin file, never stretched */
.art__coin--1 { --r: -8deg; left: -15%; bottom: -55px; width: 22%; } /* tucks under the frame's last ~60px */
.art__coin--2 { --r: 10deg; right: -2%; top: -26px; width: 14%; }

@keyframes coin-drop { 0% { opacity: 0; transform: translateY(-70px); } 70% { opacity: 1; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
@keyframes coin-float { from { translate: 0 0; } to { translate: 0 -10px; } }
.art__coin--2 { animation: coin-drop .5s cubic-bezier(.3, .9, .4, 1) 1.85s both, coin-float 5.2s ease-in-out 2.9s infinite alternate; }
.art__coin--1 { animation: coin-drop .5s cubic-bezier(.3, .9, .4, 1) 1.95s both, coin-float 4.4s ease-in-out 2.5s infinite alternate; }

/* the frame: a store page in an ink frame with the offset yellow shadow */
.frame {
  position: relative; margin-right: 8px; /* room for the 8px shadow */
  background: #fff; border: 2px solid var(--ink); box-shadow: var(--shadow-lg); overflow: hidden;
}
.bf-js .frame { opacity: 0; }
.bf-js .frame.is-in { opacity: 1; animation: bf-in .25s ease; }

.stage { position: relative; padding: 20px 24px 28px; background: #fff; color: #1C1C1C; } /* a plain white store page */

/* product page: photo + name + price, the offer, the theme's Add to cart */
.pdp { display: flex; flex-direction: column; gap: 20px; transition: opacity .25s ease; }
.stage.is-reset .pdp { opacity: 0; }
.pdp__head { display: flex; align-items: center; gap: 16px; }
.pdp__img { flex: none; width: 72px; height: 72px; border-radius: 4px; object-fit: cover; background: #E8E8E5; }
.pdp__name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.pdp__price { margin-top: 2px; font-size: 16px; line-height: 1.4; }
.pdp__atc {
  display: block; padding: 16px; border-radius: 8px; background: #1C1C1C; color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color .2s, transform .1s;
}
.pdp__atc.is-press { transform: scale(.97); background: #000; }

/* --- AOV Volume discount, vertical tiers, basic colours ---
   Structure from the production widget (Avada-Volume__Header / __Item / __Item--Selected / VolumeBoxBadge):
   header title + rule, description, tiers 10px apart, radio · quantity + "% OFF" · price over the struck price,
   the badge straddling the selected tier's top edge. */
.vd { display: flex; flex-direction: column; gap: 16px; }
.vd__title { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.vd__title::after { content: ""; flex: 1; height: 1px; background: rgba(28, 28, 28, .16); }
.vd__desc { margin-top: 2px; font-size: 14px; line-height: 1.4; color: #1C1C1CB3; }
.vd__list { display: grid; gap: 10px; }
.vd__item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 16px;
  border: 1px solid #D4D4D4; border-radius: 8px; background: #fff;
  transition: border-color .2s, background-color .2s;
}
.vd__item.is-on { border-color: #1C1C1C; background: #F1F1F1; }
.vd__radio { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #1C1C1C80; background: #fff; transition: border-width .15s, border-color .15s; }
.vd__item.is-on .vd__radio { border: 5px solid #1C1C1C; }
.vd__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vd__qty { font-size: 15px; font-weight: 600; line-height: 1.4; }
.vd__off { font-size: 14px; line-height: 1.4; color: #1C1C1CB3; }
.vd__price { display: flex; flex-direction: column; align-items: flex-end; }
.vd__now { font-size: 15px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.vd__was { font-size: 14px; line-height: 1.4; color: #33333380; }
.vd__badge {
  position: absolute; top: 0; right: 16px; translate: 0 -50%;
  padding: 2px 10px; border-radius: 999px; background: #1C1C1C; color: #fff;
  font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}

/* --- "added to cart" popup: pops in centred over the dimmed page after Add to cart (motion = the FG gift popup) --- */
.dim { position: absolute; inset: 0; z-index: 3; background: rgba(17, 17, 17, .32); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.stage.is-cart .dim { opacity: 1; }
.added {
  position: absolute; top: 50%; left: 50%; z-index: 4; width: calc(100% - 32px); max-width: 400px;
  padding: 20px 20px 24px; border-radius: 8px; background: #fff; color: #1C1C1C;
  box-shadow:
    0 -2px 4px rgba(0, 0, 0, .08), 0 1.1px 1.1px rgba(0, 0, 0, .03), 0 2.8px 2.8px rgba(0, 0, 0, .04),
    0 5.7px 5.7px rgba(0, 0, 0, .05), 0 11.7px 11.7px rgba(0, 0, 0, .05), 0 32px 32px rgba(0, 0, 0, .08);
  opacity: 0; visibility: hidden; transform: translate(-50%, -50%) translateY(14px) scale(.9);
}
.stage.is-cart .added {
  opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1), visibility 0s;
}
/* the loop's fade-out takes the popup and the dim with the page, so nothing vanishes in one frame */
.stage.is-reset .added, .stage.is-reset .dim { opacity: 0; transition: opacity .25s ease; }
.added__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #E2E2DF; }
.added__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1.3; }

.cart__item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #E2E2DF; }
.cart__img { flex: none; width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: #E8E8E5; }
.cart__meta { flex: 1; min-width: 0; }
.cart__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cart__qty { margin-top: 2px; font-size: 13px; line-height: 1.35; color: #5F5F5F; }
.cart__price { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cart__was { font-weight: 400; color: #33333380; }
.cart__tag { padding: 2px 6px; border-radius: 4px; background: rgba(51, 51, 51, .08); font-size: 12px; font-weight: 600; line-height: 1.3; }
.stage.is-cart .cart__tag { animation: bf-pop .3s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
.cart__foot { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.cart__row { display: flex; justify-content: space-between; font-size: 15px; }
.cart__sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.cart__checkout {
  display: block; padding: 16px; border-radius: 8px; background: #1C1C1C; color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center;
}

/* coins burst from the Buy 2 price when it is picked, then fade (decor layer over the stage) */
.burst { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: center / contain no-repeat; opacity: 0; }
@keyframes coin-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--rot)); } }
.burst.is-on i { animation: coin-burst .8s cubic-bezier(.2, .8, .3, 1) both; }

/* reduced motion: no sequence, the two moments as still frames, stacked (Buy 2 picked · popup open) */
.stages.is-still { display: grid; gap: 28px; }

/* ───────── end ───────── */
.end { background: var(--ink); color: #fff; }
.end__in {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px 56px; flex-wrap: wrap;
  padding-top: 88px; padding-bottom: 88px;
}
.end__title { font: 700 clamp(32px, 4.6vw, 64px)/1.24 var(--display); letter-spacing: -.03em; }
/* flat yellow button, no offset decor */
.cta--onink, .cta--onink:active { background: var(--y); color: var(--ink); border-color: var(--y); box-shadow: none; }
.cta--onink:focus-visible { outline-color: var(--y); }
@media (hover: hover) { .cta--onink:hover { transform: none; box-shadow: none; background: #fff; border-color: #fff; } }

/* ───────── mobile dock ───────── */
.dock { display: none; }

/* ───────── responsive ───────── */
@media (min-width: 1024px) {
  /* the hero runs exactly to the fold, the frame starts 40px under the title so the $ coin can rise above it */
  .hero { display: grid; align-items: center; min-height: min(calc(100svh - var(--bars)), 1000px); }
  .art { padding-top: 40px; }

  /* Background: a print halftone over the right half, from right under the ticker (behind the nav) to the hero's
     bottom. Dots are an SVG circle (crisp at any DPR). The left edge starts 32px past the try box and fades in over
     128px, so the button never sits on dots; the bottom fades too.
     --box-x = the try box's right edge incl. shadow: shell inner width W, copy column = (W − 40) × 3/5, box = --col + 8. */
  .nav { position: relative; z-index: 2; }
  .nav__install:not(:hover) { background: #fff; } /* the halftone reaches behind the nav: keep the button solid */
  .nav .count__label { padding: 5px 6px; background: #fff; }
  .hero { --colv: min(560px, (min(var(--shell), 100% - var(--gutter) * 2) - 40px) * .6 - 8px); }
  .hero::before {
    --w: min(var(--shell), 100% - var(--gutter) * 2);
    --box-x: calc((100% - var(--w)) / 2 + var(--colv) + 8px);
    content: ""; position: absolute; top: -68px; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='1.4' fill='%23111111' fill-opacity='.13'/%3E%3C/svg%3E");
    background-size: 16px 16px; background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent calc(var(--box-x) + 32px), #000 calc(var(--box-x) + 160px)),
                        linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent calc(var(--box-x) + 32px), #000 calc(var(--box-x) + 160px)),
                        linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-composite: intersect;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .art__coin--1 { left: -8%; } /* columns sit closer: keep clear of the try box's shadow */
}

/* short desktops (≤860 tall): tighter rhythm so the try box + its button stay in the first screen */
@media (min-width: 1024px) and (max-height: 860px) {
  .hero__in { padding-top: 16px; }
  .hero__lead { margin-top: 14px; }
  .pv { margin-top: 20px; padding: 18px 24px; }
  .pv__tag { margin-bottom: 8px; }
  .pv__intro { margin-bottom: 14px; }
  .pv__flow { margin-top: 10px; }
}

@media (min-width: 1600px) {
  /* layout eases out on wide screens: shell 1320 → 1440 by 1920, the copy column with it */
  :root { --shell: clamp(1320px, 75vw, 1440px); }
  .hero__copy { --col: min(clamp(560px, 32vw, 640px), 100cqi - 8px); }
  .hero { --colv: min(clamp(560px, 32vw, 640px), (min(var(--shell), 100% - var(--gutter) * 2) - 40px) * .6 - 8px); }
}

/* below 1024: one column, copy and try box first, the stage under it */
@media (max-width: 1023px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__title .hero__l1 { padding-bottom: 0; }
  .art { justify-self: center; margin-top: 36px; }
}

@media (max-width: 960px) {
  :root { --gutter: 28px; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }

  .ticker__track { padding: 9px 0; font-size: 14px; }
  .ticker__track span::after { margin: 0 20px; }

  .nav__in { height: 52px; gap: 8px; }
  .nav__logo { width: 84px; }
  .nav__end { gap: 8px; }
  .nav__install { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .nav .count__label { display: none; }
  .nav .count__cells { gap: 3px; }
  .nav .count__cell { padding: 4px 4px 3px; }
  .nav .count__cell b { font-size: 13px; }
  .nav .count__cell i { font-size: 10px; }

  .hero__in { padding-top: 8px; padding-bottom: 44px; }
  .hero__title { line-height: 1.25; }
  .hero__lead { font-size: 16px; line-height: 1.5; }

  .pv { margin-top: 20px; padding: 18px 16px 16px; }
  .pv__title { font-size: 19px; }
  .pv__intro { font-size: 14px; margin-bottom: 14px; }

  /* phone: field on top, button full width under it */
  .run-form { flex-direction: column; }
  .field { flex: none; height: 50px; border-bottom: 2px solid var(--ink); }
  .run-form .cta { width: 100%; height: 52px; }

  .art__coin--1 { display: none; } /* no room outside the frame on a phone — a 10px sliver reads as a glitch */
  .art__coin--2 { right: -1%; top: -22px; width: 13%; }
  .stage { padding: 16px 14px 20px; }
  .pdp { gap: 16px; }
  .pdp__img { width: 60px; height: 60px; }
  .pdp__name { font-size: 16px; }
  .vd__item { padding: 10px 12px; }
  .added { width: calc(100% - 24px); padding: 16px 16px 18px; }

  .end__in { padding-top: 64px; padding-bottom: 56px; gap: 32px; }
  .end__in .cta { width: calc(100% - 4px); }
  .end__title { font-size: clamp(28px, 8.6vw, 44px); text-wrap: balance; }

  .dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom)) 16px;
    background: #fff; border-top: 2px solid var(--ink);
    transform: translateY(110%); transition: transform .2s ease;
  }
  .dock.is-on { transform: none; }
  .dock .cta { width: 100%; height: 52px; }
}

@media (max-width: 359px) { .nav .count__cell:last-child { display: none; } } /* 320: drop the seconds so logo + countdown + Install fit one row */

@media (prefers-reduced-motion: reduce) {
  .ticker__track, .art__coin { animation: none; }
  .bf-js .frame, .bf-js .frame.is-in { opacity: 1; animation: none; }
  .pdp, .pdp__atc, .vd__item, .vd__radio, .dim, .stage.is-cart .added { transition: none; }
  .stage.is-cart .cart__tag { animation: none; }
  .cta, .dock, .run-form .cta { transition: none; }
}