:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.st-site {
  
  /* Exact santosbikes.com colours that are not in the ACSS palette
     (primary #f5841f, base #171618 and neutral #444 are set in the ACSS dashboard) */
  --st-surface-muted: #f7f7f7;
  --st-dropdown-bg: #2e2d2f;
  --st-heading: #2d2e33;
  --st-text-muted: #999999;
  --st-text-soft: #d3d3d3;
  /* Source sizes mapped onto ACSS tokens (value at 1440px in comment) */
  --st-text-body: var(--text-m);                  /* 18px */
  --st-text-small: calc(var(--text-xs) * 1.03);  /* 14.4px */
  --st-display-xl: calc(var(--h1) * 1.9);        /* 90px */
  --st-display-l: calc(var(--h1) * 1.14);        /* 54px */
  --st-gap: calc(var(--space-s) * 0.5);        /* 10px */
  --st-pad: calc(var(--space-s) * 2);          /* 40px */
  --st-pad-s: var(--space-s);        /* 20px */
  --st-tracking: calc(var(--space-s) * 0.1);    /* 2px */
  --st-radius-s: calc(var(--radius) * 0.4);       /* 2px */
  --st-header-height: calc(var(--space-s) * 3.5); /* 70px */
  --btn-text-transform: uppercase;
  --btn-font-size: var(--st-text-body);
  --btn-font-weight: 400;
  --btn-line-height: 2.1;
  
  --btn-padding-inline: calc(var(--space-s) * 0.75);
  --btn-padding-block: 0;
  --btn-border-width: 1px;
  --btn-border-radius: var(--st-radius-s);
  --btn-radius: var(--st-radius-s);
  --btn-min-width: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--st-text-body);
  font-weight: 300;
  line-height: 1.3;
  color: var(--black);
  background-color: var(--white);
  & .btn--primary {
    --btn-text-color: var(--white);
    --btn-text-color-hover: var(--primary);
    --btn-background-hover: transparent;
    --btn-border-color-hover: var(--primary);
  }
  & :where(a) { text-decoration: none; }

  text-wrap: wrap;
  & :where(p, h1, h2, h3, h4, li) { text-wrap: wrap; }

}
.st-header {
  
  display: block;
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  padding-inline: var(--st-pad);
  background-color: var(--base);
  color: var(--white);
  font-family: Roboto, sans-serif;

  @media (width < 60em) {
    position: sticky;
  }

}
.st-header__inner {
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-block-size: var(--st-header-height);

}
.st-header__logo {
  
  display: block;
  flex-shrink: 0;
  line-height: 0;

}
.st-header__logo-img {
  
  inline-size: calc(var(--space-s) * 7.5); /* 150px */
  block-size: auto;

}
.st-header__menu-toggle {
  
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: calc(var(--text-m) * 0.945);
  text-transform: none;
  cursor: pointer;

  @media (width < 60em) {
    display: block;
    &[aria-expanded="true"] { color: var(--primary); }
  }

}
.st-nav {
  
  display: flex;
  align-items: center;
  gap: calc(var(--space-s) * 2);

  @media (width < 60em) {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
    max-block-size: calc(100svh - var(--st-header-height));
    overflow-y: auto;
    padding: var(--space-s) var(--st-pad) var(--st-pad);
    background-color: var(--base);
    .st-header__menu-toggle[aria-expanded="true"] + & { display: flex; }
  }

}
.st-nav__list {
  
  display: flex;
  align-items: center;
  gap: calc(var(--space-s) * 2);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (width < 60em) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

}
.st-nav__item {
  
  position: relative;
  margin: 0;

}
.st-nav__link {
  
  display: flex;
  align-items: center;
  min-block-size: var(--st-header-height);
  padding: 0 calc(var(--space-s) * 0.25);
  border: 0;
  background: none;
  color: var(--white);
  font-family: Roboto, sans-serif;
  font-size: calc(var(--text-m) * 0.945);
  font-weight: 300;
  cursor: pointer;
  transition: color var(--transition-duration, .2s) ease;
  &:hover, &:focus-visible, &[aria-expanded="true"] { color: var(--primary); }

  @media (width < 60em) {
    min-block-size: 0;
    padding-block: calc(var(--space-s) * 0.5);
    inline-size: 100%;
  }

}
.st-dropdown {
  
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(var(--space-s) * -1.25);
  z-index: 10;
  display: none;
  gap: var(--space-s);
  inline-size: calc(var(--space-s) * 12.5); /* 250px */
  padding: calc(var(--space-s) * 1.25);       /* 25px */
  background-color: var(--st-dropdown-bg);
  box-shadow: var(--box-shadow-1);
  .st-nav__toggle[aria-expanded="true"] + & { display: flex; }

  @media (width < 60em) {
    position: static;
    inline-size: auto;
    flex-direction: column;
    box-shadow: none;
  }

}
.st-dropdown__col {
  
  margin: 0;
  padding: 0;
  list-style: none;

}
.st-dropdown__link {
  
  display: block;
  padding-block: calc(var(--space-s) * 0.3);
  color: var(--white);
  font-family: Roboto, sans-serif;
  font-size: var(--text-xs);
  font-weight: 400;
  &:hover, &:focus-visible { color: var(--primary); }

}
.st-dropdown--wide {
  
  inline-size: calc(var(--space-s) * 37.5); /* 750px */
  & > * { flex: 1; }

  @media (width < 60em) {
    inline-size: auto;
  }

  /* last item: right-aligned like the source (UIkit shifts it to stay in the viewport) */
  .st-nav__item:last-child > & {
    inset-inline: auto calc(var(--space-s) * -6);
  }

}
.st-dropdown__group {
  
  & + & { margin-block-start: calc(var(--space-s) * 0.3); }

}
.st-dropdown__sub {
  
  margin: 0;
  padding: calc(var(--space-s) * 0.3) 0 0 var(--space-s);
  list-style: none;
  & .st-dropdown__link { padding-block: calc(var(--space-s) * 0.1); }

}
.st-lang {
  
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;

}
.st-lang__link {
  
  display: block;
  line-height: 0;

}
.st-lang__flag {
  
  inline-size: calc(var(--space-s) * 0.9); /* 18px */
  block-size: auto;

}
.st-main {
  
  display: block;

}
.st-footer {
  
  display: block;
  padding: 0;
  margin-block-end: calc(var(--space-s) * 5.5);
  font-size: var(--st-text-small);
  line-height: 1.3;
  color: var(--st-text-muted);

}
.st-footer__inner {
  
  padding: var(--st-pad);
  background-color: var(--neutral);

}
.st-footer__grid {
  
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-m);
  max-inline-size: calc(var(--content-width) * 1.17); /* 1600px */
  margin-inline: auto;

  @media (width < 60em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (width < 40em) {
    grid-template-columns: minmax(0, 1fr);
  }

}
.st-footer__col {
  
  & > * + * { margin-block-start: var(--st-pad-s); }
  & .st-footer__title + * { margin-block-start: 0; }
  & .st-footer__text + .st-footer__title { margin-block-start: var(--space-m); }

}
.st-footer__title {
  
  margin: 0;
  color: var(--white);
  font-weight: 400;
  line-height: 2.36; /* 34px line like the source */

}
.st-footer__text {
  
  margin: 0;
  font-weight: 300;
  max-inline-size: none;

}
.st-footer__text--soft {
  
  color: var(--st-text-soft);

}
.st-footer__link {
  
  color: var(--white);
  font-weight: 300;
  &:hover, &:focus-visible { color: var(--primary); }

}
.st-footer__social {
  
  display: flex;
  gap: calc(var(--space-s) * 0.4);
  margin-block-start: var(--space-m);

}
.st-footer__social-link {
  
  display: inline-flex;
  color: var(--st-text-muted);
  &:hover, &:focus-visible { color: var(--white); }

}
.st-footer__social-icon {
  
  inline-size: var(--space-s); /* 20px */
  block-size: var(--space-s);
  fill: currentColor;
  & * { fill: currentColor; }

}
.st-footer__list {
  
  margin: 0;
  padding: 0;
  list-style: none;

}
.st-footer__title-link {
  
  color: var(--white);
  &:hover { color: var(--primary); }

}
.st-newsletter {
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--st-gap);
  margin-block-start: var(--st-pad-s);

}
.st-newsletter__input {
  
  inline-size: 60%;
  padding: 0 calc(var(--space-s) * 0.15);
  border: 1px solid var(--neutral-light);
  border-radius: var(--st-radius-s);
  background-color: var(--white);
  color: var(--black);
  font: inherit;
  font-size: var(--st-text-small);
  line-height: 1.3;
  &::placeholder { color: var(--neutral); }

}
.st-newsletter__check {
  
  display: flex;
  align-items: center;
  gap: var(--st-gap);
  align-self: stretch;
  padding: calc(var(--space-s) * 0.75);
  border: 1px solid var(--neutral-light);
  border-radius: var(--st-radius-s);
  color: var(--neutral-light);
  cursor: pointer;

}
.st-newsletter__checkbox {
  
  inline-size: calc(var(--space-s) * 0.9);
  block-size: calc(var(--space-s) * 0.9);
  margin: 0;
  accent-color: var(--primary);

}
.st-newsletter__submit {
  
  margin-block-start: var(--st-gap);
  padding: var(--st-gap) calc(var(--space-s) * 0.75);
  border: 0;
  background-color: var(--black);
  color: var(--white);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  &:hover, &:focus-visible { background-color: var(--primary); }

}
.st-footer__bottom {
  
  padding: calc(var(--st-pad) * 1.45) var(--st-pad) var(--st-pad);
  border-radius: 0 0 calc(var(--radius) * 6) calc(var(--radius) * 6); /* 30px */
  background-color: var(--black);
  text-align: center;

}
.st-footer__legal {
  
  margin: 0 auto;
  max-inline-size: none;
  font-weight: 300;

}
.st-hero {
  
  position: relative;
  padding: 0;
  overflow: hidden;
  background-color: var(--st-surface-muted);
  &:hover .st-hero__nav, &:focus-within .st-hero__nav { opacity: 1; }

}
.st-hero__track {
  
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  block-size: 100svh;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }

}
.st-hero__slide {
  
  position: relative;
  display: flex;
  align-items: flex-start;
  scroll-snap-align: start;
  overflow: hidden;

}
.st-hero__image {
  
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;

}
.st-hero__content {
  
  position: relative;
  padding: calc(var(--space-s) * 7) calc(var(--space-s) * 3) var(--st-pad);
  color: var(--white);

  @media (width < 60em) {
    padding: calc(var(--space-s) * 3) var(--space-s) var(--space-s);
  }

}
.st-hero__title {
  
  margin: 0 0 var(--st-pad-s);
  max-inline-size: none;
  color: var(--white);
  font-size: var(--st-display-xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--st-tracking);
  text-transform: uppercase;

  @media (width < 40em) {
    font-size: calc(var(--h1) * 1.2);
  }

}
.st-dot {
  
  color: var(--primary);

}
.st-hero__lead {
  
  margin: 0 0 calc(var(--space-s) * 3.15);
  max-inline-size: none;
  color: var(--white);
  font-size: calc(var(--text-l) * 1.05); /* 25.2px */
  font-weight: 300;
  line-height: 1.3;

}
.st-hero__meta {
  
  display: grid;
  gap: calc(var(--space-s) * 0.7);
  margin: 0 0 calc(var(--space-s) * 3.95);
  padding: 0;
  list-style: none;

}
.st-hero__meta-link {
  
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-s) * 0.2);
  color: var(--white);
  font-size: var(--text-s); /* 15px */
  font-weight: 300;
  &:hover, &:focus-visible { color: var(--primary); }

}
.st-hero__meta-icon {
  
  inline-size: var(--space-s); /* 20px */
  block-size: calc(var(--space-s) * 0.9);
  flex-shrink: 0;
  color: currentColor;
  & * { stroke: currentColor; }

}
.st-hero__btn {
  
  display: inline-flex;

}
.st-hero__nav {
  
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: calc(var(--space-s) * 0.75);
  border: 0;
  background-color: var(--white);
  color: var(--black);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-duration, .2s) ease;
  &:focus-visible { opacity: 1; }

}
.st-hero__nav--prev {
  
  inset-inline-start: 0;

}
.st-hero__nav-icon {
  
  inline-size: calc(var(--space-s) * 0.7); /* 14px */
  block-size: calc(var(--space-s) * 1.2);   /* 24px */
  & * { stroke: currentColor; }

}
.st-hero__nav--next {
  
  inset-inline-end: 0;

}
.st-usp {
  
  padding: 0 calc(var(--space-s) * 2) var(--space-s);
  background-color: var(--white);

  @media (width < 60em) {
    padding-inline: var(--space-s);
  }

}
.st-usp__grid {
  
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;

  @media (width < 60em) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}
.st-usp__item {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;

}
.st-usp__icon {
  
  inline-size: calc(var(--space-s) * 4); /* 80px */
  block-size: calc(var(--space-s) * 4);

}
.st-usp__text {
  
  margin: 0;
  max-inline-size: none;
  font-size: var(--st-text-body);
  font-weight: 300;
  line-height: 1.3;

}
.st-tiles {
  
  display: grid;
  gap: calc(var(--st-gap) * 2);
  padding: 0;
  background-color: var(--st-surface-muted);

}
.st-tiles__grid {
  
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--st-gap);

  @media (width < 60em) {
    grid-template-columns: minmax(0, 1fr);
  }

}
.st-tile {
  
  position: relative;
  display: grid;
  overflow: hidden;
  color: var(--white);
  text-align: center;
  &:hover .st-tile__image, &:focus-visible .st-tile__image { scale: 1.03; }

}
.st-tile__media {
  
  grid-area: 1 / 1;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;

}
.st-tile__image {
  
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center;
  transition: scale .7s ease-out;

}
.st-tile__content {
  
  position: absolute;
  inset: 0 0 auto;
  padding: calc(var(--space-s) * 1.83) var(--st-pad) var(--st-pad);

}
.st-tile__title {
  
  margin: 0 0 var(--st-pad-s);
  max-inline-size: none;
  color: var(--white);
  font-size: var(--st-display-l);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--st-tracking);
  text-transform: uppercase;

  @media (width < 40em) {
    font-size: calc(var(--h1) * 0.8);
  }

}
.st-tile__sub {
  
  margin: 0;
  max-inline-size: none;
  color: var(--white);
  font-size: var(--st-text-body);
  font-weight: 300;
  line-height: 1.3;

}
.st-promos__grid {
  
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--st-gap);

  @media (width < 60em) {
    grid-template-columns: minmax(0, 1fr);
  }

}
.st-promo {
  
  position: relative;
  display: grid;
  overflow: hidden;
  color: var(--white);
  text-align: center;
  &:hover .st-tile__image, &:focus-within .st-tile__image { scale: 1.03; }

}
.st-promo__content {
  
  position: absolute;
  inset: 0;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--st-pad);
  & > .btn--primary + .btn--primary { margin-block-start: var(--st-pad-s); }

}
.st-promo__title {
  
  margin-block-end: var(--st-pad-s);

}
.st-promo__sub {
  
  margin-block-end: var(--st-pad-s);

}
.st-promo--offset-l {
  
  & .st-promo__content { padding-block-end: calc(var(--space-s) * 4.7 + var(--st-pad)); }

}
.st-promo--offset-m {
  
  & .st-promo__content { padding-block-end: calc(var(--space-s) * 3.5 + var(--st-pad)); }

}
.st-info {
  
  padding: var(--st-pad-s) 0 0;
  background-color: var(--st-surface-muted);

}
.st-info__grid {
  
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--st-gap);

  @media (width < 60em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (width < 40em) {
    grid-template-columns: minmax(0, 1fr);
  }

}
.st-info__tile {
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--st-pad);
  background-color: var(--white);
  color: var(--black);
  & > * { margin: 0; }
  & > * + * { margin-block-start: var(--st-pad-s); }
  & > .st-info__title:not(:first-child) { margin-block-start: var(--st-pad); }
  & > .st-info__btn { margin-block-start: var(--st-pad); }

  @media (width < 40em) {
    padding: var(--space-m) var(--space-s);
  }

}
.st-info__tile--dark {
  
  background-color: var(--black);
  color: var(--white);

}
.st-info__brand {
  
  display: flex;
  align-items: center;
  gap: calc(var(--space-s) * 0.3);
  color: var(--white);
  font-family: Roboto, sans-serif;
  font-size: calc(var(--h3) * 1.05); /* 28px */
  font-weight: 400;
  line-height: 1.3;

}
.st-info__brand-logo {
  
  inline-size: calc(var(--space-s) * 2.5); /* 50px */
  block-size: auto;

}
.st-info__p {
  
  max-inline-size: none;
  font-size: var(--st-text-body);
  font-weight: 300;
  line-height: 1.3;

}
.st-info__link {
  
  color: var(--primary);
  font-weight: inherit;
  &:hover, &:focus-visible { color: var(--black); }
  .st-info__tile--dark &:hover, .st-info__tile--dark &:focus-visible { color: var(--white); }

}
.st-info__title {
  
  color: var(--st-heading);
  font-family: Roboto, sans-serif;
  font-size: var(--h3); /* 27px */
  font-weight: 400;
  line-height: 1.4;

}
.st-news__list {
  
  display: grid;
  gap: calc(var(--space-s) * 1.95);

}
.st-news {
  
  & > * { margin: 0; max-inline-size: none; }
  & > * + * { margin-block-start: calc(var(--st-pad-s) * 1.15); }
  & .st-news__title + * { margin-block-start: 0; }

}
.st-news__title {
  
  color: var(--black);
  font-family: inherit;
  font-size: var(--st-text-body);
  font-weight: 400;
  line-height: 1.3;

}
.st-news__text {
  
  font-size: var(--st-text-body);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;

}
.st-info__btn {
  
  display: inline-flex;

}
.st-dealer-types {
  
  display: grid;
  gap: calc(var(--space-xs) * 0.2);
  padding: 0;
  list-style: none;
  & li { margin: 0; }

}
.st-dealer-types__icon {
  
  display: inline-block;
  inline-size: calc(var(--space-s) * 1.25); /* 25px */
  block-size: auto;
  vertical-align: middle;

}
.st-info__link--strong {
  
  font-style: italic;
  font-weight: 700;
  text-decoration: underline;

}
.st-info__link--underline {
  
  font-weight: 700;
  text-decoration: underline;

}