:root {
  --sizit-accent: #f2450c;
}

[data-i18n="content.changing_the_way_we_buy_footwe"] {
  white-space: pre-line;
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  nav.fixed.top-0 > div {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  nav.fixed.top-0 img {
    height: 2.5rem;
  }

  nav.fixed.top-0 > div > div.hidden.md\:flex {
    display: flex !important;
    flex: 1 1 100%;
    order: 3;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
  }

  nav.fixed.top-0 > div > div.hidden.md\:flex a {
    font-size: 0.72rem;
    line-height: 1;
  }

  nav.fixed.top-0 > div > div.flex.items-center.gap-6 {
    order: 2;
    margin-left: auto;
  }

  nav.fixed.top-0 > div > div.flex.items-center.gap-6 a {
    padding: 0.55rem 0.85rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  main {
    padding-top: 7rem;
  }

  main > section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  main > section:first-of-type {
    padding-top: 3rem !important;
    padding-bottom: 3.5rem !important;
  }

  main h1 {
    font-size: clamp(2.5rem, 11vw, 4rem) !important;
    line-height: 0.95 !important;
  }

  main h2 {
    font-size: clamp(2rem, 8vw, 3.25rem) !important;
    line-height: 0.98 !important;
  }

  main p {
    font-size: 1rem;
  }

  main .flex.flex-col.sm\:flex-row,
  main .flex.flex-col.md\:flex-row {
    width: 100%;
  }

  main .flex.flex-col.sm\:flex-row > a,
  main .flex.flex-col.md\:flex-row > a {
    width: 100%;
  }

  footer .grid {
    gap: 2rem;
  }
}

/* Semantic color token overrides */
.text-on-tertiary-container,
.hover\:text-on-tertiary-container:hover,
.group:hover .group-hover\:text-on-tertiary-container {
  color: var(--sizit-accent) !important;
}

.border-on-tertiary-container,
.hover\:border-on-tertiary-container:hover,
.group:hover .group-hover\:border-on-tertiary-container {
  border-color: var(--sizit-accent) !important;
}

.bg-on-tertiary-container,
.hover\:bg-on-tertiary-container:hover,
.group:hover .group-hover\:bg-on-tertiary-container {
  background-color: var(--sizit-accent) !important;
}

/* Tailwind orange utility overrides used across pages */
.text-orange-600,
.dark\:text-orange-500,
.hover\:text-orange-600:hover,
.group:hover .group-hover\:text-orange-600 {
  color: var(--sizit-accent) !important;
}

.border-orange-600,
.dark\:border-orange-500,
.hover\:border-orange-600:hover,
.group:hover .group-hover\:border-orange-600 {
  border-color: var(--sizit-accent) !important;
}

.bg-orange-600,
.hover\:bg-orange-600:hover,
.group:hover .group-hover\:bg-orange-600 {
  background-color: var(--sizit-accent) !important;
}

/* Tailwind red utility overrides used in some article templates */
.text-red-600,
.dark\:text-red-500,
.hover\:text-red-600:hover,
.group:hover .group-hover\:text-red-600 {
  color: var(--sizit-accent) !important;
}

.border-red-600,
.dark\:border-red-500,
.hover\:border-red-600:hover,
.group:hover .group-hover\:border-red-600 {
  border-color: var(--sizit-accent) !important;
}

.bg-red-600,
.hover\:bg-red-600:hover,
.group:hover .group-hover\:bg-red-600 {
  background-color: var(--sizit-accent) !important;
}

/* Arbitrary Tailwind class overrides present in current markup */
.text-\[\#EB2D0E\],
.text-\[\#f93819\],
.hover\:text-\[\#EB2D0E\]:hover,
.hover\:text-\[\#f93819\]:hover,
.group:hover .group-hover\:text-\[\#EB2D0E\],
.group:hover .group-hover\:text-\[\#f93819\] {
  color: var(--sizit-accent) !important;
}

.bg-\[\#EB2D0E\],
.bg-\[\#f93819\],
.hover\:bg-\[\#EB2D0E\]:hover,
.hover\:bg-\[\#f93819\]:hover,
.group:hover .group-hover\:bg-\[\#EB2D0E\],
.group:hover .group-hover\:bg-\[\#f93819\] {
  background-color: var(--sizit-accent) !important;
}

.border-\[\#EB2D0E\],
.border-\[\#f93819\],
.hover\:border-\[\#EB2D0E\]:hover,
.hover\:border-\[\#f93819\]:hover,
.group:hover .group-hover\:border-\[\#EB2D0E\],
.group:hover .group-hover\:border-\[\#f93819\] {
  border-color: var(--sizit-accent) !important;
}

/* Pseudo utility variants used by generated article templates */
.selection\:bg-\[\#f93819\]::selection,
.selection\:bg-\[\#EB2D0E\]::selection {
  background-color: var(--sizit-accent) !important;
}

.first-letter\:text-\[\#f93819\]::first-letter,
.first-letter\:text-\[\#EB2D0E\]::first-letter {
  color: var(--sizit-accent) !important;
}