/*
Theme Name: Jason Theme
Template: bootstrap-basic4
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Shadows+Into+Light&display=swap');

@import url( 'desktop-style.css' );

@import url( 'assets/css/tablet.css' );

@import url( 'assets/css/mobile.css' );
/* @import url( 'assets/css/tsmith.css' ); */


.hide {
	display: none;
}

#load-more-button {
	background: var( --our-lavender );
	color: white;
	cursor: pointer;
	margin-top: 3rem;
	max-width: 10rem;
}

.woocommerce .archive-featured-ingredient {
	object-fit: fill;
}

#archive-products-bottom .col-12:nth-child(2) {
	padding: 0;
}

/* for hero image h3 */
.archive .kfd-carousel-wrapper h3 {
	margin-left: auto;
	margin-right: auto;
	max-width: 70%;
}

#the-good-stuff-wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: calc( 10 * 275px );
	margin-bottom: 9rem;
}

.ingredient-tile:nth-child(even) {
	flex-direction: row-reverse;
}

/* /collections/ */
.collections h2  {
	padding: 0px;
	margin-bottom: -1rem;
	font-size: 22px;
	font-weight: 400;
}
.collections h2 a {
	color: var( --our-black );
}
.collections h5 a {
	font-size: 15px;
	color: var( --our-green-bg );
}

.collections .center.wp-block-column {
	padding-bottom: 3rem;
}

/* product single product */
.single-product .spn-btn:hover {
	color: white;
	background-color: var( --our-green-bg );
}



/* main men, mov imag to right align */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu .mega-kfd-img-column li.widget_media_image.mega-menu-item {
	text-align: right;
}

.about-mens .entry-content {
	background: var( --our-light-bg );
}

#mens-opening-text {
	max-width: 680px;
	margin: 0 auto;
	padding-bottom: 3rem;
}

.img-about-mens-logo {
	width: 250px;
}

.full-bleed-image {
	width: 100%;
	height: auto;
}
.full-bleed-image img {
	max-width: 100%;
	height: auto;
}


.about-mens .title-heading {
	padding-top: 5rem;
	font-size: 32px;
	color: var( --our-green-bg );
}

#mens-opening-text p {
	font-size: 18px;
	color: var( --our-black );
	font-weight: 500;
}


.about-mens #mens-discover-more {
	background: white;
	padding-bottom: 5rem;
}

	.discover-jason .insta-feed,
/* shop by collection */
.about-mens h3.our-green-color {
	padding: 5rem 0 8rem 0;
}

.about-mens h3.underbrow-heading {
	border: 1px solid var( --our-green-bg );
	font-size: 14px;
	padding: .75rem 2rem;
	display: inline-block;
	text-transform: uppercase;
	min-width: 202px;
}

.about-mens h3.underbrow-heading a {
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
}
.backgammon {
	--right-space: 95px;
	--left-space: 95px;
	--top-space: 65px;
	--bottom-space: 75px;

	position: relative;
}

.abs-border {
	position: absolute;
	top: var( --top-space );
	right: var( --right-space );
	border: 2px solid var( --our-light-bg );
	width: calc( 200% - 190px );
	height: calc( 100% - 140px );
}

.text-on-left .abs-border {
	z-index: 3;
	right: var( --right-space );
	left: var( --right-space );
	width: calc( 100% - 190px );
	max-width: 1206px;
}
.text-wrap {
	text-align: center;
	min-width: 350px;
	width: 32rem;
	padding: 2rem;
	margin-right: 3rem;
	color: var( --our-white );
	font-weight: bold;
	height: 100%;
}

#about-mens-backgammon2 .text-wrap {
	float: right;
}

.abs-border > .text-wrap {
	margin: 2rem;
}

.text-on-left .text-wrap {
	margin-top: 6rem;
}

.text-wrap .eyebrow {
	font-size: 15px;
	text-transform: uppercase;
}

.text-wrap .underbrow {
	font-size: 32px;
}
.text-wrap .ingredient-name {
	font-family: 'Shadows Into Light';
	font-size: 32px;
	color: var( --our-bright-green );
	padding: 3rem 0 3rem 0;
}

.ing-desc {
	max-width: 16rem;
	margin: 0 auto;
	line-height: 1.66;
}

.backgammon .col-md-6 {
	margin: 0;
	padding: 0;
}
.backgammon .col-md-6.our-green-bg {
	height: 698px;
	min-width: 400px;
}
.backgammon .img-half {
	height: 698px;
	max-height: 100vw;
	background-image: url( '/wp-content/uploads/2022/01/mens-marque-1366-768x768.jpg' );
	background-repeat: no-repeat;
	background-size: cover;
}

#about-mens-backgammon2 .img-half {
	background-image: url( '/wp-content/uploads/2022/01/mens-triumvirate-1366-768x768.jpg' );
}

#about-mens-backgammon3 .img-half {
	background-image: url( '/wp-content/uploads/2022/01/mens-pyramid-1366-768x768.jpg' );
}


.about-men .insta-feed {
	display: flex;
	justify-content: space-between;
	height: 260px;
	width: 1090px;
	margin: 0 auto;
	padding: 0;
	margin-bottom: 60px;
}

.about-mens .insta-feed li {
	list-style: none;
	display: inline-block;
	min-width: 260px;
	min-height: 260px;
	margin-right: 18px;
	background-image: url( 'assets/images/spa-man1-300.jpg' );
	background-size: cover;
	background-repeat: no-repeat;
}

.about-mens .insta-feed li:nth-child(2) {
	background-image: url( 'assets/images/spa-man2-300.jpg' );
}
.about-mens .insta-feed li:nth-child(3) {
	background-image: url( 'assets/images/spa-man3-300.jpg' );
}
.about-mens .insta-feed li:last-child {
	background-image: url( 'assets/images/spa-man4-300.jpg' );
	margin-right: 0px;
}

.about-mens #shop-essentials {
	background: white;
	padding-bottom: 8rem;
}
.about-mens #shop-essentials .flexor{
	justify-content: center;
}
.about-mens #shop-essentials h3 {
	padding-bottom: 2rem;
}
.about-mens #shop-essentials li {
	text-align: center;
	margin: auto;
	max-width: 400px;
	width: 400px;
}

.about-mens #shop-essentials .img-wrapper {
	overflow: visible;
	width: 100%;
	max-width: 100%;
}
.about-mens #shop-essentials .img-wrapper img {
	margin: 3rem auto;
	width: 400px;
	height: auto;
}
.about-mens #shop-essentials .button {
	max-width: 14rem;
	margin: 0 auto;
}

/* ingredients page */
#the-good-stuff-wrapper {
	max-width: 1100px;
	text-align: center;
	margin: 0 auto;
}

.circle-letter, .glossary-letter {
	background-color: var( --our-green-bg );
	color: var( --our-white );
	text-align: center;
	border-radius: 50%;
}	

.glossary-letter {
	width: 30px;
	height: 30px;
	margin: auto 3px;
}

#glossary-title {
}

.glossary-button-wrapper {
	padding-top: 1rem;
	margin-bottom: 4rem;
}

.circle-letter {
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 40px;
}

#ingredients-glossary {
	max-width: var( --max-desktop-width );
	width: 100vw;
}

.dfn-output {
	text-align: left;
	max-width: 925px;
	min-height: 500px;
	margin: 0 auto;
}

.results {
	display: none;
}
.ingredient-name {
	font-weight: bold;
	padding: 1rem 0 .5rem 0;
}
.ingredient-description {
	padding-bottom: 1rem;
	max-width: 500px;
}

.the-good-stuff-title {
	max-width: 500px;
	padding: 4rem 2px;
}


/* privacy page */
#privacy-table {
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #ccc;
}


#privacy-table .wp-block-column {
	padding: 1rem;
}
#privacy-table .wp-block-column:first-child {
	border-right: 2px solid #ccc;
}
#privacy-table .wp-block-column p:first-child {
	border-bottom: 2px solid #ccc;
	min-height: 3rem;
	padding-left: 2rem;
}

/* products archive collections/rosewater */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	min-width: 264px;
}


.faq-contact-us .contact-us-iframe {
	height: 1460px;
	border: initial;
	overflow: visible;
}


#featured-ingredient-wrapper.kfd-accordion {
	max-height: none;
}
.kfd-accordion {
	padding: 3rem 6rem;
}

.contact-us-form .phone {
	padding-top: 1rem;
}

.contact-us-form .hours {
	padding-bottom: 3rem;
}

#the-good-stuff-title {
	color: var( --our-green-bg );
	width: 36rem;
	padding: 2em 2px;
}

/* not as wide as desktop */
@media screen and ( max-width: 1300px ) {
	#kfd-product-filters {
		margin-left: 1rem;
	}
	nav.navbar {
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.single-product .navbar #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		word-wrap: nowrap;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		padding: 0px 5px;
	}

	/* archives not wide as desktop */
	.woocommerce .products {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column.mega-kfd-img-column {
		display: none;
	}

	.the-good-stuff #the-good-stuff-wrapper {
		width: 90vw;
		--square: 22.5vw;
		height: calc( 10 * var( --square ) );
		text-align: center;
		flex-wrap: wrap;
	}

	.ingredient-tile {
		--square: 22.5vw;
		/*font-size: 75%;*/
		/*margin-left: 5vw;*/
	}

}


/* [ON SMALL SCREENS, portrait ipad air] */
@media screen and (max-width: 824px ) {
	nav.navbar {
		width: 100vw;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.mobile-logo-wrapper {
		width: 200px;
		max-width: 300px;
	}

	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
		margin-left: 0rem;
	}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.store-loc {
		display: none;
	}
	.navbar #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-row {
		padding: .5rem;
	}
	
	.navbar-light .navbar-toggler-icon {
		background-image: url( '/wp-content/themes/jason/assets/images/svg/hamburger-white.svg' );
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.mobile-logo {
		width: 100%;
	}
	.single-product .navbar #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		color: white;
	}
	.single-product nav.navbar {
		background: var( --our-green-bg );
	}

	/*
	.page-header .navbar-light .navbar-toggler {
		border: none;
	}
	*/

	button.navbar-toggler {
		width: 100%;
	}

	.navbar-toggler-icon {
		float: left;
	}

	#mega-menu-wrap-primary #mega-menu-primary #mega-menu-item-341, li.logo-link {
		display: none;
	}
	
	.navbar .navbar-light .navbar-toggler {
		color: var( --our-white );
		border: 2px solid red;
	}

	#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
		margin-left: -16px;
		width: 100vw;
		height: 100vh;
		background: var( --our-green-bg );
	}



	.about-mens .abs-border {
		left: 30px;
		right: 30px;
		width: auto;
		border-color: transparent;
	}

	.about-mens .text-wrap {
		width: 90%;
		margin: auto;
	}

	#about-mens-backgammon2 {
		flex-direction: column-reverse;
	}

	#about-mens-backgammon2 .abs-border {
		--my-width; 100vw;
		top: 450px;
		max-height: 500px;
		height: 500px;
	}

	#about-mens-backgammon2 .text-wrap {
		float: none;
		padding-top: 100px;
	}

	.backgammon .col-md-6.our-green-bg {
		max-height: auto;
		/*height: 500px;*/
		height: 50vw;
		min-height: 50vw;
		padding-bottom: 2rem;
	}

	.backgammon .img-half {
		min-height: 50vw;
		height: 50vw;
	}
	#about-mens-backgammon2  {
		flex-direction: row;
	}

	.backgammon .abs-border {
		top: 20px;
	}


	.about-mens #shop-essentials .img-wrapper img {
		width: 250px;
	}
	.about-mens #mens-discover-more .insta-feed {
		justify-content: center;
		max-width: 810px;
		width: 100%;
		height: 425px;
		max-height: 425px;
		padding: 0;
	}

	.discover-jason .insta-feed {
		width: 95%;
	}

	.discover-jason .insta-feed li,
	.about-mens #mens-discover-more .insta-feed li {
		border: none;
		min-width:150px;
		min-height:150px;
		width: 175px;
		height: 175px;
		margin-bottom: .5rem;
	}



	/* discover jason tablet */
	.discover-jason #disco-quad-wrapper {
		width: auto;
		height: auto;
    max-height: unset;
	}
	#disco-quad-wrapper .quad {
		width: 100vw;
    height: 100vw;
    display: flex;
	}
	#disco-quad-wrapper h2 {
		font-size: 2rem;
	}
	#disco-quad-wrapper .inner-mojo {
		width: 100%;
		height: auto;
    margin: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	}

	#disco-movie-plus {
		width: auto;
		max-width: auto;
	}
	.discover-jason-movie-wrapper {
	}

	#shop-essentials li {
		max-width: 180px;
	}
	
	.privacy-policy .entry-content, .terms-of-use .entry-content {
		padding: 2rem;
	}
	.ingredient-tile {
		font-size: 75%;
	}

	/*single-product-single*/
	#power-ingredient-wrapper .col-md-6, #featured-ingredient-wrapper .col-md-6 {
		padding: 1rem;
	}

	#shop-essentials .flexor {
	}

	#disco-store-locator h2, #best-for-you h3 {
		font-size: 22px;
		width: 15rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* phone */
@media screen and ( max-width: 650px ) {
	nav.navbar {
		width: 100vw;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.mobile-logo-wrapper {
		width: 200px;
		max-width: 200px;
	}

	.mobile-logo {
		width: 100%;
	}

	button.navbar-toggler {
		width: 100%;
	}

	.navbar-toggler-icon {
		float: left;
	}

	#mega-menu-wrap-primary #mega-menu-primary #mega-menu-item-341, li.logo-link {
		display: none;
	}
	.mega-logo-link.logo-lin {
	}
	.navbar-light .navbar-toggler {
		color: var( --our-white );
	}

	#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
		margin-left: -16px;
		width: 100vw;
		height: 100vh;
		background: var( --our-green-bg );
	}

	.kfd-hero-wrapper {
		max-height: 560px;
	}
	.kfd-carousel-wrapper {
		height: 90vw;
	}
	.kfd-hero-image img {
		height: 150vw;
	}

	.kfd-hero-wrapper .giant {
		font-size: 35px;
	}

	.kfd-hero-wrapper h3 {
		font-size: 25px;
	}

	.kfd-hero-image img.img-about-mens-logo {
		height: 127px;
	}

	#featured-ingredient-wrapper.kfd-accordion {
		padding: 0px;
		height: auto;
	}
	#featured-ingredient-wrapper.kfd-accordion .fi-ingredients {
		width: 90%;
	}
	#featured-ingredient-wrapper .accordion h2 .kfd-trigger {
		padding-right: 0px;
	}

	#featured-ingredient-wrapper .accordion h2 .kfd-trigger .bi-plus-circle {
		margin-top: 1rem;
		margin-right: 0px;
	}
	#featured-ingredient-wrapper .question-wrapper {
		max-width: 92%;
	}

	#the-good-stuff-wrapper {
		max-width 100%;
		width 100%;
		max-height: auto;
		text-align: center;
		flex-wrap: nowrap;
	}

	.ingredient-tile {
		font-size: 75%;
		--square: 45vw;
		margin-left: 5vw;
	}


	#power-ingredient-wrapper .col-md-6, #featured-ingredient-wrapper .col-md-6 {
		padding: 1rem;
	}
	#power-ingredient-wrapper .col-md-6, #featured-ingredient-wrapper .col-md-6 {
		min-height: initial;
	}

	#power-ingredient-wrapper {
		max-height: none;
		flex-direction: column;
		flex-wrap: wrap;
	}

	#power-ingredient-wrapper, #featured-ingredient-wrapper {
		--our-width: 100vw;
	}

	#power-ingredient-wrapper,
	#featured-ingredient-wrapper {
		max-width: 100vw;
		max-height: none;
		height: auto;
		
	}
	#power-ingredient-wrapper .col-md-6:first-child, #featured-ingredient-wrapper .col-md-6:last-child {
		width: 100vw;
		min-height: 100vw;
		height: 100vw;
		background-size: contain;
	}

	#power-ingredient-wrapper .col-md-6:last-child {
		max-height: initial;
		background-color: var( --our-light-bg );
		padding: 1rem;
		border: 1px solid var( --our-green-bg );
		min-height: 100vw;
	}

	#featured-ingredient-wrapper {
		flex-direction: column-reverse;
	}

	/*
	#power-ingredient-wrapper .col-md-6 {
		 position: absolute;
    min-height: unset;
    height: 200vw;
    padding-top: 40vw;
	}
	#power-ingredient-wrapper h3 {
		margin-top: 0;
    color: white;
    margin-bottom: 50vw;
	}
*/
	#shop-essentials li {
		width: 90vw;
		text-align: center;
		max-width: 90vw;
	}

	.backgammon .text-wrap .ingredient-name {
		padding: 1.5rem 0;
	}

	.backgammon {
		flex-direction: column;
		min-height: calc( 2 * 100vw );
		height: calc( 2 * 100vw );
	}


	.backgammon .col-md-6.our-green-bg, .backgammon .col-md-6.img-half {
		height: 100vw;
		min-height: 100vw;
	}

	#about-mens-backgammon2 {
		flex-direction: column-reverse;
	}

	.about-mens #mens-discover-more .insta-feed {
		height: 100vw;
		max-width: 100vw;
		width: 100vw;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		width: 98vw;
		margin-bottom: 0px;
	}
	.about-mens #mens-discover-more .insta-feed li {
		margin: 0;
		width: 45vw;
	}

	.discover-jason .insta-feed, .about-mens h3.our-green-color {
		padding: 3rem 0px 1rem 0px;
	}

	.about-mens #mens-discover-more {
		padding-bottom: 2rem;
	}

	#mens-opening-text {
		padding: 0px 1rem;
	}


}