/* ===== Category Banner ===== */
.kochi-cat-banner {
    width: 100%;
    margin-bottom: 30px;
}

.kochi-cat-banner__image {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.kochi-cat-banner__image img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.kochi-cat-banner__text {
    text-align: center;
    padding: 30px 20px 40px 20px;
    max-width: 960px;
    margin: 0 auto;
}

.kochi-cat-banner__title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000000;
}

.kochi-cat-banner__desc {
    font-size: 1rem;
    line-height: 1.8;
    color: #000000 !important;
}

/* First line of description = subtitle styling */
.kochi-cat-banner__desc p:first-child {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: #888;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* Hide WooCommerce default title */
.woocommerce-products-header {
    display: none !important;
}

/* Mobile */
@media (max-width: 550px) {
    .kochi-cat-banner__image img {
        
    }
    .kochi-cat-banner__title {
        font-size: 1.4rem;
    }
}


/* Hide breadcrumb on category pages */
.storefront-breadcrumb {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove gap between header and banner */
.kochi-cat-banner {
    margin-top: -20px;
}






/**
 * CATEGORY ARCHIVE GRID LAYOUT
 * Target: All product category pages (.tax-product_cat)
 */

@media (max-width: 767px) {
    /* 1. Reset Container: Kill Storefront floats and enable Grid */
    .archive.tax-product_cat .site-main ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        margin: 0 0 2em 0 !important;
        padding: 0 !important;
    }

    /* 2. Remove Storefront Clearfix and pseudo-elements that break Grids */
    .archive.tax-product_cat .site-main ul.products::before,
    .archive.tax-product_cat .site-main ul.products::after {
        display: none !important;
    }

    /* 3. Reset Items: Remove theme widths and floats */
    .archive.tax-product_cat .site-main ul.products li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 4. Image Consistency */
    .archive.tax-product_cat .site-main ul.products li.product a img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin-bottom: 10px !important;
    }

    /* 5. Title and Price Alignment */
    .archive.tax-product_cat .site-main ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important; /* Adjust font size for 3-col mobile view */
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
        padding: 0 !important;
    }

    .archive.tax-product_cat .site-main ul.products li.product .price {
        font-size: 13px !important;
        margin-bottom: 10px !important;
        display: block !important;
    }

    /* 6. Fix Button Alignment (Add to Cart) */
    .archive.tax-product_cat .site-main ul.products li.product .button {
        margin-top: auto !important; /* Pushes button to bottom of the card */
        padding: 10px 5px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

/**
 * MOBILE SMALL BREAKPOINT
 */
@media (max-width: 550px) {
    .archive.tax-product_cat .site-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .archive.tax-product_cat .site-main ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px !important; /* Slightly larger text for 2-column view */
    }
}



/**
 * Hide Breadcrumbs on Category Pages
 * Removes display and resets all spacing
 */
.archive.tax-product_cat .storefront-breadcrumb {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Optional: Remove extra margin from the top of the content area 
   that often appears after hiding breadcrumbs in Storefront */
.archive.tax-product_cat .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}



/**
 * Hide "Add to Cart" button in product loops 
 * ONLY on Category Pages
 */
.archive.tax-product_cat ul.products li.product .add_to_cart_button {
    display: none !important;
}

/* Also hide the 'screen-reader-text' span associated with it if it causes gaps */
.archive.tax-product_cat ul.products li.product .screen-reader-text {
    display: none !important;
}




/**
 * Category Page Pagination Styling
 * Applied only to category archives at 770px or less
 */
@media (max-width: 770px) {
    .archive.tax-product_cat .pagination, 
    .archive.tax-product_cat .woocommerce-pagination {
        padding: 1em 0 !important;
        border: 1px solid rgba(0, 0, 0, .05) !important;
        border-width: 1px 0 !important;
        text-align: left !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
    }

    /* Optional: Ensure the list inside pagination doesn't have theme-forced margins */
    .archive.tax-product_cat .woocommerce-pagination ul {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
		
    }
}


.kochi-cat-banner__text {
    padding-bottom: 5px;
}







/**
 * Force Line Height on Category Descriptions
 * Targets all 5 categories
 */
.archive.tax-product_cat .term-description p {
    display: block !important;
    line-height: 45px !important; /* Increased to 45px to make the change very obvious */
    margin-bottom: 20px !important;
    height: auto !important;
}

/* Also apply to the container to ensure inheritance */
.archive.tax-product_cat .term-description {
    line-height: 45px !important;
}

/* Fix for Storefront header spacing */
.archive.tax-product_cat .woocommerce-products-header {
    margin-bottom: 40px !important;
}








/**
 * 1. REMOVE THE DUPLICATE
 * This hides the default Storefront header so only your custom banner shows
 */
.archive.tax-product_cat .woocommerce-products-header {
    display: none !important;
}

/**
 * 2. HIDE BREADCRUMBS (If still showing)
 */
.archive.tax-product_cat .storefront-breadcrumb {
    display: none !important;
}

/**
 * 3. FIX LINE HEIGHT ON THE CUSTOM CONTENT
 * Based on your inspector, your class is .kochi-cat-banner__desc
 */
.kochi-cat-banner__desc p {
    line-height: 35px !important; /* This creates the 35px-40px gap you want */
   
    display: block !important;
}

/* Ensure the wrapper doesn't shrink the lines */
.kochi-cat-banner__desc {
    line-height: 35px !important;
}




.tax-product_cat .kochi-cat-banner__title {

    margin-bottom: -4px !important;

}





















/**
 * CATEGORY SECTION HEADER (商品一覧 + Line + product)
 */

/* 1. Container Stacking */
.archive.tax-product_cat .cat-section-header {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    padding-left: 20px !important; /* Space for yellow bar */
    margin: 0px 0 40px 0 !important;
    width: 100%;
}

/* 2. Japanese Title & Yellow Bar */
.archive.tax-product_cat .cat-section-title {
    font-size: 40px !important;
    font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    border: none !important;
}

/* The Yellow Vertical Bar */
.archive.tax-product_cat .cat-section-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 4.4em; /* Heights only the Japanese text */
    background-color: #FCDF00;
}

/* 3. The Row Below (Gray Line + "product") */
.archive.tax-product_cat .cat-section-header::after {
    content: "product"; /* Inject the English word */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: -6px;
    
    /* English Font Style */
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #BBB !important;
    letter-spacing: 0.05em;

    /* The Smart Mask: White background (top) to cut the Gray line (bottom) */
    background-image: linear-gradient(#fff, #fff), linear-gradient(#EAEAEA, #EAEAEA);
    background-position: right center, left center;
    background-repeat: no-repeat;
    
    /* Manage the gap: 80px cuts enough line for "product" + 10px gap */
    background-size: 105px 100%, 100% 2px;
    padding-left: 10px;
}

/* 4. RESPONSIVE - Tablet & Mobile */
@media (max-width: 767px) {
    .archive.tax-product_cat .cat-section-title {
        font-size: 24px !important
	    font-weight:500;
    }
	
	
	.archive.tax-product_cat .cat-section-header::before {
   
    height: 3.4em;

}
}



@media (max-width: 550px) {
	
	.kochi-cat-banner__text {
    text-align: center;
    padding: 30px 0px 40px 0px;
    max-width: 960px;
    margin: 0 auto;
}
	
}



/* 5. RESPONSIVE - Small Phones only */
@media (max-width: 480px) {
    .archive.tax-product_cat .cat-section-header::after {
    
    margin-top: -1px;
    
    font-weight: 600 !important;
   
    background-size: 63px 100%, 100% 2px;
    padding-left: 10px;
		
		
		font-size: 14px !important;
}
	
	.archive.tax-product_cat .cat-section-title {
		font-size:24px !important;
		font-weight:600 !important;
	
}
	
	
	
	
	.archive.tax-product_cat .cat-section-header {
  
    padding-left: 30px !important;
 
}
	
 .archive.tax-product_cat .cat-section-header::before {
        height: 2.8em;
    }

	.kochi-cat-banner__desc p br{
		display:none !important;
	}
	
	
	
}