.channel-drawer{--drawer-bg:#f8f9f6;--drawer-ink:#192019;--drawer-line:#dde2d8;position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;width:min(760px,94vw);max-width:none;padding:0;border:0;border-left:1px solid var(--drawer-line);border-radius:18px 0 0 18px;background:var(--drawer-bg);color:var(--drawer-ink);overflow:hidden;box-shadow:-20px 0 80px #10200f24;z-index:1000}.channel-drawer[open]{display:flex;flex-direction:column;animation:channel-drawer-enter .28s cubic-bezier(.22,.7,.3,1)}.channel-drawer::backdrop{background:#0f190e45;backdrop-filter:blur(2px)}.channel-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 28px 23px;border-bottom:1px solid var(--drawer-line);flex-shrink:0;background:var(--drawer-bg)}.channel-drawer-eyebrow{display:flex;gap:8px;align-items:center;font:10px 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#697267}.channel-drawer-eyebrow i{width:5px;height:5px;border-radius:50%;background:#729c37}.channel-drawer-head h2{margin:10px 0 0;font:500 24px/1.4 'Noto Sans SC','Microsoft YaHei',sans-serif;letter-spacing:-.7px}.channel-drawer-head h2>span{display:inline-block;font-size:11px;font-weight:400;color:#697267;letter-spacing:0;margin-left:15px}.channel-drawer-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:35px;height:35px;border:1px solid var(--drawer-line);border-radius:50%;font-size:26px;line-height:1;font-weight:300;background:transparent;color:var(--drawer-ink);cursor:pointer}.channel-drawer-close:hover{background:#e9efdf}.channel-drawer-content{position:relative;flex:1;min-height:0}.channel-drawer-frame{width:100%;height:100%;display:block;border:0;background:var(--drawer-bg)}.channel-drawer-loading{position:absolute;inset:0;display:grid;place-items:center;color:#697267;font:13px 'Microsoft YaHei',sans-serif;background:var(--drawer-bg);z-index:1}.channel-drawer-loading[hidden]{display:none}.channel-drawer button:focus-visible{outline:2px solid #719c35;outline-offset:4px}html[data-theme=dark] .channel-drawer{--drawer-bg:#111610;--drawer-ink:#edf1e6;--drawer-line:#35412e}html[data-theme=dark] .channel-drawer-close:hover{background:#263020}html[data-theme=dark] .channel-drawer-head h2>span,html[data-theme=dark] .channel-drawer-eyebrow{color:#a3b09a}@keyframes channel-drawer-enter{from{transform:translateX(100%);opacity:.5}to{transform:translateX(0);opacity:1}}@media(max-width:600px){.channel-drawer{width:100%;border-radius:0;border:0}.channel-drawer-head{padding:19px 20px 17px}.channel-drawer-head h2{font-size:22px}.channel-drawer-head h2>span{display:none}}@media(prefers-reduced-motion:reduce){.channel-drawer[open]{animation:none}.channel-drawer::backdrop{backdrop-filter:none}}
/* Narrow, high-density homepage shelf. */
.channel-drawer{width:min(490px,100vw);border-radius:13px 0 0 13px}.channel-drawer-head{padding:19px 20px 17px;gap:10px}.channel-drawer-head h2{font-size:20px;margin-top:8px}.channel-drawer-head h2>span{display:none}.channel-drawer-eyebrow{font-size:9px;letter-spacing:1.7px}.channel-drawer-close{width:31px;height:31px;font-size:23px}@media(max-width:600px){.channel-drawer{width:min(490px,100vw);border-radius:0}.channel-drawer-head{padding:18px 18px 16px}.channel-drawer-head h2{font-size:20px}}
/* Centered channel shopping dialog. */
.channel-drawer{inset:0;margin:auto;width:min(1080px,calc(100vw - 72px));height:min(870px,90dvh);border:1px solid var(--drawer-line);border-radius:17px;box-shadow:0 30px 110px #0d190c40}.channel-drawer[open]{animation:channel-dialog-enter .22s ease-out}.channel-drawer-head{padding:23px 28px 21px}.channel-drawer-head h2{font-size:25px;margin-top:8px}.channel-drawer-head h2>span{display:inline-block;font-size:11px;margin-left:17px}.channel-drawer-close{width:34px;height:34px}.channel-drawer::backdrop{background:#0f190e66;backdrop-filter:blur(3px)}@keyframes channel-dialog-enter{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@media(max-width:760px){.channel-drawer{width:calc(100vw - 24px);height:94dvh;border-radius:13px}.channel-drawer-head{padding:19px 20px}.channel-drawer-head h2{font-size:22px}.channel-drawer-head h2>span{display:none}}@media(max-width:480px){.channel-drawer{width:100%;height:100dvh;border:0;border-radius:0}.channel-drawer-head{padding:18px 20px}.channel-drawer-head h2{font-size:21px}}@media(prefers-reduced-motion:reduce){.channel-drawer[open]{animation:none}}
