/*
* Responsive layout fixes for mobile and tablet.
*
* Elementor prints its per-page CSS after the theme styles (some of it in the
* footer), so these rules win on specificity rather than load order: most are
* prefixed with `body` to sit one step above the Elementor selector they fix.
*
* Elementor breakpoints on this site:
* mobile <= 767, mobile_extra <= 880, tablet <= 1024,
* tablet_extra <= 1200, laptop <= 1500, widescreen >= 2400
*/
/* ---------------------------------------------------------------------------
* Mobile Landscape (768-880) follows Tablet visibility
*
* The Mobile Landscape breakpoint is enabled, but elements are only ever
* hidden for Desktop / Tablet / Mobile. Anything hidden on Tablet therefore
* reappears between 768 and 880px, e.g. the desktop header showing behind the
* mobile header on iPads, and the mobile footer menu doubling up with the
* desktop footer columns.
* ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 880px) {
body .elementor .elementor-hidden-tablet {
display: none;
}
}
/* ---------------------------------------------------------------------------
* Page offset under the fixed header
*
* Admin Site Enhancements custom CSS sets .site-main to 120px (desktop header
* height) from 768px up, but the 80px mobile header is used up to 1024px,
* leaving a 40px strip under the header on tablets.
* ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
body .site-main {
padding-top: 80px;
}
}
/* ---------------------------------------------------------------------------
* Size tabs (Crown Jewel, Acclaim, Bed Bases, Mattress Sizes...)
* ------------------------------------------------------------------------ */
/* Tablet: vertical tab titles were squeezed into a 20% column and wrapped
* onto a 10px line-height, drawing "CALIFORNIA" on top of "KING". */
@media (min-width: 768px) and (max-width: 1200px) {
body .elementor-element.elementor-widget-tabs.elementor-tabs-view-vertical .elementor-tabs-wrapper {
width: auto;
flex-shrink: 0;
}
body .elementor-element.elementor-widget-tabs.elementor-tabs-view-vertical .elementor-tab-desktop-title {
white-space: nowrap;
line-height: 1.25;
}
}
/* Mobile: the titles scroll sideways but nothing hints at it, so the last
* visible tab just looks cut off. Fade the right edge, and pad the last title
* so it can scroll clear of the fade. */
@media (max-width: 767px) {
body #mobile-tabs .elementor-tabs-wrapper {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
body #mobile-tabs .elementor-tab-desktop-title:last-of-type {
padding-right: 48px;
}
}
/* ---------------------------------------------------------------------------
* Range pages: store map on mobile
*
* The map container is meant to bleed to the screen edges with -20px margins,
* but was set to width: 115-120%, which overshoots the viewport and cuts
* off the map controls. 100% + both margins is the full-bleed width.
* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
body .elementor-64923 .elementor-element.elementor-element-529e2824, /* Crown Jewel */
body .elementor-64946 .elementor-element.elementor-element-1b8dfb50, /* Acclaim */
body .elementor-64966 .elementor-element.elementor-element-21df7762, /* Optimum */
body .elementor-69800 .elementor-element.elementor-element-15d8a6f { /* Posture Series */
--width: calc(100% + 40px);
}
}
/* ---------------------------------------------------------------------------
* Bed Bases page
* ------------------------------------------------------------------------ */
/* The compare cards shown below 1200px inherit the desktop grid's four
* columns, but each grid holds a single card, so the card was squeezed into
* a quarter of the width (and only 75% of that). */
@media (min-width: 768px) and (max-width: 1200px) {
body .elementor-54525 .elementor-element.elementor-element-29b617c,
body .elementor-54525 .elementor-element.elementor-element-fee449e,
body .elementor-54525 .elementor-element.elementor-element-ebcf1c7 {
--e-con-grid-template-columns: 1fr;
}
body .elementor-54525 .elementor-element.elementor-element-29b617c > .e-con-inner > .e-con,
body .elementor-54525 .elementor-element.elementor-element-fee449e > .e-con-inner > .e-con,
body .elementor-54525 .elementor-element.elementor-element-ebcf1c7 > .e-con-inner > .e-con {
--width: 100%;
}
/* Keep the product shot at a sensible size now the card is full width */
body .elementor-54525 .elementor-element.elementor-element-29b617c .elementor-widget-image img,
body .elementor-54525 .elementor-element.elementor-element-fee449e .elementor-widget-image img,
body .elementor-54525 .elementor-element.elementor-element-ebcf1c7 .elementor-widget-image img {
max-width: 360px;
}
}
/* "Key feature" copy uses heading widgets rendered as , which inherit a
* 1em line-height, so wrapped lines touch. */
body .elementor-54525 p.elementor-heading-title {
line-height: 1.4;
}
/* ---------------------------------------------------------------------------
* Home + Bed Range: range cards
*
* Five cards in a two-column grid (768-880) leave the last one alone on the
* left. Centre it instead.
* ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 880px) {
body .elementor-31247 .elementor-element.elementor-element-726fdc2 > .e-con:last-child:nth-child(odd),
body .elementor-1994 .elementor-element.elementor-element-b6957fb > .e-con:last-child:nth-child(odd) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 10px);
}
}
/* ---------------------------------------------------------------------------
* Retailer cards (Shop Sealy mattress sale)
*
* The promo line is an
set in the body font, so it picks up the global
* h2 letter-spacing of -1px and the words run together.
* ------------------------------------------------------------------------ */
body .elementor-26288 .elementor-element.elementor-element-218bdb9 .elementor-heading-title {
letter-spacing: normal;
}
/* ---------------------------------------------------------------------------
* Footer: mobile accordion menu and brand logo rows
*
* These are always rendered (php/tablet-layout.php); pick them by width. The
* accordion is only hidden for Elementor's Desktop and Tablet breakpoints, not
* Laptop / Tablet Landscape, so hide it above mobile here.
* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
body .elementor-871 .elementor-element.elementor-element-54bf80a {
display: none;
}
}
@media (min-width: 768px) {
body .elementor-871 .elementor-element.elementor-element-459f940,
body .elementor-871 .elementor-element.elementor-element-bb42961 {
display: none;
}
}
/* ---------------------------------------------------------------------------
* Footer: licence number was 10px on a 9px line-height on mobile
* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
body .elementor-871 .elementor-element.elementor-element-5bb5668,
body .elementor-871 .elementor-element.elementor-element-5bb5668 p {
font-size: 12px;
line-height: 1.4;
}
}