/* ==========================================
   产品图库基础布局
   ========================================== */

.lx-product-gallery {
    display: flex;
    gap: 12px;
}

/* 缩略图在下方（默认） */
.lx-gallery-layout-thumb-bottom {
    flex-direction: column;
}

/* 缩略图在上方 */
.lx-gallery-layout-thumb-top {
    flex-direction: column;
}

.lx-gallery-layout-thumb-top .lx-gallery-thumbs {
    order: -1;
}

/* 缩略图在左侧 */
.lx-gallery-layout-thumb-left {
    flex-direction: row;
}

.lx-gallery-layout-thumb-left .lx-gallery-thumbs {
    flex-direction: column;
    order: -1;
}

/* 缩略图在右侧 */
.lx-gallery-layout-thumb-right {
    flex-direction: row;
}

.lx-gallery-layout-thumb-right .lx-gallery-thumbs {
    flex-direction: column;
}

/* ==========================================
   主图区域 — 滑动模式
   ========================================== */

.lx-gallery-main {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.lx-gallery-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

/* 水平滑动 */
.lx-gallery-direction-horizontal .lx-gallery-track {
    flex-direction: row;
}

.lx-gallery-direction-horizontal .lx-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
}

/* 纵向滑动 */
.lx-gallery-direction-vertical .lx-gallery-track {
    flex-direction: column;
}

.lx-gallery-direction-vertical .lx-gallery-slide {
    width: 100%;
    flex-shrink: 0;
}

/* Slide 图片 */
.lx-gallery-slide {
    overflow: hidden;
}

.lx-gallery-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 水平模式 slide 图片用 cover 让图片填满 */
.lx-gallery-direction-horizontal .lx-gallery-slide img {
    object-fit: cover;
}

.lx-gallery-main-clickable {
    cursor: zoom-in;
}

/* ==========================================
   平铺模式 — 所有图片向下展示
   ========================================== */

.lx-gallery-flat-layout .lx-gallery-main {
    overflow: visible;
}

.lx-gallery-flat-layout .lx-gallery-slide {
    width: 100%;
}

.lx-gallery-flat-layout .lx-gallery-slide img {
    object-fit: contain;
}

/* 平铺模式：缩略图 fixed 跟随 */
.lx-gallery-flat-layout .lx-gallery-thumbs-vertical.lx-gallery-thumbs-flat {
    position: fixed;
    top: 20px;
    max-height: none;
    overflow-y: visible;
    z-index: 100;
    transition: opacity 0.3s ease;
}

/* 占位元素：保持 flex 布局不塌陷 */
.lx-gallery-thumbs-spacer {
    flex-shrink: 0;
}

/* 纵向对齐：顶部 */
.lx-gallery-sticky-align-flex-start .lx-gallery-thumbs-vertical.lx-gallery-thumbs-flat {
    top: 20px;
    transform: translateY(var(--lx-gallery-offset-y, 0px)) translateX(var(--lx-gallery-offset-x, 0px));
}

/* 纵向对齐：居中 — top:50% + translateY(-50%) + 偏移量 */
.lx-gallery-sticky-align-center .lx-gallery-thumbs-vertical.lx-gallery-thumbs-flat {
    top: 50%;
    transform: translateY(calc(-50% + var(--lx-gallery-offset-y, 0px))) translateX(var(--lx-gallery-offset-x, 0px));
}

/* 纵向对齐：底部 */
.lx-gallery-sticky-align-flex-end .lx-gallery-thumbs-vertical.lx-gallery-thumbs-flat {
    top: auto;
    bottom: 20px;
    transform: translateY(calc(-1 * var(--lx-gallery-offset-y, 0px))) translateX(var(--lx-gallery-offset-x, 0px));
}

/* ==========================================
   缩略图区域
   ========================================== */

.lx-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* 纵向缩略图（左右位置时） */
.lx-gallery-thumbs-vertical {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh;
    scrollbar-width: thin;
}

.lx-gallery-thumbs-vertical::-webkit-scrollbar {
    width: 4px;
}

.lx-gallery-thumbs-vertical::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* ==========================================
   小图模式缩略图
   ========================================== */

.lx-gallery-thumb-item {
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.lx-gallery-thumb-item:hover {
    opacity: 0.85;
}

.lx-gallery-thumb-item.active {
    opacity: 1;
}

.lx-gallery-thumb-item img {
    display: block;
    object-fit: cover;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.lx-gallery-thumb-item.active img {
    border-color: #111;
    border-width: 2px;
    border-style: solid;
}

/* ==========================================
   圆点模式
   ========================================== */

.lx-gallery-dot-item {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.lx-gallery-dot-item:hover {
    background-color: #bbb;
}

.lx-gallery-dot-item.active {
    background-color: #111;
    border-color: #111;
}

/* ==========================================
   灯箱
   ========================================== */

.lx-gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lx-gallery-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.lx-gallery-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
}

.lx-gallery-lightbox img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}

/* ==========================================
   灯箱按钮样式
   使用 div[role="button"] 替代 button，
   彻底避免 reset.css 对 button 元素的重置

   特异性策略：
   - 布局/定位/重置保护 → 高特异性 (0-2-0) 抗 reset.css
   - 颜色/背景色默认值 → 低特异性 (0-1-0) 允许 Elementor 覆盖
   ========================================== */

/* 重置保护 + 布局基础 — 高特异性 0-2-0 */
.lx-gallery-lightbox .lx-gallery-lightbox-close,
.lx-gallery-lightbox .lx-gallery-lightbox-prev,
.lx-gallery-lightbox .lx-gallery-lightbox-next {
    margin: 0;
    padding: 0;
    outline: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

/* 颜色默认值 — 低特异性 0-1-0，让 Elementor 的 0-2-0 选择器可以覆盖 */
/* color 控制字体图标(eicons)，fill 控制SVG图标 */
.lx-gallery-lightbox-close {
    color: rgba(255, 255, 255, 0.85);
    fill: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 28px;
}

.lx-gallery-lightbox-prev,
.lx-gallery-lightbox-next {
    color: rgba(255, 255, 255, 0.9);
    fill: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.12);
    font-size: 24px;
}

/* 关闭按钮布局 — 高特异性 0-2-0 */
.lx-gallery-lightbox .lx-gallery-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    z-index: 2;
    border-radius: 50%;
}

.lx-gallery-lightbox .lx-gallery-lightbox-close:hover {
    color: #fff;
    fill: #fff;
    background-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.lx-gallery-lightbox .lx-gallery-lightbox-close i,
.lx-gallery-lightbox .lx-gallery-lightbox-close svg,
.lx-gallery-lightbox .lx-gallery-lightbox-close span {
    width: 1em;
    height: 1em;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    fill: currentColor;
}

/* 箭头按钮布局 — 高特异性 0-2-0 */
.lx-gallery-lightbox .lx-gallery-lightbox-prev,
.lx-gallery-lightbox .lx-gallery-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.lx-gallery-lightbox .lx-gallery-lightbox-prev:hover,
.lx-gallery-lightbox .lx-gallery-lightbox-next:hover {
    color: #fff;
    fill: #fff;
    background-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%) scale(1.08);
}

.lx-gallery-lightbox .lx-gallery-lightbox-prev i,
.lx-gallery-lightbox .lx-gallery-lightbox-prev svg,
.lx-gallery-lightbox .lx-gallery-lightbox-prev span,
.lx-gallery-lightbox .lx-gallery-lightbox-next i,
.lx-gallery-lightbox .lx-gallery-lightbox-next svg,
.lx-gallery-lightbox .lx-gallery-lightbox-next span {
    width: 1em;
    height: 1em;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    fill: currentColor;
}

.lx-gallery-lightbox .lx-gallery-lightbox-prev {
    left: 24px;
}

.lx-gallery-lightbox .lx-gallery-lightbox-next {
    right: 24px;
}

/* 隐藏图库数据 */
.lx-gallery-data {
    display: none !important;
}