/*
Theme Name: Vogel
Theme URI: http://underscores.me/
Author: The Rope S.r.l
Author URI: https://www.therope.it
Description: Theme for Vogel
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: vogel
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-width-template
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Woocommerce
# Footer
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url("https://use.typekit.net/llq0bfy.css");


:root {
  --color-blue: #0033A0;
  --color-bg: #F2F1F0;
  --color-bg-grey-light: #EDEBE7;
  --color-white: #fff;
  --padding: 16px;
  --padding-laterale: 44px;
  --padding-top: 100px;
  --font-title: futura-pt, sans-serif;
  --font-label: helvetica-neue-lt-pro, sans-serif;
  --icon-arrow-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23323232'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --icon-arrow-down: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23323232'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

body {
    -webkit-font-smoothing: antialiased;
    letter-spacing: .3px;
    font-size: 20px;
    line-height: normal;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--color-bg);
    color: var(--color-blue);
    width: 100%;
    overflow-x: hidden;
}

.scroll-mobile {
  overflow: auto;
}

.no-scroll {
  overflow: hidden;
}

.dropdown-menu {
  border: none;
}

[class*="title-"] {
    font-family: helvetica-neue-lt-pro, sans-serif;
}

.btn-link {
    font-size: 16px;
    font-weight: 450;
    color: var(--color-white);
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: all ease-in-out 0.2s;
}
.open-nav .header-site .btn-link,
.header_active .header-site .btn-link,
.single-product .header-site .btn-link {
    color: var(--color-blue);
}
.btn-link:before {
    content: "";
    position: absolute;
    top: 6px;
    left: -20px;
    border-radius: 50%;
    background-color: var(--color-blue);
    z-index: 1;
    display: block;
    width: 9px;
    height: 9px;
}


/* .btn--primary {
    font-size: 16px;
    letter-spacing: 4.8px;
    font-weight: 450;
    text-transform: uppercase;
    border-bottom: solid 1px var(--color-blue);
    text-decoration: none;
    padding-bottom: var(--padding);
} */

.btn--primary{
  font-size: 16px;
  letter-spacing: 4.8px;
  font-weight: 450;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: var(--padding, 8px);
  color: var(--color-blue, #1239ff);

  position: relative;
  display: inline-block;
  overflow: hidden;

  /* variabili animate */
  --mask-scale: 1;   /* 1 = coperto, 0 = scoperto */
  --line-pos: 0;     /* 0 = riga in alto, 100 = riga in basso */
}

/* Overlay che copre il testo e si ritira verso il basso */
.btn--primary::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg); /* imposta al colore reale dello sfondo */
  transform-origin: top;
  transform: scaleY(var(--mask-scale));
  z-index: 1;
  will-change: transform;
}

/* Riga animata: resta sempre il nostro “border” */
.btn--primary::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-blue, #1239ff);

  /* Spostiamo la riga con 'bottom' in funzione di --line-pos:
     0  -> bottom:100% (riga in alto)
     100-> bottom:0   (riga a filo inferiore, senza salti) */
  bottom: calc(100% - (var(--line-pos) * 1%));

  z-index: 2;
  will-change: bottom;
}




video {
    display: block;
    width: 100%;
}


.page-container-980 {
    max-width: 980px !important;
}

/* header */
.btn-book-appointment-banner {
    background-color: var(--color-blue);
    color: var(--color-white);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: underline;
    padding: 3px var(--padding-laterale) 5px;
    position: relative;
}
.btn-book-appointment-banner svg {
    position: absolute;
    right: var(--padding-laterale);
}
.menu-aside {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
}
.open-nav .menu-aside {
    display: flex;
}
.header_active .logo_cavallo,
.open-nav .logo_cavallo {
    display: none;
}
.single-product .logo_cavallo path {
    fill: var(--color-blue);
}
.logo_nome {
    display: none;
}
.header_active .logo_nome,
.open-nav .logo_nome {
    display: block;
}

.header-site {
    position: fixed;
    z-index: 5;
    width: 100%;
    padding: 29px var(--padding-laterale);
    transition: all ease-in-out 0.2s;
}
.header_active .header-site,
.open-nav .header-site {
    background-color: var(--color-bg);
}
.header-site > ul {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 3;
}
.header-site > ul > li {
    display: flex;
    width: 33.333%;
}
.header-site ul li:nth-child(2) {
    align-items: center;
    justify-content: center;
}
.header-site ul li:nth-child(3) {
    align-items: flex-start;
    justify-content: flex-end;
}
.btn-hamburger {
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
}
.btn-hamburger > span {
    position: absolute;
    display: none;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 450;
    top: 3px;
    right: -90px;
}
.open-nav .btn-hamburger > span {
    display: flex;
}
.btn-hamburger::before {
    content: "";
    display: block;
    width: 23px;
    height: 1px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-top: solid 2px var(--color-white);
    position: absolute;
    transition: all ease-in-out 0.2s;
}
.btn-hamburger::after {
    content: "";
    display: block;
    width: 23px;
    height: 1px;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    border-top: solid 2px var(--color-white);
    position: absolute;
    transition: all ease-in-out 0.2s;
}
.open-nav .btn-hamburger::after {
    transform: rotateZ(45deg);
    left: 12%;
    top: 48%;
}
.open-nav .btn-hamburger::before {
    transform: rotateZ(-45deg);
    left: 12%;
    top: 45%;
}
.open-nav .btn-hamburger::before,
.open-nav .btn-hamburger::after,
.header_active .btn-hamburger::before,
.header_active .btn-hamburger::after,
.single-product .btn-hamburger::before,
.single-product .btn-hamburger::after {
    border-color: var(--color-blue);
}


/* nav header */
.nav-link {
    font-weight: 450;
}
.menu-aside__menu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding-laterale);
}
.menu-primary-shoes-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--padding-laterale);
}
.menu-primary-shoes-mobile-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--padding-laterale);
    font-size: 7.5vw;
}
#menu-primary-shoes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--padding);
    white-space: nowrap;
    align-self: flex-end;
    padding-right: var(--padding-laterale);
    margin-bottom: var(--padding-laterale);
}
#menu-primary-shoes-mobile {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--padding-laterale);
    white-space: nowrap;
    padding-left: var(--padding-laterale);
    padding-right: var(--padding-laterale);
}
#menu-primary-shoes .nav-link,
#menu-primary-shoes-mobile .nav-link {
    line-height: normal;
}
#menu-primary-shoes-mobile .nav-link {
    text-transform: uppercase;
    border-bottom: solid 3px transparent;
    font-weight: 400;
    line-height: 90% !important;
}
#menu-primary-shoes .nav-link,
.nav-link-border {
    text-decoration: none;
    border-bottom: solid 1px transparent;
}
.nav-link-border:hover,
#menu-primary-shoes .nav-link:hover,
#menu-primary-shoes-mobile .nav-link:hover {
    border-color: var(--color-blue);
}
.social-link {
    display: flex;
    padding: 6px;
    border-radius: 3px;
    border: 1px solid #98A4BF;
}
.menu-aside__footer ul li {
    display: flex;
    flex-direction: row;
    gap: var(--padding);
}



.menu-aside__footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    align-self: flex-end;
    padding: var(--padding-laterale);
}
.menu-aside__footer > ul {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* page */
.splash__text {
  opacity: 0;
  will-change: transform, opacity, filter;
}


.container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--padding-laterale);
    padding-right: var(--padding-laterale);
}
.shoes-splash {
    width: 100%;
}
.splash__media {
    position: relative;
}
.splash__media::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
}
.splash__title {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--color-white);
    font-size: clamp( 60px, 14vw, 140px );
    text-transform: uppercase;
    font-family: var(--font-title);
    font-weight: 400;
    width: 100%;
    text-align: center;
    padding: 0 var(--padding-laterale) var(--padding-laterale);
}




.shoes-cat__header {
    display: block;
    width: 100%;
    position: relative;
}
.shoes-cat__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1440/520;
}
.shoes-cat__media img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.shoes-cat__title {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--color-white);
    font-size: clamp( 65px, 16vw, 160px );
    text-transform: uppercase;
    font-family: var(--font-title);
    font-weight: 400;
    width: 100%;
    text-align: center;
    padding: 0 var(--padding-laterale) var(--padding-laterale);
}
.shoes-cat__description {
    font-size: 20px;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-top);
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}


.shoes-cat__carousel {
    padding-bottom: var(--padding-top);
}
.shoes-prod__media {
    background-color: #E4E0DF;
    /* aspect-ratio: 340/450; */
    aspect-ratio: 340/380;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: var(--padding);
}
.shoes-prod__title {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 450;
}
.shoes-prod__link {
    text-decoration: none;
}
.shoes-cat__carousel .owl-nav.disabled,
.shoes-cat__carousel .owl-nav {
    display: flex !important;
    position: absolute;
    top: 45%;
    width: 100%;
    height: 0px;
    justify-content: space-between;
}
.owl-carousel .owl-nav button {
    width: 48px;
    height: 30px;
    display: block;
}
.owl-prev {
    position: relative;
    left: -24px;
}
.owl-next {
    position: relative;
    right: -24px;
}
.owl-prev > span {
    display: flex;
    width: 48px;
    height: 30px;
    overflow: hidden;
    text-indent: -999px;
    background-image: url(inc/assets/images/shoes/arrow_prev.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.owl-next > span {
    display: flex;
    width: 48px;
    height: 30px;
    overflow: hidden;
    text-indent: -999px;
    background-image: url(inc/assets/images/shoes/arrow_next.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

img,
figure {
    margin: 0;
}

.splash__media,
img {
    width: 100%;
    height: auto;
    display: block;
}
.splash__content {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-top);
    display: flex;
    flex-direction: column;
    gap: var(--padding-laterale);
}
.splash__label {
    font-size: 15px;
    font-family: var(--font-label);
    font-weight: 500;
    text-transform: uppercase;
}
.splash__text {
    font-size: clamp( 30px, 4.8vw, 48px );
    margin-bottom: var(--padding-laterale);
}
.cat__grid {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.cat__col {
    width: 33.333%;
    background-color: var(--color-blue);
    color: var(--color-white);
}
.cat__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:  var(--padding-laterale) var(--padding-laterale);
    position: relative;
}
.cat__content > .cat__cta {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 74px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.btn--secondary {
    text-transform: uppercase;
    text-decoration: none !important;
    font-size: 16px;
    letter-spacing: 4.8px;
    font-weight: 450;
    padding: var(--padding) var(--padding-laterale);
    width: 100%;
    height: 74px;
    transition: color ease-in-out 0.4s;
    display: flex;
    align-items: center;
}
.btn--secondary:hover {
    color: var(--color-blue);
}
.btn--secondary span {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    background-color: var(--color-white);
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: all ease-in-out 0.3s;
    padding-right: 30px;
}
.btn--secondary:hover span {
    width: 100%;
}


.card {
    position: relative;
    overflow: hidden;
}

.card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: var(--padding-laterale);
    width: 100%;
    height: 100%;
    background-color: var(--color-blue);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
}

/* Card dispari - entrano dall'ALTO con rotazione negativa */
.card:nth-child(odd) .card__content {
    transform: translateY(-120%) rotateX(-15deg);
}

/* Card pari - entrano dal BASSO con rotazione positiva */
.card:nth-child(even) .card__content {
    transform: translateY(120%) rotateX(15deg);
}

.card:hover .card__content {
    transform: translateY(0) rotateX(0);
    opacity: 1;
}

.card__cta {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
}






.shoes-inspiration {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}


/* Galleria ispirazione */
.insp__head {
    padding-left: 57vw;
    position: relative;
    top: 10vw;
    z-index: 3;
}
.insp__text {
    margin-bottom: var(--padding-laterale);
}
.insp__gallery{
  display: grid;
  grid-template-columns: minmax(280px,1fr) minmax(280px,1fr);
  grid-auto-rows: auto;
  grid-template-rows: auto auto; /* riga alta + banner */
  gap: clamp(20px,2vw,40px);
  align-items: start;
  position: relative;
}

/* reset figure */
.insp__item{ margin:0; }
.insp__img{ display:block; width:100%; height:auto; }

/* 1) grande sinistra (primo figure) */
.insp__item:nth-child(1){
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  max-width: 60%;
}

/* 2) piccolo centrato sopra, tra le due colonne */
.insp__item:nth-child(2){
    grid-column: 1 / -1;   /* occupa entrambe le colonne ma lo centriamo */
    grid-row: 1;
    justify-self: center;
    align-self: start;
    z-index: 2;            /* sopra alle grandi se serve sovrapporre */
    width: 14vw; /* dimensione controllata */
    top: 10vw;
    left: -4vw;
    position: relative;
}

/* 3) grande destra */
.insp__item:nth-child(3){
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    max-width: 80%;
    margin-top: 15vw;
    position: relative;
}

/* 4) banner orizzontale in basso a tutta larghezza */
.insp__item:nth-child(4){
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    width: 100%;
    width: 53vw;
    position: relative;
    left: calc( var(--padding-laterale) * -1 );
    top: -10vw;
}
.insp__item {
  will-change: transform;
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}


.icon-scroll {
    position: absolute;
    bottom: var(--padding-laterale);
    left: 50%;
    width: 50px;
    height: 50px;
    background-image: url(/wp-content/themes/vogel/inc/assets/images/icon_scroll.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* footer */
#footer-newsletter {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
#footer-newsletter::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-grey-light);
}
#footer-newsletter > * {
    position: relative;
    z-index: 2;
}
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
}
.footer-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--color-blue);
    padding: 13px var(--padding-laterale);
    margin: 0 auto 44px auto;
}
#menu-footer-shoes {
    width: fit-content;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    gap: 60px;
}
#menu-footer-shoes li {
    position: relative;
}
#menu-footer-shoes li:not(:first-of-type):before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-white);
    position: absolute;
    top: 9px;
    left: -36px;
    z-index: 1;
}

#menu-footer-shoes a,
#menu-footer-shoes a:hover,
#menu-footer-shoes a:visited {
    color: var(--color-white);
    font-size: 16px;
    font-family: futura-pt, sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer-bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 44px;
    background-color: var(--color-bg-grey-light);
    padding: 13px var(--padding-laterale);
}
.footer-bottom > * {
    width: 33.333%;
    display: flex;
    flex-direction: row;
    font-size: 16px;
    color: var(--color-blue);
}
.copyright.only-desktop {
    text-transform: uppercase;
}
.footer-bottom-center {
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 10px;
}
.footer-bottom-right {
    align-items: center;
    justify-content: flex-end;
}
#menu-footer-policy-shoes {
    align-items: center;
    justify-content: flex-end;
    display: flex;
    flex-direction: row;
    gap: 20px;
}



/* newsletter */
#footer-newsletter {
    padding: 50px 0 !important;
}
.scrolling-text-big {
    font-size: clamp( 34px, 4.4vw, 44px);
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--color-blue);
    margin-top: 80px;
}
.page-template-page-contact-us-shoes #gform_wrapper_2 input:checked[type=checkbox]#choice_2_9_1,
.page-template-page-contact-us-shoes #gform_wrapper_2 input:checked[type=checkbox]#choice_2_20_1,
input:checked[type=checkbox] {
    background-color: var(--color-blue) !important;
}




/* woocommerce */
.woocommerce-breadcrumb {
    display: none;
}

/* pagina prodotto */
.product-container-info { 
  display: flex;
  justify-content: flex-start;
}

.pg-dots{
  position: absolute;
  left: calc( 50vw - 36px );
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
  pointer-events: auto;
}

/* quando la gallery è “attiva”, fissa in basso alla viewport */
.pg-dots.is-fixed{
  position: fixed;
  left: calc( 50vw - 36px );
  bottom: 16px;
  top: auto;   /* importante per sovrascrivere eventuali top */
}

.pg-dot {
  width: 10px;
  height: 10px;
  border: 1px solid #1f3cae; /* blu tema */
  background: transparent;
  border-radius: 2px;         /* “quadratini” leggermente stondati */
  cursor: pointer;
  opacity: .7;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
  padding: 0;
}

.pg-dot.is-active {
  background: #1f3cae;
  opacity: 1;
  transform: scale(1.05);
}

/* opzionale: dimensioni su mobile */
@media (max-width: 768px) {
  .pg-dot { width: 9px; height: 9px; }
}


.summary.entry-summary {
    display: flex;
    align-items: center;
}
.woocommerce div.product .woocommerce-tabs .panel {
    margin-bottom: 150px;
}

.fixed-element, .some-images {
  width: 50%;
  max-width: 50%;
  min-width: 50%;
  flex: 1 1 50%;
}
.some-images,
.shoes-prod__media {
    background-color: #D9D9D9;
    position: relative;
}
.some-images .image {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
}
.some-images img,
.shoes-prod__media img,
.product-gallery__carousel__images img {
    mix-blend-mode: darken;
}
.fixed-element {
    width: 50%;
    flex: 1 1 50%;
    height: 100vh;
}
.image {
  height: 100vh;
}
.summary.entry-summary {
    padding: 180px 100px 100px;
}
.woocommerce-tabs.wc-tabs-wrapper {
    font-size: 16px;
    margin-top: var(--padding-laterale);
}
#tab-description h2,
.woocommerce-tabs.wc-tabs-wrapper .tabs.wc-tabs {
    display: none;
}
#sidebar-summary .product_title {
    font-family: var(--font-title);
    font-size: clamp( 28px, 4.8vw, 48px);
    font-weight: 400;
}


.accordions {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--padding-laterale);
}
.accordions .tab input {
    display: none; /* nasconde il checkbox */
}

.accordions .tab label {
    display: block;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    width: fit-content;
}
.accordions .tab label::before {
    content: "+";
    display: block;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: -20px;
    font-weight: 200;
    font-size: 20px;
}

/* contenuto nascosto di default */
.accordions .tab .content {
    display: none;
    padding: 10px 0;
    border-top: none;
    font-size: 14px;
}

/* quando l'input è attivo (checked), mostra il contenuto */
.accordions .tab input:checked + label + .content {
  display: block;
}

.btn-add-to-cart  {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: solid 1px var(--color-blue);
    width: fit-content;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
}

.product_meta {
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}
.product_meta .posted_in {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.product_meta .posted_in a {
    text-decoration: none;
    text-transform: uppercase;
    pointer-events: none;
}
.product_meta .posted_in a:first-of-type {
    display: none;
}
.product_meta .color_wrapper {
    text-transform: uppercase;
}



.product-gallery__carousel.owl-carousel .owl-nav {
    display: none !important;
}






/* cursor custom 
/* Reset del cursore predefinito 
* {
    cursor: none !important;
}

/* Cursore esterno - Stato normale 
#cursor-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-blue);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
}

/* Cursore interno - Stato normale 
#cursor-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--color-blue);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transition: width 0.3s, height 0.3s, background-color 0.3s;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
}

/* Cursore su elementi scuri 
.dark-background #cursor-outer,
.dark-background #cursor-inner {
    mix-blend-mode: difference;
    
}

/* Oppure più specifico per elementi con sfondo scuro 
[class*="dark"] #cursor-outer,
[class*="dark"] #cursor-inner,
.bg-dark #cursor-outer,
.bg-dark #cursor-inner,
.hero-section #cursor-outer,
.hero-section #cursor-inner {
    mix-blend-mode: difference;
}

/* Stato hover per elementi cliccabili 
a, button, [role="button"], input[type="submit"], .clickable {
    cursor: none !important;
}

.hover #cursor-outer {
    transform: translate(-50%, -50%) scale(1.5);
    border-color: rgba(0, 0, 0, 0.5);
}

.hover #cursor-inner {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: rgba(0, 0, 0, 0.7);
}

/* Nascondi cursore su dispositivi touch 
@media (hover: none) and (pointer: coarse) {
    #cursor-outer, #cursor-inner {
        display: none;
    }
    
    * {
        cursor: auto !important;
    }
}

/* Cursore su sfondi scuri 
#cursor-outer.dark-background,
#cursor-inner.dark-background {
    mix-blend-mode: difference;
}

/* Assicurati che il cursore abbia sempre priorità 
#cursor-outer,
#cursor-inner {
    pointer-events: none !important;
    mix-blend-mode: normal;
}

/* Stato normale 
#cursor-outer {
    border-color: var(--color-blue);
}

#cursor-inner {
    background-color: var(--color-blue);
}

/* Stato su sfondo scuro - diventa bianco 
#cursor-outer.dark-background {
    border-color: white;
}

#cursor-inner.dark-background {
    background-color: white;
}
*/





/* cursor custom */
/* Reset del cursore predefinito */
* {
    cursor: none !important;
}

/* Cursore esterno - Stato normale */
#cursor-outer {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-blue, #3b82f6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
}

/* Cursore interno - Stato normale */
#cursor-inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--color-blue, #3b82f6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transition: width 0.3s, height 0.3s, background-color 0.3s;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
}

/* Stato su sfondo scuro - diventa bianco */
#cursor-outer.dark-background {
    border-color: white;
}

#cursor-inner.dark-background {
    background-color: white;
}

/* Stato hover */
.hover #cursor-outer {
    transform: translate(-50%, -50%) scale(1.5);
    border-color: rgba(0, 0, 0, 0.5);
}

.hover #cursor-inner {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: rgba(0, 0, 0, 0.7);
}

.dark-background.hover #cursor-outer {
    border-color: rgba(255, 255, 255, 0.7);
}

.dark-background.hover #cursor-inner {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Nascondi su touch */
@media (hover: none) and (pointer: coarse) {
    #cursor-outer, #cursor-inner {
        display: none;
    }
    
    * {
        cursor: auto !important;
    }
}







/* contact us */
.page-contact-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--padding);
    margin: var(--padding-laterale) 0;
}
.page-contact-grid-item {
    background-color: var(--color-blue);
    color: var(--color-white) !important;
    aspect-ratio: 320/390;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--padding);
    width: 33%;
}
.page-contact-grid-item .label {
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.page-contact-grid-item p {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}


.page-template-page-contact-us-shoes #gform_wrapper_2 {
    position: relative;
    margin-bottom: var(--padding-laterale);
}
.page-template-page-contact-us-shoes #gform_wrapper_2 input,
.page-template-page-contact-us-shoes #gform_wrapper_2 select,
.page-template-page-contact-us-shoes #gform_wrapper_2 textarea {
    border: solid 1px var(--color-blue) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}
.page-template-page-contact-us-shoes #gform_wrapper_2 input {
    height: 41px !important;
}
.page-template-page-contact-us-shoes #gform_wrapper_2 input[type="checkbox"] {
    width: 12px;
    height: 12px !important;
    margin-left: 0 !important;
    margin-right: var(--padding);
}
#field_2_9,
#field_2_20 {
    width: calc( 100% - 400px );
}
.page-template-page-contact-us-shoes .gform_wrapper.gravity-theme .gform_footer {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
.page-template-page-contact-us-shoes .gform_wrapper.gravity-theme .gform_footer #gform_submit_button_2 {
    margin: 0;
    padding: 0;
    background-color: var(--color-blue) !important;
    color: var(--color-white);
    width: 244px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-label);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 450;
}




.only-mobile {
    display: none;
}


/* mobile */
@media (max-width: 900px) {

    body.open-nav {
        overflow-y: hidden !important;
    }

    :root {
        --padding: 16px;
        --padding-laterale: 16px;
        --padding-top: 40px;
    }

    .only-mobile {
        display: block;
    }
    .only-desktop {
        display: none;
    }

    .btn-hamburger:after {
        top: 12px;
    }
    body.open-nav .header-site {
        padding-top: 34px;
    }
    body.open-nav .header-site > ul::before {
        content: "";
        display: block;
        width: 100vw;
        height: 1px;
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: solid 1px var(--color-blue) !important;
    }
    body.open-nav .btn-book-appointment-banner {
        position: absolute;
        z-index: 10;
        width: 100%;
    }
    .menu-aside {
        width: 100vw;
        height: 100lvh;
        overflow: hidden;
    }
    .open-nav .btn-hamburger>span {
        display: none !important;
    }
    .menu-aside__menu {
        flex-direction: column-reverse;
    }
    #menu-primary-shoes-mobile {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 15vw;
        width: 100%;
    }
    #menu-primary-shoes-mobile li:last-of-type {
        padding-bottom: 30px;
        border-bottom: solid 2px var(--color-blue);
        width: 100%;
    }
    .open-nav .btn-hamburger:before {
        top: 46%;
    }
    #menu-primary-shoes {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
        margin: var(--padding-top) 0 0;
        width: 100%;
        padding: 0 var(--padding-laterale);
    }

    .menu-aside__footer {
        display: none !important;
    }

    .header-site {
        background-color: var(--color-white);
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
    }
    .logo_cavallo {
        width: 52px;
        height: 45px;
    }
    .logo_cavallo path {
        fill: var(--color-blue);
    }
    .logo_nome {
        width: 110px;
    }
    .btn-hamburger:before,
    .btn-hamburger:after {
        border-color: var(--color-blue);
    }
    .btn-hamburger:before {
        top: 20px;
    }
    .header-site ul li:nth-child(1) {
        order: 3;
        justify-content: flex-end;
        padding-top: 7px;
    }
    .header-site ul li:nth-child(2) {
        order: 2;
    }
    .header-site ul li:nth-child(3) {
        order: 1;
    }


    /* footer */
    .site-footer {
        background-color: var(--color-white);
    }
    #footer-newsletter {
        background-color: var(--color-bg);
    }    
    .footer-top {
        border-top: solid 10px var(--color-blue);
        background-color: var(--color-white);
    }
    .footer-top>* {
        width: 100%;
    }
    #menu-footer-shoes a,
    #menu-footer-shoes a:hover,
    #menu-footer-shoes a:visited {
        color: var(--color-blue);
        font-weight: 450;
    }
    #menu-footer-shoes {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 30px 0;
    }
    .footer-bottom {
        flex-direction: column;
        background-color: var(--color-white);
        padding: 0;
    }
    .footer-bottom-left {
        width: 100%;
        background-color: var(--color-blue);
        color: var(--color-white);
        padding: 8px var(--padding);
        order: 3;
        align-items: center;
        justify-content: center;
    }
    .footer-bottom-right {
        width: 100%;
        justify-content: space-between;
        border-top: solid 1px var(--color-blue);
        margin-top: 50px;
        padding: var(--padding);
    }
    #menu-footer-policy-shoes-nav,
    #menu-footer-policy-shoes {
        width: 100%;
        justify-content: space-between;
    }
    #menu-footer-policy-shoes .nav-item {
        width: 100%;
        position: relative;
    }
    #menu-footer-policy-shoes .nav-item:last-of-type {
        text-align: right;
    }
    #menu-footer-policy-shoes .nav-item:last-of-type:before {
        content: "";
        display: block;
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: -10px;
        border-left: solid 1px var(--color-blue);
    }

    /* page */
    .splash__text {
        opacity: 1 !important;
    }
    .splash__media {
        position: relative;
        height: 80vh;
        overflow: hidden;
    }
    .splash__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cat__grid {
        flex-direction: column;
    }
    .cat__col {
        width: 100%;
    }
    .insp__head {
        width: 100%;
        padding: 0;
    }
    .insp__item:nth-child(1) {
        max-width: 100%;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        margin-bottom: 30px;
    }


    .insp__gallery{
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    .insp__item:nth-child(1){
        flex: 1 1 100%;
    }
    .insp__item:nth-child(1) .insp__special-content {
        margin-bottom: var(--padding-laterale);
    }
    .insp__item:nth-child(2){
        width: 38%;
        max-width: 38%;
        margin-top: 20px;
        margin-left: calc( var(--padding-laterale) * -1 );
    }
    .insp__item:nth-child(3){
        width: 66%;
        top: 0;
        margin-top: 15vw;
        position: relative;
        right: -20px;
        left: inherit;
    }
    .insp__item:nth-child(4){
        min-width: 100vw;
        left: calc( var(--padding-laterale) * -1 );
        margin-top: 80px;
        position: relative;
    }


    .card__content {
        justify-content: flex-end;
        padding-bottom: 60px;
    }
    .card:nth-child(1) .card__content,
    .card:nth-child(3) .card__content,
    .card:nth-child(1):hover .card__content,
    .card:nth-child(3):hover .card__content {
        display: flex !important;
        transition: none !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
    }
    .card:nth-child(2) .card__content,
    .card:nth-child(2):hover .card__content {
        display: flex !important;
        transition: none !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
        border: solid var(--padding-laterale) var(--color-white);
    }
    .card .card__content .card__cta {
        height: 100%;
    }
    .card .card__content .card__cta .btn--secondary {
        height: 100%;
        align-items: flex-start;
        color: #fff;
        padding-top: calc( var(--padding-laterale) * 2 );
    }
    .card .card__content,
    .card:hover .card__content {
        transform: none !important;
        opacity: 1 !important;
        transition: none;
        opacity: 1;
    }
    .btn--secondary span,
    .btn--secondary:hover span {
        width: 44px;
        height: 44px;
        top: inherit;
        bottom: 0;
        right: inherit;
        left: var(--padding-laterale);
        padding: 15px;
    }
    .card:nth-child(2) .btn--secondary span,
    .card:nth-child(2) .btn--secondary:hover span {
        left: 0;
    }


    /* inspiration */
    .shoes-inspiration {
        padding: var(--padding-laterale);
    }

    .shoes-cat__description {
        text-align: left;
    }
    .owl-carousel .owl-nav button,
    .owl-next > span,
    .owl-prev > span  {
        width: 30px;
        height: 20px;
    }
    .owl-prev {
        left: -10px;
    }
    .owl-next {
        right: -10px;
    }
    .shoes-cat__media {
        aspect-ratio: 440/582;
    }
    .splash__media > .only-mobile {
        height: 100%;
    }


    /* pagina prodotto */
    .product-container-info {
        flex-direction: column;
    }
    .product-container-info > * {
        width: 100%;
        flex: 1 1 100%;
    }
    .summary.entry-summary {
        padding: var(--padding-top) var(--padding-laterale);
    }


    .product-gallery__carousel,
    .product-gallery__carousel__images {
        aspect-ratio: 440/474;
        background-color: #D9D9D9;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .owl-carousel .owl-dots.disabled,
    .owl-carousel .owl-dots {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 2;
        left: var(--padding-laterale);
        bottom: var(--padding-laterale);
        gap: 4px;
    }
    .owl-carousel .owl-dots button,
    .owl-carousel .owl-dots.disabled button {
        width: 8px;
        height: 8px;
        display: block;
        border: solid 1px var(--color-blue);
    }
    .owl-carousel .owl-dots button.active,
    .owl-carousel .owl-dots.disabled button.active {
        background-color: var(--color-blue);
    }

    .product-gallery__carousel  .image {
        height: fit-content;
    }


    .container-form {
        display: flex;
        flex-direction: column;
        margin-top: var(--padding-top);
        margin-bottom: var(--padding-top);
    }
    .page-contact-grid {
        order: 2;
        flex-direction: column;
    }
    .page-contact-grid-item {
        width: 100%;
        aspect-ratio: 407/170;
    }
    #field_2_9, #field_2_20 {
        width: 100%;
    }
    .page-template-page-contact-us-shoes .gform_wrapper.gravity-theme .gform_footer {
        position: relative;
        margin-top: var(--padding-top);
    }


    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
        min-width: 100%;
    }


}