/* ==========================================================================
   PIO HEADER  -  #pio-navbar-sticky / .pio-parent-header
   ==========================================================================
   THE single source of truth for the site header. Everything that styles the
   fixed top bar and the things that live in it is here, grouped by component.

   Before this file, these 160 rules were spread across style.css,
   styleRTL.css, responsive.css and dark-theme-v2.css, interleaved with
   unrelated rules - the search box alone was defined in four places. Changing
   anything meant finding every one of them first.

   HOW IT IS ORGANISED
     One numbered section per component (see the contents below). Inside a
     section the rules stay in the original cascade order:
         style.css  ->  styleRTL.css  ->  responsive.css  ->  dark-theme-v2.css
     and each run is labelled with where it came from. RTL, responsive and dark
     variants of a component now sit directly under that component's base rules
     instead of in three other files.

   RULES WERE MOVED, NOT REWRITTEN
     Declarations are byte-identical to what they replaced and the @media and
     theme wrappers are rebuilt exactly, so the header renders the same. Known
     oddities were left in place on purpose rather than "fixed", because fixing
     them would change how the header looks - see NOTES at the bottom.

   ROLLBACK
     legacy/pio-header-legacy.css holds the same rules with their original file
     and line numbers. See the comment at the top of that file.

   CONTENTS
      1. Header shell - the fixed bar itself
      2. Brand: logo image + theme-swapped icons
      3. Currency picker
      4. Cart button, badge, bump animation
      5. Cart popup panel
      6. Search: desktop input, mobile overlay, autocomplete
      7. Primary nav + mega menus
      8. Burger menu (mobile drawer)
      9. Signed-in user chip + avatar dropdown
     10. Shared dropdown arrow helper
   ========================================================================== */


/* ==========================================================================
   1. HEADER SHELL - THE FIXED BAR ITSELF
   ========================================================================== */

/* --- style.css --- */
/* The bar itself: fixed to the top, full width, above everything. core.js
   animates `top` to -150px on scroll down and back to 0 on scroll up, which is
   what the transition here is for. */
.pio-parent-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    opacity: 1;
    top: 0;
    left: 0;
    background: #fff;
    min-height: 70px;
    height: auto;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

/* --- responsive.css   @media screen and (min-width:992px) --- */
@media screen and (min-width:992px) {
    .pio-parent-header {
        height: 135px;
    }

    .pio-gap {
        gap: 0.25rem;
    }
}

/* --- responsive.css   @media screen and (min-width:1600px) --- */
@media screen and (min-width:1600px) {
    .pio-parent-header .pio-logo {
        height: 3rem; /*  48px fitting the font law 3 x font size  */
        width: unset;
    }

    .pio-parent-header div:has(a .pio-logo) {
        height: 4.5rem; /* container size should be around 72px*/
    }
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    .pio-parent-header,
    .accredit .accredit-svgs,
    .mobile-search-input {
        background: var(--body-background) !important;
        color: #fff;
    }
}

/* --- dark-theme-v2.css   @media screen and (min-width: 768px) --- */
@media screen and (min-width: 768px) {
    body[data-bs-theme="light"] .pio-parent-header.pio-header-invert {
        background: #000 !important;
        color: #fff;
    }

    body[data-bs-theme="light"] .pio-header-invert #logoImage {
        content: url('../../assets/templatev2/logo-light.png');
    }

    body[data-bs-theme="light"] .pio-header-invert .icon-theme-color svg path {
        fill: #fff !important;
    }

    body[data-bs-theme="light"] .pio-header-invert .icon-theme-stroke svg path {
        stroke: #fff !important;
    }

    body[data-bs-theme="light"] .pio-header-invert .pio-search-input {
        border: 1px solid var(--pio-scondery-text-dark, #fff) !important;
        background-image: url('../../assets/templatev2/search_icon-dark.svg');
        color: #fff;
    }
}

/* --- dark-theme-v2.css --- */
/* ---- theme is DARK, hero is #fff -> navbar goes light --------------------
   No media query: the dark-theme rule in section 4 paints the hero white at
   every width, so the phone layout needs this too. */
body[data-bs-theme="dark"] .pio-parent-header.pio-header-invert {
    background: #fff !important;
    color: #212529;
}

body[data-bs-theme="dark"] .pio-header-invert #logoImage {
    content: url('../../assets/templatev2/logo-dark.png');
}

body[data-bs-theme="dark"] .pio-header-invert .icon-theme-color svg path {
    fill: #000 !important;
}

body[data-bs-theme="dark"] .pio-header-invert .icon-theme-stroke svg path {
    stroke: #000 !important;
}

body[data-bs-theme="dark"] .pio-header-invert .pio-search-input {
    border: 1px solid #000000c2 !important;
    background-image: url('../../assets/templatev2/search_icon.svg');
    color: #212529;
}


/* ==========================================================================
   2. BRAND: LOGO IMAGE + THEME-SWAPPED ICONS
   ========================================================================== */

/* --- style.css --- */
/* header */


.pio-logo {
    width: 127px;
}

body[data-bs-theme="light"] #logoImage {
    content: url('../../assets/templatev2/logo-dark.png');
}

body[data-bs-theme="light"] .icon-theme-color svg path {
    fill: black !important;
}

body[data-bs-theme="light"] .icon-theme-stroke svg path {
    stroke: black !important;
}

/* --- responsive.css   @media screen and (min-width:992px) --- */
@media screen and (min-width:992px) {
    .pio-logo {
        width: 164px;
    }
}

/* --- responsive.css   @media screen and (min-width:1400px) --- */
@media screen and (min-width:1400px) {
    .pio-logo {
        width: 180px;
    }
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    /* logo switching (light counterpart lives in section 11) */
    #logoImage {
        content: url('../../assets/templatev2/logo-light.png');
    }

    /* icons & strokes */
    .icon-theme-color svg path {
        fill: white;
    }
}

/* --- dark-theme-v2.css --- */
body[data-bs-theme="light"] #logoImage {
    content: url('../../assets/templatev2/logo-dark.png');
}

body[data-bs-theme="light"] .icon-theme-color svg path {
    fill: black !important;
}

body[data-bs-theme="light"] .icon-theme-stroke svg path {
    stroke: black !important;
}


/* ==========================================================================
   3. CURRENCY PICKER
   ========================================================================== */

/* --- style.css --- */
.pio-currency-dropdown .dropdown-menu {
    border-radius: 12px;
    transform: unset !important;
    top: 40px !important;
    border: none;
    border: 1px solid #00000012;
    left: 0 !important;
    width: 100%;
    border: none;
    border: 1px solid #00000012;
}

.pio-currency-dropdown .dropdown-item {
    cursor: pointer;
    width: 100%;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
}

.pio-currency-dropdown .currency-flag {
    width: 21px;
    height: 21px;
}

.pio-currency-dropdown .currency-title {
    font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
}

.currency-menu .dropdown-menu-arrow {
    top: -26px;
    left: 28%;
    width: 0;
    height: 0;
    position: relative;
}

.currency-dropdown-buttom .dropdown-toggle::after {
    display: none !important;
}

.pio-currency-dropdown {
    border: none;
}

.pio-currency-dropdown button {
    font-weight: 800;
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
}

/* --- styleRTL.css --- */
body[dir="rtl"] .pio-avatar-btn .dropdown-menu,
body[dir="rtl"] .pio-currency-dropdown .dropdown-menu {
    right: 0 !important;
    left: unset !important;
}

body[dir="rtl"] .currency-menu .dropdown-menu-arrow {
    left: -14%;
}


/* ==========================================================================
   4. CART BUTTON, BADGE, BUMP ANIMATION
   ========================================================================== */

/* --- style.css --- */
.pio-cart-btn .badge {
    right: 0;
    background: rgb(0 170 205 / 24%);
}

/* empty cart: the icon can't open a popup, so make it read as inert */
.pio-cart-btn.pio-cart-empty {
    opacity: .55;
    cursor: default;
}

/* "added to cart" feedback: the navbar cart icon bounces (upperSectionCtrl
   toggles .cart-bump on the cartItemAdded event) */
.pio-cart-btn.cart-bump {
    animation: pio-cart-bump .7s cubic-bezier(.28, .84, .42, 1);
}

@keyframes pio-cart-bump {
    0% { transform: scale(1); }
    25% { transform: scale(1.28) rotate(-6deg); }
    45% { transform: scale(.92) rotate(4deg); }
    65% { transform: scale(1.12) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
}


/* ==========================================================================
   5. CART POPUP PANEL
   ========================================================================== */

/* --- style.css --- */
/* chosen-method label shown on the cart lines */
.cart-popup-method {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #6b7075;
}

.cart-popup-method i {
    color: var(--pio-primary-color);
}

@keyframes cart-added-pop {
    0% { transform: scale(0); }
    60% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.pio-cart-dropdown .cart-popup {
    width: 340px;
    max-width: min(340px, calc(100vw - 1.5rem));
    border: 1px solid rgba(var(--color-value), .12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    /* arrow fill matches the popup background; overridden per theme below */
    --cart-popup-arrow: #10141c;
}

/* Desktop only (data-bs-display="static" on that toggle): center the popup
   under the cart icon and give it a speech-bubble arrow pointing at the icon.
   The mobile icon sits in a corner where centering would overflow, so it keeps
   Bootstrap's default positioning. */
.pio-cart-dropdown.d-lg-block .cart-popup {
    /* physical left/transform (not logical): centering on a point is symmetric,
       so this stays correct in both LTR and RTL */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: calc(100% + 12px);
    overflow: visible;               /* let the arrow show above the panel */
}

.pio-cart-dropdown.d-lg-block .cart-popup::before {
    content: "";
    position: absolute;
    bottom: 100%;                    /* sit just above the panel's top edge */
    left: 50%;                       /* centered = aligned with the icon */
    transform: translateX(-50%);
    margin-bottom: -1px;             /* overlap the border so there's no seam */
    border: 8px solid transparent;
    border-bottom-color: var(--cart-popup-arrow);
    pointer-events: none;
}

.cart-popup-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(var(--color-value), .1);
}

.cart-popup-count {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #6b7075;
}

.cart-popup-empty i {
    font-size: clamp(1.3095rem, calc(1.2073rem + 0.4364vw), 1.6rem);
    color: #adb5bd;
}

.cart-popup-empty p {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    color: #6b7075;
}

.cart-popup-items {
    max-height: 300px;
    overflow-y: auto;
}

.cart-popup-item {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(var(--color-value), .07);
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cart-popup-item:last-child {
    border-bottom: none;
}

.cart-popup-item:hover {
    background-color: rgba(var(--color-value), .06);
}

.cart-popup-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.cart-popup-name {
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-popup-meta {
    font-size: clamp(0.6727rem, calc(0.6455rem + 0.1161vw), 0.75rem);
    color: #6b7075;
}

.cart-popup-meta i {
    color: var(--pio-primary-color2);
}

.cart-popup-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(var(--color-value), .1);
}

/* ── the popup INVERTS against the page theme (same convention as the
   buy/login modals): dark page -> light popup, light page -> dark popup ── */

/* dark page -> LIGHT popup */
body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup {
    background-color: #fff;
    color: #111;
    border-color: rgba(0, 0, 0, .08);
    --cart-popup-arrow: #fff;
}

body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup .cart-popup-header .fw-bold,
body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup .cart-popup-name,
body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup .cart-popup-footer {
    color: #111;
}

body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup .cart-popup-header {
    border-bottom-color: rgba(0, 0, 0, .1);
}

body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup .cart-popup-item {
    border-bottom-color: rgba(0, 0, 0, .07);
}

body[data-bs-theme="dark"] .pio-cart-dropdown .cart-popup .cart-popup-footer {
    border-top-color: rgba(0, 0, 0, .1);
}

/* light page -> DARK popup */
body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup {
    background-color: #10141c;
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
    --cart-popup-arrow: #10141c;
}

body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-header .fw-bold,
body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-name,
body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-footer {
    color: #fff;
}

body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-header {
    border-bottom-color: rgba(255, 255, 255, .1);
}

body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-item {
    border-bottom-color: rgba(255, 255, 255, .08);
}

body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-footer {
    border-top-color: rgba(255, 255, 255, .1);
}

body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-count,
body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-meta,
body[data-bs-theme="light"] .pio-cart-dropdown .cart-popup .cart-popup-empty p {
    color: #aab2bd;
}


/* ==========================================================================
   6. SEARCH: DESKTOP INPUT, MOBILE OVERLAY, AUTOCOMPLETE
   ========================================================================== */

/* --- style.css --- */
.pio-search-input {
    border-radius: 20px;
    width: 90%;
    height: 36px;
    border: 1px solid #000000c2;
    opacity: 0.5;
    padding-left: 2.5rem;
    background: url('../../assets/templatev2/search_icon.svg') no-repeat;
    background-position: 10px center !important;
    background-size: 20px;
    box-sizing: border-box;
}

.pio-search-input:focus {
    outline-color: var(--pio-primary-color) !important;
}

/* section header autocomplete search */
.autocomplete-holder {
    border-color: #ffa000;
    border-style: solid;
    position: absolute;
    bottom: 0;
    top: 40px;
    z-index: 1;
    max-height: 400px;
    border-radius: 0.75rem;
    width: 80% !important;
    display: flex;
    padding: 1rem;
    background-color: #fff;
    justify-content: center;
    align-items: center;
}

.autocomplete-list-holder {
    position: absolute;
    top: 40px;
    background-color: #fff;
    border-radius: 14px;
    z-index: 1;
    /* padding lets the rounded row hover sit inside the card instead of
       running edge to edge */
    padding: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 12px 32px rgba(16, 42, 58, 0.14), 0 2px 6px rgba(16, 42, 58, 0.06);
    width: 90%;
    overflow: hidden;
    animation: pio-search-panel-in 0.16s ease-out;
}

@keyframes pio-search-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.autocomplete-results-holder {
    /* was 100vh, which let a long result list run past the bottom of the
       screen with no way to reach the end */
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
}

.autocomplete-results-holder::-webkit-scrollbar {
    width: 6px;
}

.autocomplete-results-holder::-webkit-scrollbar-track {
    background: transparent;
}

.autocomplete-results-holder::-webkit-scrollbar-thumb {
    background: rgba(36, 67, 85, 0.2);
    border-radius: 3px;
}

/* keeps the card from collapsing to a sliver while the request is in flight */
.pio-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}

/* The panel keeps its white background in dark mode, while the dark theme sets
   color:#fff on the header and on .mobile-search-input. Anything in here with no
   colour of its own therefore comes out white-on-white - which is why the result
   links carry an explicit #244355. The spinner had none, so it was invisible in
   dark mode. --pio-primary-color2 is #00AACD in BOTH themes, so one value works
   either way. */
.pio-search-spinner {
    color: var(--pio-primary-color2);
}

/* "No results" line in the header search panel. The classes this markup used to
   carry - row-data-holder / centered-content / grey-text - only exist in the V1
   stylesheets, which template V2 does not load, so the message had no styling
   at all. */
.pio-search-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 12px 8px;
    text-align: center;
    font-size: 0.875rem;
    color: #6a7b85;
}

.autocomplete-results-holder > ul {
    margin: 0;
    padding: 0;
}

.autocomplete-results-holder > ul > li {
    list-style-type: none;
    /*border-bottom: solid 1px rgba(49, 55, 62, .1);*/
}

.autocomplete-results-holder > ul > li > a {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 50px;
    text-decoration: none;
    color: #244355;
    /*background-color: #fff;*/
    align-items: center;
    padding: 0.5rem 0.625rem;
    font-size: clamp(0.7241rem, calc(0.6929rem + 0.1329vw), 0.8125rem);
    justify-content: start;
    gap: 0.5rem;
    border-radius: 10px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* brand tint rather than the old flat grey */
.autocomplete-results-holder > ul > li > a:hover {
    background-color: rgba(0, 170, 205, 0.08);
    color: #0d2b3a;
}

.autocomplete-results-holder > ul > li > a > div > img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    /* the row must not squash the thumbnail when the title is long */
    flex-shrink: 0;
    background-color: #f1f4f6;
}

.mobile-search-input {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    left: 0;
    top: 0;
}

.mobile-search-input > div > .pio-search-input {
    padding-right: 4.5rem !important;
    height: 50px !important;
    width: 100% !important;
    border-radius: unset !important;
}

.search-spinner {
    top: -50px;
    right: 26px;
}

.close-mobile-search {
    right: 10px;
}

.close-mobile-search .fa-xmark {
    height: 20px;
    display: flex;
}

/* --- styleRTL.css --- */
/* search input: icon and padding flip sides */
body[dir="rtl"] .pio-search-input {
    padding-right: 3.5rem;
    background-position: calc(100% - 20px) center !important;
}

body[dir="rtl"] .search-spinner {
    right: unset;
    left: 26px;
}

body[dir="rtl"] .close-mobile-search {
    right: unset;
    left: 10px;
}

body[dir="rtl"] .mobile-search-input {
    left: unset;
    right: 0;
}

body[dir="rtl"] .mobile-search-input > div > .pio-search-input {
    padding-left: 4.5rem !important;
    padding-right: unset;
}

/* --- responsive.css   @media screen and (min-width:992px) --- */
@media screen and (min-width:992px) {
    .autocomplete-results-holder {
        max-height: 250px;
        overflow: auto;
    }
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    /* search bar */
    .pio-search-input {
        border: 1px solid var(--pio-scondery-text-dark) !important;
        background: url('../../assets/templatev2/search_icon-dark.svg') no-repeat;
    }

    .pio-search-input:focus {
        outline-color: var(--pio-primary-color-dark) !important;
    }

    /* Search results card. It used to stay white here while the header sets
       color:#fff on its children, so every child had to hardcode a dark colour
       to stay readable. Now it takes the same surface as the mega menus and
       .dropdown-menu below, and the text follows the theme instead. */
    .autocomplete-list-holder {
        background-color: #262525;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    }

    .autocomplete-results-holder > ul > li > a {
        color: #fff;
    }

    .autocomplete-results-holder > ul > li > a:hover {
        background: #303030;
        color: var(--pio-primary-color2);
    }

    .autocomplete-results-holder > ul > li > a > div > img {
        background-color: #303030;
    }

    /* bootstrap sets .text-secondary with !important, so matching it takes one */
    .autocomplete-results-holder .text-secondary {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .autocomplete-results-holder::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
    }

    .pio-search-empty {
        color: rgba(255, 255, 255, 0.65);
    }
}


/* ==========================================================================
   7. PRIMARY NAV + MEGA MENUS
   ========================================================================== */

/* --- style.css --- */
.pio-mega-menu,
.pio-mega-menu2,
.pio-mega-menu3 {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    top: 135px;
    width: 65vw;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border: 1px solid #00000012;
    transform: translate(-50%, 0%);
    transition: all 0.5s ease-in-out;
    left: 50%;
    z-index: 0;
}

.mega-menu-opened,
.mega-menu-opened2,
.mega-menu-opened3 {
    z-index: 3;
    visibility: visible !important;
    opacity: 1;
    transform: translate(-50%,0);
    transition: all 0.5s ease-in-out;
}

.submenu-header {
    background: #454849;
}

.pio-mega-menu a.mega-link,
.pio-mega-menu2 a.mega-link,
.pio-mega-menu3 a.mega-link {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    color: #000;
    padding: 10px;
}

.pio-mega-menu a.mega-link:hover,
.pio-mega-menu2 a.mega-link:hover
.pio-mega-menu3 a.mega-link:hover {
    background: #fcfcfc;
    color: var(--pio-primary-color2);
    border-radius: 6px;
}

a.mega-link:hover {
    color: var(--pio-primary-color2);
}

.pio-nav-items ul {
    margin: 0 auto;
}

.pio-nav-items ul a {
    color: #7b7b7bFF;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

.pio-nav-items .mega-link {
    color: var(--pio-scondery-color);
}

/*.pio-nav-items .mega-link:hover {
    color: var(--pio-primary-color);
}*/
.pio-nav-items ul a:hover {
    color: var(--pio-primary-color) !important;
}

.header-icons:hover svg path,
.header-icons svg:hover path {
    fill: var(--pio-primary-color) !important;
}

.header-icons i.fa-solid:hover {
    color: var(--pio-primary-color) !important;
}

/* --- responsive.css   @media screen and (min-width:1400px) --- */
@media screen and (min-width:1400px) {
    .pio-nav-items ul a {
        font-size: clamp(0.8738rem, calc(0.8294rem + 0.1895vw), 1rem);
    }

    .pio-mega-menu ul li {
        padding: 1rem;
    }
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    /* mega menus & dropdowns */
    .pio-mega-menu,
    .pio-mega-menu2,
    .pio-mega-menu3,
    .dropdown-menu {
        background-color: #262525;
    }

    .pio-mega-menu a.mega-link,
    .pio-mega-menu2 a.mega-link,
    .pio-mega-menu3 a.mega-link {
        color: #fff;
        font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    }

    .pio-mega-menu a.mega-link:hover,
    .pio-mega-menu2 a.mega-link:hover,
    .pio-mega-menu3 a.mega-link:hover {
        background: #303030;
        color: var(--pio-primary-color2);
    }

    .submenu-header {
        background: #f3f3f31f;
    }
}


/* ==========================================================================
   8. BURGER MENU (MOBILE DRAWER)
   ========================================================================== */

/* --- style.css --- */
.pio-menu-button {
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 6px;
}

.pio-burger-menu {
    transform: translateX(-100%);
    opacity: 0;
    color: #fff;
    width: 300px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 84%);
    z-index: 3;
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.pio-burger-menu-opened {
    display: flex;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

.closeBurgerMenuBtn {
    top: 10px;
    border-radius: 50%;
    margin: 0.5rem;
    width: 30px;
    height: 30px;
    left: 267px;
    background: #fff;
    box-shadow: rgb(0 0 0 / 87%) 0px 6px 12px;
}

.closeBurgerMenuBtn:hover {
    background: #c8eff7;
    opacity: 0.8;
}

/* --- styleRTL.css --- */
/* burger menu slides in from the right in RTL */
body[dir="rtl"] .pio-burger-menu {
    left: unset;
    right: 0;
    transform: translateX(100%);
}

body[dir="rtl"] .pio-burger-menu-opened {
    transform: translateX(0);
}

/* NOTE: two rules on purpose - the cascade keeps the SECOND one
   (right: 267px). The first is a leftover; kept so behavior is unchanged. */
body[dir="rtl"] .closeBurgerMenuBtn {
    right: unset;
    left: 20px;
}

body[dir="rtl"] .closeBurgerMenuBtn {
    right: 267px;
    left: unset;
}

/* --- styleRTL.css   @media screen and (min-width: 375px) --- */
@media screen and (min-width: 375px) {
    /* NOTE: "body [dir=rtl]" (with a space) targets an element WITH dir=rtl
       INSIDE body - since dir sits on <body> itself this never matches
       (dead rule). Kept as-is: "fixing" it would move the button. */
    body [dir="rtl"] .closeBurgerMenuBtn {
        right: 318px;
    }
}

/* --- styleRTL.css   @media screen and (min-width: 768px) --- */
@media screen and (min-width: 768px) {
    body[dir="rtl"] .closeBurgerMenuBtn {
        right: 322px;
        left: unset;
    }
}

/* --- responsive.css   @media screen and (min-width: 375px) --- */
@media screen and (min-width: 375px) {
    .pio-burger-menu {
        width: 320px;
    }

    .closeBurgerMenuBtn {
        left: 318px;
    }
}

/* --- responsive.css   @media screen and (min-width:768px) --- */
@media screen and (min-width:768px) {
    .closeBurgerMenuBtn {
        left: 322px;
    }
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    .closeBurgerMenuBtn {
        background: #3f3f3f;
    }
}


/* ==========================================================================
   9. SIGNED-IN USER CHIP + AVATAR DROPDOWN
   ========================================================================== */

/* --- style.css --- */
.pio-avatar-btn .dropdown-toggle {
    background: #6f6f6f;
    border-radius: 50%;
    color: #fff;
    width: 50px;
    height: 50px;
}

.pio-avatar-btn .dropdown-menu {
    border-radius: 12px;
    inset: 0px auto auto 0px !important;
    transform: unset !important;
    top: 60px !important;
    left: 0 !important;
    min-width: 200px;
}

.pio-avatar-btn .dropdown-menu .dropdown-item:first-child,
.pio-avatar-btn .dropdown-menu .dropdown-item.active, .dropdown-item:active {
    background-color: var(--bs-dropdown-link-hover-bg);
}

.pio-avatar-btn .dropdown-menu .dropdown-item:nth-child(6):hover {
    background-color: unset;
}

.pio-avatar-btn .dropdown-menu .dropdown-item,
.pio-avatar-btn .dropdown-menu .dropdown-item:focus, .dropdown-item:hover {
    border-radius: 8px;
}

.avatar-dropdown-menu .dropdown-item span,
.avatar-dropdown-menu .dropdown-item button {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    text-wrap: wrap;
}

.avatar-dropdown-menu .dropdown-item .dropdown-menu-arrow {
    top: -30px;
    left: 0%;
    width: 0;
    height: 0;
    position: relative;
}

.pio-avatar-btn .dropdown-menu .dropdown-item span a {
    color: #000;
}

.pio-avatar-btn .dropdown-toggle::after {
    display: none;
}

/* ******************************
   Navbar logged-in user chip (avatar + name)
   ****************************** */
/* .pio-avatar-btn .dropdown-toggle (legacy, further up) forces a 50px grey
   CIRCLE on this button - neutralize it: the chip is a pill, avatar + name */
.pio-user-chip,
.pio-avatar-btn .pio-user-chip {
    width: auto;
    height: auto;
    background: transparent;
    color: inherit;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: .5rem;
    border: none;
    border-radius: 2rem;
    max-width: 220px;
    transition: background-color .15s ease;
}

.pio-avatar-btn .pio-user-chip:hover {
    background: color-mix(in srgb, var(--pio-primary-color2) 14%, transparent);
}

/* ── the user menu itself (avatar dropdown) ──
   follows the page theme like every navbar dropdown; the legacy
   .pio-avatar-btn .dropdown-menu rules keep the positioning, these
   restyle the card and its rows. No .dropdown-item classes inside:
   that keeps the legacy item rules from leaking in. */
.pio-avatar-btn .user-menu {
    min-width: 264px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

/* --- responsive.css   @media screen and (min-width:1400px) --- */
@media screen and (min-width:1400px) {
    .avatar-dropdown-menu .dropdown-item span,
    .avatar-dropdown-menu .dropdown-item button {
        text-wrap: unset;
    }
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    .pio-avatar-btn .user-menu {
        border-color: rgba(255, 255, 255, .12);
    }
}


/* ==========================================================================
   10. SHARED DROPDOWN ARROW HELPER
   ========================================================================== */

/* --- style.css --- */
.dropdown-menu-arrow:before,
.dropdown-menu-arrow:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-width: 7px 8px;
    border-style: solid;
    border-color: transparent;
}

.dropdown-menu-arrow:after {
    bottom: -18px;
    right: -8px;
    border-bottom-color: #fff;
}

.dropdown-menu-arrow:before {
    bottom: -17px;
    right: -8px;
    border-bottom-color: rgba(0,0,0,.15);
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] {
    .dropdown-menu-arrow:after {
        border-bottom-color: #262525;
    }
}



/* ==========================================================================
   NOTES  -  things that look wrong and were left alone on purpose
   ==========================================================================
   This file was a MOVE. Each item below changes how the header renders if it
   is "fixed", so each is a deliberate decision, not an oversight. Fix them one
   at a time, with a screenshot before and after.

   1. MISSING COMMA in the mega-menu hover rule (section 7):

          .pio-mega-menu a.mega-link:hover,
          .pio-mega-menu2 a.mega-link:hover     <- no comma
          .pio-mega-menu3 a.mega-link:hover {

      The last two lines parse as ONE descendant selector, so only
      .pio-mega-menu (the first menu) actually gets the hover style; menus 2
      and 3 fall through to the plain `a.mega-link:hover` colour rule below it.
      Adding the comma would give menus 2 and 3 a background and radius they
      have never had.

   2. .pio-currency-dropdown .dropdown-menu declares `border` THREE times
      (section 3). The last one wins; the first two are dead. Harmless, but
      that is why the rule looks odd.

   3. The dark-theme rule in section 1 sets the header background together with
      `.accredit .accredit-svgs`, which is NOT part of the header - it is the
      accreditation logo panel on About Us and B2B. The selector came over
      whole rather than being split, so that panel keeps taking its dark
      background from here. Splitting it is safe but is a real change.

   4. `.burger-menu-background` shares its base rule with `.spinner`, the
      global page spinner, so that one rule stayed in style.css /
      dark-theme-v2.css. Everything else about the burger drawer is in
      section 8 here.

   5. `#logoImage` is used as an id in BOTH the header and the footer, so the
      logo-swap rules in section 2 hit the footer logo too. That is existing
      behaviour and the footer relies on it.
   ========================================================================== */