/*
 * PidoGame shell compatibility: responsive navigation, announcement, account and utility pages.
 * Generated from the 1.8.38 monolith and maintained as an independent module.
 */

/* ========================================================================
   PidoGame 1.8.19 — product archive scope and mobile navigation stability
   ======================================================================== */

/* Keep item details visually separated when the optional gallery is absent. */
.pido-product-page--item > .pido-item-details {
    margin-top: 1.25rem;
}

/* The Metronic drawer moves the navigation outside the header on mobile.
   Explicit surfaces prevent global dark text rules from landing on a white
   drawer and keep nested accordions visually consistent. */
@media (max-width: 991.98px) {
    html[data-pido-theme="dark"] body.pido-theme .header-menu,
    html[data-pido-theme="dark"] body.pido-theme .header-menu.drawer,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu {
        border-color: var(--pido-border) !important;
        background-color: var(--pido-surface) !important;
        color: var(--pido-text) !important;
    }

    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-sub {
        background-color: transparent !important;
        color: var(--pido-text) !important;
    }

    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-link,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-title,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-arrow,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-icon,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-bullet {
        color: var(--pido-text) !important;
    }

    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-link:hover,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-link:focus-visible,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-link.show,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-item.here > .menu-link,
    html[data-pido-theme="dark"] body.pido-theme #kt_header_menu .menu-item.show > .menu-link {
        background-color: var(--pido-surface-strong) !important;
        color: var(--pido-primary) !important;
    }

    html[data-pido-theme="dark"] body.pido-theme .drawer-overlay {
        background-color: rgba(0, 0, 0, .58) !important;
    }
}

@media (max-width: 575.98px) {
    .pido-product-page--item > .pido-item-details {
        margin-top: 1rem;
    }
}



/* PidoGame 1.8.20 — global header, site announcement and blog staff comments. */
#kt_header {
    background-color: var(--pido-surface) !important;
}

#kt_header .pido-header-container,
html[data-pido-theme="dark"] #kt_header .pido-header-container,
body[data-kt-sticky-header="on"] #kt_header .pido-header-container,
#kt_header[data-kt-sticky-header="on"] .pido-header-container {
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* PidoGame 1.8.22 — native fixed announcement with a single, reversible header offset. */
:root {
    --pido-site-announcement-height: 0px;
    --pido-admin-bar-height: 0px;
}

body.admin-bar {
    --pido-admin-bar-height: 32px;
}

body.pido-has-site-announcement {
    --pido-site-announcement-height: 54px;
    padding-block-start: var(--pido-site-announcement-height, 0px);
}

.pido-site-announcement {
    position: fixed !important;
    inset-block-start: var(--pido-admin-bar-height) !important;
    inset-inline: 0 !important;
    z-index: 1200;
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.pido-site-announcement__icon,
.pido-site-announcement__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

.pido-site-announcement__icon {
    width: 28px;
    height: 28px;
}

.pido-site-announcement__icon svg,
.pido-site-announcement__close svg {
    display: block;
    width: 24px;
    height: 24px;
}

.pido-site-announcement__content {
    min-width: 0;
}

.pido-site-announcement__text {
    margin: 0;
    color: #fff !important;
    font-size: .875rem;
    font-weight: var(--pido-font-weight-semibold, 600);
    line-height: 2;
}

.pido-site-announcement__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-inline-start: .75rem;
    padding: .35rem 1rem !important;
    border: 0 !important;
    border-radius: var(--pido-radius-control) !important;
    background-color: #fff !important;
    color: #172033 !important;
    font-size: .82rem;
    font-weight: var(--pido-font-weight-bold, 700);
    line-height: 1.4;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color .16s ease, color .16s ease;
}

.pido-site-announcement__action:hover,
.pido-site-announcement__action:focus-visible,
.pido-site-announcement__action:active {
    background-color: #f5f8fa !important;
    color: #0f172a !important;
}

.pido-site-announcement__close {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--pido-radius-control) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color .16s ease, color .16s ease;
}

.pido-site-announcement__close:hover,
.pido-site-announcement__close:focus-visible,
.pido-site-announcement__close:active {
    background-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

html[data-pido-theme="dark"] body.pido-theme .pido-site-announcement,
html[data-pido-theme="dark"] body.pido-theme .pido-site-announcement__text,
html[data-pido-theme="dark"] body.pido-theme .pido-site-announcement__icon,
html[data-pido-theme="dark"] body.pido-theme .pido-site-announcement__close {
    color: #fff !important;
}

/* Apply the announcement offset only after Metronic makes the header fixed. */
body.pido-has-site-announcement[data-kt-sticky-header="on"] #kt_header,
body.pido-has-site-announcement #kt_header[data-kt-sticky-header="on"] {
    inset-block-start: calc(var(--pido-admin-bar-height) + var(--pido-site-announcement-height, 0px)) !important;
    top: calc(var(--pido-admin-bar-height) + var(--pido-site-announcement-height, 0px)) !important;
}

@media (max-width: 782px) {
    body.admin-bar {
        --pido-admin-bar-height: 46px;
    }
}

@media (max-width: 575.98px) {
    .pido-site-announcement {
        align-items: flex-start !important;
        padding-block: .6rem !important;
        padding-inline: 3rem !important;
        gap: .35rem;
    }

    .pido-site-announcement__icon {
        position: absolute;
        inset-inline-start: .75rem;
        inset-block-start: .7rem;
        margin: 0 !important;
    }

    .pido-site-announcement__content,
    .pido-site-announcement__text {
        width: 100%;
        text-align: start;
    }

    .pido-site-announcement__action {
        align-self: flex-start;
        margin-inline-start: 0;
    }

    .pido-site-announcement__close {
        position: absolute !important;
        inset-inline-end: .45rem !important;
        inset-block-start: .55rem !important;
        margin: 0 !important;
    }
}

.pido-blog-comment {
    border-width: 1px !important;
}

.pido-blog-comment--staff {
    border: 1px dashed var(--pido-primary) !important;
    background-color: rgba(var(--pido-primary-rgb), .04) !important;
}

.pido-blog-comment .comment-content {
    overflow-wrap: anywhere;
    white-space: normal;
}

.pido-blog-comment .comment-content > :first-child {
    margin-block-start: 0;
}

.pido-blog-comment .comment-content > :last-child {
    margin-block-end: 0;
}

.pido-blog-comment .comment-content p {
    margin-block-end: .85rem;
    line-height: 2;
}

html[data-pido-theme="dark"] body.pido-theme .pido-blog-comment--staff {
    border-color: #009ef7 !important;
    background-color: rgba(var(--pido-primary-rgb), .09) !important;
}

/* PidoGame 1.8.23 — transparent resting header and opaque responsive announcement. */
#kt_header,
#kt_header .header-container,
#kt_header .pido-header-container,
html[data-pido-theme="dark"] #kt_header .header-container,
html[data-pido-theme="dark"] #kt_header .pido-header-container {
    background-color: transparent !important;
    background-image: none !important;
}

body[data-kt-sticky-header="on"] #kt_header,
#kt_header[data-kt-sticky-header="on"] {
    border-bottom-color: var(--pido-border) !important;
    background-color: var(--pido-surface) !important;
    background-image: none !important;
}

body[data-kt-sticky-header="on"] #kt_header .header-container,
body[data-kt-sticky-header="on"] #kt_header .pido-header-container,
#kt_header[data-kt-sticky-header="on"] .header-container,
#kt_header[data-kt-sticky-header="on"] .pido-header-container {
    background-color: transparent !important;
}

.pido-site-announcement {
    min-height: 54px;
    padding-block: .55rem !important;
    padding-inline: clamp(1rem, 3vw, 2.25rem) !important;
    gap: .75rem;
    overflow: hidden;
    background-image: none !important;
    opacity: 1 !important;
    isolation: isolate;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.pido-site-announcement::before,
.pido-site-announcement::after {
    content: none !important;
}

.pido-site-announcement__text {
    font-size: clamp(.92rem, .25vw + .86rem, 1rem);
    font-weight: var(--pido-font-weight-semibold, 600);
    line-height: 1.85;
}

.pido-site-announcement__action {
    min-height: 38px;
    padding: .45rem 1.2rem !important;
    font-size: .9rem;
    line-height: 1.5;
}

.pido-site-announcement__icon {
    width: 30px;
    height: 30px;
}

.pido-site-announcement__close {
    width: 38px !important;
    height: 38px !important;
}

@media (max-width: 767.98px) {
    .pido-site-announcement {
        min-height: 52px;
        padding-block: .65rem !important;
        padding-inline: 3.15rem !important;
        gap: .45rem;
    }

    .pido-site-announcement__text {
        font-size: .9rem;
        line-height: 1.8;
        text-align: center;
    }

    .pido-site-announcement__action {
        align-self: center;
        min-width: 112px;
        margin-inline-start: 0;
    }

    .pido-site-announcement__icon {
        inset-block-start: .75rem;
    }

    .pido-site-announcement__close {
        inset-block-start: .55rem !important;
    }
}

@media (max-width: 399.98px) {
    .pido-site-announcement {
        padding-inline: 2.8rem !important;
    }

    .pido-site-announcement__text {
        font-size: .86rem;
    }

    .pido-site-announcement__action {
        width: min(100%, 180px);
    }
}

/* Accessible scroll-to-top icon. */
#kt_scrolltop,
#kt_scrolltop .svg-icon,
#kt_scrolltop svg {
    color: #fff !important;
}

#kt_scrolltop svg [fill] {
    fill: currentColor !important;
}

/* PidoGame 1.8.29 — protected gift-charge details in customer order view. */
.pido-customer-order-account-details {
    margin-block-start: .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--pido-border);
    border-radius: var(--pido-radius-control);
    background: var(--pido-surface-soft);
}

.pido-customer-order-account-details strong {
    display: block;
    margin-block-end: .35rem;
    color: var(--pido-text);
}

.pido-customer-order-account-details pre {
    margin: 0;
    color: var(--pido-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    font: inherit;
}

/* PidoGame 1.8.31 — clean 404 experience aligned with the storefront grid. */
.pido-404-page {
    width: 100%;
    min-width: 0;
    padding-block: clamp(2rem, 5vw, 4.5rem);
}

.pido-404-hero {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto clamp(1.75rem, 4vw, 3rem);
    text-align: center;
}

.pido-404-hero__image {
    display: block;
    width: clamp(145px, 16vw, 205px);
    height: auto;
    margin: 0 auto .55rem;
    object-fit: contain;
}

.pido-404-hero h1 {
    margin: 0 0 .4rem;
    color: var(--pido-text);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    line-height: 1.5;
}

.pido-404-hero p {
    margin: 0;
    color: var(--pido-text-muted);
    font-size: clamp(.92rem, 1.3vw, 1.05rem);
    line-height: 1.9;
}

.pido-404-products {
    width: 100%;
    min-width: 0;
}

.pido-404-products .pido-products-grid {
    margin-block: 0;
}

@media (max-width: 575.98px) {
    .pido-404-page {
        padding-block: 1.5rem 2.75rem;
    }

    .pido-404-hero {
        margin-bottom: 1.5rem;
        padding-inline: .5rem;
    }

    .pido-404-hero__image {
        width: clamp(125px, 42vw, 155px);
    }
}


/* ========================================================================
   PidoGame 1.8.32 — global UI contract before Elementor widget development
   ======================================================================== */
:root {
    --bs-body-font-family: var(--pido-font-family);
    --bs-body-color: var(--pido-text);
    --bs-body-bg: var(--pido-page-bg);
    --bs-border-color: var(--pido-border);
    --bs-border-radius: var(--pido-radius-control);
}

body.pido-theme :where(
    .woocommerce,
    .woocommerce-page,
    .select2-container,
    .select2-dropdown,
    .swal2-container,
    .modal,
    .offcanvas,
    .dropdown-menu
) {
    font-family: var(--pido-font-family) !important;
}

body.pido-theme :where(
    .woocommerce button,
    .woocommerce .button,
    .woocommerce input,
    .woocommerce textarea,
    .woocommerce select,
    .select2-container,
    .swal2-container button
) {
    font-family: inherit !important;
}

body.pido-theme :where(
    .woocommerce input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .woocommerce textarea,
    .woocommerce select,
    .woocommerce .select2-selection--single
) {
    min-height: 44px;
}

body.pido-theme :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid rgba(var(--pido-primary-rgb), .22);
    outline-offset: 2px;
}

body.pido-theme :where(.btn, .button, button) {
    text-rendering: optimizeLegibility;
}

/* 1.8.33 — shared commerce typography tokens for Cart, Checkout and future widgets. */
:root {
    --pido-commerce-card-title-size: 1.08rem;
    --pido-commerce-card-description-size: .84rem;
    --pido-commerce-card-title-weight: 800;
    --pido-commerce-card-description-line-height: 1.85;
}

.pido-cart-context :where(button, input, select, textarea),
.pido-checkout-context :where(button, input, select, textarea) {
    font-family: inherit;
}



/* Shared header and breadcrumb rhythm. Legacy page-specific height rules are removed. */
#kt_header,
#kt_header.header-respons {
    height: 76px !important;
    min-height: 76px;
    margin-block-end: 0 !important;
}

#kt_header .pido-header-container {
    min-height: 100%;
}

body.pido-theme .pido-breadcrumb-wrap {
    margin-block: 25px 0;
}

body.pido-theme #kt_content_container {
    margin-block-start: .75rem;
}

@media (max-width: 991.98px) {
    #kt_header,
    #kt_header.header-respons {
        height: 60px !important;
        min-height: 60px;
    }

    #kt_header .kt_header_nav {
        display: none !important;
    }

    body.pido-theme .pido-breadcrumb-wrap {
        margin-block-start: 19px;
    }

    body.pido-theme #kt_content_container {
        margin-block-start: .5rem;
    }
}

@media (min-width: 992px) {
    #kt_header .kt_header_menu {
        display: none !important;
    }
}

@media (min-width: 992px) {
    body[data-kt-sticky-header="on"] #kt_header,
    #kt_header[data-kt-sticky-header="on"] {
        height: 68px !important;
        min-height: 68px;
    }
}

/* PidoGame 1.8.47 — native sticky header.
   The header remains in document flow, so activating the sticky visual state
   never changes page geometry or the breadcrumb position. */
:root {
    --pido-header-sticky-padding: 2px;
}

#kt_header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(
        var(--pido-admin-bar-height, 0px)
        + var(--pido-site-announcement-height, 0px)
    ) !important;
    inset-block-start: calc(
        var(--pido-admin-bar-height, 0px)
        + var(--pido-site-announcement-height, 0px)
    ) !important;
    inset-inline: auto !important;
    z-index: 97 !important;
    flex: 0 0 auto;
    align-self: stretch;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    transform: none !important;
    animation: none !important;
    transition: background-color .16s ease, border-color .16s ease;
}

#kt_header .pido-header-container {
    padding-block: 0;
    transition: background-color .16s ease, border-color .16s ease, padding-block .16s ease;
}

body.pido-header-is-stuck #kt_header {
    border-bottom-color: var(--pido-border) !important;
    background-color: var(--pido-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.pido-header-is-stuck #kt_header .header-container,
body.pido-header-is-stuck #kt_header .pido-header-container {
    padding-block: var(--pido-header-sticky-padding);
    background-color: transparent !important;
}

/* Neutralize stale attributes left by cached markup or third-party scripts. */
body.pido-native-sticky-header[data-kt-sticky-header="on"] #kt_header,
body.pido-native-sticky-header #kt_header[data-kt-sticky-header="on"] {
    position: sticky !important;
    position: -webkit-sticky !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    margin-block-start: 0 !important;
    transform: none !important;
    animation: none !important;
}

@media (max-width: 991.98px) {
    #kt_header,
    body.pido-native-sticky-header[data-kt-sticky-header="on"] #kt_header,
    body.pido-native-sticky-header #kt_header[data-kt-sticky-header="on"] {
        height: 60px !important;
        min-height: 60px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #kt_header,
    #kt_header .pido-header-container {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* PidoGame 1.8.52 — slightly more top breathing room for sticky mobile/tablet header. */
@media (max-width: 991.98px) {
    body.pido-header-is-stuck #kt_header .header-container,
    body.pido-header-is-stuck #kt_header .pido-header-container {
        padding-block-start: calc(var(--pido-header-sticky-padding) + 2px);
        padding-block-end: var(--pido-header-sticky-padding);
    }
}

/* 1.8.67 — configurable header and breadcrumb spacing. */
body.pido-theme .pido-breadcrumb-wrap{margin-block-start:var(--pido-breadcrumb-header-gap,25px)!important}
#kt_header,#kt_header.header-respons{box-sizing:border-box!important;height:calc(76px + var(--pido-header-padding-top,0px) + var(--pido-header-padding-bottom,0px))!important;min-height:calc(76px + var(--pido-header-padding-top,0px) + var(--pido-header-padding-bottom,0px))!important;margin-block-start:var(--pido-header-margin-top,0px)!important;margin-block-end:var(--pido-header-margin-bottom,0px)!important}
#kt_header .pido-header-container{box-sizing:border-box;padding-block-start:var(--pido-header-padding-top,0px)!important;padding-block-end:var(--pido-header-padding-bottom,0px)!important}
@media(max-width:991.98px){#kt_header,#kt_header.header-respons,body.pido-native-sticky-header[data-kt-sticky-header="on"] #kt_header,body.pido-native-sticky-header #kt_header[data-kt-sticky-header="on"]{height:calc(60px + var(--pido-header-padding-top,0px) + var(--pido-header-padding-bottom,0px))!important;min-height:calc(60px + var(--pido-header-padding-top,0px) + var(--pido-header-padding-bottom,0px))!important}body.pido-theme .pido-breadcrumb-wrap{margin-block-start:var(--pido-breadcrumb-header-gap,19px)!important}}