/* ============================================================
   hyggehome / — сервисные и информационные страницы.
   Подключается после test.css на: delivery, returns, faq, care, contacts,
   about, requisites, wholesale, where-to-buy, careers, offer, privacy,
   sitemap, ui, index. Общее: боковое меню-лента на телефоне, плавные
   вопросы-ответы, заголовки блоков, обязательные поля, ссылки в тексте.
   ============================================================ */

/* раскладка с боковым меню: колонка тянется на всю высоту, иначе sticky не работает */
.side-layout>*{min-width:0}
@media(min-width:961px){.side-layout>aside{align-self:stretch}}
@media(max-width:960px){.side-layout{gap:28px}}

/* заголовок блока на сервисной странице */
.svc-h2{font-family:var(--display);font-weight:500;font-size:var(--h-sub);line-height:1.1;margin:0 0 16px}
.svc-block+.svc-block{margin-top:56px}
@media(max-width:600px){.svc-h2{font-size:26px}.svc-block+.svc-block{margin-top:44px}}

/* боковое меню: иконка подсвечивается, нажатие чуть «вдавливает» */
.side-nav a{transition:background .2s,color .2s,transform .12s}
.side-nav a .ico{color:var(--muted);transition:color .2s}
.side-nav a:hover .ico,.side-nav a.on .ico{color:var(--terra)}
.side-nav a:active{transform:scale(.98)}

/* на телефоне меню — горизонтальная лента с затуханием края, где есть что листать */
@media(max-width:960px){
  .side-nav.scroller{--fl:1;--fr:1;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin:0 -28px;padding:2px 28px 4px;scroll-padding:0 28px;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fl)) 0,#000 44px,#000 calc(100% - 44px),rgba(0,0,0,var(--fr)) 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fl)) 0,#000 44px,#000 calc(100% - 44px),rgba(0,0,0,var(--fr)) 100%)}
  .side-nav.scroller::-webkit-scrollbar{display:none}
  .side-nav.scroller a{flex:none;white-space:nowrap;background:var(--cream);padding:8px 14px;font-size:14px;gap:8px}
  .side-nav.scroller a:hover{background:var(--sand)}
  .side-nav.scroller a.on{background:var(--ink);color:var(--cream)}
  .side-nav.scroller a.on .ico{color:var(--terra-soft)}
}
@media(max-width:600px){.side-nav.scroller{margin:0 -16px;padding:2px 16px 4px;scroll-padding:0 16px}}

/* вопросы-ответы: ответ раскрывается по высоте (info.js), плюс поворачивается в крестик */
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--terra-dark)}
.faq summary .ico{transition:transform .26s var(--ease),color .2s;color:var(--muted)}
.faq summary:hover .ico,.faq details[open] summary .ico{color:var(--ink)}
.faq details.closing summary .ico{transform:none}
.faq details>div{overflow-wrap:break-word}

/* ссылка внутри предложения: подчёркнута, переносится как текст */
.inl{color:var(--terra-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.inl:hover{color:var(--ink)}
.link{cursor:pointer}

/* формы: звёздочка обязательного поля, ошибка согласия, подпись к выключенной кнопке */
.field .req{color:var(--terra);font-weight:700}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err)}
.field.bad input:focus,.field.bad select:focus,.field.bad textarea:focus{box-shadow:0 0 0 4px rgba(181,86,59,.12)}
.field .err{animation:fadein .2s}
.check.bad input{border-color:var(--err)}
.check.bad{color:var(--err)}
.check.bad a{color:inherit}
.consent-err{display:none;font-size:13px;color:var(--err);margin:6px 0 0 30px;animation:fadein .2s}
.check.bad+.consent-err{display:block}
.form-note{font-size:13px;color:var(--muted);margin-top:10px}
.req-legend{font-size:13px;color:var(--muted);margin-bottom:14px}
.req-legend b{color:var(--terra)}

/* экран «отправлено» после формы */
.ok-box{text-align:center;padding:30px 10px;animation:pop .28s var(--ease)}
.ok-box .ico.xl{color:var(--ok);margin:0 auto 12px}
.ok-box h3{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.1}

/* таблицы в обёртке листаются пальцем, край намекает, что есть продолжение */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* кликабельные карточки-ссылки: подъём и нажатие */
a.info-card{display:block;transition:border-color .2s,box-shadow .25s,transform .2s var(--ease)}
a.info-card:hover{transform:translateY(-2px)}
a.info-card:active{transform:scale(.99)}

/* оглавление документа: плавная подсветка раздела */
.toc a{transition:color .2s,border-color .2s}

/* колонка меню шире, чтобы «Подарочные сертификаты» и «Политика конфиденциальности» не переносились */
@media(min-width:961px){
  .side-layout{grid-template-columns:260px minmax(0,1fr);gap:52px}
  .side-nav a{white-space:nowrap}
}

/* вкладки на телефоне тоже листаются — край затухает там, где есть продолжение (info.js) */
@media(max-width:960px){
  .tabs{--fl:1;--fr:1;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fl)) 0,#000 36px,#000 calc(100% - 36px),rgba(0,0,0,var(--fr)) 100%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,var(--fl)) 0,#000 36px,#000 calc(100% - 36px),rgba(0,0,0,var(--fr)) 100%)}
  .tabs::-webkit-scrollbar{display:none}
}

/* текстовые карточки по четыре: на телефоне — в одну колонку, без переносов по слогам */
@media(max-width:600px){.g4.txt{grid-template-columns:1fr;gap:12px}.g4.txt .info-card{padding:20px 18px;hyphens:manual}}

/* кнопки в шапке страницы: на телефоне одинаковой ширины, одна под другой */
.head-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
@media(max-width:600px){.head-cta .btn{flex:1 1 100%}}