:root {
    --titlefont: Rubik Mono One;
    --bodyfont: Bebas Neue;



	--page-title: 2rem;
	--section-title: 1.75rem;
	--section-body: 1rem;
	--value-title: 1.5rem;
	--value-body: 1rem;



    --fontwhite90: #ffffffe0;
    --fontwhite80: #ffffffbb;
    --fontwhite70: #ffffff97;
    --fontwhite50: #ffffff55;





    --primCol: #7E47D1;
    --secCol: #63E9BA;
    --dmbgCol: #121212;
    --dmsurColOne: #232323;
    --dmsurColTwo: #343434;
    --dmsurColThr: #454545;
    --dmsurColFou: #565656;
    --dmerrorCol: #CF6679;
	--dmwarnCol: #CF8540;
	--dmcautCol: #CFCD66;

    --lmerrorCol: #B00020;
}



html, body, body>.page {
  height: 100%;
}



body {
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
}

section {
	margin-top: 2rem; 
}

.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--dmbgCol);
}

.maincontainer {
	margin-top: 56px;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.maincontentcontainer {
	width: 60%;
  
	display: flex;
	flex-direction: column;
	align-items: center;
}





/* sections */
.section-divider {
	height: 0.2rem;
	min-height: 0.2rem;
	width: 100%;
	background-color: var(--dmsurColTwo);
	margin: 2rem 0;
	border-radius: 1rem;
}





/* text */
.page-title {
	font-family: var(--titlefont);
	font-size: var(--page-title);

	color: var(--fontwhite90);
}

.section-title {
	margin: 1rem 0;

	font-family: var(--titlefont);
	font-size: var(--section-title);

	color: var(--fontwhite90);
}

.section-body {
	margin-top: 1rem;
  
	font-family: var(--bodyfont);
	font-size: var(--section-body);

	color: var(--fontwhite90);

	word-spacing: 0.1rem;
	letter-spacing: 0.01rem;
}

.value-title {
	font-family: var(--titlefont);
	font-size: var(--value-title);

	color: var(--fontwhite90);
}

.value-body {
	margin-top: 1rem;

	font-family: var(--bodyfont);
	font-size: var(--value-body);

	color: var(--fontwhite90);

	word-spacing: 0.1rem;
	letter-spacing: 0.01rem;
}

.cart-checkout {
	font-family: var(--bodyfont);
	font-size: var(--value-title);
}

.remove-button {
	color: var(--primCol);
	background-color: transparent;
	border: none;
	font-family: var(--bodyfont);
	font-size: 1.2rem;
}

















.cart-item-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.cart-item-row {
	margin: 2rem 0;
	display: flex;
	flex-direction: row;
	width: 80%;
}

.cart-item {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.cart-item-image-wrapper {
	height: 8rem;
}

.cart-item-image {
	width: auto;
	height: 100%;
	margin-right: 2rem;
}

.cart-item-info-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
}

.cart-item-info-name {
	width: 50%;
}

.cart-item-amount-container {
	display: flex;
	flex-direction: column;
	align-items: end;
}

.cart-item-info-name, .cart-item-amount {
	font-family: var(--bodyfont);
	font-size: 1.8rem;
	color: var(--fontwhite80);
}





.disclaimer {
	font-family: var(--bodyfont);
	color: var(--dmtextColDIS);
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	letter-spacing: 0.01rem;
	word-spacing: 0.06rem;
	display: flex;
}





.cart-item-quantity {
	width: 2.5rem;
	padding: 0.6rem;
	font-size: 1rem;
	color: var(--dmtextColHME);
	background-color: var(--dmsurColTwo);
	border: none;
	border-radius: 1rem;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	position: relative;
	text-align: center;
	font-family: var(--bodyfont);
}

/* Custom dropdown arrow */
.cart-item-quantity::after {
        content: '▼'; /* Unicode character for a down arrow */
        font-size: 12px;
        color: #777;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Arrow should not block click events */
}

    /* Option styling */
    .cart-item-quantity option {
        background-color: #fff;
        color: #444;
        padding: 5px;
        font-size: 16px;
    }

    /* Hover effect for options */
    .cart-item-quantity option:hover {
        background-color: #ddd;
    }

    /* Selected option styling */
    .cart-item-quantity option:checked {
        background-color: #ccc;
    }
























@media (max-width: 800px) {
    .cart-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
  
    .cart-item-image {
        width: auto;
        height: 100%;
        margin-right: 0;
    }
  
    .cart-item-info-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
    }
  
    .cart-item-info-name, .cart-item-amount {
        font-family: var(--bodyfont);
        font-size: 1.8rem;
        color: var(--fontwhite80);
        text-wrap: balance;
    }
}