/* My collection: right-edge tab, sign-in modal, garage panel */
.mc-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;background:#fff;color:#111;border-radius:12px 0 0 12px;padding:22px 11px;box-shadow:-4px 0 24px rgba(0,0,0,.14);writing-mode:vertical-rl;text-orientation:mixed;transform:translateY(-50%) rotate(180deg);font-size:14px;letter-spacing:.04em;border-radius:0 12px 12px 0;transition:padding .25s}
.mc-tab:hover{padding-right:16px}
.mc-tab b{position:absolute;top:-6px;left:-6px;background:var(--accent);color:#111;border-radius:10px;min-width:19px;height:19px;font-size:11px;display:grid;place-items:center;writing-mode:horizontal-tb;transform:rotate(180deg)}
.mc-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110;opacity:0;pointer-events:none;transition:opacity .3s;display:grid;place-items:center;padding:16px}
.mc-ov.on{opacity:1;pointer-events:auto}
.mc-card{background:#fff;width:min(420px,100%);border-radius:12px;padding:30px 28px 24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35);max-height:94vh;overflow:auto}
.mc-x{position:absolute;top:14px;right:14px;opacity:.6}.mc-x:hover{opacity:1}
.mc-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.mc-card h2{font-size:24px;font-weight:600;margin:10px 0 6px;letter-spacing:-.01em}
.mc-sub{font-size:13px;color:var(--mut);margin-bottom:20px}
.mc-f{margin-bottom:12px;position:relative}
.mc-f input,.mc-f select,.mc-f textarea{width:100%;height:44px;border:1px solid var(--line);border-radius:8px;padding:0 14px;font:inherit;background:#fff}
.mc-f textarea{height:84px;padding:12px 14px;resize:vertical}
.mc-f input:focus,.mc-f select:focus,.mc-f textarea:focus{outline:0;border-color:#111}
.mc-f .eye{position:absolute;right:12px;top:11px;opacity:.6}
.mc-err{color:#c0392b;font-size:12px;margin:-4px 0 10px;min-height:0}
.mc-link{font-size:12px;text-decoration:underline;text-underline-offset:3px;color:#444;display:inline-block;margin-bottom:14px}
.mc-btn{width:100%;height:46px;border-radius:8px;background:#111;color:#fff;font-size:14px;font-weight:600}.mc-btn:hover{background:#333}
.mc-btn.o{background:#fff;color:#111;border:1px solid #bbb}.mc-btn.o:hover{border-color:#111}
.mc-or{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--mut);margin:14px 0}.mc-or::before,.mc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.mc-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:20px;text-align:center;font-size:10.5px;color:#333}
.mc-perks svg{width:22px;height:22px;margin:0 auto 6px;display:block;fill:none;stroke:currentColor;stroke-width:1.5}
/* garage panel */
.mc-panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;z-index:120;transform:translateX(100%);transition:transform .38s;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.18)}
.mc-panel.on{transform:none}
.mc-head{padding:26px 30px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mc-head h2{font-size:26px;font-weight:400}.mc-head small{color:var(--mut);display:block;margin-top:2px;font-size:12px}
.mc-head .out{font-size:12px;text-decoration:underline;text-underline-offset:3px;margin-right:14px}
.mc-body{flex:1;overflow:auto;padding:22px 30px 30px}
.mc-add{width:100%;border:1px dashed #999;border-radius:10px;height:60px;font-size:14px;margin-bottom:20px}.mc-add:hover{border-color:#111;background:var(--soft)}
.mc-car{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.mc-car .ph{aspect-ratio:16/9;background:var(--soft);display:grid;place-items:center;color:var(--mut);font-size:12px;overflow:hidden}
.mc-car .ph img{width:100%;height:100%;object-fit:cover}
.mc-thumbs{display:flex;gap:6px;padding:8px 14px 0}.mc-thumbs img{width:54px;height:40px;object-fit:cover;border-radius:5px;cursor:pointer;opacity:.75}.mc-thumbs img:hover{opacity:1}
.mc-inf{padding:14px 16px 16px}
.mc-inf h3{font-size:17px;font-weight:600}.mc-inf .meta{font-size:12px;color:var(--mut);margin-top:2px}
.mc-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.mc-chips span{font-size:11px;border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.mc-inf p{font-size:13px;color:#444;white-space:pre-line;margin-bottom:10px}
.mc-act{display:flex;gap:8px;flex-wrap:wrap}.mc-act a,.mc-act button{font-size:12px;border:1px solid var(--line);padding:8px 14px;border-radius:6px}.mc-act a{background:#111;color:#fff;border-color:#111}.mc-act button:hover{border-color:#111}
.mc-empty{text-align:center;color:var(--mut);padding:30px 10px}
.mc-form h3{font-size:18px;margin-bottom:16px;font-weight:600}
.mc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mc-f label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.mc-want{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mc-want label{margin:0;text-transform:none;letter-spacing:0;font-size:12px;color:#111;border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer;user-select:none}
.mc-want input{display:none}.mc-want label:has(input:checked){background:#111;color:#fff;border-color:#111}
.mc-pics{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mc-pics .pic{width:84px;height:64px;position:relative;border-radius:6px;overflow:hidden;background:var(--soft)}.mc-pics img{width:100%;height:100%;object-fit:cover}
.mc-pics .pic button{position:absolute;top:2px;right:2px;background:#fff;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:18px}
.mc-pics .up{width:84px;height:64px;border:1px dashed #999;border-radius:6px;display:grid;place-items:center;font-size:22px;cursor:pointer;color:#555}
.mc-btns{display:flex;gap:10px;margin-top:8px}.mc-btns .mc-btn{flex:1}
@media(max-width:900px){.mc-tab{padding:16px 9px;font-size:13px}.mc-row{grid-template-columns:1fr}}
/* sign-in as a right-side drawer */
.mc-ov{display:flex;justify-content:flex-end;align-items:stretch;padding:0}
.mc-card{width:min(460px,100%);height:100%;max-height:none;border-radius:0;padding:56px 40px 32px;transform:translateX(100%);transition:transform .38s;box-shadow:-10px 0 40px rgba(0,0,0,.18)}
.mc-ov.on .mc-card{transform:none}
.mc-x{top:22px;right:26px;font-size:20px}

.mc-demo{display:block;width:100%;margin-top:12px;border:1px dashed #bbb;border-radius:8px;padding:10px;font-size:13px;font-weight:600;background:var(--soft)}
.mc-demo small{display:block;font-weight:400;color:var(--mut);font-size:11px;margin-top:2px}.mc-demo:hover{border-color:#111}

/* site integration: shop tokens, no floating tab (opened from the header / menu Account links) */
.mc-ov, .mc-panel, .mc-tab { --accent: #FFC20E; --line: rgba(0,0,0,.12); --mut: #6b6b6b; --soft: #f4f4f2; }
.mc-tab { display: none !important; }