/* ═══════════════════ THE WEBSITE'S LOOK ON THE FRONT SCREENS (Oct 9) ═══════════════════
   Owner: the page where you pick a product and see the templates "needs to be fully in
   line with the design language of the website ... including the menus". The front
   screens — start, the template gallery, Reorder, Help, the sign quotes, the cart —
   take the website's paper, ink, type, pills, tiles and footer. The designer, "Your
   card" and the confirmation keep the studio's own look.

   Every rule here is inert unless html[data-look="site"] (js/site-look.js, the
   tenant's `site` switch). The website's tokens (--sl-*), faces and its header,
   menus and footer come from css/site-chrome.css, generated from the website itself.
   Values that are not tokens are the website's own (website/src/css/site.css):
   its tile grey #D9D6CF, its sign grey #B9BCCF, its menu greys. */

/* ---- the front screens take the website's paper, ink and type ---- */
:root[data-look="site"] :is(.page--start, .page--templates, .page--flow, .page--cart) {
  --surface: var(--sl-paper);
  --paper: #fff;
  --ink: var(--sl-ink);
  --ink-70: var(--sl-ink-soft);
  --ink-45: rgba(20, 22, 43, .45);
  --muted: var(--sl-ink-soft);
  --accent: var(--sl-ink);
  --accent-ink: #fff;
  --accent-soft: rgba(20, 22, 43, .06);
  --accent-line: rgba(20, 22, 43, .24);
  --line: var(--sl-line);
  --line-soft: rgba(20, 22, 43, .08);
  --workspace: var(--sl-paper-2);
  --workspace-dot: transparent;
  --sl-tile: #D9D6CF;
  background: var(--sl-paper);
  color: var(--sl-ink);
  font-family: var(--sl-body);
  -webkit-font-smoothing: antialiased;
}
:root[data-look="site"] :is(.page--start, .page--templates, .page--flow, .page--cart) :is(h1, h2, h3, .start__title, .tpl__title, .flow__title, .cartpage__title) {
  font-family: var(--sl-display); font-weight: 700; letter-spacing: -0.02em;
}

/* ---- the website's header, sticky at the top of each front screen ---- */
:root[data-look="site"] .sitechrome .top { position: sticky; top: 0; left: auto; right: auto; flex: 0 0 auto; }
:root[data-look="site"] .sitechrome .sitebar__right { display: flex; align-items: center; }
/* the cart sits where the website has "Start an order", in the same white pill */
:root[data-look="site"] .sitechrome .cartbtn {
  min-height: 46px; padding: 0 14px 0 16px; gap: 9px;
  border: 0; border-radius: 999px;
  background: #fff; color: var(--sl-ink);
  font: 600 15px var(--sl-body);
  transition: box-shadow .25s ease;
}
:root[data-look="site"] .sitechrome .cartbtn:hover { background: #fff; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); }
:root[data-look="site"] .sitechrome .cartbtn__n { background: var(--sl-ink); color: #fff; }
@media (max-width: 1020px) {
  :root[data-look="site"] .sitechrome .sitebar__right { margin-left: auto; }
  :root[data-look="site"] .sitechrome .menu-btn { margin-left: 10px; }
}
@media (max-width: 760px) {
  :root[data-look="site"] .sitechrome .cartbtn { min-height: 42px; padding: 0 12px; }
}

/* ---- the website's breadcrumb ---- */
:root[data-look="site"] .slcrumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--sl-mono); font-size: 12.5px; letter-spacing: .6px; color: var(--sl-ink-soft);
}
:root[data-look="site"] .slcrumbs a { color: inherit; text-decoration: none; }
:root[data-look="site"] .slcrumbs a:hover { color: var(--sl-ink); text-decoration: underline; }

/* ---- "‹ Back" in the website's small mono ---- */
:root[data-look="site"] :is(.page--templates, .page--flow, .page--cart) .backlink {
  min-height: 36px; padding: 0 12px 0 4px;
  font-family: var(--sl-mono); font-size: 12.5px; letter-spacing: .6px; color: var(--sl-ink-soft);
}
:root[data-look="site"] :is(.page--templates, .page--flow, .page--cart) .backlink:hover { background: none; color: var(--sl-ink); text-decoration: underline; }

/* ---- the footer closes the page ---- */
:root[data-look="site"] :is(.page--start, .page--templates) .sitechrome .foot { flex: 0 0 auto; }

/* ═══════════════════════════════ START ═══════════════════════════════ */
:root[data-look="site"] .page--start .start__inner {
  flex: 1 0 auto;
  max-width: 1320px;
  padding: clamp(34px, 4.6vw, 64px) var(--sl-gutter) clamp(64px, 8vw, 110px);
  gap: clamp(28px, 4vw, 48px);
}
:root[data-look="site"] .page--start .start__view { align-items: stretch; gap: clamp(26px, 3.4vw, 44px); }

/* the page head: breadcrumb, the big headline, the lead on the right (the website's .pg-head) */
:root[data-look="site"] .page--start .start__head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "crumbs crumbs" "title lead";
  gap: 18px 48px; align-items: end; text-align: left;
}
:root[data-look="site"] .page--start .slcrumbs { grid-area: crumbs; }
:root[data-look="site"] .page--start .start__title {
  grid-area: title; margin: 0; text-align: left;
  font-size: clamp(40px, 5.4vw, 80px); line-height: .98; color: var(--sl-ink);
}
:root[data-look="site"] .page--start .start__lead {
  grid-area: lead; margin: 0; max-width: 40ch; text-align: left;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--sl-ink-soft); text-wrap: pretty;
}

:root[data-look="site"] .page--start .start__row { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 2.6vw, 36px); }

/* the products: the website's dot pills (its "All products" filter bar) */
:root[data-look="site"] .page--start .stabs {
  flex-wrap: wrap; gap: 8px; overflow: visible;
  padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--sl-line); border-radius: 0;
  background: none;
}
:root[data-look="site"] .page--start .stab {
  flex: 0 0 auto; min-width: 0; min-height: 44px;
  flex-direction: row; align-items: center; gap: 9px;
  padding: 0 18px 0 16px;
  border: 0; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line);
  color: var(--sl-ink); font-family: var(--sl-body);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
:root[data-look="site"] .page--start .stab::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--sl-ink)); }
:root[data-look="site"] .page--start .stab[data-product^="business-card"] { --dot: var(--sl-c); }
:root[data-look="site"] .page--start .stab:is([data-product^="flyer"], [data-product^="door-hanger"]) { --dot: var(--sl-m); }
:root[data-look="site"] .page--start .stab[data-product="signs"] { --dot: #B9BCCF; }
:root[data-look="site"] .page--start .stab__label { font-size: 15px; font-weight: 600; letter-spacing: 0; }
:root[data-look="site"] .page--start .stab__meta { font-size: 13px; opacity: 1; color: var(--sl-ink-soft); }
:root[data-look="site"] .page--start .stab:hover { background: #fff; color: var(--sl-ink); box-shadow: inset 0 0 0 1.5px var(--sl-ink); }
:root[data-look="site"] .page--start .stab:focus-visible { outline: 3px solid var(--sl-c); outline-offset: 3px; }
:root[data-look="site"] .page--start .stab[aria-selected="true"] { background: var(--sl-ink); color: #fff; box-shadow: none; }
:root[data-look="site"] .page--start .stab[aria-selected="true"] .stab__meta { color: var(--sl-on-dark-soft); }

/* the panel under them sits on the paper, no box */
:root[data-look="site"] .page--start .spanel { gap: 24px; padding: 24px 0 0; border: 0; border-radius: 0; background: none; }

/* sizes: the website's option buttons */
:root[data-look="site"] .page--start .start__sizelabel {
  margin-right: 6px;
  font-family: var(--sl-mono); font-size: 12px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: var(--sl-ink-soft);
}
:root[data-look="site"] .page--start .spanel .sizechip {
  min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 12px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line);
  color: var(--sl-ink); font: 600 14.5px var(--sl-body);
}
:root[data-look="site"] .page--start .spanel .sizechip:hover { box-shadow: inset 0 0 0 1.5px var(--sl-ink); }
:root[data-look="site"] .page--start .spanel .sizechip[aria-pressed="true"] { background: var(--sl-ink); color: #fff; box-shadow: none; }

/* the templates: the website's product tiles — the design on warm grey, its name under it */
:root[data-look="site"] .page--start .sthumbs { --tile-ar: 4 / 3; gap: 26px 16px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
:root[data-look="site"] .page--start .sthumbs[data-family="flyer"] { --tile-ar: 4 / 5; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
:root[data-look="site"] .page--start .sthumbs[data-family="door-hanger"] { --tile-ar: 1 / 2; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
:root[data-look="site"] .page--start .sthumb { gap: 12px; }
:root[data-look="site"] .page--start .sthumb__img {
  aspect-ratio: var(--tile-ar);
  padding: 12%;
  border-radius: 18px;
  background: var(--sl-tile);
  box-shadow: none;
}
:root[data-look="site"] .page--start .sthumb__pic {
  filter: drop-shadow(0 1px 1px rgba(20, 22, 43, .18)) drop-shadow(0 14px 18px rgba(20, 22, 43, .22));
  transition: opacity .3s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
:root[data-look="site"] .page--start .sthumb:hover:not(:disabled) .sthumb__img { transform: none; box-shadow: none; }
:root[data-look="site"] .page--start .sthumb:hover:not(:disabled) .sthumb__pic { transform: scale(1.05); }
:root[data-look="site"] .page--start .sthumb:focus-visible .sthumb__img { outline: 3px solid var(--sl-c); outline-offset: 3px; }
:root[data-look="site"] .page--start .sthumb__name { font-family: var(--sl-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
:root[data-look="site"] .page--start .sthumbs__note { font-size: 15px; color: var(--sl-ink-soft); }

/* the three ways in: the website's "start" rows — a dot, the words, an arrow; they fill with ink */
:root[data-look="site"] .page--start .start__opts { gap: 10px; }
:root[data-look="site"] .page--start .startopt {
  position: relative; overflow: hidden;
  min-height: 78px; padding: 16px 18px; gap: 14px;
  border: 0; border-radius: 16px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line);
  color: var(--sl-ink);
  transition: color .3s ease;
}
:root[data-look="site"] .page--start .startopt::before {
  content: ""; position: absolute; inset: 0;
  background: var(--sl-ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
:root[data-look="site"] .page--start .startopt > * { position: relative; }
:root[data-look="site"] .page--start .startopt::after { content: "\2192"; position: relative; margin-left: auto; padding-left: 6px; font-size: 20px; transition: transform .3s; }
:root[data-look="site"] .page--start .startopt__icon { width: 12px; height: 12px; border-radius: 50%; background: var(--dot, var(--sl-ink)); color: transparent; }
:root[data-look="site"] .page--start .startopt__icon svg { display: none; }
:root[data-look="site"] .page--start #startScratch { --dot: var(--sl-c); }
:root[data-look="site"] .page--start #startTemplate { --dot: var(--sl-m); }
:root[data-look="site"] .page--start #startUpload { --dot: var(--sl-y); }
:root[data-look="site"] .page--start .startopt__title { font-size: 16.5px; font-weight: 700; color: inherit; }
:root[data-look="site"] .page--start .startopt__text { font-size: 14px; color: var(--sl-ink-soft); transition: color .3s; }
:root[data-look="site"] .page--start .startopt:hover:not(:disabled) { color: #fff; transform: none; box-shadow: inset 0 0 0 1px var(--sl-line); }
:root[data-look="site"] .page--start .startopt:hover:not(:disabled)::before { transform: none; }
:root[data-look="site"] .page--start .startopt:hover:not(:disabled) .startopt__text { color: var(--sl-on-dark-soft); }
:root[data-look="site"] .page--start .startopt:hover:not(:disabled)::after { transform: translateX(4px); }
:root[data-look="site"] .page--start .startopt.is-working .startopt__icon { width: 16px; height: 16px; background: none; color: var(--sl-ink); }

/* Signs & banners: the website's sign tiles — the photo, the name, a dark pill */
:root[data-look="site"] .page--start .senq { gap: 26px 18px; }
:root[data-look="site"] .page--start .senq .ptile.senq__card {
  gap: 14px; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
:root[data-look="site"] .page--start .senq .ptile.senq__card:hover { transform: none; box-shadow: none; }
:root[data-look="site"] .page--start .senq__art { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--sl-night); }
:root[data-look="site"] .page--start .senq__photo { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
:root[data-look="site"] .page--start .senq__card:hover .senq__photo { transform: scale(1.05); }
:root[data-look="site"] .page--start .senq__text { padding: 0; gap: 4px; }
:root[data-look="site"] .page--start .senq .ptile__label { font-family: var(--sl-display); font-size: 21px; font-weight: 700; color: var(--sl-ink); }
:root[data-look="site"] .page--start .senq .ptile__meta { font-size: 15px; color: var(--sl-ink-soft); }
:root[data-look="site"] .page--start .senq__go { margin-top: 10px; min-height: 46px; padding: 0 20px; background: var(--sl-ink); color: #fff; font: 600 15px var(--sl-body); }

/* Reorder: the website's dark reorder card */
:root[data-look="site"] .page--start .startcta {
  height: auto; gap: 16px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 0; border-radius: 22px;
  background: var(--sl-ink); color: #fff; box-shadow: none;
}
:root[data-look="site"] .page--start .startcta:hover { transform: none; box-shadow: 0 24px 50px -24px rgba(13, 15, 30, .6); }
:root[data-look="site"] .page--start .startcta__art { display: none; }
:root[data-look="site"] .page--start .startcta__title { font-family: var(--sl-display); font-size: clamp(26px, 2.2vw, 32px); color: #fff; }
:root[data-look="site"] .page--start .startcta__label { font-size: 16px; color: #fff; }
:root[data-look="site"] .page--start .startcta__note { font-size: 15px; color: var(--sl-on-dark-soft); }
:root[data-look="site"] .page--start .startcta__go {
  margin-top: 6px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: #fff; color: var(--sl-ink); font: 600 15px var(--sl-body);
}
:root[data-look="site"] .page--start .startcta:hover .startcta__go { background: #fff; }
:root[data-look="site"] .page--start .startcta__icon { background: rgba(255, 255, 255, .1); color: #fff; }

/* your recent designs */
:root[data-look="site"] .page--start .start__recent { padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--sl-line); gap: 6px; }
:root[data-look="site"] .page--start .start__subtitle {
  font-family: var(--sl-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; text-transform: none; color: var(--sl-ink);
}
:root[data-look="site"] .page--start .start__recentnote { font-size: 14px; color: var(--sl-ink-soft); }
:root[data-look="site"] .page--start .rcard { border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line); }
:root[data-look="site"] .page--start .rcard:hover { transform: none; box-shadow: inset 0 0 0 1.5px var(--sl-ink); }

@media (max-width: 960px) {
  :root[data-look="site"] .page--start .start__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "title" "lead"; }
}
@media (max-width: 900px) {
  :root[data-look="site"] .page--start .start__row { grid-template-columns: minmax(0, 1fr); }
  :root[data-look="site"] .page--start .startcta { flex-direction: row; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; border-radius: 18px; }
  :root[data-look="site"] .page--start .startcta__go { margin-top: 0; width: 46px; min-height: 46px; padding: 0; justify-content: center; font-size: 0; }
}
@media (max-width: 640px) {
  :root[data-look="site"] .page--start .start__inner { padding: 26px var(--sl-gutter) 56px; gap: 26px; }
  :root[data-look="site"] .page--start .start__title { font-size: 40px; }
  :root[data-look="site"] .page--start .start__lead { font-size: 17px; }
  /* the four products stay on screen at once: they wrap, never a row that scrolls away */
  :root[data-look="site"] .page--start .stabs { display: flex; padding: 0 0 14px; gap: 6px; }
  :root[data-look="site"] .page--start .stab { min-height: 40px; padding: 0 14px 0 12px; }
  :root[data-look="site"] .page--start .stab__label { font-size: 14px; }
  :root[data-look="site"] .page--start .stab__meta { display: none; }
  :root[data-look="site"] .page--start .spanel { padding-top: 18px; gap: 20px; }
  :root[data-look="site"] .page--start .sthumbs { gap: 18px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-look="site"] .page--start .sthumbs[data-family="flyer"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-look="site"] .page--start .sthumbs[data-family="door-hanger"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-look="site"] .page--start .sthumb__img { border-radius: 14px; }
  :root[data-look="site"] .page--start .sthumb__name { font-size: 14.5px; }
}

/* ═══════════════════════════ THE TEMPLATE GALLERY ═══════════════════════════ */
:root[data-look="site"] .page--templates .tpl__inner {
  flex: 1 0 auto;
  max-width: 1320px;
  padding: clamp(22px, 3vw, 40px) var(--sl-gutter) clamp(64px, 8vw, 110px);
  gap: 16px;
}
:root[data-look="site"] .page--templates .tpl__title { margin: 4px 0 0; font-size: clamp(40px, 5.4vw, 80px); line-height: .98; color: var(--sl-ink); }
:root[data-look="site"] .page--templates .tpl__lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--sl-ink-soft); }
:root[data-look="site"] .page--templates .tpl__pickchip { background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line); color: var(--sl-ink); font: 600 14.5px var(--sl-body); }
:root[data-look="site"] .page--templates .tpl__scratch {
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--sl-ink); color: var(--sl-ink); font: 600 15px var(--sl-body);
}
:root[data-look="site"] .page--templates .tpl__scratch:hover:not(:disabled) { background: var(--sl-ink); color: #fff; }
:root[data-look="site"] .page--templates .segctl { gap: 8px; padding: 0; border: 0; background: none; }
:root[data-look="site"] .page--templates .segctl__btn {
  min-height: 42px; padding: 0 16px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line);
  color: var(--sl-ink); font: 600 14.5px var(--sl-body);
}
:root[data-look="site"] .page--templates .segctl__btn.is-on { background: var(--sl-ink); color: #fff; box-shadow: none; }
:root[data-look="site"] .page--templates .tpl__chips { gap: 8px; }
:root[data-look="site"] .page--templates .tpl__chip {
  min-height: 40px; padding: 0 16px; align-items: center;
  border: 0; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--sl-line);
  color: var(--sl-ink); font: 600 14px var(--sl-body);
}
:root[data-look="site"] .page--templates .tpl__chip:hover { box-shadow: inset 0 0 0 1.5px var(--sl-ink); }
:root[data-look="site"] .page--templates .tpl__chip[aria-pressed="true"] { background: var(--sl-ink); color: #fff; box-shadow: none; }
:root[data-look="site"] .page--templates .tpl__grid { gap: clamp(28px, 3vw, 40px) 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
:root[data-look="site"] .page--templates .tpl__grid[data-family="flyer"] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
:root[data-look="site"] .page--templates .tpl__grid[data-family="door-hanger"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
:root[data-look="site"] .page--templates .tcard { gap: 12px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-look="site"] .page--templates .tcard:hover { transform: none; box-shadow: none; }
:root[data-look="site"] .page--templates .tcard:focus-visible { outline: none; }
:root[data-look="site"] .page--templates .tcard:focus-visible .tcard__thumb { outline: 3px solid var(--sl-c); outline-offset: 3px; }
:root[data-look="site"] .page--templates .tcard__thumb { padding: 12%; border-radius: 18px; overflow: hidden; background: var(--sl-tile); }
:root[data-look="site"] .page--templates .tcard__img {
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(20, 22, 43, .18), 0 14px 22px -8px rgba(20, 22, 43, .3);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
:root[data-look="site"] .page--templates .tcard:hover .tcard__img { transform: scale(1.05); }
:root[data-look="site"] .page--templates .tcard__meta { padding: 0 2px; gap: 3px; }
:root[data-look="site"] .page--templates .tcard__name { font-family: var(--sl-display); font-size: 19px; font-weight: 700; }
:root[data-look="site"] .page--templates .tcard__trade { font-size: 15px; color: var(--sl-ink-soft); }
:root[data-look="site"] .page--templates .tplmodal__box { border-radius: 22px; }
:root[data-look="site"] .page--templates .tplmodal__fig { background: var(--sl-tile); }
@media (max-width: 560px) {
  :root[data-look="site"] .page--templates .tpl__grid,
  :root[data-look="site"] .page--templates .tpl__grid[data-family="flyer"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  :root[data-look="site"] .page--templates .tpl__grid[data-family="door-hanger"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 10px; }
  :root[data-look="site"] .page--templates .tcard__thumb { border-radius: 14px; }
  :root[data-look="site"] .page--templates .tcard__name { font-size: 16px; }
  :root[data-look="site"] .page--templates .tcard__trade { font-size: 13.5px; }
}

/* ═════════════════ REORDER · HELP · SIGN QUOTES · THE CART ═════════════════ */
:root[data-look="site"] .page--flow .flowcol { padding-top: clamp(26px, 3.6vw, 48px); }
:root[data-look="site"] :is(.page--flow, .page--cart) :is(.flow__title, .cartpage__title) { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; color: var(--sl-ink); }
:root[data-look="site"] .page--flow .flow__lead { font-size: 17.5px; color: var(--sl-ink-soft); }
:root[data-look="site"] :is(.page--flow, .page--cart) .field__label { font-family: var(--sl-mono); font-size: 11.5px; letter-spacing: 1.1px; font-weight: 500; color: var(--sl-ink-soft); }
:root[data-look="site"] :is(.page--flow, .page--cart) .field__input { min-height: 48px; border-radius: 12px; border-color: var(--sl-line); background: #fff; font-family: var(--sl-body); font-size: 16px; }
:root[data-look="site"] :is(.page--flow, .page--cart) .field__input:focus { border-color: var(--sl-ink); box-shadow: 0 0 0 3px rgba(20, 22, 43, .08); }
:root[data-look="site"] :is(.page--flow, .page--cart) .btn-primary { min-height: 52px; padding: 0 24px; font: 600 16px var(--sl-body); box-shadow: none; }
:root[data-look="site"] :is(.page--flow, .page--cart) .btn-primary:hover:not(:disabled) { filter: none; box-shadow: 0 10px 30px -12px rgba(13, 15, 30, .55); }
:root[data-look="site"] :is(.page--flow, .page--cart) .segctl { background: #fff; border-color: var(--sl-line); }

@media (prefers-reduced-motion: reduce) {
  :root[data-look="site"] .page--start .startopt::before,
  :root[data-look="site"] .page--start .sthumb__pic,
  :root[data-look="site"] .page--start .senq__photo,
  :root[data-look="site"] .page--templates .tcard__img { transition: none; }
}