/* Eudora header 1.0.0 (2026-10-17): announcement bar, desktop mega menu, light site-wide hover motion.
 * Loaded after eudora-look. Phones/tablets (<1024px) keep the drawer menu; nothing here moves body text. */

/* ───────── Announcement bar: two messages ───────── */
.eh-announce__msgs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 16px; }
.eh-announce__sep { width: 1px; height: 16px; background: rgba(255,255,255,.6); flex: none; }
.eh-announce__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.eh-announce__text a:hover { text-decoration-thickness: 2px; }
.eh-announce__text a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

@media only screen and (max-width: 960px) {
    /* Rotating single message: both live in one grid cell, the inactive one fades out. */
    .eh-announce__msgs { display: grid; justify-content: stretch; min-height: 40px; }
    .eh-announce__sep { display: none; }
    .eh-announce__msgs .eh-announce__text {
        grid-area: 1 / 1; align-self: center; font-size: 14px; text-align: left;
        opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
    }
    .eh-announce__msgs .eh-announce__text.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
}
@media (prefers-reduced-motion: reduce) {
    .eh-announce__msgs .eh-announce__text { transition: none !important; }
}
@media only screen and (max-width: 960px) and (prefers-reduced-motion: reduce) {
    .eh-announce__text--points { display: none !important; }
}

/* ───────── Desktop mega menu (>=1024px). JS adds html.eh-mega-on; without it the old dropdown stays. ───────── */
.eh-mega { display: none; }
@media only screen and (min-width: 1024px) {
    html.eh-mega-on .eh-header #nav .nav-primary li.level0:has(> .eh-mega) { position: static; }
    html.eh-mega-on .eh-header #nav .nav-primary li.level0:has(> .eh-mega) > ul.level0,
    html.eh-mega-on .eh-header #nav .nav-primary li.level0:has(> .eh-mega):hover > ul.level0,
    html.eh-mega-on .eh-header #nav .nav-primary li.level0:has(> .eh-mega):focus-within > ul.level0 { display: none !important; }
    /* Panel: full width of the sticky header (its containing block), directly under the logo row. */
    html.eh-mega-on .eh-header .eh-mega {
        display: block; position: absolute; left: 0; right: 0; top: var(--el-header-h); z-index: 80;
        background: #fff; border-top: 1px solid var(--el-line); border-bottom: 1px solid var(--el-line);
        box-shadow: 0 14px 28px rgba(0,0,0,.08);
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, visibility 0s linear .15s;
    }
    html.eh-mega-on .eh-header li.level0.is-mega-open > .eh-mega {
        opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .15s ease;
    }
    .eh-mega__inner { max-width: 1240px; margin: 0 auto; padding: 24px 16px 20px; box-sizing: border-box; }
    html.eh-mega-on .eh-header .eh-header__inner { position: static; }
    html.eh-mega-on .eh-header #nav .nav-primary .eh-mega ul.eh-mega__cols {
        display: flex !important; flex-wrap: wrap; justify-content: center;
        position: static !important; top: auto; left: auto; right: auto; height: auto; min-height: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
        gap: 16px; width: auto; max-width: none; float: none; margin: 0; padding: 0; list-style: none;
    }
    html.eh-mega-on .eh-header #nav .nav-primary .eh-mega li.eh-mega__col { position: static; display: block; float: none; background: none; box-shadow: none; flex: 0 0 180px; width: 180px; margin: 0; padding: 0; border: 0; list-style: none; }
    .eh-mega__link { display: block; padding: 4px; color: var(--el-ink); text-decoration: none; border-radius: 4px; }
    .eh-mega__name { display: flex; align-items: center; min-height: 44px; color: var(--el-ink); font-size: 17px; font-weight: 500; line-height: 1.25; }
    .eh-mega__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--el-soft); border-radius: 4px; }
    .eh-mega__img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .95; transition: opacity .15s ease; }
    .eh-mega__link:hover .eh-mega__name { color: var(--el-brand-dark); text-decoration: underline; text-underline-offset: 4px; }
    .eh-mega__link:hover .eh-mega__img img { opacity: 1; }
    .eh-mega__link:focus-visible, .eh-mega__all:focus-visible { outline: 3px solid var(--el-ink); outline-offset: 2px; }
    .eh-mega__all {
        display: flex; align-items: center; justify-content: center; width: max-content; min-height: 44px;
        margin: 12px auto 0; padding: 0 12px; color: var(--el-ink); font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px;
    }
    .eh-mega__all:hover { color: var(--el-brand-dark); }
    html.eh-mega-on .eh-header li.level0.is-mega-open > a.level0 { color: var(--el-brand-dark); }
    html.eh-mega-on .eh-header #nav .nav-primary a.level0:focus-visible { outline: 3px solid var(--el-ink); outline-offset: -3px; border-radius: 4px; }
}
/* Hover motion (desktop): panel slides down a little, columns fade in in turn, tiles zoom gently. */
@media only screen and (min-width: 1024px) {
    html.eh-mega-on .eh-header .eh-mega { transform: translateY(-6px); transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s; }
    html.eh-mega-on .eh-header li.level0.is-mega-open > .eh-mega { transform: none; transition: opacity .18s ease, transform .22s ease; }
    html.eh-mega-on .eh-header li.level0.is-mega-open .eh-mega__col { animation: eh-col-in .32s ease both; }
    html.eh-mega-on .eh-header li.level0.is-mega-open .eh-mega__col:nth-child(2) { animation-delay: .03s; }
    html.eh-mega-on .eh-header li.level0.is-mega-open .eh-mega__col:nth-child(3) { animation-delay: .06s; }
    html.eh-mega-on .eh-header li.level0.is-mega-open .eh-mega__col:nth-child(4) { animation-delay: .09s; }
    html.eh-mega-on .eh-header li.level0.is-mega-open .eh-mega__col:nth-child(5) { animation-delay: .12s; }
    html.eh-mega-on .eh-header li.level0.is-mega-open .eh-mega__col:nth-child(6) { animation-delay: .15s; }
    .eh-mega__link { transition: transform .2s ease; }
    .eh-mega__img { transition: box-shadow .2s ease; }
    .eh-mega__img img { transition: opacity .15s ease, transform .35s ease; }
    .eh-mega__link:hover { transform: translateY(-3px); }
    .eh-mega__link:hover .eh-mega__img { box-shadow: 0 8px 18px rgba(0,0,0,.12); }
    .eh-mega__link:hover .eh-mega__img img { transform: scale(1.05); }
    /* Plain dropdown (categories with 1-3 sub-categories): tidy card that fades in. */
    .eh-header #nav .nav-primary li.level0:not(:has(> .eh-mega)) > ul.level0 {
        min-width: 220px; padding: 8px 0; background: #fff; border: 1px solid var(--el-line); border-radius: 6px; box-shadow: 0 12px 24px rgba(0,0,0,.08);
    }
    .eh-header #nav .nav-primary li.level0:not(:has(> .eh-mega)):hover > ul.level0,
    .eh-header #nav .nav-primary li.level0:not(:has(> .eh-mega)):focus-within > ul.level0 { animation: eh-drop-in .18s ease both; }
    .eh-header #nav .nav-primary li.level0:not(:has(> .eh-mega)) > ul.level0 a { display: flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 16px; transition: background-color .15s ease, color .15s ease; }
    .eh-header #nav .nav-primary li.level0:not(:has(> .eh-mega)) > ul.level0 a:hover { background: var(--el-soft); color: var(--el-brand-dark); }
}
@keyframes eh-col-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes eh-drop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .eh-mega, .eh-mega__img img, .eh-mega__link, .eh-mega__img { transition: none !important; }
    .eh-mega__col, .eh-header #nav .nav-primary ul.level0 { animation: none !important; }
    .eh-mega__link:hover, .eh-mega__link:hover .eh-mega__img img { transform: none !important; }
}

/* ───────── Light hover motion (colour/opacity only; no transforms on body text) ───────── */
.button, button.button, .btn-cart, a.button {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.button:hover, .btn-cart:hover, a.button:hover { filter: brightness(.93); }
.button:active, .btn-cart:active { filter: brightness(.88); }

.eh-icon-btn { transition: background-color .15s ease, opacity .15s ease; opacity: .88; }
.eh-icon-btn:hover, .eh-icon-btn:focus-visible { opacity: 1; }

/* Underline slides in on drawer-extra and footer text links, and on the main nav items. */
.ef-links a, .ef-legal a, .ef-contact a, .eh-nav__extra a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
    transition: background-size .2s ease, color .15s ease;
}
.ef-links a:hover, .ef-legal a:hover, .ef-contact a:hover, .eh-nav__extra a:hover,
.ef-links a:focus-visible, .ef-legal a:focus-visible, .ef-contact a:focus-visible, .eh-nav__extra a:focus-visible { background-size: 100% 1px; }
.eh-header #nav .nav-primary a.level0 { position: relative; transition: color .15s ease; }
.eh-header #nav .nav-primary a.level0::before {
    content: ""; position: absolute; left: 12px; right: 12px; top: calc(50% + 14px); height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left center; transition: transform .2s ease;
}
.eh-header #nav .nav-primary a.level0:hover::before,
.eh-header #nav .nav-primary a.level0:focus-visible::before { transform: scaleX(1); }
@media (max-width: 960px) { .eh-header #nav .nav-primary a.level0::before { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .button, .btn-cart, .eh-icon-btn, .ef-links a, .ef-legal a, .ef-contact a, .eh-nav__extra a,
    .eh-header #nav .nav-primary a.level0, .eh-header #nav .nav-primary a.level0::before { transition: none !important; }
}

/* Override the legacy blue link hover inside the header. */
.eh-announce .eh-announce__text a:hover, .eh-announce .eh-announce__text a:focus { color: #fff; }
.eh-header #nav .nav-primary a.eh-mega__all:hover, .eh-header #nav .nav-primary a.eh-mega__all:focus, .eh-header #nav .nav-primary .eh-mega__link:hover { color: var(--el-brand-dark, #a8034c); }

/* Footer links already get the slide-in line; drop the legacy text underline so there is only one. */
.ef-footer .ef-links a:hover, .ef-footer .ef-links a:focus, .ef-footer .ef-legal a:hover, .ef-footer .ef-legal a:focus, .ef-footer .ef-contact a:hover, .ef-footer .ef-contact a:focus, .ef-bottom .ef-legal a:hover, .ef-bottom .ef-legal a:focus { text-decoration: none; }