/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	1.0.0
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Add your own custom css below this text.
 */


body, button, input, select, textarea {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

h1,h2,h3,h4,h5 {
	font-weight:500;
}
.col-full {
        max-width: 74.4989378333em;
}
.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
	    padding: 1em;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 15px;
    text-shadow: 0 0 black;
}
.site-header-cart .cart-contents 
{
	padding:0.7em;
}
.site-branding {
	width:auto !important;
}
a, a:hover {
	text-decoration:none !important;
}
a:focus,img:focus {
outline:none;
	border:none;
}
.entry-header h1 {
	font-size:2em;
}
.top-bar-header {
	background-color:#000;
	width:100%;
	display:inline-block;
	vertical-align:top;
}
.wp-theme-storefront .has-post-thumbnail .entry-header {
	display:none;
}
.page-template-template-homepage.has-post-thumbnail .type-page.has-post-thumbnail {
	    padding-top: 16em;
    padding-bottom: 16em;
}
/*.storefront-primary-navigation {
	background-color:#f1f1f1;
}*/
.storefront-breadcrumb {
	display:none;
    margin-bottom: 0;
    background: #2c2c2c;
    color: #fff;
    padding: 10px 0;
	margin-bottom:20px;
}
.woocommerce-breadcrumb a {
    color: #ffffff;
}
.woocommerce-products-header,
.entry-header{
	padding:20px 0  40px !important;
	text-align:left !important;
}
.archive .woocommerce-products-header {
	padding:53px 0 0 !important;
}
.archive .woocommerce-products-header h1 {
	margin:0 0 20px;
	font-size:1.7em !important;
}
.archive .storefront-sorting {

}
.home.blog .site-header, 
.home.page:not(.page-template-template-homepage) .site-header, 
.home.post-type-archive-product .site-header {
	margin-bottom:0 !important;
}

.woocommerce-shop ul.products li .product_type_variable, .woocommerce-shop ul.products li .add_to_cart_button {
	 box-shadow:none !important;
	 letter-spacing:1px !important;
	 border-radius:0px!important;
	border:1px solid #333;
	 background-color:transparent;
	 color:#000;
	  font-size:12px;
	 width:75%
}
.site-footer .widget_block {
	margin:0 0 .706325903em !important;
}
.site-footer .site-info {
    padding: .617924em 0;
	  text-align:center;
}
.site-footer .site-info{
	display:none;
	visibility:hidden;
	position:relative;
	line-height:0;
}
.type-product {
	margin-top:60px;
}
/*.post-type-archive .woocommerce-products-header, 
.post-type-archive .entry-header,
.post-type-archive .storefront-sorting{
	display:none;
}*/
ul.products li.product, 
ul.products .wc-block-grid__product, 
.wc-block-grid__products li.product, 
.wc-block-grid__products .wc-block-grid__product {
    margin-top: .235801032em !important;
}
.site-header {
	padding-top:20px;
}

.pswp__caption {
	display:none !important;
}
:where(.wc-block-next-previous-buttons__icon) {
    padding: inherit !important;
}
.clears {
	clear: both; 
	width: 100%; 
	height: 0;
}
.full-width-cat-description {
	width: 100%; 
	clear: both; 
	float: left; 
	display: block; 
	box-sizing: 
	border-box; 
	margin: 40px 0 20px;
}
.woocommerce-products-header .term-description {
	display:none;
}
.single-product div.product p.price {
	margin:0.5em 0 !important;
}

.custom-filter {
	position:relative;
}
.custom-filter .wc-block-product-filter-checkbox-list__input-wrapper {
	position:relative;
	gap:0 !important;
	left:-32px;
	background-color:transparent;
}
.custom-filter .wc-block-product-filter-checkbox-list__label {
    gap: 0 !important;
    padding: 0 !important;
    float: left;
    width: 34px;
    position: relative;
    text-align: -webkit-auto;
    /* Do not use display: none here, or the whole element disappears */
    
    /* 1. Hide the text inside the label */
    font-size: 0 !important;
    color: transparent !important;
	margin:5px 0 5px 0;
}

/* 2. Make the checkbox itself transparent */
.custom-filter .wc-block-product-filter-checkbox-list__label input[type="checkbox"] {
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
}
/* 1. Force the parent list container into a single horizontal row layout */
.wc-block-product-attribute-filter-list-item,
.wc-block-components-checkbox,
.wc-block-components-checkbox-control {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
	cursor:pointer;
}

/* 2. Fix the label alignment so text doesn't snap to a new line */
.wc-block-product-attribute-filter-list-item label,
.wc-block-components-checkbox__label {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    width: auto !important;
    margin: 0 !important;
}

/* 3. Ensure the custom circles keep their circular shape and spacing */
.custom-swatch-circle {
    display: inline-block !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important; /* Spaces the circle away from the checkbox square */
    margin-right: 8px !important; /* Spaces the circle away from the text name */
	cursor:pointer;
}


.wc-block-product-attribute-filter-list-item,
.wc-block-components-checkbox,
.wc-block-components-checkbox-control {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    cursor: pointer;
    
    /* ADD THIS LINE BELOW */
    position: relative; 
}
/* 1. Make sure the list item container acts as the positioning anchor */
.wc-block-product-filter-checkbox-list__item {
    position: relative !important;
}

/* 2. Position and hide the text container by default, transforming it into a tooltip box */
.custom-filter .wc-block-product-filter-checkbox-list__text-wrapper {
    position: absolute !important;
    bottom: 125% !important; /* Positions it nicely above the color swatch */
    left: 50% !important;
    transform: translateX(-50%) scale(0.85) !important;
    
    /* Styling the tooltip box */
    background-color: #222222 !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
    
    /* Hide it completely until hovered */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out !important;
    z-index: 9999 !important;
}

/* 3. Style the actual text inside the tooltip box to be visible */
.custom-filter .wc-block-product-filter-checkbox-list__text {
    font-size: 11px !important; /* Gives it a readable typography size */
    color: #ffffff !important;   /* Sets text to crisp white */
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

/* 4. Reveal the text box seamlessly when a user hovers anywhere over the item */
.custom-filter .wc-block-product-filter-checkbox-list__item:hover .wc-block-product-filter-checkbox-list__text-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) scale(1) !important; /* Smooth little pop-in animation */
}

.site-footer .widget_nav_menu ul li {
	padding-left:0px !important;
    margin-bottom:0.50em;
}
.site-footer .widget_nav_menu ul li::before {
	display:none;
	content:normal !important;
}
.footer-bottom {
	width:100%;
	display:inline-block;
	vertical-align:top;
	margin-top:25px;

}
.wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products li {
	text-align:left;
}
.wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products li .price {
    font-size: 15px !important;
    font-weight: 600;
    color: #dd3333;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
	display:none;
}
.archive ul.products li .price {
	font-weight: 600;
}
.tax-product_tag .woocommerce-products-header .page-title  {
	text-transform:capitalize !important;
	margin-bottom:25px !important;
}


/* --- Custom Blog Split Layout Framework --- */

/* Parent Container Wrapper */
.content-area-blog {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
}
.blog-header {
	padding-bottom:0 !important;
}

/* Left Content Column */
.content-area-blog .left-side-wrapper {
    flex: 1 1 700px;
    min-width: 0; /* Prevents flex items from breaking layout boundaries */
}

/* Right Sidebar Column */
.content-area-blog .right-side-wrapper {
    flex: 0 1 300px;
    width: 100%;
}

/* --- Internal Article Feed Elements --- */

/* Individual Article Feed Items */
.blog-posts-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

.blog-feed-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
	margin-bottom:30px;
}

/* Media/Image Fluid Containers */
.blog-feed-media img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Typography & Interactive Links */
.blog-feed-title {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    line-height: 1.3;
}

.blog-feed-title a {
    text-decoration: none;
    color: #222;
}

.blog-feed-title a:hover {
    color: #666;
}

/* Pagination Row Placement */
.blog-view-pagination {
    margin-top: 40px;
    display: flex;
    gap: 10px;
}

/* --- Sidebar Internal Component Spacing --- */
.right-side-wrapper .widget {
    margin-bottom: 40px;
}

.right-side-wrapper .widget-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #222;
}
.blog-single-header {
    margin-bottom: 25px;
}

.blog-single-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.blog-single-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0 0 10px 0;
    color: #111;
}

.blog-single-author {
    font-style: italic;
    color: #888;
    font-size: 0.95rem;
}

.blog-feed-item {
    display: flex;
    flex-direction: row; /* Aligns child wrappers side-by-side */
    gap: 25px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
    align-items: flex-start; /* Keeps text aligned from the top */
}

/* Left side image column */
.blog-feed-item .blog-feed-media {
    flex: 0 0 350px; /* Locks the image box width at a professional 350px width */
    max-width: 350px;
}

.blog-feed-item .blog-feed-media img {
    width: 100%;
    height: 250px; /* Maintains your strict 250px height requirement */
    object-fit: cover; /* Keeps image un-distorted */
    object-position: center;
    display: block;
}

/* Right side content column */
.blog-feed-item .blog-feed-body {
    flex: 1; /* Takes up the remaining available width space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Enhancing Body Text Readability */
.blog-single-body-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

.blog-single-body-content p {
    margin-bottom: 25px;
}

.blog-single-body-content h2, 
.blog-single-body-content h3 {
    margin: 35px 0 15px 0;
    color: #111;
}

/* Post Tags & Navigation Spacing */
.blog-single-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.blog-single-navigation {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.blog-single-navigation a {
    text-decoration: none;
    font-weight: 600;
    color: #222;
}

.blog-single-navigation a:hover {
    color: #666;
}

.blog-single-comments-area {
    margin-top: 50px;
}

/* Responsive Structural Breakpoint for Tablets/Phones */
@media (max-width: 992px) {
    .content-area-blog {
        flex-direction: column;
    }
    
    .content-area-blog .right-side-wrapper {
        flex: 1 1 100%;
    }
}


@media (max-width: 768px) {
	
.storefront-primary-navigation {
    background-color: #fff;
}
	.large-img-section {
		        background: url(https://atelierhikari.com/wp-content/uploads/2026/06/hero-atelier-hikari.webp) no-repeat;
        background-size: cover;
	}
	.large-img-section2 {
		        background: url(https://atelierhikari.com/wp-content/uploads/2026/06/shop-atelier-hakari-1.webp) no-repeat;
        background-size: cover;
				background-position-x:7%;

	}
	.large-img-section img,
	.large-img-section2 img{
		display:none !important;
		overflow:hidden !important;
	} 
	
	
	.large-img-section h1,
	.large-img-section2 h2 {
		font-size:3em !important;
		line-height:50px;
	}
	
	  .blog-feed-item {
        flex-direction: column; /* Stacks image on top of text on small screens */
    }
    
    .blog-feed-item .blog-feed-media {
        flex: 1 1 100%;
        max-width: 100%; /* Allows image to go true full width on mobile */
    }
	.blog-feed-media img {
		width:100%;
		height:auto;
	}
	
}