/* ===================================================================== MELT SEQUENCE STYLESHEET assets/css/melt-sequence.css v1.3 2026-09-09 (watched: WinSCP keeps staging enfold-child in step with this folder) v1.3 2026-09-09: product box: lifetime states route to .v-life; the .life footer line prints on every box. v1.2 2026-09-09: "Your name" is its own row above the payment methods (order 0 in the step-2 flex), no longer a row inside the card box. The card-box name rules below are kept but no longer match anything. v1.1 2026-09-08: bar 15px, logo 36px, footer 14px, step spacing. One file for the paid sequence: checkout step 1, step 2, the three upsells. Enqueued by melt-inc/melt-checkout-assets.php on those pages only. NOT melt-checkout.css: that file is the 2026-08-25 nude checkout pilot skin (mck-*) loaded by melt-checkout-template.php. Different file, different job. Two body classes switch the look: body.melt-light checkout steps (patterns-a2 blush) body.melt-dark the upsells (patterns-a2 dark orchid), Page Template "Melt Upsell" Source frames: melt-patterns-a2-template.php, /my-account/. Mockups and design file: E:\cmc-claude-workspace\12_Checkout_Rebuild\ No page builder. No JS required by anything in here. ===================================================================== */ /* ---------- reset + base ---------- */ html{scroll-behavior:smooth;overflow-x:hidden} *{box-sizing:border-box;margin:0;padding:0} body{font-family:Lato,sans-serif;font-weight:300;line-height:1.6;font-size:18px;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;max-width:100vw} body > *{min-width:0;max-width:100%} img,svg,video{max-width:100%} a{color:inherit} img{display:block} button{font:inherit} :focus-visible{outline:2px solid #D64570;outline-offset:2px} .wrap{max-width:1100px;margin:0 auto;padding:0 28px;width:100%;min-width:0} /* ---------- top bar (both looks) ---------- */ .bar{background:#0C0A0A;color:#D9C8D6;font-size:15px;font-weight:400;letter-spacing:.02em} .bar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px} .bar img{height:36px;width:auto;filter:brightness(0) invert(1);opacity:.95} .bar .st{display:flex;align-items:center;gap:8px} .bar .st svg{width:15px;height:15px;fill:#C287B9} /* ---------- footer (both looks) ---------- */ .pg-footer{background:#0C0A0A;color:#AF97AB;text-align:center;padding:26px 20px;font-size:14px;font-weight:400;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap} .pg-footer a{color:#D9C8D6;text-decoration:underline;text-underline-offset:3px} /* ---------- the buy button (both looks). FunnelKit's yes link gets class="buy" ---------- */ .buy{display:block;width:100%;background:#D64570;color:#fff;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:18px 40px;border-radius:6px;border:0;cursor:pointer;box-shadow:0 6px 20px rgba(214,69,112,.35);transition:all .18s ease;text-align:center;text-decoration:none} .buy:hover{filter:brightness(1.08);transform:translateY(-1px)} .fine{font-size:15px;margin-top:14px;color:#8A6E68;text-align:center} /* ---------- the questions band ---------- */ .light-band{padding:60px 0 70px;border-top:1px solid #EDD5C5} .light-band h2{font-family:"Playfair Display",serif;font-weight:400;font-size:40px;line-height:1.1;text-align:center;margin:10px 0 30px} .faq{max-width:820px;margin:0 auto} .faq details{background:#fff;border:1px solid #EDD5C5;border-radius:14px;margin-bottom:14px;overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:"Playfair Display",serif;font-size:20px;color:#3A2A28;display:flex;justify-content:space-between;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:#D64570;font-size:24px;line-height:1} .faq details[open] summary::after{content:"\2013"} .faq .b{padding:0 24px 22px;display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start;font-size:16px;line-height:1.6;color:#6B5D55} .faq .b img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px} /* ===================================================================== LIGHT: checkout steps 1 and 2 ===================================================================== */ .melt-light{background:#FAF1EE;color:#3A2A28} .melt-light .s1{background:radial-gradient(120% 85% at 50% 108%, #E6C6BE 0%, #F4E4DF 40%, #FAF1EE 100%);padding:56px 0 64px;flex:1} .melt-light .head{text-align:center;max-width:640px;margin:0 auto 30px} .melt-light h1{font-family:"Playfair Display",serif;font-weight:400;font-size:48px;line-height:1.1;margin:10px 0 12px} .melt-light h1 em{font-style:italic;color:#C8735A} .melt-light .lead{font-size:20px;font-weight:400;color:#7A5E58;max-width:44ch;margin:0 auto} .melt-light .light-band{background:#FCF8F5} .melt-light .card{background:#fff;border:1px solid #EDD5C5;border-radius:18px;padding:30px 34px 32px;max-width:620px;margin:0 auto;box-shadow:0 10px 30px rgba(107,39,55,.06);width:100%;min-width:0;overflow-wrap:anywhere} .melt-light .pair{max-width:620px;margin:0 auto;display:grid;grid-template-columns:1fr;width:100%;min-width:0} .melt-light .pair > *{min-width:0} .melt-light .pair .card{max-width:none;margin:0;border-top-left-radius:0;border-top-right-radius:0;border-top:0} .melt-light .pair .prodbox{background:#fff;border:1px solid #EDD5C5;border-bottom:0;border-radius:18px 18px 0 0;padding:26px 34px 0;box-shadow:0 10px 30px rgba(107,39,55,.06)} .melt-light .prod{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;padding-bottom:22px;border-bottom:1px solid #EDD5C5} .melt-light .prod img{width:110px;aspect-ratio:4/3;object-fit:cover;border-radius:10px} .melt-light .prod .n{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6B2737;margin-bottom:4px} .melt-light .prod .t{font-family:"Playfair Display",serif;font-size:26px;line-height:1.15} .melt-light .prod .price{font-size:16px;color:#3A2A28;font-weight:400;margin-top:4px} .melt-light .prod .price b{font-family:"Playfair Display",serif;font-size:24px;font-weight:500;color:#6B2737;margin-right:8px} .melt-light .prod .m{font-size:15px;color:#8A6E68;margin-top:4px} .melt-light .prod .list{display:none} .melt-light .prod .life{display:none} @media(min-width:900px){ .melt-light .pair{max-width:1000px;grid-template-columns:2fr 1fr;gap:24px;align-items:start} .melt-light .pair .card{border-radius:18px;border-top:1px solid #EDD5C5} .melt-light .pair .prodbox{border:1px solid #EDD5C5;border-radius:18px;padding:0;overflow:hidden;order:2} .melt-light .prod{display:block;padding:0;border:0} .melt-light .prod img{width:100%;aspect-ratio:16/10;border-radius:0} .melt-light .prod > div{padding:22px 26px 26px} .melt-light .prod .m{display:none} .melt-light .prod .list{display:block;list-style:none;margin-top:14px} .melt-light .prod .list li{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:400;line-height:1.4;color:#3A2A28;padding:7px 0;border-top:1px solid #F3E4DE} .melt-light .prod .list li:first-child{border-top:0} .melt-light .prod .list li svg{width:18px;height:18px;flex:none;margin-top:2px;fill:#D64570} .melt-light .prod .list li.all{font-family:"Playfair Display",serif;font-size:20px;color:#6B2737;padding:14px 0!important;margin-top:0;border-top:1px solid #EDD5C5} .melt-light .prod .list li.all svg{fill:#6B2737;margin-top:4px} } /* product states: body[data-product] set server-side from the cart. never default silently. */ .prodbox .v{display:none} .pv{display:none} .ev-life{display:none} body[data-product="pro"] .v-pro,body[data-product="pro-annual"] .v-pro,body[data-product="lifetime"] .v-life,body[data-product="lifetime-plan"] .v-life, body[data-product="bundle"] .v-bundle,body[data-product="bundle-annual"] .v-bundle,body[data-product="back"] .v-back{display:block} body[data-product="pro"] .pv-pro,body[data-product="pro-annual"] .pv-pro-annual,body[data-product="lifetime"] .pv-lifetime,body[data-product="lifetime-plan"] .pv-lifetime-plan, body[data-product="bundle"] .pv-bundle,body[data-product="bundle-annual"] .pv-bundle-annual,body[data-product="back"] .pv-back{display:inline} body[data-product="lifetime"] .ev,body[data-product="lifetime-plan"] .ev{display:none} body[data-product="lifetime"] .ev-life,body[data-product="lifetime-plan"] .ev-life{display:inline} /* the footer line under the list (.life): prints on every box that has one. 2026-09-09: was lifetime-only. Rhythm on desktop: 14px above the highlighted line, 14px below it, 14px under the footer rule. Measured and evened 2026-09-09. */ .melt-light .prod .life{display:block;font-size:14px;color:#6B2737;font-weight:700;margin-top:6px} @media(min-width:900px){.melt-light .prod .life{letter-spacing:.12em;text-transform:uppercase;margin-top:0;padding-top:14px;border-top:1px solid #EDD5C5}} .melt-light .card h2{font-family:"Playfair Display",serif;font-weight:400;font-size:28px;line-height:1.15;margin-bottom:6px} .melt-light .card h2 em{font-style:italic;color:#C8735A} .melt-light .card .job{font-size:16px;color:#8A6E68;margin-bottom:22px} .melt-light .field{position:relative;margin-bottom:14px} .melt-light .field input{width:100%;height:58px;border:1px solid #E5CCC5;border-radius:10px;padding:22px 48px 6px 16px;font:inherit;font-weight:400;font-size:17px;color:#3A2A28;background:#FDF7F5} .melt-light .field label{position:absolute;left:16px;top:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B0765A;pointer-events:none} .melt-light .field input:focus{border-color:#D64570;outline:none;background:#fff;box-shadow:0 0 0 4px rgba(214,69,112,.12)} .melt-light .field .eye{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#8A6E68} .melt-light .field .tip{margin-top:6px;font-size:15px;color:#8A6E68} .melt-light .field .tip:empty{display:none} .melt-light .field input:user-invalid ~ .tip:empty{display:block} .melt-light .field input:user-invalid{border:2px solid #D64570;background:#FFF3F6;box-shadow:0 0 0 4px rgba(214,69,112,.18);animation:nudge .35s ease} .melt-light .field.email input:user-invalid ~ .tip{color:#D64570;font-weight:700} .melt-light .field.email input:user-invalid ~ .tip::before{content:"Enter your email to get in."} @keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .melt-light .card .buy{margin-top:8px} .melt-light .proof{font-size:16px;color:#8A6E68;margin-top:26px;text-align:center} .melt-light .proof img{width:40px;height:40px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:10px;border:2px solid #fff;box-shadow:0 2px 8px rgba(58,42,40,.25);display:inline-block} .melt-light .proof .st{color:#E8A020;letter-spacing:2px;margin-right:8px} .melt-light .proof b{color:#3A2A28} .melt-light .acct{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;color:#8A6E68;padding:12px 16px;background:#FDF7F5;border:1px solid #EDD5C5;border-radius:10px;margin-bottom:20px;min-width:0} .melt-light .acct span{min-width:0;overflow-wrap:anywhere} .melt-light .acct b{color:#3A2A28;font-weight:400;word-break:break-all} .melt-light .acct a{color:#D64570;font-size:14px;text-decoration:none;font-weight:700;flex:none} .melt-light .express{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .melt-light .express button{height:50px;border:0;border-radius:10px;background:#0C0A0A;color:#fff;font-weight:700;font-size:15px;cursor:pointer} .melt-light .or{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A6E68;margin:0 0 18px} .melt-light .or::before,.melt-light .or::after{content:"";flex:1;height:1px;background:#EDD5C5} .melt-light .lbl{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B0765A;margin:0 0 8px} .melt-light .cardbox{border:1px solid #E5CCC5;border-radius:10px;background:#FDF7F5;overflow:hidden;margin-bottom:6px} .melt-light .cardbox .r{display:flex;align-items:center;border-top:1px solid #E5CCC5;min-width:0} .melt-light .cardbox .r:first-child{border-top:0} .melt-light .cardbox input{flex:1 1 0;min-width:0;width:0;height:54px;border:0;background:transparent;padding:0 16px;font:inherit;font-weight:400;font-size:17px;color:#3A2A28} .melt-light .cardbox input::placeholder{color:#B8A39D;font-weight:300} .melt-light .cardbox input:focus{outline:none} .melt-light .cardbox .r:focus-within{background:#fff;box-shadow:inset 0 0 0 2px #D64570} .melt-light .cardbox .brands{display:flex;gap:5px;padding-right:14px} .melt-light .cardbox .brands span{width:32px;height:21px;border:1px solid #E5CCC5;border-radius:4px;background:#fff;display:grid;place-items:center;font-size:8.5px;font-weight:700;color:#8A6E68} .melt-light .cardbox .r.split input:first-child{border-right:1px solid #E5CCC5} .melt-light .cardbox .lock{padding-right:16px;display:flex;align-items:center;gap:6px;font-size:13px;color:#8A6E68;white-space:nowrap} .melt-light .cardbox .lock svg{width:12px;height:12px;fill:#8A6E68} .melt-light .code{margin:14px 0 0} .melt-light .code summary{list-style:none;cursor:pointer;display:inline-block;font-size:16px;font-weight:400;color:#6B2737;text-decoration:underline;text-underline-offset:3px} .melt-light .code summary::-webkit-details-marker{display:none} .melt-light .code[open] summary{color:#3A2A28;text-decoration:none;margin-bottom:8px} .melt-light .code-row{display:flex;gap:8px} .melt-light .code-row input{flex:1;height:48px;border:1px solid #E5CCC5;border-radius:8px;padding:0 14px;font:inherit;font-weight:400;font-size:16px;color:#3A2A28;background:#FDF7F5;text-transform:uppercase;letter-spacing:.04em} .melt-light .code-row input:focus{border-color:#D64570;outline:none;background:#fff} .melt-light .code-row button{height:48px;padding:0 18px;border:1px solid #3A2A28;border-radius:8px;background:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#3A2A28;cursor:pointer} .melt-light .code-on{margin-top:14px;font-size:15px;color:#3A2A28;background:#F5E8E0;border:1px solid #EDD5C5;border-radius:8px;padding:10px 14px} .melt-light .code-on b{color:#6B2737} .melt-light .total{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0 18px;border-top:1px solid #EDD5C5;margin-top:10px;margin-bottom:16px} .melt-light .total span{font-size:18px;font-weight:400;color:#3A2A28} .melt-light .total b{font-family:"Playfair Display",serif;font-size:38px;font-weight:500;color:#6B2737;line-height:1} .melt-light .terms{font-size:16px;color:#5A4A46;text-align:center;margin-top:14px;line-height:1.5} @media(max-width:820px){ .melt-light .s1{padding:40px 0 48px} .melt-light h1{font-size:34px;overflow-wrap:anywhere} .melt-light .light-band h2{font-size:30px} .melt-light .card{padding:24px 20px 26px} .melt-light .card h2{font-size:24px} /* tablet width (601 to 820): the small picture beside the text, as before */ .melt-light .pair .prodbox{padding:16px 20px 0} .melt-light .prod{grid-template-columns:80px 1fr;gap:14px;padding-bottom:16px;align-items:center} .melt-light .prod img{width:80px;aspect-ratio:1/1;border-radius:8px} .melt-light .prod .n{font-size:11px;letter-spacing:.1em;margin-bottom:2px;white-space:nowrap} .melt-light .prod .t{font-size:22px;line-height:1.15} .melt-light .prod .m{font-size:14px;line-height:1.4;margin-top:3px} .melt-light .prod .price{font-size:14px;margin-top:2px} .melt-light .prod .price b{font-size:20px} .melt-light .total b{font-size:30px} .melt-light .cardbox .brands{display:none} .faq .b{grid-template-columns:1fr} .faq .b img{max-width:260px} } @media(max-width:600px){ /* a phone: the picture fills the card, the title lives inside it, one line under */ .melt-light .pair .prodbox{padding:0;overflow:hidden} .melt-light .prod{display:block;position:relative;padding:0;border:0} .melt-light .prod img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;display:block} .melt-light .prod::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;background:linear-gradient(to top,rgba(20,8,10,.82) 0%,rgba(20,8,10,.35) 45%,rgba(20,8,10,0) 75%);pointer-events:none} .melt-light .prod > div{padding:0 20px 14px} .melt-light .prod .n{display:none} .melt-light .prod .t{position:absolute;left:20px;right:20px;transform:translateY(-100%);margin-top:-20px;font-size:26px;line-height:1.1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:2} .melt-light .prod .m{font-size:14px;line-height:1.4;margin-top:14px;color:#6B5D55} .melt-light .prod .price{font-size:15px;margin-top:6px} .melt-light .prod .price b{font-size:22px} .melt-light .prod .life{display:block;font-size:13px;color:#6B2737;font-weight:700;margin-top:6px} } /* ===================================================================== DARK: the three upsells (Page Template: Melt Upsell) ===================================================================== */ .melt-dark{background:#0F0B0F;color:#F3E8F1;font-weight:400;font-size:16px;line-height:1.5} .melt-dark .bar{border-bottom:1px solid #2a1a28} .melt-dark main{flex:1;padding:40px 20px 50px;background:radial-gradient(120% 80% at 50% 0%, #3E1B3A 0%, #1E1220 50%, #0F0B0F 100%)} .melt-dark main .wrap{max-width:1000px;text-align:center;padding:0} .melt-dark .kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#C287B9;margin-bottom:22px} .melt-dark .kick svg{width:14px;height:14px;fill:#C287B9} .melt-dark h1{font-family:"Playfair Display",serif;font-weight:400;font-size:56px;line-height:1.05;color:#fff} .melt-dark h1 em{font-style:italic;color:#C287B9} .melt-dark .sub{font-size:21px;color:#E8D8E0;margin:14px auto 0;max-width:42ch} .melt-dark .sub b{color:#fff} .melt-dark .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 12px} .melt-dark .tiles a{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;border:1px solid #4B2B47;display:block;color:inherit;text-decoration:none} .melt-dark .tiles img{width:100%;height:100%;object-fit:cover} .melt-dark .tiles .t{position:absolute;left:0;right:0;bottom:0;padding:70px 14px 16px;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.85) 45%,rgba(0,0,0,0) 100%);text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.8)} .melt-dark .tiles .t b{display:block;font-family:"Playfair Display",serif;font-size:22px;font-weight:400;color:#fff;line-height:1.1} .melt-dark .tiles .t span{display:block;font-size:14px;color:#E8D8E0;margin-top:4px} .melt-dark .tiles-7{grid-template-columns:repeat(24,1fr)} .melt-dark .tiles-7 a{grid-column:span 6} .melt-dark .tiles-7 a:nth-child(5){grid-column:4/span 6} .melt-dark .tiles-7 a:nth-child(6){grid-column:10/span 6} .melt-dark .tiles-7 a:nth-child(7){grid-column:16/span 6} .melt-dark .cap{font-size:17px;color:#C9B5C4;margin-bottom:30px} .melt-dark .cap b{color:#F3E8F1} .melt-dark .deal{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;margin:0 auto 26px;text-align:left} .melt-dark .deal div{border-radius:12px;padding:16px 18px;border:1px solid #4B2B47;background:#1E1220} .melt-dark .deal .k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#AF97AB;margin-bottom:4px} .melt-dark .deal .n{font-family:"Playfair Display",serif;font-size:30px;line-height:1;color:#C9B5C4} .melt-dark .deal .n small{font-family:Lato,sans-serif;font-size:14px;color:#AF97AB} .melt-dark .deal .t{font-size:15px;line-height:1.5;color:#C9B5C4;margin-top:6px} .melt-dark .deal .now{background:#2A1626;border-color:#D64570} .melt-dark .deal .now .k{color:#C287B9} .melt-dark .deal .now .n{color:#fff;font-size:40px} .melt-dark .deal .now .n small{color:#E8D8E0} .melt-dark .deal .now .t{color:#E8D8E0} .melt-dark .deal .now .t b{color:#fff} /* the buttons block. FunnelKit renders the yes link with class="buy" and the no link with class="no" */ .melt-dark .buy,.melt-dark a.buy{display:inline-block;width:auto;font-size:17px;letter-spacing:1.12px;padding:22px 60px;box-shadow:0 8px 28px rgba(214,69,112,.45)} .melt-dark .next{margin-top:14px;font-size:16px;color:#E8D8E0} .melt-dark .next b{color:#fff} .melt-dark .once{margin-top:16px;font-size:16px;color:#F3E8F1} .melt-dark .once b{color:#C287B9} .melt-dark .no,.melt-dark a.no{display:inline-block;margin-top:16px;font-size:16px;font-weight:700;letter-spacing:.04em;color:#F3E8F1;text-decoration:none;border:2px solid #8A7088;border-radius:6px;padding:20px 40px;background:transparent} .melt-dark .no:hover{border-color:#C287B9;background:#1E1220} .melt-dark .g{margin-top:24px;font-size:15px;color:#AF97AB} @media(min-width:901px){.melt-dark .tiles a{pointer-events:none}} @media(max-width:900px){ .melt-dark main{padding:32px 16px 44px} .melt-dark h1{font-size:34px;overflow-wrap:anywhere} .melt-dark .sub{font-size:18px} .melt-dark .tiles{grid-template-columns:repeat(2,1fr);gap:10px} .melt-dark .tiles-7{grid-template-columns:repeat(2,1fr)} .melt-dark .tiles-7 a,.melt-dark .tiles-7 a:nth-child(5),.melt-dark .tiles-7 a:nth-child(6),.melt-dark .tiles-7 a:nth-child(7){grid-column:auto} .melt-dark .deal{grid-template-columns:1fr} .melt-dark .deal .now .n{font-size:34px} .melt-dark .buy,.melt-dark a.buy,.melt-dark .no,.melt-dark a.no{display:block;width:100%;padding:20px} } /* ===================================================================== FUNNELKIT SKIN: the checkout form rendered by [wfacp_forms] inside .card .fk Selectors read from the real staging markup 2026-09-08 (Custom builder, two steps). FunnelKit's own stylesheet is specific and uses !important in places, so this does too. ===================================================================== */ /* frame: kill FunnelKit's container chrome, let our card be the card */ .melt-sequence .fk .wfacp-wrapper-decoration,.melt-sequence .fk .wfacp-panel-wrapper,.melt-sequence .fk .wfacp-container,.melt-sequence .fk .wfacp-form,.melt-sequence .fk .wfacp-comm-wrapper,.melt-sequence .fk #wfacp-sec-wrapper,.melt-sequence .fk .wfacp-inside{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important;width:100%!important} .melt-sequence .fk .wfacp-section{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 6px!important} .melt-sequence .fk .wfacp-comm-form-detail{padding:0!important} /* one left edge: FunnelKit's -8px row margins and 16px title padding go */ .melt-sequence .fk .wfacp-row{margin-left:0!important;margin-right:0!important} .melt-sequence .fk .wfacp_internal_form_wrap,.melt-sequence .fk .wfacp-comm-title,.melt-sequence .fk .wfacp-comm-form-detail,.melt-sequence .fk .wfacp-col-full,.melt-sequence .fk .wfacp-col-left-half,.melt-sequence .fk .wfacp-col-right-half{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important} /* things the design does not have */ .melt-sequence .fk #coupons_list,.melt-sequence .fk .wc_coupon_message_wrap,.melt-sequence .fk .wfacp-order-summary-label,.melt-sequence .fk .woocommerce-checkout-review-order-table thead,.melt-sequence .fk .fkwcs-test-description,.melt-sequence .fk .wfacp_step_preview_wrap:empty,.melt-sequence .fk .payment_method_wfocu_test label img{display:none!important} /* order bumps: FunnelKit decides whether one runs (and where). Here it only gets the design: one box between the card and the total, tick, title, price on the row; the description under; FunnelKit's ribbons, tooltip and second button off. 2026-09-08. */ .melt-sequence .fk .wfob_bump_wrapper:empty{display:none!important} .melt-sequence .fk .wfob_bump_wrapper{margin:0 0 16px!important;padding:0!important} .melt-sequence .fk .wfob_bump{margin:0!important;padding:0!important} .melt-sequence .fk .wfob_sec_start,.melt-sequence .fk .wfob_sec_start.wfob_checked,.melt-sequence .fk .wfob_bump.wfob_checked .wfob_sec_start,.melt-sequence .fk .wfob_sec_start:has(input:checked){border:1.5px solid #D64570!important;border-radius:10px!important;background:#FFF6F8!important;padding:14px 16px!important;margin:0!important;box-shadow:none!important;position:relative;outline:0!important} .melt-sequence .fk .wfob_exclusive_content,.melt-sequence .fk .wfob-social-proof-tooltip,.melt-sequence .fk .wfob_blink_img_wrap,.melt-sequence .fk .wfob_btn_wrap,.melt-sequence .fk .wfob_bump_btn,.melt-sequence .fk .wfob_add_to_cart_button,.melt-sequence .fk .wfob_section_arrow{display:none!important} .melt-sequence .fk .wfob_skin_description p{margin:0!important} .melt-sequence .fk .wfob_skin_description p+p{margin-top:10px!important} .melt-sequence .fk .bwf_title_wrap{margin:0!important} .melt-sequence .fk .wfob_title_wrap,.melt-sequence .fk .wfob_bgBox_table{background:transparent!important;border:0!important;padding:0!important;margin:0!important} .melt-sequence .fk .wfob_bgBox_table{display:flex!important;align-items:center;gap:12px} .melt-sequence .fk .wfob_bump_title_start{display:flex!important;align-items:center;gap:12px;flex:1;min-width:0} .melt-sequence .fk .wfob_bump_checkbox{width:22px!important;height:22px!important;border:2px solid #D64570!important;border-radius:6px!important;background:#fff!important;flex:none;display:block!important} .melt-sequence .fk .wfob_bump_checkbox.wfob_checked,.melt-sequence .fk .wfob_bump_title_start:has(input:checked) .wfob_bump_checkbox{background:#D64570!important} .melt-sequence .fk .wfob_title{font:700 16px Lato,sans-serif!important;color:#3A2A28!important;margin:0!important;padding:0!important;line-height:1.3!important} .melt-sequence .fk .wfob_price_container{flex:none} .melt-sequence .fk .wfob_price{font:400 16px Lato,sans-serif!important;color:#3A2A28!important;white-space:nowrap} .melt-sequence .fk .wfob_price del{color:#8A6E68!important;margin-right:6px;font-size:14px} .melt-sequence .fk .wfob_price ins{text-decoration:none!important;font-weight:700;color:#6B2737!important} .melt-sequence .fk .wfob_price .screen-reader-text{display:none!important} .melt-sequence .fk .wfob_sec_start .bwf_display_flex{display:flex!important;align-items:flex-start;margin:12px 0 0!important;padding:0!important;gap:16px} .melt-sequence .fk .wfob_sec_start .bwf_display_flex>div:first-child{flex:0 0 40%;max-width:200px} .melt-sequence .fk .wfob_sec_start .bwf_display_flex>div:first-child img{width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:contain;background:#fff;border:1px solid #EDD5C5;border-radius:8px;padding:6px} .melt-sequence .fk .wfob_sec_start .wfob_pro_txt_wrap{flex:1 1 0;min-width:0} .melt-sequence .fk .wfob_sec_start .bwf_display_flex p,.melt-sequence .fk .wfob_desc,.melt-sequence .fk .wfob_content{font:400 15px/1.5 Lato,sans-serif!important;color:#6B5D55!important;margin:0!important} @media(max-width:480px){ .melt-sequence .fk .wfob_sec_start .bwf_display_flex>div:first-child{flex-basis:34%} .melt-sequence .fk .wfob_sec_start .bwf_display_flex p{font-size:14px!important} } /* section headings ARE the card headings. FunnelKit prints "Contact Information" and "Your order"; the copy is set here so the builder cannot drift */ .melt-sequence .fk .wfacp_section_heading{font-family:"Playfair Display",serif!important;font-weight:400!important;font-size:0!important;line-height:1.15!important;color:#3A2A28!important;margin:0 0 6px!important;padding:0!important;text-align:left!important;text-transform:none!important;letter-spacing:0!important} .melt-sequence .fk .wfacp_section_heading::before{font-size:28px;display:block!important;width:auto!important;height:auto!important;position:static!important;background:none!important;border:0!important;margin:0!important;padding:0!important;font-family:"Playfair Display",serif;font-weight:400;color:#3A2A28;line-height:1.15} .melt-sequence .fk .step_0 .wfacp_section_heading::before{content:"Create your account"} .melt-sequence .fk .wfacp_page:not(#customer_details) .step_0 .wfacp_section_heading::before{content:"Payment"} .melt-sequence .fk .wfacp-comm-title{margin:0 0 14px!important;padding:0!important;border:0!important} .melt-sequence .fk .wfacp_payment .wfacp-comm-title,.melt-sequence .fk .wfacp-comm-title:empty{display:none!important} .melt-sequence .fk #customer_details .step_0 .wfacp_section_heading::after{content:"Enter your email and password to access your massage videos.";display:block;font-family:Lato,sans-serif;font-size:16px;font-weight:400;color:#8A6E68;margin-top:6px;line-height:1.5} .melt-sequence .fk .wfacp_page:not(#customer_details) .step_0 .wfacp_section_heading::after{content:"Card, Apple Pay or Google Pay. Encrypted by Stripe. We never see your card.";display:block;font-family:Lato,sans-serif;font-size:16px;font-weight:400;color:#8A6E68;margin-top:6px;line-height:1.5} /* coupon: no floating label (placeholder does it), one message line at a time, styled by tone */ .melt-sequence .fk #order_coupon_field label.wfacp-form-control-label{display:none!important} .melt-sequence .fk #order_coupon_field input.wfacp_coupon_code::placeholder,.melt-sequence .fk #order_coupon_field .wfacp_empty_field input::placeholder{color:#B8A39D!important;opacity:1!important;text-transform:none;letter-spacing:0} .melt-sequence .fk .wfacp_coupon_field_msg,.melt-sequence .fk .wfacp_single_coupon_msg,.melt-sequence .fk .wfacp_coupon_error_msg,.melt-sequence .fk .wfacp_coupon_remove_msg{font:400 15px/1.5 Lato,sans-serif!important;margin:8px 0 0!important;padding:0!important} .melt-sequence .fk .wfacp_coupon_field_msg:empty,.melt-sequence .fk .wfacp_coupon_error_msg:empty,.melt-sequence .fk .wfacp_coupon_remove_msg:empty{display:none!important;margin:0!important} .melt-sequence .fk .wfacp_coupon_error_msg,.melt-sequence .fk .woocommerce_single_error_message{color:#D64570!important;font-weight:700} .melt-sequence .fk .wfacp_coupon_field_msg,.melt-sequence .fk .wfacp_coupon_remove_msg{color:#3A2A28!important} .melt-sequence .fk .wfacp_coupon_field_msg a,.melt-sequence .fk .wfacp_single_coupon_msg a{color:#D64570!important;font-weight:700;text-decoration:none!important;margin-left:6px} /* coupon: the wait made visible. Apply tapped: button greys, field locks, a line says it is working. Remove tapped: the coupon row dims. */ .melt-sequence .fk #order_coupon_field.melt-busy button.wfacp-coupon-field-btn{opacity:.55;cursor:wait;pointer-events:none} .melt-sequence .fk #order_coupon_field.melt-busy input.wfacp_coupon_code{opacity:.7} .melt-sequence .fk #order_coupon_field.melt-busy .wfacp_coupon_field_box::after{content:"Checking your code\2026";display:block;width:100%;font:400 15px/1.5 Lato,sans-serif;color:#8A6E68;margin-top:8px;animation:meltPulse 1.2s ease-in-out infinite} .melt-sequence .fk #order_coupon_field.melt-busy .wfacp_coupon_field_box{flex-wrap:wrap} .melt-sequence .fk #order_coupon_field.melt-removing ~ #order_summary_field tr.cart-discount,.melt-sequence .fk .woocommerce-checkout-review-order:has(#order_coupon_field.melt-removing) tr.cart-discount{opacity:.45;transition:opacity .2s} .melt-sequence .fk .woocommerce-checkout-review-order:has(#order_coupon_field.melt-removing) tr.cart-discount .woocommerce-remove-coupon{font-size:0!important} .melt-sequence .fk .woocommerce-checkout-review-order:has(#order_coupon_field.melt-removing) tr.cart-discount .woocommerce-remove-coupon::before{content:"Removing\2026";font-size:14px} @keyframes meltPulse{0%,100%{opacity:1}50%{opacity:.45}} /* fields: the invalid state as mocked: red edge, blush fill, one plain line under. Fires when FunnelKit marks the row invalid. */ .melt-sequence .fk p.form-row.woocommerce-invalid input.wfacp-form-control{border:2px solid #D64570!important;background:#FFF3F6!important} .melt-sequence .fk p.form-row.woocommerce-invalid .wfacp_inline_error{display:block!important;font-size:15px!important;color:#D64570!important;font-weight:700;margin-top:6px} .melt-sequence .fk .wfacp_inline_field_error{display:none!important} .melt-sequence .fk #billing_email_field.woocommerce-invalid .wfacp_inline_error:empty::before{content:"Enter your email to get in."} .melt-sequence .fk #account_password_field.woocommerce-invalid .wfacp_inline_error:empty::before{content:"Create a password, 8 characters or more."} .melt-sequence .fk p.form-row.woocommerce-validated input.wfacp-form-control{border-color:#E5CCC5!important} /* fields: the mockup's floating-label field */ .melt-sequence .fk .wfacp-form-control-wrapper{position:relative;margin:0 0 14px!important;padding:0!important} .melt-sequence .fk .wfacp-form-control-label{position:absolute!important;left:16px!important;top:9px!important;right:auto!important;transform:none!important;z-index:2;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;color:#B0765A!important;pointer-events:none;margin:0!important;padding:0!important;line-height:1.2!important;background:transparent!important;width:auto!important;height:auto!important} .melt-sequence .fk .wfacp-form-control-label abbr{display:none!important} .melt-sequence .fk .wfacp-form-control-wrapper.wfacp-anim-wrap .wfacp-form-control-label,.melt-sequence .fk .wfacp-form-control-wrapper.wfacp-anim-wrap.wfacp-anim-active .wfacp-form-control-label,.melt-sequence .fk .wfacp-form-control-wrapper .wfacp-form-control-label.wfacp-anim-label{top:9px!important;font-size:12px!important;background:transparent!important;transform:none!important} .melt-sequence .fk input.wfacp-form-control,.melt-sequence .fk .woocommerce-input-wrapper input,.melt-sequence .fk .wfacp_coupon_field_box input{width:100%!important;height:58px!important;border:1px solid #E5CCC5!important;border-radius:10px!important;padding:22px 16px 6px!important;font:400 17px/1.3 Lato,sans-serif!important;color:#3A2A28!important;background:#FDF7F5!important;box-shadow:none!important} .melt-sequence .fk input.wfacp-form-control:focus,.melt-sequence .fk .woocommerce-input-wrapper input:focus{border-color:#D64570!important;outline:none!important;background:#fff!important;box-shadow:0 0 0 4px rgba(214,69,112,.12)!important} .melt-sequence .fk .wfacp_inline_error,.melt-sequence .fk .woocommerce-error{font-size:15px;color:#D64570;font-weight:700;margin-top:6px} .melt-sequence .fk .wfacp-form-control-wrapper.wfacp-anim-wrap .wfacp-form-control-label{position:absolute!important} /* password eye: sits inside the field, right side */ .melt-sequence .fk .password-input{position:relative} /* every field full width (FunnelKit half-columns off); "Your name" is the first row of step 2, above the payment methods */ .melt-sequence .fk #billing_first_name_field,.melt-sequence .fk #billing_last_name_field,.melt-sequence .fk #billing_email_field,.melt-sequence .fk #account_password_field{width:100%!important;max-width:100%!important;float:none!important;flex:0 0 100%!important;clear:both} .melt-sequence .fk #billing_first_name_field{margin:0 0 14px!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed #billing_first_name_field{order:0;margin:0 0 14px!important} .melt-sequence .fk .wc_payment_method .payment_box>p:not(.form-row),.melt-sequence .fk .payment_method_wfocu_test .payment_box{display:none!important} .melt-sequence .fk button.show-password-input{position:absolute!important;right:16px!important;top:0!important;height:58px!important;width:24px!important;background:transparent!important;border:0!important;color:#8A6E68!important;box-shadow:none!important;padding:0!important} .melt-sequence .fk button.show-password-input::after{color:#8A6E68!important} .melt-sequence .fk .password-input input{padding-right:48px!important} /* the buttons: next step on step 1, place order on step 2 */ .melt-sequence .fk .wfacp-next-btn-wrap{margin:8px 0 0!important;padding:0!important;text-align:left!important} .melt-sequence .fk .wfacp_next_page_button,.melt-sequence .fk #place_order,.melt-sequence .fk .wfacp_next_btn_wrap button{display:block!important;width:100%!important;background:#D64570!important;color:#fff!important;font:700 15px/1.2 Lato,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:18px 40px!important;border-radius:6px!important;border:0!important;cursor:pointer;box-shadow:0 6px 20px rgba(214,69,112,.35)!important;text-align:center!important;margin:0!important;min-height:0!important;height:auto!important} .melt-sequence .fk .wfacp_next_page_button:hover,.melt-sequence .fk #place_order:hover{filter:brightness(1.08);transform:translateY(-1px)} .melt-sequence .fk .wfacp_next_page_button{font-size:0!important} .melt-sequence .fk .wfacp_next_page_button::after{content:"Create account";font-size:15px} .melt-sequence .fk .wfacp-next-btn-wrap::after{content:"Step 2 is payment. Then your classes.";display:block;font-size:15px;margin-top:14px;color:#8A6E68;text-align:center} /* step 2: the step-1 preview line (email shown back) */ .melt-sequence .fk .wfacp_preview_content_box{margin:0 0 18px!important} .melt-sequence .fk .wfacp_step_preview{display:flex!important;justify-content:space-between;align-items:center;gap:10px;font-size:15px;color:#8A6E68;padding:12px 16px;background:#FDF7F5;border:1px solid #EDD5C5;border-radius:10px;min-width:0} .melt-sequence .fk .wfacp_step_preview *{font-size:15px!important;color:#3A2A28!important} .melt-sequence .fk .wfacp_step_preview a{color:#D64570!important;font-weight:700;text-decoration:none;flex:none} /* step 2: express pay. On step 1 it stays hidden: that screen is the account, nothing else. */ .melt-sequence:not(:has(#customer_details[style*="display: none"])) .fk #fkwcs_stripe_smart_button_wrapper{display:none!important} .melt-sequence .fk #fkwcs_stripe_smart_button_wrapper{margin:0 0 16px!important;padding:0!important;border:0!important} .melt-sequence .fk #fkwcs-expresscheckout-fieldset{border:0!important;padding:0!important;margin:0!important;min-height:0!important} .melt-sequence .fk #fkwcs_custom_express_button{min-height:0!important;padding:0!important;margin:0!important} .melt-sequence .fk .fkwcs_smart_buttons{margin:0!important;min-height:50px!important} .melt-sequence .fk #fkwcs-expresscheckout-fieldset legend{display:none!important} .melt-sequence .fk .fkwcs_smart_buttons{border-radius:10px!important;height:50px!important} .melt-sequence .fk #fkwcs-payment-request-separator{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A6E68;margin:16px 0 18px!important} .melt-sequence .fk #fkwcs-payment-request-separator::before,.melt-sequence .fk #fkwcs-payment-request-separator::after{content:"";flex:1 1 0;height:1px;background:#EDD5C5;position:static!important;left:auto!important;right:auto!important;top:auto!important;width:auto!important;transform:none!important;margin:0!important;display:block!important} .melt-sequence .fk #fkwcs-payment-request-separator label{position:static!important;width:auto!important;height:auto!important;transform:none!important;background:transparent!important;padding:0!important;margin:0!important;font-size:0!important;color:#8A6E68!important;line-height:1!important} .melt-sequence .fk #fkwcs-payment-request-separator label::before{content:"or";font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A6E68;white-space:nowrap;position:static!important;width:auto!important;height:auto!important;background:none!important;border:0!important;display:inline!important} .melt-sequence:has(#customer_details[style*="display: none"]) .fk #fkwcs-payment-request-separator label::before{content:"or pay with card"} .melt-sequence .fk #fkwcs-payment-request-separator label::after{display:none!important} /* step 2: order summary as the mockup's total block */ .melt-sequence .fk .wfacp_order_summary{margin:0 0 6px!important;padding:0!important;border:0!important;background:transparent!important} .melt-sequence .fk .woocommerce-checkout-review-order-table{width:100%;border:0!important;background:transparent!important;margin:0!important} .melt-sequence .fk .woocommerce-checkout-review-order-table td,.melt-sequence .fk .woocommerce-checkout-review-order-table th{border:0!important;padding:8px 0!important;background:transparent!important;font:300 15px/1.5 Lato,sans-serif!important;color:#6B5D55!important;vertical-align:middle} .melt-sequence .fk .woocommerce-checkout-review-order-table .product-name{color:#3A2A28!important;font-weight:400!important} .melt-sequence .fk .woocommerce-checkout-review-order-table .wfacp_order_summary_item_image,.melt-sequence .fk .woocommerce-checkout-review-order-table img{display:none!important} .melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal{display:none} .melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total th,.melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total td{border-top:1px solid #EDD5C5!important;padding:20px 0 18px!important;font-size:18px!important;font-weight:400!important;color:#3A2A28!important} .melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total td{text-align:right} .melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total .amount,.melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount{font-family:"Playfair Display",serif!important;font-size:38px!important;font-weight:500!important;color:#6B2737!important;line-height:1!important} .melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total .amount *{font-size:inherit!important} .melt-sequence .fk .woocommerce-checkout-review-order-table .recurring-totals th,.melt-sequence .fk .woocommerce-checkout-review-order-table .recurring-totals td,.melt-sequence .fk .woocommerce-checkout-review-order-table .recurring-total th,.melt-sequence .fk .woocommerce-checkout-review-order-table .recurring-total td{font-size:16px!important;color:#5A4A46!important;padding:6px 0!important;border-top:0!important} /* step 2: coupon as "Have a code?" */ .melt-sequence .fk .wfacp_woocommerce_form_coupon{margin:0 0 6px!important;padding:0!important} .melt-sequence .fk .woocommerce-form-coupon-toggle .woocommerce-info{background:transparent!important;border:0!important;padding:0!important;margin:0!important;color:#6B2737!important;font-size:16px!important;box-shadow:none!important} .melt-sequence .fk .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none!important} .melt-sequence .fk .woocommerce-form-coupon-toggle a,.melt-sequence .fk .woocommerce-form-coupon-toggle .showcoupon{color:#6B2737!important;text-decoration:underline;text-underline-offset:3px;font-weight:400} .melt-sequence .fk .wfacp_coupon_field_box{display:flex;gap:8px;margin-top:10px} .melt-sequence .fk .wfacp_coupon_field_box .form-row{flex:1;margin:0!important;padding:0!important} .melt-sequence .fk .wfacp_coupon_field_box .form-row-last{flex:none} .melt-sequence .fk .wfacp_coupon_field_box input{height:48px!important;padding:0 14px!important;text-transform:uppercase;letter-spacing:.04em;border-radius:8px!important} .melt-sequence .fk .wfacp_coupon_field_box button,.melt-sequence .fk .wfacp_coupon_field_box .button{height:48px!important;padding:0 18px!important;border:1px solid #3A2A28!important;border-radius:8px!important;background:#fff!important;font:700 14px Lato,sans-serif!important;letter-spacing:.04em;text-transform:uppercase;color:#3A2A28!important;box-shadow:none!important} /* step 2: payment. Each method is one box. The chosen box is wine-edged; the card fields live inside the Card box. Stripe draws the fields in its iframe. */ .melt-sequence .fk #payment{background:transparent!important;border:0!important;padding:0!important;margin:0!important} .melt-sequence .fk .wc_payment_methods{list-style:none;margin:0 0 16px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} .melt-sequence .fk .wc_payment_method{position:relative;border:1px solid #E5CCC5!important;border-radius:10px!important;background:#FDF7F5!important;margin:0 0 10px!important;padding:0!important;transition:border-color .15s, box-shadow .15s} .melt-sequence .fk .wc_payment_method:has(input.input-radio:checked){border-color:#D64570!important;background:#fff!important;box-shadow:0 0 0 4px rgba(214,69,112,.12)} .melt-sequence .fk .wc_payment_method input.input-radio,.melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>input.input-radio{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;pointer-events:none;left:0!important;top:0!important;flex:0 0 0!important;order:0;overflow:hidden;display:block!important} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label{display:flex!important;align-items:center;gap:12px;padding:16px!important;margin:0!important;font:400 17px Lato,sans-serif!important;color:#3A2A28!important;cursor:pointer;width:100%!important;box-sizing:border-box;line-height:1.3!important;float:none!important} /* the radio drawn by us: a ring, filled when chosen */ .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label::before{content:"";display:block!important;flex:none;width:20px!important;height:20px!important;border-radius:50%;border:2px solid #C9B5B0!important;background:#fff!important;box-sizing:border-box;position:static!important;margin:0!important} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method:has(input.input-radio:checked)>label::before{border:6px solid #D64570!important} .melt-sequence .fk .wc_payment_method .fkwcs_stripe_icons img{height:20px!important;width:auto!important;margin:0 2px!important} .melt-sequence .fk .payment_box{background:transparent!important;border:0!important;border-top:1px solid #EDD5C5!important;padding:14px 16px 16px!important;margin:0!important;border-radius:0!important} .melt-sequence .fk .wc_payment_method:has(input.input-radio:checked) .payment_box{background:#fff!important} .melt-sequence .fk .payment_box::before{display:none!important} .melt-sequence .fk .payment_box p{font-size:15px;color:#8A6E68;margin:0} .melt-sequence .fk .fkwcs-stripe-elements-form .StripeElement{border:0!important;border-radius:0!important;background:transparent!important;padding:0!important} .melt-sequence .fk .fkwcs-credit-card-error{font-size:15px;color:#D64570;font-weight:700;margin-top:6px} /* PayPal: no panel; PayPal's own button stands where Place order stands. 2026-09-08: "Save PayPal and Venmo" (vaulting) was OFF on the PayPal account, so PayPal disabled itself for every subscription cart. Denis enabled it in PayPal the same day; the plugin reads Active after Refresh. The hide-for-subscriptions rule is retired. If PayPal ever greys out again, this is the first place to look. */ .melt-sequence .fk .payment_method_ppcp-gateway>label img{display:none!important} /* PayPal chosen: PayPal's own buttons do the paying, so our Place order steps aside */ .melt-sequence .fk form:has(#payment_method_ppcp-gateway:checked) #place_order{display:none!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed .ppc-button-wrapper{order:4;margin:0!important} .melt-sequence .fk form:not(:has(#payment_method_ppcp-gateway:checked)) .ppc-button-wrapper{display:none!important} /* Card's box: brands as words on the right */ .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.payment_method_fkwcs_stripe>label::after{content:"Visa \00b7 Mastercard \00b7 Amex";margin-left:auto;font-size:13px;color:#8A6E68;letter-spacing:.02em;white-space:nowrap} .melt-sequence .fk .place-order,.melt-sequence .fk .form-row.place-order{margin:0!important;padding:0!important} .melt-sequence .fk .woocommerce-terms-and-conditions-wrapper,.melt-sequence .fk .woocommerce-privacy-policy-text{font-size:14px;color:#8A6E68;margin:0 0 12px} .melt-sequence .fk .woocommerce-privacy-policy-text p{font-size:14px;line-height:1.5;color:#8A6E68} /* the terms line under place order comes from the product box on our side; FunnelKit prints the recurring total in the table */ .melt-sequence .fk .wfacp-order-place-btn-wrap{margin-top:16px!important} /* ---- read off the guest view 2026-09-08 and cut to the mockup ---- */ /* no login line on step 1, no secure-text h4, no 100% secure strip, no order bump, no product row (the box beside says it) */ .melt-sequence .fk .woocommerce-form-login-toggle,.melt-sequence .fk .woocommerce-form-login,.melt-sequence .fk h4.wfacp-text-left,.melt-sequence .fk .wfacp-payment-dec,.melt-sequence .fk table.shop_table tbody,.melt-sequence .fk table.shop_table tr.recurring-totals{display:none!important} /* "Total" reads "Total due today" */ .melt-sequence .fk table.shop_table tr.order-total:not(.recurring-total) th span{font-size:0!important} .melt-sequence .fk table.shop_table tr.order-total:not(.recurring-total) th span::before{content:"Total due today";font-size:18px;font-weight:400;color:#3A2A28} /* the recurring line is the terms line: "Then $34.95 / month. First renewal: …" */ .melt-sequence .fk table.shop_table tr.recurring-total th,.melt-sequence .fk table.shop_table tr.recurring-total td{border-top:0!important;padding:0 0 6px!important;font-size:16px!important;color:#5A4A46!important;font-weight:400!important} .melt-sequence .fk table.shop_table tr.recurring-total th{font-size:0!important} .melt-sequence .fk table.shop_table tr.recurring-total th *{display:none!important} .melt-sequence .fk table.shop_table tr.recurring-total th::before{content:"Then";font-size:16px;color:#5A4A46} .melt-sequence .fk table.shop_table tr.recurring-total .amount,.melt-sequence .fk table.shop_table tr.recurring-total .woocommerce-Price-amount{font:400 16px Lato,sans-serif!important;color:#3A2A28!important} .melt-sequence .fk table.shop_table tr.recurring-total .amount *{font-size:16px!important} .melt-sequence .fk table.shop_table tr.recurring-total small,.melt-sequence .fk table.shop_table tr.recurring-total .first-payment-date{display:block;font-size:15px!important;color:#8A6E68!important;margin-top:2px} /* coupon link reads "Have a code?" */ .melt-sequence .fk a.wfacp_showcoupon{font-size:0!important} .melt-sequence .fk a.wfacp_showcoupon::before{content:"Have a code?";font-size:16px;color:#6B2737;text-decoration:underline;text-underline-offset:3px} /* payment method label: the gateway title is "Card" (set in WooCommerce > Payments), brand icons off */ .melt-sequence .fk .fkwcs_stripe_icons{display:none!important} /* under the button: the return link becomes a small "Change email" */ .melt-sequence .fk .place_order_back_btn{text-align:center;margin:14px 0 0} .melt-sequence .fk a.wfacp_back_page_button{font-size:0!important;color:#8A6E68!important;text-decoration:none!important} .melt-sequence .fk a.wfacp_back_page_button::before{content:"Change email";font-size:15px;color:#8A6E68;text-decoration:underline;text-underline-offset:3px} /* the express OR line only when express is actually rendered */ .melt-sequence .fk #fkwcs_stripe_smart_button_wrapper:empty,.melt-sequence .fk #fkwcs_stripe_smart_button_wrapper:has(#fkwcs_stripe_smart_button:empty){display:none!important} /* ===================================================================== PAYMENT METHOD SWITCH (2026-09-08): no radios. The open method's panel sits on top; the OTHER methods are buttons beneath it. The open one leaves the row, so the way back is always a button. Grid: panel on row 1 (full width), buttons on row 2. ===================================================================== */ .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed ul.wc_payment_methods{display:flex!important;flex-wrap:wrap;gap:8px;margin:0 0 16px!important;padding:0!important;border:0!important;background:transparent!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed ul.wc_payment_methods>li.wc_payment_method{display:contents!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed ul.wc_payment_methods>li.wc_payment_method>label{order:2;flex:1 1 0;min-width:0} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed ul.wc_payment_methods>li.wc_payment_method>.payment_box{order:1;flex:0 0 100%;width:100%} /* the open method's own button steps out of the row */ .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method:has(input.input-radio:checked)>label{display:none!important} /* the buttons */ .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label, .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.payment_method_fkwcs_stripe>label, .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method:not(.payment_method_fkwcs_stripe)>label{display:flex!important;align-items:center;justify-content:center;height:48px;padding:0 14px!important;margin:0!important;border:1.5px solid #E5CCC5;border-radius:8px;background:transparent;font:400 16px Lato,sans-serif!important;letter-spacing:0;text-transform:none;color:#3A2A28!important;cursor:pointer;width:100%!important;box-sizing:border-box;transition:border-color .15s;white-space:nowrap} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label::before,.melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label::after{display:none!important} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label:hover{border-color:#3A2A28} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method.payment_method_wfocu_test:not(.payment_method_fkwcs_stripe)>label{font-size:0!important} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.payment_method_wfocu_test>label::before{content:"Test";display:block!important;font-size:16px;width:auto!important;height:auto!important;border:0!important;background:none!important;position:static!important;margin:0!important} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.payment_method_wfocu_test:has(input.input-radio:checked)>label{display:none!important} /* the open panel on top: the card box, then 4px, then the buttons. Other methods have no panel, so the buttons sit alone. */ .melt-sequence .fk li.wc_payment_method .payment_box,.melt-sequence .fk li.payment_method_fkwcs_stripe .payment_box{padding:0!important;border:0!important;background:transparent!important;margin:0 0 4px!important} .melt-sequence .fk li.wc_payment_method:not(.payment_method_fkwcs_stripe) .payment_box{display:none!important} .melt-sequence .fk li.wc_payment_method:not(.payment_method_fkwcs_stripe){margin:0!important} /* ===================================================================== THE CARD BOX (Standard Credit Card Form, 2026-09-08). The template's script moves "Name on card" inside #fkwcs-stripe-elements-form and the totals + coupon under the payment boxes, then marks the review wrapper .melt-placed. As mocked: no box in a box. ONE box with three equal rows: name, number (brands right), MM/YY | CVC (Secure right). ===================================================================== */ .melt-sequence .fk li.payment_method_fkwcs_stripe,.melt-sequence .fk li.payment_method_fkwcs_stripe:has(input.input-radio:checked){border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;margin:0!important} /* order under the heading: payment boxes, totals, coupon, Place order, everything else */ .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed{display:flex;flex-direction:column} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed #payment{display:contents!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed ul.wc_payment_methods{order:1} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed .wfob_bump_wrapper{order:2} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed #order_summary_field{order:3;margin:6px 0 0!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed #order_coupon_field{order:4;margin:0 0 6px!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed .place-order,.melt-sequence .fk .woocommerce-checkout-review-order.melt-placed .wfacp-order-place-btn-wrap{order:5} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed>*{order:6} /* one box, three equal rows */ .melt-sequence .fk #fkwcs-stripe-elements-form{border:1px solid #E5CCC5;border-radius:10px;background:#FDF7F5;overflow:hidden} .melt-sequence .fk #fkwcs-stripe-elements-form #billing_first_name_field{display:block!important;margin:0!important;width:100%!important;max-width:100%!important;float:none!important;position:relative} .melt-sequence .fk #fkwcs-stripe-elements-form #billing_first_name_field label,.melt-sequence .fk #fkwcs-stripe-elements-form #billing_first_name_field .optional{display:none!important} .melt-sequence .fk #fkwcs-stripe-elements-form #billing_first_name_field input{height:54px!important;padding:0 16px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:17px!important;font-weight:400} .melt-sequence .fk #fkwcs-stripe-elements-form #billing_first_name_field input::placeholder,.melt-sequence .fk #fkwcs-stripe-elements-form .wfacp_empty_field input::placeholder,.melt-sequence .fk #fkwcs-stripe-elements-form .wfacp-anim-wrap input::placeholder{color:#B8A39D!important;opacity:1!important;font-weight:300} .melt-sequence .fk #fkwcs-stripe-elements-form #billing_first_name_field input:focus{background:#fff!important;box-shadow:inset 0 0 0 2px #D64570!important} .melt-sequence .fk .fkwcs-credit-card-field{border:0!important;border-radius:0!important;background:transparent!important;padding:0!important;min-height:0} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row{border-top:1px solid #E5CCC5;margin:0!important;padding:0!important;width:100%!important} .melt-sequence .fk .fkwcs-credit-card-field label{display:none!important} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-stripe-card-group,.melt-sequence .fk .fkwcs-credit-card-field .fkwcs-credit-card-number-group{position:relative;padding:18px 16px!important;border:0!important;background:transparent!important;border-radius:0!important;height:54px;box-sizing:border-box} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-credit-card-number-group{padding-right:150px!important} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-credit-card-number-group::after{content:"VISA \00a0\00b7\00a0 MC \00a0\00b7\00a0 AMEX";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 11px Lato,sans-serif;letter-spacing:.06em;color:#8A6E68;pointer-events:none} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-stripe-elements-field,.melt-sequence .fk .fkwcs-credit-card-field .StripeElement{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-field-wrapper{display:flex!important} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row-first,.melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row-last{flex:1 1 0;width:50%!important;margin:0!important;padding:0!important;float:none!important;position:relative} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row-first{border-right:1px solid #E5CCC5} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row-last .fkwcs-stripe-card-group{padding-right:16px!important} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row-last::after{content:"Secure";position:absolute;right:44px;top:27px;transform:translateY(-50%);font:400 13px Lato,sans-serif;color:#8A6E68;pointer-events:none} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-stripe-card-group:has(.StripeElement--focus),.melt-sequence .fk .fkwcs-credit-card-field .fkwcs-credit-card-number-group:has(.StripeElement--focus){background:#fff!important;box-shadow:inset 0 0 0 2px #D64570} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-error-text{font-size:14px;color:#D64570;font-weight:700;padding:0 16px 8px} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-error-text:empty{display:none} /* what is in the card payment box besides the fields */ .melt-sequence .fk .payment_box.payment_method_fkwcs_stripe .fkwcs-test-description,.melt-sequence .fk .payment_box.payment_method_fkwcs_stripe .fkwcs-saved-payment-methods:empty,.melt-sequence .fk .payment_box.payment_method_fkwcs_stripe .fkwcs-saved-payment-methods ul:empty{display:none!important} /* ===================================================================== STEP AWARENESS. FunnelKit hides step 1's panel (#customer_details) with an inline display:none when the buyer moves to step 2. Everything below keys off that. ===================================================================== */ /* the bar counts the steps, as the mockup does */ .melt-sequence .bar .st::after{content:"\00a0\00b7\00a0step 1 of 2"} .melt-sequence:has(#customer_details[style*="display: none"]) .bar .st::after{content:"\00a0\00b7\00a0step 2 of 2"} /* desktop, step 2: the headline and lead become the mockup's payment ones */ .melt-sequence:has(#customer_details[style*="display: none"]) .head h1{font-size:0!important;line-height:0!important} .melt-sequence:has(#customer_details[style*="display: none"]) .head h1::before{content:"Last step. ";font-size:48px;line-height:1.1} .melt-sequence:has(#customer_details[style*="display: none"]) .head h1::after{content:"Then press play.";font-size:48px;line-height:1.1;font-style:italic;color:#C8735A} .melt-sequence:has(#customer_details[style*="display: none"]) .head .lead{font-size:0!important;line-height:0!important;max-width:none!important} .melt-sequence:has(#customer_details[style*="display: none"]) .head .lead::before{content:"Your account is made. Pay, and the first class is on your screen before you\2019ve put the phone down.";display:block;font-size:20px;line-height:1.6;max-width:44ch;margin:0 auto} /* phone, step 2: the header stays and swaps to the payment headline like desktop. "Payment" and its line go; the space closes up. */ @media(max-width:899px){ .melt-sequence:has(#customer_details[style*="display: none"]) .s1{padding-top:28px} .melt-sequence:has(#customer_details[style*="display: none"]) .head{margin-bottom:18px} .melt-sequence:has(#customer_details[style*="display: none"]) .head .lead::before{font-size:17px} .melt-sequence:has(#customer_details[style*="display: none"]) .fk .wfacp_page:not(#customer_details) .wfacp-comm-title{display:none!important} .melt-sequence .fk #fkwcs_stripe_smart_button_wrapper{margin:0!important} .melt-sequence .fk #fkwcs-payment-request-separator{margin:10px 0 14px} .melt-sequence .fk .wfacp_payment,.melt-sequence .fk .wfacp-section{margin-top:0!important} .melt-sequence .fk li.payment_method_fkwcs_stripe{margin-bottom:8px!important} .melt-sequence .fk .woocommerce-checkout-review-order.melt-placed #order_summary_field{margin-top:2px!important} } @media(max-width:820px){ .melt-sequence:has(#customer_details[style*="display: none"]) .head h1::before,.melt-sequence:has(#customer_details[style*="display: none"]) .head h1::after{font-size:34px} } @media(max-width:820px){ .melt-sequence .fk .wfacp_section_heading::before{font-size:24px} .melt-sequence .fk .woocommerce-checkout-review-order-table tfoot tr.order-total .amount{font-size:30px!important} /* payment boxes: the method name never breaks; brands hide under 480px */ .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.wc_payment_method>label{white-space:nowrap;padding:14px!important} .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.payment_method_fkwcs_stripe>label::after{font-size:12px} /* the Then row stays on one line */ .melt-sequence .fk table.shop_table tr.recurring-total th,.melt-sequence .fk table.shop_table tr.recurring-total td{vertical-align:top!important;font-size:15px!important} .melt-sequence .fk table.shop_table tr.recurring-total td{white-space:nowrap} .melt-sequence .fk table.shop_table tr.recurring-total .amount,.melt-sequence .fk table.shop_table tr.recurring-total .amount *{font-size:15px!important;white-space:nowrap} .melt-sequence .fk table.shop_table tr.recurring-total small,.melt-sequence .fk table.shop_table tr.recurring-total .first-payment-date{white-space:normal;font-size:13px!important} } @media(max-width:480px){ .melt-sequence #wfacp-e-form #payment ul.wc_payment_methods li.payment_method_fkwcs_stripe>label::after{display:none} .melt-sequence .fk .payment_box{padding:12px 10px 12px!important} /* the card rows need every pixel on a phone: brands and Secure come off, the fields get the width */ .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-credit-card-number-group{padding-right:16px!important} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-credit-card-number-group::after{display:none} .melt-sequence .fk .fkwcs-credit-card-field .fkwcs-form-row-last::after{display:none} }