/*
Theme Name: PrintSpace - Child
Theme URI: https://harutheme.com/printspace
Author: HaruTheme
Author URI: https://harutheme.com/
Description: This is child theme of PrintSpace
Template: printspace
Version: 1.0.0
*/

/*---------------------------------
  	Write your css code from here
------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--nw-primary-color: rgb(149 29 129);
	--nw-red: oklch(63.78% 0.23729 25.422 / 0.616);
	--nw-secondary-color: rgb(5 168 170);
	--nw-variable-selected-shadow-color: rgb(149 29 129 / 0.4);
	--nw-secondary-shadow-color: rgb(5 168 170 / 0.4);
}

body, html, * {
	font-family: "Montserrat", sans-serif !important;
}

.haru-cart .haru-cart-wrap .haru-cart-content .cart_list_wrap .buttons .button {
	width: 100%;
	background-color: var(--nw-primary-color);
	color: white;
}

.woocommerce-cart{
	.haru-container{
		max-width: 90vw !important;
	}
}

.single-product{
	.haru-container{
		max-width: 90vw !important;
	}
}

[data-tippy-root] {
	.tippy-content {
		font-size: clamp(10px, 0.8vw, 5rem);
	}
	
}

/* put this in your stylesheet */
#nw-error-dialog {
	display: none;
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	padding: 1em 1.5em;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	font-size: clamp(16px, 0.85vw, 52px);
	z-index: 10000;
}
#nw-error-dialog button {
	margin-left: 1em;
	height: fit-content;
	border-radius: 999px !important;
	line-height: 1 !important;
	background: #721c24;
	color: #fff;
	border: none;
	padding: 0.3em 0.8em;
	border-radius: 3px;
	cursor: pointer;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.nw-main-container {
	&.nw-home, &.nw-stick-order {
		position: relative;
		
		.nw_home_sticky_cta{
			position: fixed;
			bottom: 30px;
			left: 1.5vw;
			z-index: 99;

			&.nw-hide {
				display: none;
			}

			.nw_home_sticky_cta-inner-wrapper{
				display: flex;
  				justify-content: flex-start;
				
				.sticky-cta-btn{
					box-shadow: 0 20px 25px -5px var(--nw-variable-selected-shadow-color), 0 8px 10px -6px var(--nw-variable-selected-shadow-color);
					background-color: var(--nw-primary-color);
					width: fit-content;
					height: fit-content;
					display: flex;
					max-width: 100%;
					padding: 0.25rem;
					padding-inline: 0.75rem;	
					column-gap: 0.5rem;			
					align-items: center;
					justify-content: center;
					transition: all 250ms ease-in-out;
					/* Bounce animation */
    				animation: bounce 2s infinite;

					.nw-sticky-cta-text {
						display: flex;
						max-width: 100%;
						overflow: hidden;
						text-wrap: nowrap;
						transition: max-width 250ms ease-in-out;
					}

					&:hover {
						max-width: 100%;
						column-gap: 0.5rem;	
						.nw-sticky-cta-text {
							max-width: 100%;
						}
					}
				}
			}
		}
	}
}

.nw-mini-cart{
	dd.variation-Commentaire {
		word-break: break-all;
	}
}

.nw-single-product-top{
	.nw-single-product-summary{
		.nw-summary{
			.nw-summary-content{


				.nw-variation-row-item{
					.nw-variation-row-item-selected-value {
						text-transform: capitalize;
					}
				}

				.haru-product-nav, p.price,
				.haru-social-share, .product_meta,
				.nw_variations_form .nw-variations .nw-variation-row-pa_adaptation-graphique,
				.nw_variations_form .nw-variations .nw-variation-row-pa_quantite,
				.nw_single_variation_wrap {
					display: none !important;
				}

				.nw-qty-table-wrap{
					margin-top: 3rem;

					.nw-qty-table-header{
						color: var(--nw-primary-color);
					}


					tr {
						&:hover {
							background-color: rgb(149 29 129 / 0.05);
						}
					}

					td {
						font-size: clamp(12px, 0.6vw, 42px);
						color: #555555;
					}

					td.nw-variation-cell {
						font-weight: 600;
					}

					td.price-unit-cell {
						white-space: nowrap;
					}
				}

				.nw-btn-add-to-cart{
					height: fit-content;
					width: fit-content;
					padding: 0.5rem;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 0.25rem;
					font-size: clamp(12px, 0.75vw, 32px);

					&:hover{
						background-color: black;
					}

					.nw-add-to-cart-loader{
						display:none;
					}

					&.loading {
						.nw-add-to-cart-loader{
							display:block;
						}

						.nw-add-to-cart-icon,
						.nw-add-to-cart-text{
							display: none;
						}
					}

					span {
						line-height: 1;
					}
				}
			}
		}
	}
}

.nw-single-product-image-inner-wrapper{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	height: 100%;

	.nw-single-product-image{
		.nw-product-images-wrap {
			/* margin-right: 100px;
			margin-left: unset !important; */

			img {
				height: 50vh;
				/* width: 50vw; */
				object-fit: contain;
			}
		}

		.nw-product-thumbnails-wrap{
			/* left: unset !important;
			right: 0; */

			.nw-product-thumbnails {
				height: 100%;
				overflow-y: hidden;
			}
		}
	}
}

.nw-image-attribute-wrap{
	align-items: stretch !important;
	column-gap: 5px;

	.nw-variable-item{
		&.nw-image-variable-item {
			display:grid !important;
			grid-template-columns: 1fr;
			grid-template-rows: 7fr 3fr;
			align-items: stretch !important;
			max-width: 7vw !important;
			margin-right: 0px !important;
			border: 4px solid transparent !important;
			transition: all 100ms ease-in-out;
			padding: 0.65rem !important;
			border-radius: 0.75rem !important;
			box-sizing: border-box;
			position: relative;

			.nw-helper-text {
				position: absolute;
				top: 5%;
				right: 5%;

				.attribute-tooltip {
					width: 20px;
  					height: 20px;
				}
			}

			.nw-image-variable-item-img{
				width: 100%;
				aspect-ratio: 1;
				object-fit: contain;
			}
			
			.nw-variation-description{
				font-size: 0.8vw;
          		text-wrap: wrap;
				text-align: center !important;
			}

			&.selected {
				border: 4px solid var(--nw-primary-color) !important;
				box-shadow: 0 20px 25px -5px var(--nw-variable-selected-shadow-color), 0 8px 10px -6px var(--nw-variable-selected-shadow-color);
			
				.nw-variation-description{
					font-weight: bolder;
				}
			}
		}
	}
}

.nw-variations-summary-wrapper{
	flex: 1;
	position: relative;
 
	#nw-variations-summary {
		position: sticky;
		top: 0px;
		z-index: 10;

		.nw-variation-summary-item{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			border-bottom: 2px solid #eee;
		}
	}

	.nw-summary-actions-container{
		margin-top: 1rem;

		.nw-summary-actions-wrapper{
			display: flex;
			justify-content: space-around;
			column-gap: 0.5rem;
			
			.nw-summary-actions-btn {
				flex: 1;
				height: fit-content;
				width: fit-content;
				padding: 0.5rem;
				padding-inline: 0.75rem;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 0.25rem;
				font-size: clamp(16px, 0.85vw, 52px);
				background-color: var(--nw-primary-color);
				color: white;
				border-radius: 1rem;
				transition: background-color 250ms ease-in;

				&:hover {
					background-color: black;
				}
			}
		}
	}
}

.nw-mini-cart {
	.nw-file-uploaded-label{
		max-width: 10vw;
		overflow: hidden;
		font-size: clamp(8px, 0.75vw, 2rem);
		display: inline-block;
		white-space: nowrap;         /* force one line */
		overflow: hidden;            /* hide the overflow */
		text-overflow: ellipsis;     /* show “…” */
	}
}

.nw-woocommerce-order-details{
	.nw-order-other-options {
		.nw-order-file-upload-wrapper {
			.nw-wc-dnd-file-upload{
				grid-area: files;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding: 0.5rem;
				padding-inline: 1rem;
				border-radius: 0rem;
				border: 1px solid #eee;
				overflow: hidden;

				&.nw-attribute-impression-recto {
					.nw-recto-verso-upload-wrapper{
						display: none;
					}
				}

				&.nw-attribute-impression-recto-verso {
					.nw-recto-only{
						display: none;
					}
				}

				.nw-media-options{
					display: flex;
					flex-direction: column;
					margin-bottom: 1rem;
					
					.nw-media-option {
						font-size: clamp(12px, 0.8vw, 22px);
					}
				}

				.nw-wc-drag-n-drop-file-input-order{
					display: none;
				}

				.nw-file-upload-btn, .nw-personalise-btn {
					height: fit-content;
					width: fit-content;
					padding: 0.75rem;
					padding-inline: 0.75rem;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 0.25rem;
					font-size: clamp(12px, 0.75vw, 32px);							
					background-color: var(--nw-primary-color);
					color: white;
					line-height: 1;
					border-radius: 1rem;
					transition: background-color 250ms ease-in;
					
					&:disabled {
						opacity: 0.7;
						pointer-events: none;
					}

					&:hover {
						background-color: black;
					}
				}

				.nw-recto-verso-upload-wrapper {
					display: flex;
					column-gap: 0.25rem;
					overflow: hidden;
					width: 100%;

					.nw-recto-wrapper, .nw-verso-wrapper {
						flex: 1;
						overflow: hidden;
					}

					.nw-file-upload-btn {
						background-color: var(--nw-primary-color);
						font-size: clamp(12px, 0.6vw, 32px);
						text-wrap: nowrap;

						&:hover {
							background-color: black;
						}
					}
				}

				.nw-file-error{
					color:#c00;
					font-size: clamp(8px, 0.5vw, 32px);
					line-height: 1;
				}

				.nw-file-preview {
					display: flex;
					align-items: center;
					column-gap: 0.25rem;
					margin-top: 0.25rem;
					flex-direction: column-reverse;

					.nw-file-name {
						display: inline-block;       /* or block */
						font-size: clamp(8px, 0.5vw, 32px);
						max-width: 100%;             /* or a fixed width like 150px */
						white-space: nowrap;         /* force one line */
						overflow: hidden;            /* hide the overflow */
						text-overflow: ellipsis;     /* show “…” */
					}

					.nw-file-thumb-wrapper{
						position: relative;
						width: fit-content;
						height: fit-content;

						.nw-file-remove-btn {
							position: absolute;
							display: flex;
							place-items: center;
							padding: 2px !important;
							top: 5%;
							right: 2%;
							translate: 50% -50%;
							width: 15px !important;
							height: 15px !important;
							color: white;
							background-color: #c00;
						}
					}
					
					.nw-file-thumb {
						width: 4vw;
						height: 4vw;
						object-fit: contain;
						border-radius: 10px;
					}
				}
			}
		}
	}
}

.nw-woocommerce-cart-form{
	max-width: 90vw !important;

	.cart-actions{
		display: none !important;
	}

	.cart-coupon {
		border: none !important;
	}

	.nw-cart{
		border-collapse: unset;
		border-radius: 0.75rem;
		overflow: hidden;

		tr.nw-wc-cart-form-item {
			&:has(.nw-file-error) {
				td {
					border-color: #c00 !important;
				}
			}
		}

		td {
			border: 1px solid #eee !important;			
		}

		thead {
			background: #eee;
		}

		.nw-product-name{
			max-width: 20vw;

			dl.variation {
				dd, dt {
					font-size: clamp(12px, 0.8vw, 32px);
				}

				dd {
					color: var(--nw-primary-color);
					font-weight: 500;
					word-break: break-all;
				}
			}

			> .nw-product-name-value {
				color: black;
				font-size: clamp(16px, 1.5vw, 50px);
			}

			.product-thumbnail{
				display: none;
			}


			.nw-file-uploaded-label{
				max-width: 5vw;
				overflow: hidden;
				font-size: clamp(8px, 0.75vw, 2rem);
				display: inline-block;
				white-space: nowrap;         /* force one line */
				overflow: hidden;            /* hide the overflow */
				text-overflow: ellipsis;     /* show “…” */
			}
		}

		.nw-delivery-estimation{
			text-align: center;
		}

		.nw-product-price{
			text-align: center !important;
		}

		.nw-product-options{
			height: 100%;
			width: 40vw;
			padding: 0 !important;

			.nw-cart-other-options-container{
				height: 100%;
				width: 100%;
				display: flex;

				.nw-cart-other-options-wrapper{
					height: 100%;
					width: 100%;
					display: grid;
					grid-template-columns: 2fr 2fr;
					grid-template-rows: 1fr 1fr;
					gap: 0rem;
					position: relative;
					grid-template-areas: 
						"files comments"
						"ag	actions"
						"delivery-notice delivery-notice"
					;

					.nw-cart-item-actions{
						grid-area: actions;
						border-radius: 0rem;
						border: 1px solid #eee;
						display: flex;
						row-gap: 0.5rem;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.nw-cart-technical-spec-actions-btn{
							font-size: clamp(9px, 0.85vw, 28px);
							display: flex;
							align-items: center;
							column-gap: 0.25rem;
						}

						.nw-cart-item-actions-wrapper {
							display: grid;
							gap: 0.25rem;
							justify-content: center;
							align-items: center;
							padding: 0.5rem;
							padding-inline: 1rem;
							grid-template-columns: repeat(2, 1fr);

							.nw-item-update {
								display: none !important;
							}

							.nw-remove-cart-item {
								grid-column: 1 / -1;
							}

							.nw-cart-item-actions-btn{
								background-color: black;
								border-radius: 999px;
								height: fit-content;
								max-width: 100%;								
								padding: 0.5rem;
								padding-inline: 0.75rem;
								line-height: 1 !important;
								display: flex;
								align-items: center;
								justify-content: center;
								column-gap: 0.25rem;
								transition: all 250ms ease-in-out;
								font-size: clamp(10px, 0.75vw, 32px);
								color: white;

								&:disabled, &.nw-action-disabled {
									opacity: 0.7 !important;
									pointer-events: none !important;
								}

								&.nw-remove-cart-item{
									background-color: var(--nw-red);
								}

								.nw-cart-item-action-icon{
									line-height: 1 !important;
								}

								.nw-cart-item-action-label {
									display: inline-block;
									line-height: 1;
									max-width: 100%;
									text-wrap: nowrap;
									overflow: hidden;
									transition: max-width 250ms ease-in-out;
								}
							}
						}
					}

					.nw-cart-item-comments{
						grid-area: comments;

						.nw-cart-item-comments-inner-wrapper{
							padding: 0.5rem;
							padding-inline: 1rem;
							border-radius: 0rem;
							border: 1px solid #eee;
							height: 100%;
							padding: 1vw;

							.nw-cart-item-comment {
								resize: vertical;
							}

							.nw-comment-add-btn{
								display: none;
								background-color: transparent;
								font-size: clamp(10px, 0.75vw, 32px);
								color: #b2b2b2;
								height: fit-content;
								width: fit-content;
								line-height: 1;
								padding: 0;
								text-decoration: underline;
								
								
								&:hover {
									background-color: none;
								}
							}

							&.no-comments {
								padding: 1.5vw;

								.nw-comment-send-btn, .nw-cart-item-comment, .nw-cart-item-comment-label{
									display: none;
								}

								.nw-comment-add-btn{
									display: flex;
								}
							}
						}

						.nw-comment-send-btn{
							margin-top: 0.5rem;
							height: fit-content;
							width: fit-content;
							padding: 0.75rem;
							padding-inline: 0.75rem;
							display: flex;
							justify-content: center;
							align-items: center;
							column-gap: 0.25rem;
							font-size: clamp(12px, 0.75vw, 32px);
							background-color: black;
							color: white;
							line-height: 1;
							border-radius: 1rem;
							transition: background-color 250ms ease-in;

							&:disabled {
								opacity: 0.7;
								pointer-events: none;
							}

							&:hover {
								background-color: var(--nw-primary-color);
								background-color: black;
							}
						}
					}

					.nw-cart-item-ag{
						grid-area: ag;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.nw-cart-item-ag-inner-wrapper{
							display: flex;
							flex-direction: column;
							padding: 0.5rem;
							padding-inline: 1rem;
							border-radius: 0rem;
							border: 1px solid #eee;
							height: 100%;
							width: 100%;
							align-items: center;
							justify-content: center;

							.nw-cart-item-ag-options{
								display: flex;
								flex-direction: column;

								.nw-cart-item-ag-price{
									color: black;
									font-weight: 500;
								}

								.nw-cart-item-ag-option {
									color: var(--nw-primary-color);
									font-size: clamp(12px, 0.8vw, 22px);
								}
							}
						}
					}

					.nw-cart-item-personalise{
						grid-area: personalise;
					}

					.nw-cart-item-delivery-notice {
						grid-area: delivery-notice;
						margin-inline: 0rem;
						margin-block: 0rem;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: clamp(12px, 0.8vw, 22px);
						padding-block: 0.5rem;
						color: var(--nw-primary-color);
					}

					.nw-wc-dnd-file-upload{
						grid-area: files;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						padding: 0.5rem;
						padding-inline: 1rem;
						border-radius: 0rem;
						border: 1px solid #eee;
						overflow: hidden;

						&.nw-media-option-selected-file{
							.nw-personalise-btn{
								display: none;
							}
						}

						&.nw-media-option-selected-personalise{
							.nw-file-upload-btn, .nw-file-preview{
								display: none;
							}
						}

						&.nw-media-option-selected-later{
							.nw-file-upload-btn, .nw-file-preview, .nw-personalise-btn{
								display: none;
							}
						}

						&.nw-attribute-impression-recto {
							.nw-recto-verso-upload-wrapper{
								display: none;
							}
						}

						&.nw-attribute-impression-recto-verso {
							.nw-recto-only{
								display: none;
							}
						}

						.nw-media-options{
							display: flex;
							flex-direction: column;
							margin-bottom: 1rem;
							
							.nw-media-option {
								font-size: clamp(12px, 0.8vw, 22px);
							}
						}

						.nw-wc-drag-n-drop-file-input{
							display: none;
						}

						.nw-file-upload-btn, .nw-personalise-btn {
							height: fit-content;
							width: fit-content;
							padding: 0.75rem;
							padding-inline: 0.75rem;
							display: flex;
							justify-content: center;
							align-items: center;
							column-gap: 0.25rem;
							font-size: clamp(12px, 0.75vw, 32px);							
							background-color: var(--nw-primary-color);
							color: white;
							line-height: 1;
							border-radius: 1rem;
							transition: background-color 250ms ease-in;
							
							&:disabled {
								opacity: 0.7;
								pointer-events: none;
							}

							&:hover {
								background-color: black;
							}
						}

						.nw-recto-verso-upload-wrapper {
							display: flex;
							column-gap: 0.25rem;
							overflow: hidden;
              				width: 100%;

							.nw-recto-wrapper, .nw-verso-wrapper {
								flex: 1;
								overflow: hidden;
							}

							.nw-file-upload-btn {
								background-color: var(--nw-primary-color);
								font-size: clamp(12px, 0.6vw, 32px);
								text-wrap: nowrap;

								&:hover {
									background-color: black;
								}
							}
						}

						.nw-file-error{
							color:#c00;
							font-size: clamp(8px, 0.5vw, 32px);
							line-height: 1;
						}

						.nw-file-preview {
							display: flex;
							align-items: center;
							column-gap: 0.25rem;
              				margin-top: 0.25rem;
							flex-direction: column-reverse;

							.nw-file-name {
								display: inline-block;       /* or block */
								font-size: clamp(8px, 0.5vw, 32px);
								max-width: 100%;             /* or a fixed width like 150px */
								white-space: nowrap;         /* force one line */
								overflow: hidden;            /* hide the overflow */
								text-overflow: ellipsis;     /* show “…” */
							}

							.nw-file-thumb-wrapper{
								position: relative;
								width: fit-content;
								height: fit-content;

								.nw-file-remove-btn {
									position: absolute;
									display: flex;
									place-items: center;
									padding: 2px !important;
									top: 5%;
									right: 2%;
									translate: 50% -50%;
									width: 15px !important;
									height: 15px !important;
									color: white;
									background-color: #c00;
								}
							}
							
							.nw-file-thumb {
								width: 4vw;
                				height: 4vw;
								object-fit: contain;
								border-radius: 10px;
							}
						}
					}
				}
			}
		}
	}
}