/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
@import url("about-home.css");
@import url("banners.css");
@import url("categories.css");
@import url("checkout.css");
@import url("cms.css");
@import url("creazione.css");
@import url("custom-cart.css");
@import url("custom-utils.css");
@import url("faq.css");
@import url("flex.css");
@import url("form.css");
@import url("header.css");
@import url("hero.css");
@import url("home-products.css");
@import url("filters.css");
@import url("footer.css");
@import url("featured.css");
@import url("link-block.css");
@import url("nav.css");
@import url("personalizzazione.css");
@import url("products.css");
@import url("single.css");
@import url("slider.css");
@import url("target.css");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --color-primary: #7a1f10;
  --color-primary-lighter: #97665d;
  --color-secondary: #c09b5a;
  --color-secondary-lighter: #f3d8a9;
  --color-white: #fff;
  --color-gray: #7a7a7a;
  --color-dark: #242424;

  --color-primary-trasparent: rgb(122, 31, 15, 0.4);
  --color-primary-min-trasparent: rgb(122, 31, 15, 0.98);
  --color-secondary-trasparent: rgb(192, 155, 90, 0.4);
  --color-secondary-min-trasparent: rgb(192, 155, 90, 0.98);
  --color-secondary-max-trasparent: rgb(192, 155, 90, 0.1);
  --color-white-trasparent: rgba(255, 255, 255, 0.8);
  --color-white-min-trasparent: rgba(255, 255, 255, 0.95);

  --box-shadow: 0 0.1rem 0.3rem 0 var(--color-primary);
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Geist", sans-serif;
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  font-size: min(7vw, 54px);
}
h2 {
  font-size: min(7vw, 32px);
}
h3 {
  font-size: min(5vw, 24px);
}
h4 {
  font-size: min(4vw, 20px);
}
h5 {
  font-size: clamp(0.5rem, 2vw, 1rem);
}
p,
input {
  font-size: 1.1rem;
  color: var(--color-gray);
}
@media only screen and (max-width: 550px) {
  p {
    font-size: 1rem;
  }
}

button {
  cursor: pointer;
}
footer {
  width: 100%;
}
#wrapper {
  padding-top: 0;
  background: var(--color-white) !important;
  overflow: hidden;
  justify-content: center;
}
.wrapper-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: clear;
  background: url(../img/background-generic.png) center center;
  background-size: contain;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none; /* sta sotto a tutto */
}

.custom-container {
  grid-template-rows: min-content;
  position: relative;
  overflow: hidden;
}
.custom-radio input[type="radio"]:checked + span {
  background-color: var(--color-primary);
}
.form-control:focus {
  outline: 0.1875rem solid var(--color-secondary) !important;
}
.product-item button:focus,
.product-item button:focus-visible,
.product-item button:focus-within {
  outline: none !important;
}
#order-confirmation #registration-form {
  width: 100% !important;
}
.group-span-filestyle .btn-default,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin {
  background: var(--color-primary) !important;
  border-radius: 20px;
}