/* Parcel — brand: palette swatches and the storefront preview (js/ui/brand.js).
   Swatches (.brand-*) use app tokens and follow light/dark. The storefront (.bs-*) is an image of the store's
   website: it always shows the brand's own colours, like ad creatives, and never changes with the app theme.
   Everything in the storefront is sized in design pixels through --u (1/414 of the phone frame's width, 1/1200
   of the browser window's), so it scales to whatever width its container gives it.
   Every storefront rule is scoped under .bs-device, so other screens can use their own bs-* class names. */

/* ---- Logo ---------------------------------------------------------------------------------------------- */

.brand-logo { display: block; max-width: 100%; overflow: visible; }

/* ---- Palette swatches ---------------------------------------------------------------------------------- */

.brand-swatches {
  --sw-size: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-swatches--small { --sw-size: 16px; gap: 4px; }
.brand-swatches--large { --sw-size: 36px; gap: 10px; }
.brand-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.brand-swatch-chip {
  display: block;
  flex: none;
  width: var(--sw-size);
  height: var(--sw-size);
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.brand-swatches--labels { gap: 12px 16px; }
.brand-swatches--labels .brand-swatch { width: 72px; max-width: 100%; container-type: inline-size; }
.brand-swatches--labels .brand-swatch-chip { width: 48px; height: 48px; border-radius: 12px; }
/* Name and hex stay inside their own cell whatever width a layout gives it, never running into a neighbour:
   a squeezed name ends in an ellipsis, a squeezed hex wraps (the code stays whole to read). */
.brand-swatch-name, .brand-swatch-hex {
  display: block;
  max-width: 100%;
  min-width: 0;
  text-align: center;
}
.brand-swatch-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand-swatch-hex { overflow-wrap: anywhere; }
/* In a tight cell the labels shrink a little first (down to 9.5 px) so "Background" and "#FFF8F0" still fit whole. */
.brand-swatches--labels .brand-swatch-name { font-size: clamp(9.5px, 16.4cqi, 12px); }
.brand-swatches--labels .brand-swatch-hex { font-size: clamp(9.5px, 16.5cqi, 11px); }
.brand-swatch-name { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--label, #000); }
.brand-swatch-hex {
  margin-top: -4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--label-2, rgba(60, 60, 67, .78));
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.brand-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-swatch-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}
:root[data-theme="dark"] .brand-swatch-chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
@media (forced-colors: active) {
  .brand-swatch-chip { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* ---- Storefront preview: frame ------------------------------------------------------------------------- */

.bs-device {
  position: relative;
  display: block;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.bs-device, .bs-device *, .bs-device *::before, .bs-device *::after { box-sizing: border-box; }
.bs-device--phone { max-width: var(--bs-max, 360px); }
.bs-device--desktop { max-width: var(--bs-max, none); }

.bs-device .bs-frame {
  --u: calc(100cqw / var(--bs-w));
  --u2: calc(var(--u) * 2); --u4: calc(var(--u) * 4); --u6: calc(var(--u) * 6); --u8: calc(var(--u) * 8);
  --u10: calc(var(--u) * 10); --u12: calc(var(--u) * 12); --u14: calc(var(--u) * 14); --u16: calc(var(--u) * 16);
  --u20: calc(var(--u) * 20); --u24: calc(var(--u) * 24); --u28: calc(var(--u) * 28); --u32: calc(var(--u) * 32);
  --u40: calc(var(--u) * 40); --u48: calc(var(--u) * 48); --u56: calc(var(--u) * 56); --u64: calc(var(--u) * 64);
  position: relative;
}
.bs-device--phone .bs-frame {
  padding: var(--u12);
  border-radius: calc(var(--u) * 62);
  background: linear-gradient(145deg, #3A3A3C, #1C1C1E 40%, #0B0B0C);
  box-shadow: inset 0 0 0 var(--u2) #48484A, 0 var(--u12) var(--u40) rgba(0, 0, 0, .18);
}
.bs-device--desktop .bs-frame {
  border-radius: calc(var(--u) * 12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 var(--u16) var(--u48) rgba(0, 0, 0, .16);
}
.bs-device .bs-screen {
  position: relative;
  overflow: hidden;
  background: var(--bs-bg);
  isolation: isolate;
}
.bs-device--phone .bs-screen { border-radius: calc(var(--u) * 50); }
.bs-device--desktop .bs-screen { border-radius: calc(var(--u) * 12); }

/* No frame (the whole page in a sheet on a phone): just the page, edge to edge. */
.bs-device.bs-device--bare { max-width: none; }
.bs-device--bare .bs-frame { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.bs-device--bare .bs-screen { border-radius: 0; }

/* phone: status bar + address bar */
.bs-device .bs-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 50);
  padding: 0 var(--u32) 0 calc(var(--u) * 42);
  background: #F6F6F8;
  color: #000;
}
.bs-device .bs-status svg { width: calc(var(--u) * 68); height: var(--u12); }
.bs-device .bs-time {
  font: 600 calc(var(--u) * 16) / 1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}
.bs-device .bs-island {
  position: absolute;
  left: 50%;
  top: var(--u12);
  width: calc(var(--u) * 118);
  height: calc(var(--u) * 34);
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.bs-device .bs-urlbar { padding: var(--u4) var(--u16) var(--u10); background: #F6F6F8; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.bs-device .bs-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--u6);
  height: var(--u40);
  border-radius: var(--u12);
  background: rgba(118, 118, 128, .12);
  color: #000;
  font: 500 calc(var(--u) * 15) / 1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
}
.bs-device .bs-address svg { width: var(--u10); height: var(--u12); flex: none; color: rgba(60, 60, 67, .7); }
.bs-device .bs-address span { overflow: hidden; text-overflow: ellipsis; }

/* desktop: window chrome */
.bs-device .bs-chrome {
  display: grid;
  grid-template-columns: 1fr minmax(0, calc(var(--u) * 480)) 1fr;
  align-items: center;
  height: calc(var(--u) * 44);
  padding: 0 var(--u16);
  background: #EEEEF0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.bs-device .bs-dots { display: flex; gap: var(--u8); }
.bs-device .bs-dots i { display: block; width: var(--u12); height: var(--u12); border-radius: 50%; background: #D1D1D6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.bs-device .bs-chrome .bs-address { height: var(--u28); border-radius: var(--u8); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); font-size: calc(var(--u) * 13); }

/* the page area: scrolls inside (scroll), the whole page (full), or the top of it as a picture (poster).
   No overscroll containment: at either end, the scroll carries on to the page around it. */
.bs-device .bs-viewport {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .25) transparent;
  background: var(--bs-bg);
}
.bs-device--phone .bs-viewport { height: calc(var(--u) * 740); }
.bs-device--desktop .bs-viewport { height: calc(var(--u) * 700); }
.bs-device .bs-viewport.bs-viewport--full { height: auto; overflow: visible; }
.bs-device .bs-viewport:focus { outline: none; }
.bs-device .bs-viewport:focus-visible { outline: 3px solid var(--accent, #007AFF); outline-offset: -3px; }

/* ---- Poster (phones): the top of the page, faded, and one button that opens the whole page ---------------- */

.bs-device--phone.bs-device--poster { max-width: var(--bs-max, 340px); }
.bs-device--phone .bs-viewport--poster { height: calc(var(--u) * 600); overflow: hidden; }
.bs-device--desktop .bs-viewport--poster { height: calc(var(--u) * 600); overflow: hidden; }
.bs-device .bs-fade {
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--u) * 120);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bs-bg) 0%, transparent), color-mix(in srgb, var(--bs-bg) 80%, transparent) 60%, var(--bs-bg));
  pointer-events: none;
}
.bs-device--desktop .bs-fade { height: calc(var(--u) * 160); }
.bs-device .bs-open {
  --u: calc(100cqw / var(--bs-w));
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0 16px calc(var(--u) * 30);
  border: 0;
  border-radius: calc(var(--u) * 62);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bs-device--desktop .bs-open { border-radius: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 56); }
.bs-device .bs-open-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  /* A dark glass capsule over the picture (the screen's one filled button stays the view's own). */
  background: rgba(28, 28, 30, .74);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  color: #fff;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14) inset, 0 6px 18px rgba(0, 0, 0, .22);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
  transition: transform 160ms cubic-bezier(.32, .72, 0, 1), filter 160ms linear;
}
.bs-device .bs-open-pill svg { flex: none; width: 17px; height: 17px; }
.bs-device .bs-open-pill > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 290px) {
  .bs-device .bs-open { padding-inline: 10px; }
  .bs-device .bs-open-pill { gap: 6px; padding: 0 14px 0 12px; font-size: 14px; }
  .bs-device .bs-open-pill svg { width: 15px; height: 15px; }
}
.bs-device .bs-open:focus { outline: none; }
.bs-device .bs-open:focus-visible { outline: 3px solid var(--accent, #007AFF); outline-offset: 3px; }
.bs-device .bs-open:active .bs-open-pill { transform: scale(.96); filter: brightness(.92); }
.bs-device--poster:has(.bs-open:active) .bs-frame { filter: brightness(.97); }
@media (hover: hover) and (pointer: fine) {
  .bs-device .bs-open:hover .bs-open-pill { filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bs-device .bs-open-pill { transition: none; }
  .bs-device .bs-open:active .bs-open-pill { transform: none; }
}

/* The sheet that shows the whole page (openStorefront). On a phone the page runs edge to edge. */
.brand-store-sheet-body { padding: 4px 0 8px; }
.brand-store-sheet-body.is-bare { margin: -8px -16px 0; padding-top: 0; }
.brand-store-sheet-body .bs-device--phone:not(.bs-device--bare) { --bs-max: 380px; }
.brand-store-sheet-note {
  max-width: 420px;
  margin: 14px auto 0;
  padding: 0 16px;
  font-size: var(--fs-footnote, 13px);
  line-height: var(--lh-footnote, 18px);
  color: var(--label-2, rgba(60, 60, 67, .78));
  text-align: center;
  text-wrap: pretty;
}

/* ---- Storefront preview: the page ---------------------------------------------------------------------- */

.bs-device .bs-page {
  color: var(--bs-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: calc(var(--u) * 15);
  line-height: 1.45;
  text-align: left;
  text-rendering: geometricPrecision; /* optimizeLegibility mis-kerns text this small once scaled */
  -webkit-font-smoothing: antialiased;
}
.bs-device .bs-page p { margin: 0; }
.bs-device .bs-nw { white-space: nowrap; }
.bs-device .bs-page svg { display: block; }

.bs-device .bs-announce {
  padding: var(--u8) var(--u16);
  background: var(--bs-primary);
  color: var(--bs-on-primary);
  font-size: calc(var(--u) * 12);
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
  text-wrap: balance;
}
/* The delivery line in two halves: one line on desktop, one half per line on a phone. */
.bs-device--phone .bs-ann-part { display: block; }
.bs-device--phone .bs-ann-sep { display: none; }

.bs-device .bs-header {
  display: grid;
  grid-template-columns: var(--u40) minmax(0, 1fr) var(--u40);
  align-items: center;
  gap: var(--u8);
  height: calc(var(--u) * 60);
  padding: 0 var(--u12);
  border-bottom: 1px solid var(--bs-line);
  background: var(--bs-bg);
}
.bs-device .bs-icon-btn { display: grid; place-items: center; width: var(--u40); height: var(--u40); color: var(--bs-ink); }
.bs-device .bs-icon-btn svg, .bs-device .bs-icons svg { width: var(--u24); height: var(--u24); }
.bs-device .bs-logo { display: flex; justify-content: center; min-width: 0; }
.bs-device .bs-logo svg { height: calc(var(--u) * 30); width: auto; max-width: 100%; }

.bs-device .bs-h1 {
  font-family: var(--bs-font-head);
  font-weight: var(--bs-head-weight);
  font-size: calc(var(--u) * 31);
  line-height: 1.12;
  letter-spacing: var(--bs-head-track);
  text-wrap: balance;
}
.bs-device .bs-h2 {
  font-family: var(--bs-font-head);
  font-weight: var(--bs-head-weight);
  font-size: calc(var(--u) * 22);
  line-height: 1.2;
  letter-spacing: var(--bs-head-track);
}
.bs-device .bs-eyebrow {
  margin-bottom: var(--u10) !important;
  color: var(--bs-accent-text);
  font-size: calc(var(--u) * 12);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bs-device .bs-lede { margin-top: var(--u12) !important; color: var(--bs-muted); font-size: calc(var(--u) * 16); line-height: 1.45; }
.bs-device .bs-body { margin-top: var(--u12) !important; color: var(--bs-muted); font-size: calc(var(--u) * 15.5); line-height: 1.55; }

.bs-device .bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--u48);
  margin-top: var(--u20);
  padding: 0 var(--u28);
  border-radius: calc(var(--u) * var(--bs-btn-radius));
  background: var(--bs-btn);
  color: var(--bs-on-btn);
  font-size: calc(var(--u) * 15);
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
}
.bs-device.bs-feel--geometric .bs-btn { text-transform: uppercase; letter-spacing: .1em; font-size: calc(var(--u) * 13); }
.bs-device .bs-btn--outline { background: transparent; color: var(--bs-ink); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--bs-ink); }

/* hero */
.bs-device .bs-hero { background: var(--bs-hero); padding: var(--u32) var(--u20) 0; overflow: hidden; }
.bs-device .bs-hero-art { margin: var(--u16) calc(var(--u) * -20) 0; aspect-ratio: 6 / 5; }
.bs-device .bs-hero-art--group { aspect-ratio: 54 / 34; margin-top: var(--u12); }
.bs-device .bs-hero-art > svg { width: 100%; height: 100%; }
.bs-device .bs-hero-art--mark { display: grid; place-items: center; }
.bs-device .bs-hero-art--mark > svg { width: 44%; height: auto; }

/* sections */
.bs-device .bs-section { padding: calc(var(--u) * 36) var(--u20) 0; }
.bs-device .bs-featured .bs-h2 { margin-top: calc(var(--u) * 36); }
.bs-device .bs-product { min-width: 0; }
.bs-device .bs-product-art {
  aspect-ratio: 1;
  border-radius: calc(var(--u) * var(--bs-radius));
  background: var(--bs-photo);
  overflow: hidden;
}
.bs-device .bs-product-art > svg { width: 100%; height: 100%; }
.bs-device .bs-product-body { padding-top: var(--u12); }
.bs-device .bs-product-title { font-size: calc(var(--u) * 15); line-height: 1.3; font-weight: 600; }
.bs-device .bs-product--featured .bs-product-title { font-family: var(--bs-font-head); font-weight: var(--bs-head-weight); font-size: calc(var(--u) * 20); letter-spacing: var(--bs-head-track); }
.bs-device .bs-price { margin-top: var(--u4) !important; font-size: calc(var(--u) * 15); font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-device .bs-product--featured .bs-price { font-size: calc(var(--u) * 18); }
.bs-device .bs-note { margin-top: var(--u4) !important; color: var(--bs-muted); font-size: calc(var(--u) * 13); line-height: 1.35; }
.bs-device .bs-product--featured .bs-btn { width: 100%; }
.bs-device .bs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u20) var(--u12); margin-top: var(--u16); }
.bs-device .bs-grid .bs-product-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* An odd one out on the phone's 2-up grid runs full width as a row: picture left, details right. */
.bs-device--phone .bs-grid--odd > .bs-product:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--u12);
  align-items: center;
}
.bs-device--phone .bs-grid--odd > .bs-product:last-child .bs-product-body { padding-top: 0; }

/* why us */
.bs-device .bs-why {
  display: grid;
  gap: var(--u20);
  margin-top: calc(var(--u) * 40);
  padding: var(--u32) var(--u20);
  background: var(--bs-tint);
}
.bs-device .bs-why-item { display: grid; grid-template-columns: var(--u40) minmax(0, 1fr); gap: var(--u14); align-items: start; }
.bs-device .bs-why-icon {
  display: grid;
  place-items: center;
  width: var(--u40);
  height: var(--u40);
  border-radius: 50%;
  background: var(--bs-bg);
  color: var(--bs-icon);
}
.bs-device .bs-why-icon svg { width: var(--u20); height: var(--u20); }
.bs-device .bs-why-title { font-weight: 600; font-size: calc(var(--u) * 15); line-height: 1.3; text-wrap: pretty; }
.bs-device .bs-why-text { margin-top: var(--u2) !important; color: var(--bs-muted); font-size: calc(var(--u) * 13.5); line-height: 1.45; text-wrap: pretty; }

/* about */
.bs-device .bs-about { padding-bottom: calc(var(--u) * 40); }

/* footer */
.bs-device .bs-footer {
  padding: var(--u32) var(--u20) var(--u24);
  background: var(--bs-footer);
  color: var(--bs-on-footer);
  font-size: calc(var(--u) * 14);
}
.bs-device .bs-foot-logo svg { height: var(--u28); width: auto; max-width: 100%; }
.bs-device .bs-foot-tag { margin-top: var(--u10) !important; color: var(--bs-footer-muted); font-size: calc(var(--u) * 13.5); }
.bs-device .bs-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u24) var(--u16); margin-top: var(--u28); }
.bs-device .bs-foot-col { display: flex; flex-direction: column; gap: var(--u8); min-width: 0; }
.bs-device .bs-foot-col span { color: var(--bs-on-footer); opacity: .92; line-height: 1.3; }
.bs-device .bs-foot-head { color: var(--bs-footer-muted); font-size: calc(var(--u) * 12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bs-device .bs-foot-legal {
  margin-top: var(--u28) !important;
  padding-top: var(--u16);
  border-top: 1px solid color-mix(in srgb, var(--bs-on-footer) 18%, transparent);
  color: var(--bs-footer-muted);
  font-size: calc(var(--u) * 12);
}

/* ---- Desktop layout (1200 design px) ------------------------------------------------------------------- */

.bs-device--desktop .bs-page { font-size: calc(var(--u) * 16); }
.bs-device--desktop .bs-announce { font-size: calc(var(--u) * 13); padding: var(--u10); }
.bs-device--desktop .bs-header {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  height: calc(var(--u) * 84);
  padding: 0 var(--u64);
}
.bs-device--desktop .bs-logo { justify-content: flex-start; }
.bs-device--desktop .bs-logo svg { height: calc(var(--u) * 38); }
.bs-device .bs-nav { display: flex; gap: var(--u32); font-size: calc(var(--u) * 15); font-weight: 500; }
.bs-device .bs-icons { display: flex; justify-content: flex-end; gap: var(--u20); color: var(--bs-ink); }
.bs-device--desktop .bs-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--u48);
  padding: var(--u24) var(--u64);
  min-height: calc(var(--u) * 480);
}
.bs-device--desktop .bs-hero-text { padding: var(--u48) 0; }
.bs-device--desktop .bs-h1 { font-size: calc(var(--u) * 56); line-height: 1.04; }
.bs-device--desktop .bs-lede { margin-top: var(--u20) !important; font-size: calc(var(--u) * 19); max-width: calc(var(--u) * 440); }
.bs-device--desktop .bs-btn { min-height: calc(var(--u) * 52); margin-top: var(--u32); padding: 0 var(--u40); font-size: calc(var(--u) * 16); }
.bs-device--desktop .bs-hero-art { margin: 0; aspect-ratio: 1; }
.bs-device--desktop .bs-hero-art--group { aspect-ratio: 52 / 47; }
.bs-device--desktop .bs-section { padding: calc(var(--u) * 72) var(--u64) 0; }
.bs-device--desktop .bs-h2 { font-size: calc(var(--u) * 34); }
.bs-device--desktop .bs-eyebrow { font-size: calc(var(--u) * 13); }
.bs-device--desktop .bs-product--featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--u56);
  align-items: center;
}
.bs-device--desktop .bs-product--featured .bs-product-title { font-size: calc(var(--u) * 34); line-height: 1.1; }
.bs-device--desktop .bs-product--featured .bs-price { margin-top: var(--u12) !important; font-size: calc(var(--u) * 24); }
.bs-device--desktop .bs-product--featured .bs-note { margin-top: var(--u8) !important; font-size: calc(var(--u) * 15); }
.bs-device--desktop .bs-product--featured .bs-btn { width: auto; }
.bs-device--desktop .bs-featured .bs-h2 { margin-top: calc(var(--u) * 72); }
.bs-device--desktop .bs-grid { grid-template-columns: repeat(var(--bs-cols, 3), minmax(0, 1fr)); gap: var(--u32); margin-top: var(--u24); }
.bs-device--desktop .bs-product-title { font-size: calc(var(--u) * 17); }
.bs-device--desktop .bs-price { font-size: calc(var(--u) * 17); }
.bs-device--desktop .bs-note { font-size: calc(var(--u) * 14); }
.bs-device--desktop .bs-why {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--u40);
  margin-top: calc(var(--u) * 80);
  padding: var(--u56) var(--u64);
}
.bs-device--desktop .bs-why-item { grid-template-columns: var(--u48) minmax(0, 1fr); gap: var(--u16); }
.bs-device--desktop .bs-why-icon { width: var(--u48); height: var(--u48); }
.bs-device--desktop .bs-why-icon svg { width: var(--u24); height: var(--u24); }
.bs-device--desktop .bs-why-title { font-size: calc(var(--u) * 17); }
.bs-device--desktop .bs-why-text { font-size: calc(var(--u) * 15); }
.bs-device--desktop .bs-about {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: var(--u64);
  padding-bottom: calc(var(--u) * 80);
}
.bs-device--desktop .bs-about .bs-eyebrow { grid-column: 1; }
.bs-device--desktop .bs-about .bs-h2 { grid-column: 1; }
.bs-device--desktop .bs-about .bs-body { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; font-size: calc(var(--u) * 19); line-height: 1.6; }
.bs-device--desktop .bs-footer {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: var(--u64);
  padding: var(--u56) var(--u64) var(--u32);
  font-size: calc(var(--u) * 15);
}
.bs-device--desktop .bs-foot-logo svg { height: var(--u32); }
.bs-device--desktop .bs-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.bs-device--desktop .bs-foot-legal { grid-column: 1 / -1; margin-top: var(--u48) !important; font-size: calc(var(--u) * 13); }

@media (forced-colors: active) {
  .bs-device .bs-frame { border: 1px solid CanvasText; }
  .bs-device .bs-btn { border: 1px solid ButtonText; }
  .bs-device .bs-open-pill { forced-color-adjust: none; border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
}