.blog-shell {
    --blog-ink: #32152b;
    --blog-muted: #7e6877;
    --blog-primary: #8b1d58;
    --blog-accent: #d72a70;
    --blog-soft: #fff3f8;
    --blog-line: #f0dce6;
    background: #fcf8fa;
    color: var(--blog-ink);
}

.blog-shell *, .blog-shell *::before, .blog-shell *::after { box-sizing: border-box; }
.blog-shell a { color: inherit; text-decoration: none; }
.blog-shell--inner { min-height: 55vh; padding: 1px 0 4rem; }

.blog-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 14% 16%, rgba(255, 204, 225, .42), transparent 28%), radial-gradient(circle at 84% 85%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient(122deg, #451130, #7d1d50 55%, #b72566);
}
.blog-hero::after { position: absolute; inset: auto -5% -120px; height: 210px; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.08); content: ''; transform: rotate(-3deg); }
.blog-hero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem 4.75rem; text-align: center; }
.blog-hero h1, .blog-page-header h1, .blog-article__header h1 { margin: 0; font-weight: 900; letter-spacing: -.04em; }
.blog-hero h1 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.45; }
.blog-hero p { max-width: 570px; margin: 1rem auto 0; color: #ffe6f1; font-size: 1.05rem; line-height: 2; }

.blog-search { display: flex; gap: .55rem; max-width: 610px; margin: 1.75rem auto 0; padding: .45rem; border: 1px solid rgba(255,255,255,.55); border-radius: 1rem; background: #fff; box-shadow: 0 18px 45px rgba(47, 8, 31, .22); }
.blog-search input { min-width: 0; flex: 1; border: 0; outline: 0; padding: .7rem 1rem; color: var(--blog-ink); background: transparent; }
.blog-search button, .blog-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: .75rem; padding: .72rem 1.1rem; color: #fff; background: linear-gradient(135deg, var(--blog-primary), var(--blog-accent)); box-shadow: 0 9px 18px rgba(155, 26, 87, .2); font-weight: 800; transition: transform .2s, box-shadow .2s; }
.blog-search button:hover, .blog-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 22px rgba(155, 26, 87, .28); }

.blog-section { padding: 3.5rem 0; }
.blog-section--muted { background: linear-gradient(180deg, #fff4f8, #fcf8fa); }
.blog-section__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.blog-section__heading h2 { margin: 0; color: var(--blog-ink); font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 900; }
.blog-section__heading p { margin: .45rem 0 0; color: var(--blog-muted); line-height: 1.9; }
.blog-section__eyebrow, .blog-side-widget__eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .3rem; color: var(--blog-accent); font-size: .78rem; font-weight: 800; }
.blog-section__all { display: inline-flex; align-items: center; gap: .45rem; color: var(--blog-primary); font-size: .9rem; font-weight: 800; white-space: nowrap; }

.blog-category-pills { display: flex; flex-wrap: wrap; gap: .65rem; }
.blog-category-pills a { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid #edc4d5; border-radius: 999px; padding: .66rem 1rem; color: #7d1d4c; background: #fff; font-size: .9rem; font-weight: 700; transition: .2s; }
.blog-category-pills a:hover { border-color: var(--blog-primary); color: #fff; background: var(--blog-primary); }
.blog-category-pills span { opacity: .75; font-size: .78rem; }

.blog-featured { display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; border: 1px solid var(--blog-line); border-radius: 1.35rem; background: #fff; box-shadow: 0 16px 38px rgba(75, 23, 53, .08); }
.blog-featured__image { min-height: 320px; background: var(--blog-soft); }
.blog-featured__image img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.blog-featured__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.blog-kicker { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .7rem; color: var(--blog-accent); font-size: .8rem; font-weight: 800; }
.blog-featured h2 { margin: 0; font-size: clamp(1.4rem, 2.1vw, 2rem); font-weight: 900; line-height: 1.75; }
.blog-featured p { margin: .85rem 0 1.25rem; color: var(--blog-muted); line-height: 2; }

.blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--blog-line); border-radius: 1.1rem; background: #fff; box-shadow: 0 8px 24px rgba(75, 23, 53, .055); transition: transform .2s, box-shadow .2s, border-color .2s; }
.blog-card:hover { border-color: #e6aec7; transform: translateY(-5px); box-shadow: 0 18px 35px rgba(75, 23, 53, .13); }
.blog-card__image { display: block; aspect-ratio: 1.5; overflow: hidden; background: #faedf2; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.blog-card__image img.blog-card__image--placeholder { padding: 1rem; object-fit: contain; }
.blog-card:hover .blog-card__image img { transform: scale(1.045); }
.blog-card:hover .blog-card__image img.blog-card__image--placeholder { transform: scale(1.02); }
.blog-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 1rem .85rem; }
.blog-card h3 { margin: 0; color: var(--blog-ink); font-size: 1rem; font-weight: 800; line-height: 1.9; }
.blog-card h3 a:hover { color: var(--blog-primary); }
.blog-card p { margin: .55rem 0 .9rem; color: var(--blog-muted); font-size: .87rem; line-height: 1.95; }
.blog-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid #f6e9ee; color: #9b8290; font-size: .76rem; }
.blog-card__meta span, .blog-card__meta a { display: inline-flex; align-items: center; gap: .3rem; }
.blog-card__meta a:hover { color: var(--blog-primary); }

.blog-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.35rem 0 0; padding: .8rem 1rem; border: 1px solid #f1e2e9; border-radius: .9rem; color: var(--blog-muted); background: rgba(255,255,255,.8); box-shadow: 0 5px 16px rgba(75, 23, 53, .035); font-size: .82rem; }
.blog-breadcrumb__label { display: inline-flex; align-items: center; gap: .35rem; color: var(--blog-primary); font-weight: 800; white-space: nowrap; }
.blog-breadcrumb nav, .blog-breadcrumb ol, .blog-breadcrumb ul { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; margin: 0; padding: 0; background: transparent; list-style: none; }
.blog-breadcrumb a { color: #7f2853; }
.blog-breadcrumb a:hover { color: var(--blog-accent); }
.blog-page-header { padding: 2rem 0 1rem; }
.blog-page-header h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.6; }
.blog-page-header p { max-width: 700px; margin: .65rem 0 0; color: var(--blog-muted); line-height: 2; }
.blog-empty { padding: 3.2rem 1.25rem; border: 1px dashed #e6b6ca; border-radius: 1.1rem; color: var(--blog-muted); background: #fff; text-align: center; }

.blog-article { padding: 1.4rem 0 2.5rem; }
.blog-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.35rem; align-items: start; }
.blog-article__main { min-width: 0; overflow: hidden; border: 1px solid var(--blog-line); border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 35px rgba(75, 23, 53, .065); }
.blog-article__header { padding: clamp(1.3rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.4rem) 1.2rem; }
.blog-article__header h1 { color: var(--blog-ink); font-size: clamp(1.55rem, 2.8vw, 2.35rem); line-height: 1.72; }
.blog-article__meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1rem; color: #927887; font-size: .82rem; }
.blog-article__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.blog-article__hero { display: block; width: 100%; max-height: 500px; object-fit: cover; background: #f8e8ef; }
.blog-article__hero--placeholder { aspect-ratio: 16 / 7; max-height: 380px; padding: 1rem; object-fit: contain; background: radial-gradient(circle at center, #fff, #f9e8ef); }
.blog-excerpt { margin: 1.5rem clamp(1.25rem, 3vw, 2.4rem) 0; padding: 1rem 1.15rem; border-right: 4px solid var(--blog-accent); border-radius: .7rem; color: #664c5b; line-height: 2.1; background: linear-gradient(90deg, #fff6f9, #fff); }
.blog-toc { margin: 1.35rem clamp(1.25rem, 3vw, 2.4rem); padding: 1.1rem 1.2rem; border: 1px solid #f1dce6; border-radius: .9rem; background: #fffafe; }
.blog-toc strong { color: var(--blog-ink); }
.blog-toc ul { display: grid; gap: .32rem; margin: .75rem 0 0; padding-right: 1.1rem; }
.blog-toc li::marker { color: var(--blog-accent); }
.blog-toc a { color: #9b2257; font-size: .9rem; line-height: 1.8; }
.blog-toc a:hover { color: var(--blog-accent); }
.blog-content { padding: .2rem clamp(1.25rem, 3vw, 2.4rem) 2rem; color: #493842; font-size: 1rem; line-height: 2.3; }
.blog-content h2, .blog-content h3 { position: relative; margin: 2.25rem 0 .85rem; padding-right: .8rem; color: var(--blog-ink); font-weight: 900; line-height: 1.7; scroll-margin-top: 115px; }
.blog-content h2::before, .blog-content h3::before { position: absolute; right: 0; top: .38em; width: 4px; height: 1.1em; border-radius: 4px; background: linear-gradient(var(--blog-primary), var(--blog-accent)); content: ''; }
.blog-content h2 { font-size: 1.45rem; }
.blog-content h3 { font-size: 1.15rem; }
.blog-content p { margin: 0 0 1rem; }
.blog-content img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: .9rem; }
.blog-content a { color: #a21955; text-decoration: underline; text-underline-offset: 3px; }
.blog-content ul, .blog-content ol { display: grid; gap: .45rem; padding-right: 1.5rem; }
.blog-content li::marker { color: var(--blog-accent); }
.blog-cta { margin: 1.25rem clamp(1.25rem, 3vw, 2.4rem) 0; padding: 1rem; border-radius: .9rem; background: linear-gradient(130deg, #67163e, #bd255f); box-shadow: 0 12px 24px rgba(104, 22, 63, .17); text-align: center; }
.blog-cta a { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 900; }
.blog-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.4rem clamp(1.25rem, 3vw, 2.4rem) 2rem; }
.blog-tags a { border: 1px solid #f2d7e3; border-radius: 999px; padding: .42rem .75rem; color: #8f1c49; background: #fff7fa; font-size: .8rem; }
.blog-tags a:hover { border-color: var(--blog-primary); color: #fff; background: var(--blog-primary); }

.blog-article .faq-questions { margin: 1.25rem clamp(1.25rem, 3vw, 2.4rem) 0 !important; padding: 1.2rem !important; border: 1px solid var(--blog-line); border-radius: 1rem; background: #fffafe; }
.blog-article .faq-questions h3 { color: var(--blog-ink) !important; }
.blog-article .faq-question { border-color: #f0e0e7 !important; box-shadow: none !important; }
.blog-article .faq-question .card-header { background: #fff !important; }

.blog-aside { display: grid; gap: 1rem; }
.blog-side-widget, .blog-aside > .sidebar-widget { overflow: hidden; border: 1px solid var(--blog-line); border-radius: 1rem; background: #fff; box-shadow: 0 9px 24px rgba(75, 23, 53, .055); }
.blog-side-widget__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .85rem; border-bottom: 1px solid #f5e8ee; }
.blog-side-widget__header h2 { margin: 0; color: var(--blog-ink); font-size: 1rem; font-weight: 900; }
.blog-side-widget__header > a { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .65rem; color: var(--blog-primary); background: #fff1f6; }
.blog-side-widget__header > a:hover { color: #fff; background: var(--blog-primary); }
.blog-side-widget__content { padding: .25rem .9rem .65rem; }
.blog-side-posts, .blog-side-products { margin: 0; padding: 0; list-style: none; }
.blog-side-posts li + li, .blog-side-products li + li { border-top: 1px solid #f6ebef; }
.blog-side-posts li > a, .blog-side-products li > a { display: flex; align-items: center; gap: .7rem; padding: .78rem 0; }
.blog-side-posts__image, .blog-side-products__image { flex: 0 0 58px; width: 58px; height: 58px; overflow: hidden; border-radius: .7rem; background: #faeef2; }
.blog-side-posts__image img, .blog-side-products__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-side-posts__title, .blog-side-products__title { display: -webkit-box; overflow: hidden; color: #4b263b; font-size: .82rem; font-weight: 700; line-height: 1.85; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-side-posts li > a:hover .blog-side-posts__title, .blog-side-products li > a:hover .blog-side-products__title { color: var(--blog-primary); }
.blog-side-products__details { display: grid; gap: .18rem; min-width: 0; }
.blog-side-products__price { color: #b31d57; font-size: .78rem; font-weight: 800; }
.blog-side-products__price s { margin-left: .2rem; color: #a98e9c; font-size: .68rem; font-weight: 400; }

.blog-related-posts { margin-top: 1rem; padding: clamp(1.15rem, 2.5vw, 1.8rem); border: 1px solid var(--blog-line); border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 34px rgba(75, 23, 53, .055); }
.blog-section__heading--compact { margin-bottom: 1.15rem; }
.blog-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.blog-related-card { overflow: hidden; border: 1px solid #f1e0e8; border-radius: .95rem; background: #fff; transition: transform .2s, box-shadow .2s; }
.blog-related-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(75, 23, 53, .11); }
.blog-related-card__image { display: block; aspect-ratio: 1.48; overflow: hidden; background: #faedf2; }
.blog-related-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.blog-related-card:hover .blog-related-card__image img { transform: scale(1.045); }
.blog-related-card__body { padding: .85rem .85rem .9rem; }
.blog-related-card h3 { display: -webkit-box; overflow: hidden; min-height: 3.6em; margin: 0; color: var(--blog-ink); font-size: .88rem; font-weight: 800; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-related-card h3 a:hover { color: var(--blog-primary); }
.blog-related-card__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; color: var(--blog-accent); font-size: .77rem; font-weight: 800; }

.blog-comments { margin-top: 1.25rem; padding: clamp(1.15rem, 2.5vw, 1.9rem); border: 1px solid var(--blog-line); border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 34px rgba(75, 23, 53, .055); }
.blog-comments__header { display: flex; align-items: flex-start; gap: .85rem; padding-bottom: 1.1rem; border-bottom: 1px solid #f4e7ed; }
.blog-comments__icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: .85rem; color: #fff; background: linear-gradient(135deg, var(--blog-primary), var(--blog-accent)); font-size: 1.15rem; }
.blog-comments__header span { color: var(--blog-accent); font-size: .78rem; font-weight: 800; }
.blog-comments__header h2 { margin: .15rem 0; color: var(--blog-ink); font-size: 1.22rem; font-weight: 900; }
.blog-comments__header p { margin: 0; color: var(--blog-muted); font-size: .86rem; line-height: 1.85; }
.blog-comments__alert { display: flex; align-items: center; gap: .45rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: .75rem; font-size: .9rem; }
.blog-comments__alert--success { color: #176b45; background: #ebf8f0; }
.blog-comments__alert--error { color: #a8263d; background: #fff0f3; }
.blog-comment-form { margin-top: 1.25rem; padding: 1rem; border: 1px solid #f0dce6; border-radius: .9rem; background: #fffafe; }
.blog-comment-form h3 { margin: 0 0 .9rem; color: var(--blog-ink); font-size: 1rem; font-weight: 900; }
.blog-comment-form__field { display: grid; gap: .42rem; margin-bottom: .8rem; }
.blog-comment-form__field label { color: #654a5a; font-size: .82rem; font-weight: 800; }
.blog-comment-form__field input, .blog-comment-form__field textarea { width: 100%; border: 1px solid #ead7e1; border-radius: .7rem; outline: 0; padding: .72rem .85rem; color: var(--blog-ink); background: #fff; font: inherit; font-size: .9rem; transition: border-color .2s, box-shadow .2s; }
.blog-comment-form__field textarea { resize: vertical; line-height: 2; }
.blog-comment-form__field input:focus, .blog-comment-form__field textarea:focus { border-color: #ce5790; box-shadow: 0 0 0 3px rgba(215, 42, 112, .1); }
.blog-comments__login { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; margin-top: 1.25rem; padding: 1rem; border-radius: .9rem; color: #593548; background: linear-gradient(115deg, #fff0f6, #fff9fc); }
.blog-comments__login > div:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: .7rem; color: var(--blog-primary); background: #fff; }
.blog-comments__login strong { display: block; font-size: .9rem; }
.blog-comments__login p { margin: .22rem 0 0; color: var(--blog-muted); font-size: .8rem; }
.blog-comments__login a { display: inline-flex; align-items: center; gap: .35rem; color: #fff; background: var(--blog-primary); border-radius: .65rem; padding: .62rem .8rem; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.blog-comments__list { display: grid; gap: .8rem; margin-top: 1.25rem; }
.blog-comment { display: flex; gap: .75rem; padding: 1rem; border: 1px solid #f2e3e9; border-radius: .9rem; background: #fff; }
.blog-comment__avatar { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #8d2253; background: #fdeaf2; font-size: .95rem; font-weight: 900; }
.blog-comment__body { min-width: 0; flex: 1; }
.blog-comment__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .55rem; }
.blog-comment__meta strong { color: var(--blog-ink); font-size: .87rem; }
.blog-comment__meta time { color: #9f8794; font-size: .74rem; }
.blog-comment__badge { border-radius: 999px; padding: .18rem .45rem; color: #8d2253; background: #fff0f6; font-size: .68rem; font-weight: 800; }
.blog-comment h3 { margin: .45rem 0 .3rem; color: #492538; font-size: .92rem; font-weight: 900; }
.blog-comment p { margin: 0; color: #705a67; font-size: .88rem; line-height: 2; }
.blog-comments__empty { display: grid; justify-items: center; gap: .4rem; margin-top: 1.25rem; padding: 2rem 1rem; border: 1px dashed #e9c4d4; border-radius: .9rem; color: var(--blog-muted); text-align: center; }
.blog-comments__empty i { color: var(--blog-accent); font-size: 1.65rem; }
.blog-comments__empty strong { color: var(--blog-ink); font-size: .95rem; }
.blog-comments__empty span { font-size: .84rem; }
.blog-comments__pagination { margin-top: 1rem; }

@media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 992px) { .blog-article__layout { grid-template-columns: 1fr; } .blog-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .blog-shell--inner { padding-bottom: 2.5rem; } .blog-hero__inner { padding: 2.8rem 1rem 3.5rem; } .blog-search { border-radius: .85rem; } .blog-search button { padding-inline: .9rem; } .blog-section { padding: 2.25rem 0; } .blog-section__heading { align-items: flex-start; } .blog-section__all { font-size: .8rem; } .blog-featured { grid-template-columns: 1fr; } .blog-featured__image, .blog-featured__image img { min-height: 220px; } .blog-grid, .blog-related-grid, .blog-aside { grid-template-columns: 1fr; } .blog-breadcrumb { align-items: flex-start; } .blog-article { padding-top: 1rem; } .blog-article__hero--placeholder { aspect-ratio: 1.5; } .blog-content { font-size: .96rem; line-height: 2.2; } .blog-content h2 { font-size: 1.3rem; } .blog-comments__login { grid-template-columns: auto 1fr; } .blog-comments__login a { grid-column: 1 / -1; justify-content: center; } }