/* Окно отметок, вариант 5. Отдельно от стилей карточек полки. */
.wl-pick { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.28); overflow-y:auto; }
.wl-pick[hidden],.wl-pick [hidden] { display:none !important; }
.wl-pick__box { box-sizing:border-box; width:100%; max-width:365px; max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; background:#fff; border-radius:24px; padding:24px; color:#1c1b20; box-shadow:0 16px 40px rgba(37,33,44,.12); font-family:inherit; }
.wl-pick__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.wl-pick__identity { display:flex; align-items:center; gap:11px; min-width:0; }
.wl-pick__photo { display:flex; align-items:center; justify-content:center; width:47px; height:57px; flex:0 0 47px; background:#f3f1f7; border:1px solid #eeeaf3; border-radius:9px; overflow:hidden; }
.wl-pick__photo img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.wl-pick__initial { color:#8d809e; font-size:22px; font-weight:600; }
.wl-pick__identity-text { min-width:0; }
.wl-pick__title { display:block; color:#1c1b20; font-size:15px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.wl-pick__meta { display:block; color:#919199; font-size:11px; line-height:1.4; margin-top:4px; overflow-wrap:anywhere; }
.wl-pick__x { display:flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; padding:0; margin:0; border:0; border-radius:50%; background:#f3f3f7; color:#24232a; cursor:pointer; }
.wl-pick__shelf-row { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:14px; line-height:1.4; }
.wl-pick__loading { color:#92929a; font-size:11px; margin:7px 0 0; }
.wl-pick__divider { height:1px; background:#ececf1; margin:20px 0; }
.wl-pick__section { color:#1c1b20; font-family:inherit; font-size:13px; font-weight:600; line-height:1.4; margin:0 0 10px; }
.wl-pick__opts { display:grid; gap:5px; }
.wl-pick__opt { display:flex; align-items:center; gap:11px; box-sizing:border-box; width:100%; min-height:47px; margin:0; padding:11px 10px; border:1px solid transparent; border-radius:11px; background:transparent; color:#1c1b20; font-family:inherit; font-size:14px; font-weight:400; line-height:1.3; text-align:left; cursor:pointer; }
.wl-pick__dot { width:11px; height:11px; border-radius:50%; flex:0 0 11px; }
.wl-pick__opt[data-lvl="1"] .wl-pick__dot { background:#A895FF; }
.wl-pick__opt[data-lvl="2"] .wl-pick__dot { background:#FFCBEB; }
.wl-pick__opt[data-lvl="3"] .wl-pick__dot { background:#C3FFFF; }
.wl-pick__check { margin-left:auto; flex:0 0 17px; opacity:0; }
.wl-pick__opt.is-cur { background:#f5f5f8; box-shadow:none; }
.wl-pick__opt.is-cur .wl-pick__check { opacity:1; }
.wl-pick__opt:hover { background:#f5f5f8; }
.wl-pick__opt:disabled { opacity:.6; cursor:wait; }
.wl-pick__rm { display:block; width:auto; margin:19px 0 0; padding:0; border:0; background:none; color:#96969e; font-family:inherit; font-size:12px; font-weight:400; line-height:1.5; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.wl-pick__rm:hover { color:#c93850; }
.wl-pick__rm:disabled { opacity:.6; cursor:wait; }
.wl-pick button:focus-visible { outline:2px solid #A895FF; outline-offset:3px; }
@media(max-width:380px) { .wl-pick { padding:14px; } .wl-pick__box { padding:21px; max-height:calc(100dvh - 28px); } }

.wl-pick__shelf { position:relative; display:flex; align-items:center; flex:0 0 42px; width:42px; height:26px; padding:0; margin:0; border:0; border-radius:20px; background:#e1e1e7; cursor:pointer; }
.wl-pick__track { display:block; width:100%; height:100%; border-radius:inherit; }
.wl-pick__track::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0002; transition:transform .15s ease; }
.wl-pick__shelf[aria-checked="true"] { background:#1c1b20; }
.wl-pick__shelf[aria-checked="true"] .wl-pick__track::after { transform:translateX(16px); }
.wl-pick__shelf:disabled { opacity:.55; cursor:wait; }
.wl-pick__error { color:#a11b28; font-size:12px; line-height:1.5; margin:10px 0 0; }
@media(prefers-reduced-motion:reduce) { .wl-pick__track::after { transition:none; } }

/* Старые цветные плашки не должны перебивать новый дизайн. */
.wl-pick .wl-pick__opt[data-lvl] { background:transparent; border-radius:11px; font-weight:400; text-align:left; box-shadow:none; }
.wl-pick .wl-pick__opt[data-lvl].is-cur,
.wl-pick .wl-pick__opt[data-lvl]:hover { background:#f5f5f8; }
.wl-pick .wl-pick__photo img { max-width:100%; max-height:100%; }
.wl-pick .wl-pick__shelf { background:#e1e1e7; }
.wl-pick .wl-pick__shelf[aria-checked="true"] { background:#1c1b20; }
.wl-pick .wl-pick__x.wish-pointer-focus:focus,
.wl-pick .wl-pick__x.wish-pointer-focus:focus-visible { outline:none; }