/*
Theme Name: 子比主题子主题
Template: zibll
*/

/*
====================================================================
手机端商城选品选项明显化开始
=====================================================================
*/
.opt-item.badg.active {
    --this-border: rgb(158 68 240 / 34%);
    --this-color: #5e44f0;
    background: rgb(174 68 240 / 14%);
}
/*
====================================================================
手机端产品选项单独隔离
=====================================================================
/* 移动端商品详情页底部操作栏 - 仿淘宝 */
.product-mobile-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    z-index: 999;
    backdrop-filter: blur(10px);
}

/* 按钮组紧凑排列 */
.product-mobile-action-bar .but-group {
    gap: 10px;
}

.product-mobile-action-bar .but {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 24px;
    min-width: 90px;
    text-align: center;
}

/* 已选文字样式 */
.product-mobile-action-bar .selected-title {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
====================================================================
通用浮起过渡类
=====================================================================
*/
/* 子比主题悬停上浮效果 - 仅适用于文章列表、产品列表、标签 */
.posts-item, 
.product-item,
.tag-item {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  border: 1px solid transparent;
  /* 优化性能 */
  will-change: transform;
  contain: layout style;
}

/* PC端悬停效果 */
@media (min-width: 768px) {
  .posts-item:hover, 
  .product-item:hover,
  .tag-item:hover {
    z-index: 99;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    animation: index-link-active 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
}

/* 手机端触摸效果 */
@media (max-width: 767px) {
  .posts-item, 
  .product-item,
  .tag-item {
    transition: all 0.25s ease;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  
  .posts-item:active, 
  .product-item:active,
  .tag-item:active {
    z-index: 99;
    border-radius: 14px;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    animation: index-link-active-mobile 0.25s ease-out forwards;
  }
}

/* 3D悬停动画 - PC端优化 */
@keyframes index-link-active {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  }
}

/* 手机端动画优化 */
@keyframes index-link-active-mobile {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/* 标签悬停效果优化 */
.tag-item {
  display: inline-block;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin: 4px;
  padding: 6px 12px;
  border-radius: 16px;
  background: #f8f9fa;
  color: #666;
  text-decoration: none;
  border: 1px solid #e9ecef;
  /* 移除不必要的属性 */
  will-change: transform;
}

@media (min-width: 768px) {
  .tag-item:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.3);
  }
}

@media (max-width: 767px) {
  .tag-item:active {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
  }
}

/* 无障碍和性能优化 */
@media (prefers-reduced-motion: reduce) {
  .posts-item,
  .product-item,
  .tag-item {
    transition: none;
    animation: none;
  }
  
  .posts-item:hover, 
  .product-item:hover,
  .tag-item:hover,
  .posts-item:active, 
  .product-item:active,
  .tag-item:active {
    transform: translateY(-2px);
    animation: none;
  }
}
/*
====================================================================
替换成你自定义鼠标指针的图片URL
=====================================================================
*/
/* 1. 普通状态指针 */
* {
    /* 替换这里的URL为你上传的“普通指针”图片地址 */
    cursor: url('/wp-content/themes/zibll/Assets/admin/images/img/2023101703375285.png'), auto !important;
}

/* 2. 链接悬浮状态指针 */
a, 
.tags a, 
.posts-item .post-title a, 
.tab-nav .tab-item {
    /* 替换这里的URL为你上传的“链接指针”图片地址（可选，也可复用普通指针） */
    cursor: url('//cdn.wwttl.com/wp-content/themes/zibll/Assets/admin/images/img/2023101703375285.png'), pointer !important;
}

/* 3. 按钮/可点击元素悬浮指针 */
button, 
.btn, 
.zib-btn, 
.product-add-to-cart, 
.comment-reply-link {
    /* 替换这里的URL为你上传的“按钮指针”图片地址（可选） */
    cursor: url('//cdn.wwttl.com/wp-content/themes/zibll/Assets/admin/images/img/2023101703375271.png'), pointer !important;
}

/* 4. 文本选择状态指针 */
input, 
textarea, 
[contenteditable="true"] {
    /* 替换这里的URL为你上传的“文本指针”图片地址（可选） */
    cursor: url('//cdn.wwttl.com/wp-content/themes/zibll/Assets/admin/images/img/2023101703375271.png'), text !important;
}

/* 5. 移动端禁用自定义指针（避免适配问题） */
@media (max-width: 768px) {
    * {
        cursor: auto !important;
    }
    a, button, input {
        cursor: default !important;
    }
}

/*
====================================================================
WordPress禁止图片拖动
=====================================================================
/*
/*WordPress禁止图片拖动*/
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}
/*WordPress禁止文章图片拖动*/.entry-content img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}
/*
====================================================================
弹窗提醒
=====================================================================
*/
.qmsg.qmsg-wrapper {
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:13px;
  font-variant:tabular-nums;
  line-height:1;
  list-style:none;
  font-feature-settings:"tnum";
  position:fixed;
  top:136px;
  left:0;
  z-index:9999999;
  width:100%;
  pointer-events:none;
  color:#000;
}
.qmsg .qmsg-item {
  padding:8px;
  text-align:center;
  -webkit-animation-duration:.3s;
  animation-duration:.3s;
  position:relative;
}
.qmsg .qmsg-item .qmsg-count {
  text-align:center;
  position:absolute;
  left:-4px;
  top:-4px;
  background-color:#FF3355;
  color:#fff;
  font-size:12px;
  line-height:16px;
  border-radius:2px;
  display:inline-block;
  min-width:16px;
  height:16px;
  -webkit-animation-duration:.3s;
  animation-duration:.3s;
}
.qmsg .qmsg-item:first-child {
  margin-top:-8px;
}
.qmsg .qmsg-content {
  text-align:left;
  position:relative;
  display:inline-block;
  padding:10px 16px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  pointer-events:all;
  max-width:80%;
  min-width:80px;
}
.qmsg-content > div {
  display:flex;
  align-items:center;
}
.qmsg .qmsg-content [class^="qmsg-content-"] {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  align-items:center;
}
.qmsg .qmsg-content .qmsg-content-with-close {
  padding-right:20px;
}
.qmsg .qmsg-icon {
  display:inline-block;
  color:inherit;
  font-style:normal;
  text-align:center;
  text-transform:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  top:0;
  margin-right:8px;
  font-size:16px;
}
.qmsg .qmsg-icon svg {
  display:inline-block;
}
.qmsg .qmsg-content-info .qmsg-icon {
  color:#1890ff;
  user-select:none;
}
.qmsg .qmsg-icon-close {
  position:absolute;
  top:11px;
  right:5px;
  padding:0;
  overflow:hidden;
  font-size:12px;
  line-height:22px;
  background-color:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  color:rgba(0,0,0,.45);
  transition:color .3s;
}
.qmsg .qmsg-icon-close:hover>svg path {
  stroke:#555;
}
.qmsg .animate-turn {
  animation:MessageTurn 1s linear infinite;
  -webkit-animation:MessageTurn 1s linear infinite;
}
@keyframes MessageTurn {
  0% {
  -webkit-transform:rotate(0deg);
}
25% {
  -webkit-transform:rotate(90deg);
}
50% {
  -webkit-transform:rotate(180deg);
}
75% {
  -webkit-transform:rotate(270deg);
}
100% {
  -webkit-transform:rotate(360deg);
}
;}@-webkit-keyframes MessageTurn {
  0% {
  -webkit-transform:rotate(0deg);
}
25% {
  -webkit-transform:rotate(90deg);
}
50% {
  -webkit-transform:rotate(180deg);
}
75% {
  -webkit-transform:rotate(270deg);
}
100% {
  -webkit-transform:rotate(360deg);
}
;}@-webkit-keyframes MessageMoveOut {
  0% {
  max-height:150px;
  padding:8px;
  opacity:1;
}
to {
  max-height:0;
  padding:0;
  opacity:0;
}
;}@keyframes MessageMoveOut {
  0% {
  max-height:150px;
  padding:8px;
  opacity:1;
}
to {
  max-height:0;
  padding:0;
  opacity:0;
}
;}@-webkit-keyframes MessageMoveIn {
  0% {
  transform:translateY(-100%);
  transform-origin:0 0;
  opacity:0;
}
to {
  transform:translateY(0);
  transform-origin:0 0;
  opacity:1;
}
;}@keyframes MessageMoveIn {
  0% {
  transform:translateY(-100%);
  transform-origin:0 0;
  opacity:0;
}
to {
  transform:translateY(0);
  transform-origin:0 0;
  opacity:1;
}
;}@-webkit-keyframes MessageShake {
  0%,100% {
  transform:translateX(0px);
  opacity:1;
}
25%,75% {
  transform:translateX(-4px);
  opacity:0.75;
}
50% {
  transform:translateX(4px);
  opacity:0.25;
}
;}@keyframes MessageShake {
  0%,100% {
  transform:translateX(0px);
  opacity:1;
}
25%,75% {
  transform:translateX(-4px);
  opacity:0.75;
}
50% {
  transform:translateX(4px);
  opacity:0.25;
}
;}
/*
====================================================================
取货图标变大
=====================================================================
*/
.badg.badg-sm,.but.badg-sm{
  font-size: 1.4em;
  padding:0 .2em;
  vertical-align:.1em;
  min-width:1.6em
}