@charset "UTF-8";
/* Buttons, forms, swatches */

/*colors

darkgreen #615A2E
lightgreen #AAC299

black #382612
tan #E5C8A5
cream #F8E4CC
white #FEFBFA

salmon #DA6B59
yellow #FFCA69

*/




/* Buttons */
.button {
	color: #382612;
	background-color: #F8E4CC;
	border: 1px solid #382612;
	border-radius: 50px;
	padding: 8px 5px 12px 5px;
	cursor: pointer;
	font-family: "josefin-sans", sans-serif;
	font-weight: 600; /* semi */
	font-style: normal;
	font-size: 16px;
	min-width: 160px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.button:hover {
	color: #382612;
	background-color: #E5C8A5;
}

.button:active {
	color: #382612;
	background-color: #AAC299;
}

.invis{
	color: #382612;
	background-color: rgba(248,228,204,0);
	border: 1px solid #382612;
}

.invis:hover{
	background-color: #F8E4CC
}

.qty-input {
    width: 90px;
	border: 0;
	border-bottom: 1px solid #382612;
	border-radius: 0
}

.swatch.selected{
	border-color: #382612
}

.size-btn {
    background: #fff;
    border: 1px solid #E5C8A5;
    padding: 6px 6px;
    border-radius: 25px;
    cursor: pointer;
	font-family: "josefin-sans", sans-serif;
	font-weight: 400; /* regular */
	font-style: normal;
	font-size: 14px;
	width:40px;
	height:40px;
	flex-shrink: 0;
}

.size-btn.active,
.size-btn:hover {
    background-color: #F8E4CC;
}


/* The hover button styling */
.hover-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
    z-index: 5;
}

.item-img-wrapper:hover .hover-btn {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px); /* optional slide-up */
}



.form-select {
	color: #382612;
	background-color: #FEFBFA; 
	border: 1px solid #382612;
	border-radius: 50px;
	padding: 8px 5px 12px 15px;
	cursor: pointer;
	font-family: "josefin-sans", sans-serif;
	font-weight: 600; /* semi */
	font-style: normal;
	font-size: 16px;
	max-width: 220px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.form-select:hover {
	color: #382612;
	background-color: #F8E4CC;
}


.share-btn + .list-btn{
	max-width: 10px
}


.swatch{
	height:25px;
	width:25px;
	border: #F8E4CC solid 1px;
	border-radius: 50%;
	margin-left:9px;
	flex-shrink: 0;
}

.brown{
	 background-color: #382612
}

.dgreen{
	background-color: #615A2E
}
.lgreen{
	background-color: #AAC299
}

.black{
	background-color: #382612
}

.tan{
	background-color: #E5C8A5
}

.cream{
	background-color: #F8E4CC
}

.white{
	background-color: #FEFBFA
}

.grey{
	background-color: #535353
}

.silver{
	background-color: #A0A6A2
}

.gold{
	background-color: #EBCD75
}

.rose{
	background-color: #E7B194
}

.burgundy{
	background-color: #88052A
}

.pink{
	background-color: #EB6861
}

.yellow{
	background-color: #FFCA69
}

.green{
	background-color: #689A33
}

.teal{
	background-color: #05A3C9
}

.blue{
	background-color: #417ED5
}