
/* цитата источника, цитата покупателя, врезка */
.hy-quote{margin:0;display:grid;gap:1rem;padding:2.4rem 2.8rem;border-radius:2.8rem;background:#d9f2d3;color:#12332b}
.hy-quote blockquote{margin:0;font-family:var(--hy-head);font-size:2.2rem;line-height:1.3}
.hy-quote blockquote p{margin:0}
.hy-quote figcaption{font-size:1.4rem}
.hy-quote figcaption a{text-decoration:underline;text-underline-offset:.3rem}
.hy-quote--buyer{background:#fde2df}
.hy-quote--buyer blockquote{font-family:var(--font-body-family);font-size:1.8rem;font-weight:600;line-height:1.5}
.hy-note{display:grid;gap:.8rem;padding:2.2rem 2.6rem;border-radius:2.8rem;background:#0e4636;color:#fff9ec}
.hy-note b{font-family:var(--hy-head);font-weight:400;font-size:2rem;color:#9cd959}
.hy-note p{margin:0}
/* паспорт марки: определение и абзац рядом, факты ниже во всю полосу */
.hy-passport__top{display:grid;gap:2rem 4.8rem;align-items:start;margin-bottom:3.2rem}
@media screen and (min-width:900px){.hy-passport__top{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.hy-def{font-family:var(--hy-head);font-size:clamp(2.2rem,2.4vw,3rem);line-height:1.2;margin:0}
.hy-passport__top .hy-passport__p{font-size:1.8rem;margin:0}
.hy-facts{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0}
.hy-passport__site{margin:2rem 0 0;font-size:1.6rem;font-weight:600}
.hy-facts>div{flex:1 1 30rem;min-width:0;padding:1.8rem 2.2rem;border-radius:2.4rem;background:#fff}
.hy-facts dt{font-size:1.3rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#17604a;margin-bottom:.5rem}
.hy-facts dd{margin:0;font-size:1.8rem;font-weight:700;line-height:1.3}
.hy-facts dd small{display:block;font-size:1.4rem;font-weight:500;margin-top:.3rem}
.hy-facts--rows>div{flex-basis:100%;display:grid;gap:.4rem 2.4rem}
@media screen and (min-width:750px){.hy-facts--rows>div{grid-template-columns:26rem minmax(0,1fr);align-items:baseline}.hy-facts--rows dt{margin:0}}
/* рассказ о марке: текст и кадр / изделие рядом */
.hy-story{display:grid;gap:2.4rem 5.6rem;align-items:stretch}
@media screen and (min-width:750px){.hy-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hy-story--flip .hy-story__side{order:-1}}
.hy-story__text{display:grid;gap:1.4rem;align-content:center}
.hy-story__text p{margin:0;font-size:1.8rem}
.hy-story__side{min-width:0;display:grid;align-content:center}
.hy-story__fig{margin:0;border-radius:3.2rem;overflow:hidden;line-height:0}
.hy-story__fig img{display:block;width:100%;height:auto}
.hy-story__side .hy-tickets{flex-direction:column}
.hy-story__side .hy-ticket{flex:0 0 auto}
/* на планшете блок с плашками складывается: текст сверху, плашки рядом ниже (в полуколонке три плашки вдвое выше текста) */
@media screen and (min-width:750px) and (max-width:1099px){.hy-story--flip,.hy-story--tall{grid-template-columns:minmax(0,1fr)}.hy-story--flip .hy-story__side{order:0}.hy-story--flip .hy-story__side .hy-tickets{flex-direction:row}.hy-story--flip .hy-story__side .hy-ticket{flex:1 1 30rem}}
/* лестница упаковок */
.hy-ladder{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.hy-ladder li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;gap:.4rem 1.6rem;align-items:center;padding:1.2rem 1.8rem;border-radius:2rem;background:#fff}
.hy-ladder b{font-size:1.7rem}
.hy-ladder__bar{height:1.6rem;border-radius:1rem;background:#d9f2d3;overflow:hidden}
.hy-ladder__bar i{display:block;height:100%;border-radius:1rem;background:#2fb24a}
.hy-ladder li.is-best{background:#0e4636;color:#fff}
.hy-ladder li.is-best .hy-ladder__bar{background:rgba(255,255,255,.2)}
.hy-ladder li.is-best .hy-ladder__bar i{background:#9cd959}
.hy-ladder__n{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.hy-ladder__n small{font-weight:500;font-size:1.3rem;display:block;text-align:right}
.hy-ladder__foot{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;margin-top:2rem}
.hy-ladder__foot p{margin:0;font-size:1.5rem}
@media screen and (max-width:499px){.hy-ladder li{grid-template-columns:minmax(0,1fr) auto}.hy-ladder__bar{grid-column:1/-1;order:3}}
/* отзывы: ряды одной высоты, критика не в первом ряду */
.hy-revs{display:grid;gap:1.6rem;margin:0;padding:0;list-style:none}
@media screen and (min-width:600px){.hy-revs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (min-width:990px){.hy-revs--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hy-rev{margin:0;height:100%;display:flex;flex-direction:column;gap:1rem;padding:2.2rem 2.4rem;border-radius:2.8rem;background:#fff;color:#12332b}
.hy-rev .hy-rating{font-size:1.4rem;font-weight:700}
.hy-rev__t{margin:0;font-weight:800;font-size:1.9rem;line-height:1.25}
.hy-rev blockquote{margin:0;font-size:1.6rem;line-height:1.55}
.hy-rev blockquote p{margin:0}
.hy-rev blockquote.hy-clip:not(.is-open) p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.hy-rev [data-more]{align-self:flex-start;border:0;background:none;padding:.6rem 0;min-height:4.4rem;font:inherit;font-weight:700;font-size:1.5rem;text-decoration:underline;text-underline-offset:.3rem;color:inherit;cursor:pointer}
.hy-rev footer{margin-top:auto;padding-top:.6rem;font-size:1.4rem;line-height:1.45}
.hy-rev footer a{font-weight:700;text-decoration:underline;text-underline-offset:.3rem}
.hy-revs--flow{display:flex;flex-wrap:wrap}
.hy-revs--flow>li{flex:1 1 32rem;min-width:0}
.hy-revsum{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 2rem;font-size:1.8rem;font-weight:700}
.hy-revsum .hy-stars{width:12rem}
/* мозаика кадров в своих пропорциях: ряды заполняют ширину, обрезки нет */
.hy-gal{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0;padding:0;list-style:none}
.hy-gal li{flex:var(--ar) 1 calc(var(--ar) * var(--row,22rem));min-width:0}
.hy-gal button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:2.4rem;overflow:hidden;line-height:0}
.hy-gal img{display:block;width:100%;height:auto;transition:transform .3s}
.hy-gal button:hover img{transform:scale(1.03)}
@media screen and (max-width:749px){.hy-gal{--row:12rem;gap:.8rem}.hy-gal button{border-radius:1.6rem}}
/* шкала лет */
.hy-years{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0;padding:0;list-style:none}
.hy-years li{flex:1 1 20rem;min-width:0;padding:2rem 2.2rem 2.2rem;border-radius:2.8rem;background:rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.8rem}
.hy-years b{font-family:var(--hy-head);font-weight:400;font-size:4rem;line-height:1;color:#9cd959}
.hy-years p{margin:0;font-size:1.6rem}
.hy-years small{margin-top:auto;font-size:1.3rem;opacity:.9}
.hy-years small a{text-decoration:underline;text-underline-offset:.3rem}
/* карточки статей */
.hy-posts{display:grid;gap:2rem;margin:0;padding:0;list-style:none}
@media screen and (min-width:900px){.hy-posts--2{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media screen and (min-width:900px){.hy-posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hy-post{height:100%;display:flex;flex-direction:column;border-radius:2.8rem;overflow:hidden;background:#fff;color:#12332b}
.hy-post__img{line-height:0;background:var(--fs)}
.hy-post__img img{display:block;width:100%;height:auto}
.hy-post__body{position:relative;display:flex;flex-direction:column;gap:1rem;padding:2.2rem 2.4rem 2.4rem;flex:1}
.hy-post__body h3{font-family:var(--font-body-family);font-weight:800;font-size:2.1rem;line-height:1.22}
.hy-post__body h3 a{text-decoration:none;color:inherit}
.hy-post__body h3 a::after{content:"";position:absolute;inset:0}
.hy-post:hover h3 a{text-decoration:underline;text-underline-offset:.3rem}
@media screen and (min-width:600px) and (max-width:899px){.hy-post{flex-direction:row;align-items:stretch}.hy-post__img{flex:0 0 40%;display:flex;align-items:center}}
.hy-post__body p{margin:0;font-size:1.6rem}
.hy-post__meta{margin-top:auto;font-size:1.4rem;font-weight:700}
.hy-sources{margin-top:2.4rem;font-size:1.4rem}
.hy-sources__h{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:1.3rem;margin:0 0 .6rem}
.hy-sources ul{margin:0;padding-left:1.8rem;display:grid;gap:.3rem}
.hy-sources a{text-decoration:underline;text-underline-offset:.3rem}
/* «лучший выбор для…» */
.hy-best{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0;padding:0;list-style:none;align-items:stretch}
.hy-best li{flex:1 1 26rem;min-width:0;display:flex;flex-direction:column;gap:.8rem;padding:2.2rem 2.4rem;border-radius:2.8rem;background:#fff;color:#12332b}
.hy-best__s{font-family:var(--hy-head);font-size:2.1rem;line-height:1.15;color:#0e4636}
.hy-best__p{font-weight:800;font-size:1.7rem}
.hy-best__p a{text-decoration:underline;text-underline-offset:.3rem}
.hy-best li p{margin:0;font-size:1.6rem}
/* ссылки на заметки в отделах и карточках */
.hy-reads{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0;padding:0;list-style:none}
.hy-reads li{flex:1 1 28rem;min-width:0;display:flex}
.hy-reads a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:1.8rem 2.2rem;border-radius:2.4rem;background:#fff;color:#12332b;font-weight:800;font-size:1.7rem;line-height:1.25;text-decoration:none}
.hy-reads a:hover{text-decoration:underline;text-underline-offset:.3rem}
.hy-reads a .icon{flex:none}
.hy-colls{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0;padding:0;list-style:none}
.hy-colls li{flex:1 1 30rem;min-width:0;display:flex}
.hy-coll{position:relative;flex:1;display:grid;gap:1rem;padding:2.8rem;border-radius:3.2rem;background:var(--f);color:var(--fd)}
.hy-coll h2{font-size:2.8rem;color:var(--fd)}
.hy-coll h2 a{color:inherit;text-decoration:none}
.hy-coll h2 a::after{content:"";position:absolute;inset:0;border-radius:3.2rem}
.hy-coll p{margin:0}
.hy-coll:hover h2 a{text-decoration:underline;text-underline-offset:.4rem}
/* этикетка коротко */
.hy-label{display:grid;gap:2rem 4.8rem;align-items:stretch}
@media screen and (min-width:900px){.hy-label{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hy-label__col{display:grid;gap:1.2rem;align-content:start;min-width:0}
.hy-label__col h3{font-size:2.2rem}
.hy-label__col p{margin:0}
.hy-stats{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0;padding:0;list-style:none}
.hy-stats li{flex:1 1 14rem;min-width:0;padding:1.6rem 1.8rem;border-radius:2.2rem;background:#fff;color:#12332b;display:grid;gap:.2rem}
.hy-stats b{font-family:var(--hy-head);font-weight:400;font-size:3.2rem;line-height:1;color:#0e4636}
.hy-stats span{font-size:1.4rem;font-weight:600}
/* гистограмма звёзд */
.hy-hist{display:grid;gap:.6rem;margin:0;padding:0;list-style:none;max-width:44rem}
.hy-hist li{display:grid;grid-template-columns:6.4rem minmax(0,1fr) 4.4rem;gap:1rem;align-items:center;font-size:1.4rem;font-weight:700}
.hy-hist i{display:block;height:1.2rem;border-radius:1rem;background:#fff;overflow:hidden}
.hy-hist i b{display:block;height:100%;border-radius:1rem;background:#d18a00}
.hy-hist span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hy-revhead{display:grid;gap:2rem 4.8rem;align-items:stretch;margin-bottom:2.8rem}
.hy-revhead>*{display:grid;align-content:center;gap:1rem;min-width:0}
@media screen and (min-width:900px){.hy-revhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hy-revhead__sum{display:grid;gap:1rem;min-width:0}
.hy-revhead__sum p{margin:0}
.hy-ingr{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.hy-ingr li{padding:.6rem 1.4rem;border-radius:4rem;background:#fff;color:#12332b;font-weight:700;font-size:1.5rem}
.hy-ingr li.is-dye{background:#fde2df}
.hy-printed{margin:0;padding:1.6rem 2rem;border-radius:2rem;background:rgba(255,255,255,.6);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.4rem;line-height:1.5;overflow-wrap:anywhere}
