/* myixi-archive-product.css — MYIXI Bricks Product Archive / WooCommerce Archive Styles */

:root {
  --myixi-primary: #055B90;
  --myixi-primary-dark: #044A76;
  --myixi-soft: #EEF6FB;
  --myixi-soft-2: #F7FAFD;
  --myixi-border: #D8E6F0;
  --myixi-border-soft: #E7EEF5;
  --myixi-text: #17324A;
  --myixi-muted: #5E7285;
  --myixi-white: #ffffff;
  --myixi-shadow: 0 18px 48px rgba(13, 47, 74, 0.1);
  --myixi-shadow-soft: 0 10px 28px rgba(13, 47, 74, 0.08);
  --myixi-radius-lg: 28px;
  --myixi-radius-md: 18px;
  --myixi-radius-sm: 999px;
}

#brx-content {
  background: #ffffff;
  color: var(--myixi-text);
}

#brxe-0fa8a7,
#brxe-rroluo,
#brxe-sebgfl,
#brxe-zlbrid {
  width: 100%;
}

#brxe-8395a2,
#brxe-hwwopt,
#brxe-oxyksx,
#brxe-dowgmh {
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;
  margin-inline: auto;
}

/* Archive Hero */

#brxe-0fa8a7 {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 5vw, 68px) 0 clamp(40px, 5vw, 62px);
  background:
    radial-gradient(circle at 88% 18%, rgba(5, 91, 144, 0.13), transparent 31%),
    linear-gradient(135deg, #F7FBFE 0%, #EEF6FB 46%, #FFFFFF 100%);
  border-bottom: 1px solid var(--myixi-border-soft);
}

#brxe-0fa8a7::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -190px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: rgba(5, 91, 144, 0.055);
  pointer-events: none;
}

#brxe-8395a2 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

#brxe-nhzndz {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--myixi-muted);
}

#brxe-nhzndz a {
  color: var(--myixi-muted);
  text-decoration: none;
}

#brxe-nhzndz a:hover {
  color: var(--myixi-primary);
}

#brxe-nhzndz .separator {
  color: #9AAABA;
}

#brxe-fcnlmo {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

#brxe-ixlktv {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 13px;
  border: 1px solid rgba(5, 91, 144, 0.18);
  border-radius: var(--myixi-radius-sm);
  background: rgba(255, 255, 255, 0.78);
  color: var(--myixi-primary);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#brxe-luoanu {
  max-width: 760px;
  margin: 0;
  color: var(--myixi-text);
  font-size: clamp(38px, 4.5vw, 58px);
  line-height: 1.06;
  font-weight: 780;
  letter-spacing: -0.035em;
}

#brxe-cqlglg {
  max-width: 650px;
  color: var(--myixi-muted);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.68;
}

#brxe-xhahdv {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}

#brxe-xhahdv > * {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(5, 91, 144, 0.16);
  border-radius: var(--myixi-radius-sm);
  background: rgba(255, 255, 255, 0.88);
  color: var(--myixi-text);
  font-size: 13px;
  font-weight: 680;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(13, 47, 74, 0.045);
}

#brxe-oanqro {
  display: none;
}

/* Product Listing */

#brxe-rroluo {
  padding: clamp(54px, 6vw, 82px) 0;
  background: #ffffff;
}

#brxe-hwwopt {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#brxe-ebbgnf {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#brxe-ebuhpo {
  margin: 0;
  color: var(--myixi-text);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.14;
  font-weight: 760;
  letter-spacing: -0.03em;
}

#brxe-xqssxh {
  color: var(--myixi-muted);
  font-size: 16px;
  line-height: 1.7;
}

#brxe-idrcut {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.brxe-glwljc {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--myixi-border-soft);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--myixi-shadow-soft);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.brxe-glwljc:hover {
  transform: translateY(-4px);
  border-color: rgba(5, 91, 144, 0.25);
  box-shadow: var(--myixi-shadow);
}

.brxe-wezxzp {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 74%, rgba(5, 91, 144, 0.12), transparent 34%),
    linear-gradient(180deg, #F8FBFE 0%, #EEF6FB 100%);
  border-bottom: 1px solid var(--myixi-border-soft);
}

.brxe-wezxzp img {
  width: 100%;
  height: 100%;
  max-width: 225px;
  max-height: 205px;
  object-fit: contain;
  display: block;
  transition: transform 0.22s ease;
}

.brxe-glwljc:hover .brxe-wezxzp img {
  transform: scale(1.035);
}

.brxe-sgxpsy {
  margin: 0;
  padding: 19px 20px 0;
  color: var(--myixi-text);
  font-size: 18px;
  line-height: 1.34;
  font-weight: 740;
  letter-spacing: -0.016em;
  transition: color 0.18s ease;
}

.brxe-glwljc:hover .brxe-sgxpsy {
  color: var(--myixi-primary);
}

.brxe-vvukui {
  padding: 8px 20px 0;
  color: var(--myixi-muted);
  font-size: 14px;
  line-height: 1.65;
}

.brxe-vvukui:empty {
  display: none;
}

.brxe-nadhge {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 15px 20px 0;
  margin: 0;
}

.brxe-nadhge .item {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  border-radius: var(--myixi-radius-sm);
  background: var(--myixi-soft);
  color: var(--myixi-primary);
  font-size: 12px;
  font-weight: 740;
  line-height: 1;
}

.brxe-bcscwg {
  display: block;
  padding: 18px 20px 20px;
  margin-top: auto;
}

.brxe-ghhgug {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: var(--myixi-radius-sm);
  border: 1px solid transparent;
  background: var(--myixi-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 25px rgba(5, 91, 144, 0.19);
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.brxe-ghhgug::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.brxe-glwljc:hover .brxe-ghhgug {
  background: var(--myixi-primary-dark);
  box-shadow: 0 15px 30px rgba(5, 91, 144, 0.23);
}

/* Category Guide */

#brxe-sebgfl {
  padding: clamp(56px, 6vw, 86px) 0;
  background:
    linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%);
  border-top: 1px solid var(--myixi-border-soft);
}

#brxe-oxyksx {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#brxe-pvypmt {
  max-width: 760px;
  margin: 0;
  color: var(--myixi-text);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.14;
  font-weight: 760;
  letter-spacing: -0.03em;
}

#brxe-vdelhw {
  max-width: 720px;
  color: var(--myixi-muted);
  font-size: 16px;
  line-height: 1.72;
}

#brxe-ecd71e {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

#brxe-a66321,
#brxe-hgszht,
#brxe-arrfdj {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 28px;
  border: 1px solid var(--myixi-border-soft);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--myixi-shadow-soft);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

#brxe-a66321:hover,
#brxe-hgszht:hover,
#brxe-arrfdj:hover {
  transform: translateY(-3px);
  border-color: rgba(5, 91, 144, 0.24);
  box-shadow: var(--myixi-shadow);
}

#brxe-xevtcp,
#brxe-yzmtoc,
#brxe-yfgidw {
  margin: 0;
  color: var(--myixi-text);
  font-size: 21px;
  line-height: 1.28;
  font-weight: 740;
  letter-spacing: -0.018em;
}

#brxe-njiewt,
#brxe-mnwaiz,
#brxe-fbviwd {
  margin-top: 12px;
  color: var(--myixi-muted);
  font-size: 15px;
  line-height: 1.75;
}

#brxe-plsrmj,
#brxe-cjpeou,
#brxe-kqpqcu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: 10px 16px;
  border-radius: var(--myixi-radius-sm);
  border: 1px solid rgba(5, 91, 144, 0.2);
  background: #ffffff;
  color: var(--myixi-primary);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(13, 47, 74, 0.06);
  transform: translateY(18px);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}

#brxe-plsrmj:hover,
#brxe-cjpeou:hover,
#brxe-kqpqcu:hover {
  color: #ffffff;
  background: var(--myixi-primary);
  border-color: var(--myixi-primary);
}

/* Bottom CTA */

#brxe-zlbrid {
  padding: clamp(56px, 6vw, 86px) 0;
  background: #ffffff;
}

#brxe-dowgmh {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  padding: clamp(34px, 5vw, 54px);
  border-radius: var(--myixi-radius-lg);
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(135deg, #064F7D 0%, #055B90 48%, #17324A 100%);
  color: #ffffff;
  box-shadow: 0 22px 58px rgba(5, 91, 144, 0.26);
}

#brxe-dowgmh::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

#brxe-thtgnh {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
  font-weight: 760;
  letter-spacing: -0.032em;
}

#brxe-fbtjor {
  position: relative;
  z-index: 1;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.78;
}

#brxe-ukxmyk {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 12px 19px;
  border-radius: var(--myixi-radius-sm);
  border: 1px solid transparent;
  background: #ffffff;
  color: var(--myixi-primary);
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

#brxe-ukxmyk:hover {
  background: #F3F8FC;
  color: var(--myixi-primary-dark);
  transform: translateY(-1px);
}

/* WooCommerce Default Archive Fallback */

body:not(.wp-admin).woocommerce ul.products li.product,
body:not(.wp-admin) .woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--myixi-border);
  border-radius: 16px;
  box-shadow: var(--myixi-shadow-soft);
  padding: 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body:not(.wp-admin).woocommerce ul.products li.product:hover,
body:not(.wp-admin) .woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  border-color: rgba(5, 91, 144, .26);
  box-shadow: var(--myixi-shadow);
}

body:not(.wp-admin) .woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--myixi-text);
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 760;
  line-height: 1.28;
  font-size: 17px;
}

body:not(.wp-admin) .woocommerce ul.products li.product .price,
body:not(.wp-admin) .woocommerce div.product p.price,
body:not(.wp-admin) .woocommerce div.product span.price {
  display: none;
}

body:not(.wp-admin) .woocommerce ul.products li.product .button.add_to_cart_button {
  display: none;
}

body:not(.wp-admin) .woocommerce ul.products li.product a img {
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

/* Responsive */

@media (max-width: 1180px) {
  #brxe-idrcut {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  #brxe-idrcut {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #brxe-ecd71e {
    grid-template-columns: 1fr;
  }

  #brxe-a66321,
  #brxe-hgszht,
  #brxe-arrfdj {
    padding: 24px;
  }

  #brxe-plsrmj,
  #brxe-cjpeou,
  #brxe-kqpqcu {
    margin-top: 18px;
    transform: none;
  }
}

@media (max-width: 767px) {
  #brxe-8395a2,
  #brxe-hwwopt,
  #brxe-oxyksx,
  #brxe-dowgmh {
    width: min(100% - 28px, 1180px);
  }

  #brxe-0fa8a7 {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  #brxe-rroluo,
  #brxe-sebgfl,
  #brxe-zlbrid {
    padding-top: 52px;
    padding-bottom: 56px;
  }

  #brxe-luoanu {
    font-size: clamp(34px, 10vw, 46px);
  }

  #brxe-xhahdv {
    width: 100%;
  }

  #brxe-idrcut {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .brxe-wezxzp {
    aspect-ratio: 4 / 3;
    padding: 20px;
  }

  .brxe-wezxzp img {
    max-width: 240px;
    max-height: 215px;
  }

  #brxe-dowgmh {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  #brxe-luoanu,
  #brxe-ebuhpo,
  #brxe-pvypmt,
  #brxe-thtgnh {
    letter-spacing: -0.022em;
  }

  #brxe-cqlglg,
  #brxe-xqssxh,
  #brxe-vdelhw,
  #brxe-fbtjor {
    font-size: 15px;
  }

  #brxe-xhahdv > * {
    width: 100%;
    justify-content: center;
  }

  .brxe-sgxpsy {
    font-size: 17px;
  }
}
/* ===== Product Card Refinement Patch ===== */

/* 1) 产品图：改成正方形展示区，完整显示 square feature pics */
.brxe-wezxzp {
  aspect-ratio: 1 / 1;
  padding: 18px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brxe-wezxzp img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* 2) 卡片标题稍微稳一点，减少高低不齐 */
.brxe-sgxpsy {
  min-height: 3.0em;
}

/* 3) 标签区域 */
.brxe-nadhge {
  gap: 8px;
  padding: 14px 20px 0;
}

.brxe-nadhge .item {
  min-height: 28px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 740;
  white-space: nowrap;
}

/* 4) 按钮区域居中 */
.brxe-bcscwg {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 20px 22px;
  margin-top: auto;
}

/* 5) View Details 按钮本体 */
.brxe-ghhgug {
  width: auto;
  min-width: 168px;
  max-width: 100%;
  padding: 11px 22px;
  text-align: center;
  justify-content: center;
  position: relative;
  z-index: 6;
}

/* 6) 整个卡片可点击：用按钮链接做整卡透明覆盖 */
.brxe-glwljc {
  position: relative;
}

.brxe-glwljc .brxe-bcscwg a.brxe-ghhgug::after {
  content: "";
  position: absolute;
  inset: -9999px;
  z-index: 4;
}

/* 保证按钮文字层级在覆盖层之上，视觉仍正常 */
.brxe-glwljc .brxe-bcscwg a.brxe-ghhgug {
  overflow: visible;
}

.brxe-glwljc .brxe-bcscwg a.brxe-ghhgug span,
.brxe-glwljc .brxe-bcscwg a.brxe-ghhgug {
  position: relative;
  z-index: 6;
}

/* hover 时整卡和按钮联动 */
.brxe-glwljc:hover .brxe-ghhgug {
  background: var(--myixi-primary-dark);
  box-shadow: 0 15px 30px rgba(5, 91, 144, 0.23);
}

/* 7) 移动端微调 */
@media (max-width: 767px) {
  .brxe-wezxzp {
    aspect-ratio: 1 / 1;
    padding: 16px;
  }

  .brxe-sgxpsy {
    min-height: 0;
  }

  .brxe-ghhgug {
    min-width: 156px;
  }
}
/* ===== Product Archive Final Alignment Patch ===== */

/* 产品图完整显示：适配正方形 feature image */
.brxe-wezxzp {
  aspect-ratio: 1 / 1;
  padding: 18px;
  overflow: hidden;
}

.brxe-wezxzp img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* 产品卡按钮容器：必须撑满整张卡，按钮才能真正居中 */
.brxe-bcscwg {
  width: 100%;
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 20px 22px;
  margin-top: auto;
}

/* View Details 按钮居中，宽度稳定 */
.brxe-bcscwg .brxe-ghhgug {
  width: auto;
  min-width: 168px;
  max-width: 220px;
  margin-inline: auto;
  justify-content: center;
  text-align: center;
}

/* 整张产品卡可点击：修正之前过大的 -9999px 覆盖方式 */
.brxe-glwljc {
  position: relative;
}

.brxe-glwljc .brxe-ghhgug {
  position: static;
}

.brxe-glwljc .brxe-ghhgug::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* 保持按钮文字显示在正常层级 */
.brxe-glwljc .brxe-ghhgug {
  z-index: 6;
}

/* 分类引导卡片：取消按钮被推到底部，减少上方空白 */
#brxe-plsrmj,
#brxe-cjpeou,
#brxe-kqpqcu {
  margin-top: 22px;
  transform: none;
}

/* 分类引导卡片内容不要强行拉太高 */
#brxe-a66321,
#brxe-hgszht,
#brxe-arrfdj {
  justify-content: flex-start;
}

/* 移动端产品图和按钮微调 */
@media (max-width: 767px) {
  .brxe-wezxzp {
    aspect-ratio: 1 / 1;
    padding: 16px;
  }

  .brxe-bcscwg {
    padding: 16px 20px 22px;
  }

  .brxe-bcscwg .brxe-ghhgug {
    min-width: 156px;
  }

  #brxe-plsrmj,
  #brxe-cjpeou,
  #brxe-kqpqcu {
    margin-top: 18px;
  }
}
/* ===== Category Guide Card Alignment Patch ===== */

/* 三张卡片所在 grid：保持同一行卡片等高 */
#brxe-ecd71e {
  align-items: stretch;
}

/* 分类卡片：统一高度结构 */
#brxe-a66321,
#brxe-hgszht,
#brxe-arrfdj {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 270px;
  padding: 28px;
}

/* 标题区域：预留两行高度，避免第二张单行标题导致内容上移 */
#brxe-xevtcp,
#brxe-yzmtoc,
#brxe-yfgidw {
  min-height: 2.56em;
  margin: 0;
}

/* 正文区域：统一占位，让按钮自然落在同一水平线 */
#brxe-njiewt,
#brxe-mnwaiz,
#brxe-fbviwd {
  min-height: 5.25em;
  margin-top: 12px;
}

/* 按钮统一推到底部，但不会产生过大的空白 */
#brxe-plsrmj,
#brxe-cjpeou,
#brxe-kqpqcu {
  margin-top: auto;
  transform: none;
}

/* 按钮宽度统一，视觉更整齐 */
#brxe-plsrmj,
#brxe-cjpeou,
#brxe-kqpqcu {
  min-width: 168px;
  justify-content: center;
  text-align: center;
}

/* 平板和手机端：不要强行固定太高 */
@media (max-width: 991px) {
  #brxe-a66321,
  #brxe-hgszht,
  #brxe-arrfdj {
    min-height: 0;
  }

  #brxe-xevtcp,
  #brxe-yzmtoc,
  #brxe-yfgidw,
  #brxe-njiewt,
  #brxe-mnwaiz,
  #brxe-fbviwd {
    min-height: 0;
  }

  #brxe-plsrmj,
  #brxe-cjpeou,
  #brxe-kqpqcu {
    margin-top: 20px;
  }
}