/*
 * MAGELLAN REDESIGN V2
 * Phase 1: site-local stylesheet entrypoint.
 *
 * IMPORTANT:
 * This first patch intentionally contains no visual overrides.
 * Variables are prefixed to avoid collisions with Aspro/Bitrix.
 */

:root {
    --mg-v2-red: #e31e24;
    --mg-v2-green: #4fc53f;

    --mg-v2-text: #191919;
    --mg-v2-grey-20: #333333;
    --mg-v2-grey-40: #666666;
    --mg-v2-grey-60: #999999;
    --mg-v2-grey-72: #b8b8b8;
    --mg-v2-grey-90: #e6e6e6;
    --mg-v2-grey-94: #efefef;
    --mg-v2-grey-97: #f8f8f8;

    --mg-v2-card-radius: 16px;
    --mg-v2-shell-max: 1360px;
}

/* MAGELLAN_REDESIGN_V2_PHASE1_FOUNDATION_START
 *
 * Prototype v0.10 foundation.
 * Presentation only — no Bitrix/Aspro runtime hooks are changed.
 */

:root {
    --mg-v2-font-ui: "Montserrat", Arial, sans-serif;
    --mg-v2-font-product: "Montserrat", Arial, sans-serif;

    --mg-v2-ease: cubic-bezier(.22, 1, .36, 1);
    --mg-v2-fast: 180ms;
    --mg-v2-medium: 320ms;
    --mg-v2-slow: 520ms;
}

/*
 * Base typography.
 * Montserrat is already provided by the active Aspro font stack.
 */
body {
    color: var(--mg-v2-grey-20);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Page title.
 * Keep the existing Bitrix/IPROP H1 and change presentation only.
 */
body .topic__heading #pagetitle {
    color: var(--mg-v2-grey-20);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
}

/*
 * Breadcrumb presentation.
 * Existing links/schema/runtime markup stay untouched.
 */
body .breadcrumbs__item-name {
    color: var(--mg-v2-grey-20);
    font-size: 12px;
    font-weight: 400;
}

body .breadcrumbs__separator {
    color: var(--mg-v2-grey-72);
}

/*
 * Homepage section heading visual from v0.10.
 */
body .wrapper_inner.front .top_block_title {
    color: var(--mg-v2-grey-20);
    font-size: 24px;
    font-weight: 500;
    line-height: 27px;
}

/* MAGELLAN_REDESIGN_V2_PHASE1_FOUNDATION_END */

/* MAGELLAN_REDESIGN_V2_PHASE2A_TIZERS_START
 *
 * Homepage benefits/tizers.
 * Scope: homepage main content only.
 */

body#main .wrapper1.front_page #main-content
.TIZERS .content_wrapper_block.front_tizers > .maxwidth-theme.only-on-front {
    width: min(var(--mg-v2-shell-max), calc(100% - 40px));
    max-width: var(--mg-v2-shell-max);
    margin-right: auto;
    margin-left: auto;
    padding: 28px 0;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-views.tizers.top {
    padding: 0;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-views.tizers.top > .items {
    overflow: hidden;
    padding: 16px 0;
    border: 1px solid var(--mg-v2-grey-90);
    border-radius: var(--mg-v2-card-radius);
    background: #fff;
}

body#main .wrapper1.front_page #main-content
.TIZERS .items > .row.flexbox {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin-right: 0;
    margin-left: 0;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper {
    float: none;
    width: 25%;
    max-width: 25%;
    padding-right: 0;
    padding-left: 0;
    flex: 0 0 25%;
    border-right: 1px solid var(--mg-v2-grey-94);
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper:last-child {
    border-right: 0;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item {
    display: flex;
    min-height: 56px;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    text-align: left;
    transition: background var(--mg-v2-fast) ease;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item:hover {
    background: var(--mg-v2-grey-97);
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item > .image {
    display: flex;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: var(--mg-v2-grey-94);
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    transition: transform var(--mg-v2-medium) var(--mg-v2-ease);
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item > .image img {
    display: block;
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item:hover > .image {
    transform: rotate(-5deg) scale(1.05);
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper .inner-text {
    min-width: 0;
    padding-top: 0;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper .title {
    margin: 0;
    color: #000;
    font-family: var(--mg-v2-font-product);
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    text-align: left;
}

@media (max-width: 767px) {
    body#main .wrapper1.front_page #main-content
    .TIZERS .content_wrapper_block.front_tizers > .maxwidth-theme.only-on-front {
        width: calc(100% - 32px);
        padding: 18px 0 28px;
    }

    body#main .wrapper1.front_page #main-content
    .TIZERS .item-views.tizers.top > .items {
        padding: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    }

    body#main .wrapper1.front_page #main-content
    .TIZERS .items > .row.flexbox {
        flex-direction: column;
    }

    body#main .wrapper1.front_page #main-content
    .TIZERS .item-wrapper {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        border-right: 0;
        border-bottom: 1px solid var(--mg-v2-grey-94);
    }

    body#main .wrapper1.front_page #main-content
    .TIZERS .item-wrapper:last-child {
        border-bottom: 0;
    }

    body#main .wrapper1.front_page #main-content
    .TIZERS .item-wrapper > .item {
        min-height: 57px;
        justify-content: flex-start;
        padding: 8px 12px;
    }
}

/* MAGELLAN_REDESIGN_V2_PHASE2A_TIZERS_END */

/* MAGELLAN_REDESIGN_V2_PHASE2A_TIZERS_SVG_START
 *
 * Approved v0.10 benefit SVGs.
 * Existing Bitrix tizer data and DOM remain untouched.
 */

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item > .image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper:nth-child(1) > .item > .image {
    background-image:
        url("/assets/magellan-redesign-v2/icons/warranty.svg");
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper:nth-child(2) > .item > .image {
    background-image:
        url("/assets/magellan-redesign-v2/icons/fitting.svg");
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper:nth-child(3) > .item > .image {
    background-image:
        url("/assets/magellan-redesign-v2/icons/delivery.svg");
}

body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper:nth-child(4) > .item > .image {
    background-image:
        url("/assets/magellan-redesign-v2/icons/return.svg");
}

/*
 * Keep original CMS images in DOM so component data/runtime is untouched,
 * but do not render them visually.
 */
body#main .wrapper1.front_page #main-content
.TIZERS .item-wrapper > .item > .image > img {
    visibility: hidden;
}

/* MAGELLAN_REDESIGN_V2_PHASE2A_TIZERS_SVG_END */

/* MAGELLAN_REDESIGN_V2_TIZERS_TITLE_SHELL_START
 *
 * Align the benefits heading with the same content shell
 * as the benefits card.
 */

body#main .wrapper1.front_page #main-content
.TIZERS > .top_block {
    width: min(var(--mg-v2-shell-max), calc(100% - 40px));
    max-width: var(--mg-v2-shell-max);
    margin-right: auto;
    margin-left: auto;
    padding-top: 40px;
}

@media (max-width: 767px) {
    body#main .wrapper1.front_page #main-content
    .TIZERS > .top_block {
        width: calc(100% - 32px);
    }
}

/* MAGELLAN_REDESIGN_V2_TIZERS_TITLE_SHELL_END */

/* MAGELLAN_REDESIGN_V2_BREADCRUMBS_START
 *
 * Visual-only breadcrumb update.
 * Existing Bitrix links, BreadcrumbList/ListItem schema,
 * dropdown DOM and behavior remain unchanged.
 */

body#main .breadcrumbs > .breadcrumbs__separator {
    display: inline-block;
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin: 0 6px;
    overflow: hidden;
    vertical-align: middle;

    color: transparent;
    font-size: 0;
    line-height: 0;

    background:
        url("/assets/magellan-redesign-v2/icons/chevron-right.svg")
        no-repeat center / 8px 8px;
}

body#main .breadcrumbs .breadcrumbs__link {
    display: inline-flex;
    align-items: center;
}

body#main .breadcrumbs .breadcrumbs__arrow-down {
    display: inline-block;
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-left: 5px;
    vertical-align: middle;

    background:
        url("/assets/magellan-redesign-v2/icons/chevron-down-breadcrumb.svg")
        no-repeat center / 8px 8px;
}

body#main .breadcrumbs
.breadcrumbs__arrow-down > .svg {
    display: none;
}

/* MAGELLAN_REDESIGN_V2_BREADCRUMBS_END */

/* MAGELLAN_REDESIGN_V2_BREADCRUMB_HIDE_DROPDOWN_START
 *
 * Keep breadcrumb hierarchy/dropdown DOM intact,
 * but remove the visual down-chevron clutter.
 */
body#main .breadcrumbs .breadcrumbs__arrow-down {
    display: none !important;
}
/* MAGELLAN_REDESIGN_V2_BREADCRUMB_HIDE_DROPDOWN_END */

/* MAGELLAN_REDESIGN_V2_BREADCRUMB_CHEVRON_ALIGN_START
 * Optical vertical alignment of hierarchy separators only.
 */
body#main .breadcrumbs > .breadcrumbs__separator {
    transform: translateY(-1px);
}
/* MAGELLAN_REDESIGN_V2_BREADCRUMB_CHEVRON_ALIGN_END */

/* MAGELLAN_REDESIGN_V2_PHASE2B_CLEAN_V010_START
 *
 * Source of visual truth: magellan-redesign-prototype-v10.
 *
 * Desktop:
 *   title left;
 *   plain text tabs with active red underline;
 *   "Весь каталог" right.
 *
 * Mobile:
 *   title first row;
 *   tabs + "Весь каталог" stay together in one row.
 *
 * Aspro AJAX/tab DOM and JS remain untouched.
 */

body#main .wrapper1.front_page #main-content
.CATALOG_TAB .tab_slider_wrapp > .top_block {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;

    gap: 24px !important;

    min-height: 0 !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    overflow: visible !important;
}

/* v0.10 heading */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .tab_slider_wrapp > .top_block .top_block_title {
    flex: 0 0 auto;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--mg-v2-grey-20, #333) !important;
    font-family: var(--mg-v2-font-ui, Montserrat, sans-serif);
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 27px !important;
}

/*
 * Neutralize Aspro:
 * margin-bottom:-7px;
 * padding-top:7px;
 */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .right_block_wrapper {
    display: flex !important;
    align-items: center !important;

    gap: 34px !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

/*
 * Aspro adds margin-right:65px to .with_link.
 * v0.10 already controls spacing through gap:34px.
 */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .tabs_wrapper,
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .tabs_wrapper.with_link {
    display: block !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* two tabs: no scroll arrows in the prototype */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .tabs_wrapper > .arrows_wrapper {
    display: none !important;
}

/*
 * Critical clipping fix:
 * Aspro moves the tabs row up with top:-3px.
 * Reset it instead of increasing container heights.
 */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax {
    display: flex !important;
    align-items: center !important;

    position: relative !important;
    top: 0 !important;

    gap: 32px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    white-space: nowrap !important;
}

/* v0.10: text tabs, not pills */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li {
    display: block !important;

    position: relative !important;
    float: none !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 0 8px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: var(--mg-v2-grey-40, #666) !important;

    font-family: var(--mg-v2-font-ui, Montserrat, sans-serif);
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    cursor: pointer;
    overflow: visible !important;
}

body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li > span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

/* remove every legacy marker first */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax::before,
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax::after,
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li::before,
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li > span::before,
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li > span::after {
    content: none !important;
    display: none !important;
}

/* exact v0.10 active underline */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li::after {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    height: 2px !important;

    background: var(--mg-v2-red, #e31e24) !important;

    transform: scaleX(0) !important;
    transform-origin: center !important;

    transition: transform 250ms ease !important;
}

body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li.cur {
    color: var(--mg-v2-grey-20, #333) !important;

    border: 0 !important;
    background: transparent !important;
}

body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block ul.tabs.ajax > li.cur::after {
    transform: scaleX(1) !important;
}

/* v0.10 "Весь каталог" */
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .right_block_wrapper > a {
    display: inline-block !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    flex: 0 0 auto !important;
    float: none !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    opacity: 1 !important;

    color: var(--mg-v2-grey-60, #999) !important;

    font-family: var(--mg-v2-font-ui, Montserrat, sans-serif);
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;

    letter-spacing: .8px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
}

body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .right_block_wrapper > a::before,
body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .right_block_wrapper > a::after {
    content: none !important;
    display: none !important;
}

body#main .wrapper1.front_page #main-content
.CATALOG_TAB .top_block .right_block_wrapper > a:hover {
    color: var(--mg-v2-red, #e31e24) !important;
}


/* MOBILE — v0.10 geometry + requested visible catalog link */
@media (max-width: 767px) {

    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .tab_slider_wrapp > .top_block {
        display: block !important;

        margin-bottom: 18px !important;
    }

    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .tab_slider_wrapp > .top_block .top_block_title {
        margin: 0 0 16px !important;

        font-size: 24px !important;
        line-height: 27px !important;
    }

    /*
     * One row:
     * Женщинам  Мужчинам              ВЕСЬ КАТАЛОГ
     */
    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .top_block .right_block_wrapper {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        gap: 12px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .top_block .tabs_wrapper,
    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .top_block .tabs_wrapper.with_link {
        flex: 0 1 auto !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
    }

    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .top_block ul.tabs.ajax {
        gap: 20px !important;
    }

    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .top_block ul.tabs.ajax > li {
        padding-bottom: 8px !important;

        font-size: 13px !important;
        line-height: 18px !important;
    }

    /*
     * Explicitly override Aspro mobile:
     * position:absolute; top:20px; right:0.
     */
    body#main .wrapper1.front_page #main-content
    .CATALOG_TAB .top_block .right_block_wrapper > a {
        position: static !important;

        flex: 0 0 auto !important;

        margin: 0 !important;

        font-size: 12px !important;
        line-height: 18px !important;
        letter-spacing: .5px !important;

        white-space: nowrap !important;
    }
}

/* MAGELLAN_REDESIGN_V2_PHASE2B_CLEAN_V010_END */