/* Supplied finish textures. Stable catalogue keys; no pricing or image-canvas changes. */
:is(.oh-frame-options,.op-frames) label:has(input[value=black]){--ov-texture:url('./frames/black.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=natural]){--ov-texture:url('./frames/natural.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=white]){--ov-texture:url('./frames/white.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=brown]){--ov-texture:url('./frames/brown.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=gold]){--ov-texture:url('./frames/gold.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=silver]){--ov-texture:url('./frames/silver.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=light-grey]){--ov-texture:url('./frames/light-grey.webp')}
:is(.oh-frame-options,.op-frames) label:has(input[value=dark-grey]){--ov-texture:url('./frames/dark-grey.webp')}
#orenava-home .oh-frame-options label:has(input:not([value=none])) i,#op-lab .op-swatch:not(.op-swatch-none) .op-chip{background-image:var(--ov-texture);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #00000012}
#orenava-home .oh-frame-options label i{width:42px;height:42px}
#orenava-home .oh-frame-options label{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:84px;gap:11px;padding:6px 0}
#orenava-home .oh-frame-options label>span{position:static;transform:none!important;opacity:1;width:auto;max-width:66px;white-space:normal;background:none;border:0;box-shadow:none;padding:0;font:10px/1.4 Arial,sans-serif;color:#4c5947;text-align:center}
#orenava-home .oh-frame-options input:checked~span{color:#23382b;font-weight:600}
#op-lab .op-chip{width:38px;height:38px;outline-offset:3px;margin-bottom:10px}
#op-lab .op-swatch:has(input:checked) .op-chip{outline:2px solid #314737;transform:none}
#op-lab .op-swatch:has(input:checked){color:#253c30;font-weight:600}
#op-lab .op-frames{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 8px}
#op-lab .op-swatch{min-height:68px;font-size:11px;line-height:1.35;padding:5px 2px}
:is(#orenava-home,#op-lab) .ov-guide-link{display:inline-flex;align-items:center;justify-content:flex-start;gap:12px;background:transparent;border:0;border-bottom:1px solid #a2a28f;border-radius:0;padding:10px 0;color:#354b3d;font:12px/1.5 Arial,sans-serif;text-decoration:none;cursor:pointer;min-height:44px}
:is(#orenava-home,#op-lab) .ov-guide-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
#orenava-home .oh-finish-guide-action{text-align:center;margin:16px 0 0}
#op-lab .op-frame-guide-action{margin:-13px 0 20px}
:is(#orenava-home,#op-lab) .ov-guide-link:focus-visible{outline:2px solid #647653;outline-offset:4px}
/* A tactile board beside the supplied, uncropped frame-corner illustration. */
#orenava-home .oh-frame-showcase{padding:85px 5%;background:#f6f3eb;border-top:1px solid #dbd8cb;border-bottom:1px solid #dbd8cb}
#orenava-home .oh-frame-showcase-head{max-width:1280px;margin:0 auto 38px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
#orenava-home .oh-frame-showcase-head h2{font:clamp(38px,4.5vw,62px)/1.04 var(--serif);margin:12px 0 0;letter-spacing:-.025em}
#orenava-home .oh-frame-showcase-head h2 em{font-weight:400;color:#85765b}
#orenava-home .oh-frame-showcase-intro{font:14px/1.8 Arial,sans-serif;max-width:330px;margin:0;color:#697060}
#orenava-home .oh-frame-showcase-layout{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
#orenava-home .oh-frame-overview{display:block;background:#fff;color:#354537;text-decoration:none;border:1px solid #e0d9cc;transition:border-color .2s}
#orenava-home .oh-frame-overview img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
#orenava-home .oh-frame-overview>span{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 20px;background:#ebe7dd;font:11px/1.5 Arial,sans-serif;letter-spacing:.03em}
#orenava-home .oh-frame-overview b{font-weight:400;display:flex;align-items:center;gap:8px}
#orenava-home .oh-frame-overview:focus-visible{outline:2px solid #647653;outline-offset:5px}
#orenava-home .oh-texture-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 14px;margin:0}
#orenava-home .oh-texture-card{margin:0;min-width:0}
#orenava-home .oh-texture-card img{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;border:5px solid #fffdf7;box-shadow:0 3px 8px #3c362313;outline:1px solid #dcd8ca}
#orenava-home .oh-texture-card figcaption{font:11px/1.45 Arial,sans-serif;color:#4e5848;margin-top:12px;text-align:center}
#orenava-home .oh-frame-board-note{font:11px/1.7 Arial,sans-serif;color:#7a7868;margin:24px 0 0;border-top:1px solid #d8d3c5;padding-top:17px}
/* Native modal: only the panel is interactive; clicking the surrounding veil closes it. */
html.ov-finishes-open{overflow:hidden!important}
dialog.ov-finish-guide{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:24px;background:transparent;color:#283d30;box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
dialog.ov-finish-guide:not([open]){display:none}
dialog.ov-finish-guide[open]{display:flex;align-items:center;justify-content:center}
dialog.ov-finish-guide::backdrop{background:#12241ee6;backdrop-filter:blur(7px)}
.ov-finish-guide *{box-sizing:border-box}
.ov-finish-panel{width:min(1120px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#faf8f1;border:1px solid #d2c6af;box-shadow:0 25px 90px #07171288}
.ov-finish-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 22px;flex:none;border-bottom:1px solid #dcd7cb}
.ov-finish-head span{font:8px/1.5 Arial,sans-serif;letter-spacing:.15em;color:#7a785f}
.ov-finish-head h2{font:27px/1.15 Georgia,serif;font-weight:400;margin:3px 0 0;color:#283d30}
.ov-finish-actions{display:flex;align-items:center;gap:14px}
.ov-finish-actions button{font:12px/1.4 Arial,sans-serif;color:#283d30;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:pointer;padding:10px;min-height:44px}
.ov-finish-actions button[data-finish-zoom]{border-bottom:1px solid #9da28e;padding-inline:0}
.ov-finish-actions button[data-finish-close]{width:44px;height:44px;padding:11px}
.ov-finish-actions svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.ov-finish-guide :focus-visible{outline:2px solid #7f9066;outline-offset:3px}
.ov-finish-image{overflow:auto;overscroll-behavior:contain;min-height:0;background:#fff;text-align:center}
.ov-finish-image img{display:block;margin:auto;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 185px);object-fit:contain}
.ov-finish-guide.is-zoomed .ov-finish-image img{width:1448px;max-width:none;max-height:none;margin:0;height:auto}
.ov-finish-caption{font:11px/1.5 Arial,sans-serif;color:#77775f;margin:0;padding:12px 22px;flex:none}
@media(hover:hover){#orenava-home .oh-frame-overview:hover{border-color:#8b8e72}.ov-finish-actions button:hover{color:#7e6942}}
@media(max-width:980px){#orenava-home .oh-frame-showcase-layout{grid-template-columns:1fr 1fr;gap:25px}#orenava-home .oh-texture-board{gap:18px 10px}#orenava-home .oh-frame-showcase-head{gap:25px}}
@media(max-width:700px){#orenava-home .oh-frame-showcase{padding:48px 6%}#orenava-home .oh-frame-showcase-head{display:block;margin-bottom:26px}#orenava-home .oh-frame-showcase-intro{margin-top:20px;max-width:100%;font-size:13px}#orenava-home .oh-frame-showcase-layout{grid-template-columns:1fr;gap:28px}#orenava-home .oh-texture-board{gap:20px 12px}#orenava-home .oh-frame-overview>span{padding:12px;font-size:10px}#orenava-home .oh-texture-card figcaption{font-size:10px;margin-top:9px}#orenava-home .oh-frame-options label i{width:36px;height:36px}.ov-finish-guide .ov-finish-head{padding:12px;gap:10px}.ov-finish-head h2{font-size:20px}.ov-finish-head span{font-size:7px}.ov-finish-actions{gap:10px}.ov-finish-actions button{font-size:10px}.ov-finish-caption{font-size:10px;padding:10px 12px}dialog.ov-finish-guide{padding:12px}.ov-finish-panel{max-height:calc(100dvh - 24px)}.ov-finish-image img{max-height:calc(100dvh - 160px)}}
@media(max-width:360px){#op-lab .op-frames{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.ov-finish-guide *,#orenava-home .oh-frame-overview{transition:none!important}}