@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #ffffff;
  --surface:   #f9f9f9;
  --surface2:  #f0f0f0;
  --surface3:  #e8e8e8;
  --border:    #b8b8b8;
  --border2:   #cccccc;
  --ink:       #1a1a1a;
  --ink-muted: #666666;
  --ink-faint: #747474;
  --accent:    #d30430;
  --accent-d:  #b00328;
  --accent2:   #d30430;
  --red:       #d30430;
  --green:     #3ecf8e;
  --blue:      #4a9eff;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius:    6px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --max-w:     1200px;
  --nav-h:     64px;
  --shadow:    0 4px 24px rgba(0,0,0,.08);
}

html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; min-height:100vh; display:flex; flex-direction:column; align-items:center; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; }

#app { display:flex; flex-direction:column; width:100%; max-width:var(--max-w); }

/* ── Layout ──────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 1.5rem; }

/* ── Navbar ──────────────────────────────────────── */
.navbar {
  width: 100%;
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.navbar .container {
  display: flex; align-items: center;
  gap: 1.5rem; width: 100%;
}

/* Logo */
.nav-logo {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  color: var(--ink); flex-shrink: 0; display: flex; align-items: center;
}
.nav-logo img { height: 46px; width: auto; }
.nav-logo span { color: var(--accent); }

/* Desktop nav links */
.nav-links {
  display: flex; align-items: center;
  gap: .125rem; list-style: none; flex: 1;
}
.nav-links a {
  padding: .4rem .7rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: var(--ink-muted);
  transition: color .15s, background .15s; white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); background: var(--surface2); }
.nav-links a.btn { color: #fff; background: var(--accent); padding: .4rem .875rem; }
.nav-links a.btn:hover { background: var(--accent-d); }

/* Right side: search + admin */
.nav-right {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
.nav-search {
  display: flex; align-items: center; gap: .375rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: .3rem .3rem .3rem .75rem;
  transition: border-color .15s;
}
.nav-search:focus-within { border-color: var(--ink-muted); }
.nav-search input {
  background: none; border: none; outline: none;
  color: var(--ink); font-size: .875rem; width: 160px;
}
.nav-search button {
  background: var(--surface2); border: none; cursor: pointer;
  border-radius: 99px; padding: .3rem .625rem;
  color: var(--ink-muted); font-size: .8125rem;
  transition: background .15s;
}
.nav-search button:hover { background: var(--surface3); color: var(--ink); }

.nav-admin-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--ink-faint); border: 1px solid var(--border);
  background: transparent; flex-shrink: 0; font-size: .875rem;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-admin-btn:hover { color: var(--ink); background: var(--surface2); border-color: var(--ink-muted); }

/* Hamburger — hidden on desktop */
.nav-toggle {
  display: none; background: none; border: none;
  cursor: pointer; color: var(--ink); font-size: 1.375rem;
  padding: .25rem; flex-shrink: 0; margin-left: auto;
}

/* ── Top progress bar loader ─────────────────────── */
#loading-bar { position:fixed; top:0; left:0; z-index:9999; height:3px; width:0%; opacity:0; background:linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow:0 0 8px var(--accent); pointer-events:none; }

/* ── Loading overlay ─────────────────────────────── */
#loading { position:fixed; inset:0; z-index:9998; background:#ffffff; display:none; align-items:center; justify-content:center; }
.loader-logo { height:80px; width:auto; animation:pulse-logo 1.4s ease-in-out infinite; }
@keyframes pulse-logo { 0%, 100% { transform:scale(1); opacity:0.75; } 50% { transform:scale(1.08); opacity:1; } }

/* ── Toast ───────────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:var(--surface); border:1px solid var(--border); color:var(--ink); padding:.7rem 1.125rem; border-radius:var(--radius-lg); font-size:.875rem; opacity:0; transform:translateY(6px); transition:opacity .22s, transform .22s; max-width:300px; box-shadow:var(--shadow); }
.toast--visible { opacity:1; transform:none; }
.toast--success { border-color:var(--green); color:var(--green); }
.toast--error   { border-color:var(--red);   color:var(--red);   }

/* ── Buttons ─────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.125rem; border-radius:var(--radius); font-weight:600; font-size:.875rem; cursor:pointer; border:1px solid transparent; background:var(--surface2); color:var(--ink); transition:background .15s, border-color .15s, color .15s; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--surface3); }
.btn--accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--accent:hover { background:var(--accent-d); border-color:var(--accent-d); }
.btn--ghost { background:none; border-color:var(--border); }
.btn--ghost:hover { background:var(--surface2); }
.btn--lg { font-size:1rem; border-radius:var(--radius-lg); }
.btn--sm { padding:.3rem .65rem; font-size:.8125rem; }
.btn--full { width:100%; justify-content:center; }
.btn--plain { background:none; border-color:transparent; color:var(--accent); padding-left:0; text-decoration:underline; }
.btn--plain:hover { background:none; color:var(--accent-d); }
.badge { background:var(--red); color:#fff; border-radius:99px; font-size:.7rem; padding:.1rem .45rem; margin-left:.375rem; }

/* ── Tags ────────────────────────────────────────── */
.tag { display:inline-block; padding:.175rem .6rem; border-radius:99px; font-size:.75rem; font-weight:600; background:var(--surface2); color:var(--ink-muted); text-transform:capitalize; letter-spacing:.03em; }

/* ── Cards ───────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; }
.card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow); }
.card-img-link { display:block; aspect-ratio:16/9; overflow:hidden; }
.card-img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.card:hover .card-img { transform:scale(1.04); }
.card-body { padding:1rem 1.125rem 1.125rem; }
.card-body .tag { margin-bottom:.5rem; }
.card-title { font-family:var(--font-display); font-size:1rem; font-weight:700; line-height:1.3; margin-bottom:.4rem; }
.card-title a:hover { color:var(--accent); }
.card-excerpt { font-size:.875rem; color:var(--ink-muted); line-height:1.6; margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-date { font-size:.75rem; color:var(--ink-faint); }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1.125rem; }

/* ── Hero ────────────────────────────────────────── */
.hero { position:relative; min-height:500px; display:flex; align-items:flex-end; border-radius:var(--radius-xl); overflow:hidden; margin:1.25rem; max-width:var(--max-w); padding:0 1.5rem; transition:opacity .2s; }
.hero:hover { opacity:.96; }
.hero-img { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.15) 55%,transparent 100%); }
.hero-body { position:relative; z-index:1; padding:2.5rem; max-width:660px; }
.hero-tag { margin-bottom:.75rem; background:var(--accent); color:#fff; }
.hero-body h1 { font-family:var(--font-display); font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:800; line-height:1.15; margin-bottom:.75rem; color:#fff; }
.hero-body p { font-size:1rem; color:rgba(255,255,255,.78); margin-bottom:1.25rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Home ────────────────────────────────────────── */
.home-section { max-width:var(--max-w); margin:2.75rem auto; padding:0 1.5rem; }
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
.section-header h2 { font-family:var(--font-display); font-size:1.375rem; font-weight:700; }
.section-header h1 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.view-all { font-size:.8125rem; color:var(--accent); font-weight:600; }
.view-all:hover { text-decoration:underline; }

/* ── Listing ─────────────────────────────────────── */
.page-listing { max-width:var(--max-w);  padding:2.5rem 1.5rem 4rem; }
.listing-header { margin-bottom:1.75rem; }
.listing-header h1 { font-family:var(--font-display); font-size:clamp(1.875rem,4vw,2.875rem); font-weight:800; margin-bottom:.4rem; }
.listing-header p { color:var(--ink-muted); max-width:540px; }
.listing-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.filter-btn { padding:.375rem .85rem; border-radius:99px; font-size:.8125rem; font-weight:600; border:1px solid var(--border); color:var(--ink-muted); background:none; cursor:pointer; text-decoration:none; transition:all .15s; }
.filter-btn:hover, .filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.listing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1.125rem; }
.listing-grid--products { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

/* ── Article ─────────────────────────────────────── */
.page-article { max-width:var(--max-w); margin:0 auto; padding:2.5rem 1.5rem 4rem; display:grid; grid-template-columns:1fr 360px; gap:3rem; align-items:start; }
.article-wrap { min-width:0; }
.article-header { margin-bottom:1.75rem; }
.article-meta-top { display:flex; align-items:center; gap:.875rem; margin-bottom:.875rem; }
.article-meta-top time { font-size:.8125rem; color:var(--ink-faint); }
.article-title { font-family:var(--font-display); font-size:clamp(1.625rem,3.5vw,2.625rem); font-weight:800; line-height:1.2; margin-bottom:.75rem; }
.article-excerpt { font-size:1.0625rem; color:var(--ink-muted); line-height:1.7; margin-bottom:1.25rem; }
.article-share { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.article-share--bottom { padding-top:1.75rem; border-top:1px solid var(--border); align-items:center; }
.article-share--bottom span { font-size:.875rem; color:var(--ink-muted); }
.article-body { font-size:1.0625rem; line-height:1.85; color:var(--ink); }
.article-body h2 { font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin:2rem 0 .75rem; }
.article-body h3 { font-family:var(--font-display); font-size:1.25rem; margin:1.5rem 0 .625rem; }
.article-body p { margin-bottom:1.125rem; }
.article-body ul,.article-body ol { padding-left:1.5rem; margin-bottom:1.125rem; }
.article-body li { margin-bottom:.5rem; }
.article-sidebar { position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.article-buttons { display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0; padding:1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }

/* ── Share buttons ───────────────────────────────── */
.share-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.375rem .825rem; border-radius:var(--radius); font-size:.8125rem; font-weight:600; border:1px solid var(--border); color:var(--ink-muted); cursor:pointer; text-decoration:none; background:var(--surface); transition:all .15s; }
.share-btn:hover { border-color:var(--ink-faint); color:var(--ink); }
.share-btn--twitter:hover  { border-color:#1DA1F2; color:#1DA1F2; }
.share-btn--facebook:hover { border-color:#1877F2; color:#1877F2; }
.share-btn--whatsapp:hover { border-color:#25D366; color:#25D366; }

/* ── Media strip ─────────────────────────────────── */
.media-strip { display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0; }
.media-strip-item { position:relative; width:80px; height:80px; border-radius:var(--radius); overflow:hidden; cursor:pointer; border:1px solid var(--border); transition:transform .15s; flex-shrink:0; }
.media-strip-item:hover { transform:scale(1.05); }
.media-thumb-img { width:100%; height:100%; object-fit:cover; }
.media-thumb { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.media-thumb--video { background:#e8e8f0; color:#4a6eff; }
.media-thumb--audio { background:#e8f0e8; color:#2e8b57; }
.media-strip-more { position:absolute; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9375rem; color:#fff; }

/* ── Media viewer / lightbox ─────────────────────── */
#media-viewer { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; }
#media-viewer.mv-open { display:flex; }
.mv-overlay { position:absolute; inset:0; background:rgba(0,0,0,.92); }
.mv-box { position:relative; z-index:1; display:flex; align-items:center; gap:1rem; max-width:92vw; max-height:90vh; padding:0 .5rem; }
.mv-media { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; overflow:hidden; }
.mv-media img { max-width:100%; max-height:82vh; border-radius:var(--radius-lg); object-fit:contain; }
.mv-media video { max-width:100%; max-height:82vh; border-radius:var(--radius-lg); }
.mv-media audio { width:320px; }
.mv-close { position:fixed; top:1.25rem; right:1.25rem; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1rem; width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; z-index:2; }
.mv-close:hover { background:rgba(0,0,0,.75); }
.mv-prev, .mv-next { background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:1rem; width:44px; height:44px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; flex-shrink:0; z-index:2; position:relative; }
.mv-prev:hover, .mv-next:hover { background:rgba(0,0,0,.7); border-color:rgba(255,255,255,.35); }
.mv-dots { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; }
.mv-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .15s; }
.mv-dot--active { background:#fff; }

/* ── Social comments ─────────────────────────────── */
.comments-box { }
.comments-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; padding-bottom:.875rem; border-bottom:1px solid var(--border); }
.comments-count { font-weight:700; font-size:1rem; }
.comments-logout-btn { background:none; border:none; color:var(--ink-faint); font-size:.8125rem; cursor:pointer; }
.comments-logout-btn:hover { color:var(--ink); }
.compose-form { margin-bottom:1.5rem; }
.compose-identity { display:grid; grid-template-columns:1fr 1fr; gap:.625rem; margin-bottom:.625rem; }
.compose-identity input { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.5rem .75rem; color:var(--ink); outline:none; font-size:.875rem; }
.compose-identity input:focus { border-color:var(--accent); }
.compose-who { display:flex; align-items:center; gap:.625rem; margin-bottom:.625rem; font-size:.875rem; color:var(--ink-muted); }
.compose-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; flex-shrink:0; }
.compose-input-row { display:flex; gap:.5rem; align-items:flex-end; }
.compose-input-row textarea { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:.625rem .875rem; color:var(--ink); outline:none; resize:none; font-size:.9375rem; line-height:1.5; transition:border-color .15s; }
.compose-input-row textarea:focus { border-color:var(--accent); }
.compose-btn { background:var(--accent); border:none; color:#fff; width:36px; height:36px; border-radius:50%; font-size:1.125rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
.compose-btn:hover { background:var(--accent-d); }
.compose-btn:disabled { opacity:.5; cursor:wait; }
.comments-list { display:flex; flex-direction:column; gap:0; }
.comment { display:flex; gap:.75rem; padding:1rem 0; border-bottom:1px solid var(--border); }
.comment--reply { padding:.75rem 0 .75rem .375rem; border-bottom:none; }
.comment-avatar { width:34px; height:34px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9375rem; flex-shrink:0; color:var(--ink-muted); }
.comment-body { flex:1; min-width:0; }
.comment-header { display:flex; align-items:baseline; gap:.625rem; margin-bottom:.3rem; }
.comment-name { font-weight:600; font-size:.9375rem; }
.comment-time { font-size:.75rem; color:var(--ink-faint); }
.comment-text { font-size:.9375rem; color:var(--ink); line-height:1.6; word-break:break-word; }
.comment-actions { margin-top:.4rem; }
.comment-reply-btn { background:none; border:none; color:var(--ink-faint); font-size:.8125rem; cursor:pointer; padding:.2rem 0; }
.comment-reply-btn:hover { color:var(--accent); }
.comment-replies { margin-top:.75rem; padding-left:.75rem; border-left:2px solid var(--border); }
.no-comments { color:var(--ink-faint); font-size:.9375rem; padding:1rem 0; }
.comments-loading { color:var(--ink-faint); font-size:.875rem; padding:1rem 0; }

/* ── Submit ───────────────────────────────────────── */
.page-submit { max-width:var(--max-w); margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.submit-wrap { max-width:640px; }
.submit-wrap header { margin-bottom:1.75rem; }
.submit-wrap header .tag { margin-bottom:.625rem; }
.submit-wrap h1 { font-family:var(--font-display); font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:.625rem; }
.submit-wrap > header p { color:var(--ink-muted); }
.submit-notice { background:rgba(211,4,48,.08); border:1px solid rgba(211,4,48,.25); border-radius:var(--radius); padding:.8rem 1rem; font-size:.875rem; color:var(--ink-muted); margin-bottom:1.75rem; }
.submit-success { background:rgba(62,207,142,.08); border:1px solid rgba(62,207,142,.25); border-radius:var(--radius-lg); padding:1.5rem; text-align:center; margin-bottom:1.5rem; }
.submit-success-icon { font-size:2.25rem; color:var(--green); margin-bottom:.5rem; }

/* ── Forms ───────────────────────────────────────── */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.125rem; }
.form-field label { font-size:.8125rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em; }
.form-field input,.form-field select,.form-field textarea { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.625rem .875rem; color:var(--ink); outline:none; transition:border-color .15s; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--accent); }
.form-field select { appearance:none; cursor:pointer; }

/* ── Upload field ─────────────────────────────────── */
.upload-label { display:flex; align-items:center; gap:.875rem; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-lg); padding:1rem 1.25rem; cursor:pointer; transition:border-color .15s; }
.upload-label:hover { border-color:var(--accent); }
.upload-icon { font-size:1.5rem; }
.upload-label strong { display:block; font-size:.9375rem; margin-bottom:.125rem; }
.upload-label small { font-size:.75rem; color:var(--ink-faint); }
.upload-previews { display:flex; flex-wrap:wrap; gap:.375rem; margin-top:.625rem; }
.upload-pill { background:var(--surface2); border:1px solid var(--border); border-radius:99px; padding:.25rem .7rem; font-size:.75rem; color:var(--ink-muted); }
.upload-progress-bar { height:4px; background:var(--surface2); border-radius:99px; margin:.75rem 0 .375rem; overflow:hidden; }
.upload-progress-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .3s; width:0; }
.upload-progress-text { font-size:.8125rem; color:var(--ink-faint); }

/* ── Newsletter ──────────────────────────────────── */
.newsletter-banner { padding:4rem 1.5rem; text-align:center; margin-top:3rem; }
.newsletter-banner h2 { font-family:var(--font-display); font-size:2rem; font-weight:800; margin-bottom:.5rem; }
.newsletter-banner p { color:var(--ink-muted); margin-bottom:1.5rem; }
.newsletter-form { display:flex; gap:.5rem; max-width:400px; margin:0 auto; }
.newsletter-form input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:.625rem .875rem; color:var(--ink); outline:none; }
.newsletter-form input:focus { border-color:var(--accent); }

/* ── Search ──────────────────────────────────────── */
.search-form { display:flex; gap:.625rem; max-width:520px; margin-top:.75rem; }
.search-form input { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.625rem .875rem; color:var(--ink); outline:none; }
.search-form input:focus { border-color:var(--accent); }

/* ── Store / Product ─────────────────────────────── */
.page-product { max-width:var(--max-w); margin:0 auto; padding:2.5rem 1.5rem 4rem; }
.breadcrumb { font-size:.875rem; color:var(--ink-faint); margin-bottom:2rem; display:flex; gap:.375rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--accent); }
.product-detail { display:grid; grid-template-columns:1fr 380px; gap:3rem; align-items:start; }
.product-main-img { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; position:relative; }
.product-main-img img { width:100%; height:100%; object-fit:cover; }
.img-count { position:absolute; bottom:.75rem; right:.75rem; background:rgba(0,0,0,.7); color:#fff; font-size:.75rem; padding:.25rem .6rem; border-radius:99px; }
.product-no-img { background:var(--surface2); border-radius:var(--radius-lg); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.product-detail-body h1 { font-family:var(--font-display); font-size:1.75rem; font-weight:800; margin:.75rem 0 .75rem; }
.product-desc { color:var(--ink-muted); margin-bottom:1.5rem; line-height:1.7; }
.product-price { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:1.5rem; color:var(--accent); }
.product-actions { display:flex; flex-direction:column; gap:.75rem; }
.purchase-form { margin-top:1.5rem; padding:1.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.purchase-form h3 { font-family:var(--font-display); font-size:1.125rem; font-weight:700; margin-bottom:1.25rem; }
.product-preview { margin-top:1.25rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.25rem; }
.product-preview-label { font-size:.8125rem; font-weight:600; color:var(--ink-muted); margin-bottom:.75rem; display:flex; align-items:center; gap:.375rem; }
.product-preview-player { width:100%; border-radius:var(--radius); display:block; }
.product-variations { margin-bottom:1.25rem; }
.product-variations .form-field { margin-bottom:.75rem; }
.variation-select { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.625rem .875rem; color:var(--ink); outline:none; appearance:none; cursor:pointer; }
.variation-select:focus { border-color:var(--accent); }

/* ── Admin ───────────────────────────────────────── */
.page-admin { width:100%; max-width:var(--max-w); margin:0 auto; padding:2rem 1.5rem 4rem; }
.admin-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem; flex-wrap:wrap; gap:1rem; }
.admin-header h1 { font-family:var(--font-display); font-size:2rem; font-weight:800; }
.admin-tabs { display:flex; gap:.125rem; border-bottom:1px solid var(--border); margin-bottom:2rem; overflow-x:auto; }
.admin-tab { padding:.6rem .95rem; font-size:.875rem; font-weight:600; color:var(--ink-muted); border-bottom:2px solid transparent; text-decoration:none; transition:all .15s; white-space:nowrap; }
.admin-tab:hover { color:var(--ink); }
.admin-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.admin-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.admin-toolbar h2 { font-family:var(--font-display); font-size:1.375rem; font-weight:700; }
.admin-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.admin-table th { padding:.7rem 1rem; text-align:left; font-weight:600; color:var(--ink-faint); border-bottom:1px solid var(--border); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }
.admin-table td { padding:.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:hover td { background:var(--surface); }
.admin-table a:hover { color:var(--accent); }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.125rem; margin-bottom:2rem; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.375rem; display:block; text-decoration:none; color:inherit; position:relative; transition:border-color .15s, transform .15s, box-shadow .15s; }
.stat-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-icon { font-size:1.5rem; margin-bottom:.5rem; color:var(--accent); }
.stat-value { font-family:var(--font-display); font-size:2.25rem; font-weight:800; color:var(--ink); line-height:1; }
.stat-label { font-size:.8125rem; color:var(--ink-faint); margin-top:.375rem; }
.stat-card-arrow { position:absolute; top:1.375rem; right:1.125rem; color:var(--ink-faint); font-size:.75rem; transition:color .15s, transform .15s; }
.stat-card:hover .stat-card-arrow { color:var(--accent); transform:translateX(3px); }
.submission-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:.875rem; }
.submission-card--pending { border-color:rgba(211,4,48,.35); }
.submission-meta { display:flex; align-items:start; justify-content:space-between; gap:1rem; margin-bottom:.375rem; }
.submission-meta strong { font-family:var(--font-display); font-size:1rem; font-weight:700; }
.submission-info { font-size:.8125rem; color:var(--ink-faint); margin-bottom:.625rem; }
.submission-desc { font-size:.875rem; color:var(--ink-muted); margin-bottom:.75rem; }
.submission-actions { display:flex; gap:.625rem; margin-top:.875rem; }
.modal-overlay { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.modal-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-xl); padding:2rem; max-width:480px; width:100%; box-shadow:var(--shadow); }
.modal-box h3 { font-family:var(--font-display); font-size:1.375rem; font-weight:700; margin-bottom:.5rem; }
.comments-panel-box { width:100%; max-width:580px; max-height:82vh; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.comments-panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.5rem 1.5rem 1rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.comments-panel-header h3 { font-family:var(--font-display); font-size:1.125rem; font-weight:700; margin-bottom:.2rem; }
.comments-panel-post-title { font-size:.8125rem; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:380px; }
.comments-panel-body { overflow-y:auto; flex:1; padding:1rem 1.5rem 1.5rem; }
.panel-comment { display:flex; gap:.75rem; padding:.875rem 0; border-bottom:1px solid var(--border); }
.panel-comment:last-child { border-bottom:none; }
.panel-comment--reply { padding:.625rem 0 .625rem .375rem; border-bottom:none; }
.panel-comment-avatar { width:32px; height:32px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:var(--ink-muted); flex-shrink:0; }
.panel-comment-body { flex:1; min-width:0; }
.panel-comment-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem; }
.panel-comment-meta strong { font-size:.875rem; font-weight:600; }
.panel-comment-email { font-size:.75rem; color:var(--ink-faint); background:var(--surface2); padding:.1rem .45rem; border-radius:99px; }
.panel-comment-meta time { font-size:.75rem; color:var(--ink-faint); margin-left:auto; }
.panel-delete-btn { background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:.2rem .3rem; border-radius:var(--radius); font-size:.8125rem; transition:color .15s, background .15s; }
.panel-delete-btn:hover { color:var(--red); background:rgba(211,4,48,.08); }
.panel-comment-text { font-size:.9375rem; color:var(--ink); line-height:1.55; word-break:break-word; }
.panel-replies { margin-top:.625rem; padding-left:.75rem; border-left:2px solid var(--border); }

/* ── Misc ────────────────────────────────────────── */
.empty-state { color:var(--ink-faint); padding:2.5rem 0; text-align:center; }
.not-found { text-align:center; padding:6rem 1.5rem; }
.not-found h1 { font-family:var(--font-display); font-size:5rem; font-weight:800; color:var(--accent); }
.not-found p { color:var(--ink-muted); margin:1rem 0 1.5rem; }
.error-page { text-align:center; padding:6rem 1.5rem; max-width:480px; margin:0 auto; }
.error-page h2 { font-family:var(--font-display); font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.error-page p { color:var(--ink-muted); margin-bottom:1.5rem; }

/* ── Footer ──────────────────────────────────────── */
.footer { width:100%; background:var(--surface); border-top:1px solid var(--border); padding:3rem 1.5rem 2rem; margin-top:4rem; }
.footer-inner { padding:1rem; max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
.footer-brand a { display:block; margin-bottom:.75rem; }
.footer-logo { height:60px; width:auto; }
.footer-brand p { font-size:.875rem; color:var(--ink-faint); max-width:280px; }
.footer-social { display:flex; gap:1rem; margin-top:1rem; }
.footer-social a { color:var(--ink-faint); font-size:1.125rem; transition:color .15s; }
.footer-social a:hover { color:var(--ink); }
.footer-col h4 { font-weight:700; margin-bottom:1rem; font-size:.875rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.5rem; }
.footer-col ul a { font-size:.875rem; color:var(--ink-muted); }
.footer-col ul a:hover { color:var(--ink); }
.footer-bottom { max-width:var(--max-w); margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.8125rem; color:var(--ink-faint); }

/* ── Product thumbnail strip ─────────────────────── */
.product-thumb-strip { display:flex; gap:.5rem; margin-top:.625rem; flex-wrap:wrap; }
.product-thumb { width:72px; height:72px; border-radius:var(--radius); overflow:hidden; border:2px solid var(--border); cursor:pointer; padding:0; background:none; flex-shrink:0; transition:border-color .15s, transform .15s; }
.product-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.product-thumb:hover { border-color:var(--ink-muted); transform:translateY(-1px); }
.product-thumb--active { border-color:var(--accent); }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .page-article { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .product-detail { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* Tablet: hide Submit Story button text to save space */
@media (max-width: 860px) {
  .nav-links a.btn { font-size: 0; padding: .4rem .6rem; }
  .nav-links a.btn::after { content: '+'; font-size: .9rem; }
  .nav-search input { width: 120px; }
}

/* Mobile: hamburger drawer */
@media (max-width: 640px) {
  /* Hide desktop nav + search */
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    gap: .25rem;
    z-index: 99;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
  }
  .nav-links.open { display: flex; height: 100vh; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: .875rem 1rem;
    font-size: 1rem; font-weight: 500;
    border-radius: var(--radius);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-links a.btn {
    /* Restore full button on mobile drawer */
    font-size: 1rem;
    margin-top: .75rem;
    text-align: center;
    justify-content: center;
    border-bottom: none;
    padding: .875rem 1rem;
  }
  .nav-links a.btn::after { content: none; }
  .nav-links a:hover, .nav-links a.active { background: var(--surface2); color: var(--accent); }

  /* Hide search bar, show hamburger */
  .nav-right { gap: .375rem; }
  .nav-search { display: none; }
  .nav-toggle { display: block; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .compose-identity { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .75rem; text-align: center; }
  .newsletter-form { flex-direction: column; }

  /* Hero */
  .hero { min-height: 320px; margin: .75rem; }
  .hero-body { padding: 1.25rem; }
}
.admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

.admin-table {
  width: 100%;
  min-width: 640px; /* Ensures table doesn't get too squished */
  border-collapse: collapse;
  font-size: .875rem;
}

/* On mobile, reduce min-width slightly */
@media (max-width: 640px) {
  .admin-table {
    min-width: 560px;
  }
}


.section-header-block {
  width: 100%;
  border-bottom: 3px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── People's Reporters TV — white bg, red accent ── */
.section-header-block--reporters {
  background: #fff;
  border-bottom: 3px solid #d30430;
}

/* ── Entertainment — dark bg, gold accent ── */
.section-header-block--timz-entertainment {
  background: #0a0a0a;
  border-bottom: 3px solid #c9a84c;
  padding: 1rem;
}

/* ── Info Hub — white bg, navy accent ── */
.section-header-block--in4hubb {
  background: #fff;
  border-bottom: 3px solid #0a1628;
}

.section-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* SVG logos */
.section-logo-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}

/* Entertainment logo — wide image, constrained height */
.ent-logo {
  height: 60px;
  width: auto;
  max-width: 380px;
  object-fit: contain;
  display: block;
  /* invert if needed since logo is on dark bg */
  filter: brightness(1.1);
}

/* News ticker strip */
.section-header-ticker {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: #f0f0f0;
  border-radius: 3px;
  padding: .375rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  overflow: hidden;
}

.section-header-ticker--dark {
  background: #1a1a1a;
  color: #e0e0e0;
}

.ticker-label {
  background: #d30430;
  color: #fff;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .15rem .5rem;
  border-radius: 2px;
  flex-shrink: 0;
  animation: ticker-pulse 1.5s ease-in-out infinite;
}

.ticker-label--gold {
  background: #c9a84c;
  color: #0a0a0a;
}

.ticker-label--blue {
  background: #0a1628;
  color: #fff;
}

@keyframes ticker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

.ticker-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Listing body (filters + grid) */
.listing-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem;
}

/* Listings page with section header removes the old listing-header */
.page-listing--reporters .listing-header,
.page-listing--timz-entertainment .listing-header,
.page-listing--in4hubb .listing-header { display: none; }

/* Submit CTA filter button */
.filter-btn--cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  margin-left: auto;
}
.filter-btn--cta:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }

/* ═══════════════════════════════════════════════════
   ARTICLE BROADCAST BANNER
   ═══════════════════════════════════════════════════ */

.article-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;

  aspect-ratio: 16/9;
  cursor: zoom-in;
}

.article-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}

.article-banner:hover .article-banner-img {
  transform: scale(1.02);
}

/* Dark gradient overlay — heavier at top and bottom */
.article-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.72) 0%, transparent 35%),
    linear-gradient(to top,    rgba(0,0,0,.82) 0%, transparent 45%);
  pointer-events: none;
}

/* ── Top bar: section title ── */
.article-banner-top {
  padding: 1rem 1.25rem .75rem;
}

.article-banner-section-title {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: clamp(.875rem, 2vw, 1.25rem);
  font-weight: 900;
  font-family: var(--font-display);
  letter-spacing: .06em;
  padding: .375rem .875rem .375rem .5rem;
  border-radius: 3px;
}

.article-banner-bar {
  display: inline-block;
  width: 5px;
  height: 1.4em;
  background: #d30430;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Bottom: category tag + headline ── */
.article-banner-bottom {
  padding: .75rem 1.25rem 1rem;
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

.article-banner-tag {
  flex-shrink: 0;
  background: #d30430;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: .375rem .75rem;
  border-radius: 2px;
  line-height: 1.3;
  white-space: nowrap;
  align-self: flex-end;
  margin-bottom: .125rem;
}

.article-banner-headline {
  color: #fff;
  font-size: clamp(.8125rem, 1.8vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  /* 3 lines max */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Entertainment section: gold accents ── */
.page-article[data-section="timz-entertainment"] .article-banner-bar,
.page-article[data-section="timz-entertainment"] .article-banner-tag {
  background: #c9a84c;
  color: #0a0a0a;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .section-logo-svg { max-width: 280px; }
  .ent-logo { height: 44px; }
  .article-banner-section-title { font-size: .75rem; }
  .article-banner-bottom { gap: .75rem; padding: .5rem .875rem .75rem; }
  .article-banner-tag { font-size: .625rem; padding: .25rem .5rem; }
  .section-logo-img {
    height: 60px;
    width: auto;
    max-width: 380px;
    object-fit: contain;
    display: block;
}



.section-header-logo{
        height: 60px;
    width: auto;
    max-width: 380px;
    object-fit: contain;
    display: block;
}
}




.section-header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    
}

.section-header-logo-wrapper {
     display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
  
    border-radius:var(--radius-xl);
  
    
}

.section-header-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}

.section-header-titles {
    display: flex;
    flex-direction: row;
   
}

.section-header-line1 {
  font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: white;
    background: #d30430;
    padding: 0.15rem 0.75rem;
    border-radius: 2px;
    
    display: inline-block;
    width: fit-content;
}

.section-header-line2 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: white;
    background: #d30430;
    padding: 0.15rem 0.75rem;
    border-radius: 2px;
    
    display: inline-block;
    width: fit-content;
}

/* Entertainment keeps only the logo */
.section-header-block--timz-entertainment .section-header-logo-wrapper {
    margin-bottom: 0;
}/* SIMPLE CLEAN ARTICLE BANNER - OVERRIDE ALL CONFLICTS */
.article-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
  
}

.article-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}

.article-banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
}

.article-banner-title {
  color: white !important;
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  letter-spacing: -0.02em;
}

/* Hide the old conflicting elements */
.article-banner-top,
.article-banner-bottom,
.article-banner-tag,
.article-banner-headline,
.article-banner-section-title {
  display: none !important;
}

@media (max-width: 640px) {
  .article-banner-content {
    padding: 0.5rem;
  }
  .article-banner-title {
    font-size: 1.25rem !important;
  }
}
/* Replace the old section-header-logo styles with this */
.section-header-logo-full {

  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-xl);
}

/* Remove the old section-header-titles styles since we no longer need them */
.section-header-titles {
  display: none;
}

/* Keep the logo wrapper for layout */
.section-header-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* Entertainment keeps only the logo */
.section-header-block--timz-entertainment .section-header-logo-wrapper {
  margin-bottom: 0;
}