/* ==========================================================================
Anchors
========================================================================== */

html { scroll-behavior: smooth; }

/* align anchor point below sticky header */
.block.anchor { 
	padding-top: 110px;
	margin-top: -110px;
}
@media (min-width: 768px){
	.block.anchor { 
		padding-top: 130px;
		margin-top: -130px;
	}
}

/* ==========================================================================
Splide
========================================================================== */

button.splide__arrow--prev, 
button.splide__arrow--next {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	transition: opacity .15s ease-in;
	top: 0;
	bottom: 0;
	margin: auto;
	font-size: var(--space_3);
	cursor: pointer;
	border: 0;
	user-select: none;
	outline: 0;
	position: absolute;
	z-index: 2;
	text-decoration: none;
	opacity: 1;
	background-color: transparent;
	padding: 0 var(--space_2);
}
button.splide__arrow--prev { 
	left: 0;
	right: auto; 
}
button.splide__arrow--next { 
	left: auto;
	right: 0; 
}
button.splide__arrow--prev:focus, 
button.splide__arrow--next:focus {
	outline: none;
}
button.splide__arrow--prev[disabled],
button.splide__arrow--next[disabled] {
	opacity: 0;
}

/* ==========================================================================
Image Ratios
========================================================================== */

/**
* Hero
*/
#ratio--hero { padding-top: 45.57%; }
@media (min-width: 768px) {
	#ratio--hero { padding-top: 48.06%; }
}

/**
* Monogramming
*/
#ratio--monogramming { padding-top: 72.84%; }
@media (min-width: 768px) {
	#ratio--monogramming { padding-top: 50.69%; }
}

#splide--monogramming .ratio { padding-top: 62.50%; }

/**
* Embroidery
*/
#ratio--embroidery { padding-top: 62.99%; }
@media (min-width: 768px) {
	#ratio--embroidery { padding-top: 39.89%; }
}

/**
* Accessories
*/
#ratio--accessories { padding-top: 62.84%; }
@media (min-width: 768px) {
	#ratio--accessories { padding-top: 65.20%; }
}

/**
* Thread Colors
*/
#ratio--thread-colors { padding-top: 31.64%; }
@media (min-width: 768px) {
	#ratio--thread-colors { padding-top: 65.20%; }
}

/**
* Towels
*/
#ratio--towels { padding-top: 62.84%; }
@media (min-width: 768px) {
	#ratio--towels { padding-top: 39.92%; }
}

/* ==========================================================================
Hero
========================================================================== */

#block--hero:after {
    content: ' ';
    width: 50px;
    height: 3px;
    background-color: var(--charcoal);
    display: block;
    margin: var(--space_3) auto var(--space_2);
}
@media (min-width: 768px) {
	#block--hero:after { content: none; }
}

/* ==========================================================================
Monogramming and Embroidery
========================================================================== */

#splide--monogramming,
#splide--embroidery {
	margin: 0 -8px;
}
@media (min-width: 768px) {
	#splide--monogramming,
	#splide--embroidery {
		margin: 0 -16px;
	}
}

#splide--monogramming .splide__label.d--flex {
	height: 46px;
    align-items: center;
    justify-content: center;
}
@media (min-width: 576px) {
	#splide--monogramming .splide__label.d--flex {
		height: auto;
	}
}

/* ==========================================================================
Products
========================================================================== */

#block--products .d--grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (min-width: 992px){
	#block--products .d--grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

#grid-col__kids { 
	padding-left: 33.333%;
	order: 5; 
}
@media (min-width: 992px) {
	#grid-col__kids { padding-left: 0; }
}