:root{ --bg:#f4e9db; --paper:#fffaf4; --brown:#5b3725; --brown-2:#7a4b32; --text:#4a2d1d; --muted:#897060; --shadow: 0 6px 28px rgba(91,55,37,0.08); --radius:14px; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;} .wrapper{max-width:1100px;margin:0 auto;padding:24px} .header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;margin:16px 0 24px} .header img{width:clamp(160px, 38vw, 320px);height:auto;display:block;margin:0 auto} .brand{font-weight:700;color:var(--brown);font-size:clamp(20px, 2.2vw, 28px);width:100%;text-align:center} .hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;margin:18px 0 8px} .hero h1{color:var(--brown);letter-spacing:.2px;margin:0;font-weight:800; font-size:clamp(28px, 6vw, 46px);line-height:1.15} .hero p{margin:0;color:var(--muted);font-size:clamp(16px, 2.6vw, 18px)} .cta{display:inline-block;background:var(--brown);color:#fff;text-decoration:none; border-radius:12px;padding:10px 18px;margin-top:10px;box-shadow:var(--shadow)} .section{margin:28px 0 18px} .section h2{color:var(--brown);margin:0 0 10px;font-size:clamp(20px,3.6vw,26px)} .card{background:var(--paper);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)} .grid{display:grid;gap:12px} /* products: 1 column mobile, 3 desktop */ .products{grid-template-columns:1fr} @media (min-width:900px){ .hero{grid-template-columns:160px 1fr} .products{grid-template-columns:repeat(3, 1fr)} } .product h3{margin:0 0 6px;color:var(--brown-2);font-size:18px} .product p{margin:0;color:var(--muted)} .benefits{grid-template-columns:1fr} @media (min-width:900px){ .benefits{grid-template-columns:repeat(3,1fr)} } .benefit h4{margin:0 0 6px;color:var(--brown-2);font-size:17px} .benefit p{margin:0;color:var(--muted)} .contact .row{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:900px){ .contact .row{grid-template-columns:1fr 1fr} } .input, textarea{width:100%;border-radius:12px;border:1px solid #eadacc;background:#fff;padding:12px 14px} textarea{min-height:160px;resize:vertical} .check{display:flex;align-items:center;gap:10px;margin:8px 0} .hint{color:#9b8678;font-size:14px;margin-top:-6px} .btn{display:inline-block;background:var(--brown);color:#fff;border:none;border-radius:12px; padding:12px 18px;cursor:pointer;box-shadow:var(--shadow)} .alert{margin-top:12px;border-radius:12px;padding:12px 14px} .alert.ok{background:#eaf7ee;color:#25633b;border:1px solid #cbe9d2} .alert.err{background:#fdeeee;color:#7a1d1d;border:1px solid #f6c6c6} .footer{margin:26px 0 12px;color:#8b7566;font-size:14px;text-align:center} .small{font-size:13px;color:#9b8678} /* Ensure the top heading uses full wrapper width on larger screens */ .hero h1{max-width:unset} /* === EcoBedd header tweaks (requested) === */ /* Put brand text ABOVE the logo, regardless of HTML order */ .header .brand{order:-1;display:block} /* Make the logo responsive, centered, and ~50% viewport width on smartphones */ @media (max-width: 640px){ .header img{width:50vw;max-width:100%;height:auto;margin-left:auto;margin-right:auto} } /* Keep a comfortable logo size on laptops/desktops */ @media (min-width: 641px){ .header img{width:clamp(180px, 22vw, 320px);height:auto} } /* Ensure hero heading uses full available width */ .hero h1{max-width:unset} /* === PATCH 2: smartphone logo full text width + fix narrow hero on laptop === */ /* On smartphones: logo takes full content width (same as text) */ @media (max-width: 640px){ .header img{width:100%;max-width:100%;height:auto} } /* On larger screens: keep hero in a single column (no accidental 2‑col grid) */ @media (min-width: 900px){ .hero{grid-template-columns:1fr !important} } /* === Optional WIDE layout (desktop): header + hero side by side Activate with ?layout=wide (adds .layout-wide class to ). Falls back to stacked on smaller widths. */ @media (min-width: 1100px){ .layout-wide .wrapper{display:grid;grid-template-columns:360px 1fr;gap:28px} .layout-wide .header{grid-column:1} .layout-wide .hero{grid-column:2} .layout-wide section{grid-column:1 / -1} /* content blocks go full width below */ }