/* General
-------------------------------------------------------------------------------------  */

.wprm-recipe-collections-layout-grid  input[type=checkbox],
.wprm-recipe-collections-layout-grid  input[type=radio]{
	accent-color: black;
	accent-color: var(--wp--preset--color--primary);
}


/* the collections header
-------------------------------------------------------------------------------------  */
.wprm-recipe-collections-layout-grid .wprmprc-container-header .wprmprc-container-header-name {
	font-size: var(--wp--preset--font-size--huge);
    line-height: var(--wp--custom--line-height--small);
	font-weight: 900;
}


/* the 'Your collections' link that shows after you click on a collection 
-------------------------------------------------------------------------------------  */
.wprm-recipe-collections-layout-grid .wprmprc-container-header .wprmprc-header-link {
}



/* the main view you see when first landing on recipe collections page that lists your collections
-------------------------------------------------------------------------------------  */
.wprm-recipe-collections-layout-grid .wprmprc-overview {
}


.site-container .wprm-recipe-collections-layout-grid .wprmprc-overview-grid-collection { /* the compressed view of a collection  before you click into it */
	padding: 12px 10px;
}

.site-container .wprm-recipe-collections-layout-grid .wprmprc-overview-grid-collection-images .wprmprc-overview-grid-collection-image img { /* the little thumbnail 'collage' thing */
	height: 50px;
}


/* Expanded collection (inside collections page) - everything inside a collection that isn't the main header, not the main overview, and not a shopping list 
-------------------------------------------------------------------------------------  */
#wprm-recipe-collections-app .wprmprc-collection .wprmprc-collection-header { /* the group header that will say like "Recipes" and have ellipses and a plus button */
	background-color: var(--wp--preset--color--octonary);
	padding: 12px 16px;
	border-bottom: none;
}

#wprm-recipe-collections-app .wprmprc-collection .wprmprc-collection-column-actions,
#wprm-recipe-collections-app .wprmprc-collection .wprmprc-collection-group-actions,
#wprm-recipe-collections-app .wprmprc-collection .wprmprc-collection-header-actions {
	opacity: 1;
}

/* each item in a collection with the recipe name and thumbnail and controls and servings */
#wprm-recipe-collections-app .wprmprc-collection-item {
	background: #fff;
	border: none;
	border-radius: var(--wp--custom--border-radius--tiny);
	box-shadow: var(--wp--custom--box-shadow--1);
	overflow: hidden;
	margin-bottom: var(--wp--custom--layout--block-gap);
}

#wprm-recipe-collections-app .wprmprc-collection-item .wprmprc-collection-item-main .wprmprc-collection-item-actions { /* the part on left you click on to drag recipes in collections */
	opacity: 1;
	background-color: var(--wp--preset--color--octonary);
}

#wprm-recipe-collections-app .wprmprc-collection-item .wprmprc-collection-item-details {
	align-items: center; 
}

#wprm-recipe-collections-app .wprmprc-collection-item .wprmprc-collection-item-main .wprmprc-collection-item-details .wprmprc-collection-item-meta {
	padding: 12px;
	font-size: var(--wp--preset--font-size--small);
    font-weight: 900;
    line-height: var(--wp--custom--line-height--tiny);
}


#wprm-recipe-collections-app .wprmprc-collection-item .wprmprc-collection-item-image {
	padding: 12px 16px;
}

#wprm-recipe-collections-app .wprmprc-collection-item .wprmprc-collection-item-image img {
	width: 110px;
}

#wprm-recipe-collections-app .wprmprc-collection-item .wprmprc-collection-item-servings {
    background: var(--wp--preset--color--quinary);
	opacity: 1;
	font-weight: 600;
	color: var(--wp--custom--color--dark);
	padding-top: 4px; 
	padding-bottom: 4px;
}

@media only screen and (max-width: 500px) {
	#wprm-recipe-collections-app .wprmprc-container-header {
		margin-bottom: 16px;
	}
}

@media only screen and (min-width: 501px) {

}

/* Expanded collection (outside collections page) - everything inside a collection that isn't the main header, not the main overview, and not a shopping list 
-------------------------------------------------------------------------------------  */
.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection {
	column-gap: var(--wp--custom--layout--column-gap);
	margin: 0 0 16px;
}

.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection .wprmprc-collection-column-width {
	margin: 0;
}

/* each item in a collection with the recipe name and thumbnail and controls and servings */
.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection-item {
	background: #fff;
	border: none;
	border-radius: var(--wp--custom--border-radius--tiny);
	box-shadow: var(--wp--custom--box-shadow--1);
	overflow: hidden;
	margin-bottom: var(--wp--custom--layout--block-gap);
}

.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection-item .wprmprc-collection-item-main .wprmprc-collection-item-details {
    flex-wrap: wrap;
	flex-direction: column-reverse;
}

.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection-item .wprmprc-collection-item-main .wprmprc-collection-item-details .wprmprc-collection-item-image {
	flex-shrink: 1;
	padding: 0;
	width: 100%;
}

.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection-item .wprmprc-collection-item-main .wprmprc-collection-item-details .wprmprc-collection-item-image img {
	width: 100%;
    border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	aspect-ratio: .7
}
.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection-item .wprmprc-collection-item-main .wprmprc-collection-item-details .wprmprc-collection-item-meta {
	padding: 12px;
	font-size: var(--wp--preset--font-size--small);
    font-weight: 900;
    line-height: var(--wp--custom--line-height--tiny);
	min-height: 57px
}

.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection-item .wprmprc-collection-item-servings {
    background: var(--wp--preset--color--quinary);
	opacity: 1;
	font-weight: 600;
	color: var(--wp--custom--color--dark);
	padding-top: 4px; 
	padding-bottom: 4px;
}

@media only screen and (max-width: 500px) {

	.single-post .wprm-recipe-collections-layout-grid .wprmprc-container-header {
		margin-bottom: 16px;
	}

	.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection .wprmprc-collection-column-width {
		flex-basis: calc( 50% - calc( var(--wp--custom--layout--column-gap)/2 ) );
	}

}

@media only screen and (min-width: 501px) {

	.single-post .wprm-recipe-collections-layout-grid .wprmprc-collection .wprmprc-collection-column-width {
		flex-basis: calc( 33.33% - calc( 2 * var(--wp--custom--layout--column-gap)/2 ) );
	}

}



/* Shopping List 
-------------------------------------------------------------------------------------  */
.site-container .wprm-recipe-collections-layout-grid .wprmprc-shopping-list {

}

.site-container .wprm-recipe-collections-layout-grid .wprmprc-shopping-list .wprmprc-shopping-list-collection-header {
	background-color: var(--wp--preset--color--octonary);
	padding: 12px 16px;
	border-bottom: none;
	margin-bottom: 16px;
}