.fd-rpos-designs { --design-header-clearance: 110px; --design-frame-budget: max(130px, calc(100svh - var(--design-header-clearance) - 260px)); --design-image-height: min(400px, var(--design-frame-budget)); padding-block: 48px 40px; background: #fff; }
.fd-rpos-designs-stage { scroll-margin-top: var(--design-header-clearance); }
.fd-rpos-designs-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 64px; margin-bottom: 30px; }
.fd-rpos-designs-heading h2 { margin: 0; font-size: clamp(32px, 3.2vw, 44px); }
.fd-rpos-designs-intro { padding-left: 22px; border-left: 2px solid #efbb68; }
.fd-rpos .fd-rpos-designs-intro p { margin: 0 0 12px; font-size: 15px; line-height: 1.8; }
.fd-rpos-designs-intro > span { display: inline-flex; align-items: center; gap: 9px; color: #226b56; font-size: 12px; font-weight: 500; }
.fd-rpos-designs-intro > span i { color: #aa7020; }
.fd-rpos-designs-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid #dce7df; }
.fd-rpos-designs-toolbar > span { color: #57746a; font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.fd-rpos-designs-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 8px; }
.fd-rpos-designs-controls > span { min-width: 82px; text-align: center; white-space: nowrap; color: #57746a; font-size: 12px; font-variant-numeric: tabular-nums; }
.fd-rpos-designs-controls button { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #d2e2d7; border-radius: 50%; background: #f6faf7; color: #145e4d; font-size: 14px; transition: background-color .2s, border-color .2s; }
.fd-rpos-designs-controls button:hover { background: #fff1d9; border-color: #edbc6a; }
.fd-rpos-designs-track { --design-slide-size: min(72%, 500px); position: relative; display: flex; align-items: center; gap: 20px; width: 100%; height: calc(var(--design-image-height) + 130px); overflow-x: auto; overscroll-behavior-x: contain; overflow-anchor: none; scroll-behavior: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.fd-rpos-designs-track::-webkit-scrollbar { display: none; }
.fd-rpos-design { flex: 0 0 var(--design-slide-size); min-width: 0; scroll-snap-align: none; }
.fd-rpos-designs-track.is-inspecting { align-items: center; }
.fd-rpos-designs-track.is-inspecting .fd-rpos-design { opacity: .55; transform: scale(.86); transition: opacity .3s ease, transform .3s ease; }
.fd-rpos-designs-track.is-inspecting .fd-rpos-design.is-selected { flex-basis: min(78%, 700px); opacity: 1; transform: scale(1); }
.fd-rpos-designs-track .fd-rpos-design.is-selected .fd-rpos-design-open { border-color: #d6a344; box-shadow: 0 8px 24px #174e4020; }
.fd-rpos .fd-rpos-designs-help { margin: 8px 0 0; color: #637d70; font-size: 12px; line-height: 1.6; text-align: center; }
.fd-rpos-design-open { position: relative; display: block; overflow: hidden; border: 1px solid #d0dfd6; border-radius: 14px; background: #eef3ef; color: #426456; transition: border-color .2s, box-shadow .2s; }
.fd-rpos-design-open:hover, .fd-rpos-design.is-current .fd-rpos-design-open { border-color: #7aa58e; box-shadow: 0 8px 20px #153f3510; }
.fd-rpos-design-browser { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 12px; border-bottom: 1px solid #dbe5de; background: #f6f9f6; color: #668173; font-size: 10px; line-height: 1.4; }
.fd-rpos-design-browser > span:first-child { display: flex; gap: 5px; }
.fd-rpos-design-browser > span:first-child i { width: 6px; height: 6px; border-radius: 50%; background: #bdcfc3; }
.fd-rpos-design-browser > span:first-child i:first-child { background: #dfbb7e; }
.fd-rpos-design-open img { display: block; width: 100%; height: auto; max-height: var(--design-image-height); object-fit: contain; }
.fd-rpos-design-view { position: absolute; display: inline-flex; align-items: center; gap: 8px; right: 16px; bottom: 16px; padding: 8px 12px; border: 1px solid #ffffff50; border-radius: 50px; background: #104337ed; color: #fff; font-size: 11px; box-shadow: 0 3px 10px #0002; }
.fd-rpos-design-view i { color: #f9c773; }
.fd-rpos-design-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 2px 2px; }
.fd-rpos-design-number { display: block; color: #638173; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.fd-rpos-design-meta h3 { margin: 4px 0 3px; font-size: 25px; line-height: 1.2; }
.fd-rpos .fd-rpos-design-meta p { margin: 0; color: #6c8176; font-size: 12px; line-height: 1.6; }
.fd-rpos-design-swatches { display: flex; gap: 6px; padding-right: 2px; }
.fd-rpos-design-swatches > span { width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; background: var(--design-swatch); box-shadow: 0 0 0 1px #d4e0d7; }
.fd-rpos-designs-footer { margin-top: 28px; box-shadow: 0 12px 36px #145e4d08; }
.fd-rpos .fd-rpos-designs-note { margin: 10px 0 0; color: #577167; font-size: 12px; line-height: 1.6; }
@media (max-width: 991px) {
    .fd-rpos-designs-heading { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .fd-rpos-designs { --design-image-height: min(var(--design-frame-budget), calc((100vw - 44px) * .626)); }
    .fd-rpos-designs-track { --design-slide-size: 88%; gap: 16px; }
    .fd-rpos-designs-track.is-inspecting .fd-rpos-design.is-selected { flex-basis: 94%; }
}
@media (max-width: 575px) {
    .fd-rpos-designs { padding-block: 36px; }
    .fd-rpos-designs-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 22px; }
    .fd-rpos-designs-heading h2 { font-size: 32px; }
    .fd-rpos-designs-toolbar { flex-wrap: wrap; gap: 12px; }
    .fd-rpos-design-meta { gap: 10px; padding-top: 16px; }
    .fd-rpos-design-meta h3 { font-size: 24px; }
    .fd-rpos-design-swatches { gap: 4px; }
    .fd-rpos-design-swatches > span { width: 13px; height: 13px; }
    .fd-rpos-design-view { right: 10px; bottom: 10px; padding: 6px 9px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .fd-rpos-designs *, .fd-rpos-designs *::before, .fd-rpos-designs *::after { transition: none; scroll-behavior: auto; }
}