:root{
  --dark:#303336;
  --text:#000;
  --muted:#81899a;
  --icon:#b5bbc9;
  --blue:#198cff;
  --blue-hover:#0b78e5;
  --btn:#e3e5ed;
  --btn-hover:#d1d4e0;
  --btn-text:#323555;
  --soft:#f2f3f7;
  --star:#ffd600;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--font);color:var(--text);background:#fff;font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:970px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid rgba(25,140,255,.5);outline-offset:2px}

/* navigation */
.nav{position:sticky;top:0;z-index:10;height:64px;background:var(--dark);box-shadow:0 0 5px rgba(0,0,0,.12)}
.nav-in{display:flex;align-items:center;height:100%;padding:0 28px;max-width:1280px;margin:0 auto}
.nav-logo{display:flex;flex-shrink:0;margin-right:24px}
.nav-logo img{width:48px;height:48px;border-radius:8px;display:block;object-fit:cover}
.nav ul{display:flex;margin:0;padding:0;list-style:none;gap:24px;overflow-x:auto;white-space:nowrap}
.nav a.link{display:block;font-size:16px;line-height:48px;color:rgba(255,255,255,.6);transition:color .2s}
.nav a.link:hover,.nav a.link.on{color:#fff}

/* hero */
.hero{padding:56px 0 0}
.hero-box{position:relative}
.hero-box .rating-line,.hero-box h1,.hero-box .type{padding-right:150px}
.hero-logo{position:absolute;top:0;right:0;width:120px;height:120px;border-radius:16px;object-fit:contain}
/* rating */
.rating-line{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.stars{display:inline-flex;gap:2px;color:var(--star);font-size:20px;line-height:1;letter-spacing:1px}
.stars i{font-style:normal;color:var(--btn)}
.rating-line b{font-size:16px;font-weight:600}
.rating-line span:last-child{font-size:14px}
h1{margin:0;font-size:48px;line-height:56px;font-weight:700;word-break:break-word}
.type{margin:8px 0 0;font-size:16px;color:var(--muted)}
.desc{max-width:500px;margin:40px 0 0;white-space:pre-line}
.desc.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.more{display:inline-block;margin-top:8px;padding:0;font:inherit;color:var(--blue);background:none;border:0;cursor:pointer}
.more:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 16px;border-radius:16px;font-size:16px;font-weight:500;color:var(--btn-text);background:var(--btn);transition:background-color .3s;white-space:nowrap}
.btn:hover{background:var(--btn-hover)}
.btn svg{width:24px;height:24px;fill:currentColor;flex-shrink:0}
.btn.cta{color:#fff;background:var(--blue)}
.btn.cta:hover{background:var(--blue-hover)}
.meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:14px;line-height:20px;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:8px}
.meta svg{width:24px;height:24px;fill:var(--icon);flex-shrink:0}

/* sections */
section{padding-top:96px}
h2{margin:0 0 32px;font-size:32px;line-height:40px;font-weight:700}
.about p{max-width:640px;margin:0 0 16px;opacity:.75;white-space:pre-line}
.about p.strong{opacity:1}

/* catalog */
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.item{display:flex;flex-direction:column}
.ph{position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-radius:24px;background:var(--soft)}
.ph::before{content:"";position:absolute;inset:-30px;background:var(--img) center/cover;filter:blur(30px)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.item h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:24px 0 8px;font-size:16px;line-height:24px;font-weight:400}
.price{margin-bottom:12px;font-size:20px;line-height:28px;font-weight:700}
.item p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin:0;font-size:14px;line-height:20px;color:var(--muted)}

/* reviews */
.score{display:flex;align-items:center;margin-bottom:32px}
.score .big{margin-right:16px;font-size:52px;line-height:36px;font-weight:700}
.score .stars{margin-bottom:4px}
.reviews{columns:2 300px;column-gap:20px}
.review{break-inside:avoid;margin:0 0 24px;padding:27px 21px 30px;border-radius:16px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.who{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--soft);font-size:14px;font-weight:600;color:rgba(0,0,0,.75)}
.who .name{display:block;font-size:16px;line-height:24px}
.who .date{display:block;font-size:14px;line-height:18px;color:var(--muted)}
.review .stars{font-size:14px;margin-bottom:8px}
.review .txt p{margin:0 0 8px;font-size:14px;line-height:18px;word-break:break-word}
.review .txt.clamp{max-height:220px;overflow:hidden}

/* photos */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photos a{position:relative;display:block;padding-bottom:100%;overflow:hidden;border-radius:16px;background:var(--soft)}
.photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.photos a:hover img{transform:scale(1.07)}

/* contacts */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.contacts .info{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.contacts .addr{margin:0 0 12px;font-size:20px;line-height:28px;font-weight:500}
.contacts .btn{width:100%;justify-content:flex-start}
.map{overflow:hidden;border-radius:24px;background:var(--soft);min-height:340px}
.map iframe{display:block;width:100%;height:340px;border:0}

footer{margin-top:96px;padding:40px 0;background:var(--soft);font-size:14px;line-height:20px;color:var(--muted);text-align:center}

@media(max-width:998px){
  .nav-in{padding:0}
  .nav-logo{display:none}
  .nav ul{padding:0 16px}
  .hero{padding-top:32px}
  .hero-box .rating-line,.hero-box h1,.hero-box .type{padding-right:0}
  .rating-line{justify-content:center}
  .hero-box{padding:0;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero-logo{position:static;width:92px;height:92px;margin-bottom:24px;order:-1}
  h1{font-size:30px;line-height:38px}
  .desc{margin-top:24px}
  .actions{flex-direction:column;width:100%;margin-top:24px}
  .btn{width:100%}
  .meta{justify-content:center}
  section{padding-top:64px}
  h2{font-size:24px;line-height:32px;margin-bottom:24px}
  .catalog{grid-template-columns:repeat(2,1fr);gap:32px 16px}
  .item p{display:none}
  .photos{grid-template-columns:repeat(2,1fr);gap:12px}
  .contacts{grid-template-columns:1fr}
  footer{margin-top:64px}
}
@media(max-width:560px){
  .catalog{grid-template-columns:1fr}
  .item p{display:-webkit-box}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photos img{transition:none}}