html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
    font-family: "filson-soft", sans-serif;
}

body {
	margin: 0;
}

:root {
    --blue-primary: #12499F;
    --orange-primary: #F46A00;

    --blue-dark: #103570;
    --blue-medium: #2F5FAB;
    --blue-light: #D0DBEC;
    --off-white: #F2F0EB;

    --white: #FFFFFF;
    --black: #000000;
    --grey: #808080;
}



/* utility bar  */

.utility-bar {
    width: 100%;
    position: relative;
    background-color: var(--blue-dark);
    display: flex;
    justify-content: center;
    z-index: 9999;
}

.utility-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), .2s visibility;
}

.utility-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

@media (max-width: 1024px) {
    .utility-bar, .site-header, .site-benefits-bar {
        display: none;
    }

}

.utility-bar .wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: end;
}

.utility-bar .wrapper .nav-list {
    display: flex;
    margin: 0;
    padding: 0;
    color: #fff;
    list-style-type: none;
    gap: 16px;
}

.utility-bar .wrapper .nav-list li {
    display: flex;
    align-items: center;
}

.utility-bar .wrapper .nav-list li.help-centre-item {
    position: relative;
}

.utility-bar .wrapper .nav-list li .separator {
    width: 1px;
    height: 60%;
    background-color: rgba(255, 255, 255, .2);
}

.utility-bar .wrapper .nav-list li a {
    color: #fff;
    width: 100%;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 8px;
    padding: 8px 0px;
}

.utility-bar .wrapper .nav-list li a svg {
    width: 20px;
    height: 20px;
    
}

.utility-bar .wrapper .nav-list li a svg * {
    stroke: var(--white);
}

.utility-bar .wrapper .nav-list li a:hover {
    text-decoration: underline;
}

.utility-bar .wrapper .nav-list li a span {

}

.utility-bar .wrapper .trade-account {
    display: flex;
    background-color: var(--orange-primary);
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
}

.utility-bar .wrapper .trade-account a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
}

.utility-bar .wrapper .trade-account a:hover {
    text-decoration: underline;
}


.utility-bar .wrapper .nav-list li.help-centre-item .help-centre-menu {
    position: absolute;
    top: 100%;
    background-color: var(--white);
    right: 0;
    z-index: 9999;
    opacity: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), .2s visibility;
}

.utility-bar .wrapper .nav-list li.help-centre-item .help-centre-menu.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), .2s visibility;
}

.utility-bar .wrapper .nav-list li.help-centre-item .help-centre-menu .help-menu-item {
    
}

.utility-bar .wrapper .nav-list li.help-centre-item .help-centre-menu .help-menu-item a {
    color: var(--black);
    padding: 12px;
    white-space: nowrap;
}

/* end of utility bar  */


/* main site header  */

.site-header {
    width: 100%;
    position: sticky;
    top: 0;
	z-index: 3;
}

.site-header .top-row {
    width: 100%;
    background-color: var(--blue-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 8px;
}

.site-header .top-row .wrapper {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 20px;
    position: relative;
    align-items: center;
}

.site-header .top-row .wrapper .logo {
    width: 235px;
    height: auto;
    max-width: 100%;
    display: flex;
    align-items: center;
}

.site-header .top-row .wrapper .logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.site-header .top-row .wrapper .search-bar {
    flex-grow: 1;
    height: 44px;
    position: relative;
}

.site-header .top-row .wrapper .search-bar .label-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 48px;
    pointer-events: none;
    z-index: 1;
    font-size: 14px;
}


.site-header .top-row .wrapper .search-bar .search-bar-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--white);
    position: relative;
}

.site-header .top-row .wrapper .search-bar .search-bar-wrapper input {
    width: 100%;
    border-radius: 6px;
    padding: 0 12px 0 48px;
    font-size: 16px;
    border: unset;
    height: 100%;
}

.site-header .top-row .wrapper .search-bar .search-bar-wrapper button {
    position: absolute;
    background: unset;
    cursor: pointer;
    border: unset;
    padding: 0;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 100%;
}

.site-header .top-row .wrapper .search-bar .search-bar-wrapper button svg {
    width: 24px;
    min-width: 24px;
    height: 24px;
    max-width: 100%;
}


.site-header .top-row .wrapper .checkout-items-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions {
    display: flex;
    gap: 20px;
    align-items: center;
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .track-order {
    display: flex;
    flex-direction: column;
    background: unset;
    border: unset;
    padding: unset;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
    gap: 6px;
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .track-order:hover {
    background-color: var(--blue-medium);
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .track-order svg {
    width: 24px;
    height: 24px;
    max-width: 100%;
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .track-order svg * {
    stroke: var(--white);
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .wishlist {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    color: var(--white);
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .wishlist:hover {
    background-color: var(--blue-medium);
}

.site-header .top-row .wrapper .checkout-items-wrapper .actions .wishlist svg {
    width: 24px;
    height: 24px;
    max-width: 100%;
}


.site-header .top-row .wrapper .checkout-items-wrapper .checkout {
    display: flex;
    text-decoration: none;
    border-radius: 6px;
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper {
    width: 112px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    display: flex;
    padding: 8px 0;
    justify-content: center;
    background-color: var(--white);
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper .item-count-wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper .item-count-wrapper .basket-count {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: relative;
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper .item-count-wrapper .basket-count svg {
    width: 32px;
    height: auto;
    max-width: 100%;
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper .item-count-wrapper .basket-count svg * {
    fill: var(--blue-dark);
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper .item-count-wrapper .basket-count .count {
    position: absolute;
    top: -2px;
    right: -5px;
    border: 2px solid var(--white);
    border-radius: 1000px;
    background-color: var(--blue-dark);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--white);
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .basket-wrapper .item-count-wrapper .total-price {
    font-size: 14px;
	color: var(--blue-dark);
}

.site-header .top-row .wrapper .checkout-items-wrapper .checkout .checkout-inner {
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    padding: 0 12px;
    background-color: var(--blue-dark);
}




/* bottom row  */

.site-header .bottom-row {
    width: 100%;
}

.site-header .bottom-row .inner-wrapper {
    width: 100%;
    background-color: var(--blue-primary);
}

.site-header .bottom-row .inner-wrapper .main-categories {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 4px;
    
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab {
    width: 20%;
    background-color: var(--blue-medium);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    color: var(--white);
    display: flex;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    border: unset;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    gap: 8px;
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab:hover {
    background-color: var(--white);
    color: var(--blue-primary);
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab:hover svg * {
    stroke: var(--blue-primary);
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab svg {
    transform: rotate(270deg);
    width: 16px;
    height: 16px;
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab.active svg {
    transform: rotate(0deg);
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab.active svg * {
    stroke: var(--blue-primary);
}

.site-header .bottom-row .inner-wrapper .main-categories .main-cat-tab.active {
    background-color: var(--white);
    color: var(--blue-primary);
}


.site-header .bottom-row .sub-inner-wrapper {
    width: 100%;
    background-color: var(--white);
    border-bottom: 2px solid var(--blue-dark);
}

.site-header .bottom-row .sub-inner-wrapper .sub-categories {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: none;
}

.site-header .bottom-row .sub-inner-wrapper .sub-categories.active {
    display: flex;
}

.site-header .bottom-row .sub-inner-wrapper .sub-categories .sub-categories-link {
    padding: 10px 4px;
    display: flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--black);
    font-size: 15px;
    flex-grow: 1;
}

.site-header .bottom-row .sub-inner-wrapper .sub-categories .sub-categories-link.offers {
    background-color: var(--orange-primary);
    color: var(--black);
}

.site-header .bottom-row .sub-inner-wrapper .sub-categories .sub-categories-link:hover {
    background-color: var(--blue-dark);
    color: var(--white);
}

/* end of main site header  */


/* benefits list  */

.site-benefits-bar {
    width: 100%;
    background-color: #eef4fb;
}

.site-benefits-bar .wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.site-benefits-bar .wrapper .benefits-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
}

.site-benefits-bar .wrapper .benefits-list li {
    width: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.site-benefits-bar .wrapper .benefits-list li .icon-wrapper {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 100%;
}

.site-benefits-bar .wrapper .benefits-list li .icon-wrapper svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.site-benefits-bar .wrapper .benefits-list li p {
    font-size: 14px;
    margin: 0;
}

.site-benefits-bar .wrapper .benefits-list li span {
    font-size: 12px;
}

/* end of benefits list  */


/* mobile header  */

@media (min-width: 1025px) {
    #mobile-header {
        display: none;
    }
}

#mobile-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: var(--blue-primary);
    z-index: 9999;
}

#mobile-header .wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#mobile-header .wrapper .action-ctas {
    display: flex;
}

#mobile-header .wrapper .action-ctas .menu-wrapper {
    width: 54px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    background: unset;
    border: unset;
    padding: unset;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, .2);
}

#mobile-header .wrapper .action-ctas .menu-wrapper .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-header .wrapper .action-ctas .menu-wrapper .hamburger svg {
    width: 20px;
    fill: var(--white);
    height: 20px;
}

#mobile-header .wrapper .action-ctas .menu-wrapper .hamburger svg.menu-burger {
    display: none;
}

#mobile-header .wrapper .action-ctas .menu-wrapper .hamburger svg.menu-burger.active {
    display: block;
}

#mobile-header .wrapper .action-ctas .menu-wrapper .hamburger svg.menu-cross {
    display: none;
}

#mobile-header .wrapper .action-ctas .menu-wrapper .hamburger svg.menu-cross.active {
    display: block;
}

#mobile-header .wrapper .action-ctas .search-wrapper {
    width: 54px;
    height: 60px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    background: unset;
    border: unset;
    padding: unset;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, .2);
}

#mobile-header .wrapper .action-ctas .search-wrapper .search-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mobile-header .wrapper .action-ctas .search-wrapper .search-icon-wrapper svg {
    width: 20px;
    height: 20px;
}

#mobile-header .wrapper .action-ctas .search-wrapper .search-icon-wrapper svg * {
    stroke: var(--white);
 
}

#mobile-header .wrapper .action-ctas .search-wrapper span {

}


#mobile-header .wrapper .mobile-logo {
    width: 180px;
    height: auto;
    max-width: 100%;
    display: flex;
    margin: 10px 0;
    align-items: center;
    overflow-x: hidden;
}



#mobile-header .wrapper .mobile-logo img {
    width: auto;
    height: 40px;
    /* max-width: 100%; */
}

#mobile-header .wrapper .mobile-checkout-items {
    display: flex;
}

#mobile-header .wrapper .mobile-checkout-items .mobile-wishlist {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
    text-decoration: none;
    width: 54px;
    height: 60px;
    gap: 4px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

#mobile-header .wrapper .mobile-checkout-items .mobile-wishlist svg {
    width: 20px;
    height: 20px;
    max-width: 100%;
}

#mobile-header .wrapper .mobile-checkout-items .mobile-checkout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
    text-decoration: none;
    width: 54px;
    height: 60px;
    gap: 4px;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

#mobile-header .wrapper .mobile-checkout-items .mobile-checkout .basket-wrapper {
    position: relative;
}

#mobile-header .wrapper .mobile-checkout-items .mobile-checkout .basket-wrapper svg {
    width: 20px;
    height: 20px;
    max-width: 100%;
}

#mobile-header .wrapper .mobile-checkout-items .mobile-checkout .basket-wrapper svg * {
    fill: var(--white);
}

#mobile-header .wrapper .mobile-checkout-items .mobile-checkout .basket-wrapper .num-items-wrapper {
    position: absolute;
    top: -4px;
    right: -10px;
    border: 2px solid var(--white);
    border-radius: 1000px;
    background-color: var(--blue-dark);
    width: 16px;
    height: 16px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--white);
}

/* end of mobile header  */


/* mobile menu  */

#mobile-menu-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    transition: opacity 0s cubic-bezier(0.4, 0, 0.2, 1), 0s visibility;
}

#mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

#mobile-menu {
    position: fixed;
    height: calc(100% - 60px);
    top: 60px;
    left: 0;
    width: 100%;
    max-width: 400px;
    background-color: var(--white);
    z-index: 9999;
    display: none;
}

#mobile-menu.active {
    display: block!important;
}

#mobile-menu .inner-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    padding-bottom: 64px;
}


#mobile-menu .inner-wrapper .fixed-options-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 400px;
}

#mobile-menu .inner-wrapper .fixed-options-wrapper ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mobile-menu .inner-wrapper .fixed-options-wrapper ul li {
    width: 25%;
}

#mobile-menu .inner-wrapper .fixed-options-wrapper ul li a {
    background-color: var(--blue-primary);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    justify-content: center;
    height: 56px;
    align-items: center;
    gap: 4px;
    text-align: center;
    font-size: 14px;
    color: var(--white);
    border-right: 1px solid rgba(255, 255, 255, .4);
}

#mobile-menu .inner-wrapper .fixed-options-wrapper ul li a svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 100%;
}

#mobile-menu .inner-wrapper .fixed-options-wrapper ul li a svg * {
    stroke: var(--white);
}

#mobile-menu .inner-wrapper .mobile-parent-items {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mobile-menu .inner-wrapper .mobile-parent-items .mobile-parent-items-list-item {
    border-bottom: 1px solid var(--off-white);
}

#mobile-menu .inner-wrapper .mobile-parent-items .mobile-parent-items-list-item.title {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-weight: bold;
    align-items: center;
    text-decoration: none;
    color: var(--black);
    background-color: var(--off-white);
}

#mobile-menu .inner-wrapper .mobile-parent-items .mobile-parent-items-list-item .mobile-parent-items-list-item-link {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    color: var(--black);
}

#mobile-menu .inner-wrapper .mobile-parent-items .mobile-parent-items-list-item .mobile-parent-items-list-item-link svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    transform: rotate(270deg);
}

#mobile-menu .inner-wrapper .mobile-parent-items .mobile-parent-items-list-item .mobile-parent-items-list-item-link svg * {
    stroke: var(--black);
}


/* level 2 menu  */

#mobile-menu .inner-wrapper .mobile-menu-panel {
    overflow-y: auto;
    height: 100%;
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: var(--white);
    transform: translateX(100%);
    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two.active {
    transform: translateX(0);
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two .level-two-menu-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two .level-two-menu-list .level-two-menu-list-item {
    border-bottom: 1px solid var(--off-white);
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two .level-two-menu-list .level-two-menu-list-item.go-back {
    padding: 14px 16px;
    background-color: var(--off-white);
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two .level-two-menu-list .level-two-menu-list-item.go-back button {
    width: 100%;
    display: flex;
    align-items: center;
    background: unset;
    border: unset;
    font-size: 16px;
    gap: 8px;
    font-weight: bold;
    
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two .level-two-menu-list .level-two-menu-list-item.go-back button svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

#mobile-menu .inner-wrapper .mobile-menu-panel.level-two .level-two-menu-list .level-two-menu-list-item .level-two-menu-list-item-link {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    color: var(--black);
}

/* end of mobile menu  */


/* desktop search modal  */

#desktop-search-modal {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: calc(100% + 10px);
    background-color: var(--white);
    border: 1px solid var(--off-white);
    border-radius: 10px;
    overflow: hidden;
    display: none;
    z-index: 2;
}

#desktop-search-modal.active {
    display: block;
}

#desktop-search-modal .search-wrapper {
    display: flex;
    padding: 24px 16px 64px 16px;
    position: relative;
    
}

#desktop-search-modal .search-wrapper .no-type-wrapper {
    width: 100%;
    display: none;
}

#desktop-search-modal .search-wrapper .no-type-wrapper.active {
    display: flex;
}

#desktop-search-modal .search-wrapper .result-container {
    padding: 0 16px;
    width: 33.3%;
}

#desktop-search-modal .search-wrapper .result-container .result-category-title {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--grey);
}

#desktop-search-modal .search-wrapper .result-container .results-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#desktop-search-modal .search-wrapper .result-container .results-list li {

}

#desktop-search-modal .search-wrapper .result-container .results-list li a {
    display: flex;
    padding: 4px 0;
    color: var(--black);
    text-decoration: none;
}

#desktop-search-modal .search-wrapper .result-container .results-list li a:hover {
    text-decoration: underline;
}

#desktop-search-modal .search-wrapper .search-modal-close-search-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
    padding: 10px 8px;
    border: unset;
    width: 100%;
    color: var(--white);
    background-color: var(--blue-primary);
}

#desktop-search-modal .search-wrapper .search-modal-close-search-btn:hover {
    background-color: var(--blue-medium);
}

#desktop-search-modal .search-wrapper .search-type-wrapper {
    display: none;
    width: 100%;
}

#desktop-search-modal .search-wrapper .search-type-wrapper.active {
    display: flex;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.search-suggestions {

}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.search-suggestions .search-suggestions-title {
    font-weight: bold;
    font-size: 18px;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.search-suggestions ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.search-suggestions ul li {

}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.search-suggestions ul li a {
    display: flex;
    width: fit-content;
    font-weight: 500;
    padding: 4px 0;
    color: var(--grey);
    text-decoration: none;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.search-suggestions ul li a:hover {
    text-decoration: underline;
}


#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.categories-brands {

}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.categories-brands ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.categories-brands ul li {

}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.categories-brands ul li a {
    display: flex;
    padding: 4px 0;
    width: fit-content;
    color: var(--black);
    text-decoration: none;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.categories-brands ul li a:hover {
    text-decoration: underline;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.categories-brands .brands {
    margin-top: 24px;
}


#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products {

}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li {

}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    padding: 6px 0;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a .product-image-wrapper {
    width: 80px;
    min-width: 80px;
    height: 80px;
    max-width: 100%;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a .product-image-wrapper img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    max-width: 100%;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a .product-info {
    flex-grow: 1;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a .product-info .product-name {
    color: var(--black);
    font-size: 16px;
    padding: 6px 0;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a:hover .product-info .product-name {
    color: var(--blue-primary);
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a .product-info .product-code {
    color: var(--grey);
    font-size: 14px;
}

#desktop-search-modal .search-wrapper .search-type-wrapper .result-container.products ul li a .product-info .product-price {
    color: var(--blue-primary);
    font-size: 20px;
    font-weight: bold;
}

/* end of desktop search modal  */


/* mobile search modal  */

#mobile-search-modal {
    position: fixed;
    overflow-y: scroll;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 9999;
    display: none;
}

#mobile-search-modal.active {
    display: block;
}

#mobile-search-modal .search-head {
    width: 100%;
    background-color: var(--blue-primary);
    display: flex;
    align-items: center;
}

#mobile-search-modal .search-head .mobile-close-btn {
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    background: unset;
    font-size: 12px;
    border: unset;
    color: var(--white);
}

#mobile-search-modal .search-head .mobile-close-btn .icon-wrapper {
    width: 20px;
    height: 20px;
    max-width: 100%;
}

#mobile-search-modal .search-head .mobile-close-btn .icon-wrapper svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}



#mobile-search-modal .search-head #mobile-delete-input-btn {
    position: absolute;
    right: 10px;
    border: unset;
    border-radius: 1000px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: var(--blue-dark);
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

#mobile-search-modal .search-head #mobile-delete-input-btn:hover {
    background-color: var(--blue-primary);
}

#mobile-search-modal .search-head #mobile-delete-input-btn svg {
    width: 14px;
    height: 14px;
    max-width: 100%;
}

#mobile-search-modal .search-head #mobile-delete-input-btn svg * {
    stroke: var(--white);
}

#mobile-search-modal .loader-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

#mobile-search-modal .loader {
  width: 48px;
  height: 48px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: var(--off-white) var(--off-white) transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
#mobile-search-modal .loader::after,
#mobile-search-modal .loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent var(--blue-primary) var(--blue-primary);
  width: 40px;
  height: 40px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
#mobile-search-modal .loader::before {
  width: 32px;
  height: 32px;
  max-width: 100%;
  max-height: 100%;
  border-color: var(--off-white) var(--off-white) transparent transparent;
  animation: rotation 1.5s linear infinite;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
    


#mobile-search-modal .search-head .mobile-search-btn {
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    background: unset;
    font-size: 12px;
    border: unset;
    color: var(--white);
}

#mobile-search-modal .search-head .mobile-search-btn .icon-wrapper {
    width: 20px;
    height: 20px;
    max-width: 100%;
}

#mobile-search-modal .search-head .mobile-search-btn .icon-wrapper svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

#mobile-search-modal .search-head .mobile-search-btn .icon-wrapper svg * {
    stroke: var(--white);
}

#mobile-search-modal .search-head .mobile-search {
    height: 44px;
    flex-grow: 1;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
}

#mobile-search-modal .search-head .mobile-search .label-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 17px;
    right: 20px;
    pointer-events: none;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

#mobile-search-modal .search-head .mobile-search .label-wrapper.hidden {
    display: none;
}

#mobile-search-modal .search-head .mobile-search input {
    height: 100%;
    border-radius: 6px;
    width: 100%;
    padding: 0 44px 0 16px;
    border: unset;
}


#mobile-search-modal .search-body {
    padding: 24px 16px 64px 16px;
    background-color: var(--white);
}


#mobile-search-modal .search-body .mobile-no-search-wrapper {
    width: 100%;
    display: none;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper.active {
    display: block;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container.popular-searches {
    margin-top: 24px;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container .mobile-result-title {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--grey);
    font-size: 18px;
    font-weight: bold;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container .results {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container .results ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container .results ul li {

}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container .results ul li a {
    padding: 6px 0;
    display: flex;
    width: fit-content;
    color: var(--black);
    text-decoration: none;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper .mobile-result-container .results ul li a:hover {
    text-decoration: underline;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper #mobile-close-search-modal-btn, #mobile-ready-search-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    cursor: pointer;
    padding: 10px 8px;
    width: 100%;
    border: unset;
    background-color: var(--blue-primary);
    color: var(--white);
}

#mobile-ready-search-btn {
    display: none;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper #mobile-close-search-modal-btn.active, #mobile-ready-search-btn.active {
    display: block;
}

#mobile-search-modal .search-body .mobile-no-search-wrapper #mobile-close-search-modal-btn:hover, #mobile-ready-search-btn:hover {
    background-color: var(--blue-medium);
}


#mobile-search-modal .search-body .mobile-ready-search-wrapper {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions .mobile-result-title {
    font-weight: bold;
    font-size: 18px;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions .results {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions .results ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions .results ul li {

}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions .results ul li a {
    display: flex;
    width: fit-content;
    font-weight: 500;
    padding: 4px 0;
    color: var(--grey);
    text-decoration: none;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.search-suggestions .results ul li a:hover {
    text-decoration: underline;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products {
    width: 100%;
    margin-top: 24px;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .mobile-result-title {
    margin-bottom: 16px;
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--grey);
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a {
    display: flex;
    text-decoration: none;
    padding: 6px 0;
    gap: 12px;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a .image-wrapper {
    width: 80px;
    min-width: 80px;
    height: 80px;
    max-width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a .image-wrapper img {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a .product-info {
    flex-grow: 1;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a .product-info .product-name {
    color: var(--black);
    font-size: 16px;
    padding: 6px 0;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a .product-info .product-code {
    font-size: 14px;
    color: var(--grey);
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.products .results ul li a .product-info .product-price {
    color: var(--blue-primary);
    font-size: 20px;
    font-weight: bold;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories {
    width: 100%;
    margin-top: 24px;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .mobile-result-title {
    margin-bottom: 16px;
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--grey);
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .results {
    width: 100%;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .categories {
    margin-top: 24px;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .results ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .results ul li {

}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .results ul li a {
    display: flex;
    width: fit-content;
    color: var(--black);
    padding: 6px 0;
    text-decoration: none;
}

#mobile-search-modal .search-body .mobile-ready-search-wrapper .mobile-search-container.brands-categories .results ul li a:hover {
    text-decoration: underline;
}

/* end of mobile search modal  */