@CHARSET "UTF-8";

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

select.tax_display_select {
    background-color: #f0f0f0;
    border-radius: 3px;
    padding: 0px 20px 0px 5px;
    height: 24px;
    cursor: pointer;
}

select.tax_display_select option {
    cursor: pointer
}

/*.price-including-tax::before {
    content: attr(data-label) ': ';
    font-size: 1.1rem;
}

.price-excluding-tax::before {
    content: attr(data-label) ': ';
    font-size: 1.1rem;
}

[data-label="Excl. tax"]::before,
[data-label="Excl. BTW"]::before {
    content: attr(data-label) ': ';
    font-size: 1.1rem;
}

[data-label="Incl. tax"]::before,
[data-label*="moms"]::before {
    content: attr(data-label) ': ';
    font-size: 1.1rem;
}*/

/*
.special-price, .price-final_price {
    .price-wrapper[data-label*="moms"]::after {
        content: attr(data-label);
        padding-left: 3px;
        font-size: 0.875rem;
        flex: auto;
    }
}

.old-price {
    .price-wrapper[data-label*="moms"]::after {
        content: "";
    }
}

.price-container {
    .price-wrapper {

    }
}*/

/*.price-wrapper[data-label="Incl. tax"]::after { content: attr(data-label);} */
/*.price-wrapper[data-label="Excl. tax"]::after { content: attr(data-label);} */


input[type="radio"][name="tax_display"] {
    margin: 2px;
}

.toggle-wrapper {
    position: relative;
    z-index: 1;
    margin-top: -4px;
}

.toggle-wrapper label {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    position: relative;
    text-align: center;
    transition: background 600ms ease, color 600ms ease;
}

.toggle-wrapper input[type=radio].toggle {
    display: none;
}

.toggle-wrapper input[type=radio].toggle + label {
    position: relative;
    cursor: pointer;
    min-width: 60px;
}

.toggle-wrapper input[type=radio].toggle + label:hover {
    background: none;
    color: #1a1a1a;
}

.toggle-wrapper input[type=radio].toggle + label:after {
    background: #000;
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    z-index: -1;
}

.toggle-wrapper input[type=radio].toggle.toggle-2 + label {
    border-right: 0;
}

.toggle-wrapper input[type=radio].toggle.toggle-2 + label:after {
    left: 100%;
}

.toggle-wrapper input[type=radio].toggle.toggle-1 + label {
    margin-left: -5px;
}

.toggle-wrapper input[type=radio].toggle.toggle-1 + label:after {
    left: -100%;
}

.toggle-wrapper input[type=radio].toggle:checked + label {
    cursor: default;
    color: #fff;
    transition: color 200ms;
}

.toggle-wrapper input[type=radio].toggle:checked + label:after {
    left: 0;
}

.toggle-wrapper-links a {
    color: #fff;
    cursor: pointer;
}

.toggle-wrapper-links a:hover {
    text-decoration: none;
}

.toggle-wrapper-links .toggle {
    display: inline-block;
    background-color: #004687;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
    border-radius: 11px;
    width: 40px;
    height: 20px;
    vertical-align: text-top;
    position: relative;
}

.toggle-wrapper-links .toggle:after {
    transition: left 0.5s ease;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 11px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .5)
}

.toggle-wrapper-links .toggle-off:after {
    left: calc(100% - 16px);
}

/* Container */
.top-bar {
    padding: 0.5rem; /* p-2 */
    width: 100%; /* w-100 */
    display: flex; /* flex */
    gap: 0.5rem; /* gap-2 */
    justify-content: space-between; /* justify-between */
    color: white; /* text-white */
    font-size: 16px; /* text-base */
    padding-left: 1rem; /* pl-4 */
    padding-right: 1rem; /* pr-4 */
    --tw-bg-opacity: 1;
    background-color: rgb(1 107 181 / var(--tw-bg-opacity));
    font-family: Segoe UI, Helvetica Neue, Arial, sans-serif;
}

/* Extra spacing for SM breakpoint */
@media (min-width: 640px) {
    .top-bar {
        padding-left: 2rem; /* sm:pl-8 */
        padding-right: 2rem; /* sm:pr-8 */
    }

    .email-link {
        display: block; /* sm:block */
    }
}

/* MD breakpoint */
@media (min-width: 768px) {
    .msg-md {
        display: block; /* md:block */
    }
}

/* LG breakpoint */
@media (min-width: 1024px) {
    .top-bar {
        font-size: 18px; /* xl:text-lg (applies from 1280px too, but safe here) */
    }

    .msg-lg {
        display: block; /* lg:block */
    }
}

/* XL breakpoint (1280px) */
@media (min-width: 1280px) {
    .top-bar {
        padding: 1rem; /* xl:p-4 */
        padding-left: 6rem; /* xl:pl-24 */
        padding-right: 6rem; /* xl:pr-24 */
    }
}

/* 2XL breakpoint (1536px) */
@media (min-width: 1536px) {
    .top-bar {
        padding-left: 8rem; /* 2xl:pl-32 */
        padding-right: 8rem; /* 2xl:pr-32 */
    }
}

/* 3XL breakpoint (custom, ~ wider than Tailwind defaults?)
   Tailwind doesn't have 3xl by default, so assuming custom breakpoint.
*/
@media (min-width: 1920px) {
    .top-bar {
        padding-left: 12rem; /* 3xl:pl-48 */
        padding-right: 12rem; /* 3xl:pr-48 */
    }
}

/* Hidden elements default */
@media (max-width: 639px) {
    .msg-md,
    .msg-lg,
    .email-link {
        display: none; /* hidden */
    }
}

@media (max-width: 767px) {
    .msg-md,
    .msg-lg {
        display: none; /* hidden */
    }
}

@media (max-width: 1023px) {
    .msg-lg {
        display: none; /* hidden */
    }
}

.email-link {
    color: white; /* ← missing in previous conversion */
    text-decoration: none;
}