/* Base Styles — dealer.international
   Depends on: tokens.css */

/* Storefront sets font-family on form elements separately — override all. */
body,
button,
input,
optgroup,
select,
textarea {
    font-family: var(--font-family);
}

body {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-black);
    background-color: var(--color-white);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site {
    overflow-x: clip;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.input-text {
    min-height: var(--form-control-height);
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    border: var(--border-width-thin) solid var(--form-control-border-color);
    border-radius: var(--form-control-radius);
    background-color: var(--form-control-background);
    color: var(--form-control-text);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    line-height: 1;
    box-shadow: var(--form-control-shadow);
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder,
.input-text::placeholder {
    color: var(--form-control-placeholder);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.input-text:focus {
    border-color: var(--form-control-border-color-focus);
    background-color: var(--form-control-background-focus);
    box-shadow: var(--form-control-shadow-focus);
}

body.dealer-focus-modality-ready.dealer-using-keyboard input[type="text"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard input[type="number"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard input[type="email"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard input[type="tel"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard input[type="url"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard input[type="password"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard input[type="search"]:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard textarea:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard select:focus,
body.dealer-focus-modality-ready.dealer-using-keyboard .input-text:focus {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
}

body.dealer-focus-modality-ready:not(.dealer-using-keyboard) a:focus,
body.dealer-focus-modality-ready:not(.dealer-using-keyboard) button:focus,
body.dealer-focus-modality-ready:not(.dealer-using-keyboard) input:focus,
body.dealer-focus-modality-ready:not(.dealer-using-keyboard) select:focus,
body.dealer-focus-modality-ready:not(.dealer-using-keyboard) textarea:focus,
body.dealer-focus-modality-ready:not(.dealer-using-keyboard) [tabindex]:not([tabindex="-1"]):focus {
    outline: none;
    box-shadow: none;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

select:not([multiple]) {
    padding-right: calc((var(--form-control-padding-x) * 2) + 14px);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--form-control-padding-x) center;
    background-size: 14px 8px;
}

/* Typography */
h1, .h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
}

h2, .h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
}

h3, .h3 {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

h4, .h4 {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

h5, .h5,
h6, .h6 {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Hero utility */
.text-hero {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-medium);
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover,
body.dealer-focus-modality-ready.dealer-using-keyboard a:focus {
    color: var(--color-black);
}

/* Container — override Storefront's content-box on .col-full */
.col-full,
.site-content .col-full {
    box-sizing: border-box;
    max-width: var(--container-max);
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .col-full,
    .site-content .col-full {
        padding-left: var(--padding-tablet);
        padding-right: var(--padding-tablet);
    }
}

@media (min-width: 1024px) {
    .col-full,
    .site-content .col-full {
        padding-left: var(--padding-desktop);
        padding-right: var(--padding-desktop);
    }
}

/* Images */
img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* =========================================================================
   Storefront button shim
   -------------------------------------------------------------------------
   Storefront ships heavy default styling on .button / .button.alt /
   button.button / [type="submit"] (purple background, uppercase, custom
   padding, letter-spacing). When a WC-rendered native button picks up our
   shared .btn-primary / .btn-outline-light variant from components.css,
   Storefront's selectors can win on specificity and break the dealer style.

   This shim neutralizes only the conflicting properties — it doesn't try
   to redefine layout. Variants in components.css are the source of truth.
   ========================================================================= */

.btn-primary,
.btn-outline,
.btn-outline-light,
.btn-ghost,
.woocommerce .btn-primary,
.woocommerce .btn-outline,
.woocommerce .btn-outline-light,
.woocommerce .btn-ghost,
.woocommerce-page .btn-primary,
.woocommerce-page .btn-outline,
.woocommerce-page .btn-outline-light,
.woocommerce-page .btn-ghost {
    text-transform: none;
    letter-spacing: 0;
}

/* WC's single add-to-cart button always carries `.button.alt` from the
   single-product template. Reset Storefront's purple background and
   typography on that selector so the variant class can repaint cleanly. */
.woocommerce .button.btn-primary,
.woocommerce .button.btn-outline-light,
.woocommerce button.button.btn-primary,
.woocommerce button.button.btn-outline-light,
.woocommerce input.button.btn-primary,
.woocommerce input.button.btn-outline-light,
.woocommerce .wc-forward.btn-primary,
.woocommerce .wc-forward.btn-outline-light,
.woocommerce .added_to_cart.btn-primary,
.woocommerce .added_to_cart.btn-outline-light,
.woocommerce-page .button.btn-primary,
.woocommerce-page .button.btn-outline-light,
.woocommerce-page button.button.btn-primary,
.woocommerce-page button.button.btn-outline-light,
.woocommerce-page input.button.btn-primary,
.woocommerce-page input.button.btn-outline-light,
.woocommerce-page .wc-forward.btn-primary,
.woocommerce-page .wc-forward.btn-outline-light,
.woocommerce-page .added_to_cart.btn-primary,
.woocommerce-page .added_to_cart.btn-outline-light,
.woocommerce button.button.alt.btn-primary,
.woocommerce button.button.alt.btn-outline-light,
.woocommerce-page button.button.alt.btn-primary,
.woocommerce-page button.button.alt.btn-outline-light {
    background-color: transparent;
    color: inherit;
    text-shadow: none;
    border: 0;
}

.woocommerce .button.btn-primary,
.woocommerce button.button.btn-primary,
.woocommerce input.button.btn-primary,
.woocommerce .wc-forward.btn-primary,
.woocommerce .added_to_cart.btn-primary,
.woocommerce-page .button.btn-primary,
.woocommerce-page button.button.btn-primary,
.woocommerce-page input.button.btn-primary,
.woocommerce-page .wc-forward.btn-primary,
.woocommerce-page .added_to_cart.btn-primary,
.woocommerce button.button.alt.btn-primary,
.woocommerce-page button.button.alt.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.woocommerce .button.btn-primary:hover,
.woocommerce .button.btn-primary:focus,
.woocommerce button.button.btn-primary:hover,
.woocommerce button.button.btn-primary:focus,
.woocommerce input.button.btn-primary:hover,
.woocommerce input.button.btn-primary:focus,
.woocommerce .wc-forward.btn-primary:hover,
.woocommerce .wc-forward.btn-primary:focus,
.woocommerce .added_to_cart.btn-primary:hover,
.woocommerce .added_to_cart.btn-primary:focus,
.woocommerce-page .button.btn-primary:hover,
.woocommerce-page .button.btn-primary:focus,
.woocommerce-page button.button.btn-primary:hover,
.woocommerce-page button.button.btn-primary:focus,
.woocommerce-page input.button.btn-primary:hover,
.woocommerce-page input.button.btn-primary:focus,
.woocommerce-page .wc-forward.btn-primary:hover,
.woocommerce-page .wc-forward.btn-primary:focus,
.woocommerce-page .added_to_cart.btn-primary:hover,
.woocommerce-page .added_to_cart.btn-primary:focus,
.woocommerce button.button.alt.btn-primary:hover,
.woocommerce button.button.alt.btn-primary:focus,
.woocommerce-page button.button.alt.btn-primary:hover,
.woocommerce-page button.button.alt.btn-primary:focus {
    background-color: var(--color-primary);
    color: var(--color-black);
}

.woocommerce .button.btn-outline-light,
.woocommerce button.button.btn-outline-light,
.woocommerce input.button.btn-outline-light,
.woocommerce .wc-forward.btn-outline-light,
.woocommerce .added_to_cart.btn-outline-light,
.woocommerce-page .button.btn-outline-light,
.woocommerce-page button.button.btn-outline-light,
.woocommerce-page input.button.btn-outline-light,
.woocommerce-page .wc-forward.btn-outline-light,
.woocommerce-page .added_to_cart.btn-outline-light,
.woocommerce button.button.alt.btn-outline-light,
.woocommerce-page button.button.alt.btn-outline-light {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-primary);
}

.woocommerce .button.btn-outline-light:hover,
.woocommerce .button.btn-outline-light:focus,
.woocommerce button.button.btn-outline-light:hover,
.woocommerce button.button.btn-outline-light:focus,
.woocommerce input.button.btn-outline-light:hover,
.woocommerce input.button.btn-outline-light:focus,
.woocommerce .wc-forward.btn-outline-light:hover,
.woocommerce .wc-forward.btn-outline-light:focus,
.woocommerce .added_to_cart.btn-outline-light:hover,
.woocommerce .added_to_cart.btn-outline-light:focus,
.woocommerce-page .button.btn-outline-light:hover,
.woocommerce-page .button.btn-outline-light:focus,
.woocommerce-page button.button.btn-outline-light:hover,
.woocommerce-page button.button.btn-outline-light:focus,
.woocommerce-page input.button.btn-outline-light:hover,
.woocommerce-page input.button.btn-outline-light:focus,
.woocommerce-page .wc-forward.btn-outline-light:hover,
.woocommerce-page .wc-forward.btn-outline-light:focus,
.woocommerce-page .added_to_cart.btn-outline-light:hover,
.woocommerce-page .added_to_cart.btn-outline-light:focus,
.woocommerce button.button.alt.btn-outline-light:hover,
.woocommerce button.button.alt.btn-outline-light:focus,
.woocommerce-page button.button.alt.btn-outline-light:hover,
.woocommerce-page button.button.alt.btn-outline-light:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
}