/*
 * Public Hub authentic identity stage.
 *
 * A verified/uploaded/source-attributed identity image still wins.
 * This stage is typography + the actual Ehopto brand asset (on its canonical
 * Hub only); it never implies that a fictional shop photo is the real entity.
 */
/* The hero kicker already displays the entity kind. Don't repeat it
   directly beneath the name on the public reading surface. */
html[data-hub-storefront] body .hub-market[data-hub-public-view] > .hm-hero:not(.is-person) .hm-main .hm-entity-type {
    display: none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-visual.is-identity-stage {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(255px, 29vw, 355px) !important;
    min-height: 255px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    background: #071a38 !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-identity-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 255px;
    padding: 32px 26px 54px;
    color: #f8fbff;
    background:
        radial-gradient(ellipse at 74% 14%, rgba(22, 187, 193, .24), transparent 39%),
        radial-gradient(ellipse at 16% 87%, rgba(34, 123, 243, .38), transparent 49%),
        linear-gradient(130deg, #06142c 0%, #0b2c56 57%, #0b2248 100%);
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-identity-stage.is-entity-mark {
    background:
        radial-gradient(ellipse at 70% 15%, color-mix(in srgb, var(--hm-accent) 23%, transparent), transparent 44%),
        radial-gradient(ellipse at 15% 95%, rgba(45, 135, 234, .28), transparent 48%),
        linear-gradient(132deg, #08142c 0%, #122a48 60%, #091831 100%);
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-mesh {
    pointer-events: none;
    position: absolute;
    inset: -30%;
    opacity: .26;
    transform: rotate(-12deg) scale(1.1);
    background:
        linear-gradient(90deg, transparent 98.5%, rgba(146, 197, 245, .23) 100%) 0 0 / 48px 48px,
        linear-gradient(0deg, transparent 98.5%, rgba(146, 197, 245, .23) 100%) 0 0 / 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000, transparent 73%);
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-ring {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(163, 207, 255, .19);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-ring.ring-one {
    width: 500px;
    height: 500px;
    top: -320px;
    right: -170px;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-ring.ring-two {
    width: 430px;
    height: 430px;
    bottom: -330px;
    left: -135px;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-wordmark {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: clamp(19px, 2.2vw, 30px) clamp(20px, 3.1vw, 40px);
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 18px;
    background: linear-gradient(150deg, #fff, #edf7ff);
    box-shadow: 0 20px 56px rgba(1, 12, 34, .32), inset 0 1px rgba(255,255,255,.9);
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-wordmark img {
    display: block;
    width: min(100%, 278px);
    min-width: min(52vw, 195px);
    max-height: 100px !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    /* The original Hub stylesheet puts a dark background on every
       image inside .hm-visual; it must not show through our transparent logo. */
    background: transparent !important;
    filter: none !important;
    box-shadow: none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-brand-line {
    color: #e1f2ff;
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 760;
    line-height: 1.45;
    text-align: center;
    letter-spacing: .19em;
    text-transform: uppercase;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-monogram {
    display: grid;
    place-items: center;
    width: clamp(110px, 13vw, 158px);
    height: clamp(110px, 13vw, 158px);
    border-radius: 26px;
    font-size: clamp(68px, 8.5vw, 105px);
    line-height: 1;
    letter-spacing: -.06em;
    font-weight: 800;
    color: #f5faff;
    background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: 0 17px 42px rgba(0,6,24,.22);
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-entity-kind {
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #d9e8f9;
    text-align: center;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-bottom {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    left: 23px;
    right: 62px; /* Reserve the built-in image provenance/info button. */
    bottom: 17px;
    font-size: 10px;
    letter-spacing: .055em;
    line-height: 1.4;
    color: #c4dbf1;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-ecode {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .06em;
    color: #e7f5ff;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-image-recovery {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-image-recovery[hidden] {
    display: none !important;
}
html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-image-recovery .ehub-identity-stage {
    min-height: 100%;
}
/* Dark and light site themes share one stable premium hero palette. */
@media (max-width: 780px) {
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .hm-visual.is-identity-stage {
        height: clamp(238px, 54vw, 335px) !important;
        min-height: 238px !important;
    }
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-identity-stage {
        min-height: 238px;
        padding-inline: 16px;
    }
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-wordmark {
        padding: 18px 22px;
        border-radius: 15px;
    }
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-wordmark img {
        min-width: 0;
        width: clamp(180px, 47vw, 270px);
    }
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-stage-bottom {
        left: 15px;
        right: 56px;
        bottom: 14px;
        font-size: 9px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html[data-hub-storefront] body .hub-market[data-hub-public-view] .ehub-identity-stage * {
        animation: none !important;
        transition: none !important;
    }
}
