/**
 * Theme Name: Blocksy Child
 * Description:Blocksy Child theme
 * Author:Blocksy
 * Author URI: https://blocksy.com
 * Template: blocksy
 * Text Domain: blocksy
 */

 .yourdesign,.linggan{padding:0px !important;}
  .yourdesign:after,.linggan:after{clear:both;content: ""; /* 必须有 content，哪怕是空值 */
  display: block; /* 伪元素需为块级元素 */}
 .yourdesign li, .linggan li{float:left;width:80px;display:inline-block;margin:3px;}
 .curr{
 border:1px solid #00f !important;
 }
 .product-gallerylist{
     display: flex;
     gap:10px;
 }
 .product-gallery {
  display: grid; /* 启用网格布局 */
  grid-template-columns: repeat(2, 1fr); 
  gap: 10px; 
  padding: 10px; /* 容器内边距（可选） */
}
 .product-gallery img{max-width:100%;width:100%;}
.grid-item {
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 4px; /* 可选：添加圆角 */
}
    /* Tab容器样式 */
    .tab-container {
      width: 100%;
      max-width: 800px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    /* Tab导航栏样式 */
    .tab-nav {
      display: flex;
      background-color: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
    }

    /* Tab按钮样式 */
    .tab-btn {
      padding: 15px 25px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      color: #495057;
      transition: all 0.3s ease;
      position: relative;
    }

    .tab-btn:hover {
      color: #2196f3;
      background-color: rgba(33, 150, 243, 0.05);
    }

    .tab-btn.active {
      color: #2196f3;
    }

    .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #2196f3;
    }

    /* Tab内容区域样式 */
    .tab-content {
      padding: 30px;
    }

    .tab-panel {
      display: none;
      animation: fadeIn 0.5s ease;
    }

    .tab-panel.active {
      display: block;
    }

    .tab-panel h3 {
      margin-bottom: 15px;
      color: #2d3436;
      font-size: 20px;
    }

    .tab-panel p {
      color: #636e72;
      line-height: 1.6;
      margin-bottom:0 !important;
		margin-block-end: 0  !important;
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 响应式调整 */
    @media (max-width: 600px) {
      .tab-nav {
        flex-wrap: wrap;
      }
      
      .tab-btn {
        flex: 1 1 auto;
        text-align: center;
        padding: 12px 15px;
        font-size: 14px;
      }
      
      .tab-content {
        padding: 20px;
      }
    }
    
    
 .elementor-pagination a, .elementor-pagination span{display: inline-block;border:1px solid #333;padding:5px 10px;}
 .linggan li:hover{border:1px solid #00f !important;}
.ncss-btn-secondary-dark{
    border-radius:15px;
    padding:15px 80px;
    cursor:pointer;
    border:1px solid rgb(202,202,203);
}

.my-plugin-custom-content{
    display:none !important;
}
#customized_area{
    display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap:10px;

}

.ncss-btn-secondary-dark:hover{
   border:1px solid #000;  
}


     /* 1. 基础容器样式：确保两张图片重叠 */
        .image-container {
            position: relative;
            width: 100%; /* 可自定义图片宽度 */
            max-width:100%;
       
         
            cursor: pointer;
        }
        
         .image-container img{
             max-width:100%;
            height:auto;
         }
        
        .main-image,.hover-image {
             position: absolute;
            top: 0;
            left: 0;
           
           height:auto;
           
            transition: opacity 0.5s ease; /* 基础透明度过渡 */
        }
        .hover-image {
            opacity: 0; /* 初始隐藏（用opacity替代display，避免动画卡顿） */
        }

        /* 2. 动画1：渐显+轻微缩放（常用，突出层次感） */
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.95); /* 初始缩小5% */
            }
            100% {
                opacity: 1;
                transform: scale(1); /* 最终恢复原尺寸 */
            }
        }
        /* 动画2：渐显+轻微旋转（适合创意类图片） */
        @keyframes fadeInRotate {
            0% {
                opacity: 0;
                transform: rotate(-2deg) scale(0.95); /* 初始旋转-2度+缩小 */
            }
            100% {
                opacity: 1;
                transform: rotate(0) scale(1); /* 最终恢复 */
            }
        }

        /* 3. 动画类：控制动画触发 */
        .hover-image.animate-scale {
            animation: fadeInScale 0.6s ease forwards; /* forwards：保持动画结束状态 */
        }
        .hover-image.animate-rotate {
            animation: fadeInRotate 0.6s ease forwards;
        }