@import url("./reset.css");
@import url("./fonts.css");
@import url("./typography.css");

/* Atoms */
@import url("./atoms/buttons.css");
@import url("./atoms/spacer.css");

/* Molecules */
@import url("./molecules/image-card.css");
@import url("./molecules/tags.css");
@import url("./molecules/list.css");
@import url("./molecules/blocks/simple-side-content-with-button.css");
@import url("./molecules/blocks/image-split.css");
@import url("./molecules/blocks/large-seperator-with-text.css");
@import url("./molecules/blocks/seperator-with-button.css");
@import url("./molecules/blocks/hero-section.css");
@import url("./molecules/blocks/filter-buttons.css");
@import url("./molecules/blocks/unlisted-agents.css");
@import url("./molecules/blocks/product-gallery.css");
@import url("./molecules/blocks/product-attributes.css");
@import url("./molecules/blocks/product-actions.css");

/* Organisms */
@import url("./organisms/footer.css");
@import url("./organisms/header.css");
@import url("./organisms/action-bar.css");
@import url("./organisms/related-news-articles.css");
@import url("./organisms/blocks/square-image-section.css");
@import url("./organisms/blocks/search-bar.css");
@import url("./organisms/blocks/home-hero-section.css");
@import url("./organisms/blocks/text-image-switcher.css");
@import url("./organisms/blocks/image-left-with-text-section.css");
@import url("./organisms/blocks/image-right-with-text-section.css");
@import url("./organisms/blocks/contact-form.css");
@import url("./organisms/blocks/accordion.css");
@import url("./organisms/blocks/image_centered_text_top.css");
@import url("./organisms/blocks/three_blocks_with_text.css");
@import url("./organisms/blocks/left_side_quote.css");
@import url("./organisms/blocks/image_left_text_right.css");
@import url("./organisms/blocks/partnership_highlight.css");
@import url("./organisms/blocks/inspiration-block.css");
@import url("./organisms/blocks/social-features-block.css");
@import url("./organisms/blocks/highlighted-products.css");
@import url("./organisms/blocks/favorites.css");
@import url("./organisms/blocks/agents-contact.css");
@import url("./organisms/blocks/collection-section.css");

@import url("./weglot.css");

:root {
    /* Colors */
    --dark-green: rgba(48, 49, 39, 1);
    --green: rgba(68, 91, 66, 1);
    --green-80: rgba(68, 91, 66, 0.8);
    --mid-green: rgba(103, 112, 92, 1);
    --mid-green-80: rgba(103, 112, 92, 0.8);
    --light-green: rgba(150, 164, 135, 1);
    --light-green-80: rgba(150, 164, 135, 0.8);
    --lightest-green: rgba(160, 173, 147, 1);
    --lightest-green-80: rgba(160, 173, 147, 0.8);
    --light-grey: rgba(217, 217, 217, 1);
    --lipstick-red: rgba(152, 32, 53, 1);
    --light-pink: rgba(255, 51, 88, 1);
    --white: rgba(255, 255, 255, 1);
    --white-75: rgba(255, 255, 255, 0.75);
    --white-60: rgba(255, 255, 255, 0.6);
    --lighter-grey: rgba(242, 242, 242, 1);
    --lighter-grey-80: rgba(242, 242, 242, 0.8);
    --black: rgba(0, 0, 0, 1);

    /* Font sizes */
    --hero-title-font-size: 88px;
    --quote-heading-font-size: 70px;
    --quote-long-font-size: 30px;
    --h1-font-size: 60px;

    --h2-font-size: 36px;
    --h3-font-size: 20px;
    --h4-font-size: 17px;
    --h5-font-size: 15px;
    --h6-font-size: 20px;
    --p-font-size: 15px;
    --overlay-text-font-size: 12px;
    --label-font-size: 10px;
    --form-label-font-size: 17px;
    --footer-text-regular-font-size: 12px;
    --footer-text-medium-font-size: 12px;
    --copyright-font-size: 12px;
    --breadcrumb-font-size: 15px;
    --button-font-size: 14px;
    --button-filter-font-size: 14px;
    --nav-link-font-size: 50px;
    --mobile-subtitle-font-size: 14px;
    --mobile-h1-font-size: 50px;
    --mobile-h2-font-size: 34px;
    --tag-large-font-size: 12px;
    --tag-small-font-size: 9px;

    /* Font families */
    --hero-title-font-family: Bookman-Old-Style;
    --quote-heading-font-family: Bookman-Old-Style;
    --quote-long-font-family: Gilroy-Medium;
    --h1-font-family: Bookman-Old-Style;
    --h2-font-family: Bookman-Old-Style;
    --h3-font-family: Bookman-Old-Style;
    --h4-font-family: Gilroy-Medium;
    --h5-font-family: Gilroy-Regular;
    --h6-font-family: Gilroy-Medium;
    --p-font-family: Gilroy-Regular;
    --overlay-text-font-family: Gilroy-Medium;
    --label-font-family: Gilroy-Medium;
    --form-label-font-family: Gilroy-Medium;
    --footer-text-regular-font-family: Gilroy-Regular;
    --footer-text-medium-font-family: Gilroy-Medium;
    --copyright-font-family: Gilroy-Medium;
    --breadcrumb-font-family: Gilroy-Medium;
    --button-font-family: Gilroy-Medium;
    --button-filter-font-family: Gilroy-Medium;
    --nav-link-font-family: ITC-Bookman-Std;
    --mobile-subtitle-font-family: Gilroy-Medium;
    --mobile-h2-font-family: Bookman-Old-Style;

    /* Font weights */
    --hero-title-font-weight: 300;
    --quote-heading-font-weight: 300;
    --quote-long-font-weight: 400;
    --h1-font-weight: 300;
    --h2-font-weight: 300;
    --h3-font-weight: 300;
    --h4-font-weight: 400;
    --h5-font-weight: 400;
    --h6-font-weight: 400;
    --p-font-weight: 400;
    --label-font-weight: 400;
    --form-label-font-weight: 400;
    --footer-text-regular-font-weight: 400;
    --footer-text-medium-font-weight: 400;
    --copyright-font-weight: 400;
    --breadcrumb-font-weight: 400;
    --button-font-weight: 400;
    --button-filter-font-weight: 400;
    --nav-link-font-weight: 300;
    --mobile-subtitle-font-weight: 400;
    --mobile-h2-font-weight: 300;

    /* Line heights */
    --hero-title-line-height: 80px;
    --quote-heading-line-height: 65px;
    --quote-long-line-height: 36px;
    --h1-line-height: 70px;
    --h2-line-height: 45px;
    --h3-line-height: 30px;
    --h4-line-height: 24px;
    --h5-line-height: 22px;
    --h6-line-height: 25px;
    --p-line-height: 23px;
    --overlay-text-line-height: normal;
    --label-line-height: 11.21px;
    --form-label-line-height: 20.62px;
    --footer-text-regular-line-height: 15px;
    --footer-text-medium-line-height: 15px;
    --copyright-line-height: 10.92px;
    --breadcrumb-line-height: 22px;
    --button-line-height: 14.56px;
    --button-filter-line-height: normal;
    --nav-link-line-height: 30px;
    --mobile-subtitle-line-height: 24px;
    --mobile-h1-line-height: 55px;
    --mobile-h2-line-height: 42px;

    /* Letter spacing */
    --hero-title-letter-spacing: -2.64px;
    --quote-heading-letter-spacing: -0.7px;
    --quote-long-letter-spacing: 0;
    --h1-letter-spacing: 0;
    --h2-letter-spacing: 0;
    --h3-letter-spacing: 0;
    --h4-letter-spacing: 0;
    --h5-letter-spacing: 0;
    --h6-letter-spacing: 0;
    --p-letter-spacing: 0;
    --overlay-text-letter-spacing: 0;
    --label-letter-spacing: 0;
    --form-label-letter-spacing: 0;
    --footer-text-regular-letter-spacing: 0;
    --footer-text-medium-letter-spacing: 0;
    --copyright-letter-spacing: 0;
    --breadcrumb-letter-spacing: 0;
    --button-letter-spacing: 0;
    --mobile-h1-letter-spacing: -0.5px;
    --mobile-h2-letter-spacing: -0.35px;

    /* Paddings */
    --button-padding: 12px 24px;
    --button-filter-padding: 12px 20px;
    --tag-large-padding: 12px 20px;
    --tag-small-padding: 8px 16px;

    /* Border radius */
    --button-chip-border-radius: 32px;
    --button-rounded-border-radius: 7.2px;
    --button-filter-border-radius: 6px;
    --button-search-border-radius: 3px;

    /* Transitions */
    --transition-button: background-color 100ms ease-out;
    --transition-button-search: all 300ms ease-in-out;
    --transition-button-filter: all 300ms ease-in-out;
    --transition-dropdown-icon: transform 300ms ease-in-out;
    --transition-overlay: all 100ms ease-in-out;

    /*  container*/
    --max-container-width: 1440px;
}

html {
    scroll-behavior: smooth;
}

.container {
    width: 100%;
    max-width: var(--max-container-width);
    margin: 0 auto;
}

.container-404 {
    padding: 40px 20px;
    max-width: 1074px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.container-404 .button-container {
    display: flex;
    gap: 20px;
}

.container-404 p {
    font-family: Gilroy-Medium;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

input:focus-visible {
    outline: 2px solid var(--dark-green);
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

@media (width > 48rem) {
    .mobile-only {
        display: none;
    }

    :root {
        --button-padding: 12px 20px;

        --button-rounded-border-radius: 6px;
    }

    .container-404 {
        padding-inline: 0;
        padding-block: 60px 80px;
    }
}
