/*
 * IEC new/pages/single-product.css
 * Is file mein milega (Single product):
 * - Hero gallery, thumbs, pills, CTAs
 * - Overview, key features
 * - Coverage map
 * - EasyZoom image zoom
 * Shared blocks (anchor nav, markets, specifications, materials) sections.css mein hain.
 * Media: hover
 */
/* ====== Single product — hero ====== */
.iec_single_product_hero_slide_content .iec_ps_pills { margin-bottom: 1.174518rem; }

.iec_single_product_hero_section {
    --hero-height: 17.9345391904rem;
    --hero-padding-top: 0.391506rem;
    --hero-padding-bottom: 0.983012rem;
    height: var(--hero-height);
    padding: var(--hero-padding-top) 0 var(--hero-padding-bottom);
}

.iec_single_product_hero_swiper_wrapper { display: flex; gap: 1.174518rem; height: 100%; }

.iec_single_product_hero_swiper_main_wrapper {
    width: 100%;
    max-width: calc(100% - 7.047106rem);
    display: flex;
    gap: 1.174518rem;
    justify-content: space-between;
    align-items: center;
}

.iec_single_product_swiper_thumb_wrapper {
    width: 100%;
    max-width: 5.872588rem;
    height: calc(var(--hero-height) - var(--hero-padding-top) - var(--hero-padding-bottom));
    padding: 1.566024rem 0 1.957529rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

.iec_single_product_swiper_main_hero {
    --swiper-navigation-color: var(--color-white);
    --swiper-pagination-color: var(--color-white);
    max-width: 23.490353rem;
    max-height: 15.660236rem;
    width: 100%;
    height: 100%;
    margin-right: 0;
}

.iec_single_product_swiper_thumb_wrapper .swiper-slide img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; }

.iec_single_product_swiper_thumb_hero { height: auto; flex: 1; min-height: 0; }

.iec_single_product_swiper_thumb_wrapper .swiper-slide { height: 33.3333%; cursor: pointer; display: flex; justify-content: center; }

.at_hero_slide_image { max-width: 23.490353rem; max-height: 15.660236rem; width: 100%; height: 100%; object-fit: cover; }

.iec_single_product_swiper_thumb_wrapper .hero-swiper-button-prev,
.iec_single_product_swiper_thumb_wrapper .hero-swiper-button-next {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    color: var(--color-secondary);
}

.iec_single_product_product_name {
    color: #1b204c;
    font-family: "Segoe UI";
    font-weight: 700;
    font-size: 1.761776rem;
    line-height: 125%;
    letter-spacing: 0.037585rem;
    margin-bottom: 1.174518rem;
    text-transform: uppercase;
}

.iec_single_product_slide_buttons { display: flex; list-style: none; align-items: start; gap: 0.313205rem; }

.at_btn {
    display: inline-flex;
    align-items: center;
    gap: 0.313205rem;
    min-width: 7.047106rem;
    min-height: 1.644325rem;
    padding-inline: 0.783012rem;
    border-radius: 0.195753rem;
    font-family: "Segoe UI";
    font-weight: 700;
    font-size: 0.66556rem;
    line-height: normal;
    text-transform: uppercase;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.at_btn svg { width: 0.939614rem; height: auto; }

.at_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.at_btn:active { transform: translateY(0); box-shadow: none; }

/* ====== Single product — overview ====== */
.iec_single_products_overview { padding: 1.566024rem 0 1.761776rem; background-color: var(--color-bg); }

/* ====== Single product — key features ====== */
.iec_single_products_key_features_section { padding: 1.487722rem 0 1.879228rem; }

.iec_single_products_key_features_section .iec-section-heading { margin-bottom: 1.057066rem; }

.iec_single_product_features_wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5174518rem; }

.iec_single_product_feature_item { display: flex; align-items: center; gap: 0.8301177649rem; }

.iec_single_product_feature_icon_wrapper {
    min-width: 4.698071rem;
    height: 4.698071rem;
    text-align: center;
    color: var(--color-secondary);
}

.iec_single_product_feature_icon_wrapper img,
.iec_single_product_feature_icon_wrapper svg { width: 100%; height: auto; max-width: 4.698071rem; }

.iec_single_product_feature_label {
    font-family: var(--font-primary);
    font-weight: var(--regular);
    font-size: 0.783012rem;
    line-height: 120%;
    text-wrap: pretty;
}

/* ====== Single product — coverage map ====== */
.iec_coverage_section { padding: 2.349035rem 0 1.566024rem; }

.iec_coverage_embed { width: 100%; }

.iec_coverage_embed iframe { width: 100%; border: 0; display: block; }

img.iec_coverage_map {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 48.585881rem;
    max-height: 29.24549rem;
    aspect-ratio: 1241/747;
}

/* ====== Single product — hero image zoom (easyZoom) ====== */
.easyzoom { display: flex; position: relative; width: 93%; height: 100%; }

.easyzoom > a { margin: auto; display: block; width: 100%; }

.easyzoom > a > img { margin: auto; max-width: 100%; -o-object-fit: contain; object-fit: contain; }

.easyzoom img { vertical-align: bottom; }

.easyzoom.is-loading img { cursor: progress; }

.easyzoom.is-ready img { cursor: crosshair; }

.easyzoom.is-error img { cursor: not-allowed; }

.easyzoom-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 150;
    width: 10em;
    margin: -1em 0 0 -5em;
    line-height: 2em;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 10px #888;
}

.easyzoom-flyout { position: absolute; z-index: 100; overflow: hidden; background: #fff; }

.easyzoom--overlay .easyzoom-flyout { top: 0; left: 0; width: 100%; height: 100%; }

.easyzoom--adjacent .easyzoom-flyout { top: 0; left: 100%; width: 100%; height: 100%; margin-left: 20px; }

/* ====== Single product — hero CTA hover ====== */
@media (hover: hover) {
    .at_btn:hover::before { left: 100%; }

    .at_btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 30%, transparent);
        filter: brightness(1.1);
    }
}