body {
  font-family: "plantin" !important;
  font-weight: 300;
  font-size: 16px;
  text-transform: none;
  color: black;
  line-height: 1.5em;
  text-decoration-skip-ink: none;

  &:has(dialog[open]) {
    /*
      Scrollbar hiding classes
      We need them here because we now depend on whether any modal is opened
    */
    overflow: hidden;
    padding-right: var(--scroll-y-width);

    & .pr-sb {
      padding-right: var(--scroll-y-width);
    }

    & .mr-sb-5 {
      margin-right: calc(20px + var(--scroll-y-width));
    }

    & #front-chat-iframe {
      margin-right: var(--scroll-y-width);
    }

    & .cookies-policy-holder {
      @media all and (max-width: 1049.9px) {
        .chat-button {
          margin-right: var(--scroll-y-width);
        }
      }
      @media all and (min-width: 1050px) {
        left: calc(100% - 130px - var(--scroll-y-width));
      }
    }

    & .bloobloom-checkout-page-header {
      width: calc(100% - var(--scroll-y-width));
    }
  }
}

a,
a:visited {
  color: #002fa7;
  text-decoration: none;
  outline: 0;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  -ms-transition: color 0.1s linear;
  transition: color 0.1s linear;
  text-decoration-thickness: 1px;
}

a {
  touch-action: manipulation;
}

a:hover,
a:focus {
  color: #080fb0;
}

button {
  text-decoration-thickness: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.collection_title,
.headline,
.footer_menu a,
.subtitle p,
.empty_cart,
.promo_banner {
  font-family: "plantin", sans-serif;
  font-style: normal;
  text-transform: none;
  color: #2a2a2a;
  display: block;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div,
span,
p,
a,
img,
strong,
u,
ol,
ul,
li,
table,
tbody,
tr,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.2;
}

a,
a:visited {
  color: #002fa7;
  text-decoration: none;
  outline: 0;
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  -ms-transition: color 0.1s linear;
  transition: color 0.1s linear;
}

a:hover{
  color: #0735A9;
}
a:focus {
  color: #458FFF;
}
::-moz-selection {
  background-color: #000;
  color: #fff;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

/* stylelint-disable length-zero-no-unit */
:root {
  --scroll-y-width: 0px; /* 'px' part is required!!! */

  /* to auto-scroll by "tab" key (not focus below sticky areas): 50px of header */
  scroll-padding-top: 50px;

  @media screen and (max-width: 1086.98px) {
    /* to auto-scroll by "tab" key (not focus below sticky areas): 50px of header + potential 44px small screen product
    buttons */
    scroll-padding-top: 94px;
  }

  /* to auto-scroll by "tab" key (not focus below sticky areas): potential 44px large screen product buttons */
  scroll-padding-bottom: 44px;
}

/* TODO: remove when legacy ModalContainer is removed */
.noScroll {
  overflow: hidden;
}

.not-allowed {
  cursor: not-allowed !important;
}

.search-full-screen {
  overflow: hidden !important;
}

::-moz-selection {
  background: #318EFD;
  color: white;
}

::selection {
  background: #318EFD;
  color: white;
}