/* Listing cards: responsive presentation, without changing native variant selection. */
.lv-mobile-color { display: none; }
/* Desktop follows the module output: round native colours, unchanged image miniatures. */
@media (min-width: 768px) {
  #js-product-list .lv-card-flow .an_productattributes-group:has(.lv-has-mobile-swatch > .color) { gap: 0; justify-content: flex-start; }
  #js-product-list .lv-card-flow .an_productattributes-group:has(.lv-has-mobile-swatch > .color) > li { margin: 0; }
  #js-product-list .lv-has-mobile-swatch:has(> .color) { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 32px; cursor: pointer; }
  #js-product-list .lv-has-mobile-swatch:has(> .color) > .color { display: none; }
  #js-product-list .lv-has-mobile-swatch:has(> .color) > .input-color { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
  #js-product-list .lv-has-mobile-swatch:has(> .color) > .lv-mobile-color { display: block; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; outline: 1px solid #ccc; background-position: center; background-size: cover; }
  #js-product-list .lv-has-mobile-swatch:has(> .color) > .input-color:checked ~ .lv-mobile-color { outline: 2px solid #222; }
  #js-product-list .lv-has-mobile-swatch:has(> .color) > .input-color:focus-visible ~ .lv-mobile-color { box-shadow: 0 0 0 5px #9bbbd6; }
}
/* Keep product names primary, specifications secondary, with distinct reading gaps. */
#js-product-list .lv-card-flow .product-title > a { font-size: 14px; line-height: 1.45; font-weight: 500; padding-top: 3px; }
#js-product-list .lv-card-flow .product-dimensions { font-size: 12.5px; line-height: 1.5; color: #666; padding-top: 6px; }
#js-product-list .lv-card-flow .js-an_productattributes-standart,
#js-product-list .lv-card-flow .js-an_productattributes-select,
#js-product-list .lv-card-flow .lv-card-native-variants { padding-bottom: 16px; }
#js-product-list .lv-card-flow .an_productattributes-qty-add,
#js-product-list .lv-card-flow .lv-card-native-purchase { padding-top: 16px; }
@media (max-width: 767px) {
  #js-product-list .lv-card-flow .product-title > a { font-size: 13px; line-height: 1.4; font-weight: 500; padding-top: 3px; }
  #js-product-list .lv-card-flow .product-list-brand { font-size: 12px; line-height: 1.3; }
  #js-product-list .lv-card-flow .product-price { font-size: 12px; line-height: 1.3; }
  #js-product-list .lv-card-flow > .product-description { column-gap: 6px; }
  #js-product-list .lv-card-flow .product-dimensions { font-size: 11.5px; line-height: 1.3; color: #666; padding-top: 6px; }
  #js-product-list .lv-card-flow .js-an_productattributes-standart,
  #js-product-list .lv-card-flow .js-an_productattributes-select,
  #js-product-list .lv-card-flow .lv-card-native-variants { padding: 4px 0 10px; }
  #js-product-list .lv-card-flow .an_productattributes-group { gap: 0; justify-content: flex-start; }
  #js-product-list .lv-card-flow .an_productattributes-group > li { margin: 0; }
  #js-product-list .lv-has-mobile-swatch { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 32px; cursor: pointer; }
  #js-product-list .lv-has-mobile-swatch > img,
  #js-product-list .lv-has-mobile-swatch > .color { display: none; }
  #js-product-list .lv-has-mobile-swatch > .input-color { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
  #js-product-list .lv-mobile-color { display: block; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; outline: 1px solid #ccc; background-position: center; background-size: cover; }
  #js-product-list .input-color:checked ~ .lv-mobile-color { outline: 2px solid #222; }
  #js-product-list .input-color:focus-visible ~ .lv-mobile-color { box-shadow: 0 0 0 5px #9bbbd6; }
  #js-product-list .lv-card-flow .an_productattributes-qty-add,
  #js-product-list .lv-card-flow .lv-card-native-purchase { padding-top: 12px; }
  #js-product-list .lv-card-flow button[data-button-action="add-to-cart"] { font-size: 13px; gap: 6px; padding: 10px 6px; }
  #js-product-list .lv-card-flow .lv-features-box { font-size: 10px; padding: 5px 7px; border-radius: 11px; }
  #js-product-list .lv-features-box .lv-feature-row { min-height: 18px; gap: 5px; }
  #js-product-list .lv-features-box .lv-feature-row > svg { flex-basis: 15px; width: 15px; height: 15px; }
}

/* On very narrow two-column cards, keep the brand whole and place price below the name. */
@media (max-width: 374px) {
  #js-product-list .lv-card-flow .lv-card-heading-area { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; grid-column: 1 / -1; grid-row: 1 / span 2; }
  #js-product-list .lv-card-flow .product-list-brand { order: 0; }
  #js-product-list .lv-card-flow .product-title > a { order: 1; padding-top: 0; }
  #js-product-list .lv-card-flow .product-price-and-shipping { order: 2; text-align: left; }
}