/* ============================================================
   产品询盘-2 (product_inquiry_2) 专属样式
   还原自 ThermoDetox Warm-Release Bar.html 的 .ly_product_purchase_2
   (visual_plugins_container data-type="product_purchase" data-mode="mode_2") 的公共样式块
   (c348aa2e...css 结构 + 405d0a2e...css 容器 + d399fa74...css 实例色);
   实例级样式(背景色/字号/颜色/布局/间距/模块宽度)由模板内联输出。
   引入方: templates/sitebuilder/modules/product_inquiry_2.html
   交互: static/sitebuilder/js/product_inquiry_2.js(图册切换 / 规格选择 / 分享)
   注意: 新增本文件后需同步 SiteStaticPublishServiceImpl.CSS_FILES(发布态拷贝清单是硬编码的)。

   布局分端: 原站一个 data-layout 管两端, 本模块 PC / 移动端各一个配置项,
   所以两端布局都落成根元素上的 class(pc_layout_* / mobile_layout_*),
   由媒体查询决定哪一套生效 —— 不用 JS 判断视口, 缩放窗口也不会错位。
   ============================================================ */

.ly_product_purchase_2 { background-color: #ffffff; }
.ly_product_purchase_2 a { text-decoration: none; color: inherit; }
.ly_product_purchase_2 img { max-width: 100%; }

/* ---------- 模块宽度三规则(class 在内部容器 .wide 上, 见指南 §7 第13条) ---------- */
.ly_product_purchase_2 .wide { margin: 0 auto; padding: 0; box-sizing: border-box; }
.ly_product_purchase_2 .wide.module_width_1440 { width: 1440px; max-width: 100%; }
.ly_product_purchase_2 .wide.module_width_full { width: 100%; }
.ly_product_purchase_2 .wide.module_width_global { width: var(--deco-module-width, 1440px); max-width: 100%; }

/* ---------- 左图右信息 ---------- */
.ly_product_purchase_2 .goods_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
/* position:relative 是给悬停放大区(.pi_zoom_panel)当定位父级 —— 它要贴在图册右边缘外侧 */
.ly_product_purchase_2 .goods_wrapper .goods_img {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 50%;
    position: relative;
}
.ly_product_purchase_2 .goods_wrapper .goods_info {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 45%;
}

/* ---------- 主图 ---------- */
.ly_product_purchase_2 .thumb_size { width: 100%; max-width: 600px; margin: 0 auto; transition: .4s; order: 2; }
.ly_product_purchase_2 .thumb_big {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}
/* 大图横排 + translateX 切换(左右滑动效果):
   ul 是 flex 横排, 每张 li 占整宽, js 改 ul 的 translateX(-index*100%) 显示第 N 张;
   拖动时跟手(无过渡), 松手翻页/回弹时加 .pi-anim 过渡(时长见下)。 */
.ly_product_purchase_2 .thumb_big ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    /* 必须 absolute: .thumb_big 是 padding-top:100% 撑高的(content height 为 0),
       absolute 铺满 padding box 才有高度; 脱离文档流后 flex 横排不受影响 */
    position: absolute;
    left: 0;
    top: 0;
}
.ly_product_purchase_2 .thumb_big ul.pi-anim { transition: transform .4s cubic-bezier(.25, .8, .25, 1); }
.ly_product_purchase_2 .thumb_big ul li {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}
.ly_product_purchase_2 .thumb_big ul li img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.ly_product_purchase_2 .thumb_big ul li video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    object-fit: contain;
}
/* 横向滑动手势交给 js(pointer 事件), 纵向滚动仍留给页面 */
.ly_product_purchase_2 .thumb_big { touch-action: pan-y; }

/* ---------- 悬停放大(仅 PC) ---------- */
/* 原站用 jQuery 的 zoomsl 插件(.cursorshade 跟随框 + .magnifier 放大面板), 这里换成原生实现,
   分工不变: 鼠标在大图上移动 -> lens 标出取景范围, panel 用 background-position 显示 2 倍图。
   尺寸、背景图、显隐全部由 product_inquiry_2.js 现算, CSS 只定外观与层级。 */
.ly_product_purchase_2 .thumb_big .pi_zoom_lens {
    position: absolute;
    display: none;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #000;
    opacity: .3;
    /* 跟随框自己不能吃鼠标事件, 否则 mousemove 的 target 一直是它, 坐标就跳了 */
    pointer-events: none;
    z-index: 22;
}
/* 放大面板贴在图册右边缘外侧、盖在信息区上方(原站也是这个位置)。
   left:100% 相对 .goods_img —— 三种 PC 布局下图册宽度不同, 用百分比不用写死值。
   宽高与 background 由 js 设; overflow 交给 background-position 自然裁切, 不需要内层 img */
.ly_product_purchase_2 .goods_img .pi_zoom_panel {
    position: absolute;
    display: none;
    left: 100%;
    top: 0;
    margin-left: 10px;
    box-sizing: border-box;
    border: 1px solid #000;
    background-color: #fff;
    background-repeat: no-repeat;
    z-index: 23;
}

/* ---------- 缩略图条 ---------- */
/* 外框尺寸由各布局给(见下方 pc_layout_* / mobile_layout_*), .box 撑满外框并裁掉溢出,
   ul 靠 transform 位移翻页 —— 位移量由 js 按 box 与 ul 的尺寸差算。
   圆点布局下外框高度是 auto, .box 跟着内容走, 不会塌。 */
.ly_product_purchase_2 .thumb_small { position: relative; overflow: hidden; order: 1; }
.ly_product_purchase_2 .thumb_small .box { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ly_product_purchase_2 .thumb_small ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    transition: transform .3s;
}
.ly_product_purchase_2 .thumb_small ul li {
    width: 89px;
    height: 89px;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    border: 1px solid transparent;
    padding: 2px;
    cursor: pointer;
    vertical-align: middle;
}
.ly_product_purchase_2 .thumb_small ul li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ly_product_purchase_2 .thumb_small ul li:hover,
.ly_product_purchase_2 .thumb_small ul li.current { border-color: #000; }
/* 视频缩略图: 半透明遮罩 + 三角形播放标, 不依赖 iconfont/图片资源 */
.ly_product_purchase_2 .thumb_small ul li.video_pic_box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .45);
}
.ly_product_purchase_2 .thumb_small ul li.video_pic_box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
}
/* 缩略图翻页按钮: 两条线拼箭头, 同产品列表-2 的 +/- 做法 */
.ly_product_purchase_2 .thumb_small .switching_btn {
    width: 25px;
    height: 25px;
    background-color: rgba(239, 239, 239, .8);
    position: absolute;
    cursor: pointer;
    z-index: 2;
}
.ly_product_purchase_2 .thumb_small .switching_btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}
.ly_product_purchase_2 .thumb_small .switching_btn.hide { display: none; }

/* ---------- 产品信息各块(9 个子项的实际落点) ---------- */
.ly_product_purchase_2 .goods_info > * { width: 100%; }
.ly_product_purchase_2 .goods_info .g_name {
    margin: 0 0 18px;
    line-height: 1.2;
    font-size: 30px;
    font-weight: 600;
    color: #222222;
}
.ly_product_purchase_2 .goods_info .g_number {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 12px;
    color: #222222;
}
.ly_product_purchase_2 .goods_info .g_desc {
    margin-bottom: 15px;
    line-height: 1.8;
    font-size: 14px;
    color: #222222;
}
.ly_product_purchase_2 .goods_info .g_desc > :first-child { margin-top: 0; }
.ly_product_purchase_2 .goods_info .g_desc > :last-child { margin-bottom: 0; }
.ly_product_purchase_2 .goods_info .g_params { margin-bottom: 30px; font-size: 14px; color: #222222; }
.ly_product_purchase_2 .goods_info .g_params .param_title { font-size: 18px; font-weight: 600; }
.ly_product_purchase_2 .goods_info .g_params .param_item { display: flex; margin-top: 10px; line-height: 1.5; }
.ly_product_purchase_2 .goods_info .g_params .param_item:first-of-type { margin-top: 10px; }
.ly_product_purchase_2 .goods_info .g_params .param_item .cell:nth-child(1) {
    max-width: 50%;
    margin-right: 5px;
    font-weight: 600;
}
.ly_product_purchase_2 .goods_info .g_params .param_item .cell:nth-child(2) {
    flex: 1;
    word-wrap: break-word;
    opacity: .8;
}
.ly_product_purchase_2 .goods_info .g_price {
    margin-bottom: 30px;
    line-height: 1.2;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

/* ============================================================
   规格属性
   ============================================================ */
/* 层级照原站: .attr_info 是整区头部(标题 + Edit selections), .item_info 在每个 .attr_item 下。
   6 个颜色由模块 schema 内联输出(见模板 Attr 子项), 这里只给不可配的排版与灰底。
   同一套规则也命中抽屉里的 .content_attr.widgets_attr_box —— 抽屉是主区的镜像, 差异只在
   .attr_item:last-child(多一行数量), 见下方"抽屉"段。 */
.ly_product_purchase_2 .widgets_attr_box {
    width: 100%;
    padding-bottom: 20px;
}
.ly_product_purchase_2 .widgets_attr_box .attr_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.ly_product_purchase_2 .widgets_attr_box .attr_info .attr_title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}
.ly_product_purchase_2 .widgets_attr_box .attr_info .attr_selections {
    font-size: 14px;
    color: #1F2328;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item { margin-top: 25px; }
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item:first-child { margin-top: 10px; }
/* "属性名: 选中值" —— 选中值在 em 里, js 只改这一处(见 selectAttrOption)。
   原站把属性名与选中值分成两个颜色, 我们 schema 只有一个"规格属性名称颜色"(attrNameColor),
   所以 em 只去掉加粗与斜体, 颜色继承整行 —— 一个配置项管一行, 不留半截跟不上的文字 */
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_info {
    font-size: 16px;
    font-weight: bold;
    color: #888888;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_info span em {
    font-weight: normal;
    font-style: normal;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 15px;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_box .item {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #F4F4F5;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_box .item .text {
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: #F4F4F5;
    font-size: 12px;
    color: #333333;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
/* 图片型选项(库里 option_image 非空): 一行 6 个方格, 正方形靠 aspect-ratio 撑 */
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_box .item.picture {
    width: calc((100% - 5 * 10px) / 6);
    aspect-ratio: 1 / 1;
    height: auto;
    border-color: #E1E1E1;
    background-color: #ffffff;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_box .item .image {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    margin: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
}
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .item_box .item .image img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* ============================================================
   规格选择抽屉(Edit selections)
   ============================================================ */
/* 显隐用 opacity + visibility 而不是 display: 要让遮罩淡入与面板滑入有过渡。
   z-index 10002 沿用原站(高于站点头部吸顶). 编辑态是 iframe 内, 不会盖住装修器面板 */
.ly_product_purchase_2 .widgets_attr_popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out, visibility 0s .3s;
}
.ly_product_purchase_2 .widgets_attr_popup.active { opacity: 1; visibility: visible; }
.ly_product_purchase_2 .widgets_attr_popup .popup_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #1C1F23;
    opacity: 0;
    transition: opacity .3s ease-out;
}
.ly_product_purchase_2 .widgets_attr_popup.active .popup_mask { opacity: .6; }

/* 抽屉里没填数量点询盘的提示(product_inquiry_2.js 动态插入):
   居中短显 2s, 层级要盖过抽屉(10002) */
.ly_product_purchase_2 .pi_quantity_tip {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 24px;
    background-color: rgba(28, 31, 35, .9);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 4px;
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-out, visibility 0s .2s;
    pointer-events: none;
}
.ly_product_purchase_2 .pi_quantity_tip.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease-out;
}

.ly_product_purchase_2 .widgets_attr_popup .right_bar {
    position: absolute;
    right: -100%;
    top: 0;
    width: 600px;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 30px 30px;
    background-color: #ffffff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    transition: right .4s ease-out;
    z-index: 1;
}
.ly_product_purchase_2 .widgets_attr_popup.active .right_bar { right: 0; }
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_info {
    margin-bottom: 10px;
    padding-right: 40px;
    font-size: 20px;
    font-weight: bold;
    color: #222222;
}
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_close {
    position: absolute;
    top: 11px;
    right: 25px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_close::before,
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background-color: #4D5560;
    transform-origin: center;
}
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* 高度按剩余空间算(原站写死 500px, 矮屏 PC 会把底部按钮顶出去):
   160px ≈ bar_info 一行 + 底部按钮条 */
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_content {
    height: calc(100% - 160px);
    overflow-y: auto;
    padding: 0 5px 2px 2px;
}
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_content .content_price {
    line-height: 1.2;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 -1px 10px -2px rgba(0, 0, 0, .1);
}
/* 小计: 填了数量且算得出金额时才由 js 加 .show(默认藏着, 免得一进抽屉就挂一行 "-") */
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom .bottom_info {
    display: none;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #222222;
}
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom .bottom_info.show { display: flex; }
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom .bottom_info .total_price {
    text-align: right;
    word-break: break-word;
}
/* 抽屉里的询盘按钮撑满一行, 其余样式(颜色/圆角/字号)跟主按钮共用内联规则 */
.ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom .bottom_button .g_inquiry_btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0 20px;
    height: 48px;
    line-height: 48px;
    text-decoration: none;
}

/* 抽屉最后一个属性多一行数量。用 :last-child 而不是原站的 .last class:
   模板会跳过没有选项的属性, Thymeleaf 的 ${st.last} 判断的是原集合末位, 跳过后就落错了 */
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item:last-child .item_box .item {
    width: 100%;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    /* 选中态外框移到内层 .text 上(原站口径), 外层不再描边 */
    border-color: transparent !important;
    box-shadow: none !important;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item:last-child .item_box .item.picture {
    aspect-ratio: auto;
    background-color: transparent;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item:last-child .item_box .item .image {
    width: 52px;
    height: 52px;
    flex: none;
    border: 1px solid #bbbbbb;
    box-sizing: border-box;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item:last-child .item_box .item .text { border-color: #F4F4F5; }
/* 数量只在最后一个属性出现: 其余属性的这块 DOM 由模板一并输出, 在这里藏掉 */
.ly_product_purchase_2 .widgets_attr_box .attr_list .attr_item .quantity { display: none; }
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item:last-child .item_box .item .quantity {
    display: inline-flex;
    align-items: center;
    min-width: 140px;
    box-sizing: border-box;
    border-top: 1px solid #D1D5DB;
    border-bottom: 1px solid #D1D5DB;
    border-radius: 100px;
    overflow: hidden;
    font-size: 16px;
    color: #393F4B;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_btn {
    width: 32px;
    height: 32px;
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1D5DB;
    border-radius: 100px;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_btn.disabled {
    border-color: #E5E7EB;
    background-color: #E5E7EB;
    color: #A1A7B4;
    cursor: not-allowed;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_btn:not(.disabled):hover {
    border-color: #393F4B;
    background-color: #393F4B;
    color: #ffffff;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_value {
    width: 75px;
    height: 32px;
    flex: 1;
    min-width: 0;
    border: 0;
    text-align: center;
    font-size: inherit;
    color: inherit;
    background: none;
    -moz-appearance: textfield;
}
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_value::-webkit-outer-spin-button,
.ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 询盘按钮(样式取全局配置 product 组的"立即询盘", 由模板内联输出具体值) */
.ly_product_purchase_2 .goods_info .g_button { padding: 20px 0; }
.ly_product_purchase_2 .goods_info .g_inquiry_btn {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    text-align: center;
    padding: 0 48px;
    height: 46px;
    line-height: 46px;
    transition: color .2s, background-color .2s, border-color .2s;
}

/* 分享 */
.ly_product_purchase_2 .share_toolbox {
    border-top: 1px solid #E6E7EB;
    padding: 20px 0;
}
.ly_product_purchase_2 .share_toolbox .share_perfix_title {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #222222;
}
.ly_product_purchase_2 .share_toolbox ul { margin: 0; padding: 0; list-style: none; font-size: 0; }
.ly_product_purchase_2 .share_toolbox li { display: inline-block; margin-right: 16px; }
.ly_product_purchase_2 .share_toolbox li:last-child { margin-right: 0; }
.ly_product_purchase_2 .share_toolbox .share_s_btn {
    display: block;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: transform .2s;
}
.ly_product_purchase_2 .share_toolbox .share_s_btn:hover { transform: translateY(-3px); }
/* 图标常态彩色, 悬停转灰: 直接铺 social/color/ 下的品牌图, 灰度交给 filter —— 用 gray/ 那套
   svg 换背景要多加载一次图、切换还会闪, 而 grayscale 是同一张图上的滤镜 */
.ly_product_purchase_2 .share_toolbox .share_s_btn i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--share-icon) no-repeat center / contain;
    transition: filter .2s;
}
.ly_product_purchase_2 .share_toolbox .share_s_btn:hover i { filter: grayscale(1); }

/* 空态: 租户还没有已上架产品(装修时详情页要有东西可排版) */
.ly_product_purchase_2 .detail_empty { padding: 60px 0; color: #999999; text-align: center; }

/* ============================================================
   PC 端三种图册布局
   ============================================================ */
/* 缩略图在左 */
/* align-items:stretch + align-self:stretch 让缩略图条高度跟着主图走(原站写死 min-height:600px,
   主图窄屏缩小后就会露出一截空白) —— 高度有值 .box 才有可裁剪区域, 翻页量才算得出来 */
.ly_product_purchase_2.pc_layout_thumb_left .goods_img { flex-direction: row; align-items: stretch; }
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small {
    width: 90px;
    margin-right: 5px;
    flex: none;
    align-self: stretch;
}
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small ul li { display: block; margin-bottom: 13px; }
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small .switching_btn { left: 50%; transform: translateX(-50%); }
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small .switching_btn.prev { top: 0; }
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small .switching_btn.prev::after {
    transform: translate(-50%, -50%) rotate(-135deg);
}
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small .switching_btn.next { bottom: 0; }
.ly_product_purchase_2.pc_layout_thumb_left .thumb_small .switching_btn.next::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 缩略图在下 / 圆点: 图册整体竖排 */
.ly_product_purchase_2.pc_layout_thumb_bottom .goods_img,
.ly_product_purchase_2.pc_layout_dot .goods_img { display: block; }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_size,
.ly_product_purchase_2.pc_layout_dot .thumb_size { width: 100%; }
/* 横排缩略图条固定一行高(89 图 + 2 边框): 高度写死才有裁剪区域, 否则 ul 撑满、翻页量恒为 0 */
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small { width: 100%; height: 93px; margin: 10px 0 0; }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small ul { white-space: nowrap; }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small ul li { display: inline-block; margin-right: 8px; }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small .switching_btn { top: 50%; transform: translateY(-50%); }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small .switching_btn.prev { left: 0; }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small .switching_btn.prev::after {
    transform: translate(-50%, -50%) rotate(135deg);
}
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small .switching_btn.next { right: 0; }
.ly_product_purchase_2.pc_layout_thumb_bottom .thumb_small .switching_btn.next::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* 圆点切换: 缩略图换成小圆点, 翻页按钮不出现 */
.ly_product_purchase_2.pc_layout_dot .thumb_small { width: 100%; height: auto; text-align: center; margin-top: 15px; }
.ly_product_purchase_2.pc_layout_dot .thumb_small ul { transform: none !important; }
.ly_product_purchase_2.pc_layout_dot .thumb_small ul li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    padding: 0;
    display: inline-block;
    border: 0;
    border-radius: 50%;
    /* 未选中圆点的透明度由配置色值自带(默认 #0000004D 即 30% 透明), 不再用 opacity 写死 */
    background-color: var(--pi-dot-color, #000000);
}
.ly_product_purchase_2.pc_layout_dot .thumb_small ul li.current {
    background-color: var(--pi-dot-active-color, #000000);
}
.ly_product_purchase_2.pc_layout_dot .thumb_small ul li img,
.ly_product_purchase_2.pc_layout_dot .thumb_small ul li::before,
.ly_product_purchase_2.pc_layout_dot .thumb_small ul li::after { display: none; }
.ly_product_purchase_2.pc_layout_dot .thumb_small .switching_btn { display: none; }

/* 编辑态左上角模块名 label 会压住主图顶边(同产品列表-2), 编辑态整体下移一个 label 高度 */
.deco-edit-mode .ly_product_purchase_2 .goods_wrapper { padding-top: 24px; }

/* ============================================================
   移动端: 两种图册布局(缩略图在下 / 圆点), 信息区落到图下方
   ============================================================ */
@media screen and (max-width: 1000px) {
    .ly_product_purchase_2 .goods_wrapper { flex-wrap: wrap; }
    .ly_product_purchase_2 .goods_wrapper .goods_img { display: block; width: 100%; }
    .ly_product_purchase_2 .goods_wrapper .goods_info { width: 100%; margin-top: 15px; }
    .ly_product_purchase_2 .thumb_size { width: 100%; }

    .ly_product_purchase_2 .goods_info .g_name { font-size: 20px; margin-bottom: 12px; }
    .ly_product_purchase_2 .goods_info .g_desc { font-size: 12px; }
    .ly_product_purchase_2 .goods_info .g_params { font-size: 12px; }
    .ly_product_purchase_2 .goods_info .g_price { font-size: 18px; }
    .ly_product_purchase_2 .goods_info .g_inquiry_btn { width: 100%; }

    /* 缩略图在下 */
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small {
        width: 100%;
        height: 93px;
        margin: 10px 0 0;
        text-align: left;
    }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small ul { white-space: nowrap; }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small ul li {
        display: inline-block;
        width: 89px;
        height: 89px;
        margin: 0 8px 0 0;
        padding: 2px;
        border: 1px solid transparent;
        border-radius: 0;
        background: none;
        opacity: 1;
    }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small ul li.current { border-color: #000; }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small ul li img { display: block; }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small .switching_btn {
        display: block;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small .switching_btn.prev { left: 0; right: auto; }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small .switching_btn.prev::after {
        transform: translate(-50%, -50%) rotate(135deg);
    }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small .switching_btn.next { right: 0; left: auto; }
    .ly_product_purchase_2.mobile_layout_thumb_bottom .thumb_small .switching_btn.next::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* 圆点切换 */
    .ly_product_purchase_2.mobile_layout_dot .thumb_small {
        width: 100%;
        height: auto;
        margin-top: 12px;
        text-align: center;
    }
    .ly_product_purchase_2.mobile_layout_dot .thumb_small ul { transform: none !important; white-space: normal; }
    .ly_product_purchase_2.mobile_layout_dot .thumb_small ul li {
        width: 8px;
        height: 8px;
        margin: 0 4px;
        padding: 0;
        display: inline-block;
        border: 0;
        border-radius: 50%;
        /* 同 PC: 透明度由配置色值自带(默认 #0000004D) */
        background-color: var(--pi-mobile-dot-color, #000000);
    }
    .ly_product_purchase_2.mobile_layout_dot .thumb_small ul li.current {
        background-color: var(--pi-mobile-dot-active-color, #000000);
    }
    .ly_product_purchase_2.mobile_layout_dot .thumb_small ul li img,
    .ly_product_purchase_2.mobile_layout_dot .thumb_small ul li::before,
    .ly_product_purchase_2.mobile_layout_dot .thumb_small ul li::after { display: none; }
    .ly_product_purchase_2.mobile_layout_dot .thumb_small .switching_btn { display: none; }

    /* 悬停放大只做 PC: 触屏没有 hover, 图册右侧也没有可盖的空位(信息区已经落到图下方)。
       js 同样会在 innerWidth <= 1000 时不启用, 这里再兜一层, 防止改视口宽度时留下残影 */
    .ly_product_purchase_2 .thumb_big .pi_zoom_lens,
    .ly_product_purchase_2 .goods_img .pi_zoom_panel { display: none !important; }

    /* 抽屉从右侧滑入改成底部弹起 */
    .ly_product_purchase_2 .widgets_attr_popup .right_bar {
        width: 100%;
        height: 85%;
        right: auto;
        top: auto;
        bottom: -100%;
        padding: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        transition: bottom .4s ease-out;
    }
    .ly_product_purchase_2 .widgets_attr_popup.active .right_bar { right: auto; bottom: 0; }
    .ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_info { font-size: 18px; }
    .ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_close { top: 15px; right: 10px; }
    .ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_content { height: calc(100% - 130px); }
    .ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom { padding: 15px; }
    .ly_product_purchase_2 .widgets_attr_popup .right_bar .bar_bottom .bottom_info { font-size: 18px; }
    .ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item:last-child .item_box .item .quantity { min-width: 120px; }
    .ly_product_purchase_2 .widgets_attr_popup .attr_list .attr_item .quantity .quantity_value { width: 56px; }
}

/* ---------- 移动端大图查看器(lightbox) ---------- */
/* 全屏遮罩 + 居中大图 + 横滑切换(复用大图那套 flex+translateX+拖动) + 关闭按钮 + 底部圆点。
   只有移动端会打开(js 按 innerWidth <= 1000 判断), 样式放全局保证 fixed 定位不被布局容器干扰。 */
.ly_product_purchase_2 .pi_lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background-color: rgba(0, 0, 0, .92);
}
.ly_product_purchase_2 .pi_lightbox.active { display: block; }
.ly_product_purchase_2 .pi_lightbox_mask { position: absolute; inset: 0; }
.ly_product_purchase_2 .pi_lightbox_close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    cursor: pointer;
    z-index: 3;
}
.ly_product_purchase_2 .pi_lightbox_close::before,
.ly_product_purchase_2 .pi_lightbox_close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #fff;
}
.ly_product_purchase_2 .pi_lightbox_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ly_product_purchase_2 .pi_lightbox_close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ly_product_purchase_2 .pi_lightbox_view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y;
}
.ly_product_purchase_2 .pi_lightbox_view ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.ly_product_purchase_2 .pi_lightbox_view ul.pi-anim { transition: transform .4s cubic-bezier(.25, .8, .25, 1); }
.ly_product_purchase_2 .pi_lightbox_view ul li {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ly_product_purchase_2 .pi_lightbox_view ul li img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ly_product_purchase_2 .pi_lightbox_dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}
.ly_product_purchase_2 .pi_lightbox_dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .4);
}
.ly_product_purchase_2 .pi_lightbox_dots span.current { background-color: #fff; }