/* ==========================================================================
   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
     11. Desktop popovers: currency, cart and user menu share one look
   ========================================================================== */


/* ==========================================================================
   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: var(-\-pio-navbar-h);
    }

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

/* --- responsive.css   @media screen and (min-width:1600px) --- */
/* The :has here was unscoped - it looks at ALL descendants, so it matched four
   ancestors of the logo (the flex wrapper, the column, the .row and the
   .container) and forced every one of them to 72px. That is why the container
   measured shorter than its own contents and the nav row sat outside its box.
   The child combinators pin it to the wrapper the rule was written for. */
@media screen and (min-width:1600px) {
}

/* --- dark-theme-v2.css   body[data-bs-theme="dark"] --- */
body[data-bs-theme="dark"] .pio-parent-header,
body[data-bs-theme="dark"] .accredit .accredit-svgs {
    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 rgba(255, 255, 255, 0.35) !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 rgba(0, 0, 0, 0.18) !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;
    height: auto;
}

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) --- */
/* Height-driven, not width-driven. At 180px wide the logo came out 54.9px tall
   here but 48px at 1600 - bigger on the smaller screen - and both were taller
   than the mark in the design, which is what held the bar at 135px deep. */
@media screen and (min-width:1400px) {
    .pio-logo {
        height: 2.75rem;
        width: auto;
    }
}

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

/* icons & strokes */
body[data-bs-theme="dark"] .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 {
    width: max-content;
    min-width: 100%;
    padding: 8px;
}

.pio-currency-dropdown .dropdown-item {
    cursor: pointer;
    width: 100%;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 9px 12px;
    border-radius: 10px;
    color: inherit;
    transition: background-color .15s ease;
}

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

.pio-currency-dropdown .currency-title {
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

.currency-menu .dropdown-menu-arrow {
    display: none;
}

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

.pio-currency-dropdown .dropdown-toggle {
    display: inline-flex;
    align-items: center;
}

.pio-currency-caret {
    flex: 0 0 auto;
    transition: transform 0.25s ease-in-out;
}

.pio-currency-dropdown .dropdown-toggle.show .pio-currency-caret {
    transform: rotate(180deg);
}

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

.pio-currency-dropdown button {
    font-weight: 600;
    font-size: clamp(0.8125rem, calc(0.7772rem + 0.1507vw), 0.9375rem);
}


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

/* --- style.css --- */
.pio-cart-btn .badge {
    right: 0;
    background: color-mix(in srgb, var(-\-pio-blue-color) 24%, transparent);
}

/* 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 :is(i, svg) {
    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);
}

.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 :is(i, svg) {
    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-blue-color);
}

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

/* ── the popup FOLLOWS the page theme, like the currency menu:
   light page -> light popup, dark page -> dark popup ── */

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

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: #111;
}

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

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

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

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

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: #fff;
}

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

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

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

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

.cart-popup-close,
.pio-cart-scrim {
    display: none;
}

@media (max-width: 991.98px) {
    body.pio-cart-sheet-open {
        overflow: hidden;
    }

    .pio-cart-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(12, 25, 35, 0.48);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s;
        touch-action: none;
    }

    .pio-cart-sheet .cart-popup.show + .pio-cart-scrim {
        opacity: 1;
        visibility: visible;
    }

    .pio-cart-sheet .cart-popup {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        z-index: 1056;
        width: auto;
        max-width: none;
        max-height: 85vh;
        max-height: 85dvh;
        margin: 0 !important;
        border-width: 1px 0 0 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(8, 23, 35, 0.22);
    }

    .pio-cart-sheet .cart-popup.show {
        display: flex;
        flex-direction: column;
        animation: pio-cart-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .pio-cart-sheet .cart-popup-panel {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .pio-cart-sheet .cart-popup-header {
        justify-content: flex-start !important;
        flex-shrink: 0;
        padding: 14px 16px 14px 20px;
        font-size: 1.0625rem;
    }

    body[dir="rtl"] .pio-cart-sheet .cart-popup-header {
        padding: 14px 20px 14px 16px;
    }

    .pio-cart-sheet .cart-popup-count {
        font-size: 0.8125rem;
    }

    .pio-cart-sheet .cart-popup-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin-inline-start: auto;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #f0f4f6;
        color: #425a69;
    }

    .pio-cart-sheet .cart-popup-close:focus-visible {
        outline: 2px solid var(-\-pio-blue-color);
        outline-offset: 2px;
    }

    .pio-cart-sheet .cart-popup-items {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .pio-cart-sheet .cart-popup-item {
        gap: 14px !important;
        min-height: 76px;
        padding: 12px 20px;
    }

    .pio-cart-sheet .cart-popup-thumb {
        width: 76px;
        height: 54px;
        border-radius: 10px;
        background-color: #f1f4f6;
    }

    .pio-cart-sheet .cart-popup-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        font-size: 0.9375rem;
        line-height: 1.45;
    }

    .pio-cart-sheet .cart-popup-method {
        font-size: 0.8125rem;
    }

    .pio-cart-sheet .cart-popup-empty {
        padding: 28px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .pio-cart-sheet .cart-popup-empty :is(i, svg) {
        font-size: 2rem;
    }

    .pio-cart-sheet .cart-popup-empty p {
        font-size: 0.9375rem;
    }

    .pio-cart-sheet .cart-popup-footer {
        flex-shrink: 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    }

    .pio-cart-sheet .cart-popup .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        font-size: 1rem;
    }

    .pio-cart-sheet .cart-popup-empty .btn {
        display: inline-flex;
        padding-inline: 28px;
    }

    body[data-bs-theme="dark"] .pio-cart-sheet .cart-popup-close {
        background: #232b35;
        color: #d4e2ec;
    }

    body[data-bs-theme="dark"] .pio-cart-sheet .cart-popup-thumb {
        background-color: #1f2730;
    }

    body[data-bs-theme="dark"] .pio-cart-scrim {
        background: rgba(0, 0, 0, 0.64);
    }
}

@keyframes pio-cart-sheet-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .pio-cart-sheet .cart-popup.show {
        animation: none;
    }
}


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

/* --- style.css --- */
.pio-search-input {
    border-radius: 20px;
    width: 90%;
    height: 36px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    font-size: 0.875rem;
    color: #333;
    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;
}

.pio-search-input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

/* 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;
}

/* "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: color-mix(in srgb, var(-\-pio-blue-color) 8%, transparent);
    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;
    /* Keep search above the menu button, drawer and header dropdowns. */
    z-index: 1050;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(12, 25, 35, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Angular keeps ng-show panels displayed while these transitions run. */
.mobile-search-input.ng-hide-add,
.mobile-search-input.ng-hide-remove {
    display: flex !important;
}

.mobile-search-input.ng-hide {
    opacity: 0;
}

.mobile-search-input.ng-hide .pio-search-card {
    opacity: 0;
    transform: translateY(-24px) scale(0.98);
}

.pio-search-card {
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 20px;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 24px;
    background: #fff;
    color: #172e3c;
    box-shadow: 0 24px 80px rgba(8, 23, 35, 0.25);
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: top center;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pio-search-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.pio-search-heading h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    color: inherit;
}

.pio-search-heading p {
    margin: 0;
    color: #697c87;
    font-size: 0.8125rem;
    line-height: 1.7;
}

.mobile-search-input .close-mobile-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f4f6;
    color: #425a69;
    transition: background-color 0.15s ease;
}

.mobile-search-input .close-mobile-search:hover {
    background: #e5edf1;
}

.mobile-search-input .close-mobile-search:focus-visible {
    outline: 2px solid var(-\-pio-blue-color);
    outline-offset: 3px;
}

.pio-search-field {
    flex-shrink: 0;
}

.mobile-search-input .pio-search-field .pio-search-input {
    width: 100%;
    height: 54px;
    padding: 0 16px 0 48px;
    border: 1px solid #d4dfe5;
    border-radius: 14px;
    background-color: #f6f9fb;
    background-image: url('../../assets/templatev2/search_icon.svg');
    background-position: 16px center !important;
    background-size: 20px;
    font-size: 16px;
    color: #172e3c;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mobile-search-input .pio-search-field .pio-search-input:focus {
    border-color: var(-\-pio-blue-color);
    box-shadow: 0 0 0 3px rgba(5, 83, 134, 0.1);
    background-color: #fff;
}

.mobile-search-input .pio-search-input::placeholder {
    color: #697c87;
    font-size: 16px;
}

body[dir="rtl"] .mobile-search-input .pio-search-field .pio-search-input {
    padding: 0 48px 0 16px;
    background-position: calc(100% - 16px) center !important;
}

.pio-search-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 8px 16px;
    text-align: center;
    overflow-y: auto;
}

.pio-search-welcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: #edf5fa;
    color: var(-\-pio-blue-color);
}

.pio-search-welcome p {
    margin: 0;
    color: #697c87;
    font-size: 0.875rem;
    line-height: 1.8;
}

.mobile-search-input .autocomplete-list-holder {
    position: static;
    width: 100%;
    min-height: 0;
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: none;
}

.mobile-search-input .autocomplete-results-holder {
    max-height: none;
    overflow: visible;
}

.mobile-search-input .autocomplete-results-holder > ul > li + li {
    border-top: 1px solid #edf1f4;
}

.mobile-search-input .autocomplete-results-holder > ul > li > a {
    min-height: 72px;
    padding: 12px 8px;
    font-size: 0.9375rem;
}

.mobile-search-input .autocomplete-results-holder > ul > li > a > div {
    min-width: 0;
}

.mobile-search-input .autocomplete-results-holder > ul > li > a > div > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-search-input,
    .pio-search-card {
        transition: none;
    }
}

body[data-bs-theme="dark"] .mobile-search-input {
    background: rgba(0, 0, 0, 0.64);
}

body[data-bs-theme="dark"] .pio-search-card {
    background: #1b2228;
    border-color: rgba(255, 255, 255, 0.1);
    color: #edf3f7;
}

body[data-bs-theme="dark"] .pio-search-heading p,
body[data-bs-theme="dark"] .pio-search-welcome p {
    color: #a5b5c0;
}

body[data-bs-theme="dark"] .mobile-search-input .close-mobile-search {
    background: #2a343d;
    color: #d4e2ec;
}

body[data-bs-theme="dark"] .mobile-search-input .close-mobile-search:hover {
    background: #34424d;
}

body[data-bs-theme="dark"] .mobile-search-input .pio-search-field .pio-search-input {
    background-color: #232d35;
    background-image: url('../../assets/templatev2/search_icon-dark.svg');
    background-position: 16px center !important;
    background-size: 20px;
    border-color: #465661 !important;
    color: #edf3f7;
}

body[data-bs-theme="dark"][dir="rtl"] .mobile-search-input .pio-search-field .pio-search-input {
    background-position: calc(100% - 16px) center !important;
}

body[data-bs-theme="dark"] .mobile-search-input .pio-search-field .pio-search-input:focus {
    border-color: #74b5dd !important;
    box-shadow: 0 0 0 3px rgba(116, 181, 221, 0.14);
}

body[data-bs-theme="dark"] .mobile-search-input .pio-search-input::placeholder {
    color: #a5b5c0;
}

body[data-bs-theme="dark"] .pio-search-welcome-icon {
    background: #253b4a;
    color: #8bc8ee;
}

body[data-bs-theme="dark"] .mobile-search-input .autocomplete-list-holder {
    background: transparent;
    box-shadow: none;
}

body[data-bs-theme="dark"] .mobile-search-input .autocomplete-results-holder > ul > li + li {
    border-color: #303c46;
}

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

/* --- 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;
}

/* --- 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"] --- */
/* search bar */
body[data-bs-theme="dark"] .pio-search-input {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: url('../../assets/templatev2/search_icon-dark.svg') no-repeat;
    color: #fff;
}

body[data-bs-theme="dark"] .pio-search-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

body[data-bs-theme="dark"] .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. */
body[data-bs-theme="dark"] .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);
}

body[data-bs-theme="dark"] .autocomplete-results-holder > ul > li > a {
    color: #fff;
}

body[data-bs-theme="dark"] .autocomplete-results-holder > ul > li > a:hover {
    background: #303030;
    color: var(-\-pio-blue-color);
}

body[data-bs-theme="dark"] .autocomplete-results-holder > ul > li > a > div > img {
    background-color: #303030;
}

/* bootstrap sets .text-secondary with !important, so matching it takes one */
body[data-bs-theme="dark"] .autocomplete-results-holder .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

body[data-bs-theme="dark"] .autocomplete-results-holder::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body[data-bs-theme="dark"] .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: var(-\-pio-navbar-h);
    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-blue-color);
    border-radius: 6px;
}

a.mega-link:hover {
    color: var(-\-pio-blue-color);
}

.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);
    font-weight: 500;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    transition: color 0.25s ease-in-out;
}

/* The bar has four grounds, not two: each theme also flips when a hero sits
   under an inverted header. #7b7b7b was one grey trying to serve all four and
   reading washed out on the two light ones. */
body[data-bs-theme="light"] .pio-nav-items ul a {
    color: #4a4e50;
}

body[data-bs-theme="dark"] .pio-nav-items ul a {
    color: #c9cdcf;
}

body[data-bs-theme="light"] .pio-header-invert .pio-nav-items ul a {
    color: #d5d8d9;
}

body[data-bs-theme="dark"] .pio-header-invert .pio-nav-items ul a {
    color: #4a4e50;
}

.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;
}

button.header-icons {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
}

.header-icons i.fa-solid {
    font-size: 23px;
    line-height: 1;
}

.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), 0.9375rem);
    }

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

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

body[data-bs-theme="dark"] .pio-mega-menu a.mega-link,
body[data-bs-theme="dark"] .pio-mega-menu2 a.mega-link,
body[data-bs-theme="dark"] .pio-mega-menu3 a.mega-link {
    color: #fff;
    font-size: clamp(0.7747rem, calc(0.7394rem + 0.1507vw), 0.875rem);
}

body[data-bs-theme="dark"] .pio-mega-menu a.mega-link:hover,
body[data-bs-theme="dark"] .pio-mega-menu2 a.mega-link:hover,
body[data-bs-theme="dark"] .pio-mega-menu3 a.mega-link:hover {
    background: #303030;
    color: var(-\-pio-blue-color);
}

body[data-bs-theme="dark"] .submenu-header {
    background: #f3f3f31f;
}


/* ==========================================================================
   7b. SIGN IN / SIGN UP BUTTONS IN THE NAVBAR
   ==========================================================================
   Only the pair that lives in the header. `.pio-btn` is a site-wide button and
   responsive.css widens its padding at the top end - 24px a side from 576px,
   27px a side from 1400px - which is right for a hero CTA and far too much for
   two buttons sharing a navbar column with the language and theme icons.

   Logged OUT that column has to hold: two buttons + the gap between them + two
   icons + two more gaps. At the stock 27px padding it did not fit, and the pair
   spilled out of its column into the search box beside it. Logged IN it never
   showed, because the avatar chip is capped at 220px by .pio-user-chip.

   16px a side at lg, 24px from xl up, with the label at 12px / 13px.

   The Figma's roomy buttons are an English artefact: "SignIn" is ~50px where
   "تسجيل الدخول" is ~79px at the 13px that responsive.css gives .pio-btn from
   1400px up. Two Arabic labels at that size, plus the language and theme icons,
   leave almost nothing for padding - the ceiling was 20px at xxl.

   The label used to be pinned to 11px to fund 22 / 30px of padding, which left
   128px of label floating inside 256px of button - the smallest type in a bar
   whose nav sits at 15-17px, and the only text on the page set below 12px.
   Spending the same budget the other way round reads better and still fits,
   because padding is the cheaper half of the pair. Measured at lg / xxl, where
   the row has 296px / 346px for the buttons, the gap and the two icons:

       font       labels          padding a side   row content   spare
       11px       127.6 / 127.6      22 / 30       293.6/333.6   2.4/12.4
       12 / 13    148.5 / 160.5      16 / 24       290.5/342.5   5.5/3.5

   Both columns stay in the black, and lg - always the tight one - ends up with
   more room than it had. Re-measure this table if a label ever changes.

   Font override is scoped to these two buttons only - .pio-btn is site-wide and
   its own size still applies everywhere else.

   ⚠ Do NOT buy room here by narrowing the search column. Two separate rules
   constrain that row and taking width off the middle breaks both:

     symmetry  the search input is centred inside its column, so it only sits on
               the page's centre line when the columns flanking it are EQUAL.
               3/6/3 and 4/4/4 both hold; an interim 3/5/4 pushed it 55px off.
     width     the design has the search at ~44% of the bar. 6/12 x 0.9 = 45%.
               Dropping to 4/12 at xxl gives 30% and leaves dead space either
               side, which is visibly wrong even though it stays centred.

   So the grid is fixed at 4/4/4 (lg) and 3/6/3 (xxl), and this budget is met
   with padding and gaps alone. 18px is the ceiling for lg, the tight one.

   !important and the doubled context are both needed: the rule being overridden
   is itself !important, so this has to be too, and .pio-parent-header ahead of
   the class puts it at (0,2,0) against (0,1,0) - it wins on specificity rather
   than on this file happening to load last in the bundle.

   NOTE: .pio-btn is `width: max-content`, so these can never shrink to fit -
   they overflow instead. If a longer label is ever added here, this budget is
   the thing to re-check. */
.pio-parent-header .pio-btn-signUp,
.pio-parent-header .pio-btn-signIn {
    padding-block: 7px !important;
    padding-inline: 16px !important;
    font-size: 0.75rem !important;
    font-weight: 600;
}

/* The outlined half took its label colour from the site-wide .pio-btn-signUp,
   a #7b7b7b that was picked against a white card and sits at 4.0:1 here. These
   put it on the same four-ground scale as the nav links above, so the pair and
   the nav read as one set of controls instead of three greys. */
body[data-bs-theme="light"] .pio-parent-header .pio-btn-signUp {
    color: #4a4e50;
}

body[data-bs-theme="dark"] .pio-parent-header .pio-btn-signUp {
    color: #d5d8d9;
}

body[data-bs-theme="light"] .pio-header-invert .pio-btn-signUp {
    color: #d5d8d9;
}

body[data-bs-theme="dark"] .pio-header-invert .pio-btn-signUp {
    color: #4a4e50;
}

/* Desktop gets the bigger label and the roomier padding. lg (992-1199) has
   296px of column and nothing to give, so both bumps start at xl, where the
   column is 356px, and carry into xxl on the back of the 28/44/28 split below,
   where they leave 3.5px in hand. */
@media (min-width: 1200px) {
    .pio-parent-header .pio-btn-signUp,
    .pio-parent-header .pio-btn-signIn {
        padding-inline: 24px !important;
        font-size: 0.8125rem !important;
    }
}

/* ── navbar column split at xxl: 28 / 44 / 28 instead of Bootstrap's 3/6/3 ──

   Bootstrap only offers twelfths, and none of them fit this bar. 3/6/3 is
   25/50/25: the search gets more than the design asks for and the side columns
   get 306px - LESS than the 356px they have at xl. The widest screen ended up
   with the smallest sign-in column, because 3/12 of a big container is smaller
   than 4/12 of a middling one, which is why the buttons could not grow there.

   28/44/28 fixes all three things at once:
     symmetric   sides equal, so the search stays on the page centre line
     44%         exactly the width the design gives the search bar
     346px       side columns, up from 306px - enough for 30px button padding

   The input goes to 100% because the column is now sized to the target width
   directly, rather than being oversized and having the input sit at 90% inside
   it. Two classes, not a nth-child, so it is obvious in the markup which
   columns are being resized. */
@media (min-width: 1400px) {
    .pio-parent-header .pio-nav-side {
        width: 28%;
    }

    .pio-parent-header .pio-nav-search {
        width: 44%;
    }

        .pio-parent-header .pio-nav-search .pio-search-input {
            width: 100%;
        }
}


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

/* --- style.css --- */
.pio-parent-header {
    -\-pio-drawer-bg: #ffffff;
    -\-pio-drawer-fg: #15181a;
    -\-pio-drawer-muted: #697074;
    -\-pio-drawer-line: rgba(21, 24, 26, 0.08);
    -\-pio-drawer-line-strong: rgba(21, 24, 26, 0.16);
    -\-pio-drawer-hover: #f1f4f5;
    -\-pio-drawer-accent: var(-\-pio-blue-color);
    -\-pio-drawer-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    -\-pio-drawer-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-bs-theme="dark"] .pio-parent-header {
    -\-pio-drawer-bg: #141516;
    -\-pio-drawer-fg: #f2f3f3;
    -\-pio-drawer-muted: #9ba2a5;
    -\-pio-drawer-line: rgba(255, 255, 255, 0.08);
    -\-pio-drawer-line-strong: rgba(255, 255, 255, 0.16);
    -\-pio-drawer-hover: #1e2022;
}

.pio-menu-button {
    position: relative;
    z-index: 5;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 30px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 6px;
    transition: color 0.3s ease;
}

.pio-menu-lines {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.pio-menu-lines > span {
    position: absolute;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.2s 0.2s var(-\-pio-drawer-ease),
                transform 0.2s var(-\-pio-drawer-ease),
                opacity 0.1s 0.2s linear,
                width 0.25s var(-\-pio-drawer-ease);
}

.pio-menu-lines > span:nth-child(1) {
    top: 0;
}

.pio-menu-lines > span:nth-child(2) {
    top: 7px;
    width: 68%;
}

.pio-menu-lines > span:nth-child(3) {
    top: 14px;
}

.pio-menu-button:hover .pio-menu-lines > span:nth-child(2) {
    width: 100%;
}

.pio-menu-button.is-open {
    color: var(-\-pio-drawer-fg);
}

.pio-menu-button.is-open .pio-menu-lines > span {
    transition: top 0.2s var(-\-pio-drawer-ease),
                transform 0.25s 0.2s var(-\-pio-drawer-ease-out),
                opacity 0.1s 0.1s linear,
                width 0.25s var(-\-pio-drawer-ease);
}

.pio-menu-button.is-open .pio-menu-lines > span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.pio-menu-button.is-open .pio-menu-lines > span:nth-child(2) {
    opacity: 0;
}

.pio-menu-button.is-open .pio-menu-lines > span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

.pio-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 2;
    background: rgba(6, 8, 10, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.pio-drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s;
}

.pio-burger-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;
    color: var(-\-pio-drawer-fg);
    background: var(-\-pio-drawer-bg);
    box-shadow: none;
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
    transition: transform 0.4s var(-\-pio-drawer-ease),
                box-shadow 0.4s ease,
                visibility 0s linear 0.4s;
}

.pio-burger-menu-opened {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.5);
    transition: transform 0.6s var(-\-pio-drawer-ease-out),
                box-shadow 0.6s ease,
                visibility 0s;
}

.pio-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 70px;
    padding-inline: 20px 14px;
    border-bottom: 1px solid var(-\-pio-drawer-line);
}

.pio-drawer-brand {
    display: block;
}

.pio-drawer-close {
    display: flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.pio-menu-button.is-open:not(.pio-drawer-close) {
    opacity: 0;
    visibility: hidden;
    transition: color 0.3s ease, opacity 0.15s ease, visibility 0s linear 0.15s;
}

.pio-drawer-logo {
    display: block;
    width: 128px;
    height: auto;
}

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

.pio-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px 40px;
}

.pio-drawer-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pio-drawer-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pio-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pio-drawer-btn-primary {
    background: var(-\-pio-drawer-accent);
    color: #fff;
}

.pio-drawer-btn-primary:hover {
    background: #0095b4;
    color: #fff;
}

.pio-drawer-btn-outline {
    border-color: var(-\-pio-drawer-line-strong);
    color: var(-\-pio-drawer-fg);
}

.pio-drawer-btn-outline:hover {
    border-color: var(-\-pio-drawer-accent);
    color: var(-\-pio-drawer-accent);
}

.pio-drawer-link > .pio-drawer-tile {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(-\-pio-drawer-accent) 12%, transparent);
    color: var(-\-pio-drawer-accent);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pio-drawer-tile svg {
    width: 18px;
    height: 18px;
}

.pio-drawer-nav {
    font-weight: 600;
}

.pio-drawer-nav:hover .pio-drawer-tile,
.pio-drawer-nav:focus-visible .pio-drawer-tile {
    background: var(-\-pio-drawer-accent);
    color: #fff;
}

.pio-drawer-link.pio-drawer-logout {
    color: #e5484d;
    font-weight: 600;
}

.pio-drawer-logout > .pio-drawer-tile {
    background: rgba(229, 72, 77, 0.1);
    color: #e5484d;
}

.pio-drawer-logout:hover > .pio-drawer-tile,
.pio-drawer-logout:focus-visible > .pio-drawer-tile {
    background: #e5484d;
    color: #fff;
}

body[data-bs-theme="dark"] .pio-drawer-link > .pio-drawer-tile {
    background: color-mix(in srgb, var(-\-pio-drawer-accent) 45%, transparent);
    color: #fff;
}

body[data-bs-theme="dark"] .pio-drawer-link.pio-drawer-logout {
    color: #ff6b7a;
}

body[data-bs-theme="dark"] .pio-drawer-logout > .pio-drawer-tile {
    background: rgba(255, 107, 122, 0.14);
    color: #ff6b7a;
}

body[data-bs-theme="dark"] .pio-drawer-logout:hover > .pio-drawer-tile {
    background: #e5484d;
    color: #fff;
}

.pio-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(-\-pio-drawer-hover);
}

.pio-drawer-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.pio-drawer-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(-\-pio-drawer-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pio-drawer-avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

.pio-drawer-user-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    text-align: start;
}

.pio-drawer-user-name,
.pio-drawer-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pio-drawer-user-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.pio-drawer-user-email {
    font-size: 0.75rem;
    color: var(-\-pio-drawer-muted);
}

.pio-drawer-group,
.pio-drawer-foot {
    padding-top: 20px;
    border-top: 1px solid var(-\-pio-drawer-line);
}

.pio-drawer-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pio-drawer-view > .pio-drawer-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.pio-drawer-label {
    padding-inline: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(-\-pio-drawer-muted);
}

.pio-drawer-title {
    padding-inline: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(-\-pio-drawer-fg);
}

.pio-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pio-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(-\-pio-drawer-fg);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pio-drawer-link > span {
    flex: 1 1 auto;
    min-width: 0;
}

.pio-drawer-link > .pio-drawer-avatar {
    flex: 0 0 auto;
    aspect-ratio: 1;
}

.pio-drawer-link:hover,
.pio-drawer-link:focus-visible {
    background: var(-\-pio-drawer-hover);
    color: var(-\-pio-drawer-fg);
}

.pio-drawer-link:active {
    background: var(-\-pio-drawer-line-strong);
}

.pio-drawer-list-quiet .pio-drawer-link {
    min-height: 42px;
    font-size: 0.9rem;
    color: var(-\-pio-drawer-muted);
}

.pio-drawer-list-quiet .pio-drawer-link:hover {
    color: var(-\-pio-drawer-fg);
}

.pio-drawer-logout:hover,
.pio-drawer-list-quiet .pio-drawer-logout:hover {
    color: #e5484d;
}

.pio-drawer-chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(-\-pio-drawer-muted);
    transition: transform 0.25s var(-\-pio-drawer-ease-out), color 0.2s ease;
}

.pio-drawer-link:hover .pio-drawer-chevron {
    transform: translateX(3px);
    color: var(-\-pio-drawer-accent);
}

.pio-drawer-logout:hover .pio-drawer-chevron {
    color: inherit;
}

.pio-drawer-account.is-current {
    background: var(-\-pio-drawer-hover);
}

.pio-drawer-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

.pio-drawer-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(-\-pio-drawer-accent);
    stroke: var(-\-pio-drawer-bg);
}

.pio-drawer-subject img {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pio-drawer-back,
.pio-drawer-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(-\-pio-drawer-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(-\-pio-drawer-fg);
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.pio-drawer-back {
    align-self: flex-start;
    height: 36px;
    padding-inline: 12px 14px;
}

.pio-drawer-chip {
    height: 38px;
    padding-inline: 14px;
}

.pio-drawer-back:hover,
.pio-drawer-chip:hover {
    border-color: var(-\-pio-drawer-accent);
    color: var(-\-pio-drawer-accent);
}

.pio-drawer-back:hover .pio-drawer-chevron {
    transform: translateX(-3px);
    color: inherit;
}

.pio-drawer-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pio-drawer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    margin-top: -6px;
    padding-inline: 12px;
}

.pio-drawer-legal a {
    padding-block: 6px;
    color: var(-\-pio-drawer-muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pio-drawer-legal a:hover,
.pio-drawer-legal a:focus-visible {
    color: var(-\-pio-drawer-accent);
}

@keyframes pio-drawer-rise {
    from {
        opacity: 0;
        transform: translate3d(-16px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pio-drawer-rise-rtl {
    from {
        opacity: 0;
        transform: translate3d(16px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pio-burger-menu-opened .pio-drawer-head,
.pio-burger-menu-opened .pio-drawer-view > :not(.pio-drawer-list),
.pio-burger-menu-opened .pio-drawer-view > .pio-drawer-list > * {
    animation: pio-drawer-rise 0.55s var(-\-pio-drawer-ease-out) both;
    animation-delay: calc(90ms + var(-\-pio-drawer-step, 0) * 45ms);
}

body[dir="rtl"] .pio-burger-menu-opened .pio-drawer-head,
body[dir="rtl"] .pio-burger-menu-opened .pio-drawer-view > :not(.pio-drawer-list),
body[dir="rtl"] .pio-burger-menu-opened .pio-drawer-view > .pio-drawer-list > * {
    animation-name: pio-drawer-rise-rtl;
}

.pio-drawer-view > :nth-child(2) { -\-pio-drawer-step: 1; }
.pio-drawer-view > :nth-child(3) { -\-pio-drawer-step: 2; }
.pio-drawer-view > :nth-child(4) { -\-pio-drawer-step: 3; }
.pio-drawer-view > :nth-child(5) { -\-pio-drawer-step: 4; }
.pio-drawer-view > :nth-child(6) { -\-pio-drawer-step: 5; }
.pio-drawer-view > :nth-child(n+7) { -\-pio-drawer-step: 6; }
.pio-drawer-view > .pio-drawer-list > :nth-child(1) { -\-pio-drawer-step: 2; }
.pio-drawer-view > .pio-drawer-list > :nth-child(2) { -\-pio-drawer-step: 3; }
.pio-drawer-view > .pio-drawer-list > :nth-child(3) { -\-pio-drawer-step: 4; }
.pio-drawer-view > .pio-drawer-list > :nth-child(4) { -\-pio-drawer-step: 5; }
.pio-drawer-view > .pio-drawer-list > :nth-child(5) { -\-pio-drawer-step: 6; }
.pio-drawer-view > .pio-drawer-list > :nth-child(6) { -\-pio-drawer-step: 7; }
.pio-drawer-view > .pio-drawer-list > :nth-child(7) { -\-pio-drawer-step: 8; }
.pio-drawer-view > .pio-drawer-list > :nth-child(n+8) { -\-pio-drawer-step: 9; }

body[dir="rtl"] .pio-drawer-chevron {
    transform: scaleX(-1);
}

body[dir="rtl"] .pio-drawer-link:hover .pio-drawer-chevron {
    transform: scaleX(-1) translateX(3px);
}

body[dir="rtl"] .pio-drawer-back:hover .pio-drawer-chevron {
    transform: scaleX(-1) translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .pio-burger-menu,
    .pio-burger-menu-opened,
    .pio-drawer-scrim,
    .pio-menu-lines > span {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .pio-burger-menu-opened * {
        animation: none !important;
    }
}

.closeBurgerMenuBtn {
    top: 10px;
    border-radius: 50%;
    margin: 0.5rem;
    width: 30px;
    height: 30px;
    left: 267px;
    background: #fff;
    box-shadow: rgba(0, 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: translate3d(100%, 0, 0);
}

body[dir="rtl"] .pio-burger-menu-opened {
    transform: translate3d(0, 0, 0);
    box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.5);
}

/* 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) {
    .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 .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;
    padding-inline-end: 14px;
    display: flex;
    align-items: center;
    gap: .5rem;
    border: none;
    border-radius: 999px;
    max-width: 220px;
    transition: background-color .15s ease;
}

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

/* ── the user menu itself (avatar dropdown) ──
   its card and placement are in section 11. No .dropdown-item classes
   inside: that keeps the legacy item rules from leaking in. */
.pio-avatar-btn .user-menu {
    min-width: 264px;
    padding: 8px;
}

/* --- 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;
    }
}


/* ==========================================================================
   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;
}


/* ==========================================================================
   11. DESKTOP POPOVERS: CURRENCY, CART AND USER MENU SHARE ONE LOOK
   ========================================================================== */

/* One card, 12px under its button and centred on it, with an arrow pointing
   at the button. Centring is symmetric, so RTL needs no rules of its own.
   !important beats the inline position Popper writes on the currency and
   user menus. The mobile cart sheet is not part of this. */
.pio-currency-dropdown .currency-menu,
.pio-cart-dropdown.d-lg-block .cart-popup,
.pio-avatar-btn .user-menu {
    top: calc(100% + 12px) !important;
    right: auto !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

body[data-bs-theme="dark"] .pio-currency-dropdown .currency-menu,
body[data-bs-theme="dark"] .pio-cart-dropdown.d-lg-block .cart-popup,
body[data-bs-theme="dark"] .pio-avatar-btn .user-menu {
    background-color: #262525;
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

/* the arrow takes the card's fill and border */
.pio-currency-dropdown .currency-menu::before,
.pio-cart-dropdown.d-lg-block .cart-popup::before,
.pio-avatar-btn .user-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    z-index: -1;
    width: 12px;
    height: 12px;
    border-style: solid;
    border-width: 1px 0 0 1px;
    border-color: inherit;
    border-top-left-radius: 3px;
    background-color: inherit;
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

/* rows: the user menu's hover on all three */
.pio-currency-dropdown .currency-menu .dropdown-item:hover,
.pio-currency-dropdown .currency-menu .dropdown-item:focus,
.pio-currency-dropdown .currency-menu .dropdown-item:active,
.pio-cart-dropdown.d-lg-block .cart-popup-item:hover {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 10%, transparent);
}

body[data-bs-theme="dark"] .pio-currency-dropdown .currency-menu .dropdown-item {
    color: #fff;
}

body[data-bs-theme="dark"] .pio-currency-dropdown .currency-menu .dropdown-item:hover,
body[data-bs-theme="dark"] .pio-currency-dropdown .currency-menu .dropdown-item:focus,
body[data-bs-theme="dark"] .pio-currency-dropdown .currency-menu .dropdown-item:active,
body[data-bs-theme="dark"] .pio-cart-dropdown.d-lg-block .cart-popup-item:hover {
    background-color: rgba(255, 255, 255, .07);
}

/* cart: same 8px inset and rounded rows as the user menu */
.pio-cart-dropdown.d-lg-block .cart-popup-panel {
    padding: 8px;
}

.pio-cart-dropdown.d-lg-block .cart-popup-header {
    margin: 0 4px 6px;
    padding: 10px 8px 8px;
}

.pio-cart-dropdown.d-lg-block .cart-popup-item {
    padding: 8px 12px;
    border-bottom: 0;
    border-radius: 10px;
}

.pio-cart-dropdown.d-lg-block .cart-popup-footer {
    margin: 6px 4px 0;
    padding: 12px 8px 4px;
}



/* ==========================================================================
   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. 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.

   3. `.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.

   4. `#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.
   ========================================================================== */


.pio-parent-header {
    -\-pio-navbar-line: #f3f3f3;
    border-bottom: 1px solid var(-\-pio-navbar-line);
}

body[data-bs-theme="dark"] .pio-parent-header {
    -\-pio-navbar-line: #0c0c0c;
}

body[data-bs-theme="light"] .pio-parent-header.pio-header-invert {
    -\-pio-navbar-line: #0c0c0c;
}

body[data-bs-theme="dark"] .pio-parent-header.pio-header-invert {
    -\-pio-navbar-line: #f3f3f3;
}

.pio-parent-header .pio-nav-shell {
    padding-inline: 1rem;
}

@media (max-width: 991.98px) {
    .pio-parent-header .pio-nav-shell > .row {
        -\-bs-gutter-x: 0;
    }
}

.pio-nav-link {
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a4e50;
    white-space: nowrap;
    transition: color 0.2s ease-in-out;
}

.pio-parent-header .pio-nav-link:hover,
.pio-parent-header .pio-explore.is-open .pio-explore-btn {
    color: var(-\-pio-primary-color) !important;
}

.pio-explore {
    position: relative;
    align-items: center;
}

.pio-explore-scrim {
    position: fixed;
    top: var(-\-pio-navbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(12, 14, 18, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s ease-in-out, visibility 0.26s;
}

.pio-explore.is-open .pio-explore-scrim {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.pio-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 1.5;
}

.pio-explore-caret {
    flex: 0 0 auto;
    transition: transform 0.25s ease-in-out;
}

.pio-explore.is-open .pio-explore-caret {
    transform: rotate(180deg);
}

.pio-explore-panel {
    position: fixed;
    top: var(-\-pio-navbar-h);
    left: 0;
    right: 0;
    padding-block: 1.5rem 1.75rem;
    background: #fff;
    border-bottom: 1px solid var(-\-pio-navbar-line);
    box-shadow: 0 18px 44px rgba(16, 42, 58, 0.16);
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.2s ease-in-out, clip-path 0.34s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.34s;
    z-index: 5;
}

.pio-explore.is-open .pio-explore-panel {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
}

.pio-explore-head {
    padding-bottom: 0.625rem;
    margin-bottom: 0.625rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.pio-explore-panel {
    -\-pio-tab-font: 0.75rem;
    -\-pio-tab-pad-y: 0.2rem;
    -\-pio-tab-pad-x: 0.7rem;
    -\-pio-tab-min-h: 1.375rem;
    -\-pio-tab-track-pad: 0.125rem;
    -\-pio-tab-gap: 0.125rem;
}

.pio-explore-panel .pio-popular-tabs .pio-explore-tab {
    font-size: var(-\-pio-tab-font);
    line-height: 1.25;
}

.pio-explore-panel .pio-popular-tabs {
    -\-pio-tab-pad-y: 0.35rem;
    -\-pio-tab-pad-x: 0.125rem;
    -\-pio-tab-gap: 1.25rem;
    -\-pio-tab-track-pad: 0;
    -\-pio-tab-radius: 0;
}

.pio-explore-panel .pio-popular-tabs .pio-tabs-pill {
    top: auto;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
}

.pio-explore-panel .pio-popular-tabs .pio-explore-tab.is-active,
.pio-explore-panel .pio-popular-tabs .pio-explore-tab.is-active:hover {
    color: #000;
}

@keyframes pioExploreSwap1 {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes pioExploreSwap2 {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes pioExploreSwap3 {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: none; }
}

.pio-explore-grid.is-tab-1 .pio-explore-item {
    animation: pioExploreSwap1 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pio-explore-grid.is-tab-2 .pio-explore-item {
    animation: pioExploreSwap2 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pio-explore-grid.is-tab-3 .pio-explore-item {
    animation: pioExploreSwap3 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.pio-explore-grid .pio-explore-item:nth-child(4n + 2) {
    animation-delay: 50ms;
}

.pio-explore-grid .pio-explore-item:nth-child(4n + 3) {
    animation-delay: 100ms;
}

.pio-explore-grid .pio-explore-item:nth-child(4n + 4) {
    animation-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
    .pio-explore-grid.is-tab-1 .pio-explore-item,
    .pio-explore-grid.is-tab-2 .pio-explore-item,
    .pio-explore-grid.is-tab-3 .pio-explore-item {
        animation: none;
    }

    .pio-tabs-pill {
        transition: none;
    }

    .pio-explore-panel {
        transition: opacity 0.2s ease-in-out, visibility 0.2s;
        clip-path: none;
    }
}

.pio-explore-body {
    min-height: 9rem;
}

.pio-explore-panel .container {
    max-height: calc(100vh - var(-\-pio-navbar-h) - 2rem);
    overflow-y: auto;
    scrollbar-width: none;
}

.pio-explore-panel .container::-webkit-scrollbar {
    display: none;
}

.pio-explore-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
}

.pio-explore-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.125rem 1rem;
}

.pio-explore-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 12px;
    color: #2b2f31;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.18s ease-in-out, color 0.18s ease-in-out;
}

.pio-explore-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(-\-pio-primary-color);
}

.pio-explore-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

@media screen and (min-width: 992px) {
    .pio-parent-header .pio-nav-shell {
        height: 100%;
        padding-inline: clamp(1rem, 2.5vw, 2.75rem);
    }

    .pio-parent-header .pio-nav-shell > .row {
        height: 100%;
        flex-wrap: nowrap;
    }

    .pio-parent-header .pio-nav-side {
        flex: 0 0 auto;
        width: auto;
    }

    .pio-parent-header .pio-nav-search {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

        .pio-parent-header .pio-nav-search .forSearchOut {
            width: 100%;
            align-items: stretch;
        }

        .pio-parent-header .pio-nav-search .pio-search-input {
            width: 100%;
            height: 44px;
            border-radius: 999px;
            font-size: 0.9375rem;
        }

        .pio-parent-header .pio-nav-search .autocomplete-list-holder {
            width: 100%;
            top: 48px;
        }
}

@media screen and (min-width: 1400px) {
    .pio-parent-header .pio-nav-side {
        width: auto;
    }

    .pio-parent-header .pio-nav-search {
        width: auto;
    }
}

body[data-bs-theme="dark"] .pio-nav-link {
    color: #c9cdcf;
}

body[data-bs-theme="dark"] .pio-explore-panel {
    background: var(-\-body-background);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

body[data-bs-theme="dark"] .pio-explore-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body[data-bs-theme="dark"] .pio-explore-item {
    color: #e6e9ea;
}

body[data-bs-theme="dark"] .pio-explore-item:hover {
    background: #303030;
    color: var(-\-pio-blue-color);
}

body[data-bs-theme="light"] .pio-header-invert .pio-nav-link {
    color: #d5d8d9;
}

body[data-bs-theme="dark"] .pio-header-invert .pio-nav-link {
    color: #4a4e50;
}
.pio-explore-grid .pio-explore-item.ng-leave,
.pio-drawer-link.pio-drawer-subject.ng-leave {
    display: none !important;
}