@media (max-width: 1024px) {
 .container[data-controller="cart"],
 .container[data-controller="orders"]{padding: 0 20px}
 .section--slide img{ max-width: none; left: 50%; transform: translateX(-50%); height: 120%; top: 0%}
}

@media (max-width: 768px) {
/*menu*/
.col--info{padding: 0; font-size: 13px; width: 100%;  margin-top: auto;}
.col--info > li > a {padding: 10px 20px !important; font-weight: bold;}
.item--hamb {margin-top: 20px; margin-bottom: 20px; width: 25px;height: 18px;display: flex;flex-direction: column;justify-content: space-between;cursor: pointer;}
.item--hamb span {display: block;width: 100%;height: 3px;background: #000;border-radius: 2px;}
.link--login > i{display: block; float: right}
.menu--secondary .link--login{margin: 0; width: 100%}

.item--close-menu{display: block !important; }
.item--close-menu a{padding: 10px 20px !important; text-align: right; background: #323232; color: #eee}
header{height: 60px !important}
.menu--secondary.hide{left: -100%; }
.menu--secondary.show{left: 0%}
.menu--secondary {display: flex; flex-direction: column; transition: 0.2s ease; top: 0;padding: 0 0 40px 0; width: 200px; position: absolute; left: 0; margin-top: 0 ; height: 100vh; background: #eee; border-right: solid 1px #aaa}
.menu--secondary li{display: block; border-bottom: solid 1px #ccc; }
.menu--secondary li a{padding: 20px 20px; display: block;}
.menu--secondary .copyright{font-size: 11px; font-weight: 600; text-align: center}

.section--slide img{height: 140%; width: auto; max-width: none}
main .grid .card{width: 50%}
.grid{margin-top: 5px}
.col--single-product {margin-top: 0}
.col--single-product > .col{width: 100%}
.images{margin: 0}
.col--single-product .images > img{ max-width: 600px }
.mini-cart { width: 92vw; right: -10px; }

.menu--secondary > li > a.is-active::after{left: 0;top: 0;width: 5px; height: 100%; background: #323232;border-radius: 0px; }
.menu--secondary > li > a.is-active::before{display: none}
.menu--secondary .col--info, .menu--secondary .copyright{display: block;}
footer{display: none}

html,
body,
main,
#checkoutForm{height: 85vw}
[data-controller="orders"] > p,
[data-controller="orders"] > form{width: 100%; display: block;}



}


@media (max-width: 480px) {
  main .grid .card{width: 100%}
  #emailBox input{width: 100%}
  .caption--slide p{font-size: 1.5em}
  [data-scaffold="cart"] table{display: grid;}

  [data-scaffold="cart"] table thead th[data-label="Immagine"]{width: 25%}
  [data-scaffold="cart"] table thead th[data-label="Prodotto"]{width: 35%; text-align: left;}
  [data-scaffold="cart"] table thead th[data-label="Prezzo"]{width: 25%; text-align: left}
  [data-scaffold="cart"] table thead th[data-label="Totale"]{width: 15%; text-align: right !important;}

  /*cart responsive table*/
  /*.table thead {display: none;}

  .table,
  .table tbody,
  .table tr,
  .table td,
  .table tfoot,
  .table th {display: block;width: 100%;}

  .table tr {margin-bottom: 16px;padding: 12px;border: 1px solid #ddd;border-radius: 8px;}

  .table td {display: flex;justify-content: space-between;align-items: flex-start;gap: 12px;padding: 8px 0;border: 0;}

  .table td::before {content: attr(data-label);font-weight: 700;min-width: 90px;}

  .table tfoot tr {border-top: 2px solid #000;}*/

}