/* Preview layout: a photographic room and a readable, keyboard-operable studio panel. */
.preview-page { --paper:#f7f3eb; --ink:#302f23; --muted:#666258; --line:#d7d2c7; --main:#eeeee1; --button:#505638; --field-border:#858477; background:radial-gradient(ellipse at 40% 0,#fffaf0 0,transparent 55%),var(--paper); }
.preview-page[data-palette="rose"] { --paper:#faf5f0; --ink:#3d332d; --muted:#70645c; --line:#dfd4ca; --main:#f2e5df; --button:#655044; --field-border:#8c7c70; }
.preview-page .page { width:min(1570px,calc(100% - 64px)); }
.preview-page header { padding:21px 0 25px; }
.preview-page .workspace { grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr); gap:26px; }
.preview-page .scene-panel { position:static; padding:0; background:transparent; }
.preview-page .page-heading { display:block; margin:16px 0 26px; }
.preview-page .page-heading .eyebrow { font-size:10px; letter-spacing:2px; margin-bottom:12px; }
.preview-page h1 { font-size:clamp(38px,4.7vw,72px); line-height:1.08; font-weight:400; letter-spacing:-2px; }
.preview-page .intro { margin-top:14px; max-width:100%; font-size:14px; }
.visual-frame { position:relative; }
.preview-page .scene { border-radius:6px; }
.preview-page .scene canvas { aspect-ratio:1; }
.preview-page .scene-badge { top:19px; bottom:auto; inset-inline-start:19px; inset-inline-end:auto; background:#fffaf0ef; color:#4d473d; border:1px solid #ffffff70; font-size:12px; }
.preview-page .scene-loading,.preview-page .empty-note { top:32%; }
.preview-page .floating-composition { position:absolute; inset-inline:24px; bottom:24px; z-index:3; display:grid; grid-template-columns:112px minmax(0,1fr) auto; align-items:center; gap:20px; margin:0; padding:20px; background:#fffdfa; border:1px solid #fffc; border-radius:22px; box-shadow:0 10px 40px #30251c15; }
.composition-thumbnail { height:126px; min-width:0; border-radius:12px; background:linear-gradient(135deg,#efe7dc,#e2d4c3); overflow:hidden; display:grid; place-items:center; }
.composition-thumbnail canvas { width:100%; aspect-ratio:1; height:auto; }
#composition-glyph { font:700 70px/1 Georgia,serif; text-shadow:-2px 2px 2px #5d493f55; }
.preview-page .composition-heading { margin:0 0 6px; }
.preview-page .composition-heading h2 { font-size:15px; font-weight:400; }
html[lang="en"] .preview-page .composition-heading h2 { font-family:'Lova-Studio',Arial,sans-serif; font-size:23px; }
.preview-page #label-lettering { font-size:clamp(25px,2.6vw,40px); line-height:1.1; overflow-wrap:anywhere; }
.preview-page .label-specs { display:flex; flex-wrap:wrap; gap:7px; border:0; margin:10px 0; padding:0; }
.preview-page .label-specs>div { background:#f1eee7; border-radius:30px; padding:4px 12px; }
.preview-page .label-specs dt { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.preview-page .label-specs dd { display:flex; gap:6px; align-items:center; font-size:12px; font-weight:400; }
.preview-page .label-specs>div[data-spec=colorLegend] dd::before { content:""; width:14px; height:14px; border-radius:50%; background:var(--composition-color); box-shadow:inset 1px 2px 4px #fff8,inset -1px -2px 3px #0002; }
.composition-count { margin:0; color:var(--muted); font-size:13px; }
.composition-price { border-inline-start:1px solid var(--line); padding-inline-start:20px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.composition-price>span { font-size:12px; color:var(--muted); max-width:100px; }
.composition-price output { font:30px/1.2 Georgia,serif; white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
.room-picker { margin-top:24px; }
.room-picker legend { font-size:15px; font-weight:500; margin-bottom:12px; }
.room-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.room-option { position:relative; cursor:pointer; text-align:center; padding:4px 4px 8px; border:1px solid var(--field-border); border-radius:10px; min-width:0; }
.room-option input { position:absolute; opacity:0; width:1px; height:1px; }
.room-option img { display:block; width:100%; aspect-ratio:1.5; object-fit:cover; border-radius:6px; margin-bottom:7px; }
.room-option>span:not(.room-check) { display:block; font-size:11px; line-height:1.35; }
.room-check { display:none; position:absolute; top:8px; inset-inline-end:8px; width:20px; height:20px; background:var(--button); color:#fff; border-radius:50%; line-height:20px; text-align:center; }
.room-option:has(input:checked) { border:2px solid var(--button); padding:3px 3px 7px; background:var(--main); }
.room-option:has(input:checked) .room-check { display:block; }
.room-option:has(input:focus-visible) { outline:3px solid var(--button); outline-offset:3px; }
.preview-page .controls { border:1px solid #e8e2d9; border-radius:28px; padding:28px; background:#fffdf9d9; box-shadow:0 3px 18px #5746310a; }
.controls-heading { margin-bottom:24px; }
.controls-heading h2 { margin:0 0 5px; font:40px/1.1 Georgia,serif; letter-spacing:-.8px; }
.controls-heading p { margin:0; font-size:16px; color:var(--muted); }
.preview-page form { gap:22px; }
.preview-page [data-step]::before { content:attr(data-step); display:inline-block; margin-inline-end:17px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.preview-page label,.preview-page legend { font-size:14px; }
.preview-page #word-input { border-radius:9px; min-height:49px; font-size:20px; background:#fffdfa70; }
.preview-page .help { font-size:12px; }
.preview-page .styles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.preview-page .style-option { padding:12px 5px 10px; min-height:118px; border-radius:10px; gap:8px; }
.preview-page .style-option:has(input:checked) { padding:11px 4px 9px; }
.preview-page .style-example { width:76px; height:72px; font-size:67px; text-shadow:1px 2px 3px #68543b35; }
.preview-page .style-example.minimal { font-weight:200; color:#b2a690; font-family:'Helvetica Neue',Arial,sans-serif; }
.preview-page .style-example.soft { color:#c8bca6; font-family:Georgia,serif; font-weight:700; }
.preview-page .style-example.cloud img { filter:drop-shadow(2px 3px 2px #68543b20); }
.preview-page .selected-mark { display:none; position:absolute; top:7px; inset-inline-end:7px; margin:0; background:var(--button); color:#fff; border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:13px; }
.preview-page .style-option:has(input:checked) .selected-mark { display:block; }
.preview-page .sizes { gap:10px; }
.preview-page .size-option { min-height:74px; padding:14px 3px 11px; border-radius:10px; }
.preview-page .size-option:has(input:checked) { padding:13px 2px 10px; }
.preview-page .size-option:has(input:checked)::after { content:'✓'; position:absolute; inset-inline-end:5px; top:5px; width:16px; height:16px; line-height:16px; border-radius:50%; background:var(--button); color:white; font-size:11px; }
.preview-page .size-option strong { font-size:19px; }
.preview-page .size-option strong small { font-size:15px; }
.preview-page .size-option>span { font-size:11px; }
.preview-page .colors { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 7px; }
.preview-page .color-option { min-height:79px; padding:3px 0; gap:6px; }
.preview-page .color-dot { width:46px; height:46px; background-image:radial-gradient(ellipse at 28% 20%,#ffffffab 0, #ffffff28 23%,transparent 50%),radial-gradient(ellipse at 78% 84%,#0004 0,transparent 68%); box-shadow:inset 1px 1px 2px #fff7,inset -2px -3px 5px #0002,0 2px 2px #00000009; border:1px solid #65563f26; }
.preview-page .color-option[data-finish="metal"] .color-dot { background-image:radial-gradient(ellipse at 25% 20%,#fff 0,#ffffff95 12%,#ffffff08 35%,#0002 60%,#ffffff60 85%,transparent 100%); }
.preview-page .color-check { background:var(--button); color:white; margin-inline-start:20px; margin-top:17px; width:19px; height:19px; font-size:12px; border:1px solid #fff; line-height:17px; }
.preview-page .color-label { font-size:11px; line-height:1.25; }
.preview-page .color-label small:empty { display:none; }
.preview-page #color-name { float:inline-end; font-size:13px; color:var(--muted); margin-inline-start:8px; }
.preview-page legend:has(#color-name) { width:100%; }
.preview-page .quote { padding-top:14px; }
.preview-page .quote p { font-size:12px; }
.preview-page .order-summary { font-size:14px; margin-top:10px; }
.preview-page #total-price { font-size:25px; }
.preview-page .quote-notice { margin:0; font-size:12px; }
.preview-page .continue { min-height:48px; font-size:14px; }
.preview-page .order-help { margin-top:-10px; text-align:center; }
.preview-page .disclaimer { max-width:none; margin-top:8px; font-size:12px; }
.preview-page .scene-caption { font-size:12px; }
html[dir="rtl"] .controls-heading h2 { font-family:Arial,sans-serif; letter-spacing:normal; }
html[lang="he"] .preview-page .product-info-heading h2 { font-family:Arial,"Segoe UI",sans-serif; font-weight:500; line-height:1.3; letter-spacing:normal; }
html.high-contrast .preview-page { background:var(--paper); }
html.high-contrast .floating-composition,html.high-contrast .controls { background:var(--paper); border-color:var(--field-border); }
html.high-contrast .preview-page .label-specs>div { background:var(--main); }
@media(min-width:1650px) { .preview-page .workspace { grid-template-columns:minmax(0,1.7fr) minmax(430px,1fr); gap:30px; } }
@media(max-width:1200px) {
  .preview-page .page { width:calc(100% - 40px); }
  .preview-page .workspace { grid-template-columns:minmax(0,1.3fr) minmax(350px,1fr); gap:20px; }
  .preview-page .controls { padding:22px; }
  .preview-page .floating-composition { inset-inline:16px; bottom:16px; padding:15px; gap:12px; grid-template-columns:78px minmax(0,1fr); }
  .composition-thumbnail { height:95px; grid-row:span 2; }
  .composition-price { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; border:0; border-top:1px solid var(--line); padding:8px 0 0; }
  .composition-price output { font-size:24px; }
  .composition-price>span { max-width:none; }
  .preview-page #label-lettering { font-size:29px; }
  .room-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .room-option img { aspect-ratio:2; }
}
@media(max-width:950px) {
  .preview-page .workspace { grid-template-columns:1fr; gap:28px; }
  .preview-page .page-heading { margin-top:5px; }
  .preview-page h1 { font-size:clamp(37px,7vw,59px); }
  .preview-page .floating-composition { grid-template-columns:92px minmax(0,1fr) auto; }
  .composition-thumbnail { height:105px; grid-row:auto; }
  .composition-price { grid-column:auto; flex-direction:column; justify-content:center; border:0; border-inline-start:1px solid var(--line); padding:0; padding-inline-start:15px; }
  .room-options { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .room-option img { aspect-ratio:1.4; }
  .preview-page .controls { padding:26px; }
  .controls-heading h2 { font-size:36px; }
  .preview-page .color-dot { width:52px; height:52px; }
  .preview-page .color-option { min-height:90px; }
  .preview-page .color-label { font-size:12px; }
}
@media(max-width:560px) {
  .preview-page .page { width:calc(100% - 28px); }
  .preview-page header { padding:18px 0 23px; }
  .preview-page .page-heading { margin-bottom:20px; }
  .preview-page .page-heading .eyebrow { font-size:9px; letter-spacing:1.5px; }
  .preview-page h1 { letter-spacing:-1px; }
  .preview-page .intro { font-size:13px; }
  .preview-page .floating-composition { position:relative; inset:auto; margin:-64px 10px 0; padding:15px; grid-template-columns:64px minmax(0,1fr); gap:12px; border-radius:17px; }
  .composition-thumbnail { height:78px; grid-row:auto; }
  .preview-page #label-lettering { font-size:28px; }
  .preview-page .label-specs { gap:5px; margin:8px 0; }
  .preview-page .label-specs>div { padding:3px 8px; }
  .preview-page .label-specs dd { font-size:10px; }
  .preview-page .composition-heading h2 { font-size:13px; }
  html[lang="en"] .preview-page .composition-heading h2 { font-size:21px; }
  .composition-count { font-size:11px; }
  .composition-price { grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center; border:0; border-top:1px solid var(--line); padding:10px 0 0; }
  .composition-price output { font-size:24px; }
  .room-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .room-option img { aspect-ratio:1.7; }
  .preview-page .scene-badge { top:12px; inset-inline-start:12px; font-size:11px; padding:4px 9px; }
  .preview-page .controls { padding:19px; border-radius:22px; }
  .preview-page .styles,.preview-page .sizes { gap:7px; }
  .preview-page .style-option { min-height:108px; }
  .preview-page .style-example { width:60px; height:62px; font-size:56px; }
  .preview-page .style-copy strong { font-size:12px; }
  .preview-page .color-dot { width:42px; height:42px; }
  .preview-page .color-option { min-height:77px; }
  .preview-page .color-label { font-size:10px; }
  .preview-page .size-option strong { font-size:17px; }
  .preview-page .size-option strong small { font-size:12px; }
  .preview-page .size-option>span { font-size:10px; }
  .preview-page .scene-caption .material { display:block; }
}
@media(prefers-reduced-motion:reduce) { .preview-page .color-dot { transition:none; } }
@media(forced-colors:active) { .preview-page .selected-mark,.preview-page .room-check,.preview-page .color-check { forced-color-adjust:none; background:#183622; color:white; } }
.price-calculation summary { color:var(--muted); font-size:12px; cursor:pointer; min-height:28px; padding:4px 0; }
.price-calculation[open] summary { margin-bottom:8px; }
.preview-page .size-option::after { content:none !important; }
.preview-page .size-check { display:none; position:absolute; inset-inline-end:5px; top:5px; width:16px; height:16px; line-height:16px; border-radius:50%; background:var(--button); color:white; font-size:11px; }
.preview-page .size-option:has(input:checked) .size-check { display:block; }

/* Stock palette: seven named choices, native radio keyboard controls retained. */
.preview-page .selected-material { margin:10px 0 7px; font-size:12px; }
.preview-page .stock-colour-note { margin:0; font-size:11px; line-height:1.5; }
.preview-page #colour-status:empty { display:none; }
.preview-page .color-option[data-finish="marble"] .color-dot { background-image:radial-gradient(ellipse at 28% 20%,#ffffff8a,transparent 50%),radial-gradient(circle at 22% 44%,#62676b 0 .6px,transparent 1px),radial-gradient(circle at 72% 22%,#5b6268 0 .7px,transparent 1.1px),radial-gradient(circle at 53% 73%,#71797b 0 .6px,transparent 1px),radial-gradient(ellipse at 78% 84%,#0003,transparent 68%); background-size:auto,11px 13px,17px 19px,23px 17px,auto; }
@media(max-width:360px) { .preview-page .colors { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.preview-page .marble-composition>div:nth-child(3) dd::before { background-image:radial-gradient(circle at 25% 40%,#62676b 0 .6px,transparent 1px),radial-gradient(circle at 70% 70%,#858b8b 0 .6px,transparent 1px); background-size:7px 9px,11px 7px; }

/* A colour target is a physical letter: repeated letters remain independent. */
.letter-targets{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 20px;direction:ltr}
.letter-targets button{position:relative;min-width:45px;min-height:52px;padding:5px 12px 9px;border:1px solid #bcb5a9;border-radius:10px;background:#faf8f4;color:#342f28;cursor:pointer;font-family:inherit;font-size:21px;font-weight:600;line-height:1.3}
.letter-targets button:first-child{font-size:12px;min-width:95px;direction:inherit}
.letter-targets button[aria-pressed=true]{border:2px solid #50563c;background:#eff0e4;box-shadow:0 0 0 2px #50563c18}
.letter-targets button:focus-visible{outline:3px solid #6b5941;outline-offset:3px}
.letter-targets small{display:block;font:10px/1.4 Arial,sans-serif;color:#655f56}
.letter-targets i{position:absolute;bottom:3px;inset-inline:8px;height:4px;border-radius:3px;background:var(--letter-color);box-shadow:0 0 0 1px #0002}
.surface-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.surface-option{position:relative;display:grid;justify-items:center;align-content:start;gap:7px;padding:14px 8px;border:1px solid #c9c1b5;border-radius:10px;text-align:center;cursor:pointer}
.surface-option input{position:absolute;opacity:0;width:1px;height:1px}
.surface-option:has(input:checked){border:2px solid #50563c;background:#f0f0e7;padding:13px 7px}
.surface-option:has(input:focus-visible){outline:3px solid #6b5941;outline-offset:3px}
.surface-option strong{font-size:13px}.surface-option small{font-size:11px;line-height:1.5;color:#665e54}
.finish-orb{width:42px;height:42px;border-radius:50%;background-color:#97c8b6}
.finish-orb.matte{background-image:radial-gradient(circle at 32% 25%,#ffffff38,transparent 65%),radial-gradient(circle at 80% 90%,#0002,transparent 70%)}
.finish-orb.glossy{background-image:radial-gradient(ellipse at 29% 20%,#fff 0 4%,#ffffff85 7%,transparent 25%),radial-gradient(ellipse at 36% 35%,#ffffff52,transparent 57%),radial-gradient(circle at 82% 90%,#0005,transparent 65%);box-shadow:inset -2px -2px 5px #0002}
.preview-page[data-surface=matte] .color-dot{box-shadow:inset 0 0 0 1px #0001;background-image:radial-gradient(circle at 30% 20%,#ffffff30,transparent 60%),radial-gradient(circle at 80% 90%,#0002,transparent 70%)}
.preview-page[data-surface=matte] .color-option[data-finish=marble] .color-dot{background-image:radial-gradient(circle at 22% 44%,#62676b 0 .6px,transparent 1px),radial-gradient(circle at 72% 22%,#5b6268 0 .7px,transparent 1.1px);background-size:11px 13px,17px 19px}
.preview-page .composition-details dd{overflow-wrap:anywhere}
html.high-contrast .letter-targets button,html.high-contrast .surface-option{background:#fff;color:#111;border-color:#111}

.composition-letter-colours{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px;direction:ltr}.composition-letter-colours[hidden]{display:none}.composition-letter-colours span{display:inline-flex;align-items:center;gap:5px;font:12px Arial,sans-serif;border:1px solid #d8d2c8;border-radius:8px;padding:4px 6px;background:#fffefa;color:#312e29}.composition-letter-colours i{height:12px;width:12px;border:1px solid #0003;border-radius:50%}