/* VictorStore VS-H22 - transferred from Helix Custom CSS, order preserved */
.vs-brand-header {
    position: relative;
}


/* Old full-width Barber Pole under header removed. */




/* VictorStore Header Search V7 */
@media (min-width: 992px) {

    #sp-header .vs-header-search,
    #sp-header .vs-header-search .sp-module-content {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    #sp-header .vs-header-search .hikashop_filter_main_div,
    #sp-header .vs-header-search [class*="hikashop_filter_main_"] {
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sp-header .vs-header-search .filter_values_container {
        width: 100%;
        display: block;
    }

    #sp-header .vs-header-search input.form-control {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        border: 1px solid #D7DEE7 !important;
        border-radius: 12px !important;
        background: #FFFFFF !important;
        color: #192633 !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    #sp-header .vs-header-search input.form-control::placeholder {
        color: #7B8794;
        opacity: 1;
    }
}



/* VictorStore Header Search V7.1 - Vertical Alignment */
@media (min-width: 992px) {

    #sp-header .vs-header-search {
        display: flex !important;
        align-items: center !important;
        height: 90px !important;
    }

    #sp-header .vs-header-search .sp-module-content {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sp-header .vs-header-search .hikashop_filter_module {
        margin: 0 !important;
        padding: 0 !important;
    }

    #sp-header .vs-header-search form {
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* VictorStore Header Search V7.3 */

#sp-header .vs-header-search .filter_values_container {
    position: relative;
}

#sp-header .vs-header-search .filter_values_container::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    background-color: #244C83;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

#sp-header .vs-header-search input.form-control {
    padding-left: 43px !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#sp-header .vs-header-search input.form-control:focus {
    border-color: #4A89CF !important;
    box-shadow: 0 0 0 3px rgba(74,137,207,.18) !important;
}

html[dir="ltr"] #sp-header .vs-header-search .filter_values_container::after {
    left: auto;
    right: 13px;
}

html[dir="ltr"] #sp-header .vs-header-search input.form-control {
    padding-left: 16px !important;
    padding-right: 43px !important;
}



/* VictorStore Header V7.8 - Medium Desktop Menu */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Hide desktop mega menu */
    #sp-header .sp-megamenu-wrapper {
        display: none !important;
    }

    /* Show Helix offcanvas toggle */
    #sp-header .offcanvas-toggler-left {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 8px;
        color: #FFFFFF;
        cursor: pointer;
    }

    #sp-header .offcanvas-toggler-left .burger-icon {
        display: block;
        width: 24px;
        height: 18px;
        color: #FFFFFF;
    }
}


/* VictorStore Header V7.9 — Medium Desktop Logo */

@media (min-width: 992px) and (max-width: 1199.98px) {

    #sp-header .logo {
        flex-shrink: 0;
        min-width: 0;
    }

    #sp-header .logo img {
        height: 55px !important;
        width: auto !important;
        max-width: 100%;
        object-fit: contain;
    }

    #sp-header .offcanvas-toggler-left {
        flex-shrink: 0;
    }
}


/* VictorStore VS-H16 - Clickable Search Button */

#sp-header .vs-header-search .vs-search-clickable {
    position: relative;
}

/* Hide the old decorative icon */
#sp-header .vs-header-search .vs-search-clickable::after {
    content: none !important;
}

/* Real clickable search button */
#sp-header .vs-header-search .vs-search-submit {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #244C83;
    cursor: pointer;
    z-index: 3;
}

#sp-header .vs-header-search .vs-search-submit:hover {
    background: #EAF1FB;
    color: #D92332;
}

#sp-header .vs-header-search .vs-search-submit:focus-visible {
    outline: 2px solid #244C83;
    outline-offset: 2px;
}

html[dir="ltr"] #sp-header .vs-header-search .vs-search-submit {
    left: auto;
    right: 5px;
}


/* VictorStore customer mockup - new navigation row only.
   Row Section Title must be Navigation => #sp-navigation. */
#sp-header > .container,
#sp-navigation > .container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
}
#sp-navigation {
    background: #fff;
    border-bottom: 1px solid #efe9e3;
}
#sp-navigation .sp-megamenu-wrapper,
#sp-navigation .sp-megamenu-parent {
    display: flex;
    justify-content: center;
}
#sp-navigation .sp-megamenu-parent {
    flex-wrap: wrap;
    gap: 6px;
}
#sp-navigation .sp-megamenu-parent > li > a,
#sp-navigation .sp-megamenu-parent > li > span {
    color: #44403c;
    font-size: 13.5px;
    font-weight: 500;
    padding: 13px 14px;
    line-height: 1.5;
    height: auto;
}
#sp-navigation .sp-megamenu-parent > li:hover > a,
#sp-navigation .sp-megamenu-parent > li.active > a,
#sp-navigation .sp-megamenu-parent > li.current-item > a {
    color: #c8102e;
}
/* Do not change dropdown mechanics; preserve Helix submenu behavior. */

/* VS-H25: Moved verbatim from Helix Custom CSS; visual source of truth (2026-10-21). */
#sp-top-bar.vs-topbar .sp-module { display: block; position: relative; margin: 0; }
#sp-top-bar.vs-topbar .jmodedit { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 0; }
#sp-top-bar.vs-topbar .sppb-row-container { padding-inline: 0; }
#sp-top-bar.vs-topbar { height: 38.53125px; padding-block: 9px; border-bottom: 1px solid rgba(231,229,228,.7); display: flex; align-items: center; }
#sp-top-bar.vs-topbar .sppb-addon-content p { margin: 0; }
#sp-top-bar.vs-topbar .container-inner > .row { align-items: center; }

#sp-header.vs-brand-header { height: auto; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid #efe9e3; box-shadow: none; }
#sp-header.vs-brand-header .container-inner > .row { align-items: center; gap: 20px; flex-wrap: nowrap; margin: 0; padding-block: 12px; }
#sp-header.vs-brand-header .container-inner > .row > div { padding: 0; }
#sp-header.vs-brand-header #sp-logo { flex: 0 0 auto; width: auto; max-width: none; }
#sp-header.vs-brand-header #sp-logo .sp-column { height: auto; }
#sp-header.vs-brand-header #sp-top1 { flex: 1 1 0; width: auto; max-width: 460px; min-width: 0; }
#sp-header.vs-brand-header #sp-header-right { flex: 0 0 auto; width: auto; margin-inline-start: auto; }
#sp-header.vs-brand-header #sp-header-right > .sp-column { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
#sp-header.vs-brand-header .sp-module { position: relative; margin: 0; }
#sp-header.vs-brand-header .jmodedit { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 0; }
#sp-header.vs-brand-header .vs-header-search, #sp-header.vs-brand-header .vs-header-search .sp-module-content { width: 100%; margin: 0; padding: 0; height: auto !important; }
#sp-header.vs-brand-header .vs-header-search .hikashop_filter_main_div, #sp-header.vs-brand-header .vs-header-search [class*="hikashop_filter_main_"] { float: none !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
#sp-header.vs-brand-header .vs-header-search .hikashop_filter_collapsable_title_mobile { display: none; }
#sp-header.vs-brand-header .vs-header-search .hikashop_filter_collapsable_content_mobile { display: block !important; }
#sp-header.vs-brand-header .vs-header-search form { margin: 0; padding: 0; }
#sp-header.vs-brand-header .vs-header-search .filter_values_container { display: block; width: 100%; }
#sp-header.vs-brand-header .vs-header-search input.form-control { height: 46px !important; min-height: 46px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 44px 0 18px !important; border: 1.5px solid #efe9e3 !important; border-radius: 999px !important; background: #faf8f5 !important; color: #1c1917 !important; font-family: inherit; font-size: 13.5px; box-shadow: none !important; }
#sp-header.vs-brand-header .vs-header-search input.form-control::placeholder { color: #78716c; opacity: 1; }
#sp-header.vs-brand-header .vs-header-search input.form-control:focus { border-color: #f2b8b8 !important; box-shadow: none !important; }
#sp-header.vs-brand-header .vs-header-search .vs-search-submit { left: auto; right: 7px; color: #78716c; border-radius: 50%; }
#sp-header.vs-brand-header .vs-header-search .vs-search-submit svg { width: 18px; height: 18px; }
#sp-header.vs-brand-header .vs-header-account { order: -1; }
#sp-header.vs-brand-header .vs-header-account .sppb-row-container { padding: 0; width: auto; }
#sp-header.vs-brand-header .vs-header-account .sppb-btn { padding: 8px 10px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #c8102e !important; background: transparent !important; border: 0; white-space: nowrap; }
#sp-header.vs-brand-header #vs-mobile-search-toggle, #vs-mobile-search-panel { display: none !important; }
@media (max-width: 768px) {
 #sp-header.vs-brand-header .container-inner > .row { flex-wrap: wrap; gap: 10px; }
 #sp-header.vs-brand-header #sp-top1 { flex: 1 0 100%; order: 3; max-width: none; }
 #sp-header.vs-brand-header #sp-header-right { margin-inline-start: auto; }
}
body.rtl .sp-megamenu-parent > li.sp-has-child > a::before,
body.rtl .sp-megamenu-parent > li.sp-has-child > span::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal;
}

/* VS-H26.4 — Mobile RTL header, clean consolidated layout.
   Natural outer-edge alignment; responsive logo sizing to protect account/cart spacing.
   Keep all desktop and mobile search functionality intact. */
@media (max-width: 768px) {
  html[dir="rtl"] #sp-header.vs-brand-header .container-inner > .row,
  body.rtl #sp-header.vs-brand-header .container-inner > .row {
    display: grid !important;
    direction: rtl !important;
    grid-template-columns: max-content max-content;
    grid-template-rows: auto auto;
    justify-content: space-between !important;
    align-items: center;
    column-gap: 12px;
    row-gap: 7px;
    padding-block: 7px;
    width: 100%;
    min-width: 0;
  }

  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo,
  body.rtl #sp-header.vs-brand-header #sp-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start !important;
    width: clamp(112px, 31vw, 142px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: right !important;
  }
  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo .sp-column,
  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo .logo,
  body.rtl #sp-header.vs-brand-header #sp-logo .sp-column,
  body.rtl #sp-header.vs-brand-header #sp-logo .logo {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo .logo img,
  body.rtl #sp-header.vs-brand-header #sp-logo .logo img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 52px;
    object-fit: contain;
    margin: 0 !important;
  }

  html[dir="rtl"] #sp-header.vs-brand-header #sp-header-right,
  body.rtl #sp-header.vs-brand-header #sp-header-right {
    grid-column: 2;
    grid-row: 1;
    justify-self: end !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #sp-header.vs-brand-header #sp-header-right > .sp-column {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    width: max-content;
  }
  #sp-header.vs-brand-header #sp-header-right .sp-module {
    margin: 0;
    min-width: 0;
  }
  #sp-header.vs-brand-header .vs-header-account .sppb-btn {
    padding: 5px 3px;
    font-size: 12px;
  }

  html[dir="rtl"] #sp-header.vs-brand-header #sp-top1,
  body.rtl #sp-header.vs-brand-header #sp-top1 {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
  }
}

/* VS-H26.5 — Put the actual logo first at the RTL right edge.
   Keep the 25px Helix Offcanvas control available, after the logo. */
@media (max-width: 768px) {
  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo > .sp-column,
  body.rtl #sp-header.vs-brand-header #sp-logo > .sp-column {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo > .sp-column > .logo,
  body.rtl #sp-header.vs-brand-header #sp-logo > .sp-column > .logo {
    order: -1 !important;
    flex: 0 0 auto !important;
  }
  html[dir="rtl"] #sp-header.vs-brand-header #sp-logo > .sp-column > .offcanvas-toggler-left,
  body.rtl #sp-header.vs-brand-header #sp-logo > .sp-column > .offcanvas-toggler-left {
    order: 0 !important;
    flex: 0 0 auto !important;
  }
}


/* VS-H26.7: Mobile-only auto-hide header; H26.5 layout remains unchanged. */
@media (max-width: 768px) {
  body.vs-h26-header-enabled #sp-top-bar,
  body.vs-h26-header-enabled #sp-header,
  body.vs-h26-header-enabled #sp-navigation {
    position: fixed !important;
    top: var(--vs-h26-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    z-index: 10500 !important;
    transition: transform .28s ease !important;
    will-change: transform;
  }
  body.vs-h26-header-enabled #sp-top-bar { z-index: 10503 !important; }
  body.vs-h26-header-enabled #sp-header { z-index: 10502 !important; }
  body.vs-h26-header-enabled #sp-navigation { z-index: 10501 !important; }
  body.vs-h26-header-hidden #sp-top-bar,
  body.vs-h26-header-hidden #sp-header,
  body.vs-h26-header-hidden #sp-navigation {
    transform: translateY(calc(-1 * var(--vs-h26-stack-height, 300px))) !important;
    pointer-events: none;
  }
  #vs-h26-header-spacer { display: block; width: 100%; pointer-events: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.vs-h26-header-enabled #sp-top-bar,
  body.vs-h26-header-enabled #sp-header,
  body.vs-h26-header-enabled #sp-navigation { transition: none !important; }
}


/* VS-H26.9 — Show the EXISTING Helix navigation in mobile.
   No menu cloning, no DOM moves. VS-H26.8 already moves #sp-navigation
   together with the header (including the two-second hide behavior). */
@media (max-width: 768px) {
  #sp-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #sp-navigation .sp-megamenu-wrapper {
    display: flex !important;
    visibility: visible !important;
    width: 100%;
    justify-content: center;
  }

  #sp-navigation .sp-megamenu-parent {
    display: flex !important;
    visibility: visible !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 2px;
    row-gap: 0;
    width: 100%;
    margin: 0;
    padding: 2px 0;
  }

  #sp-navigation .sp-megamenu-parent > li {
    display: list-item !important;
    float: none !important;
    width: auto !important;
    flex: 0 0 auto;
  }

  #sp-navigation .sp-megamenu-parent > li > a,
  #sp-navigation .sp-megamenu-parent > li > span {
    display: inline-flex;
    align-items: center;
    height: auto !important;
    padding: 7px 6px !important;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
  }
}


/* VS-H26.11 — Compact floating header opener on mobile.
   Existing top-bar, logo, search, menu and cart remain unchanged. */
@media (max-width: 768px) {
  #vs-h26-header-opener {
    position: fixed !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    right: auto !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #fff;
    background: #1c1917;
    border: 1px solid #c9a227;
    border-radius: 13px;
    box-shadow: 0 6px 22px rgba(0,0,0,.25);
    z-index: 10620;
    cursor: pointer;
    touch-action: manipulation;
  }
  body.vs-h26-header-enabled.vs-h26-header-hidden #vs-h26-header-opener {
    display: flex !important;
  }
  #vs-h26-header-opener svg { width: 24px; height: 24px; }
  #vs-h26-header-opener:focus-visible { outline: 3px solid #c9a227; outline-offset: 3px; }
  html[dir="ltr"] #vs-h26-header-opener { left: auto !important; right: 14px !important; }
}


/* VS-H26.12 — Desktop navigation follows the existing Helix header.
   Does not affect compact mobile/tablet behavior. */
@media (min-width: 769px) {
  body.vs-h26-desktop-nav-docked #sp-navigation {
    position: fixed !important;
    top: var(--vs-h26-desktop-nav-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 9998 !important;
    transform: none !important;
  }
  #vs-h26-desktop-nav-placeholder { display: block; height: 0; pointer-events: none; }
}