/* Blog: compact list with a category sidebar, and the post page. Uses the shop's colour variables. */
.blog-wrap { padding-top: 18px; padding-bottom: 40px; }
.blog-crumbs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
.blog-crumbs a:hover { color: var(--primary); }
.blog-crumbs b { color: var(--text); font-weight: 500; }

/* head: title + search on one row */
.blog-head { margin-bottom: 14px; }
.blog-head h1 { margin: 0 0 2px; font-size: 26px; line-height: 1.3; }
.blog-head p { margin: 0; color: var(--text-dim); font-size: 14px; max-width: 560px; }
.blog-search { display: flex; width: 280px; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); overflow: hidden; transition: border-color .15s; }
.blog-search:focus-within { border-color: var(--primary); }
.blog-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 14px; font: inherit; font-size: 14px; }
.blog-search button { border: 0; background: var(--primary); color: #fff; padding: 0 14px; cursor: pointer; display: grid; place-items: center; }

/* layout: list + side column */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "main side"; gap: 16px 26px; align-items: start; }
.blog-main { grid-area: main; min-width: 0; }
.blog-side { grid-area: side; display: grid; gap: 14px; }

.bl-pop { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.bl-pop ol { margin: 0; padding: 0; list-style: none; counter-reset: pop; display: grid; gap: 8px; }
.bl-pop li { counter-increment: pop; display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.bl-pop li::before { content: counter(pop); color: var(--primary); font-weight: 700; }
.bl-pop a:hover { color: var(--primary); }
.bl-shopbox { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; font-size: 13.5px; }
.bl-shopbox span { color: #cbd5e1; margin-bottom: 6px; }

/* post rows (list) */
.bl-list { display: grid; gap: 12px; }
.bl-card { display: grid; grid-template-columns: 200px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: box-shadow .18s, border-color .18s; }
.bl-card:hover { box-shadow: var(--shadow); border-color: #cfe3dc; }
.bl-cover { display: block; background: linear-gradient(135deg, var(--primary-soft), #dbeafe); overflow: hidden; min-height: 132px; }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-ph { display: grid; place-items: center; height: 100%; font-size: 44px; font-weight: 700; color: var(--primary); opacity: .35; }
.bl-body { padding: 10px 14px 10px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.bl-cat { font-size: 12px; font-weight: 600; color: var(--primary-dark); background: var(--primary-soft); padding: 1px 9px; border-radius: 999px; }
.bl-cat:hover { background: var(--primary); color: #fff; }
.bl-meta { color: var(--text-dim); }
.bl-body h2 { margin: 0; font-size: 16.5px; line-height: 1.4; }
.bl-body h2 a:hover { color: var(--primary); }
.bl-body p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* small vertical cards ("আরও পড়ুন") */
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bl-tile { grid-template-columns: 1fr; gap: 0; }
.bl-tile .bl-cover { aspect-ratio: 16 / 9; min-height: 0; }
.bl-tile .bl-body { padding: 10px 12px 12px; }
.bl-tile .bl-body h2 { font-size: 15px; }
.bl-tile .bl-body p { -webkit-line-clamp: 2; font-size: 13px; }

/* post */
.bp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; }
.bp-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--primary-bright)); transition: width .1s linear; }
.bp-head { max-width: 760px; margin: 0 0 14px; }
.bp-head h1 { margin: 6px 0 8px; font-size: 27px; line-height: 1.38; }
.bp-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 13px; color: var(--text-dim); }
.bp-meta i { font-style: normal; opacity: .5; }
.bp-lead { font-size: 15.5px; color: var(--text-dim); line-height: 1.7; margin: 10px 0 0; }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; align-items: start; }
.bp-main { min-width: 0; max-width: 760px; }
.bp-cover { margin: 0 0 14px; border-radius: 12px; overflow: hidden; }
.bp-cover img { width: 100%; height: auto; max-height: 380px; object-fit: cover; display: block; }
.bp-toc { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px 14px; margin-bottom: 16px; font-size: 14px; }
.bp-toc summary { cursor: pointer; font-weight: 600; }
.bp-toc ol { margin: 8px 0 2px; padding-left: 20px; display: grid; gap: 3px; }
.bp-toc a { color: var(--primary-dark); }
.bp-toc a:hover { text-decoration: underline; }

.bp-content { font-size: 16px; line-height: 1.85; }
.bp-content > :first-child { margin-top: 0; }
.bp-content p { margin: 0 0 14px; }
.bp-content h2 { margin: 26px 0 8px; font-size: 21px; line-height: 1.4; scroll-margin-top: 80px; padding-bottom: 4px; border-bottom: 2px solid var(--primary-soft); }
.bp-content h3 { margin: 18px 0 6px; font-size: 17.5px; line-height: 1.45; color: var(--primary-dark); }
.bp-content ul, .bp-content ol { margin: 0 0 14px; padding-left: 22px; }
.bp-content li { margin: 4px 0; }
.bp-content li::marker { color: var(--primary); font-weight: 700; }
.bp-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.bp-content blockquote { margin: 16px 0; padding: 10px 16px; border-left: 4px solid var(--primary); background: var(--primary-soft); border-radius: 0 10px 10px 0; font-size: 15.5px; }
.bp-content hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.bp-content figure { margin: 16px 0; }
.bp-content figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.bp-content figcaption { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 6px; }

/* product advertisement inside a post */
.bp-content .bp-ad { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; margin: 20px 0; padding: 12px; border: 1px solid #b7e4d6; background: linear-gradient(135deg, var(--primary-soft), #fff); border-radius: 12px; }
.bp-ad-img { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.bp-ad-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-ad-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bp-ad-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--sale); padding: 1px 9px; border-radius: 999px; }
.bp-content a.bp-ad-t { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text); text-decoration: none; }
.bp-content a.bp-ad-t:hover { color: var(--primary); }
.bp-ad-d { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.bp-ad-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.bp-ad-price del { color: var(--text-dim); font-size: 13px; }
.bp-ad-price b { font-size: 19px; color: var(--primary-dark); }
.bp-content a.btn { color: #fff; text-decoration: none; }

.bp-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
.bp-share span { color: var(--text-dim); margin-right: 2px; }
.bp-share a, .bp-share button { font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: .15s; }
.bp-share a:hover, .bp-share button:hover { border-color: var(--primary); color: var(--primary); }

.bp-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.bp-pn-a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: .15s; min-width: 0; }
.bp-pn-a:hover { border-color: var(--primary); }
.bp-pn-a.r { text-align: right; grid-column: 2; }
.bp-pn-a small { color: var(--text-dim); font-size: 12px; }
.bp-pn-a b { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bp-side { display: grid; gap: 14px; position: sticky; top: 80px; }
.bp-side-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.bp-side-box h3 { margin: 0 0 8px; font-size: 14.5px; }
.bp-prods { display: grid; gap: 8px; margin-bottom: 10px; }
.bp-prod { display: grid; grid-template-columns: 54px 1fr; grid-template-areas: "i t" "i p"; gap: 1px 10px; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 10px; transition: .15s; }
.bp-prod:hover { border-color: var(--primary); background: var(--primary-soft); }
.bp-prod-img { grid-area: i; width: 54px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.bp-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-prod-t { grid-area: t; font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: end; }
.bp-prod-p { grid-area: p; font-size: 13px; color: var(--primary-dark); font-weight: 700; align-self: start; }
.btn-block { display: block; text-align: center; }

.bp-more { margin-top: 30px; }
.bp-more h2 { margin: 0 0 10px; font-size: 18px; }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; grid-template-areas: "main" "side"; gap: 12px; }
  .bp-grid { grid-template-columns: 1fr; gap: 16px; }
  .bp-side { position: static; }
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-wrap { padding-top: 8px; padding-bottom: 28px; }
  .blog-crumbs { font-size: 11.5px; margin-bottom: 2px; }
  .blog-head { margin-bottom: 8px; }
  .blog-bar { margin-bottom: 4px; }
  .blog-head h1 { font-size: 19px; margin: 0; }
  .blog-head p { display: none; }
  .blog-search { width: 150px; flex: none; }
  .blog-search input { padding: 5px 10px; font-size: 13px; }
  .blog-search button { padding: 0 10px; }
  .blog-layout { gap: 8px; }
  .bl-list { gap: 8px; }
  .bl-card { grid-template-columns: 104px 1fr; gap: 10px; }
  .bl-cover { min-height: 104px; }
  .bl-body { padding: 8px 10px 8px 0; }
  .bl-body h2 { font-size: 15px; }
  .bl-body p { display: none; }
  .bl-grid { grid-template-columns: 1fr; }
  .bl-tile { grid-template-columns: 104px 1fr; }
  .bl-tile .bl-cover { aspect-ratio: auto; min-height: 90px; }
  .bl-tile .bl-body { padding: 8px 10px 8px 0; }
  .bp-head h1 { font-size: 22px; }
  .bp-content { font-size: 15.5px; line-height: 1.8; }
  .bp-content h2 { font-size: 19px; margin-top: 22px; }
  .bp-content .bp-ad { grid-template-columns: 80px 1fr; gap: 10px; padding: 10px; }
  .bp-content a.bp-ad-t { font-size: 14.5px; }
  .bp-ad-d { display: none; }
  .bp-ad-price b { font-size: 17px; }
  .bp-pn { grid-template-columns: 1fr; }
  .bp-pn-a.r { grid-column: auto; }
}

/* filters (sort + period) on the right of the top bar */
.blog-filter { display: flex; align-items: center; gap: 6px; margin: 0; }
.blog-filter select { padding: 6px 28px 6px 12px; font-size: 13.5px; border: 1px solid var(--border); border-radius: 999px; background-color: var(--surface); cursor: pointer; max-width: 150px; }
.blog-filter select:focus { outline: 0; border-color: var(--primary); }
.blog-filter-x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-size: 12px; flex: none; }
@media (max-width: 600px) {
  .blog-bar { flex-wrap: nowrap; gap: 6px; }
  .blog-filter { gap: 4px; min-width: 0; }
  .blog-filter select { padding: 5px 20px 5px 8px; font-size: 12.5px; max-width: 98px; }
}

/* phones/tablets: like the shop - one row (category button + filters); the title block stays only for search engines */
@media (max-width: 900px) {
  .blog-head .blog-crumbs, .blog-head h1, .blog-head p { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .blog-head { margin-bottom: 8px; }
  .blog-bar { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .blog-bar .bcm-lbl { max-width: 28vw; }
}

/* PC: one slim row - category button, title with its one-line intro, filters */
@media (min-width: 901px) {
  .blog-wrap { padding-top: 12px; }
  .blog-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .blog-head .blog-bar { display: contents; }
  .blog-head .bcm { order: 1; }
  .blog-head h1 { order: 2; margin: 0; font-size: 21px; white-space: nowrap; }
  .blog-head p { order: 3; flex: 1; min-width: 0; margin: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .blog-head .blog-filter { order: 4; margin-left: auto; }
  .blog-head .blog-crumbs { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .blog-head .bcm-btn { padding: 6px 14px; font-size: 13.5px; }
  .blog-filter select { padding: 5px 26px 5px 12px; font-size: 13px; }
  .blog-layout { gap: 12px 22px; }
  .bl-card { grid-template-columns: 170px 1fr; }
  .bl-cover { min-height: 112px; }
  .bl-body { padding: 8px 12px 8px 0; }
}

/* smart share block */
.bp-share { display: block; margin-top: 22px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(135deg, var(--surface), var(--surface-2)); font-size: 13.5px; }
.bp-share-t { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 10px; color: var(--text); }
.bp-share-t svg { color: var(--sale); }
.bp-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.shb { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.2; transition: transform .15s ease, background .15s, color .15s, border-color .15s, box-shadow .15s; }
.shb[hidden] { display: none; }
.shb:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 42, 67, .12); color: #fff; border-color: transparent; }
.shb:active { transform: scale(.96); }
.shb-native { background: var(--primary); color: #fff; border-color: var(--primary); }
.shb-fb:hover { background: #1877f2; } .shb-wa:hover { background: #25d366; } .shb-ms:hover { background: #0084ff; }
.shb-tg:hover { background: #229ed9; } .shb-x:hover { background: #111; } .shb-in:hover { background: #0a66c2; }
.shb-mail:hover { background: #ea4335; } .shb-copy:hover, .shb-native:hover { background: var(--primary-dark); }
.shb-copy.ok { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 600px) {
  .bp-share { padding: 10px; }
  .bp-share-row { gap: 6px; }
  .shb { padding: 8px 11px; }
  .shb span { display: none; }
  .shb-native span, .shb-copy span { display: inline; }
}

/* share buttons: stronger selectors so the older .bp-share rules cannot win (text stays readable on hover) */
.bp-share .shb { background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 7px 13px; font-size: 13px; }
.bp-share .shb span { color: inherit; margin: 0; }
.bp-share .shb:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 42, 67, .14); }
.bp-share .shb:hover span, .bp-share .shb:hover svg { color: #fff; }
.bp-share .shb-native { background: var(--primary); color: #fff; border-color: var(--primary); }
.bp-share .shb-fb:hover { background: #1877f2; } .bp-share .shb-wa:hover { background: #1faa52; } .bp-share .shb-ms:hover { background: #0084ff; }
.bp-share .shb-tg:hover { background: #229ed9; } .bp-share .shb-x:hover { background: #111; } .bp-share .shb-in:hover { background: #0a66c2; }
.bp-share .shb-mail:hover { background: #ea4335; } .bp-share .shb-copy:hover, .bp-share .shb-native:hover { background: var(--primary-dark); }
.bp-share .shb-copy.ok { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 600px) { .bp-share .shb { padding: 8px 11px; } }

/* author HTML blocks */
.bp-content img { max-width: 100%; height: auto; border-radius: 10px; }
.bp-content .bp-table { overflow-x: auto; margin: 0 0 14px; }
.bp-content table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.bp-content th, .bp-content td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
.bp-content th { background: var(--surface-2); }
.bp-content mark { background: #fff3b0; padding: 0 3px; border-radius: 3px; }
.bp-content pre, .bp-content code { background: var(--surface-2); border-radius: 6px; font-size: 14px; }
.bp-content code { padding: 1px 5px; } .bp-content pre { padding: 10px 12px; overflow-x: auto; }

/* compact reading text (PC and phone) */
.bp-content { font-size: 15.5px; line-height: 1.75; }
.bp-content p { margin: 0 0 10px; }
.bp-content h2 { font-size: 20px; line-height: 1.4; margin: 20px 0 6px; padding-bottom: 3px; }
.bp-content h3 { font-size: 17px; margin: 14px 0 4px; }
.bp-content h4 { font-size: 15.5px; margin: 12px 0 4px; }
.bp-content ul, .bp-content ol { margin: 0 0 10px; }
.bp-content li { margin: 2px 0; }
.bp-content blockquote { margin: 12px 0; padding: 8px 14px; font-size: 15px; }
.bp-content figure { margin: 12px 0; }
.bp-content .bp-ad { margin: 14px 0; }
.bp-lead { font-size: 15px; line-height: 1.65; }
@media (max-width: 600px) {
  .bp-content { font-size: 15px; line-height: 1.7; }
  .bp-content p { margin-bottom: 9px; }
  .bp-content h2 { font-size: 18px; margin: 16px 0 5px; }
  .bp-content h3 { font-size: 16px; margin: 12px 0 4px; }
  .bp-lead { font-size: 14.5px; }
}

/* headings and body read as one voice: same colour, close weights and sizes, soft rule */
.bp-content { color: #1e293b; font-weight: 450; }
.bp-content h2, .bp-content h3, .bp-content h4 { color: #0f172a; font-weight: 600; letter-spacing: 0; }
.bp-content h2 { font-size: 19px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.bp-content h3 { font-size: 16.5px; }
.bp-content h4 { font-size: 15.5px; }
.bp-content strong, .bp-content b { font-weight: 600; }
.bp-head h1 { font-weight: 650; }
@media (max-width: 600px) { .bp-content h2 { font-size: 17.5px; } .bp-content h3 { font-size: 16px; } }

/* no cover picture: the category's icon (or an automatic emoji) fills the slot */
.bl-ph { display: block; width: 100%; height: 100%; min-height: inherit; opacity: 1; font-size: inherit; color: inherit; }
.bl-ph .bci { width: 100%; height: 100%; min-height: 112px; font-size: 52px; background: linear-gradient(135deg, var(--bci), #fff 140%); border-radius: 0; }
.bl-ph .bci img { width: 46%; height: auto; max-height: 70%; object-fit: contain; border-radius: 12px; }
.bl-tile .bl-ph .bci { min-height: 0; font-size: 44px; }
@media (max-width: 600px) { .bl-ph .bci { min-height: 104px; font-size: 40px; } .bl-tile .bl-ph .bci { min-height: 90px; font-size: 36px; } }