:root {
    --primary: #031a28;
    --primary-hover: #052c44;
    --secondary: #d359d5;
    --headings: #031a28;
    --nav-bg: #fff;
    --nav-text: #000;
    --nav-dropdown-bg: #fff;
    --nav-dropdown-text-hover: #fff;
    --nav-dropdown-text: #000;
    --primary-bg-hover: var(--primary);
    --nav-text-hover: #e50040;
    --gray: #f2f4f7;

    /* BTN Primary */
    --buttonPrimary: #ed683b;
    --buttonPrimaryHover: #ed683be6;
    --buttonPrimaryBorderColor: #ed683b;
    --buttonPrimaryBorderColorHover: #ed683be6;
    --buttonPrimaryColorHover: #fff;
    --buttonPrimaryTextTransform: uppercase;
    --buttonPrimaryDisabled: gray;
    --buttonPrimaryBorderColorDisabled: gray;
    --buttonPrimaryColorDisabled: #fff;

    /* BTN Secondary */
    --buttonSecondary: #d359d5;
    --buttonSecondaryHover: #d359d5;
    --buttonSecondaryTransform: uppercase;

    /* BTN Primary Outline */
    --buttonPrimaryOutlineTextTransform: uppercase;

    --labels: #031a28;
    --inputBorder: var(--borderColor);

    --rounded-none: 0;

    --cardTitle: #031a28;
    --cardDate: var(--primary);
    --cardSubtitle: var(--primary);
    --cardTagBg: var(--gray);
    --cardTagColor: #000000;
    --cardAddToCartButton: rgba(0, 150, 143);
    --cardAddToCartButtonHover: rgba(0, 150, 143, 0.8);
    --borderColor: #dfdfdf;

    --shoppingCartIconBg: var(--primary);
    --shoppingCartIconColor: #fff;
    --shoppingCartIconBgHover: var(--primary);
    --shoppingCartIconColorHover: #fff;

    --buttonOutlineBorder: var(--primary);
    --buttonOutlineBorderHover: var(--primary);
    --buttonOutlineBorderBgHover: var(--primary);
    --buttonOutlineColorTextHover: #fff;
    --buttonOutlineText: var(--primary);

    --search-toggle-button-bg-active: #fff;
    --search-toggle-button-text-active: #333;
    --search-toggle-button-bg-inactive: #f2f4f7;
    --search-toggle-button-text-inactive: rgba(000, 000, 000, 0.5);

    --bg-error: #fff0f0;
    --border-error: #dd0b2f;
    --bg-success: #f0fff6;
    --border-success: #00b900;
}

@layer base {

    /* roboto-300 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 300;
        src: url("/css/fonts/roboto/roboto-v47-latin-300.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-300italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 300;
        src: url("/css/fonts/roboto/roboto-v47-latin-300italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-regular - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 400;
        src: url("/css/fonts/roboto/roboto-v47-latin-regular.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-500 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        src: url("/css/fonts/roboto/roboto-v47-latin-500.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-500italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 500;
        src: url("/css/fonts/roboto/roboto-v47-latin-500italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-700 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 700;
        src: url("/css/fonts/roboto/roboto-v47-latin-700.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-700italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 700;
        src: url("/css/fonts/roboto/roboto-v47-latin-700italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-900 - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: normal;
        font-weight: 900;
        src: url("/css/fonts/roboto/roboto-v47-latin-900.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* roboto-900italic - latin */
    @font-face {
        font-display: swap;
        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
        font-family: "Roboto";
        font-style: italic;
        font-weight: 900;
        src: url("/css/fonts/roboto/roboto-v47-latin-900italic.woff2") format("woff2");
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    body {
        font-family: "Roboto", sans-serif;
    }

    .bg-gray {
        background-color: var(--gray);
    }
}

.logo-extension {
    display: none;
}