/**
 * Store Kit — single product page.
 */

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */

.sk-product-page .sk-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--sk-gap);
	row-gap: 0;
	align-items: start;
	margin-bottom: var(--sk-space-12);
}

.sk-product-page .sk-product__media {
	position: relative;
	grid-column: 1;
	min-width: 0;
}

.sk-product-page .sk-product .summary,
.sk-product-page .sk-product .entry-summary {
	grid-column: 2;
	/* Themes commonly set a percentage width here for the float layout this
	 * grid replaces; left alone it shrinks the column to roughly half. */
	width: 100% !important;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	float: none;
}

.sk-has-sticky .sk-product-page .sk-product__media {
	position: sticky;
	top: var(--sk-sticky-offset);
}

.sk-product-page .woocommerce-product-gallery {
	width: 100% !important;
	float: none;
	margin: 0;
}

.sk-product-page .woocommerce-product-gallery__image img {
	border-radius: var(--sk-radius);
}

.sk-product-page .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--sk-space-2);
	margin: var(--sk-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.sk-product-page .flex-control-thumbs li {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

.sk-product-page .flex-control-thumbs img {
	width: 100%;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-sm);
	opacity: 1;
	transition: border-color var(--sk-duration) var(--sk-ease);
}

.sk-product-page .flex-control-thumbs img.flex-active,
.sk-product-page .flex-control-thumbs img:hover {
	border-color: var(--sk-primary);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Badges
 * ---------------------------------------------------------------------- */

.sk-product-page .sk-product__badges {
	position: absolute;
	top: var(--sk-space-4);
	left: var(--sk-space-4);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sk-space-2);
	pointer-events: none;
}

.sk-product-page .sk-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	border-radius: var(--sk-radius-pill);
	background: var(--sk-primary);
	color: #ffffff;
	font-size: var(--sk-fs-xs);
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.sk-product-page .sk-badge--sale {
	background: var(--sk-danger);
}

.sk-product-page .sk-badge--new {
	background: var(--sk-success);
}

.sk-product-page .sk-badge--out {
	background: var(--sk-muted);
}

.sk-product-page .onsale {
	display: none;
}

/* -------------------------------------------------------------------------
 * Summary
 * ---------------------------------------------------------------------- */

.sk-product-page .summary .product_title {
	margin: 0 0 var(--sk-space-3);
	color: var(--sk-primary);
	font-size: var(--sk-t-h1);
	font-weight: var(--sk-fw-h1);
	line-height: var(--sk-lh-h1);
	letter-spacing: var(--sk-tracking-tight);
}

.sk-product-page .summary .price,
.sk-product-page .woocommerce-variation-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sk-space-2);
	margin: 0 0 var(--sk-space-4);
	color: var(--sk-primary);
	font-size: var(--sk-t-price);
	font-weight: var(--sk-fw-price);
	line-height: var(--sk-lh-price);
}

.sk-product-page .summary .price del {
	color: var(--sk-faint);
	font-size: 0.75em;
	font-weight: 500;
	opacity: 1;
}

.sk-product-page .summary .price ins {
	background: transparent;
	text-decoration: none;
}

.sk-product-page .summary .woocommerce-product-details__short-description {
	margin: 0 0 var(--sk-space-5);
	padding-bottom: var(--sk-space-5);
	border-bottom: 1px solid var(--sk-border);
	color: var(--sk-primary-soft);
	font-size: var(--sk-t-body);
	line-height: var(--sk-lh-body);
}

.sk-product-page .summary .woocommerce-product-rating {
	margin: 0 0 var(--sk-space-4);
	font-size: var(--sk-fs-sm);
}

/* Variation form */
.sk-product-page .variations {
	width: 100%;
	margin: 0 0 var(--sk-space-5);
	border: 0;
}

.sk-product-page .variations tbody,
.sk-product-page .variations tr,
.sk-product-page .variations th,
.sk-product-page .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

.sk-product-page .variations tr + tr {
	margin-top: var(--sk-space-4);
}

.sk-product-page .variations .label label {
	display: block;
	margin: 0 0 var(--sk-space-2);
	color: var(--sk-primary);
	font-size: var(--sk-fs-sm);
	font-weight: 600;
}

.sk-product-page .reset_variations {
	display: inline-block;
	margin-top: var(--sk-space-2);
	color: var(--sk-muted);
	font-size: var(--sk-fs-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sk-product-page .woocommerce-variation-price {
	margin-bottom: var(--sk-space-3);
	font-size: var(--sk-t-price);
	font-weight: var(--sk-fw-price);
	line-height: var(--sk-lh-price);
}

/* Add to cart */
.sk-product-page form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-space-3);
	margin: 0 0 var(--sk-space-5);
}

.sk-product-page form.cart.variations_form {
	display: block;
}

.sk-product-page .woocommerce-variation-add-to-cart,
/* Themes often wrap the quantity and button in a div of their own, which
 * would stack them because the flex context stops at form.cart. */
.sk-product-page form.cart div:has(> .quantity):has(> button.single_add_to_cart_button),
.sk-product-page form.cart div:has(> .quantity):has(> .single_add_to_cart_button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-space-3);
}

.sk-product-page .sk-duplicate-qty,
.sk-product-page .quantity > span:not(.screen-reader-text):not([data-sk-step]) {
	display: none !important;
}

/* Themes that build their own stepper often pad the wrapper to make room for
 * absolutely positioned controls. With those hidden, the padding would leave
 * the input floating off centre. */
.sk-product-page .quantity[data-type],
.sk-product-page .quantity[class*="type-"] {
	padding: 0;
}

/* Built in JavaScript so the row exists regardless of the theme's wrapper.
 * The theme's own cart action container often sets its children to full
 * width, which would wrap the button onto its own line, so the row and its
 * two children are pinned here. */
.sk-product-page .sk-qty-row,
.sk-product-page form.cart .sk-qty-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: var(--sk-space-3);
	width: 100%;
	margin: 0 0 var(--sk-space-5);
}

/* Themes set these to full width for a stacked layout, and a width beats a
 * flex-basis. Both children are pinned so the row cannot break. */
.sk-product-page .sk-qty-row > .quantity {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0;
	max-width: 150px;
	margin: 0 !important;
}

.sk-product-page .sk-qty-row > .single_add_to_cart_button,
.sk-product-page .sk-qty-row > button.single_add_to_cart_button {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

/* The View cart link appears only after an AJAX add, so it takes what it
 * needs and lets the add to cart button keep the rest. */
.sk-product-page .sk-qty-row > .added_to_cart {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0 !important;
	padding: 0 var(--sk-space-5);
	border: 1px solid var(--sk-border-strong);
	border-radius: var(--sk-radius-btn);
	background: var(--sk-card);
	color: var(--sk-primary-soft);
	font-size: var(--sk-fs-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: var(--sk-transition);
}

.sk-product-page .sk-qty-row > .added_to_cart:hover {
	border-color: var(--sk-primary);
	background: var(--sk-card);
	color: var(--sk-primary);
}

/* Any View cart link that has not been adopted stays out of the layout. */
.sk-product-page form.cart > .added_to_cart,
.sk-product-page .ct-cart-actions > .added_to_cart {
	display: none;
}

/* The stepper styling in forms.css is scoped to the cart and checkout
 * wrapper, which does not exist here, so the buttons would otherwise inherit
 * whatever the theme does to a button inside the add to cart area. */
.sk-product-page .quantity {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	width: auto;
	max-width: 150px;
	padding: 0;
	border: 1px solid var(--sk-border-strong);
	border-radius: var(--sk-radius-pill);
	background: var(--sk-card);
	overflow: hidden;
}

.sk-product-page .quantity .sk-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	min-width: 0;
	height: auto;
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sk-primary-soft);
	font-size: 0;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background var(--sk-duration) var(--sk-ease), color var(--sk-duration) var(--sk-ease);
}

.sk-product-page .quantity .sk-qty__btn:hover {
	background: var(--sk-card-alt);
	color: var(--sk-primary);
	transform: none;
}

.sk-product-page .quantity .sk-qty__btn:disabled {
	color: var(--sk-faint);
	cursor: not-allowed;
}

.sk-product-page .quantity .sk-qty__btn .sk-icon {
	width: 16px;
	height: 16px;
}

.sk-product-page .quantity input.qty {
	flex: 0 0 auto;
	width: 48px;
	min-height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sk-primary);
	font-size: var(--sk-fs-base);
	font-weight: 600;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.sk-product-page .quantity input.qty:focus {
	outline: none;
	box-shadow: none;
}

.sk-product-page .quantity:focus-within {
	border-color: var(--sk-accent);
	box-shadow: 0 0 0 3px var(--sk-accent-ring);
}

.sk-product-page form.cart .quantity input.qty::-webkit-outer-spin-button,
.sk-product-page form.cart .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
}

.sk-product-page form.cart button.single_add_to_cart_button,
.sk-product-page form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 200px;
	width: auto;
	min-width: 180px;
	max-width: 100%;
	min-height: 52px;
	padding: 0 var(--sk-space-8);
	border: 0;
	border-radius: var(--sk-radius-btn);
	background: var(--sk-accent);
	color: var(--sk-accent-contrast);
	font-size: var(--sk-t-button);
	font-weight: var(--sk-fw-button);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: var(--sk-transition);
}

.sk-product-page form.cart button.single_add_to_cart_button:hover {
	background: var(--sk-accent-hover);
	transform: translateY(-1px);
}

.sk-product-page form.cart button.single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* Stock note */
.sk-product-page .sk-product__stock {
	display: flex;
	align-items: center;
	gap: var(--sk-space-2);
	margin: 0 0 var(--sk-space-4);
	color: var(--sk-warning);
	font-size: var(--sk-fs-sm);
	font-weight: 600;
}

.sk-product-page .sk-product__stock .sk-icon {
	width: 16px;
	height: 16px;
}

/* Assurances */
.sk-product-page .sk-product__assurances {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2) var(--sk-space-5);
	margin: var(--sk-space-5) 0 0;
	padding: var(--sk-space-4) 0 0;
	border-top: 1px solid var(--sk-border);
	list-style: none;
}

.sk-product-page .sk-product__assurances li {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2);
	margin: 0;
	padding: 0;
	color: var(--sk-muted);
	font-size: var(--sk-fs-sm);
	white-space: nowrap;
}

.sk-product-page .sk-product__assurances li::before,
.sk-product-page .sk-product__assurances li::marker {
	content: none;
}

.sk-product-page .sk-product__assurances .sk-icon {
	width: 16px;
	height: 16px;
	color: var(--sk-success);
}

.sk-product-page .product_meta {
	margin-top: var(--sk-space-5);
	padding-top: var(--sk-space-4);
	border-top: 1px solid var(--sk-border);
	color: var(--sk-muted);
	font-size: var(--sk-fs-sm);
	line-height: 1.8;
}

.sk-product-page .product_meta a {
	color: var(--sk-primary-soft);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Tabs
 * ---------------------------------------------------------------------- */

.sk-product-page .woocommerce-tabs {
	margin-bottom: var(--sk-space-12);
	padding-top: var(--sk-space-8);
	border-top: 1px solid var(--sk-border);
}

/* [hidden] is display:none from the UA sheet, which the rule below outranks.
 * Without this the pill list stays visible beside the accordion. */
.sk-product-page .woocommerce-tabs ul.tabs[hidden] {
	display: none !important;
}

.sk-product-page .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2);
	margin: 0 0 var(--sk-space-6);
	padding: 0;
	border: 0;
	list-style: none;
}

.sk-product-page .woocommerce-tabs ul.tabs::before,
.sk-product-page .woocommerce-tabs ul.tabs::after,
.sk-product-page .woocommerce-tabs ul.tabs li::before,
.sk-product-page .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
}

.sk-product-page .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--sk-radius-pill);
	background: transparent;
	box-shadow: none;
}

.sk-product-page .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 9px 18px;
	border: 1px solid var(--sk-border-strong);
	border-radius: var(--sk-radius-pill);
	color: var(--sk-primary-soft);
	font-size: var(--sk-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: var(--sk-transition);
}

.sk-product-page .woocommerce-tabs ul.tabs li a:hover {
	border-color: var(--sk-primary-soft);
	color: var(--sk-primary);
}

.sk-product-page .woocommerce-tabs ul.tabs li.active a {
	border-color: var(--sk-primary);
	background: var(--sk-primary);
	color: #ffffff;
}

.sk-product-page .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

.sk-product-page .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

/* -------------------------------------------------------------------------
 * Prose: description and tab content
 * ---------------------------------------------------------------------- */

.sk-type-content .sk-prose,
.sk-type-content .woocommerce-product-details__short-description {
	color: var(--sk-primary-soft);
	font-size: var(--sk-t-body);
	line-height: var(--sk-lh-body);
	font-weight: var(--sk-fw-body);
}

.sk-type-content .sk-prose p {
	margin: 0 0 1em;
	font-size: var(--sk-t-body);
	line-height: var(--sk-lh-body);
}

.sk-type-content .sk-prose p:last-child {
	margin-bottom: 0;
}

.sk-type-content .sk-prose h1,
.sk-type-content .sk-prose h2,
.sk-type-content .sk-prose h3,
.sk-type-content .sk-prose h4 {
	margin: 1.6em 0 0.6em;
	color: var(--sk-primary);
	letter-spacing: var(--sk-tracking-tight);
}

.sk-type-content .sk-prose h1:first-child,
.sk-type-content .sk-prose h2:first-child,
.sk-type-content .sk-prose h3:first-child {
	margin-top: 0;
}

.sk-type-content .sk-prose h1 {
	font-size: var(--sk-t-h1);
	font-weight: var(--sk-fw-h1);
	line-height: var(--sk-lh-h1);
}

.sk-type-content .sk-prose h2 {
	font-size: var(--sk-t-h2);
	font-weight: var(--sk-fw-h2);
	line-height: var(--sk-lh-h2);
}

.sk-type-content .sk-prose h3 {
	font-size: var(--sk-t-h3);
	font-weight: var(--sk-fw-h3);
	line-height: var(--sk-lh-h3);
}

.sk-type-content .sk-prose h4 {
	font-size: var(--sk-t-h4);
	font-weight: var(--sk-fw-h4);
	line-height: var(--sk-lh-h4);
}

.sk-type-content .sk-prose ul,
.sk-type-content .sk-prose ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
	font-size: var(--sk-t-body);
	line-height: var(--sk-lh-body);
}

.sk-type-content .sk-prose li {
	margin-bottom: 0.4em;
}

.sk-type-content .sk-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sk-radius-sm);
}

.sk-type-content .sk-prose table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	font-size: var(--sk-t-small);
}

.sk-type-content .sk-prose table th,
.sk-type-content .sk-prose table td {
	padding: var(--sk-space-3);
	border: 1px solid var(--sk-border);
	text-align: left;
}

.sk-type-content .sk-prose table th {
	background: var(--sk-card-alt);
	font-weight: 600;
}

.sk-type-content .sk-prose blockquote {
	margin: 0 0 1.5em;
	padding: var(--sk-space-4) var(--sk-space-5);
	border-left: 3px solid var(--sk-accent);
	background: var(--sk-card-alt);
	border-radius: 0 var(--sk-radius-sm) var(--sk-radius-sm) 0;
}

/* -------------------------------------------------------------------------
 * Related and upsells
 * ---------------------------------------------------------------------- */

.sk-product-page .related,
.sk-product-page .upsells {
	margin-bottom: var(--sk-space-12);
	padding-top: var(--sk-space-8);
	border-top: 1px solid var(--sk-border);
}

.sk-product-page .related > h2,
.sk-product-page .upsells > h2 {
	margin: 0 0 var(--sk-space-6);
	font-size: var(--sk-t-h3);
	font-weight: var(--sk-fw-h3);
	line-height: var(--sk-lh-h3);
	letter-spacing: var(--sk-tracking-tight);
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sk-product-page .sk-product {
		column-gap: var(--sk-space-6);
	}
}

@media (max-width: 640px) {
	/* Three controls will not fit across a phone, so the row is allowed to
	 * wrap and View cart takes the line below. */
	.sk-product-page .sk-qty-row,
	.sk-product-page form.cart .sk-qty-row {
		flex-wrap: wrap !important;
	}

	.sk-product-page .sk-qty-row > .single_add_to_cart_button,
	.sk-product-page .sk-qty-row > button.single_add_to_cart_button {
		flex: 1 1 140px !important;
		min-width: 140px;
	}

	.sk-product-page .sk-qty-row > .added_to_cart {
		flex: 1 1 100% !important;
		width: 100%;
		min-height: 44px;
	}

	.sk-product-page .sk-qty-row > .quantity {
		max-width: 130px;
	}
}

@media (max-width: 860px) {
	.sk-product-page .sk-product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--sk-space-6);
	}

	.sk-product-page .sk-product__media,
	.sk-product-page .sk-product .summary,
	.sk-product-page .sk-product .entry-summary {
		grid-column: 1;
	}

	.sk-has-sticky .sk-product-page .sk-product__media {
		position: static;
	}

	.sk-product-page form.cart button.single_add_to_cart_button {
		flex-basis: 100%;
	}

	.sk-product-page .woocommerce-tabs ul.tabs {
		gap: var(--sk-space-1);
	}

	.sk-product-page .woocommerce-tabs ul.tabs li a {
		padding: 8px 14px;
		font-size: var(--sk-fs-xs);
	}
}

/* -------------------------------------------------------------------------
 * Tabs as an accordion
 * ---------------------------------------------------------------------- */

/* [hidden] is display:none from the UA sheet, which any class selector
 * outranks. Without this the accordion triggers stay visible on desktop
 * alongside the tab pills. */
.sk-product-page .sk-tabs__trigger[hidden] {
	display: none;
}

.sk-product-page .sk-tabs__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-3);
	width: 100%;
	min-height: 0 !important;
	/* The theme's pill border and radius are stripped here rather than in the
	 * reset, because this is the only control that needs a bottom rule. */
	padding: var(--sk-space-4) var(--sk-space-1) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--sk-border) !important;
	border-radius: 0 !important;
	background: transparent;
	color: var(--sk-primary) !important;
	font-family: inherit;
	font-size: var(--sk-fs-md);
	font-weight: 620;
	letter-spacing: normal !important;
	line-height: 1.4;
	text-align: left;
	text-transform: none !important;
	cursor: pointer;
}

.sk-product-page .sk-tabs__trigger .sk-icon {
	width: 18px;
	height: 18px;
	color: var(--sk-muted);
	transition: transform var(--sk-duration) var(--sk-ease);
}

.sk-product-page .sk-tabs__trigger[aria-expanded="true"] .sk-icon {
	transform: rotate(180deg);
}

.sk-product-page .sk-tabs__trigger:hover {
	color: var(--sk-accent);
}

.sk-product-page .sk-tabs__trigger:hover .sk-icon {
	color: var(--sk-accent);
}

.sk-product-page .sk-tabs--accordion .panel {
	padding: var(--sk-space-4) var(--sk-space-1) var(--sk-space-5);
	border-bottom: 1px solid var(--sk-border);
}

/* -------------------------------------------------------------------------
 * Edge padding
 *
 * Some themes run their container flush to the viewport on a phone, which
 * leaves the product content touching both edges. The value is a setting, so
 * a theme that already pads can be left at zero.
 * ---------------------------------------------------------------------- */

@media (max-width: 782px) {
	.sk-product-page .sk-product,
	.sk-product-page .woocommerce-tabs,
	.sk-product-page .related,
	.sk-product-page .upsells {
		padding-left: var(--sk-edge, 0px);
		padding-right: var(--sk-edge, 0px);
	}
}