/* wearora shop page circular category tiles (v4) */
.wearora-shop-page .cat-circle-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:44px;
  margin:28px 0 52px;
  padding:0 12px;
}
.wearora-shop-page .cat-circle{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.wearora-shop-page .cat-circle-img{
  display:block;
  width:132px;
  height:132px;
  border-radius:50%;
  overflow:hidden;
  background:#f4f6f8;
  border:3px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .3s ease,box-shadow .3s ease;
}
.wearora-shop-page .cat-circle-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.wearora-shop-page .cat-circle:hover .cat-circle-img{
  transform:scale(1.07);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.wearora-shop-page .cat-circle-name{
  display:block;
  margin-top:13px;
  font-size:15px;
  font-weight:600;
  color:#1a1a2e;
  text-align:center;
  transition:color .25s ease;
}
.wearora-shop-page .cat-circle-count{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  color:#8a8a8a;
  text-align:center;
}
.wearora-shop-page .cat-circle:hover .cat-circle-name{
  color:#b07d4f;
}
@media (max-width:640px){
  .wearora-shop-page .cat-circle-row{gap:24px;margin:20px 0 40px;}
  .wearora-shop-page .cat-circle-img{width:100px;height:100px;border-width:2px;}
  .wearora-shop-page .cat-circle-name{margin-top:10px;font-size:13.5px;}
  .wearora-shop-page .cat-circle-count{font-size:11.5px;}
}

/* ============================================================
   13 Category Marquee — shop archive category loop
   从右到左无缝滚动 (hover 暂停 / 移动端可触摸)
   ============================================================ */

/* 容器: 原本是 WC 的 <ul class="products columns-3">, JS 会加 .wearora-cat-marquee */
ul.products.wearora-cat-marquee{
  display:block;
  overflow:hidden;
  margin:0 0 56px;
  padding:8px 0;
  list-style:none;
  position:relative;
  /* 两侧渐隐, 滚动更有"传送带"感 */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}

/* 轨道: JS 把 13 个 li 包进来并克隆一份 => 26 个, translateX(-50%) 恰好一个循环 */
.wearora-cat-track{
  display:flex;
  width:-moz-max-content;
  width:max-content;
  animation:wearora-cat-marquee var(--wearora-marquee-duration,45s) linear infinite;
  will-change:transform;
}
ul.products.wearora-cat-marquee:hover .wearora-cat-track,
.wearora-cat-track:active{
  animation-play-state:paused; /* hover / 触摸按住暂停 */
}

@keyframes wearora-cat-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* 单卡: 固定宽 + margin-right (不用 gap, 保证 -50% 无缝) */
.wearora-cat-track > li.product-category{
  flex:0 0 190px;
  width:190px;
  margin:0 20px 0 0 !important;
  padding:0 !important;
  list-style:none;
  float:none !important;
  clear:none !important;
}
.wearora-cat-track > li.product-category > a{
  display:block;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#f4f6f8;
  aspect-ratio:3 / 4;
  text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease;
}
.wearora-cat-track > li.product-category > a:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.wearora-cat-track > li.product-category img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
  margin:0 !important;
  transition:transform .5s ease;
}
.wearora-cat-track > li.product-category > a:hover img{
  transform:scale(1.06);
}

/* 名称+数量 overlay 在图片底部 */
.wearora-cat-track .woocommerce-loop-category__title{
  position:absolute;
  left:0;right:0;bottom:0;
  margin:0 !important;
  padding:30px 10px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.wearora-cat-track .woocommerce-loop-category__title .count{
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:11px;
  font-weight:500;
  padding:2px 9px;
  border-radius:12px;
  margin-left:5px;
  white-space:nowrap;
}

/* 主题可能的干扰复位 */
ul.products.wearora-cat-marquee::before,
ul.products.wearora-cat-marquee::after{
  display:none !important;
  content:none !important;
}

/* 响应式: 手机卡更窄跑更快 */
@media (max-width:640px){
  .wearora-cat-track > li.product-category{
    flex:0 0 150px;
    width:150px;
    margin:0 14px 0 0 !important;
  }
  .wearora-cat-track .woocommerce-loop-category__title{
    font-size:12px;
    padding:24px 6px 9px;
  }
}

/* 无 JS 时的降级: 保持网格可读 */
ul.products.columns-3:not(.wearora-cat-marquee) > li.product-category img{
  object-fit:cover;
}
