/*
Theme Name: The Retailer Child
Theme URI: http://theretailer.getbowtied.com/
Description: This is a child theme for The Retailer.
Author: Get Bowtied
Author URI: http: //www.getbowtied.com/
Template: theretailer
Version: 1.0
*/

@import url("../theretailer/style.css");

/****************************************************************/
/*************** ADD YOUR CUSTOM CSS IN THIS AREA ***************/
/****************************************************************/

/* Shop/Archiv: On-Sale-Badge über dem Produktbild positionieren */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  position: relative;
  display: block;
}

/* Badge oben rechts aufs Bild */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .onsale {
  position: absolute !important;
  top: 10px;
  right: 10px;
  left: auto !important;
  z-index: 5;
  margin: 0 !important;
}



/* 4er Grid stabil mit Flexbox */
.woocommerce ul.products.columns-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;            /* Abstand zwischen den Items */
  padding: 0;
  margin: 0;
}

/* 4 Spalten: Breite = 25% minus 3/4 vom Gap */
.woocommerce ul.products.columns-4 > li.product {
  box-sizing: border-box;
  width: calc(25% - 15px);   /* bei gap:20px passt das i.d.R. gut */
  margin: 0 !important;
}

/* "The Retailer": Bag-Icon (Sprite) unsichtbar machen */
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce ul.products li.product a.button.product_type_variable{
  background-image: none !important;
  background: none !important;
}


/****************************************************************/
/****************************************************************/
/****************************************************************/