#wrap:has(#checkout[active]) > footer {
  @media (orientation: portrait) {
    margin-block-end: calc(var(--row-gap) * 1.5);
  }
}

#main-content > section#checkout {
  
  @media (orientation: portrait) {
    grid-template-columns: 1fr;
  }

  &:not(:has(#checkout-items:empty)) {
    #checkout-empty {
      display: none;
    }
  }

  &:has(#checkout-items:empty) {
    #checkout-summary {
      display: none;
    }

    
    #checkout-shipping {
      display: none;
    }

    #saved-items {
      grid-column: 1 / -1;
    }
  }
}

#checkout-wrap {
  display: grid;
  row-gap: var(--row-gap);
  grid-column: 1 / -2;  

  @media (orientation: portrait) {
    grid-template-columns: 1fr;
  }
 
}

#checkout-wrap > section:not(#checkout-empty):not(:empty), #checkout-summary {
  border: 1px solid var(--gray-4);
  padding: var(--row-gap) var(--column-gap);
  margin-block-start: 1.5em;
  background-color: #fff;

  &::before {
    display: inline;
    color: #fff;
    background-color: #000;
    padding-inline: .2em;
    position: absolute;
    z-index: 1;
    top: -1.5em;
    left: -1px;

    font-size: 1.2rem;
    font-family: 'Century Gothic';
    letter-spacing: 1.2px;
    text-shadow: 0.4px 0 0 hsla(0, 100%, 100%, 70%),
                 -0.4px 0 0 hsla(0, 100%, 100%, 70%);
  }
}

#checkout > section:not(#checkout-empty):empty {
  display: none;
}

#checkout-wrap > section:not(#checkout-summary) {
  position: relative;
}


/* CART */
#checkout-items {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-columns: min-content;
  
  gap: var(--row-gap);

  position: relative;

  &:not(:empty)::before {
    content: 'IN YOUR CART';
  }
} 


/* EMPTY */
#checkout-empty {
  grid-column: 1 / -1;

  display: grid;
  place-items: center;

  min-height: 20vh;
}


/* SAVED ITEMS */
#saved-items {
  font-family: 'Century Gothic';

  &::before {
    content: 'SAVED ITEMS';
  }

  &:empty {
    display: none;
  }

  & > section {
    height: min-content;

    &:not(:last-child) {
      margin-block-end: .4rem;
    }

    [listing] {
      display: block;
    }

    [move], [move]:hover, [move]:active, [move]:focus, [move]:visited,
    [remove], [remove]:hover, [remove]:active, [remove]:focus, [remove]:visited {
      text-transform: uppercase;
      text-decoration: underline;
      font-size: .8rem;
      margin-inline-end: .4rem;
      user-select: none;
      cursor: pointer;
      position: relative;
      inset-block-start: -.4rem;
    }
  }
}


/* SHIPPING */
#checkout-shipping {
  --input-height: 2.4rem;
  --border-color: var(--gray-3);

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
  

  @media (orientation: portrait) {
    grid-template-columns: 1fr;
  }
 
 
  & [checkout-shipping_input-wrap] {
    filter: drop-shadow(-1px 0 0 var(--border-color)) 
            drop-shadow(1px 0 0 var(--border-color))
            drop-shadow(0 -1px 0 var(--border-color))
            drop-shadow(0 1px 0 var(--border-color));
  }

  &::before {
    content: 'SHIPPING';
  }

  & input, select {
    box-sizing: border-box;
    padding: .2rem .4rem;
    
    width: 100%;
    height: var(--input-height);

    background-color: #fff;

    &:autofill, option {
      box-shadow: inset 0 0 0 99px white;
    }

    &::placeholder {
      color: transparent;
    }

    & + label {
      position: absolute;
      left: calc(anchor(left) + 1px);
      pointer-events: none;

      text-wrap: nowrap;
      place-content: center;

      padding: .2rem .4rem;
      height: var(--input-height);

      color: var(--gray-6);
      font-family: 'Century Gothic';     

      user-select: none;

      transition: transform 160ms linear;
    }
  }

  & div:focus-within > label, 
  & input:not(:placeholder-shown) + label, 
  & select:not(:has([value='']:checked)) + label, 
  & select:autofill + label {
    transform: translateY(-17px) translateX(-1px);
    background-color: #fff;
    border-color: var(--gray-3);
    height: 18px;
    font-size: .8rem;
  }

  #checkout-shipping_first-name {
    anchor-name: --checkout-shipping_first-name;
    
    & + label {
      position-anchor: --checkout-shipping_first-name;
    }
  }

  #checkout-shipping_last-name {
    anchor-name: --checkout-shipping_last-name;
    
    & + label {
      position-anchor: --checkout-shipping_last-name;
    }
  }

  #checkout-shipping_phone {
    anchor-name: --checkout-shipping_phone;
    
    & + label {
      position-anchor: --checkout-shipping_phone;
    }
  }

  #checkout-shipping_email {
    anchor-name: --checkout-shipping_email;
    
    & + label {
      position-anchor: --checkout-shipping_email;
    }
  }

  #checkout-shipping_address-1 {
    anchor-name: --checkout-shipping_address-1;
    
    & + label {
      position-anchor: --checkout-shipping_address-1;
    }
  }

  #checkout-shipping_address-2 {
    anchor-name: --checkout-shipping_address-2;
    
    & + label {
      position-anchor: --checkout-shipping_address-2;
    }
  }

  #checkout-shipping_city {
    anchor-name: --checkout-shipping_city;
    
    & + label {
      position-anchor: --checkout-shipping_city;
    }
  }

  #checkout-shipping_state {
    anchor-name: --checkout-shipping_state;

    place-items: center;
    place-content: center;

    text-wrap: nowrap;
    
    & option {
      text-wrap: nowrap;
    }

    & [value=''] {
      display: none;
    }
    
    & + label {
      position-anchor: --checkout-shipping_state;
    }
  }

  #checkout-shipping_zip {
    anchor-name: --checkout-shipping_zip;
    
    & + label {
      position-anchor: --checkout-shipping_zip;
    }
  }
}


/* SUMMARY */
#checkout-summary {
  @media (orientation: landscape) {
    position: sticky;
    grid-column: -2 / span 1;
    grid-row: 1 / -1;
    top: calc(var(--main-nav-outer-wrap-height) + var(--row-gap) + 1.5rem);
  }

  @media (orientation: portrait) {
    position: relative;
  }

  &::before {
    content: 'ORDER SUMMARY';
  }
}

#checkout-cost {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: (var(--column-gap) / 2);
  margin-block-end: var(--row-gap);

  font-family: 'Century Gothic';

  & > label {
    align-content: center;
    text-transform: uppercase;
  }

  & > output {
    direction: rtl;
  }

  label:last-of-type, output:last-of-type {
    border-block-start: 1px solid black;
    font-weight: bold;
    margin-block-start: .4rem;
    padding-block-start: .4rem;
  }

  & sup {
    font-size: .8em;
    position: relative;
    top: .25em;
  }
}

#checkout-discount-code {
  display: none;
}

#checkout-submit {
  box-sizing: border-box;
  display: grid;
  
  width: 100%;
  height: calc(var(--row-gap) * 1.5);

  color: #fff;
  background-color: #000;

  font-size: 1.2rem;
  text-align: center;
  overflow-wrap: break-word;

  place-content: center;

  &::before {
    display: block;
  }

  @media (orientation: portrait) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
}

#checkout-card {
  height: 0;
  overflow-y: clip;
  transition: height 200ms linear;
  transition-behavior: allow-discrete;


  @starting-style {
    height: 0;
  }
}

#checkout:not([state='complete']):has(#checkout-submit[total]) #checkout-card {
  height: auto;
  padding-block-end: var(--column-gap);
  
  &::before {
    font-size: .8rem;
    content: 'Secure payment by Square ' url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='16px' height='16px' viewBox='1 -12 53 65'%3E%3Cpath d='M45.333,0.901H9.868C4.992,0.901,1,4.891,1,9.769v35.466 C1,50.109,4.992,54.1,9.868,54.1h35.466c4.876,0,8.868-3.99,8.868-8.865V9.769C54.201,4.891,50.209,0.901,45.333,0.901 M44.527,41.609c0,1.55-1.269,2.815-2.82,2.815H13.492c-1.55,0-2.82-1.266-2.82-2.815V13.395c0-1.55,1.27-2.82,2.82-2.82h28.215 c1.551,0,2.82,1.27,2.82,2.82V41.609z M34.857,33.143c0,0.889-0.726,1.612-1.61,1.612H21.962c-0.887,0-1.61-0.724-1.61-1.612 V21.859c0-0.887,0.723-1.611,1.61-1.611h11.284c0.885,0,1.61,0.725,1.61,1.611V33.143z'/%3E%3C/svg%3E");  
  }
}

#checkout:has([required]:not([valid])) #checkout-submit::before {
  content: 'CONTINUE TO SHIPPING';
  cursor: pointer;
}

#checkout[state='ready'] #checkout-submit {
  cursor: pointer;

  &::before {
    content: 'PLACE ORDER (' attr(total) ')';
  }
}

#checkout[state='calculating'] #checkout-submit {
  background-color: var(--gray-4);
  pointer-events: none;

  &::before {
    content: 'LOADING'
  }
}

#checkout[state='error'] #checkout-submit {
  background-color: hsl(0 80% 50);
  pointer-events: none;

  &::before {
    content: 'ERROR'
  }
}


#checkout[state='processing'] #checkout-submit {
  background-color: var(--gray-4);
  pointer-events: none;

  &::before {
    content: 'PROCESSING'
  }
}




#checkout[state='complete'] #checkout-submit {
  background-color: hsl(90, 80%, 40%);
  pointer-events: none;

  &::before {
    content: 'ORDER COMPLETE'
  }
}

#checkout:has(#checkout-items:empty) #checkout-wrap {
  grid-column: 1 / -1;
}

#checkout-note {
  color: hsl(0 80% 50);
  font-weight: bold;
  margin-block-end: var(--row-gap);
  text-align: justify;

  &:empty {
    display: none;
  }
}