/* Reusable share control — skins adapt to each landing without owning the layout */
.share {
    --share-fg: #1f1b17;
    --share-border: rgba(31, 27, 23, 0.22);
    --share-bg: transparent;
    --share-hover-fg: #7a1848;
    --share-hover-border: #c2185b;
    --share-hover-bg: rgba(194, 24, 91, 0.06);
    --share-menu-bg: #fffcf8;
    --share-menu-border: rgba(31, 27, 23, 0.12);
    --share-menu-shadow: 0 14px 36px rgba(7, 7, 9, 0.14);
    --share-option-hover-bg: rgba(194, 24, 91, 0.08);
    --share-option-hover-fg: #7a1848;
    --share-status: #746b61;
    --share-radius: 0.35rem;
    --share-font-size: 0.78rem;
    --share-tracking: 0.14em;
    --share-weight: 600;
    --share-min-height: 3rem;
    --share-pad-x: 1.2rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--share-min-height);
    padding: 0.75rem var(--share-pad-x);
    border: 1px solid var(--share-border);
    border-radius: var(--share-radius);
    background: var(--share-bg);
    color: var(--share-fg);
    font: inherit;
    font-size: var(--share-font-size);
    font-weight: var(--share-weight);
    letter-spacing: var(--share-tracking);
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.share__btn:hover,
.share__btn[aria-expanded="true"] {
    border-color: var(--share-hover-border);
    color: var(--share-hover-fg);
    background: var(--share-hover-bg);
}

.share__btn:focus-visible {
    outline: 2px solid var(--share-hover-border);
    outline-offset: 3px;
}

.share__icon {
    flex-shrink: 0;
    opacity: 0.92;
}

.share__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.5rem);
    z-index: 40;
    min-width: 11.75rem;
    padding: 0.35rem;
    border: 1px solid var(--share-menu-border);
    border-radius: max(var(--share-radius), 0.35rem);
    background: var(--share-menu-bg);
    box-shadow: var(--share-menu-shadow);
}

.share__menu[hidden] {
    display: none;
}

.share__option {
    display: block;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: calc(max(var(--share-radius), 0.35rem) - 0.08rem);
    background: transparent;
    color: var(--share-fg);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.share__option:hover,
.share__option:focus-visible {
    background: var(--share-option-hover-bg);
    color: var(--share-option-hover-fg);
    outline: none;
}

.share__status {
    position: absolute;
    left: 0;
    top: calc(100% + 0.35rem);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--share-status);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.share__status.is-visible {
    opacity: 1;
}

/* ——— Themes ——— */
.share--dark {
    --share-fg: #f3eee6;
    --share-border: rgba(243, 238, 230, 0.28);
    --share-bg: transparent;
    --share-hover-fg: #e8c9a0;
    --share-hover-border: #e8c9a0;
    --share-hover-bg: rgba(232, 201, 160, 0.08);
    --share-menu-bg: #141418;
    --share-menu-border: rgba(243, 238, 230, 0.14);
    --share-menu-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    --share-option-hover-bg: rgba(196, 163, 90, 0.12);
    --share-option-hover-fg: #e8c9a0;
    --share-status: rgba(243, 238, 230, 0.7);
}

.share--light {
    --share-fg: #1f1b17;
    --share-border: rgba(31, 27, 23, 0.2);
    --share-bg: rgba(255, 252, 247, 0.5);
}

/* ——— Brand skins (metrics + accent only) ——— */
.share--skin-star {
    --share-radius: 0.35rem;
    --share-hover-fg: #e0c9a0;
    --share-hover-border: #b79b6c;
    --share-hover-bg: rgba(183, 155, 108, 0.1);
}

.share--skin-restora {
    --share-radius: 0;
    --share-font-size: 0.68rem;
    --share-weight: 500;
    --share-tracking: 0.14em;
    --share-fg: #f3eee6;
    --share-border: rgba(243, 238, 230, 0.28);
    --share-hover-fg: #c4a35a;
    --share-hover-border: #c4a35a;
    --share-hover-bg: rgba(196, 163, 90, 0.1);
    --share-menu-bg: #120e0c;
    --share-menu-border: rgba(196, 163, 90, 0.28);
    --share-option-hover-bg: rgba(196, 163, 90, 0.14);
    --share-option-hover-fg: #c4a35a;
    --share-status: rgba(243, 238, 230, 0.65);
}

.share--skin-mednet {
    --share-radius: 2px;
    --share-tracking: 0.12em;
    --share-fg: #e8f0f2;
    --share-border: rgba(232, 240, 242, 0.28);
    --share-hover-fg: #7ec8c4;
    --share-hover-border: rgba(126, 200, 196, 0.7);
    --share-hover-bg: rgba(46, 139, 134, 0.14);
    --share-menu-bg: #0c1a1c;
    --share-menu-border: rgba(126, 200, 196, 0.22);
    --share-option-hover-bg: rgba(46, 139, 134, 0.18);
    --share-option-hover-fg: #7ec8c4;
    --share-status: rgba(232, 240, 242, 0.65);
}

.share--skin-bigan {
    --share-radius: 0;
    --share-min-height: 2.5rem;
    --share-pad-x: 1.05rem;
    --share-font-size: 0.84rem;
    --share-tracking: 0.04em;
    --share-weight: 600;
    --share-fg: #1a1c22;
    --share-border: rgba(26, 28, 34, 0.22);
    --share-bg: transparent;
    --share-hover-fg: #14161c;
    --share-hover-border: #14161c;
    --share-hover-bg: rgba(20, 22, 28, 0.05);
    --share-menu-bg: #fff;
    --share-menu-border: rgba(20, 22, 28, 0.1);
    --share-option-hover-bg: rgba(20, 22, 28, 0.05);
    --share-option-hover-fg: #14161c;
    --share-status: #6b7280;
}

.share--skin-noa {
    --share-radius: 2px;
    --share-font-size: 0.82rem;
    --share-tracking: 0.08em;
    --share-weight: 500;
    --share-fg: #2a4a6e;
    --share-border: rgba(58, 95, 138, 0.35);
    --share-bg: transparent;
    --share-hover-fg: #3a5f8a;
    --share-hover-border: #3a5f8a;
    --share-hover-bg: rgba(58, 95, 138, 0.08);
    --share-menu-bg: #f7f9fb;
    --share-menu-border: rgba(58, 95, 138, 0.18);
    --share-option-hover-bg: rgba(58, 95, 138, 0.1);
    --share-option-hover-fg: #2a4a6e;
    --share-status: #6a7a8a;
}

.share--skin-kimera {
    --share-radius: 2px;
    --share-tracking: 0.12em;
    --share-fg: #0a1f30;
    --share-border: rgba(10, 31, 48, 0.18);
    --share-bg: transparent;
    --share-hover-fg: #3a6f62;
    --share-hover-border: #4d8b7a;
    --share-hover-bg: rgba(77, 139, 122, 0.1);
    --share-menu-bg: #f7f4ee;
    --share-menu-border: rgba(10, 31, 48, 0.1);
    --share-menu-shadow: 0 14px 36px rgba(10, 31, 48, 0.1);
    --share-option-hover-bg: rgba(77, 139, 122, 0.1);
    --share-option-hover-fg: #3a6f62;
    --share-status: #6b7572;
}

/* Stretch with stacked hero CTAs (BI GAN mobile) */
@media (max-width: 560px) {
    .lg-actions .share {
        width: 100%;
    }

    .lg-actions .share__btn {
        width: 100%;
        min-height: 2.35rem;
        padding: 0.55rem 0.9rem;
        font-size: 0.84rem;
    }
}