.cart-drawer
{
  position: fixed;
  z-index: 800;
  top: 0;
  right: 0;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: start;

  height: 100vh;
  width: 25vw;
  min-width: 412px;
  max-width: 100vw;
  max-height: 100vh;
  
  background-color: var(--c-primary-lighter);
  color: var(--c-primary-darker);
  border-left: 1px solid var(--c-shadow);

  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.cart-drawer.open
{
    transform: translateX(0);
}

.cart-drawer-top
{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding: 0.5rem;

  background-color: var(--c-secondary);
  color: var(--c-primary-lighter);
}

.cart-drawer-close
{
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  aspect-ratio: 1/1;

  padding: 0.5rem;

  background-color: var(--c-secondary);
  border-radius: 0.5rem;
}
.cart-drawer-top a:not(:disabled):hover,
.cart-drawer-top a:not(:disabled):focus
{
  background-color: var(--c-primary-lighter);
  color: var(--c-secondary);
}
.cart-drawer-top a:not(:disabled):hover
{
  cursor: pointer;
}

/* content */
.cart-drawer-content
{
  flex: 1 1 auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 0.75rem;
  padding-top: 0rem;

  width: 100%;
}

/* items */
.cart-drawer-items
{
  flex: 1 1 auto;

  overflow-y: scroll;
}

.cart-drawer-item 
{
  margin-right: 0.5rem;
  padding: 0.5rem 0rem;
}

.cart-drawer-item a:not(:disabled):hover,
.cart-drawer-item a:not(:disabled):focus
{ 
  text-decoration: underline; 
}

.cart-drawer-item-data
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  padding: 0.25rem 0rem;
}

.cart-drawer-item-price
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: space-between;

  padding: 0.25rem 0rem;

  border-top: 1px solid var(--c-shadow-lighter);
  border-bottom: 1px solid var(--c-shadow);
}

/* lines */
.cart-drawer-lines
{
  width: 100%;

  padding: 0.5rem 0rem;

  border-top: 1px solid var(--c-shadow-lighter);
}

.cart-drawer-line
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: space-between;

  width: 100%;
}





/* ===== cart item template ===== */ /* OLD */
/* template */
.cart-item-template
{
  display: grid;
  grid-template-rows: 1fr min-content min-content;
  grid-template-columns: min-content 1fr;

  width: 100%;

  padding: 0.5rem 0rem;
}

.cart-item-template input
{
    min-width: 48px;

    padding: 0.5rem;

    background-color: var(--c-highlight);
    border: none;
}
.cart-item-template input:not(:disabled):hover,
.cart-item-template input:not(:disabled):focus
{
    background-color: var(--c-light);
}
.cart-item-template input[type="submit"]:not(:disabled):hover
{
  cursor: pointer;
}

/* buttons container */
.cart-item-buttons
{
  grid-column: 1/2;
  grid-row: 1/4;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: start;
  justify-content: space-around;
  gap: 0.5rem;

  margin-right: 0.5rem;
  padding: 0.5rem;

  border-right: 1px solid var(--c-shadow-lighter);
}

.cart-item-button
{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1/1;

  padding: 0.5rem;

  background-color: var(--c-primary-lighter);
  color: var(--c-shadow);
  border: 1px solid var(--c-shadow);
  border-radius: 50%;
}
.cart-item-button:not(:disabled):hover,
.cart-item-button:not(:disabled):focus
{
  background-color: var(--c-light);
  color: var(--c-shadow);
  border: 1px solid var(--c-shadow);
}
.cart-item-button:not(:disabled):hover
{
  cursor: pointer;
}

/* content container */
.cart-item-content
{
  grid-column: 2/3;
  grid-row: 1/2;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: start;
  justify-content: start;
  gap: 0.5rem;
}

.cart-item-content img
{
  max-height: 25vh;
  max-width: 25%;
  object-fit: contain;
}

/* note container */
.cart-item-note
{
  grid-column: 2/3;
  grid-row: 2/3;

  margin-top: 0.5rem;
  padding-top: 0.5rem;

  border-top: 1px solid var(--c-shadow-lighter);
}

.cart-item-note > div:has(.jsCartQtyChange)
{
  flex: 1 1 auto;
  display: flex;
  flex-direction: flex-row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.cart-item-note .jsCartQtyChange
{
  width: 80%;
  min-width: 64px;
}

.cart-item-pricing
{
    grid-column: 2/3;
    grid-row: 3/4;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

    margin-top: 0.5rem;
    padding-top: 0.5rem;

    border-top: 1px solid var(--c-shadow-lighter);
}




.category-card
{
  color: var(--c-primary-darker);
  text-align: center;
  font-size: 1.2rem;
  text-wrap: stable;
}



.header-searchbar form
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}



.header-searchbar input
{
  padding: 0.5rem;

  border: 2px solid var(--c-secondary);
  border-radius: 0.25rem;
}

.header-searchbar input[type="text"]
{
  flex: 1 1 auto;

  border-right: none;
  border-radius: 0.25rem 0rem 0rem 0.25rem;

  background-color: var(--c-primary-lighter);
  color: var(--c-shadow);
}
/*.header-searchbar:not(:has(input[type="submit"]:hover)) input[type="text"]:focus*/
.header-searchbar input[type="text"]:hover,
.header-searchbar input[type="text"]:focus
{
  background-color: var(--c-light);
  color: var(--c-primary-darker);
}

.header-searchbar input[type="submit"]
{
  border-left: none;
  border-radius: 0rem 0.25rem 0.25rem 0rem;

  background-color: var(--c-secondary);
  color: var(--c-primary-lighter);
}
.header-searchbar input[type="submit"]:hover,
.header-searchbar input[type="submit"]:focus
{
  background-color: var(--c-light);
  color: var(--c-secondary);
}
.header-searchbar input[type="submit"]:not(:disabled)
{
  cursor: pointer;
}




.mobile-top
{
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  min-height: 32px;

  background-color: var(--c-secondary);
}










/*
.home-process
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;

  background-color: var(--c-shadow-lighter);
}

.home-process img
{
  object-fit: contain;
  width: 100%;
  height: auto;
}

.home-process > img 
{
  width: 25%;
}

.home-process ul
{
  display: flex;
  flex-wrap: wrap;

  list-style: none;
}

.home-process li > img
{
  width: 25%;
}
*/