/* Upper-area polish shared by the homepage and legacy pages with Modern Purple chrome. */
:is(.mp-body,.mp-chrome) .mp-header {
    color:var(--mp-text);
    transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
:is(.mp-body,.mp-chrome) .mp-topbar,
:is(.mp-body,.mp-chrome) .mp-nav-wrap,
:is(.mp-body,.mp-chrome) .mp-header a,
:is(.mp-body,.mp-chrome) .mp-header summary,
:is(.mp-body,.mp-chrome) .mp-preferences summary {
    transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
/* Keep all existing dimensions. Focus belongs to the form border, not the input. */
:is(.mp-body,.mp-chrome) .mp-header .mp-search {
    box-shadow:none;
    transition:border-color .2s ease,background-color .22s ease;
}
:is(.mp-body,.mp-chrome) .mp-header .mp-search:focus-within {
    border-color:var(--mp-purple); background:var(--mp-bg); box-shadow:none;
}
:is(.mp-body,.mp-chrome) .mp-header .mp-search input,
:is(.mp-body,.mp-chrome) .mp-header .mp-search input:focus,
:is(.mp-body,.mp-chrome) .mp-header .mp-search input:focus-visible {
    background:transparent!important; box-shadow:none!important; outline:none!important;
    border:0; color:var(--mp-text);
}
:is(.mp-body,.mp-chrome) .mp-header .mp-search>.mp-icon {
    transition:transform .2s ease,color .2s ease;
}
:is(.mp-body,.mp-chrome) .mp-header .mp-search:focus-within>.mp-icon {
    color:var(--mp-purple); transform:translateX(1px) rotate(-5deg);
}
:is(.mp-body,.mp-chrome) .mp-header .mp-search input::placeholder { color:var(--mp-muted); opacity:1; }
:is(.mp-body,.mp-chrome) .mp-header .mp-search button,
:is(.mp-body,.mp-chrome) .mp-header .mp-icon-button,
:is(.mp-body,.mp-chrome) .mp-header .mp-nav-cta>.mp-button,
:is(.mp-body,.mp-chrome) .mp-header .mp-account {
    transition:transform .18s ease,color .2s ease,background-color .2s ease,border-color .2s ease;
}
:is(.mp-body,.mp-chrome) .mp-header .mp-search button:active,
:is(.mp-body,.mp-chrome) .mp-header .mp-icon-button:not(:disabled):active,
:is(.mp-body,.mp-chrome) .mp-header .mp-nav-cta>.mp-button:active,
:is(.mp-body,.mp-chrome) .mp-header .mp-account:active { transform:scale(.97); }
:is(.mp-body,.mp-chrome) .mp-header .mp-navigation>a { position:relative; }
:is(.mp-body,.mp-chrome) .mp-header .mp-navigation>a:after {
    content:""; position:absolute; left:0; right:0; bottom:-7px; height:1.5px;
    background:var(--mp-purple); border-radius:2px; pointer-events:none;
    transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
:is(.mp-body,.mp-chrome) .mp-header .mp-navigation>a[aria-current=page] { box-shadow:none; }
:is(.mp-body,.mp-chrome) .mp-header .mp-navigation>a[aria-current=page]:after,
:is(.mp-body,.mp-chrome) .mp-header .mp-navigation>a:focus-visible:after { transform:scaleX(1); }
:is(.mp-body,.mp-chrome) .mp-header .mp-category-dropdown,
:is(.mp-body,.mp-chrome) .mp-header .mp-account-dropdown,
:is(.mp-body,.mp-chrome) .mp-popover { transform-origin:top; }
/* Native horizontal scrolling stays available; JavaScript only manages the arrows. */
:is(.mp-body,.mp-chrome) .mp-category-section .mp-rail-arrow[hidden] { display:none!important; }
:is(.mp-body,.mp-chrome) .mp-category-section .mp-rail-arrow {
    transition:color .2s ease,background-color .2s ease,border-color .2s ease,opacity .18s ease;
}
:is(.mp-body,.mp-chrome) .mp-category-section .mp-rail-arrow:disabled { opacity:.25; cursor:default; }
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-art {
    overflow:hidden; transform:none;
    transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-art img { transition:transform .22s ease; }
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item strong { transition:color .22s ease; }
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item[aria-current=page] .mp-category-art,
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:focus-visible .mp-category-art,
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:active .mp-category-art {
    border-color:var(--mp-purple); box-shadow:0 0 0 2px color-mix(in srgb,var(--mp-purple) 24%,transparent);
}
:is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item[aria-current=page] strong { color:var(--mp-purple); }
@media (hover:hover) and (pointer:fine) {
    :is(.mp-body,.mp-chrome) .mp-header .mp-search button:hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-icon-button:not(:disabled):hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-nav-cta>.mp-button:hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-account:hover { transform:translateY(-1px); }
    :is(.mp-body,.mp-chrome) .mp-header .mp-navigation>a:hover:after { transform:scaleX(1); }
    :is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:hover .mp-category-art {
        transform:none; border-color:var(--mp-purple);
        box-shadow:0 0 0 2px color-mix(in srgb,var(--mp-purple) 24%,transparent);
    }
    :is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:hover .mp-category-art img { transform:scale(1.055); }
    :is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:hover strong { color:var(--mp-purple); }
}
@media (hover:none), (pointer:coarse) {
    :is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:hover .mp-category-art,
    :is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item:hover .mp-category-art img { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
    :is(.mp-body,.mp-chrome) .mp-header,
    :is(.mp-body,.mp-chrome) .mp-topbar,
    :is(.mp-body,.mp-chrome) .mp-header *,
    :is(.mp-body,.mp-chrome) .mp-header *:after,
    :is(.mp-body,.mp-chrome) .mp-preferences *,
    :is(.mp-body,.mp-chrome) .mp-category-section * { transition:none!important; animation:none!important; }
    :is(.mp-body,.mp-chrome) .mp-category-section .mp-category-item .mp-category-art img,
    :is(.mp-body,.mp-chrome) .mp-header .mp-search>.mp-icon,
    :is(.mp-body,.mp-chrome) .mp-header .mp-icon-button:not(:disabled):hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-search button:hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-nav-cta>.mp-button:hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-account:hover,
    :is(.mp-body,.mp-chrome) .mp-header .mp-search button:active,
    :is(.mp-body,.mp-chrome) .mp-header .mp-icon-button:not(:disabled):active,
    :is(.mp-body,.mp-chrome) .mp-header .mp-nav-cta>.mp-button:active,
    :is(.mp-body,.mp-chrome) .mp-header .mp-account:active { transform:none!important; }
}