/* KHONCHAIHERB Commerce v0.4 — social-commerce UI inspired by familiar marketplace patterns */
:root{--shop-bg:#f5f5f5;--shop-card:#fff;--shop-text:#171717;--shop-muted:#777;--shop-line:#ececec;--shop-sale:#fe2c55;--shop-sale-dark:#e91e47;--shop-voucher:#fff4df;--shop-gold:#f2a600;--shop-brand:#173a2a;--shop-brand-soft:#e9f1ec;--shop-shadow:0 1px 6px rgba(0,0,0,.08)}
body{background:var(--shop-bg);color:var(--shop-text)}
.shell{max-width:640px;margin:0 auto;min-height:100vh;background:var(--shop-bg);padding-bottom:72px}
.topbar.tshop-topbar{position:sticky;top:0;z-index:50;background:#fff;padding:9px 10px 7px;border-bottom:1px solid var(--shop-line);display:flex;gap:8px;align-items:center}
.tshop-searchbox{flex:1;height:38px;border:1.5px solid #222;border-radius:5px;display:flex;align-items:center;padding:0 8px;gap:6px;background:#fff}
.tshop-searchbox .material-symbols-rounded{font-size:20px}.tshop-searchbox input{width:100%;border:0;outline:0;background:transparent;font-size:14px;font-family:inherit}.tshop-searchbox button{border:0;background:transparent;color:#333;font-size:12px;font-weight:700;padding:0 2px}
.tshop-top-actions{display:flex;align-items:center;gap:3px}.tshop-icon{width:36px;height:36px;border:0;background:transparent;display:grid;place-items:center;position:relative;color:#222}.tshop-icon .material-symbols-rounded{font-size:24px}.tshop-icon .badge{position:absolute;right:0;top:0;background:var(--shop-sale);color:#fff;border-radius:999px;min-width:16px;height:16px;font-size:9px;display:grid;place-items:center;border:2px solid #fff;font-style:normal}
.shop-tabs{position:sticky;top:55px;z-index:45;background:#fff;display:flex;overflow:auto;scrollbar-width:none;border-bottom:1px solid var(--shop-line)}.shop-tabs::-webkit-scrollbar{display:none}.shop-tabs button{flex:0 0 auto;border:0;background:#fff;padding:11px 16px 9px;font:600 14px inherit;color:#555;position:relative}.shop-tabs button.active{color:#111;font-weight:800}.shop-tabs button.active:after{content:"";position:absolute;height:3px;border-radius:5px;left:20px;right:20px;bottom:0;background:var(--shop-sale)}
.tshop-hero{background:linear-gradient(115deg,#1c3d2d,#315b43);margin:8px;border-radius:8px;min-height:126px;padding:16px;color:#fff;display:flex;justify-content:space-between;overflow:hidden;position:relative}.tshop-hero:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.08);right:-50px;top:-36px}.tshop-hero-copy{z-index:1}.tshop-hero .mini{font-size:10px;letter-spacing:1.2px;opacity:.85}.tshop-hero h1{font-size:24px;line-height:1.1;margin:5px 0}.tshop-hero p{font-size:12px;opacity:.88;margin:0 0 9px}.tshop-hero button{background:#fff;color:#173a2a;border:0;border-radius:4px;padding:7px 12px;font-weight:800}.tshop-hero-art{font-size:64px;align-self:center;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.quick-icons{background:#fff;padding:12px 8px 8px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.quick-icons button{border:0;background:#fff;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;font:500 11px inherit;color:#333}.quick-icon-ball{width:46px;height:46px;border-radius:14px;background:#f7f7f7;display:grid;place-items:center;font-size:22px;border:1px solid #eee}.quick-icons button:nth-child(1) .quick-icon-ball{background:#fff0f3;color:var(--shop-sale)}.quick-icons button:nth-child(2) .quick-icon-ball{background:#fff6df;color:#d48b00}.quick-icons button:nth-child(3) .quick-icon-ball{background:#eef7f1;color:#1d6a42}.quick-icons button:nth-child(4) .quick-icon-ball{background:#eef3ff;color:#315bcc}.quick-icons button:nth-child(5) .quick-icon-ball{background:#f5efff;color:#7950bf}
.tshop-section{background:#fff;margin-top:8px;padding:12px 10px}.tshop-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.tshop-section-head h2{font-size:17px;margin:0;font-weight:800}.tshop-section-head a,.tshop-section-head button{color:#777;font-size:12px;border:0;background:none}.flash-head-left{display:flex;align-items:center;gap:8px}.flash-logo{font-weight:900;color:var(--shop-sale);font-size:17px;font-style:italic}.flash-countdown{display:flex;gap:2px;align-items:center}.flash-countdown span{background:#222;color:#fff;border-radius:2px;font:700 11px/19px monospace;min-width:23px;text-align:center}.flash-row{display:flex;gap:9px;overflow:auto;scrollbar-width:none}.flash-row::-webkit-scrollbar{display:none}.flash-product{flex:0 0 118px;cursor:pointer}.flash-product .visual{height:118px;border-radius:5px}.flash-product b{display:block;color:var(--shop-sale);font-size:16px;margin-top:5px}.flash-product del{color:#aaa;font-size:10px}.flash-sold{height:12px;background:#ffd8e0;border-radius:99px;margin-top:3px;overflow:hidden;position:relative}.flash-sold i{display:block;height:100%;background:var(--shop-sale);border-radius:99px}.flash-sold span{position:absolute;inset:0;font-size:8px;color:#7e2131;text-align:center;line-height:12px}
.voucher-rail{display:flex;gap:8px;overflow:auto;padding:9px 8px;background:#fff;scrollbar-width:none}.voucher-ticket{flex:0 0 235px;background:var(--shop-voucher);border:1px solid #ffd9a1;display:grid;grid-template-columns:50px 1fr auto;align-items:center;min-height:66px;position:relative;border-radius:4px;overflow:hidden}.voucher-ticket:before,.voucher-ticket:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;right:55px}.voucher-ticket:before{top:-6px}.voucher-ticket:after{bottom:-6px}.voucher-value{font-size:19px;font-weight:900;text-align:center;color:#e24e2e}.voucher-copy b{display:block;font-size:12px}.voucher-copy small{font-size:10px;color:#795b40}.voucher-ticket button{align-self:stretch;border:0;border-left:1px dashed #e8ba81;background:transparent;color:#d84b2f;font-weight:800;width:56px}
.live-rail{display:flex;gap:9px;overflow:auto;scrollbar-width:none}.live-card{flex:0 0 148px;height:205px;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#263b30,#9c7d59);color:#fff;position:relative;padding:10px;cursor:pointer}.live-card:nth-child(2){background:linear-gradient(160deg,#3b3131,#c29467)}.live-card:nth-child(3){background:linear-gradient(160deg,#30333d,#65867c)}.live-tag{position:absolute;left:8px;top:8px;background:var(--shop-sale);padding:3px 7px;border-radius:3px;font-size:10px;font-weight:900}.live-viewers{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.4);padding:3px 5px;border-radius:3px;font-size:9px}.live-emoji{font-size:54px;display:grid;place-items:center;height:115px}.live-copy{position:absolute;left:9px;right:9px;bottom:9px}.live-copy b{font-size:12px;display:block}.live-copy small{font-size:10px;opacity:.88}.live-price{margin-top:4px;font-weight:900;color:#fff}
.category-strip{display:flex;gap:0;overflow:auto;background:#fff;border-top:1px solid #f1f1f1;border-bottom:1px solid #eee;scrollbar-width:none;position:sticky;top:97px;z-index:40}.category-strip button{flex:0 0 auto;border:0;background:#fff;padding:10px 14px;font:600 12px inherit;color:#666;white-space:nowrap}.category-strip button.active{color:#111;font-weight:800;border-bottom:2px solid #111}
.recommend-head{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 0 8px;font-weight:800;font-size:15px}.recommend-head:before,.recommend-head:after{content:"";height:1px;background:#ddd;width:38px}
.tshop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 7px 12px}.tshop-card{background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer}.tshop-card .visual{height:auto;aspect-ratio:1/1;border-radius:0}.tshop-card-info{padding:7px 8px 9px}.tshop-card-title{font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}.shop-badge{display:inline-block;font-size:9px;border:1px solid #e4b67f;color:#9c5c17;border-radius:2px;padding:1px 3px;margin-right:3px;vertical-align:1px}.tshop-card-tags{display:flex;gap:3px;flex-wrap:wrap;margin:5px 0}.deal-chip{background:#fff1f3;color:var(--shop-sale-dark);border:1px solid #ffd3db;padding:1px 4px;border-radius:2px;font-size:9px}.shipping-chip{background:#edf7f1;color:#24704b;padding:1px 4px;border-radius:2px;font-size:9px}.tshop-price-line{display:flex;align-items:end;gap:4px;margin-top:3px}.tshop-price{color:var(--shop-sale);font-weight:900;font-size:18px}.tshop-old{font-size:9px;color:#aaa;text-decoration:line-through}.tshop-meta{font-size:10px;color:#888;margin-top:2px;display:flex;justify-content:space-between}.tshop-add{width:27px;height:27px;border-radius:50%;border:1px solid var(--shop-sale);color:var(--shop-sale);background:#fff;display:grid;place-items:center;float:right;margin-top:-31px}.tshop-add .material-symbols-rounded{font-size:18px}
.video-feed{display:flex;gap:8px;overflow:auto;scrollbar-width:none}.video-card{flex:0 0 160px}.video-thumb{height:220px;border-radius:6px;background:linear-gradient(160deg,#3f5448,#c0a073);position:relative;display:grid;place-items:center;color:#fff;overflow:hidden}.video-thumb:nth-child(2n){background:linear-gradient(160deg,#51403d,#b98b61)}.video-play{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.38);display:grid;place-items:center}.video-product-pin{position:absolute;left:7px;right:7px;bottom:7px;background:rgba(255,255,255,.94);color:#111;border-radius:4px;padding:6px;font-size:10px;display:flex;align-items:center;gap:5px}.video-product-pin b{color:var(--shop-sale);margin-left:auto}
.tshop-bottom{position:fixed;z-index:60;bottom:0;left:50%;transform:translateX(-50%);width:min(640px,100%);height:62px;background:#fff;border-top:1px solid #ddd;display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}.tshop-bottom button{border:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:500 10px inherit;color:#666}.tshop-bottom .material-symbols-rounded{font-size:23px}.tshop-bottom button.active{color:#111;font-weight:800}.tshop-bottom button.active .material-symbols-rounded{font-variation-settings:'FILL' 1}
/* Product detail */
.tshop-pdp{background:#f5f5f5;padding-bottom:85px}.pdp-media{background:#fff;position:relative}.pdp-media .visual.large{border-radius:0;height:auto;aspect-ratio:1/1}.pdp-floating{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between}.pdp-float-btn{width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center}.pdp-price-block{background:#fff;padding:11px 12px}.pdp-price{font-size:25px;font-weight:900;color:var(--shop-sale)}.pdp-price small{font-size:11px;color:#999;text-decoration:line-through;margin-left:6px}.pdp-price .pdp-off{font-size:10px;text-decoration:none;color:var(--shop-sale);background:#fff0f3;padding:2px 4px;margin-left:5px}.pdp-title{font-size:16px;line-height:1.4;font-weight:650;margin:7px 0 5px}.pdp-sold{font-size:11px;color:#777;display:flex;gap:12px}.pdp-block{background:#fff;margin-top:7px;padding:12px}.pdp-row{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:start;font-size:12px}.pdp-row+.pdp-row{margin-top:12px}.pdp-row-label{color:#777}.pdp-row-main b{display:block}.pdp-row-main small{color:#777}.pdp-voucher-line{display:flex;gap:5px;overflow:auto}.pdp-voucher-chip{background:#fff0f3;color:var(--shop-sale);border:1px solid #ffc6d1;padding:3px 6px;border-radius:2px;font-size:10px;white-space:nowrap}.shop-profile{display:flex;align-items:center;gap:10px}.shop-avatar{width:45px;height:45px;border-radius:50%;background:var(--shop-brand);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}.shop-profile-copy{flex:1}.shop-profile-copy b{display:block}.shop-profile-copy small{color:#888}.shop-profile button{border:1px solid var(--shop-sale);color:var(--shop-sale);background:#fff;border-radius:3px;padding:6px 10px;font-weight:700}.shop-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;text-align:center;font-size:11px}.shop-stats b{display:block;font-size:13px}.shop-stats span{color:#888}.pdp-review-top{display:flex;justify-content:space-between}.review-pill{background:#f5f5f5;border-radius:999px;padding:5px 9px;font-size:10px;display:inline-block;margin:7px 4px 0 0}.pdp-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:70;width:min(640px,100%);height:67px;background:#fff;border-top:1px solid #ddd;display:grid;grid-template-columns:54px 54px 1fr 1fr;padding-bottom:env(safe-area-inset-bottom)}.pdp-bottom button{border:0;font:700 12px inherit}.pdp-bottom .pdp-mini{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;color:#555}.pdp-bottom .pdp-mini .material-symbols-rounded{font-size:21px}.pdp-add{background:#fff0f3;color:var(--shop-sale)}.pdp-buy{background:var(--shop-sale);color:#fff}
/* Cart / checkout tune */
.page{background:#f5f5f5}.page-title{background:#fff;margin:0;padding:14px 12px;font-size:18px;border-bottom:1px solid #eee}.cartrow,.address,.box,.voucher-box,.shipping-progress,.summary{border-radius:0!important;box-shadow:none!important;margin:7px 0!important;border:0!important;background:#fff!important}.sticky-pay{left:50%!important;transform:translateX(-50%);width:min(640px,100%)!important;border-radius:0!important;border-top:1px solid #ddd!important;box-shadow:none!important}.sticky-pay .primary{background:var(--shop-sale)!important;border-radius:4px!important}.checkout-form input,.checkout-form textarea{border-radius:3px!important;background:#fafafa!important}.method.active{border-color:var(--shop-sale)!important;background:#fff4f6!important}.method .radio{border-color:var(--shop-sale)!important}.primary{background:var(--shop-sale)}
@media(min-width:641px){body{background:#e9e9e9}.shell{box-shadow:0 0 30px rgba(0,0,0,.08)}}