/* CPT Product Card Layout v1.3.0
   Equal-height product boxes, 2-line names, and a compact footer
   (Add to Cart, wishlist and compare on one row). */

/* ---------- Product name: always two lines ---------- */
.product-thumb h4 {
  line-height: 1.3;
  min-height: 2.6em;
  margin: 10px 0 6px;
}
.product-thumb h4 a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

/* ---------- Short description: max three lines ---------- */
.product-thumb .caption p:not(.price):not(.rating) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ---------- Box: column layout, price + buttons pinned to the bottom ---------- */
.product-thumb {
  display: flex;
  flex-direction: column;
}
.product-thumb > .image + div,
.product-thumb > div:last-child:not(.button-group) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-thumb .caption {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0 !important;         /* removes the stock 180px block that left the gap */
  padding-bottom: 6px;
}
.product-thumb .caption .price {
  margin-top: auto;                 /* price sits just above the buttons */
  margin-bottom: 6px;
}

/* ---------- Footer: one row instead of three stacked bars ---------- */
.product-thumb .button-group {
  display: flex !important;
  align-items: stretch;
  margin-top: auto;
  overflow: hidden;
}
.product-thumb .button-group button,
.product-thumb .button-group button + button {
  float: none !important;
  display: block !important;
  width: auto !important;
  flex: 0 0 44px;
  line-height: 38px;
  padding: 0;
  text-align: center;
}
.product-thumb .button-group button:first-child {
  flex: 1 1 auto;                   /* Add to Cart takes the remaining width */
  white-space: nowrap;
}
.product-thumb .button-group button + button {
  border-left: 1px solid #ddd;
}

/* ---------- Equal-height rows in grid pages (category, search, specials) ---------- */
.row:has(> .product-layout) {
  display: flex;
  flex-wrap: wrap;
}
.row:has(> .product-layout)::before,
.row:has(> .product-layout)::after {
  content: none;
}
.row > .product-layout:not(.product-list) {
  display: flex;
  float: none;
}
.row > .product-layout:not(.product-list) > .product-thumb {
  width: 100%;
}

/* ---------- Carousels: let each box fill the slide height ---------- */
.swiper-slide,
.owl-item {
  height: auto;
}
.swiper-slide > .product-thumb,
.owl-item > .product-thumb,
.swiper-slide > .product-layout,
.owl-item > .product-layout {
  height: calc(100% - 20px);
}
.swiper-slide > .product-layout > .product-thumb,
.owl-item > .product-layout > .product-thumb {
  height: 100%;
}

/* ---------- List view keeps the stock layout ---------- */
.product-list .product-thumb,
.product-list .product-thumb > div:last-child,
.product-list .product-thumb .caption {
  display: block;
}
.product-list .product-thumb .caption p:not(.price) {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

/* ---------- v1.2.0: stronger overrides ----------
   The theme's own button and caption rules were winning, so these use
   :is(#cpt-card, html) to lift specificity to ID level (it still only
   matches <html>). Direct children are targeted so it works whether the
   buttons sit loose or inside wrapper divs. */
:is(#cpt-card, html) body .product-thumb .button-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  padding: 0 !important;
}
:is(#cpt-card, html) body .product-thumb .button-group > br {
  display: none !important;
}
:is(#cpt-card, html) body .product-thumb .button-group > * {
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-left: 1px solid #ddd;
}
:is(#cpt-card, html) body .product-thumb .button-group > *:first-child {
  flex: 1 1 auto !important;
  width: auto !important;
  border-left: 0;
  white-space: nowrap;
}
:is(#cpt-card, html) body .product-thumb .button-group > * > button,
:is(#cpt-card, html) body .product-thumb .button-group > * > a {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
:is(#cpt-card, html) body .product-thumb .caption {
  min-height: 0 !important;
  height: auto !important;
}
:is(#cpt-card, html) body .product-list .product-thumb .button-group {
  display: block !important;
}

/* ---------- v1.3.0: identical footer on every box ----------
   In this theme the button bar is a direct child of the box, so it was
   being stretched to fill spare height on shorter boxes. Fix its height
   and give the spare space to the text area instead. */
.product-thumb > .caption {
  flex: 1 1 auto;
}
:is(#cpt-card, html) body .product-thumb .button-group {
  flex: 0 0 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}
:is(#cpt-card, html) body .product-thumb .button-group > * {
  height: 40px !important;
  line-height: 40px !important;
  column-gap: 6px;                  /* space between cart icon and text */
}