/* Образы по случаям — демо. Токены — из app.css (бумага, чернила, один лаймовый акцент). */
.ob-title{font:700 24px/1.15 var(--display);margin:8px 0 6px}
.ob-view{display:flex;gap:6px;margin:14px 0 4px}
.ob-view button{flex:1;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 0;font-size:13px;font-weight:600;cursor:pointer}
.ob-view button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#obFeed{display:flex;flex-direction:column;gap:14px;margin-top:12px}

.ob-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px}
.ob-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.ob-h b{font:700 17px/1.2 var(--display)}
.ob-h small{color:var(--mute);font-size:12.5px;text-align:right}
.ob-act{display:flex;gap:8px;margin-top:12px}
.ob-btn{flex:1;border:0;border-radius:999px;padding:12px 10px;background:#eef0ea;font-weight:700;font-size:14px;cursor:pointer}
.ob-btn.lime{background:var(--lime)}
.ob-btn.wide{width:100%;margin:6px 0 4px}

.ob-sw{display:block;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#ddd}
.ob-sw img{width:100%;height:100%;object-fit:cover;display:block}
.ob-sw.sm{width:34px;height:34px;flex:none;border-radius:9px}
.ob-sw.lg{border-radius:14px}

/* А — коллаж: средства плитками на сером, как вещи образа */
.ob-collage{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#eceee8;border-radius:16px;padding:12px 12px 34px}
.ob-cell{position:relative}
.ob-cell em{position:absolute;left:6px;bottom:6px;font-style:normal;font-size:11px;font-weight:600;background:rgba(255,255,255,.88);border-radius:6px;padding:1px 6px}
.ob-cell.c0{grid-column:span 2;grid-row:span 2}
.ob-n{position:absolute;left:12px;bottom:9px;font-size:12px;background:#fff;border-radius:999px;padding:2px 9px;color:var(--mute)}
.ob-heart{position:absolute;right:10px;bottom:6px;width:30px;height:30px;border-radius:50%;border:0;background:#fff;font-size:16px;cursor:pointer}

/* Б — палитра: полосы цвета образа + зоны */
.ob-strip{display:flex;height:74px;border-radius:14px;overflow:hidden}
.ob-strip i{flex:1}
.ob-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ob-chips span{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 9px}

/* В — список: зона, мазок, средство */
.ob-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-list li{display:flex;align-items:center;gap:10px;font-size:13.5px}
.ob-list b{font-weight:700;margin-right:4px}

/* лист образа */
.ob-sheet{position:fixed;inset:0;z-index:20;background:rgba(16,19,16,.45);display:flex;align-items:flex-end;justify-content:center}
.ob-sheet-in{background:var(--paper);width:100%;max-width:520px;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(120px + env(safe-area-inset-bottom,0px))}
.ob-sheet-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:sticky;top:-16px;background:var(--paper);padding:6px 0 10px;z-index:1}
.ob-sheet-top b{font:700 20px/1.2 var(--display);display:block}
.ob-sheet-top small{color:var(--mute)}
.ob-close{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:18px;cursor:pointer}
.ob-zone{margin-top:14px}
.ob-zone h3{margin:0;font:700 15px var(--display)}
.ob-zone p{margin:2px 0 8px}
.ob-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px}
.ob-prod{flex:none;width:132px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.ob-prod b{font-size:13px;margin-top:6px;line-height:1.2}
.ob-prod small{color:var(--mute)}
.ob-pa{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
.ob-wish{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer}
.ob-buy{flex:1;text-align:center;background:var(--ink);color:#fff;border-radius:999px;padding:7px 4px;font-size:12px;font-weight:700;text-decoration:none}
.ob-nobuy{flex:1;text-align:center;color:var(--mute);font-size:11.5px}

.ob-feed{display:flex;flex-direction:column;gap:12px}
.ob-sub{font:700 17px/1.2 var(--display);margin:18px 0 10px}
.ob-trysm{margin-top:6px;border:0;background:var(--lime-soft);border-radius:999px;padding:6px 0;font-size:12px;font-weight:700;cursor:pointer}
#obFeed{margin-top:0}

/* вкладка «Примерка» */
.pr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pr-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 10px}
.pr-item .chip{width:30px;height:30px;border-radius:50%;flex:none}
.pr-name{flex:1;min-width:0;font-size:14px;line-height:1.25}
.pr-name small{display:block;color:var(--mute);font-size:12px}
.pr-item .btn{flex:none}
.pr-oc{display:flex;gap:8px;margin:12px 0 4px}
.pr-oc .btn{flex:1}
.pr-oc .btn.on{background:var(--ink);color:#fff}