/* /designs (Designs.dc.html + Design Card.dc.html) */
.designs{padding-top:48px;padding-bottom:80px;display:flex;flex-direction:column;gap:32px}
.designs__head{display:flex;flex-direction:column;gap:12px;max-width:720px}
.designs__head h1{font-size:clamp(30px,3.6vw,40px);line-height:1.05;text-wrap:balance}
.designs__head .lead{margin:0;font-size:19px;color:var(--ink-body);text-wrap:pretty}
.designs__head .note{margin:0;font-size:15px;color:var(--ink-soft)}
.trade-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;position:sticky;top:64px;z-index:5;background:rgba(255,255,255,.95);padding:12px 0}
.trade-tabs a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:2px solid var(--line);border-radius:var(--r-btn);background:#fff;color:var(--ink);font:700 14px var(--body);text-decoration:none;white-space:nowrap}
.trade-tabs a:hover{border-color:var(--ink)}
.trade-tabs a[aria-current=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.design-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px 28px}
.design-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.design-card[hidden]{display:none}
.design-card__frame{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);transition:transform .2s}
.design-card__frame:hover{transform:translateY(-3px)}
.design-card__frame:focus-visible{outline-offset:3px}
.chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.chrome i{width:9px;height:9px;border-radius:50%;background:#D8C9BA}
.chrome .addr{margin-left:8px;flex:1;background:#fff;border-radius:6px;padding:3px 10px;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--c1)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.mock{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1fr;gap:4%;padding:7% 6%;color:var(--ink);container-type:inline-size}
.mock__text{display:flex;flex-direction:column;justify-content:center;gap:6%}
.mock__name{font-size:clamp(11px,2cqw,18px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c2)}
.mock__tag{font-size:clamp(16px,4.4cqw,38px);line-height:1.1;font-weight:700}
.mock__btn{display:inline-block;width:max-content;background:var(--c2);color:#fff;border-radius:3px;padding:5% 9%;font-size:clamp(9px,1.8cqw,16px);font-weight:700}
.mock__img{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);display:grid;place-items:center;font-size:clamp(9px,1.6cqw,14px);text-align:center;padding:8px}
.design-card__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 2px}
.design-card__meta > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.design-card__meta h2{font:700 19px/1.2 var(--head);color:var(--ink)}
.design-card__meta span{font-size:15px;color:var(--ink-soft)}
.designs__more{background:var(--panel);border-radius:var(--r-card);padding:clamp(24px,2.9vw,31px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.designs__more > div{display:flex;flex-direction:column;gap:8px;max-width:560px}
.designs__more h2{font-size:clamp(22px,2.2vw,24px);line-height:1.1}
.designs__more p{margin:0;font-size:17px;color:var(--ink-body)}
@media (max-width:820px){.trade-tabs{top:68px}}
.card-ctas{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.start-link{font-size:14px;font-weight:700;color:var(--coral-ink)}
.make-it-yours{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.make-it-yours li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border-radius:var(--r-card);padding:16px 18px;font-size:15px;color:var(--ink-body)}
.make-it-yours b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;font:700 15px var(--head)}
.make-it-yours strong{display:block;color:var(--ink);font:700 17px/1.3 var(--head);margin-bottom:2px}