@font-face { font-family:'Urbanist'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url(/fonts/urbanist-var.woff2) format('woff2'); }
@font-face { font-family:'Albert Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/fonts/albertsans-var.woff2) format('woff2'); }

:root {
  --uf-ink:#17181c; --uf-ink-2:#4b4f56; --uf-mut:#7d8188;
  --uf-copper:#a8532f; --uf-copper-d:#8a4023;
  --uf-paper:#f7f4ee; --uf-sand:#ece6da; --uf-line:#e2ddd2; --uf-white:#ffffff;
  --uf-good:#2e7d54;
  --uf-r:12px; --uf-shadow:0 2px 12px rgba(23,24,28,.07);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Albert Sans',system-ui,sans-serif; font-weight:400;
  color:var(--uf-ink); background:var(--uf-paper); line-height:1.6; font-size:16.5px; }
h1,h2,h3 { font-family:'Urbanist',system-ui,sans-serif; font-weight:700; line-height:1.25;
  color:var(--uf-ink); margin:0 0 .5em; }
h1 { font-size:clamp(1.7rem,3.6vw,2.5rem); }
h2 { font-size:clamp(1.35rem,2.6vw,1.8rem); }
h3 { font-size:1.08rem; font-weight:600; }
a { color:var(--uf-copper-d); }
img { max-width:100%; height:auto; }
picture { display:contents; } /* обёртка webp не должна ломать flex/размеры (урок iwell) */
.uf-wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

/* ── Шапка ── */
.uf-topline { background:var(--uf-ink); color:#d8d4cc; font-size:.82rem; }
.uf-topline .uf-wrap { display:flex; justify-content:space-between; gap:16px; padding:6px 20px; }
.uf-topline span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uf-head { background:var(--uf-white); border-bottom:1px solid var(--uf-line); }
.uf-head .uf-wrap { display:flex; align-items:center; gap:18px; padding:14px 20px; flex-wrap:wrap; }
.uf-brand { display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.uf-brand img { width:44px; height:44px; border-radius:8px; border:1px solid var(--uf-line); }
.uf-brand b { font-family:'Urbanist'; font-weight:700; font-size:1.4rem; color:var(--uf-ink);
  letter-spacing:.34em; margin-right:-.34em; }
.uf-brand small { display:block; font-size:.66rem; color:var(--uf-mut); letter-spacing:.18em;
  text-transform:uppercase; margin-top:-3px; }
.uf-nav { display:flex; gap:4px; flex-wrap:wrap; }
.uf-nav a { text-decoration:none; color:var(--uf-ink-2); font-weight:600; font-size:.9rem;
  padding:8px 11px; border-radius:8px; }
.uf-nav a:hover, .uf-nav a.on { background:var(--uf-paper); color:var(--uf-copper-d); }

/* ── Герой ── */
.uf-hero { background:var(--uf-white); border-bottom:1px solid var(--uf-line); }
.uf-hero .uf-wrap { padding:50px 20px 40px; max-width:840px; text-align:center; }
.uf-hero .uf-kick { margin-bottom:10px; }
.uf-hero p { color:var(--uf-ink-2); font-size:1.08rem; max-width:44em; margin:0 auto 1.4em; }
.uf-cta { display:inline-block; text-decoration:none; font-weight:600; border-radius:10px;
  padding:12px 22px; margin:0 6px 8px; }
.uf-cta.main { background:var(--uf-copper); color:#fff; }
.uf-cta.main:hover { background:var(--uf-copper-d); }
.uf-cta.ghost { background:transparent; color:var(--uf-ink); border:1.5px solid var(--uf-ink); }
.uf-cta.ghost:hover { background:var(--uf-paper); }
.uf-banner { display:block; width:100%; aspect-ratio:5/1; object-fit:cover; object-position:center; }

/* ── Секции ── */
.uf-sec { padding:44px 0; }
.uf-sec.alt { background:var(--uf-white); }
.uf-sec-head { max-width:640px; margin-bottom:26px; }
.uf-sec-head p { color:var(--uf-ink-2); margin:0; }
.uf-kick { font-family:'Urbanist'; font-weight:600; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--uf-copper-d); margin-bottom:6px; }

/* ── Чузер-таблица «комната → органайзер» ── */
.uf-choose { width:100%; border-collapse:separate; border-spacing:0; background:var(--uf-white);
  border:1px solid var(--uf-line); border-radius:var(--uf-r); overflow:hidden; box-shadow:var(--uf-shadow); }
.uf-choose th, .uf-choose td { padding:13px 16px; text-align:left; font-size:.93rem;
  border-bottom:1px solid var(--uf-line); vertical-align:top; }
.uf-choose thead th { background:var(--uf-ink); color:#fff; font-family:'Urbanist'; font-weight:600; font-size:.9rem; }
.uf-choose tbody tr:last-child th, .uf-choose tbody tr:last-child td { border-bottom:0; }
.uf-choose tbody th { color:var(--uf-ink-2); font-weight:600; font-size:.85rem; width:18%; }
.uf-choose a { font-weight:600; }
.uf-choose-scroll { overflow-x:auto; }
.uf-choose-scroll table { min-width:640px; }

/* ── Сетка карточек ── */
.uf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.uf-card { background:var(--uf-white); border:1px solid var(--uf-line); border-radius:var(--uf-r);
  box-shadow:var(--uf-shadow); display:flex; flex-direction:column; overflow:hidden; }
.uf-card-ph { height:210px; display:flex; align-items:center; justify-content:center;
  background:#fff; padding:14px; border-bottom:1px solid var(--uf-line); }
.uf-card-ph img { max-height:100%; width:auto; object-fit:contain; }
.uf-card-body { padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; gap:6px; }
.uf-chip { align-self:flex-start; background:var(--uf-sand); color:var(--uf-copper-d);
  font-size:.74rem; font-weight:600; padding:3px 9px; border-radius:99px; letter-spacing:.02em; }
.uf-card-title { margin:0; font-size:1rem; }
.uf-card-title a { color:var(--uf-ink); text-decoration:none; }
.uf-card-title a:hover { color:var(--uf-copper-d); }
.uf-rate { font-size:.84rem; color:var(--uf-ink-2); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.uf-rate small { color:var(--uf-mut); }
.uf-stars { position:relative; display:inline-block; width:86px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cg fill='%23ddd8cd'%3E%3Cpath d='M10 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9L1.4 7.3l6-.7z'/%3E%3Cpath d='M32 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M54 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M76 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M98 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; background-size:86px 15px; }
.uf-stars-on { position:absolute; inset:0; overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20'%3E%3Cg fill='%23a8532f'%3E%3Cpath d='M10 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9L1.4 7.3l6-.7z'/%3E%3Cpath d='M32 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M54 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M76 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3Cpath d='M98 1l2.6 5.6 6 .7-4.4 4.1 1.2 5.9-5.4-3-5.4 3 1.2-5.9-4.4-4.1 6-.7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; background-size:86px 15px; }
.uf-card-short { margin:0; font-size:.87rem; color:var(--uf-ink-2); }
.uf-card-meta { margin-top:auto; padding-top:10px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; }
.uf-price { font-family:'Urbanist'; font-weight:700; font-size:1.2rem; color:var(--uf-ink); }
.uf-card-btns { display:flex; gap:8px; }
.uf-btn { display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  font-family:'Albert Sans'; font-weight:600; font-size:.9rem; border-radius:9px;
  padding:9px 15px; border:0; }
.uf-btn.buy { background:var(--uf-ink); color:#fff; }
.uf-btn.buy:hover { background:#000; }
.uf-btn.more { background:var(--uf-sand); color:var(--uf-ink); }
.uf-btn.more:hover { background:#e2dbcb; }

/* ── Полоса цифр ── */
.uf-numbers { background:var(--uf-ink); color:#fff; }
.uf-numbers .uf-wrap { padding:40px 20px; }
.uf-numbers h2 { color:#fff; }
.uf-numbers .uf-sec-head p { color:#c4c0b7; }
.uf-num-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.uf-num { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--uf-r); padding:18px 20px; }
.uf-num b { font-family:'Urbanist'; font-weight:700; font-size:1.7rem; color:#e0a075; display:block; }
.uf-num span { font-size:.88rem; color:#d8d4cc; }
.uf-num small { display:block; margin-top:6px; font-size:.76rem; color:#a09c93; }

/* ── PDP ── */
.uf-crumbs { font-size:.82rem; color:var(--uf-mut); padding:16px 0 0; }
.uf-crumbs a { color:var(--uf-ink-2); text-decoration:none; }
.uf-crumbs a:hover { text-decoration:underline; }
.uf-product { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:34px;
  padding:22px 0 44px; align-items:start; }
.uf-product-media { background:var(--uf-white); border:1px solid var(--uf-line);
  border-radius:var(--uf-r); padding:22px; display:flex; align-items:center; justify-content:center;
  position:sticky; top:16px; }
.uf-product-media img { max-height:440px; width:auto; object-fit:contain; }
.uf-product-info h1 { font-size:clamp(1.3rem,2.4vw,1.7rem); }
.uf-avail { font-size:.86rem; font-weight:600; color:var(--uf-good); }
.uf-avail.pre { color:var(--uf-copper-d); }
.uf-buy-price { font-family:'Urbanist'; font-weight:700; font-size:1.9rem; margin:10px 0 2px; }
.uf-buy-note { font-size:.8rem; color:var(--uf-mut); margin:8px 0 0; max-width:34em; }
.uf-buy-box { background:var(--uf-white); border:1px solid var(--uf-line); border-radius:var(--uf-r);
  padding:18px 20px; margin:16px 0 22px; box-shadow:var(--uf-shadow); }
.uf-btn.big { font-size:1rem; padding:12px 26px; background:var(--uf-copper); }
.uf-btn.big:hover { background:var(--uf-copper-d); }
.uf-intro { color:var(--uf-ink-2); }

/* Ярусы — фирменный блок PDP: полка с рейкой слева и номерами-табами */
.uf-tiers { margin:10px 0 26px; border-left:3px solid var(--uf-ink); padding-left:0; }
.uf-tier { position:relative; background:var(--uf-white); border:1px solid var(--uf-line);
  border-left:0; padding:16px 20px 16px 58px; }
.uf-tier + .uf-tier { border-top:0; }
.uf-tier::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:var(--uf-sand); }
.uf-tier:last-child::after { display:none; }
.uf-tier i { position:absolute; left:14px; top:16px; font-style:normal; font-family:'Urbanist';
  font-weight:700; font-size:.85rem; width:28px; height:24px; border-radius:4px;
  background:var(--uf-ink); color:#fff; display:flex; align-items:center; justify-content:center; }
.uf-tier h3 { margin:0 0 4px; }
.uf-tier p { margin:0; font-size:.92rem; color:var(--uf-ink-2); }

/* «Где это живёт» + заметка */
.uf-fit { background:var(--uf-ink); color:#d8d4cc; border-radius:var(--uf-r); padding:22px 26px; margin:0 0 22px; }
.uf-fit h2 { color:#fff; font-size:1.15rem; margin-bottom:.4em; }
.uf-fit p { margin:0; font-size:.94rem; }

/* ── Трастовая полоса главной ── */
.uf-trustband { background:var(--uf-sand); border-top:1px solid var(--uf-line);
  border-bottom:1px solid var(--uf-line); }
.uf-trustband .uf-wrap { padding:44px 20px; }
.uf-trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.uf-trust { background:var(--uf-white); border:1px solid var(--uf-line);
  border-top:4px solid var(--uf-copper); border-radius:var(--uf-r);
  padding:18px 20px; box-shadow:var(--uf-shadow); }
.uf-trust h3 { margin:0 0 6px; font-size:.98rem; }
.uf-trust p { margin:0; font-size:.88rem; color:var(--uf-ink-2); }

/* ── FAQ главной ── */
.uf-faq { max-width:760px; }
.uf-faq details { background:var(--uf-paper); border:1px solid var(--uf-line);
  border-radius:var(--uf-r); margin-bottom:10px; }
.uf-faq summary { cursor:pointer; font-family:'Urbanist'; font-weight:600;
  padding:14px 18px; }
.uf-faq summary:hover { color:var(--uf-copper-d); }
.uf-faq p { margin:0; padding:0 18px 16px; font-size:.93rem; color:var(--uf-ink-2); }

/* ── Проза сервисных страниц ── */
.uf-prose { max-width:46em; padding:10px 0 46px; }
.uf-prose h1 { margin-top:26px; }
.uf-prose h2 { margin-top:1.6em; }
.uf-prose li { margin:.35em 0; }
.uf-prose table { border-collapse:collapse; width:100%; margin:1em 0; font-size:.92rem; }
.uf-prose th, .uf-prose td { border:1px solid var(--uf-line); padding:9px 12px; text-align:left; }
.uf-prose th { background:var(--uf-white); font-family:'Urbanist'; font-weight:600; font-size:.85rem; }

/* ── SEO-эссе главной ── */
.uf-essay { max-width:52em; }
.uf-essay h2 { margin-top:0; }
.uf-essay h3 { margin-top:1.5em; font-size:1.08rem; }
.uf-essay p { color:var(--uf-ink-2); }

/* ── Футер ── */
.uf-foot { background:var(--uf-ink); color:#c4c0b7; margin-top:30px; }
.uf-foot .uf-wrap { padding:38px 20px 30px; display:grid;
  grid-template-columns:2fr 1fr 1fr; gap:30px; }
.uf-foot h3 { color:#fff; font-size:.95rem; }
.uf-foot a { color:#d8d4cc; text-decoration:none; display:block; padding:3px 0; font-size:.9rem; }
.uf-foot a:hover { color:#fff; }
.uf-foot p { font-size:.88rem; margin:.4em 0; }
.uf-foot-bottom { border-top:1px solid rgba(255,255,255,.12); }
.uf-foot-bottom .uf-wrap { display:block; padding:14px 20px; font-size:.8rem; color:#a09c93; }

/* ── Мобайл ── */
@media (max-width:860px) {
  .uf-product { grid-template-columns:1fr; }
  .uf-product-media { position:static; }
  .uf-foot .uf-wrap { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .uf-topline span:last-child { display:none; }
  .uf-foot .uf-wrap { grid-template-columns:1fr; }
}