/* Headings use High Speed font */
h1, h2, h3, h4, h5, h6 {
    font-family: 'High Speed', 'ahigh sa', sans-serif;
}

/* Other elements use Montserrat */
body, p, span, a, li, div, main, section, article, aside, nav, footer, header, input, button, textarea, select {
    font-family: 'Montserrat', 'ahigh sa', sans-serif;
}
:root {
    /* Local High Speed font integration */
}
@font-face {
    font-family: 'High Speed';
    src: url('https://powercar.com.ar/home/public/font/high_speed_3/High%20Speed.ttf') format('truetype'),
         url('https://powercar.com.ar/home/public/font/high_speed_3/High%20Speed.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
/* General styles and config */
/* Powercar Brand Variables */
:root {
    /* Colors */
    --color-main: #F59F18;
    --color-dark: #363636;
    --color-light: #ffffff;
    --color-border: #363636;
    --color-success: #4CAF50;
    --color-error: #E53935;
    --color-warning: #F59F18;

    /* Font */
    --font-main: 'High Speed', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;

    /* Box shadow */
    --box-shadow: 0px 2px 14px 0px rgba(54, 54, 54, 0.15);

    /* Sizes */
    --height-m: 70%;
    --height-xl: 100%;
    --width-m: 70%;
    --width-xl: 100%;
    --height-vh-xl: 100vh;
    --width-vw-xl: 100vw;
    --border-color: black;
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding :0px;
    scroll-behavior: smooth;
}

a, li {
    text-decoration: none;
    list-style: none;    
    color: inherit;
    background-color: inherit;
}

/* Block main */
main {
        background-color: var(--color-dark);
        background-attachment: fixed; 
        background-size: cover;
        color: var(--color-light);
        font-family: var(--font-main);
        height: 100%; width: 100%; top: var(--header-height);
        display: flex; flex-direction: column;
}


/* Section display */



/* Generic divs */

/* Displays */
.div,
.div--blank,
.div--column,
.div--column-around,
.div--column-between,
.div--column-reverse,
.div--row,
.div--row-around,
.div--row-between,
.div--row-reverse,
.div--start,
.div--center,
.div--wrap,

/* Sizes */

/* By percent */
.div--height-m,
.div--height-xl,
.div--width-m,
.div--width-xl,
.div-max-size,

/* By viewport */
.div--height-vh-m,
.div--height-vh-xl,
.div--width-vh-m,
.div--width-vh-xl { display: flex; width: 100% }

/* Generic div displays */

/* Displays */
.div--blank { padding: 5px; width: 100%; }

.div--column { flex-direction: column; }
.div--column-between { flex-direction: column; justify-content: space-between;  }
.div--column-around { flex-direction: column; justify-content: space-around; }
.div--column-reverse { flex-direction: column-reverse;  }

.div--row { flex-direction: row; }
.div--row-between { flex-direction: row; justify-content: space-between; }
.div--row-around { flex-direction: row; justify-content: space-around; }
.div--row-reverse { flex-direction: row-reverse; }

.div--start { align-items: start; justify-content: start;}
.div--center { align-items: center; justify-content: center; }
.div--wrap { flex-wrap: wrap; }

/* Sizes */

/* By percent */

.div--height-m { height: var(--height-vh-m) }
.div--height-xl { height: var(--height-xl) }
.div--width-m { min-width: var(--width-m) }
.div--width-xl { min-width: var(--width-xl) }
.div--max-size { height: var(--height-xl); width: var(--width-xl); }

/* By viewport */
.div--height-vh-m { height: var(--height-vh-m) }
.div--height-vh-xl { height: calc(var(--height-vh-xl) - var(--header-height)) }
.div--width-vw-m { width: var(--width-vw-m) }
.div--width-vw-xl { width: var(--width-vw-xl) }

/* Main components */

/* Action wrappper and buttons */

.action-wrapper,
.action-wrapper--between,
.action-wrapper--transparent,
.action-wrapper--wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 8px;
}

.action-wrapper--between { justify-content: space-between; }
.action-wrapper--transparent {
    background-color: transparent;
    color: inherit;
}
.action-wrapper--wrap { flex-wrap: wrap; }

.action-wrapper__btn,
.action-wrapper__btn--checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.action-wrapper__btn--checkout {
    border-radius: 5px !important;
}

.action-wrapper__btn-auto {
    width: auto;
}