/*
Theme Name: Vincoop
Theme URI: http://underscores.me/
Author: NODE
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vincoop
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Vincoop is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
# CUSTOM STYLE

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;1,300;1,400&family=Lato:ital,wght@1,100&family=Poppins:ital,wght@0,200;0,400;0,700;1,400;1,700&display=swap");

:root {
  /* color palette */
  --light-grey: #d8d8d8;
  --dark-grey: #979797;
  --white: #ffffff;
  --black: #000000;

  --primary-color: #410130;
  --secondary-color: #220019;
  --accent-color-dark: #890465;
  --accent-color-light: #d629b5;

  --translucent-primary-color: rgba(64, 0, 47, 0.75);
  --gradient-primary-color: linear-gradient(
    0deg,
    var(--primary-color) 0%,
    var(--accent-color-dark) 100%
  );

  /* fonts */
  --main-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  /* --font-size-60: 3.75rem;
  --font-size-45: 2.8125rem;
  --font-size-28: 1.75rem;
  --font-size-26: 1.625rem; */
  --font-size-34: 2.125rem;
  --font-size-22: 1.375rem;
  --font-size-sm: 1rem;
  --font-size-xs: 0.75rem;
  --fw-regular: 400;
  --fw-light: 300;

  /* spacing */
  --margin-top-default: 6rem;
  --margin-bottom--default: 6rem;
  --padding-top-default: 6rem;
  --padding-bottom--default: 6rem;

  /* transitions */
  --default-transition: all 0.3s ease-in-out;

  /* pulsanti */
  --btn-border-radius: 10rem;
  --btn-padding: 12px 30px;

  /* forms */
  --imputs-padding: 0.3rem 1rem;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: var(--black);
  font-family: var(--main-font-family);
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: var(--light-grey);
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted var(--dark-grey);
  cursor: help;
}

mark,
ins {
  background: var(--white) 9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: var(--white);
}

hr {
  background-color: var(--accent-color-dark);
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a,
a:visited {
  color: var(--accent-color-light);
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  color: var(--accent-color-dark);
}

a:focus {
  outline-color: rgba(128, 128, 128, 0.5);
  outline-offset: 0.3rem;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border-radius: var(--btn-border-radius);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--white);
  line-height: 1;
  padding: var(--btn-padding);
  transition: var(--default-transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border: 2px solid var(--primary-color);
  background-color: var(--white);
  color: var(--primary-color);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
  border-radius: 0;
  border: 1px solid var(--light-grey);
  border-bottom: 2px solid var(--accent-color-dark);
  padding: var(--imputs-padding);
  color: var(--black);
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  width: 100%;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* .screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
} */

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# CUSTOM STYLE
--------------------------------------------------------------*/

/* ul,
ol {
  list-style: none;
} */

/* BS OVERRIDE - BACKGROUND COLORS
------------------------------------------------- */

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-light {
  background-color: var(--light-grey) !important;
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-white {
  color: var(--white);
}

/* TITLES 
------------------------------------------------- */

h1.h1-hero {
  font-size: clamp(2rem, 1.1818rem + 4.3636vw, 5.6rem);
  font-weight: 200;
}

h1,
.h1 {
  font-size: clamp(1.8rem, 1.1818rem + 4.3636vw, 3.8rem);
  font-weight: 200;
}

h2,
.h2 {
  font-size: clamp(1.8rem, 1.1818rem + 4.3636vw, 3.125rem);
  font-weight: 200;
}

/* UTILITY CLASSES
------------------------------------------------- */

.round {
  border-radius: 50%;
}

.spacing-margin-top {
  margin-top: var(--margin-top-default);
}

.spacing-margin-bottom {
  margin-bottom: var(--margin-bottom--default);
}

.spacing-margin {
  margin-top: var(--margin-top-default);
  margin-bottom: var(--margin-bottom--default);
}

.spacing-padding-top {
  padding-top: var(--padding-top-default);
}

.spacing-padding-bottom {
  padding-bottom: var(--padding-bottom--default);
}

.spacing-padding {
  padding-top: var(--padding-top-default);
  padding-bottom: var(--padding-bottom--default);
}

.font-22 {
  font-size: var(--font-size-22);
}

/* Round Images */
.img-round img,
img.img-round {
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  /*height: 100%;*/
  object-fit: cover;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

/* PULSANTI
------------------------------------------------- */

/* BS OVERRIDE */

a.btn,
.btn {
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
}

a.btn-primary,
a.btn-primary:visited,
.btn-primary,
.btn-primary:visited {
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--white);
}

a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  border: 2px solid var(--primary-color) !important;
  background-color: var(--white) !important;
  color: var(--primary-color) !important;
}

a.btn-primary-light,
a.btn-primary-light:visited,
.btn-primary-light,
.btn-primary-light:visited {
  color: var(--primary-color);
  border: 2px solid var(--white);
  background-color: var(--white);
}

a.btn-primary-light:hover,
a.btn-primary-light:focus,
a.btn-primary-light:active,
.btn-primary-light:hover,
.btn-primary-light:focus,
.btn-primary-light:active {
  color: var(--white) !important;
  border: 2px solid var(--white) !important;
  background-color: transparent !important;
}

a.btn-outline-primary,
a.btn-outline-primary:visited,
.btn-outline-primary,
.btn-outline-primary:visited {
  background-color: var(--white);
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
a.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: var(--white) !important;
}

a.btn-outline-light,
a.btn-outline-light:visited,
.btn-outline-light,
.btn-outline-light:visited {
  color: var(--white);
  border: 2px solid var(--white);
  background-color: transparent;
}

a.btn-outline-light:hover,
a.btn-outline-light:focus,
a.btn-outline-light:active,
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
  background-color: var(--white) !important;
  border: 2px solid var(--white) !important;
  color: var(--primary-color) !important;
}

.btn-sm {
  padding: 0.3rem 1.2rem !important;
}

/* Gutemberg Editor - Pulsanti resets */

.wp-block-button__link.wp-element-button {
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--white);
}

.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus {
  border: 2px solid var(--primary-color) !important;
  background-color: var(--white) !important;
  color: var(--primary-color) !important;
}

/* MAIN SITE WRAPPER
------------------------------------------------- */

.site {
  position: relative;
}

.site .site-main.front-page {
  padding-top: 0;
}

.site .site-main {
  padding-top: 14rem;
  margin-bottom: var(--margin-bottom--default);
}

/* HEADER
---------------------------------------------- */

/* .site-title {
  display: none;
} */
.site-header.main-header {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1000;
}

.site-header.main-header.fixed {
  /*position: fixed; */
  background-color: var(--primary-color);
  padding-block: 1.85rem;
}

@media screen and (min-width: 1200px) {
  .site-header.main-header.fixed {
    position: fixed;
  }
}

.site-header.main-header .site-branding {
  margin-right: 4rem;
}

.site-header.main-header .site-branding img {
  height: auto;
  width: 100%;
  max-width: 30rem;
}

/* TO DO: CHECK */
@media screen and (max-width: 1200px) {
  .site-header.main-header .site-branding img {
    max-width: 10vw;
  }
}

/* MAIN NAVIGATION MENU
------------------------------------------------- */

@media screen and (min-width: 756px) {
  .site-header.main-header .main-navigation ul#primary-menu {
    display: flex;
    flex-direction: row;
    /*gap: 1.5rem;*/
    justify-content: center;
  }
}

.main-navigation a,
.main-navigation a:not([href]):not([class]),
.main-navigation a:not([href]):not([class]):hover {
  font-size: 1.175rem;
  color: var(--white);
  transition: color 0.3s ease-in-out;
}

.main-navigation ul#primary-menu li.menu-item {
  padding: 0.5rem 0.85rem;
  transition: 0.15s ease-in-out;
}

.main-navigation ul#primary-menu li.menu-item.menu-item-has-children {
  cursor: pointer;
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  > a::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: middle;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

/* MENU SECONDO LIVELLO - VINCOOP HOMEPAGE */

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu {
  display: grid;
  grid-template-columns: repeat(2, 340px);
  column-gap: 2.5rem;
  /*row-gap: 0.6rem;*/
  padding: 2rem 0.5rem 2rem 2.5rem;
  margin-top: 0rem;
  border-top: 1rem solid transparent;
  background-color: var(--primary-color);
  float: none;
  pointer-events: none;
}
/* TODO check */
@media screen and (min-width: 992px) {
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children
    ul.sub-menu {
    opacity: 0;
    top: 100%;
    left: -300%;
    right: auto;
    transform: translateY(1rem);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children:hover
    ul.sub-menu,
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children:focus
    ul.sub-menu,
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children.focus
    ul.sub-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  a {
  font-size: 1rem;
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:not(:first-child):hover {
  background-color: rgba(34, 0, 25, 0.7);
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child {
  grid-column: 1 / -1;
  margin-bottom: 1.5rem;
  text-align: center;
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  a {
  width: auto;
}

/* Link 360 - apre la pagina VT */
.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child
  a {
  border-bottom: 1px solid var(--dark-grey);
  padding-bottom: 1.5rem;
  width: 80%;
  margin-inline: auto;
  font-size: 1.175rem;
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child
  a::before {
  content: "";
  display: inline-block;
  width: 5.625rem;
  height: 30px;
  background-image: url("./img/logo_360_vt_white.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
  top: 0.5rem;
  transition: transform 0.3s ease-in-out;
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child::after {
  content: "Visita gli shop";
  color: var(--dark-grey);
  font-weight: bold;
  margin-top: 2rem;
  display: block;
}

.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child
  a:hover::before,
.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child
  a:focus::before,
.main-navigation
  ul#primary-menu
  li.menu-item.menu-item-has-children
  ul.sub-menu
  li:first-child
  a:active::before {
  transform: scale(1.2);
}


/* WOOCOMMERCE SEARCH BAR
------------------------------------------------- */

form.woocommerce-product-search input[type="search"] {
  font-family: inherit;
  color: var(--secondary-color);
  border-radius: var(--btn-border-radius);
  height: 35px;
  width: 80%;
  padding-left: 2.2rem;
  padding-right: 1rem;
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: center;
  background-size: 20px;
  background-image: url("./img/icons/search-icon.svg");
}

form.woocommerce-product-search input[type="search"]::placeholder {
}

form.woocommerce-product-search button[type="submit"] {
  visibility: hidden;
  font-size: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.cart-icon,
.account-icon,
.wishlist-icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.cart-icon {
  background-image: url("./img/icons/shopping-bag-icon.svg");
}
.account-icon {
  background-image: url("./img/icons/my-account-icon.svg");
}
.wishlist-icon {
  background-image: url("./img/icons/wishlist-icon.svg");
}

/* TO DO: CHECK */
/* HEADER > CART ICON - BADGE COUNT 
--------------------------------------------------- */
.cart-count {
  position: relative;
  top: -12px;
  background-color: var(--accent-color-light);
  color: var(--white);
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

/* END HEADER --------------------------------------------------------- *

/* HERO SECTION - VINCOOP HOMEPAGE
------------------------------------------------- */

.site .site-main.front-page .hero {
  background-color: var(--primary-color);
  position: relative;
}

/* Video Vincoop Homepage */
.site .site-main.front-page .hero .vincoop-hero-video {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  object-fit: cover;
  filter: brightness(0.85);
}

@media screen and (max-width: 480px) {
  .site .site-main.front-page .hero .vincoop-hero-video {
    object-position: left;
  }
}

.site .site-main.front-page .hero .hero-payoff {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 992px) {
  .site .site-main.front-page .hero {
    padding: 0 !important;
  }

  .site .site-main.front-page .hero .wp-block-cover__inner-container {
    margin-top: 50vh;
  }

  .site .site-main.front-page .hero .hero-payoff {
    position: initial;
  }

  .site .site-main.front-page .hero .hero-payoff .h1-hero .btn {
    margin-top: 1rem;
  }

  .site .site-main.front-page .hero video {
    max-height: 100vh;
  }

  .site .site-main.front-page .hero .hero-banner .hero-banner-col {
    flex-wrap: nowrap !important;
  }
}

.site .site-main.front-page .hero .hero-banner {
  background-color: var(--secondary-color);
}

.site .site-main.front-page .hero .hero-banner .hero-banner-content {
  align-self: center;
}

.site .site-main.front-page .hero .hero-banner .hero-banner-content p {
  margin-bottom: 0;
}

.site .site-main.front-page .hero .hero-banner .hero-banner-image {
  flex-basis: auto !important;
  flex-grow: 0 !important;
}

.site .site-main.front-page .hero .hero-banner .hero-banner-image img {
  width: 100px;
  height: auto;
}

/* END HERO SECTION - VINCOOP HOMEPAGE ----------------------------------------- */

/* PRODUCT SLIDERS - VINCOOP HOMEPAGE & CHILD HOMEPAGE
------------------------------------------------------------- */

.site-main.front-page .three-product-slider {
  width: 90%;
}

.site-main.front-page .two-product-slider {
  margin-inline: auto;
}

.site-main.front-page .one-product-slider {
  height: 100%;
}

.site-main.front-page .three-product-slider .product-slide {
  margin-right: 3rem;
  position: relative;
}

@media screen and (max-width: 480px) {
  .site-main.front-page .three-product-slider {
    width: 100%;
  }
  .site-main.front-page .three-product-slider .product-slide {
    margin-right: 0rem;
  }
}

.site-main.front-page .three-product-slider .product-slide .product-card h3 {
  color: var(--accent-color-dark);
  font-size: var(--font-size-22);
  font-weight: 400;
}

.site-main.front-page .two-product-slider .product-slide .product-card h3 {
  color: var(--white);
  font-size: var(--font-size-34);
  font-weight: 200;
}

.site-main.front-page .two-product-slider .product-slide,
.site-main.front-page .one-product-slider .product-slide {
  margin-inline: 2rem;
  position: relative;
}

@media screen and (max-width: 480px) {
  .site-main.front-page .two-product-slider .product-slide,
  .site-main.front-page .one-product-slider .product-slide {
    margin-inline: 0;
  }
}

/* TO DO: RESPONSIVENESS */
@media screen and (max-width: 992px) {
  .site-main.front-page .one-product-slider .product-slide {
    margin-top: 3rem;
  }

  .site-main.front-page .one-product-slider .product-slide {
    margin-inline: 0;
  }
}

.site-main.front-page .three-product-slider .product-card,
.site-main.front-page .two-product-slider .product-card,
.site-main.front-page .one-product-slider .product-card {
  height: 100%;
}

.site-main.front-page .three-product-slider .slick-dots,
.site-main.front-page .one-product-slider .slick-dots {
  bottom: -60px;
  transform: translateX(-20px);
}

.site-main.front-page .one-product-slider .slick-dots {
  transform: translateX(-16px);
}

.site-main .sezione-booking-slider,
.site-main .sezione-vini-slider {
  min-height: 800px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: 16.5%;
}

.site-main .sezione-booking-slider {
  background-position-x: right;
  background-image: url("./img/bg-img-visite-degustazione.png");
}

.site-main .sezione-vini-slider {
  background-position-x: center;
  background-image: url("./img/bg-img-vini-spumanti.svg");
  background-color: var(--secondary-color);
}

/* TO DO: RESPONSIVENESS ? */
@media screen and (max-width: 480px) {
  .site-main .sezione-booking-slider {
    background-position-y: bottom;
    background-size: 36.5%;
  }
  .site-main .sezione-vini-slider {
    background-position-y: 20px;
    background-size: 18%;
  }
}

.slick-next:before,
.slick-prev:before {
  content: "";
}
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
  /* width: 30px;
  height: 30px; */
  top: 37%;
  margin: 1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-radius: 0;
  z-index: 100;
  transform: scaleY(1.5);
}

/* TO DO: RESPONSIVENESS */
@media screen and (max-width: 992px) {
  .slick-prev.slick-arrow,
  .slick-next.slick-arrow {
    /* width: 20px;
    height: 20px; */
    top: 22%;
    /* margin: 0.2px; */
    /* transform: scaleY(1.2); */
  }
}

.slick-prev.slick-arrow {
  border-width: 20px 20px 20px 0;
  border-color: transparent var(--white) transparent transparent;
}
.slick-next.slick-arrow {
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent var(--white);
}
.slick-dots li {
  margin-inline: 1rem;
}

@media screen and (max-width: 480px) {
  .slick-dots li {
    margin-inline: 0.5rem;
  }
}

.slick-dots li button::before {
  margin: 1rem;
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "";
  opacity: 1;
  border: 1px solid var(--accent-color-dark);
  border-radius: 50%;
  background-color: var(--white);
  transition: background-color 0.3s;
}

.slick-dots li.slick-active button:before {
  opacity: 1;
  background-color: var(--accent-color-dark);
}

/* .three-product-slider {
  margin-bottom: 8rem !important;
} */

.three-product-slider .slick-arrow {
  display: none;
}

.three-product-slider .product-image {
  width: 100%;
  height: 300px;
  position: relative;
}

.two-product-slider .product-image {
  width: 500px;
  height: 500px;
}

/* TO DO: responsiveness */
@media screen and (max-width: 756px) {
  .two-product-slider .product-image {
    width: 300px;
    height: 300px;
  }
}
@media screen and (min-width: 757px) and (max-width: 1200px) {
  .two-product-slider .product-image {
    width: 40vw;
    height: 40vw;
  }
}

.one-product-slider .product-image {
  width: 100%;
  height: 500px;
}
@media screen and (max-width: 480px) {
  .one-product-slider .product-image {
    height: 300px;
  }
}

.three-product-slider .product-image,
.two-product-slider .product-image,
.one-product-slider .product-image {
  background-color: var(--white);
}
.three-product-slider .product-image img,
.two-product-slider .product-image img,
.one-product-slider .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Slider Vini */
.two-product-slider .product-image img {
  object-fit: contain;
}

/* TO DO */
.site-main.front-page .one-product-slider .product-slide h3 {
  font-size: clamp(1.5rem, 1.0909rem + 2.1818vw, 2.8rem) !important;
  font-weight: 200 !important;
  color: var(--primary-color);
}

/* END SLIDERS -------------------------------------------------------- */

/* MAPPA DELLE CANTINE
 * Vincoop Homepage
------------------------------------------------------------------- */

.site-main .mappa-round-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.site-main .mappa-round-wrapper {
  width: 500px;
  height: 500px;
  padding: 2rem;
  border-radius: 50%;
  text-align: center;
  position: relative;
  background-color: var(--secondary-color);
}

.site-main .mappa-round-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media (max-width: 480px) {
  .site-main .mappa-round-wrapper {
    width: 320px;
    height: 320px;
    padding: 1.5rem;
  }
}

/* GOOGLE MAP - CUSTOM MARKERS */

.site-main.front-page #mappaModal .modal-header {
  padding-block: 2rem;
  padding-right: 5rem;
  border: none;
}
.site-main.front-page #mappaModal .modal-body {
  padding-top: 0;
  padding-inline: 5rem;
  padding-bottom: 4rem;
}
.site-main.front-page #mappaModal .modal-body #googleMapCantine {
  height: 100%;
}
.site-main.front-page #mappaModal .btn-close {
  opacity: 1;
  border: none;
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1.8em auto no-repeat;
}
.site-main.front-page #mappaModal .modal-content {
  background-color: rgba(0, 0, 0, 0.9);
}
.site-main.front-page
  #mappaModal
  .modal-body
  #googleMapCantine
  .gm-style-iw.gm-style-iw-c {
  border-radius: 0;
  border: 3px solid var(--secondary-color);
}
.site-main.front-page
  #mappaModal
  .modal-body
  #googleMapCantine
  .gm-style-iw.gm-style-iw-c
  + .gm-style-iw-tc::after {
  height: 30px;
  left: -5px;
  top: -5px;
  width: 35px;
}
.site-main.front-page
  #mappaModal
  .modal-body
  #googleMapCantine
  .marker-content {
  padding: 0rem 5rem 1rem;
  text-align: center;
}
.site-main.front-page
  #mappaModal
  .modal-body
  #googleMapCantine
  .marker-content
  p {
  font-size: 1.1rem;
}

@media screen and (max-width: 756px) {
  .site-main.front-page #mappaModal .modal-header {
    padding-block: 1rem;
    padding-right: 1.5rem;
  }
  .site-main.front-page #mappaModal .modal-body {
    padding-inline: 1rem;
    padding-bottom: 1rem;
  }
  .site-main.front-page #mappaModal .btn-close {
    padding: 0;
  }
  .site-main.front-page
    #mappaModal
    .modal-body
    #googleMapCantine
    .marker-content {
    padding: 0.5rem;
    padding-right: 0;
  }
  .site-main.front-page
    #mappaModal
    .modal-body
    #googleMapCantine
    .gm-style-iw.gm-style-iw-c {
    max-width: unset;
  }
  .site-main.front-page
    #mappaModal
    .modal-body
    #googleMapCantine
    .marker-content
    img {
    max-width: 80%;
  }
  .site-main.front-page
    #mappaModal
    .modal-body
    #googleMapCantine
    .marker-content
    .btn {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
  }
}

/* END MAPPA DELLE CANTINE ------------------------------------- */

/* LISTING DELLE CANTINE - VINCOOP HOMEPAGE
------------------------------------------------- */

.listing-cantine {
  column-gap: 2rem;
}

@media screen and (min-width:992px) {
  .listing-cantine {
    column-gap: 3.8rem;
  }
}

.listing-cantine img {
  width: 100%;
  display: block;
  max-width: 350px;
  max-height: 130px;
  margin-bottom: 4rem;
}

@media screen and (max-width: 480px) {
  .listing-cantine img {
    margin-bottom: 1rem;
  }
}

/* FOOTER
------------------------------------------------- */

.site-footer ul,
.site-footer ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.site-footer a {
  color: var(--black);
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer .newsletter-form input[type="email"] {
  border: 1px solid var(--dark-grey);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.site-footer .newsletter-form input[type="submit"] {
  margin-right: auto;
  width: auto;
}

@media screen and (max-width: 756px) {
  .site-footer .newsletter-form input[type="email"] {
    width: 80%;
    margin-inline: auto;
  }
  .site-footer .newsletter-form input[type="submit"] {
    margin-inline: auto;
  }
}

.blur-bg,
.virtualtour-button {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.virtualtour-button {
  height: 150px;
  width: 150px;
  z-index: 10;
}

.blur-bg {
  padding: 1.5rem;
  height: 220px;
  width: 220px;
  z-index: 5;
  /* backdrop-filter: blur(10px) saturate(3.5); */
  backdrop-filter: blur(26px);
}

@media screen and (max-width: 992px) {
  .blur-bg,
  .virtualtour-button {
    height: 80px;
    width: 80px;
  }

  .blur-bg {
    height: 120px;
    width: 120px;
  }
}

@media screen and (max-width: 480px) {
  .blur-bg,
  .virtualtour-button {
    left: 80%;
  }

  .virtualtour-text {
    font-size: 0.85rem;
  }
}

/* END FOOTER ---------------------------------------------------------- */

/* -----------------------------------------------------------
 * GRID SYSTEM - PRODUCT/BOOKING LISTING 
 * stilizza il listing dei prodotti renderizzati tramite
 * i shortcode creati appositamente
------------------------------------------------- */

.site-main .grid-system {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 4rem;
}

.site-main .grid-system .product {
  display: grid;
}

.site-main .grid-system .product .product-image {
  height: 400px;
  width: 100%;
  background-color: var(--white);
}

.site-main .grid-system .product .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* WC Product > Booking */
.site-main .grid-system .product.product-type-booking .product-image img {
  object-fit: cover;
}

.site-main .grid-system .product .product-title {
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--primary-color);
}

.site-main .grid-system .product .product-button {
  margin-top: auto;
}

.site-main.front-page .grid-system * {
  color: var(--white);
}

.site-main.front-page .grid-system {
  grid-template-columns: repeat(4, 1fr);
}

.site-main.front-page .grid-system .product .product-image {
  height: 300px;
  width: 100%;
}

.site-main.front-page .grid-system .product .product-title {
  font-weight: 400;
}

.site-main.front-page .grid-system .product .product-title {
  color: var(--white);
}

.site-main .grid-system .btn.btn-outline,
.site-main .grid-system .btn.btn-outline:visited {
  background-color: var(--white);
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.site-main .grid-system .btn.btn-outline:hover,
.site-main .grid-system .btn.btn-outline:focus,
.site-main .grid-system .btn.btn-outline:active {
  background-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: var(--white) !important;
}

/* HOMEPAGE > CHILD THEMES -> background-color diverso dal bianco */
.site-main.front-page .grid-system .btn.btn-outline,
.site-main.front-page .grid-system .btn.btn-outline:visited {
  color: var(--white);
  border: 2px solid var(--white);
  background-color: transparent;
}

.site-main.front-page .grid-system .btn.btn-outline:hover,
.site-main.front-page .grid-system .btn.btn-outline:focus,
.site-main.front-page .grid-system .btn.btn-outline:active {
  background-color: var(--white) !important;
  border: 2px solid var(--white) !important;
  color: var(--primary-color) !important;
}

@media screen and (max-width: 992px) {
  .site-main.front-page .grid-system,
  .site-main .grid-system {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 500px) {
  .site-main.front-page .grid-system,
  .site-main .grid-system {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* END GRID SYSTEM ------------------------------- */

/* -----------------------------------------------------------
 * WOOCOMMERCE ARCHIVE PAGE - GRID SYSTEM
 * stilizza il loop dei prodotti gestito dal template 
 * archive-product di woocommerce
 * archive taxonomies di woocommerce
------------------------------------------------- */

.post-type-archive-product .woocommerce-products-header h1,
.post-type-archive-product .woocommerce-result-count,
.archive.tax-product_cat .woocommerce-products-header h1,
.archive.tax-product_cat .woocommerce-result-count,
.archive.tax-pa_colore .woocommerce-products-header h1,
.archive.tax-pa_denominazione .woocommerce-products-header h1,
.archive.tax-pa_formato .woocommerce-products-header h1,
.archive.tax-pa_temperatura-di-servizio .woocommerce-products-header h1,
.archive.tax-pa_tipologia .woocommerce-products-header h1,
.archive.tax-pa_colore .woocommerce-result-count,
.archive.tax-pa_denominazione .woocommerce-result-count,
.archive.tax-pa_formato .woocommerce-result-count,
.archive.tax-pa_temperatura-di-servizio .woocommerce-result-count,
.archive.tax-pa_tipologia .woocommerce-result-count {
  text-align: center;
}

.post-type-archive-product .woocommerce-result-count,
.archive.tax-product_cat .woocommerce-result-count,
.archive.tax-pa_colore .woocommerce-result-count,
.archive.tax-pa_denominazione .woocommerce-result-count,
.archive.tax-pa_formato .woocommerce-result-count,
.archive.tax-pa_temperatura-di-servizio .woocommerce-result-count,
.archive.tax-pa_tipologia .woocommerce-result-count {
  font-size: 1.375rem;
}

.post-type-archive-product .products,
.archive.tax-product_cat .products,
.archive.tax-pa_colore .products,
.archive.tax-pa_denominazione .products,
.archive.tax-pa_formato .products,
.archive.tax-pa_temperatura-di-servizio .products,
.archive.tax-pa_tipologia .products,
.page-template-template-feature-products .products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 4rem;
  margin-top: 6.5rem;
}

.post-type-archive-product .product,
.archive.tax-product_cat .product,
.archive.tax-pa_colore .product,
.archive.tax-pa_denominazione .product,
.archive.tax-pa_formato .product,
.archive.tax-pa_temperatura-di-servizio .product,
.archive.tax-pa_tipologia .product,
.page-template-template-feature-products .product {
  display: grid;
  float: none !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.post-type-archive-product .product .product-title,
.archive.tax-product_cat .product .product-title,
.archive.tax-pa_colore .product .product-title,
.archive.tax-pa_denominazione .product .product-title,
.archive.tax-pa_formato .product .product-title,
.archive.tax-pa_temperatura-di-servizio .product .product-title,
.archive.tax-pa_tipologia .product .product-title,
.page-template-template-feature-products .product-title {
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--accent-color-dark);
}

.post-type-archive-product .product > a.archive-img-wrapper,
.archive.tax-product_cat .product > a.archive-img-wrapper,
.archive.tax-pa_colore .product > a.archive-img-wrapper,
.archive.tax-pa_denominazione .product > a.archive-img-wrapper,
.archive.tax-pa_formato .product > a.archive-img-wrapper,
.archive.tax-pa_temperatura-di-servizio .product > a.archive-img-wrapper,
.archive.tax-pa_tipologia .product > a.archive-img-wrapper,
.page-template-template-feature-products .product > a.archive-img-wrapper {
  height: 400px;
}

.post-type-archive-product .product .product-image,
.archive.tax-product_cat .product .product-image,
.archive.tax-pa_colore .product .product-image,
.archive.tax-pa_denominazione .product .product-image,
.archive.tax-pa_formato .product .product-image,
.archive.tax-pa_temperatura-di-servizio .product .product-image,
.archive.tax-pa_tipologia .product .product-image,
.page-template-template-feature-products .product-image {
  height: 100%;
}

.post-type-archive-product .product .product-image img,
.archive.tax-product_cat .product .product-image img,
.archive.tax-pa_colore .product .product-image img,
.archive.tax-pa_denominazione .product .product-image img,
.archive.tax-pa_formato .product .product-image img,
.archive.tax-pa_temperatura-di-servizio .product .product-image img,
.archive.tax-pa_tipologia .product .product-image img,
.page-template-template-feature-products .product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* WC Product > Booking */
.post-type-archive-product .product.product-type-booking .product-image img,
.archive.tax-product_cat .product.product-type-booking .product-image img,
.page-template-template-feature-products
  .product.product-type-booking
  .product-image
  img {
  object-fit: cover;
}

.post-type-archive-product .product .product-button,
.archive.tax-product_cat .product .product-button,
.archive.tax-pa_colore .product .product-button,
.archive.tax-pa_denominazione .product .product-button,
.archive.tax-pa_formato .product .product-button,
.archive.tax-pa_temperatura-di-servizio .product .product-button,
.archive.tax-pa_tipologia .product .product-button,
.page-template-template-feature-products .product .product-button {
  margin-top: auto;
}

@media screen and (max-width: 992px) {
  .post-type-archive-product .products,
  .archive.tax-product_cat .products,
  .archive.tax-pa_colore .products,
  .archive.tax-pa_denominazione .products,
  .archive.tax-pa_formato .products,
  .archive.tax-pa_temperatura-di-servizio .products,
  .archive.tax-pa_tipologia .products,
  .page-template-template-feature-products .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 500px) {
  .post-type-archive-product .products,
  .archive.tax-product_cat .products,
  .archive.tax-pa_colore .products,
  .archive.tax-pa_denominazione .products,
  .archive.tax-pa_formato .products,
  .archive.tax-pa_temperatura-di-servizio .products,
  .archive.tax-pa_tipologia .products,
  .page-template-template-feature-products .products {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* END WOOCOMMERCE ARCHIVE PAGE ----------------------------- */

/* WOOCOMMERCE > SINGLE PRODUCT TEMPLATE - Child sites
 * stilizza la pagina dettaglio dei prodotti
------------------------------------------------- */

.single-product .site .site-main {
  padding-top: 0;
}

.single-product .page-content,
.entry-content,
.entry-summary {
  margin-top: 0;
}

.single-product .woocommerce-breadcrumb {
  --bg-color: var(--primary-color);
  text-align: center;
  background-color: var(--bg-color);
  margin-bottom: 0 !important;
  color: var(--white) !important;
  padding-top: 12rem !important;
  padding-inline: 1rem;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--white) !important;
}

/* HEADER > TITOLO, SHORT DESC., PRICE 
------------------------------------------------- */

.single-product .product-data {
  text-align: center;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 1rem 10rem;
  margin-bottom: 4em;
  position: relative;
  top: -2px;
}

.single-product .product-data .product_title {
  margin: 0 1rem 1rem;
}

@media screen and (max-width: 992px) {
  .single-product .product-data {
    padding: 2rem 0.5rem 1rem;
  }

  .single-product .product-data .product_title {
    margin-top: 1rem;
  }
}

.single-product .product-data .woocommerce-product-details__short-description {
  /* font-family: ; */
}

.single-product .product-data .price {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  font-size: 1rem;
}

.single-product p.price,
.single-product span.price {
  color: var(--white);
  font-size: 1rem;
}

.single-product .product-data .price span.amount {
  font-weight: 300;
  font-size: 1.5rem;
}

@media screen and (min-width: 992px) {
  .single-product .summary {
    margin-bottom: 8rem;
  }
}

/* BOOKING FORM - DATE PICKER 
------------------------------------------------- */

.single-product .wc-bookings-booking-form {
  border: none;
  padding: 0;
}

.single-product .wc-bookings-booking-form .form-field.wc_bookings_field_persons,
.single-product .wc-bookings-booking-form .form-field.wc_booking_field_opzioni {
  display: flex;
  align-items: baseline;
}

@media screen and (max-width: 992px) {
  .single-product
    .wc-bookings-booking-form
    .form-field.wc_bookings_field_persons,
  .single-product
    .wc-bookings-booking-form
    .form-field.wc_booking_field_opzioni {
    margin-top: 1rem;
  }
}

.single-product
  .wc-bookings-booking-form
  .form-field.wc_bookings_field_persons
  label {
  margin-right: 1rem;
}

.single-product
  .wc-bookings-booking-form
  .form-field.wc_booking_field_opzioni
  label {
  margin-right: 1.25rem;
}

.single-product .wc-bookings-booking-form .form-field input[type="number"],
.input-text.qty.text {
  width: 100px;
}

.single-product .wc-bookings-date-picker-timezone-block {
  display:none;
}

.single-product .wc-bookings-date-picker {
  padding: 0;
  margin-top: 1.5rem;
}

.single-product .wc-bookings-date-picker .ui-datepicker-header {
  border-radius: 0;
}

.single-product .wc-bookings-date-picker .ui-widget-content {
  border-radius: 0;
  border: 4px solid var(--secondary-color);
  box-shadow: none;
}

/* DATE PICKER
------------------------------------------------- */
.single-product .wc-bookings-date-picker .ui-datepicker td.bookable a {
  background-color: var(--accent-color-dark) !important;
}

/* CURRENT DATE */
.single-product
  .wc-bookings-date-picker
  .ui-datepicker
  td.ui-datepicker-current-day
  a {
  background-color: var(--secondary-color) !important;
}

/* COSTO PRENOTAZIONE 
------------------------------------------------- */
.single-product .wc-bookings-booking-form .wc-bookings-booking-cost {
  margin: 0;
}

/* FORM > BTN > PRENOTA - ADD TO CART 
------------------------------------------------- */
.single-product form .wc-bookings-booking-form-button,
.single-product form .wc-bookings-booking-form-button.disabled,
.single-product form .single_add_to_cart_button {
  padding: 1rem 2rem;
  border-radius: 10rem;
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: var(--white);
  float: unset;
  margin-inline: auto;
  display: block;
  transition: 0.3s;
}

.single-product
  form
  .single_add_to_cart_button:not(.wc-bookings-booking-form-button) {
  margin: 2rem 0;
}

.single-product form .wc-bookings-booking-form-button:hover:not(.disabled),
.single-product form .wc-bookings-booking-form-button:focus:not(.disabled),
.single-product form .single_add_to_cart_button:hover:not(.disabled),
.single-product form .single_add_to_cart_button:focus:not(.disabled) {
  background-color: var(--white);
  color: var(--secondary-color);
}

.single-product form .wc-bookings-booking-form-button.disabled {
  opacity: 0.6;
}

@media screen and (max-width: 992px) {
  /* INPUT > quantita' prodotti */
  .single-product form .quantity {
    margin-top: 2.5rem;
  }
}

/* time picker */
.wc-bookings-booking-form .block-picker li a:hover, 
.wc-bookings-booking-form .block-picker li a:focus {
    background-color: var(--primary-color) !important;
}
.wc-bookings-booking-form .block-picker li > a.selected {
  background-color: var(--primary-color) !important;
}

/* GALLERY 
------------------------------------------------- */

.single-product .woocommerce-product-gallery ul,
.single-product .woocommerce-product-gallery ol {
  list-style: none;
}

.single-product .woocommerce-product-gallery {
  height: 480px;
  position: relative;
}

@media screen and (max-width: 992px) {
  .single-product .woocommerce-product-gallery {
    margin-bottom: 7rem;
  }
}

/* PULSANTE CHE APRE LA GALLERY */
.single-product
  .woocommerce-product-gallery
  .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0.5rem;
  background: var(--light-gray);
}
.single-product
  .woocommerce-product-gallery
  .woocommerce-product-gallery__trigger
  img.emoji {
  width: 2rem !important;
  height: 2rem !important;
}

.single-product
  .woocommerce-product-gallery
  .woocommerce-product-gallery__image {
  height: 480px;
}

@media screen and (max-width: 480px) {
  .single-product .woocommerce-product-gallery,
  .single-product
    .woocommerce-product-gallery
    .woocommerce-product-gallery__image {
    height: 300px;
  }
}

.single-product
  .woocommerce-product-gallery
  .woocommerce-product-gallery__image
  > a
  > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.15);
}

/* WC Product > Booking */
.single-product
  .product-type-booking
  .woocommerce-product-gallery
  .woocommerce-product-gallery__image
  > a
  > img {
  object-fit: cover;
}

.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
  display: flex;
  margin: 0;
  padding: 0;
  overflow: auto;
  margin-top: 0.5rem;
}

.single-product .woocommerce-product-gallery ol.flex-control-thumbs li {
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* META DATA > NASCONDE IL LINK CATEGORIA PRODOTTO */
.single-product .product_meta .posted_in {
  display: none;
}
/* META DATA > COD */
.single-product .product_meta .sku_wrapper {
  /*display: inline-block;*/
  /*margin-bottom: 1rem;*/
  display: none;
}

/* SCHEDA PRODOTTO -> Custom fields + Attributi + icone
------------------------------------------------------------------ */

.product_meta p[class*="cf_"] {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.product_meta p[class*="cf_"] > span {
  font-size: inherit;
}

.product_meta p[class*="cf_"] {
  position: relative;
  display: grid;
  grid-template-columns: 25px auto 1fr;
  column-gap: 0.5rem;
}

.product_meta p[class*="cf_"]::before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: 95%;
  background-position: center;
}

/* TO DO: CHECK */
.product_meta .cf_annata::before {
  background-image: url("./img/icons/cf_annata.svg");
}
.product_meta .cf_denominazione::before {
  background-image: url("./img/icons/cf_denominazione.svg");
}
.product_meta .cf_vitigni::before {
  background-image: url("./img/icons/cf_vitigni.svg");
}
.product_meta .cf_alcol::before {
  background-image: url("./img/icons/cf_alcol.svg");
  background-size: 45% !important;
}
.product_meta .cf_formato::before {
  background-image: url("./img/icons/cf_formato.svg");
  background-size: 70% !important;
}
.product_meta .cf_allergeni::before {
  background-image: url("./img/icons/cf_allergeni.svg");
  background-size: 85% !important;
}
.product_meta .cf_consumo::before {
  background-image: url("./img/icons/cf_consumo.svg");
}
.product_meta .cf_temperatura::before {
  background-image: url("./img/icons/cf_temperatura.svg");
}
.product_meta .cf_degustazione::before {
  background-image: url("./img/icons/cf_degustazione.svg");
}
.product_meta .cf_tipologia::before {
  background-image: url("./img/icons/cf_tipologia.svg");
  background-size: 85% !important;
}
.product_meta .cf_colore::before {
  background-image: url("./img/icons/cf_colore.svg");
}
.product_meta .cf_abbinamenti::before {
  background-image: url("./img/icons/cf_abbinamenti.svg");
}

/* TABS > descrizione, recensione, informazione aggiuntiva
------------------------------------------------------------ */

.woocommerce-tabs.wc-tabs-wrapper {
  margin-block: 5rem;
}

.woocommerce div.product .woocommerce-tabs .panel {
  margin: 0;
  padding: 4rem 10rem 3.2rem;
  border: 1px solid var(--secondary-color);
  /* border-top: none; */
}

@media screen and (max-width: 756px) {
  .woocommerce div.product .woocommerce-tabs .panel {
    padding: 1rem;
  }
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  height: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  /* overflow: hidden; */
  position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 1px solid var(--secondary-color);
  border-bottom-width: 2px;
  background-color: var(--secondary-color);
  display: inline-block;
  position: relative;
  z-index: 0;
  border-radius: 25px 25px 0 0;
  margin: 0;
  padding: 0.4rem 1.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--white);
  color: var(--secondary-color);
  z-index: 10;
  top: 2px;
  border-bottom-color: var(--white);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: inherit;
  text-shadow: inherit;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.5em 0;
  color: var(--white);
  text-decoration: none;
}

.woocommerce
  div.product
  .woocommerce-tabs
  ul.tabs
  li
  a:hover
  .woocommerce
  div.product
  .woocommerce-tabs
  ul.tabs
  li
  a:focus {
  text-decoration: none;
  color: var(--white);
}

/* .woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  border: 1px solid #cfc8d8;
  position: absolute;
  bottom: -1px;
  width: 5px;
  height: 5px;
  content: " ";
  box-sizing: border-box;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  left: -5px;
  border-bottom-right-radius: 4px;
  border-width: 0 1px 1px 0;
  box-shadow: 2px 2px 0 #e9e6ed;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  right: -5px;
  border-bottom-left-radius: 4px;
  border-width: 0 0 1px 1px;
  box-shadow: -2px 2px 0 #e9e6ed;
} */

/* .woocommerce div.product .woocommerce-tabs ul.tabs::before {
  position: absolute;
  content: " ";
  width: 100%;
  bottom: 0;
  left: 0;
  border-bottom: 1px solid var(--secondary-color);
  z-index: 1;
} */

/* SCHEDA DEGUSTAZIONE
--------------------------------------------------- */

.degustazione_wrapper {
  padding: 4rem 10rem 3.2rem;
}
@media screen and (max-width: 480px) {
  .degustazione_wrapper {
    padding: 1rem;
  }
}

/* PRODOTTI CORRELATI 
----------------------------------------------------- */

.single-product .related.products {
  width: 45%;
  margin-bottom: 10rem;
}

.single-product .related.products > h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
  text-align: center;
}

.single-product .related.products ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.single-product .related.products ul.products li.product {
  float: unset;
  margin-bottom: 0;
  display: grid;
  height: 100%;
}

.single-product .related.products ul.products li.product .product-image {
  height: 300px;
}

.single-product .related.products ul.products li.product,
.single-product .related.products ul.products li.product .product-image > img {
  width: 100%;
  height: 100%;
}

.single-product .related.products ul.products li.product .product-image > img {
  object-fit: contain;
}

/* WC Product > Booking */
.single-product
  .related.products
  ul.products
  li.product-type-booking
  .product-image
  > img {
  object-fit: cover;
}

.single-product .related.products ul.products li.product .product-title {
  font-size: var(--font-size-22);
  font-weight: 500;
  color: var(--primary-color);
  margin: 1rem 0 0;
  margin-bottom: 0.6rem;
}

.single-product .related.products ul.products li.product .short-description {
  color: var(--black);
  font-size: 0.95rem;
  font-weight: 300;
}

.single-product .related.products ul.products li.product .price {
  font-size: 1rem;
  font-weight: bold;
  color: var(--black);
  display: block;
  text-align: center;
  margin-bottom: 3.5rem;
}

.single-product .related.products ul.products li.product .product-button .btn {
  /* position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); */
  border-radius: 10rem;
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  color: var(--white);
  font-size: 1rem;
  text-wrap: nowrap;
  padding: 0.3rem 1.2rem;
  transition: 0.3s;
}

.single-product
  .related.products
  ul.products
  li.product
  .product-button
  .btn:hover,
.single-product
  .related.products
  ul.products
  li.product
  .product-button
  .btn:focus,
.single-product
  .related.products
  ul.products
  li.product
  .product-button
  .btn:active {
  border: 2px solid var(--primary-color) !important;
  background-color: var(--white) !important;
  color: var(--primary-color) !important;
}

@media screen and (max-width: 1100px) {
  .single-product .related.products {
    width: 100%;
    margin-bottom: 18rem;
  }
}

@media screen and (max-width: 500px) {
  .single-product .related.products ul.products {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Attributi visualizzati nel Tab Informazioni aggiuntive */
.single-product
  .shop_attributes
  .woocommerce-product-attributes-item--attribute_pa_colore,
.single-product
  .shop_attributes
  .woocommerce-product-attributes-item--attribute_pa_denominazione,
.single-product
  .shop_attributes
  .woocommerce-product-attributes-item--attribute_pa_formato,
.single-product
  .shop_attributes
  .woocommerce-product-attributes-item--attribute_pa_temperatura-di-servizio,
.single-product
  .shop_attributes
  .woocommerce-product-attributes-item--attribute_pa_tipologia {
  display: none;
}

/* VIRTUAL TOUR BANNER 
------------------------------------------------- */

/* TO DO: RESPONSIVENESS */
@media screen and (min-width: 993px) and (max-width: 1100px) {
  .single-product .virtualtour-banner {
    bottom: 17%;
    width: 70%;
  }
  .single-product .related.products {
    margin-bottom: 21rem;
  }
}
@media screen and (min-width: 757px) and (max-width: 992px) {
  .single-product .virtualtour-banner {
    bottom: 14%;
  }
}
@media screen and (min-width: 481px) and (max-width: 756px) {
  .single-product .virtualtour-banner {
    bottom: 22%;
  }
}
@media screen and (max-width: 480px) {
  .single-product .virtualtour-banner {
    bottom: 18%;
  }
}

/* END SINGLE PRODUCT TEMPLATE ------------------------------------------------- */


/* TODO: (WORK IN PROGRESS) */
/* MAIN MENU > RESPONSIVENESS
---------------------------------------------------------------------------- */

.site-header.main-header button.menu-toggle {
  line-height: 1;
  background-color: transparent;
  border: none;
  border-radius: 0;
  transition: var(--default-transition);
  margin-left: auto;
  padding: 0.5rem;
  padding-right: 0;
}
.site-header.main-header .main-navigation.toggled button.menu-toggle:active,
.site-header.main-header .main-navigation.toggled button.menu-toggle:focus,
.site-header.main-header .main-navigation.toggled button.menu-toggle:hover {
  background-color: transparent !important;
}
.site-header.main-header button.menu-toggle .navbar-toggler-icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='3' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='3' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='3' y1='18' x2='21' y2='18'%3e%3c/line%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
@media screen and (max-width: 480px) {
  .site-header.main-header .site-branding,
  .site-header.main-header .parent-site-branding {
    margin-right: 0;
    position: absolute;
    top: 6.5rem;
  }
  .site-header.main-header .site-branding img,
  .site-header.main-header .parent-site-branding img {
    max-width: 60px;
  }
  .site-header.main-header .parent-site-branding {
    left: 40%;
  }

  .main-navigation.toggled .menu-main-menu-container {
    padding-block: 0.6rem;
  }

  form.woocommerce-product-search input[type="search"] {
    width: 100%;
  }

  .site-header.main-header,
  .site-header.main-header.fixed {
    padding-bottom: 0;
  }

  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children
    ul.sub-menu {
    display: block;
  }
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children:hover
    ul.sub-menu,
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children:focus
    ul.sub-menu,
  .main-navigation
    ul#primary-menu
    li.menu-item.menu-item-has-children.focus
    ul.sub-menu {
    left: 0;
  }
}
/* END MAIN MENU > RESPONSIVENESS --------------------------------------------- */

/* HERO SECTION DEI SITI FIGLI
 * Homepage delle cantine
------------------------------------------------- */

.virtualtour-banner,
.virtualtour-banner::before {
  position: absolute;
  background-color: var(--primary-color);
}

.virtualtour-banner {
  margin: 0;
  width: 50%;
  padding: 1.5rem;
  bottom: 4.5rem;
  right: 0;
  z-index: 100;
}

.virtualtour-banner::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.virtualtour-banner p {
  max-width: 300px;
  color: var(--white);
  font-size: var(--font-size-22);
}

.virtualtour-banner .virtualtour-button {
  background-color: var(--accent-color-dark);
}

.virtualtour-banner .blur-bg {
  width: 260px;
  height: 260px;
  backdrop-filter: blur(30px);
}

.virtualtour-banner .blur-bg,
.virtualtour-banner .virtualtour-button {
  left: 500px;
}

@media screen and (min-width: 1100px) and (max-width: 1280px) {
  .site-main.front-page .virtualtour-banner {
    width: 60%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1099px) {
  .site-main.front-page .virtualtour-banner {
    width: 70%;
  }
}

@media screen and (max-width: 991px) {
  .virtualtour-banner {
    width: 80%;
  }
  .virtualtour-banner p {
    font-size: 0.85rem;
  }
  .virtualtour-banner .virtualtour-button {
    width: 120px;
    height: 120px;
  }
  .virtualtour-banner .blur-bg {
    width: 210px;
    height: 210px;
  }
}

@media screen and (max-width: 756px) {
  .virtualtour-banner {
    bottom: 3rem;
    width: 100%;
    padding: 0.9rem;
  }

  .virtualtour-banner p {
    max-width: 45%;
  }

  .virtualtour-banner .virtualtour-button {
    width: 90px;
    height: 90px;
  }

  .virtualtour-banner .blur-bg {
    width: 150px;
    height: 150px;
  }

  .virtualtour-banner .blur-bg,
  .virtualtour-banner .virtualtour-button {
    left: 70%;
  }
}

/* END HERO SECTION DEI SITI FIGLI ------------------------------------*/

/* VIRTUAL TOUR PAGE TEMPLATE 
---------------------------------------------------------------*/

.page-template-template-virtualtour .site .site-main {
  padding-top: 0;
}

.page-template-template-virtualtour .hero-virtualtour {
  padding-top: 14rem;
  background-color: var(--secondary-color);
}

.page-template-template-virtualtour .virtual-tour-post {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-template-template-virtualtour .virtual-tour-posts .virtual-tour-post h2 {
  color: var(--accent-color-dark);
}

.page-template-template-virtualtour .modal .modal-content {
  background-color: rgba(0, 0, 0, 0.9);
}
.page-template-template-virtualtour .modal .modal-header {
  border-bottom: none;
  padding: 1rem 5%;
}
.page-template-template-virtualtour .modal .modal-header * {
  color: var(--white);
}
.page-template-template-virtualtour .modal .modal-body {
  padding: 0;
  overflow: hidden;
}
.page-template-template-virtualtour .modal .iframe-container {
  height: 100%;
}
.page-template-template-virtualtour .modal .btn-close {
  margin: 0;
  opacity: 1;
  border: none;
  background: transparent
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
    center/1.8em auto no-repeat;
}

.modal.fade:not(.modal.fade.show) .modal-dialog,
.modal-from-left {
  transition: transform 0.4s ease-out;
  transform: translate(-100px, 0);
}

/* pagination */
.page-template-template-virtualtour .pagination .pagination-button {
  text-decoration: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.2rem;
}
.page-template-template-virtualtour .pagination .pagination-button.current {
  color: var(--secondary-color);
  font-weight: bold;
}

/* END VIRTUAL TOUR PAGE TEMPLATE ----------------------------- */

/* OVERLAY VIRTUAL TOUR BTN
 * pagina dei Virtual Tours + Slider (Vincoop Homepage) 
------------------------------------------------------------------- */

.blur-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px; /* Regola la dimensione del blur  */
  height: 130px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background-color: transparent;
  backdrop-filter: blur(26px);
  z-index: 10;
}

.overlay-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  border-radius: 50%;
  background-color: var(--accent-color-dark); /* Colore di sfondo */
  width: 80px; /* Regola la dimensione del logo */
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.575);
}

/* Slider > Vincoop Homepage */
.one-product-slider .blur-overlay,
.two-product-slider .blur-overlay,
.three-product-slider .blur-overlay {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  transform: translate(-10%, -10%);
}

.one-product-slider .overlay-wrapper,
.two-product-slider .overlay-wrapper,
.three-product-slider .overlay-wrapper {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  transform: translate(-47.5%, -47.5%);
}

/* END OVERLAY VIRTUAL TOUR BTN----------------------------- */


/* 
 * ANIMAZIONI & TRANSIZIONI
------------------------------------------------------------------- */

/* L'opacità viene gestita tramite JS > file scripts.js */
.one-product-slider,
.two-product-slider,
.three-product-slider,
.grid-system.virtual-tour-posts,
.vincoop-hero-video { 
  opacity: 0;
  transition: var(--default-transition);
}