/*
 * Storefront page system
 * ----------------------
 * Shared UX, responsive and accessibility layer for every public storefront
 * theme. It is loaded after the selected theme stylesheet, so the homepage
 * remains theme-owned while every inherited inner page keeps the same visual
 * language.
 */

html[data-site-theme] {
  --sps-page: var(--site-bg, #f7f7f6);
  --sps-surface: var(--site-surface, #fff);
  --sps-soft: color-mix(in srgb, var(--site-bg, #f7f7f6) 72%, #fff);
  --sps-ink: var(--site-ink, #111213);
  --sps-muted: var(--site-muted, #666a70);
  --sps-line: var(--site-line, #dedede);
  --sps-accent: var(--site-pal-accent, #111213);
  --sps-accent-strong: var(--site-pal-accent-hover, #000);
  --sps-danger: #c93535;
  --sps-success: #18794e;
  --sps-radius: .55rem;
  --sps-radius-sm: .35rem;
  --sps-radius-lg: .8rem;
  --sps-border-width: 1px;
  --sps-shadow: 0 16px 42px rgba(17, 18, 19, .07);
  --sps-shadow-hover: 0 24px 62px rgba(17, 18, 19, .12);
  --sps-shadow-sticky: 0 22px 60px rgba(17, 18, 19, .1);
  --sps-focus: 0 0 0 4px color-mix(in srgb, var(--sps-accent) 18%, transparent);
  --sps-screen: clamp(1rem, 4vw, 4.75rem);
  --sps-section-y: clamp(3.5rem, 7vw, 7.5rem);
  --sps-reading: 48rem;
  --sps-reading-wide: 72rem;
  --sps-layout: 100%;
  --sps-control-h: 2.75rem;
  --sps-transition: 180ms cubic-bezier(.2, .75, .2, 1);
  --sps-title-font: inherit;
  --sps-body-font: inherit;
  --sps-card-shift: translateY(-3px);
  --sps-image-bg: color-mix(in srgb, var(--sps-page) 72%, #fff);
}

html[data-site-theme="ebooom"] {
  --sps-page: var(--eb-ivory);
  --sps-surface: var(--eb-paper);
  --sps-soft: #f1ebe1;
  --sps-ink: var(--eb-ink);
  --sps-muted: #6d665f;
  --sps-line: var(--eb-line);
  --sps-accent: var(--eb-gold-dark);
  --sps-accent-strong: #4d351f;
  --sps-radius: 0;
  --sps-radius-sm: 0;
  --sps-radius-lg: 0;
  --sps-shadow: none;
  --sps-shadow-hover: none;
  --sps-shadow-sticky: none;
  --sps-focus: 0 0 0 3px rgba(154, 116, 71, .22);
  --sps-title-font: var(--eb-serif);
  --sps-body-font: var(--eb-sans);
  --sps-card-shift: translateY(-2px);
}

html[data-site-theme="xjdbikes"] {
  --sps-page: var(--xj-cream);
  --sps-surface: var(--xj-paper);
  --sps-soft: var(--xj-sky);
  --sps-ink: var(--xj-ink);
  --sps-muted: var(--xj-muted);
  --sps-line: var(--xj-line);
  --sps-accent: var(--xj-orange);
  --sps-accent-strong: var(--xj-orange-dark);
  --sps-radius: 1rem;
  --sps-radius-sm: .7rem;
  --sps-radius-lg: 1.35rem;
  --sps-shadow: 0 14px 38px rgba(23, 50, 77, .08);
  --sps-shadow-hover: var(--xj-shadow);
  --sps-shadow-sticky: 0 22px 60px rgba(23, 50, 77, .13);
  --sps-focus: 0 0 0 4px rgba(247, 101, 53, .2);
  --sps-title-font: var(--xj-font);
  --sps-body-font: var(--xj-font);
  --sps-image-bg: #f2f8fb;
  --sps-card-shift: translateY(-4px);
}

html[data-site-theme="pink"] {
  --sps-page: var(--tone-pale);
  --sps-surface: #fff;
  --sps-soft: var(--tone-soft);
  --sps-ink: var(--tone-ink);
  --sps-muted: var(--tone-muted);
  --sps-line: var(--tone-line);
  --sps-accent: var(--tone-accent);
  --sps-accent-strong: var(--tone-accent-dark);
  --sps-radius: 1.2rem;
  --sps-radius-sm: .8rem;
  --sps-radius-lg: 1.75rem;
  --sps-shadow: 0 16px 44px rgba(93, 41, 62, .08);
  --sps-shadow-hover: 0 25px 64px rgba(93, 41, 62, .14);
  --sps-shadow-sticky: 0 24px 64px rgba(93, 41, 62, .13);
  --sps-focus: 0 0 0 4px rgba(214, 61, 118, .18);
  --sps-card-shift: translateY(-4px);
}

html[data-site-theme="green"] {
  --sps-page: var(--tone-cream);
  --sps-surface: #fff;
  --sps-soft: var(--tone-soft);
  --sps-ink: var(--tone-ink);
  --sps-muted: var(--tone-muted);
  --sps-line: var(--tone-line);
  --sps-accent: var(--tone-accent);
  --sps-accent-strong: var(--tone-accent-dark);
  --sps-radius: .9rem;
  --sps-radius-sm: .6rem;
  --sps-radius-lg: 1.3rem;
  --sps-shadow: 0 15px 42px rgba(23, 61, 43, .07);
  --sps-shadow-hover: 0 24px 58px rgba(23, 61, 43, .12);
  --sps-shadow-sticky: 0 22px 60px rgba(23, 61, 43, .12);
  --sps-focus: 0 0 0 4px rgba(47, 139, 87, .18);
}

html[data-site-theme="blue"] {
  --sps-page: var(--tone-pale);
  --sps-surface: #fff;
  --sps-soft: var(--tone-soft);
  --sps-ink: var(--tone-ink);
  --sps-muted: var(--tone-muted);
  --sps-line: var(--tone-line);
  --sps-accent: var(--tone-accent);
  --sps-accent-strong: var(--tone-accent-dark);
  --sps-radius: .45rem;
  --sps-radius-sm: .3rem;
  --sps-radius-lg: .7rem;
  --sps-shadow: 0 14px 38px rgba(13, 34, 64, .07);
  --sps-shadow-hover: 0 22px 54px rgba(13, 34, 64, .12);
  --sps-shadow-sticky: 0 22px 58px rgba(13, 34, 64, .13);
  --sps-focus: 0 0 0 4px rgba(23, 105, 255, .18);
}

html[data-site-theme="orange"] {
  --sps-page: var(--tone-pale);
  --sps-surface: #fff;
  --sps-soft: var(--tone-cream);
  --sps-ink: var(--tone-ink);
  --sps-muted: var(--tone-muted);
  --sps-line: var(--tone-ink);
  --sps-accent: var(--tone-accent);
  --sps-accent-strong: var(--tone-accent-dark);
  --sps-radius: 0;
  --sps-radius-sm: 0;
  --sps-radius-lg: 0;
  --sps-border-width: 2px;
  --sps-shadow: 4px 4px 0 var(--tone-ink);
  --sps-shadow-hover: 7px 7px 0 var(--tone-ink);
  --sps-shadow-sticky: 7px 7px 0 var(--tone-ink);
  --sps-focus: 0 0 0 4px rgba(255, 90, 31, .22);
  --sps-card-shift: translate(-2px, -2px);
}

html[data-site-theme="blackgold"] {
  --sps-page: var(--tone-pale);
  --sps-surface: #fff;
  --sps-soft: #fff8dc;
  --sps-ink: var(--tone-ink);
  --sps-muted: var(--tone-muted);
  --sps-line: var(--tone-line);
  --sps-accent: var(--tone-accent-dark);
  --sps-accent-strong: #6e5100;
  --sps-radius: 0;
  --sps-radius-sm: 0;
  --sps-radius-lg: 0;
  --sps-shadow: none;
  --sps-shadow-hover: 0 22px 52px rgba(23, 19, 10, .11);
  --sps-shadow-sticky: none;
  --sps-focus: 0 0 0 4px rgba(255, 216, 77, .24);
  --sps-title-font: Georgia, "Times New Roman", serif;
  --sps-card-shift: translateY(-2px);
}

/* Foundations */

html[data-site-theme] body.marketing {
  font-family: var(--sps-body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-site-theme] body.marketing main {
  min-width: 0;
  min-height: 58vh;
  color: var(--sps-ink);
  background: #fff;
}

html[data-site-theme] body.marketing :where(
  :is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div),
  .site-article-doc-inner,
  .site-footer > div:first-of-type
) {
  width: 100%;
  max-width: var(--sps-layout);
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--sps-screen);
}

html[data-site-theme] body.marketing :where(
  :is(.site-page-title,[data-checkout-title]),
  .site-article-doc > div > section[data-page-kind="article"] > header > h1,
  .site-shop-detail-title,
  :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2),
  :is(.site-error-page,[data-shop-detail-error]) header > h1,
  .auth-card .h1
) {
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

html[data-site-theme] body.marketing :where(.site-page-lead, .site-muted, .muted) {
  color: var(--sps-muted);
}

html[data-site-theme] body.marketing :where(a, button, input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

html[data-site-theme] body.marketing :where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--sps-accent);
  outline-offset: 3px;
  box-shadow: var(--sps-focus);
}

html[data-site-theme] body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn) {
  min-height: var(--sps-control-h);
  border-radius: var(--sps-radius-sm);
  font-family: var(--sps-body-font);
  font-weight: 700;
  letter-spacing: -.01em;
  transition:
    color var(--sps-transition),
    background-color var(--sps-transition),
    border-color var(--sps-transition),
    box-shadow var(--sps-transition),
    transform var(--sps-transition),
    opacity var(--sps-transition);
}

html[data-site-theme] body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn):active:not(:disabled) {
  transform: translateY(1px) scale(.985);
}

html[data-site-theme] body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn):disabled,
html[data-site-theme] body.marketing :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn, .admin-btn)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
  box-shadow: none;
  transform: none;
}

html[data-site-theme] body.marketing :where(
  .site-form-control,
  :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
  :is(.site-try-input,[data-cart-coupon-input]),
  .input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  min-height: var(--sps-control-h);
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 78%, transparent);
  border-radius: var(--sps-radius-sm);
  color: var(--sps-ink);
  background: var(--sps-surface);
  font: inherit;
  transition:
    border-color var(--sps-transition),
    box-shadow var(--sps-transition),
    background-color var(--sps-transition);
}

html[data-site-theme] body.marketing :where(
  .site-form-control,
  :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
  :is(.site-try-input,[data-cart-coupon-input]),
  .input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
):hover {
  border-color: color-mix(in srgb, var(--sps-accent) 34%, var(--sps-line));
}

html[data-site-theme] body.marketing :where(
  .site-form-control,
  :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
  :is(.site-try-input,[data-cart-coupon-input]),
  .input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
):focus {
  border-color: color-mix(in srgb, var(--sps-accent) 68%, var(--sps-line));
  outline: 0;
  box-shadow: var(--sps-focus);
}

html[data-site-theme] body.marketing :is(.site-search-field, .site-search-root > section[role="dialog"] > form > label) > :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]),
html[data-site-theme] body.marketing :is(.site-search-field, .site-search-root > section[role="dialog"] > form > label) > :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]):hover,
html[data-site-theme] body.marketing :is(.site-search-field, .site-search-root > section[role="dialog"] > form > label) > :is(.site-search-input, .site-search-root > section[role="dialog"] > form input[type="search"]):focus {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing :where(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--sps-muted) 76%, transparent);
  opacity: 1;
}

/* Page headers and open full-screen composition */

html[data-site-theme] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.25rem, 6vw, 6.25rem);
  border-bottom: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 78%, transparent);
  color: var(--sps-ink);
  background:
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--sps-accent) 10%, var(--sps-page)),
      var(--sps-page) 64%
    );
}

html[data-site-theme] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
  position: absolute;
  top: -9rem;
  right: clamp(-8rem, -5vw, -3rem);
  z-index: -1;
  width: clamp(16rem, 30vw, 29rem);
  aspect-ratio: 1;
  content: "";
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-accent) 22%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sps-accent) 6%, transparent);
  pointer-events: none;
}

html[data-site-theme] body.marketing .site-page-hero :is(.site-section-inner,[data-checkout-inner],:is(.site-home-section,.site-home-page > section[data-section-kind]) > div) {
  position: relative;
  z-index: 1;
}

html[data-site-theme] body.marketing :is(.site-page-title,[data-checkout-title]) {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.15rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: -.052em;
}

html[data-site-theme] body.marketing .site-page-lead {
  max-width: 48rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 0;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.72;
}

html[data-site-theme] body.marketing .site-page-kicker {
  margin-bottom: .8rem;
  color: var(--sps-accent-strong);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html[data-site-theme] body.marketing .site-article-doc {
  color: var(--sps-ink);
  background: #fff;
}

html[data-site-theme] body.marketing .site-article-doc-inner,
html[data-site-theme] body.marketing .site-article-doc > div {
  padding-top: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-bottom: var(--sps-section-y);
}

html[data-site-theme] body.marketing .site-article-doc-body,
html[data-site-theme] body.marketing .site-article-doc > div > section {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="news"] {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="news"] > header > h1 {
  max-width: var(--sps-reading-wide);
  margin: 0;
  color: var(--sps-ink);
  font-family: var(--sps-font-display);
  font-size: clamp(2.6rem, 6vw, 6.6rem);
  font-weight: var(--sps-display-weight);
  line-height: var(--sps-display-leading);
  letter-spacing: var(--sps-display-tracking);
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="news"] > p {
  max-width: var(--sps-reading);
  margin: 1.25rem 0 0;
  color: var(--sps-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="news"] > .site-news-layout {
  margin-top: clamp(2rem, 4vw, 4.5rem);
}

html[data-site-theme] body.marketing .site-article-doc > div > section:is(
  [data-page-kind="shop"],
  [data-page-kind="category"]
) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-article-doc > div > section:is(
  [data-page-kind="shop"],
  [data-page-kind="category"]
) > header h1 {
  max-width: var(--sps-reading-wide);
  margin: 0;
  color: var(--sps-ink);
  font-family: var(--sps-font-display);
  font-size: clamp(2.6rem, 6vw, 6.6rem);
  font-weight: var(--sps-display-weight);
  line-height: var(--sps-display-leading);
  letter-spacing: var(--sps-display-tracking);
}

html[data-site-theme] body.marketing .site-article-doc > div > section:is(
  [data-page-kind="shop"],
  [data-page-kind="category"]
) > header + p {
  max-width: var(--sps-reading);
  margin: 1.25rem 0 0;
  color: var(--sps-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}

html[data-site-theme] body.marketing .site-article-doc > div > section:is(
  [data-page-kind="shop"],
  [data-page-kind="category"]
) > .site-shop-layout {
  margin-top: clamp(2rem, 4vw, 4.5rem);
}

html[data-site-theme] body.marketing .site-category-block + .site-category-block {
  margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  border-top: var(--sps-border-width) solid var(--sps-line);
}

html[data-site-theme] body.marketing .site-category-block > h2 {
  margin: 0 0 1.25rem;
  color: var(--sps-ink);
  font-family: var(--sps-font-display);
  font-size: clamp(1.65rem, 3vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--sps-title-tracking);
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

html[data-site-theme] body.marketing .site-article-not-found {
  padding-block: clamp(3rem, 7vw, 7rem);
  background: #fff;
}

html[data-site-theme] body.marketing .site-article-not-found > div {
  width: min(calc(100% - (2 * var(--sps-page-pad))), var(--sps-content-max));
  margin-inline: auto;
}

html[data-site-theme] body.marketing .site-article-doc-body--marketing-list > :is(.site-page-title,[data-checkout-title]),
html[data-site-theme] body.marketing .site-article-doc-body--marketing-list > .site-list-titlebar {
  margin-top: clamp(1rem, 2vw, 2rem);
}

html[data-site-theme] body.marketing .site-list-titlebar {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

html[data-site-theme] body.marketing .site-article-doc-body--marketing-list :is(.site-page-title,[data-checkout-title]) {
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  line-height: 1;
}

html[data-site-theme] body.marketing .site-article-doc-body--marketing-list > .site-page-lead {
  max-width: 52rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* Breadcrumbs, side navigation and pagination */

html[data-site-theme] body.marketing :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

html[data-site-theme] body.marketing :is(.site-breadcrumb-list, :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) > ol) {
  display: flex;
  min-height: 2.25rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  color: var(--sps-muted);
  font-size: .78rem;
  line-height: 1.4;
}

html[data-site-theme] body.marketing :is(.site-breadcrumb-item, :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) > ol > li) a {
  color: var(--sps-muted);
  text-decoration: none;
}

html[data-site-theme] body.marketing :is(.site-breadcrumb-item, :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) > ol > li) a:hover {
  color: var(--sps-accent-strong);
}

html[data-site-theme] body.marketing :is(.site-breadcrumb-item, :is(.site-breadcrumb,[data-shop-detail-breadcrumb]) > ol > li):not(:last-child)::after {
  color: color-mix(in srgb, var(--sps-muted) 55%, transparent);
}

html[data-site-theme] body.marketing :where(.site-shop-layout, .site-news-layout) {
  display: grid;
  grid-template-columns: minmax(13.5rem, 17rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}

html[data-site-theme] body.marketing :where(.site-shop-sidebar, .site-news-sidebar) {
  position: sticky;
  top: 6rem;
  padding: 1rem 0;
  border: 0;
  border-top: var(--sps-border-width) solid var(--sps-line);
  border-bottom: var(--sps-border-width) solid var(--sps-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing :where(.site-shop-sidebar > h2, .site-news-sidebar > h2) {
  margin: 0 0 .7rem;
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: 1rem;
  line-height: 1.25;
}

html[data-site-theme] body.marketing :where(.site-shop-cat-nav, .site-news-cat-nav) {
  display: grid;
  gap: .2rem;
}

html[data-site-theme] body.marketing :where(.site-shop-cat-link, .site-news-cat-link) {
  display: flex;
  min-height: 2.75rem;
  padding: .65rem .75rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: var(--sps-radius-sm);
  color: var(--sps-muted);
  text-decoration: none;
  transition:
    color var(--sps-transition),
    background-color var(--sps-transition),
    transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-shop-cat-link {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

html[data-site-theme] body.marketing .site-shop-cat-link > strong,
html[data-site-theme] body.marketing .site-shop-cat-link > small {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

html[data-site-theme] body.marketing .site-shop-cat-link:hover,
html[data-site-theme] body.marketing .site-shop-cat-link[data-current] {
  transform: none;
}

html[data-site-theme] body.marketing :where(.site-shop-cat-link, .site-news-cat-link):hover {
  color: var(--sps-ink);
  background: var(--sps-soft);
  transform: translateX(2px);
}

html[data-site-theme] body.marketing :is(.site-shop-cat-link[data-current], .site-news-cat-link[data-current]) {
  color: var(--sps-accent-strong);
  background: color-mix(in srgb, var(--sps-accent) 10%, var(--sps-surface));
  font-weight: 750;
}

html[data-site-theme] body.marketing .site-mobile-cat-menu {
  position: relative;
}

html[data-site-theme] body.marketing .site-mobile-cat-menu > summary {
  display: flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .7rem .85rem;
  align-items: center;
  justify-content: center;
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius-sm);
  color: var(--sps-ink);
  background: var(--sps-surface);
  cursor: pointer;
}

html[data-site-theme] body.marketing .site-mobile-cat-menu[open] > summary > span:last-child {
  transform: rotate(180deg);
}

html[data-site-theme] body.marketing .site-mobile-cat-menu > summary > span:last-child {
  transition: transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-mobile-cat-menu > div {
  z-index: 10;
  padding: .75rem;
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow-hover);
}

html[data-site-theme] body.marketing .site-pager {
  display: flex;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-top: 1.25rem;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  border-top: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 74%, transparent);
}

html[data-site-theme] body.marketing :where(
  .site-pager-link,
  .site-pager-num,
  .site-pager > :is(a[rel], span[aria-disabled]),
  .site-pager > div > :is(a, strong, span)
) {
  display: inline-grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .45rem .7rem;
  place-items: center;
  border: var(--sps-border-width) solid transparent;
  border-radius: var(--sps-radius-sm);
  color: var(--sps-muted);
  background: transparent;
  text-decoration: none;
  transition:
    color var(--sps-transition),
    border-color var(--sps-transition),
    background-color var(--sps-transition),
    transform var(--sps-transition);
}

html[data-site-theme] body.marketing :where(
  .site-pager-link,
  .site-pager-num,
  .site-pager > a[rel],
  .site-pager > div > a
):hover {
  color: var(--sps-ink);
  border-color: var(--sps-line);
  background: var(--sps-surface);
  transform: translateY(-1px);
}

html[data-site-theme] body.marketing :is(
  .site-pager-num.is-current,
  .site-pager > div > strong[aria-current="page"]
) {
  color: #fff;
  border-color: var(--sps-accent);
  background: var(--sps-accent);
  font-weight: 800;
}

html[data-site-theme] body.marketing :where(.site-pager-link, .site-pager-num).is-disabled,
html[data-site-theme] body.marketing .site-pager-link--disabled,
html[data-site-theme] body.marketing .site-pager > span[aria-disabled="true"] {
  color: color-mix(in srgb, var(--sps-muted) 50%, transparent);
  cursor: not-allowed;
  pointer-events: none;
}

/* Product, news, review and recommendation cards */

html[data-site-theme] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  .site-search-result-group,
  :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li),
  .site-article-product-rec-card,
  .site-shop-detail-rec-card,
  .site-shop-review-card,
  .site-category-review-card,
  .site-review-card
) {
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 84%, transparent);
  border-radius: var(--sps-radius);
  color: var(--sps-ink);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing :is(.site-shop-grid,[data-shop-grid])[data-grid-kind="catalog"] > :is(.site-shop-card,[data-shop-review-product-card]) {
  border: 0;
}

html[data-site-theme] body.marketing .site-shop-layout > section :is(.site-shop-card-body, :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > figcaption) {
  padding: 1rem clamp(.75rem, 1.2vw, 1rem) 0;
}

html[data-site-theme] body.marketing .site-shop-layout > section :is(.site-shop-card-foot, :is(.site-shop-card,[data-shop-review-product-card]) > footer) {
  padding: .5rem clamp(.75rem, 1.2vw, 1rem) .75rem;
}

/* Homepage editorial news */
html[data-site-theme] body.marketing .site-home-news-magazine {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3.5rem);
  max-width: none;
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  min-height: 9.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--sps-line) 82%, transparent);
  color: var(--sps-ink);
  text-decoration: none;
  transition:
    color var(--sps-transition),
    background var(--sps-transition),
    transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a:hover {
  color: var(--sps-accent);
  text-decoration: none;
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a > span:first-child {
  padding-top: .15rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sps-muted);
  font-variant-numeric: tabular-nums;
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a strong {
  max-width: 36rem;
  font-size: clamp(1.15rem, 1.65vw, 1.55rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a time {
  margin-top: auto;
  font-size: .78rem;
  letter-spacing: .04em;
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a > span:last-child {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a:hover :is(.site-home-news-list,[data-home-news-list]) > li > a > span:last-child {
  transform: translateX(.25rem);
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child {
  grid-column: 1 / -1;
  margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a {
  min-height: clamp(13rem, 24vw, 20rem);
  padding: clamp(1.75rem, 4vw, 3.75rem);
  border: 0;
  border-radius: var(--sps-radius-lg);
  background: var(--sps-ink);
  color: #fff;
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a > span:first-child,
html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a time {
  color: rgba(255, 255, 255, .68);
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a strong {
  max-width: 54rem;
  font-size: clamp(1.8rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a > span:last-child {
  font-size: 1.5rem;
}

html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a:hover {
  color: #fff;
  transform: translateY(-.2rem);
}

@media (max-width: 700px) {
  html[data-site-theme] body.marketing .site-home-news-magazine {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child {
    margin-bottom: 1.25rem;
  }

  html[data-site-theme] body.marketing .site-home-news-magazine :is(.site-home-news-list,[data-home-news-list]) > li > a {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: .75rem;
    min-height: 7.5rem;
    padding: 1.25rem 0;
  }

  html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a {
    min-height: 12rem;
    padding: 1.5rem;
  }

  html[data-site-theme] body.marketing .site-home-news-magazine > :is(.site-home-news-list,[data-home-news-list]) > li:first-child :is(.site-home-news-list,[data-home-news-list]) > li > a strong {
    font-size: clamp(1.55rem, 7.5vw, 2.25rem);
  }
}

html[data-site-theme] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li),
  .site-article-product-rec-card,
  .site-shop-detail-rec-card
) {
  overflow: hidden;
  box-shadow: var(--sps-shadow);
  transition:
    border-color var(--sps-transition),
    box-shadow var(--sps-transition),
    transform var(--sps-transition);
}

html[data-site-theme] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li),
  .site-article-product-rec-card,
  .site-shop-detail-rec-card
):hover {
  border-color: color-mix(in srgb, var(--sps-accent) 45%, var(--sps-line));
  box-shadow: var(--sps-shadow-hover);
  transform: var(--sps-card-shift);
}

html[data-site-theme] body.marketing :where(
  .site-article-doc .site-shop-card-media,
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > div:first-child,
  .site-article-doc :where(.site-news-article-thumb, .site-news-article-card > a:first-child),
  .site-article-product-rec-media,
  .site-shop-detail-rec-media
) {
  overflow: hidden;
  background: var(--sps-image-bg);
}

html[data-site-theme] body.marketing :where(
  .site-article-doc .site-shop-card-media img,
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > div:first-child > img,
  .site-article-doc :where(.site-news-article-thumb, .site-news-article-card > a:first-child) img,
  .site-article-product-rec-media img,
  .site-shop-detail-rec-media img
) {
  transition: transform 320ms cubic-bezier(.2, .75, .2, 1);
}

html[data-site-theme] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  .site-article-product-rec-card,
  .site-shop-detail-rec-card
):hover img {
  transform: scale(1.025);
}

html[data-site-theme] body.marketing :where(
  .site-shop-card-title,
  :is(.site-shop-card,[data-shop-review-product-card]) > a:first-child > figure > figcaption > :is(h2, h3),
  :where(.site-news-article-title, .site-news-article-card > div > h2),
  :is(.site-search-item-title, .site-search-root > section[role="dialog"] > ul > li > a > span > strong),
  .site-article-product-rec-title,
  .site-shop-detail-rec-title
) {
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-weight: 750;
  letter-spacing: -.02em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

html[data-site-theme] body.marketing :where(
  :is(.site-shop-price-now,[data-price-kind="now"]),
  :is(.site-shop-card,[data-shop-review-product-card]) > footer > p > strong,
  .site-shop-detail-price-now,
  .site-article-product-rec-price,
  .site-shop-detail-rec-price
) {
  color: var(--sps-accent-strong);
  font-weight: 850;
}

html[data-site-theme] body.marketing :where(.site-rating-stars, .site-shop-detail-rating-stars) {
  color: var(--sps-accent);
}

html[data-site-theme] body.marketing :where(
  .site-article-doc :is(.site-shop-grid,[data-shop-grid]),
  .site-search-product-grid
) {
  gap: clamp(.85rem, 1.6vw, 1.35rem);
}

html[data-site-theme] body.marketing .site-news-article-list {
  gap: clamp(1rem, 2vw, 1.6rem);
}

html[data-site-theme] body.marketing .site-news-article-card {
  min-height: 100%;
}

html[data-site-theme] body.marketing :where(.site-shop-review-card, .site-category-review-card, .site-review-card) {
  padding: clamp(1rem, 2vw, 1.4rem);
  box-shadow: none;
}

/* Product detail */

html[data-site-theme] body.marketing :is(.site-shop-detail-layout,[data-shop-detail-layout]) {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .82fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

html[data-site-theme] body.marketing :is(.site-shop-detail-gallery,[data-shop-detail-gallery]) {
  min-width: 0;
  background: #fff;
}

html[data-site-theme] body.marketing .site-shop-detail-main-img {
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 78%, transparent);
  border-radius: var(--sps-radius-lg);
  background: #fff;
}

html[data-site-theme] body.marketing .site-shop-detail-main-img img {
  object-fit: contain;
}

html[data-site-theme] body.marketing .site-shop-detail-thumbs {
  gap: .65rem;
}

html[data-site-theme] body.marketing .site-shop-thumb-btn {
  overflow: hidden;
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 78%, transparent);
  border-radius: var(--sps-radius-sm);
  background: var(--sps-surface);
  transition:
    border-color var(--sps-transition),
    box-shadow var(--sps-transition),
    transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-shop-thumb-btn:hover {
  border-color: color-mix(in srgb, var(--sps-accent) 48%, var(--sps-line));
  transform: translateY(-1px);
}

html[data-site-theme] body.marketing .site-shop-thumb-btn.is-active {
  border-color: var(--sps-accent);
  box-shadow: 0 0 0 1px var(--sps-accent);
}

html[data-site-theme] body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]) {
  position: sticky;
  top: 6rem;
  min-width: 0;
  padding: clamp(.25rem, 1vw, 1rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-shop-detail-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
}

html[data-site-theme] body.marketing .site-shop-detail-rating {
  margin-top: 1rem;
}

html[data-site-theme] body.marketing .site-shop-detail-promo {
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--sps-accent);
  border-radius: var(--sps-radius-sm);
  color: var(--sps-ink);
  background: var(--sps-soft);
}

html[data-site-theme] body.marketing .site-shop-detail-price-row {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-block: 1rem;
  border-top: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 68%, transparent);
  border-bottom: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 68%, transparent);
}

html[data-site-theme] body.marketing .site-shop-detail-price-now {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1;
}

html[data-site-theme] body.marketing .site-shop-detail-stock {
  margin-top: .8rem;
  font-size: .86rem;
  font-weight: 700;
}

html[data-site-theme] body.marketing .site-shop-spec-group {
  padding-top: 1.1rem;
  border-top: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 62%, transparent);
}

html[data-site-theme] body.marketing .site-shop-spec-pill {
  min-height: 2.75rem;
  border-width: var(--sps-border-width);
  border-radius: var(--sps-radius-sm);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing .site-shop-spec-pill.is-active {
  border-color: var(--sps-accent);
  color: #fff;
  background: var(--sps-accent);
  box-shadow: none;
}

html[data-site-theme] body.marketing :is(.site-shop-detail-actions,[data-shop-detail-actions]) {
  display: grid;
  margin-top: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

html[data-site-theme] body.marketing :is(.site-shop-detail-actions,[data-shop-detail-actions]) :is(.site-btn,[data-checkout-button],[data-cart-button]) {
  min-height: 3.15rem;
}

html[data-site-theme] body.marketing :is(.site-shop-detail-desc,[data-shop-detail-description]),
html[data-site-theme] body.marketing :is(.site-shop-detail-reviews,[data-shop-reviews]),
html[data-site-theme] body.marketing :is(.site-shop-detail-recs,[data-shop-recommendations]) {
  width: 100%;
  margin-top: clamp(3.75rem, 7vw, 7.5rem);
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
  border: 0;
  border-top: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 74%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing :where(
  .site-shop-detail-desc-h,
  .site-shop-detail-reviews-h,
  .site-shop-detail-recs-h,
  .site-article-product-recs > h2
) {
  margin: 0 0 clamp(1.25rem, 2.5vw, 2.25rem);
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

html[data-site-theme] body.marketing :where(
  .site-shop-detail-desc-h,
  .site-shop-detail-desc-body
) {
  width: min(100%, var(--sps-reading-wide));
  max-width: var(--sps-reading-wide);
  margin-inline: auto;
}

html[data-site-theme] body.marketing .site-shop-detail-rec-list,
html[data-site-theme] body.marketing .site-article-product-recs > :is(.site-shop-grid,[data-shop-grid]) {
  gap: clamp(.85rem, 1.6vw, 1.35rem);
}

/* Articles and rich text */

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > h1,
html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > p {
  width: min(100%, var(--sps-reading-wide));
  max-width: var(--sps-reading-wide);
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > h1 {
  margin: clamp(.75rem, 2vw, 1.5rem) 0 1rem;
  font-size: clamp(2.25rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -.055em;
}

html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > p {
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
  color: var(--sps-muted);
}

html[data-site-theme] body.marketing .site-article-rich-layout {
  display: flex;
  width: 100%;
  gap: clamp(1.5rem, 3.5vw, 4rem);
  align-items: flex-start;
}

html[data-site-theme] body.marketing .site-article-toc-wrap {
  flex: 0 0 min(16rem, 22vw);
}

html[data-site-theme] body.marketing .site-article-toc {
  position: sticky;
  top: 6rem;
  padding: 1rem;
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 72%, transparent);
  border-radius: var(--sps-radius);
  background: var(--sps-soft);
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-article-toc > p {
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: .9rem;
}

html[data-site-theme] body.marketing #siteArticleTocList a {
  display: block;
  min-height: 2.25rem;
  padding: .45rem .55rem;
  border-radius: var(--sps-radius-sm);
  color: var(--sps-muted);
  line-height: 1.35;
}

html[data-site-theme] body.marketing #siteArticleTocList a:hover {
  color: var(--sps-ink);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) {
  width: min(100%, var(--sps-reading-wide));
  max-width: var(--sps-reading-wide);
  color: var(--sps-ink);
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  line-height: 1.84;
  letter-spacing: .002em;
  overflow-wrap: anywhere;
}

html[data-site-theme] body.marketing .site-article-rich-layout > .site-article-rich {
  flex: 1 1 auto;
  min-width: 0;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(
  p,
  ul,
  ol,
  blockquote,
  pre,
  figure,
  table
) {
  margin-top: 0;
  margin-bottom: 1.2em;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(ul, ol) {
  padding-left: 1.45em;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(h2, h3, h4, h5, h6) {
  margin-top: 2em;
  margin-bottom: .72em;
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  line-height: 1.16;
  letter-spacing: -.028em;
  text-wrap: balance;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) h2 {
  font-size: clamp(1.65rem, 2.8vw, 2.55rem);
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) a {
  color: var(--sps-accent-strong);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(img, video, iframe) {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--sps-radius-sm);
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) blockquote {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--sps-accent);
  border-radius: 0 var(--sps-radius-sm) var(--sps-radius-sm) 0;
  color: color-mix(in srgb, var(--sps-ink) 86%, var(--sps-muted));
  background: var(--sps-soft);
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(pre, code) {
  max-width: 100%;
  overflow: auto;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) :where(th, td) {
  padding: .75rem;
  border: var(--sps-border-width) solid var(--sps-line);
  text-align: left;
  vertical-align: top;
}

html[data-site-theme] body.marketing :is(.site-article-tags,[data-shop-tags]) {
  width: min(100%, var(--sps-reading-wide));
  max-width: var(--sps-reading-wide);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 72%, transparent);
}

html[data-site-theme] body.marketing :where(:is(.site-article-tags,[data-shop-tags]) a, :where(.site-news-tag, .site-news-article-card > div > nav > a), .site-tag-pill, :is(.site-search-item-kind, .site-search-root > section[role="dialog"] > ul > li > a > span > small)) {
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-accent) 28%, var(--sps-line));
  border-radius: 999px;
  color: var(--sps-accent-strong);
  background: color-mix(in srgb, var(--sps-accent) 7%, var(--sps-surface));
}

html[data-site-theme] body.marketing .site-article-sibling-nav {
  width: min(100%, var(--sps-reading-wide));
  max-width: var(--sps-reading-wide);
  margin-top: clamp(3rem, 6vw, 6rem);
}

html[data-site-theme] body.marketing .site-article-sibling {
  padding: 1.2rem 0;
  border: 0;
  border-top: var(--sps-border-width) solid var(--sps-line);
  border-radius: 0;
  background: transparent;
}

html[data-site-theme] body.marketing a.site-article-sibling:hover {
  color: var(--sps-accent-strong);
  border-color: var(--sps-accent);
  box-shadow: none;
}

/* Tags, search, tracking, empty and error states */

html[data-site-theme] body.marketing .site-tags-cloud {
  display: grid;
  margin-top: clamp(2rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .75rem;
}

html[data-site-theme] body.marketing .site-tag-pill {
  display: flex;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-radius: var(--sps-radius-sm);
  text-decoration: none;
  transition:
    color var(--sps-transition),
    border-color var(--sps-transition),
    background-color var(--sps-transition),
    box-shadow var(--sps-transition),
    transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-tag-pill:hover {
  color: var(--sps-ink);
  border-color: var(--sps-accent);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow);
  transform: translateY(-2px);
}

html[data-site-theme] body.marketing .site-tag-pill-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-site-theme] body.marketing .site-tag-pill-count,
html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="tag-detail"] > header > p > span {
  color: var(--sps-muted);
  font-variant-numeric: tabular-nums;
}

html[data-site-theme] body.marketing .site-tags-page {
  min-width: 0;
  max-width: 100%;
}

html[data-site-theme] body.marketing .site-tags-page > div {
  width: min(calc(100% - (2 * var(--sps-page-pad))), var(--sps-content-max));
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 7rem);
}

html[data-site-theme] body.marketing .site-tags-page > div > section {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-tags-page header > h1 {
  max-width: var(--sps-reading-wide);
  margin: 0;
  color: var(--sps-ink);
  font-family: var(--sps-font-display);
  font-size: clamp(2.6rem, 6vw, 6.6rem);
  font-weight: var(--sps-display-weight);
  line-height: var(--sps-display-leading);
  letter-spacing: var(--sps-display-tracking);
}

html[data-site-theme] body.marketing .site-tags-page header > p {
  max-width: var(--sps-reading);
  margin: 1.25rem 0 0;
  color: var(--sps-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}

html[data-site-theme] body.marketing .site-tags-page section > p[role="status"] {
  margin: 1.25rem 0 0;
  color: var(--sps-muted);
}

html[data-site-theme] body.marketing .site-tags-page .site-tags-cloud {
  margin-top: clamp(2rem, 4vw, 4rem);
}

html[data-site-theme] body.marketing .site-tag-pill > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-site-theme] body.marketing .site-tag-pill > span:last-child:not(:first-child) {
  color: var(--sps-muted);
  font-variant-numeric: tabular-nums;
}

html[data-site-theme] body.marketing :is(.site-search-form, .site-search-root > section[role="dialog"] > form) {
  max-width: var(--sps-reading-wide);
}

html[data-site-theme] body.marketing :is(.site-search-field, .site-search-root > section[role="dialog"] > form > label) {
  min-height: 3.25rem;
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing :is(.site-search-field, .site-search-root > section[role="dialog"] > form > label):focus-within {
  border-color: var(--sps-accent);
  box-shadow: var(--sps-focus);
}

html[data-site-theme] body.marketing .site-search-result-group {
  margin-top: clamp(2rem, 4vw, 4rem);
  padding: clamp(1.1rem, 2.5vw, 2rem);
  box-shadow: none;
}

html[data-site-theme] body.marketing .site-search-result-heading {
  margin-bottom: 1.25rem;
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

html[data-site-theme] body.marketing :is(.site-search-results, .site-search-root > section[role="dialog"] > ul) {
  display: grid;
  gap: .75rem;
}

html[data-site-theme] body.marketing :is(.site-search-item-link, .site-search-root > section[role="dialog"] > ul > li > a) {
  min-height: 4.5rem;
  padding: 1rem;
}

html[data-site-theme] body.marketing .site-wide-card {
  padding: clamp(1.1rem, 2.5vw, 2rem);
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius);
  color: var(--sps-ink);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow);
}

html[data-site-theme] body.marketing .site-empty-state {
  display: grid;
  min-height: clamp(15rem, 32vw, 22rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  place-items: center;
  align-content: center;
  gap: .75rem;
  border: var(--sps-border-width) dashed color-mix(in srgb, var(--sps-line) 78%, transparent);
  border-radius: var(--sps-radius-lg);
  color: var(--sps-muted);
  background: color-mix(in srgb, var(--sps-soft) 66%, transparent);
  text-align: center;
}

html[data-site-theme] body.marketing .site-empty-state > :is(i, svg) {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 50%;
  color: var(--sps-accent);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow);
  font-size: 1.25rem;
}

html[data-site-theme] body.marketing :is(.site-empty-state-title, .site-empty-state > h2) {
  margin: .3rem 0 0;
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

html[data-site-theme] body.marketing :is(.site-empty-state-message, .site-empty-state > p) {
  max-width: 36rem;
  margin: 0 0 .5rem;
  line-height: 1.65;
}

html[data-site-theme] body.marketing .site-empty-state > a {
  display: inline-flex;
  min-height: var(--site-control-height, 44px);
  padding: .7rem 1rem;
  align-items: center;
  justify-content: center;
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius-sm);
  color: var(--sps-ink);
  background: var(--sps-surface);
  font-weight: 750;
  text-decoration: none;
}

html[data-site-theme] body.marketing .site-review-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

html[data-site-theme] body.marketing .site-review-card > p:first-of-type {
  display: inline-flex;
  gap: .15rem;
  margin: .75rem 0 0;
  color: var(--site-rating-star, #f4b400);
}

html[data-site-theme] body.marketing .site-review-card > blockquote {
  margin: .8rem 0 0;
  line-height: 1.65;
}

html[data-site-theme] body.marketing .site-review-card > footer {
  margin-top: .75rem;
  color: var(--sps-muted);
  font-size: .82rem;
}

html[data-site-theme] body.marketing :where(
  .site-shop-layout > section > p[role="status"],
  .site-news-layout > section > p[role="status"],
  .site-tags-list-empty,
  .site-tag-detail-empty
) {
  display: grid;
  min-height: clamp(12rem, 26vw, 18rem);
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  place-items: center;
  align-content: center;
  border: var(--sps-border-width) dashed color-mix(in srgb, var(--sps-line) 82%, transparent);
  border-radius: var(--sps-radius-lg);
  color: var(--sps-muted);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sps-soft) 76%, transparent),
      color-mix(in srgb, var(--sps-surface) 72%, transparent)
    );
  text-align: center;
}

html[data-site-theme] body.marketing :where(
  .site-shop-layout > section > p[role="status"],
  .site-news-layout > section > p[role="status"],
  .site-tags-list-empty,
  .site-tag-detail-empty
)::before {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: .25rem;
  place-items: center;
  content: "—";
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-accent) 30%, var(--sps-line));
  border-radius: 50%;
  color: var(--sps-accent);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow);
  font-size: 1.2rem;
  font-weight: 800;
}

html[data-site-theme] body.marketing :is(.site-error-page,[data-shop-detail-error]) {
  min-height: 68vh;
  padding-block: var(--sps-section-y);
  color: var(--sps-ink);
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--sps-accent) 14%, transparent), transparent 32rem),
    var(--sps-page);
}

html[data-site-theme] body.marketing :is(.site-error-page,[data-shop-detail-error]) > div {
  text-align: left;
}

html[data-site-theme] body.marketing :is(.site-error-page,[data-shop-detail-error]) header > strong {
  color: var(--sps-accent);
  font-family: var(--sps-title-font);
  font-size: clamp(5rem, 16vw, 13rem);
  line-height: .75;
  letter-spacing: -.09em;
}

html[data-site-theme] body.marketing :is(.site-error-page,[data-shop-detail-error]) header > h1 {
  max-width: 16ch;
  margin-top: 1.5rem;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
}

html[data-site-theme] body.marketing :is(.site-error-page,[data-shop-detail-error]) aside {
  margin-top: clamp(2rem, 5vw, 4rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow);
}

/* Cart and checkout */

html[data-site-theme] body.marketing :where(.site-shop-cart-page, .site-checkout-page) {
  padding-block: clamp(3.5rem, 7vw, 7.5rem);
  color: var(--sps-ink);
  background: var(--sps-page);
}

html[data-site-theme] body.marketing :where(.site-shop-cart-page, .site-checkout-page) :is(.site-page-title,[data-checkout-title]) {
  max-width: 18ch;
  margin-bottom: clamp(2rem, 4vw, 4rem);
  font-size: clamp(2.4rem, 5.5vw, 5.25rem);
}

html[data-site-theme] body.marketing .site-shop-cart-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing [data-cart-layout] {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(19rem, .72fr);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  align-items: start;
}

html[data-site-theme] body.marketing [data-cart-toolbar] {
  min-height: 3.25rem;
  margin: 0;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: var(--sps-border-width) solid var(--sps-line);
  border-radius: 0;
  background: transparent;
}

html[data-site-theme] body.marketing [data-cart-check] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--sps-accent);
}

html[data-site-theme] body.marketing :where([data-cart-action="remove"], [data-cart-action="share"]) {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sps-radius-sm);
}

html[data-site-theme] body.marketing [data-cart-list] {
  gap: 0;
}

html[data-site-theme] body.marketing [data-cart-item] {
  grid-template-columns: auto minmax(5.75rem, 8vw) minmax(0, 1fr);
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(1.2rem, 2.5vw, 2rem) 0;
  border: 0;
  border-bottom: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 72%, transparent);
  border-radius: 0;
  background: transparent;
}

html[data-site-theme] body.marketing .site-shop-cart-panel[data-cart-mode="share"] [data-cart-item] {
  grid-template-columns: minmax(5.75rem, 8vw) minmax(0, 1fr);
}

html[data-site-theme] body.marketing .site-shop-cart-panel[data-cart-mode="share"][data-cart-selection="enabled"] [data-cart-item] {
  grid-template-columns: auto minmax(5.75rem, 8vw) minmax(0, 1fr);
}

html[data-site-theme] body.marketing [data-cart-image] {
  width: min(8vw, 7rem);
  min-width: 5.75rem;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--sps-radius-sm);
  background: var(--sps-image-bg);
}

html[data-site-theme] body.marketing [data-cart-title] {
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 750;
  line-height: 1.25;
}

html[data-site-theme] body.marketing [data-cart-title]:hover {
  color: var(--sps-accent-strong);
  text-decoration: none;
}

html[data-site-theme] body.marketing [data-cart-price] {
  color: var(--sps-ink);
}

html[data-site-theme] body.marketing [data-cart-quantity-field] {
  width: 5.75rem;
  height: 2.75rem;
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius-sm);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing [data-cart-summary] {
  position: sticky;
  top: 6rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 82%, transparent);
  border-radius: var(--sps-radius-lg);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow-sticky);
}

html[data-site-theme] body.marketing [data-cart-coupon-row] {
  gap: .55rem;
}

html[data-site-theme] body.marketing [data-cart-total-row][data-total-kind="grand"],
html[data-site-theme] body.marketing .site-shop-cart-quote-panel > dl > div[data-total="grand"] {
  margin-top: .8rem;
  padding-top: 1rem;
  border-top: var(--sps-border-width) solid var(--sps-line);
}

html[data-site-theme] body.marketing [data-cart-total-row][data-total-kind="grand"] dd,
html[data-site-theme] body.marketing .site-shop-cart-quote-panel > dl > div[data-total="grand"] > dd {
  color: var(--sps-accent-strong);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 850;
}

html[data-site-theme] body.marketing [data-cart-checkout] {
  min-height: 3.15rem;
  margin-top: 1rem;
}

html[data-site-theme] body.marketing :is(.site-checkout-layout,[data-checkout-layout]) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
  gap: clamp(2rem, 4.5vw, 5.5rem);
  align-items: start;
}

html[data-site-theme] body.marketing :is(.site-checkout-col,[data-checkout-column]):last-child {
  position: sticky;
  top: 6rem;
}

html[data-site-theme] body.marketing :is(.site-checkout-panel,[data-checkout-panel]) {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border: 0;
  border-top: var(--sps-border-width) solid var(--sps-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme] body.marketing :is(.site-checkout-col,[data-checkout-column]):last-child :is(.site-checkout-panel,[data-checkout-panel]) {
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 82%, transparent);
  border-radius: var(--sps-radius-lg);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow-sticky);
}

html[data-site-theme] body.marketing :is(.site-checkout-panel-title,[data-checkout-heading]) {
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
}

html[data-site-theme] body.marketing :is(.site-checkout-pay-opt,[data-checkout-payment-option]) {
  min-height: 3.75rem;
  border: var(--sps-border-width) solid var(--sps-line);
  border-radius: var(--sps-radius-sm);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing :is(.site-checkout-pay-opt,[data-checkout-payment-option]):hover {
  border-color: color-mix(in srgb, var(--sps-accent) 52%, var(--sps-line));
}

html[data-site-theme] body.marketing :is(.site-checkout-pay-opt,[data-checkout-payment-option]):is(.is-selected,[data-selected="true"]) {
  border-color: var(--sps-accent);
  box-shadow: 0 0 0 1px var(--sps-accent);
}

html[data-site-theme] body.marketing :is(.site-checkout-item-img,[data-checkout-item-image]) {
  border-radius: var(--sps-radius-sm);
  background: var(--sps-image-bg);
}

html[data-site-theme] body.marketing :is(.site-checkout-total-row--grand,[data-total="grand"]),
html[data-site-theme] body.marketing :is(.site-checkout-quote-panel,[data-checkout-quote-panel]) > dl > div[data-total="grand"] {
  margin-top: .8rem;
  padding-top: 1rem;
  border-top: var(--sps-border-width) solid var(--sps-line);
}

html[data-site-theme] body.marketing :is(.site-checkout-total-row--grand,[data-total="grand"]) dd,
html[data-site-theme] body.marketing :is(.site-checkout-quote-panel,[data-checkout-quote-panel]) > dl > div[data-total="grand"] > dd {
  color: var(--sps-accent-strong);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 850;
}

/* Authentication and user center */

html[data-site-theme] body.marketing.auth-portal .auth-shell > main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 5rem);
  min-height: calc(100dvh - 5rem);
  padding: clamp(2rem, 6vw, 5rem) var(--sps-screen);
  background: #fff;
}

html[data-site-theme] body.marketing.auth-portal .auth-container {
  width: min(100%, 31rem);
}

html[data-site-theme] body.marketing.auth-portal .auth-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 82%, transparent);
  border-radius: var(--sps-radius-lg);
  color: var(--sps-ink);
  background: color-mix(in srgb, var(--sps-surface) 94%, transparent);
  box-shadow: var(--sps-shadow-sticky);
  backdrop-filter: blur(18px);
}

html[data-site-theme] body.marketing.auth-portal .auth-card .h1 {
  margin-bottom: .75rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.05em;
}

html[data-site-theme] body.marketing.auth-portal .auth-card .field {
  margin-top: 1rem;
}

html[data-site-theme] body.marketing.auth-portal .auth-card .input {
  min-height: 3rem;
}

html[data-site-theme] body.marketing.auth-portal .auth-card .toggle-pw {
  width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--sps-radius-sm);
}

html[data-site-theme] body.marketing.auth-portal .auth-oauth-icons {
  gap: .65rem;
}

html[data-site-theme] body.marketing.auth-portal .auth-oauth-ico {
  width: 2.75rem;
  height: 2.75rem;
  border-color: var(--sps-line);
  border-radius: var(--sps-radius-sm);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing.auth-portal .auth-card-links a {
  min-height: 2.75rem;
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .user-center-shell > main {
  color: var(--sps-ink);
  background: var(--sps-page);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .user-center-sidebar {
  border-right: var(--sps-border-width) solid var(--sps-line);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout {
  color: var(--sps-ink);
  background: var(--sps-surface);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin :where(
  .account-nav-admin-links.admin-nav .admin-nav-link,
  .account-nav-logout-btn.admin-nav-link
) {
  min-height: 2.75rem;
  border-radius: var(--sps-radius-sm);
  color: var(--sps-muted);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin :where(
  .account-nav-admin-links.admin-nav .admin-nav-link,
  .account-nav-logout-btn.admin-nav-link
):hover {
  color: var(--sps-ink);
  background: var(--sps-soft);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav .admin-nav-link.active {
  color: var(--sps-accent-strong);
  background: color-mix(in srgb, var(--sps-accent) 10%, var(--sps-surface));
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .user-center-topbar {
  border-bottom: var(--sps-border-width) solid var(--sps-line);
  background: color-mix(in srgb, var(--sps-surface) 94%, transparent);
  backdrop-filter: blur(16px);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin :where(
  .user-center-topbar-inner,
  .user-center-main.admin-main
) {
  padding-inline: var(--sps-screen);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .user-center-main.admin-main {
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin :where(
  .user-center-panel,
  .user-center-form-panel,
  .account-address-form,
  .account-bind-modal__panel,
  .admin-table-wrap
) {
  border: var(--sps-border-width) solid color-mix(in srgb, var(--sps-line) 82%, transparent);
  border-radius: var(--sps-radius);
  background: var(--sps-surface);
  box-shadow: var(--sps-shadow);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .admin-table-head .admin-table-row {
  color: var(--sps-muted);
  background: var(--sps-soft);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .admin-table-body .admin-table-row:hover {
  background: color-mix(in srgb, var(--sps-accent) 5%, var(--sps-surface));
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin :where(.admin-btn.primary, .btn.primary) {
  border-color: var(--sps-accent);
  color: #fff;
  background: var(--sps-accent);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin :where(.admin-btn.primary, .btn.primary):hover {
  border-color: var(--sps-accent-strong);
  background: var(--sps-accent-strong);
}

html[data-site-theme] body.marketing.auth-portal.user-center-admin .user-center-page-link {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--sps-radius-sm);
}

/* XJD account pages follow the compact official account-center rhythm. Keep
 * these rules in the final layer so generic page surfaces cannot override the
 * theme's high-contrast sidebar or bindings layout. */
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .user-center-shell > main {
  grid-template-columns: 136px minmax(0, 1fr);
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .user-center-sidebar {
  border-right: 0;
  background: #050505;
  color: #fff;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout {
  color: #fff;
  background: #050505;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-sider-head {
  padding: 10px 8px 9px;
  border-color: rgba(255, 255, 255, .08);
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-avatar-row {
  margin: 0 0 8px;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-avatar-link {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-color: rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout :where(
  .account-nav-avatar-img,
  .account-nav-avatar-placeholder
) {
  border-radius: 7px;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-display-name {
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-edit-name {
  min-width: 2.125rem;
  min-height: 2.125rem;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav {
  gap: 2px;
  padding: 18px 6px 8px;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav .admin-nav-link,
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-logout-btn.admin-nav-link {
  min-height: 34px;
  gap: 7px;
  padding: 7px 9px;
  color: rgba(255, 255, 255, .82);
  border-radius: 6px;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav .admin-nav-link:hover,
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-logout-btn.admin-nav-link:hover {
  color: #fff;
  background: #202020;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav .admin-nav-link.active {
  color: #050505;
  background: #fff;
  font-weight: 650;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-sider-footer {
  padding: 6px 6px 10px;
  border-color: rgba(255, 255, 255, .08);
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-bindings {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
  scrollbar-width: thin;
  scrollbar-color: #b8bec8 transparent;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row {
  --binding-brand: #475467;
  position: relative;
  flex: 0 0 9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .875rem;
  margin: 0;
  padding: 1rem .75rem;
  border: 1px solid color-mix(in srgb, var(--binding-brand) 18%, #e4e7ec);
  border-radius: 10px;
  background: color-mix(in srgb, var(--binding-brand) 3%, #fff);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row + .account-binding-row {
  margin: 0;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="phone"] { --binding-brand: #16875d; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="email"] { --binding-brand: #d92d20; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="google"] { --binding-brand: #4285f4; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="x"] { --binding-brand: #111; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="facebook"] { --binding-brand: #1877f2; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="wechat"] { --binding-brand: #07a953; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="qq"] { --binding-brand: #087fb7; }
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row[data-provider="paypal"] { --binding-brand: #003087; }

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row:hover,
html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row:focus-within {
  border-color: color-mix(in srgb, var(--binding-brand) 46%, #d0d5dd);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
  transform: translateY(-1px);
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row.is-unbound {
  --binding-brand: #667085;
  background: #f9fafb;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row.is-bound::after {
  position: absolute;
  top: .625rem;
  right: .625rem;
  display: inline-grid;
  width: 1.125rem;
  height: 1.125rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #16875d;
  content: "✓";
  font-family: Arial, sans-serif;
  font-size: .65rem;
  font-weight: 700;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-main {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-title {
  flex-direction: column;
  gap: .625rem;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-ico {
  width: 3.25rem;
  height: 3.25rem;
  border-color: color-mix(in srgb, var(--binding-brand) 24%, #e4e7ec);
  border-radius: 10px;
  color: var(--binding-brand);
  background: color-mix(in srgb, var(--binding-brand) 7%, #fff);
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-ico .account-binding-svg {
  width: auto;
  height: auto;
  color: currentColor;
  font-size: 1.15rem;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-name {
  width: 100%;
  overflow: hidden;
  color: #344054;
  font-size: .78rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-hint {
  min-height: 2.7em;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #667085;
  font-size: .72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-actions {
  width: 100%;
  margin: 0;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-actions :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn) {
  width: 100%;
  min-height: 2.75rem;
  padding: .65rem .75rem;
  border-radius: 6px;
  font-size: .74rem;
  line-height: 1.2;
}

html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-actions :where(:is(.site-btn,[data-checkout-button],[data-cart-button]), .btn):not(:disabled):active {
  transform: scale(.98);
}

@media (max-width: 767px) {
  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-sider-head {
    padding: 1rem;
  }

  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-avatar-row {
    margin: 0;
  }

  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-avatar-link {
    margin: 0;
  }

  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav {
    gap: .375rem;
    padding: .75rem 1rem;
  }

  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav .admin-nav-link,
  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin .account-nav-logout-btn.admin-nav-link {
    min-height: 2.75rem;
    padding: .7rem .9rem;
  }

  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-bindings {
    overflow-x: auto;
    padding: 1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  html[data-site-theme="xjd"] body.marketing.auth-portal.user-center-admin #account-bindings .account-binding-row {
    flex-basis: 8.5rem;
    scroll-snap-align: start;
  }
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-shell > main {
  color: var(--tone-ink);
  background: #fff;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-sidebar {
  width: clamp(13.5rem, 16vw, 16rem);
  border-right: 1px solid rgba(255, 216, 77, .28);
  color: rgba(255, 248, 220, .72);
  background: var(--tone-deep);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout {
  color: rgba(255, 248, 220, .72);
  background: var(--tone-deep);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav-sider-head,
html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav-sider-footer {
  border-color: rgba(255, 216, 77, .2);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav-sider-head {
  padding: 1.5rem 1.25rem 1.35rem;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-avatar-link {
  width: 3.5rem;
  height: 3.5rem;
  border-color: rgba(255, 216, 77, .55);
  border-radius: 50%;
  background: rgba(255, 216, 77, .08);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav--admin-layout .account-nav-display-name {
  margin-top: .75rem;
  color: #fff8dc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 500;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav {
  padding: 1.1rem .75rem;
  gap: .3rem;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(
  .account-nav-admin-links.admin-nav .admin-nav-link,
  .account-nav-logout-btn.admin-nav-link
) {
  min-height: 3rem;
  padding-inline: 1rem;
  border-radius: 0;
  color: rgba(255, 248, 220, .68);
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .065em;
  text-transform: uppercase;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(
  .account-nav-admin-links.admin-nav .admin-nav-link,
  .account-nav-logout-btn.admin-nav-link
):hover {
  color: var(--tone-accent);
  background: rgba(255, 216, 77, .1);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-nav-admin-links.admin-nav .admin-nav-link.active {
  color: var(--tone-ink);
  background: var(--tone-accent);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-right,
html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-main.admin-main {
  color: var(--tone-ink);
  background: #fff;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-topbar {
  border-bottom: 1px solid var(--tone-line);
  background: #fff;
  backdrop-filter: none;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-topbar-inner {
  min-height: 5rem;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-topbar .admin-breadcrumb {
  color: var(--tone-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.025em;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .user-center-main.admin-main {
  background: #fff;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(
  .user-center-panel,
  .user-center-form-panel,
  .account-address-form,
  .account-bind-modal__panel,
  .admin-table-wrap
) {
  border: 1px solid var(--tone-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-binding-row {
  border: 1px solid var(--tone-line);
  border-radius: 0;
  background: #fff;
  transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-binding-row:hover {
  border-color: var(--tone-accent-dark);
  box-shadow: 4px 4px 0 rgba(255, 216, 77, .42);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin .account-binding-ico {
  border-color: var(--tone-deep);
  border-radius: 0;
  color: var(--tone-accent);
  background: var(--tone-deep);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(.admin-btn.primary, .btn.primary) {
  border-color: var(--tone-accent);
  border-radius: 0;
  color: var(--tone-ink);
  background: var(--tone-accent);
  box-shadow: none;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(.admin-btn.primary, .btn.primary):hover {
  border-color: var(--tone-gold-soft);
  color: var(--tone-ink);
  background: var(--tone-gold-soft);
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(
  .admin-btn,
  .btn,
  .admin-nav-link
):focus-visible {
  outline: 2px solid var(--tone-accent);
  outline-offset: 3px;
  box-shadow: none;
}

html[data-site-theme="blackgold"] body.marketing.auth-portal.user-center-admin :where(
  .admin-btn,
  .btn,
  .admin-nav-link
):active {
  transform: scale(.98);
}

/* Theme-specific finishing */

html[data-site-theme="ebooom"] body.marketing :where(
  :is(.site-page-title,[data-checkout-title]),
  .site-article-doc > div > section[data-page-kind="article"] > header > h1,
  .site-shop-detail-title,
  :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2),
  :is(.site-error-page,[data-shop-detail-error]) header > h1,
  .auth-card .h1
) {
  font-weight: 400;
  letter-spacing: -.025em;
}

html[data-site-theme="ebooom"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page) {
  background: linear-gradient(110deg, var(--eb-paper), var(--eb-ivory));
}

html[data-site-theme="ebooom"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
  border-radius: 0;
  background: transparent;
  transform: rotate(32deg);
}

html[data-site-theme="ebooom"] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  .site-article-product-rec-card,
  .site-shop-detail-rec-card
) {
  box-shadow: none;
}

html[data-site-theme="ebooom"] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  .site-article-product-rec-card,
  .site-shop-detail-rec-card
):hover {
  border-color: var(--eb-gold);
  box-shadow: none;
}

html[data-site-theme="xjdbikes"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page) {
  background:
    radial-gradient(circle at 86% 20%, var(--xj-yellow) 0 3rem, transparent 3.05rem),
    linear-gradient(125deg, var(--xj-sky), #fff 72%);
}

html[data-site-theme="xjdbikes"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
  border: 2.25rem solid rgba(255, 255, 255, .42);
  background: transparent;
}

html[data-site-theme="pink"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
  border-radius: 48% 52% 42% 58%;
}

html[data-site-theme="green"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
  border-radius: 62% 38% 58% 42%;
  transform: rotate(-12deg);
}

html[data-site-theme="blue"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page) {
  background-color: var(--tone-pale);
  background-image:
    linear-gradient(rgba(23, 105, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 105, 255, .055) 1px, transparent 1px),
    linear-gradient(128deg, var(--tone-soft), var(--tone-pale) 64%);
  background-size: 32px 32px, 32px 32px, auto;
}

html[data-site-theme="blue"] body.marketing .site-page-kicker::before {
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: .6rem;
  vertical-align: middle;
  content: "";
  background: currentColor;
}

html[data-site-theme="orange"] body.marketing :where(
  :is(.site-page-title,[data-checkout-title]),
  .site-article-doc > div > section[data-page-kind="article"] > header > h1,
  .site-shop-detail-title,
  :is(.site-section-heading, :is(.site-home-section,.site-home-page > section[data-section-kind]) > div > h2),
  :is(.site-error-page,[data-shop-detail-error]) header > h1
) {
  font-weight: 950;
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

html[data-site-theme="orange"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page) {
  border-bottom: 2px solid var(--tone-ink);
  background: var(--tone-accent);
}

html[data-site-theme="orange"] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
  border: 2px solid var(--tone-ink);
  border-radius: 0;
  background: var(--tone-yellow);
  box-shadow: 8px 8px 0 var(--tone-ink);
  transform: rotate(8deg);
}

html[data-site-theme="orange"] body.marketing :where(
  .site-article-doc :is(.site-shop-card,[data-shop-review-product-card]),
  .site-article-doc .site-news-article-card,
  .site-tag-pill,
  .site-search-result-group,
  :is(.site-search-item, .site-search-root > section[role="dialog"] > ul > li),
  .site-empty-state,
  :is(.site-error-page,[data-shop-detail-error]) aside,
  [data-cart-summary],
  :is(.site-checkout-col,[data-checkout-column]):last-child :is(.site-checkout-panel,[data-checkout-panel]),
  .auth-card,
  .user-center-panel,
  .admin-table-wrap
) {
  border-color: var(--tone-ink);
}

html[data-site-theme="orange"] body.marketing :is(
  .site-pager-num.is-current,
  .site-pager > div > strong[aria-current="page"]
) {
  color: var(--tone-ink);
  border-color: var(--tone-ink);
  background: var(--tone-yellow);
  box-shadow: 2px 2px 0 var(--tone-ink);
}

/* Responsive */

@media (min-width: 1024px) {
  html[data-site-theme] body.marketing :is(.site-shop-grid,[data-shop-grid])[data-grid-kind="home"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  html[data-site-theme] {
    --sps-screen: clamp(1rem, 3vw, 2.25rem);
  }

  html[data-site-theme] body.marketing :is(.site-shop-detail-layout,[data-shop-detail-layout]) {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .86fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  html[data-site-theme] body.marketing :where(.site-shop-layout, .site-news-layout) {
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  html[data-site-theme] body.marketing :is(.site-shop-detail-layout,[data-shop-detail-layout]),
  html[data-site-theme] body.marketing [data-cart-layout],
  html[data-site-theme] body.marketing :is(.site-checkout-layout,[data-checkout-layout]) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing :is(.site-shop-detail-info,[data-shop-detail-info]),
  html[data-site-theme] body.marketing [data-cart-summary],
  html[data-site-theme] body.marketing :is(.site-checkout-col,[data-checkout-column]):last-child {
    position: static;
  }

  html[data-site-theme] body.marketing :where(.site-shop-layout, .site-news-layout) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing :where(.site-shop-sidebar, .site-news-sidebar) {
    display: none;
  }

  html[data-site-theme] body.marketing .site-article-rich-layout {
    flex-direction: column;
    gap: 1rem;
  }

  html[data-site-theme] body.marketing .site-article-toc-wrap {
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
  }

  html[data-site-theme] body.marketing .site-article-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  html[data-site-theme] {
    --sps-screen: 1rem;
    --sps-section-y: 3.75rem;
    --sps-shadow: 0 10px 28px rgba(17, 18, 19, .07);
    --sps-shadow-hover: 0 14px 34px rgba(17, 18, 19, .1);
  }

  html[data-site-theme] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page) {
    padding-block: 2.75rem;
  }

  html[data-site-theme] body.marketing .site-page-hero:not(.site-shop-cart-page):not(.site-checkout-page)::after {
    top: -6rem;
    right: -7rem;
    width: 16rem;
  }

  html[data-site-theme] body.marketing :is(.site-page-title,[data-checkout-title]) {
    max-width: none;
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

  html[data-site-theme] body.marketing .site-article-doc-inner {
    padding-top: 1rem;
  }

  html[data-site-theme] body.marketing .site-list-titlebar {
    align-items: flex-start;
  }

  html[data-site-theme] body.marketing .site-article-doc-body--marketing-list :is(.site-page-title,[data-checkout-title]) {
    font-size: clamp(2rem, 10vw, 3.25rem);
  }

  html[data-site-theme] body.marketing .site-shop-detail-title,
  html[data-site-theme] body.marketing .site-article-doc > div > section[data-page-kind="article"] > header > h1 {
    font-size: clamp(2rem, 10vw, 3.35rem);
  }

  html[data-site-theme] body.marketing :is(.site-shop-detail-actions,[data-shop-detail-actions]) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing :where(
    :is(.site-shop-detail-desc,[data-shop-detail-description]),
    :is(.site-shop-detail-reviews,[data-shop-reviews]),
    :is(.site-shop-detail-recs,[data-shop-recommendations])
  ) {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
  }

  html[data-site-theme] body.marketing :where(.site-article-rich, .site-shop-detail-desc-body) {
    width: 100%;
    max-width: none;
    font-size: 1rem;
    line-height: 1.75;
  }

  html[data-site-theme] body.marketing .site-pager {
    justify-content: center;
  }

  html[data-site-theme] body.marketing :is(.site-pager-nums, .site-pager > div) {
    max-width: calc(100vw - 9rem);
    overflow-x: auto;
    scrollbar-width: none;
  }

  html[data-site-theme] body.marketing :is(.site-pager-nums, .site-pager > div)::-webkit-scrollbar {
    display: none;
  }

  html[data-site-theme] body.marketing :where(.site-shop-cart-page, .site-checkout-page) {
    padding-block: 2.75rem 4rem;
  }

  html[data-site-theme] body.marketing :where(.site-shop-cart-page, .site-checkout-page) :is(.site-page-title,[data-checkout-title]) {
    font-size: clamp(2.15rem, 11vw, 3.5rem);
  }

  html[data-site-theme] body.marketing [data-cart-toolbar] {
    flex-wrap: nowrap;
  }

  html[data-site-theme] body.marketing [data-cart-select-all] {
    min-width: 0;
    flex: 1 1 auto;
  }

  html[data-site-theme] body.marketing [data-cart-item] {
    grid-template-columns: auto 4.5rem minmax(0, 1fr);
    gap: .8rem;
  }

  html[data-site-theme] body.marketing .site-shop-cart-panel[data-cart-mode="share"] [data-cart-item] {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing .site-shop-cart-panel[data-cart-mode="share"][data-cart-selection="enabled"] [data-cart-item] {
    grid-template-columns: auto 4.5rem minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing [data-cart-image] {
    width: 4.5rem;
    min-width: 4.5rem;
  }

  html[data-site-theme] body.marketing [data-cart-foot] {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-site-theme] body.marketing [data-cart-quantity-form] {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  html[data-site-theme] body.marketing [data-cart-summary],
  html[data-site-theme] body.marketing :is(.site-checkout-col,[data-checkout-column]):last-child :is(.site-checkout-panel,[data-checkout-panel]) {
    padding: 1rem;
  }

  html[data-site-theme] body.marketing :is(.site-checkout-row,[data-checkout-row]),
  html[data-site-theme] body.marketing :is(.site-checkout-row--country,[data-row-kind="country"]),
  html[data-site-theme] body.marketing :is(.site-checkout-row--recipient,[data-row-kind="recipient"]),
  html[data-site-theme] body.marketing :is(.site-checkout-admin-levels,[data-checkout-admin-levels]) {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing.auth-portal .auth-shell > main {
    padding: 1.25rem 1rem 3rem;
    align-items: flex-start;
  }

  html[data-site-theme] body.marketing.auth-portal .auth-card {
    padding: 1.25rem;
  }
}

@media (max-width: 420px) {
  html[data-site-theme] body.marketing .site-list-titlebar {
    gap: .65rem;
  }

  html[data-site-theme] body.marketing [data-cart-item] {
    grid-template-columns: auto 3.75rem minmax(0, 1fr);
    gap: .65rem;
  }

  html[data-site-theme] body.marketing .site-shop-cart-panel[data-cart-mode="share"] [data-cart-item] {
    grid-template-columns: 3.75rem minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing .site-shop-cart-panel[data-cart-mode="share"][data-cart-selection="enabled"] [data-cart-item] {
    grid-template-columns: auto 3.75rem minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing [data-cart-image] {
    width: 3.75rem;
    min-width: 3.75rem;
  }

  html[data-site-theme] body.marketing [data-cart-coupon-row] {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-site-theme] body.marketing [data-cart-coupon-row] :is(.site-btn,[data-checkout-button],[data-cart-button]) {
    width: 100%;
  }

  html[data-site-theme] body.marketing .site-tags-cloud {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme] body.marketing *,
  html[data-site-theme] body.marketing *::before,
  html[data-site-theme] body.marketing *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}