@supports (display: grid) {
	@media (max-width: 992px) {
		.blog-items.columns-4 {
			grid-template-columns: 1fr 1fr;
		}
	}
}
/* 1. Reset the entire grid spacing to 5px */
.com-content-category-blog,
.com-content-category-blog .blog-items {
	padding: 0 !important;
	margin: 0 !important;
	row-gap: 5px !important;  /* Vertical space (5px) */
	column-gap: 5px !important; /* Horizontal space (5px) */
}
/* 2. Remove internal spacing from article box and aggressively remove grid padding */
.com-content-category-blog .blog-item {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
	box-sizing: border-box; 
}
/* 3. CRITICAL: Force the image to fill the grid item without distortion */
.com-content-category-blog .blog-item img {
	/* Ensures the image fills the horizontal space */
	width: 100% !important; 
	/* ---------------------------------------------------- */
	/* This is the key to solving the height/gap issue */
	/* You must set a fixed height for a perfect grid look */
	/* height: 180px; /* <--- ADJUST THIS VALUE! Try 300px or 350px */
	object-fit: cover; /* This makes the image cover the 300px area without stretching */
	/* ---------------------------------------------------- */
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* 4. Aggressively override Bootstrap/Cassiopeia default column padding on the grid items */
.com-content-category-blog .blog-items > * {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* 5. Apply the thin border directly to the image (if you still want a border) */
.com-content-category-blog .blog-item img {
	border: 1px solid #ccc; /* Thin border on the image itself */
}
/* Hiding Intro Text From Main Menu */
/* Target the specific Cassiopeia blog intro text container */
.hide-intro-text .com-content-category-blog__item-introtext {
    display: none !important;
}
/* Also hide any paragraph tags inside the blog items just to be safe */
.hide-intro-text .com-content-category-blog__item p {
    display: none !important;
}
/* New Color Scheme */
/* 1. Change the Blue Header Band to Desert Sand */
.header {
    background-color: #EDC9AF !important; /* Your specific sand color */
    background-image: none !important;     /* This removes the default blue gradient */
}
/* 2. Change the Linked Text Color */
a {
    color: #AD987A !important; /* Your specific medium brown color */
}
/* 3. Link Hover State (recommended for user experience) */
a:hover, a:focus {
    color: #8E7C64 !important; /* A slightly darker shade for contrast when hovering */
    text-decoration: underline;
}
/* 4. Fix Breadcrumb Link Color (optional but looks better) */
.breadcrumb-item a {
    color: #AD987A !important;
}


/* Change background for t-shirt images in blog and article views */
.item-image, 
.full-image {
    background-color: #F9F4EE !important; /* Very light desert sand */
    margin-right: 5px;
    margin-left: 5px;  
    border-radius: 5px;
    display: block;
}
/* Ensure the transparent PNG fills the space nicely */
.item-image img, 
.full-image img {
    background-color: transparent !important;
    mix-blend-mode: multiply; /* Optional: helps blend any slight fringes */
}

.btn-shopee {
    background-color: #AD987A !important; /* Your medium brown color */
    color: #ffffff !important;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: bold;
    display: inline-block;
}

.btn-shopee:hover {
    background-color: #8E7C64 !important;
    transform: scale(1.05);
}


/* Shopee Button */
/* Center and space the home page button */
/* 1. Force the container to be full-width and centered */
.shopee-home-container {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Target the H3 specifically to prevent it from shifting left */
.shopee-home-container h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* 3. The Capsule: Always white text, even after clicking */
.btn-shopee-home, 
.btn-shopee-home:link, 
.btn-shopee-home:visited {
    background-color: #AD987A !important;
    color: #ffffff !important;
    padding: 5px 22px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: bold;
    display: inline-block; /* Inline-block allows it to be centered by the container */
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

/* 4. Hover state */
.btn-shopee-home:hover, 
.btn-shopee-home:active {
    background-color: #8E7C64 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}