body > main {
    display: flex;
    flex-direction: column;
    justify-items: center;
    font-family: 'Roboto', sans-serif;
}

body > main > header {
    max-width: 1075px;
    margin:1rem auto;
}

#shopping-basket-section > header > h1 {
    text-align: center;
}

#shopping-basket {
    margin:1rem auto;
    display: flex;
    flex-direction: column;
    background-color: var(--light-neutral);
    padding:1rem;
    border-radius: 0.5rem;
}


.shopping-basket-item {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 0.5rem;
    padding:1rem 0.5rem;
    border-bottom:1px solid #ccc;
}

.shopping-basket-cover-area img {
    max-width: 100px;
}

.shopping-basket-metadata-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.shopping-basket-metadata-area > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shopping-basket-metadata-area > div > span:first-child {
    font-size:1.2rem;
    font-weight: bold;
}
.shopping-basket-metadata-area > div > span:nth-child(2) {
    font-size:1rem;
    color:#555;
}

.shopping-basket-item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.shopping-basket-item.removed {
    grid-template-columns: 1fr;
}

.shopping-basket-price-area > span {
    font-weight: bold;
    font-size:1.2rem;
}
.shopping-basket-price-area.flex {
    width: calc(100% - 1rem);
    display: inline-block;
    position: relative;
    left: -.5rem;
}


.shopping-basket-price-area.archived {
    color: #d0342c;
}

#subtotal {
    display: flex;
    justify-content: space-between;
    padding:1rem;
    font-size:1.5rem;
    border-bottom:1px solid #ccc;
}

#subtotal span:last-child {
    font-weight: bold;
}

#basket-footer-buttons {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    align-items: center;
}

.shopping-basket-removed-ui {
    display: flex;
    justify-content: space-between;
    background-color: #EEE;
    padding:0.5rem;
}

.shopping-basket-removed-ui span:first-child span:first-child {
    font-style: italic;
}

.item-price {
    position: relative;
}

.item-price > div {
    display: flex;
    align-items: center;
}

.item-price.increased::after {
    content: 'Price has increased';
    position: absolute;
    left: 0;
    top: 1.2rem;
    font-size: small;
    color: #d0342c;
    padding: 0.25rem;
}

.item-price.decreased::after {
    content: 'Price has decreased';
    position: absolute;
    left: 0;
    top: 1.2rem;
    font-size: small;
    color: #5cb85c;
    padding: 0.25rem;
}

.flex-input {
    width:100%
}

.flex-hint {
  display: block;
  font-size: 0.75rem;
  color: #555;
  margin-top: .5rem;
}

.flex-price-label {
    font-size: 0.8rem;
}