/*
Theme Name: Pavillon du Zoute - webshop
Author: Original Media
Author URI: https://www.originalmedia.eu
Template: storefront
Version: 1.0.0
Text Domain: OM
*/


body, button, input, textarea,
h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-weight: 300; }
h1, h2 { font-family: "Amiri", "Montserrat", sans-serif; font-weight: 300; }
a { font-weight: inherit; }

.button { font-weight: 300 !important; text-transform: uppercase; }
.button.alt:hover { background-color: #ab8e43; }


.storefront-handheld-footer-bar ul li.cart .count { background: #ab8e43; }

.woocommerce-Price-currencySymbol { margin-right: 0.25em; }

#icon-sprite-social { display: none !important; height: 0 !important; visibility: none !important; width: 0 !important; }


/* NAVIGATION
 *************************************************************************************************/
nav ul.sf-menu { list-style: none; margin: 0; padding: 0; }
nav ul.sf-menu ul { background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); left: 50%; list-style: none; margin: 10px 0 0 -100px; position: absolute; width: 200px; z-index: 100; }
nav ul.sf-menu li:hover > ul,
nav ul.sf-menu li.sfHover > ul { display: block; }

nav ul.sf-menu li:hover > ul::before,
nav ul.sf-menu li.sfHover > ul::before { border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ''; display: block; left: 50%; margin: 0 0 0 -10px; position: absolute; top: -10px; }

/* NAVIGATIE > Niveau 2+ */
nav ul.sf-menu ul ul { left: 210px; margin: 0; top: 0; }
nav ul.sf-menu ul li:hover > ul,
nav ul.sf-menu ul li.sfHover > ul { display: block; }

nav ul.sf-menu ul li:hover > ul::before,
nav ul.sf-menu ul li.sfHover > ul::before { border-bottom-color: transparent; border-left: none; border-right-color: #fff; border-top: 10px solid transparent; left: -10px; margin: 0; top: 10px; }


nav ul.sf-menu ul a { color: #373534; display: block; font-size: 16px; line-height: 24px; padding: 0.278em 0.556em; text-align: center; }
nav ul.sf-menu ul a:hover,
nav ul.sf-menu ul .sfHover > a { background-color: #ab8e43; color: #fff; }

/* NAVIGATIE > Niveau 2+ > Last Child */
nav ul.sf-menu > li:last-child ul li:hover > ul,
nav ul.sf-menu > li:last-child ul li.sfHover > ul { left: auto; right: 210px; }

nav ul.sf-menu > li:last-child ul li:hover > ul::before,
nav ul.sf-menu > li:last-child ul li.sfHover > ul::before { border-left: 10px solid #fff; border-right: none; left: auto; right: -10px; }


#page { position: relative; }


/* TOP HEADER
 *************************************************************************************************/
#header-top { background-color: #ab8e43; position: relative; z-index: 1000; }
#nav-top { margin: 0 auto; position: relative; }
#nav-top svg { fill: currentColor; height: 20px; width: 20px; }

#nav-top > ul { display: inline-block; list-style: none; margin: 0; padding: 0 10px; }
#nav-top > ul + ul { float: right; }
#nav-top > ul > li { display: inline-block; position: relative; vertical-align: top; }
#nav-top > ul > li + li { padding-left: 10px; }
#nav-top > ul > li + li::before { background: #fff; content: ''; display: block; height: 4px; left: 3px; margin-top: -2px; position: absolute; top: 50%; width: 4px; }

#nav-top > ul > li:not(.language) > a { border-radius: 50%; color: #fff; display: inline-block; font-size: 0; line-height: 0; margin: 0; padding: 7px; transition: background 0.35s; }
#nav-top > ul > li > a:hover,
#nav-top > ul > li.sfHover > a,
#nav-top > ul > li > a.active { background-color: rgba(255,255,255,0.1); }


#nav-top > ul > li.language > a { color: #fff; display: inline-block; font-size: 0; line-height: 0; padding: 6px 30px 6px 7px; vertical-align: top; }
#nav-top > ul > li.language > a > span { display: inline-block; font-size: 14px; line-height: 20px; text-align: center; text-transform: uppercase; vertical-align: top; }
#nav-top .language > a::before,
#nav-top .language > a::after { background: currentColor; content: ''; display: block; height: 1px; margin-top: 2px; position: absolute; right: 15px; top: 50%; transition: all .35s; width: 8px;
	-webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
#nav-top .language > a::before {
	-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
}
#nav-top .language > a::after {
	-webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);
}
#nav-top .language > a:hover::before,
#nav-top .language.sfHover > a::before { margin-top: -3px;
	-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);
}
#nav-top .language > a:hover::after,
#nav-top .language.sfHover > a::after { margin-top: -3px;
	-webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg);
}

.site-header { box-shadow: 0 0 5px rgba(0,0,0,0.5); }

.site-header .site-logo-anchor img,
.site-header .site-logo-link img,
.site-header .custom-logo-link img { max-width: 300px; }


.main-navigation ul.nav-menu > li > a { font-family: "Amiri", "Montserrat", sans-serif; position: relative; text-transform: uppercase; }
.main-navigation ul.nav-menu > li > a:hover { color: inherit !important; }
.main-navigation ul.nav-menu > li > a::after { background: #ab8e43; content: ''; display: block; height: 1px; left: 50%; position: absolute; transition: width 0.35s; width: 0;
	-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
}
.main-navigation ul.nav-menu > li > a:hover::after,
.main-navigation ul.nav-menu > li.current_page_item > a::after { width: calc( 100% - 2em); }


/* WEATHER WIDGET
 *************************************************************************************************/
#pdz-weather-widget { background: #383637; display: none; position: absolute; top: 40px; width: 100%; z-index: 7001; }
#pdz-weather-widget > .widget { margin: 0 !important; }
.awesome-weather-wrap { font: inherit; }
.awesome-weather-header { background-color: #816a30; }
.pdz-awesome-weather-full { background-color: #816a30; color: #fff; display: block; margin: 0; padding: 5px 10px; text-align: center; }
.pdz-awesome-weather-full > a { color: #fff; display: inline-block; padding: 5px 20px; text-decoration: none; transition: background 0.35s; }
.pdz-awesome-weather-full > a:hover { background-color: #ab8e43; }


/* REMOVE SIDEBAR
 *************************************************************************************************/
body #primary { width: 100%; }


/* PRODUCTS > HOME
 *************************************************************************************************/
ul.products li.product, ul.products .wc-block-grid__product,
.wc-block-grid__products li.product, .wc-block-grid__products .wc-block-grid__product { box-shadow: 5px 5px 5px rgba(0,0,0,0.25); }

ul.products li.product > a, ul.products .wc-block-grid__product > a,
.wc-block-grid__products li.product > a, .wc-block-grid__products .wc-block-grid__product > a { border: 0px none !important; display: block; font-size: 0; line-height: 0; position: relative; }

.pdz-loop-product-image { background-color: #efefef; font-size: 0; height: 0; line-height: 0; padding: 0 0 100%; position: relative; }
.pdz-loop-product-image img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.pdz-loop-product-image figcaption { display: none; }

.pdz-loop-product-info { background: rgba(255,255,255,0.85); bottom: 15px; color: #373534; display: block; max-width: 85%; min-width: 50%; padding: 0; position: absolute; text-align: left; }
.pdz-loop-product-info .woocommerce-loop-product__title { color: #373534; display: inline-block; font-family: inherit; font-size: 1rem !important; line-height: 1.25; margin: 0 !important; padding: 0.5em 1em; }

.pdz-loop-product-cart { background: #373534; color: #fff; display: block; padding: 0; position: relative; text-align: left;
	display: grid;
	grid-template-columns: auto minmax(170px,50%);
}
.pdz-loop-product-cart .price { color: #fff !important; font-size: 1em !important; line-height: 1 !important; margin-bottom: 0 !important; padding: 0.5em 1em;
	align-self: center;
}
.pdz-loop-product-cart .button { align-self: stretch; font-style: italic; margin-bottom: 0 !important; text-align: right; text-transform: lowercase; }

.added_to_cart { background: #ab8e43; border-top: 1px solid #fff !important; text-align: center;
	grid-column: 1 / span 2;
}

/* Categorieën */
.pdz-loop-product-cat-image { background-color: #efefef; font-size: 0; height: 0; line-height: 0; padding: 0 0 100%; position: relative; }
.pdz-loop-product-cat-image img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.pdz-loop-product-cat-image figcaption { display: none; }
.woocommerce-loop-category__title { background: rgba(255,255,255,0.85); bottom: 15px; color: #373534; font-family: inherit; font-size: 1rem !important; font-weight: inherit; left: 0; line-height: 1.25; max-width: 85%; min-width: 50%; padding: 0.5em 1em; position: absolute; text-align: left; }

ul.products li.product h2,
ul.products li.product h3,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .wc-block-grid__product-title,
ul.products .wc-block-grid__product h2,
ul.products .wc-block-grid__product h3,
ul.products .wc-block-grid__product .woocommerce-loop-product__title,
ul.products .wc-block-grid__product .wc-block-grid__product-title,
.wc-block-grid__products li.product h2,
.wc-block-grid__products li.product h3,
.wc-block-grid__products li.product .woocommerce-loop-product__title,
.wc-block-grid__products li.product .wc-block-grid__product-title,
.wc-block-grid__products .wc-block-grid__product h2,
.wc-block-grid__products .wc-block-grid__product h3,
.wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__title,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title { margin-top: 0.5em; }


/* FOOTER
 *************************************************************************************************/
.site-footer { border-top: 5px solid #ab8e43; padding: 0; }
.site-footer .footer-widgets a:not(.button):not(.components-button) { color: #fff; text-decoration: none; }

.widget .widget-title { border-bottom: 0px none; display: block; font-size: inherit; margin-bottom: 0.75em; padding-bottom: 0.75em; position: relative; text-align: center; text-transform: uppercase; width: 100%; }
.widget .widget-title::after { background: #ab8e43; bottom: 0; content: ''; display: block; height: 1px; left: 50%; margin-left: -35px; position: absolute; width: 70px; }

.widget.widget_hcard .vcard { text-align: center; text-transform: uppercase; }
.widget.widget_hcard .vcard > h2 { display: none; }
.widget.widget_hcard .vcard > p { margin-bottom: 1em; }
.widget.widget_hcard .vcard .prefix { display: inline-block; margin-right: 0.5em; }
.widget.widget_hcard .hidden { display: none; }

.widget.widget_logo .widget-title { display: none; }
.widget.widget_logo figure { margin: 0 auto; max-width: 320px; }
.widget.widget_logo figcaption { display: none; }

.widget.widget_mailchimp fieldset { background-color: transparent; margin-bottom: 0; padding: 0; }
.widget.widget_mailchimp label:not(.om-label-choice) { display: none; }
.widget.widget_mailchimp fieldset input:not(.button):not([type=radio]):not([type=checkbox]) { background: #646364; color: #fff; width: 100%; }

.widget.widget_mailchimp abbr[title] { border: none; }
.widget.widget_mailchimp p { margin-bottom: 0.5em; }
.widget.widget_mailchimp p.gdpr .om-label-choice > span { font-size: 9px; margin-left: 5px; }
.widget.widget_mailchimp p.gdpr .om-label-choice > span > a { text-decoration: underline; }
.widget.widget_mailchimp p.center { text-align: center; }


/* MEDIA QUERIES
 *************************************************************************************************/
@media only screen and ( min-width: 768px ) {
	#nav-top { box-sizing: content-box; max-width: 66.4989378333em; padding: 3px 2.617924em; }
	
	.site-header { padding-top: 1em; }
	
	.footer-widgets { padding-top: 2em; }
}

@media only screen and ( min-width: 640px ) {
	#nav-top > ul > li.phone > a { border-radius: 17px; }
	#nav-top > ul > li.phone > a > span { display: inline-block; font-size: 14px; line-height: 20px; margin-left: 5px; padding: 0 5px; vertical-align: top; }
}

@media only screen and ( max-width: 1200px ) {
	#nav-top > ul > li.language > ul { left: auto; margin-left: 0; right: 0; }
	
	.site-footer .footer-widgets { font-size: 0.889em; }
}
@media only screen and ( max-width: 1000px ) {
	
}
@media only screen and ( max-width: 480px ) {
	#nav-top > ul > li.hcard,
	#nav-top > ul > li.weather { display: none; }
}