/* Makers Mantel Configurator — Build Studio UI 0.7.0 Brand tokens from the live site (Proza Libre / teal / orange). No business logic here: pricing, payload and webhook live in configurator.js + PHP. */ @import url('https://fonts.googleapis.com/css2?family=Proza+Libre:wght@400;500;600;700&display=swap'); .mwmc{ --mwmc-teal:#004E64; --mwmc-teal-dark:#003847; --mwmc-teal-soft:#3F6E7D; --mwmc-orange:#F99201; --mwmc-ink:#2D3236; --mwmc-ink-2:#3C4448; --mwmc-ink-3:#5A6368; --mwmc-mute:#7C858B; --mwmc-grey:#A6ADB4; --mwmc-line:#E6E3DD; --mwmc-line-2:#CFCBC3; --mwmc-panel:#F7F6F4; --mwmc-panel-2:#EFECE5; --mwmc-cream:#DCD7C9; --mwmc-blue:#DAEBF3; --mwmc-blue-ink:#153A45; --mwmc-warn-bg:#FDF0DC; --mwmc-warn-ink:#8A5100; --mwmc-stage:#22292B; --mwmc-head-h:72px; --mwmc-stage-h:540px; /* cropped height of the left photo — lower this to crop more */ --mwmc-leg-w:240px; /* desktop leg-card width cap; sized so the legs step fits --mwmc-stage-h with no scrolling */ font-family:'Proza Libre',system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--mwmc-ink); background:#fff; line-height:1.5; text-wrap:pretty; } .mwmc *,.mwmc *::before,.mwmc *::after{box-sizing:border-box} .mwmc img{max-width:100%} .mwmc button{font-family:inherit} .mwmc a{color:var(--mwmc-teal);text-decoration:underline;text-underline-offset:3px} .mwmc a:hover{color:var(--mwmc-orange)} .mwmc :focus-visible{outline:2px solid var(--mwmc-orange);outline-offset:2px} .mwmc ::selection{background:var(--mwmc-blue)} .mwmc-studio{display:flex;flex-direction:column;min-height:60vh;border:1px solid var(--mwmc-line);border-radius:20px;overflow:hidden;background:#fff} .mwmc-preview-note{padding:12px 18px;background:var(--mwmc-warn-bg);color:var(--mwmc-warn-ink);font-size:14.5px} /* ---------------- header ---------------- */ .mwmc-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px clamp(10px,1.4vw,18px);background:#fff;border-bottom:1px solid var(--mwmc-line)} .mwmc-brand{display:flex;align-items:center;gap:8px;flex-shrink:0} .mwmc-brandmark{width:30px;height:30px;border-radius:999px;background:var(--mwmc-teal);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px} /* Wordmark hidden; the M logo carries the brand and all step pills get the room. The shop name is already in the site header above. */ .mwmc-brandtext{display:none;flex-direction:column;line-height:1.1;font-size:12.5px;font-weight:700} .mwmc-brandtext small{display:none} .mwmc-rail{flex:1 1 280px;display:flex;gap:4px;overflow-x:auto;padding:3px 0;scrollbar-width:thin} .mwmc-rail-step{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 10px 7px 8px;border-radius:999px;border:1px solid var(--mwmc-line);background:#fff;color:var(--mwmc-ink);font-size:11px;font-weight:600;letter-spacing:normal;white-space:nowrap;cursor:pointer} .mwmc-rail-step:hover{border-color:var(--mwmc-teal)} .mwmc-rail-index{width:16px;height:16px;border-radius:999px;background:var(--mwmc-panel-2);color:var(--mwmc-mute);display:grid;place-items:center;font-size:9.5px;font-weight:700} .mwmc-rail-step.is-done{background:var(--mwmc-blue);border-color:var(--mwmc-blue);color:var(--mwmc-teal)} .mwmc-rail-step.is-done .mwmc-rail-index{background:var(--mwmc-teal);color:#fff} .mwmc-rail-step.is-current{background:var(--mwmc-teal);border-color:var(--mwmc-teal);color:#fff} .mwmc-rail-step.is-current .mwmc-rail-index{background:rgba(255,255,255,.2);color:#fff} .mwmc-rail-step.is-upcoming{background:transparent;border-color:var(--mwmc-panel-2);color:var(--mwmc-grey);cursor:default} .mwmc-rail-step.is-upcoming:hover{border-color:var(--mwmc-panel-2)} .mwmc-topprice{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.05;padding-left:8px;border-left:1px solid var(--mwmc-line);flex-shrink:0} .mwmc-topprice-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mwmc-mute)} .mwmc-topprice-value{font-size:clamp(15px,1.5vw,18px);font-weight:700;color:var(--mwmc-teal);letter-spacing:-.01em} /* ---------------- layout ---------------- */ .mwmc-body{flex:1;display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);align-items:start} .mwmc-body.is-wide-stage{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)} @media (min-width:961px){ /* Legs & base step: keep the form the same height as the other steps by letting the right cell scroll internally instead of growing the studio. */ .mwmc-body.is-scroll-panel .mwmc-panel{max-height:clamp(340px,calc(100vh - var(--mwmc-head-h) - 32px),var(--mwmc-stage-h));overflow-y:auto} /* Legs: everything has to fit above the fold with NO internal scrolling, so the "I'll pick my own legs" button sits in normal flow under the rail (it used to be pinned over the bottom of the cards, which hid the price/More info and cut off its own dashed border). Three cards across with square, uncropped photos fits inside --mwmc-stage-h at every desktop width (verified 1100–1920 wide). */ .mwmc-body.is-scroll-panel .mwmc-panel-inner{padding-top:14px;padding-bottom:14px;gap:10px} .mwmc-body.is-scroll-panel .mwmc-panel-head{gap:4px} .mwmc-body.is-scroll-panel .mwmc-panel-head h2{font-size:24px !important;line-height:1.1} .mwmc-body.is-scroll-panel .mwmc-panel-head p{font-size:14.5px;line-height:1.4} .mwmc-body.is-scroll-panel .mwmc-legs-wrap{gap:8px} .mwmc-body.is-scroll-panel .mwmc-legs-rail{gap:12px} /* Three across, but never wider than the height budget allows (a square photo grows the card 1:1 with its width, so wide monitors would push the own-legs button below the fold). Extra width shows a fourth card instead. */ .mwmc-body.is-scroll-panel .mwmc-leg{flex-basis:min(calc((100% - 24px) / 3),var(--mwmc-leg-w))} .mwmc-body.is-scroll-panel .mwmc-leg-own{gap:2px} .mwmc-body.is-scroll-panel .mwmc-leg-own-body{font-size:12.5px;line-height:1.3} } /* ---------------- stage ---------------- */ .mwmc-stage{position:sticky;top:var(--mwmc-head-h);align-self:start;height:clamp(340px,calc(100vh - var(--mwmc-head-h) - 32px),var(--mwmc-stage-h));min-height:340px;background:var(--mwmc-stage);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden} .mwmc-stage-photo{position:absolute;inset:0} .mwmc-stage-photo img{width:100%;height:100%;object-fit:cover;display:block} .mwmc-stage-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,26,.32) 0%,rgba(20,25,26,.04) 28%,rgba(20,25,26,.12) 52%,rgba(20,25,26,.62) 80%,rgba(20,25,26,.9) 100%)} .mwmc-stage-eyebrow{position:absolute;top:clamp(16px,2.4vw,30px);left:clamp(16px,2.4vw,34px);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);z-index:3} .mwmc-stage-eyebrow::before{content:"";width:26px;height:2px;background:var(--mwmc-orange)} .mwmc-stage.is-light .mwmc-stage-eyebrow{color:var(--mwmc-mute)} .mwmc-stage-caption{position:relative;z-index:2;padding:clamp(18px,2.6vw,36px);padding-bottom:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:10px} .mwmc-stage-caption h2{margin:0;font-size:clamp(26px,3.4vw,44px);line-height:1.04;letter-spacing:-.02em;color:#fff;font-weight:700} .mwmc-stage-caption p{margin:0;max-width:46ch;font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:rgba(255,255,255,.84)} .mwmc-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:2px} .mwmc-chip{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600} .mwmc-inset{position:absolute;top:clamp(16px,2.4vw,30px);right:clamp(16px,2.4vw,34px);z-index:4;width:clamp(116px,13vw,164px);background:rgba(255,255,255,.93);border-radius:18px;padding:10px 10px 8px;box-shadow:0 10px 28px rgba(0,0,0,.22)} .mwmc-stage.is-light .mwmc-inset{top:auto;bottom:18px} .mwmc-inset-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mwmc-mute);padding:0 2px 4px} .mwmc-inset-note{font-size:11.5px;color:var(--mwmc-ink);padding:4px 2px 0;line-height:1.35} .mwmc-schematic{display:block;width:100%;height:auto} /* epoxy board stage */ .mwmc-palette-stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(16px,3vw,40px);background:#F2EFE9} .mwmc-palette-frame{position:relative;display:inline-block;max-width:100%} .mwmc-palette-img{display:block;max-width:100%;max-height:min(calc(var(--mwmc-stage-h) - 60px),calc(100vh - var(--mwmc-head-h) - 80px),60vw);border-radius:14px} .mwmc-hot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:999px;background:transparent;border:2px solid rgba(255,255,255,.55);cursor:pointer;padding:0} .mwmc-hot:hover{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35)} .mwmc-hot.is-selected{width:40px;height:40px;border:3px solid var(--mwmc-orange);box-shadow:0 0 0 4px rgba(249,146,1,.28)} .mwmc-hotspot-readout{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:10px 16px;background:var(--mwmc-warn-bg);color:var(--mwmc-warn-ink);font-size:13.5px} /* ---------------- panel ---------------- */ .mwmc-panel{background:var(--mwmc-panel);border-left:1px solid var(--mwmc-line);min-width:0} .mwmc-panel-inner{padding:clamp(20px,2.6vw,44px) clamp(18px,2.6vw,44px) 32px;display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)} .mwmc-panel-head{display:flex;flex-direction:column;gap:10px} .mwmc-panel-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mwmc-orange)} .mwmc-panel-head h2{margin:0;font-size:clamp(25px,2.9vw,38px);line-height:1.08;letter-spacing:-.02em;font-weight:700} .mwmc-panel-head p{margin:0;max-width:52ch;font-size:16.5px;line-height:1.6;color:var(--mwmc-ink-3)} /* slideshow */ .mwmc-slide{background:#fff;border:1px solid var(--mwmc-line);border-radius:22px;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:14px;box-shadow:0 2px 10px rgba(45,50,54,.05)} .mwmc-slide-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .mwmc-slide-labels{display:flex;flex-direction:column;gap:6px;min-width:0} .mwmc-slide-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .mwmc-slide-pos{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mwmc-grey)} .mwmc-badge{padding:4px 10px;border-radius:999px;background:var(--mwmc-warn-bg);color:var(--mwmc-warn-ink);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .mwmc-badge-sel{padding:4px 11px;border-radius:999px;background:var(--mwmc-teal);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em} .mwmc-slide-name{font-size:clamp(26px,2.7vw,36px);line-height:1.05;letter-spacing:-.02em;font-weight:700} .mwmc-slide-rate{text-align:right;line-height:1.15;white-space:nowrap} .mwmc-slide-rate span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mwmc-grey)} .mwmc-slide-rate b{font-size:20px;color:var(--mwmc-teal)} .mwmc-slide-svg{display:flex;justify-content:center;padding:6px 0} .mwmc-slide-desc{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--mwmc-ink-2)} .mwmc-slide-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:2px} .mwmc-arrow{width:52px;height:52px;border-radius:999px;border:1px solid var(--mwmc-line-2);background:#fff;color:var(--mwmc-teal);font-size:22px;line-height:1;cursor:pointer} .mwmc-arrow:hover{border-color:var(--mwmc-teal);background:var(--mwmc-blue)} .mwmc-choose{flex:1 1 200px;min-height:52px;padding:14px 26px;border-radius:999px;border:0;background:var(--mwmc-teal);color:#fff;font-size:17px;font-weight:700;cursor:pointer} .mwmc-choose:hover{background:var(--mwmc-teal-dark)} .mwmc-choose.is-selected{background:var(--mwmc-teal-soft)} /* ---- Leg picker: a scroll-snap slideshow of photo cards ---- */ .mwmc-legs-wrap{display:flex;flex-direction:column;gap:10px} .mwmc-legs-stage{position:relative} .mwmc-legs-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;scrollbar-width:thin} /* arrows float over the photos so they cost no vertical room */ .mwmc-legs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.22)} .mwmc-legs-arrow.is-prev{left:-6px} .mwmc-legs-arrow.is-next{right:-6px} .mwmc-leg{position:relative;flex:0 0 calc(45% - 7px);scroll-snap-align:start;display:flex;flex-direction:column;border:2px solid var(--mwmc-line);border-radius:18px;background:#fff;overflow:hidden} .mwmc-leg.is-selected{border-color:var(--mwmc-teal);box-shadow:0 0 0 3px rgba(0,78,100,.12)} .mwmc-leg-pick{display:flex;flex-direction:column;gap:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;width:100%} .mwmc-leg-shot{display:block;background:#F2EFE9} /* Leg photos are square renders — show the whole thing, never crop. */ .mwmc-leg-shot img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain} .mwmc-leg-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 11px 2px} .mwmc-leg-name{font-size:15px;font-weight:700;color:var(--mwmc-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mwmc-leg-price{font-size:14px;font-weight:700;color:var(--mwmc-teal);white-space:nowrap} .mwmc-leg-info{display:block;margin:auto 10px 10px;padding:7px 10px;border:1px solid var(--mwmc-line-2);border-radius:999px;text-align:center;font-size:12.5px;font-weight:700;color:var(--mwmc-teal);text-decoration:none} .mwmc-leg-info:hover{background:var(--mwmc-blue);border-color:var(--mwmc-teal)} .mwmc-leg .mwmc-opt-check{top:10px;right:10px} .mwmc-leg.is-selected .mwmc-opt-check{display:grid} .mwmc-leg-own{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;padding:11px 44px 11px 13px;border:2px dashed var(--mwmc-line-2);border-radius:18px;background:#fff;cursor:pointer} .mwmc-leg-own.is-selected{border-style:solid;border-color:var(--mwmc-teal);box-shadow:0 0 0 3px rgba(0,78,100,.12)} .mwmc-leg-own-head{display:flex;align-items:baseline;gap:10px;justify-content:space-between} .mwmc-leg-own-head b{font-size:16px;color:var(--mwmc-ink)} .mwmc-leg-own-fee{font-size:15px;font-weight:700;color:var(--mwmc-teal)} .mwmc-leg-own-body{font-size:13.5px;line-height:1.45;color:var(--mwmc-ink-3)} .mwmc-leg-own.is-selected .mwmc-opt-check{display:grid} .mwmc-thumbs{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px} .mwmc-thumb{flex:0 0 auto;width:104px;padding:0;border:2px solid var(--mwmc-line);background:#fff;border-radius:14px;overflow:hidden;cursor:pointer;text-align:left} .mwmc-thumb img{display:block;width:100%;height:60px;object-fit:cover} .mwmc-thumb span{display:block;padding:7px 8px;font-size:12px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mwmc-thumb.is-selected{border-color:var(--mwmc-orange)} .mwmc-thumb.is-focus{border-color:var(--mwmc-teal);background:var(--mwmc-teal)} .mwmc-thumb.is-focus span{color:#fff} /* fields */ .mwmc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px} .mwmc-field{display:flex;flex-direction:column;gap:1px;background:#fff;border:1px solid var(--mwmc-line);border-radius:11px;padding:6px 12px 5px} .mwmc-field.is-missing{border-color:#F0C89A} .mwmc-field-full{grid-column:1/-1} .mwmc-field label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mwmc-mute)} .mwmc-field input,.mwmc-field textarea{width:100%;border:0;border-bottom:2px solid var(--mwmc-cream);background:transparent;font-size:16px;line-height:1.2;color:var(--mwmc-ink);padding:0 0 2px;font-family:inherit} .mwmc-field textarea{border-bottom:0;font-size:16px;line-height:1.35;resize:vertical;min-height:40px} .mwmc-field .mwmc-help{margin-top:1px} .mwmc-field input:focus{border-bottom-color:var(--mwmc-teal);outline:none} .mwmc-help{font-size:13px;line-height:1.4;color:var(--mwmc-mute)} .mwmc-dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px} .mwmc-dim{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--mwmc-line);border-radius:18px;padding:16px 18px} .mwmc-dim-row{display:flex;align-items:baseline;gap:8px} .mwmc-dim input{width:100%;border:0;border-bottom:2px solid var(--mwmc-cream);background:transparent;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--mwmc-ink);padding:2px 0 6px} .mwmc-dim b{font-size:17px;color:var(--mwmc-grey)} .mwmc-dim-fixed{background:var(--mwmc-panel-2);border:0} .mwmc-dim-fixed b{font-size:30px;color:var(--mwmc-ink);letter-spacing:-.02em} .mwmc-sub-h{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mwmc-mute)} /* option cards (grain / delivery) */ .mwmc-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} .mwmc-opt{position:relative;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border-radius:18px;border:2px solid var(--mwmc-line);background:#fff;cursor:pointer} .mwmc-opt:hover{border-color:var(--mwmc-teal-soft)} .mwmc-opt.is-selected{border-color:var(--mwmc-teal);background:var(--mwmc-blue)} .mwmc-opt img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 auto} .mwmc-opt-body{display:flex;flex-direction:column;gap:3px;min-width:0} .mwmc-opt-body b{font-size:16.5px;color:var(--mwmc-ink)} .mwmc-opt-body span{font-size:14px;line-height:1.45;color:var(--mwmc-ink-3)} .mwmc-opt-rate{font-size:13.5px;font-weight:700;color:var(--mwmc-teal)} .mwmc-opt-tags{display:flex;gap:6px;flex-wrap:wrap;margin:1px 0 2px} .mwmc-opt-svg{width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;background:var(--mwmc-panel-2);border-radius:12px;overflow:hidden} .mwmc-opt-svg svg{width:100%;height:auto;max-height:100%} /* Photo/illustration thumbnail on option cards: desktop is unchanged (hidden); the phone layout turns these on as picture chips (see the max-width:620 block). */ .mwmc-opt-thumb{display:none} /* Check is absolute so showing it never re-wraps the text / changes card height. */ .mwmc-opt-check{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:999px;background:var(--mwmc-teal);color:#fff;display:none;place-items:center;font-size:15px} .mwmc-opt.is-selected .mwmc-opt-check{display:grid} /* Reserve the check's corner on the selectable cards at all times, so the layout is identical whether selected or not (the Continue button never shifts). */ .mwmc-opts-select .mwmc-opt{padding-right:46px} /* the main per-step selection grid: give the media a touch more presence */ .mwmc-opts-select .mwmc-opt img,.mwmc-opts-select .mwmc-opt-svg{width:68px;height:68px} .mwmc-opt-svg--edge,.mwmc-opts-select .mwmc-opt-svg--edge{width:100%;height:64px} .mwmc-opts-edge .mwmc-opt{flex-direction:column;align-items:stretch;gap:10px} .mwmc .mwmc-opts-edge .mwmc-opt{flex-direction:column !important;align-items:stretch !important} /* notes */ .mwmc-info{border-radius:16px;background:var(--mwmc-blue);color:var(--mwmc-blue-ink);padding:15px 18px;font-size:15.5px;line-height:1.55} .mwmc-info-neutral{background:var(--mwmc-panel-2);color:var(--mwmc-ink-2)} .mwmc-warning{border-radius:16px;background:var(--mwmc-warn-bg);color:var(--mwmc-warn-ink);padding:15px 18px;font-size:15.5px;line-height:1.55} .mwmc-subhead{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mwmc-mute);margin:6px 0 -6px} .mwmc-subhead span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--mwmc-ink-3);margin-left:6px} .mwmc-linkbtn{background:none;border:0;padding:6px 0;font:inherit;font-size:15.5px;font-weight:600;color:var(--mwmc-teal);cursor:pointer;text-align:left} .mwmc-linkbtn span{font-weight:400;color:var(--mwmc-ink-3)} .mwmc-linkbtn:hover{text-decoration:underline} .mwmc-locked{background:#fff;border:1px solid var(--mwmc-line);border-radius:22px;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:12px} .mwmc-locked-badge{align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--mwmc-warn-bg);color:var(--mwmc-warn-ink);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .mwmc-locked-title{font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.02em} .mwmc-locked p{margin:0;font-size:16.5px;line-height:1.6;color:var(--mwmc-ink-2)} /* color step */ .mwmc-color-preview{background:#fff;border:1px solid var(--mwmc-line);border-radius:22px;padding:18px;display:flex;align-items:center;gap:18px} .mwmc-color-dot{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:999px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 8px 20px rgba(45,50,54,.16)} .mwmc-color-meta{display:flex;flex-direction:column;gap:4px;min-width:0} .mwmc-color-meta small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mwmc-grey)} .mwmc-color-meta b{font-size:clamp(24px,2.5vw,32px);line-height:1.1;letter-spacing:-.02em} .mwmc-color-meta span{font-size:14.5px;color:var(--mwmc-ink-3)} .mwmc-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px} .mwmc-swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:2px solid var(--mwmc-line);background:#fff;cursor:pointer;text-align:left} .mwmc-swatch:hover{border-color:var(--mwmc-teal-soft)} .mwmc-swatch.is-selected{border-color:var(--mwmc-teal);background:var(--mwmc-blue)} .mwmc-dot{width:24px;height:24px;border-radius:999px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} .mwmc-swatch span{font-size:14.5px;font-weight:600;line-height:1.2} /* finish toggle */ .mwmc-toggle{display:flex;align-items:center;gap:18px;background:#fff;border:2px solid var(--mwmc-line);border-radius:22px;padding:20px;cursor:pointer} .mwmc-toggle.is-on{border-color:var(--mwmc-teal)} .mwmc-toggle-body{display:flex;flex-direction:column;gap:6px;flex:1} .mwmc-toggle-body b{font-size:19px;letter-spacing:-.01em} .mwmc-toggle-body span{font-size:16px;line-height:1.55;color:var(--mwmc-ink-3)} .mwmc-toggle input{width:28px;height:28px;accent-color:var(--mwmc-teal);flex:0 0 auto} /* review */ .mwmc-review-lines{background:#fff;border:1px solid var(--mwmc-line);border-radius:22px;padding:6px 20px} .mwmc-line{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #F0EDE7} .mwmc-line:last-child{border-bottom:0} .mwmc-line .k{font-size:15px;color:var(--mwmc-mute)} .mwmc-line .v{font-size:16px;font-weight:700;text-align:right} .mwmc-line .v.empty{color:var(--mwmc-grey);font-weight:400} .mwmc-pricebox{background:var(--mwmc-teal);color:#fff;border-radius:22px;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:9px} .mwmc-price-row{display:flex;justify-content:space-between;gap:16px;font-size:15.5px;color:rgba(255,255,255,.86);line-height:1.4} .mwmc-price-row.is-strong{font-size:17px;font-weight:700;color:#fff} .mwmc-price-rule{height:1px;background:rgba(255,255,255,.22);margin:6px 0} .mwmc-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px} .mwmc-total span{font-size:17px;font-weight:600} .mwmc-total b{font-size:clamp(28px,3vw,38px);letter-spacing:-.02em;color:var(--mwmc-orange)} .mwmc-note{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.82)} .mwmc-disclaimer{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.62);font-style:italic} .mwmc-cart-btn{min-height:60px;border-radius:999px;border:0;background:var(--mwmc-teal);color:#fff;font-size:19px;font-weight:700;cursor:pointer} .mwmc-cart-btn:hover:not(:disabled){background:var(--mwmc-teal-dark)} .mwmc-cart-btn:disabled{background:var(--mwmc-grey);cursor:not-allowed} /* Review step has two ways to finish: pay the deposit now, or just get the build emailed. The second is deliberately secondary so it doesn't compete with checkout. */ .mwmc-cta{display:flex;flex-direction:column;gap:8px} .mwmc-cta-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--mwmc-ink-3)} .mwmc-cta-or{display:flex;align-items:center;gap:12px;color:var(--mwmc-mute);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:2px 0} .mwmc-cta-or::before,.mwmc-cta-or::after{content:"";flex:1;height:1px;background:var(--mwmc-line)} .mwmc-email-btn{min-height:54px;border-radius:999px;border:2px solid var(--mwmc-teal);background:#fff;color:var(--mwmc-teal);font-size:17px;font-weight:700;cursor:pointer} .mwmc-email-btn:hover:not(:disabled){background:var(--mwmc-blue)} .mwmc-email-btn:disabled{border-color:var(--mwmc-line-2);color:var(--mwmc-grey);cursor:not-allowed} .mwmc-secondary-btn{align-self:flex-start;padding:12px 20px;border-radius:999px;border:1px solid var(--mwmc-line-2);background:#fff;color:var(--mwmc-teal);font-size:15px;font-weight:600;cursor:pointer} .mwmc-secondary-btn:hover{border-color:var(--mwmc-teal);background:var(--mwmc-blue)} .mwmc-error{color:#A32117;font-size:15px;line-height:1.5} .mwmc-success{color:#1E5B3A;font-size:15px;line-height:1.5} /* ---------------- footer ---------------- */ .mwmc-foot{position:sticky;bottom:0;z-index:30;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px clamp(14px,2.5vw,32px);background:#fff;border-top:1px solid var(--mwmc-line)} .mwmc-foot-caption{flex:1 1 200px;min-width:0;font-size:14.5px;color:var(--mwmc-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mwmc-back{min-height:50px;padding:13px 22px;border-radius:999px;border:1px solid var(--mwmc-line-2);background:#fff;color:var(--mwmc-ink);font-size:16px;font-weight:600;cursor:pointer} .mwmc-back:disabled{color:var(--mwmc-grey);cursor:not-allowed} .mwmc-foot-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1} .mwmc-foot-price small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mwmc-mute)} .mwmc-foot-price b{font-size:18px} .mwmc-next{min-height:50px;padding:13px 30px;border-radius:999px;border:0;background:var(--mwmc-teal);color:#fff;font-size:16.5px;font-weight:700;cursor:pointer} .mwmc-next:hover:not(:disabled){background:var(--mwmc-teal-dark)} .mwmc-next:disabled{background:var(--mwmc-grey);cursor:not-allowed} /* ---------------- responsive ---------------- */ @media (max-width:960px){ .mwmc-body,.mwmc-body.is-wide-stage{grid-template-columns:1fr} .mwmc-stage{position:relative;top:auto;height:auto;min-height:0;aspect-ratio:4/3;max-height:60vh} .mwmc-body.is-wide-stage .mwmc-stage{aspect-ratio:auto;height:min(70vw,420px);max-height:none} .mwmc-panel{border-left:0;border-top:1px solid var(--mwmc-line)} .mwmc-palette-img{max-height:none} /* bigger tap targets for picking epoxy colours on the board by touch */ .mwmc-hot{width:40px;height:40px} .mwmc-hot.is-selected{width:46px;height:46px} /* hide the wood top-view inset on the color step so it doesn't cover the bottom-right colours on the board */ .mwmc-stage.is-light .mwmc-inset{display:none} } @media (max-width:620px){ /* overflow:visible is required for the sticky hero/footer to pin against the page scroll; a clipped ancestor would trap position:sticky. Full-bleed on phone. */ .mwmc-studio{border-radius:0;overflow:visible} .mwmc-head{gap:12px} .mwmc-topprice{padding-left:0;border-left:0} .mwmc-stage-caption{padding-bottom:16px} .mwmc-swatches{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .mwmc-arrow{width:48px;height:48px} /* one leg card per screen, so the photo stays big and swiping feels natural */ .mwmc-leg{flex:0 0 calc(100% - 4px)} .mwmc-choose{flex:1 1 100%} .mwmc-foot-caption{display:none} /* 16px minimum on inputs stops iOS zooming on focus */ .mwmc-field input,.mwmc-field textarea{font-size:16px} /* === PHONE: keep the build photo pinned so it never scrolls away while you pick === */ /* The 12-step rail header is tall, so let it scroll away and pin the hero alone (the footer keeps the total + Continue in view the whole time). */ .mwmc-head{position:static} .mwmc-stage{position:sticky;top:0;z-index:5;aspect-ratio:auto;height:28vh;min-height:168px;max-height:28vh} /* declutter the pinned mini-hero: drop the long copy + the top-view inset overlay */ .mwmc-stage:not(.is-light) .mwmc-inset{display:none} .mwmc-stage:not(.is-light) .mwmc-stage-caption p{display:none} .mwmc-stage-caption{padding:14px;gap:7px} .mwmc-stage-caption h2{font-size:21px} /* The epoxy colour board is not pinned: it needs full height and tap room. Let the stage size to the image itself (the board is absolutely positioned by default, which clipped its bottom against the stage's fixed height). */ /* Specificity note: .mwmc-body.is-wide-stage .mwmc-stage (3 classes) also matches the colour step and pinned the height to 70vw, so the taller board overflowed — and because the stage is a flex column with justify-content:flex-end, it spilled UPWARD and clipped the top of the picker. Match that specificity and let the stage grow downward to fit the board. */ .mwmc-body .mwmc-stage.is-light, .mwmc-body.is-wide-stage .mwmc-stage.is-light{position:relative;height:auto;min-height:0;aspect-ratio:auto;max-height:none;overflow:visible;justify-content:flex-start;background:#F2EFE9} /* Give the picker the full width of the screen so the colours are as large and as tappable as possible (this is the one step where the photo IS the control). */ .mwmc-stage.is-light .mwmc-palette-stage{position:relative;inset:auto;padding:4px} .mwmc-stage.is-light .mwmc-palette-frame{display:block;width:100%} .mwmc-stage.is-light .mwmc-palette-img{width:100%;max-width:100%;max-height:none;border-radius:10px} .mwmc-stage.is-light .mwmc-hot{width:44px;height:44px} .mwmc-stage.is-light .mwmc-hot.is-selected{width:50px;height:50px} /* let the step label sit above the board instead of on top of the photo */ .mwmc-stage.is-light .mwmc-stage-eyebrow{position:static;padding:10px 12px 0} .mwmc-stage.is-light .mwmc-stage-caption{padding-bottom:calc(16px + 34px)} /* pin Back / total / Continue to the bottom so they are always reachable */ .mwmc-foot{position:sticky;bottom:0;z-index:6;background:var(--mwmc-panel);border-top:1px solid var(--mwmc-line);box-shadow:0 -8px 24px rgba(0,0,0,.16)} /* === PHONE: options become a 2-up grid of photo chips === */ .mwmc .mwmc-opts-photo{grid-template-columns:1fr 1fr;gap:10px} .mwmc .mwmc-opts-photo .mwmc-opt{flex-direction:column;align-items:stretch;gap:0;padding:0 0 8px;padding-right:0;overflow:hidden} .mwmc .mwmc-opts-photo .mwmc-opt-thumb{display:block;width:100%;height:100px;object-fit:cover;border-radius:0;flex:0 0 auto} .mwmc .mwmc-opts-photo span.mwmc-opt-thumb-svg{display:grid;place-items:center;width:100%;height:100px;background:var(--mwmc-panel-2)} .mwmc .mwmc-opts-photo .mwmc-opt-thumb-svg svg{width:auto;height:78%;max-width:88%} .mwmc .mwmc-opts-photo .mwmc-opt-body{padding:8px 9px 0;gap:2px} .mwmc .mwmc-opts-photo .mwmc-opt-body b{font-size:13.5px;line-height:1.2;letter-spacing:-.01em;overflow-wrap:normal;word-break:normal} .mwmc .mwmc-opts-photo .mwmc-opt-body span{display:none} /* hide long copy on chips */ .mwmc .mwmc-opts-photo .mwmc-opt-tags{margin:2px 0 0} .mwmc .mwmc-opts-photo .mwmc-opt-check{top:8px;right:8px;width:24px;height:24px} } @media (prefers-reduced-motion:no-preference){ .mwmc-slide,.mwmc-stage-caption{animation:mwmc-fade .28s ease both} @keyframes mwmc-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} } @media print{ .mwmc-head,.mwmc-foot,.mwmc-thumbs,.mwmc-slide-nav{display:none} } /* ========================================================================== THEME HARDENING Many WordPress themes (Divi, Elementor, Astra, etc.) force their own padding, width, min-width and text-transform onto every