/**
 * ShopWP product hero: price, size buttons, quantity and Add to cart.
 *
 * Builds on pdp-hero.css (loaded first), which carries the colour tokens and
 * the components shared with the range page.
 *
 * ShopWP styles its variant buttons with emotion, under a doubled `&&` selector
 * (specificity 0,2,0). The body-class prefix here keeps these rules above that
 * without needing !important on every declaration.
 */

:root {
	/* The size grid's shape, reused so the quantity pill can match one button.
	   The gap total is precomputed rather than derived with (cols - 1) * gap,
	   which does not resolve reliably inside calc(). */
	--sealy-size-cols: 4;
	--sealy-size-gap: 12px;
	--sealy-size-gap-total: 36px;
}

/* --- Price ------------------------------------------------------------ */

/**
 * The price under the title. Styled here rather than in the widget because the
 * widget has no pricing colour control, and its Pricing Typography control
 * targets `.wps-component-products-pricing *`. This selector stays off the
 * per-size prices inside the size buttons, which use their own class.
 */
body.single-wps_products .wps-product-pricing .wps-product-individual-price {
	color: var(--sealy-hero-primary);
	font-size: 22px;
	font-weight: 700;
}

/* --- Size selector ---------------------------------------------------- */

.sealy-size-label {
	display: block;
	margin: 0 0 10px;
	color: var(--sealy-hero-accent);
	font-size: 16px;
	font-weight: 600;
}

.sealy-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.single-wps_products .swp-variants .swp-product-variant-button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	/* Four sizes share one row, as in the design, instead of wrapping. */
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--sealy-hero-border);
	border-radius: 6px;
	background-color: #fff;
	color: var(--sealy-hero-accent);
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	/* The theme uppercases buttons globally; the design uses sentence case. */
	text-transform: none;
	letter-spacing: normal;
	/* Keeps the two-line fallback readable when React is unavailable. */
	white-space: pre-line;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-wps_products .swp-variants .swp-product-variant-button:hover {
	border-color: var(--sealy-hero-primary);
}

body.single-wps_products .swp-variants .swp-product-variant-button[data-is-variant-selected='true'] {
	border-color: var(--sealy-hero-primary);
	background-color: #fff;
	color: var(--sealy-hero-accent);
	box-shadow: inset 0 0 0 1px var(--sealy-hero-primary);
}

body.single-wps_products .swp-variants {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sealy-size-gap);
}

.sealy-size__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.sealy-size__dims {
	display: block;
	color: var(--sealy-hero-muted);
	font-size: 13px;
}

body.single-wps_products .swp-variant-button-price {
	margin: 2px 0 0;
	color: var(--sealy-hero-accent);
	font-size: 14px;
	font-weight: 600;
}

/**
 * ShopWP pins "Clear selections" to the top-right of the options block, where it
 * lands on top of the Size Guide link. The design has no such control and a size
 * is always preselected, so it is hidden rather than repositioned.
 */
body.single-wps_products .swp-product-options .swp-clear-selections {
	display: none;
}

/* --- Quantity selector ------------------------------------------------ */

/**
 * ShopWP ships the stepper as two filled buttons either side of a bare input,
 * and the theme paints those buttons with the primary colour. The design has one
 * outlined pill instead, so the border moves to the row and the buttons and
 * input are stripped back to plain glyphs on white.
 *
 * The stepper is as wide as one size button. `.swp-add-to-cart-inner` spans the
 * same width as `.swp-variants`, so the size grid's own column maths gives the
 * two the same width without a hardcoded pixel value.
 */
body.single-wps_products .swp-quantity-container {
	flex: 0 0 auto;
	width: calc((100% - var(--sealy-size-gap-total)) / var(--sealy-size-cols));
	/* ShopWP forces min-width: 160px below 800px, which would win over the
	   calculated width on small screens. */
	min-width: 0;
}

body.single-wps_products .swp-quantity-container .swp-l-row-no-wrap {
	display: flex;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
	/* ShopWP stretches the container to the Add to cart button's height, so
	   filling it keeps the two the same height without hardcoding a value. */
	height: 100%;
	min-height: 45px;
	border: 1px solid var(--sealy-hero-border);
	border-radius: 6px;
	background: #fff;
}

body.single-wps_products .swp-btn-quantity {
	width: 38px;
	min-width: 38px;
	height: 100%;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease;
}

body.single-wps_products .swp-btn-quantity:hover {
	background: #f2f6f9 !important;
}

/* The +/- glyphs are 1px bars drawn with background-color, not icon fonts. */
body.single-wps_products .swp-btn-quantity .swp-dec-icon,
body.single-wps_products .swp-btn-quantity .swp-inc-icon,
body.single-wps_products .swp-btn-quantity .swp-inc-icon::after {
	width: 13px;
	left: calc(50% - 6.5px);
	background: var(--sealy-hero-accent);
}

body.single-wps_products .swp-quantity-input {
	/* Takes the space left between the two steppers, but never shrinks so far
	   that the number itself is clipped. */
	flex: 1 1 auto;
	width: auto;
	min-width: 32px;
	height: 100%;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--sealy-hero-accent);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.single-wps_products .swp-quantity-input::-webkit-outer-spin-button,
body.single-wps_products .swp-quantity-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* --- Add to cart ------------------------------------------------------ */

/**
 * The design puts a cart icon on the button. ShopWP renders the label from
 * React, so the icon is added as a pseudo-element - an inline SVG rather than an
 * icon font, so it does not depend on Font Awesome being enqueued on the page.
 */
body.single-wps_products .swp-btn-add-to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/**
 * ShopWP stretches the label to the button's full width, which would leave the
 * icon marooned at the far left. Shrinking it to its text keeps the pair
 * together in the middle.
 */
body.single-wps_products .swp-btn-add-to-cart .swp-add-to-cart-text {
	flex: 0 0 auto;
	width: auto;
}

body.single-wps_products .swp-btn-add-to-cart::before {
	content: '';
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9.5'%20cy='20'%20r='1.4'/%3E%3Ccircle%20cx='17.5'%20cy='20'%20r='1.4'/%3E%3Cpath%20d='M2.5%203.5h2.7l2.3%2010.6a1.8%201.8%200%200%200%201.8%201.4h7.5a1.8%201.8%200%200%200%201.8-1.4l1.4-6.5H6.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Pre-order note (injected above Add to cart) ----------------------- */

.sealy-preorder {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 6px;
	background: #eaf4fb;
	color: var(--sealy-hero-accent);
	font-size: 14px;
	line-height: 1.35;
}

.sealy-preorder[hidden] {
	display: none;
}

.sealy-preorder__icon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	color: var(--sealy-hero-primary);
}

.sealy-preorder__text {
	display: flex;
	flex-direction: column;
}

.sealy-preorder__text strong {
	font-weight: 600;
}

.sealy-preorder__text span {
	color: var(--sealy-hero-muted);
}

/* --- Below Add to cart: [sealy_pdp_purchase_info] --------------------- */

.sealy-purchase {
	margin: 16px 0 0;
	color: var(--sealy-hero-accent);
	font-size: 14px;
	line-height: 1.4;
}

.sealy-purchase p {
	margin: 0;
}

.sealy-gwp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-radius: 6px;
	background: #eaf4fb;
}

.sealy-gwp__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
}

.sealy-gwp__icon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	color: var(--sealy-hero-primary);
}

.sealy-gwp__info {
	display: inline-flex;
	color: var(--sealy-hero-primary);
	cursor: help;
}

.sealy-gwp__info-icon {
	width: 16px;
	height: 16px;
}

.sealy-gwp__items {
	margin-top: 6px !important;
	padding-left: 36px;
	color: var(--sealy-hero-accent);
}

.sealy-gwp__items[hidden] {
	display: none;
}

.sealy-gwp__image {
	width: 110px;
	height: 72px;
	flex: 0 0 110px;
	object-fit: contain;
}

/* An uploaded picture is shown no larger than its own size, so a small file
   stays sharp instead of being stretched to the illustration's box. */
img.sealy-gwp__image {
	width: auto;
	height: auto;
	max-width: 110px;
	max-height: 72px;
	flex: 0 0 auto;
}

.sealy-reassure {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.sealy-reassure__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.sealy-reassure__icon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	color: var(--sealy-hero-primary);
}

.sealy-reassure__text {
	display: flex;
	flex-direction: column;
	font-size: 13px;
}

.sealy-reassure__text strong {
	font-weight: 600;
}

.sealy-reassure__text span {
	color: var(--sealy-hero-muted);
	font-size: 12px;
}

.sealy-returns {
	margin-top: 14px !important;
}

.sealy-returns a,
.sealy-compare a {
	color: var(--sealy-hero-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sealy-returns a:hover,
.sealy-compare a:hover {
	color: var(--sealy-hero-primary);
}

.sealy-returns__icon,
.sealy-compare__icon {
	width: 16px;
	height: 16px;
	margin-left: 6px;
	vertical-align: -3px;
	color: var(--sealy-hero-accent);
}

/* Qualified to beat Elementor's `.elementor hr { margin: 0 }`. */
.sealy-purchase hr.sealy-purchase__rule {
	margin: 18px 0 16px;
	border: 0;
	border-top: 1px solid var(--sealy-hero-border);
}

.sealy-purchase__cta-heading {
	margin-bottom: 12px !important;
	font-size: 16px;
	font-weight: 600;
}

.sealy-compare {
	margin: 14px 0 0;
	color: var(--sealy-hero-muted);
	font-size: 14px;
	line-height: 1.5;
}

/**
 * The hero stays two columns down to 768px, but the details column has already
 * narrowed to ~470px by 1024px. Four size buttons stop fitting well before the
 * layout stacks - labels wrap onto three lines and the quantity input is
 * squeezed to nothing - so the grid drops to two columns here, not at 767px.
 * The quantity pill's width maths follows the same variables.
 */
@media (max-width: 1024px) {
	:root {
		--sealy-size-cols: 2;
		--sealy-size-gap-total: 12px;
	}

	body.single-wps_products .swp-variants .swp-product-variant-button {
		min-width: calc(50% - 6px);
		flex: 1 1 calc(50% - 6px);
	}
}

@media (max-width: 767px) {
	/* The gift picture only crowds the text on small phones. */
	svg.sealy-gwp__image {
		width: 80px;
		flex-basis: 80px;
	}

	img.sealy-gwp__image {
		max-width: 80px;
	}

	/**
	 * ShopWP gutters its product block by 15px at this width, which leaves it
	 * inset from the full-width CTA buttons sitting underneath it.
	 */
	body.single-wps_products .swp-items-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
}