/* ============================================================
   BLOG.CSS — Vinit Templates
   ============================================================ */
main{margin-top:6rem;}
.detail-wrap { display:grid; grid-template-columns:1fr 360px; gap:var(--space-12); align-items:start; padding-block:var(--space-12) var(--space-20); }
@media(max-width:1024px){ .detail-wrap{ grid-template-columns:1fr; } }
.breadcrumb { display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-inter); font-size:var(--text-sm); color:var(--color-text-3); padding-top:calc(var(--nav-height)+var(--space-6)); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); margin-bottom:0; }
.breadcrumb a { color:var(--color-text-3); transition:color var(--duration-fast); }
.breadcrumb a:hover { color:var(--color-accent); }
/* Preview */
.detail__browser { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); margin-bottom:2rem; }
.detail__bar { display:flex; align-items:center; gap:5px; padding:9px 14px; background:var(--color-bg-2); border-bottom:1px solid var(--color-border); }
.detail__dot { width:9px; height:9px; border-radius:50%; }
.detail__url { flex:1; background:var(--color-bg); border-radius:20px; padding:3px 12px; font-family:var(--font-inter); font-size:10px; color:var(--color-text-3); text-align:center; }
.detail__screen { min-height:320px; background:#fafafa; padding:20px; display:flex; flex-direction:column; gap:8px; }
.ds__nav { height:8px; background:rgba(255,255,255,0.55); border-radius:4px; }
.ds__hero { display:flex; flex-direction:column; gap:7px; padding:12px 0; }
.ds__h { height:15px; background:rgba(0,0,0,0.2); border-radius:4px; }
.ds__h--sm { width:60%; background:rgba(0,0,0,0.14); }
.ds__sub { height:6px; width:80%; background:rgba(0,0,0,0.1); border-radius:3px; }
.ds__btns { display:flex; gap:7px; margin-top:5px; }
.ds__btn { height:20px; width:70px; border-radius:10px; background:var(--color-accent); opacity:0.85; }
.ds__btn--ghost { background:transparent; border:1.5px solid rgba(0,0,0,0.18); }
.ds__cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:8px; }
.ds__card { height:50px; background:rgba(255,255,255,0.6); border-radius:6px; }
/* Sidebar */
.detail__sidebar { position:sticky; top:calc(var(--nav-height)+var(--space-6)); display:flex; flex-direction:column; gap:var(--space-4); }
.sidebar-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); }
.sc__header { padding:var(--space-6); border-bottom:1px solid var(--color-border); }
.sc__meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4); }
.sc__rating { font-size:var(--text-xs); color:var(--color-text-3); font-family:var(--font-inter); }
.sc__rating .stars { color:#f59e0b; letter-spacing:1px; }
.sc__title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:800; letter-spacing:-.02em; margin-bottom:var(--space-3); }
.sc__tag { font-family:var(--font-inter); font-size:var(--text-xs); color:var(--color-text-3); margin-bottom: 0; }
.sc__price-block { padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border); }
.sc__price { display:flex; align-items:baseline; gap:var(--space-3); margin-bottom:4px; }
.sc__price-main { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; }
.sc__price-orig { font-size:var(--text-lg); color:var(--color-text-3); text-decoration:line-through; }
.sc__price-save { font-family:var(--font-inter); font-size:var(--text-xs); font-weight:700; background:#dcfce7; color:#15803d; padding:2px 8px; border-radius:var(--radius-full); }
.sc__price-note { font-family:var(--font-inter); font-size:var(--text-xs); color:var(--color-text-3); margin-bottom: 0; }
.sc__ctas { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border); }
.sc__includes { padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--color-border); }
.sc__includes h4 { font-family:var(--font-inter); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-3); margin-bottom:var(--space-4); }
.sc__includes ul { display:flex; flex-direction:column; gap:var(--space-3); }
.sc__includes li { display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-inter); font-size:var(--text-sm); color:var(--color-text-2); }
.sc__trust { padding:var(--space-4) var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); }
.sc__trust-item { display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-inter); font-size:var(--text-xs); color:var(--color-text-3); }
/* Sections list */
.sections-overview { margin-top:var(--space-10); }
.sections-overview h3 { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-5); }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.chip { display:flex; align-items:center; gap:var(--space-2); padding:8px 16px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-full); font-family:var(--font-inter); font-size:var(--text-sm); font-weight:500; color:var(--color-text-2); transition:all var(--duration-fast); }
.chip:hover { border-color:rgba(var(--color-accent-rgb),.35); color:var(--color-accent); background:var(--color-accent-bg); }
/* Related */
.related { padding-top:var(--space-12); border-top:1px solid var(--color-border); margin-top:var(--space-12); margin-bottom:var(--space-12); }
.related h3 { font-family:var(--font-display); font-size:var(--text-xl); font-weight:800; margin-bottom:var(--space-8); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
@media(max-width:768px){ .related-grid{ grid-template-columns:1fr; } }
h1{margin: 2rem 0 0 0; line-height: var(--leading-snug);}
p{margin-bottom: 1.5rem;}
.disc-list-style{list-style: disc; margin: 1rem 0 1rem 1.8rem; line-height: 2rem;}