@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* PALETTE */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #333;
  --color-bg: #000000; /* fallback */
  --color-accent: #ce2226; /* rosso hover pulsante */
  --color-text: #ffffff;
  --color-green: #60e28e;
  --color-yellow: #ffff00;


  /* FONT */
  --font-main: 'Azeret Mono', monospace;
  --font-size-smaller: max(0.8vw, 1.2vh);
  --font-size-small: max(1vw, 1.5vh);
  --font-size-medium: max(1.5vw, 2.25vh);
  --font-size-halfway-big: max(2vw, 3vh);
  --font-size-big: max(3vw, 4.5vh);
  --font-size-bigger: max(5vw, 7.5vh);
  --font-size-huge: max(6vw, 9vh);

  /* STILI BASE */
  --radius-md: max(min(1vw, 1vh), 1vh);
  --radius-sm: max(min(0.25vw, 0.5vh), 0.5vh);
  --transition-fast: 0.2s ease-in-out;

  /* MENU */
  --menu-w: 18vw;
  --menu-w-mobile: 90vw;
  --menu-icon-size: 5vh;

  /* CURSOR */
  --cursor-size: 150px;
  --cursor-pointer: url('../src/crsr/cursor_pointer.gif');
  --cursor-click: url('../src/crsr/cursor_click.gif');
  --cursor-margin: min(1.1vw, 2.4vh)
}

* {
  -webkit-tap-highlight-color: transparent;
  /*-webkit-user-select: none;*/
  /*-moz-user-select: none;*/
  /*-ms-user-select: none;*/
  user-select: none;
  font-family: var(--font-main);
  text-transform: uppercase;
}
h1,h2,h3,h4,h5,h6,h7,h8,h9,h10 {
    margin: 0;
    padding: 0;
}
div#SITE_INFO {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 70%;
    left: 15%;
    -webkit-box-shadow: 0 0 0 2px var(--color-yellow);
            box-shadow: 0 0 0 2px var(--color-yellow);
    top: min(1vw, 2vh);
    padding: min(0.5vw, 1vh);
    border-radius: var(--radius-sm);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    z-index: 100;
}
#SITE_INFO h5 {
    font-size: 2vh;
    color: var(--color-yellow);
    line-height: 0.5;
    font-weight: 900;
}
div#SITE_INFO:hover {
    -webkit-box-shadow: 0 0 0 2px var(--color-black);
            box-shadow: 0 0 0 2px var(--color-black);
    background: var(--color-yellow);
}
div#SITE_INFO:hover h5 {
    color: var(--color-black);
}

button {
    border: none;
    background: none;
    color: white;
    position: relative;
    width: 100%;
    -webkit-box-shadow: 0 0 0 2px var(--color-white);
            box-shadow: 0 0 0 2px var(--color-white);
    margin: 0;
    border-radius: var(--radius-md);
    cursor: none;
}
.button-white {
    -webkit-box-shadow: 0 0 0 2px var(--color-white);
            box-shadow: 0 0 0 2px var(--color-white);
    color: var(--color-white);
    background: none;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
.button-white:hover {
    -webkit-box-shadow: 0 0 0 2px var(--color-black);
            box-shadow: 0 0 0 2px var(--color-black);
    color: var(--color-black);
    background: var(--color-white);
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
.button-red {
    -webkit-box-shadow: 0 0 0 2px var(--color-accent);
            box-shadow: 0 0 0 2px var(--color-accent);
    color: var(--color-accent);
    background: none;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
.button-red:hover {
    -webkit-box-shadow: 0 0 0 2px var(--color-black);
            box-shadow: 0 0 0 2px var(--color-black);
    color: var(--color-black);
    background: var(--color-accent);
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100dvw;
  height: 100dvh;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg) no-repeat center/cover;
  overflow: hidden;
  cursor: none;
}
div.scroll-wrapper {
    position: relative;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 100%;
    /* border: 3px solid red; */
    overflow: hidden;
    overflow-y: scroll;
    z-index: 3;
    padding: 0;
    padding-left: 2vw;
    padding-right: 0.1vw;
    direction: rtl;
}
/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: max(5px, 0.5vw);
    height: auto;
}
::-webkit-scrollbar-track {
    background-color: rgba(255,255,255,0);
    border-radius: 0px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.1);
    border-radius: 0px;
    -webkit-transition: all 0.15s;
    transition: all 0.15s;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent);
    -webkit-transition: all 0.15s;
    transition: all 0.15s;
}
[state="hide"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
[state="not-selected"] {
    opacity: 0.35;
}
[state="no-select"] {
    -webkit-box-shadow: 0 0 0 2px var(--color-grey) !important;
            box-shadow: 0 0 0 2px var(--color-grey) !important;
    background: var(--color-grey) !important;
    color: var(--color-black) !important;
    pointer-events: none;
}
[state="no-select"] img {
    -webkit-filter: brightness(0);
            filter: brightness(0);
}
[state="selected"] {
    -webkit-box-shadow: 0 0 0 2px var(--color-white);
            box-shadow: 0 0 0 2px var(--color-white);
    background: var(--color-white);
    color: var(--color-black) !important;
    pointer-events: none;
}
#curtain {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: var(--color-accent);
  left: unset;
  right: 0;
  top: 0;
  z-index: 10000000;
  -webkit-transition: width 0s;
  -o-transition: width 0s;
  transition: width 0s;
}
#curtain.loaded {
  right: unset;
  left: 0;
  width: 100vw;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
#curtain.animIn {
  right: unset;
  left: 0;
  width: 0vw;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
#curtain.animOut {
  width: 100vw;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
#curtain.mid {
  right: unset;
  left: 0;
  width: 0vw;
  -webkit-transition: width 0s;
  -o-transition: width 0s;
  transition: width 0s;
}

#curtain {
	.curtain-content {
		position: relative;
		width: 100%;
		height: 100%;
		color: var(--color-black);
		transition: all 0.2s;

		.error-state {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    display: none;
		    flex-direction: column;
		    align-content: center;
		    align-items: center;
		    justify-content: center;
		    cursor: default !important;

		    h3 {
                font-size: var(--font-size-bigger);
                word-break: break-word;
                font-weight: 900;
                max-width: 50vw;
                min-width: 360px;
                text-align: center;
                line-height: 0.8;
                padding: 1.5vw 0;
                background: var(--color-black);
                border-radius: var(--radius-md);
                color: var(--color-white);
		    }
		    p.error-message {
			    font-size: var(--font-size-smaller);
			    font-weight: 400;
			    line-height: 1;
			    margin: 0;
			    padding: 1vh 0;
			}
			.error-actions {
			    text-align: center;
    			margin-top: 20vw;

			    a.button-outline {
				    font-size: var(--font-size-medium);
				    font-weight: 800;
				    text-decoration: none;
				    padding: 0.35vw 1vw;
				    box-shadow: 0 0 0 2px var(--color-black);
				    color: var(--color-black);
				}

				p {
				    margin-top: 1vw;
				    font-weight: 500;
				    
				    a {
				    	color: var(--color-white);
    					text-decoration: none;
				    }
				}
			}
		}

		.loading-state {
		    position: absolute;
            width: 80%;
            left: 10%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: flex-start;
            justify-content: flex-end;
            bottom: 10vh;

		    p.status-text {
			    font-size: var(--font-size-medium);
			    font-weight: 700;
			    line-height: 1;
			    margin: 0;
			}

			.progress-bar {
			    width: 100%;
			    height: max(5vh, 2.5vw);
			    box-shadow: 0 0 0 2px var(--color-black);
			    border-radius: var(--radius-md);
			    overflow: hidden;
			    margin-bottom: max(1vw, 1.5vh);

			    .progress-fill {
				    position: relative;
				    height: 100%;
				    background: var(--color-black);
			        transition: width 0.2s ease-out;
			        animation: bar-blink 1s ease-in-out infinite;
				}
			}
		}
		
		.site-tips {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            
            h5.tip-text {
                position: relative;
                display: flex;
                font-size: max(4vw, 5.5vh);
                line-height: 0.8;
                width: 80%;
                height: fit-content;
                left: 10%;
                top: 50%;
                transform: translateY(-60%);
                font-weight: 800;
            }
        }
	}
}
				
@keyframes bar-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

#curtain.animIn {
	.curtain-content { opacity: 0; transition: all 0.2s }
}
#curtain.mid, #curtain.animOut {
	.curtain-content { opacity: 0; display: none; }
}

#overlay {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1000000;
}
#overlay img {
  position: relative;
  display: block;
  width: 100vw;
  height: auto;
  aspect-ratio: 16/9;
}

#noise {
  position: relative;
  display: block;
  width: 100vw;
  height: 100vh;
}

#custom-cursor {
  position: fixed;
  /*width: min(6vw, 12vh);*/
  width: 100px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background-image: var(--cursor-pointer);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 999999;    
  -webkit-transform-origin: var(--cursor-margin) var(--cursor-margin);    
      -ms-transform-origin: var(--cursor-margin) var(--cursor-margin);    
          transform-origin: var(--cursor-margin) var(--cursor-margin);
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Default per tutti i browser */
#custom-cursor {
    display: block;
    cursor: none;
}

/* Nascondi su Safari/iOS */
.is-safari #custom-cursor {
    display: none;
}

.is-safari * {
    cursor: default !important;
}

/* ===== SECTION BASE ===== */
app-menu {
    position: absolute;
    right: 0;
}
section#content-section {
    position: absolute;
    width: 90vw;
    left: 5vw;
    height: 100vh;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 100;
}
footer#page-footer {
    position: absolute;
    width: 100vw;
    bottom: 0;
}
.back-btn {
    position: absolute;
    left: 1vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    height: 85vh;
    -webkit-box-shadow: 0 0 0 2px var(--color-accent);
            box-shadow: 0 0 0 2px var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
.back-btn:hover {
    -webkit-box-shadow: 0 0 0 2px var(--color-black);
            box-shadow: 0 0 0 2px var(--color-black);
    background: var(--color-accent);
    color: black;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
.back-btn:hover img {
    -webkit-filter: brightness(0);
            filter: brightness(0);
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
.back-btn img.icon {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    width: 100%;
    margin-top: min(1vh, 1vw);
}
.back-btn h6 {
    margin: 0;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
    padding: 1vw 0;
    font-size: 2vh;
    line-height: 0.8;
}
.wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: max(1vw, 20px);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* ===== CONTENT ===== */
div#content {
    position: relative;
    width: 66vw;
    max-width: 66vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

/* ===== MENU ===== */
div#menu {
    position: relative;
    width: var(--menu-w);
    height: var(--menu-height);
    text-transform: uppercase;
    font-weight: 800;
    display: -ms-grid;
    display: grid;
    z-index: 100;
    padding-bottom: 15vh;
}
#menu .voices {
    position: absolute;
    right: 0;
    width: var(--menu-w);
    -webkit-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

#menu.collapsed .voices {
    width: var(--menu-icon-size);
    -webkit-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
#menu .title {
    position: absolute;
    width: 100%;
    height: calc(var(--menu-icon-size) + 1vh);
    text-align: right;
    -webkit-transition: height 0.35s;
    -o-transition: height 0.35s;
    transition: height 0.35s;
}
#menu.collapsed .title {
    height: 0;
    -webkit-transition: height 0.25s;
    -o-transition: height 0.25s;
    transition: height 0.25s;
}
#menu .title h3 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    font-size: 2vw;
    font-weight: 900;
}
#menu ul.buttons {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}
#menu li {
    margin-top: 1vh;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    background: rgba(0,0,0, 0.25);
}
#menu li.social, #menu li.cart {
    position: relative;
    right: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-align: right;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
#menu li.social, #menu li.login {
    margin-top: 5vh;
}
#menu li.logged-in {
    box-shadow: 0 0 0 2px var(--color-green) !important;
}
#menu li.logged-in span.voice { color: var(--color-green); }
#menu li.logged-in:hover {
    box-shadow: 0 0 0 2px var(--color-black) !important;
    background: var(--color-green) !important;
}
#menu li.logged-in:hover span.voice { color: var(--color-black); }
#menu .social .wrapper.button-outline, #menu .cart .wrapper.button-outline {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
#menu .cart .wrapper.button-outline {
    z-index: 5;
    background: var(--color-black);
}
div#cart-qnt {
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: var(--color-accent);
    height: 100%;
    border-radius: var(--radius-md);
    -webkit-box-shadow: 0 0 0 2px var(--color-black);
            box-shadow: 0 0 0 2px var(--color-black);
    z-index: 2;
    pointer-events: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
#cart-qnt span.qnt {
    padding-right: calc(var(--menu-icon-size) + 1vh);
    padding-left: 1vh;
    font-size: 2.25vw;
    color: var(--color-black);
    line-height: 0;
    -webkit-transition: padding-right 0.5s, font-size 0.5s;
    -o-transition: padding-right 0.5s, font-size 0.5s;
    transition: padding-right 0.5s, font-size 0.5s;
}
#cart-qnt span.qnt.hide {
    padding-right: 0;
    font-size: 0;
    -webkit-transition: padding-right 0.5s, font-size 0.5s;
    -o-transition: padding-right 0.5s, font-size 0.5s;
    transition: padding-right 0.5s, font-size 0.5s;
}

#menu li img.icon {
  height: var(--menu-icon-size);
  aspect-ratio: 1 / 1;
}
#menu li:not(#menu-toggle):hover img {
  -webkit-filter: brightness(0);
          filter: brightness(0);
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}
#menu li#menu-toggle {
    height: var(--menu-icon-size);
}
#menu-toggle .wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
#menu-toggle .wrapper.button-outline {
    left: 0;
    -webkit-box-shadow: 0 0 0 2px var(--color-accent);
            box-shadow: 0 0 0 2px var(--color-accent);
    border-radius: var(--radius-md);
    background: rgba(0,0,0, 0.25);
}
#menu-toggle img {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-filter: brightness(1);
          filter: brightness(1);
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  -o-transition: transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
}
#menu-toggle .wrapper.button-outline:hover img {
  -webkit-filter: brightness(0) !important;
          filter: brightness(0) !important;
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}
#menu.collapsed #menu-toggle img {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.35s;
    transition: -webkit-transform 0.35s;
    -o-transition: transform 0.35s;
    transition: transform 0.35s;
    transition: transform 0.35s, -webkit-transform 0.35s;
}
#menu.collapsed span.voice {
    opacity: 0;
    font-size: 0;
    pointer-events: none;
    -webkit-transition: 0.3s font-size 0s, 0.15s opacity 0s;
    -o-transition: 0.3s font-size 0s, 0.15s opacity 0s;
    transition: 0.3s font-size 0s, 0.15s opacity 0s;
}
#menu span.voice {
    font-size: 1.5vw;
    padding-right: 0.5vw;
    margin-bottom: 0.3vh;
    -webkit-transition: 0.25s font-size 0.1s;
    -o-transition: 0.25s font-size 0.1s;
    transition: 0.25s font-size 0.1s;
}
/*app-menu {
    position: fixed;
    right: 5vw;
    z-index: 100;
}*/
/* ===== FOOTER ===== */
div.upper-section {
    position: relative;
    height: 85%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
#page-footer img.logo {
    position: relative;
    height: 75%;
    margin-bottom: min(2vh, 4vw)
}
#page-footer h2 {
    text-align: right;
    line-height: 0.8;
    margin: 0;
    padding: 0;
    font-size: 2vw;
    margin-right: 1vw;
    margin-bottom: min(2vh, 4vw)
}

div.lower-section {
    position: relative;
    height: 15%;
    background: var(--color-accent);
    color: var(--color-black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    z-index: 100;
}
#page-footer .partners, #page-footer .legal {
    position: relative;
    float: left;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
#page-footer .legal { float: right; }
#page-footer h5 {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 0.8vw;
}
#page-footer .partners h5 { padding-left: 1vw; }
#page-footer .legal h5 { padding-right: 1vw; }
#page-footer a {
    text-decoration: none;
    color: inherit;
    font-weight: 900;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
#page-footer a:hover {
    text-decoration: underline;
    color: var(--color-white);
    font-weight: 900;
    cursor: none;
    -webkit-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
#page-footer .legal h5 { padding-left: 1vw; }

#page-footer.footer_alt1 img.logo {
  height: 50%;
  margin-right: 5vw;
}
#page-footer.footer_alt1 div.upper-section {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.legal br { display: none; }

/* FOOTER ALT 2 // SCHEDA PRODOTTO */
footer#page-footer.footer_alt2 {
    position: absolute;
    width: 16vw;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#page-footer.footer_alt2 div.upper-section {
    position: relative;
    width: 70%;
    margin-right: 20%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-line-pack: end;
        align-content: flex-end;
}
#page-footer.footer_alt2 div.upper-section {
    position: relative;
    width: 73%;
    margin-right: 20%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-line-pack: end;
        align-content: flex-end;
}
#page-footer.footer_alt2 .lower-section {
    position: relative;
    height: 100vh;
    width: 7%;
    background: var(--color-accent);
    color: var(--accent-black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#page-footer.footer_alt2 .lower-section h5 {
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
            writing-mode: vertical-lr;
    font-size: 0.8vw;
    margin: 0;
    color: var(--color-black);
    padding-top: 3vh;
    padding-left: 0;
}
#page-footer.footer_alt2 img.logo {
    width: 70%;
    height: auto;
}
#page-footer.footer_alt2 .legal {
    text-align: right;
    padding-bottom: 5vh;
}
#page-footer.footer_alt2 .legal h5 {
    padding: 0;
}

/* ===== BUTTON BASE ===== */
.button {
  display: inline-block;
  font-family: var(--font-main);
  font-weight: 900;
  line-height: 1;
  font-size: 1vw;
  padding: 1vh 5vw;
  border-radius: var(--radius-md);
  cursor: none;
  text-align: center;
  -webkit-transition: all var(--transition-fast);
  -o-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
}

/* Variante pulsante trasparente con bordo bianco */
.button-outline {
  border-radius: var(--radius-md);
  color: var(--color-white);
  -webkit-box-shadow: 0 0 0 2px var(--color-white);
          box-shadow: 0 0 0 2px var(--color-white);
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}

.button-outline:hover {
  background: var(--color-accent) !important;
  color: var(--color-black);
  -webkit-box-shadow: 0 0 0 2px var(--color-black);
          box-shadow: 0 0 0 2px var(--color-black);
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}

/* Variante pulsante pieno */
.button-primary {
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-black);
  -webkit-box-shadow: 0 0 0 2px var(--color-accent);
          box-shadow: 0 0 0 2px var(--color-accent);
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}

.button-primary:hover {
  background: var(--color-black);
  color: var(--color-white);
  -webkit-box-shadow: 0 0 0 2px var(--color-white);
          box-shadow: 0 0 0 2px var(--color-white);
  -webkit-transition: all 0.15s;
  -o-transition: all 0.15s;
  transition: all 0.15s;
}

@-webkit-keyframes blink {
  0%   { opacity: 0.6 }
  50%  { opacity: 0.2 }
  100% { opacity: 0.6 }
}

@keyframes blink {
  0%   { opacity: 0.6 }
  50%  { opacity: 0.2 }
  100% { opacity: 0.6 }
}

/* === BOLLINO === */
.wrapper-bollino {
    position: absolute;
    top: 42%;
    left: 80%;
    display: block;
    width: max(125px, max(7.85vw, 7vh));
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: 1;
    opacity: 1;
    transform: rotate(-15deg) scale(2);
    animation: animate-bollino 1.3s ease-in-out infinite;
    transition: all 0.3s;
    will-change: transform;

    & .bollino {
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        z-index: 2;
        text-align: center;
        vertical-align: middle;
        justify-content: center;
        align-items: center;
        align-content: center;

        & p.text-bollino {
            position: absolute;
            display: flex;
            width: 50%;
            height: 100%;
            margin: 0;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            font-size: max(120%, max(1.15vw, 2.15vh));
            font-weight: 900;
            line-height: 0.85;
        }
    }
    & svg {
        position: absolute;
        top: 0;
        z-index: 1;

        & .bollino-svg {
            fill: var(--color-black); /* DEFAULT */
        }
    }
}
.wrapper-bollino:hover {
    opacity: 0.25 !important;
    animation-play-state: paused;
    transition: all 0.3s;
}
.wrapper-bollino[data-stato="esaurimento"] span:not(span.esaurimento) {
    display: none;
}

.wrapper-bollino[data-stato="esaurimento"] span {
    color: var(--color-black);
}

.wrapper-bollino[data-stato="esaurimento"] svg .bollino-svg {
    stroke: var(--color-black);
    stroke-width: 4px;
    fill: var(--color-yellow);
}

/* ESAURITO */
.wrapper-bollino[data-stato="esaurito"] span:not(span.esaurito) {
    display: none;
}

.wrapper-bollino[data-stato="esaurito"] span {
    color: var(--color-black);
}

.wrapper-bollino[data-stato="esaurito"] svg .bollino-svg {
    fill: var(--color-grey);
    stroke: var(--color-black);
    stroke-width: 4px;
}

/* PROMO */
.wrapper-bollino[data-stato="promo"] span:not(span.promo) {
    display: none;
}

.wrapper-bollino[data-stato="promo"] span {
    color: var(--color-black);
}

.wrapper-bollino[data-stato="promo"] svg .bollino-svg {
    stroke: var(--color-black);
    stroke-width: 4px;
    fill: var(--color-green);
}

/* RESTOCK */
.wrapper-bollino[data-stato="restock"] span:not(span.restock) {
    display: none;
}

.wrapper-bollino[data-stato="restock"] span {
    color: var(--color-yellow);
}

.wrapper-bollino[data-stato="restock"] svg .bollino-svg {
    stroke: var(--color-yellow);
    stroke-width: 4px;
    fill: var(--color-black);
}

/* EVIDENZA */
.wrapper-bollino[data-stato="evidenza"] span:not(span.evidenza) {
    display: none;
}

.wrapper-bollino[data-stato="evidenza"] span {
    color: var(--color-white);
}

.wrapper-bollino[data-stato="evidenza"] svg .bollino-svg {
    fill: var(--color-accent);
    stroke: var(--color-black);
    stroke-width: 4px;
}

/* EVIDENZA */
.wrapper-bollino[data-stato="nuovo"] span:not(span.nuovo) {
    display: none;
}

.wrapper-bollino[data-stato="nuovo"] span {
    color: var(--color-accent);
}

.wrapper-bollino[data-stato="nuovo"] svg .bollino-svg {
    fill: var(--color-yellow);
    stroke: var(--color-accent);
    stroke-width: 4px;
}

.prodotto .wrapper-bollino {
    top: -15%;
    left: 60%;
    animation: animate-bollino-small 1.3s ease-in-out infinite;
    z-index: 11;
}
@keyframes animate-bollino {
    0% { transform: scale(1.75) rotate(5deg); opacity: 0.85; }
    50% { transform: scale(2) rotate(-5deg); opacity: 1; }
    100% { transform: scale(1.75) rotate(5deg); opacity: 0.85; }
}
@keyframes animate-bollino-small {
    0% { transform: scale(0.7) rotate(5deg); opacity: 1; }
    50% { transform: scale(0.8) rotate(-5deg); opacity: 1; }
    100% { transform: scale(0.7) rotate(5deg); opacity: 1; }
}

/* === SPOTIFY PLAYER === */
.spotify-player-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: max(20vw, min(80vw, 300px));
    background: none;
    z-index: 9999;
    box-shadow: 0 0 0 2px var(--color-white);
    border-radius: var(--radius-md);
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.spotify-player-wrapper[data-state="minimized"] {
    transform: translateY(calc(100% - 40px));
}

.spotify-player-wrapper[data-state="closed"] {
    display: none;
}

.spotify-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-grey);
    border-bottom: 2px solid var(--color-grey);
    cursor: move;
}

.drag-handle {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.drag-icon {
    font-size: 16px;
    color: #fff;
    opacity: 0.6;
}

.drag-handle h6 {
    margin: 0;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.controls {
    display: flex;
    gap: 8px;
}

.controls button {
    background: var(--color-black);
    color: var(--color-white);
    width: 24px;
    height: 24px;
    cursor: none;
    font-size: 16px;
    line-height: 0;
    transition: all 0.2s;
    padding: 0;
    border-radius: var(--radius-sm);
}

.controls button:hover {
    background: #fff;
    color: #000;
}

.spotify-player-body {
    padding: 0;
    background: var(--color-grey);
    height: 150px;
    transition: height 0.3s ease-in-out;
}
div[data-state="minimized"] .spotify-player-body {
    height: 0;
}

.spotify-player-body iframe {
    display: block;
    border-radius: var(--radius-md);
}
div#collezione-header {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: var(--radius-md);
}
#collezione-header .wrapper {
    width: 70vw;
    aspect-ratio: 4 / 1;
    float: left;
}
img#collezione-image {
    width: 100%;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .spotify-player-wrapper {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
    }
}