/** Shopify CDN: Minification failed
Line 1229:25 Unexpected "{"
Line 1229:36 Expected ":"
Line 1242:25 Unexpected "{"
Line 1242:36 Expected ":"
**/
/* ------------------------------------------------------------
MAX-WIDTH
---------------------------------------------------------------------- */
.max-w-0 { max-width: 0rem; }
.max-w-xxs { max-width: 13rem; }
.max-w-xs { max-width: 20rem; } /* 320px */
.max-w-sm { max-width: 24rem; } /* 384px */
.max-w-md { max-width: 28rem; } /* 448px */
.max-w-lg { max-width: 32rem; } /* 512px */
.max-w-xl { max-width: 36rem; } /* 576px */
.max-w-595 { max-width: 600px; }
.max-w-2xl { max-width: 42rem; } /* 672px */
.max-w-3xl { max-width: 48rem; } /* 768px */
.max-w-4xl { max-width: 56rem; } /* 896px */
.max-w-5xl { max-width: 64rem; } /* 1024px */
.max-w-6xl { max-width: 72rem; } /* 1152px */
.max-w-7xl { max-width: 80rem; } /* 1280px */
.max-w-full { max-width: 100%; }
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1536px; }
.margin-left { margin-left: auto; }
.margin-right { margin-right: auto; }
.margin-auto { margin: auto; }
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
/* === FLEXBOX UTILITIES === */
/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
@media screen and (max-width: 768px) {
.flex-mobile { /* Only flex on mobile */
display: flex;
}
}
@media screen and (min-width: 768px) {
.flex-desktop { /* Only flex on desktop */
display: flex;
}
}
/* Responsive: Display on mobile */
@media (max-width: 768px) {
.flex-mobile { display: flex; }
.inline-mobile { display: inline; }
}
/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
/* Gap (Desktop) */
.gap-1vw { gap: 1vw; }
.gap-2vw { gap: 2vw; }
.gap-2-5vw { gap: 2.5vw; }
.gap-3vw { gap: 3vw; }
.gap-4vw { gap: 4vw; }
/* Responsive: Gap on mobile */
@media (max-width: 768px) {
.gap-1vw-mobile { gap: 1vw; }
.gap-2vw-mobile { gap: 2vw; }
.gap-2-5vw-mobile { gap: 2.5vw; }
.gap-3vw-mobile { gap: 3vw; }
}
/* Align Items */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
/* Align Self */
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }
/* Flex Grow / Shrink / Basis */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
/* Order */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
/* ------------------------------------------------------------
TYPOGRAPHY
---------------------------------------------------------------------- */
@font-face {
font-family: 'PerfectlyNineties';
src: url("/cdn/shop/files/PerfectlyNineties-Regular.otf?v=1757645510");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'PerfectlyNineties';
src: url("/cdn/shop/files/PerfectlyNineties-Italic.otf?v=1757645510");
font-weight: 400;
font-style: italic;
font-display: swap;
}
:root {
--font-size-h1: clamp(5rem, 8vw, 6.2rem);
--font-size-h2: clamp(4rem, 4vw, 5.2rem);
--font-size-h3: clamp(3.5rem, 3vw, 4.2rem);
--font-size-h4: 2rem;
--global-palette1: #F2EFED;
--global-palette2: #A987BE;
--global-palette3: #992377;
--global-palette4: #480E44;
--global-palette5: #300F2F;
}
h1, .h1 {
font-size: var(--font-size-h1) !important;
}
h2, .h2 {
font-size: var(--font-size-h2) !important;
}
h3, .h3 {
font-size: var(--font-size-h3) !important;
}
h4, .h4 {
font-size: var(--font-size-h4) !important;
font-family: 'DM Sans' !important;
}
h1, h2, h3 {
font-family: 'PerfectlyNineties' !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1em !important;
}
/* PerfectlyNineties draws ™ as two full-size capitals on the baseline
("MethodTM"). The script at the end of layout/theme.liquid gives every ™
set in it this class, wherever it appears.
At .38em, a -1.188em raise puts its top on the cap height of the font's M
(measured with canvas: M ascent 37.86px at 52px, ™ ascent 14.39px at .38em).
Both values are ems, so it stays aligned at every size.
position: relative + line-height: 0 keep the line box untouched, which
vertical-align: super would not; vertical-align: baseline cancels the raise
of a ™ typed in a rich-text field, which gets the class itself.
.rte .madt-tm because component-rte.css sets `.rte * { line-height }` at the
same specificity and loads later. */
.madt-tm,
.rte .madt-tm {
position: relative;
top: -1.188em;
font-size: 0.38em;
line-height: 0;
vertical-align: baseline;
}
/* ------------------------------------------------------------
HEADER
---------------------------------------------------------------------- */
.header-top__logo .header__heading-link img {
margin-top: -5px;
width: auto !important;
}
.header-top .header-top__wrapper.header-top__wrapper-left .header__menu {
margin: auto;
}
/* .header__modal-open padding-right removed 2026-09-21: it spaced the mobile
hamburger away from the logo when the toggle sat on the left. The toggle now
renders last on the right; see assets/madeatdawn-mobile-menu.css. */
.header-top__wrapper-left {
padding-top: 10px;
padding-bottom: 10px;
}
/* Nav bar side padding. The header is full_width, so .header-top__wrapper
carries .container and takes its horizontal padding from --main-padding
(8rem site-wide at >=1150px). Redefine the variable on the wrapper rather
than overriding padding directly: the mega menu panel inside it also reads
var(--main-padding, 8rem) (madeatdawn-submenu.css), so the dropdown content
stays aligned with the nav. Sections below the header keep the 8rem value,
so the header now sits outside the page content grid by design.
Below 1150px --main-padding is already 2rem — left untouched. */
@media screen and (min-width: 1150px) {
.header-top .header-top__wrapper.container {
--main-padding: 4rem;
}
}
.header-top .header-top-container {
position: relative;
padding: 10px 0;
}
/* Full-width header divider lines, inset by the container's padding so the
cream spacing above/below stays intact (uses the container's own
scheme-aware background — no opaque bg added to .header-top, which would
break the overlay/sticky header). */
.header-top .header-top-container::before,
.header-top .header-top-container::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: var(--global-palette5);
pointer-events: none;
}
.header-top .header-top-container::before {
top: 10px;
}
.header-top .header-top-container::after {
bottom: 10px;
}
/* Cover the ~1px sub-pixel seam at the very top of the sticky header on
fractional-DPI / scaled displays, where content scrolling behind would
otherwise flash through the top edge. Extends the cream up by 2px (paint
only, no layout shift). Scoped to the stuck state so it doesn't overlap the
announcement bar at the top of the page. */
.shopify-section-header-sticky .header-top .header-top-container {
box-shadow: 0 -2px 0 0 rgb(var(--color-background));
}
.header .list-menu--inline > li > .header__menu-item {
font-weight: 500 !important;
}
.header-tabs, .list-menu--inline>li>a {
letter-spacing: 0.05em;
}
/* ------------------------------------------------------------
SLIDESHOW
---------------------------------------------------------------------- */
.slideshow-slide__title {
max-width: 680px !important;
padding-bottom: 20px;
}
/* A heading may carry a quieter second line inside the same , written in
the theme editor as `Big line.||Quieter line.` (split in sections/slideshow.liquid).
These are the DEFAULTS so the delimiter behaves sensibly on every slideshow,
not just the one page that happens to style it — without them the sub-line
would inherit the h1 and render at 62px, i.e. look broken. A section can
still override any of this via its own scoped custom_css (page.about does,
for max-width). The span INHERITS PerfectlyNineties and line-height:1em from
the h1's !important rules, so family and leading must both be restated. */
.slideshow-slide__title-sub {
display: block;
margin-top: 2.4rem;
font-family: var(--font-body-family);
font-size: var(--font-size-h4);
line-height: 1.4;
letter-spacing: 0;
}
.slideshow .slideshow__slider__item-inner .slideshow__text-small .slideshow-slide__desc {
max-width: 55rem !important;
}
@media screen and (min-width: 1150px) {
.slideshow .slideshow-slide_full-left {
padding: 1rem 8rem 4rem 10% !important;
}
[data-id="slideshow_item_86Efiy"].slideshow-slide {
min-height: 700px !important;
}
}
/* Homepage slide 1, from 990px: frame the photo like Hae's mockup (2026-09-27).
The numbers belong to ..._Sleep_Goddess_MD.png (2400x1340); drop this block
if the slide image changes. The mockup shows source x 108-2299, y 259-1256.
A fixed zoom only matched it at one screen shape (her hair hit the top edge
on 1920-wide monitors), so the image is sized from the slide's own box:
- width (--madt-w): the mockup's rows fill the slide's height, but never
wider than the mockup's columns fill its width, and never below "cover";
- left: the mockup's left edge, unless that would push her right elbow
(x 2150 with margin) off the slide or open a gap on the right;
- top: height to spare or to lose is split 45/55 above her hair / below
her hands, as in the mockup, without opening a gap at the bottom.
So 1920x1080 is the mockup exactly, wide monitors keep her headroom, and
small laptops show more sofa instead of pushing her into the text.
Portrait-ish slides (under 7:5, e.g. a portrait iPad Pro) keep the theme's
cover. Browsers without container units skip it all. */
@media screen and (min-width: 990px) {
@supports (width: 1cqw) {
[data-id="slideshow_item_86Efiy"] .slideshow-slide__img {
container-type: size;
overflow: hidden;
}
@container (min-aspect-ratio: 7 / 5) {
.slideshow [data-id="slideshow_item_86Efiy"] .slideshow-slide__img img {
--madt-w: max(100cqw, 179.1cqh, min(240.72cqh, 109.54cqw));
position: absolute;
top: max(45cqh - 0.2949 * var(--madt-w), 100cqh - 0.5583 * var(--madt-w));
left: max(100cqw - var(--madt-w), min(-0.045 * var(--madt-w), 100cqw - 0.8958 * var(--madt-w)));
width: var(--madt-w) !important;
height: auto !important;
max-width: none;
max-height: none;
}
}
}
}
/* ------------------------------------------------------------
BLOG HERO (madt-blog-hero)
The full-width slideshow on the blog index, tagged through the slideshow's
"Custom CSS class" setting (templates/blog.redesign.json). Kept here, not
in the section's custom_css (Shopify caps that at 500 characters) and not
in the blog index stylesheet (it loads after the hero, so the hero would
paint once unshaded).
A plum shade behind the copy keeps white text readable on a light photo.
It was tuned on the plum-to-pink header photo (Website_Header.jpg: intro
>= 5.7:1 at 12 sizes from 1920 to 360); on the darker Homepage photo now
in use it is barely visible (intro >= 12:1) but stays as a safety net if
the photo changes. Stops are in px where the copy is, so the shade
follows the fixed-width copy, and they fade out before her face.
Portrait screens up to 989px get the portrait photo with the copy on top;
the 2:1 header crops to near-square there and puts her behind the copy.
Landscape phones and squarish windows keep the header photo, shifted right.
---------------------------------------------------------------------- */
.slideshow.madt-blog-hero .slideshow-slide__img.have-overlay::before {
background: linear-gradient(90deg, rgba(48, 15, 47, 0.5) 0, rgba(48, 15, 47, 0.36) max(36%, 520px), rgba(48, 15, 47, 0) max(50%, 720px)) !important;
}
@media screen and (max-width: 575px), screen and (max-width: 989px) and (max-aspect-ratio: 3/4) {
.slideshow.madt-blog-hero .slideshow-slide__img.have-overlay::before {
background:
radial-gradient(60% 35% at 0 32%, rgba(48, 15, 47, 0.5) 0%, rgba(48, 15, 47, 0.3) 55%, rgba(48, 15, 47, 0) 100%),
linear-gradient(180deg, rgba(48, 15, 47, 0.55) 0, rgba(48, 15, 47, 0.4) 260px, rgba(48, 15, 47, 0) 400px) !important;
}
}
@media screen and (min-width: 576px) and (max-width: 989px) and (max-aspect-ratio: 3/4) {
.slideshow.madt-blog-hero .slideshow__content-mobile {
display: block !important;
}
.slideshow.madt-blog-hero .slideshow__content-desktop {
display: none !important;
}
.slideshow.madt-blog-hero .slideshow-slide__img img {
object-position: 50% 100% !important;
}
.slideshow.madt-blog-hero .slideshow-slide {
align-items: flex-start !important;
}
.slideshow.madt-blog-hero .slideshow-slide__text {
padding-top: 5rem;
}
}
@media screen and (min-width: 576px) and (max-width: 989px) and (min-aspect-ratio: 3001/4000) {
.slideshow.madt-blog-hero .slideshow-slide__img img {
object-position: 75% 30% !important;
}
.slideshow.madt-blog-hero .slideshow-slide__img.have-overlay::before {
background: linear-gradient(90deg, rgba(48, 15, 47, 0.6) 0, rgba(48, 15, 47, 0.5) 430px, rgba(48, 15, 47, 0) 500px) !important;
}
}
/* ------------------------------------------------------------
LINKS
---------------------------------------------------------------------- */
p a {
text-decoration: none;
border-bottom: 1px solid;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
p a:hover {
opacity: 0.7;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
/* ------------------------------------------------------------
GLOBAL BLOCKS
---------------------------------------------------------------------- */
/* Header Account Popup */
.ai-account-popup-container-auy80rlhzdtgrugpjdaigenblocke0ba52afenwjk {
padding: 20px !important;
}
/* ------------------------------------------------------------
HOMEPAGE
---------------------------------------------------------------------- */
/* Intro */
#shopify-section-template--19939866312895__rich_text_YAzpVm {
max-width: 900px;
margin: auto;
}
#shopify-section-template--19939866312895__rich_text_YAzpVm h4 {
margin: 40px 0 20px 0 !important;
}
.dream-item {
line-height: 1.9em !important;
}
/* ------------------------------------------------------------
ABOUT PAGE
---------------------------------------------------------------------- */
/* Intro */
#shopify-section-template--19939866476735__rich_text_BQRTLx {
max-width: 900px !important;
margin: auto !important;
}
#shopify-section-template--19939866476735__rich_text_BQRTLx h4 {
margin: 40px 0 20px 0 !important;
}
/* ------------------------------------------------------------
METHOD PAGE
---------------------------------------------------------------------- */
/* Intro */
.shopify-section-template--19945997762751__rich_text_BQRTLx {
max-width: 900px !important;
margin: auto !important;
}
#shopify-section-template--19945997762751__rich_text_BQRTLx h4 {
margin: 40px 0 20px 0 !important;
}
/* Method Layout Styling */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_heading {
padding-bottom: 40px;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_heading::first-letter{
color:var(--global-palette2);
}
/* Two-column layout */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item {
display: flex;
}
/* Mobile: stack + reverse */
@media (max-width: 750px) {
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item {
flex-direction: column-reverse !important;
}
}
/* Desktop spacing */
@media (min-width: 750px) {
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage .scrolling-collage_item
.scrolling-collage_image-wrapper .scrolling-collage_image {
margin-right: 40px !important;
}
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_wrapper .button--tertiary {
display: none !important;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_top {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* Stackable Row */
/* ------------------------------
Stacked sticky offsets
------------------------------ */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_wrapper{
--stack-step: 115px !important;
position: relative;
}
/* Make each row sticky */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item-wrapper{
position: sticky !important;
top: calc(var(--baseTop, 0px) - var(--syncExtra, 0px)) !important;
}
/* Set base tops + z-index */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item-wrapper:nth-child(1){
--baseTop: calc(var(--stack-step) * 1.1);
z-index: 1;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item-wrapper:nth-child(2){
--baseTop: calc(var(--stack-step) * 1.8);
z-index: 2;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item-wrapper:nth-child(3){
--baseTop: calc(var(--stack-step) * 2.8);
z-index: 3;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item-wrapper:nth-child(4){
--baseTop: calc(var(--stack-step) * 3.8);
z-index: 4;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item-wrapper:nth-child(5){
--baseTop: calc(var(--stack-step) * 4.8);
z-index: 5;
}
/* Buffer space to allow last row to finish stacking */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_wrapper::after{
content:"";
display:block;
height: 50px;
}
/* This is the “real spacer” JS will resize */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_pushpad{
display: block;
width: 100%;
height: 0px;
pointer-events: none;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .container,
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_wrapper {
overflow: visible;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_top {
display: flex;
flex-direction: column;
justify-content: flex-start !important;
height: 100%;
}
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_heading {
padding-bottom: 40px;
}
/* Two-column layout */
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item {
display: flex;
}
/* Mobile: stack + reverse */
@media (max-width: 750px) {
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage_item {
flex-direction: column-reverse !important;
}
}
@media (min-width: 750px) {
#shopify-section-template--19945997762751__scrolling_collage_eTqdB6 .scrolling-collage .scrolling-collage_item .scrolling-collage_image-wrapper .scrolling-collage_image{
margin-right: 40px !important;
}
}
/* ------------------------------------------------------------
PRODUCT PAGE
---------------------------------------------------------------------- */
/* Left Column */
.product__left-wrapper {
display: none !important;
}
@media (min-width: 1150px) {
.product__media-wrapper {
width: 55% !important;
}
}
/* madeatdawn: 990–1149px, gallery and buy box side by side as from 1150 (the theme stacks the
thumbnail-carousel layout until 1150). One more class than section-main-product.css, so no !important. */
@media (min-width: 990px) and (max-width: 1149px) {
.product-section .product .product__outer--carousel.product__outer {
flex-direction: row;
}
}
/* Right Column */
.product__info-wrapper .product__info-container, .product .product__left-wrapper:has(.product__info-details-warpper), .product .product__info-wrapper {
max-width: 55rem !important;
padding: 0 10px;
margin: auto;
}
/* Title */
.product__info-container .product__title {
font-size: var(--font-size-h2) !important;
}
/* Price */
.product__info-container .price--product {
margin: 10px 0 15px 0;
font-size: 20px;
}
/* Button / Quantity Spacing */
.product-form__quantity .quantity,
.button--primary {
height: 5rem;
margin-top: 0 !important;
}
.product-form__quantity .quantity, .cart-item__quantity-wrapper .quantity {
background: transparent !important;
border-color: var(--global-palette5) !important;
}
/* Button */
.product__info-container .button--primary {
background: var(--global-palette4) !important;
border-radius: 0 !important;
}
.product__info-container .button--primary:hover {
background: var(--global-palette3) !important;
color: #fff !important;
}
/* Description */
.main-product-description {
padding-top: 20px !important;
}
/* Accordion */
.product-about__accordion-title > span {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.07em;
font-weight: 500;
line-height: 2em;
}
.product-about__accordion-content p {
padding-bottom: 10px;
}
.product .product-about__accordion-item {
border-color: #ddcec5 !important;
}
/* madeatdawn: Pause page "Formulated by…" (collapsible-with-image, product.sleep-supplement only). Below 750px
the two photos sit in a row above the heading, which takes the full width, instead of a 180px column between
them. Its custom_css is near Shopify's 500-character cap, so it lives here; the heading's 40px !important
there is beaten by one more class. */
@media screen and (max-width: 749px) {
#shopify-section-template--19946445734079__collapsible_with_image_eRkdD8 .collapsible-with-image_image-wrapper {
flex-wrap: wrap;
column-gap: 2.4rem;
}
#shopify-section-template--19946445734079__collapsible_with_image_eRkdD8 .collapsible-with-image_image-wrapper .collapsible-with-image_image,
#shopify-section-template--19946445734079__collapsible_with_image_eRkdD8 .collapsible-with-image_image-wrapper .collapsible-with-image_second {
position: static;
height: 7rem;
}
#shopify-section-template--19946445734079__collapsible_with_image_eRkdD8 .collapsible-with-image_content {
order: 1;
max-width: none;
}
#shopify-section-template--19946445734079__collapsible_with_image_eRkdD8 .collapsible-with-image_content .collapsible-with-image_heading {
font-size: var(--font-size-h3) !important;
}
}
/* ------------------------------------------------------------
APPSTLE SUBSCRIPTION WIDGET
---------------------------------------------------------------------- */
.appstle_widget_title, .appstle_subscription_save, .appstle-tootltip-parent {
display: none !important;
}
#appstle_subscription_widget0 .appstle_subscription_wrapper_option, #appstle_subscription_widget0 .appstle_subscription_wrapper {
border-radius: 0 !important;
}
#appstle_subscription_widget0 .appstle_circle {
background: transparent !important;
border: 1px solid var(--global-palette5) !important;
}
.appstle-active-option .appstle_circle {
background: var(--global-palette2) !important;
background-color: var(--global-palette2) !important;
}
span.appstle_dot {
height: 16px !important;
width: 16px !important;
}
span.appstle_dot {
background-color: var(--global-palette2) !important;
}
.appstle_circle::before {
display: none !important;
}
#appstle_subscription_widget0 .appstle_select_label {
text-transform: capitalize !important;
padding: 5px 0 !important;
}
.WIDGET_TYPE_7 span.appstle-save-badge {
background: var(--global-palette3) !important;
}
/* ------------------------------------------------------------
CART PAGE (/cart, sections/main-cart.liquid)
---------------------------------------------------------------------- */
/* madeatdawn: an empty cart has no Order Summary (Subtotal $0, a disabled Checkout, grey
wallet placeholders), and so no rule between it and the bag column. Keyed on
: Liquid sets it on load and cart.js toggles it
when the last line is removed in place. Adding from /cart reloads the page (there is no
cart drawer here, so product-form.js goes to /cart), which renders it without the class. */
.main-cart.is-empty #main-cart-footer {
display: none;
}
.main-cart.is-empty .main-cart__right {
border: 0;
}
/* ------------------------------------------------------------
404 PAGE (sections/main-404.liquid)
---------------------------------------------------------------------- */
/* madeatdawn: 2.4rem between the title and the text (was .8rem), the gap the text already
keeps above the search field. One class more than template-search.css, which loads later. */
.template-404 .template-404__header .page-header {
margin: 4rem 0 2.4rem;
}
/* The two outlined pills under the text: the Events filter pills' 1.5rem gap, and the
text's own 2.4rem above the search field. */
.madt-404__links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin: 0 0 2.4rem;
}
/* ------------------------------------------------------------
BLOG POST
---------------------------------------------------------------------- */
.article-template .article-template__img {
--image-height: 100% !important;
}
.article-template .article-template__img {
flex: 0 0 43% !important;
position: relative;
}
.article-template__title {
font-size: var(--font-size-h2) !important;
text-align: left !important;
}
/* Dr. Andrea Matsumura Author Exerpt */
.article-template__excerpt {
max-width: 800px !important;
padding-top: 20px !important;
}
.article-template__item p {
max-width: 550px !important;
}
.article-template__meta .article-template__item {
background: transparent !important;
color: var(--global-palette5) !important;
}
.article-template__excerpt {
max-width: 360px !important;
padding-top: 10px !important;
}
.article-template__header {
border-bottom: 1px solid var(--global-palette5) !important;
margin-top: -20px !important;
}
.article-template__header .article-template__wrapper {
gap: 20px !important;
}
.article-template--overlay .article-template__info-wrapper .article-template__info {
border: none !important
}
.article-template p {
font-size: calc(var(--font-body-scale-m)*1rem) !important;
}
.article-template h2 {
font-size: var(--font-size-h3) !important;
padding-top: 30px !important;
padding-bottom: 15px !important;
}
.article-template h3 {
font-size: var(--font-size-h4) !important;
font-family: DM Sans !important;
font-weight: 500 !important;
padding-top: 10px !important;
padding-bottom: 5px !important;
}
.article-template .rte__container:after {
content: 'Disclaimer: This content is for informational purposes only and does not replace professional medical advice, diagnosis, or treatment. If you have concerns about your sleep or hormonal health, consult a qualified healthcare provider.';
padding-top: 30px;
font-size: 12px;
opacity: 0.7;
}
.article-template__footer-content {
max-width: 100% !important;
}
.article-template__content__url, .article-template__content__url span {
padding-top: 5px !important;
font-weight: 500 !important;
}
/* Only affect screens smaller than 990px */
@media (max-width: 989px) {
.article-template__wrapper {
display: flex !important; /* ensure it's a flex container */
flex-direction: column !important; /* stack vertically */
padding-top: 20px !important;
}
/* Put text first, image second */
.article-template__info-wrapper {
order: 1 !important;
}
.article-template__img {
order: 2 !important;
}
.article-template .article-template__img::after {
padding-bottom: 70vw !important;
}
.article-template .article-template__img img {
height: 70vw !important;
}
}
.article-template .article-template__content-box {
justify-content: center !important;
gap: 4vw !important;
}
.article-template__content .rte {
max-width: 85rem !important;
}
@media screen and (max-width: 750px) {
#shopify-section-sections--19939865886911__17714916142f78c8eb {
display: none !important;
}
}
/* Reverse next post / prev post with post content on mobile */
/* Mobile: reverse the two blocks */
@media (max-width: 989px){
.article-template__content-box{
display: flex;
flex-direction: column;
}
/* Put content first */
.article-template__content-sticky{ order: 1; }
/* Put next/prev after */
.article-template__content__url{ order: 2; }
}
/* ------------------------------------------------------------
BLOG POST FOOTER
---------------------------------------------------------------------- */
.article-template__share {
font-family: 'PerfectlyNineties' !important;
text-transform: capitalize !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: var(--font-size-h4) !important;
letter-spacing: 0 !important;
color: var(--global-palette2) !important;
}
.article-template__footer-content {
width: 100% !important;
border-top: 1px solid var(--global-palette5) !important;
border-radius: 0 !important;
}
/* ------------------------------------------------------------
BLOG POST SIDEBAR
---------------------------------------------------------------------- */
.article-template__header--overlay .article-template__content__url {
position: unset !important;
}
.article-template__content__url span {
font-size: 14px !important;
}
.blog-sidebar,
.blog-sidebar *{ box-sizing: border-box; }
/* Desktop default: 280px sticky */
.blog-sidebar{
width: 280px;
max-width: 280px;
z-index: 5;
}
.blog-sidebar__summary h3 {
font-family: 'PerfectlyNineties' !important;
}
/* Make sure it never shrinks when closed */
.blog-sidebar__accordion,
.blog-sidebar__summary,
.blog-sidebar__panel{
width: 100%;
}
.blog-sidebar__accordion{
border: 0;
background: transparent;
}
/* Summary */
.blog-sidebar__summary{
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border: 0;
border-bottom: 1px solid currentColor; /* only border when closed */
}
.blog-sidebar__summary::-webkit-details-marker{ display: none; }
.blog-sidebar__summary::marker{ content: ""; }
.blog-sidebar__title{
margin: 0;
line-height: 1.2;
flex: 1 1 auto;
}
/* Icon container */
.blog-sidebar__icon{
width: 14px;
height: 14px;
flex: 0 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
/* Icon */
.blog-sidebar__icon svg{
width: 14px;
height: 14px;
display: block;
transform-origin: center;
transform: rotate(45deg); /* + when closed */
transition: transform 0.25s ease;
}
/* Rotate to X when open */
.blog-sidebar__accordion[open] .blog-sidebar__icon svg{
transform: rotate(0deg);
}
/* Hide the border when open */
.blog-sidebar__accordion[open] > .blog-sidebar__summary{
border-bottom: 0;
}
/* Panel spacing */
.blog-sidebar__panel{
padding: 14px 0 0 0;
border: 0;
}
/* Mobile: full width, not sticky */
@media (max-width: 989px){
.blog-sidebar{
width: 100%;
max-width: 100%;
top: auto;
}
.blog-sidebar__summary {
padding: 20px;
}
.blog-sidebar__panel {
padding: 0 20px;
}
.article-template__content__url span {
padding: 0 5px !important;
}
}
/* Fix: make summary clickable on mobile by ensuring it sits above overlays */
@media (max-width: 989px){
.blog-sidebar{
position: relative;
z-index: 999; /* above the article's overlays, below the sticky header (1000) */
isolation: isolate;
}
.blog-sidebar__accordion{
position: relative;
z-index: 1;
}
.blog-sidebar__summary{
position: relative;
z-index: 2;
pointer-events: auto;
touch-action: manipulation;
}
/* Prevent overlays blocking taps */
.article-template__header--overlay::before,
.article-template__header--overlay::after{
pointer-events: none;
}
}
/* ------------------------------------------------------------
BLOG POST REFERENCES
---------------------------------------------------------------------- */
.references summary {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-family: 'PerfectlyNineties' !important;
font-size: var(--font-size-h4);
padding-bottom: 20px;
}
.references summary::-webkit-details-marker {
display: none;
}
.references a {
color: var(--global-palette3) !important;
}
.references a:hover {
color: var(--global-palette4) !important;
}
.references .icon {
transform: rotate(45deg); /* makes X look like + */
transition: transform 0.25s ease;
}
.references[open] .icon {
transform: rotate(0deg); /* becomes X when open */
}
.references {
border-bottom: 1px solid var(--global-palette5);
border-top: 1px solid var(--global-palette5);
padding-top: 20px;
}
.references ol {
padding-bottom: 30px;
}
/* ------------------------------------------------------------
SHOP COLLECTION HEADER
---------------------------------------------------------------------- */
.collection-banner__text {
max-width: 100rem !important;
}
.collection-banner .collection-banner__wrapper .type-filter__list {
margin-top: 35px !important;
max-width: 80rem !important;
gap: 2.5vw !important;
}
.collection-banner
.collection-banner__wrapper
.type-filter__list
.active_opacity {
border-bottom: 1px solid var(--global-palette2) !important;
}
.collection-banner .collection-banner__wrapper .type-filter__list .h4 {
font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
}
.collection-banner__title {
font-size: 0 !important;
}
.collection-banner__title span {
font-size: var(--font-size-h2) !important;
line-height: 1em !important;
}
/* The rule above would also catch a ™'s .madt-tm span (see TYPOGRAPHY): full
h2 size, and visible even inside the hidden (font-size 0) title text. */
.collection-banner__title .madt-tm {
font-size: 0.38em !important;
line-height: 0 !important;
}
.collection-banner__body .container {
padding-top: 70px !important;
padding-bottom: 20px !important;
}
.collection-banner__desc {
display: none !important;
}
/* ------------------------------------------------------------
SHOP FILTERS
---------------------------------------------------------------------- */
.facets__wrapper_title .h4 {
font-family: 'PerfectlyNineties' !important;
font-style: italic !important;
letter-spacing: 0 !important;
}
.facets__disclosure-header {
display: none !important;
}
.facet-checkbox::before {
border-radius: 1000px !important;
}
.facets__item>input[type=checkbox]:checked+.facet-checkbox::before {
background-color: var(--global-palette2) !important;
border-color: var(--global-palette2) !important;
}
.facets__item>input[type=checkbox]:checked+.facet-checkbox>.icon-checkmark {
background: var(--global-palette2) !important;
}
.facets__item .facet-checkbox__label {
font-size: 14px !important;
}
.facets__reset {
display: none !important;
}
.collection-wrapper.collection-wrapper_drower .facets__wrapper {
padding: 0 !important;
border: none !important;
}
.collection-wrapper.collection-wrapper_drower .facets__wrapper_title, .collection-wrapper.collection-wrapper_drower .facets__disclosure {
padding-left: 0 !important;
padding-top: 0 !important;
padding-bottom: 20px !important;
}
/* ------------------------------------------------------------
SHOP CARDS
---------------------------------------------------------------------- */
.card__title {
font-size: calc(var(--font-size-h4) * 1.4) !important;
}
.card__title:hover > a {
color: var(--global-palette2) !important;
}
.product-card .quick-add {
display: none !important;
}
.card-information-block {
align-items: flex-start;
gap: 10px;
padding-bottom: 10px;
}
.price__regular .price-item--regular {
font-weight: 500 !important;
}
/* ------------------------------------------------------------
SLEEP TOPIC BLOGS
---------------------------------------------------------------------- */
/* FAQS */
.collapsible-content-item__heading {
font-size: var(--font-size-h4) !important;
}
.collapsible-content-box {
max-width: 900px !important;
}
[class*="topic-blog-post-image-"] {
aspect-ratio: 1 / 1.2 !important;
}
[class*="topic-blog-post-image-"] img {
object-fit: cover !important;
}
[class*="topic-blog-post-date-"],
[class*="topic-blog-post-excerpt-"] {
display: none !important;
}
[class*="topic-blog-post-content-"] h3 {
font-size: 30px !important;
line-height: 1em !important;
}
[class*="topic-blog-post-link-"] {
border-bottom: 1px solid var(--global-palette5) !important;
padding-bottom: 3px !important;
}
[class*="topic-blog-post-content-"] {
padding-bottom: 10px !important;
}
[class*="topic-blog-page-btn-"] {
border-radius: 0 !important;
}
[class*="topic-blog-header-container-"] {
padding: 4vw !important;
border-bottom: 1px solid var(--global-palette5) !important;
margin-bottom: 2vw !important;
}
[class*="topic-blog-title-"] {
font-family: PerfectlyNineties !important;
font-size: 24px !important;
color: var(--global-palette5) !important;
}
/* ------------------------------------------------------------
PRESS
---------------------------------------------------------------------- */
/* Set container width */
.ai-press-archive-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
max-width: 1200px !important;
margin: auto !important;
padding: 5vw 20px !important;
}
/* Press Type filter title */
.ai-press-filter-title-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
font-family: 'DM Sans' !important;
font-size: 14px !important;
font-weight: 600 !important;
}
/* featured press section header */
.ai-press-header-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
border-bottom: 1px solid var(--global-palette5);
padding-bottom: 40px !important;
}
/* sort button */
.ai-press-sort-select-az0fjv0hjcexstjdpyaigenblocke9c52adignapb, .ai-press-mobile-filter-btn-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
border-radius: 100px !important;
padding: 10px 20px !important;
width: 130px !important;
}
.ai-press-outlet-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
margin: 20px 0 !important;
}
/* press title */
.ai-press-press-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
font-size: 36px !important;
}
/* press entry row */
.ai-press-item-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
padding-top: 40px !important;
padding-bottom: 50px !important;
}
.ai-press-checkbox-item-{{ ai_gen_id }} input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 100px;
border: 1px solid var(--global-palette5);
background-color: var(--global-palette1);
cursor: pointer;
flex-shrink: 0;
transition: background-color 0.2s ease;
}
.ai-press-checkbox-item-{{ ai_gen_id }} input[type="checkbox"]:checked {
background-color: var(--global-palette2);
border: 1px solid var(--global-palette5);
}
.ai-press-sidebar-az0fjv0hjcexstjdpyaigenblocke9c52adignapb .ai-press-count-az0fjv0hjcexstjdpyaigenblocke9c52adignapb {
color: var(--global-palette5);
}
/* Shop Filter */
.facets__item .facet-checkbox__label,
.mobile-facets__label .facet-checkbox__label {
font-size: 16px;
line-height: 1.4;
}
@media screen and (max-width: 749px) {
.facets-container .mobile-facets__wrapper {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
.shop-filter-mobile-inline > summary::before {
display: none !important;
}
.shop-filter-mobile-inline {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 0;
margin-left: 0;
margin-right: 0;
position: static !important;
z-index: auto;
overflow: visible !important;
text-align: left;
width: calc(100% - 4rem);
max-width: 60rem;
}
.shop-filter-mobile-inline > summary {
display: block;
width: 100%;
}
.shop-filter-mobile-inline > facet-filters-form,
.shop-filter-mobile-inline form,
.shop-filter-mobile-inline .mobile-facets,
.shop-filter-mobile-inline .mobile-facets__inner,
.shop-filter-mobile-inline .mobile-facets__main,
.shop-filter-single-group .mobile-facets__submenu {
position: static !important;
inset: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
transform: none !important;
}
.shop-filter-mobile-inline .mobile-facets__open {
justify-content: space-between;
gap: 1.6rem;
padding: 1.4rem 2rem !important;
border: 1px solid #5a144f !important;
border-radius: 999px !important;
background: transparent !important;
color: #5a144f !important;
box-shadow: none !important;
text-transform: none;
letter-spacing: 0;
margin-left: 0;
margin-right: 0;
}
.shop-filter-mobile-inline .mobile-facets__open > span {
display: inline-flex;
align-items: center;
font-size: 1.6rem;
line-height: 1.2;
}
.shop-filter-mobile-inline .mobile-facets__open > svg,
.shop-filter-mobile-inline .mobile-facets__open .count-bubble {
display: none !important;
}
.shop-filter-mobile-inline .mobile-facets__open::after {
content: "";
width: 1.2rem;
height: 1.2rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
margin-top: -0.6rem;
flex-shrink: 0;
}
.shop-filter-mobile-inline.shop-filter-mobile-expanded .mobile-facets__open::after {
transform: rotate(225deg);
margin-top: 0.6rem;
}
.shop-filter-mobile-inline .mobile-facets {
display: none;
position: static;
inset: auto;
z-index: auto;
background-color: transparent;
pointer-events: all;
overflow: visible;
}
.shop-filter-mobile-inline[open].shop-filter-mobile-expanded .mobile-facets {
display: block;
}
.shop-filter-mobile-inline .mobile-facets__close,
.shop-filter-mobile-inline .mobile-facets__close--no-js,
.shop-filter-mobile-inline .mobile-facets__header {
display: none !important;
}
.shop-filter-mobile-inline .mobile-facets__inner {
display: block;
margin: 1.2rem 0 3.2rem;
background-color: transparent;
text-align: left;
}
.shop-filter-mobile-inline .mobile-facets__main {
display: block;
}
.shop-filter-mobile-inline .mobile-facets__main .mobile-facets__details {
padding: 0;
}
.shop-filter-mobile-inline .mobile-facets__main > .mobile-facets__details:not(:first-child) {
display: none;
}
.shop-filter-mobile-inline .mobile-facets__main > .mobile-facets__footer {
position: static;
margin-top: 0.8rem;
padding: 0 0 1.6rem;
border-top: 0;
background: transparent;
display: flex !important;
justify-content: center;
align-items: center;
width: 100%;
}
.shop-filter-mobile-inline .mobile-facets__main > .mobile-facets__footer > * {
width: auto !important;
flex: 0 0 auto;
}
.shop-filter-single-group .mobile-facets__details > .mobile-facets__summary {
display: none;
}
.shop-filter-single-group .mobile-facets__submenu {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
visibility: visible;
background-color: transparent;
}
.shop-filter-single-group .mobile-facets__submenu > .mobile-facets__close-button,
.shop-filter-single-group .mobile-facets__submenu > .mobile-facets__footer {
display: none;
}
.shop-filter-single-group .mobile-facets__list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 1.2rem;
padding: 0;
margin: 0 0 1.2rem;
}
.shop-filter-single-group .mobile-facets__item {
display: flex;
width: auto;
flex: 0 0 auto;
}
.shop-filter-single-group .mobile-facets__checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.shop-filter-single-group .mobile-facets__label {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.8rem;
min-height: 0;
padding: 0.8rem 1.6rem !important;
border: 1px solid #5a144f;
border-radius: 999px;
background: transparent;
color: #4a214c;
width: auto !important;
max-width: 100%;
white-space: nowrap;
}
.shop-filter-single-group .mobile-facets__label::before,
.shop-filter-single-group .mobile-facets__highlight,
.shop-filter-single-group .mobile-facets__label .icon-checkmark {
display: none !important;
}
.shop-filter-single-group .mobile-facets__checkbox:checked + .mobile-facets__label {
background: #5a144f;
color: #fff !important;
box-shadow: none;
}
.shop-filter-single-group .mobile-facets__checkbox:checked + .mobile-facets__label .facet-checkbox__label {
color: #fff !important;
}
.shop-filter-single-group .mobile-facets__checkbox:checked + .mobile-facets__label::after {
content: "×";
font-size: 1.4rem;
line-height: 1;
color: currentColor;
}
.shop-filter-single-group .facet-checkbox__label {
font-size: 1.4rem;
line-height: 1.2;
}
.shop-filter-single-group .shop-filter-clear {
display: none;
align-items: center;
justify-content: flex-start;
gap: 0.8rem;
width: auto;
margin-top: 0.4rem;
margin-bottom: 1.2rem;
padding: 0;
border: 0;
background: transparent;
color: #5a144f;
font-size: 1.4rem;
line-height: 1.2;
text-transform: uppercase;
cursor: pointer;
}
.shop-filter-single-group .shop-filter-clear.visible {
display: inline-flex;
}
.shop-filter-single-group .shop-filter-clear::before {
content: "×";
font-size: 1.4rem;
line-height: 1;
}
.facets-container .active-facets-mobile {
display: none !important;
}
.shop-filter-mobile-inline .mobile-facets__main > .mobile-facets__footer {
display: none !important;
}
}
/* ------------------------------------------------------------
HERO SLIDESHOW: KLAVIYO EMBED (replaces slide button)
!important needed throughout — Klaviyo sets inline styles.
---------------------------------------------------------------------- */
.slideshow-slide__klaviyo {
max-width: 44rem;
margin-top: 0.1rem;
}
/* Mobile: restore breathing room above the form (desktop stays tight) */
@media screen and (max-width: 575px) {
.slideshow-slide__klaviyo {
margin-top: 1.6rem;
}
/* Smaller hero body copy so the text block clears Andrea's portrait */
.slideshow-slide__desc,
.slideshow-slide__desc p {
font-size: 16px !important;
}
}
/* ------------------------------------------------------------
ANNOUNCEMENT BAR: SEPARATE DESKTOP / MOBILE TEXT
The mobile variant only renders when "Text (mobile)" is set.
---------------------------------------------------------------------- */
/* Doubled class beats base.css's `.announcement-bar__text{display:flex}`,
which loads after this file */
@media screen and (max-width: 575px) {
.announcement-bar__text.announcement-bar__text--desktop {
display: none;
}
/* Keep the 🌙 on the same line as the text — base.css stacks
paragraph content vertically below 576px */
.announcement-bar .announcement-bar__text p {
display: inline;
}
}
@media screen and (min-width: 576px) {
.announcement-bar__text.announcement-bar__text--mobile {
display: none;
}
}
/* Breathing room around the submit button label */
.slideshow-slide__klaviyo button {
padding-left: 25px !important;
padding-right: 25px !important;
}
/* Inputs: 1px white border, including focus (Klaviyo's focus ring is thicker).
text-indent nudges the text/placeholder right on top of Klaviyo's own padding. */
.slideshow-slide__klaviyo input[type='email'],
.slideshow-slide__klaviyo input[type='text'] {
border: 1px solid #fff !important;
text-indent: 10px !important;
}
.slideshow-slide__klaviyo input[type='email']:focus,
.slideshow-slide__klaviyo input[type='text']:focus,
.slideshow-slide__klaviyo input[type='email']:focus-visible,
.slideshow-slide__klaviyo input[type='text']:focus-visible {
border: 1px solid #fff !important;
outline: none !important;
box-shadow: none !important;
}