/* Start:/local/templates/redesign_nb/css/slick.css?17914973601895*/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* End */


/* Start:/local/templates/redesign_nb/dist/app.css?179149736031634*/
@font-face{font-display:swap;font-family:Ruberoid;font-style:normal;font-weight:450;src:url(/local/templates/redesign_nb/dist/../fonts/Ruberoid-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Ruberoid;font-style:normal;font-weight:600;src:url(/local/templates/redesign_nb/dist/../fonts/Ruberoid-SemiBold.woff2) format("woff2")}@font-face{font-display:swap;font-family:Ruberoid;font-style:normal;font-weight:700;src:url(/local/templates/redesign_nb/dist/../fonts/Ruberoid-Bold.woff2) format("woff2")}@font-face{font-display:swap;font-family:Segoe UI;font-style:normal;font-weight:400;src:local("Segoe UI"),url(/local/templates/redesign_nb/dist/../fonts/SegoeUI-Regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Segoe UI;font-style:normal;font-weight:600;src:local("Segoe UI Semibold"),local("SegoeUI-SemiBold"),url(/local/templates/redesign_nb/dist/../fonts/SegoeUI-SemiBold.woff2) format("woff2")}@font-face{font-display:swap;font-family:Segoe UI;font-style:normal;font-weight:700;src:local("Segoe UI Bold"),local("SegoeUI-Bold"),url(/local/templates/redesign_nb/dist/../fonts/SegoeUI-Bold.woff2) format("woff2")}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:url(/local/templates/redesign_nb/dist/../fonts/Montserrat-Regular-cyrillic.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:400;src:url(/local/templates/redesign_nb/dist/../fonts/Montserrat-Regular-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:600;src:url(/local/templates/redesign_nb/dist/../fonts/Montserrat-SemiBold-cyrillic.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:Montserrat;font-style:normal;font-weight:600;src:url(/local/templates/redesign_nb/dist/../fonts/Montserrat-SemiBold-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:400;src:url(/local/templates/redesign_nb/dist/../fonts/Inter-Regular-cyrillic.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:400;src:url(/local/templates/redesign_nb/dist/../fonts/Inter-Regular-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}*,:after,:before{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}body{-webkit-font-smoothing:antialiased;background-color:#fff;color:#000;font-family:Ruberoid,Helvetica Neue,Arial,Segoe UI,sans-serif;font-weight:400;line-height:1.5;min-height:100vh}img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{color:inherit;font:inherit}button{background:none;border:none;cursor:pointer;padding:0}a{color:inherit;text-decoration:none}ol,ul{list-style:none;margin:0;padding:0}:where(:focus-visible){outline:2px solid currentColor;outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}body{--topbar-h:30px;display:flex;flex-direction:column}@media (max-width:1023.98px){body{--topbar-h:20px}}.main--no-topbar,body.is-no-topbar{--topbar-h:0px}.main{flex:1 0 auto;padding-top:calc(var(--topbar-h) + 60px)}.main--flush{padding-top:var(--topbar-h)}body.is-menu-open,body.is-modal-open{overflow:hidden}@media (max-width:1023.98px){.main{padding-top:calc(var(--topbar-h) + 50px)}.main--flush{padding-top:var(--topbar-h)}}.topbar{background-color:#000;color:#fff;font-size:12px;font-weight:450;height:30px;inset:0 0 auto 0;line-height:normal;position:fixed;z-index:100}.topbar__item{align-items:center;display:flex;inset:0;justify-content:center;opacity:0;padding-inline:40px;position:absolute;text-align:center;transition:opacity .6s ease,visibility .6s ease;visibility:hidden}.topbar__item.is-active{opacity:1;visibility:visible}.topbar__item a{color:inherit}.topbar__item a:hover{text-decoration:underline;text-underline-position:from-font}.topbar__text{padding-inline:28px}.topbar__close{align-items:center;color:inherit;display:flex;height:20px;justify-content:center;opacity:.8;position:absolute;right:40px;top:50%;transform:translateY(-50%);transition:opacity .2s ease;width:20px}.topbar__close:hover{opacity:1}.topbar__close-icon{fill:none;stroke:currentColor;stroke-width:1.5;display:block;height:9px;width:9px}@media (max-width:1023.98px){.topbar{font-family:Inter,-apple-system,Arial,sans-serif;font-size:9px;font-weight:400;height:20px}.topbar__item{padding-inline:20px}.topbar__close{height:16px;right:20px;width:16px}.topbar__close-icon{height:8px;width:8px}}@media (prefers-reduced-motion:reduce){.topbar__item{transition:none}}.header{align-items:center;background-color:#fff;color:#000;display:flex;height:60px;inset:var(--topbar-h) 0 auto 0;position:fixed;transition:color .3s ease,background-color .3s ease;z-index:100}.header__inner{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto 1fr;padding-inline:40px;width:100%}.header__nav-left{justify-self:start}.header__nav-right{align-items:center;display:flex;gap:25px;justify-self:end}.header__logo{align-items:center;color:inherit;display:inline-flex;justify-self:center}.header__logo svg{fill:currentColor;display:block;height:18px;width:auto}.header__action,.header__menu-btn{color:inherit;font-size:12px;font-weight:450;line-height:normal;text-transform:uppercase}.header__action:hover{text-decoration:underline;text-underline-position:from-font}.header__menu-btn{align-items:center;display:inline-flex;gap:10px}.header__menu-btn:hover span{text-decoration:underline;text-underline-position:from-font}.header__menu-icon{color:inherit;height:17px;width:16px}.header__count{font-variant-numeric:tabular-nums}.header--transparent{background-color:transparent;color:#fff}.header--transparent:hover,body.is-menu-closing .header--transparent,body.is-menu-open .header--transparent{background-color:#fff;color:#000}body.is-menu-closing .header--transparent{transition-delay:.5s}@media (prefers-reduced-motion:reduce){.header{transition:none}}.header__nav-left{align-items:center;display:flex;gap:16px}.header__action--search-mobile,.header__action-icon,.header__menu-icon--close,.header__menu-icon--mobile{display:none}.header__action--cart{align-items:center;display:inline-flex;gap:4px}@media (max-width:1023.98px){.header{height:50px;top:var(--topbar-h)}.header__inner{gap:8px;padding-left:10px;padding-right:15px}.header__nav-left{gap:0}.header__nav-right{gap:8px}.header__count{font-size:10px}.header__menu-icon{display:none}.header__menu-icon--mobile{display:block;height:24px;width:24px}.header__menu-btn span,body.is-menu-open .header__menu-icon--mobile{display:none}body.is-menu-open .header__menu-icon--close{display:block;height:24px;width:24px}.header__action--search,.header__action--wishlist{display:none}.header__action--search-mobile{display:inline-flex}.header__action-icon{display:block;height:24px;width:24px}.header__action-icon--cart{height:12px;width:13px}.header__action-label{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.header__logo svg{height:15px}}.footer{background-color:#000;color:#fff;flex-shrink:0;padding-block:40px}.footer__inner{padding-inline:40px;width:100%}.footer__top{display:grid;gap:60px;grid-template-columns:2fr 1fr 1fr;padding-bottom:56px}.footer__subscribe-title{font-size:12px;font-weight:400;letter-spacing:.04em;margin-bottom:16px;text-transform:uppercase}.footer__subscribe-text{color:hsla(0,0%,100%,.7);font-size:12px;margin-bottom:26px;max-width:46ch}.footer__form{display:flex;gap:10px;margin-bottom:22px;max-width:520px}.footer__form-input{background:#fff;border:.8px solid #fff;color:#000;flex:1 1 auto;font-size:12px;height:45px;min-width:0;padding-inline:15px}.footer__form-input::-moz-placeholder{color:hsla(0,0%,46%,.4)}.footer__form-input::placeholder{color:hsla(0,0%,46%,.4)}.footer__form-input:focus-visible{border-color:rgba(0,0,0,.35);outline:none}.footer__form-btn{background-color:#fff;border:.8px solid #fff;color:rgba(30,30,30,.4);flex:0 0 auto;font-size:12px;height:45px;padding-inline:15px;transition:color .2s ease,opacity .2s ease}.footer__form-btn:hover{opacity:.85}.footer__form-btn.is-ready{color:#1e1e1e}.footer__subscribe-note{color:hsla(0,0%,100%,.7);font-size:12px;margin-bottom:8px}.footer__policy{color:#fff;text-decoration:underline;text-underline-position:from-font;transition:opacity .2s ease}.footer__policy:hover{opacity:.7}.footer__lang{color:#fff;display:block;font-size:14px;font-weight:450;margin-top:26px;text-decoration:underline;text-underline-position:from-font}.footer__col-toggle{align-items:center;color:inherit;cursor:default;display:flex;gap:10px;justify-content:space-between;margin-bottom:22px;text-align:left;width:100%}.footer__col-title{font-size:14px;font-weight:450;text-transform:uppercase}.footer__col-chevron{display:none}.footer__menu{display:grid;gap:14px}.footer__menu-link{color:#fff;font-size:14px;font-weight:450;text-transform:uppercase}.footer__menu-link:hover{text-decoration:underline;text-underline-position:from-font}.footer__middle{display:flex;gap:40px;justify-content:space-between;padding-block:25px}.footer__connect-title{color:#fff;font-size:12px;font-weight:450;margin-bottom:18px}.footer__connect--support{text-align:right}.footer__icons{display:flex;gap:25px}.footer__connect--support .footer__icons{justify-content:flex-end}.footer__icon-link{color:#fff;display:inline-flex;transition:opacity .2s ease}.footer__icon-link:hover{opacity:.65}.footer__icon{height:20px;width:20px}.footer__bottom{border-top:.5px solid #757575;border-top:1px solid hsla(0,0%,100%,.15);gap:30px;justify-content:space-between;padding-top:30px}.footer__bottom,.footer__copy{align-items:center;display:flex}.footer__copy{color:#fff;flex-wrap:wrap;font-size:12px;font-weight:450;gap:15px}.footer__link{color:#fff}.footer__link:hover{text-decoration:underline;text-underline-position:from-font}.footer__payments{align-items:center;display:flex;flex-wrap:wrap;gap:25px}.footer__pay{display:block;height:30px;width:auto}.footer__lang--mobile{display:none}@media (max-width:1023.98px){.footer{padding-block:40px}.footer__inner{padding-inline:20px}.footer__top{gap:0;grid-template-columns:1fr;padding-bottom:0}.footer__subscribe{margin-bottom:30px}.footer__subscribe-title{font-size:14px;margin-bottom:14px}.footer__subscribe-text{margin-bottom:36px}.footer__form{flex-direction:column;gap:10px;margin-bottom:38px;max-width:none}.footer__form-input{background-color:#fff;border:none;color:#000;height:45px}.footer__form-input::-moz-placeholder{color:rgba(0,0,0,.45)}.footer__form-input::placeholder{color:rgba(0,0,0,.45)}.footer__form-btn{background-color:#79747e;border:none;color:#fff;height:45px;transition:color .2s ease,background-color .2s ease}.footer__form-btn.is-ready{background-color:#fff;color:#1e1e1e}.footer__col{border-bottom:1px solid hsla(0,0%,100%,.22)}.footer__subscribe+.footer__col{border-top:1px solid hsla(0,0%,100%,.22)}.footer__col-toggle{cursor:pointer;margin-bottom:0;min-height:50px}.footer__col-chevron{display:block;flex-shrink:0;height:20px;transition:transform .3s ease;width:20px}.footer__col.is-open .footer__col-chevron{transform:rotate(180deg)}.footer__col-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s ease}.footer__col.is-open .footer__col-body{grid-template-rows:1fr}.footer__col-body .footer__menu{min-height:0;padding:0}.footer__col-body .footer__menu>li:first-child{padding-top:5px}.footer__col-body .footer__menu>li:last-child{padding-bottom:25px}.footer__menu{gap:10px}.footer__menu-link{text-transform:none}.footer__middle{align-items:flex-start;flex-direction:column;gap:40px;padding-block:50px 0}.footer__connect--support{text-align:left}.footer__connect--support .footer__icons{justify-content:flex-start}.footer__connect-title{margin-bottom:16px}.footer__icons{gap:25px}.footer__icon{height:20px;width:20px}.footer__lang{display:none}.footer__lang--mobile{display:block;margin-top:50px}.footer__bottom{align-items:flex-start;flex-direction:column;gap:26px;margin-top:30px}.footer__bottom .footer__link{display:none}.footer__payments{gap:10px}.footer__pay{height:13px;width:auto}}.hero{background-color:#1c1c1c;color:#fff;height:calc(100vh - var(--topbar-h));min-height:560px;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hero__slide{inset:0;opacity:0;position:absolute;transition:opacity .6s ease,visibility .6s ease;visibility:hidden}.hero__slide.is-active{opacity:1;visibility:visible}.hero__slide picture{inset:0;position:absolute}.hero__img{height:100%;-o-object-fit:cover;object-fit:cover;pointer-events:none;width:100%}.hero__content{align-items:center;display:flex;flex-direction:column;gap:33px;inset:0;justify-content:flex-end;padding-bottom:331px;padding-inline:40px;position:absolute;text-align:center}.hero__title{font-size:60px;font-weight:600;line-height:normal;text-transform:uppercase}.hero__link,.hero__title{font-family:Montserrat,Helvetica Neue,Arial,sans-serif}.hero__link{color:inherit;font-size:28px;text-decoration:underline;text-underline-position:from-font;transition:opacity .2s ease}.hero__link:hover{opacity:.7}.hero__arrow{bottom:385px;color:#fff;font-size:14px;opacity:.5;position:absolute;top:auto;transition:opacity .2s ease;z-index:2}.hero__arrow:focus-visible,.hero__arrow:hover{opacity:1}.hero__arrow--prev{left:84px}.hero__arrow--next{right:97px}.hero__progress{bottom:26px;display:flex;gap:4.5px;left:50%;position:absolute;transform:translateX(-50%);z-index:2}.hero__bar{background-color:hsla(0,0%,100%,.6);border-radius:2px;cursor:pointer;height:4px;overflow:hidden;position:relative;width:52px}.hero__bar-fill{background-color:#fff;border-radius:2px;inset:0;position:absolute;transform:scaleX(0);transform-origin:left;will-change:transform}@media (max-width:1023.98px){.hero{height:calc(100vh - var(--topbar-h));height:calc(100svh - var(--topbar-h));min-height:480px}.hero__content{gap:33px;padding-inline:20px}.hero__title{font-size:24px;font-weight:450}.hero__link,.hero__title{font-family:Ruberoid,Helvetica Neue,Arial,Segoe UI,sans-serif}.hero__link{font-size:14px}.hero__arrow{display:none}}@media (prefers-reduced-motion:reduce){.hero__slide{transition:none}}.categories{padding:20px 25px}.categories__inner{display:grid;gap:18px;grid-template-columns:1fr 1fr}.categories__item{aspect-ratio:722/670;color:#fff;display:block;overflow:hidden;position:relative}.categories__item picture{inset:0;position:absolute}.categories__img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.categories__label{bottom:50px;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:24px;font-weight:600;left:50px;line-height:normal;position:absolute;text-transform:uppercase}@media (max-width:1023.98px){.categories{padding:15px}.categories__inner{gap:6px;grid-template-columns:1fr}.categories__item{aspect-ratio:auto}.categories__item picture{position:static}.categories__img{height:auto}.categories__label{bottom:37px;font-size:15px;left:27px}}.banner{background-color:#1c1c1c;color:#fff;height:calc(100vh - var(--topbar-h));min-height:560px;overflow:hidden;position:relative}.banner picture{inset:0;position:absolute}.banner__img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.banner__content{align-items:center;display:flex;flex-direction:column;gap:33px;inset:0;justify-content:flex-end;padding-bottom:311px;padding-inline:40px;position:absolute;text-align:center}.banner__title{font-size:60px;font-weight:600;line-height:normal;text-transform:uppercase}.banner__link,.banner__title{font-family:Montserrat,Helvetica Neue,Arial,sans-serif}.banner__link{color:inherit;font-size:28px;text-decoration:underline;text-underline-position:from-font;transition:opacity .2s ease}.banner__link:hover{opacity:.7}@media (max-width:1023.98px){.banner{height:calc(100vh - var(--topbar-h));height:calc(100svh - var(--topbar-h));min-height:480px}.banner__content{gap:33px;padding-inline:20px;padding-bottom:331px}.banner__title{font-size:24px;font-weight:450}.banner__link,.banner__title{font-family:Ruberoid,Helvetica Neue,Arial,Segoe UI,sans-serif}.banner__link{font-size:14px}}.products{overflow:hidden;padding-block:50px}.products__head{align-items:center;display:flex;justify-content:space-between;margin-bottom:30px;padding-inline:40px}.products__title{color:#2f2f2f;font-size:16px;font-weight:450;line-height:normal;text-transform:uppercase}.products__nav{display:flex;gap:10px}.products__arrow{align-items:center;color:#000;display:flex;height:24px;justify-content:center;transition:opacity .2s ease;width:16px}.products__arrow[disabled]{opacity:.3;pointer-events:none}.products__arrow-icon{fill:none;display:block}.products__track{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding-left:40px;scroll-padding-left:40px;scroll-snap-type:x mandatory;scrollbar-width:none}.products__track::-webkit-scrollbar{display:none}.product-card{flex:0 0 auto;min-width:0;scroll-snap-align:start;width:345px}.product-card__media{position:relative}.product-card__photo{display:block}.product-card__img{-webkit-user-drag:none;aspect-ratio:345/517;display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__action,.product-card__fav{align-items:center;color:#2f2f2f;display:flex;height:50px;justify-content:center;position:absolute;width:50px}.product-card__fav{right:0;top:0}.product-card__action{bottom:0;left:0}.product-card__icon-box{align-items:center;background-color:#fff;display:flex;height:25px;justify-content:center;width:25px}.product-card__fav-icon{fill:none;display:block;transition:fill .2s ease}.product-card__fav.is-active .product-card__fav-icon{fill:currentColor}.product-card__plus-icon{fill:none;display:block}.product-card__info{align-items:flex-start;display:flex;gap:10px;justify-content:space-between;margin-top:5px}.product-card__text{display:flex;flex:1 1 auto;flex-direction:column;font-size:13px;gap:2px;line-height:normal;min-width:0}.product-card__name{color:#000;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-card__price{color:#000}.product-card__badge{color:#489e58}.product-card__colors{align-items:center;display:flex;flex:0 0 auto;gap:5px;padding-top:2px}.product-card__color{display:block;height:11px;position:relative;width:11px}.product-card__color img{border-radius:50%;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.product-card__color.is-active:after{background-color:#000;content:"";height:1px;inset:auto 0 -3px;position:absolute}.product-card__colors-more,.product-card__colors-text{color:#000;font-size:13px;white-space:nowrap}.product-card__colors-text{flex:0 0 auto;padding-top:2px}.products--plain .products__title{text-align:center}.products--plain .products__track{padding-right:40px;scroll-padding-right:40px}.products--plain .product-photo{flex:0 0 auto;scroll-snap-align:start;width:167px}.products--plain .product-photo img{aspect-ratio:350/522;display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}@media (hover:hover) and (pointer:fine){.products__track{cursor:grab}.products__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}}@media (max-width:1023.98px){.products{padding-block:15px 45px}.products__head{margin-bottom:15px;padding-inline:20px}.products__track{gap:8px;padding-left:20px;scroll-padding-left:20px}.product-card{width:165px}.product-card__action,.product-card__colors,.product-card__colors-text,.product-card__fav{display:none}.product-card__text{font-size:12px}.products--plain .products__track{padding-right:0}.products--plain .product-photo{width:165px}}.field+.field{margin-top:22px}.field__label{color:rgba(0,0,0,.75);display:block;font-size:14px;margin-bottom:10px}.select{position:relative}.select__control{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-color:#fff;border:.8px solid #c2c2c2;border-radius:0;color:#000;cursor:pointer;font-size:14px;height:45px;padding:0 40px 0 15px;transition:border-color .2s ease;width:100%}.select__control:hover{border-color:rgba(0,0,0,.45)}.select__control:focus-visible{border-color:#000;outline:none}.select__icon{color:#000;height:6px;pointer-events:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);width:11px}.search{display:flex;inset:0;justify-content:flex-end;position:fixed;z-index:300}.search[hidden]{display:flex;pointer-events:none;transition:visibility 0s linear .5s;visibility:hidden}.search[hidden] .search__panel{transform:translateX(100%)}.search[hidden] .search__overlay{opacity:0}.search__overlay{background-color:rgba(0,0,0,.45);cursor:pointer;inset:0;position:absolute;transition:opacity .5s cubic-bezier(.4,0,.2,1)}.search__panel{align-items:center;background-color:#fff;display:flex;flex-direction:column;height:100%;margin-left:auto;max-width:100%;overflow-y:auto;padding:50px 60px;position:relative;transform:translateX(0);transition:transform .5s cubic-bezier(.4,0,.2,1);visibility:visible;width:540px}.search__panel:focus{outline:none}.search__head{gap:25px;max-width:100%;padding-bottom:15px;width:420px}.search__field,.search__head{align-items:center;display:flex}.search__field{border-bottom:1px solid #000;flex:1 1 auto;height:43px;min-width:0;position:relative}.search__icon{fill:none;color:#000;flex:0 0 auto;height:24px;margin-right:15px;width:23px}.search__input{background:transparent;border:none;color:#000;flex:1 1 auto;font-family:Ruberoid,Helvetica Neue,Arial,Segoe UI,sans-serif;font-size:12px;height:100%;min-width:0;text-transform:uppercase}.search__input::-moz-placeholder{color:#000;text-transform:uppercase}.search__input::placeholder{color:#000;text-transform:uppercase}.search__input:focus-visible{outline:none}.search__cancel{color:#000;flex:0 0 auto;font-size:12px;white-space:nowrap}.search__cancel:hover{text-decoration:underline;text-underline-position:from-font}.search__history{align-items:flex-start;display:flex;flex-direction:column;gap:25px;padding-bottom:25px;width:100%}.search__history-title{color:#000;font-size:10px;text-transform:uppercase}.search__history-list{align-items:flex-start;display:flex;flex-direction:column;gap:10px;width:100%}.search__history-item{color:#000;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:12px;font-weight:600;text-align:left}.search__history-clear,.search__history-item:hover{text-decoration:underline;text-underline-position:from-font}.search__history-clear{color:#000;font-size:12px}.search__history[hidden]{display:none}.search__results{max-width:100%;padding-bottom:25px;width:420px}.search__results[hidden]{display:none}.search__results-list{display:flex;flex-direction:column}.search__results-item{border-bottom:1px solid rgba(0,0,0,.12);color:#000;display:block;font-family:Ruberoid,Helvetica Neue,Arial,Segoe UI,sans-serif;font-size:12px;padding:12px 0;text-align:left;width:100%}.search__results-item:first-child{border-top:1px solid rgba(0,0,0,.12)}.search__results-item b{font-weight:600}@media (hover:hover){.search__results-item:hover{color:#8c8c8c}}.search__results-empty{color:#8c8c8c;font-family:Ruberoid,Helvetica Neue,Arial,Segoe UI,sans-serif;font-size:12px;padding:12px 0}.search__results-empty[hidden]{display:none}.search .products{overflow:visible;padding-block:20px 25px;width:100%}.search .products__head{margin-bottom:25px;padding-inline:0}.search .products__title{font-size:14px}.search .products__track{gap:7px;padding-left:0;scroll-padding-left:0}.search .product-card{width:151px}.search .product-card__img{aspect-ratio:231/345}.search .product-card__text{font-size:10px}.search .product-card__colors,.search .product-card__colors-text{display:none}.modal{align-items:center;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;transition:opacity .2s ease ease;z-index:300}.modal[hidden]{display:none;opacity:0;transition:opacity .2s ease ease,display allow-discrete .2s ease}.modal__overlay{animation:modal-fade ease .2s ease;background-color:rgba(0,0,0,.45);inset:0;position:absolute}.modal__panel{animation:modal-in ease .3s ease;background-color:#fff;color:#000;max-height:calc(100vh - 40px);max-width:440px;overflow-y:auto;padding:40px;position:relative;width:100%}.modal__panel:focus{outline:none}.modal__header{align-items:baseline;display:flex;gap:16px;justify-content:space-between;margin-bottom:36px}.modal__title{font-size:20px;font-weight:400;letter-spacing:.01em}.modal__close{color:#000;flex-shrink:0;font-size:12px;text-decoration:underline;text-underline-position:from-font;transition:opacity .2s ease}.modal__close:hover{opacity:.6}.modal__note{color:rgba(0,0,0,.6);font-size:14px;line-height:1.6;margin-top:22px}.modal__note a{color:#000;text-decoration:underline;text-underline-position:from-font}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.modal__overlay,.modal__panel{animation:none}.modal{transition:none}.modal__overlay,.modal__panel{animation:none}}.menu{--menu-panel-w:750px;inset:calc(var(--topbar-h) + 60px) 0 0 0;position:fixed;z-index:200}.menu[hidden]{display:block;pointer-events:none;transition:visibility 0s linear .5s;visibility:hidden}.menu[hidden] .menu__panel{transform:translateX(-100%)}.menu[hidden] .menu__overlay{opacity:0}.menu__overlay{background-color:rgba(0,0,0,.45);cursor:pointer;inset:0;position:absolute;transition:opacity .5s cubic-bezier(.4,0,.2,1)}.menu__panel{background-color:#fff;color:#000;height:100%;max-width:100%;position:relative;transform:translateX(0);transition:transform .5s cubic-bezier(.4,0,.2,1);visibility:visible;width:var(--menu-panel-w)}.menu__panel:focus{outline:none}.menu__inner{-moz-column-gap:30px;column-gap:30px;display:grid;grid-template-columns:250px 1fr 158px;height:100%;padding:60px 40px 40px}.menu__nav{display:flex;flex-direction:column;min-height:0}.menu__sub{min-height:0;overflow-y:auto;scrollbar-width:none}.menu__sub::-webkit-scrollbar{display:none}.menu__aside{min-height:0;overflow-y:auto;scrollbar-width:none}.menu__aside::-webkit-scrollbar{display:none}.menu__aside-title{color:#8c8c8c;font-size:20px;font-weight:400}.menu__aside-link{color:#000;display:inline-block;font-size:12px;margin-top:20px;text-decoration:underline;text-underline-position:from-font;transition:color .2s ease}@media (hover:hover){.menu__aside:hover .menu__aside-link{color:#8c8c8c}.menu__aside:hover .menu__aside-link:hover{color:#000}}.menu__banners-set[hidden]{display:none}.menu__banners-set .menu__aside-link{margin-bottom:28px}.menu__close{display:none}.menu-nav__item{margin-top:10px}.menu-nav__item:first-child{margin-top:0}.menu-nav__item--mt-3{margin-top:3px}.menu-nav__item--mt-6{margin-top:6px}.menu-nav__item--mt-9{margin-top:9px}.menu-nav__item--mt-12{margin-top:12px}.menu-nav__item--mt-15{margin-top:15px}.menu-nav__item--mt-18{margin-top:18px}.menu-nav__item--mt-21{margin-top:21px}.menu-nav__item--mt-24{margin-top:24px}.menu-nav__item--mt-27{margin-top:27px}.menu-nav__item--mt-30{margin-top:30px}.menu-nav__item--mt-33{margin-top:33px}.menu-nav__item--mt-36{margin-top:36px}.menu-nav__item--mt-39{margin-top:39px}.menu-nav__item--mt-42{margin-top:42px}.menu-nav__item--mt-45{margin-top:45px}.menu-nav__item--mt-48{margin-top:48px}.menu-nav__item--mt-51{margin-top:51px}.menu-nav__item--mt-54{margin-top:54px}.menu-nav__item--mt-57{margin-top:57px}.menu-nav__item--mt-60{margin-top:60px}.menu-nav__item--mt-45{margin-top:40px}.menu-nav__link{align-items:center;color:#8c8c8c;display:inline-flex;font-size:14px;gap:20px;line-height:24px;transition:color .2s ease,gap .3s ease}.menu-nav__link.is-active,.menu-nav__link:focus-visible,.menu-nav__link:hover{color:#000;gap:40px}.menu-nav__arrow{color:inherit;flex-shrink:0;height:7px;width:5px}.menu-extra{display:grid;gap:0;justify-items:start;margin-top:auto;padding-top:40px}.menu-extra__lang,.menu-extra__link{color:#000;font-size:14px;line-height:24px;transition:color .2s ease}.menu-extra__lang{text-decoration:underline;text-underline-position:from-font}@media (hover:hover){.menu-extra:hover .menu-extra__lang,.menu-extra:hover .menu-extra__link{color:#8c8c8c}.menu-extra .menu-extra__lang:hover,.menu-extra .menu-extra__link:hover{color:#000}}.menu-sub[hidden]{display:none}.menu-sub__item{margin-top:10px}.menu-sub__item:first-child{margin-top:0}.menu-sub__link{color:#000;font-size:14px;line-height:1.2;transition:color .2s ease}@media (hover:hover){.menu-sub:hover .menu-sub__link{color:#8c8c8c}.menu-sub .menu-sub__link:hover{color:#000}}.menu-banner{display:block}.menu-banner+.menu-banner{margin-top:30px}.menu-banner__img{aspect-ratio:158/237;display:block;-o-object-fit:cover;object-fit:cover;width:100%}.menu-banner__caption{color:#000;display:block;font-size:12px;margin-top:17px;transition:color .2s ease}@media (hover:hover){.menu__aside:hover .menu-banner__caption{color:#8c8c8c}.menu-banner:focus-visible .menu-banner__caption,.menu-banner:hover .menu-banner__caption{color:#000}}.menu-banners{display:none}@media (prefers-reduced-motion:reduce){.menu,.menu__overlay,.menu__panel{animation:none;transition:none}}.menu-sub__head{display:none}.menu-sub__head+.menu-sub__item{margin-top:0}@media (max-width:1023.98px){.menu{top:calc(var(--topbar-h) + 50px)}.menu__overlay{display:none}.menu__panel{width:100%}.menu__inner{display:block;height:100%;overflow:hidden;padding:0;position:relative}.menu__nav{height:100%;overflow-y:auto;padding:60px 15px 40px;transition:transform .3s ease,opacity .3s ease}.menu--sub-open .menu__nav{opacity:0;pointer-events:none;transform:translateX(-12%)}.menu-nav__item{margin-top:15px}.menu-nav__item:first-child{margin-top:0}.menu-nav__item--mt-45{margin-top:35px}.menu-nav__link{color:#1e1e1e;font-size:14px;gap:20px;line-height:24px}.menu-nav__arrow{height:9px;width:6px}.menu-extra{gap:10px;padding-top:48px}.menu-extra__lang,.menu-extra__link{font-size:12px}.menu__sub{background-color:#fff;inset:0;overflow-y:auto;padding:60px 15px 40px;position:absolute;transform:translateX(100%);transition:transform .3s ease,visibility .3s ease;visibility:hidden;z-index:2}.menu--sub-open .menu__sub{transform:none;visibility:visible}.menu-sub__head{align-items:flex-start;display:flex;flex-direction:column-reverse;gap:50px;margin-bottom:25px}.menu-sub__head-title{font-size:20px;font-weight:600;line-height:normal}.menu-sub__back{color:#757575;font-size:16px}.menu-sub__item{margin-top:10px}.menu__aside,.menu__close{display:none}.menu-banners{display:block;margin-top:40px}.menu-banners__track{display:flex;gap:10px;margin-inline:-15px;overflow-x:auto;overscroll-behavior-x:contain;padding-inline:15px;scroll-padding-inline-start:15px;scroll-snap-type:x mandatory;scrollbar-width:none}.menu-banners__track::-webkit-scrollbar{display:none}.menu-banners__item{display:block;flex:0 0 76%;scroll-snap-align:start}.menu-banners__item:only-child{flex-basis:100%}.menu-banners__img{aspect-ratio:158/237;display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}.menu-banners__caption{color:#1e1e1e;display:block;font-size:14px;margin-top:10px}}

/* End */


/* Start:/local/templates/redesign_nb/css/nb-sandbox.css?1793278444242422*/
/* Заплатки песочницы redesign_nb — то, чего новому шаблону не хватает под СТАРЫЙ контент.
   Каждая правка объяснена: снимать по мере того, как разработчик переделает блок.

   1. Баннеры главной («Зараз у тренді», «Нагороди», отзывы) — разметка старой темы.
      В теме main их держала её же вёрстка; здесь этих правил нет, и на телефоне
      блок вылезал за экран: layout viewport становился 700px вместо 390, отчего
      шапка (position:fixed; width:100%) растягивалась на 700 и уезжала вправо.
      Замер: scrollWidth 700 → 390 после этих трёх правил. */

/* §F — РАМКИ ФОКУСА НЕТ НИГДЕ (в НАЧАЛЕ файла: конец файла дописывают другие ветки дева) (смена 108, Val 13.10 фото «Підібрати розмір»: «вот такие выделения … надо убрать вообще с
   всего сайта»). Чёрную рамку (outline) рисовали десяток правил :focus-visible — тема и бандлы страниц (каталог, карточка,
   главная); одно правило здесь (файл грузится на каждой странице) снимает её поверх всех. Фокус как таковой остаётся:
   возврат фокуса на нажатое после шторки (задача 73) работает, поля ввода показывают фокус своей рамкой поля.
   ⚠ С клавиатуры рамки тоже нет — так решил Val («вообще»). Лом пробы: html.nb-lom-focus-ring — рамки как были.
   Проба: tools/qa_no_focus_ring.py. */
html:not(.nb-lom-focus-ring) :focus,
html:not(.nb-lom-focus-ring) :focus-visible { outline: none !important; }

@media (max-width: 992px) {
    .banners .top-banner.full {
        /* приём «во всю ширину окна» через 100vw + отрицательные margin: на мобиле
           даёт переполнение, потому что 100vw считается от раздутого вьюпорта */
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .banners img {
        max-width: 100% !important;
        height: auto;
    }

    /* ряд «Нагороди»: flex-контейнер с картинками 500×500 — именно он расширял вьюпорт */
    .banners .image-container {
        max-width: 100% !important;
        overflow: hidden;
    }
}

/* 2. Столкновение классов: в новом шаблоне `.modal` — это полноэкранный слой,
      который прячется только атрибутом [hidden] (его модалки и наши шторки карточки
      помечены data-component="modal"). Старые bootstrap-модалки темы (#reviewpopup,
      #myModal и т. п.) атрибута не имеют — и правило нового шаблона разворачивало их
      на весь экран поверх страницы. Кликнуть по карточке было невозможно: пробы падали
      на «#reviewpopup intercepts pointer events».
      Прячем ровно чужие: без !important, чтобы bootstrap мог открыть их инлайновым display. */
.modal:not([data-component="modal"]):not([data-component="pdp-modal"]) {
    display: none;
}

/* 3. Шапка ведёт себя как в прототипе: топбар уезжает при прокрутке, шапка липнет к верху.
      У Дахно обе полосы `position:fixed` — акционная полоса висит на экране всегда.
      В прототипе (и в утверждённом макете) топбар лежит В ПОТОКЕ и уезжает вместе со
      страницей, а шапка — sticky (Val 13.09: «хочу, когда свайпаем вниз, чтобы он уходил
      наверх, как у нас в прототипе было продумано»).
      Раз обе полосы теперь в потоке, место под них резервировать не нужно: гасим и его
      расчёт, и наше прежнее возвращение отступа карточке. */
.topbar {
    /* именно relative, а не static: сообщения внутри полосы позиционированы абсолютно
       (они лежат стопкой и сменяют друг друга фейдом). Со static они считались от
       страницы, растягивались на весь экран — текст прилипал к верху, а крестик уезжал
       на середину экрана и становился не виден (Val 13.09). */
    position: relative;
}

.header {
    position: sticky;
    inset: auto 0 auto 0;
    top: 0;
}

.main,
.nb-is-pdp:not(#nb-0) > body main.main,
body.nb-pdp-page main.main {
    padding-top: 0;
}

:root {
    /* карточка читает --nb-hdr для липкой панели покупки и зума: теперь это только
       высота самой шапки — акционная полоса к этому моменту уже уехала */
    --nb-hdr: 60px;
}

@media (max-width: 1023.98px) {
    :root {
        --nb-hdr: 50px;
    }
}

/* 4. Шторки карточки на телефоне должны быть во всю ширину (нижний лист).
      Правило нового шаблона `.modal{padding:20px}` отодвигало их от краёв — попап
      выглядел карточкой по центру (Val, 13.09: «попап не на всю ширину»).
      Наши стили задают отступ только с 993px, поэтому гасим чужой ровно ниже этого. */
@media (max-width: 992px) {
    #product_detail.nb-pdp .modal,
    /* быстрая покупка и «образ целиком» живут в своих хостах ВНЕ #product_detail
       (nb-quick-buy-host, nb-look-host) — по id карточки их не поймать,
       ловим по классам самих шторок (Val 13.09: «по быстрой покупке тоже не на всю ширину») */
    .modal.modal--drawer,
    .modal.modal--zoom,
    .modal.quick-buy {
        padding: 0;
    }
}

/* 5. Родные radio у размеров. В старой теме их прятало её же правило
      (`.product_list_size.one-color input{display:none}` в fix.css), в новом шаблоне такого
      нет — и рядом с каждым размером вылез кружок (Val 13.09: «у размеров остался радиобатон»).
      Прячем ровно внутри карточки: сами input'ы остаются в разметке, их читает обработчик темы. */
#product_detail.nb-pdp .size-list input,
#product_detail.nb-pdp .one-color input,
#product_detail.nb-pdp .product-summary__sizes input {
    display: none;
}

/* 6. Одна сетка с шапкой. В утверждённом прототипе контент карточки стоит на том же
      поле, что кнопка «Меню» и иконки: на 1440 кадр начинается на 37px, правый край
      колонки — на 37px от края экрана. У Дахно поле шапки 40px, а карточка шла во всю
      ширину (кадр от x=0, колонка вплотную к правому краю) — те самые «две сетки».
      Выравниваем по его полю. Телефон не трогаем: там кадр намеренно во всю ширину,
      а колонка сама отступает на 15px — как в прототипе. */
/*    ⚠ Val 05.10: «десктоп детальная, галерею давай вплотную к левому краю». Левое поле
      снято — кадры от x=0; правое (40) осталось, колонка покупки по-прежнему на линии иконок
      шапки. Сетка при этом прижата к краям (`justify-content: space-between` в scope.css),
      иначе на широком экране центровка снова отодвинула бы кадры от края. */
@media (min-width: 993px) {
    #product_detail.nb-pdp .product {
        padding-inline: 0 40px;
    }
}

/* 7. Подсказка «Будь ласка, виберіть розмір» показывалась всегда и добавляла 18px под кнопку.
      В старой теме её прячет fix.css (`.alert-size,.size-pr{display:none}`), а показывает
      её же скрипт инлайновым стилем, когда размер не выбран при попытке купить.
      Повторяем ровно это правило — без !important, иначе скрипт не сможет её открыть. */
#product_detail.nb-pdp .alert-size,
#product_detail.nb-pdp .size-alert,
#product_detail.nb-pdp .size-pr {
    display: none;
}

/* 8. Текст акционной полосы по центру и тонкий крестик.
      Содержимое полосы приходит из баннера («баннер под меню»), и в самом элементе лежит
      свой <style> с min-height:30px !important и line-height:30px. На телефоне полоса 20px —
      текст не помещался и вставал к верхнему краю. Баннер общий с боем, поэтому гасим его
      правила здесь, а не в элементе.
      Крестик у него рисуется иконкой из его спрайта и выглядит жирным — рисуем волосяной,
      как в шторках карточки (Val 13.09: «пусть он будет тоненьким»). */
.topbar .one-banner,
.topbar .banner_text,
.topbar .banner_text span {
    min-height: 0 !important;
    line-height: 1 !important;
}

.topbar .one-banner {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.topbar__close-icon {
    display: none;
}

.topbar__close::before,
.topbar__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 1px;
    background: currentColor;
}

.topbar__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.topbar__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 9. Крестик полосы — по правому краю корзины (Val 13.09).
      На десктопе правые края уже совпадают (1385), на телефоне крестик стоял на 5px левее:
      у шапки поле 15px, а у крестика 20px. Ровняем по полю шапки. */
@media (max-width: 1023.98px) {
    .topbar__close {
        right: 15px;
    }
}

/* 10. Панель меню открывается ровно под шапкой, без щели от уехавшей акционной полосы.
       Значение переменной считает js/nb-sandbox.js по фактической кромке шапки; запасной
       вариант — прежняя формула шаблона. */
.menu {
    top: var(--nb-menu-top, calc(var(--topbar-h) + 50px));
}

/* ⚠ 13.09, вечер: меню НА ВЕСЬ ЭКРАН откатано по слову Val — «меню верни как было, мне не
   нравится полный экранный размер и всякое то, будем по-другому как-то делать». Панель снова
   открывается окном под шапкой (правило .menu { top: var(--nb-menu-top…) } выше), и белой
   насквозь её тоже не делаем: в этом виде полупрозрачность темы не читается. */

@media (min-width: 1024px) {
    .menu {
        top: var(--nb-menu-top, calc(var(--topbar-h) + 60px));
    }
}

/* Липкая панель покупки при открытом меню ОСТАЁТСЯ на экране (Val 13.09: «не надо её убирать,
   пусть она остаётся, а меню открывается поверх»). Раньше здесь стояло display:none на
   body.is-menu-open — панель уезжала вниз ровно в момент жеста открытия меню.
   Перекрытия не будет и без пряток: замер 13.09 — у панели меню z-index 200, у панели покупки
   100 (--nb-z-chrome), обе position:fixed, так что меню ложится сверху само. */

/* 11. Подложка шапки — как у липкой панели покупки (Val 13.09: «хочу попробовать»).
       Те же значения, что в scope.css §9 у .nb-buybar: белый 94 % и размытие 8px, за счёт
       которого панель отделяется от контента без линии. Прозрачное состояние шапки на
       главной (header--transparent над hero) не трогаем. */
.header:not(.header--transparent) {
    background-color: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);   /* Safari/iOS: без префикса стекла нет */
}

/* 12. Панель меню — СПЛОШНОЙ белый. История тут в две строки, и вторая отменяет первую:
       Val 13.09: «давай в меню белую подложку попробуем сделать так же, как с хедером» — и
       панель получила стекло 94% + blur 8px;
       Val 17.09: «давай в шторке меню вообще уберём прозрачность. Когда мы свайпаем шторку
       меню, хедер становится полностью белый, плашка его и шторка меню тоже белая».
       Пробовали — не понравилось, вернулись к сплошному. */
.menu__panel {
    background-color: rgb(255 255 255);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;   /* Safari/iOS: без префикса стекла нет */
}

/* 12а. Пока шторка меню открывается, открыта и закрывается — шапка тоже СПЛОШНОЙ белый.
       Val 17.09: «у хедера должен произойти плавный переход с белого и потом плавный уход
       с белого».
       ⚠ Меняем ТОЛЬКО цвет фона, а размытие не трогаем. Причина прямая: `backdrop-filter`
       переключается скачком, плавного перехода из него не выжать. А `background-color` уже
       стоит в переходе шапки (240ms ease, §16), поэтому «плавно в белый и плавно обратно»
       получается само, без единой новой анимации. При фоне в 100% белого размытие под ним всё
       равно не видно — то есть визуально это и есть «полностью белый».
       ⚠ `header--transparent` (прозрачная шапка над hero на главной) не трогаем: там свои
       правила, и меню на главной открывается поверх картинки. */
body.is-menu-open .header:not(.header--transparent),
body.is-menu-closing .header:not(.header--transparent) {
    background-color: rgb(255 255 255);
}

/* ⚠ Подменю («Каталог») своей подложки НЕ имеет: оно лежит ПОВЕРХ панели, и две подложки
   по 94% складывались в непрозрачный белый — Val 13.09: «прозрачность в подменю: когда нажимаю
   на каталог, её тоже нужно добавить» (первый заход как раз и поставил ему свои 94%).
   Замер: при открытом подменю основной список гасится (opacity 0), так что сквозь прозрачное
   подменю видно ровно подложку панели — одну, а не две. */
.menu__sub {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;   /* Safari/iOS: без префикса стекла нет */
}

/* 13. Ленты во всём шаблоне не пружинят на краю (Val 13.09 про каталог: «если в каталоге есть
       какие-то слайдеры, они должны вести себя ровно так же, как в детальной»). В карточке товара
       это правило стоит на её рядах (scope.css §6); здесь — на лентах самого шаблона: стрічка
       категорий, ряды товаров, полоса фильтров. Гасит и резинку на краю, и передачу жеста
       странице — свайп вправо на начале ленты целиком достаётся меню. */
.products__track,
.category-strip__track,
[data-slider-track],
[data-cards-track],
.catalog-toolbar__scroll,
.filter-panel__scroll {
    overscroll-behavior-x: none;
}

/* 14. Быстрая покупка в КАТАЛОГЕ выглядит как в карточке товара (Val 13.09: «быстрая покупка в
       детальном товаре визуально отличается от быстрой покупки в каталоге… нужно использовать один
       компонент везде»). Компонент действительно один (#nb-quick-buy из прототипа), но собран он
       дважды: свежая сборка карточки (скоуп .nb-pdp) и сборка каталога из своей ветки (скоуп
       .nb-cat), сделанная ДО двух решений Val от 13.09. Повторяем эти два решения для каталога;
       снять, когда сборка каталога поедет из тех же исходников.
       Замер: в каталоге «Закрити» подчёркнутым текстом и пунктир у «Підібрати розмір»,
       в карточке — ручка сверху и сплошная линия. */
/* ⚠ И ГЛАВНАЯ (Val 01.10 ночью, снимок листа размеров из корзины на /ua/: «подчёркивание в отрыве от кнопки и
   нету вверху черточки»). У главной свой хост `.nb-home`, и правила ниже, написанные для `.nb-cat`, туда не доходили:
   «Закрити» оставалась текстом с линией по низу кнопки 48 px, ручки не было, «Підібрати розмір» — пунктиром.
   `:is()` вес не меняет: (1,1,0) + свои классы, как было у `.nb-cat`. */
@media (max-width: 992.98px) {
    #nb-quick-buy-host:is(.nb-cat, .nb-home) .modal__header {
        padding-top: calc(var(--nb-modal-pad-y) + 10px);
    }

    #nb-quick-buy-host:is(.nb-cat, .nb-home) .modal__close {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 72px;
        height: 22px;
        padding: 0;
        border: 0;
        background: none;
        color: transparent;
        font-size: 0;
        line-height: 0;
    }

    #nb-quick-buy-host:is(.nb-cat, .nb-home) .modal__close::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 16px;
        right: 16px;
        height: 2px;
        border-radius: 1px;
        background-color: var(--nb-ink);
    }
}

#nb-quick-buy-host:is(.nb-cat, .nb-home) .quick-buy__guide.nb-link-underline--dash {
    background-image: none;
    border-bottom-color: var(--nb-ink);
    border-bottom-style: solid;
}

/* 15. Меню на телефоне — сразу ДВА столбца: слева разделы верхнего уровня, справа содержимое
       выбранного (Val 13.09: «хочу, чтобы меню открывалось сразу с выделенным каталогом, а справа
       от него — разделы подменю; места предостаточно, чтобы всё было в одном экране. И если мы
       находимся в разделе „Сукні“, нужно показать его выделенным во втором столбце»).
       У Дахно на десктопе это уже так (grid 250px | 1fr | 158px), а на телефоне подменю —
       выезжающий поверх слой, и первый столбец гасится (opacity 0). Повторяем десктопную идею
       на узком экране: сетка 38/62, подменю стоит В ПОТОКЕ, «Назад» и заголовок столбца не нужны.
       Текущий раздел помечает js/nb-sandbox.js классом is-current. */
@media (max-width: 1023.98px) {
    .menu__inner {
        display: grid;
        grid-template-columns: 38% 1fr;
        column-gap: 15px;
        padding: 0;
        overflow: visible;
    }

    .menu__nav {
        padding: 30px 0 40px 15px;
    }

    /* столбец слева больше не исчезает при выборе раздела */
    .menu--sub-open .menu__nav {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .menu__sub {
        position: static;
        inset: auto;
        transform: none;
        visibility: visible;
        padding: 30px 15px 40px 0;
    }

    /* заголовок столбца и «Назад» — атрибуты одноколоночного вида */
    .menu-sub__head {
        display: none;
    }

    /* ⚠ Стрелка стоит СРАЗУ за словом, а не у дальней кромки столбца (Val 13.09: «стрелочки
       выглядят как-то очень странно»): раскидав их по краям, я оторвал значок от подписи —
       он читался как отдельный элемент. Рядом со словом и мелким серым он читается как
       «здесь есть продолжение». */
    /* ⚠ вес: у шаблона своё правило с gap: 40px той же силы, и оно идёт позже в каскаде —
       замер показал именно 40px, отсюда и «оторванная» стрелка. Берём id меню. */
    #site-menu .menu-nav__link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
    }

    #site-menu .menu-nav__arrow {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        color: var(--nb-gray-400, #8c8c8c);
    }

    /* Val 13.09: «меню, каталог — убери подчёркивание, сделай жирным, а в подменю
       подчёркивание оставляй». Так в столбцах разные роли: слева жирным то, что открыто
       справа, справа подчёркиванием — раздел, в котором стоим. */
    #site-menu .menu-nav__link[aria-expanded="true"] > span {
        font-weight: 600;
    }

    #site-menu .menu-sub__link.is-current {
        border-bottom: 1px solid currentColor;
        padding-bottom: 2px;
    }
}

/* 16. Пока панель меню ведут пальцем, её собственный переход выключен, а сама панель видима
       даже при закрытом меню (js/nb-sandbox.js §2+5 — жест «за пальцем», Val 13.09). */
#site-menu.nb-menu-drag {
    visibility: visible;
}

#site-menu.nb-menu-drag .menu__panel {
    transition: none;
}

/* 17a. Открытая шторка — страница под ней НЕ листается (Val 25.09: «открыта корзина, свайпаю вверх —
        не нужно свайпать то, что под корзиной. Это на главной»). Правило `body.is-locked` жило
        только в бандлах раздела и карточки (scope.css / catalog-scope.css); у главной его не было —
        класс ставился, но ничего не держал. Теперь оно в теме, на всех страницах. Прокручиваемое
        нутро шторок не передаёт жест странице на краю (`overscroll-behavior`).
        ⚠ ТОЛЬКО `body`, НЕ `html` (смена 33). Корень у витрины `visible`, поэтому `overflow` тела
        уходит на весь экран — страницу это и держит. Редакция 25.09 добавляла `html` «на всякий
        случай», и это ломало шапку: при корне не `visible` тело становится СВОИМ контейнером
        прокрутки, и липкая шапка прокрученной страницы уезжала за экран (−580 px на главной,
        −521 на карточке), пока открыта шторка. Проба `tools/qa_home_cart_scroll_lock.py`
        (лом `--break-root` возвращает правило корня). */
body.is-locked { overflow: hidden; }
.nb-cart__body, .nb-menu-all { overscroll-behavior: contain; }

/* 17. Своя шторка корзины (#nb-cart): разметка — в footer.php, содержимое рисует
       js/nb-sandbox.js из Vuex-хранилища темы. Форма та же, что у шторок карточки товара:
       на телефоне лист снизу почти во весь экран, на десктопе панель справа. Подложка —
       та же стеклянная белая, что у шапки и меню. */
.nb-cart {
    position: fixed;
    inset: 0;
    /* ⚠ Шторка живёт ПОД шапкой (Val 30.09, образец &Other Stories): шапка остаётся видимой и
       нажимаемой — её иконки переключают корзину и избранное и закрывают шторку. Верх — та же
       нижняя кромка шапки, что у меню (`--nb-menu-top`, nb-sandbox.js §3): меню выезжает слева,
       корзина справа, и обе начинаются на одной линии. Запасное — высота шапки телефона. */
    top: var(--nb-menu-top, 50px);
    /* ⚠ ВЫШЕ наших шторок (--nb-z-panel = 2000), а не под ними. Корзина всплывает сразу после
       покупки, пока лист размеров ещё уезжает, и оба должны быть видны — Val 17.09: «он там
       чуть ли не в нахлёсте получается, очень красиво выглядит… типа как рокировочка».
       С прежним z-index 300 корзина ехала ЗА листом: движение было, но его не было ВИДНО, и
       читалось это как «корзина просто появилась». Запасное значение — на страницах темы,
       куда токены не приезжают. */
    z-index: calc(var(--nb-z-panel, 2000) + 100);
}

.nb-cart[hidden] {
    display: none;
}
/* Лист размеров, открытый «+» карточки ВНУТРИ корзины (лента «Доповніть образ», «Обране»), — поверх корзины.
   Метку ставит nb-sandbox.js на нажатии и снимает при закрытии корзины; «рокировка» при покупке со страницы
   (лист уезжает под всплывающую корзину) метку не получает и не меняется. */
/* ⚠ Вес селектора — с двумя id: быструю покупку держит `#nb-quick-buy-host.nb-cat #nb-quick-buy:not([hidden])`
   (2,2,0), и метка с одним id ему проигрывала (замер CDP `CSS.getMatchedStylesForNode`: z-index оставался 2000). */
:root.nb-sheet-over-cart #nb-quick-buy-host #nb-quick-buy:not([hidden]),
:root.nb-sheet-over-cart #nb-quick-buy-host .modal.modal,
:root.nb-sheet-over-cart #product_detail .modal.modal {
    z-index: calc(var(--nb-z-panel, 2000) + 200);
}

/* Лист размеров ВНУТРИ шторки корзины / «Додано» (Val 07.10, 13354: «показывать размеры в новом блоке который
   меняется с составом корзины… в рамках модалки и вверху кнопка назад»). Рамку панели и поля её заголовка кладёт
   nb-sandbox.js (`sheetDock`) переменными `--nb-dock-*`: лист встаёт ровно на панель и закрывает её содержимое,
   «‹ Назад» — на месте заголовка шторки. Подложки у листа нет: вокруг панели уже лежит подложка шторки, и тап
   по ней закрывает шторку вместе с листом.
   ⚠ Вес — два id: лист держат `#nb-quick-buy-host.nb-cat #nb-quick-buy:not([hidden])` (2,2,0) и скоупленные
   правила панели бандлов раздела/главной/карточки. */
#nb-quick-buy#nb-quick-buy.quick-buy--dock:not([hidden]) {
    inset: auto;
    top: var(--nb-dock-top);
    left: var(--nb-dock-left);
    width: var(--nb-dock-width);
    height: var(--nb-dock-height);
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    z-index: calc(var(--nb-z-panel, 2000) + 200);
}
#nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__overlay { display: none; }
#nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__panel {
    /* у шапки и слоя прокрутки поля симметричные (`--nb-modal-pad-x`), а справа нужно поле шторки — берём правое */
    --nb-modal-pad-x: var(--nb-dock-pad-r, var(--nb-dock-pad-x));
    --nb-modal-pad-y: var(--nb-dock-pad-top);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0 var(--nb-dock-pad-r, var(--nb-dock-pad-x)) 0 var(--nb-dock-pad-x);
    box-shadow: none;
    /* входит как следующий экран той же шторки — коротко справа, без выезда снизу и без «окна» по центру */
    animation: nb-dock-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#nb-quick-buy#nb-quick-buy.quick-buy--dock.is-closing .modal__panel {
    animation: nb-dock-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes nb-dock-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes nb-dock-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
    #nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__panel { animation: none; }
}
/* полоска-ручка нижнего листа здесь ничего не обещает: лист не снизу */
#nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__panel::before,
#nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__header::before { content: none; display: none; }
/* шапка: «‹ Назад» строкой на линии заголовка шторки, под ней «Оберіть розмір»; «Закрити» листа не нужен —
   выход из листа один, назад к шторке */
/* верхнее поле — ровно поле заголовка шторки: на телефоне лист добавляет к нему 10 px под полоску-ручку, которой
   здесь нет, и «Назад» вставал на 10 px ниже «Кошик (1)» (замер 07.10: 80 против 70) */
#nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__header { flex-wrap: wrap; row-gap: 28px; padding-top: var(--nb-dock-pad-top); }
#nb-quick-buy#nb-quick-buy.quick-buy--dock .modal__close { display: none; }
#nb-quick-buy .quick-buy__back[hidden] { display: none; }
#nb-quick-buy .quick-buy__back {
    flex: 0 0 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nb-ink, #000);
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
#nb-quick-buy .quick-buy__back span { flex: none; }
#nb-quick-buy .quick-buy__back svg { flex: none; }
@media (hover: hover) { #nb-quick-buy .quick-buy__back:hover { opacity: 0.6; } }

/* ⚠ ЗАКРЫВАЮЩАЯСЯ ШТОРКА НЕ ИМЕЕТ ПРАВА ЕСТЬ ПАЛЕЦ, И ЭТО ЗАМЕР, А НЕ ОСТОРОЖНОСТЬ.
   `close()` снимает `is-open` сразу, а `hidden` ставит через 520 мс (`nb-sandbox.js`) —
   столько длится уезд панели. Всё это время подложка уже НЕВИДИМА (`opacity: 0` примерно
   с 300 мс), но остаётся во весь экран и ловит нажатия: замер по кадрам 21.09 — 307 мс
   прозрачна и ловит, 458 мс то же, 608 мс схлопнулась. Человек, тапнувший сразу после
   закрытия, теряет этот тап и видит «тыкаю — ничего не происходит».

   Тот же класс уже ловили 16.09 с другой стороны: «открытая корзина перехватывает нажатия,
   и повторный тап по размеру не доходил» (комментарий в `addStart`). Там закрывали корзину
   руками; здесь закрываем сам ПЕРЕХВАТ, и он исчезает вместе с `is-open`, а не через 520 мс.

   ⚠ Перечислены ТРИ узла, а не один. Подложка лежит в `.nb-cart`, который сам
   `position: fixed; inset: 0`: сняв перехват только с подложки, мы бы отдали палец
   РОДИТЕЛЮ — он такой же полноэкранный, и `elementFromPoint` вернул бы уже его. */
.nb-cart:not(.is-open),
.nb-cart:not(.is-open) .nb-cart__overlay,
.nb-cart:not(.is-open) .nb-cart__panel {
    pointer-events: none;
}

.nb-cart__overlay {
    position: absolute;
    inset: 0;
    /* та же плотность, что у остальных шторок (--nb-overlay-solid) — Val 13.09 просил
       одинаковое затемнение во всех попапах */
    background-color: rgb(0 0 0 / 0.22);
    opacity: 0;
    /* та же кривая и тот же срок, что у подложки наших шторок (scope.css §11, 260 мс) */
    transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nb-cart.is-open .nb-cart__overlay {
    opacity: 1;
}

/* ⚠ С 30.09 — панель СПРАВА и на телефоне (Val: «чтоб корзина открывалась справа под хедером,
   чтоб выезжала»; «деск — копия мобайла, только расширенный»). На телефоне — во всю ширину и
   высоту под шапкой, на ПК — та же панель уже. Было: лист снизу на 88vh. */
.nb-cart__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    /* ⚠ СПЛОШНОЙ белый с 30.09. Стекло 97 % + размытие было задумано под лист снизу, где под
       ним край страницы; панель во всю высоту под шапкой показывала сквозь себя размытые
       плитки каталога призраками (снимок 30.09). У меню та же история уже была и кончилась
       сплошным белым (§12) — корзина теперь её зеркало. */
    background-color: rgb(255 255 255);
    transform: translateX(100%);
    /* ⚠ ТА ЖЕ анимация, что у наших шторок (Val 17.09: «мне нравится анимация появления попапа
       подписки на размер — хочу, чтобы точно так же была и корзина»). У модалок это
       `nb-sheet-in var(--nb-motion-slow)` — 500 мс на той же кривой; у корзины было 300 мс, и
       рядом с попапом она читалась как «просто появилась».
       ⚠ Запасное значение обязательно: корзина есть на КАЖДОЙ странице, а токены приезжают с
       нашими бандлами — на страницах темы их нет вовсе (rule_our_css_on_theme_pages_needs_token_fallback). */
    transition: transform var(--nb-motion-slow, 500ms cubic-bezier(0.4, 0, 0.2, 1));
}

.nb-cart.is-open .nb-cart__panel {
    transform: none;
}

/* Ручка шторки корзины: та же, что у быстрой покупки (60×2 в 10px от верха), зона нажатия —
   полоса во всю ширину. На десктопе панель выезжает СПРАВА и свайпа нет — там ручка обещала бы
   жест, которого не существует, поэтому её прячем и оставляем кнопку «Закрити». */
/* ⚠ С 30.09 ручки нет нигде: шторка выезжает справа, закрывается свайпом ВПРАВО, и полоска
   сверху обещала бы жест вниз, которого больше нет. Узел оставлен (по нему закрывают пробы). */
.nb-cart__handle {
    display: none;
    width: 100%;
    height: 22px;
    padding: 10px 0 0;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.nb-cart__handle::before {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    margin: 0 auto;
    background-color: #000;
}

.nb-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 15px 12px;
}

.nb-cart__title {
    margin: 0;
    font-size: 16px;
}

.nb-cart__close {
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.nb-cart__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 15px;
}
/* Полоса прокрутки шторки скрыта — и в «Кошик», и в «Обране», на телефоне и ПК (Val 01.10: «с моба и деска с корзины
   и вишлиста убрать скролбары»). Прокрутка остаётся: колесо, тачпад, палец. Лом пробы: `nb-lom-cart-scrollbar` на <html>. */
html:not(.nb-lom-cart-scrollbar) .nb-cart__body { scrollbar-width: none; -ms-overflow-style: none; }
html:not(.nb-lom-cart-scrollbar) .nb-cart__body::-webkit-scrollbar { display: none; width: 0; height: 0; }

.nb-cart__row {
    display: grid;
    grid-template-columns: 84px 1fr 24px;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

.nb-cart__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background-color: #f4f4f4;
}

.nb-cart__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.nb-cart__name {
    color: #000;
    font-size: 14px;
    line-height: 1.25;
}

.nb-cart__meta {
    margin: 0;
    color: rgb(0 0 0 / 0.55);
    font-size: 13px;
}

.nb-cart__qty {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}

.nb-cart__qty button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / 0.2);
    background: none;
    color: #000;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.nb-cart__qty button[disabled] {
    opacity: 0.35;
    cursor: default;
}

.nb-cart__price {
    margin: 0;
    font-size: 14px;
}
/* старая цена зачёркнута и приглушена — как на плитке каталога (`product-card__price-old`) */
.nb-cart__price-old { color: var(--nb-gray-400); text-decoration: line-through; margin-right: var(--nb-space-1); }

.nb-cart__del {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(0 0 0 / 0.5);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ⚠ Строка-заготовка: место новой вещи, пока ответ сервера в пути (Val 17.09 — корзина едет в
   том же жесте, что и уезжающий лист размеров). Выглядит как обычная строка, но приглушена и
   без кнопок: количество и удаление у позиции, которой ещё нет на сервере, обещали бы действия,
   которых мы выполнить не можем. */
.nb-cart__row--pending {
    opacity: .55;
}
.nb-cart__row--pending .nb-cart__photo img {
    background-color: rgb(0 0 0 / 0.06);
}
.nb-cart__pending-note {
    color: var(--nb-gray-700, #6b6b6b);
}

.nb-cart__empty {
    padding: 40px 0 50px;
    text-align: center;
}

.nb-cart__empty-text {
    margin: 0 0 14px;
    font-size: 15px;
}

.nb-cart__empty-link {
    color: #000;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nb-cart__foot {
    padding: 14px 15px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(0 0 0 / 0.08);
}

.nb-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 15px;
}

.nb-cart__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    background-color: #000;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Пока строка ждёт ответ сервера, блокируем ТОЛЬКО её кнопки. Раньше здесь гасла вся панель
   (opacity 0.6 + pointer-events: none) — Val 13.09 на видео: «плашка становится полупрозрачной».
   Мигание целого блока на каждый тап читается как сбой; число в строке и так меняется сразу,
   ещё до ответа, так что гасить нечего. */
/* Позиции, товара которых больше нет (#2072). Раньше сайт удалял их молча; теперь человек их
   видит и убирает сам, а оформление до этого не пускает.
   ⚠ Приглушаем ТОЛЬКО кадр и название — сама строка остаётся полноконтрастной. Общая
   полупрозрачность блока читается как сбой загрузки (тот же разбор, из-за которого перестала
   гаснуть панель на каждый тап), а здесь всё наоборот: строку надо заметить. */
.nb-cart__gone {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgb(0 0 0 / 0.08);
}

.nb-cart__gone-title {
    margin: 0 0 4px;
    color: #000;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nb-cart__gone-note {
    margin: 10px 0 0;
    color: rgb(0 0 0 / 0.55);
    font-size: 13px;
    line-height: 1.35;
}

.nb-cart__row--gone .nb-cart__photo img {
    filter: grayscale(1);
    opacity: 0.55;
}

.nb-cart__row--gone .nb-cart__name {
    color: rgb(0 0 0 / 0.55);
}

.nb-cart__meta--gone {
    color: #000;
}

/* Кнопка гаснет только вместе с подписью под ней: серая кнопка без причины — то же молчание,
   от которого уходим. Клик по ней перехватывает js и подводит к списку. */
.nb-cart__checkout.is-disabled {
    background-color: rgb(0 0 0 / 0.25);
    cursor: default;
}

.nb-cart__checkout-note {
    margin: 8px 0 0;
    color: rgb(0 0 0 / 0.55);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.nb-cart__row.is-busy .nb-cart__qty button,
.nb-cart__row.is-busy .nb-cart__del {
    pointer-events: none;
    opacity: 0.45;
}

/* Ширина шторки корзины на ПК — ОДНО определение: по ней же меряется попап образа (look-sheet.css, Val 01.10 16:12). */
:root { --nb-cart-panel-w: 480px; }
@media (min-width: 993px) {
    .nb-cart__panel {
        left: auto;
        width: var(--nb-cart-panel-w, 480px);
    }
}

/* ⚠ На десктопе — ход БОКОВОЙ панели, как у образа и попапов карточки (--nb-motion-drawer),
   а не 500 мс шторки снизу (Val 28.09: «шторка корзины очень долго выезжает»). Замер
   `tools/diag_cart_drawer_desktop.py`, 1440×900: 90 % пути 375–415 → 183–224 мс, на месте
   536–580 → 304–360 мс. Телефон не трогаем — там 500 мс выбрал Val 17.09.
   Порог — 1024px, как у всех панелей и `NB.isDesktop()` (круг 7 Codex): на 993–1023 корзина
   уже справа, но едет как остальные панели этой ширины. Закрытие прячет панель через 520 мс
   (`close()` в nb-sandbox.js) — дольше этого хода. */
@media (min-width: 1024px) {
    .nb-cart__panel {
        transition: transform var(--nb-motion-drawer, 320ms cubic-bezier(0.22, 1, 0.36, 1));
    }
}

/* 18. Меню «все разделы раскрыты» (Val 13.09, пример zara.com/ua). Включено по умолчанию,
       прежний двухколоночный вид — адресом ?menu=2col (js/nb-sandbox.js §10).
       Слева номер и название раздела, справа — его подразделы; сверху лента плиток-ссылок. */
#site-menu.menu--all .menu__inner {
    display: none;
}

.nb-menu-all {
    /* Ширина плитки ленты — ОДНО определение на ленту и на сетку разделов ниже: подразделы встают ровно на линию
       второй плитки (Val 06.10, 13239: «моб версия, надо выровнять по сетке»). */
    --nb-menu-tile-w: min(calc((100vw - 2 * 15px - 12px) / 3), 160px);
    /* Дорожки строки раздела: номер | название | подразделы. Название — до линии второй плитки, но не уже самого длинного
       СЛОВА подписи (minmax(min-content, …)): длинное «Коллекции» (ru) на узком экране сдвигает подразделы, а не наезжает
       на них; название из нескольких слов переносится, а не выталкивает подразделы за экран (ревью Codex смены 68 №3;
       до того стояло max-content). */
    --nb-menu-cols: 34px minmax(min-content, calc(var(--nb-menu-tile-w) + 6px - 34px)) 1fr;
    height: 100%;
    overflow-y: auto;
    padding: 24px 15px 40px;
    scrollbar-width: none;
}

.nb-menu-all::-webkit-scrollbar {
    display: none;
}

.nb-menu-all__strip {
    display: flex;
    /* Val 13.09: «нужен gap между карточками меньше, чтобы помещались три и две карточки
       в экране» — ширина считается от экрана, чтобы ровно три помещались на любом телефоне,
       а на узком (320) их видно две с хвостиком. */
    gap: 6px;
    margin: 0 -15px 26px;
    padding: 0 15px;
    overflow-x: auto;
    overscroll-behavior-x: none;
    scrollbar-width: none;
}

.nb-menu-all__strip::-webkit-scrollbar {
    display: none;
}

.nb-menu-tile {
    flex: 0 0 auto;
    width: var(--nb-menu-tile-w);
    color: #000;
}

.nb-menu-tile__ph,
.nb-menu-tile__img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background-color: #f1f1f1;
}

.nb-menu-tile__label {
    display: block;
    margin-top: 8px;
    /* подпись соразмерно плитке (Val 13.09: «соизмеримо увеличить название карточки»),
       стиль — как у наших подзаголовков */
    font-size: var(--nb-fs-sm, 13px);
    color: var(--nb-gray-700, #757575);
    letter-spacing: normal;
    text-transform: none;
}

/* ⚠ Val 13.09: «элементы меню нужно выровнять по элементам подменю» и «убрать серые
   подчёркивания между элементами». Поэтому линий-разделителей нет, а первая строка левого
   столбца стоит на той же линии, что первая ссылка правого: одинаковые line-height и
   выравнивание по началу строки (align-items: start), без собственных отступов сверху. */
.nb-menu-all__row {
    display: grid;
    /* Сетка = лента плиток над разделами (Val 06.10, 13239): номер — с линии первой плитки, подразделы — с линии
       второй (ширина плитки + зазор 6 px). Было 34 | 104 | 1fr с зазором 12: подразделы стояли на 177 px при второй
       плитке на 137 (замер 390). Дорожки — --nb-menu-cols; ниже (§18b) все строки делят ОДНУ сетку (subgrid), чтобы
       линия подразделов была общей; здесь — запасной вариант, если subgrid нет. */
    grid-template-columns: var(--nb-menu-cols);
    column-gap: 0;
    align-items: start;
    /* Val 13.09: «увеличить чуть-чуть отступ между элементами меню» → 22 px; Val 06.10, 13239: «между разделами дать
       меньший отступ» → 15 px; вместе с блочным названием 14 px (ниже, §18b) шаг свёрнутых разделов 68 → 47 px на 390. */
    padding: 15px 0;
}

.nb-menu-all__num,
.nb-menu-all__name a,
.nb-menu-all__link {
    line-height: 1.2;
    /* ⚠ Зона нажатия пункта меню — 18 px по вертикали, а шаг между пунктами 33. Отступ между
       ними уже существует, просто принадлежит ПУСТОТЕ, а не ссылке: отдаём его ссылке и
       получаем 32 px, не трогая ни вид, ни длину списка.
       Замер соседней сессии (живой дев, 390×844, попадание через elementFromPoint с шагом 2 px,
       а не рамка элемента):
           как есть              зона 18, шаг 33, длина списка 1288
           этот вариант          зона 32, шаг 33, длина 1288 — НЕ выросла, снимок совпал байт в байт
           min-height: 33px      зона 33, шаг 49, длина 1548 (+260)
           min-height: 50px      зона 50, шаг 66, длина 1820 (+532)
       ⚠ Поэтому именно padding с отрицательным margin, а НЕ min-height: тот удлиняет меню на
       260-530 px. Прежний вариант `min-height: var(--nb-tap)` отменён. */
    display: block;
    padding-block: 8px;
    margin-block: -8px;
}

.nb-menu-all__num {
    color: rgb(0 0 0 / 0.35);
    font-size: 12px;
    letter-spacing: 0.04em;
    transition: color 280ms ease;
}
/* Номер раскрытого раздела — чёрный, как и его название (Val 06.10, 13240: «деск моб красить в черный цифру при
   раскрытии раздела»). На ПК раскрытый — тот, чьи подразделы открыты (is-active, js §10). */
.nb-menu-all__row.is-active .nb-menu-all__num {
    color: var(--nb-ink, #000);
}

/* Val 13.09: «заголовки пусть пишутся в том же стиле, как наши подзаголовки» — то есть тем же
   приёмом, что .products__subtitle в карточке: мелкий кегль и серый, без капса и разрядки.
   Так название раздела не спорит со своими же подразделами (у Zara на присланном кадре так же:
   слева приглушённая подпись, справа чёрные ссылки). */
.nb-menu-all__name a {
    display: block;
    color: var(--nb-gray-700, #757575);
    font-size: var(--nb-fs-sm, 13px);
    letter-spacing: normal;
    text-transform: none;
}

/* Аккордеон (Val 05.10, смена 61: «по умолчанию всё закрыто, при нажатии раздел плавно открывается на своём уровне»).
   Высота «авто» анимируется через строку сетки 0fr → 1fr; внутренняя обёртка режет содержимое. Поля ±8 px у обёртки —
   чтобы срез не съедал зону нажатия первой и последней ссылки (у ссылок те же ±8 px, см. выше). */
.nb-menu-all__kids {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms ease;
}
.nb-menu-all__row.is-active .nb-menu-all__kids { grid-template-rows: 1fr; }
.nb-menu-all__kids-in {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
    padding-block: 8px;
    margin-block: -8px;
}
.nb-menu-all__row:not(.is-active) .nb-menu-all__kids-in { visibility: hidden; transition: visibility 0s 280ms; }
@media (prefers-reduced-motion: reduce) {
    .nb-menu-all__kids, .nb-menu-all__row:not(.is-active) .nb-menu-all__kids-in { transition: none; }
}

.nb-menu-all__link {
    color: #000;
    font-size: 14px;
    line-height: 1.2;
}

/* Вход в шторке — первым блоком, над лентой плиток (Val 26.09). Вид — одна спокойная строка на
   кремовой плашке (образец Val 27.09, &Other Stories): иконка человека, подпись обычным регистром,
   стрелка справа. Токен --nb-cream заведён ровно под эту плашку (Val 05.09).
   Высота — зона нажатия --nb-tap. Токены с запасными значениями: стиль шаблона токенов не несёт. */
.nb-menu-acc {
    margin-bottom: var(--nb-space-6, 30px);
}
.nb-menu-acc [hidden] {
    display: none;
}
/* Личность ещё неизвестна: место держим, но ничего не показываем — ни «увійти» вошедшему, ни имени. */
.nb-menu-acc--pending > * {
    visibility: hidden;
}
.nb-menu-acc__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nb-space-2, 10px);
    min-height: var(--nb-tap, 50px);
    padding-inline: var(--nb-space-3, 15px);
    border-radius: var(--nb-r-sm, 3px);
    /* Val 27.09: «кремовый цвет очень ярко выражен, надо сделать более тусклым» — та сама тепла гама,
       але вдвічі менш насичена (#F6F2ED → #F7F5F2). Токен --nb-cream не чіпаємо: ним фарбуються й інші плашки. */
    background: var(--nb-cream-muted, #F7F5F2);
    color: var(--nb-ink, #000000);
    font-size: var(--nb-fs-base, 14px);
    line-height: var(--nb-lh-tight, 1.2);
    text-decoration: none;
}
.nb-menu-acc__ico {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}
.nb-menu-acc__label,
.nb-menu-acc__hello {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}
.nb-menu-acc__arrow {
    flex: 0 0 auto;
    width: 6px;
    height: 10px;
    margin-left: var(--nb-space-1, 5px);
}
.nb-menu-acc__go {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: stretch;
    color: var(--nb-gray-700, #757575);
    font-size: var(--nb-fs-sm, 12px);
    white-space: nowrap;
    text-decoration: none;
}
/* Нажимается вся строка вошедшего, а не только подпись справа. */
.nb-menu-acc__go::after {
    content: "";
    position: absolute;
    inset: 0;
}
.nb-menu-acc__row:focus-visible,
.nb-menu-acc__go:focus-visible {
    outline: var(--nb-border, 1px) solid var(--nb-ink, #000000);
    outline-offset: var(--nb-space-1, 5px);
}
@media (hover: hover) {
    .nb-menu-acc__row:hover .nb-menu-acc__label,
    .nb-menu-acc__go:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 993px) {
    .nb-menu-acc__row { max-width: 560px; }
}

.nb-menu-all .menu-extra {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
    font-size: 14px;
}
/* Низ меню мельче (Val 05.10, 13042: «кегель можно уменьшить»): клиентский сервис, язык, блок быстрой связи. */
.nb-menu-all .menu-extra .menu-extra__link,
.nb-menu-all .menu-extra .menu-extra__lang { font-size: var(--nb-fs-sm, 12px); }
.nb-menu-quick { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.nb-menu-quick__title { font-size: var(--nb-fs-sm, 12px); color: var(--nb-gray-700, #757575); }
.nb-menu-quick__links { display: flex; gap: 6px; margin-left: -10px; }
/* Значок 20 px, зона нажатия 40 px — значок в центре, край ряда выровнен по тексту сдвигом -10 px. */
.nb-menu-quick__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--nb-ink, #000); }
.nb-menu-quick__link svg { width: 20px; height: 20px; }
/* Значки Viber, телефона и Messenger в общем наборе нарисованы БЕЛЫМ под тёмный подвал (fill="white" в символе),
   Telegram — currentColor. На белом меню первые три обращаем. */
.nb-menu-quick__link[data-ico="viber"] svg,
.nb-menu-quick__link[data-ico="phone"] svg,
.nb-menu-quick__link[data-ico="messenger"] svg { filter: invert(1); }

@media (min-width: 993px) {
    .nb-menu-all {
        padding: 30px 40px 40px;
    }

    /* 993–1023: раскладка телефона с плиткой 180 — сетка разделов та же, по линиям ленты (ревью Codex смены 68 №2:
       до того здесь стояли свои колонки 48 | 180 | 1fr, и подпункты уезжали от линии плиток на 66 px). */
    .nb-menu-all { --nb-menu-tile-w: 180px; }

    .nb-menu-all__kids {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 20px;
    }

    .nb-menu-tile {
        width: var(--nb-menu-tile-w);
    }
}

/* 16c. Приветствие у иконки входа на ПК — мелко, как подписи шапки. */
/*     Цвет НЕ задаём: как у числа корзины и подписей, он наследуется от `.header` (белый на прозрачной шапке над hero,
       чёрный на белой, смена по наведению/шторке — §25, §27). Своё `color: var(--nb-ink)` давало чёрное «Вітаємо»
       рядом с белыми «(30)» и значками (Val 08.10, скрин). Проба tools/qa_header_hello_color.py. */
.header__hello { font-size: var(--nb-fs-sm, 12px); line-height: 1.2; white-space: nowrap; }
.header__hello[hidden] { display: none; }
@media (max-width: 1023.98px) { .header__hello { display: none; } }

/* 18b. Меню на ПК — раскладка «как у Zara» в том же размере панели (Val 01.10, снимок zara.com/ua: «так как у нас нет
        крупных разделов типа „Жінки“, „Чоловіки“, на их место — наш верхний уровень, подразделы идут в ряд вниз, справа
        наш слайдер с картинками, можно мышкой передвигать; уместить в тот размер, что сейчас»).
        Слева столбец разделов, рядом — подразделы ОДНОГО раздела (на который навели; по умолчанию «Каталог»,
        класс `is-active` ставит js §10), справа — лента плиток. Плашки входа на ПК нет: вход — иконкой в шапке (§16b).
        Телефон не меняется: там все разделы раскрыты, вход — плашкой. */
/* Подраздел-«сам раздел» у «Новинок» и «Sale» нужен только ПК-раскладке: на телефоне раздел раскрыт целиком (js §10). */
.nb-menu-all__link--pc { display: none; }
.nb-menu-all__arrow { display: none; }
/* Телефон: у раздела с подразделами — стрелка-указатель, у раскрытого повёрнута вниз (смена 61, аккордеон). */
@media (max-width: 1023.98px) {
    /* ⚠ Название — блочный flex, а не inline-flex (Val 06.10, 13239 «выровнять по сетке»): строчный блок сидел в строке
       родителя со своей высотой строки и опускал подпись на 7 px ниже номера, а строку раздела растягивал на 10 px
       (замер 390: номер / название / первый подпункт — базовые линии 406 / 413 / 408, высота 54 у раздела с подразделами
       против 44 у раздела без). Первым шагом подпункты поднимались на 2 px (кегль 14 против 12) — снято, см. ниже. Выравнивание по базовой линии сеткой (align-items: baseline) отвергнуто: свёрнутый столбец
       подпунктов меняет высоту строки, и номер дёргается на 2 px при раскрытии.
       Кегль разделов верхнего уровня = кегль подпунктов, 14 px (Val 06.10, 13243: «чтобы все разделы были одинаковыми
       по размеру, как верхний уровень, так и второй»); подпункты больше не поднимаем — название и подпункт одного кегля
       сходятся сами, а номер (12 px) опускаем на 2 px. Замер 390: 406 / 408 / 408 → 408 / 408 / 408. */
    .nb-menu-all__row[data-nb-menu-has-kids] .nb-menu-all__name a { display: flex; width: fit-content; align-items: center; gap: 8px; }
    .nb-menu-all__name a { font-size: var(--nb-fs-base, 14px); }
    /* Подразделы дальше от названия (Val 06.10, 13244: «подразделы чуть-чуть больше отступа от основного раздела») —
       поле справа у названия входит в его max-content, и колонка названия (--nb-menu-cols, minmax) растёт на него: линия
       подразделов = max(линия второй плитки, самое длинное название + 20 px). На 411 (телефон Val) зазор был 14 px. */
    .nb-menu-all__name { padding-right: 20px; }
    /* Раздел нажимается ПО ВСЕЙ ПОЛОСЕ, стрелка — у правого края (Val 06.10, 13249: «далеко тянуться пальцем до разделов
       верхнего уровня … показать клиенту, что он может во всей полосе нажать … стрелочки в самый правый край»).
       Зона — псевдоэлемент ссылки раздела во всю ширину строки и высотой свёрнутой строки (поля 2×15 + строка 1.2em);
       подпункты лежат ВЫШЕ неё (z-index), поэтому первый подпункт на той же высоте нажимается сам. Стрелка вынесена из
       ширины названия — колонка названия снова держит линию второй плитки (на 411: 144 px). */
    .nb-menu-all__row { position: relative; }
    .nb-menu-all__name a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(2 * 15px + 1.2em); }
    /* Подпункты выше полосы, но пропускают нажатие сквозь пустое место: ссылка подпункта — по ширине своего текста.
       ⚠ Ревью Codex смены 68 №1, замер: ссылка «Весь каталог» шла во всю ширину колонки и лежала под стрелкой
       раскрытого раздела — нажатие на стрелку уводило в каталог вместо того, чтобы свернуть раздел. */
    .nb-menu-all__kids { position: relative; z-index: 1; pointer-events: none; }
    .nb-menu-all__kids .nb-menu-all__link { pointer-events: auto; width: fit-content; }
    .nb-menu-all__row[data-nb-menu-has-kids] .nb-menu-all__arrow { position: absolute; right: 0; top: calc(15px + 0.6em - 4px); }
    /* Язык — по левому краю, как строки над ним (Val 06.10, 13248); у кнопки по умолчанию текст по центру. */
    .nb-menu-all .menu-extra .menu-extra__lang { text-align: left; }
    .nb-menu-all__num { position: relative; top: 2px; }

    .nb-menu-all__row[data-nb-menu-has-kids] .nb-menu-all__arrow { display: block; flex: none; width: 8px; height: 8px; transition: transform 280ms ease; }
    .nb-menu-all__row.is-active .nb-menu-all__arrow { transform: rotate(90deg); }
    .nb-menu-all__row.is-active .nb-menu-all__name a { color: var(--nb-ink, #000); }
}
/* Одна сетка на все разделы: колонка названия — по самому длинному названию меню, линия подразделов общая (иначе на
   узком экране у «Коллекции» она своя, у остальных своя; замер 06.10: ua — на линии плитки от 360 px, ru/en — от 414,
   ниже сдвигаются все вместе, наездов нет на 320–600). */
@supports (grid-template-columns: subgrid) {
    @media (max-width: 1023.98px) {
        .nb-menu-all__rows { display: grid; grid-template-columns: var(--nb-menu-cols); }
        .nb-menu-all__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
    }
}
@media (min-width: 1024px) {
    #site-menu .nb-menu-all {
        display: grid;
        grid-template-columns: 170px 170px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 24px;
        align-content: start;
        padding: 40px;
    }
    #site-menu .nb-menu-acc { display: none; }
    /* ⚠ ПОДРАЗДЕЛЫ НА СТРОКЕ СВОЕГО РАЗДЕЛА, разделы ниже — под ними (Val 02.10: «подразделы спустить до уровня самого
       раздела, а другие разделы спустить под подразделы — более понятная адаптация мобильной версии»). Строка — сетка:
       номер | название | подразделы; высота строки = высоте списка подразделов, следующие разделы уходят вниз сами.
       До 02.10 подразделы стояли отдельной колонкой от верха меню (position: absolute; top: 0). */
    /* ⚠⚠ ПЕРЕРЕШЕНО Val 05.10 (смена 61): «на десктопе сильно прыгает всё, поэтому там пусть разделы открываются
       сверху»; 12997 «левый раздел верхнего уровня должен быть статичным … второй уровень — с самого верха».
       Столбец разделов больше НЕ раздвигается подразделами: подразделы открытого раздела — отдельным столбцом от верха
       меню (абсолютно, слева 194 px = номер 34 + название 136 + зазор 24), появляются плавно. Пока ничего не открыто,
       второй столбец пуст. Вариант 02.10 (подразделы на строке раздела, разделы ниже уезжают) — в истории git. */
    #site-menu .nb-menu-all__rows { grid-column: 1 / 3; grid-row: 1; position: relative; }
    #site-menu .nb-menu-all__row { display: grid; grid-template-columns: 34px 136px; column-gap: 0; align-items: baseline; width: auto; padding: 0 0 22px; }
    #site-menu .nb-menu-all__num { grid-column: 1; }   /* ширина номера постоянная: «|01|» уже «|03|», и названия стояли неровно (замер 01.10) */
    #site-menu .nb-menu-all__name { grid-column: 2; }
    /* Без капса (Val 02.10: «везде caps lock мне не нравится, как выглядит») — как в макете Figma «Хедер + меню». */
    #site-menu .nb-menu-all__name a { display: inline-flex; align-items: center; gap: 10px; color: var(--nb-ink, #000); font-size: var(--nb-fs-lg, 18px); text-transform: none; letter-spacing: normal; }
    /* Подчёркивания у открытого раздела нет (Val 05.10, 12997: «подчеркивание элемента надо убрать»); его метка — стрелка. */
    /* Стрелка «›» рядом с названием — только у разделов с подразделами (js §10); при наведении уходит вправо (Val 02.10:
       «как в макетах в фигме: рядом стрелочка, при наведении она уходит вправо»), у открытого раздела стоит сдвинутой. */
    #site-menu .nb-menu-all__arrow { display: block; flex: none; width: 8px; height: 8px; transition: transform var(--nb-motion, 200ms ease); }
    #site-menu .nb-menu-all__name a:hover .nb-menu-all__arrow,
    #site-menu .nb-menu-all__name a:focus-visible .nb-menu-all__arrow,
    #site-menu .nb-menu-all__row.is-active .nb-menu-all__arrow { transform: translateX(6px); }
    /* Смена раздела — без наложения (Val 05.10, 13041: «чтоб текст на текст не накладывался»): прежний список гаснет
       СРАЗУ (у неактивного перехода нет), новый проявляется. */
    #site-menu .nb-menu-all__kids { position: absolute; top: 0; left: 194px; width: 170px; display: block;
        visibility: hidden; opacity: 0; transform: translateY(-6px); transition: none; }
    /* Проявление 140 мс (было 220) — Val 06.10, 13259: «чуть-чуть быстрее показывать разделы второго уровня при ховере». */
    #site-menu .nb-menu-all__row.is-active .nb-menu-all__kids { visibility: visible; opacity: 1; transform: none;
        transition: opacity 140ms ease, transform 140ms ease; }
    @starting-style { #site-menu .nb-menu-all__row.is-active .nb-menu-all__kids { opacity: 0; transform: translateY(-6px); } }
    #site-menu .nb-menu-all__kids-in { gap: 14px; overflow: visible; padding: 0; margin: 0; visibility: inherit; transition: none; }
    #site-menu .nb-menu-all__link { font-size: var(--nb-fs-base, 14px); text-transform: none; }
    #site-menu .nb-menu-all__link--pc { display: block; }
    /* Плитки — сеткой вниз, по две в ряд (Val 01.10 16:10: «при таком исполнении картинки уже сделать плиткой вниз»).
       Перетаскивание мышью ленте больше не нужно: прокручивать нечего. */
    #site-menu .nb-menu-all__strip { grid-column: 3; grid-row: 1 / 3; align-self: start; display: grid; grid-template-columns: repeat(2, 128px);
        gap: 16px 8px; margin: 0; padding: 0; overflow: visible; }
    #site-menu .nb-menu-all__strip .nb-menu-tile { width: 128px; }
    /* ПК (Val 26.10: «левое меню, если помещается по высоте, держим статично; справа блок с баннерами скроллится»):
       раньше прокручивалась вся шторка, и разделы уезжали вместе с плитками. Класс `nb-menu-all--pin` ставит
       js/nb-sandbox.js (updatePin) ТОЛЬКО когда левый столбец (разделы + клиентский сервис, язык, быстрая связь) помещается
       в высоту шторки: она тогда не прокручивается, а плитки справа прокручиваются сами (колесо над левой частью JS
       передаёт им). Не помещается — класса нет, всё как раньше. `--nb-all-room` (высота шторки без полей) тоже от JS.
       Лом пробы: `window.NB_MENU_PIN_OFF = true` (js) — класс не ставится. */
    #site-menu .nb-menu-all--pin { overflow-y: hidden; }
    /* ⚠ Селектор с `.nb-menu-all__strip--grid` нарочно: ниже по бандлу стоит `#site-menu .nb-menu-all__strip.nb-menu-all__strip--grid
       { overflow: visible }` той же специфичности, и без этого класса он побеждал (проба qa_menu_pin 26.10: плитки не прокручивались). */
    #site-menu .nb-menu-all--pin .nb-menu-all__strip,
    #site-menu .nb-menu-all--pin .nb-menu-all__strip.nb-menu-all__strip--grid { max-height: var(--nb-all-room, 100%); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
    #site-menu .nb-menu-all--pin .nb-menu-all__strip::-webkit-scrollbar { display: none; }
    /* Наведение: наведённый элемент чёрный, соседи сереют — тем же приёмом, что строки внизу слева (menu.css, «.menu-extra:hover»),
       и на ЛЮБОМ элементе: разделы, подразделы, плитки (Val 01.10 16:10). В колонке разделов активный — тот, чьи подразделы
       открыты, — остаётся чёрным, пока мышь в меню: видно, в каком разделе находишься. */
    @media (hover: hover) {
        #site-menu .nb-menu-all__name a,
        #site-menu .nb-menu-all__link,
        #site-menu .nb-menu-tile { transition: color var(--nb-motion, 200ms ease), opacity var(--nb-motion, 200ms ease); }
        #site-menu .nb-menu-all__rows:hover .nb-menu-all__name a { color: var(--nb-gray-500, #8C8C8C); }
        #site-menu .nb-menu-all__rows:hover .nb-menu-all__row.is-active .nb-menu-all__name a,
        #site-menu .nb-menu-all__rows .nb-menu-all__name a:hover { color: var(--nb-ink, #000); }
        #site-menu .nb-menu-all__kids:hover .nb-menu-all__link { color: var(--nb-gray-500, #8C8C8C); }
        #site-menu .nb-menu-all__kids .nb-menu-all__link:hover { color: var(--nb-ink, #000); }
        #site-menu .nb-menu-all__strip:hover .nb-menu-tile { opacity: .5; }
        #site-menu .nb-menu-all__strip .nb-menu-tile:hover { opacity: 1; }
        #site-menu .nb-menu-all__strip .nb-menu-tile:hover .nb-menu-tile__label { color: var(--nb-ink, #000); }
    }
    /* «Таблиця розмірів» и ниже — прижаты к низу меню с отступом (Val 05.10, 12997: «нижние элементы … примагничены
       к низу»). Вторая строка сетки забирает остаток высоты, блок встаёт к её низу; отступ — нижнее поле меню. */
    #site-menu .nb-menu-all .menu-extra { grid-column: 1 / 3; grid-row: 2; margin-top: 0; align-items: flex-start; align-self: end; }
    #site-menu .nb-menu-all .menu-extra > * { margin-left: 0; }
}

/* 19. Те же два решения по попапам для сборки каталога (она старше и ещё не пересобрана):
       затемнение вместо размытия и прямые углы (Val 13.09: «сделай во всех попапах такое же
       затемнение вместо блюра и убери закруглённые края»). Снять, когда каталог поедет из
       текущих исходников — там это уже в modal.css. */
.nb-cat .modal__overlay,
#nb-quick-buy-host.nb-cat .modal__overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;   /* Safari/iOS: без префикса стекла нет */
    -webkit-backdrop-filter: none;
    background-color: rgb(0 0 0 / 0.22);
}

.nb-cat .modal__panel,
#nb-quick-buy-host.nb-cat .modal__panel {
    border-radius: 0;
}

/* 20. Чёрная рамка фокуса на бургере и крестике меню (Val 13.09: «чёрная обводка иконки меню
       наверху и крестика закрытия — её нужно убрать»). Замер: после закрытия фокус возвращается
       на .header__menu-btn, и Chrome считает его «видимым» (:focus-visible), хотя человек
       нажимал пальцем. Снимаем рамку для указателя и возвращаем её тем, кто ходит с клавиатуры:
       класс nb-kbd ставит js/nb-sandbox.js на первом Tab. */
body:not(.nb-kbd) [data-menu-toggle]:focus,
body:not(.nb-kbd) [data-menu-close]:focus,
body:not(.nb-kbd) .header__menu-btn:focus,
body:not(.nb-kbd) .menu__close:focus {
    outline: none;
    box-shadow: none;
}

/* 20a. Рамка фокуса на кнопке, КУДА шторка или модалка вернула фокус при закрытии пальцем/мышью/жестом (Val 09.10,
        телефон: чёрная рамка вокруг «(0) 🛍» после свайпа корзины влево-вправо). Метку `data-nb-focus-quiet` ставит
        js/nb-sandbox.js §11a ТОЛЬКО когда фокус ушёл из закрывающегося слоя наружу и последним вводом был указатель;
        снимает на blur и на любую клавишу — с клавиатуры рамка прежняя. Рамку рисует тема (`:where(:focus-visible)`
        в dist/app.css, outline 2px); `:not(#nb-0)` — перевес над рамками с id-скоупом. */
[data-nb-focus-quiet]:focus-visible:not(#nb-0) { outline: none; }

/* 21. Под меню — то же затемнение, что под остальными шторками (Val 13.09: «при открытии и
       закрытии меню надо добавлять такую же чёрную подложку, как у других попапов»).
       Замер: слой .menu__overlay в шаблоне есть, но на телефоне у него display:none, а цвет
       плотнее наших шторок (0.45). Включаем и приводим к общей плотности; пока панель ведут
       пальцем, прозрачностью управляет js/nb-sandbox.js (доля пройденного пути). */
#site-menu .menu__overlay {
    display: block;
    background-color: rgb(0 0 0 / 0.22);
}

/* 21. (снято 15.09) Здесь пряталcя узел темы #subscribeProduct, приезжавший из footer.php на
   КАЖДУЮ страницу 246-ю пикселями сырой разметки. Компонент темы из подвала убран — прятать
   больше нечего. ⚠ Именно это правило и делало подписку на размер в каталоге и на главной
   мёртвой: обманка из rows-quick-buy.js звала обработчик темы, а тот показывал невидимый блок. */

/* 22. Вторая вкладка шторки — «Обране». Вкладки живут в шапке шторки на месте заголовка,
   карточки — сеткой по две, теми же карточками, что в каталоге (их отдаёт ajax.php). */
.nb-cart__tabs {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.nb-cart__tab {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #8a8a8a;
  cursor: pointer;
}
.nb-cart__tab.is-active {
  color: #111;
}
.nb-cart__body--fav {
  padding-bottom: 24px;
}
/* ⚠ Зазоры — ТЕ ЖЕ токены, что у сетки каталога (`.nb-grid`): по вертикали 30, по горизонтали 5. Было `gap: 5px`
   на обе оси — в каталоге под ценой стоит ещё строка кружков, а здесь её нет, и цена ряда упиралась в фото следующего
   (Val 02.10: «в Избранном нужно увеличить расстояние между карточками»). Проба qa_fav_row_gap. */
.nb-cart__fav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nb-grid-row-gap-mobile, 30px) var(--nb-grid-gap-mobile, 5px);
}
.nb-cart__fav .product-card {
  width: auto;
}
/* Лента «Доповніть образ» под позициями корзины (Val 27.09: «3.2 карточки» в кадре — край четвёртой
   говорит «листай»). Ширина плитки — от ширины ленты: 3.2 плитки + 3 зазора = ширина. Полосы прокрутки
   нет, прокрутка ленты не уезжает в шторку (`overscroll-behavior-x`). Заглушки — серые 2:3, как в
   стайлгайде у ленты «Носіть з». */
.nb-cart__recs {
  margin-top: 24px;
}
.nb-cart__recs-title {
  margin: 0 0 12px;
  font-size: 14px;
  color: #111;
}
/* заголовок ленты и стрелки в одну строку; стрелки — как `products__arrow` дизайн-системы, только на ПК */
.nb-cart__recs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2, 8px); margin-bottom: 12px; }
.nb-cart__recs-head .nb-cart__recs-title { margin-bottom: 0; }
.nb-cart__recs-nav { display: none; gap: var(--nb-space-2, 8px); }
.nb-cart__recs-arrow { display: flex; align-items: center; justify-content: center; width: 16px; height: 24px; padding: 0;
  border: 0; background: none; color: var(--nb-ink, #111); cursor: pointer; transition: opacity var(--nb-motion, .2s); }
.nb-cart__recs-arrow[disabled] { opacity: .3; pointer-events: none; }
.nb-cart__recs-arrow svg { fill: none; }
/* «Плашка ЕСТЬ в документе» — `--nb-topbar-on`, без учёта прокрутки (`--nb-topbar-cur` обнуляется и при `is-scrolled`, а
   высоте первого экрана прыгать от прокрутки нельзя). Читают её высоты героя и баннеров главной (src/components/hero,
   banner, home-extras): `calc(100svh − var(--nb-topbar-on, var(--nb-topbar-h)))`.
   Val 05.10: «в начале сам херо-контент с белой полоской внизу, а потом собирается по высоте экрана; должен сразу по
   высоте экрана собираться». Замер до правки (1440×900, раздел → логотип): первый кадр героя 870 px, через 0.23 с —
   900. Класс `is-no-topbar` ставит скрипт эпилога верхних баннеров (banners.dash), а Битрикс уносит его в конец <body>
   вместе с остальными скриптами — парсер доходит до него ПОСЛЕ того, как герой нарисован, и до тех пор высота
   считалась с минусом 30 px несуществующей плашки. `:has()` отвечает на первом же кадре: плашка (`.topbar`) стоит в
   начале <body>, раньше героя. Брейкпоинт — как у плашки темы (dist/app.css: 20 px до 1024, 30 px от 1024). */
:root { --nb-topbar-on: var(--nb-topbar-h-m, 20px); }
@media (min-width: 1024px) { :root { --nb-topbar-on: var(--nb-topbar-h, 30px); } }
body:not(:has(.topbar)), body.is-no-topbar { --nb-topbar-on: 0px; }
@media (min-width: 993px) { .nb-cart__recs-nav { display: flex; } }
/* «+» и закладка на плитках ЛЕНТ на ПК видны всегда, а не по наведению (Val 05.10: «на десктопе в слайдерах, например
   "Доповніть образ", не видны иконки быстрой покупки и избранного»). Замер до правки, 1440: в ленте шторки корзины обе
   иконки opacity 0 и проявлялись только наведением на саму плитку — как в сетке каталога, где так и остаётся. Ленты —
   это ряды главной и карточки, «Доповніть образ» в корзине, «Можливо вам сподобається» листа «Додано в кошик»; стрелки
   фото плитки остаются по наведению. Вес — `:is()` с id (как у правил стрелок лент ниже): правило прятанья в скоупах
   страниц несёт id (`:is(#nb-catalog, …).nb-cat .product-card__action`), классами его не перебить без !important; класс иконки повторён — вес (1,4,0) против (1,3,0) у прятанья, не зависим от порядка файлов. */
@media (hover: hover) and (pointer: fine) {
  :is(#nb-hs, .products__track, .nb-cart__recs-track, .nb-added__track) > .product-card.product-card .product-card__fav.product-card__fav,
  :is(#nb-hs, .products__track, .nb-cart__recs-track, .nb-added__track) > .product-card.product-card .product-card__action.product-card__action { opacity: 1; }
}
/* Советы в корзине и в попапе «Додано в кошик» — без цветов и меток (Val 06.10, 13250–13253: «в корзине и тут уберём
   и теги, и цвета»). Карточка общая (ряды, раздел), поэтому прячем только внутри этих двух лент. Вес `:not(#nb-…)` —
   выше правил карточки со скоупом через id (`:is(#product_detail, …).nb-pdp …`). Лом пробы qa_cart_recs_plain:
   `nb-lom-recs-plain` на <html>. */
html:not(.nb-lom-recs-plain) :is(.nb-cart__recs-track, .nb-added__track):not(#nb-0):not(#nb-1) .product-card__colors,
html:not(.nb-lom-recs-plain) :is(.nb-cart__recs-track, .nb-added__track):not(#nb-0):not(#nb-1) .product-card__tags { display: none; }
.nb-cart__recs-track {
  --nb-recs-gap: 5px;
  display: flex;
  gap: var(--nb-recs-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nb-cart__recs-track::-webkit-scrollbar {
  display: none;
}
/* ⚠ Пока шторка ЕДЕТ (тянется пальцем, доезжает, закрывается), лента её не листается: один жест — один хозяин
   (Val 01.10, видео: палец тянет шторку, а лента «Доповніть образ» летит под ним). Прокрутку пальцем снимает
   overflow, место ленты остаётся. Лом — класс `nb-lom-track-drag` на <html> (ставит проба). */
html:not(.nb-lom-track-drag) #nb-cart.is-drag .nb-cart__recs-track,
html:not(.nb-lom-track-drag) #nb-cart:not(.is-open) .nb-cart__recs-track {
  overflow-x: hidden;
}
.nb-cart__recs-track > .product-card,
.nb-cart__recs-skel {
  flex: 0 0 calc((100% - 3 * var(--nb-recs-gap)) / 3.2);
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
}
.nb-cart__recs-skel {
  display: block;
  aspect-ratio: 2 / 3;
  background: #f2f2f2;
}
.nb-cart__loading {
  padding: 16px;
  text-align: center;
  color: #8a8a8a;
  font-size: 13px;
}

/* 14. Подсветка тапа — своя, не системная.
       Val 13.09 (скрин меню): «когда я нажимаю на какой-то подраздел, я хочу, чтобы не вся
       область как вся кнопка подсвечивалась голубеньким, а эта кнопочка просто подчеркнулась
       внизу прочерком». Голубая (на части прошивок — серая) заливка во всю ширину пункта —
       это системная подсветка Chrome `-webkit-tap-highlight-color`, по умолчанию
       rgba(0,0,0,.18) (замер). Внутри карточки мы её уже гасим своим сбросом, но меню, шторка
       корзины и подвал лежат ВНЕ скоупа .nb-pdp — поэтому гасим на всей странице песочницы.
       Взамен нажатый пункт меню подчёркивается: подчёркивание идёт по ТЕКСТУ, а не по блоку,
       даже когда сама ссылка display:block во всю ширину колонки. */
/*     ⚠ Val 05.10: «Меню при клике подчеркивает элементы, надо убрать это» — подчёркивание нажатого пункта
       (просьба 13.09) снято. Системная заливка тапа по-прежнему погашена: нажатие в меню теперь без следа. */
/*     ⚠ Val 09.10 (скрин карточки): голубая заливка на строке «Частинами по … Деталі» — это `div`/`span` с
       обработчиком нажатия (cursor:pointer), а не ссылка или кнопка, и перечень выше её не ловил (замер: computed
       rgba(51,181,229,.4) у строки и у <html>). Свойство НАСЛЕДУЕТСЯ: ставим его корню страницы песочницы — так
       прозрачная подсветка у ЛЮБОГО нажимаемого узла темы, что бы им ни было; перечень оставлен для узлов, где
       тема или чужой стиль задали цвет явно. Фокус клавиатуры (outline) это свойство не трогает.
       Лом: `nb-lom-tap-hl` на <html> — прежний перечень без корня. */
html:not(.nb-lom-tap-hl),
a, button, summary, label, [role="button"], [role="tab"], [role="option"] {
  -webkit-tap-highlight-color: transparent;
}

/* 15. Подвал — по общей сетке шаблона.
       Val 13.09: «подвал: боковые отступы по общей сетке шаблона, ориентир — меню». Замер на
       телефоне: содержимое меню стоит на 15, тело карточки на 15, а подвал на 20 — в собранном
       стиле шаблона поля подвала записаны числами (40px на десктопе, 20px на телефоне), мимо
       общего гуттера. Вес берём родителем, без !important.
       ⚠ Правим ТОЛЬКО телефон. На десктопе подвал и так стоит на 40 — ровно там же, где шапка
       (её поле в том же собранном стиле тоже записано числом 40).
       ⚠ ОБНОВЛЕНО 18.09. Прежняя редакция этого комментария говорила: «перевод подвала на
       --nb-gutter увёл бы его на 37.4 и разошёлся бы с шапкой». Вывод был верным для подвала и
       НЕВЕРНЫМ как правило: расходился не подвал, а ВСЁ ОСТАЛЬНОЕ. Наши блоки жили на `2.6vw`,
       а хром страницы — на числе 40, и на 1280 кромки расходились на 6.7px (жалоба Val: «везде
       какой-то отступ в 7-8 пикселей»). Поэтому 18.09 токен на десктопе зафиксирован
       (`--nb-gutter: 40px` при `min-width: 993px`, tokens.css) — теперь блоки, шапка и подвал
       стоят на одной мерке при ЛЮБОЙ ширине, и это правило можно было бы снять. Оставлено:
       на телефоне тема пишет подвалу 20px, а общий отступ 15px. */
@media (max-width: 992.98px) {
  footer .footer__inner { padding-inline: var(--nb-gutter); }
}

/* 16a. Закладка избранного в шапке — ВСЕГДА контур (Val 25.09: «не закрашена чёрным, как сейчас,
        а просто контур»). У пути в спрайте нет своего `fill`, и SVG по умолчанию заливал его чёрным.
        Добавили вещь в избранное — на миг заливка и +2 px (масштаб 1.2 от 10×14), затем обратно в
        контур: наблюдатель счётчика в `nb-sandbox.js` ставит `.nb-fav-pulse`, когда число ВЫРОСЛО. */
.header .header__action-icon--wishlist { fill: transparent; transform-box: fill-box; transform-origin: 50% 50%; }
.header .header__action--wishlist.nb-fav-pulse .header__action-icon--wishlist { animation: nb-fav-pulse 1.1s cubic-bezier(.2, .7, .3, 1); }
@keyframes nb-fav-pulse {
  0%   { fill: transparent; transform: scale(1); }
  18%  { fill: currentColor; transform: scale(1.2); }
  55%  { fill: currentColor; transform: scale(1); }
  100% { fill: transparent; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .header .header__action--wishlist.nb-fav-pulse .header__action-icon--wishlist { animation: nb-fav-fill 1.1s linear; }
  @keyframes nb-fav-fill { 0%, 100% { fill: transparent; } 15%, 60% { fill: currentColor; } }
}

/* 16a. Значки шапки со счётчиком «(N)» — БЕЗ подчёркивания при наведении (Val 01.10: «при наведении на иконки корзины и
        вишлиста не подчёркивать цифры»). Подчёркивание ставит тема самой ссылке `a.header__action:hover`, и оно
        протягивается на цифры внутри: снять его у потомков нельзя, только у ссылки. Проба `qa_header_desktop_icons.py` Ш5. */
.header .header__action:hover, .header .header__action:focus-visible { text-decoration: none; }

/* 16b. Шапка ПК — ИКОНКАМИ, как на телефоне (Val 01.10: «иконки надо было менять в хедере… вместо текста адаптировать
        с мобайла иконки» — это вариант A вопроса 30.09: ☰ и 🔍 значками, «Увійти» — в меню, справа закладка и сумка
        со счётчиками). Тема (`dist/app.css`) до 1023.98 px рисует значки, с 1024 — слова; здесь с 1024 возвращаем
        значки ТЕМИ ЖЕ правилами, что у телефона. Шапка ПК выше (её высота — тема), значки того же размера.
        Лом пробы `qa_header_desktop_icons.py`: класс `nb-lom-header-text` на <html> — прежние слова. */
@media (min-width: 1024px) {
  html:not(.nb-lom-header-text) .header .header__menu-icon { display: none; }
  html:not(.nb-lom-header-text) .header .header__menu-icon--mobile { display: block; width: var(--nb-icon, 24px); height: var(--nb-icon, 24px); }
  html:not(.nb-lom-header-text) .header .header__menu-btn > span { display: none; }
  html:not(.nb-lom-header-text) body.is-menu-open .header .header__menu-icon--mobile { display: none; }
  html:not(.nb-lom-header-text) body.is-menu-open .header .header__menu-icon--close { display: block; width: var(--nb-icon, 24px); height: var(--nb-icon, 24px); }
  html:not(.nb-lom-header-text) .header .header__action--search { display: none; }
  html:not(.nb-lom-header-text) .header .header__action--search-mobile { display: inline-flex; }
  /* Вход на ПК — иконкой справа, ПЕРВОЙ в группе (Val 01.10: «иконку разместить наверху справа с другими иконками»;
     плашку входа из меню ПК убрали, §18b). У вошедшего слева от неё «Вітаємо, Имя» (§16c, js §10 paintHello). */
  html:not(.nb-lom-header-text) .header .header__action--account { display: inline-flex; align-items: center; gap: var(--nb-space-2, 8px); order: -1; }
  html:not(.nb-lom-header-text) .header .header__action-icon:not(.header__action-icon--x) { display: block; width: var(--nb-icon, 24px); height: var(--nb-icon, 24px); }
  html:not(.nb-lom-header-text) .header .header__action .header__action-icon--cart { width: 13px; height: 12px; }   /* вес как у правила выше */
  html:not(.nb-lom-header-text) .header .header__action--wishlist { display: inline-flex; align-items: center; gap: 4px; }
  html:not(.nb-lom-header-text) .header .header__action--wishlist .header__action-icon--wishlist { width: 8.31px; height: 12px; stroke-width: .8; }
  html:not(.nb-lom-header-text) .header .header__action-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html:not(.nb-lom-header-text) .header .header__nav-right { gap: var(--nb-space-3, 16px); }
}
html.nb-lom-header-text.nb-lom-cart-look .header .header__action.is-nb-drawer .header__action-icon--x { right: auto; left: 50%; transform: translate(-50%, -50%); }

/* 16d. Шапка ПК: каждая кнопка — КЛЕТКА во всю высоту шапки, наведение = серая подложка + линия снизу (Val 05.10,
        12985, кадр &Other Stories: «выделять его область во всю высоту хедера, в квадратной форме и с подчеркиванием
        снизу»; 12987: «чуть увеличить расстояние между иконками»). Клетка = значок + 18 px с боков → у значков 24 px
        квадрат 60×60 (высота шапки), у «(N) сумки» чуть шире. Шаг значков 40 → 60 px — это и есть «расстояние больше».
        ⚠ КРОМКИ НЕ СДВИГАЮТСЯ: группы уходят на те же 18 px в поле страницы, и первый значок стоит на 40 px, последний
        кончается на ширине минус 40, ровно как крошки и подвал (Val 18.09, «отступ 7-8 px везде»).
        ⚠ Подложка — только на устройствах с мышью (`hover: hover`): на планшете от 1024 залипший после тапа :hover
        оставил бы серую клетку. Клавиатура (`:focus-visible`) получает тот же вид везде.
        Телефон не тронут. Проба `qa_header_hover.py`, лом — класс `nb-lom-header-flat` на <html> (прежняя шапка). */
@media (min-width: 1024px) {
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header { --nb-hdr-pad: 18px; }
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__inner { align-self: stretch; }
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-left,
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-right { align-self: stretch; align-items: stretch; gap: 0; }
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-left { margin-inline-start: calc(-1 * var(--nb-hdr-pad)); }
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-right { margin-inline-end: calc(-1 * var(--nb-hdr-pad)); }
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__menu-btn,
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__action {
    position: relative; box-sizing: border-box; min-height: 0; padding-inline: var(--nb-hdr-pad);
    justify-content: center; align-items: center;
    transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  /* Клавиатура: линия снизу + штатная рамка темы (`:where(:focus-visible)`, outline 2px), подложки НЕТ (Val 10.10: серая
     плашка — только наведение мышью). Только с клавиатуры (`nb-kbd` ставит первый Tab, js §kbd) и не там, куда фокус
     вернула закрытая пальцем/мышью шторка (`data-nb-focus-quiet`, §20a). */
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) body.nb-kbd .header .header__menu-btn:focus-visible:not([aria-expanded="true"]):not([data-nb-focus-quiet]),
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) body.nb-kbd .header .header__action:focus-visible:not([aria-expanded="true"]):not([data-nb-focus-quiet]) {
    box-shadow: inset 0 calc(-1 * var(--nb-hdr-line)) 0 currentColor;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__menu-btn:hover:not([aria-expanded="true"]),
  html:not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__action:hover:not([aria-expanded="true"]) {
    background-color: var(--nb-gray-100, #F5F5F5); box-shadow: inset 0 calc(-1 * var(--nb-hdr-line)) 0 currentColor;
  }
}
/* 16e. ОТКРЫТАЯ накладка шапки — у её кнопки ТОЛЬКО линия снизу, без серой подложки, на ПК и на телефоне (Val 10.10:
        «при открытом попапе элементов хедера надо держать… выделенный элемент как при ховере… но без серой плашки,
        серую плашку только при ховере на десктопе… полоску подчёркивания можно чуть менее жирной сделать»).
        «Открыта» — одно определение: `aria-expanded="true"` на самой кнопке. Его уже ставит владелец каждой накладки
        (меню — menu.js, поиск — search.js, корзина и избранное — шторка nb-sandbox.js §9 `markHeader`) и снимает при
        закрытии; своих классов «открыто» под каждый попап здесь нет. Подложка наведения и фокуса (§16d) открытую кнопку
        обходит (`:not([aria-expanded="true"])`), поэтому курсор, оставшийся на ней после клика, плашку не включает,
        а наведение на СОСЕДНЮЮ кнопку красит соседнюю. Толщина линии — одна на шапку, `--nb-hdr-line` (было 2 px).
        Проба `_review/shift93/header-active/qa_header_open.py`, лом — прежний CSS (подмена файла). */
.header { --nb-hdr-line: 1.5px; }
html:not(.nb-lom-header-text) .header .header__menu-btn[aria-expanded="true"],
html:not(.nb-lom-header-text) .header .header__action[aria-expanded="true"] {
  background-color: transparent; box-shadow: inset 0 calc(-1 * var(--nb-hdr-line)) 0 currentColor;
}
/* §16f. ПК (секция здесь, а не в конце файла: в конец дописывает rd/header-icon-shrink — слияние спотыкалось): «Обране» и корзина — ТОЙ ЖЕ ширины, что одиночные значки шапки, содержимое по центру подсветки (Val 12.10, скрин ПК:
   «выделение на десктопе шире, чем остальные иконки — я про корзину и избранное; плюс сами иконки не оцентрованы по ширине
   выделения»). Было: 84 px против 60 у меню/поиска/кабинета — запас счётчика 4ch (Val 07.10, 13362) стоял слева от «(0)»
   пустыми 16 px, и «(0) значок» сидел правее центра. Ширина — то же определение, что у одиночной кнопки (2 × отступ шапки +
   значок): соседи по-прежнему не двигаются при смене числа (ширина кнопки фиксирована), запас 4ch на ПК не нужен.
   Значок стоит у ПРАВОГО поля клетки (отступ шапки), «(N)» растёт от него влево (ревью site-git MED-1, смена 101): при
   центрировании всего «(N) значок» правый край сумки гулял от числа (1440: «(0)» 1387.9, «(12)» 1390.4, «(123)» 1394.4,
   скрыт 1377.4) — а он обязан стоять там же, где на бою при любом числе (кромки не сдвигаются, §16d, Val 18.09).
   Ширину значка нигде не повторяем: прижим — `flex-end` + поле, число в потоке. Остаток: «(0) значок» левее центра
   подсветки на 2.9 px, «(12)» — 5.4, «(123)» — 9, скрытое число — значок правее центра на 7.6 (замер 1100/1440/1920, _review/shift102/hdr/hdr_edge_probe.py). Лом пробы: `nb-lom-hdr-equal` на <html>. */
@media (min-width: 1024px) {
  html:not(.nb-lom-hdr-equal):not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-right .header__action--wishlist,
  html:not(.nb-lom-hdr-equal):not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-right .header__action--cart {
    width: calc(2 * var(--nb-hdr-pad) + var(--nb-icon, 24px)); padding-inline: 0 var(--nb-hdr-pad); justify-content: flex-end;
  }
  html:not(.nb-lom-hdr-equal):not(.nb-lom-header-text):not(.nb-lom-header-flat) .header .header__nav-right .header__action > .header__count { min-width: 0; flex-shrink: 0; }   /* «(123)» не влезал в поле (30 из 29.2 px) и сжимался — текст лез на значок; теперь лишнее уходит влево за клетку */
}
/* Попап «Додано в кошик» (ПК, §28) — часть корзины. Второй признак осознанно: его владелец (nb-sandbox.js addedShow) уже ставит
   `.nb-added.is-open` (по нему же белеет шапка, §28), а JS шапки в задаче 48 не трогаем.
   ⚠ `:has` — ОТДЕЛЬНЫМИ правилами, не в списке выше: браузер без `:has` выбросил бы всю группу, и линия пропала бы у всех
   кнопок. Правило с `:hover` перевешивает подложку наведения §16d на самой корзине. */
html:not(.nb-lom-header-text):has(.nb-added.is-open) .header .header__action--cart {
  background-color: transparent; box-shadow: inset 0 calc(-1 * var(--nb-hdr-line)) 0 currentColor;
}
html:not(.nb-lom-header-text):not(.nb-lom-header-flat):has(.nb-added.is-open) .header .header__action--cart:hover {
  background-color: transparent; box-shadow: inset 0 calc(-1 * var(--nb-hdr-line)) 0 currentColor;
}

/* 16. Шапка и меню (Val 13.09, пункт E).
       «Слева избранное, справа корзина, авторизация — в шторке». На телефоне закладка в шапке
       была не видна вовсе (замер: ширина 0), её место занимал вход. Теперь наоборот: закладка
       стоит перед корзиной, а вход переехал в верхний ряд меню. */
@media (max-width: 992.98px) {
  .header .header__action--wishlist { display: inline-flex; align-items: center; gap: 4px; }
  .header .header__action--wishlist .header__action-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Закладка — ровно как корзина по высоте и толщине линии (Val 27.09: «большая иконка… должна быть по
     высоте ровно такой же и по толщине, как и корзина»). Корзина: высота 12 px из 13 единиц, линия 0.8
     единицы. Закладка в той же мерке: 12 px высоты, ширина по её пропорции 9:13, та же линия 0.8. */
  .header .header__action--wishlist .header__action-icon--wishlist { width: 8.31px; height: 12px; stroke-width: .8; }
  /* Вход из шапки убран — он в меню. Узел оставляем: им пользуется тема (имя, статус). */
  .header .header__action--account { display: none; }

  /* ⚠ Зона нажатия действий шапки. Замер на живом деве (390×844, Pixel-профиль):
     «Обране (0)» 29×14, «Кошик (0)» 32×13, кнопка меню 24×24, padding у всех 0, min-height auto —
     при токене --nb-tap 50px и высоте самой шапки 50px. То есть палец целится в полоску
     в 13-14 пикселей посреди пустого места, которое ни на что не реагирует.
     Замер соседней сессии (кабинет/блог) — тот же, снят независимо.

     ⚠ Почему только min-height и ничего больше: элементы УЖЕ `display: flex; align-items: center`
     (проверено computed-стилями на странице, а не по исходнику). Менять display, как
     предлагалось, значило бы трогать baseline текста без нужды. Растягиваем по высоте шапки —
     вид не меняется, текст остаётся по центру, реагирует вся высота.
     ⚠ Правило живёт ЗДЕСЬ, а не в src/components/header/header.css: там min-height есть
     (строки 36 и 86), но тот файл до этой страницы не доезжает — шапку рисует тема.

     ⚠ ЗАПАСНОЕ ЗНАЧЕНИЕ ОБЯЗАТЕЛЬНО, и это не перестраховка. Замер 17.09: на /ua/size_table/,
     /ua/delivery_payment/ и /ua/diskontnyy_klub/ файл токенов не подключён вовсе —
     `--nb-header-h-m` и `--nb-gutter` там ПУСТЫ, и правило молча не работало (бургер остался
     24×24 при 24×50 в каталоге). `var()` без запасного значения делает объявление
     недействительным целиком. Нашла это соседняя сессия, проверено независимо обеими.
     ⚠ В этом файле ещё 19 таких `var()` без запасного — общий долг, разбирать отдельно;
     подключение токенов на уровне ШАБЛОНА поменяет вид тех трёх страниц, это решение Val. */
  /* ⚠ И ВЫРАВНИВАНИЕ ПО ЦЕНТРУ — обязательно вместе с высотой. Комментарий выше обещал «вид
     не меняется, текст остаётся по центру»: для текстовых кнопок это правда (их держит
     line-height), а для кнопки поиска — нет, внутри неё только <svg> 24×24. Растянув коробку
     до 50, мы оставили значок у ВЕРХНЕЙ кромки: замер 17.09 — центр значка 32 при центре
     кнопки 45, то есть на 13 px выше соседей. Val увидел это сам: «в хедере иконку поиска,
     она слетела вверх». У «Обране» и «Кошик» центрирование прописано своими правилами, потому
     поехал ровно поиск. */
  .header .header__action,
  .header .header__menu-btn { min-height: var(--nb-header-h-m, 50px); align-items: center; }
}
/* 993–1023.98: тема держит здесь ещё телефонную шапку (до 1023.98), а растяжение выше кончалось на 992.98 — кнопки
   оставались 13–24 px по высоте, и линия открытой накладки (§16e) рисовалась на 19 px выше низа шапки (замер 10.10,
   1000 px, ревью Codex r1 №3). Только высота и центр, раскладку этой полосы не трогаем. */
@media (min-width: 993px) and (max-width: 1023.98px) {
  .header .header__action,
  .header .header__menu-btn { min-height: var(--nb-header-h-m, 50px); align-items: center; }
}

/* Верхний ряд полноэкранного меню: закрыть · кабинет · поиск · корзина.
   Ритм от Zara: иконки в строку, закрытие слева, остальное справа, тонкая линия снизу. */
.nb-menu-top {
  display: flex; align-items: center; gap: var(--nb-space-5);
  padding: var(--nb-space-4) var(--nb-gutter);
  border-bottom: 1px solid var(--nb-gray-100, #eee);
}
.nb-menu-top__btn {
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
/* закрытие слева, три остальных прижаты вправо */
.nb-menu-top__btn:nth-child(2) { margin-left: auto; }
.nb-menu-top__btn svg { width: 20px; height: 20px; display: block; }
.nb-menu-top__count { font-size: 12px; line-height: 1; }

/* Шапка уезжает вверх на прокрутке вниз (каталог, E3). Правило есть в прототипе, но шапка в
   песочнице чужая и его сборка сюда не входит — держим здесь. Переход тот же, что у цвета. */
.header--unpinned { transform: translateY(-100%); }
.header { transition: transform 240ms ease, background-color 240ms ease, color 240ms ease; }

/* ── Каталог: шапка и панель фильтров уезжают ВМЕСТЕ ────────────────────────────────────────
   Val 01.10 17:56 (смена 51), кнопкой «Шапку и тулбар вместе»: «когда листаю вниз и прохожу
   уровень тулбара — не закреплять; показывать, когда начинаю свайпать вверх, но не сразу».
   Это отменяет решение 17.09 «хедер всегда закреплён, уходит только топ-бар». Когда прятать —
   решает nb-sandbox.js §17 (только когда панель уже прилипла; вернуть — 100 px вверх подряд).

   Здесь — как уезжает панель. Без этого правила она при уехавшей шапке оставалась бы на месте
   и висела бы на 50 px над пустотой (замер 01.10: шапка −50..0, панель 50..98).
   · Сдвиг = своя высота + кромка, на которой она стоит: панель уходит целиком за верх экрана.
   · `top` при этом НЕ меняется (замер: --nb-toolbar-top на <body> не зависит от класса шапки),
     поэтому прыжка нет — едет один transform, композитором.
   · Длительность и кривая — как у шапки (240 мс ease, правило выше). У панели было 500 мс от
     прототипа: тогда шапка уходила бы, а панель догоняла бы её вдвое дольше.
   · Панель ниже шапки по z-index, поэтому по дороге она прячется ПОД шапку, а не наезжает.
   Вес: правило бандла каталога `:is(#nb-catalog,.nb-cat-host).nb-cat .catalog-toolbar__bar`
   весит (1,2,0), наше — (1,2,2) и (1,3,1). */
html body :is(#nb-catalog, .nb-cat-host).nb-cat .catalog-toolbar__bar {
  transition: transform 240ms ease;
}
/* ⚠ С 02.10 (Val, кнопка «Шапка всегда, тулбар уезжает и возвращается вверх») уезжает ТОЛЬКО тулбар: класс
   `is-toolbar-unpinned`. Сдвиг тот же — за верх экрана, под шапку (она выше по z-index и стеклянная, поэтому
   спрятать «за шапкой» на месте нельзя: 6% прозрачности и размытие показали бы его тенью). */
body.is-toolbar-unpinned :is(#nb-catalog, .nb-cat-host).nb-cat .catalog-toolbar__bar {
  transform: translateY(calc(-100% - var(--nb-toolbar-top, 0px)));
}
/* Мгновенная постановка на место (nb-sandbox.js §17, `pin(…, true)`): уход из каталога, скачок выше
   уровня панели, открытая шторка. Класс живёт одно синхронное переключение — переход снят ровно на него. */
body.nb-hdr-snap .header,
body.nb-hdr-snap :is(#nb-catalog, .nb-cat-host).nb-cat .catalog-toolbar__bar { transition: none !important; }

/* 17. Попап «Додано в обране» (Val 13.09, пункт D): маленький лист снизу, под заголовком —
       сетка рекомендованных в две колонки; видно один-два ряда, остальное прокруткой.
       Карточки внутри — копии тех, что уже стоят на странице, поэтому сетке нужен скоуп
       (.nb-pdp.nb-pdp-host), иначе плитка поедет голой разметкой. */
.nb-fav-added {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 1200;
  /* ⚠ Лист держим МАЛЕНЬКИМ: Val просил «маленький попап снизу», а не занавес на весь экран.
     58vh — это заголовок, один полный ряд советов и краешек второго: сразу видно, что ниже
     есть ещё, и рука сама тянется прокрутить. */
  max-height: 58vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--nb-space-4) var(--nb-gutter) var(--nb-space-5);
  background: var(--nb-paper, #fff);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 260ms ease;
}
.nb-fav-added.is-open { transform: translateY(0); }
.nb-fav-added__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-3); }
.nb-fav-added__title { font-size: var(--nb-fs-base, 14px); font-weight: 600; }
.nb-fav-added__close { font-size: 22px; line-height: 1; background: none; border: 0; padding: 0 4px; cursor: pointer; color: inherit; }
.nb-fav-added__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin-top: var(--nb-space-4);
}
.nb-fav-added__grid[hidden] { display: none; }
.nb-fav-added__grid .product-card { width: auto; }
/* Кнопка «Переглянути обране» прилипает к низу листа: сколько бы ни было советов, до неё
   не надо докручивать. */
.nb-fav-added__link {
  position: sticky; bottom: 0;
  display: block; width: 100%; min-height: 45px; margin-top: var(--nb-space-4);
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--nb-ink, #000); background: none; cursor: pointer;
  border: 1px solid var(--nb-ink, #000);
}
@media (min-width: 993px) {
  .nb-fav-added { right: var(--nb-gutter); left: auto; bottom: var(--nb-gutter); width: 420px; max-height: 64vh; }
  .nb-fav-added:not(.is-open) { transform: translateY(calc(100% + var(--nb-gutter))); }
}

/* ── 12. Личный кабинет: беглая уборка ──────────────────────────────────────
   Val 13.09: «там личный кабинет сломан. Можешь его по-быстрому починить так, чтобы чистенько
   хотя бы было, хоть чтобы кнопочки нажимались?». Замер под вошедшим пользователем: страница
   .lk-page идёт вообще без оформления — пункты меню кабинета 16 px высотой и прижаты к левому
   краю, поля формы без размеров, а плитки избранного разворачиваются во всю ширину вместе с
   панелью быстрой покупки (один товар занимал 1363 px).
   Это НЕ редизайн кабинета, а именно уборка: поля и кнопки нажимаемого размера, поля страницы
   по сетке, плитки в два столбца. Настоящий кабинет делается отдельно (он в пакете Val'а
   отдельным пунктом и в задаче #1957). */
.lk-page {
    max-width: 720px;
    margin-inline: auto;
    padding: 20px 15px 48px;
}

/* Меню кабинета — строки, а не строчки текста */
.lk-page .lk-menu ul { margin: 0 0 8px; padding: 0; list-style: none; }
.lk-page .lk-menu li { border-bottom: 1px solid #e6e6e6; }
.lk-page .lk-menu li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: #000;
    font-size: 15px;
}
.lk-page .lk-menu li.log-out a { color: #8a8a8a; }

/* Заголовки разделов */
.lk-page .lk-tit {
    margin: 28px 0 12px;
    color: #8a8a8a;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lk-page .basket-all-info { font-size: 14px; }

/* Форма «Особисті дані» */
.lk-page .one-order-form { margin-bottom: 14px; }
.lk-page .one-order-tit { margin-bottom: 6px; color: #8a8a8a; font-size: 12px; }
.lk-page input[type="text"],
.lk-page input[type="email"],
.lk-page input[type="tel"],
.lk-page input[type="password"],
.lk-page select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    background: #fff;
    font: inherit;
    font-size: 15px;
}
.lk-page .lk-info-data label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lk-page .save-lk { margin-top: 18px; }
.lk-page .save-lk a,
.lk-page .save-lk button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    background: #000;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Списки товаров: два столбца, кадр по ширине плитки */
.lk-page .my-fav,
.lk-page .your-hist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}
.lk-page .my-fav .one-news,
.lk-page .your-hist .one-news { min-width: 0; }
.lk-page .one-cat-thumb { position: relative; }
.lk-page .one-cat-thumb img { display: block; width: 100%; height: auto; }
/* ⚠ Внутри плитки лежит панель быстрой покупки темы (её CSS сюда не доехал) — именно она
   разворачивала «Швидка покупка / Виберіть розмір / 34 Немає в наявності…» списком на весь
   экран. В кабинете она не нужна: прячем всё, кроме кадра и крестика «убрать из обраного». */
.lk-page .one-cat-thumb > *:not(a):not(picture):not(.del-fav) { display: none; }
.lk-page .one-cat-thumb a > *:not(picture) { display: none; }
.lk-page .one-cat-sizes-aval { display: none; }
.lk-page .one-cat-tit { margin-top: 8px; font-size: 14px; line-height: 1.3; }
.lk-page .one-cat-price { margin-top: 4px; font-size: 14px; }
.lk-page .del-fav {
    position: absolute;
    inset: 8px 8px auto auto;
    display: block;
    width: 32px;
    height: 32px;
    background: #fff;
}
.lk-page .del-fav a { display: block; width: 100%; height: 100%; }
.lk-page .del-fav a::before,
.lk-page .del-fav a::after {
    content: "";
    position: absolute;
    inset: 15px 8px auto;
    height: 1px;
    background: #000;
}
.lk-page .del-fav a::before { transform: rotate(45deg); }
.lk-page .del-fav a::after { transform: rotate(-45deg); }

/* Дисконтная программа и подписки */
.lk-page .disc table { width: 100%; border-collapse: collapse; }
.lk-page .disc td { padding: 10px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.lk-page .disc .tr-top td { color: #8a8a8a; font-size: 12px; text-transform: uppercase; }
.lk-page .subs-list .one-subs label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
}
.lk-page .more-items a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 993px) {
    .lk-page { padding: 30px 40px 60px; }
    .lk-page .my-fav,
    .lk-page .your-hist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 13. Попапы темы (вход, «забыли пароль», отзывы) — минимальный вид ──────────
   Новый шаблон не подключает bootstrap.js, поэтому они не открывались вовсе (см. footer.php).
   Мы его вернули — и сразу стало видно, что и bootstrap-CSS тут нет: лист открывался
   прозрачным, текст модалки лёг поверх страницы. Val просил «чистенько, чтобы кнопочки
   нажимались», поэтому даём попапу самый простой honest-вид: белый лист на весь экран,
   поля и кнопки нажимаемого размера. Это не оформление кабинета, а страховка от каши. */
.modal:not([data-component="modal"]):not([data-component="pdp-modal"]).in,
body.modal-open .modal:not([data-component="modal"]):not([data-component="pdp-modal"]) {
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    padding: 20px 15px 40px;
    background: #fff;
}
.modal:not([data-component="modal"]) .modal-dialog { max-width: 520px; margin: 0 auto; }
.modal:not([data-component="modal"]) .modal-content { background: #fff; }
.modal-backdrop { display: none; }          /* лист и так на весь экран, затемнение лишнее */
body.modal-open { overflow: hidden; }
.modal:not([data-component="modal"]) .close,
.modal:not([data-component="modal"]) .close-modal {
    position: absolute;
    inset: 12px 12px auto auto;
    width: 44px;
    height: 44px;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    background: none;
    border: 0;
}
.modal:not([data-component="modal"]) input[type="text"],
.modal:not([data-component="modal"]) input[type="email"],
.modal:not([data-component="modal"]) input[type="tel"],
.modal:not([data-component="modal"]) input[type="password"] {
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    font: inherit;
    font-size: 15px;
}
.modal:not([data-component="modal"]) button,
.modal:not([data-component="modal"]) .btn {
    min-height: 48px;
    padding-inline: 20px;
}
.modal:not([data-component="modal"]) .nav-tabs { display: flex; gap: 20px; margin-bottom: 20px; padding: 0; list-style: none; }
.modal:not([data-component="modal"]) .nav-tabs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

/* Вкладки попапа: без bootstrap-CSS все панели показывались разом — «Вхід» и «Реєстрація»
   сыпались одна под другой. Показываем активную. */
.modal:not([data-component="modal"]) .tab-content > .tab-pane { display: none; }
.modal:not([data-component="modal"]) .tab-content > .tab-pane.active { display: block; }
.modal:not([data-component="modal"]) .nav-tabs > li.active a { text-decoration: underline; text-underline-offset: 4px; }
/* Крестик у темы есть (button.close), но без стилей он терялся в потоке. */
.modal:not([data-component="modal"]) button.close {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    margin-left: auto;
    width: 44px;
    height: 44px;
    font-size: 28px;
    line-height: 1;
    background: #fff;
    border: 0;
}

/* 23. Попап вибору мови (Val 14.09: «очень не хватает попапа переключения языка, как в шторке
       так и в футере»).

       ⚠ Разметка (include/modals/langs.php) и три кнопки [data-modal-open="region-selector"]
       (шторка меню, подвал десктоп, подвал мобайл) лежали в шаблоне с 13.09, и открывал их
       СВОЙ модальник темы-песочницы (resources/js/vanilla/modal.js) — снятием [hidden].
       Не было ровно одного: ПРАВИЛ ВИДА. У темы `.modal` — это бутстраповский попап, а сам
       бутстрап этот шаблон не грузит (rule_check_library_loaded_before_fixing_theme_markup),
       поэтому узел показывался куском разметки в потоке подвала, без подложки и позиции —
       то есть «попапа нет», как Val и сказал.

       Поэтому вид написан на ОТСУТСТВИИ [hidden], без классов состояния: классов тот
       компонент не ставит, и придумывать их значило бы городить второй механизм рядом.
       Затемнение и кривая — те же, что у шторки корзины (Val 13.09: «сделай во всех попапах
       такое же затемнение»). Телефон — лист снизу, десктоп — окно по центру: выбор из двух
       строк не стоит панели во весь экран. */
.modal[data-component="modal"] {
    position: fixed;
    inset: 0;
    z-index: 320;            /* выше шторки корзины (300) и панели меню (200) */
    display: block;
}

.modal[data-component="modal"][hidden] {
    display: none;
}

.modal[data-component="modal"] .modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.22);
    animation: nb-lang-fade 0.25s ease both;
}

.modal[data-component="modal"] .modal__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    background-color: rgb(255 255 255 / 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);   /* Safari/iOS: без префикса стекла нет */
    animation: nb-lang-rise 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes nb-lang-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes nb-lang-rise {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.modal[data-component="modal"] .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.modal[data-component="modal"] .modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* 29. Подчёркнутые кнопки в модалках темы — линия у текста, как везде (Val 01.10: «подправить подчёркивания, чтоб были
       как везде, и если ещё где-то есть такие стили — везде, а не там, где я нашёл»). Тема даёт ЛЮБОЙ кнопке модалки
       зону нажатия `min-height: 48px` (`.modal:not([data-component="modal"]) button`), и нижняя рамка-подчёркивание
       уходит к низу этой зоны: замер 01.10 — 19.8 px от текста у «Закрити» и «Підібрати розмір» в попапе размера,
       против 7 px у «Закрити» корзины. 17.09 это гасили только у карточки (`scope.css` §8.2, `.nb-pdp`) — каталог,
       «Новинки» и замена размера из корзины остались. Теперь ОДНО правило на все хосты.
       «Закрити» на телефоне — ручка-полоска (§8.1 scope.css), ей зону нажатия оставляем: правило только для ПК.
       Проба `tools/qa_underline_gap.py`. */
.modal:not([data-component="modal"]) button.nb-link-underline { min-height: 0; }
/* Карточка товара в модалке выглядит как в листинге (Val 01.10: размер в карточке на ПК — «квадрат или горизонтальный
   прямоугольник, не вертикальный»). Замер: в попапе образа кнопки размеров 28×48 против 28×28 в каталоге — зона нажатия
   темы выше накрывала и кнопки карточки (наши попапы `pdp-modal` тоже «не modal»). Своей высоты у кнопок карточки нет
   нигде, поэтому снимаем только чужую. Проба `tools/qa_card_buttons_in_modal.py`. */
.modal:not([data-component="modal"]) .product-card button { min-height: 0; }
@media (min-width: 993px) {
    .modal:not([data-component="modal"]) button.modal__close { min-height: 0; }
}

.modal[data-component="modal"] .modal__close {
    padding: 6px 0;
    font: inherit;
    font-size: 13px;
    color: #666;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Поле выбора: у темы .field и .select не описаны вовсе — без этих правил список выпадал
   системным, без рамки и высоты под палец. */
.modal[data-component="modal"] .select {
    position: relative;
    display: block;
}

.modal[data-component="modal"] .select__control {
    width: 100%;
    min-height: 48px;
    padding: 0 40px 0 14px;
    font: inherit;
    font-size: 15px;
    color: inherit;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
}

.modal[data-component="modal"] .select__control:focus-visible {
    outline: 2px solid #000;
    outline-offset: 1px;
}

.modal[data-component="modal"] .select__icon {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 12px;
    height: 12px;
    pointer-events: none;
    transform: translateY(-50%);
}

@media (min-width: 993px) {
    .modal[data-component="modal"] .modal__panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: 360px;
        padding: 22px;
        animation: nb-lang-pop 0.2s ease both;
    }

    @keyframes nb-lang-pop {
        from { opacity: 0; transform: translate(-50%, -46%); }
        to   { opacity: 1; transform: translate(-50%, -50%); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal[data-component="modal"] .modal__overlay,
    .modal[data-component="modal"] .modal__panel {
        animation-duration: 0.01ms;
    }
}

/* 24. Смужка «сайт доступний іншою мовою» (Val 14.09: «если первая сессия пользователя на /
       мы его будем предупреждать и предлагать переключиться»).

       Внизу екрана, а не зверху: зверху вона зсунула б шапку і весь перший екран, а це
       стрибок верстки на найдорожчому кадрі. Внизу вона нічого не рухає — лежить поверх.
       Показує її JS (§24), знімаючи [hidden]; поки людина не вирішила, куки немає. */
.nb-langbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 310;            /* над шторкою корзини (300), під попапом мови (320) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background-color: rgb(255 255 255 / 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);   /* Safari/iOS: без префікса скла немає */
    border-top: 1px solid #e6e6e6;
    animation: nb-langbar-rise 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.nb-langbar[hidden] {
    display: none;
}

/* Пока открыто меню — смужки нет (смена 41): вона лежала ПОВЕРХ меню (310 над 200) і закривала його низ
   ~93 px разом із кнопкою мови — дотик забирала смужка. У меню своя кнопка мови; закрили меню — смужка
   повертається, рішення людини вона не забуває. Те саме — поки меню тягнуть пальцем і поки воно
   від'їжджає (круг 5 Codex: у ці вікна `is-menu-open` ще/вже немає, а меню видно). */
body.is-menu-open .nb-langbar,
body.is-menu-dragging .nb-langbar,
body.is-menu-closing .nb-langbar {
    display: none;
}

@keyframes nb-langbar-rise {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.nb-langbar__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}

.nb-langbar__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.nb-langbar__go {
    min-height: 40px;
    padding: 0 18px;
    font-size: 13px;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #000;
}

.nb-langbar__stay {
    padding: 8px 0;
    font: inherit;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .nb-langbar { animation-duration: 0.01ms; }
}

/* 23. Строка ответа под формой подписки в подвале.
   Подвал оформляет тема (dist/app.css), нашего компонента там нет — поэтому правило живёт
   здесь, в единственном нашем файле, который подключён на КАЖДОЙ странице сайта.
   До 15.09 строки не было вовсе: форма слала обычный POST на несуществующий адрес, и вместо
   ответа человек получал страницу 404. */
.footer__form-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #e08b84;                      /* ошибка — состояние по умолчанию для этой строки */
}
/* ⚠ Успех ЗАМЕНЯЕТ форму, а не приписывается под ней (Val 15.09: «фидбек конечно такой себе»).
   Мелкая серая строка под кнопкой слипалась с соседней подписью про отписку и читалась как
   продолжение абзаца, а поле с кнопкой оставались на месте — будто ничего не случилось. */
.footer__subscribe.is-subscribed .footer__form { display: none; }
.footer__subscribe.is-subscribed .footer__form-note {
    margin: 0 0 var(--nb-space-2, 8px);
    font-size: 16px;
    line-height: 1.35;
    color: #fff;
}
.footer__form-note.is-ok { color: #fff; }
@media (min-width: 993px) {
    .footer__form-note { max-width: 520px; }
}

/* 25. Прозора шапка над hero: плашка біліє від КНОПОК, а не від усієї смуги.
       Val 18.09: «при ховері не повинна ставати плашка білою; вона має біліти тільки при
       наведенні на меню і на кнопки з правого боку».

       ⚠ Правило, яке це робило, живе в ЗІБРАНОМУ стилі теми (`dist/app.css`):
       `.header--transparent:hover{background-color:#fff;color:#000}`. Перебудувати його з
       нашого `src/` не можна — файли теми з `src/` не збираються. Тому скасовуємо його тут,
       і тільки там, де браузер уміє `:has()`. Де не вміє — лишається колишня поведінка, тобто
       нікому не стало гірше.

       ⚠ Зліва цілимось у САМІ КНОПКИ, а не в групу: між «Меню» і «Пошук» є проміжок, і
       наведення на порожнє місце між ними не має нічого вмикати. Справа група щільна, там
       достатньо самої групи. */
@supports selector(:has(*)) {
  .header--transparent:hover { color: var(--nb-paper, #fff); background-color: transparent; }
  .header--transparent:has(.header__menu-btn:hover),
  .header--transparent:has(.header__nav-left .header__action:hover),
  .header--transparent:has(.header__nav-right:hover) {
    color: var(--nb-ink, #000);
    background-color: var(--nb-paper, #fff);
  }
}

/* 26. Свайп меню: біла шапка — з ПЕРШОГО пікселя жесту, а не після відпускання.
       Val 23.09: «як тільки я починаю свайпати вправо, хедер одразу має з'являтися… білий хедер
       швидше, ніж панель». Жест (`nb-sandbox.js`, `begin`) веде панель інлайновим transform, а
       стан шаблону (`is-menu-open`, від якого біліє прозора шапка) ставиться лише наприкінці
       ходу програмним кліком. На час жесту шапку тримає `is-menu-dragging`; перехід 120 мс тією
       ж кривою, що й у шторки пошуку (девопс 2, `nb-search-lead`), — шапка обганяє панель. */
body.is-menu-dragging .header--transparent {
  color: var(--nb-ink, #000);
  background-color: var(--nb-paper, #fff);
  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 120ms cubic-bezier(0.23, 1, 0.32, 1),
              transform var(--nb-motion-slow);
}

/* 26a. Доводка меню ПІСЛЯ відпускання (задача 42, круг 11): `is-menu-dragging` тепер = «палець на екрані» і знімається
        на відпусканні (пошук слухає саме його й закривався, коли людина відкривала його вже після свайпу, — фаззер
        круга 11, #174). Поки панель доїжджає до кліку шаблону, білу шапку й сховану смужку мови тримає окремий признак
        `is-menu-settling` (ставить `finish`, знімає уборка `settleMenu`). Окремим блоком, правила §26 не чіпаємо. */
body.is-menu-settling .header--transparent {
  color: var(--nb-ink, #000);
  background-color: var(--nb-paper, #fff);
  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 120ms cubic-bezier(0.23, 1, 0.32, 1),
              transform var(--nb-motion-slow);
}
body.is-menu-settling .nb-langbar {
    display: none;
}

/* 27. Корзина и избранное — шторкой СПРАВА под шапкой (Val 30.09, образец &Other Stories).
       Шапка при открытой шторке — часть шторки: сплошной белый (как у меню, §12а), а иконка
       открытой вкладки становится × — как бургер у открытого меню. Черты под крестиком нет:
       Val 30.09, «у нас меню и поиск без черты». Класс `is-nb-drawer` ставит шторка
       (nb-sandbox.js §9, `markHeader`); крестик — вторая иконка той же ссылки (header.php).
       ⚠ Подпись не убираем из дерева, а прячем визуально: у ссылки корзины нет aria-label,
          и `display: none` на подписи лишил бы её имени. */
body.is-cart-open .header:not(.header--transparent) {
  background-color: rgb(255 255 255);
}
body.is-cart-open .header--transparent {
  color: var(--nb-ink, #000);
  background-color: var(--nb-paper, #fff);
}
.header .header__action-icon--x { display: none; }
/* ⚠ НИЧЕГО НЕ ПРЫГАЕТ (Val 30.09: «при открытии и закрытии прыгает вёрстка, иконки… когда
   заменяется на крестик»). Первая редакция прятала число и иконку `display: none` — ссылка
   сужалась с «(0) сумка» до «×», и соседняя закладка съезжала вправо. Теперь содержимое ссылки
   только НЕВИДИМО (место держит), а крестик лежит ПОВЕРХ — ровно по центру иконки, которую
   заменяет (центр иконки = её правый край минус половина ширины: сумка 13 px, закладка 8.3 px;
   замер 390×844). С 01.10 и на ПК иконки (§16b), так что правило одно для всех ширин. */
.header .header__action--cart,
.header .header__action--wishlist { position: relative; }
.header .header__action--cart { --nb-x-half: 6.5px; }
.header .header__action--wishlist { --nb-x-half: 4.15px; }
html.nb-lom-cart-look .header .header__action.is-nb-drawer .header__action-icon--x {
  position: absolute; top: 50%; right: calc(var(--nb-x-half) - var(--nb-icon, 24px) / 2 + var(--nb-hdr-pad, 0px));   /* поле клетки ПК, §16d */
  display: block;
  width: var(--nb-icon, 24px);
  height: var(--nb-icon, 24px);
  transform: translateY(-50%);
}
/* ⚠ Вес селектора счётчика — с запасом: первый кадр показывает его правилом
   `html.nb-count-known .header__count[hidden][data-nb-count-of=…]` (0,4,1, header.php).
   `visibility`, а не `display`: место в строке остаётся за ними. Имя ссылки на это время —
   «Закрити» (aria-label ставит шторка), так что невидимая подпись ничего не отнимает. */
html.nb-lom-cart-look .header .header__action.is-nb-drawer .header__count.header__count,
html.nb-lom-cart-look .header .header__action.is-nb-drawer .header__action-icon:not(.header__action-icon--x),
html.nb-lom-cart-look .header .header__action.is-nb-drawer .header__action-label {
  visibility: hidden;
}
/* ⚠ С 01.10 иконка открытой вкладки НЕ становится × (Val 01.10: «уберем логику, чтобы при клике на корзину
   либо на избранное не менялся крестик, а просто открывалась шторка с выбранным разделом»). Правила × выше
   живут только под ломом `nb-lom-cart-look` (класс на <html>, ставит проба `qa_cart_drawer_look.py`). */
/* «Странно подчёркивает цифру 2» (Val 30.09, телефон: залипший :hover после тапа) — с 01.10 подчёркивания нет на
   ЛЮБЫХ экранах, правило одно: §16a выше. */

/* 28. «Додано в кошик» — попап снизу на ПК (Val 30.09: «на десктопе… добавление в корзину
       попапчик внизу выезжал снизу вверх и показывал рекомендуемые к товару»). Образец —
       «Added to bag» у &Other Stories: заголовок и ×, вещь, «Переглянути кошик», «Продовжити
       покупки»; справа — лента рекомендованных. Показывает nb-sandbox.js §9 (`addedShow`),
       только на ширине от 1024; на телефоне после покупки выезжает сама шторка справа. */
/* ⚠ ПОД ШАПКОЙ, как и шторка корзины (§17): после покупки человек должен ВИДЕТЬ, как выросло
   число в шапке, и шапка остаётся нажимаемой (корзина, избранное, меню). Первая редакция лежала
   на весь экран — подложка накрывала число, и девять судей денежного профиля честно сказали
   «человек числа не видит» (прогон 30.09 смены 45: закрыт сверху `nb-added__overlay`). */
.nb-added {
  position: fixed; inset: 0;
  top: var(--nb-menu-top, 50px);
  z-index: calc(var(--nb-z-panel, 2000) + 100);
}
.nb-added[hidden] { display: none; }
.nb-added:not(.is-open),
.nb-added:not(.is-open) .nb-added__overlay,
.nb-added:not(.is-open) .nb-added__panel { pointer-events: none; }
.nb-added__overlay {
  position: absolute; inset: 0;
  background-color: rgb(0 0 0 / 0.22);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nb-added.is-open .nb-added__overlay { opacity: 1; }
.nb-added__panel {
  position: absolute; right: 0; bottom: 0; left: 0;
  padding: 20px var(--nb-gutter, 40px) 28px;
  background-color: var(--nb-paper, #fff);
  transform: translateY(100%);
  transition: transform var(--nb-motion-drawer, 320ms cubic-bezier(0.22, 1, 0.36, 1));
}
.nb-added.is-open .nb-added__panel { transform: none; }
/* панель получает фокус программно (смена 69, находка 5 Codex) — рамку рисуют её кнопки, а не вся панель */
.nb-added__panel:focus { outline: none; }
/* и панель корзины — фокус в неё при открытии (смена 71, Codex смены 70 раунд 3 №2); без правила с клавиатуры шла
   чёрная рамка 2px по всему краю шторки */
.nb-cart__panel:focus { outline: none; }
/* Одна сетка: [заголовок | заголовок ленты | ×] над [вещь+кнопки | лента]. Левая колонка тянется
   по высоте ленты (align-items: stretch), кнопки прижаты к её низу — низ кнопок = низ ленты. */
.nb-added__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 40px; row-gap: 14px;
  align-items: stretch;
}
.nb-added__title, .nb-added__recs-title { margin: 0; align-self: center; font-size: 14px; color: var(--nb-ink, #000); }
.nb-added__recs-title[hidden] { display: none; }
/* Стрелки ленты — в строке её заголовка, у правого края колонки ленты, левее крестика (Val 05.10: стрелки только
   на уровне заголовка). Ячейку делят заголовок ленты и стрелки, поэтому оба поставлены в неё явно: без явного места
   автораскладка увела бы заголовок в следующую свободную ячейку. На телефоне стрелок нет — там лента под пальцем. */
.nb-added__title { grid-column: 1; grid-row: 1; }
.nb-added__recs-title { grid-column: 2; grid-row: 1; }
.nb-added__nav { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; display: flex; gap: var(--nb-space-2, 8px); }
.nb-added__nav[hidden] { display: none; }
.nb-added__close {
  grid-column: 3; grid-row: 1; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -12px -12px -12px 0; padding: 0;
  border: 0; background: none; color: var(--nb-ink, #000); cursor: pointer;
}
.nb-added__close svg { width: 24px; height: 24px; }
.nb-added__main { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.nb-added__recs { grid-column: 2 / 4; grid-row: 2; min-width: 0; }
.nb-added__item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.nb-added__photo { display: block; aspect-ratio: 2 / 3; background: #f2f2f2; overflow: hidden; }
.nb-added__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-added__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nb-added__name { font-size: 14px; color: var(--nb-ink, #000); text-decoration: none; }
.nb-added__meta, .nb-added__price { margin: 0; font-size: 14px; color: var(--nb-ink, #000); }
.nb-added__meta { color: #8a8a8a; }
/* цвет вещи — только в шторке на ПК (§28в); на телефоне попап прежний (Val 06.10, 13301) */
.nb-added__color { display: none; margin: 0; font-size: 14px; color: var(--nb-ink, #000); }
/* Размер в попапе — кнопка замены (Val 06.10, 13257); зона нажатия 8 px сверху и снизу за счёт полей, строку не раздвигает.
   ⚠ Вес (0,2,0) обязателен: общее `.nb-cart__size { padding: 0 }` стоит НИЖЕ в файле с весом (0,1,0) и сбрасывало поля,
   оставляя только отрицательный отступ — зона была строкой текста (ревью Codex смены 69, находка 7; проба З5). */
.nb-added__meta .nb-added__size { padding-block: 8px; margin-block: -8px; }
.nb-added__actions { margin-top: auto; }
.nb-added__view {
  display: block; width: 100%; min-height: 48px; padding: 0 16px;
  border: 0; background: var(--nb-ink, #000); color: var(--nb-paper, #fff);
  font: inherit; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.nb-added__more {
  display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 0;
  border: 0; background: none; color: var(--nb-ink, #000);
  font: inherit; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.nb-added__recs[hidden] { display: none; }
/* 6.2 плитки в кадре — край седьмой говорит «листай», как 3.2 у ленты шторки (§22); при 6.2 высота
   плитки на 1440 ≈ высоте левой колонки (кадр вещи 120×180 и две кнопки) — колонки ровные */
.nb-added__track {
  --nb-added-gap: 5px;
  display: flex; gap: var(--nb-added-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.nb-added__track::-webkit-scrollbar { display: none; }
.nb-added__track > .product-card,
.nb-added__skel {
  flex: 0 0 calc((100% - 6 * var(--nb-added-gap)) / 6.2);
  width: auto; min-width: 0; scroll-snap-align: start;
}
/* ⚠ Заглушка ТОЙ ЖЕ высоты, что плитка: кадр 2:3 и под ним строки текста (замер 30.09: 390 —
   плитка 107.8×225.3, из них текст 63.6; 1440 — 151.6×293.9, текст 66.5). Голый блок 2:3 был на
   64 px ниже, и попап РОС в полёте, когда приходила лента (проба `qa_cart_slide_in`: высота
   528 → 609 на ходу) — та же «корзина достраивается», что Val ловил 17.09. */
.nb-added__skel { display: flex; flex-direction: column; }
.nb-added__skel::before { content: ""; display: block; aspect-ratio: 2 / 3; background: #f2f2f2; }
.nb-added__skel::after { content: ""; display: block; height: 64px; }
@media (min-width: 1024px) { .nb-added__skel::after { height: 66px; } }
/* 28г. Лента «Додано в кошик» ПЛИТКОЙ (задача 45, Ш1; Val 10.10: «несколько видов отображения… в виде слайдера, в виде
        плитки… быстро переключать»). Вид — данные реестра ИБ 13 (площадка cart-added, свойство NB_VIEW): шторка ставит
        модификатор `nb-added__recs--tile` и снимает с ленты `data-cards-track` (nb-sandbox.js addedView). Сетка 2 колонки на
        телефоне и в шторке ПК — как была плитка рядов карточки до задачи 39 и как «Обране» (§ .nb-cart__fav: те же токены
        зазоров каталога); кадры листаются пальцем (сервер отдаёт плитке 7 кадров). Прокрутки вбок, стрелок и «тянуть мышью»
        нет — шторка прокручивается вниз целиком. */
.nb-added__recs--tile .nb-added__track {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nb-grid-row-gap-mobile, 30px) var(--nb-grid-gap-mobile, 5px);
  overflow: visible; scroll-snap-type: none; cursor: auto;
}
.nb-added__recs--tile .nb-added__track > .product-card,
.nb-added__recs--tile .nb-added__skel { flex: none; width: auto; }

/* 27б. Отступы шторки на ПК (Val 30.09: «нужно поработать в целом над отступами шторки корзинки
        для десктопа»). Было 15 px по краям, как на телефоне, — содержимое стояло на 25 px правее
        правого края шапки (замер 1440: шапка кончается на 1390, шторка на 1415) и жалось к кромке.
        Теперь поля панели = поля страницы (`--nb-gutter`, 40 px на ПК): правый край содержимого
        на одной вертикали с × в шапке. Ритм по вертикали — шаги 16/20/28/32 вместо 12/14/18. */
@media (min-width: 993px) {
  .nb-cart__head { padding: 28px var(--nb-gutter, 40px) 12px; }
  .nb-cart__body { padding: 0 var(--nb-gutter, 40px); }
  .nb-cart__row { grid-template-columns: 96px 1fr 24px; gap: 16px; padding: 20px 0; }
  .nb-cart__recs { margin-top: 32px; }
  .nb-cart__recs-title { margin-bottom: 16px; }
  .nb-cart__foot { padding: 20px var(--nb-gutter, 40px) 32px; }
  .nb-cart__total { margin-bottom: 16px; }
  .nb-cart__empty { padding-top: 40px; }
}

/* 28а. «Додано в кошик» на телефоне (Val 30.09: «при добавлении в корзину внизу в мобайле должна быть
        шторка добавленного товара, а сейчас открывается корзина»). Тот же попап столбиком, как «Added
        to bag» у Stories: заголовок и ×, вещь, лента рекомендаций (3.2 плитки, как в корзине), кнопки.
        Ход — 500 мс, как у наших листов на телефоне (Val 17.09); ручка обещает свайп вниз. */
.nb-added__handle { display: none; }
@media (max-width: 1023.98px) {
  .nb-added__panel {
    max-height: 100%;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--nb-gutter, 15px) calc(16px + env(safe-area-inset-bottom));
    transition: transform var(--nb-motion-slow, 500ms cubic-bezier(0.4, 0, 0.2, 1));
  }
  .nb-added__handle {
    display: block; width: 100%; height: 22px; margin: 0 0 6px; padding: 10px 0 0;
    border: 0; background: none; cursor: pointer;
  }
  .nb-added__handle::before { content: ""; display: block; width: 60px; height: 2px; margin: 0 auto; background: #000; }
  .nb-added__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 12px; row-gap: 16px; }
  .nb-added__title { grid-column: 1; grid-row: 1; }
  .nb-added__close { grid-column: 2; grid-row: 1; }
  .nb-added__main { display: contents; }
  .nb-added__item { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 80px 1fr; }
  .nb-added__recs-title { grid-column: 1 / -1; grid-row: 3; }
  .nb-added__nav { display: none; }
  .nb-added__recs { grid-column: 1 / -1; grid-row: 4; }
  .nb-added__actions { grid-column: 1 / -1; grid-row: 5; margin-top: 0; }
  .nb-added__track > .product-card,
  .nb-added__skel { flex-basis: calc((100% - 3 * var(--nb-added-gap)) / 3.2); }
}

/* 28б. «Додано в кошик» на ПК — вертикальный попап небольшого размера, как на телефоне (Val 06.10, 13266: «добавление
        покупки в корзину на десктопе сделаем по аналогии с мобильной версией, чтобы это был вертикальный попап небольшого
        размера»). До того — полоса во всю ширину внизу экрана (вещь слева, лента 6.2 плитки справа). Теперь: панель 400 px
        у правого поля страницы под шапкой (число в шапке видно — §28), порядок как на телефоне: заголовок и ×, вещь,
        лента (2.2 плитки, стрелки в строке её заголовка — мышь), кнопки. Лом пробы qa_added_desktop: `nb-lom-added-wide`
        на <html> — прежняя полоса. */
@media (min-width: 1024px) {
  html:not(.nb-lom-added-wide) .nb-added__panel {
    left: auto; right: var(--nb-gutter, 40px); top: 12px; bottom: auto;
    width: 400px; max-height: calc(100% - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 24px 24px;
    box-shadow: 0 12px 40px rgb(0 0 0 / 0.14);
    opacity: 0; transform: translateY(-8px);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  html:not(.nb-lom-added-wide) .nb-added.is-open .nb-added__panel { opacity: 1; transform: none; }
  html:not(.nb-lom-added-wide) .nb-added__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 12px; row-gap: 16px; }
  html:not(.nb-lom-added-wide) .nb-added__title { grid-column: 1; grid-row: 1; }
  html:not(.nb-lom-added-wide) .nb-added__close { grid-column: 2; grid-row: 1; }
  html:not(.nb-lom-added-wide) .nb-added__main { display: contents; }
  html:not(.nb-lom-added-wide) .nb-added__item { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 96px 1fr; }
  html:not(.nb-lom-added-wide) .nb-added__recs-title { grid-column: 1 / -1; grid-row: 3; }
  html:not(.nb-lom-added-wide) .nb-added__nav { grid-column: 1 / -1; grid-row: 3; }
  html:not(.nb-lom-added-wide) .nb-added__recs { grid-column: 1 / -1; grid-row: 4; }
  html:not(.nb-lom-added-wide) .nb-added__actions { grid-column: 1 / -1; grid-row: 5; margin-top: 0; }
  html:not(.nb-lom-added-wide) .nb-added__track > .product-card,
  /* 2.5 плитки, а не 2.2 (Val 07.10, 13351: «немного уменьшить размеры, пусть появляются там две с половиной карточки») —
     на 2.2 крупные плитки уходили под кнопки, и название с ценой срезались */
  html:not(.nb-lom-added-wide) .nb-added__skel { flex-basis: calc((100% - 2 * var(--nb-added-gap)) / 2.5); }
}

/* 28в. «Додано в кошик» на ПК — ШТОРКОЙ, как корзина (Val 06.10, 13299: «на декстопе сделаем по типу корзины шторку с
        добавленным товаром»). Было (§28б): карточка 400 px с тенью у правого поля, под ней затемнённый край страницы.
        Стало: панель у правого края окна во всю высоту под шапкой, ширина и ход — те же, что у шторки корзины
        (`--nb-cart-panel-w`, `--nb-motion-drawer`, выезд справа), поля — как у шторки на ПК (§27б), кнопки прижаты к низу.
        Порядок столбиком (§28б) не меняется. Лом пробы qa_added_desktop: `nb-lom-added-card` на <html> — карточка §28б. */
@media (min-width: 1024px) {
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__panel {
    top: 0; right: 0; bottom: 0; left: auto;
    width: var(--nb-cart-panel-w, 480px); max-height: none;
    display: flex; flex-direction: column;
    padding: 28px var(--nb-gutter, 40px) 32px;
    box-shadow: none;
    opacity: 1; transform: translateX(100%);
    transition: transform var(--nb-motion-drawer, 320ms cubic-bezier(0.22, 1, 0.36, 1));
  }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added.is-open .nb-added__panel { transform: none; }
  /* сетка тянется на всю высоту панели, пустое место — над кнопками: кнопки внизу шторки, как «Оформити» у корзины */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__grid { flex: 1 0 auto; grid-template-rows: auto auto auto auto 1fr; }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__actions { align-self: end; }
  /* ⚠ Кнопки ЛИПНУТ к низу шторки (ревью Codex смены 70, №2): содержимое ~740 px, и на окне 1366×650 «Переглянути
     кошик» начиналась на 669 px — под краем, до неё надо было листать (замер). Липкий низ — как подвал корзины, который
     всегда у низа панели; фон панели под кнопками закрывает уехавшую под них ленту. Лом: `nb-lom-added-unstuck`. */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):not(.nb-lom-added-unstuck) .nb-added__actions {
    position: sticky; bottom: 0; z-index: 1;
    padding-top: 16px;
    background-color: var(--nb-paper, #FFFFFF);
    /* липнет к краю СОДЕРЖИМОГО панели (замер: без поля панели); полосу её нижнего поля под кнопками закрываем тенью цвета
       фона — иначе в ней видна уехавшая под кнопки лента */
    box-shadow: 0 32px 0 0 var(--nb-paper, #FFFFFF);
  }
  /* Полоса прокрутки самой шторки скрыта, как у тела корзины (Val 01.10: «с корзины и вишлиста убрать скролбары»):
     в низком окне шторка прокручивается, и без этого внутри неё справа вставала серая полоса (ревью Codex смены 70, раунд 2).
     Прокрутка остаётся — колесо, тачпад. Тот же лом, что у корзины: `nb-lom-cart-scrollbar`. */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):not(.nb-lom-cart-scrollbar) .nb-added__panel { scrollbar-width: none; }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):not(.nb-lom-cart-scrollbar) .nb-added__panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* Шапка при открытой шторке — белая, как при открытой корзине (§ «шапка — часть шторки», `body.is-cart-open`):
     на главной шапка над первым экраном прозрачная, и шторка начиналась бы под прозрачной шапкой (ревью Codex
     смены 70, №3). Крестик вместо значка — только у корзины (`is-nb-drawer`), здесь не нужен. */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):has(.nb-added.is-open) .header:not(.header--transparent) { background-color: rgb(255 255 255); }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):has(.nb-added.is-open) .header--transparent {
    color: var(--nb-ink, #000); background-color: var(--nb-paper, #fff);
  }
  /* Вещь ниже заголовка (Val 06.10, 13308: «спустим карточку чуть ниже, чем заголовок»): 16 → 28 px от заголовка */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__item { margin-top: var(--nb-space-3, 12px); }
  /* Цвет вещи — строкой под названием (Val 06.10, 13308), тем же кеглем и цветом, что название */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__color { display: block; }
  /* Цвет, размер, цена — вторичным кеглем и плотно под названием (Val 08.10: «цвет, размер, цену можно уменьшить в
     размере и сдвинуть чуть выше, т.е. уменьшить расстояние»). Было: 14 px, как название, строка 21 px + зазор 8 px —
     шаг строк 29 px. Стало: кегль подписей шапки и плитки на ПК (`--nb-fs-sm`), строка `--nb-lh`, без зазора — шаг
     ≈ 17.5 px. Название, гарнитура и вес цены не меняются; телефон не трогаем (правило внутри ≥ 1024).
     Лом пробы qa_added_dense: `nb-lom-added-dense` на <html> — прежние 14 px и шаг 29 px. */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):not(.nb-lom-added-dense) .nb-added__info { gap: 0; }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):not(.nb-lom-added-dense) :is(.nb-added__color, .nb-added__meta, .nb-added__price, .nb-added__meta .nb-added__size) {
    font-size: var(--nb-fs-sm, 12px); line-height: var(--nb-lh, 1.46);
  }
  /* «Закрити» словом с линией снизу вместо × — как у шторки корзины (Val 06.10, 13304: «не хватает кнопки закрыть как в
     корзине»; образец — `.nb-cart__close` §29: 14 px, линия 1 px в 3 px под текстом). Слово — из aria-label кнопки (его уже
     пишет nb-sandbox.js на языке страницы), разметку не трогаем; зона нажатия — вся кнопка высотой 44 px. */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__close { width: auto; margin: -12px 0; }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__close svg { display: none; }
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__close::after {
    content: attr(aria-label);
    font-size: 14px; line-height: normal; color: var(--nb-ink, #111);
    padding-bottom: 3px; border-bottom: var(--nb-border, 1px) solid var(--nb-ink, #111);
  }
  /* Канал прокрутки справа от шторки — БЕЛЫЙ (Val 06.10, 13299: «не нравится серая полоска справа… сделай её белой»).
     Общее правило (nb-search.css) красит канал цветом затемнения; у шторки к каналу прилегает белая панель — как у
     корзины (там то же исключение, 05.10, 13164). Вес (0,4,1) выше общего (0,1,2), порядок файлов не важен. */
  /* ⚠ Пока ПОВЕРХ лежит лист размеров (`#nb-quick-buy`), к каналу прилегает уже его затемнение — канал серый, как у
     всех затемнённых слоёв (ревью Codex смены 70, №6; замер: при листе поверх шторки тло <html> было белым). Метка
     `nb-sheet-over-cart` для этого не годится: её снимают только при закрытии шторки, а лист закрывается раньше. */
  html:not(.nb-lom-added-wide):not(.nb-lom-added-card):has(.nb-added.is-open):not(:has(#nb-quick-buy:not([hidden]))) { background-color: var(--nb-paper, #FFFFFF); }
}

/* 29. Шторка корзины, доработка вида (Val 01.10, Telegram): один заголовок вместо переключателя
       «Кошик / Обране» (раздел выбирает иконка в шапке), «− 1 +» без квадратиков, без разделителей между
       вещами, у ленты «Доповніть образ» воздух сверху и снизу и отступ от заголовка до карточек.
       Всё — под одним ломом `nb-lom-cart-look` (класс на <html>): он возвращает прежний вид, и проба
       `qa_cart_drawer_look.py` краснеет на нём каждой проверкой вида. Значения — шкала `--nb-space-*`. */
html:not(.nb-lom-cart-look) .nb-cart__tab:not(.is-active) { display: none; }
html:not(.nb-lom-cart-look) .nb-cart__tab { color: var(--nb-ink, #111); cursor: default; pointer-events: none; }
html:not(.nb-lom-cart-look) .nb-cart__qty button { border: 0; }
html:not(.nb-lom-cart-look) .nb-cart__row { border-bottom: 0; }
html:not(.nb-lom-cart-look) .nb-cart__recs { margin-top: var(--nb-space-2); padding: var(--nb-space-6) 0; }
/* ⚠ Отступ заголовка — на ЛЕНТЕ, не на <p>: скоуп карточек `:is(#product_detail, .nb-pdp-row, .nb-pdp-host).nb-pdp p`
   обнуляет margin с весом id, и прежние 12 px у заголовка не работали никогда (замер CDP 01.10: margin-bottom 0). */
html:not(.nb-lom-cart-look) .nb-cart__recs-track { margin-top: var(--nb-space-4); }
/* «Закрити» и промокод — линия дизайн-системы (`.nb-link-underline`: без text-decoration, линия border-bottom),
   а не обычное подчёркивание (Val 01.10: «убрать обычное подчеркивание и дать такую же черточку, как и во многих
   других кнопках»). Промокод — под товарами, над лентой; пустая корзина (подвал скрыт) — ссылки нет. */
.nb-cart__promo {
  display: inline-block;
  margin: var(--nb-space-4) 0 0;
  font-size: 14px;
  color: var(--nb-ink, #111);
}
button.nb-cart__promo { padding: 0 0 3px; border-width: 0 0 var(--nb-border, 1px); border-style: solid; border-color: var(--nb-ink, #111); background: none; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
html:not(.nb-lom-cart-look) .nb-cart__close,
html:not(.nb-lom-cart-look) .nb-cart__promo {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: var(--nb-border, 1px) solid var(--nb-ink, #111);
}
html.nb-lom-cart-look .nb-cart__promo { text-decoration: underline; }
.nb-cart__panel:has(.nb-cart__foot[hidden]) .nb-cart__promo-box { display: none; }

/* 30. Шторка корзины по образцу &Other Stories (Val 01.10, четыре круга за день): строка «имя → цена → размер ›»,
       внизу «🗑/− 1 +» и закладка справа, без × в углу; удаление — строка бледнеет, снизу плашка с отсчётом и
       «Скасувати»; под товарами поле промокода с «+» и раскладка сумм; внизу одна кнопка «Оформити · сумма».
       Значения — только токены (`--nb-space-*`, `--nb-tap`, `--nb-gray-*`, `--nb-fs-*`). */
.nb-cart__row:not(.nb-cart__row--gone) {
  position: relative;
  grid-template-columns: 84px 1fr;
  gap: var(--nb-space-3);
}
@media (min-width: 993px) {
  .nb-cart__row:not(.nb-cart__row--gone) { grid-template-columns: 96px 1fr; gap: var(--nb-space-4); }
}
.nb-cart__row:not(.nb-cart__row--gone) .nb-cart__info { gap: var(--nb-space-1); }
/* Ритм между вещами плотнее (Val 05.10, 13168: «в корзине сделаем меньше расстояния между карточками по высоте»): было
   28 px между фото на телефоне и 40 на ПК (поля строки 14/20), стало 20 и 20 — поле строки `--nb-space-2` сверху и снизу.
   Лом пробы qa_cart_row_rhythm.py: `nb-lom-cart-tight` на <html> — прежние поля. */
html:not(.nb-lom-cart-tight) .nb-cart__list .nb-cart__row { padding-top: var(--nb-space-2); padding-bottom: var(--nb-space-2); }
/* Плашка «Видаляємо товар» — низом ровно по низу фото (Val 07.10, 13349: «выровнять по нижнему краю картинки»). Её отступ
   стоял `--nb-space-3` от прежнего поля строки; после уплотнения выше поле стало `--nb-space-2` — и плашка на 5 px не
   доходила до низа фото (замер 07.10: ПК 274 против 279, телефон 236 против 241). Отступ = поле строки, тем же переключателем. */
html:not(.nb-lom-cart-tight) .nb-cart__list .nb-cart__row .nb-cart__undo-bar { bottom: var(--nb-space-2); }
.nb-cart__row:not(.nb-cart__row--gone) .nb-cart__price { font-size: var(--nb-fs-base); }
.nb-cart__ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--nb-space-2);
}
.nb-cart__ctl .nb-cart__qty { margin-top: 0; gap: var(--nb-space-1); }
.nb-cart__ctl .nb-cart__qty button,
.nb-cart__trash,
.nb-cart__tofav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-ink, #111);
  cursor: pointer;
}
.nb-cart__trash svg { width: 16px; height: 16px; }
/* закладка чуть меньше (Val 01.10: «иконку избранного в корзине нужно чуть-чуть уменьшить»): 12×17 → 10×14 */
.nb-cart__tofav svg { width: 10px; height: 14px; fill: none; }
/* урна на единице, «−» — когда штук больше */
/* ⚠ Вес правила выше `.nb-cart__ctl .nb-cart__qty button` (0,2,1): первая редакция ему проигрывала, и на единице были
   видны и урна, и «−» (снимок 01.10). */
.nb-cart__row.nb-cart__row--one .nb-cart__qty [data-nb-cart-minus],
.nb-cart__row:not(.nb-cart__row--one):not(.nb-cart__row--pending) .nb-cart__qty .nb-cart__trash { display: none; }
.nb-cart__size {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-space-1);
  padding: 0;
  border: 0;               /* без черточки (Val 01.10, третий круг: «не нравится подчёркивание размера») */
  background: none;
  color: var(--nb-ink, #111);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
.nb-cart__size-icon { width: 6px; height: 10px; flex: 0 0 auto; fill: none; }
.nb-cart__meta { color: var(--nb-ink, #111); }
.nb-cart__row.is-busy .nb-cart__size,
.nb-cart__row.is-busy .nb-cart__tofav,
.nb-cart__row.is-busy .nb-cart__trash { pointer-events: none; opacity: 0.45; }
.nb-cart__note { margin: 0; color: var(--nb-error, #b3261e); font-size: var(--nb-fs-sm); line-height: 1.35; }
/* «Оновити кошик» в коробке «исход известен, состав нет» (хвосты 50, круги 4-5): кнопка-ссылка, как «Продовжити покупки»
   пустой корзины, с полной зоной касания. Узел заводит nb-sandbox.js (`[data-nb-proven-retry]`). */
.nb-cart__unknown-retry {
  display: inline-flex;
  align-items: center;
  min-height: var(--nb-tap, 44px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nb-cart__unknown-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* удалённая строка: бледнеет, плашка — по низу строки поверх неё */
.nb-cart__row--undo > :not(.nb-cart__undo-bar) { opacity: .3; pointer-events: none; }
.nb-cart__undo-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nb-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-3);
  min-height: var(--nb-tap);
  padding: 0 var(--nb-space-3);
  background: var(--nb-gray-100);
  font-size: var(--nb-fs-base);
}
.nb-cart__undo-text { margin: 0; }
.nb-cart__undo-act { display: inline-flex; align-items: center; gap: var(--nb-space-2); }
.nb-cart__undo-left { color: var(--nb-gray-700); font-variant-numeric: tabular-nums; }
.nb-cart__undo {
  padding: 0;
  border: 0;               /* без подчёркивания (Val 01.10, третий круг) */
  background: none;
  color: var(--nb-ink, #111);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

/* 31. Промокод и суммы под товарами. Поле — рамка во всю ширину, «+» внутри справа (образец Stories); шрифт поля на
       телефоне 16 px — меньше iOS приближает страницу на фокусе. Суммы — строки «название … значение», над «Разом»
       линия цвета текста. */
.nb-cart__promo-box { margin-top: var(--nb-space-4); padding-top: var(--nb-space-4); border-top: var(--nb-border) solid var(--nb-gray-300); }
.nb-cart__promo-form { position: relative; display: flex; }
.nb-cart__promo-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--nb-tap);
  padding: 0 var(--nb-tap) 0 var(--nb-space-3);
  border: var(--nb-border) solid var(--nb-gray-300);
  border-radius: 0;
  background: var(--nb-paper);
  color: var(--nb-ink, #111);
  font: inherit;
  font-size: 16px;
}
@media (min-width: 993px) { .nb-cart__promo-input { font-size: var(--nb-fs-base); } }
.nb-cart__promo-input::placeholder { color: var(--nb-gray-700); }
.nb-cart__promo-input:focus { outline: none; border-color: var(--nb-ink, #111); }
.nb-cart__promo-apply {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--nb-tap);
  height: var(--nb-tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-ink, #111);
  cursor: pointer;
}
.nb-cart__promo-apply svg { width: 16px; height: 16px; }
.nb-cart__promo-apply[disabled] { color: var(--nb-gray-400); cursor: default; }
.nb-cart__promo-msg { margin: var(--nb-space-2) 0 0; font-size: var(--nb-fs-sm); line-height: 1.35; color: var(--nb-error, #b3261e); }
.nb-cart__promo-msg.is-ok { color: var(--nb-ink, #111); }
/* второй уровень под «Знижка»: «Акція» и коды, мельче, с отступом и приглушённо; у кода × рядом (Val 01.10) */
/* ⚠ через .nb-cart__sums: правило .nb-cart__sum ниже задаёт padding и иначе съедает отступ (проба П4 «второй уровень») */
.nb-cart__sums .nb-cart__sum--sub { align-items: center; padding-left: var(--nb-space-4); font-size: var(--nb-fs-sm); color: var(--nb-gray-700); }
.nb-cart__sum--sub dt { display: flex; align-items: center; gap: var(--nb-space-1); min-width: 0; }
.nb-cart__sum--sub dd { white-space: nowrap; }
.nb-cart__promo-code { overflow-wrap: anywhere; }
.nb-cart__coupon-del {
  flex: none; width: 32px; height: 32px; margin: -8px 0; padding: 0; border: 0; background: none;
  color: var(--nb-gray-700); font-size: 18px; line-height: 1; cursor: pointer;
}
.nb-cart__sums { margin: var(--nb-space-4) 0 0; font-size: var(--nb-fs-base); }
.nb-cart__sums[hidden] { display: none; }
/* пересчёт после тапа количества: числа ждут сервер (nb-sandbox.js `bump`, ревью Codex смены 48 №7) */
.nb-cart__sums.is-pending { opacity: .45; transition: opacity .15s; }
.nb-cart__sum { display: flex; justify-content: space-between; gap: var(--nb-space-3); padding: var(--nb-space-1) 0; }
.nb-cart__sum[hidden] { display: none; }
.nb-cart__sum dt, .nb-cart__sum dd { margin: 0; }
.nb-cart__sum--discount dd { color: var(--nb-error, #b3261e); }
.nb-cart__sum--total { margin-top: var(--nb-space-2); padding-top: var(--nb-space-2); border-top: var(--nb-border) solid var(--nb-ink, #111); }
/* одна кнопка «Оформити замовлення · сумма»; строки «Разом» над ней больше нет */
.nb-cart__total { display: none; }
.nb-cart__checkout { display: flex; align-items: center; justify-content: center; gap: var(--nb-space-2); }
.nb-cart__checkout-sep { opacity: .6; }
.nb-cart__checkout [data-nb-cart-total]:empty,
.nb-cart__checkout [data-nb-cart-total]:empty ~ *,
.nb-cart__checkout:has([data-nb-cart-total]:empty) .nb-cart__checkout-sep { display: none; }

/* 55. Шапка телефона по образцу &Other Stories (Val 11.10, 14220–14228, снимок stories.com: «Иконки в хедере должны иметь
       одинаковое расстояние между собой. Полосочка с выделением должна у меню и у корзины начинаться от края экрана.
       А сама иконка должна размещаться посередине… При открытии каждой иконки вместо иконки показывать крестик закрытия,
       а кнопочку „Закрыть“ нужно убрать с попапа»; «вместо скобочек писать просто циферку и поменьше размером, а сами
       иконки чуть-чуть увеличить»; «логотип… побольше, но… уменьшить расстояние между элементами»; «для избранного
       циферка 0… очень низко»).
       • Четыре кнопки — РАВНЫЕ клетки во всю высоту шапки (`--nb-hc`, 40 px с 26.10; на узких экранах сжимается до 32, чтобы
         логотип не наезжал), поле шапки 0: клетки меню и корзины начинаются от края экрана, значок — по центру клетки.
         Линия открытой накладки (§16e, `aria-expanded`) ложится на всю клетку сама — её правило не меняем.
       • Счётчик — цифра 10 px слева от значка без скобок: скобки — текст в разметке (header.php), их прячет `font-size: 0`
         обёртки, цифра (и `::after` первого кадра) получает свой размер. Стоит вне потока: значок не сдвигается от числа.
       • Значки закладки и сумки ×1.25 (8.31×12 → 10×15, 13×12 → 16×15), логотип 167 → до 196 px.
       • Открытая вкладка корзины/избранного — × на месте значка. ⚠ Это отмена решения Val 01.10 («не менялся крестик», §27,
         лом `nb-lom-cart-look`) его же словом 11.10; поведение «тап по × закрывает» уже было (шторка §9 `markHeader`,
         имя ссылки на это время — «Закрити»), меню и поиск × показывали и раньше. Кнопка «Закрити» в шторке спрятана.
       Только телефон и планшет (до 1023.98, где тема рисует значки); ПК — §16b/§16d. Лом — класс `nb-lom-header55`
       на <html>: прежний вид целиком.
       ⚠ Секция стоит ЗДЕСЬ, а не в конце файла: в конец дописывают соседние ветки (rd/header-icon-shrink) — слияние
       спотыкалось. Вес правил счётчика поднят `.header__nav-right`: позднее §«ширина счётчика» (вес 0,5,1) иначе перевешивал. */
@media (max-width: 1023.98px) {
  /* 44 → 40, нижний предел 36 → 32 (Val 26.10: «на мобайле нужно сделать чуть меньше расстояния между иконками»). */
  html:not(.nb-lom-header55) .header { --nb-hc: clamp(32px, calc((100vw - 190px) / 4), 40px); }   /* было 48 → 44 (Val 20:52), теперь 40 */
  html:not(.nb-lom-header55) .header .header__inner { padding-inline: 0; gap: 0; }
  html:not(.nb-lom-header55) .header .header__nav-left,
  html:not(.nb-lom-header55) .header .header__nav-right { display: flex; align-self: stretch; align-items: stretch; gap: 0; }
  html:not(.nb-lom-header55) .header .header__nav-right { justify-content: flex-end; }
  html:not(.nb-lom-header55) .header .header__menu-btn,
  html:not(.nb-lom-header55) .header .header__action--search-mobile,
  html:not(.nb-lom-header55) .header .header__action--wishlist,
  html:not(.nb-lom-header55) .header .header__action--cart {
    position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0;
    width: var(--nb-hc); min-width: 0; height: 50px; margin: 0; padding: 0;
  }
  /* Лого уступает место счётчику (Val 26.10, скрин 393 px: «близко к лого иконки размещены на некоторых экранах»). Цифра стоит
     вне клетки слева от значка, а прежняя формула (… − 16px) её не учитывала: при «60» зазор лого → цифра был 17 px на 393,
     10 на 360, 6 на 320 (у лупы слева — 27). Теперь поле у лого = (79 − hc) / 2, и зазор до двузначного числа ≈ 18 px на любой
     ширине, где лого меньше 186 (на 393+ лого 186, как было). */
  html:not(.nb-lom-header55) .header .header__logo-svg { width: min(186px, calc(100vw - 3 * var(--nb-hc) - 79px)); height: auto; }   /* 196 → 186: «логотип чуть-чуть меньше» */
  /* Кабинет справа — не клетка: на 993–1023.98 тема показывает его (24 px, значок у верха), и ряд «кабинет · обране · кошик»
     ломал равные клетки (ревью site-git r1 MED-2, смена 97). Вход — в меню (§18b), узел оставляем (им пользуется тема). */
  html:not(.nb-lom-header55) .header .header__nav-right .header__action--account { display: none; }
  html:not(.nb-lom-header55) .header .header__action--wishlist { --nb-cnt-off: 7.33px; }   /* зазор до значка 3 px: половина 4.33 + 3 */
  html:not(.nb-lom-header55) .header .header__action--cart { --nb-cnt-off: 7.77px; }       /* половина 4.77 + 3 */
  /* Толщина линий — ОДНА у всех значков шапки, 0.8 px на экране (Val 11.10, 14243: «все иконки, именно линии, должны быть
     одинаковыми по толщине, включая крестик закрытия»). Обводка в единицах символа × масштаб отрисовки: закладка 9×13 в 10×15
     (масштаб — меньший из двух, 10/9 = ×1.111) — 0.72; сумка 11×15 в 11×15 — 0.8; поиск, бургер, × — 0.8 в своих 24×24 (icons.svg). Символ закладки общий с
     плитками — его не трогаем, толщину даёт это правило. */
  /* Высота значков 15 → 13 px (Val 11.10 21:07, 14265: «все иконки чуть-чуть меньше, на пару пикселей», из-за видимой правой
     стенки сумки); пропорции те же. Обводка пересчитана под новый масштаб, чтобы линия на экране осталась прежней:
     закладка 9×13 в 8.67×13 — масштаб 0.963 → 0.8 / 0.963 = 0.83. Сумка 11×15 в 9.53×13 (масштаб 0.867) — 0.879: это 0.762 px
     страницы = РОВНО 2 пикселя экрана на телефоне Val (2.625), и crispEdges кладёт обе стенки по 2 полных пикселя при ЛЮБОМ
     положении (замер _review/shift97/icons/sweepcart.py, сдвиги 0…0.9: 2.625 и 3 — 2/2 везде; 2.75 — 2/3 на двух из десяти).
     Было 1.04 (0.9 на экране = 2.36 px): crispEdges округлял стенки то в 2, то в 3 пикселя — «правая полоска» 14265. */
  html:not(.nb-lom-header55) .header .header__action--wishlist .header__action-icon--wishlist { width: 8.67px; height: 13px; stroke-width: 0.83; }
  html:not(.nb-lom-header55) .header .header__action--cart .header__action-icon--cart { width: 9.53px; height: 13px; stroke-width: 0.879; }
  /* Стенки сумки — по целым пикселям экрана (Val 20:55: «на правой полоске… тоньше, чем на левой»): при 2.625 стенки в 10 px друг
     от друга попадали в разные доли пикселя (замер: [23,255,255,29] против [255,255,47]); crispEdges — обе по 2 полных. Ручка гладкая
     (shape-rendering в символе, icons.svg). */
  html:not(.nb-lom-header55) .header .header__action--cart .header__action-icon--cart { shape-rendering: crispEdges; }
  html:not(.nb-lom-header55) .header .header__nav-right .header__action > .header__count.header__count {
    position: absolute; top: 50%; right: calc(50% + var(--nb-cnt-off)); transform: translateY(-50%);
    min-width: 0; font-size: 0; line-height: 1; letter-spacing: 0; text-align: right;
  }
  html:not(.nb-lom-header55) .header .header__nav-right .header__action > .header__count > span { font-size: 10px; }
  html:not(.nb-lom-header55) .header .header__action.is-nb-drawer .header__action-icon--x {
    position: absolute; top: 50%; left: 50%; right: auto; display: block;
    width: var(--nb-icon, 24px); height: var(--nb-icon, 24px); transform: translate(-50%, -50%);
  }
  html:not(.nb-lom-header55) .header .header__action.is-nb-drawer .header__count.header__count,
  html:not(.nb-lom-header55) .header .header__action.is-nb-drawer .header__action-icon:not(.header__action-icon--x) { visibility: hidden; }
  html:not(.nb-lom-header55) .nb-cart__close { display: none; }
}
/* Счётчики избранного и корзины на ПК — как на телефоне (Val 29.10: «на десктопе показывать как в мобайле»): без скобок,
   цифра 10 px вплотную слева от значка. Скобки — текст вокруг <span> с числом (их читает экранный диктор вместе с числом),
   поэтому, как и на телефоне, гасим их нулевым кеглем контейнера, а не правкой разметки. Место в потоке остаётся: на ПК
   у значков есть простор, абсолютная привязка телефона (--nb-cnt-off) тут не нужна; зазор до значка — gap действия (4 px).
   Лом — html.nb-lom-count-pc. */
@media (min-width: 1024px) {
  html:not(.nb-lom-count-pc) .header .header__nav-right .header__action > .header__count.header__count {
    min-width: 0; font-size: 0; line-height: 1; letter-spacing: 0;
  }
  html:not(.nb-lom-count-pc) .header .header__nav-right .header__action > .header__count > span { font-size: 10px; }
}

/* 61. Значок ↔ крестик — плавно (Val 11.10 20:50: «Я хочу, чтобы крестик очень плавно сменял обычную иконку», все четыре:
       меню, поиск, обране, кошик). Обе картинки лежат в одной точке клетки; уходящая гаснет, приходящая проявляется
       из 0.25 с размытием 4 px — 220 мс, кривая дизайн-системы --nb-motion-collapse (сильное ease-out). Значки 24 → 22 px
       (Val 21:07, 14265 — «на пару пикселей меньше»); толщина линий 0.8 на экране не меняется: у символов 24×24
       `vector-effect: non-scaling-stroke` (icons.svg), обводка в пикселях страницы при любом размере.
       • Меню: тема переключает `display` двух значков по body.is-menu-open — здесь оба всегда в дереве, меняется прозрачность.
       • Обране и кошик: шторка ставит `.is-nb-drawer` (§9 markHeader) — × постоянно поверх значка, невидим до открытия.
       • Поиск: nb-search.js ПОДМЕНЯЕТ содержимое кнопки (markToggles, innerHTML) — переход не на чем, поэтому новая картинка
         входит анимацией вставки. Только после первого открытия (`#site-search` строится при первом открытии): иначе
         лупа «проявлялась» бы на каждой загрузке. Уходящая картинка поиска исчезает сразу — её узла уже нет.
       Телефон и планшет (до 1023.98). Лом — `nb-lom-header61` на <html>: смена мгновенная, как было; размеры — §55. */
@media (max-width: 1023.98px) {
  html:not(.nb-lom-header55) .header { --nb-x-in: 220ms cubic-bezier(.23, 1, .32, 1); }
  html:not(.nb-lom-header55) .header .header__menu-btn .header__menu-icon--mobile,
  html:not(.nb-lom-header55) .header .header__menu-btn .header__menu-icon--close,
  html:not(.nb-lom-header55) .header .header__action.header__action .header__action-icon--x {
    position: absolute; top: 50%; left: 50%; right: auto; display: block; width: 22px; height: 22px; margin: 0;
    transition: opacity var(--nb-x-in), transform var(--nb-x-in), filter var(--nb-x-in), visibility 0s linear 220ms;
  }
  html:not(.nb-lom-header55) .header .header__action--search-mobile > .header__action-icon { width: 22px; height: 22px; }
  /* видимое */
  html:not(.nb-lom-header55) .header .header__menu-btn .header__menu-icon--mobile,
  html:not(.nb-lom-header55) body.is-menu-open .header .header__menu-btn .header__menu-icon--close,
  html:not(.nb-lom-header55) .header .header__action.header__action.is-nb-drawer .header__action-icon--x {
    opacity: 1; visibility: visible; transform: translate(-50%, -50%); filter: none;
    transition: opacity var(--nb-x-in), transform var(--nb-x-in), filter var(--nb-x-in), visibility 0s;
  }
  /* скрытое: × и бургер — из 0.25 с размытием; значки обраного и кошика (у них свой импульс на transform) — только гаснут */
  html:not(.nb-lom-header55) body.is-menu-open .header .header__menu-btn .header__menu-icon--mobile,
  html:not(.nb-lom-header55) .header .header__menu-btn .header__menu-icon--close,
  html:not(.nb-lom-header55) .header .header__action.header__action:not(.is-nb-drawer) .header__action-icon--x {
    opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.25); filter: blur(4px);
  }
  html:not(.nb-lom-header55) .header .header__action--wishlist :is(.header__action-icon--wishlist, .header__count),
  html:not(.nb-lom-header55) .header .header__action--cart :is(.header__action-icon--cart, .header__count) {
    transition: opacity var(--nb-x-in), filter var(--nb-x-in), visibility 0s;
  }
  html:not(.nb-lom-header55) .header .header__action.is-nb-drawer :is(.header__action-icon--wishlist, .header__action-icon--cart, .header__count.header__count) {
    opacity: 0; filter: blur(4px); visibility: hidden;
    transition: opacity var(--nb-x-in), filter var(--nb-x-in), visibility 0s linear 220ms;
  }
  html:not(.nb-lom-header55):has(#site-search) .header .header__action--search-mobile > svg { animation: nb-x-in 220ms cubic-bezier(.23, 1, .32, 1) both; }
  @keyframes nb-x-in { from { opacity: 0; transform: scale(.25); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
  html.nb-lom-header61 .header :is(.header__menu-icon, .header__action-icon, .header__count) { transition: none !important; }
  html.nb-lom-header61 .header .header__action--search-mobile > svg { animation: none !important; }   /* импульсы §16a/§55b лом не трогает */
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  html:not(.nb-lom-header55) .header :is(.header__menu-icon, .header__action-icon--x) { filter: none !important; }
  html:not(.nb-lom-header55) .header .header__menu-btn .header__menu-icon--close,
  html:not(.nb-lom-header55) body.is-menu-open .header .header__menu-btn .header__menu-icon--mobile,
  html:not(.nb-lom-header55) .header .header__action.header__action:not(.is-nb-drawer) .header__action-icon--x { transform: translate(-50%, -50%); }
  @keyframes nb-x-in { from { opacity: 0; } to { opacity: 1; } }
}

/* 62. Стенки тонких значков — одной толщины при любом положении на экране (Val 11.10 21:07–21:09, 14265/14268: «правая
        полоска» сумки в шапке; «у правой верхней карточки… левая полоска на иконке тоньше»). Причина — замер
        `_review/shift97/icons/sweep.py`, сдвиг значка на 0…0.9 px, DPR 2.625/2.75/3: у закладки (и сумки) обводка стенки лежит
        ВПЛОТНУЮ к краю рамки (x = 0.4 ± 0.4 в рамке 9), и рамка (вьюбокс символа, коробка маски) срезает её край на дробном
        положении — левая стенка 1.6…2.09 px экрана против 2.1 правой, у каждой плитки по-разному (сетка плиток кладёт их на
        разные доли пикселя). Лечение — не обрезать: у символов закладки и сумки `overflow="visible"` (icons.svg) плюс
        `overflow: visible` у самой картинки; у маски плитки — тот же рисунок во вьюбоксе с полем 0.5 и коробка 10×14 вместо
        9×13 (центр тот же, масштаб тот же). Замер после: 2.09–2.1 / 2.07–2.1 на всех сдвигах. Лом — `nb-lom-iconpad` на <html>. */
html:not(.nb-lom-iconpad) svg:has(> use:is([href="#icon-bookmark"], [href="#icon-cart"])) { overflow: visible; }
html:not(.nb-lom-iconpad) :is(#nb-catalog, .nb-cat-host, #nb-home, .nb-home-host, #product_detail, .nb-pdp-row, .nb-pdp-host) .product-card__icon-box--fav::before {
  width: 10px; height: 14px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 10 14'%3E%3Cpath d='M6.8.4H1.3C.8.4.4.9.4 1.5v10.8l3.7-3 3.6 3V1.5c0-.6-.4-1.1-.9-1.1z' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 10 14'%3E%3Cpath d='M6.8.4H1.3C.8.4.4.9.4 1.5v10.8l3.7-3 3.6 3V1.5c0-.6-.4-1.1-.9-1.1z' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E");
}
html:not(.nb-lom-iconpad) :is(#nb-catalog, .nb-cat-host, #nb-home, .nb-home-host, #product_detail, .nb-pdp-row, .nb-pdp-host) .product-card__fav.is-active .product-card__icon-box--fav::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 10 14'%3E%3Cpath d='M6.8.4H1.3C.8.4.4.9.4 1.5v10.8l3.7-3 3.6 3V1.5c0-.6-.4-1.1-.9-1.1z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.5 -.5 10 14'%3E%3Cpath d='M6.8.4H1.3C.8.4.4.9.4 1.5v10.8l3.7-3 3.6 3V1.5c0-.6-.4-1.1-.9-1.1z' fill='%23000'/%3E%3C/svg%3E");
}
/* 55c. Линия открытой вкладки — толщиной контура значков, 0.8 px (Val 11.10, 14247: «подчеркивание иконки… сделать в
        толщину самой иконки контура»). Одна переменная на шапку (§16e) — меняется на всех ширинах. Лом — `nb-lom-header55`. */
html:not(.nb-lom-header55) .header { --nb-hdr-line: 0.8px; }
/* 55a. Сумка — вытянутая, в пропорциях закладки (Val 11.10, 14231/14243: вариант A — прямые стенки, скруглённые углы,
        11×15). На ПК (§16b: закладка 8.31×12) сумка той же высоты — 8.8×12 (×0.8), обводка 1 → 0.8 px. */
@media (min-width: 1024px) {
  html:not(.nb-lom-header55):not(.nb-lom-header-text) .header .header__action .header__action-icon--cart { width: 8.8px; height: 12px; stroke-width: 1; }
}
/* 55b. «Додано в кошик» — НЕ корзина (Val 11.10, 14239–14240): «не делать выделение корзины, так как это не корзина»;
        вместо линии под сумкой — импульс, «так же, как и в избранном, закрашивать на недолгое время черным и увеличивать
        чуть-чуть в размере». Признак добавления — открытый попап `.nb-added.is-open` (его ставит шторка на КАЖДОЕ успешное
        добавление; JS не трогаем — бандлы держат 44/хвосты 50). Заливка корпуса — переменная `--nb-bag-fill` прямо в
        спрайте (`style="fill: var(--nb-bag-fill, none)"`, icons.svg): спрайт САМОДОСТАТОЧЕН — без этого CSS (откат, старый
        CSS из кеша при новом HTML, значок вне шапки) корпус контурный, а не сплошь чёрный (ревью site-git r1 MED-1, смена 97;
        прежде заливку держало только правило здесь). Импульс держит переменную = currentColor всю анимацию, а плавность даёт
        `fill-opacity` хоста (наследуется в <use>). ⚠ Без `@property`: в WebKit (iPhone) переменная, зарегистрированная как
        <color>, внутри <use> не резолвится, заливка становится недействительной и падает в ЧЁРНЫЙ — сумка сплошь чёрная на
        каждой странице (ревью site-git r2 HIGH, замер WebKit stage: центр значка 0 вместо 255). Проба — W2 в
        tools/qa_header_x_smooth.py (движок WebKit). Ручка остаётся контуром. Линия задачи 48 (§16e) под сумкой при «Додано»
        снята на всех ширинах. Лом — `nb-lom-header55`. */
.header .header__action-icon--cart { transform-box: fill-box; transform-origin: 50% 50%; }
html:not(.nb-lom-header55):has(.nb-added.is-open) .header .header__nav-right .header__action--cart:not([aria-expanded="true"]) {
  background-color: transparent; box-shadow: none;
}
html:not(.nb-lom-header55):has(.nb-added.is-open) .header .header__nav-right .header__action--cart .header__action-icon--cart {
  animation: nb-cart-pulse 1.1s cubic-bezier(.2, .7, .3, 1);
}
@keyframes nb-cart-pulse {
  0%   { --nb-bag-fill: currentColor; fill-opacity: 0; transform: scale(1); }
  18%  { --nb-bag-fill: currentColor; fill-opacity: 1; transform: scale(1.2); }
  55%  { --nb-bag-fill: currentColor; fill-opacity: 1; transform: scale(1); }
  100% { --nb-bag-fill: currentColor; fill-opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.nb-lom-header55):has(.nb-added.is-open) .header .header__nav-right .header__action--cart .header__action-icon--cart {
    animation: nb-cart-fill 1.1s linear;
  }
  @keyframes nb-cart-fill { 0%, 100% { --nb-bag-fill: currentColor; fill-opacity: 0; } 15%, 60% { --nb-bag-fill: currentColor; fill-opacity: 1; } }
}

/* 24. Ленты на ПК: стрелки по наведению и перетаскивание мышью (js §24, Val 01.10 16:15). Вид стрелок — как у лент
       категорий (category-strip.css, «как на бою»): белый квадрат 40×40 с тонкой рамкой поверх края кадров. */
.nb-hs__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
    .nb-hs-host { position: relative; }
    /* ⚠ Вес — через `:is()` с id, как в scope.css: сброс кнопок в областях страниц (`:is(#nb-home, .nb-home-host).nb-home
       button { border: 0; background: none }`, у каталога и карточки так же) весит как id и снимал с стрелки квадрат —
       оставалась голая стрелка (Val 01.10 17:23: «проверь, чтобы у стрелочки был квадратик»). */
    :is(#nb-hs, .nb-hs-host) > button.nb-hs__arrow.nb-hs__arrow {
        position: absolute; top: var(--nb-hs-arrow-top, 40%); z-index: 3;
        display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
        color: var(--nb-ink, #000); background-color: var(--nb-paper, #fff); border: 1px solid #e4e4e4;
        cursor: pointer; opacity: 0; transition: opacity 180ms ease;
    }
    :is(#nb-hs, .nb-hs-host):hover > button.nb-hs__arrow.nb-hs__arrow,
    :is(#nb-hs, .nb-hs-host) > button.nb-hs__arrow.nb-hs__arrow:focus-visible { opacity: 1; }
    :is(#nb-hs, .nb-hs-host) > button.nb-hs__arrow.nb-hs__arrow[hidden] { display: none; }
    .nb-hs__arrow--prev { left: calc(var(--nb-hs-left, 0px) + 5px); }
    .nb-hs__arrow--next { right: calc(var(--nb-hs-right, 0px) + 5px); }
    .products__track, .category-strip__track, .nb-cart__recs-track, .nb-added__track { cursor: grab; }
    .nb-hs-dragging { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
    .nb-hs-dragging a, .nb-hs-dragging button { cursor: grabbing; }
    /* доезд после протяжки (js §24 settle): защёлкивание снято, пока лента плавно едет к своей точке */
    .nb-hs-settling { scroll-snap-type: none !important; }
}

/* «Огляди від стиліста» на главной (виджет рилсов БЦ, `.nbrl` в площадке `[data-slot="home-reels"]`) — заголовок и
   стрелки в стиле остальных рядов главной: «Популярне зараз», «Читайте в блозі» (Val 09.10: «заголовок и стрелки надо
   подровнять под стили других слайдеров на главной, чтоб все было в одном стиле»). Свои стили виджет вставляет строкой
   <style> БЦ (`.rlw__title` 20/24 px, без верхнего регистра, стрелки 8×14 со штрихом 1.5, промежуток 14 и сдвиг −4 px)
   — разметку виджета тема не меняет, поэтому повторяем ТЕ ЖЕ токены, что и `.products__head/__title/__nav/__arrow`
   сборки главной (nb-home.css): кегль --nb-fs-base / --nb-fs-lg с 993 px, --nb-lh, верхний регистр, начертание 450 (так
   `.products__title` в dist/app.css — токена для него нет; это то же лицо Ruberoid Regular), отступ под шапкой --nb-space-3 / --nb-space-6, поля --nb-gutter, промежуток стрелок --nb-space-2, цвет
   --nb-ink, гашение .3 с переходом --nb-motion. Шеврон виджета (путь 5.93×12 в рамке 8×14) масштабируем до высоты
   шеврона темы (icon-chevron-*: 10 px), штрих 1 px с плоским концом. Скоуп с id перевешивает строку виджета при любом
   порядке стилей. Лом: `nb-lom-reels-head` на <html> возвращает вид виджета. */
html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__head {
  gap: 0; margin-bottom: var(--nb-space-3); padding-inline: var(--nb-gutter);
}
html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__title {
  margin: 0; font-size: var(--nb-fs-base); font-weight: 450; line-height: var(--nb-lh); letter-spacing: inherit;
  text-transform: uppercase; color: var(--nb-ink);
}
html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__nav {
  gap: var(--nb-space-2); margin-right: 0;
}
html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__arw {
  color: var(--nb-ink); transition: opacity var(--nb-motion);
}
html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__arw svg {
  width: calc(8px * 10 / 12); height: calc(14px * 10 / 12);
}
html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__arw svg path {
  stroke-width: 1.2; stroke-linecap: butt;
}
@media (min-width: 993px) {
  html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__head { margin-bottom: var(--nb-space-6); }
  html:not(.nb-lom-reels-head) :is(#nb-home,.nb-home-host).nb-home [data-slot="home-reels"] .rlw__title { font-size: var(--nb-fs-lg); }
}

/* 25. Блок акции в карточке товара — «тихая витрина» (Val 01.10: «слишком кричащий большой блок; мы не хотим больше
       кричать о наших ценовых предложениях»; выбран вариант B — тёплая плашка).
       Блок рисует ТЕКСТ АКЦИИ, который вписывает маркетинг (описание тега, свойство PROMO_TAGS): свой <style>, красный
       #ff0000, серая подложка с радиусом, таймер со скриптом. Содержимое не трогаем — задаём наш вид поверх, поэтому
       `!important` против inline-стилей. Следующая акция в том же шаблоне станет тихой сама.
       Было 166 px с двумя серыми подложками одна в другой (наша `product-promo.css` + подложка описания).
       Секунды не показываем: тикающая цифра — самое громкое на экране. Проба `tools/qa_pdp_promo_quiet.py`. */
.product-promo { background: var(--nb-cream-muted, #F7F5F2) !important; padding: var(--nb-space-3, 15px) !important; border-radius: 0 !important; }
/* отступ снизу на телефоне и хвостовой <br> приходят из самого описания — снимаем */
.product-promo .label-tags-item { padding: 0 !important; }
.product-promo .label-tags-item .popup > br { display: none; }
.product-promo .label-tags-item .popup > div[style] {
    background: none !important; padding: 0 !important; border-radius: 0 !important;
    font-size: var(--nb-fs-sm, 12px); line-height: 1.45 !important; color: var(--nb-gray-700, #757575);
}
.product-promo .label-tags-item .popup [style*="ff0000"],
.product-promo .label-tags-item .popup #demo-timer-ny1 { color: inherit !important; }
.product-promo .label-tags-item .popup > div[style] > span:first-child { color: var(--nb-ink, #000) !important; font-size: var(--nb-fs-base, 14px); }
.product-promo .label-tags-item .popup .mobile-negative-margin {
    flex-wrap: wrap; justify-content: flex-start !important; gap: var(--nb-space-1, 5px) var(--nb-space-3, 15px);
    margin: var(--nb-space-2, 10px) 0 0 !important;
}
.product-promo .label-tags-item .popup .mobile-negative-margin > div { margin-left: auto; font-size: var(--nb-fs-sm, 12px); }
.product-promo .label-tags-item .popup .ny-timer { gap: 0 !important; align-items: baseline !important; color: var(--nb-ink, #000) !important; font-variant-numeric: tabular-nums; }
.product-promo .label-tags-item .popup .ny-timer > span:empty { display: none !important; }
.product-promo .label-tags-item .popup .ny-timer__box { min-width: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: baseline; }
.product-promo .label-tags-item .popup .ny-timer__value,
.product-promo .label-tags-item .popup .ny-timer__sep,
.product-promo .label-tags-item .popup .ny-timer__label { font-size: var(--nb-fs-sm, 12px) !important; font-weight: 400 !important; line-height: 1.45 !important; display: inline !important; margin: 0 !important; }
.product-promo .label-tags-item .popup .ny-timer__label { margin-left: 3px !important; color: var(--nb-gray-700, #757575) !important; }
.product-promo .label-tags-item .popup .ny-timer__sep { margin: 0 var(--nb-space-1, 5px) !important; color: inherit !important; }
.product-promo .label-tags-item .popup .ny-timer__box:has(#ny-seconds),
.product-promo .label-tags-item .popup .ny-timer__sep:has(+ span + .ny-timer__box #ny-seconds) { display: none !important; }

/* 32. Подвал «Обране» для гостя (Val 02.10: «вместо кнопки „Оформление заказа“ — предложение авторизации, мотивировав,
       чтобы его сохранения никуда не исчезли»). Кнопка корзины во вкладке «Обране» не показывается вовсе — она про
       другую вкладку. Вид подвала — как у подвала корзины (линия сверху, те же поля); кнопка — строка входа мобильного
       меню (`.nb-menu-acc__row`, Val 02.10: «в стиле, как в шторке в мобильной версии»). Значения — только токены. Показ — nb-sandbox.js `favFoot()`. */
#nb-cart[data-nb-pane-on="fav"] .nb-cart__foot[data-nb-cart-foot] { display: none; }
.nb-cart__favfoot {
  padding: var(--nb-space-3) var(--nb-space-3) calc(var(--nb-space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(0 0 0 / 0.08);
}
.nb-cart__favfoot[hidden] { display: none; }
/* Кнопка — строка меню по форме, но ЧЁРНАЯ (Val 02.10: «кнопка вообще неявная — сделаем её чёрной, а иконка с текстом и
   стрелкой белая»). Иконки спрайта рисуются `currentColor`. */
.nb-cart__favfoot .nb-cart__favfoot-login.nb-menu-acc__row,
.nb-cart__guest .nb-cart__login.nb-menu-acc__row {
  background: var(--nb-ink);
  color: var(--nb-paper);
}
.nb-cart__favfoot .nb-cart__favfoot-login.nb-menu-acc__row:focus-visible,
.nb-cart__guest .nb-cart__login.nb-menu-acc__row:focus-visible { outline-color: var(--nb-ink); }
/* 33. Пустая корзина гостя: строка-объяснение и та же чёрная кнопка входа, что у «Обране» (Val 02.10: «кнопку для
       авторизации можем использовать такую же, как и в вишлисте»), под ней — «Продовжити покупки». */
.nb-cart__guest { margin: 0 var(--nb-space-3) var(--nb-space-4); text-align: left; }
.nb-cart__guest[hidden] { display: none; }
.nb-cart__guest-text { margin: 0 0 var(--nb-space-3); font-size: var(--nb-fs-sm); line-height: var(--nb-lh); color: var(--nb-gray-700); text-align: center; }
/* Телефон: пустая корзина — ВНИЗУ шторки, в зоне большого пальца одной руки (Val 02.10: «по кошику нужно спустить вниз до
   уровня нажатия пальцем одной руки»). Тело шторки становится колонкой только пока видно пустое состояние, и оно уходит
   к низу; товары и рекомендации живут как раньше. Проба qa_cart_guest_login К5. */
@media (max-width: 992px) {
  /* ⚠ `:not([hidden])` у САМОЙ вкладки (Val 03.10, снимок: «Обране (1)», а над избранным — «Кошик порожній» и «Увійти»).
     Без него правило включало вкладку корзины всякий раз, когда корзина пуста, — и когда она спрятана, потому что открыто
     «Обране» (свайп при пустой корзине открывает избранное): `display: flex` перебивал `[hidden]`. Проба qa_cart_side_drawer Ж5. */
  #nb-cart [data-nb-pane="cart"]:not([hidden]):has(> .nb-cart__empty:not([hidden])) { display: flex; flex-direction: column; }
  #nb-cart [data-nb-pane="cart"] > .nb-cart__empty { margin-top: auto; padding-bottom: calc(var(--nb-space-6) + env(safe-area-inset-bottom)); }
}
/* 34. Пустое «Обране» (Val 05.10, 13123, снимок &Other Stories): строка по центру, под ней кнопка В РАМКЕ во всю ширину —
       «Новинки». Вкладка — колонкой, пустое состояние по центру высоты; вход гостя — подвал выше (§ favfoot). */
#nb-cart [data-nb-pane="fav"]:not([hidden]):has(> .nb-cart__empty--fav:not([hidden])) { display: flex; flex-direction: column; }
#nb-cart [data-nb-pane="fav"] > .nb-cart__empty--fav { margin-block: auto; padding: var(--nb-space-6) 0; }   /* кнопка — той же ширины, что вход в подвале */
.nb-cart__empty--fav .nb-cart__empty-text { margin: 0 0 var(--nb-space-4); font-size: var(--nb-fs-base); line-height: var(--nb-lh); color: var(--nb-ink); }
.nb-cart__empty-cta {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--nb-tap);
  border: var(--nb-border) solid var(--nb-ink); color: var(--nb-ink); background: transparent;
  font-size: var(--nb-fs-sm); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.nb-cart__empty-cta:hover { background: var(--nb-ink); color: var(--nb-paper); }
.nb-cart__empty-cta:focus-visible { outline: var(--nb-border) solid var(--nb-ink); outline-offset: 2px; }
.nb-cart__favfoot-title {
  margin: 0 0 var(--nb-space-1);
  font-size: var(--nb-fs-base);
  line-height: var(--nb-lh);
  color: var(--nb-ink);
}
.nb-cart__favfoot-text {
  margin: 0 0 var(--nb-space-3);
  font-size: var(--nb-fs-sm);
  line-height: var(--nb-lh);
  color: var(--nb-gray-700);
}
@media (min-width: 993px) {
  .nb-cart__favfoot { padding: var(--nb-space-4) var(--nb-gutter) var(--nb-space-6); }
}

/* Счётчики шапки «(N)» не двигают иконки (Val 07.10, 13362: «при добавлении товара в избранное чуть-чуть скачет
   вёрстка: иконка человечка уходит влево, потому что меняется ширина цифры»). Замер 07.10, ПК: «Обране» 65.3 px при «0»,
   62.3 при «1», 70.3 при «12» — человечек −3/+5 px; телефон 2/6 px. `tabular-nums` уже стоит, но у Ruberoid нет
   моноширинных цифр («1» уже «0»), и меняется ЧИСЛО цифр. Запас на две цифры — `4ch` = «(00)»; счётчик — flex-элемент
   (`.header__action` — flex), так что min-width работает, а `[hidden]` его по-прежнему прячет. Корзина — тем же
   правилом: её счётчик двигает всё, что левее. Лом пробы qa_header_count_width.py: `nb-lom-count-width` на <html>. */
html:not(.nb-lom-count-width) .header .header__action > .header__count { min-width: 4ch; text-align: left; }

/* §22б. «Серая полоска справа» на ПК (Val 07.10, 13381: «На десктопе опять справа серая полоска. надо убрать ее со всего
         сайта. А на мобе надо оставить как было»). Это канал полосы прокрутки: пока страница заперта (шторка, меню,
         попап), полосы нет, а место под неё оставлено (`scrollbar-gutter: stable`). Fixed-слои его не накрывают, и в нём
         виден фон корня; тема красит его цветом затемнения (nb-search.css), корзина и «Додано» — белым.
         ⚠ МЕСТО ПОД ПОЛОСУ НЕ СНИМАЕМ — это пробовали 07.10 и откатили: в этом Chrome при `scrollbar-gutter: stable`
         единица `vw` канал НЕ включает, и без канала всё, что посчитано от `vw` (плитки рядов карточки), растягивалось
         на 15 px при каждом открытии слоя — Val: «Теперь при открытии попапа скачет верстка» (13384).
         Поэтому канал остаётся, а красим его в цвет того, что к нему прилегает (замер 07.10, ПК, настоящие полосы):
           • белая панель у правого края (корзина, «Додано», лист размеров ВНУТРИ шторки — 13354, правые попапы
             карточки «Розстрочка», «Склад і догляд», «Доставка», «Відгуки») — белый. До правки у листа в шторке и у
             попапов карточки канал был серым рядом с белой панелью — это и есть снимок Val;
           • затемнение (меню, фильтры, поиск, окна по центру) — как и было, цвет затемнения, но на высоте шапки — белый:
             шапка не затемняется, и канал рядом с ней читался серым квадратом над затемнением.
         `background-attachment: fixed` — полосы считаются от окна, а не от высоты документа.
         Класс `nb-sbw` ставит nb-sandbox.js §22б только при настоящей полосе (у телефона полоса поверх содержимого —
         правил нет, всё как было). Лом пробы qa_scroll_channel.py: `nb-lom-gutter` на <html>. */
html.nb-sbw:not(.nb-lom-gutter):is(.nb-search-open, :has(> body:is(.is-locked, .is-menu-open, .is-modal-open, .modal-open, .nb-mfs-lock))) {
  background: linear-gradient(to bottom, var(--nb-paper, #FFFFFF) var(--nb-menu-top, 60px), rgb(199 199 199) var(--nb-menu-top, 60px)) fixed;
  background: linear-gradient(to bottom, var(--nb-paper, #FFFFFF) var(--nb-menu-top, 60px),
              color-mix(in srgb, var(--nb-ink, #000000) 22%, var(--nb-paper, #FFFFFF)) var(--nb-menu-top, 60px)) fixed;
}
html.nb-sbw:not(.nb-lom-gutter):not(#nb-0):is(
    :has(> body.is-cart-open),
    :has(.nb-added.is-open),
    :has(#nb-quick-buy.quick-buy--dock:not([hidden])),
    :has(.modal.modal--drawer:not([hidden]) .modal__panel)) {
  background: var(--nb-paper, #FFFFFF);
}
/* Правое поле шторок у края окна — ВМЕСТЕ с каналом (Val 07.10, 13389: «В корзине на десктопе теперь правый отступ
   выглядит слишком большим. можем ли мы учитывать место под полоску в правом отступе корзины и шторки быстрой
   покупки»). Белый канал рядом с белой панелью читается её частью, поэтому от края ОКНА до содержимого — то же поле,
   что слева (40 px): поле панели меньше на ширину канала. Лист размеров в шторке берёт поле у неё (`sheetDock`).
   ⚠ Это отменяет для шторок правило §27б «правый край содержимого на одной вертикали с иконкой корзины в шапке» —
   решение Val 13389: содержимое теперь на 15 px правее иконки. Лом пробы qa_scroll_channel.py: `nb-lom-gutter`. */
@media (min-width: 993px) {
  html.nb-sbw:not(.nb-lom-gutter) :is(.nb-cart__head, .nb-cart__body, .nb-cart__foot, .nb-cart__favfoot) {
    padding-right: calc(var(--nb-gutter, 40px) - var(--nb-sbw, 0px));
  }
}
@media (min-width: 1024px) {
  html.nb-sbw:not(.nb-lom-gutter):not(.nb-lom-added-wide):not(.nb-lom-added-card) .nb-added__panel.nb-added__panel {
    padding-right: calc(var(--nb-gutter, 40px) - var(--nb-sbw, 0px));
  }
}
/* Своя полоса прокрутки длинных попапов на ПК («Підібрати розмір», «Наявність у магазинах»: серый бегунок у правого
   края панели) — тоже «серая полоска справа». Прячем, как у корзины и фильтров (Val 01.10); прокрутка колесом, тачпадом,
   клавишами остаётся. Тот же лом. */
html.nb-sbw:not(.nb-lom-gutter) .modal .modal__scroll { scrollbar-width: none; }
html.nb-sbw:not(.nb-lom-gutter) .modal .modal__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Цифры счётчиков шапки — ВПЛОТНУЮ к иконке (Val 07.10, 13379: «Иконки, цифры надо плотнее к иконкам приставить»).
   Запас под две цифры (§ выше, 13362) держал «(0)» у ЛЕВОГО края места, и между цифрой и иконкой зиял пустой хвост
   запаса (ПК 13 px, телефон 9 px). Прижимаем цифру к правому краю — к иконке; запас остаётся слева, иконки по-прежнему
   не прыгают. Лом пробы qa_header_count_width.py: `nb-lom-count-gap` на <html>. */
html:not(.nb-lom-count-width):not(.nb-lom-count-gap) .header .header__action > .header__count { text-align: right; }

/* End */


/* Start:/local/templates/redesign_nb/css/nb-menu-grid.nbmin.css?17921677172366*/
/*nb-src:8bfcd53c78dc96cb5a2d6929795682d3:c4a834e7edd3431212b397c764d10b14*/

#site-menu .nb-menu-all__strip.nb-menu-all__strip--grid { display: block; overflow: visible; }
#site-menu .nb-menu-all__strip.nb-menu-all__strip--empty { display: none; }


#site-menu .nb-menu-all__strip .nb-menu-tile.nb-menu-tile--wide {
    width: calc(var(--nb-menu-tile-w) * var(--nb-tile-span, 2) + 6px * (var(--nb-tile-span, 2) - 1));
}
#site-menu .nb-menu-all__strip .nb-menu-tile--wide .nb-menu-tile__img,
#site-menu .nb-menu-all__strip .nb-menu-tile--wide .nb-menu-tile__ph { aspect-ratio: auto; height: calc(var(--nb-menu-tile-w) * 1.5); }

.nb-menu-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
}
.nb-menu-grid__cell {
    grid-column: calc(var(--c) + 1) / span var(--w);
    grid-row: calc(var(--r) + 1) / span var(--h);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    color: #000;
}
.nb-menu-grid__cell picture { display: block; flex: 1 1 auto; min-height: 0; }
.nb-menu-grid__cell .nb-menu-tile__img,
.nb-menu-grid__cell .nb-menu-tile__ph { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }

.nb-menu-grid__cell--banner .nb-menu-tile__img,
.nb-menu-grid__cell--banner .nb-menu-tile__ph { height: 100%; aspect-ratio: auto; }

.nb-menu-grid__cell--banner .nb-menu-tile__ph { flex: 1 1 auto; height: auto; aspect-ratio: calc(var(--w) * 2) / calc(var(--h) * 3); }
.nb-menu-grid__cell .nb-menu-tile__label { flex: none; }

@media (max-width: 767px) {
    .nb-menu-grid { grid-template-columns: repeat(var(--mcols, 2), minmax(0, 1fr)); }
    .nb-menu-grid__cell {
        grid-column: calc(var(--mc) + 1) / span var(--mw);
        grid-row: calc(var(--mr) + 1) / span var(--mh);
    }
    .nb-menu-grid__cell--banner .nb-menu-tile__ph { aspect-ratio: calc(var(--mw) * 2) / calc(var(--mh) * 3); }
}


@media (min-width: 1024px) and (hover: hover) {
    #site-menu .nb-menu-grid__cell { transition: opacity var(--nb-motion, 200ms ease); }
    #site-menu .nb-menu-grid:hover .nb-menu-grid__cell { opacity: .5; }
    #site-menu .nb-menu-grid .nb-menu-grid__cell:hover { opacity: 1; }
    #site-menu .nb-menu-grid .nb-menu-grid__cell:hover .nb-menu-tile__label { color: var(--nb-ink, #000); }
}

/* End */


/* Start:/local/templates/redesign_nb/components/aniart/banners.dash/dash-top/style.css?179278287221513*/
/* Редизайн (перенос с main 08.10, #5): в R плашка стоит ПЕРЕД <header> (шапка R липкая, плашка уезжает при прокрутке),
   поэтому селекторы main `header .nb-topbar …` здесь — `body .nb-topbar …` (тот же вес). */
/* Верхняя плашка — единый формат (NB, 25.09.2026). Разметка — template.php рядом.
   Цвета приходят из баннера переменными --nb-tb-bg / --nb-tb-fg.
   Старые классы темы (.one-banner, .banner_text, .dash_banners_top, .close) здесь
   намеренно НЕ используются: на них висят правила с !important из fix.css и app.css. */

body .banners_top.nb-topbar {
  position: relative;
  display: block;
  padding: 0;
  text-align: center;
}

body .nb-topbar .nb-topbar__track {
  display: grid;                      /* слайды стопкой: высота = самый высокий */
}

body .nb-topbar .nb-topbar__slide {
  grid-area: 1 / 1;
  position: relative;
  background: var(--nb-tb-bg, #000);
  color: var(--nb-tb-fg, #fff);
  opacity: 0;
  visibility: hidden;
}
body .nb-topbar .nb-topbar__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;       /* новый проявляется ПОВЕРХ предыдущего */
}
body .nb-topbar .nb-topbar__slide.is-leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

/* --- строка плашки --- */
body .nb-topbar .nb-topbar__head {
  position: relative;
}
body .nb-topbar .nb-topbar__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  padding: 8px 44px;
  color: inherit;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
body .nb-topbar a.nb-topbar__bar,
body .nb-topbar .nb-topbar__bar[data-toggle] {
  cursor: pointer;
}
body .nb-topbar a.nb-topbar__bar:hover,
body .nb-topbar a.nb-topbar__bar:focus {
  color: inherit;
  text-decoration: none;
}
body .nb-topbar .nb-topbar__text {
  display: block;
  text-wrap: balance;
}
body .nb-topbar .nb-topbar__sep {
  padding: 0 .7em;
  opacity: .7;
}
/* строка не влезла — переносим по разделителю, а сам «|» прячем (выбирает script.js) */
body .nb-topbar .nb-topbar__sep.is-break {
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
body .nb-topbar .nb-topbar__timer {
  font-variant-numeric: tabular-nums;   /* цифры одной ширины — строка не «дышит» каждую секунду */
  white-space: nowrap;
}
body .nb-topbar .nb-topbar__arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
body .nb-topbar .is-open .nb-topbar__arrow {
  transform: translateY(3px) rotate(-135deg);
}

body .nb-topbar .nb-topbar__close {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .85;
}
body .nb-topbar .nb-topbar__close::before,
body .nb-topbar .nb-topbar__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -.75px 0 0 -6px;
  background: currentColor;
  transform: rotate(45deg);
}
body .nb-topbar .nb-topbar__close::after {
  transform: rotate(-45deg);
}
body .nb-topbar .nb-topbar__close:hover {
  opacity: 1;
}

/* --- раскрытый блок: высоту двигает браузер (0fr → 1fr), без замеров в JS --- */
body .nb-topbar .nb-topbar__descr {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.22, 1, .36, 1);
}
body .nb-topbar .is-open .nb-topbar__descr {
  grid-template-rows: 1fr;
}
body .nb-topbar .nb-topbar__descr-clip {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
body .nb-topbar .is-open .nb-topbar__descr-clip {
  visibility: visible;
  transition: visibility 0s;
}
/* Блок — узкой колонкой по центру плашки, текст в нём — от левого края (Val 26.09):
   списки условий по центру читаются рвано, у каждой строки своё начало. */
body .nb-topbar .nb-topbar__descr-in {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  padding: 6px 20px 22px;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}
body .nb-topbar .nb-topbar__descr-in p {
  margin: 0 0 10px;
}
body .nb-topbar .nb-topbar__descr-in p:last-child {
  margin-bottom: 0;
}
/* абзац только из кнопок — по центру (метку ставит template.php) */
body .nb-topbar .nb-topbar__descr-in .nb-topbar__actions {
  text-align: center;
}
body .nb-topbar .nb-topbar__descr-in .nb-topbar__actions a {
  margin: 8px 4px 0;
}

/* любая ссылка в доп. тексте = кнопка в цветах плашки (наоборот) */
body .nb-topbar .nb-topbar__descr-in a {
  display: inline-block;
  margin: 8px 8px 0 0;
  padding: 10px 18px;
  border-radius: 3px;
  background: var(--nb-tb-fg, #fff);
  color: var(--nb-tb-bg, #000);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity .2s ease;
}
body .nb-topbar .nb-topbar__descr-in a:hover,
body .nb-topbar .nb-topbar__descr-in a:focus {
  color: var(--nb-tb-bg, #000);
  text-decoration: none;
  opacity: .85;
}
/* обычная ссылка в тексте, не кнопка */
body .nb-topbar .nb-topbar__descr-in a.nb-link {
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline;
}

@media (max-width: 992px) {
  body .nb-topbar .nb-topbar__bar {
    min-height: 28px;
    padding: 6px 40px;
    font-size: 11px;
  }
  body .nb-topbar .nb-topbar__close {
    right: 2px;
  }
  body .nb-topbar .nb-topbar__descr-in {
    padding: 2px 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .nb-topbar .nb-topbar__slide.is-active,
  body .nb-topbar .nb-topbar__descr,
  body .nb-topbar .nb-topbar__arrow {
    transition: none;
  }
}

/* Редизайн: место плашки в раскладке R (`--nb-topbar-on`, см. nb-sandbox.css «Плашка ЕСТЬ в документе») —
   фактическая высота из скрипта шаблона. Селектор сильнее `body:not(:has(.topbar))` из nb-sandbox.css (там класс
   темы `.topbar`, у этой плашки его нет), закрыли плашку — её нет в документе, :has() снова даёт 0. */
html body:has(.nb-topbar) { --nb-topbar-on: var(--nb-topbar-real, 32px); }


/* ===== Тема «halloween» (NB, 22.10.2026) =====
   Включается словом halloween в «Цвет заливки» баннера (template.php). Фон ОДИН на всю плашку — и в закрытом
   виде, и в раскрытом (тёмные края, оранжевая середина), без швов между строкой и текстом. Мыши летают в
   строке плашки: полёт считает script.js (класс is-js), без JS — запасной вариант на CSS-анимации. */

@keyframes nbBatFlyR { from { transform: translate3d(-14vw, 0, 0); } to { transform: translate3d(114vw, 0, 0); } }
@keyframes nbBatFlyL { from { transform: translate3d(114vw, 0, 0); } to { transform: translate3d(-14vw, 0, 0); } }
@keyframes nbBatBob {
  0%, 100% { transform: translateY(-3px) rotate(-5deg); }
  50% { transform: translateY(5px) rotate(6deg); }
}
@keyframes nbBatWingL {
  from { transform: rotate(26deg) scaleY(1); }
  to { transform: rotate(-20deg) scaleY(.78); }
}
@keyframes nbBatWingR {
  from { transform: rotate(-26deg) scaleY(1); }
  to { transform: rotate(20deg) scaleY(.78); }
}
@keyframes nbHazeDrift {
  from { transform: translate3d(-9%, 0, 0); }
  to { transform: translate3d(9%, 0, 0); }
}

body .nb-topbar .nb-topbar__slide--halloween {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, 0) 22px),
    linear-gradient(90deg, #130700 0%, #4a1d00 12%, #a84a00 30%, var(--nb-tb-bg, #ed7402) 50%, #a84a00 70%, #4a1d00 88%, #130700 100%);
  background-repeat: no-repeat;
  background-size: 100% calc(100% + 2px);   /* слои вуали чуть больше блока: на дробной высоте внизу не остаётся строки без вуали */
  background-position: 0 0;
}
body .nb-topbar .nb-topbar__slide--halloween {
  overflow: hidden;
}
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__bar,
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__close,
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__descr {
  position: relative;
  z-index: 3;
}
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__close {
  position: absolute;
}
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__bar {
  position: relative;
  text-shadow: 0 1px 3px rgba(40, 14, 0, .65);
}
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__descr-in {
  text-shadow: 0 1px 3px rgba(40, 14, 0, .55);
}

body .nb-topbar .nb-topbar__fx {
  position: absolute;
  inset: 0 0 1px;   /* слой мышей/дымки — отдельный композитный; на дробном DPR он мог вылезти на строку ниже фона и дать яркую оранжевую полоску, — не доходим до самого низа */
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
body .nb-topbar .nb-bat {
  position: absolute;
  left: 0;
  top: var(--top, 30%);
  width: var(--w, 24px);
  margin-top: calc(var(--w, 24px) * -.25);
  opacity: var(--o, .7);
  filter: blur(var(--blur, 0px));
  animation: nbBatFlyR var(--fly, 28s) linear var(--at, 0s) infinite;
  will-change: transform;
}
body .nb-topbar .nb-bat.is-l {
  animation-name: nbBatFlyL;
}
body .nb-topbar .nb-bat__bob {
  display: block;
  animation: nbBatBob var(--bob, 3s) ease-in-out infinite;
}
body .nb-topbar .nb-bat.is-l .nb-bat__svg {
  transform: scaleX(-1);
}
body .nb-topbar .nb-bat__svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #230b00;
  overflow: visible;
}
body .nb-topbar .nb-bat__w {
  transform-box: view-box;
  transform-origin: 29px 14px;
  animation: nbBatWingL var(--flap, .35s) ease-in-out infinite alternate;
}
body .nb-topbar .nb-bat__w--r {
  transform-origin: 35px 14px;
  animation-name: nbBatWingR;
}

/* полёт считает script.js: положение, курс и размах крыльев задаются из него */
body .nb-topbar .nb-topbar__fx.is-js .nb-bat {
  top: 0;
  margin: 0;
  animation: none;
  transform-origin: 50% 55%;
}
body .nb-topbar .nb-topbar__fx.is-js .nb-bat.is-l .nb-bat__svg {
  transform: none;
}
body .nb-topbar .nb-topbar__fx.is-js .nb-bat__bob,
body .nb-topbar .nb-topbar__fx.is-js .nb-bat__w {
  animation: none;
}

/* дымка поверх мышей: мыши остаются в полутени под оранжевой пеленой */
body .nb-topbar .nb-topbar__haze {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -15%;
  width: 130%;
  z-index: 2;
  background:
    radial-gradient(38% 150% at 22% 115%, rgba(255, 140, 20, .5), transparent 70%),
    radial-gradient(34% 160% at 68% -25%, rgba(255, 175, 70, .38), transparent 70%),
    radial-gradient(30% 140% at 92% 105%, rgba(255, 120, 10, .35), transparent 70%);
  animation: nbHazeDrift 16s ease-in-out infinite alternate;
  will-change: transform;
}

body .nb-topbar .nb-topbar__slide--halloween:not(.is-active) .nb-bat,
body .nb-topbar .nb-topbar__slide--halloween:not(.is-active) .nb-bat__bob,
body .nb-topbar .nb-topbar__slide--halloween:not(.is-active) .nb-bat__w,
body .nb-topbar .nb-topbar__slide--halloween:not(.is-active) .nb-topbar__haze {
  animation-play-state: paused;
}

@media (max-width: 992px) {
  body .nb-topbar .nb-bat { width: calc(var(--w, 24px) * .78); }
}

/* без анимации: мыши стоят на месте, крылья раскрыты */
@media (prefers-reduced-motion: reduce) {
  body .nb-topbar .nb-bat,
  body .nb-topbar .nb-bat__bob,
  body .nb-topbar .nb-bat__w,
  body .nb-topbar .nb-topbar__haze {
    animation: none;
  }
  body .nb-topbar .nb-bat:nth-child(1) { transform: translateX(14vw); }
  body .nb-topbar .nb-bat:nth-child(2) { transform: translateX(31vw); }
  body .nb-topbar .nb-bat:nth-child(3) { transform: translateX(58vw); }
  body .nb-topbar .nb-bat:nth-child(4) { transform: translateX(72vw); }
  body .nb-topbar .nb-bat:nth-child(5) { transform: translateX(46vw); }
  body .nb-topbar .nb-bat:nth-child(6) { transform: translateX(88vw); }
  body .nb-topbar .nb-bat:nth-child(7) { transform: translateX(6vw); }
}

/* halloween-btn: кнопка в раскрытом блоке — чёрный текст на белом (читается на любом фоне), при наведении
   плавно инвертируется: чёрная кнопка с белым текстом (без подъёма) */
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__descr-in a:not(.nb-link) {
  background: #fff;
  color: #000;
  text-shadow: none;
  opacity: 1;
  transition: background-color .35s ease, color .35s ease;
}
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__descr-in a:not(.nb-link):hover,
body .nb-topbar .nb-topbar__slide--halloween .nb-topbar__descr-in a:not(.nb-link):focus {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* halloween-mobile: затемнение по бокам углами (как на десктопе слева): тёмные верхние углы плавно уходят в коричневый и
   оранжевый, нижний правый — тоже тёмный, нижний левый — мягче; радиальные пятна сходятся в центре без вертикальной полосы */
@media (max-width: 992px) {
  body .nb-topbar .nb-topbar__slide--halloween {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, 0) 22px),
      radial-gradient(ellipse 75% 85% at 0% 0%, rgba(19, 7, 0, .85) 0%, rgba(19, 7, 0, 0) 100%),
      radial-gradient(ellipse 75% 85% at 100% 0%, rgba(19, 7, 0, .85) 0%, rgba(19, 7, 0, 0) 100%),
      radial-gradient(ellipse 60% 70% at 0% 100%, rgba(19, 7, 0, .4) 0%, rgba(19, 7, 0, 0) 100%),
      radial-gradient(ellipse 75% 85% at 100% 100%, rgba(19, 7, 0, .8) 0%, rgba(19, 7, 0, 0) 100%),
      var(--nb-tb-bg, #ed7402);
    background-repeat: no-repeat;
    background-size: 100% calc(100% + 2px);   /* слои вуали чуть больше блока: на дробной высоте внизу не остаётся строки без вуали */
    background-position: 0 0;
  }
}

/* Раскрытая плашка — поверх страницы, а не в потоке (NB, 22.10.2026). Раньше раскрытие толкало шапку вниз, и героя
   главной (nb-home.js: heroUnderHeader считает высоту от верха шапки) пересчитывало при каждом открытии и закрытии.
   Теперь дорожка держит высоту СВЕРНУТОЙ плашки (--nb-topbar-real, template.php), а слайд не растягивается по ней и раскрывается
   поверх шапки (дорожка не растёт): раскладка страницы не меняется. */
body .nb-topbar {
  z-index: 300;
}
body .nb-topbar .nb-topbar__track {
  height: var(--nb-topbar-real, auto);
}
body .nb-topbar .nb-topbar__slide {
  align-self: start;   /* слайд не растягивается по дорожке: растёт и сжимается сам, с фоном, — закрытие плавное, как открытие */
  min-height: var(--nb-topbar-real, 0);   /* высота дорожки округлена вверх — слайд закрывает её целиком, без пикселя без фона/вуали внизу */
}

/* ===== Тема «live» — прямой эфир (NB, 23.10.2026) =====
   Включается словом live в «Цвет заливки» баннера (template.php). Тихая тёмная плашка; единственный цветной
   знак — красная точка «наживо» с расходящимся кольцом (как индикатор записи). Вся плашка — ссылка на эфир,
   стрелка в конце сдвигается при наведении. Гаснет сама по «Таймер (дата завершения)» (nbTopbarGone). */
@keyframes nbLiveRing {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}
body .nb-topbar .nb-topbar__slide--live,
body .nb-topbar .nb-topbar__slide--replay {
  background: #141414;
  color: #fff;
}
body .nb-topbar .nb-topbar__slide--live .nb-topbar__live,
body .nb-topbar .nb-topbar__slide--replay .nb-topbar__live {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-right: 12px;
  margin-top: -2px;   /* бейдж не выше строки текста (16 px): плашка эфира той же высоты, что и соседние */
  margin-bottom: -2px;
  padding: 1px 9px 1px 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
body .nb-topbar .nb-topbar__slide--live .nb-topbar__dot,
body .nb-topbar .nb-topbar__slide--replay .nb-topbar__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3b30;
}
body .nb-topbar .nb-topbar__slide--live .nb-topbar__dot::after,
body .nb-topbar .nb-topbar__slide--replay .nb-topbar__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff3b30;
  animation: nbLiveRing 1.6s cubic-bezier(.22, 1, .36, 1) infinite;
}
body .nb-topbar .nb-topbar__slide--live .nb-topbar__go,
body .nb-topbar .nb-topbar__slide--replay .nb-topbar__go {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
body .nb-topbar .nb-topbar__slide--live a.nb-topbar__bar:hover .nb-topbar__go,
body .nb-topbar .nb-topbar__slide--replay a.nb-topbar__bar:hover .nb-topbar__go,
body .nb-topbar .nb-topbar__slide--live a.nb-topbar__bar:focus-visible .nb-topbar__go,
body .nb-topbar .nb-topbar__slide--replay a.nb-topbar__bar:focus-visible .nb-topbar__go {
  transform: translateX(3px) rotate(45deg);
}
@media (max-width: 600px) {
  body .nb-topbar .nb-topbar__slide--live .nb-topbar__live,
  body .nb-topbar .nb-topbar__slide--replay .nb-topbar__live {
    gap: 6px;
    margin-right: 8px;
    padding: 1px 7px 1px 6px;
    font-size: 9px;
    line-height: 14px;
    letter-spacing: .12em;
  }
  body .nb-topbar .nb-topbar__slide--live .nb-topbar__go,
  body .nb-topbar .nb-topbar__slide--replay .nb-topbar__go {
    margin-left: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .nb-topbar .nb-topbar__slide--live .nb-topbar__dot::after,
  body .nb-topbar .nb-topbar__slide--replay .nb-topbar__dot::after {
    animation: none;
    opacity: 0;
  }
  body .nb-topbar .nb-topbar__slide--live .nb-topbar__go,
  body .nb-topbar .nb-topbar__slide--replay .nb-topbar__go {
    transition: none;
  }
}

/* Все плашки одной высоты (Val 23.10): дорожка держит высоту самой высокой (--nb-topbar-real), а строка более короткой
   плашки встаёт по центру этой высоты, а не прижимается к верху. Раскрытая плашка — как прежде, растёт сама. */
body .nb-topbar .nb-topbar__slide:not(.is-open) .nb-topbar__head {
  display: flex;
  align-items: center;
  min-height: var(--nb-topbar-real, 0);
}

/* Тема «replay» — запись эфира (NB, 23.10.2026): вид темы live, вместо пульсирующей точки — неподвижный ▶. */
body .nb-topbar .nb-topbar__slide--replay .nb-topbar__play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent currentColor;
}

/* Свайп плашек пальцем (NB, 23.10.2026, script.js): горизонтальный жест забирает плашка (плавная смена), вертикальный —
   прокрутка страницы. */
body .banners_top.nb-topbar {
  touch-action: pan-y pinch-zoom;
}

/* End */
/* /local/templates/redesign_nb/css/slick.css?17914973601895 */
/* /local/templates/redesign_nb/dist/app.css?179149736031634 */
/* /local/templates/redesign_nb/css/nb-sandbox.css?1793278444242422 */
/* /local/templates/redesign_nb/css/nb-menu-grid.nbmin.css?17921677172366 */
/* /local/templates/redesign_nb/components/aniart/banners.dash/dash-top/style.css?179278287221513 */