/*
Theme Name:   	Storefront Child Theme
Author:       	JQ
/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2023 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Variable(Variable font)
 * Satoshi Variable Italic(Variable font)
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
       url('fonts/Satoshi-Variable.woff') format('woff'),
       url('fonts/Satoshi-Variable.ttf') format('truetype');
       font-weight: 300 900;
       font-display: swap;
       font-style: normal;
}


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('/fonts/Satoshi-VariableItalic.woff') format('woff'),
       url('/fonts/Satoshi-VariableItalic.ttf') format('truetype');
       font-weight: 300 900;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Light';
  src: url('/fonts/Satoshi-Light.woff2') format('woff2'),
       url('/fonts/Satoshi-Light.woff') format('woff'),
       url('/fonts/Satoshi-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('fonts/Satoshi-LightItalic.woff') format('woff'),
       url('fonts/Satoshi-LightItalic.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Regular';
  src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
       url('fonts/Satoshi-Regular.woff') format('woff'),
       url('fonts/Satoshi-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-Italic';
  src: url('fonts/Satoshi-Italic.woff2') format('woff2'),
       url('fonts/Satoshi-Italic.woff') format('woff'),
       url('fonts/Satoshi-Italic.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Medium';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
       url('fonts/Satoshi-Medium.woff') format('woff'),
       url('fonts/Satoshi-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('fonts/Satoshi-MediumItalic.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Bold';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
       url('fonts/Satoshi-Bold.woff') format('woff'),
       url('fonts/Satoshi-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('fonts/Satoshi-BoldItalic.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Black';
  src: url('fonts/Satoshi-Black.woff2') format('woff2'),
       url('fonts/Satoshi-Black.woff') format('woff'),
       url('fonts/Satoshi-Black.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('fonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('fonts/Satoshi-BlackItalic.woff') format('woff'),
       url('fonts/Satoshi-BlackItalic.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: italic;
}

/*

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

*/
/*
 * Add your own custom css below this text.
 */
 
 body, button, input, select, textarea{  font-family: 'Satoshi-Medium'; font-size:15px; line-height:2}
 .site-info{display:none}
a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus{outline:none!important} 


.page-id-16 #block-18, .page-id-16 #block-15, .page-id-16 #block-10 {
	display: none!important
}	

body {
	background-image: none!important
}

#block-18 {
	padding-left: 20px!important;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}

#block-15 {
	padding-left: 20px!important;
    padding-top: 0px!important;
    padding-bottom: 10px!important;
	margin-top: -20px!important
}

#block-10 {
	margin-top: -20px!important;
	margin-bottom: 20px!important;
	padding-left: 20px!important;
	padding-bottom: 10px!important;
}

#block-18, #block-15, #block-10 {
	margin: 0;
	padding: 0
}

.fcomplete-wrap {
	z-index: 9846
}

.fs-wrap {
	width: 250px!important
}

#block-18 .widget-title {
	margin-bottom: 0px!important;
    padding-bottom: 8px
}

.facetwp-autocomplete, .facetwp-search {
    background: white!important;
    padding: 4px 10px!important;
    border: 1px solid #ddd!important;
    box-shadow: none!important;
	width: 250px!important
}

.fs-label-wrap {
	padding: 6px!important
}

.facetwp-autocomplete-update {display: none!important}

.facetwp-facet {
	margin-bottom: 0px!important
}

#block-18 > p, #block-15 > p {display: none}

.site-header > .col-full{position:relative; margin-bottom:50px}
.woocommerce-active .site-header .site-search {
    width: 300px;
    float: none;
    margin-right: 0;
    clear: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); margin-bottom:0;
}
.woocommerce-active .site-header .site-search input{background:#939497; border-radius:5px; color:#fff; font-size:18px; padding: 15px 25px;}
.site-header .site-search .widget_product_search form input[type=search], .site-search .widget_product_search form input[type=text] {padding: 15px 25px;}
.site-header .site-search .widget_product_search form:before{content:"\f002"; font-family:"Font Awesome 6 Pro"; font-weight:300; opacity:1; position:absolute; top:20px; left:auto; color:#fff; right:20px; font-size:20px}


.woocommerce-active .site-header .site-search input::placeholder{color:#fff}
.widget_product_categories ul li:before{content:"\f105"; font-family:"Font Awesome 6 Pro"; font-weight:300; opacity:1}
.widget_product_categories ul li a:focus{outline:none!important}
.widget_product_categories ul li.current-cat:before{content:"\f105"}
.widget_product_categories ul li.current-cat a{font-weight:700}

.widget .widget-title, .widget .widgettitle{font-weight:700}

.widget-area .widget a{font-weight:400; text-decoration:none; color:#2c2d33; font-size:15px}

.widget-area .widget {     background: #f4f4f4;     padding: 20px;}

.products .add_to_cart_button{font-size:15px; font-weight:500}
.products .add_to_cart_button:after{content: "\f07a";    font-family: "Font Awesome 6 Pro";    font-weight: 300; display:inline-block; margin-left:15px;}

@media screen and (min-width: 768px) {
.sd-fixed-width .site {
	
    	
}



.site-header-cart .cart-contents:after{content:"\f07a"; font-family:"Font Awesome 6 Pro"; font-weight:300; opacity:1; line-height:inherit}

.storefront-primary-navigation{background:#584339; font-size:18px; }

.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a{padding: 18px 20px}
.site-header-cart .cart-contents{padding: 18px 20px}

table:not( .has-background ) tbody td{background:#fff}
.wp-block-table:not( .has-background ):not( .is-style-stripes ) tbody tr:nth-child(2n) td{background:#fff}




.col-full{padding: 0 40px; margin: 0}
.sd-max-width .col-full {    max-width: 100%;}
.left-sidebar .widget-area{width:300px}
.left-sidebar .content-area{width:calc(100% - 350px); padding-top:50px;}

.footer-widget-1 i{display:inline-block; width: 25px;}

.site-footer{padding: 0px 0 0}

.storefront-breadcrumb{margin-bottom:30px; font-size:13px;}
.footer-widgets {    display: flex;    flex-wrap: wrap;    align-items: flex-end;}
.footer-widgets .block{float:none!important; display:inline-block!important; vertical-align:bottom;}
.footer-widgets.col-2 .block.footer-widget-2{text-align:right}

.block.footer-widget-1{padding-left:60px;}
.block.footer-widget-1 img{margin-left:-60px}
.woocommerce-active .site-header .main-navigation{width:calc(100% - 230px); margin-right:0}
.woocommerce-active .site-header .site-header-cart{width: 220px;}
}
@media screen and (max-width: 1000px){
	.storefront-primary-navigation {  font-size: 16px;}
}


@media screen and (max-width: 950px){
	.col-full {
    padding: 0 20px;}
.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding: 18px 15px;
}

.woocommerce-active .site-header .site-search {
    top: 50%;
    right: 20px;
	left:auto;
    transform: translate(0, -50%);
    margin-bottom: 0;
}
@media screen and (max-width: 768px){
.site-header > .col-full{margin-bottom:0}
}
}
@media screen and (min-width: 768px){
.sd-fixed-width.sd-header-compact .storefront-primary-navigation, .sd-fixed-width.sd-header-expanded .storefront-primary-navigation {
    margin-left: -8em;
    margin-right: -8em;
    padding-left: 8em;
    padding-right: 8em;
}

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
    margin-bottom: 1.5em;
}
}


@media screen and (min-width: 768px) {
.sd-fixed-width.sd-max-width .site {
    	max-width: 1170px;
}

@media screen and (min-width: 768px) {
.site-header {	
	background-position: right 0%;
	background-repeat: no-repeat;
   	width: 100%;
	height: auto;
	padding-top: 50px;
    padding-bottom: 0px;
	border-bottom:0;
}




.sd-fixed-width .site {
    	background-color: rgba(255, 255, 255, 1);
}



.main-navigation ul a:hover {
	text-decoration: none;
	background: #f5f5f5!important;
	color: #545454! important;	
}




.widget_product_categories ul li.current-cat:before {
    content: "\f101";
}
.widget_product_categories ul li.current-cat:before {
    content: "\f101";
}


ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3 {
    font-size: 16px;
}

ul.products li.product .price {
    font-size: 15px;
    font-weight: bold;
}

ul.products li.product .price, ul.products li.product .star-rating {
    margin: 0 auto 0em;
}



ul.products li.product {
    list-style: none;
    margin-left: 0;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}


ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3 {
font-weight: 600;}

.swc-shop-alignment-left ul.products li.product .star-rating, .swc-shop-alignment-left ul.products li.product img {
    margin-left: 0;
    max-height: 216px;
    width: auto;
}
ul.products li.product:after {
    content: "";
}

stock.in-stock:before {
    content: "\f02d";
}
stock.out-of-stock:before {
    content: "\f05e";
}


site-footer {
box-shadow: 0px -2px 6px 0px #999;
}


.zoeken_popup{display:none}
.zoeken_popup.active{display:block;}