/* Blog uses the storefront's flat surfaces, Manrope/Myanmar fonts and accent pills. */
html[data-blog-document] #store-view { display: none !important; }
html.dz-pg[data-blog-document] #server-route-content { max-width: 1136px; margin: 0 auto; padding: 8px 0 40px; }
html.dz-pg[data-blog-document] #server-route-content > nav[aria-label="Breadcrumb"] { max-width: none; margin: 0 0 20px; font-size: 12px; }
html.dz-pg[data-blog-document] #server-route-content[data-blog-view="article"] { max-width: 880px; }
html.dz-pg[data-blog-document] .seo-intro { margin: 0 0 26px; }
html.dz-pg[data-blog-document] .seo-intro h1 { font-size: clamp(28px,3.5vw,42px); line-height: 1.45; letter-spacing: -.025em; }
html.dz-pg[data-blog-document] .seo-intro p { max-width: 700px; font-size: 15px; line-height: 1.85; margin-top: 12px; }
.blog-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 18px; color: var(--dz-muted,#5F6672); font-size: 13px; }
.blog-store-link,.blog-back-link { display: inline-flex; align-items: center; gap: 12px; color: var(--dz-accent,#3B5BDB); font-weight: 700; font-size: 13px; text-decoration: none; }
.blog-store-link { background: var(--dz-card,#fff); border-radius: 999px; padding: 12px 18px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 20px; }
.blog-list-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.blog-list-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 24px; background: var(--dz-card,#fff); color: var(--dz-text,#111318); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.blog-list-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(17,19,24,.06); }
.blog-card-media { aspect-ratio: 16/9; overflow: hidden; background: #EDF1F8; }
.blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-cover-placeholder { height: 100%; display: grid; place-items: center; color: var(--dz-accent,#3B5BDB); font-size: 24px; font-weight: 800; }
.blog-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 24px; }
.blog-category { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #EDF0FF; color: var(--dz-accent,#3B5BDB); font-size: 11px; font-weight: 700; line-height: 1.7; }
.blog-card-body h2 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dz-text,#111318); font-size: 22px; font-weight: 800; line-height: 1.6; margin: 14px 0 10px; }
.blog-card-body > p { color: var(--dz-muted,#5F6672); font-size: 14px; line-height: 1.9; margin: 0 0 22px; }
.blog-card-footer { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid #EEF0F3; }
.blog-card-footer time { color: var(--dz-muted,#5F6672); font-size: 11px; }
.blog-link { display: inline-flex; align-items: center; gap: 12px; color: var(--dz-accent,#3B5BDB); font-size: 13px; font-weight: 700; }
.blog-reading-surface { padding: 36px 40px; border-radius: 24px; background: var(--dz-card,#fff); }
.blog-article { max-width: 780px; margin: 0 auto; }
.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; color: var(--dz-muted,#5F6672); font-size: 12px; margin: 0 0 24px; }
.blog-meta time { margin-left: auto; }
.blog-cover { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; margin: 0 0 30px; }
.blog-prose { color: #3A3F47; font-size: 16px; line-height: 2; overflow-wrap: anywhere; }
.blog-prose p,.blog-prose ul,.blog-prose ol { margin: 0 0 22px; }
.blog-prose ul { list-style: disc; padding-left: 23px; }
.blog-prose ol { list-style: decimal; padding-left: 26px; }
.blog-prose li > ul,.blog-prose li > ol { margin-bottom: 0; }
.blog-prose li { padding-left: 3px; margin: 8px 0; }
.blog-prose h2,.blog-prose h3,.blog-prose h4 { color: var(--dz-text,#111318); font-weight: 800; line-height: 1.7; margin: 34px 0 14px; }
.blog-prose h2 { font-size: 23px; }
.blog-prose h3 { font-size: 19px; }
.blog-prose h4 { font-size: 17px; }
.blog-prose a { color: var(--dz-accent,#3B5BDB); text-decoration: underline; text-underline-offset: 4px; }
.blog-prose strong { color: var(--dz-text,#111318); font-weight: 700; }
.blog-prose code { background: var(--dz-bg,#F4F5F7); padding: 2px 5px; border-radius: 5px; }
.blog-prose blockquote { border-left: 3px solid var(--dz-accent,#3B5BDB); padding: 16px 20px; margin: 24px 0; background: var(--dz-bg,#F4F5F7); border-radius: 0 12px 12px 0; }
.blog-prose blockquote > :last-child { margin-bottom: 0; }
.blog-prose pre { overflow-x: auto; max-width: 100%; padding: 18px; border-radius: 12px; background: var(--dz-bg,#F4F5F7); margin: 24px 0; font-size: 13px; line-height: 1.7; }
.blog-prose pre code { padding: 0; background: none; white-space: pre; }
.blog-prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 24px auto; }
.blog-prose hr { margin: 30px 0; border: 0; border-top: 1px solid #E4E7ED; }
.blog-prose h5,.blog-prose h6 { font-weight: 800; margin: 24px 0 12px; }
.blog-table-scroll { width: 100%; overflow-x: auto; margin: 24px 0; border: 1px solid #E4E7ED; border-radius: 12px; }
.blog-table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; }
.blog-table-scroll th,.blog-table-scroll td { min-width: 130px; padding: 12px 16px; border-bottom: 1px solid #E4E7ED; text-align: left; }
.blog-table-scroll th { background: var(--dz-bg,#F4F5F7); font-weight: 800; }
.blog-table-scroll tr:last-child td { border-bottom: 0; }
.blog-table-scroll .blog-align-center { text-align: center; }
.blog-table-scroll .blog-align-right { text-align: right; }
.blog-table-scroll:focus-visible { outline: 3px solid var(--dz-accent,#3B5BDB); outline-offset: 3px; }
.content-markdown-help { margin: 14px 0 24px; color: var(--dz-muted,#5F6672); font-size: 13px; line-height: 1.8; }
.content-markdown-help pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #F4F5F7; padding: 16px; border-radius: 12px; margin: 12px 0; }
.blog-updated { border-top: 1px solid #EEF0F3; padding-top: 18px; margin: 30px 0; color: var(--dz-muted,#5F6672); font-size: 12px; }
.blog-related { border-top: 1px solid #EEF0F3; margin-top: 30px; padding-top: 26px; }
.blog-related > h2 { color: var(--dz-text,#111318); font-size: 20px; font-weight: 800; line-height: 1.6; }
.blog-related > p { color: var(--dz-muted,#5F6672); font-size: 13px; line-height: 1.8; margin: 8px 0 18px; }
.blog-related .dz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .blog-related .dz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.blog-back-link { margin-top: 30px; padding: 12px 0; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 30px 0 0; font-size: 13px; }
.blog-pagination a { border-radius: 999px; background: white; color: var(--dz-accent,#3B5BDB); padding: 12px 18px; font-weight: 700; }
.blog-empty { grid-column: 1/-1; text-align: center; background: white; border-radius: 24px; padding: 50px 24px; color: var(--dz-muted,#5F6672); }
.blog-empty h2 { font-size: 20px; font-weight: 800; color: var(--dz-text,#111318); margin-bottom: 12px; }
.blog-list-card:focus-visible,.blog-store-link:focus-visible,.blog-back-link:focus-visible,.blog-product-card:focus-visible { outline: 3px solid var(--dz-accent,#3B5BDB); outline-offset: 4px; }
@media(max-width:719px) {
  .blog-list-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .blog-list-card { border-radius: 20px; }
  .blog-card-body { padding: 20px; }
  .blog-card-body h2 { font-size: 20px; }
  .blog-reading-surface { padding: 24px 20px; border-radius: 20px; }
  .blog-meta time { margin-left: 0; }
  .blog-prose { font-size: 15px; line-height: 2; }
  .blog-prose h2 { font-size: 20px; }
  .blog-list-toolbar { gap: 10px; font-size: 12px; }
  .blog-store-link { padding: 10px 13px; font-size: 12px; }
  html.dz-pg[data-blog-document] .seo-intro h1 { font-size: 26px; line-height: 1.6; }
}
@media(prefers-reduced-motion:reduce) { .blog-list-card { transition: none; } }

/* Admin editor styles remain scoped to the content manager. */
.content-manager{max-width:1200px;margin:0 auto}.content-heading,.content-toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.content-heading{justify-content:space-between}.content-heading h3{font-size:1.7rem;font-weight:800}.content-heading p{color:#64748b;margin-top:.4rem}.content-eyebrow{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:#4658d9!important}.content-panel{background:white;border:1px solid #e4e8ef;border-radius:20px;padding:1.4rem;margin-bottom:1.2rem}.content-panel h4,.content-panel summary{font-weight:800;margin-bottom:1rem}.content-panel label{display:block;font-size:.85rem;font-weight:700;margin:.7rem 0}.blog-input{display:block;width:100%;box-sizing:border-box;background:#f8f9fc;color:#172238;border:1px solid #dbe1ec;border-radius:11px;padding:.8rem;margin-top:.4rem;font:inherit;line-height:1.6}.blog-input:focus{outline:3px solid #5366e52e;border-color:#5366e5}.content-toolbar>.blog-input{flex:1;min-width:170px}.content-toolbar select{max-width:220px}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.content-editor-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:1.3rem;align-items:start}.content-body{min-height:440px;resize:vertical}.content-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}.content-article-row{display:flex;width:100%;text-align:left;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem .5rem;border-bottom:1px solid #edf0f6;background:none}.content-article-row:last-child{border:0}.content-article-row:hover{background:#f8f9ff}.content-article-row strong,.content-article-row small{display:block}.content-article-row small{margin-top:.5rem;color:#64748b}.content-status{font-size:.75rem;font-weight:700;padding:.35rem .8rem;background:#edf0f6;border-radius:99px;white-space:nowrap}.content-status.is-published{background:#e7f5ef;color:#137349}.content-empty{text-align:center;padding:3rem 1rem;color:#64748b}.content-product{display:block;width:100%;padding:.6rem;text-align:left;border-bottom:1px solid #edf0f6}.content-product:hover{background:#edf0ff}#blog-selected-products{display:flex;gap:.4rem;flex-wrap:wrap;margin:.8rem 0}.blog-search-preview{border:1px solid #edf0f6;padding:1rem;border-radius:12px;margin:1rem 0;overflow-wrap:anywhere}.blog-search-preview strong{display:block;color:#2936b2;font-size:1.05rem;margin:.35rem 0}.blog-search-preview small{color:#177348}.content-key{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid #edf0f6;padding:1rem 0}.content-key p{font-size:.8rem;color:#64748b;overflow-wrap:anywhere}.content-key small{color:#64748b}.content-permissions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1rem 0}.content-permissions label{font-weight:500}#mcp-secret{background:#eff4ff;padding:1rem;margin-top:1rem;border-radius:12px}#mcp-secret button{margin:.5rem .5rem 0 0}#blog-error,#mcp-error{color:#b32626;line-height:1.7}#blog-save-state{font-size:.8rem;color:#64748b}.content-panel small{line-height:1.6}.content-panel [type=file]{max-width:100%;font-size:.8rem}.content-manager button:focus-visible,.content-manager a:focus-visible,.blog-article a:focus-visible{outline-offset:3px}@media(max-width:800px){.content-editor-grid,.content-grid{grid-template-columns:1fr}.content-permissions{grid-template-columns:1fr 1fr}.content-panel{padding:1rem}.content-heading h3{font-size:1.4rem}.content-body{min-height:320px}.content-pagination{font-size:.8rem}}@media(prefers-reduced-motion:reduce){.content-manager *{scroll-behavior:auto!important}}

.content-manager .btn-clay{padding:.65rem 1rem;white-space:nowrap;line-height:1.4}.content-manager .content-actions{align-items:center}.content-manager .content-toolbar{gap:.5rem}.content-manager label{line-height:1.6}

/* Home guides use the same grid and compact dimensions as product cards. */
.home-blog-posts { margin: 28px 0 40px; }
.home-blog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.home-blog-heading .blog-store-link { flex-shrink: 0; font-size: 12px; }
.home-blog-grid { gap: 10px; }
.home-blog-card { padding: 8px 8px 10px; border-radius: 18px; box-shadow: none; }
.home-blog-media { height: 72px; border-radius: 12px; overflow: hidden; background: #EDF1F8; }
.home-blog-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-blog-media > span { display: grid; place-items: center; height: 100%; color: var(--dz-accent,#3B5BDB); font-size: 13px; font-weight: 800; }
.home-blog-card h3 { height: 36px; margin: 8px 0 0; padding: 0 4px; font-size: 14px; font-weight: 700; line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.home-blog-category { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dz-muted,#5F6672); margin: 2px 0 0; padding: 0 4px; font-size: 12px; line-height: 1.5; }
.home-blog-read { color: var(--dz-accent,#3B5BDB); font-weight: 800; font-size: 15px; margin: 6px 0 0; padding: 0 4px; }
@media(min-width:768px) {
  .home-blog-grid { gap: 16px; }
  .home-blog-card { padding: 10px 10px 12px; border-radius: 20px; }
  .home-blog-media { height: 100px; border-radius: 14px; }
  .home-blog-card h3 { height: 40px; margin-top: 10px; font-size: 15px; }
  .home-blog-category { font-size: 13px; }
  .home-blog-read { margin-top: 8px; font-size: 16px; }
}
@media(max-width:719px) {
  .home-blog-heading .blog-store-link { font-size: 11px; padding: 9px 11px; }
  .home-blog-heading .dz-section-title { font-size: 18px; }
}
