:root{--ink:#173044;--muted:#62727e;--blue:#0f7fbd;--dark:#075b8b;--soft:#d8eef9;--bg:#f4f8fa;--line:#d9e4ea;--white:#fff}
*{box-sizing:border-box} body{margin:0;font:14px/1.45 "Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)} a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:auto;padding:0 24px}
header{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%;gap:28px} .brand img{width:178px;display:block}
nav{display:flex;gap:28px;font-weight:600;color:#405565} nav a:hover{color:var(--blue)}
.intro{padding:34px 0 22px} h1{font-size:25px;margin:0 0 7px} h2{font-size:19px;margin:0} h3{font-size:16px;margin:0 0 6px}
.lead{font-size:15px;color:var(--muted);max-width:760px;margin:0}
.shop{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px;padding-bottom:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.head{background:var(--soft);padding:16px 19px;border-bottom:1px solid #c5e1ed} .body{padding:19px}
.products{display:grid;gap:12px}
.product{border:1px solid var(--line);border-radius:10px;padding:15px;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;background:#fff}
.product.selected{border:2px solid var(--blue);padding:14px;background:#fbfeff}
.radio{width:18px;height:18px;border:2px solid #9fb7c5;border-radius:50%;margin-top:2px;position:relative}
.selected .radio{border-color:var(--blue)} .selected .radio:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue)}
.desc{color:var(--muted);font-size:13px} .price{font-size:17px;font-weight:700;color:var(--dark);white-space:nowrap}
.meta{margin-top:5px;font-size:12px;color:#71818c}
.info{margin-top:14px;padding:13px 14px;background:#f6fafc;border:1px solid var(--line);border-radius:9px;color:var(--muted)}
.info strong{color:var(--ink)}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px} .full{grid-column:1/-1} label{font-weight:600;color:#405565}
input,select{border:1px solid #cfdde5;border-radius:7px;padding:9px 10px;font:inherit;background:#fff;color:var(--ink);width:100%}
.payments{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay{border:1px solid var(--line);border-radius:9px;padding:12px;cursor:pointer} .pay.selected{border:2px solid var(--blue);padding:11px;background:#fbfeff}
.pay strong{display:block} .pay span{font-size:12px;color:var(--muted)}
.summary{margin-top:16px;border-top:1px solid var(--line);padding-top:15px}
.row{display:flex;justify-content:space-between;gap:20px;margin:5px 0} .total{font-size:17px;font-weight:700;border-top:1px solid var(--line);padding-top:9px;margin-top:9px}
.finalnote{font-size:12px;color:var(--muted);margin:12px 0}
.btn{width:100%;border:0;border-radius:7px;padding:10px 16px;background:var(--dark);color:#fff;font:inherit;font-weight:700;cursor:pointer}
footer{padding:18px 0 28px;color:#71808b;font-size:13px;border-top:1px solid var(--line);background:#fff}
@media(max-width:760px){header{height:auto;padding:12px 0} nav{gap:10px 16px;flex-wrap:wrap;justify-content:flex-end;font-size:13px} .shop{grid-template-columns:1fr} form{grid-template-columns:1fr} .payments{grid-template-columns:1fr} .product{grid-template-columns:auto 1fr} .price{grid-column:2}}