/* TheTheme.Store — gallery site design system (not the templates themselves) */

:root{
  --tv-bg: #f8fafc;
  --tv-surface: #ffffff;
  --tv-text: #0f172a;
  --tv-text-muted: #64748b;
  --tv-border: #e2e8f0;
  --tv-primary: #4f46e5;
  --tv-primary-dark: #4338ca;
  --tv-accent: #ec4899;
  --tv-dark: #0f172a;
  --tv-dark-2: #1e293b;
  --tv-radius: 14px;
  --tv-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --tv-shadow-hover: 0 8px 16px rgba(15,23,42,.06), 0 16px 40px rgba(15,23,42,.12);
}

html{scroll-behavior:smooth;}

body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--tv-bg);
  color: var(--tv-text);
}

a{ text-decoration:none; }
.text-primary-tv{ color: var(--tv-primary) !important; }

/* Navbar */
.tv-navbar{
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
  position: sticky; top:0; z-index: 1030;
}
.tv-navbar.scrolled{
  border-bottom-color: var(--tv-border);
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
}
.tv-logo{
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--tv-text) !important;
}
.tv-logo span{ color: var(--tv-primary); }
.tv-navbar .nav-link{
  font-weight: 500;
  color: var(--tv-text-muted);
}
.tv-navbar .nav-link:hover,
.tv-navbar .nav-link.active{ color: var(--tv-text); }

/* Buttons */
.btn-tv-primary{
  background: var(--tv-primary);
  border-color: var(--tv-primary);
  color:#fff;
  font-weight:600;
}
.btn-tv-primary:hover{ background: var(--tv-primary-dark); border-color: var(--tv-primary-dark); color:#fff; }
.btn-tv-outline{
  border: 1px solid var(--tv-border);
  color: var(--tv-text);
  font-weight:600;
  background:#fff;
}
.btn-tv-outline:hover{ border-color: var(--tv-primary); color: var(--tv-primary); }

/* Hero */
.tv-hero{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(79,70,229,.15), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(236,72,153,.12), transparent 60%),
    var(--tv-dark);
  color:#fff;
  padding: 5.5rem 0 4rem;
}
.tv-hero h1{ font-weight: 800; letter-spacing:-.03em; }
.tv-hero .lead{ color: rgba(255,255,255,.72); }
.tv-hero-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  padding:.35rem .75rem; border-radius:999px; font-size:.8rem; font-weight:600;
}

.tv-search{
  background:#fff; border-radius: 999px; padding:.35rem;
  box-shadow: var(--tv-shadow-hover);
}
.tv-search input{
  border:none; outline:none; background:transparent; padding:.6rem 1rem; flex:1; min-width:0;
}
.tv-search button{ border-radius:999px; }

/* Ad slots */
.tv-ad-slot{
  border: 1px dashed #cbd5e1;
  background: #f1f5f9;
  color: var(--tv-text-muted);
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  min-height: 90px;
}
.tv-ad-slot.tv-ad-tall{ min-height: 250px; }
.tv-ad-slot.tv-ad-wide{ min-height: 120px; }

/* Section titles */
.tv-eyebrow{
  color: var(--tv-primary); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
}
.tv-section-title{ font-weight:800; letter-spacing:-.02em; }
.tv-section-sub{ color: var(--tv-text-muted); }

/* Category cards */
.tv-cat-card{
  display:block; border-radius: var(--tv-radius); padding: 1.5rem;
  background: var(--tv-surface); border:1px solid var(--tv-border);
  box-shadow: var(--tv-shadow); transition: transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.tv-cat-card:hover{ transform: translateY(-3px); box-shadow: var(--tv-shadow-hover); }
.tv-cat-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff; margin-bottom:1rem;
}
.tv-cat-card h3{ font-weight:700; font-size:1.1rem; color: var(--tv-text); }
.tv-cat-card p{ color: var(--tv-text-muted); font-size:.92rem; margin-bottom:.5rem; }
.tv-cat-count{ font-size:.8rem; color: var(--tv-text-muted); font-weight:600; }

/* Template cards */
.tv-card{
  background: var(--tv-surface); border:1px solid var(--tv-border); border-radius: var(--tv-radius);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  box-shadow: var(--tv-shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.tv-card:hover{ transform: translateY(-4px); box-shadow: var(--tv-shadow-hover); }
.tv-thumb{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.tv-thumb .tv-thumb-icon{ font-size:2.4rem; opacity:.9; }
.tv-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  transition: transform .25s ease;
}
.tv-card:hover .tv-thumb img{ transform: scale(1.03); }
.tv-thumb::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
}
.tv-thumb-fallback{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
}
.tv-badge-free{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  background: rgba(15,23,42,.75); color:#fff; font-size:.7rem; font-weight:700;
  padding:.25rem .55rem; border-radius:999px; letter-spacing:.03em;
}
.tv-card-body{ padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.tv-card-cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.tv-card-title{ font-weight:700; margin:.25rem 0 .35rem; color: var(--tv-text); }
.tv-card-desc{ font-size:.87rem; color: var(--tv-text-muted); flex:1; }
.tv-tag{
  display:inline-block; font-size:.72rem; color: var(--tv-text-muted);
  background:#f1f5f9; border:1px solid var(--tv-border); border-radius:999px; padding:.15rem .55rem; margin:.15rem .25rem .15rem 0;
}
.tv-card-actions{ display:flex; gap:.5rem; margin-top:.9rem; }
.tv-card-actions .btn{ flex:1; font-size:.85rem; padding:.45rem .6rem; }

/* Download counters */
.tv-count-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.28); color:#fff; font-size:.72rem; font-weight:700;
  padding:.08rem .4rem; border-radius:999px; margin-left:.35rem; min-width:1.4em; vertical-align:1px;
}
.tv-count-pill:empty{ display:none; }
@keyframes tv-pill-bump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.tv-count-pill.tv-bump{ animation: tv-pill-bump .35s ease; }

/* Filter bar */
.tv-filter-btn{
  border:1px solid var(--tv-border); background:#fff; color: var(--tv-text-muted);
  border-radius:999px; padding:.4rem 1rem; font-size:.85rem; font-weight:600; margin:.2rem;
}
.tv-filter-btn.active{ background: var(--tv-dark); color:#fff; border-color: var(--tv-dark); }

/* Steps */
.tv-step-num{
  width:38px; height:38px; border-radius:50%; background: var(--tv-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:.75rem;
}

/* Detail page */
.tv-detail-hero{
  aspect-ratio: 16/8; border-radius: var(--tv-radius); position:relative; overflow:hidden; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.tv-detail-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.tv-detail-hero .tv-thumb-icon{ font-size:4rem; }
.tv-feature-list li{ padding:.3rem 0; color: var(--tv-text); }
.tv-feature-list li i{ color: var(--tv-primary); margin-right:.5rem; }
.tv-meta-box{
  background:#fff; border:1px solid var(--tv-border); border-radius: var(--tv-radius); padding:1.25rem;
}

/* Footer */
.tv-footer{ background: var(--tv-dark); color: rgba(255,255,255,.65); }
.tv-footer h6{ color:#fff; font-weight:700; }
.tv-footer a{ color: rgba(255,255,255,.6); }
.tv-footer a:hover{ color:#fff; }
.tv-footer hr{ border-color: rgba(255,255,255,.1); }

/* Misc */
.tv-breadcrumb a{ color: var(--tv-text-muted); }
.tv-breadcrumb a:hover{ color: var(--tv-primary); }
section{ scroll-margin-top: 90px; }