/*
 * WordPress integration layer.
 *
 * design.css is generated from design-v1 and scoped under .se-design, so it can
 * never reach the Astra header, the footer, or a Learning Center article. This
 * file is the hand written half: it lets the design break out of Astra's content
 * container and strips the page furniture the design supplies itself.
 *
 * Everything here is keyed to the design page template or the .se-design
 * wrapper, so no other page on the site is affected.
 */

/* Break out of whatever container Astra wraps the content in, at any width. */
.se-design {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
}

/* No overflow clipping here on purpose. `overflow-x: clip` on this wrapper makes
   it the scroll container for anything sticky inside it, which pinned the
   configurator's stage to the wrapper instead of the viewport and made the page
   expensive enough to paint that screenshots timed out. Nothing inside the
   design overflows horizontally anyway, because every full bleed section is
   exactly 100vw. */

/* The design has its own headline. Astra's entry header would repeat it. */
.page-template-page-design .entry-header,
.page-template-page-design .ast-single-entry-banner,
.page-template-page-design .page-title,
.se-design .entry-header {
	display: none;
}

/* Astra's container gives the content a max width and generous padding. The
   design manages its own gutters, so both have to go on this template only. */
.page-template-page-design .site-content > .ast-container,
.page-template-page-design .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.page-template-page-design .site-content > .ast-container {
	padding-top: 0;
	padding-bottom: 0;
}

.page-template-page-design #primary,
.page-template-page-design #primary .entry-content,
.page-template-page-design .ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Astra's box shadow and border around the article read as a seam between our
   full bleed sections. */
.page-template-page-design .ast-separate-container .ast-article-single {
	background: none;
	box-shadow: none;
}

/* ------------------------------------------------------- Learning Center hubs */

/* The hub list is the whole navigation of this page, so the links are large
   enough to be read and tapped by someone over fifty, not a tight bullet list. */
.se-design .hub {
	padding: 40px 0 34px;
}

.se-design .hub.mist {
	background: var(--mist);
}

.se-design .hub h2 {
	margin: 0 0 12px;
}

.se-design p.hubintro {
	margin: 0 0 22px;
	font-size: 17.5px;
	color: var(--read);
	text-wrap: pretty;
}

.se-design .hublinks {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 2px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-design .hublinks li {
	border-bottom: 1px solid var(--pale);
}

.se-design .hublinks a {
	display: block;
	padding: 13px 26px 13px 0;
	position: relative;
	font-family: var(--soft);
	font-size: 17.5px;
	font-weight: 700;
	color: var(--blue-deep);
	text-decoration: none;
	line-height: 1.35;
}

.se-design .hublinks a::after {
	content: "\2192";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY( -50% );
	color: var(--accent);
	transition: transform .18s ease;
}

.se-design .hublinks a:hover {
	color: var(--blue-mid);
}

.se-design .hublinks a:hover::after {
	transform: translate( 4px, -50% );
}

.se-design p.hubcta {
	margin: 28px 0 0;
}

/* The testimonial wall reuses the homepage grid, but its captions carry the name
   on its own, with no quote above them, so they need a little more room. */
.se-design .tgrid .t figcaption {
	padding-top: 10px;
}

/* ------------------------------------------------------------------- the FAQ */

.se-design .faqwrap {
	padding: 42px 0 38px;
}

.se-design .faqgroup {
	margin: 30px 0 10px;
	font-family: var(--soft);
	font-size: 20px;
	font-weight: 800;
	color: var(--blue-mid);
}

.se-design .faqgroup:first-of-type {
	margin-top: 18px;
}

/* Big targets and full size question text. The person reading this is over
   fifty and is checking a claim, not skimming. */
.se-design .faq details {
	border-bottom: 1px solid var(--pale);
}

.se-design .faq summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 17px 44px 17px 0;
	font-family: var(--soft);
	font-size: 18.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
	text-wrap: balance;
}

.se-design .faq summary::-webkit-details-marker {
	display: none;
}

.se-design .faq summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 26px;
	font-weight: 400;
	color: var(--accent);
	line-height: 1;
}

.se-design .faq details[open] summary::after {
	content: "\2212";
}

.se-design .faq summary:hover {
	color: var(--blue-deep);
}

.se-design .faq details p {
	margin: 0 0 20px;
	padding-right: 44px;
	font-size: 17.5px;
	color: var(--read);
	text-wrap: pretty;
}

/* The see all disclosure on a hub.

   Styled as a real control rather than a small grey link, because it is the only
   way to reach the rest of the section and the reader is over fifty. The links
   inside are in the HTML whether it is open or closed, so nothing is hidden from
   a crawler, only from the eye. */
.se-design .hubmore {
	margin-top: 6px;
}

.se-design .hubmore > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	padding: 12px 22px;
	border: 2px solid var(--blue-mid);
	border-radius: 999px;
	font-family: var(--soft);
	font-size: 17px;
	font-weight: 700;
	color: var(--blue-deep);
	transition: background .18s ease, color .18s ease;
}

.se-design .hubmore > summary::-webkit-details-marker {
	display: none;
}

.se-design .hubmore > summary::after {
	content: "\2193";
	font-size: 18px;
	color: var(--accent);
}

.se-design .hubmore[open] > summary::after {
	content: "\2191";
}

.se-design .hubmore > summary:hover {
	background: var(--blue-deep);
	color: #fff;
}

.se-design .hubmore > summary:hover::after {
	color: var(--accent-soft);
}

.se-design .hubmore > summary .open,
.se-design .hubmore[open] > summary .closed {
	display: none;
}

.se-design .hubmore[open] > summary .open {
	display: inline;
}

.se-design .hubmore .hublinks {
	margin-top: 14px;
}

/* The hub's Build Your Mattress button.

   design.css only styles .big inside .cta, because in the original page that was
   the only place a button existed. Outside that container it was rendering as a
   plain blue text link, which is not a call to action. Same treatment as the
   configurator's primary button so there is one button style on the site. */
.se-design .hubcta .big {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 18px 34px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--soft);
	font-size: 20px;
	font-weight: 800;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.se-design .hubcta .big:hover {
	background: #B0632F;
	transform: translateY( -2px );
}

/* Open state reads as one list with the control underneath.

   A details element always paints its summary first, so when expanded the
   "Show fewer" button was sitting in the middle of the links. Reversing the
   column puts the four extra links up against the twelve above them, where they
   belong, and drops the control to the bottom. Purely visual, so the source
   order and the tab order are untouched. */
.se-design .hubmore[open] {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
}

/* Only the control shrinks to its own width. The list has to stay full width or
   the extra links drop out of the two column grid the twelve above them are in. */
.se-design .hubmore[open] > summary {
	align-self: flex-start;
}

.se-design .hubmore[open] .hublinks {
	margin-top: 0;
	margin-bottom: 16px;
	width: 100%;
}

/* ------------------------------------------------------------ GOLS certificate

   Every GOLS logo links through to the certificate page. A certification mark
   you cannot click to the certificate is decoration, and the argument of this
   whole site is that its claims are checkable. */
.se-design a.golscert {
	display: inline-block;
	line-height: 0;
	border-radius: 6px;
	transition: transform .18s ease, box-shadow .18s ease;
}

.se-design a.golscert:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba(30,75,82,.2);
}

.se-design a.golscert:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
}

/* The worded link, for anyone who does not read a logo as clickable. */
.se-design p.golsread {
	margin: 14px 0 0;
}

.se-design p.golsread a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--soft);
	font-size: 17px;
	font-weight: 700;
	color: var(--blue-deep);
	text-decoration: none;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
}

.se-design p.golsread a::after {
	content: "\2192";
	color: var(--accent);
}

.se-design p.golsread a:hover {
	color: var(--blue-mid);
}

.se-design .three p.golsread {
	margin-top: 10px;
}

.se-design .three p.golsread a {
	font-size: 16px;
}

/* -------------------------------------------------------- video lightbox

   The player opens over the page rather than inside the circular tile. A circle
   is a good shape for a face and a terrible one for a scrub bar: the first
   version inherited the tile's 999px radius and clipped its own controls.

   These are finished social cards with the customer's name and star rating
   burned into the bottom of the frame, so the stage takes the video's own aspect
   ratio and plays it whole. The circle stays a crop of the face. */
.se-lightbox {
	width: 100%;
	max-width: none;
	max-height: none;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.se-lightbox::backdrop {
	background: rgba( 12, 24, 26, .88 );
}

.se-lb-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 100%;
	padding: 58px 20px 24px;
	box-sizing: border-box;
}

/* The stage is sized in pixels by the script, not by aspect-ratio here.

   A CSS ratio box collapses in this layout: the iframe inside is absolutely
   positioned, so the stage has no content to size against and aspect-ratio has
   nothing to resolve from. Which axis binds also flips between a 9:16 card on a
   laptop and a 16:9 card on a phone. Measuring is shorter than the CSS that
   would cover both. */
.se-lb-stage {
	position: relative;
	flex: 0 0 auto;
	border-radius: 16px;
	overflow: hidden;
	background: #0C181A;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, .5 );
}

.se-lb-stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.se-lb-cap {
	margin: 0;
	font-family: var(--soft);
	font-size: 19px;
	font-weight: 800;
	color: #fff;
	text-align: center;
}

/* Big target, high contrast, and it does not sit on top of the video. */
.se-lb-close {
	position: absolute;
	top: 12px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid rgba( 255, 255, 255, .5 );
	border-radius: 999px;
	background: rgba( 12, 24, 26, .7 );
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.se-lb-close:hover {
	background: var(--accent);
	border-color: var(--accent);
}

.se-lb-close:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

@media ( max-width: 620px ) {
	.se-lb-inner {
		padding: 54px 10px 18px;
	}

	.se-lb-close {
		top: 8px;
		right: 10px;
	}
}

/* design.css sets `img { display: block }` globally, which is right for the big
   photographs it was written for and wrong for a mark set in a sentence. A block
   level image inside an inline link forces a line break, which is why the GOLS
   mark kept landing alone at the start of the next line. It was never a wrapping
   problem. */
.se-design img.golsinline {
	display: inline-block;
	height: 1.5em;
	width: auto;
	vertical-align: -.42em;
	margin: 0 .18em;
	border-radius: 3px;
}


/* ---------------------------------------------------------- category pages
   templates/product-category.php. Intro from the category description, then
   cards in the site's style. Adjustable beds: USA made first, accessories in a
   smaller row at the end. */
.se-design.se-shop .cat-head { padding: 44px 0 10px; }
.se-design .cat-head h1 { font-size: clamp(34px, 4.6vw, 56px); margin: 0 0 12px; }
.se-design .cat-desc { font-size: 17px; line-height: 1.55; color: var(--read); }
.se-design .cat-desc p { margin: 0 0 12px; }
.se-design .cat-extra { margin: 8px 0 0; font-size: 16.5px; color: var(--ink2); }
.se-design .cat-extra a { color: var(--blue-deep); font-weight: 700; }
.se-design .cat-list { padding: 26px 0 40px; }
.se-design .cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.se-design .cat-grid.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.se-design .cat-sub { font-family: var(--soft); font-weight: 700; font-size: 24px; letter-spacing: 0; margin: 40px 0 14px; color: var(--ink); }
.se-design .cat-card {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--pale);
	border-radius: 18px;
	background: var(--white);
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.se-design .cat-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 18px 40px rgba(30,75,82,.14); }
.se-design .cat-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--mist); }
.se-design .cat-card .cat-noimg { display: block; aspect-ratio: 4 / 3; background: var(--mist); }
.se-design .cat-card .cat-in { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.se-design .cat-card b { font-family: var(--soft); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--ink); }
.se-design .cat-flag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--pale); color: var(--blue-deep); font-family: var(--soft); font-size: 12.5px; font-weight: 800; }
.se-design .cat-short { font-size: 15px; line-height: 1.45; color: var(--ink2); flex: 1; }
.se-design .cat-price { font-family: var(--soft); font-weight: 800; font-size: 18px; color: var(--blue-deep); margin-top: 4px; }
.se-design .cat-go { align-self: flex-start; margin-top: 6px; padding: 9px 18px; border-radius: 999px; background: var(--blue-deep); color: #fff; font-family: var(--soft); font-weight: 800; font-size: 15px; }
.se-design .cat-card:hover .cat-go { background: var(--accent); }
.se-design .cat-grid.small .cat-card b { font-size: 16px; }
.se-design .cat-grid.small .cat-card img { aspect-ratio: 1 / 1; }
.se-design .cat-empty { text-align: center; font-size: 18px; color: var(--ink2); }
.se-design .cat-call { padding: 30px 0 60px; text-align: center; }
.se-design .cat-call h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 6px; }
.se-design .cat-call p { margin: 0 0 14px; color: var(--ink2); }
.se-design .cat-tel { display: inline-block; padding: 12px 30px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--soft); font-weight: 800; font-size: 26px; text-decoration: none; }
.se-design .cat-tel:hover { background: #B0632F; }
.se-design .se-notices:empty { display: none; }
@media (max-width: 900px) {
	.se-design .cat-grid, .se-design .cat-grid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 520px) {
	.se-design .cat-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ------------------------------------------------------------ product pages
   templates/product-single.php. WooCommerce's own markup inside .se-design,
   restyled to the site: big soft title, pill buttons, plain tabs. */
.se-design.se-product .sp-shell { padding-top: 34px; padding-bottom: 20px; }
.se-design.se-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.se-design.se-product div.product > .woocommerce-product-gallery,
.se-design.se-product div.product > .summary { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
.se-design.se-product div.product > .woocommerce-tabs,
.se-design.se-product div.product > .related,
.se-design.se-product div.product > .upsells { grid-column: 1 / -1; }
.se-design.se-product .woocommerce-product-gallery img { border-radius: 18px; }
.se-design.se-product .product_title { font-family: var(--soft); font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 0 0 10px; color: var(--ink); }
.se-design.se-product .summary .price { font-family: var(--soft); font-weight: 800; font-size: 24px; color: var(--blue-deep); margin: 0 0 12px; }
.se-design.se-product .summary .price del { opacity: .5; font-weight: 600; }
.se-design.se-product .woocommerce-product-details__short-description { font-size: 17px; line-height: 1.55; color: var(--read); margin: 0 0 18px; }
.se-design.se-product .woocommerce-product-details__short-description p { margin: 0 0 10px; }
.se-design.se-product table.variations { margin: 0 0 14px; }
.se-design.se-product table.variations th { font-family: var(--soft); font-weight: 700; color: var(--ink2); padding: 6px 12px 6px 0; }
.se-design.se-product table.variations select,
.se-design.se-product .quantity .qty { min-height: 44px; padding: 6px 12px; border: 2px solid var(--pale); border-radius: 10px; background: var(--white); color: var(--ink); font-family: var(--soft); font-weight: 700; font-size: 16px; }
.se-design.se-product .reset_variations { font-size: 14px; color: var(--ink2); }
.se-design.se-product .woocommerce-variation-price .price { font-size: 26px; }
.se-design.se-product .single_add_to_cart_button,
.se-design.se-product .sp-btn {
	display: inline-block;
	min-height: 52px;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-family: var(--soft);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, transform .16s;
}
.se-design.se-product .single_add_to_cart_button:hover,
.se-design.se-product .sp-btn:hover { background: #B0632F; transform: translateY(-2px); color: #fff; }
.se-design.se-product .single_add_to_cart_button.disabled { opacity: .5; }
.se-design.se-product .product_meta { font-size: 14px; color: var(--ink2); margin-top: 8px; }
.se-design.se-product .woocommerce-tabs { margin-top: 30px; }
.se-design.se-product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 18px; border-bottom: 2px solid var(--pale); display: flex; gap: 6px; }
.se-design.se-product .woocommerce-tabs ul.tabs::before,
.se-design.se-product .woocommerce-tabs ul.tabs::after { display: none; }
.se-design.se-product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; box-shadow: none; }
.se-design.se-product .woocommerce-tabs ul.tabs li::before,
.se-design.se-product .woocommerce-tabs ul.tabs li::after { display: none; }
.se-design.se-product .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 16px; font-family: var(--soft); font-weight: 700; font-size: 16px; color: var(--ink2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.se-design.se-product .woocommerce-tabs ul.tabs li.active a { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }
.se-design.se-product .woocommerce-Tabs-panel { font-size: 17px; line-height: 1.6; color: var(--read); max-width: 860px; }
.se-design.se-product .woocommerce-Tabs-panel h2 { font-size: 26px; font-weight: 700; letter-spacing: 0; margin: 0 0 12px; }
.se-design.se-product .woocommerce-Tabs-panel h3 { font-family: var(--soft); font-weight: 700; font-size: 20px; margin: 22px 0 8px; }
.se-design.se-product .related > h2,
.se-design.se-product .upsells > h2 { font-size: 28px; font-weight: 700; letter-spacing: 0; margin: 30px 0 14px; }
.se-design.se-product ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.se-design.se-product ul.products::before, .se-design.se-product ul.products::after { display: none; }
.se-design.se-product ul.products li.product { width: auto; margin: 0; padding: 0; border: 2px solid var(--pale); border-radius: 16px; overflow: hidden; background: var(--white); }
.se-design.se-product ul.products li.product img { border-radius: 0; margin: 0; }
.se-design.se-product ul.products li.product .woocommerce-loop-product__title { font-family: var(--soft); font-weight: 800; font-size: 16px; padding: 12px 14px 0; color: var(--ink); }
.se-design.se-product ul.products li.product .price { padding: 0 14px; font-family: var(--soft); font-weight: 800; color: var(--blue-deep); }
.se-design.se-product ul.products li.product .button { margin: 8px 14px 14px; border-radius: 999px; background: var(--blue-deep); color: #fff; font-family: var(--soft); font-weight: 800; }
.se-design.se-product .sp-addon { padding: 26px 0 0; text-align: center; }
.se-design.se-product .sp-addon h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 6px; }
.se-design.se-product .sp-addon p { max-width: 60ch; margin: 0 auto 14px; color: var(--ink2); }
@media (max-width: 900px) {
	.se-design.se-product div.product { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.se-design.se-product ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Staging has no stock sync, so WooCommerce thinks most things are out of
   stock. Stock never gates an order here (D139), so the badge only frightens. */
.se-design.se-product .ast-shop-product-out-of-stock,
.se-design.se-product ul.products li.product .ast-shop-product-out-of-stock,
.se-design.se-product .stock.out-of-stock { display: none !important; }


/* ------------------------------------------------------------ UX pass 9/14
   Trust proof, firmness swatches, From prices, stacked description. */
.se-design .cat-trust { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.se-design .cat-trust li { margin: 0; }
.se-design .cat-trust a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--mist); border: 1.5px solid var(--pale); color: var(--ink); font-family: var(--soft); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.se-design .cat-trust a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-mid); flex: 0 0 auto; }
.se-design .cat-trust a:hover { border-color: var(--blue-mid); }
.se-design .cat-head .cat-trust { justify-content: center; margin-top: 18px; }
.se-design.se-product .summary .cat-trust { margin: 18px 0 0; }
.se-design .cat-sw { display: inline-flex; flex-direction: column; gap: 3px; width: 44px; margin-bottom: 2px; }
.se-design .cat-sw i { display: block; height: 8px; border-radius: 3px; background: var(--c, #ddd); }
.se-design .cat-sw .d1 { --c: #A9D3EE; } .se-design .cat-sw .d2 { --c: #62A9DE; } .se-design .cat-sw .d3 { --c: #2C6FB5; }
.se-design .cat-sw .d4 { --c: #A9D48C; } .se-design .cat-sw .d5 { --c: #63A94F; } .se-design .cat-sw .d6 { --c: #2A6B35; }
.se-design .cat-flag.pop { background: var(--accent); color: #fff; }
.se-design .cat-pricenote { display: block; font-family: var(--sans); font-weight: 500; font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.se-design .cat-card .cat-pricenote { display: none; }
/* The description in full. Tabs hid it, and a buyer over fifty does not hunt. */
.se-design.se-product .woocommerce-tabs ul.tabs { display: none; }
.se-design.se-product .woocommerce-Tabs-panel { display: block !important; margin: 0 0 34px; }
.se-design.se-product .woocommerce-Tabs-panel > h2:first-child { display: block; padding-bottom: 8px; border-bottom: 2px solid var(--pale); }


/* ---------------------------------------------------------- phone buying
   Full width controls, and a sticky price bar that returns to the size picker. */
.se-design .sp-sticky { display: none; }
@media (max-width: 900px) {
	/* !important: WooCommerce and Astra size this button with their own width rule. */
	.se-design.se-product form.cart .single_add_to_cart_button { width: 100% !important; float: none !important; margin-left: 0 !important; }
	.se-design.se-product form.cart .quantity { float: none !important; }
	.se-design.se-product form.cart .quantity { margin-bottom: 10px; }
	.se-design.se-product table.variations,
	.se-design.se-product table.variations tbody,
	.se-design.se-product table.variations tr,
	.se-design.se-product table.variations th,
	.se-design.se-product table.variations td { display: block; width: 100%; }
	.se-design.se-product table.variations select { width: 100%; min-height: 50px; }
	.se-design .sp-sticky:not([hidden]) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		align-items: center;
		gap: 0 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--white);
		border-top: 2px solid var(--pale);
		box-shadow: 0 -8px 24px rgba(23, 40, 43, .12);
	}
	.se-design .sp-sticky-name { grid-column: 1; font-family: var(--soft); font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.se-design .sp-sticky-price { grid-column: 1; font-family: var(--soft); font-weight: 800; font-size: 17px; color: var(--blue-deep); }
	.se-design .sp-sticky .sp-btn { grid-column: 2; grid-row: 1 / 3; min-height: 48px; padding: 11px 20px; font-size: 16px; }
	.se-design.se-product .cat-call { padding-bottom: 110px; }
}


/* ---------------------------------------------------------------- articles
   templates/article.php: every post and plain page. Reading width from
   .narrow, 18px body, site headings. */
.se-design.se-article .art-head { padding-top: 42px; padding-bottom: 6px; }
.se-design .art-crumb { font-family: var(--soft); font-weight: 700; font-size: 14.5px; color: var(--blue-mid); margin: 0 0 12px; }
.se-design .art-crumb a { color: var(--blue-mid); text-decoration: none; }
.se-design .art-crumb a:hover { text-decoration: underline; }
.se-design .art-head h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 300; line-height: 1.08; margin: 0 0 12px; text-wrap: balance; }
.se-design .art-meta { font-size: 14.5px; color: var(--ink2); margin: 0; }
.se-design .art-body { padding-top: 18px; padding-bottom: 30px; font-size: 18px; line-height: 1.7; color: var(--read); }
.se-design .art-body p { margin: 0 0 18px; }
.se-design .art-body h2 { font-family: var(--soft); font-weight: 700; letter-spacing: -.01em; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 40px 0 12px; color: var(--ink); text-wrap: balance; }
.se-design .art-body h3 { font-family: var(--soft); font-weight: 700; letter-spacing: 0; font-size: 21px; line-height: 1.3; margin: 28px 0 8px; color: var(--ink); }
.se-design .art-body h4 { font-family: var(--soft); font-weight: 700; font-size: 18px; margin: 22px 0 6px; color: var(--ink); }
.se-design .art-body a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.se-design .art-body ul, .se-design .art-body ol { margin: 0 0 20px; padding-left: 1.3em; }
.se-design .art-body li { margin: 0 0 8px; }
.se-design .art-body img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 24px auto; }
.se-design .art-body figure { margin: 26px 0; }
.se-design .art-body figure img { margin: 0 auto; }
.se-design .art-body figcaption { font-size: 14.5px; color: var(--ink2); text-align: center; margin-top: 8px; }
.se-design .art-body blockquote { margin: 26px 0; padding: 16px 22px; border-left: 4px solid var(--accent); background: var(--mist); border-radius: 0 14px 14px 0; font-size: 19px; }
.se-design .art-body blockquote p:last-child { margin-bottom: 0; }
.se-design .art-body cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; font-size: 15px; color: var(--ink2); }
.se-design .art-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 16px; display: block; overflow-x: auto; }
.se-design .art-body th, .se-design .art-body td { border-bottom: 1px solid var(--pale); padding: 10px 8px; text-align: left; vertical-align: top; }
.se-design .art-body hr { border: 0; border-top: 2px solid var(--pale); margin: 32px 0; }
.se-design .se-video { position: relative; aspect-ratio: 16 / 9; margin: 28px 0; border-radius: 16px; overflow: hidden; background: #0d1a1c; }
.se-design .se-video iframe, .se-design .se-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.se-design .art-body iframe { max-width: 100%; }
.se-design .art-next { padding: 6px 0 34px; }
.se-design .art-next h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 16px; }

/* ------------------------------------------------------------------ footer
   inc/site-chrome.php. Replaces Astra's "Powered by" footer on every page. */
.se-design.se-foot { background: #173B41; color: #D6E6E8; padding: 58px 0 26px; margin: 0; font-family: var(--sans); }
.se-design.se-foot a { color: #fff; text-decoration: none; }
.se-design.se-foot a:hover { text-decoration: underline; }
.se-design.se-foot .foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 34px; }
.se-design.se-foot .foot-logo { display: inline-block; background: #fff; border-radius: 14px; padding: 8px 14px; }
.se-design.se-foot .foot-logo img { display: block; height: 52px; width: auto; }
.se-design.se-foot .foot-line { margin: 16px 0 4px; font-size: 15px; line-height: 1.5; color: #D6E6E8; max-width: 34ch; }
.se-design.se-foot .foot-tel { display: inline-block; margin: 10px 0 8px; font-family: var(--soft); font-weight: 800; font-size: 26px; letter-spacing: .01em; }
.se-design.se-foot address { font-style: normal; font-size: 15px; line-height: 1.5; margin: 0 0 10px; color: #D6E6E8; }
.se-design.se-foot .foot-hours { font-size: 15px; line-height: 1.5; margin: 0; color: #D6E6E8; }
.se-design.se-foot h2 { font-family: var(--soft); font-weight: 800; font-size: 16px; letter-spacing: .02em; line-height: 1.2; color: #fff; margin: 6px 0 14px; }
.se-design.se-foot ul { list-style: none; margin: 0; padding: 0; }
.se-design.se-foot li { margin: 0 0 10px; font-size: 15.5px; line-height: 1.35; }
.se-design.se-foot .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #B9CFD2; }
.se-design.se-foot .foot-base p { margin: 0; }
@media (max-width: 900px) {
	.se-design.se-foot .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
	.se-design.se-foot .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.se-design.se-foot .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ header
   Real logo from the theme file, title text hidden, phone as a pill. */
.site-header .se-logo img, .site-header .custom-logo-link img { max-height: 48px; width: auto; }
.site-header .ast-site-identity .site-title, .site-header .ast-site-identity .site-description { display: none; }
.main-header-menu .menu-phone > a,
.main-header-menu .menu-phone > .menu-link { font-family: var(--soft); font-weight: 800 !important; color: #fff !important; background: var(--accent); border-radius: 999px; padding: 8px 18px !important; margin-left: 6px; line-height: 1.2; }
.main-header-menu .menu-phone > a:hover { background: #B0632F; color: #fff !important; }


/* ---------------------------------------------------------------- landings
   Shop landing (/store/, /shop/) and blog index (/blog/). Tiles reuse
   .cat-card from the category pages. */
.se-design.se-landing .ld-head { padding-top: 44px; padding-bottom: 6px; }
.se-design .ld-head h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 300; line-height: 1.06; margin: 0 0 12px; }
.se-design .ld-head p { font-size: 18px; line-height: 1.55; color: var(--read); margin: 0 0 6px; }
.se-design .ld-head p a { color: var(--blue-deep); font-weight: 700; }
.se-design .ld-head .cat-trust { justify-content: center; margin-top: 18px; }
.se-design .ld-group { padding: 26px 0 10px; }
.se-design .ld-group h2 { font-family: var(--soft); font-weight: 800; letter-spacing: 0; font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 16px; }
.se-design .bl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.se-design .bl-card { margin: 0; }
.se-design .bl-card a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 20px 18px; border: 2px solid var(--pale); border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.se-design .bl-card a:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 34px rgba(30, 75, 82, .12); }
.se-design .bl-hub { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--pale); color: var(--blue-deep); font-family: var(--soft); font-weight: 800; font-size: 12.5px; }
.se-design .bl-card b { font-family: var(--soft); font-weight: 800; font-size: 19px; line-height: 1.25; text-wrap: balance; }
.se-design .bl-excerpt { font-size: 15px; line-height: 1.5; color: var(--ink2); flex: 1; }
.se-design .bl-date { font-size: 13.5px; color: var(--ink2); }
.se-design .bl-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 30px 0 40px; }
.se-design .bl-pages .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--pale); color: var(--ink); font-family: var(--soft); font-weight: 700; text-decoration: none; }
.se-design .bl-pages .page-numbers.current { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
@media (max-width: 900px) { .se-design .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .se-design .bl-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- cart, checkout
   templates/shopflow.php around the classic WooCommerce shortcodes. */
.se-design.se-shopflow .sf-head { padding-top: 36px; padding-bottom: 10px; }
.se-design.se-shopflow h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 300; line-height: 1.08; margin: 0 0 16px; }
.se-design .sf-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 12px; padding: 0; counter-reset: sf; font-family: var(--soft); font-weight: 700; font-size: 15.5px; color: var(--ink2); }
.se-design .sf-steps li { counter-increment: sf; display: flex; align-items: center; gap: 9px; margin: 0; }
.se-design .sf-steps li::before { content: counter(sf); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pale); color: var(--blue-deep); font-size: 14px; font-weight: 800; }
.se-design .sf-steps li.on { color: var(--ink); }
.se-design .sf-steps li.on::before { background: var(--blue-deep); color: #fff; }
.se-design .sf-steps li.done::before { background: var(--blue-mid); color: #fff; }
.se-design.se-shopflow .sf-body { padding-bottom: 26px; font-size: 16.5px; }
.se-design.se-shopflow table.shop_table { width: 100%; border: 2px solid var(--pale) !important; border-radius: 16px; border-collapse: separate !important; border-spacing: 0; overflow: hidden; background: var(--white); margin: 0 0 22px; }
.se-design.se-shopflow table.shop_table th { font-family: var(--soft); font-weight: 800; color: var(--ink); background: var(--mist); padding: 14px 16px !important; border: 0 !important; }
.se-design.se-shopflow table.shop_table td { padding: 16px !important; border: 0 !important; border-top: 1px solid var(--pale) !important; vertical-align: middle; }
.se-design.se-shopflow table.shop_table .product-name a { font-family: var(--soft); font-weight: 800; color: var(--ink); text-decoration: none; font-size: 17px; }
.se-design.se-shopflow table.shop_table .product-thumbnail img { width: 88px !important; height: auto; border-radius: 10px; }
.se-design.se-shopflow .cart_totals, .se-design.se-shopflow #order_review { background: var(--mist); border-radius: 18px; padding: 22px; }
.se-design.se-shopflow .cart_totals table.shop_table, .se-design.se-shopflow #order_review table.shop_table { margin-bottom: 16px; }
.se-design.se-shopflow .cart_totals h2, .se-design.se-shopflow #order_review_heading, .se-design.se-shopflow #customer_details h3 { font-family: var(--soft); font-weight: 800; letter-spacing: 0; font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
.se-design.se-shopflow .order-total .amount { font-family: var(--soft); font-weight: 800; font-size: 24px; color: var(--blue-deep); }
.se-design.se-shopflow .checkout-button, .se-design.se-shopflow #place_order { display: block; width: 100%; min-height: 58px; padding: 16px 24px !important; border: 0 !important; border-radius: 999px !important; background: var(--accent) !important; color: #fff !important; font-family: var(--soft); font-weight: 800; font-size: 19px !important; line-height: 1.3; text-align: center; }
.se-design.se-shopflow .checkout-button:hover, .se-design.se-shopflow #place_order:hover { background: #B0632F !important; }
.se-design.se-shopflow .button:not(.checkout-button):not(#place_order) { border-radius: 999px !important; background: var(--white) !important; border: 2px solid var(--pale) !important; color: var(--ink) !important; font-family: var(--soft); font-weight: 700; padding: 10px 20px !important; }
.se-design.se-shopflow .button:not(.checkout-button):not(#place_order):hover { border-color: var(--blue-mid) !important; }
.se-design.se-shopflow input.input-text, .se-design.se-shopflow select, .se-design.se-shopflow textarea { min-height: 48px; padding: 10px 14px; border: 2px solid var(--pale); border-radius: 10px; font-size: 16px; background: var(--white); color: var(--ink); }
.se-design.se-shopflow input.input-text:focus, .se-design.se-shopflow select:focus, .se-design.se-shopflow textarea:focus { border-color: var(--blue-mid); outline: 3px solid rgba(62, 124, 134, .22); }
.se-design.se-shopflow .form-row label { font-family: var(--soft); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.se-design.se-shopflow #payment { background: var(--white) !important; border: 2px solid var(--pale); border-radius: 14px; }
.se-design.se-shopflow .cart-empty { font-family: var(--soft); font-size: 20px; }
.se-design.se-shopflow .sf-trust { padding-bottom: 54px; }
.se-design.se-shopflow .sf-trust .cat-trust { justify-content: center; }
@media (min-width: 1000px) {
	.se-design.se-shopflow form.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
	.se-design.se-shopflow form.checkout > * { grid-column: 1 / -1; }
	.se-design.se-shopflow form.checkout > #customer_details { grid-column: 1; grid-row: span 3; }
	.se-design.se-shopflow form.checkout > #order_review_heading, .se-design.se-shopflow form.checkout > #order_review { grid-column: 2; }
	.se-design.se-shopflow #customer_details .col-1, .se-design.se-shopflow #customer_details .col-2 { float: none; width: 100%; }
}

/* HERO LAYER STACK (blocks/hero-stack, inc/hero.php)
   Every latex slab is the same off-white (D39). Firmness is only ever words. */
.se-design .stage.has-stack{justify-content:center;padding:clamp(26px,4vw,48px) 16px clamp(22px,3vw,34px)}
.se-design .hero-stack{--d:clamp(12px,2.1vw,24px);--gap:calc(var(--d) + clamp(10px,1.8vw,22px));
  --latex:#F6F1E4;--latex-top:#FBF8EF;--latex-side:#E2DAC6;
  width:100%;max-width:760px;margin:0 auto;text-align:left}
.se-design .hs-rows{list-style:none;margin:0;padding:var(--d) 0 0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.se-design .hs-row{position:relative;z-index:calc(var(--z) + 1);display:grid;
  grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:center;
  column-gap:calc(var(--d) + clamp(14px,2.6vw,34px));margin:var(--gap) 0 0;
  transition:margin-top .7s cubic-bezier(.2,.8,.2,1)}
.se-design .hs-row:first-child{margin-top:0}
.se-design .hs-slab{position:relative;display:block;height:clamp(30px,5.4vw,58px);
  margin-right:var(--d);border-radius:3px 0 0 3px;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,104,70,.16) 0 1.1px, transparent 1.6px) 0 0/11px 11px,
    linear-gradient(180deg,var(--latex) 0%,#EEE7D6 100%);
  box-shadow:inset 0 -1px 0 rgba(90,75,45,.12)}
.se-design .hs-slab::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--d);
  background:
    radial-gradient(circle at 50% 50%, rgba(120,104,70,.13) 0 1.1px, transparent 1.6px) 0 0/11px 11px,
    var(--latex-top);
  transform:skewX(-45deg);transform-origin:bottom left}
.se-design .hs-slab::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:var(--d);
  background:var(--latex-side);transform:skewY(-45deg);transform-origin:top left}
.se-design .hs-cover .hs-slab{height:clamp(14px,2.2vw,22px);border-radius:8px 0 0 3px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EDF1F1 100%);
  box-shadow:inset 0 -3px 0 -1px rgba(30,75,82,.08)}
.se-design .hs-cover .hs-slab::before{background:#FFFFFF}
.se-design .hs-cover .hs-slab::after{background:#DCE3E3}
.se-design .hs-cover .hs-slab{background-image:
    linear-gradient(90deg, rgba(62,124,134,.45) 50%, transparent 50%),
    linear-gradient(180deg,#FFFFFF 0%,#EDF1F1 100%);
  background-size:8px 2px, 100% 100%;background-repeat:repeat-x, no-repeat;
  background-position:0 calc(100% - 3px), 0 0}
.se-design .hs-label{position:relative;display:block;font-size:clamp(12.5px,1.45vw,15px);line-height:1.25;
  color:var(--ink2);transition:opacity .45s ease}
.se-design .hs-label::before{content:"";position:absolute;right:calc(100% + 8px);top:50%;
  width:calc(var(--d) + clamp(4px,1.4vw,22px));border-top:1px solid rgba(30,75,82,.35)}
.se-design .hs-label b{display:block;font-family:var(--soft);font-weight:700;font-size:1.08em;color:var(--blue-deep)}
.se-design .hs-label span{display:block}
.se-design .hs-caption{margin:clamp(22px,3vw,34px) auto 0;max-width:52ch;text-align:center;
  font-size:clamp(14px,1.5vw,16px);line-height:1.45;color:var(--read)}
.se-design .hs-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:16px 0 0}
.se-design .hs-toggle{font:600 14px/1 var(--sans);color:var(--blue-deep);background:rgba(255,255,255,.7);
  border:1px solid rgba(30,75,82,.25);border-radius:999px;padding:12px 18px;cursor:pointer}
.se-design .hs-toggle:hover{background:#fff}
.se-design .hs-cta{font:700 14px/1 var(--sans);color:var(--accent-ink);background:var(--accent);
  border-radius:999px;padding:13px 20px;text-decoration:none}
.se-design .hs-cta:hover{filter:brightness(1.06);color:var(--accent-ink)}
.se-design .hs-toggle:focus-visible,.se-design .hs-cta:focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px}
/* Assembled: the layers close up and the callouts wait. */
.se-design .hero-stack.is-shut .hs-row{margin-top:0}
.se-design .hero-stack.is-shut .hs-label{opacity:0}
.se-design .hero-stack.hs-instant .hs-row,.se-design .hero-stack.hs-instant .hs-label{transition:none}
@media (max-width:520px){
  .se-design .hs-row{grid-template-columns:minmax(0,54fr) minmax(0,46fr)}
  .se-design .hs-label::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .se-design .hs-row,.se-design .hs-label{transition:none}
}

/* HEADLINE ON PHONES. The claim never wraps (it is one line by design) and its
   21px floor made it 402px wide in a 340px column, so phones showed "Most
   Comfortable Matt". Below 700px it is sized to the column instead. Same words,
   same strike and hand (D62 untouched); desktop sizes are unchanged. */
@media (max-width:700px){
  .se-design .hero .shell{padding-left:18px;padding-right:18px}
  .se-design .claim{font-size:min(21px, calc((100vw - 44px) / 19.6))}
}

/* PRODUCT PAGE PASS 2 (inc/product-page.php)
   Options as buttons, one category trail, and a "what's inside" stack on the
   arrangement pages. */
.se-design.se-product .single-product-category{display:none}
.se-design.se-product .sp-opts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.se-design.se-product .sp-opt{min-height:44px;padding:9px 15px;border:2px solid var(--pale);border-radius:12px;
  background:var(--white);color:var(--ink);font:700 15px/1.1 var(--soft);cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.se-design.se-product .sp-opt:hover{border-color:var(--blue)}
.se-design.se-product .sp-opt[aria-checked="true"]{border-color:var(--blue-deep);background:var(--mist);
  box-shadow:inset 0 0 0 1px var(--blue-deep)}
.se-design.se-product .sp-opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.se-design.se-product .sp-opt:focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px}
.se-design.se-product table.variations.sp-enhanced select{position:absolute!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;min-height:0!important;padding:0!important;border:0!important}
.se-design.se-product table.variations.sp-enhanced,
.se-design.se-product table.variations.sp-enhanced tbody,
.se-design.se-product table.variations.sp-enhanced tr,
.se-design.se-product table.variations.sp-enhanced th,
.se-design.se-product table.variations.sp-enhanced td{display:block;width:auto;border:0;background:none;padding:0}
.se-design.se-product table.variations.sp-enhanced tr{margin:0 0 14px}
.se-design.se-product table.variations.sp-enhanced th label{font:700 15px/1.2 var(--soft);color:var(--ink)}
.se-design.se-product table.variations.sp-enhanced th .sp-chosen{font-weight:600;color:var(--ink2);margin-left:6px}
.se-design.se-product .sp-inside{grid-column:1/-1;margin:26px 0 6px;padding:clamp(26px,4vw,44px) 16px;border-radius:26px;
  background:radial-gradient(700px 340px at 50% 0%, rgba(255,255,255,.92), transparent 60%),
    linear-gradient(168deg,#EEF6F7 0%,var(--pale) 55%,#BFD8DC 100%);text-align:center}
.se-design.se-product .sp-inside > h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 clamp(18px,3vw,30px)}

/* Astra prints the category line and the meta block through its own single
   product layout, with styles that outrank ours, so these need !important. */
.se-design.se-product .summary .single-product-category,
.se-design.se-product .summary .product_meta{display:none!important}

/* Compare the four arrangements (inc/product-page.php). Firmness in words. */
.se-design.se-product .sp-compare{grid-column:1/-1;margin:34px 0 6px;text-align:center}
.se-design.se-product .sp-compare > h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 18px}
.se-design.se-product .sp-cmp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left}
.se-design.se-product .sp-cmp-card{margin:0;padding:18px 18px 16px;border:2px solid var(--pale);border-radius:18px;background:var(--white);display:flex;flex-direction:column;gap:8px}
.se-design.se-product .sp-cmp-card.is-here{border-color:var(--blue-deep);background:var(--mist)}
.se-design.se-product .sp-cmp-code{margin:0;font:800 22px/1 var(--soft);color:var(--ink)}
.se-design.se-product .sp-cmp-code span{display:inline-block;margin-left:6px;padding:4px 9px;border-radius:999px;background:var(--blue-deep);color:#fff;font:700 11.5px/1 var(--sans);vertical-align:middle}
.se-design.se-product .sp-cmp-short{margin:0;font-size:15px;line-height:1.4;color:var(--read);min-height:2.8em}
.se-design.se-product .sp-cmp-layers{margin:2px 0 0;padding:0;display:grid;gap:4px}
.se-design.se-product .sp-cmp-layers div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--pale);font-size:14.5px}
.se-design.se-product .sp-cmp-layers dt{color:var(--ink2);margin:0}
.se-design.se-product .sp-cmp-layers dd{margin:0;font-weight:700;color:var(--ink)}
.se-design.se-product .sp-cmp-price{margin:auto 0 0;padding-top:6px;font:800 18px/1.2 var(--soft);color:var(--blue-deep)}
.se-design.se-product .sp-cmp-link{align-self:flex-start;font:700 14.5px/1 var(--sans);color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.se-design.se-product .sp-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.se-design.se-product .sp-cmp{grid-template-columns:minmax(0,1fr)}.se-design.se-product .sp-cmp-short{min-height:0}}

/* Showroom line under the buy button, and the buy button before a size is
   picked: the same orange, faded, not Astra's pale blue. */
.se-design.se-product .sp-showroom{margin:10px 0 0;font-size:15px;color:var(--ink2)}
.se-design.se-product .sp-showroom a{font-family:var(--soft);font-weight:700;color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px;margin-right:6px}
.se-design.se-product .single_add_to_cart_button.disabled,
.se-design.se-product .single_add_to_cart_button:disabled{background:var(--accent)!important;color:#fff!important;opacity:.45;cursor:not-allowed;transform:none}

/* "Maintains Shape" over the latex sleeper from year ten (sag-slider). */
.se-design .sag-keeps{position:absolute;left:26%;top:41%;transform:translate(-50%,8px);z-index:2;
  padding:10px 18px;border-radius:999px;background:var(--blue-deep);color:#fff;white-space:nowrap;
  font:800 clamp(13px,1.5vw,22px)/1 var(--soft);box-shadow:0 8px 22px rgba(23,40,43,.22);
  opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.se-design .sag-keeps::before{content:"";display:inline-block;width:.5em;height:.9em;margin-right:.5em;
  border:solid #fff;border-width:0 .16em .16em 0;transform:translateY(-.12em) rotate(45deg)}
.se-design .sag-keeps::after{content:"";position:absolute;left:50%;top:100%;margin-left:-8px;
  border:8px solid transparent;border-top-color:var(--blue-deep)}
.se-design .sag-keeps.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:700px){.se-design .sag-keeps{padding:6px 10px;font-size:11px;top:44%}
  .se-design .sag-keeps::after{border-width:5px;margin-left:-5px}}
@media (prefers-reduced-motion:reduce){.se-design .sag-keeps{transition:none}}

/* Trust list as plain text lines, not pills (Jed 9/15: the chip style was
   harder to read). A small check leads each line; the text is the link. */
.se-design .cat-trust{display:block;list-style:none;margin:18px 0 0;padding:0}
.se-design .cat-trust li{margin:0;padding:0}
.se-design .cat-trust a{display:flex;align-items:baseline;gap:10px;padding:5px 0;border:0;border-radius:0;background:none;
  color:var(--ink);font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.4;text-decoration:none}
.se-design .cat-trust a::before{content:"";flex:0 0 auto;width:.42em;height:.78em;margin:0 .2em 0 .15em;border-radius:0;background:none;
  border:solid var(--blue-mid);border-width:0 .16em .16em 0;transform:translateY(-.1em) rotate(45deg)}
.se-design .cat-trust a:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
.se-design .cat-head .cat-trust{display:inline-block;text-align:left;margin-top:18px}

.se-design .photo.has-img{padding:0;overflow:hidden}

/* Adjustable beds in groups (product-category.php). */
.se-design .cat-group{margin:0 0 44px}
.se-design .cat-group:first-child .cat-sub{margin-top:0}
.se-design .cat-subline{margin:-4px 0 18px;font-size:17px;line-height:1.45;color:var(--ink2)}

/* Adjustable beds: Lee's video and the right-bed questions (product-category.php). */
.se-design .cat-guide{padding:10px 0 46px}
.se-design .cat-guide-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:start}
.se-design .cat-guide h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 16px}
.se-design .cat-guide .se-video{margin:0;position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 14px 34px rgba(23,40,43,.16)}
.se-design .cat-guide .se-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.se-design .cat-q{padding:12px 0;border-top:1px solid var(--pale)}
.se-design .cat-q:first-of-type{border-top:0;padding-top:0}
.se-design .cat-q h3{font-family:var(--soft);font-weight:800;font-size:18px;margin:0 0 4px;color:var(--ink)}
.se-design .cat-q p{margin:0;font-size:16px;line-height:1.5;color:var(--read)}
.se-design .cat-guide-more{margin:14px 0 0}
.se-design .cat-guide-more a{font-weight:700;color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.se-design .cat-guide-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

/* Builder page: half the space above "Build Your Mattress Layers" (Jed 9/15).
   Was Astra's 60px content margin plus the builder's 22px padding, 82px; now 41px. */
#primary:has(> .site-main > .se-byo-product){margin-top:19px!important}

/* Questions only, no answers, so the list ends level with the video (Jed 9/15). */
.se-design .cat-q{padding:11px 0}
.se-design .cat-q h3{margin:0}
.se-design .cat-guide-grid{align-items:stretch}
.se-design .cat-guide-q{display:flex;flex-direction:column}
.se-design .cat-guide-more{margin-top:auto;padding-top:12px}

/* Questions spread to the height of the video (Jed 9/15). */
.se-design .cat-guide-q{justify-content:flex-start}
.se-design .cat-guide-q .cat-q{flex:1 1 auto;display:flex;align-items:center;padding:0;min-height:36px}
.se-design .cat-guide-q .cat-q h3{font-size:clamp(16px,1.35vw,18px)}
.se-design .cat-guide-more{margin-top:10px;padding-top:0}
@media (max-width:900px){.se-design .cat-guide-q .cat-q{flex:none;padding:10px 0}}

/* Toppers: all six cards on one screen (Jed 9/15). Shorter image, two line
   description, tighter padding. The graphic has its own light background, so
   contain rather than cover keeps the whole slab and its label visible. */
.term-toppers .se-design .cat-grid{gap:18px}
.term-toppers .se-design .cat-card img{aspect-ratio:auto;height:clamp(110px,11vw,150px);object-fit:contain;object-position:center;background:var(--mist)}
.term-toppers .se-design .cat-card .cat-in{gap:4px;padding:12px 14px 14px}
.term-toppers .se-design .cat-card b{font-size:17px}
.term-toppers .se-design .cat-short{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.term-toppers .se-design .cat-price{font-size:16.5px;margin-top:2px}
.term-toppers .se-design .cat-go{margin-top:4px;padding:7px 15px;font-size:14px}

/* Trust list in two columns where there is room for it (category pages). */
.se-design .cat-head .cat-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 30px;text-align:left;max-width:760px;margin-left:auto;margin-right:auto}
@media (max-width:620px){.se-design .cat-head .cat-trust{grid-template-columns:minmax(0,1fr)}}

/* Homepage, 9/16. */
/* Hero: button to Lee's videos. */
.se-design .hs-videos{font:700 14px/1 var(--sans);color:var(--blue-deep);background:#fff;border:1.5px solid var(--blue-deep);border-radius:999px;padding:12px 18px;text-decoration:none}
.se-design .hs-videos::before{content:"";display:inline-block;margin-right:8px;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;vertical-align:-1px}
.se-design .hs-videos:hover{background:var(--blue-deep);color:#fff}

/* Firmness scale in the builder colours, one connected scale. */
.se-design .dens ol{gap:0;flex-wrap:nowrap;border-radius:999px;overflow:hidden;box-shadow:0 6px 18px rgba(23,40,43,.12)}
.se-design .dens li{border:0!important;border-radius:0!important;margin:0;padding:12px 18px;white-space:nowrap}
.se-design .dens li.d1{background:#A9D3EE!important;color:#17282B}
.se-design .dens li.d2{background:#62A9DE!important;color:#17282B}
.se-design .dens li.d3{background:#2C6FB5!important;color:#fff}
.se-design .dens li.d4{background:#A9D48C!important;color:#17282B}
.se-design .dens li.d5{background:#63A94F!important;color:#17282B}
.se-design .dens li.d6{background:#2A6B35!important;color:#fff}
@media (max-width:900px){.se-design .dens ol{flex-wrap:wrap;border-radius:16px}.se-design .dens li{flex:1 1 33%;text-align:center;padding:10px 8px;font-size:14px}}

/* Mattress cards: heading links to the builder; card text capped at four lines. */
.se-design h2 .h2link{color:inherit;text-decoration:none}
.se-design h2 .h2link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.se-design .mat .who{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Comparison plate: logo under the latex half. */
.se-design .cmp-lab .cmp-logo{display:flex;justify-content:center;align-items:center}
.se-design .cmp-lab .cmp-logo img{height:clamp(30px,3.4vw,52px);width:auto;display:block}

/* Lee's videos. */
.se-design .vlib{padding:56px 0 30px}
.se-design .vlib-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.se-design .vlib-item{margin:0}
.se-design .vlib-play{position:relative;display:block;width:100%;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:16/9;box-shadow:0 10px 26px rgba(23,40,43,.16)}
.se-design .vlib-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,opacity .3s ease}
.se-design .vlib-play:hover img{transform:scale(1.04);opacity:.9}
.se-design .vlib-btn{position:absolute;left:50%;top:50%;width:60px;height:42px;margin:-21px 0 0 -30px;border-radius:12px;background:rgba(201,116,63,.95)}
.se-design .vlib-btn::after{content:"";position:absolute;left:24px;top:12px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.se-design .vlib-play:focus-visible{outline:3px solid var(--blue-mid);outline-offset:3px}
.se-design .vlib-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:16px}
.se-design .vlib-title{margin:10px 2px 0;font-family:var(--soft);font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink)}
@media (max-width:1000px){.se-design .vlib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.se-design .vlib-grid{grid-template-columns:minmax(0,1fr)}}

/* Sag slider: the drag invitation sits on the animation, under the mattresses (Jed 9/16). */
.se-design .sag-stage .sag-hint.on-stage{position:absolute;left:50%;bottom:clamp(10px,2.2vw,28px);transform:translateX(-50%);z-index:3;margin:0;
  padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(23,40,43,.16);
  font-family:var(--soft);font-weight:800;font-size:clamp(13px,1.3vw,17px);color:var(--blue-deep);white-space:nowrap;transition:opacity .4s ease}
.se-design .sag-stage .sag-hint.on-stage::before{content:"\2194";margin-right:8px;font-weight:800;color:var(--accent)}
.se-design .sag-stage .sag-hint.on-stage.is-used{opacity:0}
@media (max-width:700px){.se-design .sag-stage .sag-hint.on-stage{font-size:11px;padding:6px 11px;bottom:6px}}

/* Mattress Industry: the photo matches the text column's height, tops aligned (Jed 9/16). */
.se-design .split:has(> .photo.has-img){align-items:stretch}
.se-design .split > .photo.has-img{aspect-ratio:auto!important;position:relative;min-height:320px;height:auto}
.se-design .split > .photo.has-img img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:center 35%}
@media (max-width:880px){.se-design .split > .photo.has-img{min-height:0;aspect-ratio:4/3!important}}

/* Testimonial rows: room under the quotes, so the lab reports panel (which
   overlaps upward by 34px) no longer covers them (Jed 9/16). */
.se-design .tgrid{margin-bottom:48px}

/* Video popup: the X sits on the video's top right corner, and the hint on the
   sag slider stays put (Jed 9/16). */
.se-lb-frame{position:relative;flex:0 0 auto}
.se-lb-frame .se-lb-close{position:absolute;top:-20px;right:-20px;z-index:2;width:46px;height:46px;font-size:26px;
  background:var(--accent);border-color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.se-lb-frame .se-lb-close:hover{background:#B0632F;border-color:#fff}
@media (max-width:620px){.se-lb-frame .se-lb-close{top:-52px;right:0}}
.se-design .sag-stage .sag-hint.on-stage.is-used{opacity:1}

/* The design makes .split photos sticky (top:92px), which pushed this photo 92px
   below the text while scrolling. Not sticky here, so the tops stay aligned (Jed 9/16). */
.se-design .split > .photo.has-img{position:relative!important;top:auto!important}

/* GOLS pull: "Warning: natural, organic, or 100 percent latex" on one line (Jed 9/16). */
.se-design .pull .pull-l1{white-space:nowrap;font-size:.94em}
.se-design .narrow:has(> .pull .pull-l1){max-width:1000px}
@media (max-width:760px){.se-design .pull .pull-l1{white-space:normal}}

/* Featured video (homepage, Jed 9/16). */
.se-design .vlib-feature .vlib-hero{max-width:960px;margin:26px auto 0}
.se-design .vlib-feature .vlib-play{border-radius:22px}
.se-design .vlib-feature .vlib-btn{width:88px;height:62px;margin:-31px 0 0 -44px;border-radius:16px}
.se-design .vlib-feature .vlib-btn::after{left:35px;top:17px;border-left-width:24px;border-top-width:14px;border-bottom-width:14px}
.se-design .vlib-feature .vlib-title{text-align:center;font-size:18px;margin-top:14px}
.se-design .vlib-feature .vlib-frame{border-radius:22px}

/* Footer: Facebook and YouTube (Jed 9/16). */
.se-design .foot-social{display:flex;gap:10px;margin:14px 0 0}
.se-design .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;transition:background .18s ease}
.se-design .foot-social a:hover{background:var(--accent);color:#fff}
.se-design .foot-social a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Hero video button is a <button> now (opens the popup). */
.se-design button.hs-videos{cursor:pointer}

/* Video popup: picture and spinner while the player loads (Jed 9/16). */
.se-lb-stage{background-size:cover;background-position:center}
.se-lb-stage iframe{transition:opacity .25s ease}
.se-lb-stage.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  border:5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:se-spin .8s linear infinite;z-index:1}
@keyframes se-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.se-lb-stage.is-loading::after{animation-duration:2s}}

/* Learning Center: section cards and section pages (Jed 9/16). */
.se-design .lc-sections{padding:40px 0 30px}
.se-design .lc-sec-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.se-design .lc-sec-grid li{margin:0}
.se-design .lc-sec{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px 22px 18px;border:2px solid var(--pale);border-radius:20px;background:var(--white);color:var(--ink);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.se-design .lc-sec:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 16px 36px rgba(30,75,82,.12)}
.se-design .lc-sec b{font-family:var(--soft);font-weight:800;font-size:21px;line-height:1.2;color:var(--blue-deep)}
.se-design .lc-sec-intro{font-size:15.5px;line-height:1.5;color:var(--read);flex:1}
.se-design .lc-sec-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.se-design .lc-count{font-size:14px;font-weight:700;color:var(--ink2)}
.se-design .lc-go{padding:8px 16px;border-radius:999px;background:var(--blue-deep);color:#fff;font-family:var(--soft);font-weight:800;font-size:14px}
.se-design .lc-sec:hover .lc-go,.se-design .lc-card:hover .lc-go{background:var(--accent)}
.se-design .lc-head{padding:40px 0 10px}
.se-design .lc-crumb{margin:0 0 8px;font-size:14px}
.se-design .lc-crumb a{color:var(--blue-mid);font-weight:700;text-decoration:none}
.se-design .lc-list{padding:20px 0 40px}
.se-design .lc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.se-design .lc-grid li{margin:0}
.se-design .lc-card{display:flex;flex-direction:column;height:100%;border:2px solid var(--pale);border-radius:18px;overflow:hidden;background:var(--white);color:var(--ink);text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.se-design .lc-card:hover{transform:translateY(-3px);border-color:var(--blue)}
.se-design .lc-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.se-design .lc-in{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 18px 18px}
.se-design .lc-in b{font-family:var(--soft);font-weight:800;font-size:18px;line-height:1.25}
.se-design .lc-sum{font-size:14.5px;line-height:1.45;color:var(--ink2);flex:1}
.se-design .lc-in .lc-go{align-self:flex-start}
.se-design .lc-back{text-align:center;margin:28px 0 0}
.se-design .lc-back a{font-weight:700;color:var(--blue-deep)}
@media (max-width:1000px){.se-design .lc-sec-grid,.se-design .lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.se-design .lc-sec-grid,.se-design .lc-grid{grid-template-columns:minmax(0,1fr)}}

/* Learning Center: categories inside a section (Jed 9/16). */
.se-design .lc-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 30px}
.se-design .lc-jump a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:2px solid var(--pale);background:var(--white);color:var(--blue-deep);font-family:var(--soft);font-weight:800;font-size:15px;text-decoration:none}
.se-design .lc-jump a span{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--mist);font-size:13px;color:var(--ink2)}
.se-design .lc-jump a:hover{border-color:var(--blue-deep)}
.se-design .lc-group{margin:0 0 40px;scroll-margin-top:110px}
.se-design .lc-group > h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 16px}

/* Grids center when a row is not full (Jed 9/17: lopsided pages). */
.se-design .cat-grid{display:flex;flex-wrap:wrap;justify-content:center}
.se-design .cat-grid > .cat-card{flex:0 1 calc((100% - 44px) / 3)}
.se-design .cat-grid.small > .cat-card{flex:0 1 calc((100% - 48px) / 4)}
@media (max-width:900px){.se-design .cat-grid > .cat-card,.se-design .cat-grid.small > .cat-card{flex-basis:calc((100% - 14px) / 2)}}
@media (max-width:520px){.se-design .cat-grid > .cat-card{flex-basis:100%}}
.se-design .lc-grid,.se-design .lc-sec-grid{display:flex;flex-wrap:wrap;justify-content:center}
.se-design .lc-grid > li,.se-design .lc-sec-grid > li{flex:0 1 calc((100% - 36px) / 3)}
@media (max-width:1000px){.se-design .lc-grid > li,.se-design .lc-sec-grid > li{flex-basis:calc((100% - 18px) / 2)}}
@media (max-width:620px){.se-design .lc-grid > li,.se-design .lc-sec-grid > li{flex-basis:100%}}

/* Product photos shown whole, not cropped (Jed 9/17: chairs cut off). The two
   arrangement categories keep their full-bleed room photos. */
body:not(.term-arrangement-recommendations):not(.term-super-king-sizes) .se-design .cat-card img{object-fit:contain;background:#fff}

/* Learning Center section intro wraps. */
.se-design .lc-head .lede{white-space:normal;max-width:62ch;margin-left:auto;margin-right:auto}
.se-design .lc-head .lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;max-width:780px}

/* Featured video heading in three lines: the question on two, the bold
   "Watch this incredible video." on its own line (Jed 9/17). */
.se-design .vlib-feature .narrow{max-width:980px}
.se-design .vlib-feature h2 b{display:block;white-space:nowrap}
@media (max-width:700px){.se-design .vlib-feature h2 b{white-space:normal}}

/* Talmage's review, 9/17. */
/* Header between Astra's desktop switch (922px) and wide screens: tighter menu
   so it stays on one row, and the phone pill keeps a right margin. */
@media (min-width:922px) and (max-width:1280px){
  .main-header-menu > .menu-item > .menu-link{padding-left:9px !important;padding-right:9px !important;font-size:15px}
  .main-header-menu .menu-phone > a,.main-header-menu .menu-phone > .menu-link{padding:7px 14px !important;font-size:15px}
  .site-header .custom-logo{max-height:40px;width:auto}
}
.main-header-menu .menu-phone{margin-right:16px}
/* Back to top button hides on phones, where it sat over the text. */
@media (max-width:768px){#ast-scroll-top{display:none !important}}
/* Learning Center cards without a picture get the brand panel instead of a blank. */
.se-design .lc-card .lc-noimg{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:linear-gradient(150deg,#EEF6F7,var(--pale) 60%,#BFD8DC)}
.se-design .lc-card .lc-noimg img{width:42%;height:auto;aspect-ratio:auto;object-fit:contain;opacity:.9}
/* Articles: rebuilt product lists as cards. */
.se-design .art-body .art-products{margin:28px 0;gap:18px}
.se-design .art-body .art-products > .cat-card{flex-basis:calc((100% - 36px) / 3);text-decoration:none}
.se-design .art-body .art-products img{margin:0;border-radius:0;aspect-ratio:4/3;object-fit:contain;background:#fff;width:100%}
.se-design .art-body .art-products .cat-card b{font-size:16px}
@media (max-width:700px){.se-design .art-body .art-products > .cat-card{flex-basis:calc((100% - 18px) / 2)}}
@media (max-width:440px){.se-design .art-body .art-products > .cat-card{flex-basis:100%}}
/* With the header breakpoint raised to 1180px, Astra switches to the menu
   button but its stylesheet only hides the desktop header below 921px. Hide it
   whenever Astra is in menu-button mode. */
body.ast-header-break-point #ast-desktop-header{display:none !important}
body.ast-header-break-point #ast-mobile-header{display:block !important}

/* Homepage hero loop video (Jed 9/17). Full width at its own 2:1 shape, no
   cropping, buttons under it. */
.se-design .hero:has(.stage.has-video){min-height:0}
.se-design .stage.has-video{display:block;flex:0 0 auto;min-height:0;padding:0;background:#E6E8EC;overflow:hidden}
.se-design .hero-video{width:100%}
.se-design .hero-video-el{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:#E6E8EC}
.se-design .hero-video-actions{margin:0;padding:18px 16px 22px;background:#fff}

/* First screen must hold nav, headline, video and buttons (Jed 9/17). */
/* Shorter navigation bar on computers. */
@media (min-width:1181px){
  #ast-desktop-header .ast-primary-header-bar,
  #ast-desktop-header .site-primary-header-wrap,
  #ast-desktop-header .ast-builder-grid-row{min-height:60px !important;padding-top:0 !important;padding-bottom:0 !important}
  .site-header .se-logo img,.site-header .custom-logo-link img{max-height:42px}
  .main-header-menu .menu-phone > a,.main-header-menu .menu-phone > .menu-link{padding:7px 16px !important;line-height:1.1}
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link{line-height:60px}
}
/* Smaller headline with less space around it. */
.se-design .hero:has(.stage.has-video){padding-top:4px}
.se-design .hero:has(.stage.has-video) .claim{margin-top:clamp(26px,2.4vw,40px);font-size:clamp(21px,3.4vw,52px)}
.se-design .stage.has-video{margin-top:12px;background:linear-gradient(90deg,#A3AAA3 0%,#D6D8D8 50%,#C4C4CF 100%)}
/* The video keeps its shape inside the height the script gives it. */
.se-design .hero-video-el{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:transparent}
.se-design .hero-video-actions{padding:12px 16px 14px}

/* Jed 9/17: smaller phone pill for a shorter nav, and the hero video edge to
   edge (it trims top and bottom to fit the first screen, no side bars). */
.main-header-menu .menu-phone > a,
.main-header-menu .menu-phone > .menu-link{padding:4px 14px !important;font-size:14px !important;line-height:1.2 !important;min-height:0 !important}
@media (min-width:1181px){
  #ast-desktop-header .ast-primary-header-bar,
  #ast-desktop-header .site-primary-header-wrap,
  #ast-desktop-header .ast-builder-grid-row{min-height:52px !important}
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link{line-height:52px}
  #ast-desktop-header .main-header-menu > .menu-phone > .menu-link{line-height:1.2 !important}
  .site-header .se-logo img,.site-header .custom-logo-link img{max-height:38px}
}
.se-design .stage.has-video{background:#DADBDD}
.se-design .hero-video-el{width:100% !important;object-fit:cover;object-position:center 45%}
/* The pill stretched to the full row height; center it at its own size. */
.main-header-menu .menu-phone{align-self:center !important;display:flex;align-items:center;height:auto !important}
.main-header-menu .menu-phone > a,
.main-header-menu .menu-phone > .menu-link{height:auto !important;align-self:center !important}
/* Jed 9/17: YOUR sits lower, over the crossed-out words, so the nav never clips it. */
.se-design .hero:has(.stage.has-video) .claim .hand{top:-.5em}
@media (min-width:1181px){
  #ast-desktop-header .site-branding{padding-top:6px !important;padding-bottom:6px !important}
}
.se-design .hero:has(.stage.has-video) .claim{margin-top:clamp(30px,2.8vw,46px)}
.se-design .hero:has(.stage.has-video) .claim .hand{top:-.3em}
/* Jed 9/17: YOUR stays where it was designed; the space above it goes instead. */
.se-design .hero:has(.stage.has-video) .claim{margin-top:1.1em}
.se-design .hero:has(.stage.has-video) .claim .hand{top:-.82em}

/* Talmage 9/17: the mattress size chart was a 258px picture of a table hot
   linked from the live site. It is a real table now, in the site's style. */
.se-design .art-body table.se-sizes{display:table;width:auto;min-width:min(420px,100%);max-width:520px;
  border-collapse:separate;border-spacing:0;border:2px solid var(--pale);border-radius:14px;overflow:hidden;font-size:17px}
.se-design .art-body table.se-sizes th{font-family:var(--soft);font-weight:800;background:var(--mist);border-bottom:1px solid var(--pale);padding:12px 16px}
.se-design .art-body table.se-sizes td{padding:11px 16px;border-bottom:1px solid var(--pale)}
.se-design .art-body table.se-sizes td:first-child{font-weight:700;color:var(--ink)}
.se-design .art-body table.se-sizes td:last-child{white-space:nowrap}
.se-design .art-body table.se-sizes tr:last-child td{border-bottom:0}

/* Jed 9/18: the news reports page (/dangerous-evidence/) is a full width
   design page with the reports three across, not a narrow article. */
.se-design .news-head{padding-top:44px}
.se-design .news-kicker{margin:0 0 12px;font-family:var(--soft);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:var(--accent)}
.se-design .news-head h1{font-size:clamp(32px,4.4vw,60px);line-height:1.08;max-width:20ch;margin:0 auto 16px}
#news-reports{padding-top:24px}
#news-reports .vlib-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
#news-reports .vlib-title{font-size:17px}
@media (max-width:900px){#news-reports .vlib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#news-reports .vlib-grid{grid-template-columns:minmax(0,1fr)}}
.se-design .news-more{padding:24px 0 44px}
.se-design .news-more p{font-size:18px;line-height:1.7;margin:0 0 16px}
.se-design .news-more h3{font-size:clamp(22px,2vw,28px);margin:30px 0 10px}
/* Jed 9/18: the top text read too thin, and the reports lede ran off the
   right edge (the design's .lede never wraps above 620px). */
.se-design .news-head h1{font-weight:800;color:var(--blue-deep);letter-spacing:-.01em}
.se-design .news-head .lede{color:var(--ink);font-weight:500}
#news-reports .lede{white-space:normal;max-width:760px;margin-left:auto;margin-right:auto}

/* Jed 9/18: the theme's own contact form (inc/contact-form.php), no plugin. */
.se-design .se-contact{padding:48px 0 56px}
.se-design .se-contact h2{text-align:center}
.se-design .se-contact-lede{text-align:center;color:var(--ink2);font-size:18px;margin:10px auto 26px;max-width:1040px}
.se-design .se-contact-form{max-width:680px;margin:0 auto;background:var(--white,#fff);border:2px solid var(--pale);border-radius:20px;padding:26px 26px 20px;box-shadow:0 10px 30px rgba(20,40,45,.06)}
.se-design .se-contact-form label{display:block;margin:0 0 16px}
.se-design .se-contact-form label span{display:block;font-family:var(--soft);font-weight:700;font-size:15.5px;color:var(--ink);margin:0 0 6px}
.se-design .se-contact-form label i{font-style:normal;color:var(--accent)}
.se-design .se-contact-form input,.se-design .se-contact-form textarea{width:100%;box-sizing:border-box;border:2px solid var(--pale);border-radius:12px;padding:12px 14px;font-size:17px;font-family:inherit;color:var(--ink);background:#fff}
.se-design .se-contact-form input:focus,.se-design .se-contact-form textarea:focus{outline:none;border-color:var(--blue-mid)}
.se-design .se-contact-form label.bad input,.se-design .se-contact-form label.bad textarea{border-color:#c0392b}
.se-design .se-cf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.se-design .se-cf-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.se-design .se-cf-send{display:block;width:100%;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:15px;font-size:18px;font-weight:800;font-family:var(--soft);cursor:pointer}
.se-design .se-cf-send:disabled{opacity:.6;cursor:wait}
.se-design .se-cf-msg{text-align:center;margin:12px 0 0;min-height:1.2em;font-weight:600;color:var(--blue-deep)}
@media (max-width:620px){.se-design .se-cf-row{grid-template-columns:1fr}.se-design .se-contact-form{padding:20px 16px 16px}}

/* Jed 9/18: Contact Us opens with Lee's number big, and the text runs wide
   instead of stacking into narrow lines that push the page down. */
.se-design .call-head{padding:34px 16px 6px;text-align:center}
.se-design .call-head h1{margin:0}
.se-design .call-lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink2);max-width:1040px;margin:10px auto 0}
.se-design .call-num{display:inline-block;margin:22px 0 12px;background:var(--accent);color:#fff !important;font-family:var(--soft);font-weight:800;font-size:clamp(34px,4.6vw,58px);line-height:1.1;padding:12px 40px;border-radius:999px;text-decoration:none;box-shadow:0 10px 26px rgba(200,116,60,.28)}
.se-design .call-num:hover{filter:brightness(1.06)}
.se-design .call-note{max-width:1040px;margin:4px auto 0;font-size:17px;color:var(--ink2)}

/* Jed 9/18: page intros run wide instead of stacking into narrow lines that
   push the page down (About, the news page, Learning Center sections). */
.se-design .narrow.center:has(> h1){max-width:1120px}
.se-design .narrow.center:has(> h1) > .lede{max-width:1040px;margin-left:auto;margin-right:auto}
.se-design .news-head h1{max-width:26ch}
#news-reports > .narrow{max-width:1120px}
#news-reports .lede{max-width:1040px}

/* Jed 9/18: the SLEEPessentials wordmark replaces the round badge in the
   header. Sized by height; it is about 6.4 times as wide as it is tall. */
.site-header .se-logo-word img,.site-header .se-logo-word .custom-logo{max-height:none !important;height:30px !important;width:auto !important;max-width:none}
@media (min-width:1181px){.site-header .se-logo-word img,.site-header .se-logo-word .custom-logo{height:32px !important}}
@media (min-width:1500px){.site-header .se-logo-word img,.site-header .se-logo-word .custom-logo{height:36px !important}}
@media (max-width:420px){.site-header .se-logo-word img,.site-header .se-logo-word .custom-logo{height:26px !important}}

/* Lee 9/18: the rolling word drives its own width (inc/hero.php), so the line
   stays centered on desktop. */
.se-design .reel.reel-js{min-width:0 !important;text-align:left}
.se-design .reel.reel-js b{animation:none !important}
@media(max-width:720px){.se-design .reel.reel-js{text-align:center}}

/* Lee 9/18: the layer pictures in the product gallery looked faint. WooCommerce
   draws every thumbnail but the selected one at half opacity; they are full
   strength now, and the selected one gets a ring instead. */
.woocommerce div.product .flex-control-thumbs li img{opacity:1 !important;border:2px solid var(--pale,#dfe7e9);border-radius:10px;transition:border-color .2s}
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover{border-color:var(--accent,#C8743C)}