/* see shop-detail-edits for product description tab styling */
/* see individual productdetail html files for inline styling of Includes & What You Need tabs (css wouldn't work..?) */
/* edits to tags container for collapsability */
.product-page-download-button-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -60px;
	text-align: center;
	margin-bottom: 40px;
}
.tags-label-product-page {
	font-size: var(--wp--preset--font-size--large);
}
.bendie-product-tags-collapsible {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 0.5rem;
}
.bendie-product-tags-collapsible .tag-badge-product-page {
	display: inline-block;
	font-size: var(--wp--preset--font-size--medium);
	background: none;
	border: none;
	padding: 0px;
	margin: 0em 0.5em;
}
.bendie-tag-toggle {
	order: 999;
	margin-left: 0.5em;
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: underline;
	color: #ea8439;
	cursor: pointer;
}
.tag-badge-product-page.hidden-extra-tags {
	display: none;
}
.tag-badge-product-page.hidden-extra-tags.show {
	display: inline-block;
}
.single-product .mobile-responsive-imgs-2 .product-page-product-img {
	display: none;
}

/* Description tab styles (classes set in productdetails html files) */
/* override to display h2 headings in product description */
.woocommerce-Tabs-panel h2 {
	display: block !important;
} 
.woocommerce-Tabs-panel h3 {
	display: block !important;
	font-weight: bold;
    font-size: 140%;
	margin-top: 1.5em;
} 

/* attributes tab */
	.attributes-container-single-product {
		max-width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.attributes-container-single-product .attribute-flex-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}
	.attributes-container-single-product .attribute-flex-item h2 {
		font-size: 120%;
		width: 110px;
	}
	.attributes-container-single-product .attribute-flex-item p {
		font-size: 1rem;
	}
	.stat-bar-container {
		display: flex;
		background-color: white;
		opacity: 0.8;
		margin-left: auto;
		width: 133px;
		height: 20px;
		border-radius: 5px;
	}
	.stat-bar-fill-block {
		display: inline-block;
		width: 20px;
		height: 14px;
		margin: 3px;
		border-radius: 4px;
		background-color: #8aac76;
	}
	/* category coloring to be used for bars?? */
	.stat-bar-container.party_game .stat-bar-fill-block {
		background-color: #8aac76;
	}
	.stat-bar-container.strategy_game .stat-bar-fill-block {
		background-color: #76b1b2; 
	}	
	.stat-bar-container.character_game .stat-bar-fill-block {
		background-color: #cca159;
	}




/* inlcudes tab */
.includes-flex-columns {
	display: flex;
	flex-direction: row;
}
.includes-flex-columns .includes-column-left {
	flex-basis: 55%;
}
.includes-flex-columns .includes-column-right {
	flex-basis: 45%;
}
.includes-flex-columns h3 {
	font-weight: bold;
	font-size: 120%; 
}
.includes-flex-columns .includes-column-left ul {
	list-style: none;
	padding-left: 10px;
	padding-right: 60px;
}
.includes-flex-columns .includes-column-right ul {
	list-style: none;
	padding-left: 10px;
	padding-right: 0px;
}
.includes-item-description {
	font-size:80%; 
	font-style:italic; 
	margin-top: 0;
	margin-bottom: 1.5rem; 
	margin-left: 1rem;
}
.inlcudes-icon {
	width: 40px;
	height: 40px;
	vertical-align: middle; 
	margin-left:-50px; 
	margin-right:10px;
}

/* bits needed tab */
.needed-desc {
	margin-bottom: 0px; 
	line-height: 25px;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
.needed-desc .DIY-D {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:150%; 
	color:#228B22; 
	margin-right:-6px;
}
.needed-desc .DIY-I {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:150%; 
	color:#556B2F; 
	margin-right:-4px;
}
.needed-desc .DIY-Y {
	font-family:'courier new'; 
	font-weight:bold; 
	font-size:150%; 
	color:#008200; 
	margin-right:2px;
}
.needed-flex-columns {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.needed-flex-columns h3 {
	font-weight: bold;
	font-size: 120%; 
	text-align: center;
}
.needed-flex-columns div {
	padding-left: 20px;
	padding-right: 40px;
	width: 375px;
}
.needed-table-footer-note {
	font-size:80%; 
	text-align:center; 
	margin-top:40px;
}

/* Edits for Buy Now / Add to Cart button on product page */
	.woocommerce a.button.add_to_cart_button,
    .woocommerce .single_add_to_cart_button,
    .woocommerce a.button.product_type_simple,
    .woocommerce a.button.product_type_variable {
        color: black;
		background-color: #acd793;
		border-radius: 20px;
		padding-top: 1rem;
		padding-right: 2rem;
		padding-bottom: 1rem;
		padding-left: 2rem;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--lazydog);
		font-style: normal;
		font-weight: 400;
		font-size: 120%;
		letter-spacing: -0.1px;
		margin: auto;
		text-wrap: nowrap;
		position: relative;
		overflow: visible !important;
		transition: transform 0.2s ease;
    }
	.add_to_cart_button::before {
		content: '';
		width: 30%;
		height: 50%;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 0px;
		border: 2px solid black;
		border-bottom: hidden;
		border-left: hidden;
		position: absolute;
		top: 5%;
		right: -3%;
		z-index: 10;
		transition: width 0.5s ease, height 0.5s ease, top 0.2s ease, right 0.2s ease;
	}
	.add_to_cart_button::after {
		content: '';
		width: 60%;
		height: 75%;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 0px;
		border: 2px solid black;
		border-top: hidden;
		border-right: hidden;
		position: absolute;
		bottom: -9%;
		left: 3%;
		z-index: 10;
		transition: width 0.5s ease, height 0.5s ease, bottom 0.2s ease, left 0.2s ease;
	}
    .woocommerce a.button.add_to_cart_button:hover,
    .woocommerce .single_add_to_cart_button:hover,
    .woocommerce a.button.product_type_simple:hover,
    .woocommerce a.button.product_type_variable:hover {
        filter: contrast(1.2);
		transform: scale(1.2);
    }
	.add_to_cart_button:hover::before {
		width: 70%;
		height: 18%;
	}
	.add_to_cart_button:hover::after {
		width: 80%;
		height: 24%;
	}
	.woocommerce a.button.add_to_cart_button:active,
    .woocommerce .single_add_to_cart_button:active,
    .woocommerce a.button.product_type_simple:active,
    .woocommerce a.button.product_type_variable:active {
        transform: translateY(5px);
		filter: brightness(0.9);
    }
	.add_to_cart_button:active::before {
		top: -20%;
		right: -15%;
		width: 80%;
		border-width: 3px;
	}
	.add_to_cart_button:active::after {
		bottom: -15%;
		left: -10%;
		width: 85%;
		border-width: 3px;
	}
	.add_to_cart_button.loading-wait {
		color: transparent;
	}
	.buy-now-loading-spinner {
		position: absolute !important;
		z-index:999 !important;
		height: 45px !important;
		width: auto !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}
	
/* Product fun description font size to match description block */
.bendie-edit-fun-description {
	font-size:clamp(1em, 1rem + ((1vw - 0.2em) * 0.954), 1.4em);
}
.wc-block-must-login-prompt {
	margin-top: 150px;
}
/* Re styling for purchase button on checkoutpage */
	.wc-block-components-checkout-place-order-button.wp-element-button {
		color: black !important;
		background-color: #acd793 !important;
		border-radius: 20px !important;
		padding-top: 1rem !important;
		padding-right: 2rem !important;
		padding-bottom: 1rem !important;
		padding-left: 2rem !important;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--lazydog);
		text-align: center !important;
		font-size: 30px !important;
		font-style: normal;
		font-weight: 400;
		letter-spacing: -0.1px;
		line-height: 1.4;
		width: 60% !important;
		margin: auto;
		text-wrap: nowrap;
		position: relative;
		overflow: visible !important;
		transition: transform 0.2s ease;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button::before {
		content: '';
		width: 30%;
		height: 50%;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 0px;
		border: 2px solid black;
		border-bottom: hidden;
		border-left: hidden;
		position: absolute;
		top: 5%;
		right: -2%;
		z-index: 10;
		transition: width 0.5s ease, height 0.5s ease, top 0.2s ease, right 0.2s ease;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button::after {
		content: '';
		width: 60%;
		height: 75%;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 0px;
		border: 2px solid black;
		border-top: hidden;
		border-right: hidden;
		position: absolute;
		bottom: -9%;
		left: 2%;
		z-index: 10;
		transition: width 0.5s ease, height 0.5s ease, bottom 0.2s ease, left 0.2s ease;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:hover {
		filter: contrast(1.2);
		transform: scale(1.2);
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:hover::before {
		width: 45%;
		height: 18%;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:hover::after {
		width: 80%;
		height: 24%;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:active {
		transform: translateY(5px);
		filter: brightness(0.9);
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:active::before {
		top: -20%;
		right: -15%;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:active::after {
		bottom: -15%;
		left: -10%;
	}
	.wc-block-components-checkout-place-order-button.wp-element-button:focus,
	.wc-block-components-checkout-place-order-button.wp-element-button:focus-visible {
		outline: none;
		box-shadow: none;
	}
	.wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button .wc-block-components-checkout-place-order-button__text {
		display: block !important;
		align-items: center !important;
	}
	.wc-block-checkout__actions .wc-block-checkout__actions_row {
		justify-content: center;
	}
	
/* restyling for review submit button - bit more stiff/manually set than usual button */
	.woocommerce #review_form #respond .form-submit input[type=submit] {
		display: inline-block;
		color: black;
		background-color: #ffc96f;
		border-radius: 20px;
		padding-top: 1rem;
		padding-right: 2rem;
		padding-bottom: 1rem;
		padding-left: 2rem;
		text-decoration: none;
		font-family: var(--wp--preset--font-family--lazydog);
		text-align: center ;
		font-size: 30px !important;
		font-style: normal;
		font-weight: 400;
		letter-spacing: -0.1px;
		margin: auto;
		text-wrap: nowrap;
		position: relative;
		overflow: visible;
		transition: transform 0.1s ease;
	}
	.woocommerce #review_form #respond .form-submit {
		position: relative;
	}
	.woocommerce #review_form #respond .form-submit::before {
		content: '';
		width: 80px;
		height: 40px;
		border-top-left-radius: 15px;
		border-bottom-right-radius: 0px;
		border: 2px solid black;
		border-bottom: hidden;
		border-right: hidden;
		position: absolute;
		top: -4px;
		left: 9px;
		z-index: 10;
		pointer-events: none;
		transition: width 0.5s ease, height 0.5s ease, top 0.1s ease, left 0.1s ease;
	}
	.woocommerce #review_form #respond .form-submit::after {
		content: '';
		width: 70px;
		height: 55px;
		border-bottom-right-radius: 15px;
		border-top-left-radius: 0px;
		border: 2px solid black;
		border-top: hidden;
		border-left: hidden;
		position: absolute;
		bottom: -5px;
		left: 95px;
		z-index: 10;
		pointer-events: none;
		transition: width 0.5s ease, height 0.5s ease, bottom 0.1s ease, right 0.1s ease, transform 0.5s ease;
	}
	.woocommerce #review_form #respond .form-submit .submit:hover {
			background-color: #ffa62f;
	}
	.woocommerce #review_form #respond .form-submit:hover::before {
			width: 100px;
			height: 14px;
	}
	.woocommerce #review_form #respond .form-submit:hover::after {
			width: 125px;
			height: 25px;
			transform: translateX(-55px); 
	}
	.woocommerce #review_form #respond .form-submit input[type=submit]:active {
			transform: scale(0.85);
	}
	.woocommerce #review_form #respond .form-submit:active::before {
			transform: translateX(-10px), translateY(-5px); 
	}
	.woocommerce #review_form #respond .form-submit:active::after {
			transform: translateX(10px), translateY(5px); 
	}
	.woocommerce #review_form #respond .form-submit input[type=submit]:focus,
	.woocommerce #review_form #respond .form-submit input[type=submit]:focus-visible {
			outline: none;
			box-shadow: none;
	}
	
/* Transition and tablet specfics */
@media only screen and (max-width: 1300px) and (min-width: 551px) {
	.tabs.wc-tabs {
		display: flex !important;
		flex-direction: row !important; 
		overflow-x: scroll !important;
		padding-bottom: 15px !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
		font-size: clamp(1.2em, 5vw, 3em) !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
		border-left-width: 0px !important;
		border-bottom-width: 2px !important;
	}
	.woocommerce-Tabs-panel--includes_tab {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.includes-flex-columns {
		flex-direction: column !important;
		padding-left:  20vw !important;
		padding-right: 10vw !important;
	}
	.includes-flex-columns ul {
		padding-left: 25px !important;
		padding-right: 10px !important;
	}

}

/* Phone screen styles */
@media only screen and (max-width: 550px) {
	.single-product .main-container-responsive {
		margin-top: 20px !important;
	}
	.single-product .product-details-width-responsive {
		position: relative !important;
		margin-top: 30px !important;
		left: 50% !important; 
		transform: translateX(-50%) !important;
	}
	.single-product .bendie-edit-fun-description {
		display: none !important;
	}
	.single-product .gotodownloads-button {
		font-size: 1.4em !important; 
	}
	.single-product .product-columns-responsive {
		flex-direction: column-reverse !important;
		gap: 0px !important;
	}
	.single-product .bendie-edit-product-title {
		position: relative !important;
		margin: 0 !important;
	}
	.single-product .wp-block-post-excerpt { 
		margin-top: 5px !important;
		margin-bottom: 50px !important;
	}
	.single-product .wp-block-post-excerpt__excerpt {
		font-size: 1.1rem !important;
		text-align: center !important;
	}
	.single-product .mobile-responsive-imgs-2 .product_page_product_img {
		display: block !important;
	}
	.single-product .mobile-responsive-imgs-2 .product-page-cat-img-container img {
		transform: unset !important;
		right: -35% !important;
		top: -80px !important;
	}
	.single-product .bendie-edit-product-title {
		width: 90vw !important;
		max-width: unset !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.single-product .mobile-responsive-imgs-2 .product-page-product-img {
		display: block !important;
		max-width: 90% !important;
		margin-top: 0 !important;
	}
	.single-product .mobile-responsive-imgs-1 .product-page-product-img {
		display: none !important;
	}
	.single-product .taxonomy-product_cat.wp-block-post-terms {
		margin-top: 0 !important;
	}
	.single-product .tabs.wc-tabs {
		display: flex !important;
		flex-direction: row !important; 
		overflow-x: scroll !important;
		padding-bottom: 15px !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
		font-size: clamp(1.2em, 5vw, 3em) !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
		border-left-width: 0px !important;
		border-bottom-width: 2px !important;
	}
	.woocommerce-Tabs-panel--description {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.woocommerce-Tabs-panel--includes_tab {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.single-product .woocommerce-Tabs-panel--requirements_tab {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.single-product .woocommerce-Tabs-panel--reviews {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.single-product .woocommerce-Tabs-panel--reviews .commentlist {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.single-product .includes-flex-columns {
		flex-direction: column !important;
		padding-left: 30px !important;
		padding-right: 0px !important;
	}
	.single-product .includes-flex-columns ul {
		padding-left: 25px !important;
		padding-right: 10px !important;
	}
	.single-product .needed-flex-columns {
		flex-direction: column !important;
		margin-top: 50px !important;
	}
	.single-product .needed-flex-columns div {
		padding-left: 0px !important;
		padding-right: 0px !important;
		width: unset !important;
	}
	.single-product .needed-table-footer-note {
		font-size: 80% !important; 
		text-align: center !important; 
		margin-top: 40px !important;
	}
	
}