:root {
    --ts-primary: #84c23f; /* Logo primary extracted */
    --ts-primary-hover: #76b236;
    --ts-dark: #3f5165; /* Logo dark accent extracted */
    --ts-gray: #f7f8fa;
    --ts-text: #222831;
    --ts-link: #57606a;
    --ts-border: #e9edf1;
}

html,body{height:100%;}
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: var(--ts-text);
    background-color: #f0f2f5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.ts-navbar {
    height: 72px;
    background: transparent; /* keep header colorless to let page design breathe */
    z-index: 1030;
    border-bottom: 0; /* remove visible border for a cleaner look */
}
.ts-navbar .nav-link, .ts-nav-link {
    color: var(--ts-text);
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    text-decoration: none;
}
.ts-nav-link:hover{ color: var(--ts-primary-hover); }
.ts-nav-link.active{ background-color: var(--ts-primary); color:#fff; border-radius: 18px; padding:0.35rem 1rem; }

.ts-search-input{
    background-color: var(--ts-gray);
    border: 1px solid var(--ts-border);
    border-radius: 999px;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    font-size: .95rem;
}
.ts-search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#98a0a6; }

.ts-icon-btn{ background-color:var(--ts-primary); color:#fff; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; }
.ts-icon-btn.white{ background:transparent; color:var(--ts-text); }

/* Boxed container */
.ts-wrapper{ margin-top:80px; min-height:calc(100vh - 120px); max-width:1200px; margin-left:auto; margin-right:auto; background:#fff; box-shadow:0 20px 40px rgba(18,24,31,0.04); border-radius:16px; padding:1.5rem; display:flex; gap:1.25rem; }
.ts-sidebar{ width:260px; flex-shrink:0; border-right:1px solid var(--ts-border); padding-right:1.25rem; }
.ts-main-content{ flex:1; min-width:0; }

/* Cards */
.stream-card{ border-radius:12px; overflow:hidden; position:relative; background:var(--ts-dark); color:#fff; aspect-ratio:16/9; background-size:cover; background-position:center; transition:transform .18s ease,box-shadow .18s ease; }
.stream-card:hover{ transform:translateY(-6px); box-shadow:0 14px 40px rgba(16,24,32,0.08); }
.stream-card-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:1rem; background:linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 45%, rgba(0,0,0,0.6) 100%); }
.badge-live{ background:#e53935; color:#fff; padding:4px 8px; border-radius:8px; font-weight:700; font-size:.78rem; }

/* Main featured stream overrides */
.main-stream{ border-radius:20px; max-height:520px; }
.main-stream .stream-card-overlay{ padding:1.25rem; }

.hero-products{ display:flex; gap:0.5rem; }
.hero-products .hp-item{ background: rgba(255,255,255,0.95); padding:8px; border-radius:8px; width:80px; text-align:center; transition:transform .12s ease; }
.hero-products .hp-item img{ max-height:60px; object-fit:contain; }

.product-card-simple{ background:var(--ts-gray); border-radius:10px; padding:1rem; text-align:center; text-decoration:none; color:var(--ts-text); display:block; transition:transform .12s ease, box-shadow .12s ease; }
.product-card-simple:hover{ transform:translateY(-6px); box-shadow:0 10px 30px rgba(18,24,31,0.06); }
.product-card-simple img{ max-width:100%; height:120px; object-fit:contain; margin-bottom:0.75rem; }

/* Product page */
.product-hero{ background:#f8f9fa; border-radius:12px; padding:2rem; height:500px; display:flex; align-items:center; justify-content:center; }
.product-price{ color:var(--ts-primary); font-size:1.6rem; }
.product-actions .btn{ border-radius:12px; padding:0.85rem 1.2rem; font-weight:700; }

/* Product grid cards */
.product-grid-card{ border-radius:16px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
.product-grid-card:hover{ transform:translateY(-6px); box-shadow:0 18px 45px rgba(18,24,31,0.06); }
.product-thumb{ height:160px; display:flex; align-items:center; justify-content:center; background:var(--ts-gray); padding:10px; border-radius:12px; }

.follow-secondary{ background:var(--ts-dark); color:#fff; border:none; }

.hover-shadow{ transition: box-shadow .18s ease; }
.hover-shadow:hover{ box-shadow:0 14px 40px rgba(18,24,31,0.06) !important; }

/* Badges */
.badge-live{ background:#e53935; color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.78rem; }

/* Make any existing danger badges use brand color to keep UI consistent */
.badge.bg-danger, .badge.bg-danger:hover { background: var(--ts-primary) !important; color: #fff !important; }

/* Navbar scrolled state to avoid detached floating look */
.ts-navbar-scrolled { box-shadow: 0 6px 18px rgba(18,24,31,0.08); background: rgba(255,255,255,0.98); border-bottom: 1px solid rgba(0,0,0,0.04); }
.ts-navbar-scrolled .ts-navbar-custom{ border-radius:0; }

/* Mobile sidebar: hide by default and provide overlay when opened */
@media (max-width: 991.98px){
    .ts-sidebar{ display:none; }
    .ts-sidebar.mobile-open{ display:block; position:fixed; left:0; top:72px; bottom:0; width:280px; z-index:2050; background:#fff; padding:1rem; box-shadow: 0 18px 50px rgba(18,24,31,0.12); overflow:auto; }
    .mobile-sidebar-overlay{ position:fixed; inset:72px 0 0 0; background: rgba(0,0,0,0.35); z-index:2040; display:none; }
    .mobile-sidebar-overlay.show{ display:block; }
    .mobile-filter-btn{ display:inline-flex; align-items:center; gap:0.5rem; }
}


/* Utilities */
.ts-navbar-custom{ max-width:1400px; padding-top:.5rem; padding-bottom:.5rem; }

/* Responsive */
@media (max-width: 991.98px){
    .ts-wrapper{ margin-top:80px; border-radius:0; padding:1rem; flex-direction:column; }
    .ts-sidebar{ width:100%; border-right:none; border-bottom:1px solid var(--ts-border); padding-right:0; padding-bottom:1rem; }
    .ts-search-input{ font-size:.9rem; }
    .ts-icon-btn{ width:36px; height:36px; }
}

/* Larger product imagery on wide screens for a modern, premium feel */
@media (min-width: 1200px) {
    .product-thumb{ height:220px; }
    .product-grid-card { border-radius:20px; }
    .product-card-simple > div[style] { height: 240px; }
}

/* Ensure header blends on pages where doted background exists */
.ts-navbar { transition: background-color .2s ease, box-shadow .2s ease; }
.ts-navbar-scrolled { background: rgba(255,255,255,0.95); border-bottom: 1px solid rgba(0,0,0,0.04); }

/* Make product images responsive and use intrinsic sizing */
.product-thumb img, .card img, img.img-fluid { max-width:100%; height:auto; display:block; }

/* Sticky sidebar only on larger screens to avoid covering content on mobile */
.sticky-sidebar { position: sticky; top: 24px; }

@media (max-width: 991.98px) {
    .product-thumb{ height:120px; }
    .sticky-sidebar { position: static; top: auto; }
}

@media (min-width: 992px){
    .ts-navbar-custom{ margin-top:1rem; border-radius:40px; }
    .ts-hero-title{ font-size:3rem; }
}

/* Accessibility tweaks */
.ts-nav-link:focus, .ts-nav-link:active{ outline:2px solid rgba(19,141,117,0.12); outline-offset:2px; }