@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {font-family:'DM Sans',sans-serif;overflow: hidden;background: #f1f1f1;color: #111;font-size: 14px;line-height:1.25;/* letter-spacing: -0.035em; */margin: 0;font-weight: 300;}

* {box-sizing: border-box;}

h1,h2,h3,h4,h5,h6{
    font: inherit;
    /* background: #fff; */
    /* color: #000; */
    /* display: inline-block; */
    /* padding: 0 1em; */
    /* line-height: 1.5; */
    margin: 0;
    padding: 0;
}

a {color:inherit !important;text-decoration: none;}
a:hover,a:active,a:visited {color:inherit;/* text-decoration: underline; */}

ul {padding: 0;list-style: none;margin: 0;}
li {list-style: none;}

p {margin: 1em 0 0;}
p+p {margin: 1em 0 0;}

pre {text-align:left;font-size: 90%;word-break:break-all;white-space: pre-wrap;}

img {max-width:100%;}




/* Viewport and wireframe */

#viewport {overflow: auto; position: fixed; background: #fff; width: 100%; height: 100%; }

.screen {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: auto;z-index: 10;display: none;}
.screen.on {display: block;}

.menu {width: 85%;height: 100%;position: absolute;top: 0;overflow: auto;z-index: 20;display: none;background: #fff;box-shadow: 0 0 5px rgb(0 0 0 / 20%);flex-direction: column;}
.menu-left {left: 0;animation: menu-left-in 0.5s cubic-bezier(0.25, 0.24, 0.25, 1);}
.menu-right {right: 0;animation: menu-right-in 0.5s cubic-bezier(0.25, 0.24, 0.25, 1);}
.menu.on {display: flex;}

.modal {width: 100%;height: calc(100% - 3rem );position: absolute;bottom: 0;left: 0;overflow: auto;z-index: 30;display: none;background: #fff;border-radius: 15px 15px 0 0;box-shadow: 0 0 5px rgb(0 0 0 / 20%);animation: modal-in 0.5s cubic-bezier(0.25, 0.24, 0.25, 1);/* padding-bottom: 1rem; */}
.modal.on {display:block;}
.modal.off {display:block;animation:modal-out 0.3s cubic-bezier(0.25, 0.24, 0.25, 1);animation-fill-mode: both;}

.opaque {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: auto;z-index: 15;display: none;background: rgba(0,0,0,0.2);/* backdrop-filter: blur(2px); */opacity: 1;animation: fade-in 0.5s cubic-bezier(0.25, 0.24, 0.25, 1);}
.opaque.on {display:block;}

@keyframes fade-in {from {opacity:0;} }
@keyframes slide-in {from {opacity:0;top:2em;} }
@keyframes modal-in {from {bottom: -100%;} }
@keyframes modal-out {to {bottom: -100%;} }
@keyframes menu-left-in {from {left: -100%;} }
@keyframes menu-right-in {from {right: -100%;} }




/* Screen chrome */

.screen {padding-top: 3rem;}

nav {display: flex;justify-content: space-between;position: fixed;height: 3rem;top: 0;width: 100%;background: #fff;z-index: 1;}
nav>a {padding: 0.75em;/* opacity: 0.75; */position: absolute;cursor: pointer;}
nav>a:last-child {right:0;}
nav>div {flex: 1;/* display: flex; */align-items: center;justify-content: center;/* color: #999; */font-weight: bold;max-width: 75%;margin: 0 auto;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 3rem;}
nav>a i {font-size:1.5rem;}
.cover { margin-top:-3rem; width: 100%;margin-bottom: 1rem;background: center center;background-size: cover;}
img.cover {  }
div.cover {height: calc(375px / 16 * 9);padding: 3rem 0;}
.cart-on {background: #57ab36;color: #fff !important;border-radius: 0 0 0 10px;}
.cart-qty {font-size: 1rem;font-weight: bold;vertical-align: 5%;}

#loadScreen {display:block;z-index:999;}



/* Main menu */

.menu nav {position: static;width: 100%;opacity: 0.25;}

#menuTitleNav {font-size: 200%;padding: 2.5rem 1rem;}

#menuTitleNav h2 {/* color: #ff5a2a; */line-height: 1;}

#menuNav li {padding: 1rem 0;margin: 0 1rem;cursor: pointer;border-top: solid 1px #eee;}

#menuNav i {font-size: 1.5rem;vertical-align: -20%;margin-right: 0.5em;}

#menuNav {flex: 1;display: flex;flex-direction: column;}

.spacer {flex: 1;}

.menu-light {opacity: 0.25;}
.menu-small {font-size:80%;}



/* Cart menu  */

.product-qty {display: inline-flex;align-items: center;/* gap: 0.5rem; */background: #eee;border-radius: 3em;padding: 0.25em 0.1em;justify-content: space-evenly;text-align: center;}

.product-qty button {cursor:pointer;background: none;border: none;opacity: 0.5;font-size: 120%;}

.product-price .ti-x {opacity: 0;}

#cartMenu .product-thumb {width: 4rem;}

#cartMenu > button {margin: 0 1rem;padding: 1rem;font: inherit;font-size: 120%;border-radius: 10px;border: none;;}
#cartMenu.cart-empty > button {opacity:0.5;pointer-events:none;}
#cartMenu .cart-confirm {background: #57ab36;color: #fff;display: flex;justify-content: space-between;margin: 0.5rem 1rem 1rem;}

#cartMenu .product-price {font-weight: bold;display: flex;align-items: center;justify-content: space-between;}
#cartMenu .product-text {display: none;}
#cartMenu .product-remove {color:#ff5a2a;cursor:pointer;}

/* Loading screen */

#loadScreen {background: #ff5a2a;animation: load-screen 3s ease-in-out;opacity: 0;pointer-events: none;}

#loadIcon {animation: load-icon 3s cubic-bezier(0.6, 0, 0.4, 1);opacity: 0;position: absolute;top: 50%;left: 50%;height: 8rem;}

@keyframes load-screen {
    0% {opacity: 1;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes load-icon {
    0% {transform: translate(-50%,-50%);opacity: 1;}
    10% {transform: translate(-50%,-45%);}
    20% {transform: translate(-50%,-50%);}
    30% {transform: translate(-50%,-45%);}
    40% {transform: translate(-50%,-50%);}
    50% {transform: translate(-50%,-45%);}
    100% {transform: translate(-50%,-50%) scale(30);opacity: 1;}
}




/* Home screen */

.searchNav {height: 3rem;padding: 0 1rem;display: flex;align-items: stretch;margin-top: -0.25rem;}

.searchNav input {flex: 1;padding: 1em;font: inherit;border-radius: 15px;border: none;background: #eee;}

.searchNav .ti {position: absolute;right: 0.75em;font-size: 1.5rem;padding: 0.5em;opacity: 0.5;pointer-events: none;}

#featuredNav {padding: 0;margin: 1em;display: flex;flex-wrap: wrap;text-align: center;}

#featuredNav li {width: 33.3%;display: flex;flex-direction: column;align-items: center;padding: 1em;cursor: pointer;}
#featuredNav .specialcat+hr {width: 100%;margin: 1em 1em 0;border: none;border-top: solid 1px #eee;}
#featuredNav .specialcat img {border-radius: 10em;scale:0.85;}
#featuredNav li img {transition:all 0.25s cubic-bezier(0.08, 1.33, 0.58, 1);z-index:-1;}
#featuredNav li:hover img {scale:1.075;}
#featuredNav .specialcat:hover img {scale:0.9;}

#all-producers {
    margin: 2em auto 2em;
    display: block;
    width: auto;
    text-align: center;
    font: inherit;
    /* font-size: 120%; */
    padding: 0.9em 2em;
    background: #fff;
    border: solid 1px #b0b0b0;
    color: #999;
    border-radius: 0.8em;
    cursor: pointer;
}



/* Results screen */

#titleNav {display: flex;justify-content: space-between;padding: 1rem;align-items: center;}

#titleNav h1 {font-size: 200%;font-weight: bold;}

#titleNav i {font-size: 1.5rem;opacity: 0.5;cursor: pointer;}

#filtersNav {padding: 0 1rem 1rem;display: flex;gap: 1rem;}

li.filter {width: 50%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

.filter-name {color: #ff5a2a;}

.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #cdcdcd;
    font-size: 120%;
    margin: 40% 20%;
    text-align: center;
    gap: 0.5em;
}

.no-results i {
    font-size: 300%;
}

li.result {display: flex;margin: 0 1rem;border-top: solid 1px #eee;padding: 0.5rem 0;align-items: center;cursor: pointer;}

img.result-thumb {width: 5rem;}

.result-description {flex: 1;margin-left: 1rem;}

li.result>i {font-size: 1.5rem;}

ul.result-stats {display: flex;gap: 1em;margin: 0.25rem 0 0;color: #444;}

li.result h2 {font-size: 150%;}

ul.result-stats i {color: #ff5a2a;}

.locationNav {padding: 0 1rem;display: flex;align-items: stretch;margin-top: -0.25rem;flex-wrap: wrap;margin: 0;text-align: left;}

.locationNav input {flex: 1;padding: 1em;font: inherit;border-radius: 15px;border: none;background: #eee;width: 100%;}

.locationNav>.ti {position: absolute;right: 0.75em;font-size: 1.5rem;padding: 0.5em;opacity: 0.5;pointer-events: none;}

.optionsNav {padding: 0 1rem;}

.option {/* border: solid 2px #ccc; *//* border-radius: 10px; */padding: 0.5rem 0;display: block;margin: 0 0 0.25rem 0;font-weight: bold;cursor: pointer;color: #555;}

.option.on {color: #ff5a2a !important;/* border-color: #ffaa92; */}
.option .ti {margin: 0.5rem 0.4rem 0 0.2rem;display:inline-block;font-size: 125%;}
.option .ti:first-child {margin:0;font-size: 1.5rem;vertical-align: -25%;margin-right: 0.25rem;}
.option.on .ti:first-child:before {content: "\ea67";}
.option+.option {border-top: solid 1px #eee;}
.option:hover {color:#000;}



/* Store screen */

#coverNav {display: flex;justify-content: center;padding: 1rem;padding-left: 7rem;align-items: flex-start;flex-direction: column;position: relative;height: 7rem;}

#coverNav img {height: 5rem;width: 5rem;position: absolute;left: 1rem;border-radius: 10px;object-fit: cover;}

#coverNav h1 {max-height: 2.4em;font-size: 180%;font-weight: bold;line-height: 0.8;overflow: hidden;margin: 0.25em 0;}
#coverNav [screen] {cursor:pointer;}
#coverNav i {/* font-size: 1.5rem; *//* opacity: 0.5; */}

#filtersNav {padding: 0 1rem 1rem;display: flex;gap: 1rem;}

li.filter {width: 50%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;}

.filter-name {color: #ff5a2a;}

li.product {display: flex;margin: 0 1rem;border-top: solid 1px #eee;padding: 0.5rem 0;align-items: center;cursor: pointer;}
.product.searched {}

img.product-thumb {width: 5rem;border-radius: 5px;}

.product-description {flex: 1;margin-right: 1rem;}

ul.product-stats {display: flex;gap: 1em;margin: 0.25rem 0 0;color: #444;}

li.product h2 {font-size: 120%;font-weight: bold;}
li.product.no-stock {color:#999;}
li.product.no-stock h2:after {content:"Esaurito";margin: 0 0.7em;background: #999;border-radius: 3px;color: #fff;padding: 2px 5px;text-transform: uppercase;font-size: 65%;letter-spacing: 0.1em;vertical-align: 15%;}

li.product .product-text {color: #999;line-height: 1;margin: 0.5em 0;}

li.product .product-price {font-weight: bold;}
li.product.no-value .product-price {display:none;}

.product-unit {opacity: 0.5;}

.category-title {padding: 3rem 1rem 1.5rem;}

.category-title h2 {font-size: 150%;font-size: 1.5rem;}

.category-stagione .category-title h2 {
    color: #57ab36;
}
.category-searched .category-title h2 {
    color: #c9c9c9;
}

ul#statsNav {margin: -4rem 1rem -1rem;padding: 0.1rem 1rem;background: #fff;border-radius: 10px;box-shadow: 0 0 5px rgba(0,0,0,0.25);}

li.stat {margin: 0.5rem 0;display: flex;align-items: center;font-size: 90%;min-height: 1.5em;}

.stat-name {color: #ff5a2a;width: 5.1rem;display: inline-block;}

.stat-value {font-weight: bold;}

.stat-value i {color:#999;}

.stat-link {padding: 0 1em;/* display:inline-block; */color: #ffad9a !important;text-decoration: underline;}



.photos {padding: 0 1rem 1rem;white-space: nowrap;width: 100%;overflow-y: hidden;overflow-x: auto;}

.photos img {height: 15rem;max-width: none;}

.info:last-child {padding-bottom: 4rem;}

.info-title {padding-top: 2rem;text-align: center;color: #ff5a2a;}

.store-body h1,.store-body h2,.store-body h3,.store-body h4 {font-size:1.5rem;padding-top: 2rem;text-align: center;color: #ff5a2a;}
.store-body h2 {
    font-size: 1.25rem;
}
.store-body h3 {
    font-size: 1rem;
    font-weight: bold;
}
.store-body h4 {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
}

.info-body {padding: 0 1rem;}
.store-directions {
    margin: -1em 0 1em;
    text-align:center;
}
.store-directions a {color: #ffad9a !important;}
.text-page {padding: 1rem;}

.text-page h1,.text-page h2,.text-page h3 {font-weight: bold;font-size: 120%;margin: 1em 0;}
.text-page ul,.text-page li {list-style:initial;margin: revert;padding: 0 0 0 1rem;}

.center {position: absolute;top: 50%;text-align: center;transform: translateY(-50%);}

form {
    margin: 2rem;
    text-align: center;
    position: relative;
    }

form input,form button {
    padding: 1em;
    font: inherit;
    border-radius: 15px;
    border: none;
    background: #eee;width: 100%;margin: 0 0 0.5em;font-size: 120%;
}
form button[type="submit"]{
    background: #57ab36;
    color: #fff;
}
form p {margin: 0rem 0rem 2rem;}

form label {display: flex;font-size: 120%;align-items: center;text-align: left;/* justify-content: center; */padding: 0.5rem 0;margin: 0.5rem 0;}
form label+label {/* padding-top:0; */}
form label input {width: 1em;height: 1em;margin: 0;margin-right: 0.5rem;}
form label a {text-decoration:underline;cursor: pointer;}
form h2 {font-size: 150%;margin: 2rem 0 1rem;}

form[action] span {opacity: 0.5;/* display: block; *//* text-align: left; */letter-spacing: 0.05em;}

.form-footer a {display: block;padding: 0.5rem;opacity: 0.5;}

.form-footer {margin: 1rem 0 0;}

.form-header {height: 6rem;margin: 0 0 1rem;}

.response {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* border: solid 2px #57ab36; */
    color: #57ab36;
    padding: 1.3em;
    font-size: 120%;
    background: #ffffffe6;
    /* border-radius: 5px; */
    animation: fade-in 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.response.error {
    /* border: solid 2px #ff3d3d; */
    color: #ff3d3d;
    }
.response.warning {
    /*border: solid 2px #ffb943;*/
    color: #ffb943;}





.order {padding: 1rem;/* padding-right: 2em; */font-size: 120%;}

.order>p {margin: 0 0 1.5rem;opacity: 0.5;font-size: 90%;}

.order-detail p {margin: 0;font-weight: bold;margin-left: 1.4rem;}
.order-detail p.order-delivery-cost {
    right: 0;
    top: 1.2em;
    pointer-events: none;
    position: absolute;
    font-size: 0.9rem;
}
.order-detail {border-top: solid 1px #eee;padding: 1rem 0;position: relative;}

.order-detail h3 {color: #ff5a2a;/* letter-spacing: 0.05em; */margin-bottom: 0.5rem;position: relative;}
.order-detail h3 a {
    position: absolute;
    right: 0;
    background: #eeeeee;
    color: #000 !important;
    padding: 0.25rem 1rem;
    border-radius: 10px;
    top: -0.25rem;
    cursor: pointer;
}

.order-pickup[style=""]+.order-detail {border-top:none;padding-top: 0;}
.order-pickup[style=""]+.order-detail h3 {display:none;}

.order-detail textarea,.order-detail input {width: 100%;background: #eee;border: none;border-radius: 10px;padding: 0.7rem;font: inherit;font-size: 0.9rem;margin: 0 0 3px;}
.order-detail textarea {resize: none;height: 6em;}

.order-detail h2.product-title {font-size: 0.9rem;/* font-weight: normal; */}

.order-detail li.product {border: none;padding: 0;margin: 0;margin-left: 1.4rem;display: flex;gap: 0.5rem;}

.order-detail .product-qty {background: none;font-size: 0.9rem;}

.order-detail .product-qty:before {content: "x";margin-right:0.25em;opacity: 0.25;}

.order-detail .product-price {font-size: 0.9rem;flex: 1;text-align: right;}

.order-detail.order-total {display: flex;justify-content: space-between;align-items: center;}
.order-detail.order-total h3 {
    margin: 0;
    flex: 1;
}
.order-confirm {padding: 1em;font: inherit;border-radius: 15px;border: none;background: #57ab36;color: #fff;width: calc(100% - 2rem);margin: 0rem 1rem 2rem;font-size: 120%;cursor: pointer;}
.modal-submit .order-cancel {background: #eee;color: #ff000e;}
.order-complete {padding: 1em;font: inherit;border-radius: 15px;border: none;background: #eee;color: #57ab36;/* width: calc(100% - 2rem); *//* margin: 2rem 1rem -2rem; */font-size: 120%;}

.pp-wrap {
    display: none;
}
.pp-wrap.pp-enabled  {
    padding: 1rem;
    display: block;
}

.pp-wrap:after {color:#9c9c9c;text-align:center;padding:1rem 2rem 3rem;display:block;}
.pp-wrap.pp-enabled:after  {   content:"Premendo il pulsante PayPal puoi pagare anche con carta di credito o altri mezzi.";}
.pp-wrap.pp-ok:after  {  display:none; }

.pp-wrap:before {color:#57ab36;text-align:center;padding:0 1rem 3rem;display:block;}
.pp-wrap.pp-ok:before {content:"Grazie! Attendere mentre registriamo il tuo ordine."}


.pp-wrap.pp-enabled+.order-confirm  {
    display: none !important;
}
.ordersNav {padding: 0 1rem 0rem;}

.ordersNav h2 {text-align: center;font-weight: bold;opacity: 0.25;}
.all-orders {
    display: block;
    text-align: center;
    margin: -1em 0 2em;
    /* font-weight: bold; */
    text-decoration: underline;
    color: #858585 !important;
}
ul.orders {margin-bottom:2rem;}

li.order {background: #fb622f;color: #fff;border-radius: 15px;margin-top: 0.5rem;position: relative;cursor: pointer;}
li.order.ready {
    background: #57ab36;
}

li.order h3 {font-weight: bold;}

.order-summary {font-size: 0.9rem;opacity: 0.75;}

li.order>.ti {position: absolute !important;right: 0.75rem;top: 50%;transform: translateY(-50%);font-size: 150%;}

li.order.past-order {background: #999;}

.order-detail-actions {position: absolute;right: 0;top: 50%;transform: translateY(-50%);}

.order-detail-actions button {border: none;background: #eee;font-size: 120%;width: 2em;height: 2em;cursor: pointer;border-radius: 2em;}

.order-detail-actions+p {width: 50%;}

.modal .order {padding-top: 0px;margin-top: -0.5rem;}

.order-rating {display: flex; justify-content: center; }

.order-rating i {font-size: 150%; padding: 0.5em; }

.order-rated .order-rating i {color: #d2d2d2; }

.order-rated .order-rating i.on {color: #57ab36; }

.order-rating-thanks {position: absolute; padding: 1rem; color: #999; display: none; }

.order-rating.rated .order-rating-thanks {display: block; }

.order-rating.rated i {opacity: 0; pointer-events: none; }

.order-rating.hovering i { opacity:0.2; cursor:pointer;}
.order-rating.hovering i.on { opacity:1;color: #57ab36; }

.order-detail .order-pickup {
    margin: 1rem 0;
}

.order-paypal {
    background: #5aaa3e;
    color: #fff;
    border-radius: 100px;
    padding: 0.5em 1em;
    font-size: 60%;
    height: 2.2em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
}

#checkoutScreen.invalid {}
#checkoutScreen.invalid input[required] {}
#checkoutScreen.invalid .order-actions {
    pointer-events: none !important;
    opacity: 0.2 !important;
}



/* Modal */

.modal-title {font-size: 1.5rem;font-weight: bold;text-align: center;padding: 1rem 1rem 1.5rem;}
.modal-subtitle {font-size: 120%;font-weight: bold;/* text-align: center; */padding: 2.5rem 1rem 1rem;}
.modal-subtitle .ti {font-size: 1.5rem;vertical-align: -15%;}
.modal-body {
    margin: 0 2rem;
    height: calc(100% - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.location-result {width: 100%;padding: 1rem 0 0;color: #ff5a2a;}
.wait {opacity: 0.5;pointer-events: none;}
.modal-submit {left: 0;right: 0;padding: 1rem;position: static;bottom: 0;display: flex;flex-direction: column;width: 100%;gap: 10%;/* margin-top: 1rem; */}
.modal.overflow { overflow: hidden; }
.modal.nooverflow .modal-submit {position: absolute;bottom: 1rem;}
.modal-submit button {font: inherit;border-radius: 10px;/* border-radius: 3rem; */border: none;font-size: 120%;background: #57ab36;color: #fff;padding: 0.75rem;flex: 1;cursor: pointer;}
.modal-image {height: calc(56% - 2em);max-height: 50vh;/* width: 100%; */object-fit: cover;margin: 1em auto;/* margin-top: 0.5rem; *//* border-bottom: solid 1px #eee; */display: block;border-radius: 2%;}
#productModal .product-description {text-align: center;margin: 0 1rem 1rem;}
#productModal h2.product-title {font-size: 1.5rem;font-weight: bold;margin-bottom: 0.5rem;}
#productModal .product-text {font-size: 100%;margin-bottom: 0.5rem;opacity: 0.75;color: #333;}
#productModal .product-price {font-size: 100%;font-weight: bold;}
#productModal .modal-submit {flex-direction: row;background: #f6f6f6;}
.modal-submit .product-qty {background: none;font-size: 100%;font-weight: bold;letter-spacing: -0.05em;/* width: 50%; */flex: 1;/* background: #fff; */}
.modal-body .modal-submit {}
.modal-submit .product-qty button {background:none;color:#000;}
.modal-submit .product-qty .qty-number {width: 50%; }
#adultModal .modal-submit button:first-child {background:#bbb;}

#cookies {position: absolute; z-index: 10; bottom: 0; left: 0; right: 0; padding: 0.5rem; padding-left: 1rem; display: flex; align-items: center; background: #eeeeee; display:none; }
#cookies a {flex: 1; text-align: right; margin: 0 1rem; opacity: 0.5; cursor:pointer; }
#cookies button {border: none;background: #ee602c;color: #fff;padding: 1rem;border-radius: 0.5rem; cursor:pointer;font: inherit;}

ul.order-method-selector {display: flex; flex-wrap: wrap; background: #eee; border-radius: 10px; padding: 3px; gap: 3px; text-align: center; margin: 0 0 1em; }
ul.order-method-selector li {flex: 1;background: #fff;border-radius: 7px;padding: 2em 0.5em;transition: all 0.2s ease-out;display: flex;flex-direction: column;align-items: center;justify-content: center;}
ul.order-method-selector p {width: 100%;margin: 0;padding: 1em 0.5em;opacity: 0.8;transition: all 0.2s ease-out;max-height: 4em;pointer-events: none;}
ul.order-method-selector li:hover {cursor: pointer; color: #ff5a2a; }
ul.order-method-selector.off p {padding: 0;max-height: 0;opacity: 0;}
ul.off.order-method-selector li {margin-top: -3px; padding: 0.5em; color: #999; }
ul.order-method-selector.off li.on {background: #ff6e4d; color: #fff; }
.order>*,.order-confirm{position:relative !important;top:0;animation:slide-in 0.5s ease-out;}
#order-detail-delivery {
    /* border: none; */
}
#order-detail-pickup {
    /* border: none; */
}
.order-method-notes {
    font-size: 60%;
    margin: 0.5em 0 0;
    color: #999;
    position: absolute;
    bottom: 1em;
}
ul.order-method-selector.off .order-method-notes {display:none;}

.anim-image {
    background:#fff;
    position: absolute;
    z-index: 30;
    margin: 0;
    box-shadow: 0 5px 10px #0003;
    animation: addtocart-img 1s cubic-bezier(0.75, 0.1, 0.29, 0.94);
    animation-fill-mode:both;
}
#viewport.cart-anim a.cart-on i.ti {
    position:relative;
    animation: addtocart-cart 0.5s cubic-bezier(0.75, 0, 0.58, 1) infinite;
}


@keyframes addtocart-img {
    50% {top:-25%;left:0%;}
    100% {scale:0.01;left:47.5%;top:-23.5%;}
}
@keyframes addtocart-cart {
    0% {top:0;}
    30% {top:0.2em;}
    50% {top:0.2em;}
    100% {top:0;}
}



.stat-value.share-links a {
    color: #000;
    font-size: 120%;
    background: #eee;
    padding:0 0.25em;
    gap:0.25em;
    min-width: 1.5em;
    display: inline-flex;
    height: 1.5em;
    border-radius: 1em;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    overflow: hidden;
}

.stat-value.share-links a * {
    color: inherit;
}

.stat-value.share-links a i:before {
    font-display: block !important;
}

.stat-value.share-links a[copy].copied {
    pointer-events: none;
    animation:copied-button 0.5s cubic-bezier(0.55, 0.12, 0.17, 0.96);
    animation-fill-mode: both;
}

@keyframes copied-button {
    0% {}
    50% {scale:0.8;background:#ff5a2b;}
    100% {}
}

.stat-value.share-links a[copy].copied:after {
    content:"Copiato! ·";
    font-weight:normal;
    font-size:80%;
    animation:copied 3s cubic-bezier(0.55, 0.12, 0.17, 0.96);
    animation-fill-mode: both;
    overflow:hidden;
    white-space:nowrap;
}
@keyframes copied {
    0% {max-width:0;opacity:0;}
    5% {max-width:0;opacity:0;}
    30% {max-width:4.25em;opacity:0.8;}
    90% {max-width:4.25em;opacity:0.8;}
    100% {max-width:0;opacity:0;}
}

/* Mobile only */

@media screen and (max-width: 768px) {

    #viewport {

    }
    .modal-image {
        width:calc(100% - 2em);
    }


}


/* Desktop only */

@media screen and (min-width: 769px) {

    #viewport {
        width: 50vh;
        height: 95vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        /* border: solid 10px #222; */
        box-sizing: content-box;
        /* border-top-width: 40px; */
        /* border-bottom-width: 40px; */
        box-shadow: 0rem 0.25rem 1rem #0000004a;
    }

}