:root { --blue:#2457d6; --blue-soft:#eaf1ff; --ink:#20263a; --muted:#747d91; --line:#e7eaf0; --red:#e85d5d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:#fff; color:var(--ink); } button,input { font:inherit; } button { border:0; cursor:pointer; } .app-shell { width:min(560px,100%); min-height:100vh; margin:auto; padding:max(18px,env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom)); background:#fff; }
.topbar,.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.topbar { min-height:39px; }.brand { display:flex; align-items:center; gap:8px; color:var(--blue); font-size:15px; font-weight:900; letter-spacing:.08em; }.brand-dot { width:12px; height:12px; display:block; border-radius:5px 5px 5px 1px; background:var(--blue); }.avatar-button,.icon-button { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--ink); background:#f5f7fb; font-size:19px; }.back { margin-right:auto; font-size:29px; line-height:1; }.topbar .back + .brand { margin-right:auto; }.eyebrow { margin:31px 0 6px; color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } h1 { margin:0; font-size:35px; line-height:1.08; letter-spacing:-.052em; } h2 { margin:0; font-size:20px; letter-spacing:-.025em; }.subtitle { margin:9px 0 24px; color:var(--muted); font-size:15px; }.promo { position:relative; overflow:hidden; min-height:170px; padding:22px; border-radius:23px; background:var(--blue-soft); }.promo > div { position:relative; z-index:1; width:56%; }.promo span { display:block; margin-bottom:8px; color:#536895; font-size:13px; }.promo strong { display:block; font-size:21px; line-height:1.06; letter-spacing:-.04em; }.promo button { margin-top:18px; padding:10px 15px; border-radius:10px; color:#fff; background:var(--blue); font-weight:800; font-size:13px; }.promo img { position:absolute; right:-22px; bottom:-15px; width:55%; height:188px; object-fit:cover; border-radius:28px 0 0 0; transform:rotate(-7deg); }.section-head { margin:30px 0 14px; }.category-head { margin-bottom:12px; }.link-button { padding:0; color:var(--blue); background:none; font-size:13px; font-weight:800; }.categories { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.category { min-height:88px; padding:10px 7px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:16px; text-align:center; font-size:11px; font-weight:700; }.cat-icon { display:grid; place-items:center; width:34px; height:34px; margin:0 auto 8px; border-radius:12px; color:var(--blue); background:var(--blue-soft); font-size:19px; }.products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }.product-card { position:relative; padding:0; color:var(--ink); background:#fff; text-align:left; }.product-visual { position:relative; overflow:hidden; aspect-ratio:1/1; margin-bottom:11px; border-radius:18px; background:#f2f6ff; }.product-image { display:block; width:100%; height:100%; object-fit:cover; }.badge { position:absolute; top:10px; left:10px; padding:5px 8px; border-radius:7px; color:#fff; background:var(--red); font-size:11px; font-weight:800; }.favourite { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#53617b; background:rgba(255,255,255,.92); font-size:18px; }.product-name { min-height:37px; font-size:14px; line-height:1.28; font-weight:750; }.price,.detail-price { color:var(--blue); font-weight:850; }.price { margin-top:5px; font-size:15px; }.nav { position:fixed; z-index:5; bottom:0; left:50%; transform:translateX(-50%); width:min(560px,100%); display:grid; grid-template-columns:repeat(3,1fr); padding:10px 35px calc(11px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.97); }.nav button { display:grid; place-items:center; gap:3px; color:#8790a2; background:transparent; font-size:11px; }.nav .nav-icon { font-size:20px; }.nav button.active { color:var(--blue); font-weight:800; }.page-title { margin:23px 0 17px; font-size:31px; }.search { display:flex; align-items:center; gap:9px; padding:12px 14px; margin-bottom:16px; border:1px solid var(--line); border-radius:13px; color:#8891a3; }.search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; }.chips { display:flex; gap:8px; padding:0 0 20px; overflow-x:auto; scrollbar-width:none; }.chip { padding:9px 13px; border-radius:999px; color:var(--muted); background:#f4f6fa; white-space:nowrap; font-size:13px; font-weight:750; }.chip.active { color:#fff; background:var(--blue); }.empty { color:var(--muted); }.detail-visual { position:relative; overflow:hidden; margin:18px 0 20px; border-radius:23px; background:var(--blue-soft); }.detail-image { display:block; width:100%; height:340px; object-fit:cover; }.detail-name { font-size:28px; }.rating { margin-top:9px; color:#e4a52f; font-size:14px; font-weight:700; }.rating span { color:#aab1bf; }.detail-price { margin:13px 0 20px; font-size:25px; }.color-label { margin-bottom:10px; color:var(--muted); font-size:14px; }.colors { display:flex; gap:9px; }.color { display:flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; font-size:13px; font-weight:700; }.color.active { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }.color i { width:12px; height:12px; border-radius:50%; }.blue-swatch { background:#a9c6ee; }.sand-swatch { background:#e5ceb3; }.info-card,.steps { margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:17px; }.info-card h3,.steps h3 { margin:0 0 12px; font-size:15px; }.facts,.steps { display:grid; gap:10px; color:var(--muted); font-size:14px; }.facts span { display:flex; align-items:center; gap:9px; }.facts b { color:var(--blue); }.sticky-action { position:fixed; z-index:4; bottom:calc(71px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(524px,calc(100% - 36px)); padding:10px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(32,38,58,.09); }.primary { width:100%; padding:15px; border-radius:12px; color:#fff; background:var(--blue); font-size:16px; font-weight:850; box-shadow:0 7px 17px rgba(36,87,214,.22); }.primary:disabled { opacity:.7; }.modal-shade { position:fixed; z-index:20; inset:0; display:flex; align-items:end; background:rgba(20,28,47,.28); }.modal { position:relative; width:min(560px,100%); padding:26px 18px calc(22px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; color:var(--ink); background:#fff; }.modal-close { position:absolute; top:15px; right:17px; width:30px; height:30px; border-radius:50%; color:var(--muted); background:#f4f6fa; font-size:22px; }.modal .check { margin:0 0 15px; }.check { display:grid; place-items:center; width:66px; height:66px; margin:0 auto 16px; border-radius:50%; color:var(--blue); background:var(--blue-soft); font-size:31px; font-weight:900; }.check.small { width:48px; height:48px; margin-left:0; font-size:23px; }.modal h2 { font-size:27px; letter-spacing:-.04em; }.modal p,.success p { color:var(--muted); line-height:1.45; }.selected { display:flex; align-items:center; gap:11px; padding:10px; margin:18px 0; border-radius:15px; background:#f7f9fd; }.selected img { width:54px; height:54px; object-fit:cover; border-radius:11px; }.selected strong { display:block; font-size:14px; }.selected span { display:block; margin-top:4px; color:var(--blue); font-size:13px; font-weight:800; }.phone-row { padding:12px 13px; margin:13px 0; border:1px solid var(--line); border-radius:13px; font-weight:700; }.phone-row small { display:block; margin-bottom:4px; color:var(--muted); font-size:12px; font-weight:500; }.trust { margin-top:13px; color:var(--muted); text-align:center; font-size:13px; }.success { padding:34px 15px 14px; text-align:center; }.success h2 { font-size:23px; }.empty-state { padding-top:62px; }.application-card { display:flex; gap:12px; padding:12px; margin:19px 0 0; border:1px solid var(--line); border-radius:18px; }.application-card img { width:74px; height:74px; border-radius:13px; object-fit:cover; }.application-card strong { display:block; font-size:15px; }.status { display:inline-block; margin-top:8px; padding:5px 8px; border-radius:99px; color:#3655bc; background:var(--blue-soft); font-size:12px; font-weight:800; } @media (min-width:561px) { body { padding:18px 0; background:#f3f5f9; }.app-shell { border-radius:26px; min-height:calc(100vh - 36px); }.nav { bottom:18px; border-radius:0 0 26px 26px; } }