/* blog.css — Blog Header + Share Icons + #blog-template + V1 + V2 + Home Blog + Category */

/* ═══ BLOG HEADER ═══ */
.site-header--blog { background-color: #fff; border-bottom: none; }
.site-header--blog .header-icons-wrapper, .site-header--blog .account-cart-icons-wrapper { display: none !important; }
.blog-header { max-width: 1400px; margin: 0 auto; padding: 20px 40px 0; }
.blog-header__top { display: flex; align-items: center; justify-content: center; position: relative; padding: 15px 0 10px; }
.blog-header__logo { display: block; text-decoration: none; }
.blog-header__logo img { height: 55px; width: auto; }
.blog-header__icons { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 18px; }
.blog-header__icon { display: flex; align-items: center; color: var(--text); text-decoration: none; }
.blog-header__icon svg { transition: color 0.2s ease; }
.blog-header__icon:hover { color: var(--text); }
.blog-header__nav { padding: 10px 0 15px; }
.blog-header__nav ul { display: flex; justify-content: center; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.blog-header__nav li { margin: 0; }
.blog-header__nav a { color: var(--text); text-decoration: none; text-transform: uppercase; letter-spacing: 3.75px; font-size: 14px; font-weight: 400; transition: color 0.2s ease; }
.blog-header__nav a:hover { color: var(--text); }
.blog-header__nav-divider { width: 1px; height: 18px; background-color: #ABABAB; }
.blog-header__nav-divider + li a { color: #631945; }
.blog-header__nav-divider + li a:hover { color: #4a1234; }
@media screen and (max-width: 992px) { .blog-header { padding: 10px 20px 0; } .blog-header__nav ul { flex-wrap: wrap; gap: 12px 20px; } .blog-header__nav a { font-size: 12px; letter-spacing: 2.5px; } .blog-header__logo img { height: 45px; } }
@media screen and (max-width: 767px) { .blog-header__logo img { height: 35px; } .blog-header__icons { gap: 12px; } .blog-header__icon svg { width: 18px; height: 18px; } .blog-header__nav a { font-size: 11px; letter-spacing: 2px; } .blog-header__nav ul { gap: 8px 14px; } }

/* ═══ SHARE ICONS ═══ */
.blog-share { padding: 30px 0 10px; }
.blog-share__icons { display: flex; justify-content: center; align-items: center; gap: 14px; }
.blog-share__link { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #565656; color: var(--text); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.blog-share__link:hover { background-color: #565656; color: #fff; }
.blog-share__link svg { width: 18px; height: 18px; }

/* ═══ #blog-template CONTENT ═══ */
.entry-content { margin: 0 !important; }
html .one-container .site-content { padding: 0 !important; }
#blog-template { padding: 40px 20px 0; }
#blog-template .wp-block-group__inner-container { max-width: 1400px; padding: 0; margin: 0 auto; }
#blog-template .wp-block-columns { display: flex; flex-wrap: wrap; gap: 60px; margin-bottom: 0; }
#blog-template .wp-block-column { flex: 1; min-width: 0; }
#blog-template .blog-mob-img { display: none; margin-bottom: 35px; }
#blog-template .blog-mob-img figure { width: 100%; }
#blog-template .blog-mob-img img { width: 100%; object-fit: cover; height: 100%; max-height: 350px; }
#blog-template .wp-block-column img { width: 100%; }
#blog-template h2 { font-size: 45px; line-height: 1.0; letter-spacing: 1px; color: var(--text); margin-top: 40px; margin-bottom: 15px; font-weight: 600; }
#blog-template h3 { margin-top: 35px; margin-bottom: 12px; }
#blog-template h4 { margin-top: 30px; margin-bottom: 10px; }
#blog-template p { font-size: 18px; margin-bottom: 16px; line-height: 1.7; letter-spacing: 0.3px; }
#blog-template li { font-size: 18px; line-height: 1.7; }
#blog-template .blog-sec-title { color: var(--text); font-size: 35px; line-height: 1.0; letter-spacing: 1px; font-weight: 600; }
button.hp-banner-btn_white { background-color: #FFA222; color: var(--white); border-radius: 10px; min-width: 325px; margin-bottom: 15px; }
p a { color: #FFA222; }
#blog-template.old-blog .wp-block-columns { gap: 40px; }
@media screen and (max-width: 992px) { #blog-template .wp-block-columns { flex-direction: column; } #blog-template .desk-img-wrapper { display: none; } #blog-template .blog-mob-img { display: block; } #blog-template.old-blog .wp-block-columns { flex-direction: column; } #blog-template.old-blog .wp-block-column figure img { width: 100%; object-fit: cover; height: 100%; max-height: 350px; } }
@media screen and (max-width: 768px) { #blog-template { padding: 0 20px; } #blog-template h2 { font-size: 28px; } #blog-template .blog-sec-title { font-size: 24px; } }

/* ═══ V1 — from blog-post-v1.php (scoped to .blog-post-container) ═══ */
.blog-post-container ~ .grid-container, .blog-post-container .grid-container { max-width: 1600px !important; }
/* Fallback: always apply when .blog-post-container is a sibling of .site-content */
.blog-post-container ~ .site-content { margin: 0 60px !important; padding-top: 50px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Modern browsers: also match when .blog-post-container is inside .single-post */
@supports selector(:has(*)) {
  .single-post:has(.blog-post-container) .site-content { margin: 0 60px !important; padding-top: 50px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
}
.blog-post-container article { display: flex; align-items: start; justify-content: center; gap: 60px; }
.blog-post-container .entry-header { padding-bottom: 20px; }
.blog-post-container .entry-content .entry-header .entry-title { margin: 0 !important; }
.blog-post-container article img { height: auto; object-fit: cover; flex: 1 1 50%; max-width: 50%; }
.blog-post-container .entry-content { margin: 0 !important; flex: 1 1 50%; max-width: 50%; }
.latest-posts{ display: flex; flex-direction: row; align-content: center; justify-content: center; align-items: center; flex-wrap: wrap; }
.latest-posts-text-div{ margin-right: -20px; }
.latest-posts-text-div p{ max-width: 210px; }
.latest-posts ul{ display: flex; flex-direction: row; justify-content: center; align-content: center; align-items: center; text-decoration: none; gap: 29px; margin-bottom: 0; margin-left: 0; }
.latest-posts ul li{ display: block!important; }
.latest-posts-main{ margin: 30px 0!important; padding:0 5%; }
.image-container { position: relative; display: inline-block; }
.image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.image-container a{ display: block; }
body .latest-posts .latest-posts-text-div h2{ white-space: nowrap; color: var(--text) !important; letter-spacing: 0.48px!important; max-width: 250px; white-space: pre-wrap; }
.latest-posts p{ color: var(--text) !important }
.latest-posts .image-container .image-text{ position: absolute; top: 10px; left: 38%; transform: translateX(-35%); color: #fff; padding: 5px 5px; border-radius: 5px; font-size: 23px; width: 100%; z-index: 2; }
.latest-posts .image-container { position: relative; max-width: 300px!important; max-height: 380px!important; height: 100%!important; width: 100%!important; overflow: hidden; }
.latest-posts .image-container img{ height: 380px; object-fit: cover; transition: 0.3s; }
.clickable-post { overflow: hidden; }
.post-info-container { position: absolute; bottom: 31%; left: 0; width: 100%; height: auto; background-color: transparent; transition: transform 0.3s ease-out; transform: translateY(100%); padding: 12px 15px; background: transparent linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(67, 67, 67, 0) 100%) 0% 0%; }
.image-container:hover .post-info-container { transform: translateY(31%); height: 100%; background: rgba(0, 0, 0, 0.4); }
.post-categories, .post-title { display: block; margin: 0 auto; padding: 0 10px; width: fit-content; }
.post-category-title { margin-bottom: 0 !important; }
/* width: 100% overrides the shared fit-content sizing above — required so the
   nowrap/ellipsis truncation below clips instead of forcing the box to grow
   to the full unwrapped title width (fit-content ignores its container's
   available width once there's no line-break opportunity). */
.post-title { height: 70px; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; }
.post-categories a { text-align: center; letter-spacing: 3.75px; color: #FFFFFF; text-transform: uppercase; font-size: 15px; }
.post-title .title { text-align: center; color: #FFFFFF; text-transform: capitalize; margin-top: 5px; margin: 5px 0 0 0 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body .post-info-container p.post-excerpt { display: none; color: #fff !important; text-align: center; margin-top: 100px; margin-bottom: 15px; max-height: 92px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.read-more-btn { display: none !important; padding: 10px 20px; background-color: transparent; color: #fff !important; text-align: center; text-transform: capitalize; border: 1px solid #fff; text-decoration: none; border-radius: 8px; letter-spacing: 4.5px; max-width: 200px; margin: 0 auto; }
/* .post-excerpt must switch to display: -webkit-box (not block) on hover —
   -webkit-line-clamp only takes effect on a -webkit-box display context. */
.image-container:hover .post-excerpt { display: -webkit-box !important; }
.image-container:hover .read-more-btn { display: block !important; }
@media screen and (max-width: 1080px) { .latest-posts li{ flex-basis: 37%; max-width: 34%; } .latest-posts ul { display: flex!important; flex-wrap: wrap!important; gap: 15px!important; } .latest-posts-text-div { margin-right: 0!important; width: fit-content; } .latest-posts-text-div{ text-align: center; padding: 13px; } .latest-posts .image-container { height: 100%!important; width: 100%!important; } .latest-posts li { flex-basis: inherit!important; max-width: inherit!important; } .latest-posts ul { display: grid!important; flex-wrap: wrap!important; gap: 15px!important; grid-template-columns: 50% 50%; align-items: center; justify-items: center; align-content: center; justify-content: center; max-width: 615px; margin: 0 auto; } .latest-posts { display: inherit!important; flex-direction: inherit!important; align-content: inherit!important; justify-content: inherit!important; align-items: inherit!important; flex-wrap: inherit!important; } .custom-blog-category-text { top: 6%; } }
@media only screen and (max-width: 991px) { .blog-post-container article { flex-direction: column; justify-content: center; } .single-post .site-content { margin: 0 !important; padding: 50px 0 0 !important; } .blog-post-container article img { flex: 1 1 100%; max-width: 100%; } .blog-post-container .entry-content { flex: 1 1 100%; max-width: 100%; padding: 0 30px; } }
@media screen and (max-width: 767px) { .image-container::before { height: 98.5%!important; } .latest-posts-text-div h2{ white-space: break-spaces } }
@media screen and (max-width: 590px) { .latest-posts .image-container img , .latest-posts .image-container{ max-height: 269px !important; } .latest-posts .image-container .image-text { font-size: 19px; line-height: 20px; } .post-info-container { bottom: 42%; } .image-container:hover .post-info-container { transform: translateY(42%); } body .post-info-container p.post-excerpt { font-size: 15px !important; max-height: 73px; overflow: hidden; margin-top: 25px; } .post-info-container .read-more-btn { font-size: 14px !important; padding: 5px 15px; max-width: 185px; } }
@media screen and (max-width: 440px) { .latest-posts .image-container img , .latest-posts .image-container{ max-height: 210px; } }
@media screen and (max-width: 407px) { .post-info-container .read-more-btn { font-size: 12px !important; letter-spacing: 2.5px; padding: 5px; } }

/* ═══ V2 — from blog-post-v2.php (scoped to v2 body class) ═══ */
.post-template-blog-post-v2 .post-thumbnail, .post-template-blog-post-v2 .entry-header{ display:none }
.main_section_split_blog h4{ margin-top:40px; margin-bottom:25px; color: var(--text)!important; }
.main_section_split_blog h2{ color: var(--text)!important; }
html body .main_section_split_blog p { font-size: 18px!important; letter-spacing: 0.48px!important; line-height: 23px!important; color: var(--text)!important; }
.author-info{ margin-top: 20px; color: var(--text); }
.author-info p{ margin-bottom:5px!important }
.post-publish-date{ margin-bottom: -10px!important; }
.social-share-links a{ width: 30px; display: block; }
.social-share-links{ display: flex; align-content: center; flex-direction: row; align-items: center; gap: 10px; margin-top: 10px; }
.social-share-links-h6{ margin: 0 auto; display: inline-block; font-size: 21px; width: 100%; }
@media screen and (max-width: 991px) { .mobile-blog-section-inner_reverse { display: flex; } body .vc_col-sm-6 { width: 100% !important; } .social-share-links-h6 { text-align: center; } .post-categories { justify-content: center; } .social-share-links { justify-content: center; } .mobile-blog-section-inner{ margin: 70px 0!important; gap: 29px; flex-direction: column; align-content: center; text-align: center; padding:0 3%!important; color:var(--text)!important; } html body .control_font_bsk p{ font-size:17px!important } .mobile-blog-section-inner .vc_column_container{ width:100% } body .mobile-blog-section-inner-first{ margin-top:30px!important } .mobile-blog-section-inner:last-child{ margin-bottom:0!important } html body.post-template-blog-post-v2 .main_section_split_blog p { font-size: 17px!important; letter-spacing: 0.48px!important; line-height: 23px!important; color: var(--text)!important; } .post-publish-date { margin-bottom: 0px!important; font-size:13px; text-align: center; } .publish_date_main { margin-top:-20px!important } .post-template-blog-post-v2 .entry-content{ margin-top: 0; } .hide_row_blog{ display:none!important; } html body .vc_hidden-xs { display: none !important; } .mobile_main_content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .mobile_main_content figure.wpb_wrapper.vc_figure, .mobile_main_content figure.wpb_wrapper.vc_figure .vc_single_image-wrapper.vc_box_border_grey{ width: 100%; } .mobile_main_content figure.wpb_wrapper.vc_figure img{ width: 100%; object-fit: cover; height: 100%; max-height: 350px; } }
@media screen and (max-width: 767px) { .one-container .site-content{ padding: 8px!important; } }
@media screen and (max-width: 590px) { .social-share-links a { width: 25px; display: block; } .social-share-links { gap: 15px; } }
@media screen and (max-width: 440px) { .post-title .title { max-height: 49px; overflow: hidden; } }
@media screen and (max-width: 423px) { .post-info-container .read-more-btn { font-size: 12px !important; letter-spacing: 2.5px; padding: 5px; } }

/* ═══ HOME BLOG — from home-blog-template.php ═══ */
div#right-sidebar { display: none !important; }
body .inside-navigation img.header-image.is-logo-image { height: 100% !important; padding-left: 10%; }
.blog_post_heading h1 { font-size: 65px; }
.shop-content p { font-size: 30px !important; line-height: 33px !important; }
.shop-content h2 { font-size: 65px; }
.shop-content p { font-family: 'Cormorant' !important; font-weight: 500 !important; }
.blog_post_thumbnail_container.clickable-post .post-title h4:hover, .blog_post_thumbnail_container.clickable-post .post-excerpt:hover { text-decoration: underline; cursor: pointer; }
div#blog_category_filter p { font-size: 24px !important; font-family: 'Cormorant' !important; margin-top: 10px; }
button.load_more_button { position: absolute; left: 46%; margin-top: -75px; background-color: var(--black); border-radius: 10px; font-size: 18px; min-width: 183px; text-transform: capitalize; }
.blog_post_search { place-self: center !important; align-items: center !important; align-self: center !important; justify-content: center; display: flex; }
input.input_search_post { min-width: 400px !important; border-radius: 8px; border-color: #707070 !important; background-color: #fff !important; }
div#blog_category_filter { display: flex; justify-content: center; gap: 10px; align-items: center; }
a.category_filter_button { background-color: #F0F0F0; border-radius: 23px; border-color: #b5b5b5; border: 0 solid; min-width: 115px; text-align: center; margin-bottom: 20px !important; padding-top: 7px; padding-bottom: 10px; cursor: pointer; }
.blog_post_heading { justify-items: center !important; padding-top: 30px; padding-bottom: 3px; text-align: center; margin-bottom:0px!important; }
ul.blog_post_thumbnails_container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 25px; padding: 0 8% !important; margin: 41px auto; justify-content: center; max-width: 1700px; row-gap: 66px; margin-bottom: 100px!important; }
.blog_post_thumbnails_container .image-container img { min-height: 400px; min-width: 444px; object-fit: cover; }
li.blog_post_thumbnail_container.clickable-post::marker{ color:#ffffff00!important; }
p.post-category-title { background-color: #F0F0F0; text-align: center; padding: 10px; border-radius: 20px; position: relative; min-width: 115px !important; max-width: 130px; }
.post-categories { margin-top: -60px; margin-left: 10px; }
a.read-more-btn { background-color: #F0F0F0; padding: 7px; border-radius: 10px; }
.shop-the-range { text-align: center; margin-top: 7%; margin-bottom:0%; position: relative; }
.shop-banner { width: 100%; max-height: 800px; object-fit: cover; }
.shop-content { position: absolute; top: 50%; left: 50%; transform: translate(-100%, -117%); color: var(--text); padding: 20px; border-radius: 10px; }
@media screen and (max-width: 1460px){ .blog_post_thumbnails_container .image-container img { min-height: 320px; min-width: 400px; object-fit: cover; } }
@media screen and (max-width: 1300px){ .blog_post_thumbnails_container .image-container img { min-height: 293px; min-width: 350px; object-fit: cover; } }
@media screen and (max-width: 1200px) { .blog_post_thumbnails_container .image-container img { min-height: 275px; min-width: 315px; object-fit: cover; } body .control_font_bsk h4 { font-family: 'Cormorant' !important; font-size: 27px !important; line-height: 1.0 !important; letter-spacing: 0px !important; } }
@media screen and (max-width: 1600px){ .shop-content { position: absolute; top: 50%; left: 50%; transform: translate(-93%, -105%); color: var(--text); padding: 20px; border-radius: 10px; } .shop-content p { font-size: 27px !important; line-height: 33px !important; } }
@media screen and (max-width: 1430px){ .shop-content { position: absolute; top: 50%; left: 50%; transform: translate(-93%, -100%); color: var(--text); padding: 20px; border-radius: 10px; } .shop-content p { font-size: 27px !important; line-height: 33px !important; } }
@media screen and (max-width: 1300px){ .shop-content { position: absolute; top: 50%; left: 50%; transform: translate(-90%, -100%); color: var(--text); padding: 20px; border-radius: 10px; } .shop-content p { font-size: 25px !important; line-height: 33px !important; } }
@media screen and (max-width: 1200px){ .shop-content { position: absolute; top: 50%; left: 50%; transform: translate(-98%, -82%); color: var(--text); padding: 20px; border-radius: 10px; } .shop-content p { font-size: 22px !important; line-height: 33px !important; } }
@media screen and (max-width: 1050px){ .shop-content { position: absolute; top: 50%; left: 50%; transform: translate(-95%, -80%); color: var(--text); padding: 20px; border-radius: 10px; } .shop-content p { font-size: 18px !important; line-height: 31px !important; } }
.shop-button { background-color: #fff; color: var(--text); font-weight: 500; font-size: 15px; letter-spacing: 0; width: fit-content; padding: 11px 69px 10px; line-height: 24px; margin: 0 auto; border-radius: 5px; border: 1px solid #000; }
.shop-button:hover { background-color: #fff; }
@media screen and (max-width: 990px){ ul.blog_post_thumbnails_container { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 25px; padding: 0 8% !important; margin: 41px auto; justify-content: center; max-width: 1700px; row-gap: 20px; margin-bottom: 100px !important; } div#blog_category_filter { display: flex; justify-content: center; gap: 6px; align-items: center; flex-wrap: wrap; } }
@media screen and (max-width: 990px) { .shop-content { position: absolute; top: 39%; left: 50%; transform: translate(-90%, -55%); color: var(--text); padding: 0; border-radius: 10px; } button.load_more_button { position: absolute; left: 34%; margin-top: -75px; background-color: var(--black); border-radius: 10px; font-size: 18px; min-width: 183px; text-transform: capitalize; } .shop-banner { width: 100%; max-height: 800px; object-fit: cover; min-height: 391px; min-width: 668px; } .shop-button { background-color: #fff; color: var(--text); font-weight: 500; font-size: 15px; letter-spacing: 0; width: fit-content; padding: 11px 25px 10px; line-height: 24px; margin: 0 auto; border-radius: 5px; border: 1px solid #000; } input.input_search_post { min-width: 300px !important; border-radius: 8px; border-color: #707070 !important; background-color: #fff !important; } p { font-family: 'Ysabeau' !important; font-size: 18px !important; letter-spacing: 0.48px !important; line-height: 23px !important; padding-left: 5%; padding-right: 5%; } .shop-content h2 { font-size: 29px; } .shop-content p { font-family: 'Cormorant' !important; font-weight: 500 !important; } }
@media screen and (max-width: 550px) { .shop-content { position: absolute; top: 42%; left: 50%; transform: translate(-54%, -58%); color: var(--text); padding: 0; border-radius: 10px; min-width: 100%; } .shop-content p { font-size: 18px !important; line-height: 31px !important; padding-left: 64px; padding-right: 64px; } button.load_more_button { position: absolute; left: 29%; margin-top: -75px; background-color: var(--black); border-radius: 10px; font-size: 18px; min-width: 183px; text-transform: capitalize; } }
.container_scent_sample { display: flex; justify-content: center; flex-direction: column; text-align: center; margin-top: 40px; margin-bottom: 40px; align-content: center; align-items: center; color: var(--text); }
.icon_scent_sample { max-width: 200px !important; position: relative !important; top: -0px !important; margin-top: 0px !important; }
.header_scent_sample, .subheader_scent_sample, .p_scent_sample{ padding-left:5%; padding-right:5%; }
.header_scent_sample { font-size: 36px; margin-top: 20px; margin-bottom: 10px !important; font-weight: 400; }
.subheader_scent_sample { font-size: 24px; margin-top: 0; margin-bottom: 8px !important; font-weight: 400; font-family: 'Ysabeau'!important; }
.hp-read-more-btn-drk { background-color: var(--black) !important; border-radius: 10px; margin-bottom: 25px; }
button#read-more-btn-drk { background: var(--black); border-radius: 10px !important; }
.number_scent_sample { font-size: 18px; margin-top: 0; margin-bottom: 8px !important; font-weight: 300; font-family: 'Ysabeau'!important; padding-bottom:20px!important; }
.p_scent_sample { padding-bottom: 20px; font-size: 18px; margin-top: 0px; margin-bottom:0px!important; font-weight: 300 }
.subheader_scent_sample a { color: var(--text); text-decoration: none }
@media only screen and (max-width: 600px) { .subheader_scent_sample, .number_scent_sample, .p_scent_sample { font-size: 14px; } .number_scent_sample a{ font-size: 15px; } .header_scent_sample { font-size: 25px; margin-top: 0px; margin-bottom: 3px!important; } .icon_scent_sample { max-width: 130px!important; position: relative!important; top: 0px!important; margin-top: -28px!important; } }

/* ═══ CATEGORY — from category.php ═══ */
.category-page-container .account-cart-icons-wrapper { display: none !important; }
.category-page-container .container.grid-container { max-width: 100%; }
.category-page-container .signup-container { margin-top: 40px; }
.category-page-container .category-header { width: 100vw; }
.category-page-container .site-content { padding: 0 !important; }
.category-background-image { width: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; height: 384px; }
.category-header { position: relative; }
.header-text-wrapper { position: absolute; top: 4%; left: 42%; text-align: center; }
.header-text-wrapper .category-title { color: #fff; margin-bottom: 5px !important; }
.header-text-wrapper .category-text { text-align: center; letter-spacing: 3.75px !important; color: #FFFFFF !important; }
.category-posts-container { background-color: #DCD5CD; padding: 50px 0px 65px; }
html body .main-texts-wrapper { text-align: center; margin-bottom: 40px !important; }
.main-texts-wrapper .category-title { margin-bottom: 5px !important; text-align: center; color: var(--text); }
.main-texts-wrapper .category-text { margin-bottom: 0 !important; text-align: center; letter-spacing: 3.75px !important; color: var(--text) !important; text-transform: uppercase; }
.all-posts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; width: fit-content; max-width: 1600px; margin: 0 auto; padding: 0 45px; }
.category-page-container .post { max-width: 313px; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.category-page-container .post .post-thumbnail { max-height: 200px; max-width: 313px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.category-page-container .post-thumbnail::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); }
.category-page-container .post-thumbnail a, .category-page-container .post-thumbnail a img { width: 100%; height: 100%; object-fit: cover; line-height: 0; }
.category-page-container .post h2 { max-width: 216px; text-align: center; margin: 0 auto; position: absolute; padding: 0 10px; }
.category-page-container .post h2{ line-height: 32px; }
.category-page-container .post h2 a { color: #FFFFFF; font-size: 30px; }
.post-text-wrapper { padding: 20px; text-align: center; background-color: #fff; }
.post-text-wrapper p { letter-spacing: 0.18px !important; color: var(--text); margin-bottom: 20px; max-height: 92px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.post-text-wrapper .read-more { padding: 10px 40px; background-color: transparent; color: var(--text) !important; text-align: center; text-transform: uppercase; border: 1px solid #565656; text-decoration: none; border-radius: 8px; letter-spacing: 4.5px; margin: 0 auto; display: block; max-width: 375px; }
@media only screen and (min-width: 2000px) { .header-text-wrapper { top: 1%; } }
@media only screen and (min-width: 1200px) { .latest-posts ul { margin: 0 35px 0 !important; background-color: #fff; padding: 30px 78px; } .latest-posts-main { margin: 30px 0 !important; } }
@media only screen and (max-width: 1200px) { .header-text-wrapper { top: 13%; left: 40%; } }
@media screen and (min-width: 769px) { .category-page-container .post .post-thumbnail img { min-height: 205px; } .post-text-wrapper p { min-height: 92px; } }
@media screen and (max-width: 1080px) { .header-text-wrapper { top: 10%; left: 40%; } }
@media screen and (max-width: 992px) { .mobile_main_title, .site-main>* { margin-bottom: 0px; } .all-posts { flex-wrap: wrap; } }
@media screen and (max-width: 767px) { .all-posts { padding: 0 14px; } .category-page-container .post h2{ line-height: 23px; } .category-page-container .post h2 a { font-size: 20px; } .category-page-container .posts-wrapper .post { width: 32vw !important; min-width: 160px; } .post-text-wrapper { padding: 12px; } .post-text-wrapper p { margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; letter-spacing: 0.12px !important; height: 45px; overflow: hidden; min-height: 75px; } .post-text-wrapper a.read-more { padding: 5px 10px; font-size: 8px; letter-spacing: 1.75px; border-radius: 3px; } .post-thumbnail a { height: 150px; } }
@media screen and (max-width: 700px) { .header-text-wrapper { top: 10%; left: 34%; } }
@media screen and (max-width: 590px) { .category-background-image { height: 170px; } .post-title { min-height: 0; } .header-text-wrapper { top: 6%; left: 29%; } }
@media screen and (max-width: 440px) { .post-thumbnail a { height: 113px; } }
@media screen and (max-width: 400px) { .header-text-wrapper { left: 23%; } .post-info-container .read-more-btn { font-size: 12px !important; padding: 5px 10px; letter-spacing: 2.5px; } }
@media screen and (max-width: 361px) { .category-page-container .posts-wrapper .post { min-width: 143px; } }

/* MOBILE OVERFLOW FIX — "50% 50%" columns plus a 15px gap are 15px wider than
   the list, and grid items won't shrink below their content, so the latest-posts
   grid pushed the page wider than the phone. minmax(0,1fr) keeps both columns
   inside the list. */
@media screen and (max-width: 1080px) {
    .latest-posts ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }
    .latest-posts ul li,
    .latest-posts .image-container,
    .latest-posts .post-info-container {
        min-width: 0;
        max-width: 100%;
    }
}