/* OBUOLA TV PRODUCTION - Navy #0a1a3f, Gold #d4af37, Black #0a0a0a */
:root{--navy:#0a1a3f;--navy2:#10255a;--gold:#d4af37;--gold2:#f5d76e;--black:#0b0b0f;--light:#f8f6ee;--muted:#6b7280;--green:#25D366;--red:#e63946;--radius:14px;--shadow:0 10px 30px rgba(0,0,0,.15)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--light);color:#1a1a1a;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.eico{width:1.65em;height:1.65em;vertical-align:-0.35em;object-fit:contain}
.btn .eico,.mpesa .eico{width:1.8em;height:1.8em}
h1 .eico,h2 .eico,h3 .eico{width:1.5em;height:1.5em}
.whats-float .eico,.cart-fab .eico{width:30px;height:30px;vertical-align:middle}
img.eico[src*="icon-whatsapp"]{background:#fff;border-radius:50%;padding:1px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.soc{display:inline-flex;gap:.45rem;margin-top:.35rem;vertical-align:middle}
.soc a{display:inline-block;line-height:0}
.soc img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);background:#fff}
.foot-follow{text-align:center;padding:.8rem .5rem;border-top:1px solid #222;margin-top:1.5rem;color:#d1d5db;font-size:.9rem;font-weight:700}
.foot-follow .soc{margin-left:.4rem}
.container{width:92%;max-width:1200px;margin:auto}
.topbar{background:var(--black);color:#fff;font-size:.85rem;padding:.45rem 0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.topbar a{color:var(--gold2)}
.topbar .pay{color:var(--gold2);font-weight:700}
header.site{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,var(--navy) 0%,#0a0a0a 100%);color:#fff;box-shadow:var(--shadow)}
.navwrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem}
.logo-mark{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;border:3px solid var(--gold);flex-shrink:0;overflow:hidden;box-shadow:0 3px 12px rgba(212,175,55,.5);padding:2px}
.logo-mark img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.logo-foot{width:90px;border-radius:12px;background:#fff;padding:4px;border:2px solid var(--gold);display:block;margin-bottom:.6rem}
.logo-foot img{width:100%;display:block;border-radius:8px}
.logo-text b{display:block;font-size:1.25rem;letter-spacing:1px;color:#fff;line-height:1}
.logo-text b span{color:var(--gold)}
.logo-text small{color:var(--gold2);letter-spacing:.5px;font-size:.72rem}
nav.menu{display:flex;gap:1rem;flex-wrap:wrap}
nav.menu a{padding:.45rem .8rem;border-radius:20px;font-weight:600;font-size:.92rem;color:#eee}
nav.menu a.active,nav.menu a:hover{background:var(--gold);color:var(--navy)}
.nav-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:30px;font-weight:800;border:none;cursor:pointer;transition:.2s;font-size:.95rem;text-align:center}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);box-shadow:0 4px 14px rgba(212,175,55,.4)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-wa{background:var(--green);color:#fff}
.btn-dark{background:#111;color:#fff}
.btn-outline{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.hamburger{display:none;background:var(--gold);border:none;font-size:1.4rem;padding:.3rem .7rem;border-radius:8px;cursor:pointer}
.hero{background:linear-gradient(rgba(10,26,63,.88),rgba(0,0,0,.85)),url('');background-size:cover;color:#fff;padding:4rem 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'🎥 📸 🎨 🎤 👕';position:absolute;font-size:6rem;opacity:.07;top:10%;left:50%;transform:translateX(-50%);white-space:nowrap}
.hero h1{font-size:2.6rem;line-height:1.1;margin:.6rem 0}
.hero h1 span{color:var(--gold)}
.hero p.tag{color:var(--gold2);letter-spacing:2px;text-transform:uppercase;font-weight:700;font-size:.9rem}
.hero p.sub{max-width:700px;margin:.8rem auto 1.5rem;color:#e5e7eb}
.hero-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.trustbar{background:var(--gold);color:var(--navy);padding:.6rem 0;font-weight:700;text-align:center;font-size:.92rem}
.section{padding:3.5rem 0}
.section h2.sec-title{text-align:center;font-size:2rem;color:var(--navy);margin-bottom:.3rem}
.section p.sec-sub{text-align:center;color:var(--muted);max-width:700px;margin:0 auto 2rem}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.svc{background:#fff;border-radius:var(--radius);padding:1.5rem 1.2rem;text-align:center;box-shadow:var(--shadow);border-top:5px solid var(--gold);transition:.2s}
.svc:hover{transform:translateY(-5px);border-top-color:var(--navy)}
.svc .icon{font-size:2.4rem;background:var(--navy);width:104px;height:104px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0 auto .8rem;color:var(--gold);border:3px solid var(--gold);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.svc .icon img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.svc h3{color:var(--navy);font-size:1.05rem;margin-bottom:.4rem}
.svc p{font-size:.88rem;color:#4b5563;min-height:48px}
.svc .price{font-weight:800;color:#111;background:#fdf6d8;border-radius:8px;padding:.2rem .5rem;display:inline-block;margin:.4rem 0;font-size:.85rem}
.svc .btn{padding:.5rem 1rem;font-size:.85rem;margin-top:.4rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.8rem}
.navy-sec{background:linear-gradient(135deg,var(--navy),#000);color:#fff;border-radius:20px;padding:2.5rem 2rem}
.gold{color:var(--gold)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem}
.product{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.prod-img{height:230px;display:flex;align-items:center;justify-content:center;font-size:4.5rem;background:linear-gradient(135deg,var(--navy) 0%,#1e3a8a 50%,#000 100%);color:#fff;position:relative;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.prod-img small{z-index:2}
.cart-item .em img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.upload-preview{width:100%;max-height:180px;object-fit:cover;border-radius:10px;border:2px dashed var(--gold);margin-top:.4rem;display:none}
.prod-img small{position:absolute;bottom:8px;background:var(--gold);color:var(--navy);font-size:.7rem;font-weight:800;padding:.2rem .6rem;border-radius:12px}
.prod-body{padding:1rem 1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.prod-body h3{color:var(--navy);font-size:1rem}
.prod-price{font-weight:900;font-size:1.15rem}
.prod-price s{color:var(--muted);font-weight:400;font-size:.85rem;margin-left:.4rem}
.prod-row{display:flex;gap:.5rem;flex-wrap:wrap}
select,input[type=text],input[type=tel],input[type=email],input[type=number],textarea{padding:.65rem .8rem;border:1.5px solid #d1d5db;border-radius:10px;width:100%;font-size:.95rem;font-family:inherit}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold)}
.prod-row select,.prod-row input{flex:1;min-width:70px}
.prod-actions{display:flex;gap:.5rem;margin-top:.3rem}
.prod-actions .btn{flex:1;padding:.6rem .4rem;font-size:.85rem}
.badge{background:var(--red);color:#fff;font-size:.7rem;font-weight:800;padding:.2rem .6rem;border-radius:12px;display:inline-block}
.shop-tools{display:flex;gap:.7rem;justify-content:center;margin-bottom:.6rem;flex-wrap:wrap;align-items:stretch}
.search-box{flex:2;min-width:220px;display:flex;align-items:center;gap:.5rem;background:#fff;border:2px solid var(--navy);border-radius:30px;padding:.55rem 1.1rem;box-shadow:var(--shadow)}
.search-box input{border:none;outline:none;flex:1;font-size:.95rem;background:transparent;font-family:inherit}
#shopCat{flex:1;min-width:180px;border:2px solid var(--navy);border-radius:30px;padding:.55rem 1rem;font-weight:700;color:var(--navy);background:#fff;font-family:inherit;cursor:pointer;box-shadow:var(--shadow)}
.stars-row{font-size:.82rem;color:#666;margin:.15rem 0}
.stars-row .stars{color:#f59e0b;font-weight:800;letter-spacing:1px}
.ship-progress{margin-bottom:.6rem}
.ship-progress small{font-size:.8rem;color:#444}
.ship-track{height:10px;background:#e5e7eb;border-radius:6px;overflow:hidden;margin-top:.25rem}
.ship-fill{height:100%;background:linear-gradient(90deg,var(--gold),#00a651);border-radius:6px;transition:width .3s}
.ship-done{background:#ecfdf5;border:1.5px solid #00a651;color:#0a7a2e;font-weight:800;border-radius:10px;padding:.4rem;text-align:center;font-size:.88rem}
.filters{display:flex;gap:.6rem;justify-content:center;margin-bottom:1.8rem;flex-wrap:wrap}
.filters button{padding:.55rem 1.2rem;border-radius:20px;border:2px solid var(--navy);background:#fff;font-weight:700;cursor:pointer;color:var(--navy)}
.filters button.active,.filters button:hover{background:var(--navy);color:var(--gold)}
footer{background:#080b18;color:#d1d5db;padding:3rem 0 0;margin-top:3rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.foot-grid h3{color:var(--gold);margin-bottom:.8rem}
.paybox{background:#11183a;border:1px solid var(--gold);border-radius:12px;padding:1rem;margin-top:.6rem}
.paybox b{color:var(--gold2);font-size:1.1rem}
.foot-bottom{border-top:1px solid #222;margin-top:2rem;padding:1rem 0;text-align:center;font-size:.85rem;color:#9ca3af}
/* cart drawer */
.cart-fab{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;cursor:pointer;z-index:90;box-shadow:0 8px 20px rgba(0,0,0,.35);border:3px solid var(--gold)}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:.75rem;font-weight:800;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cart-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:92vw;height:100vh;background:#fff;z-index:100;transition:.3s;box-shadow:-10px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column}
.cart-drawer.open{right:0}
.cart-head{background:var(--navy);color:#fff;padding:1rem;display:flex;justify-content:space-between;align-items:center}
.cart-head b span{color:var(--gold)}
.cart-items{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.cart-item{display:flex;gap:.7rem;background:#f9fafb;border-radius:10px;padding:.6rem;align-items:center}
.cart-item .em{font-size:2rem;background:var(--navy);border-radius:8px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-item h4{font-size:.85rem;color:var(--navy)}
.cart-item small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.qty button{width:24px;height:24px;border-radius:50%;border:1px solid var(--navy);background:#fff;cursor:pointer;font-weight:800}
.cart-foot{padding:1rem;border-top:2px solid #eee;background:#fff}
.cart-foot .total{display:flex;justify-content:space-between;font-weight:900;font-size:1.1rem;margin:.5rem 0}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:95;display:none}
.overlay.show{display:block}
/* checkout */
.check-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:1.5rem;align-items:start}
.mpesa{background:linear-gradient(135deg,#0a7a2e,#00a651);color:#fff;border-radius:12px;padding:1.2rem;margin:1rem 0}
.mpesa code{background:#fff;color:#0a7a2e;padding:.2rem .6rem;border-radius:6px;font-weight:900;font-size:1.1rem}
.delivery-opt{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.delivery-opt label{flex:1;min-width:140px;border:2px solid #e5e7eb;border-radius:10px;padding:.7rem;cursor:pointer;font-size:.88rem;text-align:center}
.delivery-opt input{display:none}
.delivery-opt label.sel{border-color:var(--gold);background:#fffbeb}
/* portfolio */
.port-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.port{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);text-align:center}
.port .ph{min-height:120px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;background:linear-gradient(135deg,#111,var(--navy2));overflow:hidden}
.port .ph img{width:100%;height:auto;max-height:320px;object-fit:contain;background:#0a1a3f}
.port div.pb{padding:.9rem}
.port div.pb p{font-size:.85rem;color:#4b5563;margin-top:.35rem}
.rate-photos{display:flex;gap:1.2rem;justify-content:center;margin-bottom:.8rem;flex-wrap:wrap}
.rate-photo{width:150px;height:150px;object-fit:cover;border-radius:50%;margin:0 auto .8rem;display:block;border:4px solid var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.3);background:var(--navy)}
.rate-photos .rate-photo{margin:0}
/* pro split layout for services page */
.rate.split-rate{display:grid;grid-template-columns:180px 1fr;gap:0;overflow:hidden;padding:0}
.rate-media{display:flex;flex-direction:column;min-height:0;max-height:280px;background:var(--navy)}
.rate-media img{flex:1;width:100%;min-height:100px;max-height:140px;object-fit:cover}
.rate-media img+img{border-top:3px solid var(--gold)}
.rate-body{padding:1rem 1.2rem}
@media(max-width:700px){.rate.split-rate{grid-template-columns:1fr}.rate-media{flex-direction:row;min-height:0;max-height:none}.rate-media img{min-height:0;max-height:none;height:100px}.rate-media img+img{border-top:none;border-left:3px solid var(--gold)}}
.port div.pb{padding:.8rem}
/* rate table */
.rate{background:#fff;border-radius:12px;padding:1.2rem;margin-bottom:1rem;border-left:6px solid var(--gold);box-shadow:var(--shadow)}
.rate h3{color:var(--navy)}
.rate ul{margin:.4rem 0 .4rem 1.1rem;font-size:.92rem}
.whats-float{position:fixed;bottom:90px;right:20px;background:var(--green);color:#fff;width:55px;height:55px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;z-index:90;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--navy);color:#fff;padding:.8rem 1.4rem;border-radius:30px;z-index:120;transition:.3s;border:2px solid var(--gold);font-weight:700}
.toast.show{transform:translateX(-50%) translateY(0)}
/* ticketing */
.tkt-tier{flex:1;min-width:140px;border:2px solid #e5e7eb;border-radius:10px;padding:.7rem;cursor:pointer;font-size:.88rem;text-align:center;background:#fff}
.tkt-tier.sel{border-color:var(--gold);background:#fffbeb;box-shadow:0 0 0 2px var(--gold)}
.tkt-tier.disabled{opacity:.5;cursor:not-allowed}
#bkModal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center;padding:1rem}
.bk-box{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:92vh;overflow:auto;padding:1.5rem;border:3px solid var(--gold)}
.tick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1rem 0}
.ticket{border:2px dashed var(--gold);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.tick-head{background:var(--navy);color:#fff;padding:.6rem .9rem;display:flex;justify-content:space-between;align-items:center;font-size:.85rem}
.tick-head span{background:var(--gold);color:var(--navy);font-weight:900;padding:.15rem .6rem;border-radius:8px}
.tick-body{display:flex;gap:.9rem;padding:.9rem;align-items:center}
.tick-body img{width:90px;height:90px;border:1px solid #ddd;border-radius:8px}
.tick-foot{background:#fdf6d8;padding:.5rem .9rem;font-size:.75rem;text-align:center;color:#555}
@media(max-width:900px){.split,.check-grid{grid-template-columns:1fr}.hero h1{font-size:1.9rem}nav.menu{display:none;width:100%;flex-direction:column;background:var(--navy2);border-radius:12px;padding:.8rem}nav.menu.show{display:flex}.hamburger{display:block}.navwrap{flex-wrap:wrap}}