/* Landing composition. Typography and controls come from design-system.css. */
.shopfront { position:relative; isolation:isolate; background:#faf6e9; }
.shopfront::before { content:""; position:absolute; inset:0 0 auto; height:850px; z-index:-2; background:url('/app/art/sky.webp') center top / cover no-repeat; }
.shopfront::after { content:""; position:absolute; top:560px; left:0; width:100%; height:320px; z-index:-1; background:radial-gradient(ellipse at 15% 90%,#faf6e9 30%,transparent 68%),radial-gradient(ellipse at 65% 100%,#faf6e9 35%,transparent 70%),linear-gradient(transparent,#faf6e9 85%); pointer-events:none; }
.shopfront>header,.shopfront>main,.shopfront>footer { max-width:1280px; padding-left:32px; padding-right:32px; }
.shopfront>header { min-height:120px; border-bottom:0; }
.shopfront .brand { white-space:normal; font-family:var(--font-display); font-weight:700; color:#214d38; }
.shopfront .brand img { width:57px; height:57px; }
.shopfront .brand span { font-size:25px; line-height:1.1; }
.shopfront header nav { gap:18px; background:#faf6e9; padding:6px 8px 6px 16px; border:1px solid #b8bda0; border-radius:12px 9px 13px 8px; }
.shop-hero { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:24px; padding:35px 0 50px; }
.shop-hero figure { margin:0 0 0 -40px; }
.shop-hero figure img { display:block; width:100%; height:auto; }
.shop-intro h1 { font-size:clamp(32px,3.2vw,44px); line-height:1.1; font-weight:650; color:#214d38; margin-bottom:22px; }
.shop-intro>p { font-size:17px; line-height:1.65; color:#203e30; max-width:42ch; text-wrap:pretty; }
.shop-intro #draft-form { margin-top:24px; padding:16px; background:#fffdf5; border:1px solid #93aa88; border-bottom:3px solid #315e45; border-radius:6px; }
.shop-intro #draft-form label { font-size:12px; font-weight:600; }
.shop-intro #draft { display:block; width:100%; border:0; background:transparent; min-height:135px; padding:8px 0; margin:0; }
.shop-intro .composer-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; }
.shop-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding:25px 0 40px; }
.shop-steps article>img { display:block; width:100%; height:175px; object-fit:contain; margin-bottom:24px; }
.shop-steps h2 { font-size:24px; font-weight:650; color:#214d38; }
.shop-steps p { font-size:14px; color:#5d6854; }
.shopfront .shop-footer { max-width:none; margin-top:24px; padding:0; border:0; background:#faf6e9; display:block; }
.footer-meadow { display:block; width:100%; height:auto; background:#faf6e9; }
.shop-footer .footer-content { max-width:1280px; margin:auto; padding:16px 32px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.shop-footer nav { gap:24px; flex-wrap:wrap; }
.shop-footer a { white-space:nowrap; }
@media(max-width:1000px){.shop-hero{grid-template-columns:1fr 1fr;}.shop-hero figure{margin-left:-20px;}.shop-steps{gap:24px;}}
@media(max-width:720px){
 .shopfront>header,.shopfront>main,.shopfront>footer{padding-left:20px;padding-right:20px;}
 .shopfront>header{min-height:96px;}.shopfront header nav{padding:4px;}.shopfront header nav>a:first-child{display:none;}
 .shopfront .brand img{width:49px;height:49px;}.shopfront .brand span{font-size:21px;max-width:145px;}
 .shopfront::before{height:600px;}.shopfront::after{top:350px;height:270px;}
 .shop-hero{grid-template-columns:1fr;gap:25px;padding-top:10px;}.shop-hero figure{margin:0;}.shop-intro h1{font-size:32px;}
 .shop-steps{grid-template-columns:1fr;gap:28px;padding-top:0;}.shop-steps article{display:grid;grid-template-columns:105px 1fr;gap:20px;align-items:center;}
 .shop-steps article>img{height:110px;margin:0;}.shop-steps h2{font-size:23px;}.shop-steps p{font-size:13px;}
}

@media(max-width:600px){.shopfront .shop-footer{padding:0;}.shop-footer .footer-content{padding:20px;}.shop-footer nav>a{display:inline;}}

.shopfront header nav a {white-space:nowrap;}