/**
 * WooCommerce 产品卡 — 对齐首页 index.html：首图 + 分类 + 标题 + 描述 + 了解更多
 * 模板：子主题 woocommerce/content-product.php
 */

/* ---------- 设计变量（白色背景 + 首页产品卡布局） ---------- */
:root,
.woocommerce,
.woocommerce ul.products {
  --hec-card-bg: #ffffff;
  --hec-card-bg-visual: #ffffff;
  --hec-card-border: rgba(0, 0, 0, 0.08);
  --hec-card-border-hover: rgba(230, 57, 70, 0.35);
  --hec-card-text: #18181b;
  --hec-card-text-muted: #52525b;
  --hec-card-red: #e63946;
  --hec-card-red-soft: linear-gradient(135deg, rgba(230, 57, 70, 0.12) 0%, rgba(193, 18, 31, 0.04) 100%);
  --hec-card-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.12);
}

/* WooCommerce 在 ul.products 上用 ::before/::after 做清浮动；现代布局可去掉 */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products {
  display: grid !important;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 默认 2 列（无 columns-* 时，如部分短代码） */
.woocommerce ul.products:not([class*="columns-"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce ul.products.columns-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.woocommerce ul.products.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce ul.products.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.woocommerce ul.products.columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.woocommerce ul.products.columns-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.woocommerce ul.products.columns-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Elementor Product Related / Upsells / Products：尊重组件 Columns 设置 */
.elementor-element.elementor-grid-1 .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.elementor-element.elementor-grid-2 .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.elementor-element.elementor-grid-3 .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.elementor-element.elementor-grid-4 .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.elementor-element.elementor-grid-5 .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.elementor-element.elementor-grid-6 .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.woocommerce ul.products li.product.hec-product-card::before,
.woocommerce ul.products li.product.hec-product-card::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product.hec-product-card {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  width: 100% !important;
  float: none !important;
  clear: none !important;
  display: flex;
  background: transparent !important;
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__inner {
  width: 100%;
  height: 100%;
  min-height: 380px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid var(--hec-card-border);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.woocommerce ul.products li.product.hec-product-card:hover .hec-product-card__inner {
  transform: translateY(-6px);
  border-color: var(--hec-card-border-hover);
  box-shadow: var(--hec-card-shadow);
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__visual {
  position: relative;
  height: 220px;
  flex-shrink: 0;
  background-color: #ffffff !important;
  background: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--hec-card-border);
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hec-card-red-soft);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.woocommerce ul.products li.product.hec-product-card:hover .hec-product-card__visual::before {
  opacity: 1;
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__visual img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 0;
  transform: scale(1);
  transition: transform 0.45s ease;
}

.woocommerce ul.products li.product.hec-product-card:hover .hec-product-card__visual img {
  transform: scale(1.06);
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: #ffffff !important;
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--hec-card-red-soft);
  color: var(--hec-card-red);
  border: 1px solid rgba(230, 57, 70, 0.2);
  margin-bottom: 12px;
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  padding: 0;
  color: var(--hec-card-text);
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__desc {
  font-size: 0.9rem;
  color: var(--hec-card-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.woocommerce ul.products li.product.hec-product-card .hec-product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hec-card-red);
  transition: gap 0.3s ease;
  margin-top: auto;
}

.woocommerce ul.products li.product.hec-product-card:hover .hec-product-card__cta {
  gap: 12px;
}

.woocommerce ul.products li.product.hec-product-card .price,
.woocommerce ul.products li.product.hec-product-card .star-rating,
.woocommerce ul.products li.product.hec-product-card .button,
.woocommerce ul.products li.product.hec-product-card .added_to_cart {
  display: none !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5,
  .woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce ul.products.columns-1 {
    grid-template-columns: 1fr;
  }

  .woocommerce ul.products li.product.hec-product-card .hec-product-card__inner {
    min-height: 0;
  }
}

/* Elementor 组件列数（含 Product Related）优先走 wrapper 的 elementor-grid-N */
@media (max-width: 767px) {
  .elementor-element.elementor-grid-mobile-1 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .elementor-element.elementor-grid-mobile-2 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elementor-element.elementor-grid-mobile-3 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-grid-tablet-1 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .elementor-element.elementor-grid-tablet-2 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elementor-element.elementor-grid-tablet-3 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .elementor-element.elementor-grid-tablet-4 .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product.hec-product-card .hec-product-card__inner,
  .woocommerce ul.products li.product.hec-product-card .hec-product-card__visual img {
    transition: none;
  }

  .woocommerce ul.products li.product.hec-product-card:hover .hec-product-card__inner {
    transform: none;
  }

  .woocommerce ul.products li.product.hec-product-card:hover .hec-product-card__visual img {
    transform: scale(1);
  }
}

/* ========== 区块产品网格（Elementor / Blocks，结构对齐产品卡） ========== */
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.wc-block-grid__product {
  margin: 0 !important;
  background: var(--hec-card-bg, #ffffff);
  border: 1px solid var(--hec-card-border, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  overflow: hidden;
  padding: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.wc-block-grid__product:hover {
  transform: translateY(-6px);
  border-color: var(--hec-card-border-hover, rgba(230, 57, 70, 0.35));
  box-shadow: var(--hec-card-shadow, 0 24px 48px -12px rgba(0, 0, 0, 0.12));
}

.wc-block-grid__product .wc-block-grid__product-image {
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--hec-card-border, rgba(0, 0, 0, 0.08));
  background: #ffffff;
}

.wc-block-grid__product .wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.wc-block-grid__product .wc-block-grid__product-title {
  padding: 28px 28px 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hec-card-text, #18181b);
}

.wc-block-grid__product .wc-block-grid__product-price {
  display: none;
}

@media (max-width: 767px) {
  .wc-block-grid__products {
    grid-template-columns: 1fr;
  }
}

/* ========== 产品页：主图随媒体原始比例（不强制 1:1） ========== */
/* 主图略小于「图」一栏整宽；窄屏仍撑满可用宽度 */
.woocommerce div.product div.images .woocommerce-product-gallery,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 主图 Flexslider 左右箭头（方向导航移入 .flex-viewport 后叠在图上，见 custom.js） */
.woocommerce-product-gallery .flex-viewport {
  position: relative;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav li {
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a {
  box-sizing: border-box;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(230, 57, 70, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  color: #e63946;
  font-size: 0;
  line-height: 0;
  text-decoration: none !important;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.2s ease, box-shadow 0.3s ease;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-top: 2px solid currentColor;
  flex-shrink: 0;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a.flex-prev::before {
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a.flex-next::before {
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a.flex-prev {
  left: 16px;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a.flex-next {
  right: 16px;
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a:hover:not(.flex-disabled) {
  border-color: transparent;
  background: #e63946;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(230, 57, 70, 0.35);
}

.woocommerce-product-gallery .flex-viewport .flex-direction-nav a.flex-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery .flex-viewport,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery .flex-viewport {
  height: auto !important;
  max-height: none !important;
}

.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__wrapper,
.elementor-widget-woocommerce-product-images .flex-viewport .woocommerce-product-gallery__wrapper {
  height: auto !important;
  min-height: 0 !important;
}

.woocommerce div.product div.images .flex-viewport .woocommerce-product-gallery__image,
.elementor-widget-woocommerce-product-images .flex-viewport .woocommerce-product-gallery__image {
  height: auto;
  min-height: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image {
  position: relative;
  box-sizing: border-box;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image > a,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image > a {
  display: block;
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.elementor-widget-woocommerce-product-images .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block;
}

/* Flexslider 初始化前 / 未启用主图轮播：wrapper 直接挂在 gallery 下 */
.woocommerce div.product div.images .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  overflow: hidden;
  position: relative;
}

.woocommerce div.product div.images .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
  height: auto;
}

/* ========== 产品页：缩略图一行 5 个 + 左右箭头叠在缩略图上 ========== */
.hec-product-thumb-strip {
  position: relative;
  width: 100%;
  margin: 12px 0 0;
  box-sizing: border-box;
}

.hec-product-thumb-strip__viewport {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.hec-product-thumb-strip__viewport::-webkit-scrollbar {
  display: none;
}

.hec-product-thumb-strip__btn {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(230, 57, 70, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  color: #e63946;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.hec-product-thumb-strip__btn::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border-top: 2px solid currentColor;
  flex-shrink: 0;
}

.hec-product-thumb-strip__btn--prev::before {
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
}

.hec-product-thumb-strip__btn--next::before {
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}

.hec-product-thumb-strip__btn--prev {
  left: 4px;
}

.hec-product-thumb-strip__btn--next {
  right: 4px;
}

.hec-product-thumb-strip__btn:hover:not(:disabled) {
  border-color: transparent;
  background: #e63946;
  color: #ffffff;
}

.hec-product-thumb-strip__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.hec-product-thumb-strip:not(.hec-product-thumb-strip--scrollable) .hec-product-thumb-strip__btn {
  display: none;
}

.hec-product-thumb-strip .flex-control-thumbs,
.woocommerce-product-gallery .hec-product-thumb-strip .flex-control-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px;
  float: none !important;
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

.hec-product-thumb-strip .flex-control-thumbs li {
  float: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}

.hec-product-thumb-strip .flex-control-thumbs li img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-width: none !important;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0.72;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.hec-product-thumb-strip .flex-control-thumbs li:hover img,
.hec-product-thumb-strip .flex-control-thumbs li.flex-active img {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(0, 64, 133, 0.45);
}