/* ═══════════════════════════════════════════════════════
   HERO — Accent più vivace per staccare dal cielo video
   ------------------------------------------------------- */
.ds-hero-section .ds-hero-accent {
    color: #4ABBE0 !important;
}
.ds-hero-section .ds-hero-eyebrow {
    color: rgba(255,255,255,0.95) !important;
    background: rgba(13, 36, 64, 0.55);
    display: inline-block;
    padding: 5px 12px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-left: 8px solid #009246;
    border-right: 8px solid #CE2B37;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
}

/* ═══════════════════════════════════════════════════════
   DOGSPORT — Logo nativo animato (no floating div)
   Il logo resta nel DOM dell'header (z-index 390).
   JS imposta --ds-t (0→1) su :root allo scroll.
   CSS fa tutto il resto con calc().
   ═══════════════════════════════════════════════════════ */

/* --- Overflow visible: permette al logo di estendersi sotto la barra --- */
.whb-general-header,
.whb-general-header .container,
.whb-general-header .whb-flex-row,
.whb-general-header .whb-col-center {
    overflow: visible !important;
}

/* --- Flex row: centra verticalmente e sincronizza altezza con header --- */
.whb-general-header .whb-flex-row {
    align-items: center !important;
}

/* --- Colonna centro: spazio per il logo tra i due menu --- */
.whb-general-header .whb-col-center {
    min-width: 100px !important;
    flex: 0 0 100px !important;
}

/* --- Logo nativo: position absolute dentro l'header --- */
.whb-general-header .site-logo {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* --- Ripristina visibilita logo nativo --- */
.whb-general-header .wd-logo.wd-main-logo {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --- Logo img: transizione fluida --- */
.whb-general-header .wd-logo img {
    max-height: none !important;
    height: auto;
    width: auto;
    display: block;
}

/* -------------------------------------------------------
   HOMEPAGE DESKTOP (body.ds-logo-home, >= 768px)
   Partenza: 280px a Y=70px → 60px centrato in barra 60px
   ------------------------------------------------------- */
body.ds-logo-home .whb-general-header .site-logo {
    top: calc(70px * (1 - var(--ds-t, 0)));
}
body.ds-logo-home .whb-general-header .wd-logo img {
    max-height: calc(280px - 220px * var(--ds-t, 0)) !important;
}

/* -------------------------------------------------------
   HOMEPAGE MOBILE (< 768px)
   Partenza: 160px a Y=165px → 60px centrato in barra 60px
   ------------------------------------------------------- */
@media (max-width: 767px) {
    body.ds-logo-home .whb-general-header .site-logo {
        top: calc(120px * (1 - var(--ds-t, 0)));
    }
    body.ds-logo-home .whb-general-header .wd-logo img {
        max-height: calc(160px - 100px * var(--ds-t, 0)) !important;
    }
}

/* -------------------------------------------------------
   ALTRE PAGINE (body.ds-logo-page)
   Partenza: 85px centrato in barra 95px → 60px in barra 60px
   ------------------------------------------------------- */
body.ds-logo-page .whb-general-header .site-logo {
    top: calc(5px * (1 - var(--ds-t, 0)));
}
body.ds-logo-page .whb-general-header .wd-logo img {
    max-height: calc(85px - 25px * var(--ds-t, 0)) !important;
}

/* -------------------------------------------------------
   STICKY CLONE: sempre compatto
   ------------------------------------------------------- */
.whb-clone .site-logo {
    --ds-t: 1;
}

/* -------------------------------------------------------
   OVERLAY APERTI: nasconde logo (sicurezza extra)
   L'header ha z-index 390, gli overlay 400+ quindi il logo
   e' gia' dietro. Questo e' un rinforzo visivo.
   ------------------------------------------------------- */
html.wd-search-opened .whb-general-header .site-logo,
html.wd-overflow-hidden .whb-general-header .site-logo {
    opacity: 0;
    pointer-events: none;
}

/* -------------------------------------------------------
   MOBILE: barra header piu compatta + lingua ridotta
   ------------------------------------------------------- */
@media (max-width: 767px) {
    /* Barra header mobile: piu bassa */
    .whb-general-header {
        height: 55px !important;
    }
    .whb-general-header .whb-flex-row {
        height: 55px !important;
    }

    /* Nasconde selettore lingua su mobile */
    .whb-header-bottom {
        display: none !important;
    }

    /* Corregge il padding-top dell'header (era calcolato includendo la lingua) */
    .whb-header {
        padding-top: 55px !important;
    }
}

    /* Nasconde Lista dei desideri dal menu mobile */
    .mobile-nav .menu-item-wishlist {
        display: none !important;
    }

    /* Nasconde le icone dalle categorie nel menu mobile (tab Shop) */
    .mobile-nav .wd-nav-img {
        display: none !important;
    }

    /* Rinomina "Categorie" → "Shop" nel tab switcher */
    .mobile-nav .mobile-categories-title {
        visibility: hidden !important;
        position: relative;
    }
    .mobile-nav .mobile-categories-title::after {
        content: 'Shop';
        visibility: visible;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: 'Barlow Condensed', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }
}

/* -------------------------------------------------------
   FIX BOTTONE CERCA MOBILE (pre-esistente)
   ------------------------------------------------------- */
@media (max-width: 767px) {
    .mobile-nav .searchsubmit {
        width: 50px !important;
        height: 50px !important;
        right: 10px !important;
        top: 50% !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        border-radius: 50% !important;
        font-size: 0 !important;
    }
    .mobile-nav .searchsubmit span {
        display: none !important;
    }
    .mobile-nav input.s {
        padding-right: 70px !important;
    }
}