/*
 * brand showcase on the home page (figma node 5799:26793)
 * tokens: text #212121, secondary #878787, dividers #DFDFDF, brand #EC7529, green #83B00B, section bg #F8F8F8
 */
/* no overflow:hidden here: the colors list of a card opens below the card and must not be cut.
   z-index keeps that list above the next section */
.bsw{background:#F8F8F8;padding:100px 0;position:relative;z-index:6}
/* title 48/60, 20px to the orange line, line is 2px - numbers from the mockup */
.bsw .bsw-title{margin:0;line-height:60px;padding-bottom:22px;color:#212121}
.bsw .bsw-title span:after{bottom:-22px}

/* ---------- ribbon ---------- */
.bsw-ribbon{position:relative;margin-top:30px}
.bsw-ribbon-view{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.bsw-ribbon-view.is-drag{cursor:grabbing}
.bsw-track{display:flex;gap:20px;margin:0;padding:0;list-style:none;width:max-content;will-change:transform}
.bsw-brand{flex:0 0 264px;width:264px;height:110px;display:flex;flex-direction:column;align-items:center;margin:0;padding:0}
.bsw-brand-card{-webkit-touch-callout:none;-webkit-user-drag:none;display:block;width:264px;height:100px;border-radius:20px;background:#fff;border:1px solid transparent;overflow:hidden;box-sizing:border-box;transition:border-color .25s ease;-webkit-tap-highlight-color:transparent}
/* logo files were uploaded with a baked #F8F8F8 background (old grey tiles). the mockup has white cards:
   a small brightness lift turns that grey into pure white and does not touch the dark logo itself */
.bsw-brand-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:brightness(1.04)}
.bsw-brand-tail{display:block;width:24px;height:11px;margin-top:-1px;background:url(../images/brand-showcase/tail.svg) no-repeat center/24px 11px;opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease;position:relative;z-index:1}
.bsw-brand.is-active .bsw-brand-card{border-color:#EC7529}
.bsw-brand.is-active .bsw-brand-tail{opacity:1;transform:none}
@media (hover:hover){
	.bsw-brand:not(.is-active) .bsw-brand-card:hover{border-color:#DFDFDF}
}

/* ---------- prev / next ---------- */
/* z-index 9: a hovered product card gets z-index 7 from the site css and was covering the arrows */
.bsw-nav-layer{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;pointer-events:none;z-index:9}
.bsw-nav{position:absolute;right:0;top:50%;pointer-events:auto}
.bsw-ribbon .bsw-nav{transform:translateY(calc(-50% - 5px))}
.bsw-products .bsw-nav{transform:translateY(-50%)}
/* the scroll box is taller than the cards (extra room for the colors list), arrows are centered by the cards */
.bsw-products .bsw-nav-layer{top:24px;bottom:40px}
.bsw-products-view.has-open ~ .bsw-nav-layer{bottom:460px}
/* look and states of the arrows: shared css/up-carousel.css (.unav). here is only where they stand */

/* ---------- chips ---------- */
/* one right line for the arrows and for "show all": the right border of the site content.
   .container has 10px side padding, product grids of the site compensate it with negative margins,
   the arrows layer ignores it too - so the chips row does the same, otherwise the button stood 10px to the left */
.bsw-chips-row{display:flex;align-items:flex-start;justify-content:center;gap:5px;margin:30px -10px 0}
/* chips themselves are the shared tabs component (css/up-tabs.css, skin utabs--chip) */
.bsw-tabs{flex:0 1 auto;min-width:0}
.bsw-all{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:130px;height:40px;padding:0 20px;box-sizing:border-box;border-radius:100px;background:#83B00B;color:#fff!important;font-size:14px;line-height:21px;font-weight:700;white-space:nowrap;text-decoration:none!important;transition:background .2s ease}
.bsw-all:hover{background:#EC7529}

/* ---------- goods ---------- */
.bsw-products{position:relative;margin-top:30px}
/* a box that scrolls by x always clips by y. a little room is always kept for the hover shadow,
   and the big room below appears only while a colors list is opened (.has-open is set by js).
   no pointer-events tricks here: on iOS a scroll box with pointer-events:none may stop scrolling by touch */
.bsw-products-view{padding:24px 0 40px;margin:-24px 0 -40px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:0 var(--bsw-pad,20px);transition:opacity .25s ease;touch-action:pan-x pan-y}
.bsw-products-view.has-open{padding-bottom:460px;margin-bottom:-460px}
.bsw-products-view::-webkit-scrollbar{display:none}
/* min-height:0 - the site gives .catalog 450px, in a flex row it would stretch every card */
.bsw-products-track{min-height:0;display:flex;flex-wrap:nowrap;gap:20px;width:max-content;margin:0;padding:0 var(--bsw-pad,20px);box-sizing:border-box;align-items:stretch}
.bsw-products-track > .catEl{flex:0 0 264px;width:264px;max-width:none;height:auto;min-height:0;padding:0;margin:0;scroll-snap-align:start}
/* the site script (my-js.js, updateItemDivHeights) measures the FIRST card on the page and writes its height
   as inline min-height into every card of the page. cards here have another width, so after the first switch
   of a brand / category the row was jumping (3px desktop, 8px phone). the block keeps its own height:
   --bsw-card-h is set by brand-showcase.js from the cards of this block, !important beats the inline style.
   min-height itself is needed: on hover .hoverDiv becomes absolute and the card would collapse without it */
.bsw-products .ItemDiv{background:#fff;border:0;border-radius:10px;height:100%;min-height:var(--bsw-card-h,0)!important}
/* no jump of the card when its photo slider starts: slick wraps the photo in an inline-block, and an
   inline-block stands on the text baseline - that adds ~3px under the photo (262 -> 265px), so the card
   was growing a moment after it appeared. cards init one by one while the carousel is scrolled,
   so without this the row was twitching all the time */
.bsw-products .catalog-item-slider .slick-slide > div > div{vertical-align:top}
/* slick puts touch-action:pan-y on the photo slider, then a swipe that starts on a photo can not scroll the carousel */
.bsw-products .slick-slider,.bsw-products .slick-list,.bsw-products .slick-track,.bsw-products .divForImg{touch-action:pan-x pan-y!important}
.bsw-products.is-loading .bsw-products-view{opacity:.35;pointer-events:none}
.bsw-empty{width:100%;padding:60px 20px;text-align:center;color:#878787;font-size:14px}

/* skeleton cards while goods are loading for the first time */
.bsw-skel{flex:0 0 264px;width:264px;height:520px;border-radius:10px;background:linear-gradient(100deg,#fff 30%,#f3f3f3 50%,#fff 70%);background-size:300% 100%;animation:bswShine 1.2s linear infinite}
@keyframes bswShine{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- tablet / phone ---------- */
@media (max-width:991px){
	.bsw{padding:70px 0}
	/* here .container is as wide as the screen: keep 10px from the screen edge, the same line for both */
	.bsw-chips-row{margin-left:0;margin-right:0}
	.bsw-nav{right:10px}
}
@media (max-width:768px){
	.bsw{padding:50px 0}
	.bsw .bsw-title{line-height:1.25;padding-bottom:17px}
	.bsw .bsw-title span:after{bottom:-17px}
	.bsw-ribbon,.bsw-chips-row,.bsw-products{margin-top:20px}
	.bsw-track{gap:10px}
	.bsw-brand{flex-basis:160px;width:160px;height:71px}
	.bsw-brand-card{width:160px;height:61px;border-radius:14px}
	.bsw .bsw-nav{display:none}   /* two classes: must beat .unav{display:flex} from the shared css wherever it is linked */
	.bsw-chips-row{flex-direction:column;align-items:stretch;gap:12px}
	/* chips row goes edge to edge on a phone, 10px is the side padding of .container */
	.bsw-tabs{margin:0 -10px}
	.bsw-tabs .utabs-track{padding:0 10px}
	.bsw-all{align-self:center;min-width:160px}
	.bsw-products-track{gap:10px}
	.bsw-products-track > .catEl,.bsw-skel{flex-basis:calc(50vw - 20px);width:calc(50vw - 20px)}
	.bsw-products-view{scroll-snap-type:x mandatory}
}
@media (prefers-reduced-motion:reduce){
	.bsw-brand-tail,.bsw-brand-card,.bsw-products-view{transition:none}
	.bsw-skel{animation:none}
}