/*
 * shopnet_listview 2.0 (svarogmarket.ru 2026-10-21, the look of dkcmarket.ru 2026-11-06): the views of the product lists on a computer.
 * «Список» — a table: a head row with icons and even columns (photo, name, article, availability, price, cart), the row as
 * high as its picture; «Список с характеристиками» (.sn-cmp) — the same with the columns of the category (listview.php) after
 * the article, the cart as an icon. Phones keep the list of Frame (cards). Classes of .products-container (the settings):
 * sn-lv-qty — the quantity − [1] + before the cart button, sn-lv-sticky — the head row stays on the screen. The colour:
 * --sn-lv-accent (module_shopnet_accent), the number of the columns: --sn-lv-n (both set by the template).
 */
.sn-lh-row, .sn-spec, .sn-qty { display: none }
/* the cell «Наличие» of a stock source (module_shopnet_list_stock): a line under the article on the tiles and in the list of a phone */
.product-item .product-stock { display: block; margin: -.25rem 0 .5rem; line-height: 1.25 }
.product-item .product-stock:empty::before { content: "—"; color: #adb5bd }
@media (max-width: 991.98px) { .list .product-description { flex-wrap: wrap } .list .product-item .product-stock { flex: 0 0 100%; margin: 0; padding: .15rem 0 0 } }
.btn-showmore { margin-top: 1rem }
.sn-lh-ico { display: inline-block; vertical-align: -4px }
/* the views over the list (list, with the characteristics, tiles): the hovered and the chosen one in the light tint of the accent */
#ft-list-view, #ft-grid-view, #ft-big-grid-view { transition: background-color .15s, border-color .15s, color .15s; box-shadow: none !important }
#ft-list-view:hover, #ft-grid-view:hover, #ft-big-grid-view:hover, #ft-list-view.active, #ft-grid-view.active, #ft-big-grid-view.active {
	background-color: color-mix(in srgb, var(--sn-lv-accent) 8%, #fff) !important; border-color: color-mix(in srgb, var(--sn-lv-accent) 30%, #fff) !important; color: var(--sn-lv-accent) !important }
#ft-list-view:hover svg, #ft-grid-view:hover svg, #ft-big-grid-view:hover svg, #ft-list-view.active svg, #ft-grid-view.active svg, #ft-big-grid-view.active svg { color: var(--sn-lv-accent) !important; fill: var(--sn-lv-accent) }
@media (max-width: 991.98px) { #ft-big-grid-view { display: none !important } }
/* the quantity before the cart button: − field + as on the product card, the height of the buttons of a row (30 px); the
   buttons of a row in the same border */
.sn-qty { width: auto; margin-right: .5rem }
.sn-qty .btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px }
.input-group.sn-qty > .form-control { flex: 0 0 46px; width: 46px; height: 30px; padding: 0 2px; font-size: 14px; font-weight: 600 }
.btn-group > .sn-qty + .btn, .btn-group > .sn-qty + * > .btn:first-child { border-top-left-radius: .35rem !important; border-bottom-left-radius: .35rem !important }
/* a bigger picture next to a thumbnail under the cursor (module_shopnet_listview_zoom) */
.sn-zoom { position: fixed; z-index: 1080; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15); padding: .5rem; pointer-events: none; opacity: 0; transition: opacity .12s }
.sn-zoom.show { opacity: 1 }
.sn-zoom img { display: block; width: 280px; height: 280px; object-fit: contain }

@media (min-width: 992px) {
.products-container > .list { --sn-lv-cart: 200px; --sn-lv-grid: 52px minmax(0, 1fr) 140px 140px 120px var(--sn-lv-cart) }
.products-container.sn-lv-qty > .list { --sn-lv-cart: 320px }
.products-container > .list.sn-cmp { --sn-lv-cart: 100px; --sn-lv-grid: 52px minmax(180px, 2.2fr) 80px repeat(var(--sn-lv-n, 1), minmax(52px, 1fr)) 128px 96px var(--sn-lv-cart) }
.products-container.sn-lv-qty > .list.sn-cmp { --sn-lv-cart: 216px }
.products-container > .list > .sn-lh-row { display: block; margin-bottom: 0 }
.products-container.sn-lv-sticky > .list > .sn-lh-row { position: sticky; top: 0; z-index: 3 }
.products-container > .list .sn-lh, .products-container > .list .product-item > .flex-column { display: grid !important; grid-template-columns: var(--sn-lv-grid); align-items: center }
.products-container.sn-lv-qty > .list .sn-qty { display: flex !important }

.sn-lh { font-size: .8rem; line-height: 1.2; color: var(--gray-600); font-weight: 600; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: .35rem .35rem 0 0; padding: .4rem 0 }
.sn-lh > span { grid-row: 1; min-width: 0; padding: 0 .75rem; overflow-wrap: break-word }
.sn-lh > [data-col="img"] { padding: 0 0 0 15px; text-align: left }
.sn-lh > [data-col="name"] { padding-left: .25rem }
.sn-lh small { display: block; font-size: .72rem; font-weight: 400; color: var(--gray-500) }
.sn-lh [data-sort] { cursor: pointer; user-select: none }
.sn-lh [data-sort]:hover { color: var(--gray-900) }
/* the icon of a sortable column: grey, the arrow of the chosen order in the accent */
.sn-lh [data-sort]::after { content: ""; display: inline-block; width: 7px; height: 11px; margin-left: 5px; vertical-align: -1px; background: #adb5bd;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0zM0 7h8l-4 5z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0zM0 7h8l-4 5z'/%3E%3C/svg%3E") no-repeat center / contain }
.sn-lh .sn-asc[data-sort]::after { background: linear-gradient(var(--sn-lv-accent) 0 50%, #dee2e6 50% 100%) }
.sn-lh .sn-desc[data-sort]::after { background: linear-gradient(#dee2e6 0 50%, var(--sn-lv-accent) 50% 100%) }
.sn-lh [data-col="img"] { grid-column: 1 }
.sn-lh [data-col="name"] { grid-column: 2 }
.sn-lh [data-col="article"] { grid-column: 3 }
.sn-lh [data-col="stock"] { grid-column: -4 }
.sn-lh [data-col="price"] { grid-column: -3; text-align: right }
.sn-lh [data-col="cart"] { grid-column: -2; text-align: right; padding-right: calc(var(--sn-lv-cart) / 2 - 32px) } /* the icon over the middle of the buttons */

.list .product-item { margin-bottom: 0 !important }
.list .product-item > .flex-column { flex-wrap: nowrap !important; padding: 0 !important; margin-bottom: 0 !important; border-top: 0 !important; border-radius: 0 !important; box-shadow: none !important }
.list .product-item:hover > .flex-column { background: var(--gray-100) !important }
.list .product-image img { mix-blend-mode: multiply } /* the white of a photo takes the grey of the row under the cursor */
.list .product-description, .list .product-controls { display: contents !important }
.list .product-item > .flex-column > *, .list .product-description > *, .list .product-controls > * { grid-row: 1 }
/* the row as high as its picture: the picture a block at the left edge, no gap for the descenders under it */
.list .product-image { grid-column: 1; flex: none !important; min-width: 0 !important; padding: 0 !important; text-align: left !important; line-height: 0 }
.list .product-image > a { display: block; line-height: 0 }
.list .product-image .d-inline-block { display: block !important; margin: 0; width: 48px; height: 48px }
.list .product-image svg, .list .product-image img { width: 48px !important; height: 48px !important; object-fit: contain }
.list .product-image ul, .list .product-text, .list .product-controls > .d-flex.align-items-center { display: none !important }
.products-container .list .product-name { grid-column: 2; min-width: 0; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: .25rem .75rem .25rem .25rem; align-self: center }
.products-container .list .product-name a { font-weight: 400 !important; font-size: .95rem; margin: 0 !important; min-height: 0 !important; height: auto !important }
.list .product-fields { grid-column: 3; min-width: 0; margin: 0 !important; padding: 0 .75rem }
.list .product-fields small { font-size: .85rem; color: var(--gray-800) !important }
.list .product-fields .sn-ft { display: none }
/* the availability: the text of the theme, or the cell of a stock source (.product-stock) instead of it */
.list .product-controls > small, .list .product-stock { grid-column: -4; margin: 0 !important; padding: 0 .75rem; font-size: .85rem }
.list .product-item:has(.product-stock) .product-controls > small { display: none !important }
.list .product-controls .price { grid-column: -3; margin: 0 !important; padding: 0 .75rem; text-align: right }
.list .product-controls .price .h6 { margin: 0 !important; white-space: nowrap }
.list .product-controls .btn-group { grid-column: -2; justify-self: end; margin: .2rem .75rem .2rem 0 !important }
.list .product-controls .btn-group > .btn-cart-add.btn-light { border-color: #dee2e6 }

.sn-lh .sn-lh-spec { display: none }
.list.sn-cmp .sn-lh .sn-lh-spec { display: block; text-align: center }
.list.sn-cmp .sn-lh > span:not([data-col="img"]):not([data-col="name"]) { padding-left: .4rem; padding-right: .4rem }
.list.sn-cmp .sn-spec { display: block; min-width: 0; padding: 0 .3rem; font-size: .82rem; line-height: 1.3; text-align: center; color: var(--gray-800); overflow-wrap: anywhere }
.list.sn-cmp .sn-spec[title] { cursor: help }
.list.sn-cmp [data-col="s1"] { grid-column: 4 }
.list.sn-cmp [data-col="s2"] { grid-column: 5 }
.list.sn-cmp [data-col="s3"] { grid-column: 6 }
.list.sn-cmp [data-col="s4"] { grid-column: 7 }
.list.sn-cmp [data-col="s5"] { grid-column: 8 }
.products-container .list.sn-cmp .product-name a { font-size: .9rem !important }
.list.sn-cmp .product-fields, .list.sn-cmp .product-controls > small, .list.sn-cmp .product-stock, .list.sn-cmp .product-controls .price { padding-left: .4rem !important; padding-right: .4rem !important }
.list.sn-cmp .btn-cart-add .col-auto + .col-auto { display: none } /* the cart as an icon */
.list.sn-cmp .sn-lh [data-col="cart"] { padding-right: calc(var(--sn-lv-cart) / 2 - 12px) }
}

/* the short names of the site (module_shopnet_listview_names): only in «Список с характеристиками» on a computer */
.sn-name-short { display: none }
@media (min-width: 992px) { .list.sn-cmp .sn-name-short { display: inline } .list.sn-cmp .sn-name-short + .sn-name-full, .list.sn-cmp .sn-name-full:has(+ .sn-name-short) { display: none } }

/* the subcategories as compact tiles (module_shopnet_listview_subcats, dkcmarket.ru 2026-10-26: the big tiles pushed the products
   down, the names did not fit): a small picture on the left, the whole name (up to 3 lines), «›» — several columns by the width */
.sn-subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px; margin: 0 0 4px }
.sn-subcats > .col { flex: none; max-width: none; width: auto; padding: 0; margin: 0 !important }
.sn-subcats > .col > div { margin: 0 !important; transition: border-color .15s }
.sn-subcats > .col > div:hover { border-color: #adb5bd !important }
.sn-subcats a.text-dark:hover { color: #343a40 !important }
.sn-subcats a { display: flex !important; align-items: center; height: 100%; min-height: 52px; text-decoration: none }
.sn-subcats a::after { content: "\203A"; margin-left: auto; padding: 0 10px 0 4px; color: #9aa1ab; font-size: 20px; line-height: 1 }
.sn-subcats a > div:first-child { flex: 0 0 52px; padding: 4px !important }
.sn-subcats a > div:first-child .position-relative, .sn-subcats a > div:first-child img, .sn-subcats a > div:first-child svg { width: 44px !important; height: 44px !important; max-width: 44px }
.sn-subcats a > div:first-child img { object-fit: contain }
.sn-subcats a > div:last-child { background: none !important; border: 0 !important; text-align: left; padding: 6px 0 6px 6px !important; font-size: 13.5px; line-height: 1.25 }
.sn-subcats a > div:last-child .line-clamp-1 { -webkit-line-clamp: 3; line-clamp: 3; white-space: normal }
.sn-subcats-h { font-size: 1rem; margin-bottom: .5rem }
@media (max-width: 575px) {
	.sn-subcats { grid-template-columns: 1fr 1fr; gap: 5px } .sn-subcats a { min-height: 46px } .sn-subcats a::after { display: none }
	.sn-subcats a > div:first-child { flex-basis: 38px; padding: 3px !important }
	.sn-subcats a > div:first-child .position-relative, .sn-subcats a > div:first-child img, .sn-subcats a > div:first-child svg { width: 32px !important; height: 32px !important }
	.sn-subcats a > div:last-child { font-size: 12.5px; padding: 4px 6px 4px 4px !important }
}