/* ======================================================================
 * 1 COLUMN DISPLAY (Mobile)
 * ======================================================================
*/

@media screen and (max-width: 1000px) {
    :root{
        --nav-height: 90px;

        --body-padding-lr: 2.5vw;
        --main-width: 100%;

        --nav-padding: calc(2.5vw + 8px);

        --col-padding: 8px;
        
        --shift-buttons-height: 60px;
        --content-top-space: calc(var(--shift-buttons-height) + var(--col-padding));
    }

    /* ============================== GLOBAL CLASSES */

    /* ---------- Round date */
    
    .round-date {width: 64px; height: 64px}
    .round-date .day {font-size: 24px}
    .round-date .month {font-size: 13px}
    .round-date .year {font-size: 12px}
    
    /* ---------- Big title for single posts */
    
    #big-fixed-title {display: flex}
    #big-fixed-title h1 {
        width: calc(100% - 64px);
        margin-bottom: 20px;
        margin-left: 15px;
        line-height: 1.25;
    }
    .big-title-after {display: none}
    
    /* ---------- Resize images */

    .image-gallery > img:first-child,
    .post-card img
    {max-height: calc(100vh - var(--nav-height) - var(--content-top-space) - var(--shift-buttons-height) - var(--col-padding) - 50px)}
    .image-gallery img {margin-bottom: 20px}
    .image-gallery img:first-child {margin-bottom: 0}

    .content-container h3 {font-size: 22px}
    .content-container h4 {font-size: 18px}

    /* ============================== INCLUDES */

    /* ---------- Navtop */

    body.scroll #nav-top.shadow {box-shadow: var(--shadow-bottom)}
    
    /* Logo & search bar */

    #logo-search {width: 100%}
    #search-results:not(:empty) {padding-left: var(--nav-padding)}
    .search-open #search-bar {width: 100%}

    #search-icon {left: calc(var(--nav-height) - 20px)}
    #search-placeholder {display: none}

    /* Burger menu */

    #burger-menu {
        background: none;
        text-align: center;
        border: none;
        position: fixed;
        top: 18px; right: var(--nav-padding);
    }
    .search-open #burger-menu {display: none}
    
    #burger-menu .burger-icon {
        width: 33px;
        height: 33px;
        position: relative;
        transition: inherit;
    }
    #burger-menu.active .burger-icon {transform: rotate(-180deg)}
    
    #burger-menu .burger,
    #burger-menu .cross {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        transition: inherit;
    }
    #burger-menu .burger {
        padding: 7px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #burger-menu.active .burger {opacity: 0}
    #burger-menu .burger div {
        width: 100%;
        height: 3px;
        background-color: #000;
    }
    
    #burger-menu .cross {
        font-size: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #burger-menu:not(.active) .cross {opacity: 0}
    
    #burger-menu p {
        margin-top: 4px;
        text-transform: uppercase;
        font-size: 12px;
        transition: inherit;
    }
    #burger-menu.active p {opacity: 0}
    
    /* Navlinks */
    
    #nav-links {
        width: 100vw;
        padding: 0 var(--nav-padding) var(--body-padding-tb) var(--nav-padding);
        background-color: #fff;
        border-radius: 0 0 10px 10px;
        position: fixed;
        top: var(--nav-height); right: 0;
        z-index: 90;
        transition: .4s;
    }
    #nav-links.open {box-shadow: var(--shadow-bottom)}
    #nav-links:not(.open) {
        padding-bottom: 0;
        pointer-events: none;
    }
    #main-pages-links {
        flex-direction: column;
        align-items: flex-end;
    }
    #main-pages-links li,
    #breadcrumbs-links .parent-page {
        margin-bottom: 12px;
        font-size: 22px;
        height: 30px;
    }
    #main-pages-links li, #breadcrumbs-links li {text-align: right}
    #main-pages-links li.current_page_item::before,
    #breadcrumbs-links li.parent-page::before
    {top: 8px}
    
    #breadcrumbs-links {
        width: 100%;
        padding-top: 15px;
        text-align: right;
        border-top: 1px solid var(--grey);
        flex-direction: column;
        align-items: flex-end;
        transition: .4s;
    }
    #nav-links:not(.open) #breadcrumbs-links {
        padding-top: 0;
        border-top-color: transparent;
    }
    #nav-links a.parent-page {margin-bottom: 0; font-weight: bold}
    #breadcrumbs-links li.parent-page {margin: 0}
    #breadcrumbs-links li.parent-page::after {
        margin-left: 10px;
        transform: rotate(135deg) translateY(50%);   
    }
    #breadcrumbs-links .current {line-height: 1.25}

    #nav-links:not(.open) #main-pages-links li,
    #nav-links:not(.open) #breadcrumbs-links li {
        height: 0;
        margin-bottom: 0;
        opacity: 0;
    }

    .reduced-title-length {display: none}

    /* ---------- Side bar */

    aside,
    .aside-content {
        width: 100%;
        margin: 40px 0;
        position: relative;
    }

    /* ---------- Footer */

    footer {
        margin-top: var(--spacing);
        padding: 0 var(--col-padding);
        text-align: center;
    }

    footer ul.menu {justify-content: center}

    #copyright .separator {display: none}

    /* ---------- Loader */

    .pum-loader > div {
        width: 12px;
        height: 12px;
        margin: 20px 5px;
    }

    /* ---------- Post cards */

    .post-card,
    .woocommerce ul.products > li.product {
        width: 100% !important;
        margin-bottom: var(--spacing) !important;
    }
    
    .big-first-card > .post-card:first-of-type h3,
    .card-infos h3, .card-infos h4
    {font-size: 24px}

    /* ---------- Random recipe */

    a.random-recipe {
        margin: 50px auto;
        padding: 15px;
        font-size: 19px;
    }

    a.random-recipe svg {
        width: 22px;
        margin-right: 12px;
    }

    /* ============================== SHIFT SLIDER */
    
    /* ---------- Shift titles */

    .shift-title {font-size: 40px}
    .shift-title-fixed {
        margin-bottom: 20px;
        font-size: 38px;
        text-align: center;
    }
    
    /* ---------- Disable aside shifts */

    aside.shift, .aside-content.shift {pointer-events: unset}

    aside.shift .shift-container-slider,
    .aside-content.shift .shift-container-slider {
        width: 100%;
        display: flex;
        flex-direction: column;
        left: unset !important;
    }

    aside.shift .col, .aside-content.shift .col {width: 100%}
    aside.shift .placeholder, .aside-content.shift .placeholder {display: none}

    aside .col .shift-two-options,
    .aside-content .col .shift-two-options {display: none}

    /* ---------- Shift buttons */

    .shift-buttons-container {width: 100%; display: flex}
    
    .shift-fixed-buttons {
        width: 100vw;
        background-color: #fff;
        top: var(--nav-height); left: 0;
        z-index: 50;
        box-shadow: var(--shadow-bottom);
        transition: .4s;
    }
    body.filters-open .shift-fixed-buttons {top: calc(var(--nav-height) - var(--shift-buttons-height))}
    .shift-fixed-buttons button {
        width: 100%;
        height: var(--shift-buttons-height);
        min-height: unset;
        margin: 0;
        padding: 15px 0 0 0;
        color: #000;
        font-size: 16px;
        border-radius: 0;
        border: none;
        display: flex;
        justify-content: center;
    }
    .shift-fixed-buttons button b {display: none}
    .shift-fixed-buttons button.active span {font-weight: bold}
    
    .shift-buttons-disk {
        width: 8px;
        height: 8px;
        top: calc(100% - 20px);
        z-index: 1;
    }
    .shift-buttons-disk[data-position="0"] {left: calc(33% / 2); transform: translateX(-50%)}
    .shift-buttons-disk[data-position="2"] {left: calc(100% - (33% / 2)); transform: translateX(-50%)}

    .shift-2-buttons .shift-buttons-disk[data-position="0"] {left: calc(50% / 2); transform: translateX(-50%)}
    .shift-2-buttons .shift-buttons-disk[data-position="1"] {left: calc(100% - (50% / 2)); transform: translateX(-50%)}

    /* ============================== OPACITY SLIDER */

    .opacity-slider-mobile > .opacity-col {
        width: 100%;
        margin: 0;
        background-color: #fff;
        transition: .4s;
    }

    .opacity-buttons {
        width: calc(100vw - (var(--nav-padding) * 2));
        border-radius: 50px;
        position: fixed;
        bottom: var(--body-padding-tb); left: var(--nav-padding);
        z-index: 30;
        box-shadow: var(--shadow);
        transition: .4s;
    }
    .col:not(.active) .opacity-buttons {
        opacity: 0;
        pointer-events: none;
    }

    .opacity-buttons-container {display: flex}

    #mobile-ingredients-slider[data-position="0"] .opacity-col:last-of-type,
    #mobile-ingredients-slider[data-position="1"] .opacity-col:not(:last-of-type) {
        height: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }

    #mobile-ingredients-slider .opacity-buttons button:first-of-type svg {width: 22px}
    #mobile-ingredients-slider .opacity-buttons button:last-of-type svg {width: 26px}

    /* ============================== PAGES */

    /* ---------- Homepage */

    #filters-open {
        width: 64px;
        height: 64px;
        padding: 18px;
        background-color: var(--main-color);
        border: none;
        border-radius: 100%;
        position: fixed;
        bottom: var(--nav-padding); right: var(--nav-padding);
        box-shadow: var(--shadow);
        z-index: 10;
    }
    body.filters-open #filters-open,
    .col:not(.active) #filters-open {
        opacity: 0;
        pointer-events: none;
    }
    #filters-open svg {width: 100%}

    #filters-quantity {
        width: 28px;
        height: 28px;
        background-color: #000;
        color: #fff;
        font-weight: bold;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -5px; right: -5px;
        transition: .4s;
    }
    #filters-quantity:not(.active) {opacity: 0}

    #filters-close-cross {
        padding: 0;
        background: none;
        font-size: 22px;
        border: none;
        position: absolute;
        top: var(--nav-padding); right: var(--nav-padding);
    }

    #filters-close {
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        display: none;
        position: fixed;
        top: 0; left: 0;
        z-index: 9;
        opacity: 0;
        transition: .4s;
    }
    body.filters-open #filters-close {
        display: unset;
        opacity: .8;
    }

    #side-bar-filters {
        width: 80vw;
        height: 100vh;
        margin: 0;
        padding-top: var(--nav-height);
        background-color: #fff;
        position: fixed;
        top: 0; right: -100%;
        z-index: 10;
        box-shadow: var(--shadow);
        transition: .4s;
    }
    body.filters-open #side-bar-filters {right: 0}

    #aside-recipe-filters {
        height: calc(100vh - var(--nav-height) - var(--nav-padding));
        padding: var(--nav-padding) calc(var(--nav-padding) * 2) 0 var(--nav-padding);
    }

    /* ---------- Recipes */
    
    .recipe-header, #recipe-steps {padding: 20px}
    .recipe-header {
        flex-direction: column;
        font-size: 18px;
    }
    .recipe-checklist {
        width: 100%;
        margin-top: 20px;
        justify-content: flex-end;
    }
    .recipe-header svg {width: 24px}
    .recipe-checklist label {margin-left: 4px}
    
    #recipe-steps ol {padding-left: 40px}
    #recipe-steps ol li::before {font-size: 32px}
    #recipe-steps ol li::before, #recipe-steps li input {left: -28px}
    
    #mobile-ingredients-slider .aside-mobile-title {
        margin: 40px 0 30px 0;
        width: 100%;
        text-transform: uppercase;
        display: flex;
        align-items: center;
    }
    #mobile-ingredients-slider .col:first-child .aside-mobile-title {margin-top: 0}
    #mobile-ingredients-slider .aside-mobile-title::after {
        content: "";
        width: 100%;
        height: 3px;
        margin-left: 20px;
        background-color: #000;
        display: inline-block;
    }
    
    .goto-respond {margin-top: 40px}

    /* ---------- À propos */
    
    #a-propos-emilie > .shift-title {display: none}
    #a-propos-emilie #side-bar {margin-top: 0}
    
    #a-propos-content blockquote {
        padding: 20px 40px;
        font-size: 22px;
        line-height: 1.6;
    }
    #a-propos-content > :not(figure:first-child):not(blockquote) {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #on-en-parle {padding: 20px}

    /* ---------- Shop & Products */

    #wc-navtop-cart-link {right: calc(var(--nav-padding) + 80px)}
    body.search-open #wc-navtop-cart-link {
        opacity: 0;
        pointer-events: none;
    }
}



/* ======================================================================
 * MAIN + ASIDE DISPLAY (Touchpad + Desktop)
 * ======================================================================
*/

@media screen and (min-width: 1000px) {

    /* ============================== GLOBAL CLASSES */

    /* ---------- Big title for single posts */

    #big-fixed-title {
        color: #fff;
        position: fixed;
        top: calc(var(--nav-height) + var(--content-top-space) + var(--col-padding) + 40px);
        right: calc(var(--body-padding-lr) + var(--aside-padding) + ( var(--col-padding) * 2 ));
        transition: .4s;
    }

    #big-fixed-title h1 {
        display: flex;
        flex-wrap: wrap;
    }

    .big-title-date {
        padding: 8px;
        background-color: var(--transparent-black);
        position: absolute;
        top: 0; left: -80px;
        transform-origin: top right;
        transform: scale(1.4);
    }

    #big-fixed-title h1 span {
        padding: 3px 6px;
        background-color: var(--transparent-black);
    }

    .big-title-after {
        margin-bottom: 40px;
        padding-top: 40px;
        position: relative;
        overflow-x: hidden;
    }

    .big-title-afterscroll {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: var(--spacing); left: -50%;
        opacity: 0;
        transition: .4s;
    }

    .big-title-afterscroll b {
        width: calc(100% - 64px);
        padding-left: 15px;
        font: bold 40px/1.1 var(--title-font);
    }

    .big-title-placeholder {
        padding-right: 14px;
        font: bold 42px/1.5 var(--title-font);
        opacity: 0;
        pointer-events: none;
        display: inline-block;
    }

    #big-fixed-title h1,
    .big-title-placeholder {
        width: calc(var(--aside-content) - var(--body-padding-lr));
        font-size: 58px;
    }

    /* After scroll */

    .col:not(.active) > #big-fixed-title,
    .scroll #big-fixed-title {
        transform: translateX(50%);
        opacity: 0;
        pointer-events: none;
    }
    .col:not(.active) > #big-fixed-title {transform: translateX(-50%)}

    .scroll .big-title-afterscroll {
        opacity: 1;
        left: 0;
    }

    /* ---------- Image gallery */

    .image-gallery img.reduced {width: 49%}
    .image-gallery > .shift-next {display: none}

    /* ============================== INCLUDES */

    /* ---------- Navtop */

    body.scroll #nav-top {box-shadow: var(--shadow-bottom)}

    #main-pages-links li:not(:last-of-type) {margin-right: 40px}

    #burger-menu {display: none}

    #main-pages-links.reduced {margin-bottom: 15px}
    #main-pages-links.reduced a {font-size: 16px; opacity: .5}
    #main-pages-links.reduced a:hover {opacity: 1}
    #main-pages-links.reduced a:not(:last-of-type) {margin-right: 20px}

    #breadcrumbs-links li.parent-page {margin-right: 15px}
    #breadcrumbs-links li.parent-page::before {
        width: 10px;
        height: 10px;
        top: calc(50% - 5px); left: -20px;
    }

    /* ---------- Side bar */
    
    aside,
    .aside-content {
        width: var(--aside-content);
        height: calc(100vh - var(--nav-height) - var(--footer-height));
        padding: calc(var(--content-top-space) + var(--col-padding)) var(--body-padding-lr) 0 var(--aside-padding);
        position: fixed;
        top: var(--nav-height); right: 0;
    }

    .aside-scroll {height: calc(100vh - var(--nav-height) - var(--content-top-space) - var(--col-padding) - var(--footer-height))}

    .aside-scroll.must-scroll,
    .aside-scroll.can-scroll {
        padding-bottom: 0;
        padding-right: var(--col-padding);
    }

    .aside-scroll.must-scroll::after,
    .aside-scroll.can-scroll::after {
        content: "";
        width: 100%;
        height: 60px;
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 80%);
        display: inline-block;
        position: sticky;
        bottom: 0; left: 0;
        z-index: 5;
    }

    .aside-mobile-title {display: none}
 
    /* ---------- Footer */

    footer {
        width: var(--aside-content);
        height: var(--footer-height);
        padding: 0 calc(var(--body-padding-lr) + var(--col-padding)) 0 calc(var(--aside-padding) + var(--col-padding));
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: fixed;
        bottom: 0; right: 0;
        z-index: 50;
        transition: opacity .4s;
    }

    footer.shift-hidden {
        opacity: 0;
        pointer-events: none;
    }

    #copyright br {display: none}

    /* ---------- Post cards - Big first card */
    
    .big-first-card > .post-card:first-of-type {width: 100%}
    .big-first-card > .post-card:first-of-type img {
        max-height: calc(100vh - var(--nav-height) - var(--content-top-space) - var(--col-padding) - 80px);
        object-fit: cover;
        object-position: center;
    }
    .big-first-card > .post-card:first-of-type .round-date {width: 84px; height: 84px}
    .big-first-card > .post-card:first-of-type .day {font-size: 30px}
    .big-first-card > .post-card:first-of-type .month {font-size: 16px}
    .big-first-card > .post-card:first-of-type .year {font-size: 14px}
    .big-first-card > .post-card:first-of-type h3 {font-size: 38px}
    .big-first-card > .post-card:first-of-type .card-infos {padding: var(--spacing)}
    .big-first-card > .post-card:first-of-type .card-infos-text {width: calc(100% - 84px - calc(var(--spacing) / 2))}

    /* ============================== SHIFT SLIDER */

    /* ---------- Shift fixed buttons */

    .shift-fixed-buttons button span {
        font-size: 14px;
        position: absolute;
        bottom: -28px; left: 50%;
        transform: translateX(-50%);
    }
    .shift-fixed-buttons button:nth-of-type(2) {margin: 0 50px}
    .shift-fixed-buttons .shift-2-buttons button:nth-of-type(2) {margin: 0 0 0 50px}
    .shift-fixed-buttons button.active b {color: #fff}

    body.scroll .shift-fixed-buttons {
        top: calc(var(--nav-height) / 2);
        z-index: 105;
        transform: translateY(-50%);
        animation: button_transition_up .4s;
    }
    @keyframes button_transition_up {
        0% {opacity: 0; top: calc(var(--nav-height) / 1.5)}
        100% {opacity: 1; top: calc(var(--nav-height) / 2)}
    }

    body.no-scroll:not(.search-open):not(.was-search) .shift-fixed-buttons {animation: button_transition_down_1 .5s, button_transition_down_2 .5s}

    @keyframes button_transition_down_1 {
        0% {opacity: 1; z-index: 105}
        20% {opacity: 0; z-index: 105}
        21% {opacity: 0; z-index: 0}
        50% {opacity: 0}
        100% {opacity: 1}
    }

    body.no-scroll:not(.search-open):not(.was-search) .shift-fixed-buttons button span {animation: button_text_appear .5s}

    @keyframes button_text_appear {
        0% {opacity: 0}
        50% {opacity: 0}
        100% {opacity: 1}
    }

    @keyframes button_transition_down_2 {
        0% {top: calc(var(--nav-height) / 2)}
        100% {top: calc(var(--nav-height) + 10px)}
    }

    body.scroll .shift-fixed-buttons button:nth-of-type(2) {margin: 0 10px}
    body.scroll .shift-fixed-buttons button span,
    .search-open.scroll .shift-fixed-buttons {display: none}
    body.scroll .shift-2-buttons .shift-buttons-disk[data-position="1"] {left: calc(100% - 35px)}

    /* ---------- Shift title fixed */

    .shift-title-fixed {
        width: var(--main-width);
        height: 120px;
        font-size: 56px;
        position: fixed;
        top: calc(var(--nav-height) + var(--content-top-space));
        left: var(--body-padding-lr);
        z-index: -1;
        overflow: hidden;
    }
    
    .shift-title-fixed > span {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: .4s;
        white-space: nowrap;
    }
    
    body.scroll .shift-title-fixed > span {opacity: 0}
    
    .shift-container-slider[data-position="0"] .col:nth-of-type(1) .shift-title-fixed > span,
    .shift-container-slider[data-position="1"] .col:nth-of-type(2) .shift-title-fixed > span,
    .shift-container-slider[data-position="2"] .col:nth-of-type(3) .shift-title-fixed > span
    {left: 50%}
    
    .shift-container-slider[data-position="1"] .col:nth-of-type(1) .shift-title-fixed > span,
    .shift-container-slider[data-position="2"] .col:nth-of-type(1) .shift-title-fixed > span,
    .shift-container-slider[data-position="2"] .col:nth-of-type(2) .shift-title-fixed > span
    {left: -50%}
    
    .shift-container-slider[data-position="0"] .col:nth-of-type(2) .shift-title-fixed > span,
    .shift-container-slider[data-position="0"] .col:nth-of-type(3) .shift-title-fixed > span,
    .shift-container-slider[data-position="1"] .col:nth-of-type(3) .shift-title-fixed > span
    {left: 150%}

    .shift-title-fixed + div {margin-top: 120px}
    
    /* ============================== OPACITY SLIDER */

    .opacity-buttons {display: none}

    /* ============================== PAGES */

    /* ---------- Homepage */

    #filters-open,
    #filters-close,
    #filters-close-cross
    {display: none}

    /* ---------- Recipes */
    
    #recipe-introduction-text {height: calc(100vh - var(--nav-height) - var(--content-top-space) - var(--body-padding-tb) - 20px)}
    #recipe-ingredients, #recipe-tools {height: calc(100vh - var(--nav-height) - var(--content-top-space) - 150px)}
    
    /* ---------- Shop & Products */

    .woocommerce #nav-links {margin-right: 60px}

    .woocommerce ul.products > li.product {
        width: 48%;
        margin: 0 0 4% 0;
    }

    .woocommerce div.product div.summary {
        width: var(--aside-content);
        height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--content-top-space));
        padding: 0 calc(var(--body-padding-lr) + var(--col-padding)) 0 calc(var(--aside-padding) + var(--col-padding));
        position: fixed;
        top: calc(var(--nav-height) + var(--content-top-space)); right: 0;
    }

    .woocommerce-cart footer,
    .woocommerce-checkout footer {
        margin: 40px 0 var(--body-padding-tb) 0;
        position: unset;
        padding: 0;
        text-align: right;
        float: right;
    }
    
    .woocommerce-cart footer ul.menu,
    .woocommerce-checkout footer ul.menu {justify-content: flex-end}

}

/* ======================================================================
 * ASIDE AND MAIN ADAPTATIVE WIDTHS
 * ======================================================================
*/

@media screen and (min-width: 1000px) and (max-width: 1100px) { .search-open #search-bar {width: 300px} }

@media screen and (min-width: 1400px) { .reduced-title-length {display: none} }
@media screen and (max-width: 1400px) and (min-width: 1000px) { .full-title-length {display: none} }
@media screen and (max-width: 600px) {
    .card-badge {
        width: 135px;
        height: 135px;
        padding: 16px;
        font-size: 16px;
        border-width: 5px;
        top: 20px; right: 20px;
    }
}

@media screen and (max-width: 700px) { /* ---------- Small device */
    #a-propos-email {
        font-size: 18px;
        flex-direction: column;
        text-align: center;
    }
    #a-propos-email svg {margin-bottom: 10px}
}

@media screen and (max-width: 450px) { /* ---------- Very small device (mobile) */
    .card-badge {top: 90px; right: 10px}
    
    #a-propos-email {font-size: 16px}
}

@media screen and (max-width: 400px) { /* ---------- Very very small device */
    :root {
        --body-padding-lr: 1vw;
        --col-padding: 6px;
    }
}

@media screen and (max-width: 1400px) and (min-width: 1000px) { /* ---------- Small & medium desktop */
    :root {
        --body-padding-lr: 5vw;
        --aside-content: 45vw;
        --aside-padding: 30px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 1000px) { /* ---------- Small desktop */
    :root {
        --body-padding-lr: 2.5vw;
        --aside-padding: 10px;
    }
    
    #search-placeholder {display: none}
    .post-card,
    .woocommerce ul.products > li.product {
        width: 100%;
        margin-bottom: var(--spacing);
    }
    .big-first-card > .post-card:first-of-type h3 {font-size: 32px}

    #big-fixed-title h1, .big-title-placeholder {font-size: 50px}
    .big-title-date {transform: scale(1.2)}

    #main-pages-links li, #breadcrumbs-links li {font-size: 17px}
    .woocommerce #nav-links {margin-right: 50px}
    #wc-navtop-cart-link svg {width: 24px}

}

@media screen and (max-width: 1000px) and (min-width: 700px) { /* ---------- Touchpad */
    :root {
        --body-padding-lr: 7.5vw;
    }
}

@media screen and (min-width: 1800px) { /* ---------- Max length screens */
    :root {
        --main-width: 950px;
        --aside-content: calc(var(--body-padding-lr) + 650px);
        --body-padding-lr: calc((100vw - var(--main-width) - 650px) / 2);
        --nav-padding: calc((100vw - 1750px) / 2);
    }
}

/* ======================================================================
 * SCREEN HEIGHT
 * ======================================================================
*/

@media screen and (max-height: 900px) and (min-width: 1000px) { /* ---------- Small desktop */
    #big-fixed-title h1, .big-title-placeholder {font-size: 42px}
}