/*
Theme Name: WaveCode
Text Domain: WaveCode
Description: Theme for wave customers
Tags: responsive, fancy
Author: Noli Alickaj
Author URI: https://wavecode.no
*/

html {
    scroll-behavior: smooth;
}

:root {
    --beige: #FCEBD9;
    --orange: #F5C9A3;
    --light-brown: #D1B585;
    --brown: #5B4013;
    --green: #C9D4A6;
    --blue: #C4D6D1;
    --light-yellow: #FAF2C9;
    --border: rgba(91, 64, 19, 0.2);
    --white: #fcf9f1;
    --menu: #FCEBD9;
}

@font-face {
    font-family: 'Quicksand';
    src: url('/wp-content/themes/wavecode/assets/fonts/quicksand/Quicksand-SemiBold.woff2') format('woff2'), 
    url('/wp-content/themes/wavecode/assets/fonts/quicksand/Quicksand-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('/wp-content/themes/wavecode/assets/fonts/quicksand/Quicksand-Medium.woff2') format('woff2'), 
    url('/wp-content/themes/wavecode/assets/fonts/quicksand/Quicksand-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('/wp-content/themes/wavecode/assets/fonts/quicksand/Quicksand-Regular.woff2') format('woff2'), 
    url('/wp-content/themes/wavecode/assets/fonts/quicksand/Quicksand-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Trilby';
    src: url('/wp-content/themes/wavecode/assets/fonts/trilby/Trilby-Regular.woff2') format('woff2'), 
    url('/wp-content/themes/wavecode/assets/fonts/trilby/Trilby-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

h1, h2, h3, h4, h5 {
    font-family: 'Trilby';
    font-weight: 400;
    margin: 0;
}

p {
    margin: 0;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: var(--orange);
}

td a {
    color: var(--brown);
    text-decoration: underline;
}

*, ::after, ::before {
    box-sizing: border-box;
}

body {
    font-family: 'Quicksand';
    color: var(--brown);
    margin: 0;
    padding: 0;
    font-size: 18px;
}

header {
    position: relative;
    z-index: 9999;
    padding-top: 30px;
    padding-bottom: 30px;
}

.wrapper {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 60px;
    padding-right: 60px;
}

.wrapper--hero {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    height: 100%;
}

.hero {
    height: 90vh;
    min-height: 750px;
    background-size: cover;
    background-position: center;
    margin-top: -104px;
}

.logo--center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); 
    text-align: center;
}

.header--fp {
    padding-top: 40px;
    padding-bottom: 40px;
}

.fullwidth-bg {
    height: 600px;
    background-size: cover;
    background-position: center;
    padding-left: 20px;
    padding-right: 20px;
}

nav a {
    font-size: 17px;
}

.border--b {
    border-bottom: 1px solid var(--border);
}

.border--bl {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.page-id-78 table {
    border-collapse: collapse;
    width: 100%;
}

.page-id-78 th {
    text-align: left;
    background: var(--orange);
    padding: 15px;
    border: 1px solid var(--brown);
}

.page-id-78 td {
    vertical-align: top;
    padding: 15px;
    border: 1px solid var(--brown);
}

.page-id-78 tr:nth-child(odd) {
    background-color: var(--orange);
}

.divider {
    width: 100%;
    height: 1px;
    background: var(--border);
}

/* ----------------- WIDTH ----------------- */
.width--i {
    width: 100%;
    max-width: 750px;
}

.width--intro {
    width: 100;
    max-width: 680px;
}

.width--p {
    width: 100%;
    max-width: 550px;
}

.width--m {
    width: 100%;
    max-width: 450px;
}

.width--full {
    width: 100%;
}

/* ----------------- FONT ----------------- */
.font--h {
    font-size: 60px;
    line-height: 1.2;
}

.font--i {
    font-size: 20px;
    line-height: 1.6;
}

.font--product {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.font--recipe {
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.font--price {
    font-size: 15px;
    letter-spacing: 1.2px;
    font-family: trilby;
    text-transform: uppercase;
}

.font--l {
    font-size: 34px;
    line-height: 1.4;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.font--m {
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.font--trilby {
    font-family: trilby;
}

.font--sub {
    font-family: 'Quicksand';
    font-weight: 600;
    font-size: 18px;
}

.font--500 {
    font-weight: 500;
}

.font--600 {
    font-weight: 600;
}

.font--cat {
    font-size: 16px;
    text-transform: uppercase;
}

/* ----------------- COLOR ----------------- */
.color--beige {
    color: var(--beige);
}

.color--brown {
    color: var(--brown);
}

.color--menu {
    color: var(--menu);
}

/* ----------------- BACKGROUND ----------------- */
.background--beige {
    background: var(--beige);
}

.background--blue {
    background: var(--blue);
}

.background--white {
    background: var(--white);
}

.background--menu {
    background: var(--menu);
}

/* ----------------- GAP ----------------- */
.gap--xl {
    gap: 60px;
}

.gap--l {
    gap: 40px;
}

.gap--m {
    gap: 30px;
}

.gap--s {
    gap: 20px;
}

.gap--xs {
    gap: 15px;
}

.gap--cart {
    gap: 8px;
}

.gap--nav {
    gap: 35px;
}

.gap--accordion {
    gap: 10px;
}

.gap--hero {
    gap: 40px;
}

.gap--footer {
    gap: 70px;
}

.gap--footer2 {
    gap: 110px;
}

.gap--product {
    gap: 30px;
}

/* ----------------- PADDING ----------------- */
.pad--intro {
    padding-top: 100px;
    padding-bottom: 100px;
}

.pad--m {
    padding-top: 75px;
    padding-bottom: 75px;
}

.pad--footer {
    padding-top: 100px;
    padding-bottom: 50px;
}

/* ----------------- BUTTONS ----------------- */
.btn--primary {
    color: var(--brown);
    background: var(--orange);
    width: fit-content;
    font-size: 16px;
    padding: 18px 40px;
    min-width: 180px;
    text-align: center;
    font-weight: 500;
}

.btn--secondary {
    color: var(--brown);
    border: 1px solid var(--brown);
    width: fit-content;
    font-size: 16px;
    padding: 18px 40px;
    min-width: 180px;
    text-align: center;
    font-weight: 500;
    transition: 0.2s ease;
}

.btn--secondary:hover {
    background: var(--brown);
    color: var(--beige);
}

.btn--alt {
    color: var(--beige);
    border: 1px solid var(--beige);
    width: fit-content;
    font-size: 16px;
    padding: 18px 40px;
    min-width: 180px;
    text-align: center;
    font-weight: 500;
    transition: 0.2s ease;
}

.btn--alt:hover {
    background: var(--beige);
    color: var(--brown);
}

/* ----------------- CART ----------------- */

.cart--header .cart--icon {
    /* background: url('path-to-your-cart-icon') no-repeat center center;*/
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.cart--count {
    font-size: 16px;
}

.img--product {
    width: 100%;
    height: auto;
}

.img--square {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.grid--4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    grid-column-gap: 30px;
    grid-row-gap: 80px;
}

.grid--3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-column-gap: 30px;
    grid-row-gap: 80px;
}

.grid--2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-column-gap: 30px;
}

.grid--recipe {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    grid-column-gap: 80px;
    grid-row-gap: 50px;
}

.grid--instructions {
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-column-gap: 80px;
    grid-row-gap: 50px;
}

.margin-top--l {
    margin-top: 40px;
}

.top--auto {
    margin-top: auto;
}

.instagram {
    margin-top: 20px;
}

@media (max-width: 1150px) {
    .header--fp {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .small--collapse {
        flex-direction: column !important;
    }

    /*
    .gap--footer {
        gap: 40px;
    }

    .gap--footer2 {
        gap: 40px;
    }
    */
}

/* ---- TABLET ---- */
@media (max-width: 992px) {
    .wrapper {
        padding-left: 40px;
        padding-right: 40px;
    }

    .wrapper--hero {
        padding-left: 40px;
        padding-right: 40px;
    }

    .grid--4 {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        grid-column-gap: 30px;
        grid-row-gap: 60px;
    }

    .grid--3 {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        grid-row-gap: 60px;
    }

    .grid--recipe, .grid--instructions {
        grid-template-columns: 1fr;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .pad--intro {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }

    .wrapper--hero {
        padding-left: 30px;
        padding-right: 30px;
    }

    .grid--4 {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
        grid-row-gap: 70px;
    }

    .grid--3 {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
        grid-row-gap: 70px;
    }

    .grid--2 {
        grid-template-columns: repeat(1, minmax(200px, 1fr));
        grid-row-gap: 70px;
    }

    .mobile--100 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gap--hero {
        gap: 40px;
    }

    .svg--logo {
        width: 100%;
        max-width: 160px;
        height: auto;
    }

    .svg--test {
        width: 100%;
        max-width: 350px;
        height: auto;
    }

    .gap--xl {
        gap: 40px;
    }

    .gap--l {
        gap: 25px;
    }

    .gap--footer {
        gap: 40px;
    }

    .gap--footer2 {
        gap: 40px;
    }

    .gap--product {
        gap: 20px;
    }

    .margin-top--l {
        margin-top: 10px;
    }

    .font--l {
        font-size: 26px;
        line-height: 1.4;
        letter-spacing: 2px;
    }

    .top--auto {
        margin-top: 0;
    }

    .prev, .next, .prev-2, .next-2 {
        display: none;
    }

    .single-product .img--product, .single-product .product-image img {
        aspect-ratio: 1;
        object-fit: cover;
    }

    .pad--m {
        padding-top: 30px;
        padding-bottom: 75px;
    }

    .hero {
        height: auto;
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .divider {
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

.swiper, .swiper-2 {
    width: 100%;
    height: 100%;
}

/*
.swiper-wrapper {
    cursor: grab; 
}
*/

.next, .prev, .next-2, .prev-2 {
    cursor: pointer;
}

.swiper-slide, .swiper-slide-2 {
    height: auto !important;
}


.woocommerce-error, .woocommerce-info, .woocommerce-message {
    background: var(--white);
    border: 1px solid var(--brown);
    padding: 18px 30px;
    margin: 0;
    font-size: 16px;
}

.single-product .woocommerce-error, .single-product .woocommerce-info, .single-product .woocommerce-message {
    margin-top: 60px;
}

.woocommerce-cart .woocommerce-error, .woocommerce-cart .woocommerce-info, .woocommerce-cart .woocommerce-message {
    margin-bottom: 30px;
}

.woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-message {
    margin-bottom: 30px;
}

.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before {
    display: none;
}

.woocommerce-notices-wrapper a {
    color: var(--orange);
}

.woocommerce .woocommerce-error .button, 
.woocommerce .woocommerce-info .button, 
.woocommerce .woocommerce-message .button, 
.woocommerce-page .woocommerce-error .button, 
.woocommerce-page .woocommerce-info .button, 
.woocommerce-page .woocommerce-message .button {
    display: none;
}