/* MittPillow purchasing overview: photography first, concise real product information. */ :is(.mittpillow-page,.topper-page) .breadcrumb{padding-top:24px;padding-bottom:20px;font-size:.76rem} :is(.mittpillow-page,.topper-page) .product-hero{grid-template-columns:minmax(0,1.25fr) minmax(340px,1fr);gap:clamp(28px,4vw,64px);align-items:start;padding-bottom:64px} :is(.mittpillow-page,.topper-page) .product-gallery{display:grid;grid-template-columns:clamp(44px,4vw,58px) minmax(0,1fr);gap:12px;position:sticky;top:24px;min-width:0} :is(.mittpillow-page,.topper-page) .product-gallery .product-visual{grid-column:2;grid-row:1;align-self:start;min-height:0;border-radius:8px;background:#f7f5f2;padding:14px;box-sizing:border-box} :is(.mittpillow-page,.topper-page) .product-gallery .gallery-thumbnails{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;margin:0;min-width:0} :is(.mittpillow-page,.topper-page) .gallery-thumb{flex:none;width:100%;border-radius:6px;aspect-ratio:1;border:1px solid transparent} :is(.mittpillow-page,.topper-page) .gallery-thumb.is-active{border-color:#89998f;box-shadow:none} :is(.mittpillow-page,.topper-page) .gallery-thumb:focus-visible{outline:2px solid var(--green);outline-offset:2px} :is(.mittpillow-page,.topper-page) .mittpillow-photo-counter{grid-column:2;margin:0;font-size:.7rem} :is(.mittpillow-page,.topper-page) .product-summary{padding:0;min-width:0} :is(.mittpillow-page,.topper-page) .product-summary>.eyebrow{font-size:.68rem;margin:0 0 12px} :is(.mittpillow-page,.topper-page) .product-summary h1{font-size:clamp(2.5rem,4vw,4rem);line-height:1;letter-spacing:-.05em;color:var(--green)} :is(.mittpillow-page,.topper-page) .product-summary h1 span{color:var(--coral-strong)} :is(.mittpillow-page,.topper-page) .product-tagline{font-size:1.15rem;margin:12px 0 20px;color:var(--green)} :is(.mittpillow-page,.topper-page) .product-price-line{margin:0 0 20px;flex-wrap:wrap;gap:6px 14px} :is(.mittpillow-page,.topper-page) .selected-price{font-size:1.65rem} :is(.mittpillow-page,.topper-page) .selected-unit-price{font-size:.8rem} :is(.mittpillow-page,.topper-page) .product-points{border:0;margin:0 0 20px} :is(.mittpillow-page,.topper-page) .product-points li{grid-template-columns:18px 1fr;gap:8px;padding:5px 0;border:0;font-size:.86rem;line-height:1.5} :is(.mittpillow-page,.topper-page) .product-points li span{font-size:1rem;color:var(--salmon,#ee9b89)} :is(.mittpillow-page,.topper-page) .product-points li p{color:var(--green)} .mp-filling-offer{display:flex;gap:12px;padding:16px 18px;background:#ffe0d4;border-radius:14px;color:var(--green);margin:0 0 22px} .mp-filling-offer>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-size:1.2rem} .mp-filling-offer strong{font-size:1rem}.mp-filling-offer p{font-size:.8rem;line-height:1.5;margin:5px 0 0} :is(.mittpillow-page,.topper-page) .bundle-picker{margin-bottom:18px}:is(.mittpillow-page,.topper-page) .bundle-picker legend{font-size:.9rem;margin-bottom:10px} :is(.mittpillow-page,.topper-page) .bundle-option{min-height:66px;border-radius:12px;background:#fff} :is(.mittpillow-page,.topper-page) .bundle-option.is-selected{border-color:var(--green);background:#fff4ee;box-shadow:0 0 0 1px var(--green)} :is(.mittpillow-page,.topper-page) .bundle-option input{accent-color:var(--green)} :is(.mittpillow-page,.topper-page) .product-cta{width:100%;border-radius:999px;min-height:54px;background:var(--green);color:#fff;font-size:.95rem} :is(.mittpillow-page,.topper-page) .product-cta:hover{background:#183a30} :is(.mittpillow-page,.topper-page) .product-action>p{text-align:center;font-size:.76rem;margin:12px 0 20px} :is(.mittpillow-page,.topper-page) .mp-trial-assurance{display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 16px;border-radius:12px;background:#f0f3ef;color:var(--green)} .mp-trial-icon{flex:0 0 24px;width:24px;height:27px} :is(.mittpillow-page,.topper-page) .mp-trial-assurance h2{margin:0;font-family:var(--body);font-size:.93rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--green)} :is(.mittpillow-page,.topper-page) .mp-trial-assurance p{margin:3px 0 0;font-size:.78rem;line-height:1.45;color:var(--green)} :is(.mittpillow-page,.topper-page) .mp-trial-assurance a{display:inline-flex;align-items:center;gap:10px;min-height:32px;font-size:.8rem;font-weight:700;text-decoration:underline;text-underline-offset:4px} .mp-buy-details{border-top:1px solid var(--line);margin-top:8px}.mp-buy-details details{border-bottom:1px solid var(--line);padding:16px 0}.mp-buy-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:700;font-size:.87rem;color:var(--green)}.mp-buy-details summary::-webkit-details-marker{display:none}.mp-buy-details summary:after{content:'+';margin-left:15px}.mp-buy-details details[open] summary:after{content:'−'}.mp-buy-details p,.mp-buy-details a{font-size:.82rem;line-height:1.65}.mp-buy-details a{text-decoration:underline;text-underline-offset:3px} :is(.mittpillow-page,.topper-page) .mp-specifications{margin:18px 0 0;font-size:.82rem;line-height:1.65;color:var(--green)} :is(.mittpillow-page,.topper-page) .mp-specifications>div{margin:0 0 12px} :is(.mittpillow-page,.topper-page) .mp-specifications>div:last-child{margin-bottom:0} :is(.mittpillow-page,.topper-page) .mp-specifications dt{display:inline;font-weight:700} :is(.mittpillow-page,.topper-page) .mp-specifications dd{display:inline;margin:0} :is(.mittpillow-page,.topper-page) .mp-buy-details summary:focus-visible{outline:2px solid var(--green);outline-offset:5px;border-radius:2px} @media(max-width:900px){:is(.mittpillow-page,.topper-page) .product-hero{display:block}:is(.mittpillow-page,.topper-page) .product-gallery{position:static;display:flex;flex-direction:column;gap:10px}:is(.mittpillow-page,.topper-page) .product-gallery .gallery-thumbnails{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0}:is(.mittpillow-page,.topper-page) .product-gallery .product-visual{width:100%;border-radius:14px}:is(.mittpillow-page,.topper-page) .product-summary{padding-top:26px}:is(.mittpillow-page,.topper-page) .product-summary h1{font-size:2.8rem}:is(.mittpillow-page,.topper-page) .breadcrumb{padding-block:16px}:is(.mittpillow-page,.topper-page) .product-points li{font-size:.9rem}:is(.mittpillow-page,.topper-page) .gallery-thumb{border-radius:7px}} /* Calm, expandable service information below the purchase options. */ :is(.mittpillow-page,.topper-page) .mp-buy-details details{padding:22px 0} :is(.mittpillow-page,.topper-page) .mp-buy-details summary{align-items:baseline;gap:16px;font-size:.9rem;font-weight:600;line-height:1.5} :is(.mittpillow-page,.topper-page) .mp-buy-details summary:after{flex:0 0 16px;text-align:center;font-weight:400} :is(.mittpillow-page,.topper-page) .mp-buy-details details[open] summary:after{content:'×'} :is(.mittpillow-page,.topper-page) .mp-detail-content{padding-top:18px} :is(.mittpillow-page,.topper-page) .mp-detail-content h3{font-size:.85rem;line-height:1.5;margin:0 0 4px;font-weight:700;letter-spacing:normal} :is(.mittpillow-page,.topper-page) .mp-detail-content p{margin:0 0 12px} :is(.mittpillow-page,.topper-page) .mp-detail-content h3:not(:first-child){margin-top:20px} :is(.mittpillow-page,.topper-page) .mp-detail-content p:last-child{margin-bottom:0} /* Dreamitt product story: shared brand, separate and spacious content sections. */ :is(.mittpillow-page,.topper-page) .mp-buy-details{border-top:0;margin-top:28px} /* Product information stays on the page, with a compact, scrollable tab rail. */ .mp-product-tabs{margin-top:30px;min-width:0;color:var(--green)} .mp-tab-list{display:flex;gap:22px;max-width:100%;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:thin;scrollbar-color:#c8d1cd transparent;overscroll-behavior-x:contain} .mp-tab-button{flex:0 0 auto;appearance:none;padding:14px 0 13px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:600 .85rem/1.5 var(--body);white-space:nowrap;cursor:pointer} .mp-tab-button:hover{color:var(--green)} .mp-tab-button[aria-selected=true]{border-bottom-color:var(--coral);color:var(--green)} .mp-tab-panel{padding:25px 0 8px;font-size:.85rem;line-height:1.7} .mp-tab-panel[hidden]{display:none} .mp-tab-copy+.mp-tab-copy{margin-top:23px} :is(.mittpillow-page,.topper-page) .mp-tab-panel h3{margin:0 0 8px;font:700 1.03rem/1.4 var(--heading);letter-spacing:-.015em;color:var(--green)} .mp-tab-panel p{margin:0;color:var(--muted)} .mp-tab-panel .mp-tab-footnote{margin-top:24px;font-size:.8rem;line-height:1.65} .mp-included-list{margin:12px 0 0;padding-left:19px;color:var(--muted)} .mp-included-list li{padding-left:3px;margin-bottom:12px} .mp-included-list li::marker{color:var(--green)} .mp-included-list strong{color:var(--green)} .mp-tab-setup{margin-top:24px;padding:18px;border-radius:12px;background:#fff2ee} .mp-inline-guide{margin-top:16px;border-top:1px solid #eacfc5;padding-top:12px} .mp-inline-guide summary{display:flex;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;font-weight:700} .mp-inline-guide summary::-webkit-details-marker{display:none} .mp-inline-guide summary span{display:inline-block;transition:transform .18s ease;font-size:1.1rem} .mp-inline-guide[open] summary span{transform:rotate(45deg)} .mp-inline-guide ol{margin:16px 0 0;padding-left:20px;color:var(--muted)} .mp-inline-guide li+li{margin-top:10px} :is(.mittpillow-page,.topper-page) .mp-product-tabs+.mp-buy-details{margin-top:18px} @media(max-width:600px){.mp-tab-list{gap:20px}.mp-tab-button{font-size:.84rem}.mp-tab-panel{font-size:.9rem}} :is(.mittpillow-page,.topper-page) .main-nav{grid-template-columns:135px minmax(0,1fr) 135px;gap:24px} :is(.mittpillow-page,.topper-page) .desktop-links{justify-content:center;gap:clamp(18px,2.3vw,28px)} :is(.mittpillow-page,.topper-page) .desktop-links a{position:relative;padding-block:12px;color:var(--ink)} :is(.mittpillow-page,.topper-page) .desktop-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--coral);transform:scaleX(0);transition:transform .2s ease} :is(.mittpillow-page,.topper-page) .desktop-links a:hover::after,:is(.mittpillow-page,.topper-page) .desktop-links a:focus-visible::after,:is(.mittpillow-page,.topper-page) .desktop-links a[aria-current=page]::after{transform:scaleX(1)} :is(.mittpillow-page,.topper-page) .nav-actions{justify-self:end} :is(.mittpillow-page,.topper-page) .bag-button{width:44px;height:44px;border:1px solid var(--green);border-radius:50%;background:transparent} :is(.mittpillow-page,.topper-page) .mp-story{padding-block:28px 88px} .mp-story-intro{max-width:650px;padding-bottom:44px} .mp-story-intro h2{margin:12px 0 20px;font-family:var(--heading);font-size:clamp(2.6rem,4.6vw,4.25rem);font-weight:800;line-height:1.02;letter-spacing:-.055em;color:var(--green)} .mp-story-intro>p:last-child{max-width:520px;margin:0;color:var(--muted);font-size:1.05rem;line-height:1.7} .mp-story-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,76px);align-items:center;margin:0;padding:56px 0;background:#fff} .mp-story-lead{gap:clamp(28px,4vw,56px);padding:clamp(24px,3.5vw,46px);border-radius:18px;background:#fff2ee;margin-bottom:18px} .mp-story-photo{min-width:0;margin:0;overflow:hidden;border-radius:12px;background:#f3f3f3} .mp-story-photo img{display:block;width:100%;height:auto;object-fit:contain} .mp-story-copy{min-width:0;padding:0} .mp-story-copy .eyebrow{margin:0 0 16px!important;font-size:.78rem!important;letter-spacing:.09em} .mp-story-copy h2{margin:0 0 24px;font-family:var(--heading);font-size:clamp(2.15rem,3.6vw,3.45rem);font-weight:800;line-height:1.05;letter-spacing:-.05em;color:var(--green)} .mp-story-copy>p:not(.eyebrow){max-width:47ch;margin:0 0 20px;color:var(--muted);font-size:1rem;line-height:1.75} .mp-foam-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 20px} .mp-foam-options>div{padding:18px;border-radius:12px;color:var(--green)} .mp-foam-blue{background:#c9e8f4}.mp-foam-white{background:#fff} .mp-foam-options dt{font-family:var(--heading);font-weight:800;font-size:1.4rem;letter-spacing:-.025em} .mp-foam-options dd{margin:7px 0 0;font-size:.85rem;line-height:1.6} .mp-foam-options dd strong{display:block;font-size:1.05rem} .mp-story-copy .mp-independent-note{font-size:.875rem!important;margin-bottom:0!important} .mp-filling-note{padding-left:18px;border-left:2px solid var(--coral);margin:26px 0 24px;color:var(--green)} .mp-filling-note>strong{display:block;font-size:1rem;margin-bottom:6px} .mp-filling-note p{margin:0;max-width:44ch;color:var(--muted);font-size:.9rem;line-height:1.65} .mp-story-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;padding-block:8px;border-bottom:1px solid var(--coral);font-size:.95rem;font-weight:800;color:var(--green);text-decoration:none} .mp-story-link:focus-visible,.mp-temperature-options button:focus-visible{outline:3px solid var(--green);outline-offset:4px} .mp-temperature-photo{background:#f6c5ad} .mp-temperature-photo figcaption{padding:13px 18px;background:#fff6f0;color:var(--green);text-align:center;font-size:.8rem;line-height:1.5} .mp-temperature-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} .mp-temperature-options button{min-height:46px;padding:11px 20px;border:1px solid #9caaa9;border-radius:999px;background:#fff;color:var(--green);font:700 .875rem var(--body);cursor:pointer;transition:background-color .18s ease,color .18s ease} .mp-temperature-options button[aria-pressed=true]{color:#fff;background:var(--green);border-color:var(--green)} :is(.mittpillow-page,.topper-page) .product-faq{padding-block:80px;background:#f4f5f5} :is(.mittpillow-page,.topper-page) .faq-layout{gap:clamp(36px,6vw,88px);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} :is(.mittpillow-page,.topper-page) .faq-intro>p:not(.eyebrow){color:var(--muted);line-height:1.7;margin-bottom:24px} :is(.mittpillow-page,.topper-page) .faq-list summary{font-size:1rem;line-height:1.45} :is(.mittpillow-page,.topper-page) .faq-list details p{font-size:.95rem} :is(.mittpillow-page,.topper-page) .product-guide-link{font-size:.875rem;line-height:1.4;text-align:center;padding:13px 20px} :is(.mittpillow-page,.topper-page) .closing-inner{padding-block:76px} :is(.mittpillow-page,.topper-page) .product-closing h2{font-size:clamp(3rem,5.5vw,4.9rem)} :is(.mittpillow-footer,.topper-footer) .footer-inner{grid-template-columns:.8fr 2fr;gap:44px 70px} :is(.mittpillow-footer,.topper-footer) .footer-links a,:is(.mittpillow-footer,.topper-footer) .footer-brand p{font-size:.875rem} :is(.mittpillow-footer,.topper-footer) .footer-links h2{font-size:1rem} :is(.mittpillow-footer,.topper-footer) .footer-bottom{grid-template-columns:1fr auto;font-size:.8125rem} :is(.mittpillow-page,.topper-page) :is(button,a,summary,input):focus-visible{outline:3px solid var(--green);outline-offset:4px} :is(.mittpillow-page,.topper-page) .product-closing a:focus-visible,:is(.mittpillow-footer,.topper-footer) a:focus-visible{outline-color:var(--coral)} @media(max-width:1100px) and (min-width:901px){:is(.mittpillow-page,.topper-page) .main-nav{grid-template-columns:135px 1fr 44px;gap:24px}:is(.mittpillow-page,.topper-page) .desktop-links{gap:20px;font-size:.83rem}} @media(max-width:900px){ :is(.mittpillow-page,.topper-page) .main-nav{grid-template-columns:44px minmax(0,1fr) 44px;gap:16px} :is(.mittpillow-page,.topper-page) .desktop-links{display:none} :is(.mittpillow-page,.topper-page) .product-gallery .gallery-thumbnails{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 7px;scrollbar-width:thin;scroll-snap-type:x proximity} :is(.mittpillow-page,.topper-page) .gallery-thumb{flex:0 0 clamp(48px,9vw,76px);width:clamp(48px,9vw,76px);scroll-snap-align:center} :is(.mittpillow-page,.topper-page) .product-summary{padding-top:28px} :is(.mittpillow-page,.topper-page) .product-hero{padding-bottom:42px} .mp-story-row{gap:30px;padding-block:36px} .mp-story-lead{padding:28px;gap:28px} .mp-story-copy h2{font-size:2.3rem} .mp-foam-options>div{padding:14px} } @media(max-width:760px){ :is(.mittpillow-page,.topper-page) .mp-story{padding-block:20px 50px} .mp-story-intro{padding-bottom:30px} .mp-story-intro h2{font-size:2.8rem} .mp-story-intro>p:last-child{font-size:1rem} .mp-story-row{grid-template-columns:1fr;gap:26px;padding:32px 0} .mp-story-lead{padding:22px;margin-bottom:4px} .mp-story-row-reverse .mp-story-photo{order:-1} .mp-story-copy h2{font-size:2.55rem;margin-bottom:20px} .mp-story-copy>p:not(.eyebrow){max-width:none;font-size:1rem} .mp-story-copy .eyebrow{font-size:.75rem!important} .mp-foam-options{margin-top:20px} .mp-foam-options dt{font-size:1.35rem} .mp-temperature-options{margin-top:22px} :is(.mittpillow-page,.topper-page) .product-faq{padding-block:54px} :is(.mittpillow-page,.topper-page) .faq-layout{grid-template-columns:1fr;gap:30px} :is(.mittpillow-page,.topper-page) .faq-list details p{margin-right:0} :is(.mittpillow-page,.topper-page) .closing-inner{padding-block:58px} :is(.mittpillow-footer,.topper-footer) .footer-inner{grid-template-columns:1fr;gap:30px} :is(.mittpillow-footer,.topper-footer) .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px} :is(.mittpillow-footer,.topper-footer) .footer-bottom{grid-template-columns:1fr;gap:12px} :is(.mittpillow-footer,.topper-footer) .footer-bottom>p:last-child{justify-self:start} } @media(max-width:380px){ .mp-story-lead{padding:18px} .mp-story-copy h2{font-size:2.15rem} .mp-foam-options{gap:8px} .mp-foam-options>div{padding:12px} .mp-foam-options dd{font-size:.78rem} :is(.mittpillow-page,.topper-page) .bundle-option{padding:12px 10px;gap:8px} :is(.mittpillow-page,.topper-page) .bundle-total{font-size:.9rem} :is(.mittpillow-page,.topper-page) .bundle-total em{font-size:.6rem} } @media(prefers-reduced-motion:reduce){:is(.mittpillow-page,.topper-page) .desktop-links a::after,.mp-temperature-options button{transition:none}} /* Mobile gallery: native horizontal swipe, with the next photo in view. */ :is(.mittpillow-page,.topper-page) .mp-mobile-gallery{display:none} @media(max-width:900px){ :is(.mittpillow-page,.topper-page) .product-gallery:is(.mittpillow-photo-series,.topper-photo-series){display:block;position:static;min-width:0} :is(.mittpillow-page,.topper-page) .product-gallery:is(.mittpillow-photo-series,.topper-photo-series)>.product-visual, :is(.mittpillow-page,.topper-page) .product-gallery:is(.mittpillow-photo-series,.topper-photo-series)>.gallery-thumbnails, :is(.mittpillow-page,.topper-page) .product-gallery:is(.mittpillow-photo-series,.topper-photo-series)>.gallery-counter{display:none!important} :is(.mittpillow-page,.topper-page) .mp-mobile-gallery{display:flex;flex-flow:row nowrap;gap:12px;width:calc(100% + 16px);max-width:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:0 16px 0 0;box-sizing:border-box} :is(.mittpillow-page,.topper-page) .mp-mobile-gallery::-webkit-scrollbar{display:none} :is(.mittpillow-page,.topper-page) .mp-mobile-slide{flex:0 0 91%;min-width:0;aspect-ratio:1;margin:0;padding:0;box-sizing:border-box;overflow:hidden;border-radius:8px;scroll-snap-align:start;background:#f7f5f2} :is(.mittpillow-page,.topper-page) .mp-mobile-slide img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;transform:none} :is(.mittpillow-page,.topper-page) .mp-mobile-gallery:focus-visible{outline:2px solid var(--green);outline-offset:3px} } /* Edge-to-edge photo viewer, with a persistent close control. */ :is(.mittpillow-page,.topper-page) .mp-mobile-slide,:is(.mittpillow-page,.topper-page) .gallery-main-image{cursor:zoom-in} .mp-photo-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#f7f5f2;overflow:auto;overscroll-behavior:contain;box-sizing:border-box} .mp-photo-viewer::backdrop{background:#f7f5f2} .mp-photo-viewer-list{display:flex;flex-direction:column;align-items:center;gap:28px;padding:68px 18px max(24px,env(safe-area-inset-bottom))} .mp-photo-viewer-list img{display:block;width:100%;max-width:860px;height:auto;flex:none;object-fit:contain;border-radius:4px} .mp-photo-close{position:fixed;z-index:2;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #b9c0ba;border-radius:50%;background:#fffffff0;color:#294a3e;font:30px/1 Arial,sans-serif;cursor:pointer} .mp-photo-close:focus-visible{outline:3px solid #ee9b89;outline-offset:3px} /* Softer photographic presentation; retain complete product and instruction images. */ :is(.mittpillow-page,.topper-page) :is(.mittpillow-photo-series,.topper-photo-series) img{filter:saturate(.88) contrast(.98)} :is(.mittpillow-page,.topper-page) .product-gallery .product-visual .gallery-main-image{border-radius:3px} :is(.mittpillow-page,.topper-page) .gallery-thumb:hover{transform:none;border-color:#89998f} :is(.mittpillow-page,.topper-page) .mittpillow-photo-counter{color:#69776e;font-weight:400} @media(max-width:900px){:is(.mittpillow-page,.topper-page) .product-summary{padding-top:24px}:is(.mittpillow-page,.topper-page) .mp-mobile-slide img{border-radius:0}} /* Product-page reference: full-size scrolling photos and a sticky buying panel. */ @media(min-width:901px){ :is(.mittpillow-page,.topper-page) .product-gallery:is(.mittpillow-photo-series,.topper-photo-series){display:block;position:static} :is(.mittpillow-page,.topper-page) :is(.mittpillow-photo-series,.topper-photo-series)>.product-visual, :is(.mittpillow-page,.topper-page) :is(.mittpillow-photo-series,.topper-photo-series)>.gallery-thumbnails, :is(.mittpillow-page,.topper-page) :is(.mittpillow-photo-series,.topper-photo-series)>.gallery-counter{display:none} :is(.mittpillow-page,.topper-page) .mp-mobile-gallery{display:flex;flex-direction:column;gap:18px;width:100%} :is(.mittpillow-page,.topper-page) .mp-mobile-slide{margin:0;padding:0;aspect-ratio:1;overflow:hidden;border-radius:6px;background:#f7f5f2} :is(.mittpillow-page,.topper-page) .mp-mobile-slide img{display:block;width:100%;height:100%;object-fit:contain} :is(.mittpillow-page,.topper-page) .product-summary{position:sticky;top:var(--mp-summary-top,24px);align-self:start;padding-top:0} } .mp-product-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap} :is(.mittpillow-page,.topper-page) .mp-product-heading .eyebrow{margin:0} .mp-review-jump{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:.75rem;color:var(--green);text-underline-offset:4px} .mp-review-stars{color:var(--green);letter-spacing:2px;font-size:1rem;white-space:nowrap} .mp-reviews{padding-block:76px 64px;scroll-margin-top:110px;color:var(--green)} .mp-reviews-heading{text-align:center;max-width:620px;margin:0 auto 48px} .mp-reviews-heading h2{font-family:var(--heading);font-size:clamp(2.2rem,4vw,3.5rem);font-weight:500;letter-spacing:-.04em;margin:12px 0} .mp-reviews-heading>.mp-review-stars{font-size:1.4rem} .mp-reviews-heading>p:not(.eyebrow){font-size:.9rem;color:var(--muted);margin:14px 0 24px} .mp-write-review{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--green);color:#fff;padding:14px 30px;border-radius:4px;font-weight:600;font-size:.9rem;text-decoration:none;min-height:48px} .mp-write-review:hover{background:#183a30} .mp-reviews-heading small{display:block;margin-top:12px;font-size:.75rem;color:var(--muted)} .mp-reviews-list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-block:1px solid var(--line);font-size:.8rem} .mp-reviews-list-heading h3{font-family:var(--body);font-size:.9rem;font-weight:500;margin:0} .mp-reviews-list-heading h3 span{color:var(--muted);margin-left:6px} .mp-reviews-empty{padding:40px 0;border-bottom:1px solid var(--line)} .mp-reviews-empty h3{font-size:1.05rem;font-weight:500;margin:0 0 10px} .mp-reviews-empty p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6} @media(max-width:900px){.mp-reviews{padding-block:50px}.mp-reviews-heading{margin-bottom:32px}} /* Google review excerpts supplied by the shop owner. Native touch carousel. */ .mp-google-summary{margin:28px 0;padding-top:24px;border-top:1px solid var(--line);min-width:0} :is(.mittpillow-page,.topper-page) .mp-google-summary h2{font:500 1.15rem/1.4 var(--body);margin:0 0 6px;letter-spacing:0} .mp-google-summary>p{font-size:.85rem;color:var(--muted);margin:0 0 18px} .mp-google-carousel,.mp-google-slide{min-width:0} .mp-google-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 2px 8px;-webkit-overflow-scrolling:touch} .mp-google-track::-webkit-scrollbar{display:none} .mp-google-slide{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px} .mp-google-summary .mp-google-slide{flex-basis:100%} .mp-google-card{display:flex;flex-direction:column;flex:1;border:1px solid #bdc9bf;border-radius:10px;background:#f5f6f0;padding:22px;color:var(--green)} .mp-google-card blockquote{font:400 .95rem/1.65 var(--body);margin:12px 0 18px} .mp-google-card footer{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.78rem;line-height:1.5} .mp-google-card footer strong{font-weight:600}.mp-google-card footer span{color:var(--muted)} .mp-google-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:.75rem;color:var(--muted)} .mp-google-controls>div{display:flex;gap:8px}.mp-google-controls button{width:40px;height:40px;border:1px solid #bdc9bf;border-radius:50%;background:transparent;color:var(--green);font-size:20px;cursor:pointer}.mp-google-controls button:disabled{opacity:.3;cursor:default} .mp-google-track:focus-visible,.mp-google-controls button:focus-visible{outline:2px solid var(--green);outline-offset:3px} @media(max-width:900px){.mp-reviews .mp-google-slide{flex-basis:85%}.mp-google-card{padding:18px}.mp-google-summary .mp-google-card blockquote{font-size:.9rem}} /* Compact Google reviews: one card per swipe in the buying panel. */ .mp-google-logo{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle;object-fit:contain} .mp-google-label{display:flex;align-items:center;gap:8px} :is(.mittpillow-page,.topper-page) .mp-google-summary h2{font-size:.85rem;margin-bottom:12px} .mp-google-summary{margin:20px 0;padding-top:18px} .mp-google-card{padding:14px 16px;border-radius:8px} .mp-google-card .mp-review-stars{font-size:.85rem;letter-spacing:1.5px} .mp-google-card blockquote,.mp-google-summary .mp-google-card blockquote{font-size:.82rem;line-height:1.5;margin:8px 0 12px} .mp-google-card footer{align-items:center;justify-content:space-between;font-size:.72rem} .mp-google-card .mp-google-logo{width:16px;height:16px} .mp-google-controls{margin-top:4px;font-size:.68rem}.mp-google-controls button{width:32px;height:32px;font-size:17px} .mp-reviews{padding-block:40px}.mp-reviews-heading{margin-bottom:22px} .mp-reviews-heading h2{font-size:clamp(1.65rem,3vw,2.35rem);margin:8px 0} .mp-reviews-heading>.mp-review-stars{font-size:1rem} .mp-reviews-heading .mp-google-label{justify-content:center;font-size:.78rem;margin-top:8px} /* Reuse the homepage review cards and spotlight, with real Google reviews. */ .mp-review-cloud{padding:44px 0 34px;margin-top:20px} .mp-review-cloud .review-cloud-header{margin-bottom:22px} .mp-review-cloud .review-cloud-header h2{font-size:clamp(1.8rem,3vw,2.6rem)} .mp-review-cloud .review-cloud-header h2 em{color:var(--coral);font-style:normal} .mp-review-cloud .review-card-source::before{display:none} .mp-review-cloud .review-card-quote{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem} .mp-review-cloud .review-cloud-card{min-height:164px} .mp-review-cloud .review-cloud-hint{font:400 .75rem/1.5 var(--body);margin-top:14px} .mp-review-cloud .review-spotlight-eyebrow{display:flex;align-items:center;gap:8px} .mp-review-cloud-compact{padding:18px 0 14px;margin:20px 0;border-radius:12px;min-width:0} .mp-review-cloud-compact::before{width:100px;top:-20px;right:-30px} .mp-review-cloud-compact .review-cloud-header{padding:0 14px;margin-bottom:4px;flex-direction:row;align-items:center;gap:8px} :is(.mittpillow-page,.topper-page) .mp-review-cloud-compact .review-cloud-header h2{font:600 .85rem/1.4 var(--body);letter-spacing:0;margin:0} .mp-review-cloud-compact .review-motion{min-height:32px;padding:7px 9px;font-size:.65rem;gap:6px} .mp-review-cloud-compact .review-cloud-card{flex-basis:270px;width:270px;min-height:150px;padding:14px;gap:10px} .mp-review-cloud-compact .review-card-quote{font-size:.82rem} .mp-review-cloud-compact .review-card-bottom{font-size:.7rem} .mp-review-cloud-compact .review-cloud-hint{padding:0 14px;margin-top:4px;font-size:.68rem} /* Alternating, equal-width image and copy panels for the three adjustable layers. */ :is(.mittpillow-page,.topper-page) .mp-feature-story{padding-block:48px 72px} .mp-feature-story .mp-story-intro{max-width:820px;margin:auto;text-align:center;padding-bottom:40px} .mp-feature-story .mp-story-intro>p:last-child{margin-inline:auto;max-width:590px} .mp-feature-story .mp-story-intro h2{font-size:clamp(2.25rem,4.4vw,3.8rem)} .mp-feature-grid{overflow:hidden;border:1px solid #e0e3de;border-radius:14px} .mp-feature-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} .mp-feature-row+.mp-feature-row{border-top:1px solid #e0e3de} .mp-feature-photo{position:relative;min-width:0;margin:0;background:#eee;overflow:hidden;min-height:400px} .mp-feature-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .mp-feature-photo figcaption{position:absolute;bottom:16px;left:16px;right:16px;width:fit-content;padding:8px 12px;background:#fffffff0;border-radius:20px;color:var(--green);font-size:.72rem} .mp-feature-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,4vw,60px);background:#f7f7f2;color:var(--green)} .mp-feature-row:nth-child(2) .mp-feature-copy{background:#fff0eb} .mp-feature-reverse .mp-feature-photo{grid-column:2;grid-row:1} .mp-feature-reverse .mp-feature-copy{grid-column:1;grid-row:1} .mp-feature-copy .eyebrow{font-size:.72rem;margin:0 0 18px;letter-spacing:.09em} .mp-feature-copy h2{font-family:var(--heading);font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 22px} .mp-feature-copy h2 em{font-style:normal;font-weight:500} .mp-feature-copy>p:not(.eyebrow){font-size:.95rem;line-height:1.7;margin:0 0 16px;color:var(--muted)} .mp-feature-copy .mp-story-link{align-self:flex-start;font-size:.85rem} .mp-feature-copy .mp-temperature-options{margin-top:6px;flex-wrap:wrap} .mp-feature-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .mp-feature-tags span{display:flex;align-items:center;gap:7px;font-size:.75rem;padding:9px 11px;border:1px solid #d8d9d2;border-radius:30px} .mp-feature-tags i{width:12px;height:12px;border-radius:50%;border:1px solid #b7c5c8}.mp-dot-blue{background:#8cb9d2}.mp-dot-white{background:#fff} @media(max-width:700px){ :is(.mittpillow-page,.topper-page) .mp-feature-story{padding-block:28px 44px} .mp-feature-story .mp-story-intro{padding-bottom:26px} .mp-feature-row{grid-template-columns:1fr} .mp-feature-photo{min-height:0;aspect-ratio:1} .mp-feature-photo img{height:100%} .mp-feature-reverse .mp-feature-photo,.mp-feature-reverse .mp-feature-copy{grid-column:auto;grid-row:auto} .mp-feature-copy{padding:28px 24px 32px} .mp-feature-copy h2{font-size:2rem} .mp-feature-copy>p:not(.eyebrow){font-size:.9rem} } .mp-inner-photo{aspect-ratio:1;min-height:0;background:#f3c2a8;align-self:center} .mp-inner-photo img{width:100%;height:100%;object-fit:contain} .mp-inner-photo img[hidden]{display:none} .mp-inner-options{display:flex;flex-wrap:wrap;gap:8px} /* Explore the actual pillow layers through linked hotspots and native disclosures. */ .mp-anatomy{padding:68px 0 76px;background:#fff0eb;color:var(--green);scroll-margin-top:110px} .mp-anatomy-heading{text-align:center;max-width:740px;margin:0 auto 38px} .mp-anatomy-heading .eyebrow{font-size:.72rem;letter-spacing:.09em;margin:0 0 14px} .mp-anatomy-heading h2{font-family:var(--heading);font-size:clamp(2.1rem,4.1vw,3.6rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 18px} .mp-anatomy-heading h2 span{font-weight:500} .mp-anatomy-heading>p:last-child{font-size:1rem;line-height:1.6;color:var(--muted);margin:0} .mp-anatomy-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center} .mp-anatomy-visual{position:relative;min-width:0;aspect-ratio:1;border-radius:16px;overflow:hidden;isolation:isolate;background:#f8d1c3} .mp-anatomy-visual>img{display:block;width:100%;height:100%;object-fit:contain} .mp-anatomy-point{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffffba;border-radius:50%;background:var(--green);color:white;box-shadow:0 0 0 6px #ffffff38,0 3px 12px #233e3b24;transform:translate(-50%,-50%);cursor:pointer;transition:background .2s,box-shadow .2s} .mp-anatomy-point[hidden]{display:none} .mp-anatomy-point span{display:block;font:400 24px/1 var(--body);transition:transform .2s} .mp-anatomy-point[aria-expanded="true"]{background:#f19b86;color:#213d39;box-shadow:0 0 0 7px #ffffff68,0 3px 12px #233e3b24} .mp-anatomy-point[aria-expanded="true"] span{transform:rotate(45deg)} .mp-anatomy-point:hover{box-shadow:0 0 0 8px #ffffff68,0 3px 12px #233e3b24} .mp-anatomy-point:focus-visible,.mp-anatomy-details summary:focus-visible{outline:3px solid var(--green);outline-offset:5px} .mp-anatomy-details{min-width:0} .mp-anatomy-details details{border-bottom:1px solid #decac1} .mp-anatomy-details details:first-child{border-top:1px solid #decac1} .mp-anatomy-details summary{display:flex;align-items:center;gap:14px;padding:24px 0;list-style:none;cursor:pointer;font:600 clamp(1rem,1.6vw,1.15rem)/1.4 var(--body)} .mp-anatomy-details summary::-webkit-details-marker{display:none} .mp-anatomy-number{font-size:.7rem;font-weight:500;color:#876558;letter-spacing:.06em;flex:none} .mp-anatomy-toggle{margin-left:auto;flex:none;font-size:24px;font-weight:400;line-height:1;transition:transform .2s} .mp-anatomy-details details[open] .mp-anatomy-toggle{transform:rotate(45deg)} .mp-anatomy-copy{padding:0 0 24px 32px;font-size:.9rem;line-height:1.7;color:var(--muted)} .mp-anatomy-copy p{margin:0 0 14px} .mp-anatomy-copy p:last-child{margin-bottom:0} .mp-anatomy-copy .mp-anatomy-lead{font-weight:600;color:var(--green);font-size:.96rem} @media(max-width:760px){ .mp-anatomy{padding:42px 0 46px} .mp-anatomy-heading{margin-bottom:24px} .mp-anatomy-heading h2 span{display:block} .mp-anatomy-heading>p:last-child{font-size:.9rem} .mp-anatomy-layout{grid-template-columns:1fr;gap:22px} .mp-anatomy-visual{border-radius:10px} .mp-anatomy-details summary{padding:20px 0} .mp-anatomy-copy{padding-left:30px;font-size:.88rem} } @media(prefers-reduced-motion:reduce){.mp-anatomy-point,.mp-anatomy-point span,.mp-anatomy-toggle{transition:none}} /* Small, playful invitations to explore the two sides and the three layers. */ @font-face{font-family:"Dreamitt Hand";src:url("./assets/fonts/Z003-MediumItalic.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap} .mp-side-flip{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;color:var(--green);cursor:pointer;border-radius:inherit} .mp-side-flip[hidden],.mp-side-prompt[hidden],.mp-anatomy-tip[hidden]{display:none} .mp-flip-hint{position:absolute;top:23px;right:26px;display:inline-flex;align-items:center;min-height:44px;padding:0 3px 3px;color:var(--green);font:400 clamp(1.85rem,2.8vw,2.3rem)/1.1 "Dreamitt Hand","Bradley Hand",cursive;transform:rotate(-6deg);text-shadow:0 1px 8px #ffffffba;transition:transform .2s} .mp-flip-hint::after{content:"";position:absolute;left:3px;right:1px;bottom:0;height:6px;border-bottom:2px solid #b6715b;border-radius:50%;transform:rotate(-2deg);opacity:.6} .mp-flip-hint svg{position:absolute;top:29px;left:-46px;width:60px;height:42px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible} .mp-side-flip:hover .mp-flip-hint{transform:rotate(-3deg) translateY(-2px)} .mp-side-flip:focus-visible{outline:3px solid var(--green);outline-offset:-6px} .mp-side-flip:focus-visible .mp-flip-hint{color:#173331} .mp-feature-photo:has(.mp-side-flip) figcaption{z-index:2;pointer-events:none} .mp-feature-copy>.mp-side-prompt{display:flex;align-items:center;gap:10px;color:var(--green);margin:8px 0 11px;font:400 clamp(1.65rem,2.3vw,1.9rem)/1.15 "Dreamitt Hand","Bradley Hand",cursive;transform:rotate(-3deg);transform-origin:left center} .mp-side-prompt>span{display:inline-block} .mp-side-prompt>svg{width:45px;height:34px;flex:none;stroke:#a46551;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-12deg)} .mp-feature-copy>.mp-side-prompt[hidden]{display:none} .mp-feature-copy .mp-temperature-options button{display:inline-flex;align-items:center;gap:8px;box-shadow:0 2px 0 #2c414114;transition:background .2s,color .2s,border-color .2s,transform .2s} .mp-feature-copy .mp-temperature-options button::before{content:"";display:inline-block;width:12px;height:12px;flex:none;border:1px solid #87a3b0;border-radius:50%;background:#abd2e7} .mp-feature-copy .mp-temperature-options button[data-mp-temperature="warm"]::before{background:#ffe8c7;border-color:#cda479} .mp-feature-copy .mp-temperature-options button[data-inner-select="white"]::before{background:#fff;border-color:#a6adae} .mp-feature-copy .mp-temperature-options button::after{content:"";width:1em;flex:none;font-size:.8rem} .mp-feature-copy .mp-temperature-options button[aria-pressed="true"]::after{content:"✓"} .mp-feature-copy .mp-temperature-options button[aria-pressed="false"]{border-color:#bc8979;background:#fffaf7} .mp-feature-copy .mp-temperature-options button:hover{transform:translateY(-2px);border-color:#aa5e4a} .mp-anatomy-tip{position:absolute;top:6%;left:53%;transform:rotate(-6deg);display:block;width:max-content;max-width:43%;margin:0;padding:0;color:var(--green);font:400 clamp(1.8rem,2.8vw,2.3rem)/1.1 "Dreamitt Hand","Bradley Hand",cursive;pointer-events:none;text-align:center;text-shadow:0 1px 8px #ffffffba} .mp-anatomy-tip>span{display:block;white-space:nowrap} .mp-anatomy-tip>svg{position:absolute;top:28px;left:-42px;width:62px;height:44px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible} .mp-anatomy-point::after{content:"";position:absolute;inset:-7px;border:2px solid #cb7860;border-radius:50%;opacity:0;pointer-events:none} .mp-explore-ready .mp-anatomy-point::after{animation:mp-point-invite 1.7s ease-out 2} .mp-explore-ready .mp-anatomy-point[data-anatomy-point="soft"]::after{animation-delay:.25s} .mp-explore-ready .mp-anatomy-point[data-anatomy-point="fill"]::after{animation-delay:.5s} .mp-explore-ready .mp-flip-hint svg{animation:mp-turn-invite 1.7s ease-in-out 2} @keyframes mp-point-invite{0%{opacity:0;transform:scale(.75)}25%{opacity:.75}100%{opacity:0;transform:scale(1.4)}} @keyframes mp-turn-invite{0%,100%{transform:rotate(0)}35%{transform:rotate(-22deg)}65%{transform:rotate(18deg)}} @media(max-width:700px){.mp-flip-hint{top:14px;right:20px;font-size:1.85rem}.mp-flip-hint svg{top:25px;width:50px;height:36px;left:-35px}.mp-anatomy-tip{top:5%;font-size:1.8rem}.mp-anatomy-tip>svg{top:23px;left:-35px;width:52px;height:37px}} @media(prefers-reduced-motion:reduce){.mp-explore-ready .mp-anatomy-point::after,.mp-explore-ready .mp-flip-hint svg{animation:none}.mp-flip-hint,.mp-feature-copy .mp-temperature-options button{transition:none}.mp-side-flip:hover .mp-flip-hint{transform:rotate(-6deg)}.mp-feature-copy .mp-temperature-options button:hover{transform:none}} /* Exact foam thicknesses remain readable as live text on the material visual. */ .mp-anatomy-layer-key{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;pointer-events:none} .mp-anatomy-layer-key>span{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #e2d5cf;border-radius:999px;background:#ffffffed;color:var(--green);font:500 clamp(.62rem,1vw,.75rem)/1.4 var(--body);white-space:nowrap} .mp-anatomy-layer-key i{width:10px;height:10px;flex:none;border:1px solid #b8c3c7;border-radius:50%} .mp-layer-dot-blue{background:#a8d8ec}.mp-layer-dot-white{background:#fff} /* Five independent, generously spaced targets, ordered from top to bottom. */ .mp-anatomy-point[data-anatomy-point="cool"]{left:36%;top:25%} .mp-anatomy-point[data-anatomy-point="soft"]{left:73%;top:44%} .mp-anatomy-point[data-anatomy-point="fill"]{left:34%;top:55%} .mp-anatomy-point[data-anatomy-point="firm"]{left:73%;top:71%} .mp-anatomy-point[data-anatomy-point="warm"]{left:55%;top:83%} .mp-anatomy-cover-note{max-width:680px;margin:24px auto 0;text-align:center;font-size:.8rem;line-height:1.6;color:var(--muted)} .mittpillow-page .mp-stock-note{margin:14px 0 0;text-align:center;color:var(--muted);font-size:.875rem;line-height:1.5} /* Compact MittPillow product specifications */ .mp-specification-list{margin:0}.mp-specification-list>div{display:block;margin:0 0 16px}.mp-specification-list dt,.mp-specification-list dd{display:inline;margin:0}.mp-specification-list dt{font-weight:700}.mp-specification-list dt::after{content:": "}.mp-specification-list dd{line-height:1.65}