/* ============================================================
Decor X — site-wide mobile layer (responsive + app shell)
------------------------------------------------------------
• Load LAST in :
• Paired with /mobile.js, which adds .m-shell to and
injects the top bar / bottom tab bar / menu (as DIVs, so the
page's `nav{position:fixed;top:0}` cannot leak into them).
• If the page has its own .marquee-bar, mobile.js adds
.m-has-ticker and we reposition that real marquee under the
top bar instead of injecting a duplicate.
• Everything is scoped to html.m-shell + max-width:768px.
============================================================ */
:root{
--m-topbar:54px;
--m-ticker:30px;
--m-tabbar:60px;
--m-gutter:16px;
--m-r:5px;
--m-ivory:#F5F0E8; --m-bone:#EDE6D6; --m-sand:#D4C4A8; --m-stone:#8C7B6B;
--m-bark:#3D3028; --m-gold:#B8963E; --m-gold-light:#D4B56A;
--m-charcoal:#2A2420; --m-white:#FDFAF5;
--m-ui:'Jost',sans-serif; --m-display:'Cormorant Garamond',Georgia,serif;
}
/* Injected chrome is inert on desktop */
.m-topbar,.m-tabbar,.m-menu,.m-backdrop{display:none;}
@media (max-width:768px){
/* ---------- swap desktop nav for the app shell ---------- */
html.m-shell nav{display:none !important;}
html.m-shell body{
padding-top:calc(var(--m-topbar) + env(safe-area-inset-top)) !important;
padding-bottom:calc(var(--m-tabbar) + env(safe-area-inset-bottom) + 8px) !important;
overflow-x:hidden;
}
/* pages that keep their own marquee get extra top room */
html.m-shell.m-has-ticker body{
padding-top:calc(var(--m-topbar) + var(--m-ticker) + env(safe-area-inset-top)) !important;
}
html.m-shell{-webkit-text-size-adjust:100%;}
/* reuse the page's real marquee, fixed just under the top bar */
html.m-shell.m-has-ticker .marquee-bar{
position:fixed !important; left:0 !important; right:0 !important; z-index:999 !important;
top:calc(var(--m-topbar) + env(safe-area-inset-top)) !important;
margin-top:0 !important; padding:0 !important;
height:var(--m-ticker) !important; line-height:var(--m-ticker) !important;
}
/* ---------- top bar ---------- */
html.m-shell .m-topbar{
display:flex; align-items:center; justify-content:space-between;
position:fixed; top:0; left:0; right:0; z-index:1000;
height:calc(var(--m-topbar) + env(safe-area-inset-top));
padding:env(safe-area-inset-top) var(--m-gutter) 0;
background:rgba(253,250,245,.92);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--m-sand);
}
.m-logo{display:flex; align-items:center; text-decoration:none;}
.m-logo img{height:28px; width:auto; display:block;}
.m-logo-txt{font-family:var(--m-ui); font-weight:500; letter-spacing:.32em;
text-transform:uppercase; color:var(--m-bark); font-size:15px;}
.m-menu-btn{
width:38px; height:38px; display:flex; align-items:center; justify-content:center;
background:transparent; border:0; padding:0; color:var(--m-bark);
-webkit-appearance:none; appearance:none; border-radius:var(--m-r);
}
.m-menu-btn:active{background:var(--m-bone); color:var(--m-gold);}
.m-menu-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round;}
.m-menu-btn .m-x{display:none;}
.m-menu-btn[aria-expanded="true"] .m-bars{display:none;}
.m-menu-btn[aria-expanded="true"] .m-x{display:block;}
/* ---------- bottom tab bar (DIV, not nav) ---------- */
html.m-shell .m-tabbar{
display:flex; align-items:stretch; justify-content:space-around;
position:fixed; bottom:0; top:auto; left:0; right:0; z-index:1000;
height:calc(var(--m-tabbar) + env(safe-area-inset-bottom));
padding:0 0 env(safe-area-inset-bottom);
background:rgba(253,250,245,.94);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-top:1px solid var(--m-sand);
}
.m-tab{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
color:var(--m-stone); font-family:var(--m-ui); font-size:9px; letter-spacing:.08em;
text-transform:uppercase; text-decoration:none; position:relative;
}
.m-tab svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5;}
.m-tab.is-on{color:var(--m-gold);}
.m-tab.is-on::before{content:""; position:absolute; top:0; width:24px; height:2.5px;
border-radius:3px; background:var(--m-gold);}
/* ---------- slide-down menu (DIV, not nav) ---------- */
html.m-shell .m-backdrop{
display:block; position:fixed; inset:0; z-index:1001;
background:rgba(42,36,32,.38); opacity:0; visibility:hidden;
transition:opacity .2s, visibility .2s;
}
html.m-shell .m-backdrop.is-open{opacity:1; visibility:visible;}
html.m-shell .m-menu{
display:block; position:fixed; z-index:1002;
top:calc(var(--m-topbar) + env(safe-area-inset-top)); right:var(--m-gutter); left:auto;
width:min(74vw,268px); height:auto; background:var(--m-white);
border:1px solid var(--m-sand); border-radius:var(--m-r);
box-shadow:0 14px 40px rgba(42,36,32,.18); padding:8px 0;
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .18s, transform .18s, visibility .18s;
}
html.m-shell .m-menu.is-open{opacity:1; visibility:visible; transform:translateY(6px);}
.m-menu a{display:block; padding:13px 22px; font-family:var(--m-ui); font-size:12px;
letter-spacing:.14em; text-transform:uppercase; color:var(--m-stone); text-decoration:none;}
.m-menu a:active{background:var(--m-ivory); color:var(--m-gold);}
.m-menu .m-menu-cta{margin:8px 14px 6px; text-align:center;
background:var(--m-gold); color:var(--m-white); border-radius:var(--m-r);}
/* ============================================================
CONTENT RESPONSIVENESS (scoped to .m-shell, real selectors)
============================================================ */
/* footer: 3-col -> stacked + centered */
html.m-shell footer{grid-template-columns:1fr !important; gap:18px !important; text-align:center;
padding-left:var(--m-gutter) !important; padding-right:var(--m-gutter) !important;}
html.m-shell .footer-links{flex-wrap:wrap; justify-content:center;}
html.m-shell .footer-social{justify-content:center;}
/* product / variant / size / finish / related grids -> 2-up */
html.m-shell .products-grid,
html.m-shell .variants-grid,
html.m-shell .sizes-grid,
html.m-shell .finishes-grid,
html.m-shell .related-grid{grid-template-columns:repeat(2,1fr) !important; gap:12px !important;}
/* two-column blocks -> stack */
html.m-shell .product-hero,
html.m-shell .inquiry-section{grid-template-columns:1fr !important; gap:20px !important;}
html.m-shell .inquiry-row{grid-template-columns:1fr !important;}
html.m-shell .attr-grid{grid-template-columns:1fr 1fr !important;}
/* section side padding -> gutter */
html.m-shell .products-section,
html.m-shell .variants-section,
html.m-shell .sizes-section,
html.m-shell .finishes-section,
html.m-shell .related-section,
html.m-shell .inquiry-section{padding-left:var(--m-gutter) !important; padding-right:var(--m-gutter) !important;}
/* thumbnail strips & filter chips -> horizontal scroll */
html.m-shell .thumb-strip,
html.m-shell .modal-thumbs,
html.m-shell .filter-bar{
display:flex !important; gap:8px; overflow-x:auto; flex-wrap:nowrap !important;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
html.m-shell .thumb-strip::-webkit-scrollbar,
html.m-shell .modal-thumbs::-webkit-scrollbar,
html.m-shell .filter-bar::-webkit-scrollbar{display:none;}
html.m-shell .thumb-strip>*,
html.m-shell .modal-thumbs>*,
html.m-shell .filter-chip{flex:0 0 auto; white-space:nowrap;}
/* product modal -> full-screen sheet (covers chrome, has its own close) */
html.m-shell .modal-backdrop{z-index:1100 !important;}
html.m-shell .modal{
grid-template-columns:1fr !important;
position:fixed !important; inset:0 !important; z-index:1101 !important;
width:100% !important; max-width:100% !important;
height:100% !important; max-height:100% !important;
margin:0 !important; border-radius:0 !important; overflow-y:auto !important;
padding-top:calc(env(safe-area-inset-top) + 18px) !important;
padding-bottom:calc(env(safe-area-inset-bottom) + 24px) !important;
}
html.m-shell .modal-gallery,
html.m-shell .modal-main{width:100% !important;}
html.m-shell .modal-related-grid{grid-template-columns:repeat(3,1fr) !important;}
/* type: tame oversized display headings on inner pages */
html.m-shell .section-title{font-size:26px !important; line-height:1.12;}
/* prevent iOS auto-zoom on form focus */
html.m-shell input,
html.m-shell textarea,
html.m-shell select,
html.m-shell .inquiry-input{font-size:16px !important;}
/* never let media overflow the viewport */
html.m-shell img,
html.m-shell video,
html.m-shell svg{max-width:100%;}
/* ============================================================
INNER-PAGE TUNING (material + collection detail)
============================================================ */
/* the desktop nav-height offsets (breadcrumb, hero) double up with our
body padding -> zero the variable so all those top gaps collapse */
html.m-shell{ --nav-h:0px; }
html.m-shell .breadcrumb{ margin-top:0 !important; padding-top:8px; }
/* consistent minimal radius on imagery + cards (matches the homepage) */
html.m-shell .product-image,
html.m-shell .product-card,
html.m-shell .variant-card,
html.m-shell .size-card,
html.m-shell .size-visual,
html.m-shell .related-img,
html.m-shell .related-card,
html.m-shell .thumb,
html.m-shell .modal-thumb,
html.m-shell .modal-related-img,
html.m-shell .hero-media{ border-radius:var(--m-r) !important; overflow:hidden; }
/* material hero gallery: shorten it, round it, move thumbs to a bottom strip */
html.m-shell .hero-media{ min-height:0 !important; aspect-ratio:4/3; }
html.m-shell .hero-main-img{ object-fit:cover; }
html.m-shell .thumb-strip{
position:absolute !important; top:auto !important; bottom:8px !important;
left:8px !important; right:8px !important;
flex-direction:row !important; max-height:none !important;
overflow-x:auto !important; gap:6px;
}
html.m-shell .thumb{ width:46px !important; height:46px !important; flex:0 0 auto; }
html.m-shell .hero-dots{ display:none !important; }
/* variant filters -> single scrolling row (no wrapping) */
html.m-shell .variant-filters{
flex-wrap:nowrap !important; overflow-x:auto; margin-bottom:20px !important;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
html.m-shell .variant-filters::-webkit-scrollbar{ display:none; }
html.m-shell .variant-tab{ flex:0 0 auto; white-space:nowrap; }
/* headings consistent (left-aligned) + trim the heavy section spacing */
html.m-shell .section-divider{ text-align:left !important; margin:6px 0 22px !important; }
html.m-shell .section-title{ margin-bottom:22px !important; }
html.m-shell .collection-hero{ padding:34px var(--m-gutter) 26px !important; }
html.m-shell .products-section{ padding-top:30px !important; padding-bottom:56px !important; }
html.m-shell .inquiry-section{ padding-top:40px !important; padding-bottom:48px !important; }
html.m-shell .variants-section,
html.m-shell .sizes-section,
html.m-shell .finishes-section,
html.m-shell .related-section{ padding-top:30px !important; padding-bottom:30px !important; }
/* product modal: the details column was clipped to ~0 height when stacked.
Let it (and its inner body) flow; the whole sheet scrolls instead. */
html.m-shell .modal-main{ overflow:visible !important; height:auto !important; max-height:none !important; }
html.m-shell .modal-body{ overflow:visible !important; height:auto !important; max-height:none !important; }
html.m-shell .modal-gallery{ height:auto !important; }
/* collection filter: a long material list was wrapping into a screen-filling
wall with the count floating beside it. Stack the groups; each becomes a
horizontal swipe row with a pinned label; the count drops to its own line. */
html.m-shell .filter-bar{
position:static !important;
flex-direction:column !important; align-items:stretch !important;
gap:10px !important; padding:14px var(--m-gutter) !important;
}
html.m-shell .filter-group{
display:flex !important; flex-wrap:nowrap !important; overflow-x:auto;
align-items:center; gap:8px;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
html.m-shell .filter-group::-webkit-scrollbar{ display:none; }
html.m-shell .filter-label{
position:sticky; left:0; flex:0 0 auto; z-index:1;
background:var(--m-ivory); padding-right:8px;
}
html.m-shell .filter-count{ text-align:left; opacity:.8; }
/* ===== ABOUT PAGE =====
about.html ships no breakpoints, so every section was full desktop. */
html.m-shell .about-hero{ grid-template-columns:1fr !important; min-height:0 !important; }
html.m-shell .about-hero-media{ min-height:0 !important; aspect-ratio:4/3; }
html.m-shell .about-hero-content{ padding:32px var(--m-gutter) !important; }
html.m-shell .about-title{ font-size:40px !important; }
/* "Who We Are / Crafted with Purpose" */
html.m-shell .story-section{
grid-template-columns:1fr !important; gap:32px !important;
padding:48px var(--m-gutter) !important;
}
html.m-shell .story-visual{ aspect-ratio:4/3 !important; border-radius:var(--m-r); overflow:hidden; }
html.m-shell .section-title{ font-size:30px !important; }
html.m-shell .pillars-section,
html.m-shell .stats-section,
html.m-shell .showroom-section{ padding:48px var(--m-gutter) !important; }
html.m-shell .pillars-grid{ grid-template-columns:1fr !important; }
html.m-shell .pillar-card{ padding:28px 24px !important; }
html.m-shell .pillar-num,
html.m-shell .stat-num{ font-size:44px !important; }
html.m-shell .gallery-strip{ grid-template-columns:repeat(2,1fr) !important; }
html.m-shell .gallery-strip > *{ border-radius:var(--m-r); overflow:hidden; }
html.m-shell .stats-grid{ grid-template-columns:repeat(2,1fr) !important; }
html.m-shell .stat-item{ border-right:none !important; }
html.m-shell .cta-band{
flex-direction:column !important; align-items:flex-start !important;
gap:24px; padding:48px var(--m-gutter) !important;
}
html.m-shell .cta-band-actions{ width:100%; }
/* hero & story ![]()
carry inline min-heights (80vh / 400px) that override the
container and force harsh crops; neutralize so the aspect-ratio governs */
html.m-shell .about-hero-media img,
html.m-shell .story-visual img{ min-height:0 !important; height:100% !important; object-position:center; }
/* showroom: a 2fr/3fr grid shoved the video + photos off-screen right */
html.m-shell .showroom-section{ grid-template-columns:1fr !important; min-height:0 !important; }
html.m-shell .showroom-media{ display:flex !important; flex-direction:column; grid-template-rows:none !important; gap:8px; background:transparent !important; }
html.m-shell .showroom-video-wrap{ aspect-ratio:16/9; height:auto !important; border-radius:var(--m-r); }
html.m-shell .showroom-images{ grid-template-columns:repeat(2,1fr) !important; gap:6px; }
html.m-shell .showroom-img{ border-radius:var(--m-r); background:transparent !important; }
/* stack the detail strip so each label (e.g. "By Appointment") stays one line */
html.m-shell .showroom-detail-strip{ flex-direction:column !important; gap:18px !important; }
html.m-shell .showroom-detail{ flex:none !important; }
}