/**
* Theme Name: Zeen Child
* Description: Zeen child theme.
* Author: Codetipi
* Template: zeen
* Version: 1.5
*/

/* --- H1 title for home --- */
.block-css-12998, body.home h1 {
  display: none;
}


/* --- fix grid for Safari --- */
@media only screen and (min-width: 768px) {
  .tipi-m-4 {
      width: 33.2%;
  }
}
@media only screen and (min-width: 768px) {
  #block-wrap-51822 .tipi-row-inner-style {
      padding-bottom: 0px !important;
  }
  #block-wrap-23432 .tipi-row-inner-style {
      padding-top: 0px !important;
  }
}


/* --- test boutique page --- */
.block-css-35817 .block-html-content { 
    padding: 0 30px;
}
.block-css-82771 .block-html-content { 
    margin-bottom: -50px;
}
    

/* ---  menu ---*/
.horizontal-menu li:hover a {
    color: #777777;
}
.menu-mobile .sub-menu li {
    padding-left: 50px;
}


/* ---  contact form ---*/
.wpcf7-mail-sent-ok {
    background: #f4d800 !important;
}


/* ---  content extra classes ---*/
.highlighter {
    border-bottom: 2px solid #f4d800;
}


/* --- social links --- */ 
.secondary-wrap, .secondary-wrap a {
    z-index: 10000;
}


/* --- products title and price --- */
.products h2.woocommerce-loop-product__title, .products .price {
    display: none !important;
}
body.post-type-archive-product .products .price {
    display: block !important;
}

/* --- collections --- */
.woocommerce-loop-category__title {
    text-align: center;
}
.woocommerce-loop-category__title .count {
    display: none;
}


/* --- share --- */
.share-it-below_title {
    display: none !important;
}

/* --- products grid flex fix --- */
/*.products::after {
  content: "";
  flex: auto;
}*/


/* --- WooCommerce buttons --- */
.tipi-basket-wrap .shop-home, .tipi-basket-wrap .checkout, .woocommerce-mini-cart__buttons .checkout {
    background: #f4d800 !important;
}
#place_order {
    background: #000000;
}
.cart .single_add_to_cart_button {
    line-height: 20px !important;
}


/* --- catalogue --- */
.woocommerce-ordering {
    display: none;
}
/*body.post-type-archive-product .woocommerce-ordering {
    display: block;
    margin-top: -40px;
}*/


/* --- PRO menu --- */
.site-header .menu-item-5892 {
    /*margin-left: 3em;*/
}
.site-header .menu-item-5892 > a {
    color: #f4d800;
}


/* --- price --- */
.price-dl {
    font-style: italic;
    font-size: 80%;
}
.woocommerce-Price-currencySymbol {
    padding-left: 3px;
}


/* --- cart --- */
.woocommerce-terms-and-conditions-link {
    padding-left: .5em;
}
.woocommerce-form__label-for-checkbox .required {
    display: none !important;
}


/* --- product details --- */
.woocommerce-product-details__auteur {
}
.woocommerce-product-details__auteur span {
    /*color: #f4d800;*/
    font-weight: bold;
}

.woocommerce-product-details__papier span {
    font-weight: bold;
}

.woocommerce-product-details__ext {
    margin-top: -.8em;
}
.woocommerce-product-details__ext span a {
    color: #f4d800;
    font-weight: bold;
}

.woocommerce-product-details__dl span {
    font-weight: bold;
}
.woocommerce-product-details__dl span.amount, .woocommerce-product-details__dl span.woocommerce-Price-currencySymbol {
    font-weight: normal;
}

.woocommerce-product-details__dispo {
    margin-top: -.8em;
}
.woocommerce-product-details__dispo span {
    /*color: #f4d800;*/
    font-weight: bold;
}

.woocommerce-product-details__pages {
    font-weight: bold;
}


/* --- products tabs --- */
.wc-tabs li.active {
    color: #f4d800;
    font-weight: bold;
}


/* --- hide related posts on Studio --- */
body.cat-183-id .related-posts-wrap .block-title-area {
    display: none;
}


/* --- Studio button color change --- */
.studio-button .tipi-button {
    background-color: #f4d800;
}
.studio-button .tipi-button a {
    color: #FFFFFF;
}


/* --- fix newsletter form --- */
.mc4wp-form-fields input[type=text], #subscribe-submit input[type=text], #subscribe-email input[type=text] {
    border: 0;
    border-bottom: 2px solid #222;
    padding: 0;
}
.mc4wp-form-fields p {
    margin-bottom: 1em;
}
.mc4wp-form-fields input[type=submit], .mc4wp-form-fields button, #subscribe-submit input[type=submit] {
    color: #fff;
    background-color: #000000;
    font-weight: bold;
    height: 54px;
    line-height: 50px;
    padding: 0 45px;
    font-size: 15px;
    border-radius: 180px;
    width: auto !important;
    cursor: pointer;
}
.mc4wp-form-fields .submit-wrap {
    text-align: center;
}


/* --- add zoom to products --- */
.type-product .mask {
    overflow: hidden;
}
.type-product .mask .attachment-woocommerce_thumbnail {
    -webkit-transition: opacity .5s ease,-webkit-transform 1s ease;
    transition: opacity .5s ease,-webkit-transform 1s ease;
    transition: transform 1s ease,opacity .5s ease;
    transition: transform 1s ease,opacity .5s ease,-webkit-transform 1s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* --- reduce zoom amount --- */
.img-ani-1:not(.with-second-img).preview-grid:hover .wp-post-image, .img-ani-1:not(.with-second-img).preview-slider:hover .wp-post-image, .img-ani-1:not(.with-second-img):hover .fi-bg, .img-ani-1:not(.with-second-img) .mask:hover .wp-post-image,
.type-product .mask:hover .attachment-woocommerce_thumbnail {
    -webkit-transform: scale(1.03,1.03);
    transform: scale(1.03,1.03);
}


/* --- punchline --- */
.mask .punchline-overlay {
    z-index: 4;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    background-color: #f4d800;
    -webkit-transition: .3s ease-out opacity;
    transition: .3s ease-out opacity;
    pointer-events: none;
    cursor: pointer;
}
.mask:hover .punchline-overlay {
    opacity: .8;
}
.mask .punchline {
    z-index: 5;
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 80px;
    opacity: 0;
    color: #FFFFFF;
    line-height: 1.3em;
    font-weight: bold;
    font-style: italic;
    -webkit-transition: .5s ease-out opacity;
    transition: .5s ease-out opacity;
    pointer-events: none;
    cursor: pointer;
}
.mask:hover .punchline {
    opacity: 1;
}
.menu .punchline-overlay, .menu .punchline {
    display: none;
}


.mask .punchline {
  font-size: 24px;
}

@media only screen and (min-width: 320px) and (max-width: 480px) {  /* full */
  .mask .punchline {
    font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (480 - 320)));
  }
}
@media only screen and (min-width: 481px) and (max-width: 767px) {  /* 2 per line */
  .mask .punchline {
    font-size: calc(22px + (40 - 22) * ((100vw - 481px) / (767 - 481)));
  }
}
@media only screen and (min-width: 768px) and (max-width: 1019px) {  /* 4 per line */
  .mask .punchline {
    font-size: calc(12px + (16 - 12) * ((100vw - 768px) / (1019 - 768)));
  }
}
@media only screen and (min-width: 1020px) and (max-width: 1239px) {  /* 4 per line */
  .mask .punchline {
    font-size: calc(16px + (24 - 16) * ((100vw - 1020px) / (1239 - 1020)));
  }
}
@media only screen and (min-width: 1240px) and (max-width: 1440px) {  /* 4 per line */
  .mask .punchline {
    font-size: calc(24px + (30 - 24) * ((100vw - 1240px) / (1440 - 1240)));
  }
}
@media only screen and (min-width: 1440px) {  /* 4 per line */
  .mask .punchline {
    font-size: 30px;
  }
}


@media only screen and (min-width: 768px) and (max-width: 800px) {  /* 4 per line */
  .woo-extra-button .tipi-i-qv {
    display: none !important;
  }
}


/*

For example, if we want the our font size in a range where 14px is the minimum size at the smallest viewport width of 300px and where 26px is the maximum size at the largest viewport width of 1600px, then our equation looks like this:

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

*/