/*
 * "do not miss" block on the home page (figma node 5799:26757)
 * tabs themselves are the shared component: css/up-tabs.css
 */
.npb{background:#F8F8F8;padding:100px 0;position:relative;z-index:7}
/* the old wrapper of this block had no side padding: the goods grid compensates column gutters itself
   and stands exactly on the site content borders (1400px), like in the mockup */
.npb > .container{padding-left:0;padding-right:0}
/* title 48/60, 20px to the orange line, the line is 2px - numbers from the mockup */
.npb .npb-title{margin:0;line-height:60px;padding-bottom:22px;color:#212121}
.npb .npb-title span:after{bottom:-22px}
.npb-tabs{margin-top:30px}
.npb-panes{margin-top:30px}

/* content of a picked tab comes in softly. only opacity: no move, no change of size */
.npb-panes > .tab-pane.active{animation:npbIn .3s ease both}
/* goods that replace the skeleton come in softly too */
.npb-panes > .tab-pane > .goods_container:not(.npb-skel-wrap){animation:npbIn .3s ease both}
@keyframes npbIn{from{opacity:0}to{opacity:1}}
/* height of the panes box is animated by js when two tabs have different height (one was unfolded) */
.npb-panes.is-sizing{overflow:hidden;transition:height .3s cubic-bezier(.45,0,.15,1)}

/* cards: white, no border, radius 10 - like in the mockup */
.npb .ItemDiv{background:#fff;border-radius:10px}
.npb .goods_container .hoverDiv .paddingBlock{border-color:transparent}
.npb .hoverDiv{border-radius:10px}
/* no jump of a card when its photo slider starts (inline-block wrapper of slick adds ~3px under the photo) */
.npb .catalog-item-slider .slick-slide > div > div{vertical-align:top}

/* folded state: two rows are seen, the second one fades into the section background */
.npb .goods_container .catalog{max-height:var(--npb-h,1098px)}
.npb .goods_container.opening .catalog{max-height:25000px}
.npb .goods_div{height:250px;z-index:9}
.npb .goods_div:before{height:250px;background:linear-gradient(180deg,rgba(248,248,248,0) 0%,#F8F8F8 72.917%)}
.npb .goods_open{position:absolute;left:calc(50% - 1px);bottom:40px;margin:0 0 0 -25px;background:#EC7529 url(../images/up-ui/chevron-down-white.svg) no-repeat 50% 50%/24px 24px}
.npb .goods_open:hover{background:#83B00B url(../images/up-ui/chevron-down-white.svg) no-repeat 50% 50%/24px 24px}

/* skeleton while a tab is loading: same grid and same folded height, so the page does not jump */
.npb-skel-wrap{max-height:var(--npb-h,1098px);overflow:hidden}
.npb-skel{height:var(--npb-card,536px);margin-bottom:20px;border-radius:10px;background:linear-gradient(100deg,#fff 30%,#f1f1f1 50%,#fff 70%);background-size:300% 100%;animation:npbShine 1.2s linear infinite}
@keyframes npbShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
.npb-fail{padding:80px 20px;text-align:center;color:#878787;font-size:14px}

@media (max-width:991px){
	.npb{padding:70px 0}
	/* the goods grid has 5px gutters from 991px down: the row of cards has -5px side margins, so the wrapper keeps 5px padding,
	   otherwise the row sticks out of the screen and the whole page scrolls sideways */
	.npb > .container{padding-left:5px;padding-right:5px}
	/* tabs row goes edge to edge here, the first tab starts from the usual 10px */
	/* two classes: up-tabs.css is linked again lower on the page and its copy would win over one class */
	.npb .npb-tabs{margin-left:-5px;margin-right:-5px;max-width:none}
	.npb-tabs .utabs-track{padding:0 10px}
}
@media (max-width:768px){
	.npb{padding:50px 0}
	.npb .npb-title{line-height:1.25;padding-bottom:17px}
	.npb .npb-title span:after{bottom:-17px}
	.npb-tabs,.npb-panes{margin-top:20px}
	.npb .goods_div,.npb .goods_div:before{height:180px}
	.npb .goods_open{bottom:24px}
}
@media (prefers-reduced-motion:reduce){
	.npb-panes > .tab-pane.active{animation:none}
	.npb-panes.is-sizing{transition:none}
	.npb-skel{animation:none}
}