html {
  /* fix for to anchor scrolling with sticky menu */
  scroll-padding-top: var(--anchor-scroll-offset, 0px); 
}

body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  interpolate-size: allow-keywords;
  text-size-adjust: none;
}

a {
  text-decoration: none;

  &:not([class]) {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.5rem 0 1rem 0;
}

h1 {
  font-size: var(--font-size-xx-large);
}

h2 {
  font-size: var(--font-size-x-large);
}

h3, h4, h5, h6 {
  font-size: var(--font-size-large);
}

:is(a, button, input, textarea, .switch, .btn) {
  transition: 100ms ease-out;
  transition-property: background-color, border-color, box-shadow, filter, outline;
  touch-action: manipulation;

  /* Keyboard navigation */
  &:where(:focus-visible) {
    border-radius: 0.25ch;
    outline: var(--focus-ring-size) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  /* Default disabled styles */
  &:where([disabled]) {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }
}

::selection {
  background: var(--color-selected);

  html[data-theme="dark"] & {
    background-color: var(--color-selected-dark);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) & {
      background-color: var(--color-selected-dark);
    }
  }
}

:where(ul, ol):where([role="list"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

video {
  max-inline-size: 100%;
}

/* Printing */
@page {
  margin: 1in;
}

@media print {
  .no-print {
    display: none;
  }
}

/* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */
/* there's not a way to target Windows using CSS, so Chrome on Mac will have */
/* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  * {
    scrollbar-color: #C1C1C1 transparent;
    scrollbar-width: thin;
  }
}

.s-container {
  max-width: var(--container-max-width); 
  margin-inline: auto; 
  padding: var(--container-padding-vertical) var(--container-padding-horizontal);  
}

.s-footer-section {
  --control-height: 2rem;
  background-color: var(--color-ink); 
  color: var(--color-canvas);
  margin-top: var(--space-lg);
}

.s-footer-section .s-container {
  padding: var(--space-xl) var(--container-padding-horizontal);  
}

.s-footer-section nav ul {
  margin-top: 0;
}

.s-footer-section nav li {
  margin-bottom: var(--space-base);
  list-style: none;
}

.s-footer-section a, .s-footer-section-legal a{
  text-decoration: none;
}

.s-footer-copyrights {
  border-top: 1px solid currentColor;
}

#meta-products-note {
  text-align: end;
}

@media (max-width: 640px) {

  #meta-products-note {
    text-align: start;
  }

  .s-footer-section .s-layout-columns{
    gap: var(--space-lg);
  }
  .s-footer-section nav ul {
    padding-left: 0;    
  }
}