html {
    overflow: visible !important;
}
.la-cart-arrow-down:before {
    color: #fff;
}

.cashback {
  text-align: center;
  border: 1px dashed #078751;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #e0fcff;
  text-transform: uppercase;
  color: #1a5056;
}
.cashback i {
  font-size: 27px;
}
.cashback b {
  font-size: 19px;
  color: #08474e;
}
.order-details-top {
  padding: 20px 90px;
}
.account-sidebar li.active a::after {
  content: "➜" !important;
  background: #fff !important;
  font-size: 20px;
  top: 8px !important;
}
.contact-form-inner.rd-party {
  width: 90% !important;
  margin-top: 220px;
}
.contact-form-inner.rd-party label {
  width: 100%;
  max-width: inherit !important;
}
.pro-h.sub-cost {
  width: auto;
  padding: 10px 0px;
}
.main-container {
    overflow: visible;
}
.mobile-menu {
        display: none;
    }
.calypso-menu {
    position: fixed;
    top: -1px;
    width: 100%;
    padding: 0;
    transition: top 0.5s ease;
}
.calypso-menu__background {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    transition: background 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.calypso-menu--fixed {
    background: #fff;
}
@media (min-width: 768px) {
    .calypso-menu--fixed {
        background: rgba(255, 255, 255, 0.8);
    }
	div#oex_auth_modal .uk-modal-dialog.oex-auth-modal-dialog.oex-auth-modal-dialog--wide {
	    margin-top: 10em;
	}
	div#oex_auth_modal .uk-modal-dialog.oex-auth-modal-dialog {
    	margin-top: 10em;
	}
}
@media (min-width: 992px) {
    .calypso-menu--fixed .calypso-menu__logo {
        padding-top: 0px;
		padding-bottom: 12px;
    }
}
@media (min-width: 992px) {
    .calypso-menu--fixed .calypso-menu__item a.calypso-menu__link {
        padding-top: 6px;
        padding-bottom: 16px;
    }
}
.calypso-menu--fixed .calypso-menu__button {
    transition: margin 0.5s ease;
}
@media (min-width: 992px) {
    .calypso-menu--fixed .calypso-menu__button {
        margin-top: 0;
    }
}
@media (min-width: 992px) {
    .calypso-menu--fixed .calypso-menu__presaleschat {
        padding-top: 4px;
    }
}
@media (min-width: 992px) {
    .calypso-menu--fixed .calypso-menu__search {
        margin-top: 4px;
    }
}
@media (min-width: 992px) {
    .calypso-menu--fixed .calypso-menu__group {
        padding-top: 10px;
    }
}
.calypso-menu--fixed .calypso-menu__item--cta {
    padding-top: 4px;
}
@media (min-width: 1200px) {
    .calypso-menu--fixed .calypso-menu__item--cta {
        padding-top: 0;
    }
}
@media (min-width: 992px) {
    .calypso-menu--hidden {
        top: -57px;
    }
}
@media (min-width: 992px) {
    .calypso-menu--hidden .calypso-menu__dropdown {
        display: none;
    }
}
.calypso-menu--mobile-open {
    position: fixed;
}
.calypso-menu--mobile-open .calypso-menu__group--1 .calypso-menu__item {
    z-index: -1;
}
@media (max-width: 500px) {
	
.la-cart-arrow-down:before {
    color: #080808 !important;
}
	
	}

@media (max-width: 1199.98px) {
    .calypso-menu--mobile-open .calypso-menu__background {
        visibility: visible;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
    }
    .calypso-menu--mobile-open .calypso-menu__dropdown {
        display: none;
    }
}
.calypso-menu__inner {
    display: flex;
    position: relative;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;
    perspective: 2000px;
}
@media (max-width: 1199.98px) {
    .calypso-menu__inner {
        max-width: 100%;
    }
}

.calypso-menu__group {
    display: flex;
    flex-direction: row;
    padding-top: 10px;
    transition: padding-top 0.5s ease;
}
@media (min-width: 1200px) {
    .calypso-menu__group {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}
.calypso-menu__group--1 .calypso-menu__item a.calypso-menu__link {
    display: none;
}
@media (min-width: 768px) {

    .calypso-menu__group--1 .calypso-menu__item a.calypso-menu__link {
        display: inline-block;
    }
}
.calypso-menu__group--2 {
    display: none;
}
@media (min-width: 1200px) {
    .calypso-menu__group--2 {
        display: flex;
    }
}
@media (min-width: 1200px) {
    .calypso-menu__group--mobile {
        display: none;
    }
}
.calypso-menu__group--mobile .calypso-menu__item--cta {
    display: none;
}
@media (min-width: 576px) {
    .calypso-menu__group--mobile .calypso-menu__item--cta {
        display: block;
    }
}
.calypso-menu__item {
    display: inline-block;
}
.calypso-menu__item a.calypso-menu__link {
    display: inline-block;
    padding: 6px 8px 16px;
    color: #0a0c0f;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    transition: padding 0.5s ease;
}
.calypso-menu__item a.calypso-menu__link:active,
.calypso-menu__item a.calypso-menu__link:hover {
    color: #666;
}
.calypso-menu__item a.calypso-menu__link:focus {
    outline: 0;
}
.calypso-menu__item a.calypso-menu__link:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}
@media (min-width: 1200px) {
    .calypso-menu__item a.calypso-menu__link {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
.calypso-menu__item--cta {
    padding-left: 16px;
}
.calypso-menu__item--mobile {
    padding-bottom: 16px;
}
.calypso-menu__item--active a.calypso-menu__link {
    color: #666;
}
.calypso-menu__item--bold a.calypso-menu__link {
    font-weight: 600;
}
.calypso-menu__item--dropdown a.calypso-menu__link::after {
    content: "›";
    display: none;
    padding-left: 3px;
}
.calypso-menu__logo {
    padding: 6px 48px 0 0;
    transition: padding 0.5s ease;
}
@media (min-width: 1200px) {
    .calypso-menu__logo {
        padding-top: 5px;
    }
}
.calypso-menu__logo svg {
    width: 98px;
    height: 30px;
}
@media (min-width: 1200px) {
    .calypso-menu__logo svg {
        width: 106px;
        height: 32px;
    }
}
.calypso-menu__button {
    padding: 0;
}
@media (min-width: 1200px) {
    .calypso-menu__button {
        padding-top: 0px;
    }
}
.calypso-menu__search {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 20px 16px 0;
    transition: margin 0.5s ease;
}
.calypso-menu__search .calypso-search {
    right: auto;
    width: 24px;
    height: 24px;
    margin-left: 0;
}
.calypso-menu__search .calypso-search__box {
    left: 0;
}
.calypso-menu__search .calypso-search__search-button {
    top: -2px;
    width: 24px;
    height: 24px;
}
.calypso-menu__search .calypso-search__icon-search {
    width: 24px;
    height: 24px;
    background: #000;
    -webkit-mask: url(/svg/search.svg) no-repeat center center;
    mask: url(/svg/search.svg) no-repeat center center;
}
.calypso-menu__search .calypso-search__icon-search:active,
.calypso-menu__search .calypso-search__icon-search:hover {
    background: #666;
}
.calypso-menu__search .calypso-search__search-field.form-control__input {
    visibility: hidden;
    top: -8px;
    right: -12px;
    padding-right: 40px;
    border: 2px solid #000;
    transition: width 0.2s ease-in-out, padding 0.2s ease-in-out, visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.calypso-menu__search .calypso-search__search-field.form-control__input--developers {
    right: 345px;
}
.calypso-search.calypso-search--opened .calypso-search__search-field {
    visibility: visible;
    width: 380px;
    border: 2px solid #000;
}
.calypso-search.calypso-search--opened .calypso-search__search-field:active,
.calypso-search.calypso-search--opened .calypso-search__search-field:focus {
    box-shadow: none;
}
.calypso-menu__search--mobile .calypso-search__search-button {
    top: -3px;
    right: auto;
    left: 2px;
    width: 16px;
    height: 25px;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input {
    margin-left: -8px;
    padding: 5px 5px 5px 40px;
    border: 0 none;
    background: 0 0;
    box-shadow: none;
    color: #0a0c0f;
    z-index: 10;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input::-webkit-input-placeholder {
    color: #0a0c0f;
    font-family: "HCo Gotham", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input::-moz-placeholder {
    color: #0a0c0f;
    font-family: "HCo Gotham", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:-ms-input-placeholder {
    color: #0a0c0f;
    font-family: "HCo Gotham", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input::placeholder {
    color: #0a0c0f;
    font-family: "HCo Gotham", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input + label {
    position: absolute;
    z-index: -1;
    top: -3px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 0 32px;
    font-size: 16px;
    font-weight: 500;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:hover {
    cursor: pointer;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus {
    border: 1px solid #0a0c0f;
    cursor: text;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active::-webkit-input-placeholder,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus::-webkit-input-placeholder {
    font-size: 0;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active::-moz-placeholder,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus::-moz-placeholder {
    font-size: 0;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active:-ms-input-placeholder,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus:-ms-input-placeholder {
    font-size: 0;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active::placeholder,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus::placeholder {
    font-size: 0;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:hover + label {
    color: #666;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:hover + label + .calypso-search__search-button > .calypso-search__icon-search {
    background-color: #666;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active + label,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus + label {
    display: none;
    color: #666;
}
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:active + label + .calypso-search__search-button > .calypso-search__icon-search,
.calypso-menu__search--mobile .calypso-search__search-field.form-control__input:focus + label + .calypso-search__search-button > .calypso-search__icon-search {
    background-color: #000;
}
.calypso-menu__search--mobile .calypso-search__icon-search {
    width: 16px;
    height: 16px;
    background: #000;
    -webkit-mask: url(/svg/search.svg) no-repeat center center;
    mask: url(/svg/search.svg) no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.calypso-menu__search--mobile .calypso-search__icon-search:active,
.calypso-menu__search--mobile .calypso-search__icon-search:hover {
    background: #666;
}
.calypso-menu__presaleschat {
    padding: 20px 16px 0;
    transition: padding 0.5s ease;
}
.calypso-menu__presaleschat:active svg,
.calypso-menu__presaleschat:active svg *,
.calypso-menu__presaleschat:hover svg,
.calypso-menu__presaleschat:hover svg * {
    stroke: #666;
}
.calypso-menu__presaleschat-icon {
    width: 20px;
    height: 20px;
}
.calypso-menu__presaleschat--mobile {
    position: relative;
    padding: 0;
}
.calypso-menu__presaleschat--mobile .calypso-menu__presaleschat-icon {
    display: block;
    width: 100%;
    height: auto;
    color: #0a0c0f;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.calypso-menu__presaleschat--mobile .calypso-menu__presaleschat-icon:active,
.calypso-menu__presaleschat--mobile .calypso-menu__presaleschat-icon:hover {
    color: #666;
}
.calypso-menu__presaleschat--mobile .calypso-menu__presaleschat-icon svg {
    position: relative;
    top: 2px;
    width: 16px;
    height: 16px;
    margin-right: 16px;
}
.calypso-menu__burger {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 3px 0 0 12px;
    cursor: pointer;
}
.calypso-menu__dropdown {
    visibility: visible;
    position: absolute;
    top: 72px;
    left: 0;
    box-sizing: border-box;
    opacity: 1;
    max-width: 320px;
    padding: 24px 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 2px 2px 32px 0 rgba(0, 0, 0, 0.08);
    transform: rotateX(0);
    transform-origin: top center;
    transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.25s ease-in-out;
}
@media (min-width: 768px) {
    .calypso-menu__dropdown {
        max-width: none;
    }
}
.calypso-menu__dropdown::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}
.calypso-menu__dropdown--hidden {
    visibility: hidden;
    opacity: 0;
    transform: rotateX(-10deg);
}
.calypso-menu__dropdown-container {
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 40px;
}
.calypso-menu__dropdown-overflow {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 288px;
    transition: height 0.25s ease-in-out;
    will-change: height;
}
.calypso-menu__dropdown-item {
    position: absolute;
    box-sizing: border-box;
    opacity: 0;
    width: 288px;
    padding: 0;
    transition: opacity 0.18s, transform 0.6s;
    will-change: opacity, transform;
}
.calypso-menu__dropdown-item--cols-two,
.calypso-menu__dropdown-overflow--cols-two,
.calypso-menu__dropdown-overflow--cols-two .calypso-menu__dropdown-overflow {
    width: 424px;
}
.calypso-menu__dropdown-item--active {
    z-index: 10;
    opacity: 1;
}
.calypso-page .calypso-menu__dropdown-item--new-tab {
    position: relative;
}
.calypso-page .calypso-menu__dropdown-item--new-tab::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    right: 0;
    top: 6px;
    background: #000;
    transition: transform 0.15s ease-in-out;
    -webkit-mask: url(/svg/new-window.svg) no-repeat 100% 100%;
    mask: url(/svg/new-window.svg) no-repeat 100% 100%;
    -webkit-mask-size: 14px;
    mask-size: 14px;
}
.calypso-page .calypso-menu__dropdown-item--new-tab:hover::after {
    transform: none;
}
.calypso-menu__subitem {
    display: block;
    padding-top: 16px;
    font-size: 24px;
    font-weight: 500;
}
.calypso-menu__dropdown-headline {
    margin: 0 24px;
}
.calypso-menu__dropdown-headline + .calypso-menu__dropdown-menu {
    margin-top: 16px;
    padding-top: 20px;
}
.calypso-menu__dropdown-headline + .calypso-menu__dropdown-menu::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 48px);
    height: 1px;
    margin: 0 24px;
    background: #cacaca;
}
.calypso-menu__dropdown-description {
    padding-top: 16px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.calypso-menu__dropdown-menu {
    position: relative;
    padding: 0;
}
.calypso-menu__dropdown-menu::before {
    content: "";
    display: none;
}
.calypso-menu__dropdown-menu--columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.calypso-menu__dropdown-menu--columns .calypso-menu__dropdown-menu-item {
    width: 50%;
    white-space: nowrap;
}
.calypso-menu__dropdown-menu-item a {
    display: block;
    padding: 8px 24px;
    background: 0 0;
    color: #0a0c0f;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    transition: background-color 0.2s linear, color 0.2s linear;
}
.calypso-menu__dropdown-menu-item a:hover {
    background: #f7f7f7;
    color: #666;
}
.calypso-menu__dropdown-menu-item--new-tab a {
    position: relative;
}
.calypso-menu__dropdown-menu-item--new-tab a::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 14px;
    height: 14px;
    right: 18px;
    top: 12px;
    background: #9c9c9c;
    transition: transform 0.15s ease-in-out;
    -webkit-mask: url(/svg/new-window.svg) no-repeat 100% 100%;
    mask: url(/svg/new-window.svg) no-repeat 100% 100%;
    -webkit-mask-size: 14px;
    mask-size: 14px;
    opacity: 0;
    transition: opacity, padding 0.2s ease-in-out;
}
.calypso-menu__dropdown-menu-item--new-tab a:hover::after {
    opacity: 1;
}
.calypso-menu__burger-box {
    position: absolute;
    z-index: 1000;
    top: 2px;
    right: 0;
    width: 24px;
    height: 24px;
}
@media (min-width: 1200px) {
    .calypso-menu__burger-box {
        top: 24px;
    }
}
.calypso-menu__burger-inner,
.calypso-menu__burger-inner::after,
.calypso-menu__burger-inner::before {
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 4px;
    background-color: #0a0c0f;
    transition: transform 0.2s ease;
}
.calypso-menu__burger-inner::after,
.calypso-menu__burger-inner::before {
    content: "";
    display: block;
}
.calypso-menu__burger-inner {
    top: 12px;
    right: 0;
}
.calypso-menu__burger-inner::after {
    top: -8px;
}
.calypso-menu__burger-inner::before {
    bottom: -8px;
}
.calypso-menu__burger-box--active .calypso-menu__burger-inner {
    transform: translate3d(0, 0, 0) rotate(45deg);
}
.calypso-menu__burger-box--active .calypso-menu__burger-inner::before {
    opacity: 0;
}
.calypso-menu__burger-box--active .calypso-menu__burger-inner::after {
    transform: translate3d(0, 8px, 0) rotate(-90deg);
}
.calypso-menu__mobile {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    width: 100%;
    max-width: 376px;
    min-height: 100vh;
    padding: 80px 32px 32px;
    background: #fff;
    transition: visible 0.2s ease-in-out, opacity 0.2s ease-in-out, right 0.2s ease-in-out;
}
@media (min-width: 1200px) {
    .calypso-menu__mobile {
        display: none;
    }
}
.calypso-menu__mobile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    width: 100%;
    height: 100%;
}
.calypso-menu__mobile--active {
    visibility: visible;
    position: fixed;
    right: 0;
    overflow-y: scroll;
    opacity: 1;
    height: 100%;
}
.calypso-menu__mobile--active .calypso-menu__mobile-container {
    right: 0;
    margin-bottom: 40px;
}
.calypso-menu__mobile--active::before {
    position: fixed;
    z-index: 1000;
    right: 0;
    left: auto;
    opacity: 1;
    width: 376px;
    height: 54px;
    background: #fff;
}
.calypso-menu__mobile-container {
    position: relative;
    right: -376px;
    transition: right 0.2s ease-in-out;
}
ul.calypso-menu__mobile-items {
    position: relative;
    margin: 0 0 64px 0;
    padding: 0;
    list-style: none;
}
ul.calypso-menu__mobile-items > li {
    position: relative;
    color: #0a0c0f;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
ul.calypso-menu__mobile-items > li span {
    display: block;
    position: relative;
    padding: 8px 0;
    font-weight: 500;
}
ul.calypso-menu__mobile-items > li span::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: -32px;
    width: calc(100% + 64px);
    height: 100%;
}
ul.calypso-menu__mobile-items > li span::after {
    content: "›";
    position: absolute;
    top: 8px;
    right: 0;
    width: 10px;
    height: 24px;
    background: 0 0;
    font-size: 24px;
    transition: transform 0.3s ease;
}
ul.calypso-menu__mobile-items > li:active span,
ul.calypso-menu__mobile-items > li:hover span {
    color: #666;
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-menu--active {
    color: #666;
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-menu--active span::before {
    background: #f7f7f7;
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-menu--active span::after {
    transform: rotate(90deg);
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-items--without-dropdown span::after {
    display: none;
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-items--without-dropdown a {
    color: #0a0c0f;
    font-weight: 500;
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-items--without-dropdown a:active,
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-items--without-dropdown a:hover {
    color: #666;
}
ul.calypso-menu__mobile-items > li.calypso-menu__mobile-items--without-dropdown.calypso-menu__mobile-menu--active span {
    border: none;
    background: 0 0;
}
.calypso-menu__mobile-item--new-tab {
    position: relative;
}
.calypso-menu__mobile-item--new-tab::after {
    content: "";
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    top: 1px;
    background: #9c9c9c;
    transition: transform 0.15s ease-in-out;
    -webkit-mask: url(/svg/new-window.svg) no-repeat 100% 100%;
    mask: url(/svg/new-window.svg) no-repeat 100% 100%;
    -webkit-mask-size: 14px;
    mask-size: 14px;
}
ul.calypso-menu__mobile-dropdown-menu {
    display: none;
    padding-left: 32px;
    list-style: none;
}
ul.calypso-menu__mobile-dropdown-menu > li {
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}
ul.calypso-menu__mobile-dropdown-menu > li a {
    display: block;
    padding: 8px 0;
    color: #000;
    font-weight: 400;
}
ul.calypso-menu__mobile-dropdown-menu > li a:active,
ul.calypso-menu__mobile-dropdown-menu > li a:hover {
    color: #666;
}
.calypso-menu__mobile-login {
    margin-top: 16px;
}
.calypso-menu__mobile-login a {
    color: #0a0c0f;
}
.calypso-menu__mobile-login a:active,
.calypso-menu__mobile-login a:hover {
    color: #666;
}
.page--partners .calypso-menu__logo {
    padding-right: 148px;
}
.page--partners .calypso-menu__logo a {
    position: relative;
}
.page--partners .calypso-menu__logo a:after {
    border-left: 1px solid;
    display: block;
    content: "Partners";
    margin-left: 10px;
    padding: 4px 10px;
    border-left: 1px solid #b9c2c7;
    color: #242424;
    font-family: "HCo Gotham", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    position: absolute;
    top: -14px;
    right: -84px;
}
@media (min-width: 992px) {
    .page--partners .calypso-menu__logo a:after {
        font-size: 16px;
        right: -102px;
        top: -13px;
    }
}
.page--partners .calypso-menu__logo a svg {
    width: 90px;
    height: 27px;
}
@media (min-width: 1200px) {
    .page--partners .calypso-menu--fixed .calypso-menu__logo {
        padding-top: 5px;
    }
}
.page--partners .calypso-menu--fixed.calypso-menu--stick .calypso-menu__group {
    padding-top: 10px;
}
.calypso-menu--stick {
    background: #fff;
    transition: box-shadow 0.5s ease;
}
.calypso-menu--stick .calypso-menu__dropdown {
    top: 64px;
}
.calypso-menu--stick .calypso-menu__item--dropdown {
    position: relative;
}
.calypso-menu--stick.calypso-menu--fixed {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calypso-menu--stick.calypso-menu--fixed .calypso-menu__group {
    padding-top: 16px;
    padding-bottom: 0;
}
@media (min-width: 1200px) {
    .calypso-menu--stick.calypso-menu--fixed .calypso-menu__button {
        margin-top: -16px;
    }
}
.calypso-menu--stick.calypso-menu--fixed .calypso-menu__button .cta-signup {
    transform: none;
    transition: background 0.1s linear;
}
.calypso-menu--stick.calypso-menu--fixed .calypso-menu__item a.calypso-menu__link {
    padding-bottom: 20px;
}
.calypso-menu--stick.calypso-menu--hidden {
    top: -1px;
}

.calypso-menu--stick.calypso-menu--hidden .calypso-menu__group--mobile > .calypso-menu__item,
.calypso-menu--stick.calypso-menu--hidden .calypso-menu__item--cta,
.calypso-menu--stick.calypso-menu--hidden .calypso-menu__item--logo {
    opacity: 1;
}
.calypso-menu--stick .calypso-menu__item {
    transition: padding 0.5s ease, opacity 0.5s ease;
}

.list-inline.step-tabs {
  margin-top: 120px;
}
.shopping-cart-inner {
  width: 70%;
}
.cart-items a {
  width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.order-summary {
  margin-bottom: 25px;
}
.list-inline.cart-item {
  display: none;
}
.billing-details .form-radio {
  display: inline;
  margin: 10px;
}
.order-summary-bottom a {
  background: #0068e1;
  color: #fff;
}
.navigation-wrap .icon-wrap {
  display: inline;
}
.ui.link.raised.card {
  width: 150px;
  display: inline-block !important;
  margin: 10px;
  box-shadow: 1px 1px 1px 1px #ddd;
}
.e5fy {
  display: none !important;
}
.footer {
  padding-left: 60px;
}
@media (max-width: 768px) {
	.mobile-menu {
        display: inherit !important;
    }
	.hpc-animate {
  opacity: 1 !important;
  margin: 0px 70px !important;
}
.calypso-page.hpc-page .hpc-text {
  padding-top: 0 !important;
}
.calypso-page .calypso-block {
  padding: 20px 5px !important;
}
.calypso-page .calypso-block__text {
  margin-top: 16px !important;
}
.btn-block.calypso-block__btn-block.hpc-animate.hpc-animate--from-left.hpc-animate--delay-3 {
  margin-top: 20px !important;
}
.calypso-block.calypso-block--EW19.calypso-block--b0 {
  margin-top: -40px;
}
#hpc_map {
  display: none;
}
.ui.eight.cards a {
  height: 60px;
  width: 60px !important;
  margin: 5px !important;
}
.ui.link.raised.card img {
  width: 60px !important;
  height: 60px !important;
  padding: 5px !important;
}
.h1 {
  font-size: 35px !important;
}
.footer {
  padding: 20px !important;
}
.footer-top .col-lg-4.col-md-7 {
  margin-top: 20px;
}
.calypso-menu__link {
  display: inline-flex !important;
  margin: 12px -20px;
}
	
}
.h6.mt-3.mb-1 {
  font-size: 13px !important;
}
.h6.text-muted.mb-0.mb-lg-0 {
  font-size: 12px;
}
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	margin-bottom: 30px;
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: 3.46rem;
        position: absolute;
        left: 7.5rem;
        top: .3125rem
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #3b82f6;
        width: 3.8125rem;
        position: absolute;
        right: 7.5rem;
        top: .3125rem
    }
}

.timeline-steps .timeline-content {
    width: 8rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3b82f6
}

.timeline-steps .timeline-content .inner-circle::before {
  content: "";
  background-color: #a4c6ff;
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  min-width: 3.5rem;
  border-radius: 6.25rem;
  opacity: .5;
  border: 2px dotted #22222269;
}
.timeline-steps .status_disabled .inner-circle {
   background-color: gray;
}

.timeline-steps .status_current .inner-circle {
   background-color: gold;
}

.timeline-steps .status_disabled .inner-circle:before  {
   background-color: #d8d8d8;
}

.timeline-steps .status_current .inner-circle::before {
  background-color: #ffe28b;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.timeline-steps .timeline-content .inner-circle {
  background-color: #fff !important;
}
.osicon {
  position: absolute;
  font-size: 35px;
  margin: -8px -25px;
  color: #222;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

nav.ec-steps-wrap {
    margin-top: 50px;
}
p.ec-paydetails__intro {
    text-align: center;
    font-weight: 500;
    font-size: 16px !important;
}
.ec-paydetails__qr {
    width: 250px !important;
    height: 250px !important;
}
.sidebar-cart-wrap.active {
    z-index: 9999999;
}
.ec-modal__panel {
    max-height: calc(80vh - 2 * var(--ec-s5)) !important;
    margin-top: 50px;
}
div#oex_order_payment_method_modal .uk-modal-dialog {
    margin: 85px auto !important;
}


/* ==========================================================================
   TOPBAR
   --------------------------------------------------------------------------
   Markup: Themes/Storefront/views/public/layout/navigation.blade.php
   (<section class="navigation-wrap sf-topbar"> … .calypso-menu__background …)

   Two sections, standard ecommerce split:

     .calypso-menu__group--1   brand + .sf-topbar__nav
                               (Home, Contact, How to Buy, Calculator)
     .calypso-menu__group--2   .sf-topbar__account
                               (language, account, my orders, log out, cart)

   It lives HERE, and not in a <style> block beside the markup where it used
   to, because the storefront mounts Vue on <div id="app"> and a Vue 2 root
   that compiles the existing DOM as its template drops <style> and <script>
   elements from it. Anything styled inline inside #app therefore lost its
   styling the moment app.js ran - i.e. on every route except home, the only
   one that does not load app.js. style.css is linked from <head>, so it
   applies everywhere.

   Every rule below is scoped to .sf-topbar. That is not decoration: style.css
   is linked BEFORE app.css, so a bare single-class selector here loses to the
   same selector there (.header-column-right on the cart, for one). The extra
   .sf-topbar also outranks the vendored .calypso-menu__* rules earlier in this
   file, including the ones nested in min-width media queries.

   The bar's own background, position and height are deliberately untouched -
   .calypso-menu is position: fixed and only paints a background once the
   vendored script adds .calypso-menu--fixed, which is what lets it sit
   transparently over the home hero.
   ========================================================================== */

.sf-topbar {
    --sf-nav-ink: #14192b;
    --sf-nav-ink-muted: #5c6579;
    --sf-nav-accent: #0068e1;
    --sf-nav-accent-strong: #0057bf;
    --sf-nav-accent-soft: rgba(0, 104, 225, 0.09);
    --sf-nav-danger: #d64545;
    --sf-nav-danger-soft: rgba(214, 69, 69, 0.09);
    --sf-nav-line: rgba(20, 25, 43, 0.1);
}

/* A soft lift once the bar becomes opaque, so it reads as a layer above the
   page instead of a strip of colour sitting on it. */
.sf-topbar .calypso-menu--fixed {
    box-shadow: 0 1px 2px rgba(16, 24, 42, 0.06), 0 8px 24px rgba(16, 24, 42, 0.05);
}

/* --- Rows ---------------------------------------------------------------- */

.sf-topbar .calypso-menu__inner {
    align-items: center;
    gap: 16px;
}

.sf-topbar .calypso-menu__group {
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sf-topbar .calypso-menu__group--1 {
    gap: 4px;
    min-width: 0;
}

/* The account bar. The vendored rule hides this group below 1200px; it is
   brought back from 768px up (see the media queries at the end) because the
   cart lives in it and must stay reachable at every width the bar is shown
   at. */
.sf-topbar .calypso-menu__group--2 {
    gap: 4px;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.sf-topbar .calypso-menu__item {
    display: inline-flex;
    align-items: center;
}

/* --- Brand --------------------------------------------------------------- */

.sf-topbar .calypso-menu__logo {
    padding: 0;
    padding-inline-end: 20px;
    display: flex;
    align-items: center;
}

.sf-topbar .calypso-menu__logo img {
    display: block;
    transition: opacity 0.18s ease;
}

.sf-topbar .calypso-menu__logo a:hover img {
    opacity: 0.82;
}

/* --- Site nav (left) ----------------------------------------------------- */

/* The <nav> wrapper the four site links sit in, inside group--1 beside the
   brand. It only has to lay them out on one row; every link inside it is
   still a .calypso-menu__item and picks up the shared link chrome below. */
.sf-topbar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* --- Account bar (right) ------------------------------------------------- */

.sf-topbar__account {
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
    padding-inline-start: 18px;
}

/* A hairline instead of a gap: it separates the account controls from the
   site nav without spending horizontal room the nav needs. */
.sf-topbar__account::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 1px;
    height: 22px;
    margin-top: -11px;
    background: var(--sf-nav-line);
}

/* --- Links, both sections ------------------------------------------------ */

.sf-topbar .calypso-menu__item a.calypso-menu__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--sf-nav-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
}

/* The hover/active marker. It replaces the vendored "›" pseudo element on
   .calypso-menu__item--dropdown, which was display: none anyway. */
.sf-topbar .calypso-menu__item a.calypso-menu__link::after {
    content: '';
    display: block;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    padding: 0;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.18s ease;
}

.sf-topbar .calypso-menu__item a.calypso-menu__link:hover,
.sf-topbar .calypso-menu__item a.calypso-menu__link:focus-visible {
    color: var(--sf-nav-accent);
    background: var(--sf-nav-accent-soft);
}

.sf-topbar .calypso-menu__item a.calypso-menu__link:hover::after,
.sf-topbar .calypso-menu__item a.calypso-menu__link:focus-visible::after {
    transform: scaleX(1);
}

.sf-topbar .calypso-menu__item a.calypso-menu__link:focus {
    outline: 0;
}

.sf-topbar .calypso-menu__item a.calypso-menu__link:focus-visible {
    outline: 2px solid var(--sf-nav-accent);
    outline-offset: 2px;
}

/* Current page. Persistent, and heavier than hover so the two never read as
   the same thing: colour + weight + a marker that is already drawn. */
.sf-topbar .calypso-menu__item a.calypso-menu__link.is-active {
    color: var(--sf-nav-accent);
    font-weight: 600;
}

.sf-topbar .calypso-menu__item a.calypso-menu__link.is-active::after {
    background: var(--sf-nav-accent);
    transform: scaleX(1);
}

.sf-topbar .calypso-menu__link .icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

/* Log out is the one destructive action on the bar: same shape as its
   neighbours, its own colour, and no more prominence than that. */
.sf-topbar .calypso-menu__item a.calypso-menu__link.sf-topbar__logout {
    color: var(--sf-nav-danger);
}

.sf-topbar .calypso-menu__item a.calypso-menu__link.sf-topbar__logout:hover,
.sf-topbar .calypso-menu__item a.calypso-menu__link.sf-topbar__logout:focus-visible {
    color: var(--sf-nav-danger);
    background: var(--sf-nav-danger-soft);
}

/* --- Language / currency ------------------------------------------------- */

.sf-topbar .calypso-menu__item.sf-topbar__locale a.calypso-menu__link {
    padding-inline-end: 8px;
}

.sf-topbar .calypso-menu__item.sf-topbar__locale a.calypso-menu__link::after {
    display: none;
}

.sf-topbar .sf-topbar__locale .custom-select-option {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.sf-topbar .sf-topbar__locale .nice-select {
    border: 0;
    background: transparent;
    height: auto;
    line-height: 20px;
    padding-inline-start: 0;
    font-size: 14px;
    font-weight: 500;
}

/* --- Cart ---------------------------------------------------------------- */

/* The link is only a hit area here; the pill inside it carries the styling,
   so the shared link chrome is switched off. */
.sf-topbar .calypso-menu__item[data-item="0"] a.calypso-menu__link {
    padding: 6px;
    background: transparent;
}

.sf-topbar .calypso-menu__item[data-item="0"] a.calypso-menu__link::after {
    display: none;
}

.sf-topbar .sf-topbar__cart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 15px;
    border-radius: 999px;
    background: #000;
    color: #fff;
	height: 45px;
    box-shadow: 0 2px 8px rgba(0, 104, 225, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.sf-topbar .calypso-menu__link:hover .sf-topbar__cart,
.sf-topbar .calypso-menu__link:focus-visible .sf-topbar__cart {
    background: var(--sf-nav-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 104, 225, 0.3);
}

.sf-topbar .sf-topbar__cart .icon-wrap {
    position: relative;
    font-size: 20px;
    color: #fff;
}

.sf-topbar .sf-topbar__cart .count {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #fff;
    color: var(--sf-nav-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.sf-topbar .sf-topbar__cart-total {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* --- Sign up (guests) ---------------------------------------------------- */

.sf-topbar .calypso-menu__item--cta {
    padding-left: 8px;
    padding-inline-start: 8px;
}

.sf-topbar .calypso-menu__item--cta .btn.cta-signup {
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 20px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sf-topbar .calypso-menu__item--cta .btn.cta-signup:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 104, 225, 0.28);
}

/* --- Responsive ---------------------------------------------------------- */

/* The account bar - the cart included - lives in group--2 now, so it is no
   longer hidden below 1200px by the vendored .calypso-menu__group--2 rule.
   The floor is academic in practice: app.css hides .navigation-wrap outright
   below 992px, where layout/header.blade.php's mobile header is the
   navigation. */
@media (min-width: 768px) {
    .sf-topbar .calypso-menu__group--2 {
        display: flex;
    }
}

/* Below 1366px the account controls drop to icons only.

   Nine items now carry a label AND an icon, and laid out in full the row
   wants about 1236px: 170 for the brand, 436 for the site nav and 614 for the
   account bar. Anything narrower and the two groups run into each other -
   neither can shrink, because every label is `white-space: nowrap` - and the
   site nav is what gets overrun, since it is the group that has to give way
   in a `space-between` row.

   The site nav is the group that keeps its words: "Home" and "How to Buy" are
   only navigable as words, whereas a person icon and a cart icon are the two
   most legible symbols on the web and each still carries an aria-label and a
   tooltip. So the icons stay everywhere - the point of adding them - and it
   is the account labels that stand down on a laptop screen. */
@media (max-width: 1365.98px) {
    .sf-topbar .sf-topbar__account .calypso-menu__item--login a.calypso-menu__link span {
        display: none;
    }

    .sf-topbar .sf-topbar__account .calypso-menu__item--login a.calypso-menu__link {
        padding: 10px;
    }
}

/* 992px - 1199px, the narrowest band this bar is shown at. It is also the
   band where .calypso-menu__group--2 - which now carries the cart - used to
   be hidden outright, which is how the cart ended up unreachable from the
   topbar at these widths. */
@media (max-width: 1199.98px) {
    .sf-topbar .calypso-menu__inner {
        gap: 10px;
    }

    .sf-topbar .calypso-menu__logo {
        padding-inline-end: 12px;
    }

    .sf-topbar__account {
        padding-inline-start: 12px;
    }

    .sf-topbar .calypso-menu__item a.calypso-menu__link {
        padding: 10px 9px;
    }

    .sf-topbar .calypso-menu__item a.calypso-menu__link::after {
        left: 9px;
        right: 9px;
    }

    /* The cart keeps its icon and its count badge but drops the formatted
       total here, which is the ~80px that lets the site nav keep all four
       labels AND its icons at 992px. Without it the two groups collide: the
       row needs about 580px for the nav and only ~550px is left once the
       account controls have taken their share, and neither group can shrink
       because every label is nowrap. The total is still one glance away in
       the cart sidebar, and the count - the number that actually changes -
       stays on the badge. */
    .sf-topbar .sf-topbar__cart-total {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .sf-topbar .sf-topbar__cart {
        padding: 8px 12px;
    }

    .sf-topbar .calypso-menu__item--cta .btn.cta-signup {
        padding: 8px 14px;
    }
}

/* Belt and braces for the mobile header's band: the topbar is already
   display: none there (app.css), but if that ever changes the account
   controls must not duplicate the ones in the mobile header. */
@media (max-width: 767.98px) {
    .sf-topbar .sf-topbar__account {
        display: none;
    }
}

.breadcrumb {
    margin-top: 40px !important;
    padding: 10px !important;
    font-weight: 500;
}
.header-column-right .icon-wrap > i {
    color: #fff;
}

/* ==========================================================================
   COUPON ANNOUNCEMENT BAR
   --------------------------------------------------------------------------
   Markup: Themes/Storefront/views/public/layout/coupon_carousel.blade.php
   (<section class="sf-coupon-bar"> - the promotional row above the topbar)

   It lives HERE, and not in a <style> block beside the markup where it used
   to, for the same reason the TOPBAR block above does: the bar is rendered
   inside <div class="wrapper" id="app">, the storefront mounts Vue on that
   element, and a Vue 2 root that compiles the existing DOM as its template
   DROPS <style> and <script> elements from it. The bar therefore arrived
   completely unstyled - and with its carousel and countdown dead - on every
   route except home, the only one that does not load app.js.

   The rules themselves are unchanged. They still reuse the theme's own
   --color-primary custom properties (set on <body> in layout.blade.php)
   rather than introducing a second palette, so the bar follows the store's
   configured colour.
   ========================================================================== */

.sf-coupon-bar {
    position: relative;
    background: linear-gradient(90deg, #000d3a, #2565c7);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
}
button.sf-coupon-bar__code {
    background: #fbd20e;
    color: #0b2764;
}
.sf-coupon-bar__code:hover, .sf-coupon-bar__code:focus-visible {
    background: rgb(5 34 83) !important;
    color: #fbd20e;
}
.sf-coupon-bar__countdown {
    color: #fbd20e;
}
/* --- Clearing the fixed topbar (desktop only) ----------------------------
   The bar is first in the flow of #app, but from 992px up the Main Menu it
   sits above is `position: fixed; top: -1px` with an opaque white background
   (.calypso-menu / .calypso-menu--stick, far earlier in this file). A bar in
   normal flow at y=0 is therefore painted over completely and never seen.

   So above that breakpoint the announcement bar joins the fixed stack rather
   than fighting it:

     - it pins itself to the top of the viewport, above the menu's own
       z-index (an inline 9999999 on .calypso-menu's wrapper);
     - the menu is pushed down by exactly the bar's measured height. That is
       done with `transform`, NOT `top`, because `top` is what the vendored
       calypso script animates between -1px and -57px to hide and re-show the
       menu on scroll - overriding it here would break that;
     - <body> gets the same height as padding, so every existing element
       keeps its current position RELATIVE TO THE MENU. Both the menu and the
       page move down by the same amount, so the ad-hoc top offsets the theme
       already uses to clear the fixed bar (.breadcrumb, .step-tabs, …) stay
       correct and nothing else needed touching.

   --sf-coupon-bar-height is measured and written by the bar's own script, so
   a promotion long enough to wrap to two lines reserves two lines. Both the
   class and the property are removed again when the bar is dismissed or its
   last coupon expires, which restores the untouched layout exactly.

   Below 992px none of this applies: app.css hides .navigation-wrap outright
   there, the mobile header is in normal flow, and so is the bar. */
@media (min-width: 992px) {
    body.has-coupon-bar {
        padding-top: var(--sf-coupon-bar-height, 44px);
    }

    body.has-coupon-bar .sf-coupon-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000000;
    }

    body.has-coupon-bar .calypso-menu {
        transform: translateY(var(--sf-coupon-bar-height, 44px));
    }
}

.sf-coupon-bar__viewport {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    min-height: 44px;
}

.sf-coupon-bar__track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.sf-coupon-bar__slide {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 7px 0;
    text-align: center;
}

.sf-coupon-bar__slide.is-active {
    display: flex;
    animation: sf-coupon-fade 0.45s ease both;
}

@keyframes sf-coupon-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.sf-coupon-bar__discount {
    font-weight: 600;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.sf-coupon-bar__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sf-coupon-bar__code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    color: inherit;
    background: rgba(255, 255, 255, 0.14);
    border: 1px dashed rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 2px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.sf-coupon-bar__code:hover,
.sf-coupon-bar__code:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

.sf-coupon-bar__code b { font-weight: 600; letter-spacing: 0.04em; }

.sf-coupon-bar__countdown {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sf-coupon-bar__countdown[hidden] { display: none; }

.sf-coupon-bar__unit {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 2px 5px;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

.sf-coupon-bar__sep { opacity: 0.7; }

.sf-coupon-bar__nav,
.sf-coupon-bar__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.sf-coupon-bar__nav:hover,
.sf-coupon-bar__close:hover,
.sf-coupon-bar__nav:focus-visible,
.sf-coupon-bar__close:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.sf-coupon-bar__dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex: 0 0 auto;
}

.sf-coupon-bar__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sf-coupon-bar__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* Direction-aware controls. The theme marks RTL on <body>, not with a
   dir attribute, so the arrows are flipped from that class. */
.rtl .sf-coupon-bar__nav i { transform: scaleX(-1); }

@media (max-width: 767px) {
    .sf-coupon-bar { font-size: 12px; }
    .sf-coupon-bar__viewport { gap: 4px; padding: 0 8px; min-height: 40px; }
    .sf-coupon-bar__slide { gap: 4px 8px; }
    .sf-coupon-bar__discount { font-size: 12px; padding: 1px 8px; }
    .sf-coupon-bar__unit { min-width: 26px; padding: 1px 4px; }
    .sf-coupon-bar__nav { display: none; }

    /* The promotional sentence is the first thing to give way on a
       narrow screen: the discount, the code and the countdown are the
       parts a customer can act on. */
    .sf-coupon-bar__text {
        flex: 1 1 100%;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-coupon-bar__slide.is-active { animation: none; }
    .sf-coupon-bar__dot,
    .sf-coupon-bar__nav,
    .sf-coupon-bar__close,
    .sf-coupon-bar__code { transition: none; }
}

/*
 * These UIkit AJAX modals need to sit above everything else on the page
 * (including other modals/overlays that can be open at the same time -
 * calculator, track-order, cart-item-edit, product-search, auth). Moved here
 * from per-page <style id="wp-custom-css"> blocks that used to live inline
 * inside navigation.blade.php and the home slider partials: those tags
 * rendered inside #app, which Vue's client-side template compiler treats
 * <style> as a forbidden/side-effecting element and drops with a console
 * warning (see Themes/Storefront/views/public/layout.blade.php, <div
 * id="app">). This file is linked from <head>, outside #app, so the same
 * rules apply with no compile warning and no behaviour change.
 *
 * #oex_auth_modal was missing from this list. Without an entry here it fell
 * back to UIkit's own base rule, `.uk-modal { z-index: 1010; }`
 * (public/themes/storefront/public/css/uikit.css) - comfortably enough on
 * every page except Home, where style-home.css gives the hero wrapper
 * (.calypso-page.hpc-page.calypso-header, position: sticky) its own
 * z-index: 1000000, and several of its inner layers go even higher
 * (up to 9000080). 1010 loses to all of those, so the open auth modal was
 * genuinely rendered - `getComputedStyle` confirmed `z-index: 1010` and
 * `document.elementFromPoint()` at the dialog's own on-screen center
 * resolved to the hero content underneath it, not the modal - just painted
 * behind the hero on that one route. Every other route never loads
 * style-home.css, so nothing there ever had a z-index anywhere near high
 * enough to beat even 1010, which is why the same modal looked fine
 * everywhere else. Folding #oex_auth_modal into this existing rule (its
 * natural home, next to the four sibling AJAX modals it was clearly meant
 * to ship alongside) fixes every page at once without a new, larger, or
 * more special-cased number.
 */
#oex_calculator_modal,
#oex_trackOrder_modal,
#oex_cart_item_edit_modal,
#oex_product_search_modal,
#oex_auth_modal {
    z-index: 99999999999999;
}