main {
   display: flex;
   flex-direction: column;
   row-gap: 32px;
   padding-bottom: 48px;
}
main > div {
   margin-top: 48px;
}
main > div.cartloading {
   flex: 1;
   text-align: center;
}
main > div.cartnoitems {
   flex: 1;
}



/* CART
 * */
.cart ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.cart li {
   position: relative;
   margin: 0;
   padding: 24px 0;
   display: flex;
   align-items: center;
   column-gap: 8px;
   border-top: 1px solid var(--color-faint-lines);
}
@media( min-width: 1024px ) {
   .cart li {
      column-gap: 16px;
   }
}
.cart li > button {
   position: absolute;
   top: 16px;
   right: 0px;
   font-size: .8em;
}
.cart li > button path {
   fill: var(--color-primary-bg);
}
.cart li > picture {
   margin: 0;
   padding: 0;
   flex: 0 0 64px;
   height: auto;
   aspect-ratio: 1 / 1;
   border-radius: 4px;
}
.cart li > picture img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 4px;
}
.cart li > div {
   margin-right: auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   row-gap: 4px;
}
.cart li h3 {
   margin: 0;
   padding: 0;
   font-size: 1em;
   font-weight: 500;
/* overflow hidden doesn't work
   white-space: nowrap;
*/
   overflow: hidden;
   text-overflow: ellipsis;
}
.cart li .qtydetail {
   color: var(--color-default-light);
   font-size: .85em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.cart li > span {
   font-weight: 300;
   font-size: 1.1em;
}

/* Cart note
 * */
.cart fieldset {
   border: 1px solid var(--color-faint-lines);
   margin: 32px 0 0;
   padding: 0;
   position: relative;
}
.cart fieldset legend {
   font-size: .75em;
   text-transform: uppercase;
   padding: 0 4px;
   background: white;
   position: absolute;
   top: -10px;
   left: 12px;
}
.cart fieldset textarea {
   border: none;
   padding: 16px;
   display: block;
}

/* Clear cart
 * */
.cart .clear {
   font-size: .85em;
   color: var(--color-default-lighter);
}



/* Adjuster Popup
 * */
.itemadjust > ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.itemadjust > ul > li {
   display: flex;
   column-gap: 16px;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid var(--color-faint-lines);
}
.itemadjust > ul > li > strong,
.itemadjust > ul > li > picture {
   flex: 0 0 96px;
}
.itemadjust picture {
   display: block;
   margin: 0;
   padding: 0;
   aspect-ratio: 1/1;
   height: auto;
   border-radius: 4px;
}
.itemadjust picture img {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
   border-radius: 4px;
}
.itemadjust .itemname {
   font-size: 1.1em;
   font-weight: 500;
}
.itemadjust .itemname a {
   text-decoration: none;
   display: flex;
   column-gap: 12px;
   align-items: flex-start;
}
.itemadjust .itemname svg {
   font-size: .7em;
   cursor: pointer;
   position: relative;
   top: -2px;
}
.itemadjust .description {
   padding: 24px 0;
   font-size: .85em;
   color: var(--color-default-light);
}

.itemadjust .qtyadjuster {
   display: flex;
   align-items: center;
   column-gap: 12px;
   flex-wrap: wrap;
}
.itemadjust .qtyadjuster input {
   flex: 0 0 64px;
   text-align: center;
}
.itemadjust .qtyadjuster .delete {
   margin-left: auto;
}
@media( min-width: 640px ) {
   .itemadjust .qtyadjuster .delete {
      margin-left: 12px;
   }
}
.itemadjust .qtyadjuster .deleteinfo {
   font-size: .85em;
   color: var(--color-danger);
}
/*
.itemadjust .bottombuttons {
   margin: 24px 0 0;
   display: flex;
   column-gap: 16px;
   justify-content: center;
}
*/



main > .sidebar .userinfo {
   border: 1px solid var(--color-faint-lines);
   border-radius: 7px;
   margin: 0 0 24px;
   padding: 32px 16px 16px;
}
main > .sidebar .userinfo .loggedon h5 {
   margin: 0;
   font-size: 1.3em;
   font-weight: 500;
}
main > .sidebar .userinfo .loggedon p {
   font-size: .85em;
   margin: 0;
}
main > .sidebar .userinfo .loggedon p label {
   display: flex;
   align-items: center;
   column-gap: 8px;
}
main > .sidebar .userinfo .loggedon p input {
   margin: 0;
}
/*
main > .sidebar .login {
   font-size: .9em;
}
main > .sidebar .login .link {
   font-weight: 700;
   text-decoration: underline;
}
*/


/* LOGIN stuff
 * */
.pwdfield {
   display: flex;
   flex-direction: column;
   row-gap: 8px;
}
.pwdfield .forgotpass {
   display: flex;
   justify-content: space-between;
}
.pwdfield .forgotpass,
.pwdfield em {
   padding: 0 13px;
   font-size: .85em;
}

/* Userinfo Section
 * */
.userinfosection {
   position: relative;
   margin: 48px 0 0;
}
.userinfosection .fullnamefields {
   display: flex;
   column-gap: 8px;
}
.userinfosection .sectionlabel {
   position: absolute;
   font-size: .7em;
   top: -24px;
   text-transform: uppercase;
   font-weight: 700;
}



/* Big blue pay button
 * (confirm & pay now)
 * */
.bigpaybutton {
   margin: 24px 0 16px;
   width: 100%;
   display: flex;
   column-gap: 16px;
   justify-content: center;
   padding: 16px;
   align-items: center;
   transition: 0.3s;
}
.bigpaybutton span:nth-child(1) {
   font-size: 1.5em;
   font-weight: 400;
}
.cancelpay {
   font-size: .85em;
   text-align: center;
}

/* Fail message
 * */
#payment-message {
  font-size: .9em;
  text-align: center;
}

main > .sidebar form {
   line-height: 1;
}

@media( min-width: 768px ) {
   main {
      flex-direction: row;
      column-gap: 32px;
   }
   main > .cart {
      flex: 1;
   }
   main > .sidebar {
      flex: 0 0 45%;
   }
   main > .sidebar > div {
      position: sticky;
      top: 48px;
   }
}
@media( min-width: 1024px ) {
   main {
      column-gap: 56px;
   }
   main > .sidebar {
      flex: 0 0 35%;
   }
   main > .sidebar > div {
      top: 133px;
   }
}
@media( min-width: 1280px ) {
   main > .sidebar {
      flex: 0 0 30%;
   }
}




h1 {
   margin-top: 0;
}
/*
h2 {
   margin: 0;
   padding: 0 4px;
   font-weight: 600;
   font-size: .85em;
   line-height: 1;
   text-transform: uppercase;
   position: absolute;
   top: -8px;
   left: 12px;
   background: white;
   color: var(--color-default-light);
}
*/