/**
 * Qing Product Gallery widget styles.
 *
 * Mobile first: the thumbnail strip sits under the main image and scrolls
 * sideways. From 768px up it becomes a vertical column beside the image.
 *
 * The strip is a real scroll container, so touch, trackpad and wheel all work
 * without JS. The arrows just set scrollTop / scrollLeft, and their visibility
 * is derived from the scroll position by the JS.
 *
 * Sizes come from the widget's controls. The values here are the defaults and
 * the fallbacks used before Elementor's generated CSS lands.
 */

.qing-gallery {
    /* Consumed by the viewport size calc below. Elementor's controls overwrite
       these on the same element. */
    --qing-g-count: 4;
    --qing-g-thumb-w: 72px;
    --qing-g-thumb-h: 90px;
    --qing-g-gap: 10px;
    --qing-g-thumbnav-offset: 8px;
    --qing-g-thumbnav-size: 40px;
}

.qing-gallery__inner {
    display: flex;
    /* 手机：主图在上、缩略图在下。
       DOM 里缩略图排在主图前面（桌面端在左侧需要这个顺序），
       所以这里靠 order 调换，不改标记。 */
    flex-direction: column;
    gap: 14px;
}

.qing-gallery__inner > .qing-gallery__thumbs {
    order: 2;
}

.qing-gallery__inner > .qing-gallery__main {
    order: 1;
}

/* ============================================================
 * Main image
 * ============================================================ */
.qing-gallery__main {
    /* min-width: 0 lets the image shrink inside the flex row instead of
       forcing the row wider than its container. */
    min-width: 0;
    flex: 1 1 auto;
}

/* 高度由 Height 控件决定，这里只是兜底值。
   图片会填满这个高度（见下面的 height:100% + object-fit），
   所以调高度时图片跟着拉伸，不会露出背景色。 */
.qing-gallery__stage {
    position: relative;
    height: 570px;
    overflow: hidden;
    background-color: #f7f7f7;
}

/* 所有幻灯片都绝对定位、互相重叠，靠 opacity 切换。
   之前只有非活动的那几张是 absolute，活动的留在文档流里，
   于是多张图片会依次堆叠、把舞台撑开，活动图也不在正确位置，
   看起来就是「点缩略图大图没变」。 */
.qing-gallery__slide {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* 淡出的那张不能吃掉本该落在箭头上的点击。 */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.qing-gallery__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    /* 压在其余几张之上，避免叠放顺序影响点击。 */
    z-index: 1;
}

/* 填满舞台。object-fit 由 Image Fit 控件决定：
   cover 等比放大并裁掉多余部分（不变形），fill 直接拉满（会变形）。

   选择器带上 .qing-gallery__slide：style.css 里有一条全局
   `img { height: auto }`，单靠 .qing-gallery__img 特异性相同，
   谁后加载谁生效——而本文件的入队优先级(5)早于 style.css(10)，
   所以会被全局规则压掉，图片塌回原始比例，露出舞台背景。
   多一个类就稳定压过它，不再依赖加载顺序。 */
.qing-gallery__slide .qing-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * Main image arrows
 * ============================================================ */
.qing-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #2f2b28;
    line-height: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qing-gallery__nav--prev {
    left: 12px;
}

.qing-gallery__nav--next {
    right: 12px;
}

.qing-gallery__nav svg,
.qing-gallery__nav i {
    display: block;
    /* Clicks must land on the span itself so the JS and keyboard handlers
       both see the same target. */
    pointer-events: none;
}

/* ============================================================
 * Favorite
 * ============================================================ */
.qing-gallery__favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #c9ccd1;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qing-gallery__favorite svg,
.qing-gallery__favorite i {
    display: block;
    pointer-events: none;
}

.qing-gallery__favorite:hover,
.qing-gallery__favorite:focus-visible {
    transform: scale(1.08);
}

.qing-gallery__favorite.is-active {
    color: #e0245e;
}

/* The built-in heart is an outline: fill="none" is a presentation attribute,
   which loses to any CSS selector, so this fills it once active. currentColor
   keeps it in step with the Active Color control. */
.qing-gallery__favorite.is-active .qing-heart {
    fill: currentColor;
}

/* ============================================================
 * Thumbnail strip
 * ============================================================ */
.qing-gallery__thumbs {
    position: relative;
    /* Mobile: full width under the image. */
    flex: 0 0 auto;
    min-width: 0;
}

.qing-gallery__thumbsViewport {
    /* position: relative so a thumbnail's offsetTop/offsetLeft is measured
       against the scroll container, which is what the JS scrolls. */
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* Mobile: exactly --qing-g-count thumbnails wide, capped to the container
       so it never causes sideways page scroll. */
    width: calc(
        (var(--qing-g-thumb-w) * var(--qing-g-count)) +
        (var(--qing-g-gap) * (var(--qing-g-count) - 1))
    );
    max-width: 100%;
    margin-inline: auto;
    /* The arrows are the visible control, so the native bar is hidden. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.qing-gallery__thumbsViewport::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.qing-gallery__thumbsTrack {
    display: flex;
    flex-direction: row;
    /* 必须和视口高度计算用的是同一个变量。
       这里原本写死 10px，而计算用的是 --qing-g-gap（默认 26px），
       两个数不一致，缩略图之间就会多出对不上的空白。 */
    gap: var(--qing-g-gap, 10px);
}

.qing-gallery__thumb {
    position: relative;
    flex: 0 0 auto;
    display: block;
    /* 走变量而不是写死数值：控件改的是 --qing-g-thumb-*，
       这样即使样式表的加载顺序变化，也不会把控件值压掉。 */
    width: var(--qing-g-thumb-w, 72px);
    height: var(--qing-g-thumb-h, 90px);
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* 同样多带一个类，压过 style.css 的全局 `img { height: auto }`，
   否则缩略图不会填满设定的高度。 */
.qing-gallery__thumb .qing-gallery__thumbImg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ---- 选中态 ----
   之前 JS 一直在切换 .is-active，但样式表里没有对应规则，
   所以看不出当前是哪一张。

   边框用 inset box-shadow 而不是 border：border 会占掉盒子尺寸，
   让选中的那张比其他缩略图小一圈（box-sizing 也救不了固定高度的情况）。
   box-shadow 画在内侧，不影响布局。 */
.qing-gallery__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow 0.2s ease;
}

.qing-gallery__thumb.is-active::after {
    box-shadow: inset 0 0 0 2px var(--qing-g-thumb-active, #b89b5e);
}

/* 未选中的略微压暗，选中的那张因此更跳出来。 */
.qing-gallery__thumb:not(.is-active) {
    opacity: 0.62;
}

.qing-gallery__thumb:hover,
.qing-gallery__thumb:focus-visible {
    opacity: 1;
}

/* 键盘焦点要看得见：span[role=button] 没有原生焦点环。 */
.qing-gallery__thumb:focus-visible::after {
    box-shadow: inset 0 0 0 2px var(--qing-g-thumb-active, #b89b5e);
}

/* ============================================================
 * Strip arrows
 * ============================================================ */
.qing-gallery__thumbNav {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 走变量：写死数值会压掉「Button Size」控件的输出。 */
    width: var(--qing-g-thumbnav-size, 40px);
    height: var(--qing-g-thumbnav-size, 40px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    color: #2f2b28;
    line-height: 0;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qing-gallery__thumbNav svg,
.qing-gallery__thumbNav i {
    display: block;
    pointer-events: none;
}

/* Mobile: the strip is horizontal, so the arrows sit at its left/right edges
   and the built-in chevrons are rotated a quarter turn to match. */
.qing-gallery__thumbNav--prev {
    top: 50%;
    left: var(--qing-g-thumbnav-offset);
    transform: translateY(-50%);
}

.qing-gallery__thumbNav--next {
    top: 50%;
    right: var(--qing-g-thumbnav-offset);
    transform: translateY(-50%);
}

.qing-gallery__thumbNav--prev .qing-gallery__chevron {
    transform: rotate(-90deg);
}

.qing-gallery__thumbNav--next .qing-gallery__chevron {
    transform: rotate(-90deg);
}

/* Hidden state for both arrow pairs.
   visibility (not display) keeps the button out of the tab order and the
   accessibility tree while still allowing the opacity transition. */
.qing-gallery__nav.is-hidden,
.qing-gallery__thumbNav.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================================
 * Share row
 * ============================================================ */
.qing-gallery__share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 46px;
}

.qing-gallery__shareBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f1f3f4;
    color: #2f2b28;
    line-height: 0;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qing-gallery__shareBtn:hover,
.qing-gallery__shareBtn:focus-visible {
    background-color: #e3e6e8;
    text-decoration: none;
}

.qing-gallery__shareBtn svg,
.qing-gallery__shareBtn i {
    display: block;
}

/* ============================================================
 * Screen-reader-only position announcement
 * ============================================================ */
.qing-gallery__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A single image needs no strip and no arrows. */
.qing-gallery--single .qing-gallery__thumbs {
    display: none;
}

/* ============================================================
 * Desktop / tablet: strip becomes a vertical column
 * ============================================================ */
@media (min-width: 768px) {

    .qing-gallery__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 25px;
    }

    /* 桌面端左右位置由下面的 flex-direction 决定，
       所以要清掉手机端为了「缩略图在下」设的 order，
       否则两者叠加会把左右也一起换掉。 */
    .qing-gallery__inner > .qing-gallery__thumbs,
    .qing-gallery__inner > .qing-gallery__main {
        order: 0;
    }

    /* Strip first in the DOM, so it is already on the left; the right-hand
       variant swaps the order instead of reordering the markup. */
    .qing-gallery--thumbs-right .qing-gallery__inner {
        flex-direction: row-reverse;
    }

    .qing-gallery__thumbs {
        /* 宽度必须显式等于缩略图宽度。箭头是相对这个容器
           以 left:50% 居中的，容器要是被 flex 拉宽或被内容撑宽，
           箭头就会偏出缩略图的中线。 */
        flex: 0 0 var(--qing-g-thumb-w, 72px);
        width: var(--qing-g-thumb-w, 72px);
    }

    .qing-gallery__thumbsViewport {
        overflow-x: hidden;
        overflow-y: auto;
        /* Vertical: exactly --qing-g-count thumbnails tall. */
        width: auto;
        max-width: none;
        margin-inline: 0;
        height: calc(
            (var(--qing-g-thumb-h) * var(--qing-g-count)) +
            (var(--qing-g-gap) * (var(--qing-g-count) - 1))
        );
    }

    .qing-gallery__thumbsTrack {
        flex-direction: column;
    }

    /* Arrows move to the top and bottom edges, centred horizontally, and the
       chevrons go back to pointing up/down. */
    .qing-gallery__thumbNav--prev {
        top: var(--qing-g-thumbnav-offset);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .qing-gallery__thumbNav--next {
        top: auto;
        bottom: var(--qing-g-thumbnav-offset);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .qing-gallery__thumbNav--prev .qing-gallery__chevron,
    .qing-gallery__thumbNav--next .qing-gallery__chevron {
        transform: none;
    }

    /* ---- 箭头位置：条外 ----
       默认箭头压在缩略图上方（inside）。选 outside 时，把箭头移到
       条的外侧，并给条留出等量的上下内边距，避免箭头和缩略图重叠。
       用 translateY(-100%) 让按钮完全落在条的边界之外。 */
    .qing-gallery--tnav-outside .qing-gallery__thumbs {
        padding-top: calc(var(--qing-g-thumbnav-size, 40px) + var(--qing-g-thumbnav-offset, 8px));
        padding-bottom: calc(var(--qing-g-thumbnav-size, 40px) + var(--qing-g-thumbnav-offset, 8px));
    }

    .qing-gallery--tnav-outside .qing-gallery__thumbNav--prev {
        top: 0;
    }

    .qing-gallery--tnav-outside .qing-gallery__thumbNav--next {
        bottom: 0;
    }
}

/* 隐藏上下箭头。用 display 而不是 visibility，
   彻底不占位，也不进入无障碍树。 */
.qing-gallery--tnav-hidden .qing-gallery__thumbNav {
    display: none;
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .qing-gallery__thumbsViewport {
        scroll-behavior: auto;
    }

    .qing-gallery__slide,
    .qing-gallery__nav,
    .qing-gallery__thumbNav,
    .qing-gallery__thumb,
    .qing-gallery__favorite,
    .qing-gallery__shareBtn {
        transition: none;
    }
}

/* ============================================================
 * Lightbox
 *
 * 主题自建，不依赖 Elementor 的灯箱。
 * 所有按钮是 span[role=button]，所以要显式给 cursor 和
 * user-select，原生 button 自带的那些这里都得补上。
 * ============================================================ */
.qing-gallery__lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [hidden] 在部分浏览器里会被 display:flex 覆盖，所以显式再声明一次。 */
.qing-gallery__lightbox[hidden] {
    display: none;
}

.qing-gallery__lbBackdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.qing-gallery__lbInner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40px 80px;
    box-sizing: border-box;
    pointer-events: none;
}

/* 内层是 pointer-events:none（让点击穿透到背景关闭），
   所以里面每个可交互元素都要显式恢复。 */
.qing-gallery__lbInner > * {
    pointer-events: auto;
}

.qing-gallery__lbFigure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

/* 灯箱里图片按原始比例完整显示，不裁切。 */
.qing-gallery__lbImg {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- 关闭与左右导航 ---------- */
.qing-gallery__lbClose,
.qing-gallery__lbNav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.qing-gallery__lbClose:hover,
.qing-gallery__lbNav:hover,
.qing-gallery__lbClose:focus-visible,
.qing-gallery__lbNav:focus-visible {
    background-color: rgba(255, 255, 255, 0.26);
}

.qing-gallery__lbClose {
    top: 20px;
    right: 24px;
}

.qing-gallery__lbNav--prev {
    left: 20px;
}

.qing-gallery__lbNav--next {
    right: 20px;
}

.qing-gallery__lbIcon,
.qing-gallery__lbNav .qing-gallery__chevron {
    display: block;
    pointer-events: none;
}

/* 到头且非循环时禁用，视觉上淡化并挡掉点击。 */
.qing-gallery__lbNav.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.qing-gallery__lbCount {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* 灯箱打开时锁住页面滚动。 */
body.qing-lb-open {
    overflow: hidden;
}

/* 开启灯箱后主图可点，给出手势提示。 */
.qing-gallery__slide[role="button"] {
    cursor: zoom-in;
}

@media (max-width: 767px) {

    .qing-gallery__lbInner {
        padding: 60px 12px 70px;
    }

    /* 手机上左右箭头贴到底部两侧，避免压住图片。 */
    .qing-gallery__lbNav {
        width: 42px;
        height: 42px;
        top: auto;
        bottom: 16px;
    }

    .qing-gallery__lbNav--prev {
        left: 26%;
    }

    .qing-gallery__lbNav--next {
        right: 26%;
    }

    .qing-gallery__lbCount {
        bottom: 70px;
    }
}