/*
Theme Name: Kokoriko Theme
Description: child theme of Woocommerce Storefront for Boutique Kokoriko website
Version: 1.6.0
*/

/*******************************************/
/************** FONT AWESOME ***************/
/*******************************************/
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    src: url(assets/fonts/font-awesome-brands/fa-brands-400.eot);
    src: url(assets/fonts/font-awesome-brands/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(assets/fonts/font-awesome-brands/fa-brands-400.woff2) format("woff2"), url(assets/fonts/font-awesome-brands/fa-brands-400.woff) format("woff"), url(assets/fonts/font-awesome-brands/fa-brands-400.ttf) format("truetype"), url(assets/fonts/font-awesome-brands/fa-brands-400.svg#fontawesome) format("svg")
}

.fab {
    font-family: "Font Awesome 5 Brands"
}

@font-face {
    font-family: "Font Awesome 5 Free Regular";
    font-style: normal;
    font-weight: 400;
    src: url(assets/fonts/font-awesome-regular/fa-regular-400.eot);
    src: url(assets/fonts/font-awesome-regular/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(assets/fonts/font-awesome-regular/fa-regular-400.woff2) format("woff2"), url(assets/fonts/font-awesome-regular/fa-regular-400.woff) format("woff"), url(assets/fonts/font-awesome-regular/fa-regular-400.ttf) format("truetype"), url(assets/fonts/font-awesome-regular/fa-regular-400.svg#fontawesome) format("svg")
}

.far {
    font-family: "Font Awesome 5 Free Regular";
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Free Solid";
    font-style: normal;
    font-weight: 400;
    src: url(assets/fonts/font-awesome-solid/fa-solid-900.eot);
    src: url(assets/fonts/font-awesome-solid/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(assets/fonts/font-awesome-solid/fa-solid-900.woff2) format("woff2"), url(assets/fonts/font-awesome-solid/fa-solid-900.woff) format("woff"), url(assets/fonts/font-awesome-solid/fa-solid-900.ttf) format("truetype"), url(assets/fonts/font-awesome-solid/fa-solid-900.svg#fontawesome) format("svg")
}

.fas {
    font-family: "Font Awesome 5 Free Solid";
    font-weight: 400
}

/*************************************/
/************** GLOBAL ***************/
/*************************************/
@font-face {
    font-family: 'edmondsans';
    src: url('assets/fonts/edmondsans/edmondsans-regular-webfont.woff2') format('woff2'),
    url('assets/fonts/edmondsans/edmondsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'edmondsans';
    src: url('assets/fonts/edmondsans/edmondsans-medium-webfont.woff2') format('woff2'),
    url('assets/fonts/edmondsans/edmondsans-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'edmondsans';
    src: url('assets/fonts/edmondsans/edmondsans-bold-webfont.woff2') format('woff2'),
    url('assets/fonts/edmondsans/edmondsans-bold-webfont.woff') format('woff'), url(assets/fonts/edmondsans/edmondsans-bold-webfont.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
}
html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    position: relative;
    background: #FFFFFF;
    font-family: 'edmondsans';
    font-size: 16px;
    color: #777777;
}
a, a:focus, a:visited, a:hover {
    color: #333333;
    text-decoration: none;
    outline: none;
    transition-duration: 0.2s;
}
a:hover {
    color: #7BBC43;
}
h1 {
    font-size: 55px;
    font-weight: 700;
}
h2 {
    font-size: 40px;
    font-weight: 500;
}
h3 {
    font-size: 20px;
    font-weight: normal;
}
.page-title {
    font-size: 50px;
    text-align: center;
    margin: 20px 0 50px;
}
.active {
    color: #7BBC43;
}
.bg-grey {
    background-color: #FAFAFA;
}

.page-numbers {
    text-align: center;
    margin: 0 5px;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
}
a.page-numbers {
    color: #ABABAB;
}
a.page-numbers:hover {
    color: #7BBC43;
}
.page-numbers.current {
    border: 1px solid #7BBC43;
    border-radius: 50%;
    color: #7BBC43;
}
.page-numbers.next,
.page-numbers.prev {
    font-size: 0;
}
.page-numbers.next::before,
.page-numbers.prev::before {
    font-family: "Font Awesome 5 Free Solid";
    font-size: 14px;
}
.page-numbers.prev::before {
    content: "\f060";
}
.page-numbers.next::before {
    content: "\f061";
}

.btn-kkrk {
    display: inline-block;
    background-color: #7BBC43;
    border: 1px solid #7BBC43;
    color: #FFFFFF;
    padding: 5px 10px;
    text-align: center;
    font-weight: 400;
    border-radius: 0;
    font-size: 16px;
    line-height: 24px;
}

.grecaptcha-badge {
    display: none !important;
}

/***************************************************/
/*************** GLOBAL WOOCOMMERCE ****************/
/***************************************************/
.btn-add-to-cart,
.btn-add-to-cart:visited,
.woocommerce button.button,
.woocommerce button.button:visited,
.woocommerce a.button,
.woocommerce a.button:visited,
.woocommerce button.button.alt,
.woocommerce button.button.alt:visited,
.woocommerce a.button.alt,
.woocommerce a.button.alt:visited {
    display: inline-block;
    background-color: #7BBC43;
    border: 1px solid #7BBC43;
    color: #FFFFFF;
    padding: 5px 10px;
    text-align: center;
    font-weight: 400;
    border-radius: 0;
    font-size: 16px;
    line-height: 24px;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
    padding: 5px 10px;
}

.btn-add-to-cart:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
    color: #777777;
    background-color: #FFFFFF;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
}

/******************************************/
/*************** AD BANNER ****************/
/******************************************/
.home-ad-banner {
    position: fixed;
    top: 0;
    z-index: 10000;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #FFFFFF;
    background-color: #7BBC43;
    overflow: hidden;
}
.home-ad-banner .home-ad-banner-text {
    display: inline-block;
    padding-right: 50px;
    padding-left: 100%;
    white-space: nowrap;
    animation: scroll-rtl 40s infinite linear;
}
@keyframes scroll-rtl {
    0% {
        transform: translate3d(0,0,0);
    }
    100% {
        transform: translate3d(-100%,0,0);
    }
}

/*************************************/
/*************** MENU ****************/
/*************************************/
.menu {
    padding: 30px 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 2px -3px #CCCCCC;
}
.menu .menu-logo img {
    height: 80px;
}
.menu .navbar-toggler:focus {
    box-shadow: none;
}
.menu .navbar-toggler .nav-icon-bars {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 3px;
    transition-property: transform;
    transition-duration: 300ms;
}
.menu .navbar-toggler .nav-icon-bars:before {
    margin-top:0;
    transform: rotate(45deg);
    background: #333333;
}
.menu .navbar-toggler .nav-icon-bars:after {
    margin-top:0;
    transform: rotate(-45deg);
    background: #333333;
}
.menu .navbar-toggler .nav-icon-bars:before,
.menu .navbar-toggler .nav-icon-bars:after {
    content:'';
    display:block;
    width:30px;
    height:3px;
    position: absolute;
    transition-property: margin, transform;
    transition-duration: 300ms;
}
.menu .navbar-toggler.collapsed .nav-icon-bars {
    background: #333333;
}
.menu .navbar-toggler.collapsed .nav-icon-bars:before {
    margin-top:-8px;
    transform:rotate(0);
}
.menu .navbar-toggler.collapsed .nav-icon-bars:after {
    margin-top:8px;
    transform:rotate(0);
}
.menu .nav-cart-icon {
    position: relative;
}
.menu .count-bubble {
    position: absolute;
    display: block;
    top: 0;
    right: -4px;
    background-color: #7BBC43;
    color: #FFFFFF;
    border-radius: 50%;
    height: 18px;
    width: 18px;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .menu .navbar-collapse  {
        padding-top:25px;
    }
    .menu .nav-item {
        text-align: center;
    }
    .menu .count-bubble {
        position: relative;
        display: inline-block;
        top: 0;
        right: 0;
    }
}

/***********************************/
/********* CONTENT ************/
/***********************************/
.content {
    padding: 170px 0 250px;
}
.content .content-body .content-section {
    width: 100%;
    padding: 60px 0;
}
.content .content-body .content-section.content-section-orphan {
    padding: 0;
}
.content .content-body .content-section .content-section-title {
    text-align: center;
    margin-bottom: 60px;
}

/*************************************/
/********* CONTENT FOOTER ************/
/*************************************/
.content-footer {
    width: 100%;
    height: 210px;
    padding: 30px;
    background-color: #333333;
    color: #FFFFFF;
    position: absolute;
    z-index: 900;
    bottom: 0;
}
.content-footer a,
.content-footer a:visited,
.content-footer a:focus {
    color: #FFFFFF;
}
.content-footer a:hover {
    color: #7BBC43;
}
.content-footer .row:first-child {
    border-bottom: 1px solid #555555;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.content-footer .logo {
    height: 60px;
    display: inline-block;
    margin: auto 20px;
}
.content-footer .social-link {
    display: inline-block;
    margin-right: 20px;
    font-size: 20px;
}

@media (max-width: 768px) {
    .content-footer {
        text-align: center;
    }
}

/*************************************/
/*************** HOME ****************/
/*************************************/
.home .content .home-banner {
    width: 100%;
    height: 500px;
    margin: -30px 0 30px;
    background: no-repeat center center;
    background-size: cover;
}
.home .content .products-list {
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
}
.home .content .products-list .product-item {
    margin-bottom: 0;
    flex-grow: 1;
}
.home .content .products-list .product-item .product-thumbnail {
    margin: 0 0 10px;
    width: 100%;
}
.home .content .insta-feed-wrapper{
    margin-bottom: 30px;
}
.home .content .insta-feed-wrapper .FeedGridLayout__cell {
    margin: 0 10px;
}
.home .content .insta-feed-wrapper .FeedGridLayout__cell:first-child {
    margin: 0 10px 0 0;
}
.home .content .insta-feed-wrapper .FeedGridLayout__cell:last-child {
    margin: 0 0 0 10px;
}
.home .content .insta-feed-wrapper .MediaTile__root .MediaTile__album-type-icon,
.home .content .insta-feed-wrapper .MediaTile__root .MediaTile__overlay {
    display: none;
}
.home .facebook-link-wrapper {
    text-align: center;
    font-size: 20px;
}

@media (max-width: 768px) {
    .home-banner {
        height: 300px;
        margin-top: 80px;
    }
    .home .content .products-list {
        display: block;
    }
    .home .content .products-list .product-item:not(:last-child) {
        margin-bottom: 30px;
    }
}

/******************************************/
/*************** NEWS LIST ****************/
/******************************************/
.page-template-news .news-article-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.page-template-news .news-article-list .news-article {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #F8F8F8;
}
.page-template-news .news-article-list .news-article .news-article-thumbnail {
    width: 100%;
    height: 400px;
    margin-bottom: 25px;
    background-size: cover;
    background-position: center center;
}
.page-template-news .news-article-list .news-article .news-article-content .news-article-title {
    margin-bottom: 10px;
}
.page-template-news .news-article-list .news-article .news-article-content .news-article-meta {
    color: #ABABAB;
    margin-bottom: 20px;
}
.page-template-news .news-article-list .news-article .news-article-content .news-article-excerpt {
    color: #777777;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .page-template-news .news-article-list .news-article .news-article-thumbnail {
        height: 300px;
    }
}

/*************************************/
/*************** NEWS ****************/
/*************************************/
.single-post .news-article .news-article-thumbnail {
    width: 100%;
    height: 400px;
    margin-bottom: 25px;
    background-size: cover;
    background-position: center center;
}
.single-post .news-article .news-article-content .news-article-title {
    font-weight: 500;
    font-size: 40px;
    margin-bottom: 10px;
}
.single-post .news-article .news-article-content .news-article-meta {
    color: #ABABAB;
    margin-bottom: 20px;
}
.single-post .news-article .news-article-content .news-article-content {
    color: #777777;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .single-post .news-article .news-article-thumbnail {
        height: 300px;
    }
}

/*************************************************/
/*************** ARCHIVE PRODUCTS ****************/
/*************************************************/
.menu-product-categories {
    background-color: #F8F8F8;
    padding: 20px;
}
.menu-product-categories .menu-product-categories-title {
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 25px;
    border-bottom: 1px solid #777777;
}
.menu-product-categories .btn-see-all {
    display: inline-block;
    margin-bottom: 20px;
}
.menu-product-categories > ul {
    margin: 0;
}
.menu-product-categories li {
    list-style-type: none;
}
.menu-product-categories li > a.active {
    font-weight: 500;
}
.menu-product-categories > ul li ul {
    display: none;
    padding-bottom: 10px;
}
.menu-product-categories > ul li.open ul {
    display: block;
}
.menu-product-categories .btn-toggle-opening {
    float: right;
    cursor: pointer;
}

.products-list .product-item {
    text-align: center;
    margin-bottom: 30px;
}
.products-list .product-item .product-thumbnail {
    display: block;
    margin: 0 auto 10px;
}
.products-list .product-item .product-title {
    display: block;
}
.products-list .product-item .product-price {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}
.products-list .product-item .product-price .product-regular-price {
    text-decoration: line-through;
    color: #ABABAB;
}

@media (max-width: 768px) {
    .menu-product-categories {
        margin-bottom: 40px;
    }
}