#scroll_box {
	padding:0;
	margin:0;
}
#scroll_container {
	background:#F0ECE5;/*Tan Bkg #E6E0D5*/
	/*border:1px solid #CCC;*/
	display: flex; 
	align-items: center; 
	gap: 10px;
	-moz-appearance:none;	
	-webkit-appearance:none;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}
.scroller {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    gap: 10px;
    padding: 10px;
    /*width: 500px;*/ /* Adjust the width to fit your layout */
    white-space: nowrap; /* Prevent wrapping */
    scroll-behavior: smooth; /* Enables smooth scrolling */
    /* Hide scrollbar */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer */
}

.scroller::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Edge */
}
.scroller img {
	width: 107px;
	height: 125px;
	cursor: pointer;
}
.ORGplaceholder-box {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(4, 1fr); /* 4 columns across */
    grid-gap: 20px; /* Space between rows and columns */
    margin-top: 20px;
    justify-content: center; /* Centers the grid horizontally */
    align-items: center; /* Centers items vertically */
    width: fit-content; /* Shrink-wraps the content to avoid spanning full width */
    margin: 0 auto; /* Centers the entire .placeholder-box within its parent */
}

.placeholder-box {
    display: grid; /* Grid layout for 2 rows, 4 columns */
    grid-template-columns: repeat(4, 1fr); /* 4 columns across */
    row-gap: 50px; /* Space between rows */
    column-gap: 20px; /* Space between columns */
    margin-top: 10px;
    justify-content: center; /* Centers the grid horizontally */
    align-items: center; /* Ensures vertical centering (if necessary) */
    width: fit-content; /* Shrink-wraps the content to avoid spanning full width */
    margin: 0 auto; /* Centers the entire .placeholder-box within its parent */
}


.placeholder {
    position: relative;
    width: 150px;/*107px*/
    height: 150px;/*125px*/
    background: #FFF;
    border: 1px dashed #E6E0D5; /* Default light gray */
    border-radius: 12px;
    padding: 5px;
    transition: border-color 0.3s ease-in-out; /* Smooth transition for border changes */
	text-align:center;
}
.placeholder.active {
    border-color: #512C1E; /* Brown border for active placeholders */
}
.placeholder img {
	width: 107px;
	height: 125px;
}
.remove-btn {
	position: absolute;
	top: 5px;
	left: 5px;
	display: none;
	cursor: pointer;
	color:#512C1E;
	font-weight:bold;
}
.placeholder img:not([src="/shop/img/build/spacer.gif"]) ~ .remove-btn {
	display: block;
}

.placeholder .name {
    display: block; /* Makes the name visible */
    text-align: center; /* Centers the name text */
    font-size: 14px; /* Adjust font size */
    color: #512C1E; /* Match the brown border color for consistency */
    margin-top:15px; /* Adds space between the image and the name */
}

@media screen and (max-width:991.98px) {	
	.placeholder-box {
		display: grid; /* Use grid layout */
		grid-template-columns: repeat(2, 1fr); /* 4 columns across */
		grid-gap: 20px; /* Space between rows and columns */
		margin-top: 20px;
		justify-content: center; /* Centers the grid horizontally */
		align-items: center; /* Centers items vertically */
		width: fit-content; /* Shrink-wraps the content to avoid spanning full width */
		margin: 0 auto; /* Centers the entire .placeholder-box within its parent */
	}
}