/* ======================================================================
 * MULTIPLE
 * ======================================================================
*/

.product-card .round-date, .studio-card .round-date {display: none}
.product-card .card-infos-text, .studio-card .card-infos-text {width: 100% !important}

/* ======================================================================
 * HOMEPAGE
 * ======================================================================
*/

#all-recipes .pum-loader:first-child {margin-top: 200px}

#aside-recipe-filters ul {list-style-type: none}
#aside-recipe-filters label {cursor: pointer}
#aside-recipe-filters input {margin-right: 5px}

.aside-recipe-filters-list button {
    margin-top: 12px;
    margin-left: 8px;
    font: bold italic 16px/1 var(--title-font);
    border: none;
    background: none;
}

#filters-text-tag {
    margin-right: var(--nav-padding);
    margin-bottom: var(--spacing);
    padding: 5px 15px 5px 40px;
    background-color: var(--main-color);
    color: #fff;
    font-size: 18px;
    border-radius: 50px;
    display: none;
    position: relative;
}
#filters-text-tag.active {display: inline-block}

#filters-text-tag button {
    background: none;
    color: inherit;
    border: none;
    position: absolute;
    top: 50%; left: 10px;
    transform: translateY(-50%);
}

#suggestions h3.full {
    margin-top: 0;
    margin-bottom: 60px;
    font: bold italic 30px/1 var(--title-font);
    text-align: center;
}

/* ======================================================================
 * RECIPE (SINGLE)
 * ======================================================================
*/

/* ------------------------------ PREPARATION */

#recipe-preparation-steps {
    border-radius: 10px;
    box-shadow: var(--shadow);
}

/* ---------- Header */

.recipe-header {
    padding: 40px;
    background-color: var(--main-color);
    color: #fff;
    font-size: 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.recipe-times > div,
.recipe-checklist {
    display: flex;
    align-items: center;
}
.recipe-times > div:not(:last-of-type) {margin-bottom: 15px}

.recipe-header b {font: bold 22px/1 var(--title-font)}

.recipe-header svg {
    width: 26px;
    margin-right: 8px;
    fill: #fff;
}

.recipe-checklist label {margin-left: 10px}

/* ---------- Steps */

#recipe-steps {
    padding: 40px;
    background-color: var(--light-grey);
    border-radius: 0 0 10px 10px;
}

#recipe-steps ul,
#recipe-steps ol
{margin: 20px 0}

#recipe-steps ol {
    counter-reset: step;
    list-style: none;
    padding-left: 50px;
}

#recipe-steps ol li {
    counter-increment: step;
    min-height: 30px;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    align-items: center;
}
#recipe-steps li label p {transition: .4s}
#recipe-steps.checklist li label p {cursor: pointer}
#recipe-steps ol li::before {
    content: counter(step);
    font: bold 36px/1 var(--title-font);
}

#recipe-steps ol li::before,
#recipe-steps li input {
    position: absolute;
    top: 50%; left: -32px;
    transform: translate(-50%, -50%);
    transition: .4s;
}
#recipe-steps li input {
    width: 24px;
    height: 24px;
}

#recipe-steps.checklist li::before,
#recipe-steps:not(.checklist) li input {
    opacity: 0;
    pointer-events: none;
}

#recipe-steps.checklist li input:checked,
#recipe-steps.checklist li input:checked + p {opacity: .25}

/* ---------- Ingredients and Tools */

#recipe-ingredients-tools .shift-container {margin-top: 40px}

/* ======================================================================
 * SHOP & PRODUCTS
 * ======================================================================
*/

/* ---------- WooCommerce buttons */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce button.button:disabled[disabled] {
    background-color: #000;
    color: #fff;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--main-color);
    color: #fff;
}

.woocommerce button.button:disabled[disabled] {background-color: var(--grey)}
.woocommerce button.button:disabled[disabled]:hover {
    background-color: var(--grey);
    color: #fff;
}

/* ---------- Navtop cart icon */

#wc-navtop-cart-link {
    color: #000;
    display: flex;
    position: fixed;
    top: calc(var(--nav-height) / 2); right: var(--nav-padding);
    transform: translateY(-50%);
}
#wc-navtop-cart-link:hover {color: var(--main-color)}

#wc-navtop-cart-link #mini-cart-count {
    width: 19px;
    height: 19px;
    background-color: var(--grey);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -9px; right: -9px;
}

#wc-navtop-cart-link svg {width: 26px}

/* ---------- Titles */

.woocommerce-page h1 {margin-bottom: 20px}

/* ---------- Shop page */

.woocommerce .stars,
.woocommerce .stars a,
.woocommerce .star-rating {
    color: #000;
    font-size: 18px !important;
}

.post-type-archive-product .page-description,
.post-type-archive-product .woocommerce-result-count
{display: none}

.woocommerce ul.products {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after
{display: none}

.woocommerce ul.products > li.product {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: .4s;
}
.woocommerce ul.products > li.product:hover {transform: scale(1.02)}

.woocommerce-loop-product__link {
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.woocommerce-loop-product__link > :not(img),
.woocommerce ul.products li.product .add_to_cart_button {
    margin-left: var(--spacing) !important;
    margin-right: var(--spacing) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding-top: 0;
    font-size: 28px;
    color: var(--grey);
}

.woocommerce ul.products li.product .price {
    margin-top: 20px;
    padding: 8px 30px;
    background-color: var(--main-color);
    color: #000;
    font-size: 20px;
    border-radius: 50px;
    display: inline-block;
}

.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
    width: calc(100% - ( var(--spacing) * 2 ));
    margin-bottom: var(--spacing);
    background-color: unset;
    color: var(--grey);
    text-align: center;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 50px;
}

.woocommerce ul.products li.product .add_to_cart_button:hover {color: #000}
.woocommerce ul.products li.product .add_to_cart_button.loading,
.woocommerce ul.products li.product .added_to_cart {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.woocommerce ul.products li.product .add_to_cart_button.added {display: none}

.woocommerce ul.products li.product .added_to_cart {
    margin-top: 1em;
    margin-left: var(--spacing);
    padding: .618em 1em;
    border: unset;
}

/* ---------- Product page */

/* Images */

.woocommerce-page div.product div.images {
    width: 100%;
    max-width: 700px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper img {
    width: 32%;
    margin-bottom: 20px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    box-shadow: var(--shadow);
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper img:first-of-type {width: 100%}

/* Product infos and add to cart */

.woocommerce-page div.product div.summary {
    width: 100%;
    float: unset;
}

.woocommerce-review-link {color: #000}
.woocommerce-review-link:hover {color: var(--main-color)}

.woocommerce div.product p.price {
    color: var(--grey);
    font: bold 40px/1 var(--title-font);
}

.woocommerce-product-details__short-description {margin: 30px 0}


.woocommerce .quantity .qty {height: 36px}

.woocommerce .product_meta a {
    margin-right: 5px;
    padding: 5px 15px;
    background-color: var(--light-color);
    color: #000;
    font-size: 16px;
    font-weight: normal;
    border-radius: 50px;
    display: inline-block;
}

/* Description & Reviews */

.woocommerce-page div.product .woocommerce-tabs {min-height: 50vh}
.woocommerce-page div.product .woocommerce-tabs h2 {margin-bottom: 20px}

/* Related products */

.woocommerce .related.products {margin-top: 80px}
.woocommerce .related.products h2 {
    margin-bottom: 40px;
    font-size: 28px;
}

/* ---------- Cart page */

.woocommerce-cart > article,
.woocommerce-checkout > article
{margin-top: var(--body-padding-tb)}

.woocommerce .shop_table a:not(.remove),
.woocommerce-privacy-policy-link {
    color: #000;
    text-decoration: underline;
}
.woocommerce .shop_table a:not(.remove):hover,
.woocommerce-privacy-policy-link:hover
{color: var(--main-color)}

.woocommerce-cart footer,
.woocommerce-checkout footer {
    margin: 40px 0 var(--body-padding-tb) 0;
    position: unset;
    padding: 0;
}

/* ---------- Checkout page */

.woocommerce-checkout input,
.woocommerce-checkout textarea
{padding: 5px}

.woocommerce-checkout h1 {margin: 20px 0}
.woocommerce-checkout h2,
.woocommerce-checkout h3
{margin-bottom: 20px}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order
{margin-top: 20px}

/* ---------- Thank you page */

.woocommerce ul.order_details {margin: 40px 0}

/* ======================================================================
* STUDIO
 * ======================================================================
*/

.studio-card h2,
.studio-card h3,
.studio-card h4 {
    font: normal 16px/1.25 var(--text-font);
    color: #000;
}
.studio-card .card-infos {padding: 12px 20px}
.studio-card .post-tags {display: none}

/* ======================================================================
 * À PROPOS
 * ======================================================================
*/

/* ---------- Page content */

#a-propos-content,
#on-en-parle {
    background-color: var(--light-grey);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

#a-propos-content > :not(figure:first-child):not(blockquote) {
    padding-left: 40px;
    padding-right: 40px;
}

#a-propos-content > figure {
    margin-top: 40px;
    margin-bottom: 40px;
}
#a-propos-content > figure img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
#a-propos-content > figure:first-child {margin-top: 0}
#a-propos-content > figure:first-child img {max-height: calc(100vh - var(--nav-height) - var(--content-top-space) - var(--col-padding) - 70px)}

#a-propos-content blockquote {
    margin: 50px 0;
    padding: 20px 80px;
    background-color: var(--main-color);
    font: italic 200 26px/1.75 var(--title-font);
    position: relative;
}
#a-propos-content blockquote p {margin-bottom: 0}
#a-propos-content blockquote cite {
    width: 100%;
    font-size: 18px;
    text-align: right;
    display: inline-block;
}

#a-propos-content blockquote cite::before {
    content: "--";
    margin-right: 5px;
    display: inline-block;
}

#a-propos-content blockquote::before,
#a-propos-content blockquote::after {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 39.06"><path id="b" d="M31.21,35.77c-7.35-8.25-2.17-22.48,3.83-28.16C41.36,1.62,48.64-1.04,49.7,.37c1.51,2-4.06,3.38-7.92,7.05-5.11,4.85-6.1,7.58,.52,10.5,7.09,3.2,7.8,6.76,7.8,11,0,10.04-11.79,13.21-18.89,6.86Z" /><path id="c" d="M3.52,35.77C-3.83,27.53,1.35,13.29,7.35,7.61,13.68,1.62,20.95-1.04,22.01,.37c1.51,2-4.06,3.38-7.92,7.05-5.11,4.85-6.1,7.58,.52,10.5,7.09,3.2,7.8,6.76,7.8,11,0,10.04-11.79,13.21-18.89,6.86Z" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}
#a-propos-content blockquote::before {
    top: -15px; left: 40px;
}
#a-propos-content blockquote::after {
    bottom: -15px; right: 40px;
    transform: rotate(180deg);
}

#a-propos-email {
    margin: 60px 0;
    color: #000;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-wrap: anywhere;
}
#a-propos-email:hover {color: var(--main-color)}

#a-propos-email svg {
    width: 28px;
    margin-right: 10px;
}

/* ---------- Sidebar */

#a-propos-contact-infos > div {margin-top: var(--spacing)}
#a-propos-contact-infos h2 {font-size: 22px; margin-bottom: 10px}
#a-propos-contact-infos a {color: #000}
#a-propos-contact-infos a:hover {color: var(--main-color)}

#aside-contact-email {
    display: flex;
    align-items: center;
    overflow-wrap: anywhere;
}
#aside-contact-email svg {
    width: 24px;
    margin-right: 10px;
}

#a-propos-social-newtworks {display: flex}
#a-propos-social-newtworks a:not(:last-child) {margin-right: 15px}
#a-propos-social-newtworks a svg {width: 32px}

/* ---------- On en parle */

#on-en-parle {padding: 40px}
#on-en-parle li {margin-bottom: 8px}

/* ======================================================================
 * 404 - NOT FOUND
 * ======================================================================
*/

#page-not-found {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: calc(100vh - var(--nav-height) - var(--body-padding-tb));
    margin-top: 0;
    padding-bottom: var(--content-top-space);
}

#page-not-found h1 {margin-bottom: 10px}
#page-not-found p {margin-top: 10px}

#page-not-found p a,
#page-not-found p button {
    padding: 0;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
    background: none;
    border: none;
}

#page-not-found p a:hover,
#page-not-found p button:hover
{color: var(--main-color)}