/* The catalogue and the category pages on a phone. Linked by Kits/Catalogue/def.template.php from the
   page body, after the site's stylesheets. Every selector starts with an id: the rules must beat both
   the layered main stylesheet and its unlayered copy that iPhones get. Flat selectors only (iPhones
   get CSS without nesting). Sizes are px: the root font is 12px on phones, so rem would shrink them.
   Nothing here applies from 768px up, and the screens from 992px are not touched at all.

   The catalogue app (React) draws #catalogue: the tiles, a row with the heading, the introduction
   (.big-mB-5, categories only), .filters, .resultsBar (count and «Сортировка»), .goodList, «Показать ещё»
   (.catalogueMore), a row with the pages. catalogue-mobile.js
   adds two buttons of its own beside them and keeps the state on <html>; without it nothing is folded. */

/* The two buttons exist on every screen; they show on phones only. */
#catalogue>.catalogueMobile__filtersToggle,#catalogue>.catalogueMobile__more{display:none}

/* Two of the app's blocks carry utility classes that are !important inside the main stylesheet's layers
   (.d-flex in «bootstrap», .big-mB-5 in «boilerplate-css»), and a layered !important beats any unlayered
   rule. So these two overrides go into the same layers, where the id wins. Browsers without @layer skip
   these blocks and take the same two rules from the phone block below. */
@layer bootstrap{
	@media (max-width:767.98px){
		#catalogue>.row.d-flex{display:contents!important}
	}
}
@layer boilerplate-css{
	@media (max-width:767.98px){
		#catalogue>.big-mB-5{margin-bottom:0!important}
	}
}

@media (max-width:767.98px){
	/* One column of blocks in a fixed order; «Фильтры» and «Сортировка» share a row. */
	#catalogue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-content:start}
	#catalogue>*{grid-column:1/-1;min-width:0}
	#catalogue>.catalogue-category-nav{grid-row:1}
	#catalogue>.row.d-flex{display:contents!important}
	#catalogue>.row.d-flex>.col-auto{width:auto;min-width:0;padding:0}
	#catalogue>.row.d-flex>.col-auto:first-child{grid-column:1/-1;grid-row:2}
	#catalogue>.big-mB-5{grid-row:3}
	/* «Читать полностью» in the introduction's own cell, at the end of its second line (audit 07.10), as on the page's head. */
	#catalogue>.catalogueMobile__more{grid-row:3}
	#catalogue>.catalogueMobile__filtersToggle{grid-column:1;grid-row:5}
	/* The results row (count, reset, sort) folds away: only its «Сортировка» stays, beside «Фильтры». */
	#catalogue>.resultsBar{display:contents}
	#catalogue>.resultsBar>.resultsBar__info{display:none}
	#catalogue>.resultsBar>.sorting{grid-column:2;grid-row:5;align-self:end;margin-top:4px}
	#catalogue>.filters{grid-row:6}
	#catalogue>.goodList{grid-row:7}
	#catalogue>.catalogueMore{grid-row:8}
	#catalogue>.row.big-mB-3{grid-row:9}

	/* The category tiles stay as they are on every screen: the grid of the tiles' own stylesheet. */

	/* The app's own heading (a search, a tag, another category drawn without a reload) as the page's head draws it:
	   33px instead of 46.5, less space around it. */
	#catalogue h1.display1{margin:0;padding:8px 0 6px;font-size:33px;line-height:36px}

	/* The introduction: two lines and «Читать полностью» (audit 04.10, № 43). The whole text stays in the page. */
	#catalogue>.big-mB-5{margin-bottom:0!important;font-size:16px}
	#catalogue>.big-mB-5 p{padding-top:0;line-height:23px}
	#catalogue>.big-mB-5>:last-child{margin-bottom:0}
	html.catalogueMobile:not(.catalogueIntroOpen) #catalogue>.big-mB-5{max-height:46px;overflow:hidden}
	html.catalogueMobile:not(.catalogueIntroOpen) #catalogue>.big-mB-5>p:first-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	/* 44px high for a finger, its text on the introduction's last 23px line (the margin lets it hang 10px below the cell);
	   the fade is drawn as high as the line only. */
	#catalogue>.catalogueMobile__more{position:relative;display:flex;justify-self:end;align-self:end;align-items:center;min-height:44px;margin:0 0 -10px;padding:10px 0 11px 40px;border:0;border-radius:0;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 32px) left center/100% 23px no-repeat;box-shadow:none;color:var(--Green-Brand-Dark,#066B59);font-family:Raleway,RalewayFallback,sans-serif;font-weight:800;font-size:14px;line-height:23px}
	#catalogue>.catalogueMobile__more[hidden]{display:none}

	/* «Фильтры» and «Сортировка»: two equal buttons right above the goods. */
	#catalogue>.catalogueMobile__filtersToggle{display:flex;align-items:center;gap:8px;min-height:44px;margin:12px 0 0;padding:0 12px;border:1px solid var(--Black-10,rgba(0,0,0,.1));border-radius:12px;background:var(--Black-5,rgba(0,0,0,.05));color:var(--Black-Tertiary,#282C2C);font-family:Raleway,RalewayFallback,sans-serif;font-weight:500;font-size:15px;line-height:20px;text-align:left;cursor:pointer}
	#catalogue>.catalogueMobile__filtersToggle::before{content:"";flex:none;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23282C2C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
	#catalogue>.big-mB-5~.catalogueMobile__filtersToggle{margin-top:16px}
	/* How many filters are on (the button's data-count), then the arrow. */
	#catalogue>.catalogueMobile__filtersToggle::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 4px auto;border-right:2px solid rgba(0,0,0,.5);border-bottom:2px solid rgba(0,0,0,.5);transform:rotate(45deg)}
	#catalogue>.catalogueMobile__filtersToggle[aria-expanded="true"]::after{margin-bottom:-4px;transform:rotate(225deg)}
	#catalogue>.catalogueMobile__filtersToggle[aria-expanded="true"]{border-color:var(--Green-Light,#0DA287)}
	#catalogue .catalogueMobile__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--Green-Light,#0DA287);color:#fff;font-family:Montserrat,MontserratFallback,sans-serif;font-weight:800;font-size:12px;line-height:20px}
	#catalogue .catalogueMobile__count[hidden]{display:none}
	#catalogue .sorting .dropdown-toggle{min-height:44px;padding:0 12px;font-size:15px;line-height:20px}
	#catalogue .sorting .dropdown-toggle span{font-size:15px;line-height:20px}
	#catalogue .sorting .dropdown-toggle::after{margin-left:auto}
	/* The toggle says «Сортировка» until a field is chosen, then the field (wider screens show both). */
	#catalogue .sorting .sortToggle:not(.isDefault) .sortCaption,#catalogue .sorting .sortToggle.isDefault .sortLabel{display:none}

	/* The app's filter controls wait behind «Фильтры». Two in a row, so the labels fit; «Габариты» shares
	   the last row with the reset. */
	html.catalogueMobile:not(.catalogueFiltersOpen) #catalogue>.filters{display:none}
	#catalogue>.filters{margin:8px 0 0}
	#catalogue .filters>.row{margin:0 -4px;row-gap:8px}
	#catalogue .filters>.row>*{flex:0 0 auto;width:50%;max-width:50%;margin-top:0;padding:0 4px}
	#catalogue .filters>.row>:nth-child(8){flex:1 1 0;width:auto;max-width:none}
	#catalogue .filters>.row>:nth-child(9){width:52px;max-width:52px!important}
	#catalogue .filters>.row>:nth-child(9)>button{max-width:none!important;min-height:44px}
	#catalogue .filters .catalogueFilter{min-height:44px;padding:0 12px}
	#catalogue .filters .catalogueFilter .title{font-size:14px;line-height:20px}
	#catalogue .goodList{margin-top:16px}

	/* Inside the dropdowns: rows and buttons for a finger, fields that do not make iPhones zoom. */
	#catalogue .dropdown-menu .optionItem{min-height:44px;align-items:center}
	#catalogue .sorting .dropdown-menu .optionItem,#catalogue .filters .dropdown-menu li:not(.categoryFilterItem):not(.materialFilterItem) .optionItem{display:flex}
	#catalogue .dropdown-menu .optionItem .title{font-size:14px;line-height:20px}
	#catalogue .dropdown-menu input{min-height:44px;font-size:16px;line-height:22px}
	/* «Цена» and «Габариты»: the unlayered copy of the site's styles makes each field 280px wide, and the
	   menu runs off an iPhone's screen. The fields share the menu's width instead. */
	#catalogue .sizeDrop .dropdown-menu{max-width:calc(100vw - 42px)}
	#catalogue .sizeDrop .row>.flex-grow-1{flex-basis:0;min-width:0}
	#catalogue .sizeDrop input{width:100%;min-width:0;max-width:140px}
	#catalogue .dropdown-menu button{min-height:44px}
	#catalogue .dropdown-menu .content{font-size:14px}
	#catalogue .dropdown-menu .dropdown-item{display:flex;align-items:center;min-height:44px;font-size:14px}

	/* Under the goods: «Показывать по …» and the pages. */
	#catalogue .maxRows .dropdown-toggle{min-height:44px;font-size:14px}
	#catalogue .maxRows .dropdown-toggle span{font-size:14px}
	#catalogue .paginationCarrier .pagination li,#catalogue .paginationCarrier .prev,#catalogue .paginationCarrier .next{min-width:44px;min-height:44px}

	/* The text after the goods: 14px everywhere, chips and the button for a finger. */
	#catalogueText .catalogueCards>li>span,#catalogueText .catalogueFaq__item>div,#catalogueText .catalogueToc__list a,#catalogueText .collectionLinks a{font-size:14px}
	#catalogueText .catalogueToc__list a,#catalogueText .collectionLinks a{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
	#catalogueText .catalogueText__more button{min-height:44px;font-size:14px}
}

/* Two goods in a row on phones from 360px wide (one in a row made the page twice as long). */
@media (min-width:360px) and (max-width:575.98px){
	#catalogue .goodList>.row>*{flex:0 0 auto;width:50%}
	#catalogue .goodList .goodTile{gap:8px;padding:6px 6px 12px;border-width:2px;border-radius:16px}
	#catalogue .goodList .goodTile:hover{border-width:2px}
	#catalogue .goodList .goodTile .back{border-radius:10px}
	#catalogue .goodList .goodTile .badges{gap:3px;padding:4px}
	#catalogue .goodList .goodTile .goodBadge{padding:2px 7px 3px;border-radius:6px;font-size:12px;line-height:14px}
	#catalogue .goodList .goodTile .goodContent{padding:0 4px}
	#catalogue .goodList .goodTile .goodContent .item{font-size:12px;line-height:16px}
	#catalogue .goodList .goodTile .h4{font-size:14px;line-height:18px;overflow-wrap:break-word}
	#catalogue .goodList .goodTile .priceCarrier{padding:0 4px}
	#catalogue .goodList .goodTile .oldPrice{font-size:12px;line-height:16px}
	#catalogue .goodList .goodTile .price{font-size:16px;line-height:20px}
}

/* Phones narrower than 360px: «Подборки» across the panel, so «Габариты» gets a row with the reset only, its
   label fits and its menu keeps the page's side gutter instead of touching the screen's edge. */
@media (max-width:359.98px){
	#catalogue .filters>.row>:nth-child(7){width:100%;max-width:100%}
	#catalogue .filters .catalogueFilter{padding:0 6px 0 8px}
}