/* KHONCHAIHERB Commerce v0.5 — immersive social-commerce surfaces */
.v05-bottom{grid-template-columns:repeat(5,1fr)}
.v05-video-nav .material-symbols-rounded{font-size:27px}
.v05-dark-shell{background:#000;min-height:100dvh;padding-bottom:0}
.v05-dark-shell .v05-bottom{background:rgba(8,8,8,.96);border-top-color:#222}
.v05-dark-shell .v05-bottom button{background:transparent;color:#aaa}
.v05-dark-shell .v05-bottom button.active{color:#fff}
.v05-page-head{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-bottom:1px solid #eee}
.v05-page-head>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.v05-page-head b{font-size:20px}.v05-page-head small{grid-column:2;color:#777;font-size:11px}
.v05-page-head button,.v05-order-head button{border:0;background:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative}
.v05-page-head .badge,.v05-video-top .badge,.v05-live-room-top .badge{position:absolute;right:-1px;top:-1px;background:#fe2c55;color:#fff;border-radius:999px;min-width:16px;height:16px;font-size:9px;display:grid;place-items:center;font-style:normal}
.v05-live-dot{width:10px;height:10px;background:#fe2c55;border-radius:50%;box-shadow:0 0 0 5px #ffe4ea;grid-row:1/3}
.v05-live-featured{padding:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.v05-live-tile{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer}
.v05-live-tile.featured{grid-column:1/-1}
.v05-live-stage{height:190px;background:linear-gradient(145deg,#233c31,#9d805d);position:relative;display:grid;place-items:center;color:#fff}
.v05-live-tile:not(.featured) .v05-live-stage{height:160px}
.v05-live-tile:nth-child(2n) .v05-live-stage{background:linear-gradient(145deg,#4c3a38,#b88662)}
.v05-live-stage .live-tag{position:absolute;left:8px;top:8px;background:#fe2c55;color:#fff;border-radius:3px;padding:3px 7px;font-size:10px;font-weight:900}
.v05-live-stage .live-viewers{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.45);padding:3px 6px;border-radius:3px;font-size:9px}
.v05-stage-art{font-size:72px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.v05-live-product{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(255,255,255,.94);color:#171717;padding:7px 9px;border-radius:5px;display:flex;gap:6px;align-items:center;font-size:10px}
.v05-live-product span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.v05-live-product b{margin-left:auto;color:#fe2c55;font-size:13px}
.v05-live-info{padding:9px}.v05-live-info b{display:block;font-size:13px}.v05-live-info small{display:block;color:#888;font-size:10px;margin-top:2px}.v05-live-info p{font-size:11px;color:#555;line-height:1.45;margin:6px 0 0}
.v05-live-products{background:#fff;margin-top:8px;padding:12px 0}.v05-live-products .tshop-section-head{padding:0 10px}
.v05-live-room{height:calc(100dvh - 62px);background:#0b0b0b;overflow:auto;scrollbar-width:none}.v05-live-room::-webkit-scrollbar{display:none}
.v05-live-room-stage{min-height:72dvh;background:radial-gradient(circle at 50% 30%,#577761 0,#263a30 34%,#101512 75%);position:relative;color:#fff;padding:12px;display:flex;flex-direction:column}
.v05-live-room-top{display:flex;align-items:center;gap:8px;z-index:2}.v05-live-room-top>button{width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;position:relative}
.v05-room-creator{flex:1;display:flex;align-items:center;gap:8px}.v05-room-creator .v05-creator-avatar{width:36px;height:36px}.v05-room-creator b,.v05-room-creator small{display:block}.v05-room-creator b{font-size:12px}.v05-room-creator small{font-size:9px;opacity:.8}
.v05-live-visual{flex:1;display:grid;place-items:center;position:relative}.v05-live-orb{font-size:112px;filter:drop-shadow(0 20px 25px rgba(0,0,0,.35));animation:v05float 3s ease-in-out infinite}.v05-live-status{position:absolute;top:24px;background:#fe2c55;padding:4px 9px;border-radius:3px;font-size:10px;font-weight:900}
@keyframes v05float{50%{transform:translateY(-8px) scale(1.03)}}
.v05-live-copy{max-width:78%;text-shadow:0 1px 2px #000}.v05-live-copy h1{font-size:19px;margin:0 0 4px}.v05-live-copy p{font-size:11px;line-height:1.5;margin:0;opacity:.9}
.v05-live-actions{position:absolute;right:12px;bottom:70px;display:flex;flex-direction:column;gap:13px}.v05-live-actions button{border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;font:600 9px inherit;text-shadow:0 1px 3px #000}.v05-live-actions .material-symbols-rounded{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center;font-size:23px}
.v05-live-input{height:39px;width:72%;border-radius:999px;background:rgba(0,0,0,.32);display:flex;align-items:center;gap:7px;padding:0 12px;font-size:11px;margin-top:12px}
.v05-live-tray{background:#fff;border-radius:16px 16px 0 0;margin-top:-14px;position:relative;z-index:3;padding:12px 10px 18px;color:#171717}.v05-tray-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:12px}.v05-tray-head b{display:flex;align-items:center;gap:5px}.v05-tray-head span{color:#888}
.v05-tray-product{width:100%;border:0;border-bottom:1px solid #eee;background:#fff;padding:8px 0;display:grid;grid-template-columns:66px 1fr 36px;gap:9px;text-align:left;align-items:center}.v05-tray-product .visual{width:66px;height:66px;border-radius:5px}.v05-tray-product>span b,.v05-tray-product>span small,.v05-tray-product>span strong{display:block}.v05-tray-product>span b{font-size:12px}.v05-tray-product>span small{font-size:9px;color:#888;margin:2px 0}.v05-tray-product>span strong{font-size:15px;color:#fe2c55}.v05-tray-product>i{font-style:normal;width:32px;height:32px;border-radius:50%;border:1px solid #fe2c55;color:#fe2c55;display:grid;place-items:center}
.v05-video-page{height:calc(100dvh - 62px);background:#000;position:relative;overflow:hidden}
.v05-video-top{position:absolute;z-index:10;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 1px 4px #000;background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent)}
.v05-video-top b{font-size:15px}.v05-video-top>button{position:absolute;border:0;background:rgba(0,0,0,.28);color:#fff;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.v05-video-top>button:first-child{left:10px}.v05-video-top>button:last-child{right:10px}
.v05-video-scroller{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}.v05-video-scroller::-webkit-scrollbar{display:none}
.v05-video-slide{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;color:#fff;overflow:hidden;background:#1e2b24}
.v05-video-slide.warm{background:#3d2e29}.v05-video-slide.sage{background:#35453e}
.v05-video-visual{position:absolute;inset:0;display:grid;place-items:center}.v05-video-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.07) 35%,rgba(0,0,0,.82) 100%)}
.v05-video-visual video{width:100%;height:100%;object-fit:cover}.v05-video-art{font-size:130px;display:grid;place-items:center;filter:drop-shadow(0 14px 28px rgba(0,0,0,.4))}.v05-video-art .material-symbols-rounded{position:absolute;font-size:56px;color:rgba(255,255,255,.8)}
.v05-video-side{position:absolute;z-index:4;right:10px;bottom:146px;display:flex;flex-direction:column;gap:14px}.v05-video-side button{border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;font:600 9px inherit;text-shadow:0 1px 4px #000}.v05-video-side .material-symbols-rounded{font-size:29px}.v05-video-side .liked .material-symbols-rounded{color:#fe2c55;font-variation-settings:'FILL' 1}
.v05-video-overlay{position:absolute;z-index:3;left:11px;right:64px;bottom:15px;text-shadow:0 1px 4px #000}.v05-video-overlay h2{font-size:15px;margin:10px 0 3px}.v05-video-overlay p{font-size:11px;line-height:1.45;margin:0 0 9px;opacity:.94}
.v05-video-creator{border:0;background:transparent;color:#fff;padding:0;display:flex;align-items:center;gap:7px;text-align:left;font-family:inherit}.v05-video-creator .v05-creator-avatar{width:34px;height:34px;border:1px solid rgba(255,255,255,.65)}.v05-video-creator span:nth-child(2){flex:1}.v05-video-creator b,.v05-video-creator small{display:block}.v05-video-creator b{font-size:11px}.v05-video-creator small{font-size:9px;opacity:.8}.v05-video-creator i{font-style:normal;border:1px solid rgba(255,255,255,.65);border-radius:3px;padding:3px 6px;font-size:9px}
.v05-product-pin{width:min(365px,100%);border:0;background:rgba(255,255,255,.96);border-radius:6px;padding:6px;color:#151515;display:grid;grid-template-columns:48px 1fr 24px;gap:7px;align-items:center;text-align:left;text-shadow:none}.v05-product-pin .visual{width:48px;height:48px;border-radius:4px}.v05-product-pin small,.v05-product-pin b,.v05-product-pin strong{display:block}.v05-product-pin small{font-size:8px;color:#888}.v05-product-pin b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v05-product-pin strong{font-size:13px;color:#fe2c55;margin-top:2px}
.v05-creator-section{padding-bottom:13px}.v05-creator-rail{display:flex;gap:8px;overflow:auto;scrollbar-width:none}.v05-creator-card{flex:0 0 205px;border:1px solid #eee;background:#fff;border-radius:6px;padding:9px;display:flex;align-items:center;gap:9px;text-align:left}.v05-creator-avatar{width:45px;height:45px;flex:0 0 auto;border-radius:50%;background:linear-gradient(145deg,#173a2a,#5c806c);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.v05-creator-card b,.v05-creator-card small{display:block}.v05-creator-card b{font-size:11px}.v05-creator-card small{font-size:9px;color:#888;line-height:1.45}
.v05-creator-page{background:#f5f5f5;min-height:calc(100vh - 62px)}.v05-creator-hero{background:#fff;padding:22px 14px 13px;display:flex;gap:12px;align-items:center}.v05-creator-avatar.big{width:72px;height:72px;font-size:17px}.v05-creator-hero h1{font-size:18px;margin:0}.v05-creator-hero p{font-size:11px;color:#777;margin:2px 0}.v05-creator-hero small{font-size:10px;color:#555}.v05-creator-stats{background:#fff;padding:8px 14px 14px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.v05-creator-stats b,.v05-creator-stats span{display:block}.v05-creator-stats b{font-size:15px}.v05-creator-stats span{font-size:9px;color:#888}.v05-creator-tabs{height:43px;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;display:grid;grid-template-columns:1fr 1fr}.v05-creator-tabs button{border:0;background:#fff;font:650 12px inherit;position:relative}.v05-creator-tabs button.active:after{content:"";position:absolute;height:2px;background:#111;bottom:0;left:32%;right:32%}
.v05-content-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.v05-content-mini button{border:0;background:#f7f7f7;border-radius:6px;min-height:108px;padding:10px;text-align:left}.v05-content-mini .material-symbols-rounded{font-size:29px}.v05-content-mini b,.v05-content-mini small{display:block}.v05-content-mini b{font-size:11px;margin-top:12px}.v05-content-mini small{font-size:9px;color:#888;margin-top:3px}
.v05-drawer-wrap{position:fixed;z-index:200;inset:0}.v05-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.v05-product-drawer{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(640px,100%);background:#fff;border-radius:16px 16px 0 0;padding:9px 12px calc(12px + env(safe-area-inset-bottom));max-height:82vh;overflow:auto}.v05-drawer-handle{width:45px;height:4px;border-radius:99px;background:#d8d8d8;margin:0 auto 10px}.v05-drawer-close{position:absolute;right:9px;top:10px;border:0;background:#f4f4f4;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}.v05-drawer-product{display:grid;grid-template-columns:145px 1fr;gap:12px;padding-top:9px}.v05-drawer-product>.visual{height:145px;border-radius:7px}.v05-drawer-product h2{font-size:16px;line-height:1.35;margin:6px 0}.v05-drawer-product p{font-size:10px;color:#666;line-height:1.45}.v05-drawer-product strong{display:block;color:#fe2c55;font-size:23px;margin-top:10px}.v05-drawer-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:9px;color:#777}.v05-drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.v05-drawer-actions button{height:46px;border:0;font:800 13px inherit;border-radius:4px}
.v05-order-center{background:#f5f5f5;min-height:calc(100vh - 62px)}.v05-order-head{background:#fff;padding:14px 12px 9px;display:flex;align-items:center;justify-content:space-between}.v05-order-head h1{font-size:20px;margin:0}.v05-order-head p{font-size:10px;color:#888;margin:2px 0}.v05-order-tabs{background:#fff;display:flex;overflow:auto;border-bottom:1px solid #eee;scrollbar-width:none;position:sticky;top:55px;z-index:40}.v05-order-tabs button{flex:0 0 auto;border:0;background:#fff;padding:10px 13px;font:600 11px inherit;color:#666;position:relative}.v05-order-tabs button span{margin-left:3px;font-size:9px;color:#aaa}.v05-order-tabs button.active{color:#111;font-weight:800}.v05-order-tabs button.active:after{content:"";position:absolute;height:2px;bottom:0;left:25%;right:25%;background:#fe2c55}.v05-order-list{padding:8px}.v05-order-list .order{border-radius:7px;margin:0 0 8px;box-shadow:none}.v05-lookup{margin:8px;border-radius:7px}
@media(min-width:700px){.v05-live-featured{grid-template-columns:repeat(3,minmax(0,1fr))}.v05-live-tile.featured{grid-column:span 2}.v05-product-drawer{bottom:20px;border-radius:16px}}
@media(max-width:390px){.v05-live-featured{grid-template-columns:1fr 1fr}.v05-live-tile.featured{grid-column:1/-1}.v05-drawer-product{grid-template-columns:112px 1fr}.v05-drawer-product>.visual{height:112px}.v05-video-overlay{right:58px}}