/* Grid */
.grid-sizer {
	display:none;
}
	.loop {
		position:relative;
		overflow:hidden;
		box-sizing: border-box;

	}

		.post-image {
			position: absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;
			z-index:3;
		}
		.post-over {
			background:var(--grey);
			color: #c8c8c8;
			padding: 3px;
			font-size: 0.78rem;
			line-height:1rem;
			opacity: 0.8;
			position:absolute;
			bottom: 0;
			left:0;
			right:0;
			z-index:4;
			text-align:center;
		}
		@media all and (max-width:768px) {
			.apost a .post-over {
				display: -webkit-box;
				line-clamp: 2;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		@media all and (min-width:1025px) {

			.apost a .post-over {
				max-height:1px;
				padding:0 15px;
				transition:max-height  0.5s;
				opacity:0;
				padding: 10px 15px;
			}
			.apost a:hover .post-over {
				max-height:50px;
				padding: 10px 15px;
				opacity:0.8;
				transition:max-height 0.5s
			}
		}

		.apost img, .loop-feature-post img {
			object-fit:cover;
			width:100%;
			height:100%;
			box-sizing: border-box;
		}




/* ads */
#grid .goa, #grid .featloop {
	padding: var(--standard-padding);
	align-self:center;

}
	.goa p, .featloop p {
		margin: 0.5rem 0;
	}
	.goa p:first-child, .featloop p:first-child{
		text-transform: uppercase;
		color:var(--ucheadingcolor);
		margin: 0 0 var(--standard-padding) 0;
		font-weight:bold;
		padding:0;
		text-align:center;
	}
	@media all and (max-width:585px) {
		#grid .goa, #grid .featloop{
			margin: 0 var(--neg-standard-padding);
			max-height: none;
		}
	}

/* Feature loop */
.featloop {
	align-self:center;
}
.featloop p:first-child{ 
	margin-bottom:0.5rem;
}
.featloop .featloop-text {
	background:var(--grey);
	padding: var(--small-padding);
	color:var(--lightpink);
	margin:0;
}
.loop-feature-post , .loop-feature-post a{ 
	position:relative;
	display:block;
	overflow:hidden;
	width:100%;
	height:100%;
}
	#pagewrap .loop-feature-post img {
		margin: 0;
		position:relative;
		z-index:4;
	}
	.loop-feature-title {
		position:absolute;
		z-index:5;
		bottom:0;
		right:0;
		border-radius: 0;
		left: 0;
		background: var(--darkblue);
		color:#fff;
		padding: 0.5rem;
		font-size:0.78rem;
		text-align:center;
		}
		.loop-feature-title:after {
			content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
			margin: 0 3px 0 5px;
			display:inline-block; 
			filter: brightness(0) invert(1);
		}

	@media all and (min-width:1100px) {
		.loop-feature-title {
			padding: 0.5rem 1rem;
			bottom:0;
			transition:bottom 0.2s, opacity 0.5s;
			font-size:0.78rem;
			line-height:1rem;
	}
		.loop-feature-post a:hover .loop-feature-title {
			transition:opacity 0.5s;
			opacity:1;
		}
		.loop-feature-post a:hover .loop-feature-title  {
			background:var(--pink);
			transition:background 0.2s;
		}
		.loop-feature-post img {
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
			-webkit-transition: .2s ease-in-out;
			transition: .2s ease-in-out;
		}
		.loop-feature-post a:hover img {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
		}
	}


/* Grid and Ad placements */
	/* Default, mobile */
#grid {
	margin: 15px 0;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(30vw, auto);  
	grid-gap: 15px;
}
	#grid.item-view {
		grid-template-columns: 1fr;
	}
		.apost {
			height:44vw;
			border-radius:8px;
			overflow:hidden;
		}

		.break-wrap {
			grid-column-start: 2;
			grid-column-end: 3;
			grid-row-start: 5;
			grid-row-end: 9;
		}	
		.goa-1 {
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 3;
			grid-row-end: 4;
		}
		.goa-2 {
			grid-column-start: 1;
			grid-column-end:3;
			grid-row-start: 11;
			grid-row-end: 12;
		}
		.goa-3 {
			grid-column-start: 1;
			grid-column-end:3;
			grid-row-start: 21;
			grid-row-end: 22;
		}
		.featloop {
			grid-column-start: 1;
			grid-column-end:3;
			grid-row-start: 15;
			grid-row-end: 16;
		}
	
	/* Mid */
	@media all and (min-width:586px) and (max-width:1099px) {
		#grid {
			grid-template-columns:1fr 1fr 1fr ;
			grid-auto-rows: minmax(30vw, auto);  
			grid-gap: 30px;
		}
			#grid.item-view {
				grid-template-columns: 1fr 1fr ;
			}

			.apost {
				height:30vw;
			}

		.break-wrap {
			grid-column-start: 3;
			grid-column-end: 3;
			grid-row-start: 2;
			grid-row-end: 5;
		}	
		.goa-1 {
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 5;
			grid-row-end: 7;
		}
		.goa-2 {
			grid-column-start: 2;
			grid-column-end:4;
			grid-row-start: 11;
			grid-row-end: 13;
		}
		.goa-3 {
			grid-column-start: 1;
			grid-column-end:3;
			grid-row-start: 14;
			grid-row-end: 16;
		}
		.featloop {
			grid-column-start: 1;
			grid-column-end:3;
			grid-row-start: 8;
			grid-row-end:10;
		}
	}


	/* Large  */
	@media all and (min-width:1100px) and (max-width:1329px) {
		#grid {
			grid-template-columns:1fr 1fr 1fr 1fr;
			grid-auto-rows: 300px;  
			grid-gap: 30px;
		}
			#grid.item-view {
				grid-template-columns: 1fr 1fr 1fr;
			}

			.apost {
				height:300px;
			}
	}

	/* Very large */
	@media all and (min-width:1330px) {
		#grid {
			grid-template-columns:1fr 1fr 1fr 1fr;
			grid-auto-rows: 350px;  
			grid-gap: 30px;
		}
			#grid.item-view {
				grid-template-columns: 1fr 1fr 1fr 1fr;
			}
			#grid.item-view .item-view-ad {
				grid-column: 1 / -1;
			}
			.apost {
				height:350px;
			}
	}


	/* Large / Very Large */
	@media all and (min-width:1100px) {
		.break-wrap {
			grid-column-start: 4;
			grid-column-end: 4;
			grid-row-start: 2;
			grid-row-end: 4;
		}	
		.goa-1 {
			grid-column-start: 2;
			grid-column-end: 2;
			grid-row-start: 2;
			grid-row-end: 2;
		}
		.goa-2 {
			grid-column-start: 1;
			grid-column-end:2;
			grid-row-start: 4;
			grid-row-end: 4;
		}
		.goa-3 {
			grid-column-start: 4;
			grid-column-end:4;
			grid-row-start: 9;
			grid-row-end: 9;
			display:block;
		}
		.featloop {
			grid-column-start: 1;
			grid-column-end:2;
			grid-row-start: 6;
			grid-row-end: 8;
		}
	}
	

/* Breaks */
.break-wrap {
	border:0;
	align-self: center;
}
.break {
	//background:var(--beige);
	//border: 2px solid var(--grey);
}
.break-title {
	background:#353535;
	padding: 5px;
	text-align:center;
	border-radius:8px;
}
.break-title img {
	display:none;
	vertical-align:middle;
	margin: -6px 15px 0 0;
}
.break-title-text {
	text-transform:uppercase;
	font-weight:bold;
	color:var(--lightpink);
	display:inline-block;
	font-size:16px;
	line-height:auto;
	text-align:center;
}
	.break-title-highlight {
		color:var(--lightblue);
		display:block;
	}
.break .products-wrap {
	margin: 0 5px;
}
.break .product-item-image   {
	width:100%;
	margin-left:  auto;
	margin-right: auto;
	border-radius: 8px 8px 0 0;
}

@media all and (max-width:584px) { 
	.break .products-wrap .product-item  {
		display:none;
	}
	.break .products-wrap .product-item:nth-child(1) ,  .break .products-wrap .product-item:nth-child(2),  .break .products-wrap .product-item:nth-child(3) {
		display:block;
	}
}
	@media all and (min-width:585px) and (max-width:1099px) {
		#pagewrap .break  .product-item-image img, .break .product-item-image {
			height: 220px;
		}
		.break .products-wrap .product-item  {
			display:none;
		}
		.break .products-wrap .product-item:nth-child(1) ,  .break .products-wrap .product-item:nth-child(2) {
			display:block;
		}
	}
	@media all and (min-width:1100px) {
		#pagewrap .break  .product-item-image img {
			height: 220px;
		}
		.break .product-item-image {
			height:210px;
		}
		.break-title img {
			display:inline-block;
		}
		.break-title-text	{
			line-height:20px;
			text-align:left;
		}
		.break-title {
			padding: 10px;
		}
		.break-title-highlight { 
			display:inline;
		}
		.break .products-wrap {
			margin: 15px 0;
		}
	}
















/* Pagination */
.pagination {
	text-align:center;
    padding: 2rem var(--standard-padding) 1rem var(--standard-padding);
	margin: 1rem 0;
	max-width:100%;
	overflow:hidden;
}
	.pagination ul {
		list-style: none;
		display:flex;
		flex-wrap:nowrap;
		justify-content: center;
		align-items:baseline;
	}
	.pagination li {
		flex: 0 1 2.5rem;
		position:relative;
		display:block;
		height:2.6rem;
		margin: 0 0.2rem;
	}
	.pagination li.pagination-gap {
		flex: 0 0 0;
		align-self:baseline;
		display:flex;
		opacity:0.5;
	}
	.pagination li.pagination-next, .pagination li.pagination-prev {
		flex: 1 1 3rem;
		text-align:left;
	}
	.pagination li.pagination-next {
		text-align:right;
	}
	.pagination li.pagination-first, .pagination li.pagination-last {
		display:none;
	}
	.pagination a {
		color:var(--grey);
		border:0;
		text-decoration:none;
		font-size:1rem;
		display:inline-block;
		width:100%;
		box-sizing:border-box;
		padding: var(--small-padding) ;
		border-radius:200%;
		white-space:nowrap;
	}
	.pagination .active a {
		background:var(--beige);
		border-radius:200%;
	}
	.pagination li.pagination-next a, .pagination li.pagination-prev a {
		text-transform:uppercase;
		//max-width:5rem;
		max-width:none;
	}
	.pagination li.pagination-prev a {
		padding: var(--small-padding) 1rem;
		border-radius:2em 0 0 2rem;
		text-align:left;
	}
	.pagination li.pagination-next a {
		padding: var(--small-padding)  1rem ;
		border-radius: 0 2rem 2rem 0;
		text-align:right;
		
	}

	.pagination a {
			transition-property: background-color;  
  			transition-duration:0.3s;
			transition-timing-function: ease-out;
}
	@media all and (min-width: 769px) {

		.pagination {
			margin: 2.2rem auto 1rem auto;
		}
		.pagination ul {
			gap:var(--small-padding);
		}
		.pagination li {
			margin: 0;
		}
		.pagination li.pagination-first, .pagination li.pagination-last {
			display:block;
		}

		.pagination a:hover {
			background:var(--pink);
			color:#fff;
			transition-property: background-color,color;  
			transition-duration:0.2s;
			transition-timing-function: ease-out;
		}

	}
/* End Pagination */






/* Its being weird between these sizes */
@media all and (min-width:1100px) and (max-width:1509px) { 
	.break-wrap { display:none; }
}









#grid {
    position: relative;
}
#grid.loading::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 5px solid var(--grey);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    z-index: 100;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.item-type-dropdown .disabled, .item-store-dropdown .disabled {
	display:block;
	padding:.6rem .88rem;
	opacity:.35;
	cursor:default;
	user-select:none;
}
.item-type-dropdown .count, .item-store-dropdown .count {
	opacity:.55;
	font-size:.9em;
}


#item-bar {
	z-index:10;
}
.search-within-cat{
	margin-top:var(--small-padding);
	display:none;
}
	@media all and (min-width:800px) {
		#item-bar .constrain {
			display:flex;
			align-items:center;
			justify-content:flex-start;
			gap:20px;
		}
		.search-within-cat{
			margin-left:auto;
			margin-top: 0;
			display:block;
			}
	}
.search-within-cat form{
	display:flex;
	align-items:stretch;
}
.search-within-cat label {
	font-size:0.88rem;
	font-style:italic;
	padding-top:5px;
	padding-right: 10px;
	}
#pagewrap .search-within-cat input {
	border:0;
	background:var(--lightgrey);
	font-size:0.88rem;
	color:#fff;
   border-radius: 0.4rem 0 0 0.4rem ;
}
#pagewrap .search-within-cat input.search-within-submit {
	cursor: pointer;
   background: var(--lightgrey) url(/dottv/cdn2/images/icon-search.svg) no-repeat center;
   width: 40px;
   flex: 0 0 40px;
   z-index: 104;
   text-indent: 140px;
   box-sizing: content-box;
   font-size: 1px;
   padding: 0;
   border-radius: 0 0.4rem 0.4rem 0;
		transition: background-color 0.2s;
	}
.item-type-wrap, .item-bar-filter-item, .item-store-wrap {
	position:relative;
	display:inline-block;
	background:var(--grey);
	border-radius:5px;
	font-size:0.88rem;
}
	.item-type-wrap button, .item-bar-filter-item button, .item-bar-filter-item a, .item-store-wrap button{
		color:#fff;
		text-transform:uppercase;
		cursor:pointer;
		padding: 0.4rem 0.7rem;
		display:flex;
		justify-content:flex-start;
		align-items:center;
		text-decoration: none;
		width:100%;
	}

	.item-type-wrap .selected-type, .item-store-wrap .selected-store  {
		font-style:italic;
		color:#9a9a9a;	
		text-transform:none;
		padding: 0 0 0 20px;
	} 
	.item-type-wrap .selected-type .item-select-remove {
		font-style:normal;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		vertical-align:middle;
		position:relative;
		top:-1px;
		width:15px;
		height:15px;
		margin-left:2px;
		border-radius:50%;
		background:#e1e1df;
		font-size:11px;
		line-height:1;
		color:var(--grey);
		font-weight:bold;
		cursor:pointer;
		padding-bottom:1px;
		opacity: 0.4;
		transition:opacity 0.3s;
	}
		@media all and (min-width:800px) {
			.item-type-wrap .selected-type .item-select-remove:hover {
				opacity:1;
			}
			#pagewrap .search-within-cat input.search-within-submit:hover {
				background-color:var(--lightergrey);
			}
			.item-type-wrap {
				min-width:200px;
			}
		}
.item-type-dropdown , .item-store-dropdown {
	display:flex;
	position:absolute;
	z-index:10000;
	top:100%;
	left:0;
	right:0;
	background:var(--grey);
	color:#fff;
	border-radius: 0 0 5px 5px;	
	margin-top:-5px;
	padding-top:5px;
	overflow:hidden;
	opacity:0;
	visibility: hidden;
	transform:translateY(6px);
	transition:		opacity .18s ease,		transform .18s ease,		visibility .18s;
	min-width:390px;
	border-radius:5px;
}
	.item-type-dropdown-col-1, .item-type-dropdown-col-2 {
		flex:1;
	}
	.item-type-wrap .item-type-dropdown.item-type-dropdown-open, .item-store-wrap .item-store-dropdown.item-store-dropdown-open{
		opacity:1;
		visibility:visible;
		transform:translateY(0);
	}
	@media all and (min-width:1301px) { 
		.item-type-wrap:hover .item-type-dropdown, .item-store-wrap:hover .item-store-dropdown{
			opacity:1;
			visibility:visible;
			transform:translateY(0);
		}
	}
	.item-type-dropdown a , .item-store-dropdown a{
		padding: 0.6rem 0.88rem 0.6rem 2rem;
		color:#fff;
		text-decoration:none;
		display:block;
		background-color:transparent;
		transition:background-color .5s;
	}
	@media all and (min-width:800px) {
			.item-type-dropdown a, .item-store-dropdown a {
				padding: 0.6rem 0.88rem;
			}
			.item-type-dropdown a:hover , .item-store-dropdown a:hover {
				background-color:var(--darkblue);
			}
		}
@media all and (max-width:800px) {
	#item-bar .constrain { 
			text-align:center;
	}
	.item-type-wrap button, .item-bar-filter-item button, .item-bar-filter-item a, .item-store-wrap button { 
		padding: 0.8rem 1rem;
	}
	.item-bar-filter-item a {
			padding: 0.8rem 0.8rem;
			width:auto;
	}
	.item-type-wrap, .item-store-wrap {
		display:block;
		margin-bottom:0.5rem;
	}
	.item-store-wrap {
			margin: 0.5rem 0 0 0;
	}
	.item-type-dropdown, .item-store-dropdown {
		position:relative;
		top:auto;
		left:auto;
		right:auto;
		min-width:1px;
		opacity:1;
		visibility:visible;
		transform:none;

		max-height:0;
		overflow:hidden;

		margin-top:0;
		padding-top:0;

		transition:max-height .3s ease;
		display:block;
		text-align:left;
	}

    .item-type-wrap .item-type-dropdown.item-type-dropdown-open,
    .item-store-wrap .item-store-dropdown.item-store-dropdown-open {
        max-height:500px;
    }

	.item-bar-filter-item {
		margin:0 3px;
	}

}

.item-checkbox {
	display:inline-block;
	background:#9a9a9a;
	width:15px;
	height:15px;
	border-radius:4px;
	margin: 0 0.6rem 0 0;
	position:relative;
}
.active .item-checkbox {
	background:#fff;
}
.item-bar-filter.active .item-checkbox::before,
.item-bar-filter.active .item-checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 2px;
    background: var(--pink);
    border-radius: 2px;
    transform-origin: center;
}

.item-bar-filter.active .item-checkbox::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.item-bar-filter.active .item-checkbox::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.item-bar-aff {
		width: 288px;
    position: relative;
    order: 2;
    min-width: 288px;
		margin-left:auto;
		margin-top: 0;
		display:block;
}
	.item-bar-aff span {
		display: block;
		font-size:var(--fontsize-mini);
    line-height: 1.3rem;
    padding: 0;
    background: transparent url(/dottv/cdn2/images/faded-hearts.png) no-repeat right center ;
	}
	.item-bar-aff span:before {
			content: "WornOnTV receives commission for purchases made through links on this website, which helps keep the website going.";
	}
	@media all and (max-width:954px) {
		.item-bar-aff {
			flex: 0 0 100%;
			margin: 1rem auto 0 auto;
		  width:auto;
		
		}
		.item-bar-aff span {
			max-width:288px;
			margin: 0 auto;
		}
		#item-bar .constrain {
			flex-wrap:wrap;
			justify-content: center;
		}
	}
.item-view-ad {
	text-align:center;
}
.item-view-ad-label {
	color:var(--lightestgrey);
	text-transform:uppercase;
	font-weight:bold;
	margin: 0 0 1rem 0;
}