/*
Theme Name: Veg Style Video Catalog
Description: Mobile-first WordPress video catalog theme recreated from the supplied visual reference.
Version: 2.0.0
*/
:root{
 --bg:#333132;--bg2:#3c3c3c;--black:#050505;--white:#f4f4f4;--muted:#bdbdbd;
 --yellow:#ffd329;--green:#25d92d;--red:#ff1717;--orange:#ffb51b;--blue:#05a9e9;
 --line:#555354;--content:470px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif}
body{font-size:14px;line-height:1.55}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
.site{width:100%;max-width:var(--content);margin:0 auto;background:var(--bg);min-height:100vh}
.topbar{height:42px;background:#111416;border-bottom:1px solid #252728;display:flex;align-items:center;justify-content:space-between;padding:0 11px;position:sticky;top:0;z-index:50}
.menu-btn,.search-btn{width:27px;height:27px;border:0;background:transparent;color:#eee;padding:0;display:grid;place-items:center;cursor:pointer}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{content:"";display:block;width:15px;height:1px;background:#ddd;position:relative}
.menu-btn span:before{position:absolute;top:-5px}.menu-btn span:after{position:absolute;top:5px}
.search-btn svg{width:17px;height:17px}
.brand{font-weight:900;letter-spacing:.4px;font-size:15px;line-height:1;color:#f4f4f4;text-transform:uppercase}
.brand .star{color:var(--yellow);font-size:16px;margin:0 2px}
.page{padding:8px 8px 30px}
.action-stack{display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 0 7px}
.action{width:220px;max-width:76%;height:25px;border:0;border-radius:4px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.15px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:inset 0 -1px rgba(0,0,0,.15);cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center}
.action.green{background:var(--green)}.action.red{background:var(--red)}.action.orange{background:var(--orange)}.action.blue{background:var(--blue)}
.category-title{font-size:11px;font-weight:800;text-align:center;text-transform:uppercase;margin:5px 0 6px;color:#eee;letter-spacing:.15px}
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 4px 12px}
.cat{min-height:24px;padding:4px 2px;border:1px solid #464445;background:#393839;border-radius:3px;text-align:center;color:#eee;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat:hover,.cat.active{background:#484748;color:#fff}
.section-heading{display:flex;align-items:center;gap:8px;margin:12px 4px 8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.2px}
.section-heading:after{content:"";height:1px;background:#555;flex:1}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 8px;padding:0 5px}
.video-card{background:#090909;border:1px solid #222;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.03)}
.poster{position:relative;aspect-ratio:0.68;background:#111;overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover}
.poster:after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(transparent,rgba(0,0,0,.95))}
.card-copy{position:absolute;left:5px;right:5px;bottom:5px;z-index:2;text-align:center;color:#fff;font-weight:900;text-shadow:0 1px 2px #000}
.card-title{font-size:9px;line-height:1.15;text-transform:uppercase;margin:0 0 2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:7px;line-height:1.1;color:#f2f2f2}
.card-badge{position:absolute;top:4px;left:4px;z-index:3;background:#000b;color:#fff;padding:2px 4px;font-size:6px;border-radius:2px}
.pagination{display:flex;justify-content:center;align-items:center;gap:3px;margin:18px 0 8px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:24px;height:24px;padding:0 5px;background:#292829;border:1px solid #4c4b4c;border-radius:2px;display:grid;place-items:center;font-size:8px;color:#ddd}
.pagination .current{background:var(--yellow);color:#222;border-color:var(--yellow)}
.site-footer{border-top:1px solid #4a494a;margin-top:12px;padding:20px 12px 25px;text-align:center}
.footer-brand{font-weight:900;font-size:16px;letter-spacing:.6px}.footer-brand .star{color:var(--yellow)}
.footer-text{font-size:8px;color:#bbb;line-height:1.6;margin-top:7px}
.post-title{font-size:17px;line-height:1.18;text-align:left;text-transform:uppercase;font-weight:900;margin:11px 4px 8px}
.post-intro{font-size:10px;color:#eee;line-height:1.5;margin:0 4px 11px}
.post-content{font-size:10px;line-height:1.65;color:#e2e2e2;margin:0 4px}
.post-content h2,.post-content h3{color:var(--yellow);font-size:12px;text-transform:uppercase;text-align:center;margin:18px 0 8px}
.post-content a{color:#17e6df}.post-content strong{color:#fff}
.share-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:9px 0 12px}
.share{border:0;border-radius:2px;color:#fff;padding:5px 9px;font-size:8px;font-weight:800;cursor:pointer}
.share.fb{background:#1877f2}.share.tw{background:#111}.share.wa{background:#21c663}.share.tg{background:#229ed9}.share.copy{background:#444}
.player{background:#000;min-height:165px;margin:15px 4px 17px;display:grid;place-items:center;color:#777;font-size:9px;text-transform:uppercase;border:1px solid #151515}
.player iframe,.player video{width:100%;height:100%;min-height:165px;border:0}
.scene-gallery{display:flex;flex-direction:column;gap:3px;margin:8px 4px}
.scene-gallery img{width:100%;height:auto;max-height:300px;object-fit:cover;border:1px solid #181818}
.banner{margin:12px 4px;background:#1262d4;color:#fff;min-height:54px;display:grid;place-items:center;text-align:center;font-size:11px;font-weight:900;padding:7px}
.download-stack{display:flex;flex-direction:column;gap:5px;margin:8px 38px}
.download{height:25px;border-radius:3px;background:linear-gradient(90deg,#20d52d,#1688dd);border:0;color:#fff;font-size:9px;font-weight:900;text-align:center;display:grid;place-items:center}
.notice{font-size:9px;line-height:1.5;border-left:3px solid var(--yellow);padding:4px 7px;margin:12px 4px;color:#ddd}
.comment-box{margin:15px 4px;padding:10px;border:1px solid #4c4b4c;background:#353334}
.comment-box h3{font-size:10px;margin:0 0 7px;color:#fff}
.comment-box textarea{width:100%;min-height:75px;background:#282728;border:1px solid #505050;color:#fff;padding:7px;resize:vertical}
.comment-box button{margin-top:7px;background:#e85353;border:0;color:#fff;font-size:9px;font-weight:800;padding:7px 15px;border-radius:2px}
@media(min-width:700px){
 .site{max-width:760px;box-shadow:0 0 50px rgba(0,0,0,.25)}
 .video-grid{gap:12px}
 .card-title{font-size:11px}
 .card-meta{font-size:8px}
 .poster{aspect-ratio:.68}
}