/* 商品页图片区：缩略图、画作舞台、换墙色色卡、规格摘要卡、View in Room 弹窗。
   只在 html_header.php 里 product_info 页面引入，其它页面不受影响。

   本站（artrepros）相对源站 kopakonst / peinturepremier 的差异，改动时务必留意：
   1) 本站是 Bootstrap 5，不是 BS3 —— 不再手动模拟 .row 的负 margin 和列内边距，
      直接让 BS5 的 --bs-gutter-x 干活；glyphicon 换成 Bootstrap Icons（.bi）。
   2) 右侧配置区一个字不改 —— 源站那套 .scene-layout-config 白色画廊卡片和 #247c9d
      蓝绿强调色整块没带过来，本站保留自己的橙色主题、#F00 选中框、<s> 划线原价、
      红色 % OFF 徽标。
   3) 规格摘要的行容器本站叫 .detailshow，源站叫 .row。
   4) 强调色不写死：交给 tpl_template_custom_css.php 输出的 $theme_color。
   5) 尺寸下拉 .sizemu 的折叠样式本站 templatecss.css 里已有（且 hover 是橙色
      #D04A0A），源站那份蓝色的没带过来，否则会把本站色调盖掉。 */

/* BS5 的 .row 已经给了 display:flex / flex-wrap / gutter，这里只改对齐方式：
   两列各自按内容高度排，不要拉成等高。 */
.scene-product-layout{
    align-items:flex-start;
}
.scene-gallery-row{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    grid-template-areas:"thumbs stage" "palette palette" "summary summary";
    gap:18px;
    padding:20px;
    background:#fff;
    border:1px solid #e7e4de;
    border-radius:14px;
    box-shadow:0 8px 28px rgba(37,32,25,.07);
}
.scene-gallery-row.scene-gallery-no-thumbs{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "palette" "summary";
}
.scene-gallery{
    grid-area:thumbs;
    width:82px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}
.scene-gallery-main{
    grid-area:stage;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(20px,2.6vw,38px);
    background:#f4f2ee;
    border-radius:12px;
    transition:background-color .22s ease;
    overflow:hidden;
}
.scene-gallery-main .product-image-slider{width:100%;margin:0;padding:0;}
.scene-gallery-main .product_image,
.scene-gallery-main .product_image > a,
.scene-gallery-main #productMainImage{display:flex;align-items:center;justify-content:center;width:100%;}
.scene-gallery-main #ppimg{
    display:block;
    width:auto!important;
    height:auto!important;
    max-width:100%;
    max-height:min(72vh,820px);
    margin:0 auto;
    border-radius:1px!important;
    box-shadow:0 14px 32px rgba(24,20,16,.24),0 3px 8px rgba(24,20,16,.14);
    transition:max-width .22s ease,box-shadow .22s ease,transform .22s ease;
}
.scene-gallery-row.wallcolor-active #ppimg{
    max-width:92%;
    box-shadow:0 20px 42px rgba(20,17,13,.32),0 5px 12px rgba(20,17,13,.18);
}
/* 内框/无框(FramePrice 98/99)的合成图是带透明背景的：画面本身已经自带
   画布厚度黑边，四周没有实体矩形边界，再叠 CSS 投影会顺着透明区域的
   外接矩形画出来，看着像悬空的脏边。这两种选项下去掉投影，让画面直接
   融进背景；其它装饰画框是不透明矩形，投影照常保留。
   第二条选择器是为了盖过上面 .wallcolor-active 那条更强的投影——两者
   基础特异度相同，靠多带两个类名提高特异度，不用 !important。 */
.scene-gallery-main.noframe-mode #ppimg,
.scene-gallery-row.wallcolor-active .scene-gallery-main.noframe-mode #ppimg{
    box-shadow:none;
}
.scene-gallery a{
    display:block;
    border:1px solid #e4e0d9;
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 2px 7px rgba(35,30,24,.08);
    transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.scene-gallery a:hover{border-color:#8f887e;box-shadow:0 5px 14px rgba(35,30,24,.16);transform:translateY(-1px);}
.scene-gallery img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    display:block;
    border:0;
    border-radius:0;
    cursor:pointer;
}
/* 房间缩略图直接用房间照片当封面，并按人工标定位置叠放商品图；
   最后一张保留房子图标，提示这一区可以互动换房间/换风格。 */
.scene-gallery-roomview{aspect-ratio:1/1;background-size:cover;background-position:center;position:relative;overflow:hidden;display:block;}
/* .scene-gallery img 那条通用规则会给缩略图里所有 <img> 加白边+圆角，
   画作贴图不需要这个边框（会显得像裱了张白卡纸），这里重置掉 */
.scene-gallery-roomview .roomview-painting{position:absolute;object-fit:contain;border:none;border-radius:0;}
/* 专属标记：只在右下角放一个半透明圆形小按钮（房子图标=可以看这幅画
   挂在房间里），不做暗色遮罩、不做文字标签，房间预览图保持完全清晰；
   房间名/"View in a Room" 提示只留在 title/aria-label 里，不在视觉上出现 */
.scene-gallery-roomview .roomview-btn{position:absolute;right:6px;bottom:6px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;}
/* 源站用的是 BS3 的 glyphicon（BS4 起已删除），本站是 Bootstrap Icons：
   .bi 不需要源站那条抵消 glyphicon 自带 top:1px 的补偿。 */
.scene-gallery-roomview .roomview-btn .bi{font-size:14px;color:#333;line-height:1;}
.scene-gallery-roomview:hover .roomview-btn{transform:scale(1.1);}
.wallcolor-row{grid-area:palette;min-width:0;padding-top:2px;}
.wallcolor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;}
.wallcolor-title{font-size:13px;font-weight:600;letter-spacing:.01em;color:#49443e;}
/* 不写死颜色：本站主题色由 tpl_template_custom_css.php 从数据库读出后内联输出，
   那份 <style> 里裸 `button` 选择器已经给了 color:$theme_color，这里不要盖掉。 */
.wallcolor-toggle{border:0;background:transparent;padding:3px 0;font-size:12px;line-height:1.2;cursor:pointer;}
.wallcolor-toggle:hover{text-decoration:underline;}
.wallcolor-swatches{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:6px;}
.wallcolor-swatch{
    position:relative;
    aspect-ratio:1/1;
    min-width:0;
    padding:0;
    border-radius:6px;
    cursor:pointer;
    border:1px solid rgba(32,28,23,.14);
    box-shadow:0 1px 2px rgba(32,28,23,.08);
    transition:transform .12s ease,box-shadow .12s ease;
}
/* ===== 必须用 !important 顶住主题 CSS 的两条裸 button 规则 =====
   tpl_template_custom_css.php 里有
       button:hover { background-color:$theme_hover_color !important; color:#FFFFFE !important }
   这条命中的是**任何** <button>，包括这里的色块和"更多颜色"按钮。带了 !important，
   连色块自己的 inline style 都压不住它（inline 不带 !important 时输给样式表的
   !important）—— 不处理的话鼠标划过任意色块都会变成主题橙色，换墙色功能直接失效。
   所以：色块的颜色改走 CSS 变量（模板里输出 style="--wallcolor-swatch-bg:xxx"）
   并在这里用 !important 声明，特异度和 !important 都赢过裸 button。 */
.wallcolor-swatch,
.wallcolor-swatch:hover,
.wallcolor-swatch:focus,
.wallcolor-swatch:active{
    background-color:var(--wallcolor-swatch-bg,transparent)!important;
    color:inherit!important;
}
.wallcolor-toggle,
.wallcolor-toggle:hover,
.wallcolor-toggle:focus,
.wallcolor-toggle:active{
    background-color:transparent!important;
    color:inherit!important;
}
.wallcolor-swatch:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(32,28,23,.18);}
.wallcolor-swatch.is-selected:after{content:"";position:absolute;inset:3px;border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.48);}
.wallcolor-swatch.wallcolor-advanced{display:none;}
.wallcolor-swatches.is-expanded .wallcolor-swatch.wallcolor-advanced{display:block;}
/* 第一个"原色"色块：棋盘格图案表示"恢复原样/透明"，兼作重置用。
   background-image 是长手属性，不会被上面那条 background-color 覆盖，
   但要带 !important 才顶得住主题 CSS 的 button:hover 背景。 */
.wallcolor-swatch.wallcolor-original{
    background-image:repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%)!important;
    background-size:8px 8px;
}
/* 图片下方规格改为紧凑的两列信息卡，标签和数值有明确层级。
   本站 .frameinfo 自带 padding:20px 25px / margin:25px 0 0，在网格容器上都要清掉。 */
.scene-frame-summary{
    grid-area:summary;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin:0!important;
    padding:0!important;
    overflow:hidden;
    text-align:left!important;
    background:#e8e4de;
    border:1px solid #e8e4de;
    border-radius:10px;
}
/* 源站这里的行容器是 .row，本站是 .detailshow */
.scene-frame-summary > .detailshow{
    display:flex;
    align-items:baseline;
    gap:6px;
    min-width:0;
    margin:0;
    padding:11px 13px;
    background:#fbfaf8;
    font-size:15px;
    line-height:1.35;
}
/* 标签色沿用本站 .detailshow span:first-of-type 的 #1d0000（源站是 #777168），
   只借源站的小号大写排版，不改本站的字色。 */
.scene-frame-summary > .detailshow > span:first-child{flex:0 0 auto;color:#1d0000;font-size:12px;text-transform:uppercase;letter-spacing:.035em;}
.scene-frame-summary .framename,
.scene-frame-summary .framedes,
.scene-frame-summary .insize,
.scene-frame-summary .outsize{min-width:0;color:#2f2b27;font-weight:600;}
/* 不给 color —— 本站 a.frame-large 已经从 tpl_template_custom_css.php 拿主题色，
   这条选择器特异度更高，写了 color 就会把主题色盖掉。 */
.scene-frame-summary .frame-large{margin-left:auto;white-space:nowrap;font-size:13px;}
@media (max-width:991px){
    /* BS5 的 col-md-6 在 768–991px 区间是 width:50%，不显式压成 100% 会挤成两窄栏 */
    .scene-product-layout{display:block;}
    .scene-product-layout > [class*="col-"]{width:100%;}
    .scene-gallery-row{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:"stage" "thumbs" "palette" "summary";
        gap:13px;
        padding:12px;
        border-radius:12px;
    }
    .scene-gallery-main{padding:20px 14px;border-radius:9px;}
    .scene-gallery-main #ppimg{max-height:64vh;}
    .scene-gallery-row.wallcolor-active #ppimg{max-width:90%;}
    .scene-gallery{
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:7px;
        overflow:visible;
        padding:1px;
    }
    .scene-gallery a{min-width:0;width:100%;}
    .wallcolor-swatches{grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;}
}
@media (max-width:520px){
    .scene-gallery-row{gap:10px;padding:10px;}
    .scene-gallery{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;}
    .scene-gallery-roomview .roomview-btn{right:4px;bottom:4px;width:26px;height:26px;}
    .scene-gallery-roomview .roomview-btn .bi{font-size:12px;}
    .wallcolor-heading{margin-bottom:5px;}
    .wallcolor-title{font-size:12px;}
    .wallcolor-toggle{font-size:11px;}
    .wallcolor-swatches{grid-template-columns:repeat(18,minmax(0,1fr));gap:3px;}
    .wallcolor-swatch{border-radius:4px;}
    .wallcolor-swatch.is-selected:after{inset:2px;border-width:1px;border-radius:2px;}
    .scene-frame-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
    .scene-frame-summary > .detailshow{gap:3px;padding:8px 7px;font-size:11.5px;line-height:1.25;}
    .scene-frame-summary > .detailshow > span:first-child{font-size:9.5px;letter-spacing:.015em;}
    .scene-frame-summary .frame-large{font-size:10.5px;}
    .scene-frame-summary > .detailshow:nth-child(3),
    .scene-frame-summary > .detailshow:nth-child(4){display:block;}
    .scene-frame-summary > .detailshow:nth-child(3) > span,
    .scene-frame-summary > .detailshow:nth-child(4) > span{display:block;}
    .scene-frame-summary > .detailshow:nth-child(3) > span:first-child,
    .scene-frame-summary > .detailshow:nth-child(4) > span:first-child{margin-bottom:3px;}
    .scene-frame-summary .insize,
    .scene-frame-summary .outsize{
        white-space:nowrap;
        font-size:clamp(9px,2.75vw,10.5px);
        letter-spacing:-.015em;
    }
}

/* 通用「View Painting in a Room」：上面的房间缩略图同时是弹窗入口。
   弹窗里的其余房间图在点击之前不进 DOM，避免一次请求全部大图。
   两级导航：第一级房间类型用文字 Tab（客厅/卧室/... 视觉差异小，
   文字比缩略图扫得快）；第二级同一房间的 6 种风格靠缩略图区分
   （这时候比的正是视觉氛围，缩略图才有意义）。
   弹窗本身零 Bootstrap JS 依赖：不是 .modal()，不是 data-bs-toggle="tab"，
   不是 BS carousel —— 全是手写 display:flex/none + 事件委托 + 原生
   scroll-snap，所以本站的 BS5 不构成障碍。 */
/* justify-content 用 flex-start 而不是 center：手机上舞台图+Tab+缩略图
   加起来经常比一屏还高，用 center 的话，内容溢出的部分会分别向上、向下
   两个方向溢出——但 overflow-y:auto 的初始滚动位置只保证对齐得上"正常
   排列（非居中）时的顶部"，一旦真正生效的排列是居中且向上也溢出了，
   初始滚动位置和这个盒子自己的坐标原点就对不齐，绝对定位的关闭按钮
   （top:20px 是相对这个盒子自己的坐标原点算的）就可能落在"当前滚动位置
   看不到、也没法通过下滑够到"的那一截里。改成 flex-start 后内容永远从
   盒子坐标原点（y=0）开始往下排、只会向下溢出，初始滚动位置和坐标原点
   保证对齐，关闭按钮就稳定落在能看到的范围内。 */
/* 四边归零(inset)而不是 width/height:100%：iOS Safari 上工具栏收起时可见
   区域会变大，但 height:100% 还停留在工具栏展开时算好的那个较小值，弹窗
   底部就盖不住、露出后面的产品配置区。四边都钉死则不涉及任何长度换算，
   浏览器每次排版都用它当下认定的可视区域重新算这个盒子。
   min-height 用 100dvh 兜一层：万一某个浏览器把 inset 也算小了，dvh 会
   跟着工具栏收放实时更新，取两者较大的那个，只多不少。 */
.room-view-modal{position:fixed;top:0;right:0;bottom:0;left:0;min-height:100dvh;background:rgba(0,0,0,.85);z-index:10000000;display:none;align-items:center;justify-content:flex-start;flex-direction:column;padding:20px;overflow-y:auto;}
/* 用 fixed 而不是 absolute：这个按钮的定位祖先 .room-view-modal 自己是
   overflow-y:auto 的滚动容器，absolute 定位的子元素会跟着内容一起滚走
   ——内容一超一屏、用户往下滑，关闭按钮就滑出可视区域不见了。fixed 让
   它固定在屏幕上，不管弹窗内容滚到哪都在。 */
/* 加一个半透明深色圆底：之前是纯白 × 直接压在房间照片上，右上角一旦是
   大片浅色（白墙、白床品）就等于隐形，看着像"关闭按钮不见了"。有了这个
   底盘，不管背后是什么图都能看清。 */
.room-view-modal-close{position:fixed;top:20px;right:30px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:28px;line-height:40px;text-align:center;cursor:pointer;z-index:2;}
/* 房间类型 Tab 条：横向滚动，选中态高亮；放在大图下面、风格缩略图上面 */
/* flex-shrink:0 很关键：.room-view-modal 是 flex-direction:column，纵向
   就是主轴，内容一旦超过容器高度（手机上很常见），所有没锁 flex-shrink
   的子项都会被压扁——实测这一行会从 43px 被挤到 8px、Tab 药丸从 35px 挤
   到 16px，文字溢出后和下面的缩略图叠在一起，看着就像"房间分类被遮挡"。
   锁死不让压缩，超出的部分老老实实交给容器滚动。 */
.room-view-tabs{display:flex;flex-shrink:0;gap:6px;overflow-x:auto;max-width:900px;width:100%;margin-top:12px;padding-bottom:8px;scrollbar-width:none;}
/* 居中只在肯定放得下的宽屏幕生效；窄屏如果 6 个 Tab 超宽还要横向
   滚动，justify-content:center 配 overflow 在部分浏览器会导致
   最前面的 Tab 划不回去，所以窄屏保持默认靠左、可以完整滚动 */
@media (min-width:768px){ .room-view-tabs{justify-content:center;} }
.room-view-tabs::-webkit-scrollbar{display:none;}
.room-view-tab{flex:0 0 auto;padding:8px 16px;border-radius:20px;background:rgba(255,255,255,.12);color:#ddd;font-size:13px;white-space:nowrap;cursor:pointer;}
.room-view-tab.active{background:#fff;color:#222;font-weight:600;}
/* 大图按可用空间倒推，而不是拍脑袋写 62vh：Tab 行和风格缩略图那一排在
   桌面端是固定高度（约 199px：上下内边距 40 + Tab 55 + 缩略图 104），
   直接用 100vh 减掉它就是大图能占的最大高度。原来写死 62vh 太保守，
   1440x900 上只有 558px、底下白白空出 163px；改成 calc 之后同样屏幕能到
   700px（+25%）且仍然不用滚动。900px 是上限，避免超大屏上大得失衡。 */
.room-view-modal-stage{width:min(900px, calc(100vh - 200px), 92vw);max-width:900px;aspect-ratio:1/1;position:relative;flex:0 0 auto;border-radius:4px;overflow:hidden;}
/* 横向滚动的风格轮播：每张 slide 是一个完整的房间+画作组合，原生滑动
   自带 snap 吸附，触屏滑动/触控板都是浏览器原生手感，不用自己算触摸 */
.room-view-track{width:100%;height:100%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.room-view-track::-webkit-scrollbar{display:none;}
.room-view-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;height:100%;background-size:cover;background-position:center;}
/* 用绝对像素定位、按画作真实长宽比算出的框贴合，阴影才会贴着画本身的边缘，
   而不是贴着（可能因为画比例和挂画区域比例不一样而留白的）整个标定框 */
.room-view-painting{position:absolute;box-shadow:0 3px 14px rgba(0,0,0,.45);}
/* 标题挪到大图内的半透明角标，不占额外的纵向空间 */
.room-view-label{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;padding:5px 10px;border-radius:5px;font-size:12px;max-width:80%;z-index:2;}
/* 风格缩略图（桌面一行 5 个，80px）+ 下面一词的氛围标签 */
/* 同上，flex-shrink:0 防止内容超高时这一块被纵向压扁 */
.room-view-styles{display:flex;flex-shrink:0;gap:12px;margin-top:6px;max-width:900px;width:100%;justify-content:center;flex-wrap:wrap;}
.room-view-style-item{display:flex;flex-shrink:0;flex-direction:column;align-items:center;gap:4px;}
.room-view-style-item img{width:80px;height:80px;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer;opacity:.65;display:block;}
.room-view-style-item img:hover{opacity:1;}
.room-view-style-item img.active{border-color:#fff;opacity:1;}
.room-view-style-tag{color:#ccc;font-size:10px;text-align:center;max-width:82px;}
/* 手机端：改成 3 个一排的网格，缩略图跟着格子宽度走，触控目标更大 */
@media (max-width:767px){
    /* 顶部原来留了 60px 安全缓冲区，那是"地址栏会盖住内容"时期的权宜之计；
       弹窗改成四边归零之后已经能稳定盖满可视区域，不需要再牺牲这么多纵向
       空间，收回到 20px，省下的 40px 留给下面的缩略图。 */
    .room-view-modal{padding:12px;padding-top:20px;overflow-x:hidden;}
    /* 之前 top:52px 配 60px 缓冲区，按钮正好骑在房间图上边缘（一半在图外
       一半在图内）看着不利索。现在压到图片内部的右上角，配上深色圆底就是
       一个明确"贴在图上"的关闭按钮。 */
    .room-view-modal-close{top:32px;right:20px;}
    /* 舞台图自适应，而不是写死一个 vh：缩略图那两排是按宽度算的（3 列、
       4:3），高度只跟屏幕宽度有关、不随屏幕高度缩，所以固定 vh 一定会在
       某个高度上顶出溢出。这里直接按"视口高度 - 缩略图区实际占用 - Tab 和
       内边距"倒推舞台图能有多大：50vw 是两排缩略图的高度（每排约 25vw），
       140px 是 Tab 行+上下内边距+标签文字的固定开销。52vh 是上限，避免在
       特别高的屏幕上大到失衡。实测 560/620/780 三种高度都不用滚动就能看
       全，且屏幕越高图越大。 */
    .room-view-modal-stage{width:min(52vh, calc(100vh - 50vw - 140px), 100%);max-width:100%;}
    .room-view-tabs{max-width:100%;margin-top:8px;padding-bottom:6px;}
    .room-view-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;max-width:100%;min-width:0;}
    .room-view-style-item{min-width:0;}
    /* 缩略图从正方形改成 4:3：房间照片本来就是横构图，4:3 反而更贴近原图
       比例（1:1 会把上下裁掉）；每张矮 ~29px，两排就省下 ~58px，配合上面
       收回的缓冲区，第二排缩略图和下面的文字标签不用下拉就能看到。 */
    .room-view-style-item img{width:100%;height:auto;aspect-ratio:4/3;}
    .room-view-style-tag{max-width:100%;}
}