/* Vellstore mobile product grid - category + search - 2026-10-03 */
@media (max-width: 767.98px) {
  body#category #js-product-list .products,
  body#category #js-product-list .products.row,
  body#search #js-product-list .products,
  body#search #js-product-list .products.row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body#category #js-product-list .products > .product,
  body#category #js-product-list .products > .js-product,
  body#search #js-product-list .products > .product,
  body#search #js-product-list .products > .js-product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body#category #js-product-list .product-miniature,
  body#search #js-product-list .product-miniature,
  body#category #js-product-list .thumbnail-container,
  body#search #js-product-list .thumbnail-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  body#category #js-product-list .products,
  body#category #js-product-list .products.row,
  body#search #js-product-list .products,
  body#search #js-product-list .products.row {
    gap: 8px !important;
  }
}

/* Exact inner-card width override: prevent nested 50% sizing */
@media (max-width: 767.98px) {
  body#category #js-product-list .products.row,
  body#search #js-product-list .products.row {
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  body#category #js-product-list .products.row > div.js-product.product > article.product-miniature.js-product-miniature,
  body#search #js-product-list .products.row > div.js-product.product > article.product-miniature.js-product-miniature {
    display: flex !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    margin: 0 !important;
  }

  body#category #js-product-list .products.row > div.js-product.product > article.product-miniature.js-product-miniature > .thumbnail-container,
  body#search #js-product-list .products.row > div.js-product.product > article.product-miniature.js-product-miniature > .thumbnail-container {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
  }
}

/* Definitive responsive fix: neutralize the older nested 50% rule */
@media (max-width: 767.98px) {
  body#category #products #js-product-list .products.row > div.js-product.product,
  body#category #products .products.row > div.js-product.product,
  body#search #products #js-product-list .products.row > div.js-product.product,
  body#search #products .products.row > div.js-product.product {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
  }
}

/* Center discount percentage inside the red circle on mobile */
@media (max-width: 767.98px) {
  body#category #products #js-product-list .product-miniature .product-flags li.product-flag.discount,
  body#category #products #js-product-list .product-miniature .product-flags li.product-flag.discount-percentage,
  body#category #products #js-product-list .product-miniature .product-flags li.product-flag.discount-product,
  body#category #products #js-product-list .product-miniature .product-flags li.product-flag.discount-amount,
  body#search #products #js-product-list .product-miniature .product-flags li.product-flag.discount,
  body#search #products #js-product-list .product-miniature .product-flags li.product-flag.discount-percentage,
  body#search #products #js-product-list .product-miniature .product-flags li.product-flag.discount-product,
  body#search #products #js-product-list .product-miniature .product-flags li.product-flag.discount-amount {
    position: absolute !important;
    inset: 2px auto auto 2px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #d71920 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
  }
}


/* Mobile card finishing: badge separation and image vertical balance */
@media (max-width: 767.98px) {
  body#category #products #js-product-list .product-miniature .product-flags li.product-flag.new,
  body#search #products #js-product-list .product-miniature .product-flags li.product-flag.new {
    position: absolute !important;
    top: 39px !important;
    left: 2px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 3 !important;
    white-space: nowrap !important;
  }

  body#category #products #js-product-list .product-miniature .product-thumbnail img,
  body#search #products #js-product-list .product-miniature .product-thumbnail img {
    transform: translateY(10px) !important;
  }
}

/* Make the search icon a real, tappable submit control. */
.vell-search-submit {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}


/* Native mobile touch target placed over the visible search icon. */
form:has(> i.material-icons.search) {
  position: relative !important;
}
.vell-search-touch-submit {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 56px !important;
  height: 100% !important;
  min-height: 44px !important;
  z-index: 50 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}