/* Product detail page styling, scoped so the Apps search and landing pages are unaffected. */

.olf-product-detail {
	--product-content-width: 780px;
	box-sizing: border-box;
	max-width: var(--max-width--nav);
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem var(--padding--nav) 3.5rem;
}

.olf-product-detail .woocommerce-breadcrumb {
	max-width: none;
	margin: 0 0 1.5rem;
	font-size: var(--small-font-size);
	text-align: left;
}

.olf-product-detail .woocommerce-breadcrumb a {
	color: var(--coral-500);
}

.apps-breadcrumb__back {
	margin-right: 0.25rem;
	color: var(--coral-500);
}

.apps-breadcrumb__separator {
	margin: 0 0.25rem;
	color: var(--coral-500);
}

.olf-product-detail div.product {
	display: block !important;
	width: 100%;
	max-width: var(--product-content-width);
	margin: 0 auto;
}

.olf-product-detail div.product .summary {
	box-sizing: border-box;
	position: relative;
	display: flex;
	float: none !important;
	flex-direction: column;
	clear: both;
	width: 100% !important;
	height: 271px;
	flex-shrink: 0;
	align-self: stretch;
	margin: 0 !important;
	padding: 24px;
	gap: 16px;
	border-radius: var(--slightly-round, 12px);
	background: var(--white);
	box-shadow: 0 0 12px 0 var(--shadow-subtle, rgba(61, 63, 66, 0.15));
}

.olf-product-thumbnail {
	order: 0;
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	object-fit: cover;
}

.olf-product-detail .summary .product_title {
	order: 1;
	margin: 0 0 0.4rem;
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	font-weight: 700;
}

.olf-product-publisher {
	order: 2;
	margin: 0 0 0.55rem;
	font-size: var(--small-font-size);
}

.olf-product-detail .summary .woocommerce-product-details__short-description {
	order: 3;
	margin: 0;
	font-size: var(--base-font-size);
}

.olf-product-detail .summary .woocommerce-product-details__short-description p {
	margin: 0;
}

.olf-product-detail .summary > .price {
	display: none;
}

.olf-product-detail .summary .cart {
	order: 4;
	align-self: flex-end;
	margin: -8px 0 0;
}

/* Rated products use a compact vertical flow so the description, Get App link,
 * and ratings each occupy their own line inside the fixed-height card. */
body.has-product-rating .olf-product-detail div.product .summary,
body.no-product-rating .olf-product-detail div.product .summary {
	gap: 8px;
}

body.has-product-rating .olf-product-detail .summary .product_title,
body.has-product-rating .olf-product-detail .summary .olf-product-publisher,
body.no-product-rating .olf-product-detail .summary .product_title,
body.no-product-rating .olf-product-detail .summary .olf-product-publisher {
	margin-bottom: 0;
}

body.has-product-rating .olf-product-detail .summary .cart,
body.no-product-rating .olf-product-detail .summary .cart {
	position: static;
	align-self: flex-end;
	margin: 0;
}

body.has-product-rating .olf-product-detail div.product .summary .woocommerce-product-rating {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	align-self: flex-start;
	margin: 0;
}

.olf-product-detail .summary .cart .single_add_to_cart_button {
	display: inline-flex;
	padding: 0;
	align-items: center;
	gap: 0.25rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #D71818;
	font-size: 12px;
	font-weight: 700;
	line-height: 140%;
	overflow: visible;
	text-decoration: none;
}

.olf-product-detail .summary .cart .single_add_to_cart_button::after {
	content: "";
	display: inline-block;
	width: 18px;
	min-width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6875 0.84375C10.6875 1.31133 11.0637 1.6875 11.5312 1.6875H15.1207L7.27734 9.52734C6.94687 9.85781 6.94687 10.3922 7.27734 10.7191C7.60781 11.0461 8.14219 11.0496 8.46914 10.7191L16.309 2.8793V6.46875C16.309 6.93633 16.6852 7.3125 17.1527 7.3125C17.6203 7.3125 17.9965 6.93633 17.9965 6.46875V0.84375C17.9965 0.376172 17.6203 0 17.1527 0H11.5312C11.0637 0 10.6875 0.376172 10.6875 0.84375ZM2.53125 1.125C1.13203 1.125 0 2.25703 0 3.65625V15.4688C0 16.868 1.13203 18 2.53125 18H14.3437C15.743 18 16.875 16.868 16.875 15.4688V10.9688C16.875 10.5012 16.4988 10.125 16.0312 10.125C15.5637 10.125 15.1875 10.5012 15.1875 10.9688V15.4688C15.1875 15.9363 14.8113 16.3125 14.3437 16.3125H2.53125C2.06367 16.3125 1.6875 15.9363 1.6875 15.4688V3.65625C1.6875 3.18867 2.06367 2.8125 2.53125 2.8125H7.03125C7.49883 2.8125 7.875 2.43633 7.875 1.96875C7.875 1.50117 7.49883 1.125 7.03125 1.125H2.53125Z' fill='%23D71818'/%3E%3C/svg%3E") center / contain no-repeat;
	overflow: visible;
}

.olf-product-detail .summary .cart .single_add_to_cart_button:hover,
.olf-product-detail .summary .cart .single_add_to_cart_button:focus {
	background: transparent;
	box-shadow: none;
	color: #D71818;
	text-decoration: underline;
}

.olf-product-detail div.product .summary .woocommerce-product-rating {
	order: 5;
	display: block;
	position: absolute;
	top: auto;
	right: auto;
	left: 24px;
	bottom: 24px;
	margin: 0;
	line-height: 1;
}

.olf-product-detail .summary .woocommerce-product-rating .star-rating {
	float: none;
	display: block;
	height: 1em;
	line-height: 1;
	margin: 0;
}

.olf-product-detail .summary .woocommerce-review-link,
.olf-product-detail .summary .product_meta {
	display: none;
}

.olf-product-detail .woocommerce-tabs {
	clear: both;
	width: 100%;
	max-width: var(--product-content-width);
	margin-top: 37px;
	margin-left: auto;
	margin-right: auto;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
	position: relative;
	border-bottom: 1px solid #d7d8da;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs::before,
.olf-product-detail div.product .woocommerce-tabs ul.tabs::after {
	display: none;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li::before,
.olf-product-detail div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li {
	box-sizing: border-box;
	position: relative;
	float: none;
	margin: 0;
	padding: 0.7rem 0.75rem 0.65rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: var(--small-font-size);
	font-weight: 700;
	line-height: 1.4;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	color: var(--gray-700);
	font-weight: 700;
	text-decoration: none;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li:hover,
.olf-product-detail div.product .woocommerce-tabs ul.tabs li:focus-within {
	background: transparent;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li:hover a,
.olf-product-detail div.product .woocommerce-tabs ul.tabs li:focus-within a {
	color: var(--gray-800);
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li.active {
	z-index: 1;
	margin-bottom: -1px;
	border-bottom: 4px solid var(--coral-500);
	background: transparent;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li.active:hover,
.olf-product-detail div.product .woocommerce-tabs ul.tabs li.active:focus-within {
	background: transparent;
}

.olf-product-detail div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--gray-800);
}

.olf-product-detail div.product .woocommerce-tabs .woocommerce-Tabs-panel {
	margin: 37px 0 0;
	font-size: var(--base-font-size);
}

.olf-product-detail div.product .woocommerce-tabs .woocommerce-Tabs-panel h2,
.olf-product-detail div.product .woocommerce-tabs .woocommerce-Tabs-panel h3 {
	margin: 0 0 0.75rem;
	font-size: var(--h3-font-size);
	line-height: 1.4;
}

.olf-product-detail div.product .woocommerce-tabs .woocommerce-Tabs-panel p {
	margin-bottom: 0.75rem;
}

.olf-product-ctas {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 3rem auto 0;
}

.olf-product-cta {
	box-sizing: border-box;
	display: flex;
	height: 43px;
	padding: 11px 25px 10px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--coral-500);
	border-radius: var(--radius-button);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.olf-product-cta--primary {
	width: 190px;
	background: var(--coral-500);
	color: var(--white);
}

.olf-product-cta--secondary {
	background: var(--white);
	color: var(--coral-500);
}

.olf-product-cta:hover,
.olf-product-cta:focus {
	color: var(--white);
	background: var(--coral-700);
}

.olf-product-cta--secondary {
	width: auto;
	border: 1px solid #DC143C;
	border-radius: 100px;
	background: var(--background-surface, #FFF);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
	color: #DC143C;
}

.olf-product-cta--secondary:hover,
.olf-product-cta--secondary:focus {
	background: #DC143C;
	color: var(--white);
}

@media (max-width: 40em) {
	.olf-product-detail {
		padding: 2rem 1rem 3rem;
	}

	.olf-product-detail div.product .woocommerce-tabs ul.tabs li {
		padding-left: 0.55rem;
		padding-right: 0.55rem;
	}

	.olf-product-detail div.product .woocommerce-tabs ul.tabs {
		width: 100%;
	}

	.olf-product-ctas {
		align-items: center;
		flex-direction: column;
	}
}