/**
 * WWISE Product Cards — WooCommerce shop / category loop
 *
 * Beat Divi/Woo overrides that use:
 *   .woocommerce-page ul.products li.product:nth-child(n) { margin/width/float !important }
 * by matching or exceeding that specificity (body + nth-child).
 */

/* -------------------------------------------------------------------------- */
/* Grid                                                                       */
/* -------------------------------------------------------------------------- */

body.wwise-product-cards ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0;
  margin-left: -10px !important;
  margin-right: -10px !important;
  clear: both !important;
  font-family: "Source Sans Pro", Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #484b50;
}

body.wwise-product-cards ul.products::before,
body.wwise-product-cards ul.products::after {
  display: none !important;
  content: none !important;
}

/*
 * Card shell — specificity must beat:
 * .woocommerce-page ul.products li.product:nth-child(n) (0,4,2)
 * Ours: body.wwise-product-cards.woocommerce-page ul.products li.product:nth-child(n) (0,5,3)
 */
body.wwise-product-cards.woocommerce-page ul.products li.product,
body.wwise-product-cards.woocommerce-page ul.products li.product:nth-child(n),
body.wwise-product-cards.woocommerce ul.products li.product,
body.wwise-product-cards.woocommerce ul.products li.product:nth-child(n),
body.wwise-product-cards ul.products.columns-3 li.product,
body.wwise-product-cards ul.products.columns-3 li.product:nth-child(n),
body.wwise-product-cards ul.products[class*="columns-"] li.product,
body.wwise-product-cards ul.products[class*="columns-"] li.product:nth-child(n) {
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 20px 10px 0 !important;
  padding: 0 !important;
  border: 2px solid #eee !important;
  background-color: #fff !important;
  position: relative !important;
  width: auto !important;
  max-width: calc(33.333333% - 20px) !important;
  flex: 1 1 calc(33.333333% - 20px) !important;
  box-sizing: border-box !important;
  text-align: left !important;
  min-width: 0 !important; /* allow flex items to shrink */
  overflow: hidden !important; /* clip footer overflow */
}

@media (max-width: 1024px) {
  body.wwise-product-cards.woocommerce-page ul.products li.product,
  body.wwise-product-cards.woocommerce-page ul.products li.product:nth-child(n),
  body.wwise-product-cards.woocommerce ul.products li.product,
  body.wwise-product-cards.woocommerce ul.products li.product:nth-child(n),
  body.wwise-product-cards ul.products[class*="columns-"] li.product,
  body.wwise-product-cards ul.products[class*="columns-"] li.product:nth-child(n) {
    max-width: calc(50% - 20px) !important;
    flex: 1 1 calc(50% - 20px) !important;
  }
}

@media (max-width: 560px) {
  body.wwise-product-cards.woocommerce-page ul.products li.product,
  body.wwise-product-cards.woocommerce-page ul.products li.product:nth-child(n),
  body.wwise-product-cards.woocommerce ul.products li.product,
  body.wwise-product-cards.woocommerce ul.products li.product:nth-child(n),
  body.wwise-product-cards ul.products[class*="columns-"] li.product,
  body.wwise-product-cards ul.products[class*="columns-"] li.product:nth-child(n) {
    max-width: calc(100% - 20px) !important;
    flex: 1 1 calc(100% - 20px) !important;
  }
}

body.wwise-product-cards ul.products li.product .course-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Image — aspect-ratio 838 / 394                                             */
/* -------------------------------------------------------------------------- */

body.wwise-product-cards ul.products li.product .course-image {
  margin-bottom: -8px !important;
  aspect-ratio: 838 / 394 !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #e8eef5 !important;
  flex-shrink: 0;
  position: relative;
}

body.wwise-product-cards ul.products li.product .course-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.wwise-product-cards ul.products li.product .course-image img,
body.wwise-product-cards ul.products li.product .course-image .wp-post-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  --smush-placeholder-width: 838px;
  --smush-placeholder-aspect-ratio: 838 / 394;
}

body.wwise-product-cards ul.products li.product .course-image .et_overlay,
body.wwise-product-cards ul.products li.product .et_shop_image {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Title bar                                                                  */
/* -------------------------------------------------------------------------- */

body.wwise-product-cards ul.products li.product .course-titleBlock {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 140px !important;
  line-height: 140px !important;
  background-color: #283c92 !important;
  flex-shrink: 0;
  overflow: hidden;
}

body.wwise-product-cards.term-32 ul.products li.product .course-titleBlock { background-color: #133060 !important; }
body.wwise-product-cards.term-33 ul.products li.product .course-titleBlock { background-color: #3e7ac0 !important; }
body.wwise-product-cards.term-34 ul.products li.product .course-titleBlock { background-color: #189745 !important; }
body.wwise-product-cards.term-35 ul.products li.product .course-titleBlock { background-color: #790000 !important; }
body.wwise-product-cards.term-36 ul.products li.product .course-titleBlock { background-color: #e20d0d !important; }
body.wwise-product-cards.term-37 ul.products li.product .course-titleBlock { background-color: #f0760a !important; }
body.wwise-product-cards.term-38 ul.products li.product .course-titleBlock { background-color: #666666 !important; }
body.wwise-product-cards.term-39 ul.products li.product .course-titleBlock { background-color: #5a2884 !important; }
body.wwise-product-cards.term-40 ul.products li.product .course-titleBlock { background-color: #edab00 !important; }
body.wwise-product-cards.term-41 ul.products li.product .course-titleBlock { background-color: #000 !important; }
body.wwise-product-cards.term-42 ul.products li.product .course-titleBlock { background-color: #ffaa5e !important; }
body.wwise-product-cards.term-54 ul.products li.product .course-titleBlock { background-color: #bc2713 !important; }
body.wwise-product-cards.term-62 ul.products li.product .course-titleBlock { background-color: #edab00 !important; }
body.wwise-product-cards.term-67 ul.products li.product .course-titleBlock { background-color: #c57954 !important; }
body.wwise-product-cards.term-66 ul.products li.product .course-titleBlock { background-color: #e24307 !important; }
body.wwise-product-cards.term-65 ul.products li.product .course-titleBlock { background-color: #880d54 !important; }

body.wwise-product-cards ul.products li.product .course-titleBlock h2,
body.wwise-product-cards ul.products li.product .course-titleBlock .woocommerce-loop-product__title {
  color: #fff !important;
  text-align: center !important;
  padding: 25px 10px !important;
  vertical-align: middle;
  line-height: 1.2em !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  font-family: inherit;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

body.wwise-product-cards ul.products li.product .course-titleBlock h2 a,
body.wwise-product-cards ul.products li.product .course-titleBlock a {
  color: #fff !important;
  text-decoration: none !important;
  display: block;
}

@media (max-width: 1600px) {
  body.wwise-product-cards ul.products li.product .course-titleBlock h2,
  body.wwise-product-cards ul.products li.product .course-titleBlock .woocommerce-loop-product__title {
    font-size: 20px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Description                                                                */
/* -------------------------------------------------------------------------- */

body.wwise-product-cards ul.products li.product .course-description {
  padding: 10px !important;
  margin-bottom: 56px !important; /* room for footer */
  color: #484b50 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  flex: 1 1 auto;
  text-align: left !important;
  min-width: 0;
  max-height: 9.5em; /* ~5–6 lines safety clamp */
  overflow: hidden;
}

body.wwise-product-cards ul.products li.product .course-description .courseDesc-wrap,
body.wwise-product-cards ul.products li.product .course-description .courseDesc-wrap p,
body.wwise-product-cards ul.products li.product .course-description p {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  overflow: hidden;
  word-break: break-word;
}

/* -------------------------------------------------------------------------- */
/* Footer — price + VIEW COURSE                                               */
/* Kill Woo `.woocommerce ul.products li.product .button { margin-top: 1em }`  */
/* -------------------------------------------------------------------------- */

body.wwise-product-cards ul.products li.product .course-btnsPrice {
  padding: 0 10px !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  background: #fff;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .course-btnsPrice__row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 8px;
  min-width: 0;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .priceBlock,
body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-width: 0;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .priceBlock {
  font-size: 20px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .priceBlock .price,
body.wwise-product-cards ul.products li.product .course-btnsPrice .priceBlock .amount,
body.wwise-product-cards ul.products li.product .course-btnsPrice .priceBlock .woocommerce-Price-amount {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  color: #484b50 !important;
  line-height: 1.2 !important;
  display: inline !important;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn {
  text-align: right !important;
  height: auto !important;
  flex: 0 1 auto !important;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn .button,
body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn a.button,
body.wwise-product-cards.woocommerce ul.products li.product .button,
body.wwise-product-cards.woocommerce-page ul.products li.product .button,
body.wwise-product-cards.woocommerce ul.products li.product:nth-child(n) .button,
body.wwise-product-cards.woocommerce-page ul.products li.product:nth-child(n) .button,
body.wwise-product-cards.woocommerce ul.products li.product a.button,
body.wwise-product-cards.woocommerce-page ul.products li.product a.button {
  background-color: #eee !important;
  color: #000 !important;
  border: 1px solid #eee !important;
  border-radius: 3px !important;
  display: inline-block !important;
  padding: 6px 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}

body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn .button:hover,
body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn .button:focus,
body.wwise-product-cards.woocommerce ul.products li.product .button:hover,
body.wwise-product-cards.woocommerce-page ul.products li.product .button:hover,
body.wwise-product-cards.woocommerce ul.products li.product:nth-child(n) .button:hover,
body.wwise-product-cards.woocommerce-page ul.products li.product:nth-child(n) .button:hover {
  background-color: #e2e2e2 !important;
  border-color: #e2e2e2 !important;
  color: #000 !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  body.wwise-product-cards ul.products li.product .course-btnsPrice .view-Btn .button,
  body.wwise-product-cards.woocommerce ul.products li.product .button,
  body.wwise-product-cards.woocommerce-page ul.products li.product .button {
    font-size: 14px !important;
    padding: 5px 10px !important;
  }

  body.wwise-product-cards ul.products li.product .course-btnsPrice .priceBlock {
    font-size: 18px !important;
  }
}

body.wwise-product-cards ul.products li.product .viewWC-wrap {
  display: none !important;
}