/* ==========================================================================
   MegaPets 2.0 — Site Header

   File:
   components/site-header/site-header.css

   Responsibility:
   - Shared Site Header styles
   - Desktop Header styles
   - Mobile Header styles will be added separately

   Status:
   - Desktop: IN DEVELOPMENT
   - Mobile: LOCKED / NOT YET TRANSFERRED

   Important:
   - Global colors, typography, radius, shadows and motion come from:
     assets/css/design-system.css
   - Do not declare global :root variables in this file.
   ========================================================================== */


/* ==========================================================================
   BASE
   ========================================================================== */

.mp-site-header,
.mp-site-header * {
    box-sizing: border-box;
}

.mp-site-header {
    --mp-bg: var(--mp-global-color-background-brand);
    --mp-bg-soft: var(--mp-color-background-soft);
    --mp-gold: var(--mp-color-gold);
    --mp-gold-dark: var(--mp-color-gold-dark);
    --mp-cream: var(--mp-color-cream);
    --mp-border: var(--mp-color-border-subtle);
    --mp-font: var(--mp-font-heading);
    --mp-row: 44px;
}

.mp-mobile-header,
.mp-header-decor {
    display: none;
}


/* ==========================================================================
   DESKTOP HEADER — MAIN WRAPPER
   ========================================================================== */

/*
 * The desktop Header spans the viewport independently from Astra's narrower
 * content container. Catalog columns remain controlled by Astra.
 */

.mp-desktop-main-header {
    position: fixed;
    z-index: 99999;
    top: 18px;
    left: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border: var(--mp-border-width) solid var(--mp-color-border);
    border-radius: var(--mp-radius);
    background: rgba(239, 229, 215, 0.68);
    box-shadow: var(--mp-shadow);
    overflow: visible;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        top 0.36s var(--mp-ease),
        box-shadow 0.28s ease,
        border-radius 0.36s var(--mp-ease);
}

.mp-main-header.scrolled .mp-desktop-main-header {
    top: 8px;
    border-radius: 0 0 var(--mp-radius) var(--mp-radius);
}


/* ========================================================================== 
   GLOBAL FIXED-HEADER CLEARANCE
   ========================================================================== */

/*
 * The MegaPets desktop Header is fixed and therefore does not occupy space
 * in Astra's normal document flow. Reserve exactly its initial footprint at
 * the Site Content level. Astra and page components remain responsible only
 * for their own visual spacing below this clearance.
 */

@media (min-width: 1121px) {

    .site-content {
        padding-top: var(--mp-site-header-clearance-desktop);
    }

    /*
     * WordPress reserves 32px above the document for its desktop Admin Bar.
     * Let that bar overlay the Header instead of moving the Header and catalog
     * down. The lower z-index keeps all Admin Bar controls clickable.
     */

    body.admin-bar .site-content {
        padding-top:
            calc(
                var(--mp-site-header-clearance-desktop)
                - 32px
            );
    }

    body.admin-bar .mp-desktop-main-header {
        z-index: 99998;
        top: 18px;
    }

    body.admin-bar .mp-main-header.scrolled .mp-desktop-main-header {
        top: 8px;
    }
}


/* ==========================================================================
   ASTRA STICKY SIDEBAR INTEGRATION
   ========================================================================== */

/*
 * Astra measures only its own Header Builder rows and writes the sticky
 * sidebar top and max-height as inline styles. MegaPets uses a custom fixed
 * Header, so both values must consume the shared collapsed-Header offset.
 *
 * The two important declarations are intentionally limited to this Astra
 * integration boundary because normal stylesheet specificity cannot override
 * Astra's inline values.
 */

@media (min-width: 1121px) {

    body.ast-sticky-sidebar
    #secondary
    .sidebar-main {
        top:
            var(
                --mp-site-header-sticky-offset-desktop
            ) !important;
        max-height:
            calc(
                100vh
                - var(
                    --mp-site-header-sticky-offset-desktop
                )
            ) !important;
        max-height:
            calc(
                100dvh
                - var(
                    --mp-site-header-sticky-offset-desktop
                )
            ) !important;
    }
}


/* ==========================================================================
   DESKTOP TOP / BANNER
   ========================================================================== */

.mp-desktop-top {
    position: relative;
    z-index: 3;
    height: 145px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    border-radius: var(--mp-radius) var(--mp-radius) 0 0;
    overflow: hidden;
    background-image:
        url("https://megapets.eu/wp-content/uploads/2025/11/slimaki-afrykanskie-achatina-banner-megapets-eu-desktop-4.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    visibility: visible;
    transition:
        height var(--mp-duration-slow) var(--mp-ease),
        padding-top var(--mp-duration-slow) var(--mp-ease),
        padding-bottom var(--mp-duration-slow) var(--mp-ease),
        opacity 0.24s ease 0.10s,
        visibility 0s linear 0s;
}

@media (min-width: 1121px) {

    .mp-main-header.scrolled .mp-desktop-top {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            height var(--mp-duration-slow) var(--mp-ease),
            padding-top var(--mp-duration-slow) var(--mp-ease),
            padding-bottom var(--mp-duration-slow) var(--mp-ease),
            opacity 0.18s ease,
            visibility 0s linear var(--mp-duration-slow);
    }
}

.mp-desktop-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 36%,
            rgba(255, 248, 232, 0.34) 0%,
            rgba(239, 229, 215, 0.42) 34%,
            rgba(239, 229, 215, 0.56) 100%
        );
    pointer-events: none;
}


/* ==========================================================================
   DESKTOP LOGO
   ========================================================================== */

.mp-desktop-logo {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    text-decoration: none;
    transform: translateY(-12px);
}

.mp-desktop-logo::before,
.mp-desktop-logo::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100px;
    height: 1.5px;
    transform: translateY(-50%);
    pointer-events: none;
}

.mp-desktop-logo::before {
    right: calc(100% + 22px);
    background:
        linear-gradient(
            90deg,
            rgba(151, 129, 106, 0),
            rgba(199, 154, 87, 0.85),
            var(--mp-color-gold)
        );
}

.mp-desktop-logo::after {
    left: calc(100% + 22px);
    background:
        linear-gradient(
            90deg,
            var(--mp-color-gold),
            rgba(199, 154, 87, 0.85),
            rgba(151, 129, 106, 0)
        );
}

.mp-desktop-logo img {
    display: block;
    width: auto;
    height: 82px;
    max-width: 500px;
    max-height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(70, 50, 30, 0.12));
}


/* ==========================================================================
   BANNER TOOLS
   ========================================================================== */

.mp-banner-tools {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 4px;
    padding: 0 42px;
    pointer-events: none;
}

.mp-banner-tools-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

.mp-banner-tools-left,
.mp-banner-tools-right {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* ==========================================================================
   DESKTOP NAVIGATION ROW
   ========================================================================== */

.mp-desktop-nav-row {
    position: relative;
    z-index: 3;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-top: 1px solid rgba(199, 154, 87, 0.36);
    border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    background:
        linear-gradient(
            180deg,
            rgba(244, 236, 226, 0.88),
            rgba(239, 229, 215, 0.96)
        );
}

.mp-nav-rhythm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 110px;
    padding-right: 110px;
}


/* ==========================================================================
   DESKTOP NAVIGATION LINKS
   ========================================================================== */

.mp-home-link,
.mp-nav-rhythm > a,
.mp-nav-dropdown-trigger {
    position: relative;
    padding: 8px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--mp-font-body);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.035em;
    color: var(--mp-color-dark);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition:
        color 0.28s ease,
        transform 0.28s var(--mp-ease);
}

.mp-home-link::after,
.mp-nav-rhythm > a::after,
.mp-nav-dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 70px;
    height: 1.5px;
    transform: translateX(-50%);
    border-radius: var(--mp-radius-pill);
    background:
        linear-gradient(
            90deg,
            rgba(199, 154, 87, 0),
            rgba(199, 154, 87, 0.82),
            rgba(199, 154, 87, 0)
        );
    opacity: 0;
    transition: opacity 0.24s ease;
}

.mp-home-link:hover,
.mp-home-link:focus-visible,
.mp-home-link.mp-active-link,
.mp-nav-rhythm > a:hover,
.mp-nav-rhythm > a:focus-visible,
.mp-nav-rhythm > a.mp-active-link,
.mp-nav-dropdown:hover > .mp-nav-dropdown-trigger,
.mp-nav-dropdown:has(> .mp-nav-dropdown-trigger:focus-visible) > .mp-nav-dropdown-trigger,
.mp-nav-dropdown-trigger.mp-active-link {
    color: var(--mp-color-gold-dark);
    transform: none;
}

.mp-home-link:hover::after,
.mp-home-link:focus-visible::after,
.mp-home-link.mp-active-link::after,
.mp-nav-rhythm > a:hover::after,
.mp-nav-rhythm > a:focus-visible::after,
.mp-nav-rhythm > a.mp-active-link::after,
.mp-nav-dropdown:hover > .mp-nav-dropdown-trigger::after,
.mp-nav-dropdown:has(> .mp-nav-dropdown-trigger:focus-visible) > .mp-nav-dropdown-trigger::after,
.mp-nav-dropdown-trigger.mp-active-link::after {
    opacity: 1;
}


/* ==========================================================================
   ICON LINKS
   ========================================================================== */

.mp-nav-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mp-color-grey);
    text-decoration: none;
}

.mp-home-icon,
.mp-nav-icon-link-account,
.mp-nav-icon-link-cart {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(199, 154, 87, 0.46);
    border-radius: var(--mp-radius);
    background: rgba(239, 229, 215, 0.68);
    color: var(--mp-color-grey);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition:
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s var(--mp-ease),
        color 0.28s ease;
}

.mp-home-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
}

.mp-nav-icon-link-account,
.mp-nav-icon-link-cart {
    width: auto;
    padding: 0 13px;
    gap: 7px;
}

.mp-nav-icon-link-account {
    min-width: 86px;
}

.mp-nav-icon-link-cart {
    min-width: 92px;
}

.mp-home-icon:hover,
.mp-home-icon:focus-visible,
.mp-nav-icon-link-account:hover,
.mp-nav-icon-link-account:focus-visible,
.mp-nav-icon-link-cart:hover,
.mp-nav-icon-link-cart:focus-visible {
    background: rgba(246, 239, 230, 0.94);
    border-color: rgba(199, 154, 87, 0.32);
    color: var(--mp-color-gold-dark);
    transform: none;
}

.mp-home-icon::after,
.mp-nav-icon-link-account::after,
.mp-nav-icon-link-cart::after {
    display: none !important;
}

.mp-home-icon svg,
.mp-nav-icon-link svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.94;
    transition:
        transform 0.28s var(--mp-ease),
        opacity 0.22s ease;
}

.mp-home-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1;
}

.mp-nav-icon-link-account svg {
    width: 27px;
    height: 27px;
    stroke-width: 3;
}

.mp-nav-icon-link-cart svg {
    width: 24px;
    height: 24px;
    stroke-width: 3.4;
}

.mp-home-icon:hover svg,
.mp-home-icon:focus-visible svg,
.mp-nav-icon-link:hover svg,
.mp-nav-icon-link:focus-visible svg {
    opacity: 1;
    transform: none;
}

.mp-icon-text {
    display: block;
    font-family: var(--mp-font-body);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.04em;
    color: inherit;
    text-transform: none;
    transform: translateY(0.2px);
}


/* ==========================================================================
   KNOWLEDGE DROPDOWN
   ========================================================================== */

.mp-nav-dropdown {
    position: relative;
    flex-shrink: 0;
}

.mp-nav-dropdown > .mp-nav-dropdown-trigger {
    position: relative;
    z-index: 4;
    width: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 2px;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-family: var(--mp-font-body);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.035em;
    color: var(--mp-color-dark);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.mp-nav-dropdown > .mp-nav-dropdown-trigger:hover,
.mp-nav-dropdown > .mp-nav-dropdown-trigger:focus,
.mp-nav-dropdown > .mp-nav-dropdown-trigger:focus-visible,
.mp-nav-dropdown > .mp-nav-dropdown-trigger:active {
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--mp-color-gold-dark);
}

.mp-nav-dropdown::after {
    content: "";
    position: absolute;
    left: -26px;
    right: -26px;
    top: 100%;
    height: 30px;
}

.mp-dropdown-panel {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 50%;
    min-width: 240px;
    max-height: 0;
    padding: 20px 12px 14px;
    border: 0;
    border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    transform: translateX(-50%) scale(0.99);
    transform-origin: top center;
    transition:
        max-height var(--mp-duration-slow) var(--mp-ease),
        clip-path var(--mp-duration-slow) var(--mp-ease),
        opacity 0.24s ease,
        transform 0.34s var(--mp-ease),
        visibility 0s linear var(--mp-duration-slow);
}

.mp-dropdown-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: -8px;
    bottom: 0;
    border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    background: var(--mp-global-color-background-brand);
    pointer-events: none;
}

.mp-dropdown-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 12px;
    bottom: 0;
    border: var(--mp-border-width) solid var(--mp-color-border);
    border-top: 0;
    border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.03);
    pointer-events: none;
}

.mp-nav-dropdown:hover .mp-dropdown-panel,
.mp-nav-dropdown:has(> .mp-nav-dropdown-trigger:focus-visible) .mp-dropdown-panel,
.mp-nav-dropdown:has(.mp-dropdown-panel:focus-within) .mp-dropdown-panel {
    max-height: 320px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transform: translateX(-50%) scale(1);
    transition-delay: 0s;
}

.mp-dropdown-panel a {
    position: relative;
    z-index: 2;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 34px 9px 10px;
    margin-bottom: 7px;
    border: 1px solid rgba(199, 154, 87, 0.24);
    border-radius: var(--mp-radius);
    background: rgba(244, 236, 226, 0.92);
    font-family: var(--mp-font-body);
    font-size: 11px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.03em;
    color: var(--mp-color-grey);
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.mp-dropdown-panel a:last-child {
    margin-bottom: 0;
}

.mp-dropdown-panel a:hover,
.mp-dropdown-panel a:focus-visible,
.mp-dropdown-panel a.mp-active-link {
    color: var(--mp-color-gold-dark);
    background: rgba(250, 246, 239, 0.98);
    border-color: rgba(176, 132, 72, 0.44);
    box-shadow: none;
    transform: none;
}

.mp-dropdown-panel a::before {
    content: "›";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: var(--mp-font-weight-medium);
    line-height: 1;
    color: var(--mp-color-gold);
    opacity: 0.78;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.mp-dropdown-panel a:hover::before,
.mp-dropdown-panel a:focus-visible::before,
.mp-dropdown-panel a.mp-active-link::before {
    transform: translateY(-50%) translateX(4px);
    opacity: 1;
}

.mp-dropdown-panel a::after {
    display: none !important;
}

.mp-dropdown-panel img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.mp-dropdown-panel a[href*="konto-pupila"] img {
    width: 27px;
    height: 27px;
}


/* ==========================================================================
   DESKTOP LANGUAGE SELECTOR
   ========================================================================== */

.mp-desktop-lang {
    position: relative;
    flex-shrink: 0;
}

.mp-desktop-lang::after {
    content: "";
    position: absolute;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 30px;
}

.mp-desktop-lang-current {
    width: auto;
    min-width: 118px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 13px;
    border: 1.5px solid rgba(199, 154, 87, 0.46);
    border-radius: var(--mp-radius);
    background: rgba(239, 229, 215, 0.68);
    color: var(--mp-color-grey);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-family: var(--mp-font-body);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: none;
    cursor: pointer;
    transition:
        background 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease;
}

.mp-desktop-lang-current:hover,
.mp-desktop-lang:focus-within .mp-desktop-lang-current {
    background: rgba(246, 239, 230, 0.78);
    border-color: rgba(199, 154, 87, 0.32);
    color: var(--mp-color-gold-dark);
}

.mp-desktop-lang-current b {
    display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: var(--mp-font-weight-medium);
    color: var(--mp-color-gold);
    transform: rotate(90deg) translateX(1px);
    transform-origin: center;
    opacity: 0.78;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.mp-desktop-lang:hover .mp-desktop-lang-current b,
.mp-desktop-lang:focus-within .mp-desktop-lang-current b,
.mp-desktop-lang.lang-open .mp-desktop-lang-current b {
    transform: rotate(-90deg) translateX(-1px);
    opacity: 1;
}

.mp-lang-flag {
    display: block;
    font-size: 15px;
    line-height: 1;
}

.mp-lang-code {
    display: block;
    text-transform: none;
    transform: translateY(0.2px);
}

.mp-desktop-lang-list {
    position: absolute;
    z-index: 6;
    top: 100%;
    left: 50%;
    min-width: 240px;
    padding: 20px 12px 14px;
    border: 0;
    border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    transform: translateX(-50%) scale(0.99);
    transform-origin: top center;
    transition:
        clip-path 0.34s var(--mp-ease),
        opacity 0.22s ease,
        transform 0.3s var(--mp-ease),
        visibility 0s linear 0.34s;
}

.mp-desktop-lang-list::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 8px;
    bottom: 0;
    border-radius: var(--mp-radius);
    background: rgba(239, 229, 215, 0.94);
    pointer-events: none;
}

.mp-desktop-lang-list::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 8px;
    bottom: 0;
    border: var(--mp-border-width) solid var(--mp-color-border);
    border-radius: var(--mp-radius);
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.03);
    pointer-events: none;
}

.mp-desktop-lang:hover .mp-desktop-lang-list,
.mp-desktop-lang:focus-within .mp-desktop-lang-list,
.mp-desktop-lang.lang-open .mp-desktop-lang-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transform: translateX(-50%) scale(1);
    transition-delay: 0s;
}

.mp-desktop-lang-list a {
    position: relative;
    z-index: 2;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 34px 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--mp-font-body);
    font-size: 11px;
    line-height: 1;
    font-weight: var(--mp-font-weight-semibold);
    letter-spacing: 0.03em;
    color: var(--mp-color-grey);
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.mp-desktop-lang-list a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(199, 154, 87, 0.50),
            rgba(199, 154, 87, 0.28) 38%,
            rgba(199, 154, 87, 0)
        );
    transform: scaleY(0.82);
}

.mp-desktop-lang-list a:last-child::after {
    display: none;
}

.mp-desktop-lang-list a:hover,
.mp-desktop-lang-list a:focus-visible {
    color: var(--mp-color-gold-dark);
    background:
        linear-gradient(
            90deg,
            rgba(244, 236, 226, 0.72),
            rgba(244, 236, 226, 0.96) 42%,
            rgba(244, 236, 226, 0)
        );
}

.mp-desktop-lang-list a.active-lang {
    display: none;
}

.mp-desktop-lang-list a::before {
    content: "›";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: var(--mp-font-weight-medium);
    line-height: 1;
    color: var(--mp-color-gold);
    opacity: 0.78;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.mp-desktop-lang-list a:hover::before,
.mp-desktop-lang-list a:focus-visible::before {
    transform: translateY(-50%) translateX(3px);
    opacity: 1;
}


/* ==========================================================================
   DELIVERY LINK
   ========================================================================== */

.mp-delivery-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.mp-free-badge {
    min-width: 34px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid rgba(199, 154, 87, 0.38);
    border-radius: var(--mp-radius-pill);
    background: rgba(199, 154, 87, 0.14);
    color: var(--mp-color-gold-dark);
    font-size: 9px;
    line-height: 1;
    font-weight: var(--mp-font-weight-bold);
    letter-spacing: 0.08em;
}


/* ==========================================================================
   DESKTOP RESPONSIVE
   ========================================================================== */

@media (max-width: 1600px) {

    .mp-nav-rhythm {
        padding-left: 82px;
        padding-right: 82px;
    }
}

@media (max-width: 1400px) {

    .mp-nav-rhythm {
        padding-left: 54px;
        padding-right: 54px;
    }
}

@media (max-width: 1240px) {

    .mp-nav-rhythm {
        padding-left: 26px;
        padding-right: 26px;
    }

    .mp-home-link,
    .mp-nav-rhythm > a,
    .mp-nav-dropdown-trigger {
        font-size: 11px;
        letter-spacing: 0.02em;
    }

    .mp-desktop-logo img {
        height: 72px;
        max-width: 320px;
        max-height: 72px;
    }
}

@media (max-width: 1120px) {

    .mp-desktop-main-header {
        display: none;
    }
}

/* ========================================================================== 
   MOBILE HEADER — LOCKED

   Source:
   Approved MegaPets mobile prototype.

   Important:
   - Preserve the approved visual structure and behaviour.
   - Desktop development must not modify this section.
   ========================================================================== */

@media (max-width: 1120px) {

    body {
        padding-top: var(--mp-site-header-clearance-mobile);
    }

    .mp-main-header {
        position: fixed;
        z-index: 99999;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        transform: none;
        background: var(--mp-bg);
        border: var(--mp-border-width) solid var(--mp-border);
        border-top: 0;
        border-radius: 0 0 var(--mp-radius) var(--mp-radius);
        box-shadow:
            0 6px 18px rgba(0, 0, 0, 0.05),
            0 2px 4px rgba(0, 0, 0, 0.03);
        overflow: visible;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition:
            border-radius var(--mp-duration-slow) var(--mp-ease),
            box-shadow var(--mp-duration-normal) ease;
    }

    /*
     * WordPress reserves 32px above the document for its Admin Bar on tablet
     * widths. Let the bar overlay the fixed MegaPets Header, exactly as on
     * desktop, and subtract the same space from the Header clearance so the
     * page is not pushed down twice.
     */

    body.admin-bar {
        padding-top:
            calc(
                var(--mp-site-header-clearance-mobile)
                - 32px
            );
    }

    body.admin-bar .mp-main-header {
        z-index: 99998;
        top: 0;
    }

    .mp-desktop-main-header {
        display: none;
    }

    .mp-mobile-header {
        display: block;
        position: relative;
    }

    .mp-main-header.scrolled {
        border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    }

    .mp-main-header.scrolled .mp-mobile-top {
        border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    }

    .mp-main-header.menu-open,
    .mp-main-header.lang-open {
        border-radius: 0;
        box-shadow: none;
    }

    .mp-main-header.menu-open .mp-mobile-top,
    .mp-main-header.lang-open .mp-mobile-top {
        border-radius: 0;
    }


    /* ======================================================================
       MOBILE DECORATIVE BANNER
       ====================================================================== */

    .mp-header-decor {
        width: 100%;
        max-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        pointer-events: none;
        transition: max-height var(--mp-duration-slow) var(--mp-ease);
    }

    .mp-header-decor::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background:
            linear-gradient(
                90deg,
                rgba(199, 154, 87, 0.25),
                rgba(215, 172, 105, 0.95) 20%,
                rgba(235, 205, 145, 1) 50%,
                rgba(215, 172, 105, 0.95) 80%,
                rgba(199, 154, 87, 0.25)
            );
    }

    .mp-header-decor img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        object-position: center top;
    }

    .mp-main-header.scrolled .mp-header-decor {
        max-height: 0;
    }


    /* ======================================================================
       MOBILE TOP BAR
       ====================================================================== */

    .mp-mobile-top {
        position: relative;
        z-index: 10;
        min-height: 64px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--mp-bg);
        border-radius: 0 0 var(--mp-radius) var(--mp-radius);
    }

    .mp-main-header:not(.scrolled) .mp-mobile-top {
        padding-top: 6px;
    }


    /* ======================================================================
       MOBILE TOGGLE
       ====================================================================== */

    .mp-site-header button.mp-mobile-toggle {
        position: absolute;
        left: 14px;
        top: 50%;
        width: 42px;
        height: 42px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border:
            var(--mp-border-width)
            solid
            var(--mp-mini-control-menu-border-color);
        border-radius: var(--mp-radius-pill);
        background: var(--mp-mini-control-menu-background);
        box-shadow: var(--mp-mini-control-menu-shadow);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            border-color 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease;
    }

    .mp-mobile-toggle span {
        width: 17px;
        height: 2px;
        border-radius: var(--mp-radius-pill);
        background: var(--mp-mini-control-menu-icon-color);
        transition:
            transform 0.25s ease,
            opacity 0.2s ease;
    }

    .mp-site-header button.mp-mobile-toggle:active,
    .mp-site-header.menu-open button.mp-mobile-toggle {
        border-color:
            var(
                --mp-mini-control-menu-border-color-active
            );
    }

    .mp-site-header button.mp-mobile-toggle:active span,
    .mp-site-header.menu-open button.mp-mobile-toggle span {
        background:
            var(
                --mp-mini-control-menu-icon-color-active
            );
    }

    .mp-main-header.menu-open .mp-mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mp-main-header.menu-open .mp-mobile-toggle span:nth-child(2) {
        opacity: 0;
    }

    .mp-main-header.menu-open .mp-mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* ======================================================================
       MOBILE LOGO
       ====================================================================== */

    .mp-mobile-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        display: flex;
        align-items: center;
        text-decoration: none;
        transform: translate(-50%, -50%);
    }

    .mp-mobile-logo img {
        height: 46px;
        width: auto;
        display: block;
        transform: scale(1.55);
        transform-origin: center;
        transition: transform 0.45s var(--mp-ease);
    }

    .mp-mobile-logo:hover img {
        transform: scale(1.65) translateY(-1px);
    }


    /* ======================================================================
       MOBILE ACTIONS
       ====================================================================== */

    .mp-mobile-actions {
        position: absolute;
        right: 14px;
        top: 50%;
        display: flex;
        align-items: center;
        gap: 2px;
        transform: translateY(-50%);
    }

    .mp-mobile-actions a {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .mp-mobile-home-svg,
    .mp-account-svg,
    .mp-cart-svg {
        display: block;
        fill: none;
        stroke: var(--mp-gold);
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0.92;
        transition:
            transform 0.35s var(--mp-ease),
            opacity 0.25s ease,
            stroke 0.25s ease;
    }

    .mp-mobile-home-svg {
        width: 27px;
        height: 27px;
        stroke-width: 1.3;
    }

    .mp-account-svg {
        width: 24px;
        height: 24px;
        stroke-width: 3.8;
    }

    .mp-cart-svg {
        width: 22px;
        height: 22px;
        stroke-width: 3.8;
    }

    .mp-cart-svg .mp-cart-dot {
        fill: var(--mp-gold);
        stroke: var(--mp-gold);
        transition:
            fill 0.25s ease,
            stroke 0.25s ease;
    }

    .mp-mobile-actions a:hover svg,
    .mp-mobile-actions a:focus-visible svg,
    .mp-mobile-actions a:active svg {
        stroke: var(--mp-gold-dark);
        transform: translateY(-1px) scale(1.06);
        opacity: 1;
    }

    .mp-mobile-actions a:hover .mp-cart-dot,
    .mp-mobile-actions a:focus-visible .mp-cart-dot,
    .mp-mobile-actions a:active .mp-cart-dot {
        fill: var(--mp-gold-dark);
        stroke: var(--mp-gold-dark);
    }


    /* ======================================================================
       MOBILE LANGUAGE ROW
       ====================================================================== */

    .mp-mobile-lang {
        height: auto;
        min-height: 0;
        max-height: var(--mp-row);
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 0;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.04);
        overflow: visible;
        opacity: 1;
        transform: translateY(0);
        will-change: max-height, opacity, transform;
        transition:
            max-height var(--mp-duration-slow) var(--mp-ease),
            transform var(--mp-duration-slow) var(--mp-ease),
            opacity 0.24s ease,
            background 0.32s ease;
    }

    .mp-mobile-lang::before {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        top: 0;
        height: var(--mp-decorative-line-height);
        background: var(--mp-color-decorative-line);
        opacity: 1;
        transition: opacity 0.32s ease;
    }

    .mp-main-header.lang-row-hidden:not(.menu-open):not(.lang-open):not(.keep-lang-visible) .mp-mobile-lang {
        max-height: 0;
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        background: rgba(255, 255, 255, 0);
    }

    .mp-main-header.lang-row-hidden:not(.menu-open):not(.lang-open):not(.keep-lang-visible) .mp-mobile-lang::before {
        opacity: 0;
    }

    .mp-main-header.lang-row-hidden:not(.menu-open):not(.lang-open):not(.keep-lang-visible) .mp-lang-current {
        transform: translateY(-18px);
        opacity: 0;
    }

    .mp-main-header.menu-open .mp-mobile-lang,
    .mp-main-header.lang-open .mp-mobile-lang,
    .mp-main-header.keep-lang-visible .mp-mobile-lang,
    .mp-mobile-lang.lang-open {
        max-height: var(--mp-row);
        overflow: visible;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
        background: rgba(255, 255, 255, 0.04);
    }

    .mp-main-header.lang-open .mp-mobile-lang,
    .mp-mobile-lang.lang-open {
        background:
            var(
                --mp-navigation-list-highlight-background
            );
    }

    .mp-main-header.lang-open .mp-mobile-lang::after,
    .mp-mobile-lang.lang-open::after {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: -1px;
        height: var(--mp-decorative-line-height);
        z-index: 1002;
        background: var(--mp-decorative-navigation-line-right-dark-gold);
        transform: scaleY(0.82);
        pointer-events: none;
    }

    .mp-lang-current {
        width: 100%;
        height: var(--mp-row);
        min-height: var(--mp-row);
        display: flex;
        align-items: center;
        gap: 6px;
        position: relative;
        padding: 0 22px;
        border: 0;
        background: transparent;
        font-family: var(--mp-premium-italic-font-family);
        font-size: var(--mp-premium-italic-font-size);
        font-weight: var(--mp-premium-italic-font-weight);
        font-style: var(--mp-premium-italic-font-style);
        letter-spacing:
            var(--mp-premium-italic-letter-spacing);
        color: var(--mp-gold-dark);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transform: translateY(0);
        transition:
            transform var(--mp-duration-slow) var(--mp-ease),
            opacity 0.24s ease;
    }

    /*
     * Keep Astra's global button states out of the mobile language row.
     * The open-row highlight belongs to .mp-mobile-lang, not to the button.
     */

    .mp-site-header button.mp-lang-current:hover,
    .mp-site-header button.mp-lang-current:focus,
    .mp-site-header button.mp-lang-current:focus-visible,
    .mp-site-header button.mp-lang-current:active,
    .mp-site-header button.mp-lang-current[aria-expanded="true"] {
        border-color: transparent;
        background: transparent;
        color: var(--mp-gold-dark);
        box-shadow: none;
    }

    .mp-site-header button.mp-lang-current:focus-visible {
        outline: 1px solid var(--mp-gold-dark);
        outline-offset: -2px;
    }

    .mp-lang-current b,
    .mp-app-install-title b {
        font-size: 22px;
        line-height: 1;
        color: inherit;
        transform: rotate(90deg);
        transition: transform 0.25s ease;
    }

    .mp-app-install-title b {
        font-style: italic;
        font-weight: var(--mp-font-weight-bold);
    }

    .mp-mobile-lang.lang-open .mp-lang-current b,
    .mp-main-header.lang-open .mp-lang-current b,
    .mp-app-install-title.app-clicked b {
        transform: rotate(-90deg);
    }


    /* ======================================================================
       MOBILE MENU AND LANGUAGE LIST
       ====================================================================== */

    .mp-mobile-menu,
    .mp-lang-list {
        position: absolute;
        top: 100%;
        left: -1px;
        width: calc(100% + 2px);
        background: var(--mp-bg);
        border: var(--mp-border-width) solid var(--mp-border);
        border-top: 0;
        border-radius: 0 0 var(--mp-radius) var(--mp-radius);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.05);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scaleY(0.985);
        transform-origin: top center;
        transition:
            opacity 0.28s ease,
            transform 0.32s var(--mp-ease),
            visibility 0s linear 0.28s;
        overflow: hidden;
    }

    .mp-mobile-menu {
        z-index: 999;
        display: flex;
        flex-direction: column;
    }

    .mp-lang-list {
        z-index: 1001;
        padding: 0;
    }

    .mp-main-header.menu-open .mp-mobile-menu,
    .mp-main-header.lang-open .mp-lang-list,
    .mp-mobile-lang.lang-open .mp-lang-list {
        max-height: calc(100dvh - 108px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scaleY(1);
        transition-delay: 0s;
    }

    .mp-mobile-menu::-webkit-scrollbar,
    .mp-lang-list::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .mp-mobile-menu a,
    .mp-mobile-title,
    .mp-lang-list a {
        min-height: var(--mp-row);
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 22px;
        font-family: var(--mp-font);
        font-weight: var(--mp-font-weight-bold);
        color: var(--mp-color-grey);
        text-decoration: none;
    }

    .mp-mobile-menu a {
        font-size: 14px;
        letter-spacing: 0.06em;
        color: var(--mp-color-grey);
        text-transform: uppercase;
        transition:
            color 0.25s ease,
            background 0.25s ease;
    }

    .mp-mobile-menu > a {
        color: var(--mp-color-dark);
    }

    .mp-lang-list a {
        font-family: var(--mp-premium-italic-font-family);
        font-size: var(--mp-premium-italic-font-size);
        font-weight: var(--mp-premium-italic-font-weight);
        font-style: var(--mp-premium-italic-font-style);
        letter-spacing:
            var(--mp-premium-italic-letter-spacing);
        gap: 7px;
        transition:
            color 0.25s ease,
            background 0.25s ease;
    }

    .mp-lang-list a.active-lang {
        display: none;
    }

    .mp-mobile-menu > a::before,
    .mp-lang-list a::before {
        content: "›";
        position: absolute;
        right: 22px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        color: var(--mp-gold);
        opacity: 0.76;
        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }

    .mp-mobile-menu > a:hover::before,
    .mp-mobile-menu > a:focus-visible::before,
    .mp-mobile-menu > a.mp-active-link::before,
    .mp-lang-list a:hover::before,
    .mp-lang-list a:focus-visible::before {
        transform: translateY(-50%) translateX(4px);
        opacity: 1;
    }

    .mp-mobile-menu > a::after,
    .mp-lang-list a::after {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 0;
        height: var(--mp-decorative-line-height);
        background: var(--mp-decorative-navigation-line-right-dark-gold);
        transform: scaleY(0.82);
    }

    .mp-mobile-menu > a:last-of-type::after,
    .mp-lang-list a:last-child::after {
        display: none;
    }

    .mp-mobile-menu a:hover,
    .mp-mobile-menu a:focus-visible,
    .mp-mobile-menu > a.mp-active-link,
    .mp-lang-list a:hover,
    .mp-lang-list a:focus-visible {
        color: var(--mp-color-gold-dark);
        background:
            var(
                --mp-navigation-list-highlight-background
            );
    }

    .mp-mobile-menu > a:hover,
    .mp-mobile-menu > a:focus-visible,
    .mp-mobile-menu > a.mp-active-link {
        color: var(--mp-color-gold-dark);
    }



    /* ======================================================================
       MOBILE ACCESSORIES SUBMENU
       ====================================================================== */

    .mp-mobile-submenu {
        position: relative;
    }

    .mp-mobile-submenu-toggle {
        width: 100%;
        min-height: var(--mp-row);
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 0 22px;
        margin: 0;
        border: 0;
        border-radius: 0;
        outline: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        box-shadow: none;
        font-family: var(--mp-font);
        font-size: 14px;
        line-height: 1;
        font-weight: var(--mp-font-weight-bold);
        letter-spacing: 0.06em;
        color: var(--mp-color-dark);
        text-align: left;
        text-transform: uppercase;
        cursor: pointer;
        transition:
            color 0.25s ease,
            background 0.25s ease;
    }

    .mp-mobile-submenu-toggle::after {
        content: "";
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 0;
        height: var(--mp-decorative-line-height);
        background: var(--mp-decorative-navigation-line-right-dark-gold);
        transform: scaleY(0.82);
    }

    .mp-mobile-submenu-toggle b {
        display: block;
        flex-shrink: 0;
        font-size: 28px;
        line-height: 1;
        font-weight: 300;
        color: var(--mp-gold);
        transform: rotate(90deg);
        opacity: 0.76;
        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }

    .mp-mobile-submenu-toggle:hover,
    .mp-mobile-submenu-toggle:focus-visible,
    .mp-mobile-submenu.submenu-open .mp-mobile-submenu-toggle {
        color: var(--mp-color-gold-dark);
        background:
            var(
                --mp-navigation-list-highlight-background
            );
    }

    .mp-mobile-submenu-toggle:hover b,
    .mp-mobile-submenu-toggle:focus-visible b {
        opacity: 1;
    }

    .mp-mobile-submenu.submenu-open .mp-mobile-submenu-toggle b {
        transform: rotate(-90deg);
        opacity: 1;
    }

    .mp-mobile-submenu-list {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        background: rgba(244, 236, 226, 0.44);
        transition:
            max-height var(--mp-duration-slow) var(--mp-ease),
            opacity 0.22s ease,
            visibility 0s linear var(--mp-duration-slow);
    }

    .mp-mobile-submenu.submenu-open .mp-mobile-submenu-list {
        max-height: 280px;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .mp-mobile-submenu-list a {
        min-height: 42px;
        padding: 0 46px 0 34px;
        font-size: 12px;
        letter-spacing: 0.045em;
        color: var(--mp-color-grey);
        background: transparent;
    }

    .mp-mobile-submenu-list a::before {
        content: "›";
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 23px;
        line-height: 1;
        font-weight: 300;
        color: var(--mp-gold);
        opacity: 0.72;
        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }

    .mp-mobile-submenu-list a::after {
        content: "";
        position: absolute;
        left: 34px;
        right: 22px;
        bottom: 0;
        height: var(--mp-decorative-line-height);
        background: var(--mp-decorative-navigation-line-right-light-gold);
        transform: scaleY(0.82);
    }

    .mp-mobile-submenu-list a:last-child::after {
        display: none;
    }

    .mp-mobile-submenu-list a:hover,
    .mp-mobile-submenu-list a:focus-visible,
    .mp-mobile-submenu-list a.mp-active-link {
        color: var(--mp-color-gold-dark);
        background: rgba(244, 236, 226, 0.72);
    }

    .mp-mobile-submenu-list a:hover::before,
    .mp-mobile-submenu-list a:focus-visible::before,
    .mp-mobile-submenu-list a.mp-active-link::before {
        transform: translateY(-50%) translateX(4px);
        opacity: 1;
    }


    /* ======================================================================
       MOBILE SECTION TITLES
       ====================================================================== */

    .mp-mobile-title {
        justify-content: center;
        height: var(--mp-row);
        padding: 0;
        border: 0;
        box-shadow: none;
        background:
            var(
                --mp-navigation-centered-title-background
            );
        color: var(--mp-gold);
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: center;
    }

    /*
     * Section labels are orientation aids, not touch targets. Keep the
     * interactive application row at the full shared mobile row height.
     */

    .mp-mobile-title:not(.mp-app-install-title) {
        min-height: 36px;
        height: 36px;
    }


    /* ======================================================================
       MOBILE KNOWLEDGE GRID
       ====================================================================== */

    .mp-mobile-knowledge-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px 18px 10px;
    }

    .mp-mobile-knowledge-link {
        min-height: 52px;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 14px;
        border: 1px solid rgba(199, 154, 87, 0.26);
        border-radius: var(--mp-radius);
        background: var(--mp-navigation-tile-background);
        font-size: 11.5px !important;
        letter-spacing: 0.04em !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition:
            background 0.25s ease,
            border-color 0.25s ease,
            color 0.25s ease;
    }

    .mp-mobile-knowledge-link::before,
    .mp-mobile-knowledge-link::after {
        display: none !important;
    }

    .mp-mobile-knowledge-link img {
        width: 27px;
        height: 27px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .mp-mobile-knowledge-link[href*="konto-pupila"] img {
        width: 24px;
        height: 24px;
    }

    .mp-mobile-knowledge-link span {
        white-space: nowrap;
    }

    .mp-mobile-knowledge-link:hover,
    .mp-mobile-knowledge-link:focus-visible,
    .mp-mobile-knowledge-link.mp-active-link {
        color: var(--mp-color-gold-dark) !important;
        background: var(--mp-bg-soft) !important;
        border-color: rgba(176, 132, 72, 0.44) !important;
        box-shadow: none !important;
    }


    /* ======================================================================
       MOBILE APPLICATION ACTION
       ====================================================================== */

    .mp-app-install-title {
        width: 100%;
        margin: 8px 0 0;
        gap: 6px;
        border: 0;
        border-radius: 0 0 var(--mp-radius) var(--mp-radius);
        outline: 0;
        appearance: none;
        -webkit-appearance: none;
        color: var(--mp-cream);
        cursor: pointer;
        background: var(--mp-action-soft-background);
    }

    .mp-app-install-title:hover,
    .mp-app-install-title:focus-visible {
        color: var(--mp-cream);
        background: var(--mp-action-soft-background-hover);
    }

    .mp-app-install-title:active,
    .mp-app-install-title.app-clicked {
        color: var(--mp-cream);
        background: var(--mp-action-soft-background-active);
    }

    .mp-install-icon {
        width: 26px;
        height: 22px;
        display: block;
        flex-shrink: 0;
        object-fit: contain;
        transform: translateY(-1px);
    }

    .mp-install-icon circle,
    .mp-install-icon path {
        fill: none;
        stroke: var(--mp-cream);
        stroke-width: 7.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mp-app-install-title img.mp-install-icon {
        filter:
            brightness(0)
            saturate(100%)
            invert(96%)
            sepia(18%)
            saturate(313%)
            hue-rotate(322deg)
            brightness(104%)
            contrast(95%);
    }
}

/* ==========================================================================
   HEADER CART COUNTER
   ========================================================================== */

.mp-nav-icon-link-cart,
.mp-mobile-actions .mp-cart {
    position: relative;
}

.mp-cart-count {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--mp-radius-pill);
    background: var(--mp-color-gold-dark);
    color: var(--mp-color-cream);
    font-family: var(--mp-font-body);
    font-size: 10px;
    line-height: 1;
    font-weight: var(--mp-font-weight-bold);
    letter-spacing: 0;
    text-align: center;
    box-shadow:
        0 2px 5px rgba(70, 50, 30, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.mp-cart-count.is-empty {
    display: none;
}

@media (min-width: 1121px) {

    .mp-nav-icon-link-cart .mp-cart-count {
        margin-left: -1px;
    }
}

@media (max-width: 1120px) {

    .mp-mobile-actions .mp-cart-count {
        position: absolute;
        top: 0;
        right: -2px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 9px;
    }
}

@media (max-width: 782px) {

    /*
     * WordPress' narrow mobile Admin Bar is 46px high. Keep the same overlay
     * model while preserving the normal MegaPets Header clearance.
     */

    body.admin-bar {
        padding-top:
            calc(
                var(--mp-site-header-clearance-mobile)
                - 46px
            );
    }

    body.admin-bar .mp-main-header {
        top: 0;
    }
}