
.basket-container {
	max-width: 1200px;
	margin: 0 auto;
}
.basket-title {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #c4c6bd;
}

.basket-nav {
	margin: 0 0 0 10px;
}

.basket-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  border-bottom: 1px solid #c4c6bd;
  gap: 20px;
	background-color: #191919;
	transition: background-color 0.6s ease;
}

.basket-item:first-of-type {
  border-top: 1px solid #c4c6bd;
}


.basket-item:first-child {
  border-top: 1px solid #c4c6bd;
}

.basket-empty-message {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1.2rem;
  color: #c4c6bd;
}

.basket-empty-message h2 {
  margin-bottom: 1rem;
}




.basket-product-thumb {
	margin: 0 0 0 10px;
	padding: 0; /* start with no left padding */
	/* background-color: pink; */
	flex-shrink: 0;
	transition: padding-left 0.3s ease;
}

.basket-product-thumb img {
	max-height: 90px; 
	margin: 10px 0 5px 0;
	padding: 0;
}

.basket-product-info {
	margin: auto 0;
	padding: 0;
	vertical-align: top;
	flex-grow: 1;
}

.basket-item h3 {
font-size: 2.6rem;
line-height: 0.9;
color: #c4c6bd;
	margin: 5px 0 0 0;
	padding: 0;
}

.basket-item p {
/* font-size: 1rem; */
color: #c4c6bd;
	margin: 0;
	padding: 0 0 10px 0;
}

.basket-controls {
	/* background-color: #333; */
	min-width: 200px;
	text-align: right;
	margin: auto 20px auto 0;
	padding: 0; /* start with no right padding */
	transition: padding-right 0.3s ease;
}

.basket-control {
	/* background-color: #333; */
	min-width: 200px;
	text-align: right;
	margin: 0 20px 20px 0;
	padding: 0; /* start with no right padding */
}

.basket-item:hover {
	background-color: #c4c6bd;
}

.basket-item:hover h3,
.basket-item:hover p {
	color: #191919;
}


.basket-item:hover .basket-product-thumb {
	padding-left: 10px;
}

.basket-item:hover .basket-controls {
	padding-right: 10px;
}


.basket-total-pay {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align children to the right */
  margin: 20px 0 0 0;
  padding: 0;
}


.total-info {
	display: block;
	text-align: right;
	color: #c4c6bd;
	width: 200px;
	padding: 0; /* start with no right padding */
	border-bottom: 1px solid #c4c6bd;
}


.basket-controls form {
display: inline;
}
.basket-actions form {
display: inline;
}

.delivery-options {
  margin: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 300px;
}

#delivery-select {
  padding: 10px 12px;
  font-family: 'Monument Grotesk', sans-serif;
  font-size: 1rem;
  background-color: #191919;
  color: #dcdfd6;
  border: 1px solid #c4c6bd50;
  border-radius: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23dcdfd6'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'6%209%2012%2015%2018%209'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1rem;
  cursor: pointer;
}

#delivery-select:focus {
  outline: none;
  border-color: #f4f7f0;
}

#delivery-message a {
  /* font-weight: bold; */
}






@media (max-width: 900px) {
	
.basket-container {
	width: 100%;
}	
	
.basket-product-thumb,
.basket-product-thumb img {
display: none;
}
	
.basket-item {
padding: 10px;
    flex-direction: column;
    align-items: stretch;
  }
	.basket-control { margin-right: 10px; }	
	.basket-product-info {width:100%; margin: 0;}
	.basket-controls {min-width:0; width:100%;}
	.basket-item h3 {font-size: 2rem;}
	.basket-item p {font-size: 1rem;}
	.basket-item:hover .basket-product-thumb { padding-left: 0; }
	.basket-item:hover .basket-controls { padding-right: 0; }
	.total-info {margin-right:10px;}
	.add-to-basket-btn {margin-right: 10px;	}

}
