/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme for Elite Refined Strategy
 Author:       Your Name
 Author URI:   https://yoursite.com/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* ===== 在此下方粘贴你的自定义 CSS ===== */

/* ==========================================================================
   ⚡ 强力覆盖：Astra + WooCommerce 详情页 55:40 黄金比例修复
   ========================================================================= */

/* 1. 隐藏可能残存的心愿单、加入对比、分享、以及原生自带的底部缩略图点位 */
.flex-control-nav.flex-control-thumbs,
.ast-ext-add-to-wishlist, 
.contact-us-btn, 
.ast-on-card-button,
.product .summary .yith-wcwl-add-to-wishlist {
    display: none !important;
}

/* 2. 强力重塑单品主包裹层（解除原本可能存在的浮动） */
.single-product div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    max-width: 1250px !important;
    margin: 30px auto !important;
    padding: 0 20px !important;
    gap: 0 !important; /* 由两侧的 width 决定实际间距 */
    float: none !important;
}


/* 强制WooCommerce产品大图铺满容器 */
.single-product div.product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 核心代码：缩放图片以覆盖容器，并裁剪超出部分 */
    object-position: center !important; /* 可选：确保裁剪时图片保持居中 */
}

/* ==========================================================================
   ⚡ 左侧主图区域：强制 1:1 正方形展示 (聚焦纹理细节)
   ========================================================================= */

.single-product div.product .woocommerce-product-gallery {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
    position: relative !important;
    margin: 0 !important;
}

/* 强制相册视口为 1:1 正方形 */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .slides,
.woocommerce-product-gallery figure {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* 核心：锁定正方形比例 */
    height: auto !important; 
    overflow: hidden !important;
    background: #f5f5f5; /* 加载前的背景色 */
}

/* 图片填满正方形，居中裁切 (Cover模式) */
.woocommerce-product-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 核心：裁切铺满，不变形 */
    object-position: center center !important; /* 聚焦图片中心 */
    display: block !important;
}

/* 悬浮控制按钮位置微调 (保持在右下角) */
.woocommerce-product-gallery .viewer-custom-controls {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}



/* 3. 左侧大图独立控制：强占 55% 宽度 */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .ast-woocommerce-container div.product .woocommerce-product-gallery {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
    float: left !important; /* 兼容老版本内核 */
    position: relative !important;
    margin: 0 !important;
}

/* 强制左侧相册视口和轮播图完全拉伸，100% 还原木纹本来的长宽比 */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .slides {
    width: 100% !important;
    height: auto !important;
}

.woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    max-height: 680px !important;
    /* object-fit: contain !important; */ /* 保证原图比例完全呈现，不发生任何压扁拉伸 */
    display: block !important;
}

/* 4. 右侧内容独立控制：占 40% 宽度，完美留白 */
.single-product div.product .summary.entry-summary {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    width: 40% !important;
    float: right !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 5. 悬浮控制按钮：死死贴住左侧相册图片的右下角 */
.woocommerce-product-gallery .viewer-custom-controls {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.woocommerce-product-gallery .ctrl-btn {
    background: rgba(0, 0, 0, 0.65) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    backdrop-filter: blur(4px) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transition: background 0.2s ease !important;
}
.woocommerce-product-gallery .ctrl-btn:hover {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* 6. 右侧可选颜色轮播滑块美化 */
.gq-color-slider-section {
    margin-top: 35px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
    width: 100% !important;
    clear: both !important;
}

.gq-slider-title {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 12px !important;
}

.gq-slider-component {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.gq-slider-window {
    overflow: hidden !important;
    width: 260px !important; /* 4个图(55*4) + 间距(12*3) = 256px 优雅容纳 */
    margin: 0 !important; /* 靠左对齐 */
}

.gq-slider-track {
    display: flex !important;
    gap: 12px !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    width: max-content !important;
}

.gq-slide-item {
    width: 55px !important;
    height: 55px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s;
}

.gq-slide-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.gq-slide-item.is-active, .gq-slide-item:hover {
    border-color: #222222 !important;
}

/* 轮播小箭头 */
.gq-arrow {
    background: none !important;
    border: none !important;
    font-size: 14px !important;
    color: #aaa !important;
    cursor: pointer !important;
    padding: 0 8px !important;
    user-select: none !important;
}
.gq-arrow:hover { color: #111 !important; }

/* 7. 下方详细描述大通栏：强制独占 100% 宽，完美在下方平铺 */
.woocommerce-tabs, 
.single-product div.product .woocommerce-tabs,
.related.products,
.up-sells.products {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 40px !important;
}





/* ==========================================================================
   ⚡ 新增：花色单元图「展开/收起」动画样式
   ========================================================================= */

/* 基础容器：默认 1:1 正方形 (卷起来的状态) */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .slides,
.woocommerce-product-gallery figure {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;       /* 锁定正方形 */
    height: auto !important;
    overflow: hidden !important;
    background: #f5f5f5;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* 平滑过渡 */
}

/* 图片基础样式：裁切铺满 */
.woocommerce-product-gallery img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;         /* 默认裁切 */
    object-position: center center !important;
    display: block !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 【展开状态】：解除比例锁定，变为完整显示 */
.woocommerce-product-gallery .flex-viewport.is-expanded,
.woocommerce-product-gallery .slides.is-expanded,
.woocommerce-product-gallery figure.is-expanded {
    aspect-ratio: auto !important;        /* 解除正方形限制 */
    height: auto !important;              /* 高度由内容决定 */
    background: transparent;
}

.woocommerce-product-gallery .is-expanded img {
    width: 100% !important;
    height: auto !important;              /* 恢复原始比例 */
    object-fit: contain !important;       /* 完整显示，上下留白 */
    max-height: none !important;          /* 移除之前的最大高度限制 */
}

/* 展开按钮激活态视觉反馈 */
.woocommerce-product-gallery .ctrl-btn.is-active {
    background: #222 !important;
    border-left: 3px solid #fff !important; 
}

/* ==========================================================================
     全屏弹窗 V5：完整原图预览 + 拖拽平移 + 顶部色板保留
   ========================================================================= */

/* 1. 弹窗基础容器 */
.pattern-fullscreen-modal { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: #fff; z-index: 999999; display: flex; flex-direction: column; 
    overflow: hidden; /* 禁止整个弹窗出现浏览器原生滚动条 */
}

/* 2. 顶部栏：固定高度，始终显示 */
.modal-header-v2 {
    height: 80px; flex-shrink: 0; 
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 30px; border-bottom: 1px solid #eaeaea;
    background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    z-index: 20;
}

.modal-header-left-col { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.modal-product-name { font-size: 16px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 3. 方形缩略图色板行 (Aarau Pear 风格) */
.modal-swatch-row {
    display: flex; align-items: center; gap: 10px; overflow-x: auto;
    padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none;
}
.modal-swatch-row::-webkit-scrollbar { display: none; }

.swatch-item {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: 6px;
    overflow: hidden; cursor: pointer; border: 2px solid transparent;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); transition: all 0.2s ease;
}
.swatch-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch-item.is-active { border-color: #222; transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 2; }
.swatch-item:hover:not(.is-active) { border-color: #888; transform: scale(1.03); }

/* 4. 弹窗主体区域：自适应剩余空间 */
.modal-body { 
    flex: 1; position: relative; overflow: hidden; /* 内部隐藏溢出，由 JS 控制拖拽 */
    background: #f4f6f8; 
    display: flex; align-items: center; justify-content: center;
    cursor: grab; /* 提示可以抓取拖拽 */
}
.modal-body:active { cursor: grabbing; }

/* 5. 图片容器与图片本身 (核心：完整显示原图) */
.panzoom-element-wrapper { 
    position: relative; 
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    /* 允许内容超出容器，但被父级 overflow:hidden 遮罩 */
}

.panzoom-element-wrapper img { 
    max-width: 95% !important; max-height: 95% !important; 
    width: auto !important; height: auto !important;
    object-fit: contain !important; /* 【核心】保证图片完整显示，绝不裁切 */
    display: block;
    user-select: none; /* 防止拖拽时选中图片变蓝 */
    -webkit-user-drag: none; /* 禁止浏览器原生拖拽保存图片行为 */
    transform-origin: center center;
    transition: transform 0.1s linear; /* 拖拽时的平滑过渡 */
}

/* 6. 中央指示器 & 关闭按钮 */
.center-indicator { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 120px; height: 120px; background: rgba(0, 0, 0, 0.65); 
    display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: none; 
}
.dot-wrapper { position: relative; width: 40px; height: 40px; }
.dot { position: absolute; background: #fff; border-radius: 50%; }
.white-dot-1 { width: 6px; height: 6px; top: 8px; left: 8px; }
.white-dot-2 { width: 12px; height: 12px; bottom: 8px; right: 8px; }

.modal-close { 
    cursor: pointer; font-size: 24px; color: #a0aec0; padding: 10px; 
    transition: color 0.2s; z-index: 30;
}
.modal-close:hover { color: #333; }

/* 移动端适配 */
@media (max-width: 768px) {
    .modal-header-v2 { height: 70px; padding: 0 16px; }
    .swatch-item { width: 42px; height: 42px; }
    .modal-product-name { font-size: 14px; }
    .panzoom-element-wrapper img { max-width: 100% !important; max-height: 100% !important; }
}

/* ==========================================================================
    手机端专属修复：恢复默认垂直排版
   ========================================================================= */
@media (max-width: 768px) {
    
    /* 1. 主容器改为垂直排列，取消 Flex 横向布局 */
    .single-product div.product {
        display: block !important;       /* 改回块级，让子元素自然换行 */
        flex-wrap: nowrap !important;
        max-width: 100% !important;      /* 占满手机屏幕宽度 */
        padding: 0 15px !important;      /* 左右留一点边距 */
        margin: 20px auto !important;
    }

    /* 2. 左侧相册：恢复全宽，解除 55% 限制 */
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .ast-woocommerce-container div.product .woocommerce-product-gallery {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;          /* 清除浮动 */
        margin-bottom: 30px !important;  /* 图片和文字之间留出间距 */
    }

    /* 3. 右侧摘要：恢复全宽，解除 40% 限制 */
    .single-product div.product .summary.entry-summary {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;          /* 清除浮动 */
        padding: 0 !important;
    }

    /* 4. 调整 1:1 正方形的高度，避免在手机上占据太大屏幕 */
    .woocommerce-product-gallery .flex-viewport,
    .woocommerce-product-gallery .slides,
    .woocommerce-product-gallery figure {
        /* 手机上如果觉着 1:1 太大，可以改成 aspect-ratio: 4/3 !important; 或 3/4 */
        aspect-ratio: 1 / 1 !important; 
        max-height: 80vw !important;     /* 限制最大高度不超过屏幕宽度的 80% */
    }

    /* 5. 调整悬浮按钮大小，适应手指点击 */
    .woocommerce-product-gallery .ctrl-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        bottom: 10px !important;
        right: 10px !important;
    }

    /* 6. 下方 Tabs 和相关产品也保持全宽 */
    .woocommerce-tabs, 
    .related.products,
    .up-sells.products {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}


/* ==========================================================================
    ⚡ 详情页右侧缩略图悬浮提示 (Tooltip)
   ========================================================================= */

/* 1. 【核心】允许提示框溢出容器显示，不被裁切 */
.gq-slider-window,
.gq-slider-component {
    overflow-x: auto !important;      /* 保持横向滚动 */
    overflow-y: visible !important;   /* 允许Y轴溢出 */
    padding-bottom: 45px !important;  /* 为提示框预留空间 */
    margin-bottom: -35px !important;  /* 补偿padding，避免布局跳动 */
}

/* 2. 色块层级管理 */
.gq-slide-item {
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

/* 悬浮时置顶，防止被邻居遮挡 */
.gq-slide-item:hover {
    z-index: 9999 !important;
}

/* 3. 提示框主体 (显示在色块正下方) */
.gq-slide-item::after {
    content: attr(data-name) !important; /* 读取标题 */
    position: absolute !important;
    top: 120% !important;              /* 定位到下方 */
    left: 50% !important;
    transform: translateX(-50%) translateY(-5px) !important;
    
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease !important;
    z-index: 10000 !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

/* 4. 小三角箭头 */
.gq-slide-item::before {
    content: '' !important;
    position: absolute !important;
    top: 105% !important;
    left: 50% !important;
    margin-left: -5px !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease !important;
    z-index: 10000 !important;
}

/* 5. 悬浮激活 */
.gq-slide-item:hover::after,
.gq-slide-item:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}


/* ==========================================================================
    ⚡ JS版自定义提示框 (纯黑风格)
   ========================================================================= */
.gq-custom-tooltip {
    position: absolute !important;
    z-index: 999999 !important; /* 极高优先级，确保在任何弹窗/遮罩之上 */
    
    background-color: #000000 !important; /* 纯黑背景 */
    color: #ffffff !important;            /* 白色文字 */
    
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;       /* 禁止换行 */
    
    pointer-events: none !important;      /* 穿透鼠标事件，不影响点击 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    
    /* 可选：加一个极细的灰色边框提升质感 */
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.gq-custom-tooltip.visible {
    opacity: 1 !important;
    visibility: visible !important;
}