/*/ELEMENTS selector A-Z - rule standard/*/
a {text-decoration:none;}
body {margin:0; padding:0; background:var(--col00); text-rendering:optimizeLegibility;}

nav #menu {grid-column:1/span 3; padding-top:5px;  border-radius:3px; background:var(--col04); font:var(--font2); color:var(--col16); text-align:center; cursor:pointer;}
nav {position:sticky; top:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:6px; z-index:2; background:var(--col01);}
nav a {color:var(--col02); font:var(--font1);}
nav a.bbox {padding:4px 8px; border-radius:3px; background:var(--col03);}

nav div:nth-of-type(1) {padding-left:8px;}
nav div:nth-of-type(2) {text-align:center; letter-spacing:8px;}
nav div:nth-of-type(3) {position:relative; text-align:right;}

nav ul {margin:0; padding:0; transition:height .4s ease-out; list-style-type:none; overflow:hidden;}
#menu > ul {margin-top:14px;}

nav ul li {text-indent:10px; text-align:left; transition:text-indent .25s linear,color .25s linear;}
nav ul li li {color:var(--col03); text-indent:30px;}
nav ul li li li {color:var(--col16); text-indent:50px;}
nav ul li li li:hover {text-indent:60px;}
nav ul li li li:last-child {padding-bottom:4px;}
nav ul li li:hover {text-indent:40px;}
nav ul li ul li {border-top:1px dotted var(--col00);}
nav ul li ul li ul li {border:none;}
nav ul li:hover {color:var(--col02); text-indent:20px;}
nav #menu span {color:var(--col02);}

nav #minicart {position:absolute; top:0; right:8px;}
nav #minicart img {width:68px; height:auto;}
nav #minicart::after {content:attr(data-mqt); position:absolute; top:13px; left:30px; width:21px; height:21px; border-radius:50%; background:var(--col03); color:var(--col02); font:var(--font11); text-align:center;}

input:focus {outline:none;}
input {display:block; box-sizing:border-box; width:100%; margin-bottom:20px; padding-bottom:5px; border:none; border-bottom:1px dotted var(--col09); background:none; color:var(--col02); font:var(--font1);}
input:focus {border-bottom:2px dotted var(--col03);}

iframe {display:block; width:100%; height:28px; overflow:hidden; border:none; outline:none;}
pre {margin:0;}

* {scrollbar-color:var(--col03) var(--col01);}


/*/ID/CLASS selector A-Z - rule standard/*/

#logj {position:fixed; bottom:0; right:0; width:20%; z-index:2;}

#frame {padding:10px; background:var(--col01);}

#mainsonry {display:grid; grid-template-columns:repeat(4,1fr); column-gap:10px; padding:8px;}
#mainsonry > div {display:inline-block; position:relative; break-inside:avoid; overflow:hidden; margin-bottom:25px; cursor:pointer;}
#mainsonry > div img {display:block; width:100%;}
#mainsonry > div .addcart.yes {position:absolute; top:0; left:0; width:100%; transform:translateY(-100%); padding:10px; background:var(--grad2_3); color:var(--col06); font:var(--font6); text-align:center; transition:transform 0.2s ease-out 0s;}
#mainsonry > div .addcart.no {position:absolute; top:0; left:0; width:100px; height:100px; background:url('../img/check.svg') top left/100px no-repeat;}
#mainsonry > div div:last-child {padding:0; background:var(--col05); color:var(--col02); font:var(--font7); text-align:center;}
#mainsonry > div:hover div:first-child {transform:translateY(0);}

#home {overflow:hidden; text-align:center;}
#home .gallery {position:relative; height:100%;}
#home .gallery img {width:auto; height:100%; object-fit:contain;}
#home .gallery img:last-child {position:absolute; top:0; left:50%; transform:translateX(-50%); transition:opacity 1s ease-out 0s;}


#cart {width:80%; min-height:calc(100vh - 80px); margin:0 auto; padding:20px 0; background:linear-gradient(90deg,var(--grad1_1) 0%,var(--grad1_2) 5%,var(--grad1_2) 95%,var(--grad1_1) 100%); color:var(--col02);}
#cart .cartbox {margin:0 5%; padding:1% 2%; box-shadow:5px 0 4px -4px var(--col12),-5px 0 4px -4px var(--col12);}
#cart h3 {margin:1%; font:var(--font8); text-align:center; letter-spacing:4px;}
#cart #list .row {display:flex; align-items:center; font:var(--font4);}
#cart #list .row div {margin:0 1%;}
#cart #list .row div:first-child {width:30px;}
#cart #list .row div:last-child {width:80px; text-align:center;}
#cart #list .row div:last-child img {width:30px; height:auto; cursor:pointer;}
#cart #list .row div:nth-of-type(2) {flex:1; display:flex; align-items:center; overflow:hidden;}
#cart #list .row div:nth-of-type(2) img {width:40px; height:40px; margin-right:20px;}
#cart #list .row div:nth-of-type(2) span {white-space:nowrap; overflow: hidden; text-overflow:ellipsis; display:block;}
#cart #list .row div:nth-of-type(3) {width:80px; text-align:center;}
#cart #list .row:nth-of-type(n+2) div:first-child {color:var(--col10);}
#cart #list {display:flex; flex-direction:column; gap:10px;}
#cart #list > div:first-child {padding:10px 0; border-bottom:2px solid var(--col08);}
#cart #list .galtit {margin:15px 0; font:var(--font4); color:var(--col10);}
#cart form {width:54%; margin:30px auto 0; padding:40px 40px 30px 40px; border-radius:14px; border:2px solid var(--col09); text-align:center;}
#cart form button {margin-top:10px; padding:10px 30px; border:none; border-radius:20px; background:#0087ff; color:var(--col02); font:var(--font1); cursor:pointer;}
#cart #error {height:52px; color:var(--col10); font:var(--font8);}


#orders {background:linear-gradient(30deg,var(--grad3_1) 40%,var(--grad3_2) 100%),url('../img/sfondo.jpg'); background-size:cover; background-attachment:fixed;}
#orderlist .row {display:flex; font:var(--font9);}
#orderlist .row div {margin:0 1%;}
#orderlist .row div:first-child {width:260px;}
#orderlist .row div:last-child {width:100px; text-align:center;}
#orderlist .row div:nth-of-type(2) {width:120px;}
#orderlist .row div:nth-of-type(3) {flex:1;}
#orderlist .row div:nth-of-type(4) {width:100px; text-align:center;}
#orderlist .row:nth-of-type(n+2) {border-bottom:1px dotted var(--col11);}
#orderlist .row:nth-of-type(n+2) strong {color:var(--col07)}
#orderlist {display:flex; flex-direction:column; gap:10px; width:85%; min-height:90vh; margin:20px auto; background:var(--grad1_2);}
#orderlist > div:first-child {border-bottom:2px solid var(--col09);}
#orderlist > div {padding:10px 0;}
#orderlist .row a {display:block; margin:4px; padding:2px 4px; border-radius:8px; color:var(--col02); cursor:pointer;}


#alertbox .but-box {display:flex; justify-content:space-evenly; margin:30px 0;}
#alertbox .alert {font:var(--font5);}
#alertbox .mess {flex:0 0 50%; padding:3%; border-radius:15px; border:2px solid var(--grad4_1); font:var(--font10); box-shadow:0 0 20px 0 var(--col08) inset;}
#alertbox {display:flex; align-items:center; justify-content:center; position:fixed; inset:0; z-index:1; background:var(--grad2_2);}
#alertbox div {color:var(--col02); text-align:center; letter-spacing:4px;}
#alertbox div button {min-width:72px; padding:12px 24px; border:2px solid var(--col07); border-radius:6px; background:transparent; color:var(--col07); font:var(--font9); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); cursor:pointer;}
#alertbox div button:hover {background:var(--col07); color:var(--col02); transform:translateY(-2px);}
#alertbox div img {width:150px;}

#show {display:flex; justify-content:center; align-items:center; position:fixed; inset:0; z-index:3; background:var(--grad2_2); text-align:center;}
#show div {position:relative; padding:0.5%; border-radius:15px; border:2px solid var(--grad4_1); box-shadow:0 0 20px 0 var(--col08) inset;}
#show div:before {content:''; position:absolute; top:-6px; right:-6px; width:80px;height:80px; background:url('../img/close.png') center/contain no-repeat; cursor:pointer;}
#show img {width:100%; height:100%; border-radius:15px;}

/*/VARIABLES A-Z/*/
:root
{
--col00:#555;
--col01:#303030;
--col02:#FFF;
--col03:#FFA500;
--col04:#000;
--col05:#111;
--col06:#0F0;
--col07:#00d8ff;
--col08:#0087ff;
--col09:#0040ff;
--col10:#FF7800;
--grad1_1:rgba(85,85,85,1);
--grad1_2:rgba(2,20,80,0.2);
--grad2_1:rgb(0,0,0,0.68);
--grad2_2:rgb(0,0,0,0.95);
--grad2_3:rgb(0,0,0,0.80);
--grad3_1:rgb(0,0,0);
--grad3_2:rgba(92,79,61,0.2);
--grad4_1:rgba(0,180,255,0.68);
--col11:#10557E;
--col12:#1F336E;
--col13:#F00;
--col14:#F5333F;
--col15:#2E8B57;
--col16:#FF0;
--font1:600 1.2rem/26px Open Sans,Arial,Helvetica,sans-serif;
--font2:500 1.188rem/26px Open Sans,Arial,Helvetica,sans-serif;
--font3:600 1.4rem/26px Open Sans,Arial,Helvetica,sans-serif;
--font4:400 1rem/16px Open Sans,Arial,Helvetica,sans-serif;
--font5:500 2.5rem/45px Open Sans,Arial,Helvetica,sans-serif;
--font5r:500 1.2rem/28px Open Sans,Arial,Helvetica,sans-serif;
--font6:1.2rem/25px Open Sans,Arial,Helvetica,sans-serif;
--font6r:0.8rem/15px Open Sans,Arial,Helvetica,sans-serif;
--font7:500 0.9rem/34px Open Sans,Arial,Helvetica,sans-serif;
--font8:600 2rem/30px Open Sans,Arial,Helvetica,sans-serif;
--font9:500 0.89rem/24px Open Sans,Arial,Helvetica,sans-serif;
--font10:600 1.6rem/35px Open Sans,Arial,Helvetica,sans-serif;
--font10r:500 1.1rem/25px Open Sans,Arial,Helvetica,sans-serif;
--font11:600 0.8rem/21px Open Sans,Arial,Helvetica,sans-serif;
}

/*/DATA selector A-Z - rule standard/*/
[data-status="0"] {display:none !important;}
[data-status="1"] {opacity:0;}
[data-mans="2"] {grid-template-columns:repeat(3,1fr) !important;}
[data-filt="1"] {filter:brightness(85%) grayscale(100%) contrast(140%);}
[data-font="l0"] {font:var(--font5);}
[data-font="l1"] {font:var(--font2);}
nav #menu[data-font="h1"] {font:var(--font8);}
[data-pay="1"] {background:var(--col14);}
[data-pay="2"] {background:var(--col09);}
[data-pay="3"] {background:var(--col15);}
[data-pay="4"] {background:var(--col03);}


/*/RESPONSIVE selector A-Z - rule standard/*/
@media (max-width:800px)
{
nav a.bbox {padding:1px; font:var(--font4);}

nav #minicart img {width:40px;}
nav #minicart::after {top:0; left:auto; right:-7px;}

#mainsonry {grid-template-columns:repeat(2,1fr);}
#mainsonry > div .addcart.yes {padding:10px 0; font:var(--font6r); transform:translateY(0);}

#cart {width:100%;}
#cart .cartbox {margin:0 4px; padding:2px;}
#cart form {width:85%; padding:20px 20px 15px 20px;}
#cart #list .row div:first-child,#cart #list .row:first-child div:last-child {display:none;}
#cart #list .row div:last-child {width:auto; text-align:right;}

#alertbox .but-box {margin:15px 0;}
#alertbox .mess {margin-top:36%;}
#alertbox .mess > .but-box:last-child {display:block;}
#alertbox .mess > .but-box:last-child button {margin:8px;}
#alertbox .mess {flex:0 0 92%; padding:5% 3%; font:var(--font1);}
#alertbox div button {padding:6px 12px;}
#alertbox .mess #tophoto:before {content:none;}
#alertbox .mess #tophoto{padding-left:12px;}

[data-mans="2"] {grid-template-columns:1fr !important;}
[data-font="l0"] {font:var(--font5r);}
[data-font="l1"] {font:var(--font10r);}
}