/* 1. 确保图片在放大时不会被父元素裁剪 */
.wc-pao-addon-image-swatch { 
    /* 允许放大的图片溢出其父容器 */
    overflow: visible !important; 
    display: inline-block; 
}

/* 2. 图片自身样式：初始状态和过渡效果 */
.wc-pao-addon-image-swatch img {
    /* 平滑过渡 */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    
    /* 确保放大时它能浮在其他元素上方 */
    position: relative; 
    z-index: 1; 
    
    /* 解决一些浏览器上的渲染问题 */
    will-change: transform;
    transform: scale(1);
}

/* 3. 悬停效果：放大 */
.wc-pao-addon-image-swatch:hover img {
    /* **关键修改：放大 5.0 倍** */
    transform: scale(5.0); 
    
    /* 提高 Z-index，确保在最上层 */
    z-index: 999; 
    
    /* 阴影效果 */
    box-shadow: 0 0px 0px rgba(0, 8, 20, 0.4); 
}


/* ---------------------------------------------------- */
/* 最终方案：强制小图水平滚动条 (Horizontal Scroll Thumbnails) */
/* ---------------------------------------------------- */

/* 1. 调整缩略图的父容器，启用滚动 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    /* 强制横向滚动条，只在内容溢出时显示 */
    overflow-x: auto !important; 
    
    /* 关键：阻止内容换行，所有缩略图在同一行 */
    white-space: nowrap !important; 
    
    /* 隐藏垂直滚动条 */
    overflow-y: hidden !important;
    
    /* 确保使用 flex 布局使其横向排列 */
    display: flex !important;
    flex-direction: row !important;
    
    /* 清除可能影响布局的默认样式 */
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 15px; /* 与主图的间隔 */
}

/* 2. 调整单个缩略图项，使其横向排列并占用固定空间 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    /* 确保在同一行 */
    display: inline-block !important;
    
    /* 防止图片被压缩 */
    flex-shrink: 0;
    
    /* 设置缩略图宽度（例如 20% 或固定 100px）*/
    /* 提示：如果您的缩略图是正方形，使用 100px 会更稳定 */
    width: 100px !important; 
    
    /* 调整缩略图之间的间隔 */
    margin-right: 10px !important; 
    margin-bottom: 0 !important; 
}

/* ---------------------------------------------------- */
/* 左侧图片区域：强制粘性定位 (Sticky Position) */
/* ---------------------------------------------------- */

.sticky-image-column {
    /* 强制 sticky 定位 */
    position: sticky !important; 
    
    /* 粘性效果触发点：设置为比导航栏高度稍高的值（例如 90px） */
    top: 90px !important; 
    
    /* 确保在滚动时始终在其他内容上方 */
    z-index: 10 !important; 
    
    /* **关键排除**：尝试覆盖可能阻止 sticky 生效的定位或显示设置 */
    align-self: flex-start !important; /* 如果父容器是 Flexbox，这有助于确保其高度正确 */
}

/* ---------------------------------------------------- */
/* 步骤三：检查并修复父容器溢出问题（如果需要） */
/* ---------------------------------------------------- */

/* 如果左侧粘性依然无效，请尝试找到包裹左右两侧容器的父容器的类名，
   并强制取消其 overflow 限制。*/

/* 假设左侧容器的父容器类名是 .elementor-element-20f73f46 (来自您的截图) */
.elementor-element-20f73f46 {
    overflow: visible !important; 
}
.custom-logo-link,
.custom-logo-link img,
.site-branding,
.site-branding img,
.ast-transparent-header .custom-logo-link img,
.ast-transparent-header .site-branding img,
.ast-transparent-header .custom-logo-link,
.ast-transparent-header .site-branding {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}
.custom-logo-link:before,
.custom-logo-link:after {
    content: none !important;
    box-shadow: none !important;
}
/* Logo 基础状态：平滑过渡 */
.custom-logo-link img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 只在桌面端做 grow 动画，避免手机乱掉 */
@media (min-width: 769px) {
    .custom-logo-link:hover img {
        transform: scale(1.06);   /* 放大 6%，你可以改成 1.03~1.1 */
        /* 可选：稍微提高亮度一点点，看起来更有动效 */
        /* filter: brightness(1.05); */
    }
}

/* 让 Astra 主菜单始终在一行显示，并缩小占位 */
.main-header-menu {
    display: flex;
    flex-wrap: nowrap !important;   /* 不允许换到第二行 */
    justify-content: flex-end;
}

/* 每个菜单项保持一行，减小左右间距和字号 */
.main-header-menu > li {
    white-space: nowrap;
}

.main-header-menu > li > a {
    font-size: 15px;                /* 如果还挤，可以改成 14px */
    padding-left: 10px;
    padding-right: 10px;
}

/* 语言切换和购物车之间稍微留点空隙（可选） */
.trp-language-switcher-container,
.gt_float_switcher {
    margin-left: 8px;
}

/* 让 Header Builder Widget 1 与购物车/搜索图标保持同一高度 */
.ast-header-widget-area .widget {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: -4px;   /* 如果需要再高一点可调成 -6px 或 -8px */
}

/* 针对 GTranslate 按钮本身微调位置 */
.gt_float_switcher,
.trp-language-switcher-container {
    margin-top: -2px !important;
}

/* 去掉整个站点的左右白边 */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Astra 容器全宽，不要左右 padding */
.site-content .ast-container,
.ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Elementor 外层 section 不留额外外边距 */
.elementor-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
}