/**
 * Single product page — Figma Shop-single (170:1920).
 */

.single-product .content-area,
.dian-product-page .content-area {
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
}

.dian-product {
	width: 100%;
	max-width: var(--dian-container-width, 1216px);
	margin-inline: auto;
	padding-block: 0 var(--dian-spacing-96);
	padding-inline: var(--dian-spacing-16);
	box-sizing: border-box;
}

.dian-product__breadcrumbs-wrap {
	width: calc(100vw - 2 * var(--dian-spacing-24));
	max-width: none;
	margin-inline: calc(50% - 50vw + var(--dian-spacing-24));
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0%, rgba(215, 238, 235, 0.03) 100%);
}

.dian-product__breadcrumbs {
	max-width: var(--dian-container-width, 1216px);
	margin-inline: auto;
	padding: var(--dian-spacing-16);
	box-sizing: border-box;
}

.dian-product__breadcrumbs .rank-math-breadcrumb p {
	font-size: var(--dian-body-14);
	line-height: 1.8rem;
	color: #556566;
	gap: 0.4rem;
}

.dian-product__breadcrumbs .rank-math-breadcrumb :where(.separator, a:not(:first-child), .last) {
	font-size: var(--dian-body-14);
	line-height: 1.8rem;
	color: #556566;
}

.dian-product__layout {
	display: flex;
	align-items: flex-start;
	gap: 7.2rem;
	margin-top: var(--dian-spacing-64);
	min-width: 0;
}

.dian-product__gallery {
	display: flex;
	align-items: flex-start;
	gap: var(--dian-spacing-24);
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 0;
}

.dian-product__gallery--placeholder img {
	display: block;
	width: min(100%, var(--dian-product-main-image-width, 437.561px));
	aspect-ratio: 230 / 328;
	object-fit: cover;
	box-shadow:
		0 1px 4px rgba(12, 12, 13, 0.05),
		0 1px 4px rgba(12, 12, 13, 0.1);
}

.dian-product__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--dian-spacing-16);
	flex: 0 0 10.1rem;
	width: 10.1rem;
}

.dian-product__thumb-btn {
	display: block;
	position: relative;
	width: 100%;
	height: 14.4rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	box-shadow:
		0 1px 4px rgba(12, 12, 13, 0.05),
		0 1px 4px rgba(12, 12, 13, 0.1);
}

.dian-product__thumb-btn.is-active {
	outline: 2px solid #009ca7;
	outline-offset: 2px;
}

.dian-product__thumb-btn picture,
.dian-product__thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dian-product__main-image {
	flex: 0 0 auto;
	width: var(--dian-product-main-image-width, 437.561px);
	max-width: 100%;
	min-width: 0;
}

.dian-product__main-image picture {
	display: block;
	width: 100%;
}

.dian-product__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 230 / 328;
	object-fit: cover;
	box-shadow:
		0 1px 4px rgba(12, 12, 13, 0.05),
		0 1px 4px rgba(12, 12, 13, 0.1);
}

.dian-product__details {
	display: flex;
	flex-direction: column;
	gap: var(--dian-spacing-40);
	flex: 1 1 auto;
	min-width: 0;
}

.dian-product__purchase {
	display: flex;
	flex-direction: column;
	gap: var(--dian-spacing-24);
	width: 100%;
}

.dian-product__title {
	margin: 0;
	font-family: var(--dian-bague-bold);
	font-size: var(--dian-font-size-h3);
	font-weight: 700;
	line-height: var(--dian-line-height-h3);
	color: #1e1e1e;
	letter-spacing: -0.72px;
}

.dian-product__price {
	font-family: var(--dian-bague-medium);
	font-size: var(--dian-font-size-body-md);
	font-weight: 500;
	line-height: 2.2rem;
	color: #1e1e1e;
}

.dian-product__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.dian-product__price del {
	opacity: 0.6;
}

.dian-product__cart {
	width: 100%;
	margin: 0;
	padding: 0;
}

.dian-product__cart .dian-product__add-btn,
.dian-product__cart button.dian-product__add-btn.single_add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	width: 100%;
	min-height: 5.4rem;
	padding: 1.6rem 2.4rem !important;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: #009ca7 !important;
	font-family: var(--dian-bague-medium);
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2.2rem;
	color: #ffffff !important;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.dian-product__cart .dian-product__add-btn:hover,
.dian-product__cart .dian-product__add-btn:focus,
.dian-product__cart .dian-product__add-btn:focus-visible,
.dian-product__cart button.dian-product__add-btn.single_add_to_cart_button:hover,
.dian-product__cart button.dian-product__add-btn.single_add_to_cart_button:focus {
	background: #009ca7 !important;
	color: #ffffff !important;
	outline: none;
}

.dian-product__cart .dian-product__add-btn svg {
	flex-shrink: 0;
	display: block;
	width: 2.4rem;
	height: 2.4rem;
}

.dian-product__cart .dian-product__add-btn span {
	color: inherit;
	font: inherit;
	line-height: inherit;
}

.dian-product__cart .dian-product__add-btn.loading {
	opacity: 0.7;
	pointer-events: none;
}

.dian-product__divider {
	height: 1px;
	margin: 0;
	background: #e0e0e0;
}

.dian-product__credits {
	display: flex;
	flex-direction: column;
	gap: var(--dian-spacing-24);
	width: 100%;
}

.dian-product__credit {
	margin: 0;
}

.dian-product__credit-label {
	display: block;
	font-family: var(--dian-regal-reg);
	font-size: var(--dian-font-size-body);
	font-weight: 300;
	line-height: var(--dian-line-height-body);
	color: #556566;
}

.dian-product__credit-value {
	display: block;
	margin-top: 0;
	font-family: var(--dian-regal-reg);
	font-size: var(--dian-font-size-body-lg);
	font-weight: 300;
	line-height: var(--dian-line-height-body-lg);
	color: #1e1e1e;
}

.dian-product__content {
	display: flex;
	flex-direction: column;
	gap: var(--dian-spacing-24);
	width: 100%;
}

.dian-product__content > :first-child {
	margin-top: 0;
}

.dian-product__content > :last-child {
	margin-bottom: 0;
}

.dian-product__content p {
	font-family: var(--dian-regal-reg);
	font-size: var(--dian-font-size-body-lg);
	font-weight: 300;
	line-height: var(--dian-line-height-body-lg);
	color: #1e1e1e;
	margin: 0;
}

.dian-product__content blockquote {
	position: relative;
	margin: 0 !important;
	padding: var(--dian-spacing-24) !important;
	border: 0 !important;
	border-left: 4px solid #00b8c0 !important;
	background: rgba(0, 156, 167, 0.04) !important;
	background-image: none !important;
	letter-spacing: 0;
}

.dian-product__content blockquote p {
	font-family: var(--dian-regal-reg) !important;
	font-size: var(--dian-font-size-body-lg) !important;
	font-weight: 300 !important;
	line-height: var(--dian-line-height-body-lg) !important;
	color: #1e1e1e !important;
	margin-bottom: var(--dian-spacing-16) !important;
}

.dian-product__content blockquote p:last-child {
	margin-bottom: 0 !important;
	font-family: var(--dian-regal-reg-it) !important;
	font-style: italic;
	font-size: var(--dian-font-size-quote-text) !important;
	line-height: var(--dian-line-height-quote-text) !important;
}

.dian-product__content-teaser,
.dian-product__content-more {
	flex-direction: column;
	gap: var(--dian-spacing-24);
	width: 100%;
}

.dian-product__content-teaser {
	display: flex;
}

.dian-product__content-more[hidden] {
	display: none !important;
}

.dian-product__content-more:not([hidden]) {
	display: flex;
}

.dian-product__content-toggle-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--dian-spacing-24);
	width: 100%;
}

.dian-product__content-toggle {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--dian-bague-reg);
	font-size: var(--dian-font-size-body-md);
	font-weight: 400;
	line-height: 2.2rem;
	color: var(--primary);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

.dian-product__content-toggle:hover,
.dian-product__content-toggle:focus,
.dian-product__content-toggle:focus-visible {
	color: var(--primary);
	background: transparent;
	outline: none;
}

.dian-product__content-toggle-label[hidden] {
	display: none;
}

.dian-product__video {
	width: 100%;
	min-height: 45rem;
	background: #dbeaeb;
	overflow: hidden;
}

.dian-product__video .wp-block-embed,
.dian-product__video .wp-block-embed__wrapper,
.dian-product__video iframe {
	width: 100%;
	height: 100%;
	min-height: 45rem;
	margin: 0;
}

.dian-product__video .wp-block-embed__wrapper {
	position: relative;
}

.dian-product__video .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
}

.dian-product__specs {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--dian-spacing-48);
	row-gap: var(--dian-spacing-16);
	margin: 0;
}

.dian-product__spec-row {
	display: contents;
}

.dian-product__spec-label,
.dian-product__spec-value {
	margin: 0;
	min-height: 3rem;
	display: flex;
	align-items: center;
}

.dian-product__spec-label {
	font-family: var(--dian-regal-reg);
	font-size: var(--dian-font-size-body);
	font-weight: 300;
	line-height: var(--dian-line-height-body);
	color: #556566;
}

.dian-product__spec-value {
	font-family: var(--dian-regal-reg);
	font-size: var(--dian-font-size-body-lg);
	font-weight: 300;
	line-height: var(--dian-line-height-body-lg);
	color: #1e1e1e;
}

.dian-product-page .woocommerce-breadcrumb,
.dian-product-page .product_meta,
.dian-product-page .woocommerce-tabs,
.dian-product-page .related.products,
.dian-product-page .upsells.products,
.dian-product-page .summary.entry-summary,
.dian-product-page .woocommerce-product-gallery {
	display: none !important;
}

.dian-product__cart--complex .variations {
	width: 100%;
	margin-bottom: var(--dian-spacing-16);
}

.dian-product__cart--complex .single_add_to_cart_button,
.dian-product__cart--complex button.single_add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	width: 100%;
	min-height: 5.4rem;
	padding: 1.6rem 2.4rem !important;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: #009ca7 !important;
	font-family: var(--dian-bague-medium);
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2.2rem;
	color: #ffffff !important;
	text-transform: none;
	box-shadow: none !important;
}

.dian-product-page .woocommerce-notices-wrapper .woocommerce-message,
.dian-product-page .added_to_cart.wc-forward {
	display: none !important;
}

@media screen and (max-width: 1100px) {
	.dian-product__layout {
		flex-direction: column;
		gap: var(--dian-spacing-48);
	}

	.dian-product__gallery {
		width: 100%;
	}

	.dian-product__main-image {
		width: min(var(--dian-product-main-image-width, 437.561px), 100%);
	}
}

@media screen and (max-width: 700px) {
	.dian-product__gallery {
		flex-direction: column-reverse;
		align-items: center;
	}

	.dian-product__thumbs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		flex: 1 1 auto;
	}

	.dian-product__thumb-btn {
		width: calc(25% - 1.2rem);
		max-width: 10.1rem;
		height: auto;
		aspect-ratio: 101 / 144;
	}

	.dian-product__main-image {
		width: 100%;
		max-width: var(--dian-product-main-image-width, 437.561px);
	}

	.dian-product__specs {
		grid-template-columns: 1fr;
		row-gap: var(--dian-spacing-8);
	}

	.dian-product__spec-label {
		min-height: 0;
	}

	.dian-product__spec-value {
		min-height: 0;
		margin-bottom: var(--dian-spacing-16);
	}
}