/* Плитки разделов каталога — главная и меню телефона. Скелет krom (shelf-grid, shelf-pop, mcats), оформление bruleur:
   оранжевая плитка 3:4, белая подпись, цветная деталь без фона крупно, с выходом за правый нижний край.
   Картинки — media/catalog-art/<код>.webp (tools/category_art.py). Образец — design/index.html, вкладка «Каталог и товар». */
:root { --tile-orange: #ff8300; --tile-orange-dark: #e87400; }

/* ---------- Главная: сетка плиток ---------- */
.cshelf { position: relative; }
.cshelf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cshelf-grid a {
	position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg);
	background: var(--tile-orange); color: var(--dark-ink); text-decoration: none;
}
.cshelf-grid a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }   /* только клавиатура; при наведении обводки нет */
.cshelf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }   /* живой фон, как у товаров (card-live.js) */
.cshelf-grid a:not(:hover) .cshelf-bg { opacity: 0 !important; }   /* в покое плитка просто оранжевая; непрозрачность холсту ставит card-smoke.js в style */
.cshelf-grid b {
	position: absolute; left: 10px; right: 10px; top: 16px; z-index: 2; display: block;   /* текст на 16 px от края: ещё 6 px — поле подложки */
	font: 700 17px/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--dark-ink);
	overflow-wrap: anywhere; hyphens: auto;   /* длинное «Жидкотопливные» не должно резаться краем плитки */
}
/* Подложка названия: выезжает слева при наведении и закрывает только текст, на каждой строке своя */
.cshelf-grid b span {
	padding: 2px 6px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 0% 100%; transition: background-size .25s ease;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cshelf-grid a:focus-visible b span { background-size: 100% 100%; }
@media (hover: hover) { .cshelf-grid a:hover b span { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .cshelf-grid b span { transition: none; } }
.cshelf-grid b::after { content: ""; display: block; width: 26px; height: 2px; margin: 9px 0 0 6px; background: var(--surface); opacity: .9; }
.cshelf-grid .shot {
	position: absolute; right: -18%; bottom: -3%; width: 128%; height: 80%;
	display: flex; align-items: flex-end; justify-content: flex-end; transition: transform .2s;
}
.cshelf-grid a:hover .shot { transform: translate(-6px, -6px); }
.cshelf-grid .shot img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(120, 30, 0, .28)); }
@container bph (max-width: 899px) { .cshelf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container bph (max-width: 599px) {
	.cshelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.cshelf-grid b { left: 6px; right: 6px; top: 12px; font-size: 13.5px; }
	.cshelf-grid b::after { width: 22px; margin-top: 6px; }
}

/* ---------- Подразделы по наведению (только мышь) ---------- */
.cshelf-pop {
	--gap: 10px; position: absolute; z-index: 40; box-sizing: border-box; width: 290px;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 8px; padding: 8px;
	background: var(--surface-2); border-radius: var(--radius-md);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
}
.cshelf-pop.two { width: 560px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cshelf-pop.on { opacity: 1; transform: none; }
.cshelf-pop[hidden] { display: none; }
.cshelf-pop::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: var(--gap); }
.cshelf-pop.left::before { right: auto; left: 100%; }
.cshelf-pop.below::before { top: auto; bottom: 100%; left: 0; right: 0; width: auto; height: var(--gap); }
.cshelf-pop a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.cshelf-pop a:hover { background: rgba(11, 12, 15, .06); }
.cshelf-pop .pic {
	flex: none; width: 54px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: var(--tile-orange);
}
.cshelf-pop .pic img { display: block; max-width: 92%; max-height: 92%; object-fit: contain; }
.cshelf-pop .nm { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cshelf-pop b { font: 500 12.5px/1.3 var(--font-sans); }
.cshelf-pop a:hover b { text-decoration: underline; }
.cshelf-pop s { text-decoration: none; font: 400 10.5px/1 var(--font-sans); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cshelf-pop { transition: none; transform: none; } }

/* ---------- Меню телефона: плитки 64 px, подпись под плиткой ---------- */
@media (max-width: 960px) {
	.mcats .shot.art { width: 66px; height: 88px; display: flex; align-items: center; justify-content: center; background: var(--tile-orange); }
	.mcats .shot.art img { width: 94%; height: 94%; object-fit: contain; }
}