/*
 * subcategories of a catalog category: cards with a preview (figma 5799:26982, phone 5799:30075)
 * carousel and arrows are shared parts: css/up-carousel.css
 * selectors have two classes on purpose - shared css files can be linked more than once on a page
 */
.scb{--scb-pad:20px;--scb-card:140px;--scb-gap:10px;--scb-radius:10px;--scb-time:.3s;--scb-ease:cubic-bezier(.45,0,.15,1);
	position:relative;background:#fff;border-radius:10px;padding:var(--scb-pad);margin:0 0 20px;min-width:0}

/* ---- head: title + fold button. the whole line is clickable ---- */
.scb .scb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.scb .scb-title{font-size:18px;line-height:1.35;font-weight:700;color:#212121}
.scb .scb-toggle{flex:0 0 auto;width:30px;height:30px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
	border:1px solid #EFEFEF;border-radius:100px;background:#fff;color:#CBCBCB;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .18s ease,color .18s ease}
.scb .scb-toggle svg{display:block;width:24px;height:24px;flex:0 0 24px;transition:transform var(--scb-time) var(--scb-ease)}
.scb.is-closed .scb-toggle svg{transform:rotate(180deg)}
.scb .scb-toggle:focus-visible{outline:2px solid #EC7529;outline-offset:2px}
@media (hover:hover){
	.scb .scb-head:hover .scb-toggle{border-color:#EC7529;color:#EC7529}
}

/* ---- body: folds by height with no js measuring (grid rows 1fr -> 0fr) ----
   the row of cards goes from edge to edge of the plate, so the body is wider than the padding box */
.scb .scb-body{display:grid;grid-template-rows:1fr;margin:0 calc(var(--scb-pad) * -1);transition:grid-template-rows var(--scb-time) var(--scb-ease)}
.scb .scb-body-in{min-height:0;min-width:0;overflow:hidden;visibility:visible;transition:visibility 0s linear 0s}
.scb .scb-car{margin-top:var(--scb-pad)}
.scb.is-closed .scb-body{grid-template-rows:0fr}
/* folded cards must not take keyboard focus: hidden after the fold animation ends */
.scb.is-closed .scb-body-in{visibility:hidden;transition-delay:var(--scb-time)}
/* state restored on page load: no animation */
.scb.no-anim .scb-body,.scb.no-anim .scb-body-in,.scb.no-anim .scb-toggle svg{transition:none}

/* ---- row ---- */
.scb .scb-track{gap:var(--scb-gap);padding:0 var(--scb-pad)}
.scb .scb-view{scroll-padding:0 var(--scb-pad)}
.scb .scb-nav{position:absolute;right:var(--scb-pad);top:50%;transform:translateY(-50%);z-index:2}

/* ---- card ---- */
.scb .scb-card{width:var(--scb-card);box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 0 10px;overflow:hidden;
	border:1px solid #DFDFDF;border-radius:var(--scb-radius);background:#fff;color:#212121;text-decoration:none;outline:none;transition:border-color .18s ease;-webkit-tap-highlight-color:transparent}
.scb .scb-img{display:block;position:relative;width:100%;aspect-ratio:1/1;background:#fff;overflow:hidden}
/* the picture takes the whole tile, like product photos in the catalog */
.scb .scb-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
/* a product photo (no own preview yet) is shown whole on white */
.scb .scb-card.is-photo .scb-img img{object-fit:contain}
.scb .scb-name{display:flex;align-items:center;justify-content:center;height:42px;padding:0 10px;font-size:14px;line-height:1.5;font-weight:400;text-align:center;overflow:hidden}
/* a long single word (e.g. "Відеореєстратори") is hyphenated by syllables, it is cut anywhere only when the browser can not hyphenate */
.scb .scb-name > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.scb .scb-card.is-active{border-color:#EC7529}
.scb .scb-card.is-active .scb-name{font-weight:700}
.scb .scb-card:focus-visible{border-color:#EC7529;box-shadow:inset 0 0 0 1px #EC7529}
@media (hover:hover){
	.scb .scb-card:hover{border-color:#EC7529;color:#212121;text-decoration:none}
}

@media (max-width:768px){
	.scb{--scb-pad:10px;--scb-card:80px;--scb-gap:5px;--scb-radius:6px;margin-bottom:10px}
	.scb .scb-title{font-size:14px;line-height:1.5}
	.scb .scb-toggle{width:24px;height:24px}
	.scb .scb-card{gap:5px;padding-bottom:5px}
	.scb .scb-name{height:30px;padding:0 5px;font-size:10px;line-height:1.2}
	/* a phone is scrolled by a finger */
	.scb .scb-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
	.scb .scb-body,.scb .scb-toggle svg,.scb .scb-card{transition:none}
	.scb.is-closed .scb-body-in{transition-delay:0s}
}