/* Elektro-mag - Inner pages + navigation */

/* Inner pages */

.picHeader {
    background-color: var(--em-navy-900);
}

.picHeader .title {
    color: #f4f7f9;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -.03em;
}

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

.safirBox {
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-surface);
    box-shadow: none;
}

.reading {
    color: var(--em-ink);
    font-size: 16px;
    line-height: 1.75;
}

.reading h1,
.reading h2,
.reading h3,
.reading h4 {
    color: var(--em-navy-950);
    line-height: 1.18;
    letter-spacing: -.02em;
}

#content p,
#content ul li {
    font-size: 16px;
}

.listing .item,
.archive .item {
    border-color: var(--em-line);
    border-radius: var(--em-radius-surface);
    box-shadow: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    min-height: 46px;
    padding: 11px 13px;
    color: var(--em-ink);
    background: var(--em-paper);
    border: 1px solid #aebbc6;
    border-radius: var(--em-radius-control);
}

input::placeholder,
textarea::placeholder {
    color: #687786;
    opacity: 1;
}

/* Inner-page navigation */

aside .safirWidget,
aside .buttonWidget {
    overflow: hidden;
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-surface);
    box-shadow: none;
}

body aside .widgetHeading {
    max-width: none;
    margin: 0;
    padding: 20px 22px 15px;
    color: var(--em-navy-950);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--em-line);
}

body aside .widgetHeading .inner {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    margin: 0;
    color: inherit;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
}

body aside .widgetHeading .safiricon {
    display: none;
}

aside .safirCustomMenu a {
    min-height: 46px;
    padding: 13px 46px 13px 22px;
    color: var(--em-ink);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.35;
    border-color: var(--em-line);
}

aside .safirCustomMenu a:hover,
aside .safirCustomMenu .current-menu-item > a,
aside .safirCustomMenu .current-menu-ancestor > a {
    color: var(--em-red-700);
    background: #f8eeee;
}

aside .safirCustomMenu a .title::before {
    display: none;
}

aside .safirCustomMenu .toggle.icon {
    top: 10px;
    right: 14px;
    width: 26px;
    height: 26px;
    color: var(--em-muted);
    background: var(--em-surface-strong);
    border-radius: 6px;
}

aside .safirCustomMenu .toggle.icon::before {
    width: 26px;
    height: 26px;
    margin: 0;
    font-size: 11px;
    line-height: 26px;
}

aside .safirCustomMenu .sub-menu a {
    padding-left: 36px;
    color: var(--em-muted);
    font-size: 12px;
}

aside .sidebarWidget {
    margin-top: 16px;
}

aside .sidebarWidget:first-child {
    margin-top: 0;
}

aside .buttonWidget a {
    display: flex;
    min-height: 82px;
    align-items: center;
    color: var(--em-ink);
}

aside .buttonWidget .iconContainer {
    flex: 0 0 68px;
    padding: 18px;
    color: var(--em-red-700);
    background: var(--em-surface);
}

aside .buttonWidget .header {
    color: var(--em-navy-950);
    font-size: 14px;
    font-weight: 700;
}

aside .buttonWidget .desc {
    color: var(--em-muted);
    font-size: 12px;
    line-height: 1.45;
}

/* Category and archive cards */

body.category #content > .safirBox {
    padding: 28px;
}

body.category #content .categoriesWidget .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.category #content .categoriesWidget .item-container,
#content .archive .list .item-container {
    float: none;
    width: auto !important;
    padding: 0;
}

body.category #content .categoriesWidget .item {
    height: 100%;
    overflow: hidden;
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-surface);
}

body.category #content .categoriesWidget .item > a {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: var(--em-ink);
}

body.category #content .categoriesWidget .safirthumb.cat {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    background: var(--em-surface);
}

body.category #content .categoriesWidget .safirthumb.cat img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.category #content .categoriesWidget .detail {
    display: flex;
    min-height: 88px;
    align-items: center;
    padding: 20px 22px;
    border: 0;
    border-top: 1px solid var(--em-line);
}

body.category #content .categoriesWidget .title {
    color: var(--em-navy-950);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.015em;
}

#content .archive .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#content .archive .item {
    height: 100%;
    overflow: hidden;
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-surface);
}

#content .archive .postthumb .safirthumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    background: var(--em-surface);
}

#content .archive .postthumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#content .archive .detail {
    padding: 18px 20px;
    border: 0;
    border-top: 1px solid var(--em-line);
}

#content .archive .title,
#content .archive .title a {
    color: var(--em-navy-950);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
}

/* Single post and product detail */

#single > .safirBox:first-child {
    padding: 24px;
}

#single.product > .safirBox:first-child {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#singleBlock.type1 {
    margin: 0 0 28px;
}

#single.product #singleBlock.type1 {
    overflow: hidden;
    margin-bottom: 36px;
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-surface);
}

#singleBlock .thumb {
    position: relative;
    display: grid;
    overflow: hidden;
    place-items: center;
    background: var(--em-surface);
    border: 1px solid var(--em-line);
    border-radius: 12px 12px 0 0;
}

#single.single #singleBlock .thumb {
    max-height: 540px;
    aspect-ratio: 16 / 9;
}

#single.product #singleBlock .thumb {
    max-height: 440px;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 0;
}

#singleBlock .thumb .safirthumb,
#singleBlock .thumb .thumbnail {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--em-paper);
}

#singleBlock .thumb img {
    width: 100% !important;
    height: 100% !important;
    padding: 22px;
    object-fit: contain !important;
}

#single.single #singleBlock .thumb img {
    padding: 0;
    object-fit: cover !important;
}

#singleBlock .thumb .text {
    top: 20px;
    right: 20px;
    padding: 0;
    overflow: hidden;
    background: transparent !important;
    border-radius: var(--em-radius-control);
    line-height: 1;
}

#singleBlock .thumb .text > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 11px 18px;
    color: #fdfdfc;
    background: var(--em-red-700);
    font-size: 13px;
    font-weight: 650;
    line-height: 20px;
}

#singleBlock .thumb .text > a:hover {
    color: #fdfdfc;
    background: var(--em-navy-900);
}

#single .metaBox {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 32px;
    padding: 12px 16px;
    color: var(--em-muted);
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

#single.product #singleBlock .metaBox {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--em-line);
    border-radius: 0;
}

#single .metaBox .metas {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    background: transparent !important;
}

#single .metaBox .meta {
    display: inline-flex;
    float: none;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--em-muted);
    font-size: 13px;
    font-weight: 550;
    line-height: 24px;
}

#single .metaBox .meta a {
    color: var(--em-muted);
}

#single .metaBox .meta a:hover {
    color: var(--em-red-700);
}

#single .metaBox .icon,
#single .metaBox .icon::before {
    width: 20px;
    height: 20px;
    color: #71808e;
    font-size: 15px;
    line-height: 20px;
}

#single .metaBox .share {
    display: flex;
    float: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#single .share .shareLabel {
    color: var(--em-muted);
    font-size: 12px;
    font-weight: 650;
}

#single .share ul {
    display: flex;
    gap: 6px;
    margin: 0;
}

#single .share li {
    margin: 0;
}

#single .share a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    color: var(--em-navy-900);
    background: var(--em-surface);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-control);
}

#single .share a:hover {
    color: #fdfdfc;
    background: var(--em-red-700);
    border-color: var(--em-red-700);
}

#single .share a::before {
    width: 32px;
    height: 32px;
    color: inherit;
    font-size: 15px;
    line-height: 32px;
    opacity: 1;
}

#single .share .email a::before {
    content: "@";
    font-family: var(--em-font-sans);
    font-size: 15px;
    font-weight: 700;
}

#single .share .twitter a::before {
    content: "X";
    font-family: var(--em-font-sans);
    font-size: 13px;
    font-weight: 700;
}

#single > .safirBox > p,
#single > .safirBox > ul,
#single > .safirBox > ol,
#single > .safirBox > h2,
#single > .safirBox > h3,
#single > .safirBox > h4 {
    max-width: 74ch;
    margin-right: auto;
    margin-left: auto;
}

#single > .safirBox > p {
    margin-bottom: 20px;
    color: #344557;
    font-size: 16px;
    line-height: 1.8;
}

#single > .safirBox > h2,
#single > .safirBox > h3,
#single > .safirBox > h4 {
    margin-top: 34px;
    margin-bottom: 14px;
    color: var(--em-navy-950);
    line-height: 1.2;
}

#single.product > .safirBox > table {
    display: grid;
    width: 100%;
    max-width: none;
    margin: 34px 0;
    border: 0;
}

#single.product > .safirBox > table::before {
    margin-bottom: 18px;
    color: var(--em-navy-950);
    content: "Technical specifications";
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

#single.product > .safirBox > table thead,
#single.product > .safirBox > table tbody,
#single.product > .safirBox > table tr {
    display: grid;
}

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

#single.product > .safirBox > table tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#single.product > .safirBox > table tbody tr {
    grid-template-columns: minmax(130px, .85fr) minmax(0, 1.15fr);
    gap: 14px;
    padding: 14px 16px;
    background: var(--em-surface);
    border-radius: var(--em-radius-control);
}

#single.product > .safirBox > table td {
    padding: 0;
    color: #445568;
    border: 0;
    font-size: 14px;
    line-height: 1.5;
}

#single.product > .safirBox > table td:first-child {
    color: var(--em-navy-950);
    font-weight: 650;
}

/* Contact page */

body.page-template-page-contact #contactMap {
    height: 390px !important;
    background: var(--em-surface-strong);
    border-bottom: 1px solid var(--em-line);
    filter: saturate(.72) contrast(.96);
}

body.page-template-page-contact #main,
body.page-template-page-contact #content {
    overflow: visible;
}

body.page-template-page-contact #content {
    width: 100%;
    float: none;
    padding-block: 68px 84px;
}

body.page-template-page-contact #contactPage > .safirBox {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body.page-template-page-contact #contactPage > .safirBox > .widgetHeading {
    max-width: 760px;
    margin-bottom: 14px;
    color: var(--em-navy-950);
    font-size: clamp(38px, 5vw, 58px);
}

#contactPage .em-contact-intro {
    max-width: 66ch;
    margin-bottom: 36px;
}

#contactPage .em-contact-intro p {
    margin: 0;
    color: var(--em-muted);
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
}

#contactPage > .safirBox > .infoBlock {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 48px;
}

#contactPage > .safirBox > .infoBlock .item {
    grid-column: span 2;
    min-height: 148px;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--em-surface);
    border: 0;
    border-radius: 14px;
}

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

#contactPage > .safirBox > .infoBlock .item .safiricon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--em-red-700);
    background: #f6e7e6;
    border-radius: 10px;
}

#contactPage > .safirBox > .infoBlock .item .safiricon svg {
    width: 20px;
    height: 20px;
    margin: 0;
}

#contactPage > .safirBox > .infoBlock .item .data {
    color: var(--em-muted);
    font-size: 13px;
    line-height: 1.55;
}

#contactPage > .safirBox > .infoBlock .item .data:first-line {
    color: var(--em-navy-950);
    font-size: 13px;
    font-weight: 700;
}

#contactPage > .safirBox > .infoBlock .item .data a {
    color: var(--em-ink);
    font-weight: 600;
}

#contactPage > .safirBox > .infoBlock .item .data a:hover {
    color: var(--em-red-700);
}

#contactPage .formSection {
    margin-top: 0;
    padding: 34px;
    background: var(--em-surface);
    border-radius: var(--em-radius-surface);
}

#contactPage .formSection .mainHeading,
#contactPage .contactBranch .mainHeading {
    margin: 0 0 24px;
    padding: 0;
    color: var(--em-navy-950);
    border: 0;
}

#contactPage .formSection .mainHeading .inner,
#contactPage .contactBranch .mainHeading .inner {
    display: block;
}

#contactPage .formSection .mainHeading .inner::after,
#contactPage .contactBranch .mainHeading .inner::after,
#contactPage .formSection .mainHeading .safiricon,
#contactPage .contactBranch .mainHeading .safiricon {
    display: none;
}

#contactPage .formSection .mainHeading .text,
#contactPage .contactBranch .mainHeading .text {
    color: var(--em-navy-950);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

#contactPage .safirForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    overflow: visible;
}

#contactPage .safirForm .safirLeft,
#contactPage .safirForm .safirRight {
    width: auto;
    float: none;
    padding: 0;
}

#contactPage .safirForm p {
    margin: 0 0 15px;
}

#contactPage .safirForm p.safiricon svg {
    display: none;
}

#contactPage .safirForm p > .wpcf7-form-control-wrap {
    display: flex;
    overflow: visible;
    flex-direction: column;
    gap: 7px;
}

#contactPage .safirForm label {
    position: static;
    color: var(--em-navy-950);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

#contactPage .safirForm input[type="text"],
#contactPage .safirForm input[type="email"],
#contactPage .safirForm input[type="tel"],
#contactPage .safirForm textarea {
    width: 100%;
    padding: 12px 14px;
    color: var(--em-ink);
    background: var(--em-paper);
    border: 1px solid #aebbc6;
    border-radius: 8px;
    font-size: 15px;
}

#contactPage .safirForm textarea {
    min-height: 236px;
    resize: vertical;
}

#contactPage .safirForm .safirButton {
    min-height: 48px;
    margin-top: 0;
}

#contactPage .contactBranch {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: 24px;
    margin-top: 48px;
    padding: 30px;
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius-surface);
}

#contactPage .contactBranch .mainHeading {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

#contactPage .contactBranch .infoBlock,
#contactPage .contactBranch .subemap {
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}

#contactPage .contactBranch .infoBlock {
    display: grid;
    align-content: start;
    gap: 12px;
}

#contactPage .contactBranch .infoBlock .item,
#contactPage .contactBranch .infoBlock .item:first-child {
    min-height: 88px;
    margin: 0;
    padding: 16px;
    background: var(--em-surface);
    border-radius: 12px;
}

#contactPage .contactBranch .infoBlock .data,
#contactPage .contactBranch .infoBlock .data a {
    color: var(--em-ink);
}

#contactPage .contactBranch .infoBlock .data a:hover {
    color: var(--em-red-700);
}

#contactPage .contactBranch .subemap {
    min-height: 300px;
    overflow: hidden;
    border-radius: 12px;
}

#contactPage .contactBranch .subemap iframe {
    width: 100%;
    height: 100% !important;
}

/* Related content */

#related {
    margin-top: 22px;
    padding: 28px;
}

#related .mainHeading {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
}

#related .mainHeading .inner {
    display: flex;
    align-items: center;
}

#related .mainHeading .safiricon {
    display: none;
}

#related .mainHeading .text {
    color: var(--em-navy-950);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

#related .advancedPostsWidget1 .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

#related .item-container {
    float: none;
    width: auto !important;
    padding: 0;
}

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

#related .item {
    height: 100%;
    overflow: hidden;
    background: var(--em-paper);
    border: 1px solid var(--em-line);
    border-radius: 12px;
}

#related .item-container:last-child:nth-child(odd) .item {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
}

#related .postthumb .safirthumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0;
    padding: 0;
    background: var(--em-surface);
}

#related .postthumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

#related .detail {
    display: flex;
    min-height: 76px;
    align-items: center;
    padding: 16px 18px;
    border: 0;
    border-top: 1px solid var(--em-line);
}

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

#related .title,
#related .title a {
    color: var(--em-navy-950);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    text-align: left;
}

/* Sidebar actions */

aside .buttonWidget .innerContainer,
aside .buttonWidget .widgetContent {
    width: 100%;
    height: 100%;
}

aside .buttonWidget a {
    padding: 0 16px 0 0;
}

aside .buttonWidget .iconContainer {
    align-self: stretch;
    background: transparent !important;
    border-right: 1px solid var(--em-line);
}

aside .buttonWidget .iconContainer svg {
    width: 28px;
    height: 28px;
}

aside .buttonWidget .table {
    padding-left: 16px;
}

aside .buttonWidget .header {
    font-size: 13px;
    letter-spacing: .02em;
}

aside .buttonWidget .description,
aside .buttonWidget .desc {
    margin-top: 5px;
    color: var(--em-muted);
    font-size: 12px;
    line-height: 1.45;
}