/* 商品页图片区：缩略图、画作舞台、换墙色色卡、规格摘要、View in Room 弹窗。
   原来内联在 tpl_product_info_display.php 里（仅 ?scenetest=1 时输出），
   现在这套布局是商品页默认样式，抽成独立文件走浏览器缓存，不用每次请求
   产品页都重新下载这几百行 CSS。只在 html_header.php 里 product_info 页面
   引入，其它页面不受影响。 */
.scene-product-layout{
    display:flex;
    align-items:flex-start;
    margin-left:-10px;
    margin-right:-10px;
    font-family:'Roboto',Arial,Helvetica,sans-serif;
    font-size:16px;
}
.scene-product-layout button,
.scene-product-layout input,
.scene-product-layout select{font-family:inherit;}
.scene-product-layout > [class*="col-"]{padding-left:10px;padding-right:10px;}
.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{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);
}
.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;}
/* 专属标记：只在右下角放一个半透明圆形小按钮（房子图标=可以看这幅画
   挂在房间里），不做暗色遮罩、不做文字标签，房间预览图保持完全清晰；
   房间名/"Visa i rum" 提示只留在 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;}
.scene-gallery-roomview .roomview-btn .glyphicon{font-size:14px;color:#333;top:0;}
.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;}
.wallcolor-toggle{border:0;background:transparent;padding:3px 0;color:#247c9d;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;
}
.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;}
/* 第一个"原色"色块：棋盘格图案表示"恢复原样/透明"，兼作重置用 */
.wallcolor-swatch.wallcolor-original{background-image:repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%);background-size:8px 8px;}
/* 图片下方规格改为紧凑的两列信息卡，标签和数值有明确层级。 */
.scene-frame-summary{
    grid-area:summary;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin:0!important;
    overflow:hidden;
    text-align:left!important;
    background:#e8e4de;
    border:1px solid #e8e4de;
    border-radius:10px;
}
.scene-frame-summary > .row{
    display:flex;
    align-items:baseline;
    gap:6px;
    min-width:0;
    margin:0;
    padding:11px 13px;
    background:#fbfaf8;
    font-size:15px;
    line-height:1.35;
}
.scene-frame-summary > .row > span:first-child{flex:0 0 auto;color:#777168;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;}
.scene-frame-summary .frame-large{margin-left:auto;white-space:nowrap;font-size:13px;color:#247c9d;}
/* 右侧配置采用画廊式白卡片，减少大面积灰色和粗边框。 */
.scene-layout-config .product-info{
    background:#fff;
    border:1px solid #e7e4de;
    border-radius:14px;
    padding:24px;
    box-shadow:0 8px 28px rgba(37,32,25,.06);
}
.scene-layout-config .product-info > .name{font-size:30px;line-height:1.18;margin:2px 0 18px;color:#38342f;letter-spacing:-.02em;}
.scene-layout-config #attribsOptionsText{border-bottom:1px solid #d9d4cc;padding-bottom:9px;color:#5d574f;font-size:16px;}
.scene-layout-config #productAttributes > .col-md-6{width:100%;float:none;padding-left:0;padding-right:0;}
.scene-layout-config #productAttributes > .framexiao{margin-top:18px;padding:0;}
.scene-layout-config #productAttributes .label{border:0;line-height:1.35;margin-bottom:8px;color:#625c54;font-size:16px;font-weight:500;}
.scene-layout-config .custom-size-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.scene-layout-config .sizemu{height:48px;line-height:48px;border:1px solid #d7d2ca;border-radius:7px;background:#fff;}
.scene-layout-config .sizemu .sizehello{padding-left:14px;padding-right:42px;font-size:15px;}
.scene-layout-config .sizemu .trigger .arrow{top:17px;}
.scene-layout-config .sizemu .back{top:46px;border-color:#d7d2ca;border-radius:0 0 7px 7px;box-shadow:0 8px 20px rgba(30,25,20,.12);overflow:hidden;}
.scene-layout-config .frame-kuangjia{height:310px;overflow:hidden;position:relative;border:1px solid #e1ddd6;border-radius:10px;background:#faf9f7;}
.scene-layout-config .frame-display{
    position:static;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-content:start;
    gap:6px;
    width:100%;
    height:100%;
    padding:8px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#aaa49b transparent;
}
.scene-layout-config .frame-display > td{display:block;width:auto;padding:0;}
.scene-layout-config .FrameDiv{float:none;width:100%;min-width:0;margin:0;padding:6px 2px;border:1px solid transparent;border-radius:7px;background:#fff;}
.scene-layout-config #productAttributes .FrameDiv.active{border-color:#247c9d;box-shadow:0 0 0 1px #247c9d;background:#f0f7f9;}
.scene-layout-config .FrameName{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#4c4741;}
.scene-layout-config .FramePrice{display:block;width:100%;font-size:13px;font-weight:600;color:#2f2b27;}
.scene-layout-config .quantity-container{padding:20px 0 8px!important;border:0!important;}
.scene-layout-config .stock-container{padding:18px 0 0!important;margin:0!important;border:0!important;background:transparent!important;}
.scene-layout-config .stock-container > .product-image-slider.frameinfo{display:none!important;}
@media (max-width:991px){
    .scene-product-layout{display:block;max-width:100%;margin-left:0;margin-right:0;}
    .scene-product-layout > [class*="col-"]{padding-left:0;padding-right:0;}
    .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;}
    .scene-layout-config .product-info{margin-top:16px;padding:18px;border-radius:12px;}
    .scene-layout-config .product-info > #productAttributes{margin:0;padding:12px 0 0;background:transparent;}
    .scene-layout-config .frame-kuangjia{height:292px;}
    .scene-layout-config .frame-display{grid-template-columns:repeat(4,minmax(0,1fr));}
    .scene-layout-config .cartprice_all{margin:0;padding:0;background:transparent;}
    .scene-layout-config .price-container span{height:auto;line-height:1.45;color:#3b3732;}
    .scene-layout-config .borderprice{border-color:#e2ded7;}
    .scene-layout-config .addtocart-info .fa-heart:before{color:#666;}
    .product-top > .visible-sm-block h1.name,
    .product-top > .visible-xs-block h1.name{text-align:left;font-size:24px;line-height:1.2;color:#38342f;margin:0;}
}
@media (max-width:520px){
    .scene-product-layout{font-size:14px;}
    .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 .glyphicon{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 > .row{gap:3px;padding:8px 7px;font-size:11.5px;line-height:1.25;}
    .scene-frame-summary > .row > span:first-child{font-size:9.5px;letter-spacing:.015em;}
    .scene-frame-summary .frame-large{font-size:10.5px;}
    .scene-frame-summary > .row:nth-child(3),
    .scene-frame-summary > .row:nth-child(4){display:block;}
    .scene-frame-summary > .row:nth-child(3) > span,
    .scene-frame-summary > .row:nth-child(4) > span{display:block;}
    .scene-frame-summary > .row:nth-child(3) > span:first-child,
    .scene-frame-summary > .row: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;
    }
}
/* 尺寸选项测试模式下桌面端也收成下拉：复用主题自带的 .sizemu 折叠样式
   （原本这套折叠样式只在 main.css 里 <=992px 生效，这里原样复制到不限宽度，
   包括 .sizemu 本身的方框/背景——之前漏了这条，导致没有 position:relative
   锚点，箭头 .trigger 会飘到别的地方去） */
.sizemu{border:1px solid #d5d5d5;background-color:#fff;color:#000;width:100%;height:38px;-moz-appearance:none;appearance:none;margin-top:0;line-height:38px;z-index:10;position:relative;}
.sizemu .sizehello{display:block;padding-left:10px;}
.sizemu .back{background:#fff;border:1px solid #ccc;position:absolute;width:100%;top:35px;display:none;z-index:20;}
.sizemu .attribute_options{width:100%;height:38px;line-height:38px;padding-left:10px;}
.sizemu .attribute_options input{display:none;}
.sizemu .attribute_options.actived{background:#0092c2;}
.sizemu .attribute_options:hover{background:#379adc;}
.sizemu .trigger{position:absolute;top:0;right:6px;width:34px;height:100%;}
.sizemu .trigger .arrow{position:absolute;top:12px;right:12px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #000;width:0;height:0;overflow:hidden;opacity:1;}
/* 框选项挪到尺寸选项下面（原来两个 col-md-6 并排，这里各自撑满整行自然堆叠） */
#productAttributes > .col-md-6{width:100%;float:none;}
#productAttributes > .framexiao{margin-top:15px;}

/* 通用「View Painting in a Room」：上面的房间缩略图同时是弹窗入口。
   弹窗里的其余房间图在点击之前不进 DOM，避免一次请求全部大图。
   两级导航：第一级房间类型用文字 Tab（客厅/卧室/... 视觉差异小，
   文字比缩略图扫得快）；第二级同一房间的 6 种风格靠缩略图区分
   （这时候比的正是视觉氛围，缩略图才有意义）。 */
/* justify-content 用 flex-start 而不是 center：手机上舞台图+Tab+缩略图
   加起来经常比一屏还高，用 center 的话，内容溢出的部分会分别向上、向下
   两个方向溢出——但 overflow-y:auto 的初始滚动位置只保证对齐得上"正常
   排列（非居中）时的顶部"，一旦真正生效的排列是居中且向上也溢出了，
   初始滚动位置和这个盒子自己的坐标原点就对不齐，绝对定位的关闭按钮
   （top:20px 是相对这个盒子自己的坐标原点算的）就可能落在"当前滚动位置
   看不到、也没法通过下滑够到"的那一截里。改成 flex-start 后内容永远从
   盒子坐标原点（y=0）开始往下排、只会向下溢出，初始滚动位置和坐标原点
   保证对齐，关闭按钮就稳定落在能看到的范围内。 */
.room-view-modal{position:fixed;top:0;left:0;width:100%;height:100%;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;}
.room-view-modal-close{position:absolute;top:20px;right:30px;color:#fff;font-size:32px;line-height:1;cursor:pointer;}
/* 房间类型 Tab 条：横向滚动，选中态高亮；放在大图下面、风格缩略图上面 */
.room-view-tabs{display:flex;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;}
/* 大图按视口高度封顶（留出下面导航条+标签的空间），不然屏幕矮一点
   （常见笔记本 900px 高左右）大图就把导航条挤到看不见的地方去了 */
.room-view-modal-stage{width:min(900px, 62vh, 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）+ 下面一词的氛围标签 */
.room-view-styles{display:flex;gap:12px;margin-top:6px;max-width:900px;width:100%;justify-content:center;flex-wrap:wrap;}
.room-view-style-item{display:flex;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){
    .room-view-modal{padding:12px;overflow-x:hidden;}
    .room-view-modal-close{top:10px;right:14px;}
    /* 62vh 在手机上经常和 Tab 行、缩略图网格加起来超过一屏，得往下滚才能
       看全；收到 46vh 让大多数手机上舞台图+Tab+缩略图不用滚动就能一次看完，
       减少依赖滚动才能看到内容/关闭按钮的情况 */
    .room-view-modal-stage{width:min(46vh,100%);max-width:100%;}
    .room-view-tabs{max-width:100%;}
    .room-view-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:100%;min-width:0;}
    .room-view-style-item{min-width:0;}
    .room-view-style-item img{width:100%;height:auto;aspect-ratio:1/1;}
    .room-view-style-tag{max-width:100%;}
}