:root { color-scheme: light; font-family: Arial, sans-serif; color: #132440; background: #f5f8fc; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #164e8c; }
header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px max(22px, calc((100vw - 1120px)/2)); background: #09172f; color: white; }
header a { color: white; }
.brand { font: 30px Georgia, serif; text-decoration: none; }
.brand small { display: block; font: 12px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a5cfff; }
main { max-width: 1160px; margin: auto; padding: 22px 20px 65px; }
nav { margin: 0 0 22px; font-size: 14px; color: #64748b; }
article { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; border: 1px solid #dce7f2; border-radius: 24px; background: white; box-shadow: 0 15px 45px #173e6917; }
.visual { min-height: 440px; display: grid; place-items: center; background: #eef4f9; }
.visual img { display: block; width: 100%; height: 100%; max-height: 700px; object-fit: contain; }
.details { padding: clamp(26px, 4vw, 54px); align-self: center; }
.code { color: #2361a1; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 8px 0 12px; font: normal clamp(36px, 4vw, 54px)/1.06 Georgia, serif; color: #09172f; }
.color { color: #47719c; }
.description { white-space: pre-line; font-size: 18px; line-height: 1.65; }
.sizes { line-height: 1.6; }
.cta { display: block; margin-top: 28px; padding: 17px 21px; border-radius: 100px; background: #a9d5ff; color: #09172f; text-align: center; text-decoration: none; font-weight: 700; }
.cta:hover, .cta:focus-visible { background: #7ebffb; }
.note { font-size: 14px; line-height: 1.5; color: #64748b; }
footer { padding: 24px; text-align: center; background: #09172f; color: white; }
footer a { color: #b8dcff; }
@media (max-width: 720px) { header { padding: 15px 20px; } article { grid-template-columns: 1fr; } .visual { min-height: 280px; } .details { padding: 25px 22px 35px; } }
.availability{margin:18px 0 0;padding:13px 15px;border:1px solid #c9e5d3;border-radius:13px;color:#17684b;background:#f1faf4;font-size:14px;font-weight:700;line-height:1.55}.availability.unavailable{border-color:#efd7b8;color:#80511f;background:#fff8ee}.availability.pending{border-color:#d9e2ee;color:#536575;background:#f5f8fb}.availability strong{font-weight:850}.availability.available ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,max-content));gap:7px;margin:8px 0 0;padding:0;list-style:none}.availability.available li{padding:6px 10px;border:1px solid #d3e9dc;border-radius:8px;background:#fff;font-size:13px;line-height:1.4}