/* Brand archive warranty tile — visual grid item, never a WooCommerce product.
 * The <li> stretches to the real WooCommerce grid-row height and the supplied
 * artwork is vertically centred inside that cell. This keeps the promo aligned
 * with complete product cards (image + specs + title + price/actions) on 2-,
 * 3- and 4-column layouts instead of pinning it to the top of the row.
 */
.woocommerce ul.products > li.product.cg-brand-warranty-card,
body.woocommerce ul.products > li.product.cg-brand-warranty-card{
  position: relative !important;
  display: flex !important;
  align-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

.woocommerce ul.products > li.product.cg-brand-warranty-card::before,
.woocommerce ul.products > li.product.cg-brand-warranty-card::after,
body.woocommerce ul.products > li.product.cg-brand-warranty-card::before,
body.woocommerce ul.products > li.product.cg-brand-warranty-card::after{
  content: none !important;
  display: none !important;
}

.woocommerce ul.products > li.product.cg-brand-warranty-card:hover,
.woocommerce ul.products > li.product.cg-brand-warranty-card:focus,
.woocommerce ul.products > li.product.cg-brand-warranty-card:focus-within,
body.woocommerce ul.products > li.product.cg-brand-warranty-card:hover{
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.cg-brand-warranty-card__media{
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 96% !important;
  max-width: 100% !important;
  aspect-ratio: 307 / 466 !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #2e2c7e !important;
}

.cg-brand-warranty-card__media > img{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* On phones the neighbouring WooCommerce card contains considerably more
 * text below its image. Stretching the promo cell to the same grid-row height
 * and centring the artwork prevents the warranty visual from sitting too high.
 */
@media (max-width: 767px){
  .woocommerce ul.products > li.product.cg-brand-warranty-card,
  body.woocommerce ul.products > li.product.cg-brand-warranty-card{
    align-self: stretch !important;
  }

  .cg-brand-warranty-card__media{
    width: 96% !important;
  }
}

/* Tablet product grids have the same issue, just with a 3-column row. */
@media (min-width: 768px) and (max-width: 1024px){
  .cg-brand-warranty-card__media{
    width: 95% !important;
  }
}

/* A tiny reduction on desktop creates the same breathing room as normal
 * product-card content and avoids the visual touching of the next row. */
@media (min-width: 1025px){
  .cg-brand-warranty-card__media{
    width: 94% !important;
  }
}

/* Keep the tile visually calm even though generic product-card rules target li.product. */
.cg-brand-warranty-card .ct-woo-card-actions,
.cg-brand-warranty-card .cg-card-meta,
.cg-brand-warranty-card .cg-store-wrap,
.cg-brand-warranty-card .cg-thumbs,
.cg-brand-warranty-card .cg-thumb-nav{
  display: none !important;
}