.frame-preview {
  --frame-size: 30px;
  --mat-size: 40px;
  --material: url('../img/material-black.svg');
  --texture-size: 220px;
  --edge-color: #151515;
  --depth-size: 9px;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  background: #fff;
  filter: drop-shadow(0 3px 2px rgba(24,20,17,.15)) drop-shadow(0 18px 20px rgba(24,20,17,.16));
  transition: .25s transform, .25s width, .25s height;
}
.frame-preview::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 3px;
  top: 4px;
  right: -4px;
  bottom: -5px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--edge-color) 55%,transparent),color-mix(in srgb,var(--edge-color) 20%,transparent));
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--frame-size) calc(100% - var(--frame-size)),calc(100% - var(--frame-size)) calc(100% - var(--frame-size)),calc(100% - var(--frame-size)) var(--frame-size),var(--frame-size) var(--frame-size));
  opacity: .42;
  filter: blur(.6px);
}
.frame-preview.is-3d {
  transform: rotateY(-11deg) rotateX(4deg) translateZ(8px);
  filter: drop-shadow(25px 28px 20px rgba(16,38,59,.24));
}
.frame-rail { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.frame-rail span {
  position: absolute;
  display: block;
  background-image: linear-gradient(180deg,rgba(255,255,255,.32),transparent 24%,rgba(0,0,0,.10) 76%,rgba(0,0,0,.30)),var(--material);
  background-repeat: no-repeat, repeat-x;
  /* Tekstur selalu memenuhi penampang dan diulang hanya sepanjang lis.
     Lebarnya tetap mengikuti pengaturan Skala repeat di material. */
  background-size: 100% 100%, var(--texture-size) 100%;
  background-position: center, left center;
  background-color: var(--edge-color);
}
.rail-top,.rail-bottom { left: 0; width: 100%; height: var(--frame-size); }
.rail-top { top: 0; clip-path: polygon(0 0,100% 0,calc(100% - var(--frame-size)) 100%,var(--frame-size) 100%); }
.rail-bottom { bottom: 0; clip-path: polygon(var(--frame-size) 0,calc(100% - var(--frame-size)) 0,100% 100%,0 100%); }
.rail-top span,.rail-bottom span { inset: 0; }
.rail-bottom span { transform: rotate(180deg); }
.rail-left,.rail-right { top: 0; height: 100%; width: var(--frame-size); }
.rail-left { left: 0; clip-path: polygon(0 0,100% var(--frame-size),100% calc(100% - var(--frame-size)),0 100%); }
.rail-right { right: 0; clip-path: polygon(100% 0,100% 100%,0 calc(100% - var(--frame-size)),0 var(--frame-size)); }
.rail-left span,.rail-right span { width: 100vh; height: var(--frame-size); left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-90deg); }
.rail-right span { transform: translate(-50%,-50%) rotate(90deg); }
.frame-preview.texture-edge-outer .rail-top span { transform: scaleY(-1); }
.frame-preview.texture-edge-outer .rail-bottom span { transform: rotate(180deg) scaleY(-1); }
.frame-preview.texture-edge-outer .rail-left span { transform: translate(-50%,-50%) rotate(90deg); }
.frame-preview.texture-edge-outer .rail-right span { transform: translate(-50%,-50%) rotate(-90deg); }
.frame-preview.profile-flat .frame-rail span { background-image: linear-gradient(180deg,rgba(255,255,255,.10),transparent 48%,rgba(0,0,0,.15)),var(--material); }
.frame-preview.profile-rounded .frame-rail span { background-image: linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.08) 30%,rgba(0,0,0,.08) 65%,rgba(0,0,0,.38)),var(--material); }
.frame-preview .matboard-layer {
  position: absolute;
  z-index: 1;
  inset: var(--frame-size);
  width: auto;
  height: auto;
  padding: var(--mat-size);
  background: var(--mat-color,#fff);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 3px 8px rgba(0,0,0,.18);
}
.frame-preview .matboard-layer::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: var(--mat-size);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 2px 3px rgba(30,24,16,.32), inset 0 1px 2px rgba(30,24,16,.28);
}
.frame-preview .matboard-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: repeating-linear-gradient(22deg,transparent 0 3px,rgba(90,75,55,.035) 4px);
}
.frame-preview.no-matboard .matboard-layer { background:transparent; box-shadow:none; }
.frame-preview.no-matboard .matboard-layer::before,
.frame-preview.no-matboard .matboard-layer::after { display:none; }
.frame-preview .artwork-layer { z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.frame-preview .placeholder-art[hidden],.frame-preview .artwork-layer img[hidden] { display:none; }
.frame-preview.has-glass .glass-overlay {
  display: block;
  background: linear-gradient(125deg,transparent 0 34%,rgba(255,255,255,.08) 35% 42%,transparent 43% 61%,rgba(255,255,255,.22) 62% 67%,transparent 68%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 25%);
}
.preview-views { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:12px; }
.preview-view { position:relative; z-index:5; appearance:none; border:1px solid var(--line); border-radius:14px; padding:7px; background:#fff; color:#596775; cursor:pointer; text-align:left; transition:.18s ease; touch-action:manipulation; }
.preview-view:hover,.preview-view.is-active { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,174,239,.10); color:var(--navy); }
.preview-view strong { display:block; margin-top:5px; font-size:11px; white-space:nowrap; }
.view-mini { position:relative; display:block; height:48px; border-radius:8px; overflow:hidden; background:#e9edef; }
.view-mini i { position:absolute; display:block; width:24px; height:31px; border:4px solid #25272a; background-color:#f7f1e7; background-position:center; background-size:cover; background-repeat:no-repeat; box-shadow:1px 2px 3px rgba(20,17,14,.16),4px 8px 12px rgba(20,17,14,.14); }
.view-front i { left:50%; top:50%; transform:translate(-50%,-50%); }
.view-wall { background:linear-gradient(180deg,#eee9e0 0 72%,#c9ad8e 73%); }
.view-wall i { left:50%; top:44%; transform:translate(-50%,-50%) scale(.8); }
.view-detail i { width:58px; height:70px; left:27px; top:18px; transform:rotate(-8deg); border-width:7px; }
.view-side i { left:50%; top:50%; transform:translate(-50%,-50%) rotateY(-48deg); box-shadow:5px 2px 0 #262626,9px 7px 10px rgba(20,17,14,.18); }
.preview-stage { position:relative; isolation:isolate; transition:.25s background; }
.preview-stage::before,.preview-stage::after { content:""; position:absolute; pointer-events:none; opacity:0; transition:.25s opacity; }
.preview-stage[data-view="wall"] { width:100%; max-width:none; background:linear-gradient(180deg,#eee9e0 0 77%,#c7aa87 77% 80%,#ad8b68 80%); border-radius:2px; box-shadow:inset 0 0 35px rgba(67,54,40,.10); }
.preview-stage[data-view="wall"]::before { opacity:1; left:8%; bottom:20%; width:18%; height:30%; border-radius:50% 50% 4px 4px; background:linear-gradient(90deg,#8c755f,#b49a7e); box-shadow:0 8px 16px rgba(0,0,0,.14); }
.preview-stage[data-view="wall"]::after { opacity:1; right:7%; bottom:20%; width:14%; height:20%; background:radial-gradient(ellipse at 50% 100%,#53704c 0 28%,transparent 30%),radial-gradient(ellipse at 25% 65%,#6d8b61 0 22%,transparent 24%),linear-gradient(90deg,transparent 42%,#8f6748 43% 57%,transparent 58%); }
.preview-stage.has-catalog-style::before,.preview-stage.has-catalog-style::after{opacity:0!important}
.preview-stage[data-view="wall"] .frame-preview { transform:scale(.72); filter:drop-shadow(0 2px 2px rgba(36,28,20,.16)) drop-shadow(7px 14px 13px rgba(36,28,20,.18)); }
.preview-stage[data-view="detail"] { overflow:hidden; border-radius:18px; background:#dfe3e5; }
.preview-stage[data-view="detail"] .frame-preview { transform:scale(1.65) translate(-14%,14%); transform-origin:top right; }
.preview-stage[data-view="detail"] .matboard-layer { box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),inset 0 5px 12px rgba(0,0,0,.24); }
@media(max-width:640px){.preview-views{grid-template-columns:repeat(2,1fr)}.preview-view strong{font-size:12px}.preview-stage[data-view="detail"] .frame-preview{transform:scale(1.35) translate(-8%,12%)}}

.ready-preview-panel { min-width:0; }
.ready-preview-card { min-height:560px; }
.ready-preview-stage { height:500px; }
.ready-frame { flex:0 0 auto; }
.product-generated-stage { display:grid; place-items:center; padding:18px; background:linear-gradient(145deg,#edf1f3,#f7f3ec); }
.catalog-frame { height:min(78%,210px); width:auto; max-width:82%; filter:drop-shadow(0 2px 2px rgba(24,20,17,.13)) drop-shadow(0 10px 10px rgba(24,20,17,.13)); }
.catalog-frame:not(.no-matboard) .matboard-layer { box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),inset 0 2px 4px rgba(0,0,0,.14); }
.catalog-frame:not(.no-matboard) .matboard-layer::before { box-shadow:0 0 0 1px rgba(255,255,255,.65),0 1px 2px rgba(30,24,16,.25); }
.catalog-frame .artwork-layer img { object-fit:cover; }
@media(max-width:980px){.ready-preview-card{min-height:520px}.ready-preview-stage{height:470px}}
@media(max-width:640px){.ready-preview-card{min-height:390px}.ready-preview-stage{height:360px}.ready-frame{max-width:88%;max-height:88%}.catalog-frame{height:min(75%,180px)}}

/* Customizer preview panel scrolls with page (no sticky). */
.page-custom .preview-panel {
  position: static;
  top: auto;
  z-index: auto;
  padding: 0;
  background: transparent;
}

/* Customizer material selector */
.custom-layout .material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.custom-layout .material-tile { display:block; height:100%; padding:9px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.custom-layout .material-image { position:relative; display:block; height:76px; overflow:hidden; border-radius:11px; background:#f2f4f5; }
.custom-layout .material-image img { width:100%; height:100%; border:0; border-radius:0; object-fit:cover; }
.custom-layout .material-check { position:absolute; top:7px; right:7px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:var(--cyan); box-shadow:0 3px 8px rgba(0,90,130,.25); opacity:0; transform:scale(.7); transition:.18s ease; }
.custom-layout .material-copy { display:block; padding:10px 2px 2px; }
.custom-layout .material-copy strong { margin:0; color:var(--navy-2); font-size:14px; line-height:1.3; }
.custom-layout .material-dimensions { display:block; margin-top:5px; color:#5c6a76; font-size:12px; line-height:1.45; }
.custom-layout .material-copy small { display:block; margin-top:2px; color:var(--muted); font-size:12px; }
.custom-layout .material-specs { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.custom-layout .material-specs em { display:inline-flex; padding:4px 7px; border-radius:999px; background:#f0f4f6; color:#52616e; font-size:11px; font-style:normal; font-weight:750; white-space:nowrap; }
.custom-layout .material-option input:checked + .material-tile { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,174,239,.11); }
.custom-layout .material-option input:checked + .material-tile .material-check { opacity:1; transform:scale(1); }
.custom-layout .material-option input:focus-visible + .material-tile { outline:3px solid rgba(0,174,239,.22); outline-offset:2px; }
.custom-layout .total-card { position:static; bottom:auto; margin-top:4px; }
.quick-size-field { margin:0 0 16px; }
.matboard-controls { display:grid; gap:20px; }
.mat-range-field { padding-top:2px; }
.range-label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.range-label output { color:var(--navy); font-size:14px; font-weight:900; }
.custom-layout input[type="range"] { width:100%; padding:0; border:0; box-shadow:none; accent-color:var(--cyan); cursor:pointer; }
.mat-width-editor { display:grid; grid-template-columns:minmax(0,1fr) 104px; align-items:center; gap:14px; }
.mat-manual-input input { padding-right:38px; }
.preview-media { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:start; gap:10px; }
.preview-media > .preview-views { grid-template-columns:1fr; align-content:start; gap:8px; margin:0; }
.preview-media > .preview-views .preview-view { padding:5px; border-radius:11px; }
.preview-media > .preview-views .view-mini { height:66px; }
.preview-media > .preview-card { min-width:0; }
@media(max-width:640px){.custom-layout .material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-layout .material-tile{display:block}.custom-layout .material-image{height:70px}.custom-layout .material-copy{padding:9px 1px 2px}.custom-layout .material-copy strong{font-size:13px}.custom-layout .material-dimensions{font-size:11px}.custom-layout .size-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mat-width-editor{grid-template-columns:minmax(0,1fr) 96px;gap:10px}.preview-media{display:flex;flex-direction:column;gap:10px}.preview-media>.preview-card{order:1;width:100%}.preview-media>.preview-views{order:2;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.preview-media>.preview-views .view-mini{height:54px}}
.detail-info .material-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-info .material-tile{display:block;height:100%;padding:9px;border:1px solid var(--line);border-radius:16px;overflow:hidden}.detail-info .material-image{display:block;position:relative;height:76px;border-radius:11px;overflow:hidden;background:#eef2f4}.detail-info .material-image img{width:100%;height:100%;object-fit:cover}.detail-info .material-check{position:absolute;right:7px;top:7px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:#fff;font-size:12px;font-weight:900;opacity:0;transform:scale(.7);transition:.18s}.detail-info .material-copy{display:block;padding:9px 2px 2px}.detail-info .material-copy strong{margin:0 0 3px;font-size:13px}.detail-info .material-dimensions{display:block;color:var(--muted);font-size:11px;line-height:1.35}.detail-info .material-option input:checked+.material-tile{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,174,239,.11)}.detail-info .material-option input:checked+.material-tile .material-check{opacity:1;transform:scale(1)}