/* Elektro-mag - Responsive (tablet + mobile) */

/* Tablet */

@media (max-width: 1100px) {
    .innerContainer {
        width: min(100% - 40px, 980px);
    }

    #header .innerContainer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        min-height: 60px !important;
    }

    body #mobileHeader,
    body #hamburgermenu .logoBlock {
        background: var(--em-navy-900) !important;
        box-shadow: none;
    }

    body #mobileHeader {
        display: flex !important;
        width: 100% !important;
        min-height: 60px !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    body #infoBlock {
        display: none !important;
    }

    #logo {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 8px !important;
        min-width: 0 !important;
    }

    #logo img {
        max-width: 165px !important;
        max-height: 38px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
    }

    #mobileHeader .toggleMenu {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #f4f7f9 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .home .widget_text.homeWidget .widgetContent {
        padding: 28px 20px 20px;
    }

    .em-slider {
        height: 470px !important;
    }

    .em-slide-inner {
        padding: 36px 58px !important;
    }

    .em-title {
        font-size: 42px !important;
    }

    .em-slide-image::before {
        width: 300px !important;
        height: 300px !important;
    }

    .categoriesWidget .owl-stage {
        grid-template-columns: 1.15fr 1fr;
    }

    .categoriesWidget .owl-item:not(:first-child) .item > a {
        grid-template-columns: 42% 1fr;
    }

    .categoriesWidget .item .detail {
        padding: 20px;
    }

    .advancedPostsWidget2 .owl-stage {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    }

    #contactPage > .safirBox > .infoBlock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #contactPage > .safirBox > .infoBlock .item,
    #contactPage > .safirBox > .infoBlock .item:first-child {
        grid-column: auto;
    }

    #contactPage > .safirBox > .infoBlock .item:first-child {
        grid-column: 1 / -1;
    }

    body.category #content .categoriesWidget .list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    footer .columns {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    footer .column.contact {
        grid-column: 1 / -1;
    }
}

/* Mobile */

@media (max-width: 768px) {
    .innerContainer {
        width: calc(100% - 32px);
    }

    .homeWidget > .innerContainer,
    .advancedPostsWidget2 > .innerContainer,
    .categoriesWidget > .innerContainer {
        padding-block: 52px;
    }

    .widgetHeading {
        margin-bottom: 24px;
        font-size: 30px;
    }

    .home .widget_text.homeWidget .widgetContent {
        padding: 16px 16px 12px;
    }

    .em-slider {
        height: auto !important;
    }

    .em-slide {
        position: relative;
        display: none;
        height: auto;
    }

    .em-slide.active {
        display: block;
    }

    .em-slide-inner {
        display: grid !important;
        min-height: 640px !important;
        grid-template-rows: 280px auto !important;
        padding: 18px 20px 64px !important;
        text-align: left !important;
    }

    .em-slide-image {
        width: 100% !important;
        min-height: 260px !important;
        margin: 0 !important;
        order: 1 !important;
    }

    .em-slide-image::before {
        width: 230px !important;
        height: 230px !important;
    }

    .em-slide-image img {
        max-width: 82% !important;
        max-height: 250px !important;
    }

    .em-slide-content {
        width: 100%;
        max-width: none !important;
        order: 2 !important;
    }

    .em-label {
        font-size: 11px !important;
    }

    .em-title {
        max-width: 14ch;
        font-size: 34px !important;
    }

    .em-description {
        font-size: 15px !important;
    }

    .em-nav {
        top: 150px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .em-prev {
        left: 10px !important;
    }

    .em-next {
        right: 10px !important;
    }

    /* Two-up vertical cards. The owl carousel is disabled on mobile (JS
       transforms/inline widths are overridden), so every category shows as a
       static card: image on top, title + button below. */
    .categoriesWidget .owl-stage-outer,
    .categoriesWidget .owl-stage {
        transform: none !important;
        width: 100% !important;
    }

    .categoriesWidget .owl-stage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 12px;
    }

    .categoriesWidget .owl-item {
        width: auto !important;
        transform: none !important;
    }

    .categoriesWidget .owl-item:first-child {
        grid-row: auto;
    }

    .categoriesWidget .owl-item:first-child .item > a,
    .categoriesWidget .owl-item:not(:first-child) .item > a {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(140px, 46%) auto;
        min-height: 0;
        height: 100%;
    }

    .categoriesWidget .safirthumb,
    .categoriesWidget .safirthumb.cat {
        position: relative;
        min-height: 0;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 12px 12px 0 0;
        background: var(--em-surface-strong);
    }

    .categoriesWidget .safirthumb .thumbnail,
    .categoriesWidget .safirthumb .center {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .categoriesWidget .safirthumb img,
    .categoriesWidget .safirthumb .thumbnail img,
    .categoriesWidget .safirthumb .center img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .categoriesWidget .item .detail {
        padding: 16px 14px 18px;
        gap: 12px;
    }

    .categoriesWidget .item .title {
        font-size: 16px;
        line-height: 1.3;
    }

    .categoriesWidget .item .safirButton {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 11px;
    }

    .sloganWidget .widgetContent {
        min-height: 280px;
    }

    .sloganWidget .em-contact-prompt-copy {
        font-size: 15px;
    }

    .contactWidget {
        padding: 16px;
    }

    .contactWidget .map {
        height: 340px !important;
        border-radius: var(--em-radius-surface);
    }

    .contactWidget .infoBlock {
        width: 100%;
        position: relative;
        top: auto;
        right: auto;
        margin-top: 14px;
    }

    .contactWidget .safirContactInfo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .contactWidget .infoBlock .item.address {
        grid-column: auto;
    }

    .contactWidget .infoBlock .item .table .data {
        font-size: 12px;
        line-height: 1.35;
    }

    /* Latest News: same two-up vertical card treatment as categories. */
    .advancedPostsWidget2 .owl-stage-outer,
    .advancedPostsWidget2 .owl-stage {
        transform: none !important;
        width: 100% !important;
    }

    .advancedPostsWidget2 .owl-stage {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 12px;
    }

    .advancedPostsWidget2 .owl-item {
        width: auto !important;
        transform: none !important;
    }

    .advancedPostsWidget2 .owl-item:first-child {
        grid-row: auto;
    }

    .advancedPostsWidget2 .item,
    .advancedPostsWidget2 .owl-item:not(:first-child) .item {
        display: block;
        min-height: 0;
        height: 100%;
    }

    .advancedPostsWidget2 .item .postthumb > a {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .advancedPostsWidget2 .item .safirthumb,
    .advancedPostsWidget2 .owl-item:not(:first-child) .item .safirthumb {
        position: relative;
        order: 0;
        height: auto;
        min-height: 0;
        padding: 0;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: 12px 12px 0 0;
        background: var(--em-surface-strong);
    }

    .advancedPostsWidget2 .safirthumb .thumbnail,
    .advancedPostsWidget2 .safirthumb .center {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .advancedPostsWidget2 .safirthumb img,
    .advancedPostsWidget2 .safirthumb .thumbnail img,
    .advancedPostsWidget2 .safirthumb .center img,
    .advancedPostsWidget2 .item .postthumb img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent;
    }

    .advancedPostsWidget2 .item .detail {
        padding: 14px;
    }

    .advancedPostsWidget2 .item .title,
    .advancedPostsWidget2 .owl-item:not(:first-child) .item .title {
        font-size: 14px;
        line-height: 1.35;
    }

    .advancedPostsWidget2 .item .desc {
        display: none;
    }

    /* Carousel arrows are meaningless once the slider is a static grid. */
    .categoriesWidget .safirOwlButtons .owl-nav,
    .advancedPostsWidget2 .owl-nav,
    .homeWidget .owl-nav {
        display: none !important;
    }

    /* Compact mobile footer: About + Contact stay full width, but the two menu
       columns (Corporate + Product Groups) sit side by side so the footer is
       not one long single stack. */
    footer .columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        padding: 40px 0 8px;
    }

    footer .column {
        grid-column: auto;
        padding: 20px 0;
        border-top: 1px solid rgba(217, 225, 232, .14);
    }

    /* About and Contact span the full width; the menu columns pair up. */
    footer .column.about,
    footer .column.contact {
        grid-column: 1 / -1;
    }

    footer .column:first-child {
        border-top: 0;
    }

    footer .column.menu li {
        width: 100%;
    }

    #content,
    aside {
        padding-block: 28px;
    }

    body.category #content .categoriesWidget .list,
    #content .archive .list,
    #related .advancedPostsWidget1 .list {
        grid-template-columns: 1fr;
    }

    body.category #content > .safirBox,
    #single > .safirBox:first-child,
    #related {
        padding: 16px;
    }

    body.category #content .categoriesWidget .safirthumb.cat {
        aspect-ratio: 16 / 10;
    }

    #single.single #singleBlock .thumb,
    #single.product #singleBlock .thumb {
        max-height: 430px;
        aspect-ratio: 4 / 3;
    }

    #singleBlock .thumb img {
        padding: 14px;
    }

    #single .metaBox {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 24px;
    }

    #single .metaBox .share {
        width: 100%;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid var(--em-line);
    }

    #single.product > .safirBox > table tbody {
        grid-template-columns: 1fr;
    }

    #single.product > .safirBox > table thead {
        display: none;
    }

    body.page-template-page-contact #contactMap {
        height: 310px !important;
    }

    body.page-template-page-contact #content {
        padding-block: 46px 60px;
    }

    #contactPage > .safirBox > .infoBlock {
        grid-template-columns: 1fr;
        margin-bottom: 32px;
    }

    #contactPage > .safirBox > .infoBlock .item,
    #contactPage > .safirBox > .infoBlock .item:first-child {
        grid-column: auto;
        min-height: 0;
    }

    #contactPage .formSection {
        padding: 22px;
    }

    #contactPage .safirForm {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #contactPage .contactBranch {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 32px;
        padding: 22px;
    }

    #contactPage .contactBranch .mainHeading {
        grid-column: auto;
    }

    .safirTop {
        right: 20px !important;
        bottom: 82px !important;
    }

    .safirTop.show {
        bottom: 82px !important;
    }

    #related .item-container:last-child:nth-child(odd) {
        grid-column: auto;
    }

    #related .item-container:last-child:nth-child(odd) .item {
        display: block;
    }

    #related .item-container:last-child:nth-child(odd) .detail {
        border-top: 1px solid var(--em-line);
        border-left: 0;
    }

    .safirBox {
        border-radius: 12px;
    }

    .picHeader .title {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    .sloganWidget .safirButton,
    .sloganWidget .em-whatsapp-cta {
        min-width: 130px;
        padding: 0 16px;
        font-size: 14px;
        height: 46px;
        min-height: 46px;
    }

    .sloganWidget .em-whatsapp-cta {
        margin-left: 8px;
    }

    .em-slide-inner {
        min-height: 600px !important;
        grid-template-rows: 250px auto !important;
    }

    .em-slide-image {
        min-height: 230px !important;
    }

    .em-slide-image::before {
        width: 205px !important;
        height: 205px !important;
    }

    .em-slide-image img {
        max-height: 220px !important;
    }

    .em-title {
        font-size: 30px !important;
    }

    /* Keep the two-up grid even on the smallest screens, just tighten it. */
    .categoriesWidget .owl-stage,
    .advancedPostsWidget2 .owl-stage {
        gap: 10px;
    }

    .categoriesWidget .item .detail {
        padding: 12px 12px 14px;
    }

    .categoriesWidget .item .title {
        font-size: 15px;
    }

    .advancedPostsWidget2 .item .detail {
        padding: 12px;
    }

    #single.single #singleBlock .thumb,
    #single.product #singleBlock .thumb {
        max-height: 360px;
        aspect-ratio: 1 / 1;
    }

    #singleBlock .thumb .text {
        top: 12px;
        right: 12px;
    }

    #singleBlock .thumb .text > a {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 12px;
    }

    #single.product > .safirBox > table tbody tr {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .em-slide:first-child {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .em-slide:not(:first-child),
    .em-nav,
    .em-dots,
    .em-progress {
        display: none !important;
    }
}