.frame-white{--frame-color:#eeede7;--frame-light:#fffefb}
.framed .mat{background:var(--mat-color)}
.framed.mat-none .mat{padding:0;background:transparent;box-shadow:none}
.placeholder-art p{color:inherit}
.frame-option,.mat-option{border-radius:0}
.mat-options{display:flex;flex-wrap:wrap;gap:10px}
.mat-option{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 15px;border:1px solid var(--line);background:transparent;font-size:13px}
.mat-option[aria-pressed="true"]{border-color:var(--ink);background:var(--sage)}
.mat-option .mat-swatch{height:22px;width:22px;flex-shrink:0;background:var(--swatch);border:1px solid #0002}
.scale-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px}
.scale-options button small{font-size:11px;white-space:nowrap;color:var(--muted)}
.size-caption{font-size:12px;line-height:1.65;margin-top:12px}
.material-summary{border-top:1px solid var(--line);padding-top:16px;margin-top:24px;display:grid;gap:7px;font-size:12px}
.material-summary a{width:fit-content;font-size:12px}
.purchase-panel{border:1px solid var(--line);background:var(--paper);padding:20px;margin-top:24px}
.purchase-panel p{font-size:12px;line-height:1.7;margin-top:8px}
.purchase-panel .purchase-title{color:var(--ink);font-size:17px;font-family:var(--serif);margin-top:0}
.purchase-panel .button{display:flex;width:100%;margin-top:13px;min-height:48px}
.purchase-panel .checkout-placeholder{opacity:1;background:#e4e7dc;color:#53624e;border-color:#d3d9c9;cursor:default}
.purchase-panel .purchase-price{font-size:23px;color:var(--ink);margin:0 0 10px}
.legacy-note{font-size:12px;margin-top:12px;line-height:1.7}
.materials-layout{padding:0 6% 70px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 70px}
.materials-layout article{border-top:1px solid var(--line);padding-top:27px;min-width:0}
.materials-layout h2{font-size:31px;margin-bottom:18px}
.materials-layout p{font-size:14px;line-height:1.8;margin-bottom:14px}
.materials-layout .text-link{margin-top:8px}
.finish-samples{display:flex;flex-wrap:wrap;gap:22px;margin:22px 0}
.finish-sample{font-size:12px;display:flex;gap:10px;align-items:center}
.finish-sample>span{width:28px;height:28px;background:var(--swatch);border:1px solid #0002}
.format-table{width:100%;border-collapse:collapse;font-size:13px;margin:20px 0}
.format-table th,.format-table td{text-align:left;padding:13px 10px 13px 0;border-bottom:1px solid var(--line);font-weight:400}
.format-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.materials-note{padding:24px;background:var(--paper);font-size:13px}
.materials-note p:last-child{margin-bottom:0}
.materials-cta{margin:0 6% 60px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding-top:28px}
.materials-cta p{font-size:14px;max-width:430px}
@media(max-width:760px){
  .mat-option{min-height:48px;flex:1 1 85px;min-width:0;justify-content:center;gap:7px;font-size:14px;padding:10px 8px}
  .scale-options button{min-height:66px}
  .scale-options button small{font-size:11px}
  .purchase-panel{padding:18px}
  .purchase-panel p,.size-caption{font-size:13px}
  .material-summary{font-size:13px}
  .material-summary a{font-size:13px;min-height:44px}
  .materials-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:40px}
  .materials-layout h2{font-size:29px}
  .materials-layout p{font-size:15px}
  .materials-layout .text-link{min-height:44px}
  .materials-cta{align-items:stretch;flex-direction:column}
  .materials-cta .button{min-height:48px}
  .format-table{font-size:13px}
  .format-table th{font-size:10px}
  .finish-sample{font-size:13px}
}

/* Original Creativehub texture images. Keep the existing frame and mat geometry. */
.framed.supplier-frame{position:relative;--frame-width:12px;background:transparent;box-shadow:12px 19px 25px #26392325,2px 4px 5px #28341d26}
.supplier-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border:var(--frame-width) solid transparent;border-image:var(--frame-texture) var(--frame-slice) / 1 / 0 round}
.art-card .supplier-frame,.saved-item .supplier-frame{--frame-width:8px;box-shadow:6px 8px 14px #26392320,1px 2px 3px #28341d26}
.frame-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.frame-options .frame-option{width:auto;height:auto;min-height:76px;min-width:0;padding:8px 4px;gap:6px;border:1px solid var(--line)}
.frame-options .frame-option[aria-pressed=true]{border-color:var(--ink);background:var(--sage)}
.frame-option-name{font-size:12px;line-height:1.25}
.frame-swatch.texture-swatch,.finish-sample>.frame-swatch.texture-swatch{display:block;width:38px;height:38px;border:7px solid transparent;border-image:var(--frame-texture) var(--frame-slice) / 1 / 0 round;background:transparent;flex-shrink:0}
.frame-source-note{font-size:12px;line-height:1.65;color:var(--muted);margin-top:10px}
.finish-samples{gap:16px 24px}
@media(max-width:760px){
  .hero-scene .supplier-frame,.product-view .product-art-stage>.supplier-frame{--frame-width:8px}
  .five-grid .supplier-frame,.saved-item .supplier-frame{--frame-width:5px}
  .frame-options{gap:8px}
  .frame-options .frame-option{min-height:78px}
  .frame-option-name{font-size:13px}
  .frame-source-note{font-size:13px}
}

/* Mat swatches and artwork surrounds share the supplier colour data. */
.mat-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mat-option{min-width:0;justify-content:flex-start;padding:10px;gap:8px}
.mat-option[data-mat="none"]{grid-column:1/-1}
.mat-source-note{font-size:12px;line-height:1.65;color:var(--muted);margin-top:12px}
.mat-swatch.no-mat-swatch,.finish-sample>.mat-swatch.no-mat-swatch{background:linear-gradient(135deg,transparent calc(50% - .6px),var(--muted) 50%,transparent calc(50% + .6px))}
@media(max-width:760px){
  .mat-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mat-option{min-height:48px;justify-content:flex-start;padding:10px 12px}
  .mat-source-note{font-size:13px}
}