/*
Theme Name: Shop Onokaa
Author: Onokaa
Author URI: https://www.onokaa.com
Description: Shop Theme by Onokaa
Version: 1.1.50
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onokaa
*/

@charset "UTF-8";

/*--------------------------------------------------------------
	0. Global
--------------------------------------------------------------*/
* {box-sizing: border-box}
html, body{margin: 0; padding: 0; color: #333; font-family: "Open Sans",sans-serif;}
html{
  height: 100%;
}
body {
  min-height: 100%;
}
a:focus {
	outline: thin dotted;
}
a:hover,
a:active {
	outline: 0;
}

@media (min-width: 1440px){
	.content-area {
		max-width: 1280px;
	}
}

@media (max-width: 767px) {
	.grid{display: inline-block !important; width: 100%;}
	.grid > div{width: 100%; margin-left: 0 !important;}
	.grid.has-gutter-xl > * + *, .grid--reverse.has-gutter-xl > * + *{ margin-left: 0;}
}

@media (min-width: 576px){
	.grid.has-gutter-xl > .item-first {
		margin-left: 0;
	}
	.grid.has-gutter-xl > .onk_img.img-right{margin-left: calc(4rem - 0.01px)};
}

@media (min-width: 576px){
	.deux-un{display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -2rem; margin-left: -2rem;}
	.deux-un > * {width: calc(100% / 3 - 4rem - 0.01px); margin-right: 2rem !important; margin-left: 2rem !important; box-sizing: border-box;
	flex: 0 0 auto;
    min-width: 0;
    min-height: 0;}
	.deux-un > div:first-child {
		flex: 0 0 auto;
		width: calc(100% / 3 * 2 - 4rem - 0.01px);
	}
}

section{display: inline-block; width: 100%}
a{
	outline: 0;
    transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, box-shadow .3s ease, text-shadow .3s ease;
}

.hide{display: none;}

.btn, button, input.submit, .frm_button_submit, .wp-block-button__link{
	display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
	margin-bottom: 0.5rem;
	padding: 1rem 4rem;
	border-radius: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	text-decoration: none;
	color: #333;
    background-color: #fff;
    font-weight: 600;
    text-transform: uppercase;
	font-size: 1.4rem;
}

.btn.btn-default, input.submit, .frm_button_submit{background-color: #eee;}
.btn.btn-primary{background-color: #0eb290; color: #fff;}
.btn.btn-primary:hover{background-color: #00967d;}
.btn + .btn{margin-left: 20px;}

.onktc{transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, box-shadow .3s ease, text-shadow .3s ease;}
.onktc:hover{cursor: pointer;}

.content-area{
	width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	display: block;
	position: relative;
}

.entry-content .alignfull {
	margin-left  : calc( -100vw / 2 + 100% / 2 );
	margin-right : calc( -100vw / 2 + 100% / 2 );
	max-width    : 100vw;
	width: calc( 100vw - 10px);
}
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

@media (min-width: 600px) {
  .content-area {
    max-width: 540px;
  }
}

@media (min-width: 782px) {
  .content-area {
    max-width: 768px;
  }
	.entry-content > *.alignwide,
	.entry-summary > *.alignwide {
		width: 100%;
		max-width: 100%;
	}
    .alignfull img {
        width: 100vw;
    }
}

@media (min-width: 992px) {
  .content-area {
    max-width: 960px;
  }
}

@media (min-width: 1280px) {
	.content-area {
		max-width: 1140px;
	}
	.entry-content > *.alignwide,
	.entry-summary > *.alignwide {
		margin-left: -80px; 
		margin-right: -80px;
		width: calc(100% + 160px);
		max-width: none;
	}
}

.aligncenter{text-align:center;}
.alignright{float: right; margin-left: 20px;}
.alignleft{float: left; margin-right: 20px;}


form fieldset{padding: 0;}
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
	display: inline-block;
    padding: 5px 10px;
    font-size: 1.4rem;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d4d4d4;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

/**
 * 7.0 - Accessibility
 */

/* Text meant only for screen readers */
.says,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	/* many screen reader and browser combinations announce broken words as they would appear visually */
	word-wrap: normal !important;
}

/* must have higher specificity than alternative color schemes inline styles */
body .skip-link {
	background-color: #f1f1f1;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	color: #21759b;
	display: block;
	font-family: Montserrat, "Helvetica Neue", sans-serif;
	font-size: 14px;
	font-weight: 700;
	left: -9999em;
	outline: none;
	padding: 15px 23px 14px;
	text-decoration: none;
	text-transform: none;
	top: -9999em;
}

body.logged-in .skip-link {
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	font-family: "Open Sans", sans-serif;
}

body .skip-link:focus {
	clip: auto;
	height: auto;
	left: 6px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
## Gutenberg Media & Text Block Fallback for IE11
--------------------------------------------------------------*/
.wp-block-media-text {
	display: -ms-grid;
	-ms-grid-columns: 50% auto;
}

/* default media on the left */
.wp-block-media-text .wp-block-media-text__media {
	-ms-grid-column: 1;
}
.wp-block-media-text .wp-block-media-text__content {
	-ms-grid-column: 2;
}

/* media on the right */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
	-ms-grid-column: 2;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	-ms-grid-column: 1;
}


.wp-block-media-text{margin-bottom: 50px;}
.wp-block-quote{font-style: italic; margin: 25px 0;}
.wp-block-quote > cite{text-align: right; font-style: normal; display: inherit;}

.wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } 
.wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.wp-block-buttons.aligncenter > .wp-block-button{margin: 0 auto;}

/*--------------------------------------------------------------
	Topbar
--------------------------------------------------------------*/
#top-bar{font-size: 1.2rem; margin: 0; padding: 5px 0; border-bottom: 1px solid #ccc;}
#top-bar .grid > div:last-child{text-align: right;}

/*--------------------------------------------------------------
	Header
--------------------------------------------------------------*/
header{padding: 15px 0; background: #fff; height: 120px; z-index: 9999; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -khtml-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -ms-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -o-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    box-shadow: 0 2px 3px rgba(0,0,0,.09);
}
header.sticky{position: sticky; top: 0; height: 80px;}

ul.breadcrumb, .woocommerce #header .woocommerce-breadcrumb{width: auto; margin: 30px auto 0; display: inline-block; padding: 3px 10px; background-color: rgba(255, 255, 255, 0.1);}
.woocommerce #header .woocommerce-breadcrumb{font-size: 1.2rem; color: #fff; font-weight: bold;}
ul.breadcrumb > li{display: inline-block; margin-right: 10px; font-size: 1.2rem; color: #fff; font-weight: bold;}
ul.breadcrumb > li:after{content:'/'; margin-left: 10px;}
ul.breadcrumb > li:last-child:after{display: none;}
ul.breadcrumb > li:before{display: none;}
ul.breadcrumb > li > a, .woocommerce #header .woocommerce-breadcrumb a{color: #ccc; text-decoration: none; font-weight: normal;}
.woocommerce #header .woocommerce-breadcrumb a{margin: 0 5px;}

/*--------------------------------------------------------------
	Menus
--------------------------------------------------------------*/
header #navbar {display: flex; width: 100%; flex-wrap: nowrap; align-items: center; justify-content: center;}
header #navbar .navbar-brand{height: 90px; display: flex; align-items: center; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s;}
header.sticky #navbar .navbar-brand{height: 50px;}
header #navbar .navbar-brand img{max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}
header #navbar .navbar-nav{ height: 100%; flex-basis: 100%; flex-grow: 1; text-align: right}

header #navbar .navbar-nav > .header-account,
header #navbar .navbar-nav > .header-cart{display: inline-block; vertical-align: middle;}
header #navbar .navbar-nav > .header-account img,
header #navbar .navbar-nav > .header-cart img{max-height: 24px; width: auto;}
header #navbar .navbar-nav > .header-cart .cart-icon{position: relative}
header #navbar .navbar-nav > .header-cart .cart-icon span.mini-cart-items{position: absolute; bottom: -6px; right: -6px; border-radius: 50%; background: #0eb290; color: #fff; font-weight: bold; width: 15px; height: 15px; font-size: 1rem; text-align: center;} 
header #navbar .navbar-nav > .header-cart .price{display: none; } 

header #navbar nav{font-weight: bold; text-transform: uppercase;
	display: none;
    position: absolute;
    background: #eee;
	top: 70px;
	right: 15px;
	min-width: 65%;
	width: auto;
	padding: 5px 25px;
	z-index: 9999;
}
header #navbar nav ul{list-style: none; padding-left: 0;}
header #navbar nav ul > li{position: relative; display: block; padding: 12px 0; border-bottom: 1px solid #ddd;}
header #navbar nav a{text-decoration: none; font-size: 1.5rem;}
header #navbar nav li.active > a{color: #0eb290;}

/* Sous menus */
header #navbar nav > ul > li.dropdown{transition: 0.5s; -webkit-transition:0.5s;}
header #navbar nav > ul > li.dropdown:hover, 
header #navbar nav > ul > li.dropdown:hover > a{color: #0eb290;}

header #navbar nav > ul > li.dropdown > span{display: block; cursor: pointer; float: right; border-left: 1px solid #aaa; padding-left: 10px; font-size: 1.8rem; text-transform: none;}
header #navbar nav ul.dropdown-menu{margin-top: 10px;}
header #navbar nav ul.dropdown-menu > li{display: inline-block; margin-bottom: 0; width: 100%; font-weight: normal; text-transform: none;
		padding: 8px 15px;
		font-size: 1.4rem;
		transition: 0.5s;
		-webkit-transition:0.5s;
	}
header #navbar nav ul.dropdown-menu > li:last-child{border-bottom: 0;}

header #navbar .nav-toggle{display: block; margin-left: 20px; background: #eee; float: right; color: #000; font-size: 24px; padding: 0.6em; cursor: pointer; width: 60px;}
header #navbar .nav-toggle > span{display: block; height: 2px; margin-bottom: 5px; background: #000; width: 100%;}
header #navbar .nav-toggle > span:last-child{margin-bottom: 0;}


@media(min-width: 782px) {
	header #navbar nav {display: inline-block; width: auto; background: transparent; position: inherit; padding: 0;}
	header #navbar .nav-toggle {display: none;}
	header #navbar .navbar-nav > .header-account,
	header #navbar .navbar-nav > .header-cart{vertical-align:text-bottom; }
	header #navbar nav ul > li{display: inline-block; padding: 0 15px; border: 0;}
		
	header #navbar nav ul.dropdown-menu{
		visibility: hidden; opacity: 0; left: 0; background-color: #fff; padding: 0; margin: 5px 0 0; list-style: none; position: absolute; min-width: 180px; top: auto; right: 0; z-index: 999;    
		-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.09);
		-khtml-box-shadow: 0 2px 3px rgba(0,0,0,.09);
		-moz-box-shadow: 0 2px 3px rgba(0,0,0,.09);
		-ms-box-shadow: 0 2px 3px rgba(0,0,0,.09);
		-o-box-shadow: 0 2px 3px rgba(0,0,0,.09);
		box-shadow: 0 2px 3px rgba(0,0,0,.09);
		transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
		display: block !important;
	}
	header #navbar nav > ul > li.dropdown > span{display: none; }
	header #navbar nav > ul > li.dropdown:after{ content: "+"; margin-left: 2px;}
	header #navbar nav > ul > li.dropdown:hover ul.dropdown-menu {
		visibility: visible; /* shows sub-menu */
		opacity: 1;
		z-index: 10;
		transform: translateY(0%);
		transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
	}
		  
	header #navbar nav ul.dropdown-menu > li{
		list-style: none;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 0;
		width: 100%;
		font-weight: normal;
		text-transform: none;
		text-align: left;
		position: relative;
		padding: 0 12px;
		font-size: 1.4rem;
		transition: 0.5s;
		-webkit-transition:0.5s;
	}
	header #navbar nav ul.dropdown-menu > li:hover{background: #eee;}
	header #navbar nav ul.dropdown-menu > li a{border-bottom: 1px solid #ccc; padding: 12px 0; display: inline-block; width: 100%;}
	
	
}


#header{height: 300px; min-height: 300px;}
.home #header{height: 45vh;}
#header > article{height: 100%; background-position: center center; background-repeat: no-repeat; width: 100%; display: table; background-size: cover; position: relative;}
#header > article .header-overlay{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1}
#header > article .header-content{display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; position: relative; z-index: 2; color: #fff;}
#header > article .header-content h1, #header > article .header-content .h1-like{font-size: 5.6rem; text-transform: uppercase; font-weight: 700; margin-bottom: 0;}
#header > article .header-content .btn{margin-top: 20px;}

/*--------------------------------------------------------------
	Main
--------------------------------------------------------------*/
#primary{padding-top: 50px; padding-bottom: 50px;}
#primary .entry-content > .wp-block-cover,
#primary .entry-content > .wp-block-columns{margin-top: 50px; margin-bottom: 50px;}




/*--------------------------------------------------------------
	Blog
--------------------------------------------------------------*/
#article-grid{}
#article-grid > article{padding: 0;
-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -khtml-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -ms-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -o-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    box-shadow: 0 2px 3px rgba(0,0,0,.09);
	font-size: 1.4rem;
	background: #fff}
#article-grid > article .post-thumbnail{height: 200px; -o-object-fit: cover; object-fit: cover; width: 100%; display: block;}
#article-grid > article h3, #article-grid > article .h3{font-size: 1.8rem; margin-bottom: 10px; padding: 0 10px;}
#article-grid > article a{text-decoration: none;}
#article-grid > article .post-container{padding: 15px 10px;}

.article-pagination{display: inline-block; width: 100%; margin: 50px auto 0; text-align: center;}
.article-pagination > .page-numbers{padding: 6px 12px; background: #00967d; margin: 0 5px; color: #fff; text-decoration: none; font-weight: bold}
.article-pagination > a.page-numbers{font-weight: normal; }

.blog-sidebar{}
.blog-sidebar > div{
	padding: 20px;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -khtml-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -ms-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    -o-box-shadow: 0 2px 3px rgba(0,0,0,.09);
    box-shadow: 0 2px 3px rgba(0,0,0,.09);
	font-size: 1.4rem;
	background: #eee;
}
.blog-sidebar h2, .blog-sidebar .h2-like,
.shop-sidebar h2, .shop-sidebar .h2-like{font-size: 1.8rem; text-transform: uppercase;}

.blog-sidebar .widget_recent_entries ul{padding: 0; list-style: none;}
.blog-sidebar .widget_recent_entries ul > li{margin-bottom: 15px;}
.blog-sidebar .widget_recent_entries a{text-decoration: none;}
.blog-sidebar .widget_recent_entries .post-date{display: block; font-size: 1.2rem;}


/*--------------------------------------------------------------
	Single
--------------------------------------------------------------*/
#next-prev-links{}
#next-prev-links .h2-like{ margin-bottom: 30px; text-align: center;}
#next-prev-links article a{text-decoration: none;}
#next-prev-links article h3, #next-prev-links article .h3-like{font-weight: 600; margin-bottom: 10px; font-size: 2rem; text-transform: uppercase;}
#next-prev-links article img{float: left; margin-right: 15px;}

/*--------------------------------------------------------------
	Comments
--------------------------------------------------------------*/
#comments{clear:both; margin-top: 50px; background: #eee; padding: 50px 0;}
#comments a{text-decoration:none;}
#comments .comment-list {
    list-style: none;
    padding-left: 0px;
}
	#comments .comment {
		list-style: none;
		margin-bottom: 25px;
	}
	#comments .comment .avatar {
		width: 50px;
		float: left;
		margin-top: 5px;
	}
	#comments .comment .comment-wrapper {
		margin-left:75px;
		position: relative;
	}
	#comments .comment .comment-wrapper .comment-meta cite{
		font-weight:bold;
		font-style:inherit;
		font-size: 1.5rem;
		margin-right: 10px;
	}
	#comments .comment time,
	#comments .comment-edit-link{
		font-size:1.3rem;
		color:#7d7d7d;
		margin-right:10px;
	}
	#comments .comment-content{
		margin-top:10px;
	}
	
	.comment-form label{display:block;}
	.comment-form textarea,
	.comment-form input{width:100%}
	.comment-form input.submit{width: auto; background-color: #0eb290; color: #fff;}
	.comment-form input.submit:hover{background-color: #00967d;}

/*--------------------------------------------------------------
	Formidable form
--------------------------------------------------------------*/
.frm_form_field .grecaptcha-badge, .frm_hidden, .frm_remove_form_row.frm_hidden, .with_frm_style .frm_button.frm_hidden {
    display: none;
}
.frm_screen_reader.frm_hidden { display: initial; }
.frm_screen_reader{ border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important; 
}

.form-field{display: inline-block; width: 100%; margin-bottom: 15px;}
.form-field > label{display: block; margin: 0 0 5px; font-weight: 500;}
.form-field > input, .form-field > textarea{width: 100%; margin: 0;}
.form-field .frm_error{font-weight: 500; font-size: 1.4rem; color: #D9534F;}
.frm_message{background-color: #5CB85C; margin-bottom: 25px; padding: 1rem 1rem; margin-top: 0.75em; text-align: center; color: #fff; }


/*--------------------------------------------------------------
	WooCommerce
--------------------------------------------------------------*/
.woocommerce-product-details__short-description{margin: 20px 0;}

.woocommerce .widget_price_filter .ui-slider-horizontal{height: 6px;}

.woocommerce .woocommerce-product-filters{display:inline-block; width: 100%;}

.woocommerce #show-woocommerce-sidebar{display: inline-block; width: 100%; padding: 10px 20px; text-align: center; cursor: pointer; background: #eee; font-weight: 600; text-transform: uppercase; margin-bottom: 20px;}
.woocommerce #show-woocommerce-sidebar:before{content:""; background-image: url('./assets/images/picto-filter-grey.png'); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-right: 10px; display: inline-block; width: 20px; height: 20px; vertical-align: middle;}
.woocommerce .shop-sidebar{display: none;}

.woocommerce.widget_product_categories{}
.woocommerce.widget_product_categories ul.product-categories{padding:0; list-style: none;}
.woocommerce.widget_product_categories ul.product-categories > li{display: block; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px;}
.woocommerce.widget_product_categories ul.product-categories > li:last-child{border: 0;}
.woocommerce.widget_product_categories ul.product-categories > li a{text-decoration: none}


@media (min-width: 576px) and (max-width: 781px){
	.woocommerce-page .grid-3 > * {
		width: 100% !important;
	}
}
@media (min-width: 782px){
	.woocommerce #show-woocommerce-sidebar{display: none;}
	.woocommerce .shop-sidebar{display: block !important;}
}


/*--------------------------------------------------------------
	Plugins
--------------------------------------------------------------*/
#toc_container{margin-top: 20px;}



/*--------------------------------------------------------------
	ACF Blocks
--------------------------------------------------------------*/
.content-intro,
.onk-page-intro{height: 43px; line-height: 21px; overflow: hidden;}
.content-intro + #read-more,
.onk-page-intro + #read-more{text-align: center; cursor: pointer; display: inline-block; width: 100%; margin: 10px 0 50px;}



/*--------------------------------------------------------------
	Recherche
--------------------------------------------------------------*/
.search .search-query{display: inline-block; width: 100%; padding: 25px 0;}
.search .search-query span{font-weight: bold;}


/*--------------------------------------------------------------
	Footer
--------------------------------------------------------------*/
footer{margin-top: 50px; display: inline-block; width: 100%; background: #ccc; color: #fff;}
#comments + footer{margin-top: 0;}
footer #footer-widget-area{padding: 50px 0}
footer #footer-widget-area .widget_media_image{text-align: center;}

footer #footer-menu{background: #333; padding: 5px 0;}
footer #footer-menu ul{list-style: none; padding: 0;}
footer #footer-menu ul > li{display: inline-block;}
footer #footer-menu ul > li:after{content: "|"; margin: 0 5px;}
footer #footer-menu ul > li:last-child:after{display: none;}
footer #footer-menu a, footer #footer-menu .onktc{color: #fff; text-decoration: none;}