.opn-wall{max-width:1440px;margin:auto;padding:32px 24px 64px;color:var(--text-color)}.opn-wall-header{text-align:center;max-width:740px;margin:0 auto 30px}.opn-eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--text-color)}.opn-wall h1{font-size:clamp(30px,4vw,48px);line-height:1.15;margin:8px 0 14px}.opn-wall h2{font-size:27px;margin:0}.opn-toolbar,.opn-summary,.opn-filters,.opn-arrange{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.opn-toolbar{justify-content:space-between;border-top:1px solid var(--form-border-color);padding:16px 0}.opn-wall select,.opn-wall input[type=search]{border:1px solid var(--form-border-color);border-radius:5px;padding:10px;background:var(--secondary-background);color:var(--text-color);max-width:100%;font:inherit}.opn-wall button,.opn-wall-add{border:1px solid var(--primary-button-background);padding:10px 14px;border-radius:5px;font:inherit;font-weight:600;line-height:1.35;cursor:pointer;background:var(--secondary-background);color:var(--primary-button-background)}.opn-wall button:disabled{opacity:.45;cursor:not-allowed}.opn-wall button:focus-visible,.opn-wall a:focus-visible,.opn-wall input:focus-visible,.opn-wall select:focus-visible,.opn-wall-add:focus-visible{outline:3px solid var(--accent-color);outline-offset:3px}.opn-wall .opn-primary{background:var(--primary-button-background);color:var(--primary-button-text-color);border-color:var(--primary-button-background)}.opn-board{display:grid;grid-template-columns:repeat(var(--opn-count,6),minmax(0,1fr));gap:2px;background:var(--accent-background);border:8px solid var(--accent-background);border-radius:8px;overflow:hidden}.opn-board:has(.opn-swatch:nth-child(1):last-child){--opn-count:1}.opn-board:has(.opn-swatch:nth-child(2):last-child){--opn-count:2}.opn-board:has(.opn-swatch:nth-child(3):last-child){--opn-count:3}.opn-board:has(.opn-swatch:nth-child(4):last-child){--opn-count:4}.opn-board:has(.opn-swatch:nth-child(5):last-child){--opn-count:5}.opn-swatch{min-width:0;background:var(--secondary-background)}.opn-image{height:300px;background:#eee;display:flex;align-items:center;justify-content:center}.opn-image img{width:100%;height:100%;object-fit:cover}.opn-swatch-body{padding:14px;display:flex;flex-direction:column;gap:12px}.opn-swatch-body label:not(.opn-select){display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600}.opn-select{font-size:12px}.opn-fabric-title{font-size:14px;line-height:1.4;font-weight:600;min-height:60px}.opn-arrange{gap:4px;margin-top:auto}.opn-arrange button{padding:8px;font-size:12px}.opn-summary{padding:22px 0;border-bottom:1px solid var(--form-border-color)}.opn-summary>div{display:flex;flex:1;flex-direction:column;min-width:220px}.opn-summary strong{font-size:27px}.opn-summary small,.opn-note{font-size:14px;line-height:1.6;color:var(--text-color)}.opn-note{margin:14px 0 36px}.opn-empty{grid-column:1/-1;text-align:center;padding:70px 20px;background:var(--secondary-background)}.opn-empty strong{font-size:22px}.opn-browse-header{margin-bottom:20px}.opn-filters{align-items:flex-end;margin-bottom:22px}.opn-filters label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}.opn-filters>label{flex:1;min-width:200px}.opn-filters form{display:flex;flex:2;gap:10px;align-items:flex-end}.opn-filters form label{flex:1}.opn-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.opn-catalog-card{display:flex;flex-direction:column;gap:10px;background:var(--secondary-background);border:1px solid var(--form-border-color);border-radius:7px;padding:12px;font-size:13px}.opn-catalog-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}.opn-catalog-card button{margin-top:auto}.opn-catalog-card span{font-size:12px;color:var(--text-color)}.opn-pagination{display:flex;justify-content:center;gap:24px;padding:28px}.opn-pagination a{text-decoration:underline}.opn-wall-tray{position:fixed;bottom:18px;left:18px;z-index:35;background:var(--primary-button-background);color:var(--primary-button-text-color);padding:12px 18px;border-radius:8px;box-shadow:0 4px 20px #0002;max-width:calc(100% - 36px)}.opn-wall-tray a{font-weight:700}.opn-wall-tray span[role=status]{display:block;font-size:12px}.opn-wall-add{font-size:12px;margin:8px 0;display:block;width:100%}.opn-error{color:var(--error-color)}.opn-board-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px}.opn-board-grid .opn-image{height:auto;aspect-ratio:1}.opn-board-grid .opn-image img{object-fit:contain}.opn-wall [data-opn-status]{min-height:24px;font-weight:600;font-size:14px}@media(max-width:1000px){.opn-board{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.opn-swatch{flex:0 0 calc(33.333% - 2px);min-width:220px;scroll-snap-align:start}.opn-board-grid{display:grid}.opn-board-grid .opn-swatch{min-width:0}.opn-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.opn-wall{padding:22px 12px 40px}.opn-board{border-width:4px}.opn-swatch{flex:0 0 calc(50% - 1px);min-width:0}.opn-image{height:230px}.opn-swatch-body{padding:10px;gap:10px}.opn-fabric-title{font-size:12px;min-height:68px}.opn-swatch-body button{font-size:12px;padding:9px 6px}.opn-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.opn-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.opn-filters{display:block}.opn-filters form{margin-top:14px}.opn-summary{gap:12px}.opn-toolbar{gap:8px;font-size:12px}}


.opn-wall,.opn-wall-add,.opn-wall-tray{font-family:var(--text-font-family);font-style:var(--text-font-style)}.opn-wall h1,.opn-wall h2{font-family:var(--heading-font-family);font-weight:var(--heading-font-weight);font-style:var(--heading-font-style);color:var(--heading-color)}.opn-wall-header p{text-wrap:balance}.opn-wall .opn-wall-add.is-added,.opn-wall-add.is-added{background:var(--primary-button-background);color:var(--primary-button-text-color);border-color:var(--primary-button-background)}.opn-wall-add:disabled{opacity:.6;cursor:wait}.opn-wall-add{transition:background-color .15s,color .15s}


.opn-samples{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px;margin:0 0 36px;background:var(--secondary-background);border:1px solid var(--form-border-color);border-radius:8px}.opn-samples>div{flex:1;min-width:220px}.opn-samples h2{font-size:24px}.opn-samples p{margin:10px 0;font-size:14px;line-height:1.6}.opn-sample-dialog{width:min(620px,calc(100% - 24px));max-height:85vh;overflow:auto;margin:auto;padding:28px;border:1px solid var(--form-border-color);border-radius:8px;background:var(--secondary-background);color:var(--text-color)}.opn-sample-dialog::backdrop{background:rgb(0 0 0 / .45)}.opn-sample-dialog h2{font-size:25px}.opn-sample-dialog p{font-size:14px;line-height:1.6;margin:14px 0}.opn-sample-choice{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--form-border-color);cursor:pointer;font-size:14px}.opn-sample-choice input{width:18px;height:18px;flex-shrink:0;accent-color:var(--primary-button-background)}.opn-sample-actions{display:flex;flex-wrap:wrap;gap:12px}.opn-sample-prefill{padding:16px;margin:16px 0;background:var(--accent-background);border-radius:5px;font-size:14px;line-height:1.6}.opn-sample-prefill p{margin:8px 0}.opn-sample-prefill a{text-decoration:underline;color:var(--link-color)}
