/* ============================================================ Dear Ones · BOLD theme Scoped to #view-home and #view-product only. The builder, freebies and catalog views keep their original CSS untouched. ============================================================ */ #view-home, #view-product{ /* bold palette */ --ink:#22160F; --muted:#6B5A4E; --bg:#FFFFFF; --warm:#FFF3E0; --amber:#F29A2E; --amber-deep:#D9821A; --teal:#3B2418; --teal-deep:#2A1810; --red:#D9432B; --line:#EFE3D2; --star:#F5B400; /* the site's own tokens are re-pinned to light values so the dark-mode media query further up the file cannot leak into these two views */ --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFF3E0; --blush:#FFF3E0; --accent:#F29A2E; --accent-deep:#D9821A; --on-accent:#22160F; --moss:#2E7D32; --shadow:none; color-scheme:light; font-family:"Plus Jakarta Sans","Nunito",system-ui,sans-serif; color:var(--ink); background:var(--bg); font-size:17px; line-height:1.5; } #view-home *, #view-product *{box-sizing:border-box} #view-home img, #view-product img{max-width:100%;display:block} #view-home h1,#view-home h2,#view-home h3,#view-product h1,#view-product h2,#view-product h3{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 40} /* shared chrome — every colour written out, never a token, so dark mode cannot flip it */ .announce{background:#D9432B!important;color:#fff!important;font-weight:800;font-size:.85rem;letter-spacing:.02em} .nav{background:#fff!important;border-bottom:1px solid #EFE3D2;backdrop-filter:none} .nav .brand{font-family:Fraunces,Georgia,serif;font-weight:900;color:#22160F!important} .nav .nav-links a{color:#22160F!important} footer{background:#22160F!important;color:#D9CDBF!important} footer a,footer .brand,footer b{color:#fff!important} #view-home h1, #view-product h1, #view-home h2, #view-product h2, #view-home h3, #view-product h3{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.01em} #view-home .wrap, #view-product .wrap{padding:0 18px;max-width:560px;margin:0 auto} #view-home .btn, #view-product .btn{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:60px;border-radius:14px;background:var(--amber);color:#22160F;font-weight:800;font-size:1.15rem;text-decoration:none;box-shadow:0 8px 20px rgba(242,154,46,.35);border:0;width:100%} #view-home .btn.teal, #view-product .btn.teal{background:var(--teal);color:#fff;box-shadow:none} #view-home .rating, #view-product .rating{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem} #view-home .rating .s, #view-product .rating .s{color:var(--star);letter-spacing:.05em;font-size:1.05rem} #view-home .hero, #view-product .hero{background:var(--warm);padding:1rem 0 1.4rem} #view-home .hero .pic, #view-product .hero .pic{border-radius:18px;overflow:hidden;margin:.7rem 0 1rem;position:relative} #view-home .hero .pic .tag, #view-product .hero .pic .tag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .6rem;border-radius:999px} #view-home .hero h1, #view-product .hero h1{font-family:Fraunces,serif;font-size:clamp(2rem,8vw,2.7rem);font-weight:900;margin:.4rem 0 .5rem} #view-home .hero p.l, #view-product .hero p.l{font-size:1.05rem;color:var(--muted);margin:0 0 .9rem} #view-home .checks, #view-product .checks{list-style:none;padding:0;margin:.9rem 0 0;display:grid;gap:.45rem;font-weight:700;font-size:.95rem} #view-home .checks li, #view-product .checks li{display:flex;align-items:center;gap:.5rem} #view-home .checks li::before, #view-product .checks li::before{content:"✓";display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#2E7D32;color:#fff;font-size:.8rem;margin-right:0} #view-home .strip, #view-product .strip{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;background:var(--teal);color:#fff;padding:.9rem .4rem;font-size:.78rem;font-weight:700;line-height:1.2} #view-home .strip b, #view-product .strip b{display:block;font-size:1.25rem;font-weight:800;margin-bottom:.15rem} #view-home section, #view-product section{padding:2rem 0} #view-home .kicker, #view-product .kicker{display:inline-block;background:var(--amber);color:#22160F;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px;margin-bottom:.6rem} #view-home h2, #view-product h2{font-family:Fraunces,serif;font-size:1.9rem;font-weight:900;margin-bottom:.35rem} #view-home .sub, #view-product .sub{color:var(--muted);margin:0 0 1.1rem;font-size:1rem} #view-home .steps, #view-product .steps{display:grid;gap:.6rem} #view-home .step, #view-product .step{display:grid;grid-template-columns:52px 1fr;gap:.8rem;align-items:center;background:var(--warm);border-radius:14px;padding:.8rem} #view-home .step .n, #view-product .step .n{width:52px;height:52px;border-radius:14px;background:var(--amber);display:grid;place-items:center;font-family:Fraunces,serif;font-weight:900;font-size:1.5rem} #view-home .step b, #view-product .step b{display:block;font-size:1.02rem} #view-home .step small, #view-product .step small{color:var(--muted);font-size:.9rem;line-height:1.3;display:block} #view-home .looks, #view-product .looks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} #view-home .look, #view-product .look{border-radius:14px;overflow:hidden;border:2px solid var(--line);position:relative;background:#fff} #view-home .look img, #view-product .look img{aspect-ratio:4/5;object-fit:cover;object-position:top;width:100%} #view-home .look .cap, #view-product .look .cap{padding:.55rem .6rem .7rem;font-weight:800;font-size:.95rem;display:flex;justify-content:space-between;align-items:center} #view-home .look .badge, #view-product .look .badge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .5rem;border-radius:999px} #view-home .look .badge.gold, #view-product .look .badge.gold{background:var(--amber);color:#22160F} #view-home .look.wide, #view-product .look.wide{grid-column:1/-1} #view-home .look.wide img, #view-product .look.wide img{aspect-ratio:auto;height:auto} #view-home .ba, #view-product .ba{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center} #view-home .ba img, #view-product .ba img{border-radius:12px;aspect-ratio:1;object-fit:cover} #view-home .ba .arrow, #view-product .ba .arrow{font-size:1.6rem;font-weight:900;color:var(--amber)} #view-home .ba figcaption, #view-product .ba figcaption{text-align:center;font-weight:700;font-size:.85rem;margin-top:.35rem} #view-home .offer, #view-product .offer{background:var(--teal);color:#fff;border-radius:18px;padding:1.2rem 1rem 1.3rem} #view-home .offer h3, #view-product .offer h3{font-family:Fraunces,serif;font-size:1.5rem;font-weight:900;margin-bottom:.2rem} #view-home .offer p, #view-product .offer p{margin:0 0 .8rem;opacity:.9;font-size:.95rem} #view-home .offer ul, #view-product .offer ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.45rem} #view-home .offer li, #view-product .offer li{display:flex;justify-content:space-between;gap:.6rem;background:rgba(255,255,255,.09);border-radius:10px;padding:.55rem .7rem;font-weight:700;font-size:.93rem} #view-home .offer li span:last-child, #view-product .offer li span:last-child{color:#FFD166;flex:none} #view-home .offer .tot, #view-product .offer .tot{display:flex;justify-content:space-between;font-weight:800;font-size:1.05rem;margin-bottom:1rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.2)} #view-home .why, #view-product .why{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} #view-home .why div, #view-product .why div{background:var(--warm);border-radius:14px;padding:.9rem .8rem} #view-home .why b, #view-product .why b{display:block;font-size:.98rem;margin-bottom:.15rem} #view-home .why small, #view-product .why small{color:var(--muted);font-size:.85rem;line-height:1.3} #view-home .why .ic, #view-product .why .ic{width:36px;height:36px;border-radius:10px;background:var(--amber);display:grid;place-items:center;font-size:1.1rem;margin-bottom:.5rem} #view-home .rev, #view-product .rev{display:grid;gap:.7rem} #view-home .review, #view-product .review{border:2px solid var(--line);border-radius:14px;overflow:hidden} #view-home .review img, #view-product .review img{aspect-ratio:5/3;object-fit:cover;width:100%} #view-home .review .b, #view-product .review .b{padding:.8rem .9rem 1rem} #view-home .review .s, #view-product .review .s{color:var(--star);letter-spacing:.06em} #view-home .review q, #view-product .review q{display:block;font-weight:800;font-size:1.05rem;margin:.25rem 0 .3rem;quotes:none} #view-home .review p, #view-product .review p{margin:0 0 .35rem;color:var(--muted);font-size:.92rem} #view-home .review small, #view-product .review small{font-weight:700;font-size:.82rem} #view-home .review small em, #view-product .review small em{font-style:normal;color:#2E7D32} #view-home .guar, #view-product .guar{background:var(--amber);border-radius:18px;padding:1.3rem 1rem;text-align:center} #view-home .guar h3, #view-product .guar h3{font-family:Fraunces,serif;font-size:1.6rem;font-weight:900;margin-bottom:.35rem} #view-home .guar p, #view-product .guar p{margin:0 0 .9rem;font-weight:600} #view-home .guar .btn, #view-product .guar .btn{background:#22160F;color:#fff;box-shadow:none} #view-home details, #view-product details{border-bottom:1px solid var(--line);padding:.8rem 0} #view-home summary, #view-product summary{font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between} #view-home summary::after, #view-product summary::after{content:"+";color:var(--amber);font-weight:900} #view-home details p, #view-product details p{margin:.5rem 0 0;color:var(--muted);font-size:.95rem} #view-home .sticky, #view-product .sticky{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.7rem 18px;display:flex;gap:.8rem;align-items:center} #view-home .sticky .btn, #view-product .sticky .btn{min-height:52px;font-size:1.02rem} /* hidden plumbing the builder still reads */ #view-product .sizeplumb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* explicit surfaces so nothing inherits a dark-mode background */ #view-home .review,#view-product .review{background:#fff} #view-home .review .b,#view-product .review .b{background:#fff;color:#22160F} #view-home .review q,#view-product .review q,#view-home .review small,#view-product .review small{color:#22160F} #view-home .review p,#view-product .review p{color:#6B5A4E} #view-home details,#view-product details{background:transparent;color:#22160F} #view-home .step,#view-product .step{background:#FFF3E0;color:#22160F} #view-home .size,#view-product .size{background:#fff;color:#22160F} #view-home .why div,#view-product .why div{color:#22160F} /* the emoji tile: the .why div padding rule also matches .ic, so zero it */ #view-home .why .ic,#view-product .why .ic{padding:0;place-items:center;line-height:1} /* ---------- trust: payment marks, badge band, secure lines ---------- */ #view-home .securely,#view-product .securely{margin:.55rem 0 0;text-align:center;font-weight:700;font-size:.88rem;color:#6B5A4E} .paymarks{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;align-items:center;margin:.2rem 0} .paymarks .pm{height:27px;min-width:44px;padding:0 .42rem;border:1px solid #E2D7C6;border-radius:5px;background:#fff;display:grid;place-items:center;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:.6rem;letter-spacing:.02em;line-height:1;white-space:nowrap} .paymarks .pm.visa{color:#1A1F71;font-style:italic;font-size:.72rem} .paymarks .pm.amex{background:#006FCF;border-color:#006FCF;color:#fff} .paymarks .pm.disc{color:#FF6000;font-size:.55rem} .paymarks .pm.apay{background:#000;border-color:#000;color:#fff} .paymarks .pm.gpay{color:#5F6368} .paymarks .pm.mc{display:flex;align-items:center;justify-content:center;gap:0} .paymarks .pm.mc i{width:15px;height:15px;border-radius:50%;display:block} .paymarks .pm.mc i:first-child{background:#EB001B} .paymarks .pm.mc i:last-child{background:#F79E1B;margin-left:-6px;mix-blend-mode:multiply} #view-home .paynote,#view-product .paynote{margin:.5rem 0 0;text-align:center;font-size:.8rem;color:#6B5A4E;font-weight:600;line-height:1.35} #view-product .deliver{margin:.7rem 0 0;text-align:center;font-size:.9rem;font-weight:700;color:#22160F;background:#FFF3E0;border:1px dashed #E2A33B;border-radius:10px;padding:.55rem .6rem} #view-home .trustband,#view-product .trustband{padding:1.6rem 0 1.4rem} #view-home .tgrid,#view-product .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1rem} #view-home .tgrid div,#view-product .tgrid div{background:#FFF3E0;border-radius:14px;padding:.85rem .8rem;color:#22160F} #view-home .tgrid .ti,#view-product .tgrid .ti{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#fff;font-size:1rem;line-height:1;margin-bottom:.45rem;padding:0} #view-home .tgrid b,#view-product .tgrid b{display:block;font-size:.95rem;margin-bottom:.1rem} #view-home .tgrid small,#view-product .tgrid small{color:#6B5A4E;font-size:.83rem;line-height:1.3;display:block} footer .footpay{margin-top:1.2rem} footer .footpay .pm{border-color:rgba(255,255,255,.18)} footer a[href^="mailto"]{color:#fff;text-decoration:underline} /* ---------- product page pieces (gallery, size rows, trust ticks) ---------- */ #view-product .crumb,#view-home .crumb{font-size:.85rem;color:var(--muted);padding:.7rem 0;font-weight:600} #view-product .gal, #view-home .gal{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;-webkit-overflow-scrolling:touch} #view-product .gal img, #view-home .gal img{flex:0 0 86%;scroll-snap-align:start;border-radius:16px;border:2px solid var(--line)} #view-product .pdp-title, #view-home .pdp-title{font-family:Fraunces,serif;font-size:2.1rem;font-weight:900;line-height:1.05;margin:.3rem 0 .4rem} #view-product .sizes, #view-home .sizes{display:grid;gap:.55rem;margin:.9rem 0} #view-product .size, #view-home .size{display:flex;align-items:center;gap:.7rem;border:2px solid var(--line);border-radius:14px;padding:.75rem .8rem;font-weight:700;position:relative;background:#fff} #view-product .size.on, #view-home .size.on{border-color:var(--amber);background:#FFF8EE;box-shadow:0 0 0 3px rgba(242,154,46,.18)} #view-product .size .dot, #view-home .size .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none} #view-product .size.on .dot, #view-home .size.on .dot{border-color:var(--amber);background:var(--amber);box-shadow:inset 0 0 0 3px #fff} #view-product .size small, #view-home .size small{display:block;color:var(--muted);font-weight:600;font-size:.85rem} #view-product .size .bs, #view-home .size .bs{position:absolute;right:.7rem;top:-.55rem;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .5rem;border-radius:999px} #view-product .trust, #view-home .trust{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0} #view-product .trust div, #view-home .trust div{display:flex;gap:.45rem;align-items:flex-start;font-weight:700;font-size:.88rem;line-height:1.25} #view-product .trust span, #view-home .trust span{color:#2E7D32;font-weight:900} #view-product /* builder */ .stepper, #view-home /* builder */ .stepper{display:flex;gap:.3rem;list-style:none;padding:.7rem 0 0;margin:0;overflow-x:auto} #view-product .thumbs, #view-home .thumbs{display:flex;gap:.5rem;margin-top:.7rem} #view-product .thumbs img, #view-home .thumbs img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:2px solid var(--line)} #view-product .chip.on, #view-home .chip.on{border-color:var(--amber);background:#FFF8EE} #view-product .opt.on, #view-home .opt.on{border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,154,46,.18)} /* the tick column renders one mark, not two */ #view-product .trust div span,#view-home .trust div span{color:#2E7D32;font-weight:900;flex:none} #view-product .thumbs,#view-home .thumbs{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem 0 .3rem} #view-product .thumbs button,#view-home .thumbs button{flex:0 0 62px;border:2px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;padding:0} #view-product .thumbs button.on,#view-home .thumbs button.on{border-color:var(--amber)} #view-product .thumbs img,#view-home .thumbs img{width:100%;aspect-ratio:1;object-fit:cover;display:block} /* the site adds its own ✓ via .trust span::before; the bold markup supplies one already */ #view-home .trust span::before,#view-product .trust span::before{content:none} /* ---------- product page: objection blocks ---------- */ #view-product .guide{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} #view-product .guide figure{margin:0;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:#fff} #view-product .guide figure.ok{border-color:#2E7D32} #view-product .guide figure.no{border-color:#E4CFCB} #view-product .guide img{aspect-ratio:1;object-fit:cover;width:100%} #view-product .guide figcaption{padding:.5rem .6rem .65rem;font-size:.85rem;line-height:1.3;color:#6B5A4E;font-weight:600} #view-product .guide figcaption b{display:inline-block;margin-right:.35rem;font-weight:800} #view-product .guide .ok figcaption b{color:#2E7D32} #view-product .guide .no figcaption b{color:#C0392B} #view-product .timeline{list-style:none;margin:0;padding:0 0 0 1.4rem;position:relative} #view-product .timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:18px;width:2px;background:#E2A33B} #view-product .timeline li{position:relative;padding:0 0 1rem} #view-product .timeline li::before{content:"";position:absolute;left:-1.4rem;top:5px;width:12px;height:12px;border-radius:50%;background:#F29A2E;border:2px solid #fff;box-shadow:0 0 0 2px #E2A33B} #view-product .timeline li.last::before{background:#2E7D32;box-shadow:0 0 0 2px #2E7D32} #view-product .timeline b{display:block;font-size:1rem} #view-product .timeline span{display:block;color:#6B5A4E;font-size:.9rem;line-height:1.35} #view-product .sizeviz{background:#FFF3E0;border-radius:16px;padding:1rem .8rem 1.2rem} #view-product .sofa{position:relative;height:150px;border-bottom:6px solid #C9B79B;display:flex;align-items:flex-end;justify-content:center;gap:.7rem} #view-product .sofalbl{position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%);font-size:.78rem;font-weight:700;color:#6B5A4E} #view-product .cv{background:#fff;border:2px solid #22160F;border-radius:3px;display:grid;place-items:center;text-align:center;position:relative} #view-product .cv span{font-size:.62rem;font-weight:800;line-height:1.1} #view-product .cv i{display:block;font-style:normal;font-size:.52rem;color:#D9432B;font-weight:800} #view-product .cv.s1{width:36px;height:54px} #view-product .cv.s2{width:48px;height:72px} #view-product .cv.s3{width:60px;height:90px;border-color:#D9821A;box-shadow:0 0 0 3px rgba(242,154,46,.25)} #view-product .giftbox{background:#fff;border:2px solid var(--line);border-radius:18px;padding:1.1rem 1rem 1.2rem} #view-product .giftlist{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.6rem} #view-product .giftlist li{font-size:.92rem;line-height:1.35;color:#6B5A4E} #view-product .giftlist b{display:block;color:#22160F;font-size:.98rem} #view-product .memo{display:flex;gap:.8rem;align-items:flex-start;background:#FFF3E0;border-radius:16px;padding:1rem} #view-product .memo .star{font-size:1.5rem;color:#E2A33B;line-height:1;flex:none} #view-product .memo b{display:block;font-size:1.05rem;margin-bottom:.2rem} #view-product .memo p{margin:0;color:#6B5A4E;font-size:.92rem;line-height:1.4} #view-product .privacy{margin:.9rem 0 0;font-size:.86rem;color:#6B5A4E;font-weight:600;line-height:1.4;text-align:center} /* ============================================================ DESKTOP. The mockup was written phone-first; these rules give the bold views a real wide layout. Builder views are untouched. ============================================================ */ @media (min-width:860px){ #view-home .wrap,#view-product .wrap{max-width:1080px;padding:0 32px} #view-home h1,#view-product h1,#view-product .pdp-title{font-size:3.2rem} #view-home h2,#view-product h2{font-size:2.3rem} #view-home section,#view-product section{padding:3.4rem 0} #view-home .btn,#view-product .btn{width:auto;min-width:320px;padding:0 2rem} /* hero: copy left, picture right */ #view-home .hero{padding:2.6rem 0 3rem} #view-home .hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;column-gap:3.4rem;align-items:center} #view-home .hero .wrap>*{grid-column:1} #view-home .hero .pic{grid-column:2;grid-row:1/span 7;align-self:center;margin:0} #view-home .hero .checks{display:grid;grid-template-columns:1fr;gap:.5rem;font-size:1rem} #view-home .securely{text-align:left} .statstrip,#view-home .strip,#view-product .strip{padding:1.4rem 1rem} #view-home .strip b,#view-product .strip b,.statstrip b{font-size:1.9rem} #view-home .strip div,#view-product .strip div,.statstrip div{font-size:.92rem} #view-home .steps{grid-template-columns:repeat(3,1fr);gap:1rem} #view-home .step{flex-direction:column;align-items:flex-start;display:grid;grid-template-columns:1fr;gap:.7rem;padding:1.4rem} #view-home .ba{max-width:760px;margin:0 auto;gap:1.5rem} #view-home .looks,#view-product .looks{grid-template-columns:repeat(3,1fr);gap:1rem} #view-home .look.wide{grid-column:auto} #view-home .look.wide img{aspect-ratio:4/5;object-fit:cover;object-position:top} #view-home .offer,#view-product .offer{padding:2rem 2rem 2.2rem} #view-home .offer ul,#view-product .offer ul{grid-template-columns:1fr 1fr;gap:.6rem} #view-home .why,#view-product .why{grid-template-columns:repeat(4,1fr)} #view-home .rev,#view-product .rev{display:grid;grid-template-columns:1fr 1fr;gap:1rem} #view-home .tgrid,#view-product .tgrid{grid-template-columns:repeat(4,1fr)} #view-home .guar{padding:2.6rem 2rem} #view-home details,#view-product details{max-width:760px;margin:0 auto} #view-home #home-faq h2,#view-product h2+details{max-width:760px} #view-home .circle-form{max-width:520px;margin:0 auto} /* product: gallery left, buy box right */ #view-product .pdp-top{display:grid;grid-template-columns:1.05fr .95fr;column-gap:3rem;align-items:start} #view-product .pdp-media{position:sticky;top:90px} #view-product .gal{display:grid;grid-template-columns:1fr;gap:.6rem;overflow:visible} #view-product .gal img{flex:none} #view-product .gal img:nth-child(n+2){display:none} #view-product .thumbs{margin-top:.6rem} #view-product .thumbs button{flex:0 0 84px} #view-product .trust{grid-template-columns:1fr 1fr} #view-product .guide{grid-template-columns:repeat(4,1fr)} #view-product .timeline{max-width:640px} #view-product .sizeviz{max-width:640px;margin:0 auto} #view-product .sofa{height:230px;gap:1.6rem} #view-product .cv.s1{width:56px;height:84px} #view-product .cv.s2{width:74px;height:111px} #view-product .cv.s3{width:92px;height:138px} #view-product .cv span{font-size:.78rem} #view-product .cv i{font-size:.62rem} #view-product .giftbox{max-width:760px;margin:0 auto;padding:2rem} #view-product .memo{max-width:760px;margin:0 auto;padding:1.5rem} #view-product .sticky{display:none} } @media (min-width:1200px){ #view-home .wrap,#view-product .wrap{max-width:1180px} } /* a visible, on-brand focus ring instead of the browser default */ .nav .brand:focus-visible{outline:3px solid #F29A2E;outline-offset:3px;border-radius:12px} /* ============================================================ SPACING + ALIGNMENT PASS (2026-09-21) One rhythm per breakpoint, buttons that hug their label, and every block aligned to the same left edge as its heading. ============================================================ */ /* the invite button should never stretch the width of the form row */ #view-home .circle-form .btn, #view-product .circle-form .btn{width:auto;min-width:0;padding:0 1.5rem;font-size:1.02rem} @media (min-width:860px){ /* one vertical rhythm: 44px inside every section, 88px between blocks */ #view-home section,#view-product section{padding:2.75rem 0} #view-home .hero{padding:2.2rem 0 2.6rem} #view-home .trustband,#view-product .trustband{padding:2.2rem 0} /* buttons hug their label instead of spanning a 1080px column */ #view-home .btn{width:fit-content;min-width:340px;margin-left:auto;margin-right:auto} #view-home .hero .btn{margin-left:0;margin-right:0} #view-home .offer .btn,#view-home .guar .btn{min-width:400px} #view-home .circle-form .btn,#view-product .circle-form .btn{min-width:0;margin:0} /* questions: heading and rows share one column */ #view-home #home-faq .wrap,#view-product #home-faq .wrap{max-width:820px} #view-home details,#view-product details{max-width:none;margin:0} #view-home #home-faq h2,#view-product #home-faq h2{max-width:none;margin-bottom:.6rem} /* the circle block reads as one centred unit */ #view-home #home-circle .wrap{max-width:700px;text-align:center} #view-home #home-circle .circle-form{max-width:520px;margin:1.1rem auto .2rem} /* footer: payment marks sit under the brand, not floating mid-column */ footer .footpay .paymarks{justify-content:flex-start} } /* ---------- phone-width tidy-ups ---------- */ #view-home .rating,#view-product .rating{display:flex;flex-wrap:wrap;align-items:center;gap:.12rem .5rem} #view-home .rating .r2,#view-product .rating .r2{color:#2E7D32;font-weight:800} @media (min-width:560px){ #view-home .rating .r2::before,#view-product .rating .r2::before{content:"·";margin-right:.5rem;color:#B9A894} } @media (max-width:560px){ /* stars and the line of praise share one row; the green line sits under it */ #view-home .rating,#view-product .rating{font-size:.82rem;gap:.1rem .4rem} #view-home .rating .s,#view-product .rating .s{font-size:.95rem} #view-home .rating .r2,#view-product .rating .r2{flex:1 0 100%} /* all six payment marks on one row instead of one orphan below */ .paymarks{gap:.26rem} .paymarks .pm{min-width:36px;height:25px;padding:0 .3rem} /* the stat strip reads as three even columns */ #view-home .strip div,#view-product .strip div,.statstrip div{font-size:.7rem;line-height:1.25} } @media (max-width:430px){ #view-home .btn,#view-product .btn{font-size:1.02rem;padding:0 .9rem} } @media (max-width:859px){ /* full-width tap target under the email field */ #view-home .circle-form .btn,#view-product .circle-form .btn{width:100%;min-width:0} } /* footer payment marks line up with the brand column */ footer .footpay .paymarks{justify-content:flex-start} @media (min-width:860px){ /* product page: same column discipline as the home page */ #view-product #prod-know .wrap{max-width:860px} #view-product h2+details{max-width:none} #view-product .ba{max-width:760px;margin:0 auto} #view-product .offer .btn,#view-product .guar .btn{width:fit-content;min-width:400px;margin-left:auto;margin-right:auto} } footer .footpay{margin:1.3rem 0 .2rem}