/* MASTER-PACK prototype 0.7.2 stakeholder-review overrides.
 * Staging only.
 * - all variants: use the legacy MASTER-PACK corporate logo instead of placeholder marks;
 * - variant 1: product arrows live beside the product image, not over heading text;
 * - variant 2: keep hero copy inside its visual text field;
 * - variants 2/3: replace numeric product/hero navigation with dots;
 * - variant 3: visual state supports deterministic sequential slider navigation.
 */

/* --------------------------------------------------------------------------
   SHARED BRAND MARK — exact horizontal logo currently used by legacy site
   -------------------------------------------------------------------------- */

.mp-logo {
    width: clamp(148px, 11.5vw, 168px);
    height: 46px;
    flex: 0 0 auto;
    overflow: hidden;
    background-color: #fff;
    background-image: url("https://master-pack.com.ua/wp-content/uploads/2018/10/Logo_master-pack_ua_Blue_horizontal-3.jpg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.mp-logo-mark,
.mp-logo-text {
    display: none !important;
}

.mp-prototype-2 .mp-logo,
.mp-prototype-3 .mp-logo {
    width: clamp(148px, 11.5vw, 168px);
}

/* --------------------------------------------------------------------------
   VARIANT 1 — controls beside the product image
   The JS companion moves the existing controls into .mp-slider-shell.
   -------------------------------------------------------------------------- */

.mp-prototype-1 .mp-slider-shell {
    position: relative;
}

.mp-prototype-1 .mp-slider-shell > .mp-slider-controls {
    position: absolute;
    z-index: 12;
    top: 50%;
    right: calc(50% + 18px);
    left: 18px;
    width: auto;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

.mp-prototype-1 .mp-slider-shell > .mp-slider-controls button {
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   VARIANT 2 — integrate logo and keep hero copy inside the photographic field
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
    .mp-prototype-2 .mp-header {
        color: #10242a;
        background: rgba(255, 255, 255, .975);
        border-bottom: 1px solid rgba(16, 36, 42, .12);
        box-shadow: 0 9px 28px rgba(20, 45, 42, .09);
        backdrop-filter: blur(14px);
    }

    .mp-prototype-2 .mp-main-nav a {
        color: #526a6f;
    }

    .mp-prototype-2 .mp-main-nav a:hover,
    .mp-prototype-2 .mp-main-nav a:focus-visible {
        color: #10242a;
    }

    .mp-prototype-2 .mp-variant-switch {
        border-color: rgba(16, 36, 42, .16);
    }

    .mp-prototype-2 .mp-variant-switch a {
        color: #62777b;
    }

    .mp-prototype-2 .mp-variant-switch a[aria-current="page"] {
        color: #fff;
    }

    .mp-prototype-2 .mp-company .mp-hero-copy {
        width: min(48vw, 670px);
        max-width: 670px;
        margin-left: clamp(52px, 4.6vw, 88px);
        min-width: 0;
    }

    .mp-prototype-2 .mp-company .mp-hero-slides,
    .mp-prototype-2 .mp-company .mp-hero-slide {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .mp-prototype-2 .mp-company .mp-hero-title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(44px, 4.25vw, 70px);
        line-height: .98;
        text-wrap: balance;
        overflow-wrap: normal;
        word-break: normal;
    }

    .mp-prototype-2 .mp-company .mp-lead {
        width: min(100%, 600px);
        max-width: 600px;
    }

    .mp-prototype-2 .mp-hero-proof {
        width: min(100%, 650px);
        max-width: 650px;
    }
}

/* --------------------------------------------------------------------------
   VARIANTS 2 + 3 — dot navigation instead of visible numbering
   -------------------------------------------------------------------------- */

.mp-prototype-2 .mp-slider-counter,
.mp-prototype-3 .mp-slider-counter,
.mp-prototype-2 .mp-slide-index,
.mp-prototype-3 .mp-slide-index,
.mp-prototype-2 .mp-hero-count,
.mp-prototype-3 .mp-hero-count {
    display: none !important;
}

.mp-prototype-2 .mp-slider-pagination,
.mp-prototype-3 .mp-slider-pagination,
.mp-prototype-2 .mp-hero-dots,
.mp-prototype-3 .mp-hero-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-prototype-2 .mp-slider-pagination button,
.mp-prototype-3 .mp-slider-pagination button,
.mp-prototype-2 .mp-hero-dot,
.mp-prototype-3 .mp-hero-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    background: color-mix(in srgb, var(--mp-muted) 48%, transparent);
    border: 0;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
    transition: width .2s ease, background .2s ease, opacity .2s ease;
}

.mp-prototype-2 .mp-slider-pagination button.is-active,
.mp-prototype-2 .mp-slider-pagination button[aria-current="true"],
.mp-prototype-3 .mp-slider-pagination button.is-active,
.mp-prototype-3 .mp-slider-pagination button[aria-current="true"],
.mp-prototype-2 .mp-hero-dot.is-active,
.mp-prototype-2 .mp-hero-dot[aria-current="true"],
.mp-prototype-3 .mp-hero-dot.is-active,
.mp-prototype-3 .mp-hero-dot[aria-current="true"] {
    width: 26px;
    min-width: 26px;
    background: var(--mp-accent);
}

.mp-prototype-2 .mp-hero-dot span,
.mp-prototype-3 .mp-hero-dot span {
    display: none;
}

.mp-prototype-3 .mp-slider-pagination button,
.mp-prototype-3 .mp-hero-dot {
    background: rgba(47, 37, 31, .24);
}

.mp-prototype-3 .mp-slider-pagination button.is-active,
.mp-prototype-3 .mp-slider-pagination button[aria-current="true"],
.mp-prototype-3 .mp-hero-dot.is-active,
.mp-prototype-3 .mp-hero-dot[aria-current="true"] {
    background: var(--mp-accent);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .mp-logo,
    .mp-prototype-2 .mp-logo,
    .mp-prototype-3 .mp-logo {
        width: 144px;
        height: 42px;
    }

    .mp-prototype-1 .mp-slider-shell > .mp-slider-controls {
        top: 24%;
        right: 12px;
        left: 12px;
    }

    .mp-prototype-2 .mp-company .mp-hero-copy,
    .mp-prototype-2 .mp-company .mp-hero-slides,
    .mp-prototype-2 .mp-company .mp-hero-slide,
    .mp-prototype-2 .mp-company .mp-hero-title,
    .mp-prototype-2 .mp-company .mp-lead {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .mp-logo,
    .mp-prototype-2 .mp-logo,
    .mp-prototype-3 .mp-logo {
        width: 128px;
        height: 38px;
    }

    .mp-prototype-1 .mp-slider-shell > .mp-slider-controls {
        top: 22%;
    }
}