/* /design-support/ page + gallery styles. Mirrors design-support-preview.html / GALLERY CODE.
 * Uses neutral tokens so it sits naturally on the Flatsome theme. */
.cdsb-page{max-width:1200px;margin:0 auto}
.cdsb-lede{font:400 18px/1.6 system-ui;color:#3a414d;max-width:820px}
.cdsb-page h2{font:700 26px/1.25 Georgia,serif;color:#0f3460;margin:34px 0 14px}
.cdsb-sub{font:400 16px/1.55 system-ui;color:#4a5160;max-width:820px;margin:0 0 22px}
.cdsb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 8px}
.cdsb-step{display:flex;gap:12px;align-items:flex-start;background:#f7f9fc;border:1px solid #e6e8ec;border-radius:12px;padding:18px}
.cdsb-num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#0f3460;color:#fff;font:700 16px/34px system-ui;text-align:center}
.cdsb-step div{font:400 15px/1.5 system-ui;color:#3a414d}
.cdsb-types{max-width:860px;line-height:1.6;font-size:16px}
.cdsb-types li{margin:0 0 8px}
.cdsb-cta{background:#0f3460;color:#fff;border-radius:16px;padding:34px;text-align:center;margin:34px 0}
.cdsb-cta h2{color:#fff;margin:0 0 8px}
.cdsb-cta p{font:400 17px/1.55 system-ui;color:#d7e0ee;margin:0 0 18px}
.cdsb-cta-btns{margin:0}
.cdsb-btn{display:inline-block;font:600 16px/1 system-ui;padding:14px 26px;border-radius:8px;text-decoration:none;margin:4px}
.cdsb-btn-primary{background:#1f7a4d;color:#fff}
.cdsb-btn-primary:hover{background:#19663f;color:#fff}
.cdsb-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.cdsb-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.cdsb-request-btn{background:#1f7a4d!important;color:#fff!important;border-color:#1f7a4d!important}

/* Gallery */
.ds-gallery{max-width:1200px;margin:0 auto}
.ds-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.ds-f{font:600 14px/1 system-ui;color:#0f3460;background:#fff;border:1px solid #d4d9e0;padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .15s}
.ds-f:hover{border-color:#0f3460}
.ds-f.is-active{background:#0f3460;color:#fff;border-color:#0f3460}
.ds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ds-item{margin:0;border:1px solid #e6e8ec;border-radius:12px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}
.ds-item:hover{box-shadow:0 10px 28px rgba(15,52,96,.14);transform:translateY(-3px)}
.ds-item .ds-link{display:block;cursor:zoom-in}
.ds-item img{display:block;width:100%;height:auto;aspect-ratio:1500/1061;object-fit:cover}
.ds-item figcaption{font:600 14px/1.35 system-ui;color:#27303f;padding:12px 14px}
.ds-cap-sku{display:block;font:500 12px/1.4 system-ui;color:#8a93a3;margin-top:2px}
.ds-item.is-hidden{display:none}
.ds-empty{grid-column:1/-1;color:#6b7280;font:400 15px/1.5 system-ui;text-align:center;padding:30px}
.ds-lb{position:fixed;inset:0;background:rgba(10,18,32,.9);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px}
.ds-lb[hidden]{display:none}
.ds-lb-img{max-width:95vw;max-height:90vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ds-lb-x{position:absolute;top:18px;right:24px;font:300 40px/1 system-ui;color:#fff;background:none;border:none;cursor:pointer}
@media(max-width:900px){.ds-grid{grid-template-columns:repeat(2,1fr)}.cdsb-steps{grid-template-columns:1fr}}
@media(max-width:560px){.ds-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ds-item{transition:none}}