/*
Theme Name: Konte Child Theme
Theme URI: http://konte.uix.store/
Author: UIX Themes
Author URI: http://uix.store
Description: A fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
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: konte
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: konte
*/



/* -------------------------------------------------------------------------- */
/* fonts
/* -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Space+Mono&display=swap');

@font-face {
  font-family: "Futura-ExtBol";
  src: url('fonts/FuturaExtBol.woff2') format('woff2'), url('fonts/FuturaExtBol.woff') format('woff');
}


/* -------------------------------------------------------------------------- */
/* hamburger menu - hide on desktop
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 1200px)
{
  .header-hamburger.hamburger-menu { display: none; }
}




/* -------------------------------------------------------------------------- */
/* flyout menu - show the proper Pinterest icon
/* -------------------------------------------------------------------------- */

.socials-menu a[href*="pinterest.ca"]:before {
    font-family: 'FontAwesome';
  content: "\f231" !important;
}





/* -------------------------------------------------------------------------- */
/* homepage hero testing
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px)
{
  .bzr-homepage-hero-section { /*border: solid 1px red;*/ height: calc(100vw / 2.148); /* this container ends up being a BIT too tall when we do it this way, but only in some browsers, because this doesn't factor in the ~17px scrollbar width that might be showing, but the difference is negligeable so not worth the extra work which would have to be done with JS anyway because CSS can't know if the scrollbar is "floating" style (like mac) or not */ max-height: 894px; /* necessary because the hero image doesn't always take the full width of the browser; at 1920px it stops growing horizontally, so this container div needs to stop growing vertically at that point, and this number is correct based on the current aspect-ratio of the hero image, but this will change if the hero-image AR changes in future */ }
}

body .bzr-homepage-hero-section img { display: none; }


body.home .woocommerce-loop-category__title { color: #161619 !important; }





/* -------------------------------------------------------------------------- */
/* popup
/* -------------------------------------------------------------------------- */

.popup-modal .popup-content-wrapper { padding: 40px 40px 10px; }

.popup-modal .button-close { top: 8px !important; right: 20px !important; }

.popup-modal .popup-content-wrapper > p { margin: 0; }

/* text */

.popup-modal .popup-content-wrapper .bzr-popup__heading { font-size: 40px !important; line-height: 46px; margin-bottom: 8px; }
.popup-modal .popup-content-wrapper .bzr-popup__text-above-form {  }
.popup-modal .popup-content-wrapper .bzr-popup__text-below-form { font-size: 12px; }


@media only screen and (min-width: 850px)
{
  /*.popup-modal .popup-content-wrapper .bzr-popup__heading { display: none; }*/
}

@media only screen and (max-width: 989px) and (min-width: 850px)
{
  .popup-modal .popup-content-wrapper .bzr-popup__heading { font-size: max(2.7vw, 24px) !important; margin-bottom: 4px; }
  .popup-modal .popup-content-wrapper > .bzr-popup__text-above-form { font-size: max(1.5vw, 12px) !important; }
}

@media only screen and (max-width: 849px)
{
  .popup-modal .popup-content-wrapper { padding-bottom: 20px; }
  .popup-modal .popup-image { display: none; }
}





/* -------------------------------------------------------------------------- */
/* popup form (custom-coded Klaviyo form)
/* -------------------------------------------------------------------------- */

.newsletter--popup { margin: 22px 0 16px; }

.newsletter--popup .newsletter__form-inner { margin-bottom: 24px; }

.newsletter--popup .newsletter__input--email { width: 100%; border: 1px solid #161619 !important; background-color: #ffffff !important; padding: 8px 10px !important; }

.newsletter--popup .newsletter__form-disclaimer-label { display: block; margin: 20px 0 0; font-size: 10px !important; line-height: 12px !important; position: relative; display: flex; padding-left: 32px; min-height: 20px; align-items: center; }

.newsletter--popup .newsletter__form-disclaimer-text {  }

.newsletter--popup .newsletter__form-disclaimer-label--last { margin-top: 12px; }

.newsletter--popup .newsletter__form-disclaimer-checkbox { width: unset !important; /* overrides default Elementor stuff that messes with responsiveness */ } 

.newsletter--popup .newsletter__submit { display: flex; margin-top: 28px; }

.newsletter--popup .newsletter__submit-link {
  background: #000000;
  border-radius: 0px;
  border-style: solid;
  border-color: #000000;
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  /* line-height: 1;*/
  text-align: center;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 50px;
}

.newsletter--popup .newsletter__submit-link:hover { color: #eaff00; }

.newsletter--popup .newsletter__thanks-for-joining { display: none; margin-top: 0; font-weight: bold; }


/* pretty checkboxes - custom checkbox styling on hover/click/checked etc ... */

.newsletter--popup .newsletter__form-disclaimer-checkbox { flex-basis: 0px; width: 0 !important; margin: 0; font-size: 0 !important; visibility: hidden; /* hide the default checkbox */ }

.newsletter--popup .newsletter__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: #ffffff; position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #ffffff; border: 1px solid #161619 !important; }
  
/* specify the background color to be shown when hovering over checkbox */
.newsletter--popup .newsletter__form-disclaimer-label:hover input ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #eaff00; }
  
/* specify the background color to be shown when checkbox is active */
.newsletter--popup .newsletter__form-disclaimer-label input:active ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* specify the background color to be shown when checkbox is checked */
.newsletter--popup .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.newsletter--popup .newsletter__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.newsletter--popup .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.newsletter--popup .newsletter__form-disclaimer-label .newsletter__form-disclaimer-checkbox-pretty:after { left: 6px; bottom: 5px; width: 6px; height: 11px; border: solid #eaff00; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

@media only screen and (max-width: 979px) and (min-width: 850px)
{
  .newsletter--popup .newsletter__thanks-for-joining { font-size: max(1.5vw, 12px) !important; }
}





/* -------------------------------------------------------------------------- */
/* footer form (custom-coded Klaviyo form)
/* -------------------------------------------------------------------------- */


.newsletter--footer { margin: 0 0 16px; }

.newsletter--footer .newsletter__form { display: flex; flex-wrap: wrap; }

.newsletter--footer .newsletter__form-inner { flex-basis: 100%; min-height: 60px; display: flex; }

.newsletter--footer .newsletter__disclainers-and-submit { flex-grow: 1; display: flex; flex-flow: row wrap; }

.newsletter--footer .newsletter__disclainers { flex-basis: 100%; margin-bottom: 12px; }

.newsletter--footer .newsletter__form-disclaimer-label { display: block; line-height: 6px; margin-top: 8px; position: relative; display: flex; padding-left: 32px; min-height: 20px; align-items: center; }

.newsletter--footer .newsletter__form-disclaimer-text { font-size: 10px; line-height: 12px; }

.newsletter--footer .newsletter__input--email { width: 100%; border: none /*1px solid #161619 !important*/; background-color: #ffffff !important; padding: 8px 20px !important; }

.newsletter--footer .newsletter__submit { display: flex; flex-basis: 100%; }

.newsletter--footer .newsletter__submit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #000000;
  color: #ffffff;
  font-family: "Montserrat", Sans-serif;
  font-size: 18px;
  font-weight: 600;
  /* line-height: 1;*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 6px;
  text-transform: uppercase;
  min-height: 60px;
}

.newsletter--footer .newsletter__submit-link:hover { color: #eaff00; }

.newsletter--footer .newsletter__thanks-for-joining { display: none; margin-top: 0; font-size: 20px; font-weight: bold; }


/* pretty checkboxes - custom checkbox styling on hover/click/checked etc ... */

.newsletter--footer .newsletter__form-disclaimer-checkbox { flex-basis: 0px; width: 0; margin: 0; visibility: hidden; /* hide the default checkbox */ }

.newsletter--footer .newsletter__form-disclaimer-checkbox-pretty { flex: 0 0 20px; margin: 0 14px 0 0; background-color: #ffffff; position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #ffffff; }
  
/* specify the background color to be shown when hovering over checkbox */
.newsletter--footer .newsletter__form-disclaimer-label:hover input ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #eaff00; }
  
/* specify the background color to be shown when checkbox is active */
.newsletter--footer .newsletter__form-disclaimer-label input:active ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* specify the background color to be shown when checkbox is checked */
.newsletter--footer .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty { background-color: #000000; }
  
/* checkmark to be shown in checkbox; not be shown when not checked */
.newsletter--footer .newsletter__form-disclaimer-checkbox-pretty:after { content: ""; position: absolute; display: none; }
  
/* display checkmark when checked */
.newsletter--footer .newsletter__form-disclaimer-label input:checked ~ .newsletter__form-disclaimer-checkbox-pretty:after { display: block; }
  
/* checkmark styling; rotated the rectangle by 45 degreed and showing only two borders to make it look like a tickmark */
.newsletter--footer .newsletter__form-disclaimer-label .newsletter__form-disclaimer-checkbox-pretty:after { left: 7px; bottom: 6px; width: 6px; height: 11px; border: solid #eaff00; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }


@media only screen and (min-width: 768px) and (max-width: 1024px)
{
  /* the element that contains the footer-form */
  .bzr-sign-up-for-sneak-peeks { padding-bottom: 84px !important; }
}

@media only screen and (max-width: 767px)
{
  .newsletter--footer .newsletter__thanks-for-joining { max-width: 690px; margin-left: auto; margin-right: auto; text-align: center; }
}

@media only screen and (max-width: 499px)
{
  .newsletter--footer .newsletter__form-inner, 
  .newsletter--footer .newsletter__disclainers-and-submit { flex-basis: 100%; min-height: 60px; }
}





/* -------------------------------------------------------------------------- */
/* shop pages
/* -------------------------------------------------------------------------- */


/* ---------------------------------- */
/* sidebar - x-pills (filter-removers)
/* ---------------------------------- */

.bzp-filter-remover {
    borders: 1px solid red;
    margin-bottom: 30px;
}
.bzp-filter-remover__section {
    /*    border:solid 1px purple;*/
    display: flex;
    flex-flow: row wrap;
    gap: 0 0;
    margin-bottom: 0;
}
.bzp-filter-remover__item {
    display: inline-block;
    padding: 0;
    line-height: 50px;
}
/*.bzp-filter-remover__item::after {content: '+'; display: block; width: 10px; padding: 10px; } .bzp-filter-remover__item:last-child::after {content: ''; display: none; }*/

.bzp-filter-remover__heading {
    flex: 0 0 100%;
    margin: 0 0 10px;
    margin-inline-start: 0px;
    margin-inline-end: 0px
}
.bzp-filter-remover__heading--first {
    margin-bottom: 20px;
}
.bzp-filter-remover__button {
    background-color: #e3e7e8;
    border-radius: 12px;
    color: #161619 !important;
    padding: 12px;
    margin: 0 0 12px 0;
}
.bzp-filter-remover__button:hover {
    background-color: #F7FD9C;
}
.bzp-filter-remover__break {
    flex-basis: 100%;
    height: 0;
    line-height: 0;
    margin: 0;
}


/* sidebar - filters - remove "Physical" dropdowns if non-bzam */
body:not(.is-bzam-user) section.products-filter-widget [data-value="physical"] { display: none; }


/* "You're looking for" dropdowns - smaller font-size */
body.woocommerce .products-quick-search .select2-container .products-quick-search-options .select2-results .select2-results__option { font-size: 1rem; }

@media only screen and (max-width: 767px)
{
  /* "You're looking for" dropdowns - smaller font-size */
  body.woocommerce .products-quick-search .select2-container .products-quick-search-options .select2-results .select2-results__option { font-size: .875rem; }
}


/* ---------------------------------- */
/* product cards - make all image-areas same height, and then vertically center all images (otherwise the content below images on adjacent cards is staggered); this also affects the individual product page */
/* ---------------------------------- */

.product-inner { display: flex; flex-flow: column nowrap; }
.product-thumbnail { flex-basis: 300px; display: flex; align-items: center; justify-content: center; /* border: solid 1px red;*/ }
.product-thumbnail a { max-height: 300px; }
ul.products li.product .product-thumbnail img { width: 100%; max-height: 300px; /* border: solid 1px red;*/ }

@media only screen and (max-width: 1199px) and (min-width: 992px)
{
  .product-thumbnail { flex-basis: 240px; }
  .product-thumbnail a { max-height: 240px; }
  ul.products li.product .product-thumbnail img { max-height: 240px; }
}

@media only screen and (max-width: 479px)
{
  .product-thumbnail { flex-basis: 240px; }
  .product-thumbnail a { max-height: 240px; }
  ul.products li.product .product-thumbnail img { max-height: 240px; }
}

/* product cards on individual product page (in Related Products section) - prevent distortion on images */
body.woocommerce.single-product section.related.products ul.products li.product .product-thumbnail a { display: flex !important; justify-content: center; }
body.woocommerce.single-product section.related.products ul.products li.product .product-thumbnail img { width: unset; max-width: 100%; }


/* ---------------------------------- */
/* product cards - pills that show the categories/tags */
/* ---------------------------------- */

.bzp-product-card__taxonomy { display: flex; flex-flow: row wrap; margin-bottom: 10px; gap: 4px 8px; }
/*.bzp-product-card__taxonomy-group { display: flex; line-height: 1; margin-bottom: 4px; }*/
.bzp-product-card__taxonomy-item { line-height: 1; }
.bzp-product-card__taxonomy-item a { border-radius: 16px; padding: 0 8px; font-size: .75rem; text-transform: uppercase; }
.bzp-product-card__taxonomy-item--categories a { background-color: #e8f3f6; /*margin-right: 8px;*/ }
/*.bzp-product-card__taxonomy-single--categories:last-child a { margin-right: 8px; }*/
.bzp-product-card__taxonomy-item--tags a { background-color: #f4e8e6; }





/* -------------------------------------------------------------------------- */
/* product pages
/* -------------------------------------------------------------------------- */

/* prevent product descriptions from ending up BEHIND "Related products" */
body.woocommerce-page.single-product .product-summary-inner { max-height: unset !important; }

/* added to cart message (the popup that briefly shows at top-right of page) */
body.woocommerce .notifyjs-konte-success { background-color: #01ff6e; color: #000000; }

/* added to cart message (the popup that shows at the bottom of the page) */
body.woocommerce .woocommerce-message { background-color: #01ff6e; color: #000000; }

/* "View cart" button that's in the popup that shows at the bottom of the page */
body.woocommerce.single-product .woocommerce-message .button { background-color: #000000; border-color: #000000; color: #ffffff; }

/* "Yes, I am 19+" area that shows on some products */
body.woocommerce.single-product .wapf-field-true-false .wapf-field-input { background: #ebebed; display: inline-block; line-heights: 1.4; padding: 0 0 6px 10px; }
body.woocommerce.single-product .wapf-field-true-false .wapf-field-input .wapf-checkbox-label { padding: 0 10px 0 0; }
body.woocommerce.single-product .wapf-field-true-false .wapf-field-input input[type=checkbox] { margin-top: 15px; }





/* -------------------------------------------------------------------------- */
/* checkout page */
/* -------------------------------------------------------------------------- */

/* if the user is NOT logged in (is a guest), we can safely hide all of these fields, since we want the easiest checkout experience, and we don't need their address etc since this is digital stuff only since non-logged-in users can't add physical products to cart (can't see them on any pages) */
body:not(.is-bzam-user).woocommerce-checkout #customer_details { display: none; }
body:not(.is-bzam-user).woocommerce-checkout #order_review_heading { float: none; width: 100%; }
body:not(.is-bzam-user).woocommerce-checkout #order_review { float: none; width: 100%; }

/* hide price after "x 1" (qty) on that row */
body:not(.is-bzam-user).woocommerce-checkout #order_review .product-subtotal .woocommerce-Price-amount { display: none; }

/* hide all payment rows, the "Payment" heading, and the T&C aka "Your personal data will be used..." */
body:not(.is-bzam-user).woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot, 
body:not(.is-bzam-user).woocommerce-checkout #order_review #payment h4,
body:not(.is-bzam-user).woocommerce-checkout #order_review #payment .woocommerce-terms-and-conditions-wrapper { display: none; }



/* if the user IS logged in, they MIGHT have shippable items, so we let JS decide whether to hide/show this, because it might change after pageload, since this is an ajax-updatable cart; note that this code below would never help non-logged-in users because right now, the ajax functionality only works if user is logged in (see the "wp_ajax_" and "wp_ajax_nopriv_" stuff in functions.php file) */
body[data-bzp-shippable-item="false"].woocommerce-checkout #customer_details { display: none; }
body[data-bzp-shippable-item="false"].woocommerce-checkout #order_review_heading { float: none; width: 100%; }
body[data-bzp-shippable-item="false"].woocommerce-checkout #order_review { float: none; width: 100%; }

/* hide price after "x 1" (qty) on that row */
body[data-bzp-shippable-item="false"].woocommerce-checkout #order_review .product-subtotal .woocommerce-Price-amount { display: none; }

/* hide all payment rows, the "Payment" heading, and the T&C aka "Your personal data will be used..." */
body[data-bzp-shippable-item="false"].woocommerce-checkout #order_review .woocommerce-checkout-review-order-table tfoot, 
body[data-bzp-shippable-item="false"].woocommerce-checkout #order_review #payment h4,
body[data-bzp-shippable-item="false"].woocommerce-checkout #order_review #payment .woocommerce-terms-and-conditions-wrapper { display: none; }







/* -------------------------------------------------------------------------- */
/* My Account page
/* -------------------------------------------------------------------------- */

/* hide the header */

body.woocommerce-account-login header.entry-header { display: none; }
body.woocommerce-account-login .login-tabs-nav .tab-nav { font-size: 1.3rem; margin-right: 30px; }



/* -------------------------------------------------------------------------- */
/* footer
/* -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px)
{
  [data-elementor-type="footer"] .bzr-footer__sign-up > .elementor-widget-wrap { margin-right: 0 !important; }
}