/* =============================================
   MCAKEY — GLOBAL PRODUCT CARD STYLES
   Applies sitewide to all product grids
   ============================================= */

.etheme-product-grid {
  gap: 20px;
}

.etheme-product-grid-item {
  border-radius: 12px;
  border: 1px solid #EEEEEE;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.etheme-product-grid-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px;
}

.etheme-product-grid-item:hover {
  box-shadow: 0 8px 32px rgba(30,144,255,0.10);
  transform: translateY(-4px);
  border-color: var(--e-global-color-primary);
}

.etheme-product-grid-image {
  padding: 12px;
  background: #fff;
  overflow: visible !important;
}

.etheme-product-grid-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

.woocommerce-loop-product__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--e-global-color-text);
  line-height: 1.4;
  margin-bottom: 6px;
}

.woocommerce-loop-product__title a {
  color: var(--e-global-color-text);
}

.woocommerce-loop-product__title a:hover {
  color: var(--e-global-color-secondary);
}

.etheme-product-grid-content .price {
  color: var(--e-global-color-secondary);
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
}

.etheme-product-grid-content .price del {
  color: var(--e-global-color-text);
  opacity: 0.4;
  font-weight: 400;
}

.etheme-product-grid-content .price ins {
  text-decoration: none;
  color: var(--e-global-color-accent);
}

.cart ins .amount,
.price ins .amount,
.product-price ins .amount {
  color: var(--e-global-color-accent);
}

.etheme-product-grid-button,
.ajax_add_to_cart,
.add_to_cart_button {
  background: var(--e-global-color-secondary);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.2s ease;
  border: none;
  width: 100%;
  text-align: center;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}

.etheme-product-grid-button:hover,
.ajax_add_to_cart:hover,
.add_to_cart_button:hover {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-secondary);
}

.etheme-product-grid-button svg,
.ajax_add_to_cart svg,
.add_to_cart_button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.onsale {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-secondary);
  font-weight: 800;
  border-radius: 6px;
}

.star-rating span::before {
  color: var(--e-global-color-accent);
}

.page-numbers {
  border-radius: 6px;
  font-weight: 600;
  color: var(--e-global-color-text);
}

.page-numbers.current {
  background: var(--e-global-color-secondary);
  color: #fff;
}

.page-numbers:hover {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-secondary);
}

/* Quick View */
.etheme-product-grid-image footer {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.show-quickly {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border-radius: 0 0 8px 8px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}

.show-quickly:hover {
  background: var(--e-global-color-secondary);
}

.show-quickly svg {
  width: 18px;
  height: 18px;
  fill: var(--e-global-color-secondary);
  transition: fill 0.2s ease;
}

.show-quickly:hover svg {
  fill: var(--e-global-color-accent);
}

/* Advanced Tabs Slider */
.et-advance-tabs .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

.et-advance-tabs .swiper-slide > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.et-advance-tabs .content-product {
  border-radius: 12px;
  border: 1px solid #EEEEEE;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #fff;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.et-advance-tabs .content-product:hover {
  box-shadow: 0 8px 32px rgba(30,144,255,0.10);
  transform: translateY(-4px);
  border-color: var(--e-global-color-primary);
}

.et-advance-tabs .product-image-wrapper {
  padding: 12px;
  background: #fff;
  overflow: visible !important;
}

.et-advance-tabs .product-image-wrapper img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

.et-advance-tabs .product-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 12px 12px;
}

.et-advance-tabs .products-page-cats a {
  font-size: 11px;
  color: var(--e-global-color-text);
  opacity: 0.5;
  font-weight: 500;
  text-decoration: none;
}

.et-advance-tabs .product-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
}

.et-advance-tabs .product-title a {
  color: var(--e-global-color-text);
}

.et-advance-tabs .product-title a:hover {
  color: var(--e-global-color-secondary);
}

.et-advance-tabs .price {
  color: var(--e-global-color-secondary);
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
}

.et-advance-tabs .price del {
  color: var(--e-global-color-text);
  opacity: 0.4;
  font-weight: 400;
}

.et-advance-tabs .price ins {
  text-decoration: none;
  color: var(--e-global-color-accent);
}

.et-advance-tabs .add_to_cart_button,
.et-advance-tabs .ajax_add_to_cart {
  margin-top: auto;
}

.et-advance-tabs .onsale {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-secondary);
  font-weight: 800;
  border-radius: 6px;
}

.et-advance-tabs .swiper-button-prev,
.et-advance-tabs .swiper-button-next {
  color: var(--e-global-color-secondary);
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  transition: all 0.2s ease;
}

.et-advance-tabs .swiper-button-prev:hover,
.et-advance-tabs .swiper-button-next:hover {
  background: var(--e-global-color-secondary);
  color: #fff;
}

@media (max-width: 767px) {
  .etheme-product-grid { gap: 12px; }
}

/* Product-card swipers ("You may also like" on My Account, "Want more?" on
   product pages, "Shop by Category" on the homepage) reuse the same
   .content-product/.product-details/.product-title inner markup across
   different XStore widgets. This whole block was verified live in the
   browser (Chrome DevTools Protocol via the Claude in Chrome extension,
   not guessed) by measuring actual getBoundingClientRect() heights and
   enumerating every matching CSSRule against the real elements — three
   separate, independently-broken links needed fixing:

   1) .swiper-slide has height:100% from Swiper's own base CSS
      (wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.css).
      A previous comment here claimed this "should" stretch slides to equal
      height by default — that claim was wrong, corrected after measuring
      it live: with .swiper-wrapper's own height intrinsic (auto, sized to
      content, no autoHeight involved), align-items:stretch does NOT
      override a flex item's EXPLICIT height:100% the way it would an
      "auto" height — so unequal-content slides stayed unequal height even
      with autoHeight fully disabled. Overriding to height:auto here lets
      stretch actually apply. (.products-slider .swiper-slide as a
      selector is 2 classes vs the base rule's 1, so this wins on
      specificity alone — no !important needed.)

   2) Even with slides equalized, .type-product (the div WooCommerce wraps
      around each card, a direct child of .swiper-slide) computed as
      display:block — a normal box, not a flex item — so flex:1 on
      .content-product below it did nothing (flex properties require a
      flex-container parent). Making .swiper-slide a flex container and
      .type-product a flex:1 item propagates the equalized height down
      through that wrapper.

   3) Even with .content-product then correctly equal-height, the button's
      margin-top computed as a literal 15px, not auto — two XStore rules
      in woocommerce-all.css win on specificity over a plain
      ".content-product .add_to_cart_button" selector:
      ".product-details .price + .button" (3 classes) and
      ".product-slide .product-details .button:not(.compare)" (4, since
      :not() counts its argument's specificity). Widget markup differs
      across the three locations (some have .product-slide, some don't),
      so a selector guaranteed to always outrank both — rather than one
      more specificity arms race — is the robust fix here; !important is
      deliberate, not a shortcut. */
.swiper-slide:has(.content-product) {
  height: auto;
  display: flex;
  flex-direction: column;
}
.swiper-slide:has(.content-product) > .type-product {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content-product {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content-product .product-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content-product .add_to_cart_button,
.content-product .ajax_add_to_cart {
  margin-top: auto !important;
}

/* Rounded product image corners — this widget's .product-content-image img
   had no radius at all (square), unlike .etheme-product-grid-image img
   above which already uses 8px; matching that same value for consistency. */
.content-product .product-content-image img {
  border-radius: 8px;
}

/* Price/discount text — .content-product only inherited WooCommerce's
   unstyled default price markup (no font-size set anywhere for this card
   type outside the .single-product-scoped rules in product.css), which
   renders quite large. Matching the 15px convention already established
   and working in both product.css (.single-product .product-details .price)
   and .etheme-product-grid-content .price above, for consistency. */
.content-product .price {
  font-size: 15px;
  font-weight: 800;
  color: var(--e-global-color-secondary);
  margin-bottom: 10px;
}
.content-product .price .woocommerce-Price-amount {
  font-size: 15px;
}
.content-product .price del {
  font-size: 0.8em;
  opacity: 0.5;
  font-weight: 400;
}
.content-product .price ins {
  text-decoration: none;
  color: var(--e-global-color-accent);
}