/*
 * shopnet_listview (ported from svarogmarket.ru, 2026-10-21): the views of the product lists on a computer.
 * «Список» — a table: a head row and even columns (photo, name, article, availability, price, cart);
 * «Список с характеристиками» (.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). 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 { display: none }
.btn-showmore { margin-top: 1rem }
#ft-list-view.active svg, #ft-grid-view.active svg, #ft-big-grid-view.active svg { fill: var(--sn-lv-accent) }
@media (max-width: 991.98px) { #ft-big-grid-view { display: none !important } }

@media (min-width: 992px) {
.products-container > .list { --sn-lv-grid: 64px minmax(0, 1fr) 130px 170px 120px 180px }
.products-container > .list.sn-cmp { --sn-lv-grid: 64px minmax(160px, 2fr) 96px repeat(var(--sn-lv-n, 1), minmax(56px, 1fr)) 120px 110px 92px }
.products-container > .list > .sn-lh-row { display: block; margin-bottom: 0 }
.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 }

.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 .6rem; overflow-wrap: break-word; hyphens: auto }
.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) }
.sn-lh .sn-asc, .sn-lh .sn-desc { color: var(--sn-lv-accent) }
.sn-lh .sn-asc::after { content: " ▲"; font-size: 9px }
.sn-lh .sn-desc::after { content: " ▼"; font-size: 9px }
.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 }

.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; box-shadow: inset 3px 0 0 var(--sn-lv-accent) !important }
.list .product-description, .list .product-controls { display: contents !important }
.list .product-item > .flex-column > *, .list .product-description > *, .list .product-controls > * { grid-row: 1 }
.list .product-image { grid-column: 1; flex: none !important; min-width: 0 !important; padding: .2rem .5rem !important; text-align: center !important; line-height: 0 }
.list .product-image svg, .list .product-image img { width: 48px !important; height: 48px !important; object-fit: contain }
.list .product-image .d-inline-block { width: 48px; height: 48px }
.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; margin: 0 !important; padding: .3rem .6rem }
.products-container .list .product-name a { font-weight: 400 !important; font-size: .95rem; margin: 0 !important }
.list .product-fields { grid-column: 3; min-width: 0; margin: 0 !important; padding: 0 .6rem; overflow-wrap: anywhere }
.list .product-fields small { font-size: .85rem; color: var(--gray-800) !important }
.list .product-fields .sn-ft { display: none }
.list .product-controls > small { grid-column: -4; margin: 0 !important; padding: 0 .6rem }
.list .product-controls .price { grid-column: -3; margin: 0 !important; padding: 0 .6rem; 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 .6rem .2rem 0 !important }

.sn-lh .sn-lh-spec { display: none }
.list.sn-cmp .sn-lh .sn-lh-spec { display: block; text-align: center }
.list.sn-cmp .sn-spec { display: block; min-width: 0; padding: 0 .4rem; font-size: .85rem; 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 }
.list.sn-cmp .product-controls > small, .list.sn-cmp .product-controls .price { padding: 0 .4rem }
.list.sn-cmp .btn-cart-add .col-auto + .col-auto { display: none } /* the cart as an icon */
}

/* 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 } }