/* 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..?) 
 * This is for product page only, fun description shown in shop style included in shop.css
 * Ver 1.1
 
 * Last change: Product page buy now made relative so that spinner would work.
 */

.product-page-download-button-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: -60px;
	text-align: center;
	margin-bottom: 40px;
}

/* edit to tags and category display */
.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;
	margin-left: 3.5vw;
	position: relative;
	right: calc( -100% - var(--wp--preset--spacing--50) );
	top: -1lh;
}
.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;
}
.category {
    margin-block-start: 0px;
    margin-block-end: 0px;
}
.category .type-tag {
    font-size: 1.1rem;
}
.category h2 {
    display: inline-block;
    margin: 0;
    cursor: pointer;
    font-size: 2rem;
    margin-left: 0.4rem;
}
.strategy_game.category h2 {
	color: #94ddde;
}
.party_game.category h2 {
	color: #acd793;
}
.character_game.category h2 {
	color: #ffc96f;
}

/* attribute popup box */
	.attribute-popup {
		display: none;
		position: absolute;
		z-index: 10000;
		width: 400px;
		background: #fff;
		border: 1px solid #ccc;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
		border-radius: 6px;
		padding: 10px;
	}
	.popup-close-icon {
		display: block;
		margin-left: auto;
		cursor: pointer;
		border: none;
		background-color: unset;
		transition: transform 0.1s ease, translateY 0.1s ease;
	}
	.popup-close-icon img {
		width: 15px;
		height: 15px;
	}
	.popup-close-icon:hover {
		transform: scale(1.2) translateY(-2px);
	}
	.popup-close-icon:active {
		transform: unset;
	}
	.attribute-popup-content {
		font-size: 0.9em;
		white-space: pre-line;
	}
	.attribute-popup.active {
		display: block;
	}
	.attribute-popup-content {
		margin-top: 0px;
		margin-bottom: 10px;
	}


/* Description tab styles (classes set in productdetails html files) */
/* override to display h2 headings in product description */
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 80% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.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;
		justify-content: space-between;
		align-items: start;
		width: 70%;
		min-height: 65px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}
	.attributes-container-single-product .attribute-flex-item h2 {
		font-size: 120%;
		margin: 0;
	}
	.attributes-container-single-product .attribute-flex-item p {
		font-size: 1rem;
		text-align: center;
		margin-top: 0.5em;
		margin-bottom: 0;
	}
	.attributes-container-single-product .attribute-detail {
		width: 200px;
		justify-content: center;
	}
	.attributes-container-single-product .attribute-detail .stat-bar-text p {
		font-size: 1.5rem;
		margin: 0;
	}
	.attributes-container-single-product .stat-bar-text p.long_desc {
		font-size: 1.2rem;
	}
	.stat-bar-container {
		display: flex;
		background-color: white;
		opacity: 0.8;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
		width: 85%;
		height: 25px;
		border-radius: 5px;
	}
	.stat-bar-fill-block {
		display: inline-block;
		width: 15%;
		height: 18px;
		margin: 2.25%;
		border-radius: 4px;
		background-color: #8aac76;
	}
	.clickable-attribute {
		cursor: pointer;
	}
	/* 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;
	}
	.wc-block-components-product-button.wp-block-woocommerce-product-button {
		position: relative !important;
	}
	.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-details-width-responsive .wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	text-align: center;
}
.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;
	}
	.wc-block-components-checkbox.wc-block-components-payment-methods__save-card-info {
	 	margin-top: 15px;	
	}
	
/* 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;
	}



.payment-stripe-logo {
	display: inline-block !important;
	height: 1lh !important;
	width: auto !important;
	vertical-align: bottom !important;
	margin-left: 1px !important;
	margin-right: 1px !important;
}
	
/* Transition and tablet specfics */
@media only screen and (max-width: 1300px) and (min-width: 551px) {
	.single-product .product-columns-responsive {
		flex-wrap: nowrap !important;
		max-width: 98%;
	}
	.product-details-width-responsive {
		flex-wrap: nowrap !important;
	}
	.product-details-width-responsive .category {
		margin-top: clamp( 0px, calc(260px - 38vw), 300px);
	}
	.product-details-width-responsive .category h2 {
		font-size: 1.5rem;
	}
	.bendie-product-tags-collapsible {
		margin-top: 0.5em;
		margin-left: 0;
		position: relative;
		z-index: 999;
		width: 200%;
		right: unset;
		top: unset;
	}
	.product-page-download-button-container p {
		font-size: clamp(1em, calc(2vw + 5px), 30px) !important;
	}
	.tabs.wc-tabs {
		display: flex !important;
		flex-direction: row !important; 
		overflow-x: scroll !important;
		padding-bottom: 15px !important;
	}
	.gotodownloads-button.bendie-button1 {
		font-size: clamp(1em, calc(2vw + 5px), 30px) !important;
		padding-top: 0.8rem !important;
		padding-right: 1.6rem !important;
		padding-bottom: 0.8rem !important;
		padding-left: 1.6rem !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
		font-size: clamp(1.2em, 5vw, 3em) !important;
		text-wrap: nowrap !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
		border-left-width: 0px !important;
		border-bottom-width: 2px !important;
	}
	.attributes-container-single-product .attribute-flex-item {
		width: clamp(70%, calc( 37vw + 191px ), 100%) !important;
	}
	.attributes-container-single-product .attribute-detail {
		width: 200px;
	}
	.attributes-container-single-product .attribute-detail .stat-bar-container {
		width: 160px;
	}	
	.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 {
		overflow-x: clip !important;
	}
	.single-product .product-details-width-responsive {
		position: relative !important;
		left: 50% !important; 
		transform: translateX(-50%) !important;
	}
	.single-product .product-details-width-responsive.mobile-responsive-imgs-1 {
		margin-top: 130px !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 .category h2 {
		font-size: 1.5rem;
	}
	.bendie-product-tags-collapsible {
		margin-top: 0.5em;
		margin-left: 0;
		position: static;
		right: unset;
		top: unset;
	}
	.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;
		text-wrap: nowrap !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 div.product .woocommerce-tabs .woocommerce-Tabs-panel {
		width:95% !important;
	}
	.attributes-container-single-product .attribute-flex-item {
		width: 100% !important;
	}
	.attributes-container-single-product .attribute-flex-item .attribute-detail {
		width: 36vw !important;
	}
	.attributes-container-single-product .attribute-detail .stat-bar-text p {
		font-size: 1.2rem;
	}
	.attributes-container-single-product .attribute-detail .stat-bar-text p.long_desc {
		font-size: 1rem;
	}
	.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;
	}
	.attribute-popup {
		width: 80vw;
	}
	
}
/* Older, really small phone screen styles */
@media only screen and (max-width: 380px) {
	.single-product .gotodownloads-button.bendie-button1 {
        font-size: clamp( 10px, 6vw, 1.1em) !important;
		padding-top: min( 4.4vw, 0.8rem) !important;
		padding-right: min( 8.8vw, 1.6rem) !important;
		padding-bottom: min( 4.4vw, 0.8rem) !important;
		padding-left: min( 8.8vw, 1.6rem ) !important;
    }
	.product-page-download-button-container p {
		font-size: 1.2rem !important;
	}
	.single-product .category h2 {
		font-size: 1.2rem;
	}
}