/* === Reset & Base === */

*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (max-width: 959px) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Smooth scrolling for the whole page */
html {
  scroll-behavior: smooth;
}

/* Body base enhancements */
body {
  font-family: var(--owl-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --body-scrollbar-width: 17px;
}
@supports (-webkit-appearance: none) {
  :root {
    --body-scrollbar-width: 15px;
  }
}
body {
  --body-container-width: calc(100vw - var(--body-scrollbar-width));

  width: 100%;
  margin: 0;
}
body,
html {
  color: rgba(var(--color-text));
  background-color: rgb(var(--color-page-background));
}
ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
dl {
  margin-block: 0;
}
dd {
  margin-inline-start: 0;
}
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty,
section:empty,
article:empty,
p:empty,
a:empty,
ol:empty,
ul:empty,
dl:empty,
summary:empty {
  display: none;
}
a:not([href]) {
  cursor: not-allowed;
}
a:not(.button),
a:not(.button):hover {
  color: rgba(var(--color-button-text-link, --color-text), 1);
  text-decoration: none;
}
svg.icon circle,
svg.icon path {
  vector-effect: non-scaling-stroke;
}
p:first-child {
  margin-block-start: 0;
}
p:last-child {
  margin-block-end: 0;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
summary {
  position: relative;
  display: inline-block;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
summary::-webkit-details-marker {
  display: none;
}
:root {
  --z-index-hover: 1;
  --z-index-active: 2;
  --z-index-focus: 3;
  --z-index-sticky: 1000;
  --z-index-dropdown: 1010;
  --z-index-fixed: 1020;
  --z-index-modal: 1030;
  --z-index-popover: 1040;
  --z-index-tooltip: 1050;
  --z-index-toast: 1060;
}
:root {
  --page-padding: 30px;
}
@media (max-width: 959px) {
  :root {
    --page-padding: 20px;
  }
}
.page-width {
  width: 100%;
  max-width: calc(var(--page-padding) * 2 + var(--page-width));
  padding-inline: var(--page-padding);
  margin-inline: auto;
}
.page-width.page-width--fluid {
  max-width: 100%;
}
.page-width.page-width--thin {
  max-width: 726px;
}
@media (max-width: 959px) {
  .page-width {
    max-width: 100%;
    padding-inline: var(--page-padding);
  }
}
.grid {
  --column-gap: var(--grid-horizontal-spacing);
  --row-gap: var(--grid-vertical-spacing);

  display: grid;
  grid-auto-columns: var(--column-width);
  grid-auto-flow: column;
  gap: var(--row-gap) var(--column-gap);
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 959px) {
  .grid {
    --column-gap: calc(var(--grid-horizontal-spacing) / 2);
    --row-gap: calc(var(--grid-vertical-spacing) / 2);
    --column-width: calc(
      (
          100% - var(--column-gap, 0px) *
            (var(--mobile-gap-columns, var(--mobile-columns)) - 1)
        ) /
        var(--mobile-columns)
    );

    grid-template-rows: repeat(var(--mobile-rows, auto), auto);
    grid-template-columns: repeat(var(--mobile-columns), var(--column-width));
    grid-auto-flow: var(--mobile-auto-flow);
  }
}
@media (min-width: 960px) {
  .grid {
    --column-width: calc(
      (
          100% - var(--column-gap, 0px) *
            (var(--desktop-gap-columns, var(--desktop-columns)) - 1)
        ) /
        var(--desktop-columns)
    );

    grid-template-rows: repeat(var(--desktop-rows, auto), auto);
    grid-template-columns: repeat(var(--desktop-columns), var(--column-width));
    grid-auto-flow: var(--desktop-auto-flow);
  }
}