/*
 * 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);
}

/* 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(
  .site-section-inner,
  .site-article-doc-inner,
  .site-footer-inner
) {
  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(
  .site-page-title,
  .site-article-h1,
  .site-shop-detail-title,
  .site-section-heading,
  .site-error-title,
  .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(.site-btn, .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(.site-btn, .btn, .admin-btn):active:not(:disabled) {
  transform: translateY(1px) scale(.985);
}

html[data-site-theme] body.marketing :where(.site-btn, .btn, .admin-btn):disabled,
html[data-site-theme] body.marketing :where(.site-btn, .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,
  .site-search-input,
  .site-try-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,
  .site-search-input,
  .site-try-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,
  .site-search-input,
  .site-try-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 .site-search-field > .site-search-input,
html[data-site-theme] body.marketing .site-search-field > .site-search-input:hover,
html[data-site-theme] body.marketing .site-search-field > .site-search-input: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 .site-section-inner {
  position: relative;
  z-index: 1;
}

html[data-site-theme] body.marketing .site-page-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 {
  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 {
  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-body--marketing-list > .site-page-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 .site-page-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 .site-breadcrumb {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

html[data-site-theme] body.marketing .site-breadcrumb-list {
  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 .site-breadcrumb-item a {
  color: var(--sps-muted);
  text-decoration: none;
}

html[data-site-theme] body.marketing .site-breadcrumb-item a:hover {
  color: var(--sps-accent-strong);
}

html[data-site-theme] body.marketing .site-breadcrumb-item: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-h, .site-news-sidebar-h) {
  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 :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 :where(.site-shop-cat-link, .site-news-cat-link).is-active {
  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-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] .site-mobile-cat-icon {
  transform: rotate(180deg);
}

html[data-site-theme] body.marketing .site-mobile-cat-icon {
  transition: transform var(--sps-transition);
}

html[data-site-theme] body.marketing .site-mobile-cat-panel {
  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) {
  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):hover {
  color: var(--sps-ink);
  border-color: var(--sps-line);
  background: var(--sps-surface);
  transform: translateY(-1px);
}

html[data-site-theme] body.marketing .site-pager-num.is-current {
  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 {
  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 .site-shop-card,
  .site-article-doc .site-news-article-card,
  .site-search-result-group,
  .site-search-item,
  .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 :where(
  .site-article-doc .site-shop-card,
  .site-article-doc .site-news-article-card,
  .site-search-item,
  .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 .site-shop-card,
  .site-article-doc .site-news-article-card,
  .site-search-item,
  .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 .site-news-article-thumb,
  .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 .site-news-article-thumb 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 .site-shop-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,
  .site-news-article-title,
  .site-search-item-title,
  .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(
  .site-shop-price-now,
  .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 .site-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 .site-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 .site-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 .site-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 .site-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 .site-shop-detail-actions .site-btn {
  min-height: 3.15rem;
}

html[data-site-theme] body.marketing .site-shop-detail-desc,
html[data-site-theme] body.marketing .site-shop-detail-reviews,
html[data-site-theme] body.marketing .site-shop-detail-recs {
  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-h
) {
  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-rec-list {
  gap: clamp(.85rem, 1.6vw, 1.35rem);
}

/* Articles and rich text */

html[data-site-theme] body.marketing .site-article-h1,
html[data-site-theme] body.marketing .site-article-meta-row {
  width: min(100%, var(--sps-reading-wide));
  max-width: var(--sps-reading-wide);
}

html[data-site-theme] body.marketing .site-article-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-meta-row {
  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-title {
  color: var(--sps-ink);
  font-family: var(--sps-title-font);
  font-size: .9rem;
}

html[data-site-theme] body.marketing .site-article-toc-list 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 .site-article-toc-list 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 .site-article-after-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(.site-article-tag, .site-news-tag, .site-tag-pill, .site-search-item-kind) {
  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-tag-detail-count {
  color: var(--sps-muted);
  font-variant-numeric: tabular-nums;
}

html[data-site-theme] body.marketing .site-search-form {
  max-width: var(--sps-reading-wide);
}

html[data-site-theme] body.marketing .site-search-field {
  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 .site-search-field: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 .site-search-results {
  display: grid;
  gap: .75rem;
}

html[data-site-theme] body.marketing .site-search-item-link {
  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 > i {
  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 .site-empty-state-title {
  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 .site-empty-state-message {
  max-width: 36rem;
  margin: 0 0 .5rem;
  line-height: 1.65;
}

html[data-site-theme] body.marketing :where(
  .site-shop-empty-main,
  .site-news-empty-main,
  .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-empty-main,
  .site-news-empty-main,
  .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 .site-error-hero {
  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 .site-error-wrap {
  text-align: left;
}

html[data-site-theme] body.marketing .site-error-code {
  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 .site-error-title {
  max-width: 16ch;
  margin-top: 1.5rem;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1;
}

html[data-site-theme] body.marketing .site-error-panel {
  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) .site-page-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 .site-shop-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 .site-shop-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 .site-shop-cart-check {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--sps-accent);
}

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

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

html[data-site-theme] body.marketing .site-shop-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.is-share .site-shop-cart-item {
  grid-template-columns: minmax(5.75rem, 8vw) minmax(0, 1fr);
}

html[data-site-theme] body.marketing .site-shop-cart-item-img {
  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 .site-shop-cart-item-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 .site-shop-cart-item-title:hover {
  color: var(--sps-accent-strong);
  text-decoration: none;
}

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

html[data-site-theme] body.marketing .site-shop-cart-qty-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 .site-shop-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 .site-shop-cart-coupon-row {
  gap: .55rem;
}

html[data-site-theme] body.marketing .site-shop-cart-total-row--grand {
  margin-top: .8rem;
  padding-top: 1rem;
  border-top: var(--sps-border-width) solid var(--sps-line);
}

html[data-site-theme] body.marketing .site-shop-cart-total-row--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 .site-shop-cart-checkout {
  min-height: 3.15rem;
  margin-top: 1rem;
}

html[data-site-theme] body.marketing .site-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 .site-checkout-col:last-child {
  position: sticky;
  top: 6rem;
}

html[data-site-theme] body.marketing .site-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 .site-checkout-col:last-child .site-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 .site-checkout-panel-title {
  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 .site-checkout-pay-opt {
  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 .site-checkout-pay-opt:hover {
  border-color: color-mix(in srgb, var(--sps-accent) 52%, var(--sps-line));
}

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

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

html[data-site-theme] body.marketing .site-checkout-total-row--grand {
  margin-top: .8rem;
  padding-top: 1rem;
  border-top: var(--sps-border-width) solid var(--sps-line);
}

html[data-site-theme] body.marketing .site-checkout-total-row--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-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:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--sps-accent) 15%, transparent), transparent 24rem),
    radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--sps-accent) 9%, transparent), transparent 28rem),
    var(--sps-page);
}

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-app {
  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);
}

/* Theme-specific finishing */

html[data-site-theme="ebooom"] body.marketing :where(
  .site-page-title,
  .site-article-h1,
  .site-shop-detail-title,
  .site-section-heading,
  .site-error-title,
  .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 .site-shop-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 .site-shop-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(
  .site-page-title,
  .site-article-h1,
  .site-shop-detail-title,
  .site-section-heading,
  .site-error-title
) {
  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 .site-shop-card,
  .site-article-doc .site-news-article-card,
  .site-tag-pill,
  .site-search-result-group,
  .site-search-item,
  .site-empty-state,
  .site-error-panel,
  .site-shop-cart-summary,
  .site-checkout-col:last-child .site-checkout-panel,
  .auth-card,
  .user-center-panel,
  .admin-table-wrap
) {
  border-color: var(--tone-ink);
}

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

/* Responsive */

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

  html[data-site-theme] body.marketing .site-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 .site-shop-detail-layout,
  html[data-site-theme] body.marketing .site-shop-cart-layout,
  html[data-site-theme] body.marketing .site-checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-site-theme] body.marketing .site-shop-detail-info,
  html[data-site-theme] body.marketing .site-shop-cart-summary,
  html[data-site-theme] body.marketing .site-checkout-col: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 .site-page-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 .site-page-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-h1 {
    font-size: clamp(2rem, 10vw, 3.35rem);
  }

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

  html[data-site-theme] body.marketing :where(
    .site-shop-detail-desc,
    .site-shop-detail-reviews,
    .site-shop-detail-recs
  ) {
    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 .site-pager-nums {
    max-width: calc(100vw - 9rem);
    overflow-x: auto;
    scrollbar-width: none;
  }

  html[data-site-theme] body.marketing .site-pager-nums::-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) .site-page-title {
    font-size: clamp(2.15rem, 11vw, 3.5rem);
  }

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

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

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

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

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

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

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

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

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

  html[data-site-theme] body.marketing.auth-portal .auth-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 .site-shop-cart-item {
    grid-template-columns: auto 3.75rem minmax(0, 1fr);
    gap: .65rem;
  }

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

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

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

  html[data-site-theme] body.marketing .site-shop-cart-coupon-row .site-btn {
    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;
  }
}