@media (min-width: 1000px) {
body.home #content .col-full {
        max-width: 60.498938em;
    }
}

@media (max-width: 999px) {
    /* Adding #content ensures this ONLY affects the main body, not the header! */
    .home #content .col-full {
        margin-left: 20px;
        margin-right: 20px;
        padding: 0;
    }
}




/* Target only the home page using the .home body class */
@media (max-width: 767px) {
    .home .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        margin: 0 0 2em 0 !important;
        padding: 0 !important;
    }

    /* Remove Storefront's default float behaviors and pseudo-elements */
    .home .woocommerce ul.products::before,
    .home .woocommerce ul.products::after {
        display: none !important;
    }

    .home .woocommerce ul.products li.product,
    .home .woocommerce ul.products li.product-category {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }

    /* Ensure images fill the grid item */
    .home .woocommerce ul.products li.product a img,
    .home .woocommerce ul.products li.product-category a img {
        width: 100% !important;
        height: auto !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 550px) {
    .home .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}









/**
 * HOMEPAGE SECTION TITLES (Japanese Top / Line + English Bottom)
 */

/* 1. HIDE THE EMPTY GHOST H2 */
.home .entry-content > h2:empty,
.home .entry-content > h2:nth-of-type(2) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* 2. BASE STYLE FOR THE REAL TITLES (Popular & Category) */
.home .entry-content > h2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative;
    padding-left: 26px !important;
    margin: 60px 0 40px 0 !important;
    font-size: 40px !important;
    font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
    color: #000 !important;
    border: none !important;
    line-height: 1.2 !important;
    font-weight: 500;
}

/* 3. THE YELLOW VERTICAL BAR (Only next to Japanese text) */
.home .entry-content > h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 1.7em; 
    background-color: #FCDF00;
}

/* 4. THE ROW BELOW (Gray Line + English Text) */
.home .entry-content > h2::after {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1px; 
    
    /* PRO FIX: Multiple Backgrounds */
    /* Layer 1: White mask (Top layer) | Layer 2: Gray line (Bottom layer) */
    background-image: 
        linear-gradient(#fff, #fff), 
        linear-gradient(#EAEAEA, #EAEAEA);
    background-repeat: no-repeat;
    
    /* Position the white mask to the right and the gray line across the whole width */
    background-position: right center, left center;
    
    /* The 2px is the thickness of your line */
    background-size: 0 100%, 100% 2px; 
    
    /* English Font Style */
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #BBB !important;
    letter-spacing: 0.03em;
}

/* 5. INJECT CONTENT & PUSH TEXT TO RIGHT */
/* We add a white background to the text to "cut" the line behind it */

/* 5. INJECT CONTENT & SET DYNAMIC GAP MASKS */

/* Popular Product (1st H2) */
.home .entry-content > h2:nth-of-type(1)::after {
    content: "Popular product";
    justify-content: flex-end;
    /* This width covers the English text + a 10px gap to its left */
   background-size: 203px 100%, 100% 2px;
    padding-left: 10px; /* The gap you requested */
    background-color: transparent !important; /* Resetting old background */
}

/* Category (3rd H2) */
.home .entry-content > h2:nth-of-type(3)::after {
    content: "Category";
    justify-content: flex-end;
    /* This width covers the shorter "Category" text + 10px gap */
    background-size: 120px 100%, 100% 2px; 
    padding-left: 10px; /* The gap you requested */
    background-color: transparent !important; /* Resetting old background */
}

/* Ensure the English text has a solid white area around it to cut the line */
.home .entry-content > h2:nth-of-type(1)::after,
.home .entry-content > h2:nth-of-type(3)::after {
    background-color: #fff; /* Fallback */
    margin-left: 0;
}

/**
 * Hide Category Titles in the "Search by Category" section 
 * Targets only the Homepage (.home)
 */
.home ul.products li.product-category .woocommerce-loop-category__title {
    display: none !important;
}






/* 6. MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .home .entry-content > h2 {
        font-size: 25px !important;
		padding-left: 23px !important;
    }
    /* On small mobile, we can keep just the line or hide English text if it's too tight */
    .home .entry-content > h2::after {
        font-size: 14px !important;
    }
	
	.home .entry-content > h2:nth-of-type(1)::after {

    background-size: 119px 100%, 100% 2px;
 
}
	
	.home .entry-content > h2:nth-of-type(3)::after {

    background-size: 70px 100%, 100% 2px;
    
}
	
	
	ul.products li.product .woocommerce-loop-product__title{
		font-size: 14px !important;
					color:#000000;
	}
	    span.woocommerce-Price-amount.amount bdi {
        font-size: 14px;
			color:#000000;
   }
	
	
	.home .entry-content > h2:nth-of-type(1)::after {
   
    padding-left:  0px;
  
}
	
	.home .entry-content > h2:nth-of-type(3)::after {
		padding-left:0;
	}

}















/* ==========================================================================
   TOPICS SECTION
   ========================================================================== */
.home-topics {
    text-align: center;
    margin: 0 auto 80px auto;
    width: 100%;
    padding: 0 20px; 
}

.home-topics__title {
    font-size: 40px;
    font-weight: 500;
    color: #FCDF00;
    display: flex;
    align-items: center;
    justify-content: center;
    

    max-width: 958px;
    width: 100%;
    margin: 0 auto 20px auto; 
}

/* The yellow lines on either side */
.home-topics__title::before,
.home-topics__title::after {
    content: "";
    display: block;

    flex-grow: 1; 
    height: 2px;
    background-color: #FCDF00;
}

/* Exactly 28px gap between the text and the lines */
.home-topics__title::before {
    margin-right: 28px;
}
.home-topics__title::after {
    margin-left: 28px;
}

/* Image Banner for PC: max 958px */
.home-topics__banner img {
    max-width: 958px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   MOBILE SETTINGS (< 550px)
   ========================================================================== */
@media (max-width: 550px) {
    .home-topics {
        padding: 0 20px;
        margin: 42px auto 42px auto;
    }

    /* Mobile text: 16px */
    .home-topics__title {
        font-size: 16px;
    }

    /* GUARANTEE the Title lines and the Image are always exactly the same width */
    .home-topics__title,
    .home-topics__banner img {
        max-width: 100%; 
    }

    .home .entry-content>h2:nth-of-type(1) {
        margin-top: 0 !important;
    }
	
	.home-topics__title::before, .home-topics__title::after {
  
    height: 1px;
   
}
	
	    /* Change gap between TOPICS and yellow lines to 8px for SP */
    .home-topics__title::before {
        margin-right: 8px;
    }
    
    .home-topics__title::after {
        margin-left: 8px;
    }

	
	
}