/* Phase MOBILE-FIXED-UI-1: unified mobile header actions and restored two-part dock. */

.mobile_phone_floating {
    display: none;
}

@media (max-width: 768px) {
    :root {
        --eight-mobile-header-height: 56px;
        --eight-mobile-action-width: clamp(70px, 19vw, 76px);
    }

    html {
        scroll-padding-top: 76px;
    }

    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    main {
        padding-top: var(--eight-mobile-header-height);
    }

    #sp_header.header {
        height: var(--eight-mobile-header-height);
        padding-left: 12px;
        border-bottom: 1px solid rgba(32, 35, 36, 0.12);
        background: #fff;
        box-shadow: 0 2px 10px rgba(18, 50, 87, 0.06);
    }

    #sp_header.header .header_inner {
        padding-right: var(--eight-mobile-action-width);
    }

    #sp_header.header .header_inner .logo {
        width: 46px;
        height: 46px;
    }

    #sp_header.header .header_inner .header_buttons {
        position: absolute;
        top: 0;
        right: var(--eight-mobile-action-width);
        height: var(--eight-mobile-header-height);
    }

    #sp_header.header .header_inner .header_buttons::before {
        display: none;
    }

    #sp_header.header .header_inner .header_buttons .btn_instagram,
    #sp_header.header .header_inner .header_buttons .btn_contact,
    .btn_menu {
        box-sizing: border-box;
        width: var(--eight-mobile-action-width);
        height: var(--eight-mobile-header-height);
        min-height: 44px;
        gap: 4px;
        border: 0;
        background: transparent;
        color: #a93659;
    }

    #sp_header.header .header_inner .header_buttons .btn_instagram,
    #sp_header.header .header_inner .header_buttons .btn_official_shop {
        background: transparent;
    }

    #sp_header.header .header_inner .header_buttons .btn_instagram + .btn_official_shop,
    .btn_menu {
        border-left: 1px solid rgba(32, 35, 36, 0.12);
    }

    #sp_header.header .header_inner .header_buttons .btn_instagram .icon_box,
    #sp_header.header .header_inner .header_buttons .btn_contact .icon_box {
        width: 22px;
        height: 22px;
    }

    #sp_header.header .header_inner .header_buttons .btn_instagram .icon_box .image,
    #sp_header.header .header_inner .header_buttons .btn_contact .icon_box .image {
        display: block;
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    #sp_header.header .header_inner .header_buttons .btn_instagram .btn_text,
    #sp_header.header .header_inner .header_buttons .btn_contact .btn_text,
    .btn_menu .btn_text {
        color: #a93659;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .btn_menu {
        top: 0;
        right: 0;
        z-index: 999;
        padding: 0;
        cursor: pointer;
    }

    .btn_menu .icon_box {
        width: 22px;
        height: 18px;
    }

    .btn_menu .icon_box span {
        height: 2px;
        background: #a93659;
    }

    .btn_menu.active .icon_box span {
        background: #fff;
    }

    .btn_menu.active .btn_text {
        color: #fff;
    }

    #sp_header.header .header_inner .header_buttons a:focus-visible,
    .btn_menu:focus-visible {
        outline: 3px solid #123257;
        outline-offset: -4px;
    }

    .mobile_fixed_actions,
    .mobile_fixed_actions.mobile_fixed_actions--three {
        z-index: 240;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-height: calc(56px + env(safe-area-inset-bottom));
        height: auto;
        padding-bottom: env(safe-area-inset-bottom);
        background: #28292a;
    }

    .mobile_fixed_actions .mobile_fixed_action,
    .mobile_fixed_actions.mobile_fixed_actions--three .mobile_fixed_action {
        box-sizing: border-box;
        display: flex;
        width: auto;
        min-width: 0;
        min-height: 56px;
        align-items: center;
        justify-content: center;
        padding: 8px 6px;
        border: 0;
        font-size: clamp(13px, 3.8vw, 16px);
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
    }

    .mobile_fixed_actions .mobile_fixed_action--line {
        background: var(--eight-line-cta, #107c41);
        box-shadow: inset 0 3px 0 var(--eight-line-green, #06c755);
        color: #fff;
    }

    .mobile_fixed_actions .mobile_fixed_action--menu {
        border-left: 1px solid rgba(255, 255, 255, 0.6);
        background: var(--eight-brand-pink, #a93659);
        color: #fff;
    }

    .mobile_fixed_actions .mobile_fixed_action:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -5px;
        box-shadow: inset 0 0 0 5px #28292a;
    }

    .mobile_phone_floating {
        position: fixed;
        z-index: 245;
        right: 14px;
        bottom: calc(56px + env(safe-area-inset-bottom) + 12px);
        display: inline-flex;
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #123257;
        box-shadow: 0 5px 18px rgba(18, 50, 87, 0.28);
        color: #fff;
        text-decoration: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .mobile_phone_floating::after {
        content: none;
    }

    .mobile_phone_floating__icon {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }

    .mobile_phone_floating:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 0 0 5px #123257;
    }

    #sp_menu.sp_menu.active ~ .mobile_phone_floating {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 340px) {
    #sp_header.header .header_inner .header_buttons .btn_instagram .btn_text,
    #sp_header.header .header_inner .header_buttons .btn_contact .btn_text,
    .btn_menu .btn_text {
        font-size: 10.5px;
    }
}