/* Витрина: новые блоки (30.10.2026, план docs/superpowers/plans/2026-10-30-okeano-storefront-ux.md).
   Подключается после market.css. Цвета — переменные темы (--accent-color, --mk-ink, --mk-mut). */

/* ── общее: тост ── */
.mk-toast{position:fixed;left:50%;bottom:24px;z-index:200;display:flex;align-items:center;gap:14px;max-width:min(560px,calc(100vw - 32px));
  padding:12px 16px;border-radius:12px;background:#1f1f24;color:#fff;font-size:15px;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.18);
  transform:translate(-50%,16px);opacity:0;visibility:hidden;transition:transform .2s ease,opacity .2s ease,visibility 0s .2s}
.mk-toast.is-on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .2s ease,opacity .2s ease}
.mk-toast--err{background:#b42318}
.mk-toast__act{flex:none;border:0;background:none;color:#fff;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px 0}
@media (max-width:860px){.mk-toast{bottom:calc(72px + env(safe-area-inset-bottom))}
  body.has-mkstick .mk-toast{bottom:calc(140px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.mk-toast,.mk-toast.is-on{transition:none}}

/* ── этап 1: товар ── */
.mk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-pg__share{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--mk-line,#e6e6ea)}
.mk-pg__share::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.4 1.2l-6.7-3.4a3 3 0 0 0 0-1.6l6.7-3.4A3 3 0 1 0 15 7l-6.7 3.4a3 3 0 1 0 0 3.2L15 17a3 3 0 1 0 3-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 0 0-2.4 1.2l-6.7-3.4a3 3 0 0 0 0-1.6l6.7-3.4A3 3 0 1 0 15 7l-6.7 3.4a3 3 0 1 0 0 3.2L15 17a3 3 0 1 0 3-1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:860px){
  .mk-pg__h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:20px!important;line-height:1.25!important}
  .mk-pg__grid{display:flex!important;flex-direction:column;align-items:stretch}
  .mk-pg__grid > *{min-width:0;align-self:stretch}
  .mk-pg__grid .mk-gal{order:1}.mk-pg__grid .mk-buy{order:2}.mk-pg__grid .mk-pg__info{order:3}
  .mk-pg__info > .mk-pg__brand:first-child{margin-top:0}
  /* «О товаре» (.mk-lead) на телефоне не показываем: полное описание — карточкой ниже; характеристики и бренд остаются (market.css) */
}

/* варианты кнопками, «Показать полностью», пустые отзывы */
.mk-vars{display:flex;flex-wrap:wrap;gap:8px}
/* пока скрипт не сократил названия, блок невидим (без мигания); если скрипт не сработал — сам покажется через 2 с */
.mk-vars:not(.is-ready){visibility:hidden;animation:mkVarsShow 0s linear 2s forwards}
@keyframes mkVarsShow{to{visibility:visible}}
.mk-var{min-height:40px;padding:8px 14px;border:1px solid var(--mk-line,#dcdce2);border-radius:10px;background:#fff;color:var(--mk-ink);font:inherit;font-size:15px;cursor:pointer}
.mk-var.is-on{border-color:var(--accent-color);box-shadow:inset 0 0 0 1px var(--accent-color);font-weight:600}
.mk-var.is-out{color:var(--mk-mut);text-decoration:line-through}
.mk-cut.is-cut:not(.is-open) .mk-cut__body{max-height:var(--mk-cut-h);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.mk-cut__btn[hidden]{display:none!important}
.mk-cut__btn{margin-top:8px;border:0;background:none;padding:0;font:inherit;cursor:pointer}
.mk-empty--sm{padding:20px 0;text-align:left}
/* пустые отзывы: кнопка «Написать отзыв» одна — summary формы прячем, пока форма закрыта */
.mk-empty--sm + details.mk-more:not([open]) > summary{display:none}

/* крошки: на телефоне вместо цепочки — «← раздел» (только на странице товара) */
.mk-crumbs-back{display:none}
@media (max-width:860px){
  .mk-pg .breadcrumbs{display:none!important}
  .mk-crumbs-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:2px 0 4px;font-size:15px;color:var(--mk-ink)!important;text-decoration:none!important}
  .mk-crumbs-back::before{content:"←";font-size:17px}
}

/* плашка cookie на телефоне: компактная; над закреплённой полосой — только пока полоса на экране (body.mk-stick-on).
   Селекторы с «html body» — чтобы перебить market.css (html .cookie-bnr.kc, html body.has-mkstick .cookie-bnr.kc) */
@media screen and (max-width:560px){
  html body .cookie-bnr.kc{padding:10px 12px;gap:10px;flex-wrap:nowrap;align-items:center;border-radius:14px;bottom:calc(66px + env(safe-area-inset-bottom))}
  html body .cookie-bnr.kc .kc__title{display:none}
  html body .cookie-bnr.kc .kc__body{flex:1 1 auto}
  html body .cookie-bnr.kc .kc__text{font-size:12.5px;line-height:1.3}
  html body .cookie-bnr.kc .kc__ok{flex:none;width:auto;min-height:36px;height:36px;padding:0 14px}
  html body.has-mkstick .cookie-bnr.kc{bottom:calc(66px + env(safe-area-inset-bottom))}
  html body.has-mkstick.mk-stick-on .cookie-bnr.kc{bottom:calc(132px + env(safe-area-inset-bottom))}
}

/* ── этап 2: каталог и фильтры ── */
.mk-fset{min-width:0;margin:0 0 16px!important;padding:0!important;border:0}
.mk-fset legend{width:100%;padding:0}
.mk-fopts{display:grid;gap:0}
.mk-fopts.is-long:not(.is-all) .mk-fopt:nth-child(n+7){display:none}
.mk-fopt{display:flex;align-items:center;gap:10px;min-height:36px;font-size:15px;line-height:1.3;color:var(--mk-ink);cursor:pointer}
.mk-fopt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent-color);cursor:pointer}
.mk-fopt__v{flex:1;min-width:0;overflow-wrap:anywhere}
.mk-fopt__n{flex:none;font-size:13.5px;color:var(--mk-mut)}
.mk-fopt:hover .mk-fopt__v{color:var(--accent-color)}
.mk-fmore,.mk-chips__reset{border:0;background:none;font-family:inherit;cursor:pointer}
.mk-fmore.mk-link{margin-top:2px;padding:4px 0;font-size:14px}
.mk-bar__n{margin-left:-4px;font-weight:600}
.mk-bar__n[hidden]{display:none}
.mk-chips--sel{align-items:center;margin:0 0 14px}
.mk-chips--sel[hidden]{display:none}
.mk-chip--x{border:0;background:var(--mk-soft);color:var(--accent-color)!important;font-family:inherit;cursor:pointer}
.mk-chip--x::after{content:"";flex:none;width:9px;height:9px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7m0-7l-7 7' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7m0-7l-7 7' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mk-chip--x:hover{box-shadow:inset 0 0 0 1.5px var(--accent-color)}
.mk-chips--sel .mk-chips__reset{margin:0;padding:8px 6px;font-size:14px;color:var(--mk-mut)!important}
.mk-chips--sel .mk-chips__reset:hover{color:var(--accent-color)!important}
.mk-chip--x:focus-visible,.mk-chips__reset:focus-visible,.mk-fmore:focus-visible,.mk-filters__reset:focus-visible,.mk-fopt input:focus-visible{outline:2px solid var(--main-color);outline-offset:2px}
button.mk-filters__reset{width:100%;border:0;background:none;font-family:inherit;cursor:pointer}
@media (min-width:701px){
  [data-mk-sub]:not(.is-all) .mk-chip--more{display:none}
  .mk-chip--btn{border:0;background:var(--mk-soft);color:var(--accent-color)!important;font-family:inherit;font-weight:600;cursor:pointer}
}
@media (max-width:700px){
  .mk-chips--sel{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0}
}
@media (min-width:981px){
  /* на ПК значение применяется сразу — кнопка «Показать товары» и подвал шторки не нужны */
  .mk-filters__foot{display:none}
}
@media (max-width:980px){
  .mk-fopt{min-height:44px}
  .mk-fopt input{width:20px;height:20px}
}