@import "snippets/body.css";
@import "snippets/header.css";
@import "snippets/footer.css";
@import "snippets/nav.css";
@import "snippets/menu.css";
@import "snippets/breadcrumbs.css";
@import "snippets/main.css";
@import "snippets/form.css";
@import "snippets/news.css";

:root{

  --font-size-regular: 16px;
  --line-height-regular: 150%;
  --letter-spacing: 0em;

  --font-size-small: 0.8em;
  --font-size-smaller: 0.7em;
  --font-size-big: 1.2em;
  --font-size-big: 1.5em;
  --font-size-h1: 2.2em;
  --font-size-h2: 1.8em;
  --font-size-h3: 1.4em;
  --font-size-h4: 1em;

  --color: black;
  --bg-color: white;
  --color-h1: var(--color-primary);
  --color-h2: var(--color-primary);
  --color-hr: var(--color-grey);

  --blur: 5px;
  --color-backdrop-blur: rgba(255,255,255,.8);
  --box-shadow: 0px 8px 8px rgba(0,0,0,.25);
  --box-shadow-light-size: 4px;
  --box-shadow-light: 0px 2px var(--box-shadow-light-size) rgba(0,0,0,.33);

  --regular-border-width: 1px;
  --regular-border-color: var(--color-grey);
  --regular-border: var(--regular-border-width) solid var(--regular-border-color);
  --regular-border-radius: .5rem;
  --light-border-width: 2px;
  --light-border-color: var(--color-lightgrey);
  --light-border: var(--light-border-width) solid var(--light-border-color);
  --hr-margin: 3rem;

  --site-padding: 1rem;

  --header-arguments-height: 2rem;
  --header-inner-height: 6rem;
  --header-inner-height-narrow: 5rem;
  --header-height: calc(var(--header-arguments-height) + var(--header-inner-height));
  --header-margin-bottom: .5rem;
  --logo-width: 10rem;
  --logo-width-medium: 8.5rem;
  --logo-width-smaller: 7rem;

  --footer-margin-top: 2rem;
  --footer-padding-top: 2rem;
  --footer-padding-bottom: 2rem;

  --layout-column-gap: 1.5rem;
  --layout-margin-top: 2rem;
  --block-margin-top: 1rem;

  --ui-icon-size: 2rem;

}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/Inter-VariableFont.ttf");
}

@media (hover: hover) {}

#menu::-webkit-scrollbar,
#breadcrumbs::-webkit-scrollbar,
#product_images_gallery_container::-webkit-scrollbar,
#crossselling::-webkit-scrollbar {
  display: none;
}
#menu,
#breadcrumbs,
#product_images_gallery_container,
#crossselling {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


@media (min-width: 1500px) {

  :root{

    /* --site-padding: 2rem;

    --layout-column-gap: 3rem;
    --layout-margin-top: 3rem;
    --block-margin-top: 1rem; */

  }

}