@font-face{font-family:"METTO Gallery Roboto";src:url(/nasze-realizacje/assets/roboto-0.ttf);font-weight:400;font-display:swap}
@font-face{font-family:"METTO Gallery Roboto";src:url(/nasze-realizacje/assets/roboto-1.ttf);font-weight:500;font-display:swap}
@font-face{font-family:"METTO Gallery Roboto";src:url(/nasze-realizacje/assets/roboto-2.ttf);font-weight:700;font-display:swap}

/* The gallery's content width and responsive side margins. */
.metto-layout-width,
body.metto-layout-page .wrap {
    width: calc(100% - 48px);
    max-width: 1366px;
    margin-inline: auto;
}
@media (max-width: 780px) {
    .metto-layout-width, body.metto-layout-page .wrap { width: calc(100% - 40px); }
}
@media (max-width: 360px) {
    .metto-layout-width, body.metto-layout-page .wrap { width: calc(100% - 32px); }
}

/* Only the gallery's former navigation is suppressed. Its native top remains in use. */
.metto-layout-gallery #brx-header > .header-bot,
.metto-layout-gallery #brx-header .offcanvas-header-bot,
.metto-layout-gallery #brx-header .header-bot__toggle-menu {
    display: none !important;
}

.metto-layout-header {
    --header-gap: clamp(24px, 22.03px + .5964vw, 30px);
    --header-text: clamp(16px, 15.284px + .1988vw, 18px);
    --header-line: clamp(22.906px, 22.13px + .2124vw, 25.02px);
    color: #080808;
    background: #fff;
    font: var(--header-text)/var(--header-line) "METTO Gallery Roboto", Arial, sans-serif;
}
.metto-layout-topper {
    display: none;
    padding: 13.5068px 12px;
    border-bottom: 1px solid #dddedf;
    text-align: center;
}
.metto-layout-topper,
.metto-layout-brand p {
    color: #059856;
    font-weight: 500;
    text-transform: uppercase;
}
.metto-layout-top {
    width: calc(100% - 2 * var(--header-gap));
    max-width: 1366px;
    margin-inline: auto;
    padding-block: var(--header-gap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-gap);
}
.metto-layout-brand, .metto-layout-contacts {
    display: flex;
    align-items: center;
    gap: var(--header-gap);
}
.metto-layout-brand a {
    display: block;
    flex: 0 0 clamp(152px, 107.6208px + 5.8027vw, 248px);
}
.metto-layout-brand img { display: block; width: 100%; height: auto; }
.metto-layout-brand p {
    margin: 0;
    font-size: clamp(24px, 19.79px + .503vw, 26.66px);
    line-height: clamp(31.1px, 26.95px + .526vw, 34.17px);
}
.metto-layout-contacts a {
    display: flex;
    align-items: center;
    gap: 13.5068px;
    padding-block: 8px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: clamp(13px, 12.82px + .0497vw, 13.5034px);
    font-weight: 600;
}
.metto-layout-contacts a:hover { color: #333; }
.metto-layout-contacts svg { display: block; width: 1em; height: 1em; fill: currentColor; }
@media (max-width: 991px) {
    .metto-layout-brand p { font-size: inherit; line-height: inherit; }
}
@media (max-width: 767px) {
    .metto-layout-top { padding-block: clamp(18.0045px, 17.60px + .1192vw, 18.52px); }
    .metto-layout-contacts { display: none; }
}
@media (max-width: 478px) {
    .metto-layout-topper { display: block; }
    .metto-layout-brand p { display: none; }
}

.metto-catalog-controls {
    display: flex;
    justify-content: flex-end;
    padding-block: 12px;
}
.metto-catalog-controls nav { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 500; }
@media (max-width: 1050px) { .metto-catalog-controls nav { gap: 24px; } }
@media (max-width: 780px) { .metto-catalog-controls nav > a { display: none; } }

.metto-layout-footer-band { background: #f2f2f2; }
footer.metto-layout-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 100px;
    border: 0;
    margin-block: 0;
    padding: 28px 0 40px;
    color: #20231f;
    font: 16px/1.4 "METTO Gallery Roboto", Arial, sans-serif;
}
.metto-layout-footer .footer-company { flex: 0 0 180px; }
.metto-layout-footer img { display: block; width: 180px; height: auto; }
.metto-layout-footer address { font-size: 16px; line-height: 1.65; font-style: normal; margin-top: 16px; }
.metto-layout-footer strong { font-weight: 700; }
.metto-layout-footer address strong { font-size: 16px; }
.metto-layout-footer > div > strong { font-size: 20px; }
.metto-layout-footer p { font-size: 16px; line-height: 1.55; color: #606060; margin: 8px 0; max-width: 750px; }
@media (max-width: 600px) {
    footer.metto-layout-footer { display: block; padding-top: 24px; padding-bottom: 32px; }
    .metto-layout-footer > div + div { margin-top: 26px; }
    .metto-layout-footer img { width: 160px; }
    .metto-layout-footer p, .metto-layout-footer address { font-size: 14px; }
}

/* Keep the shared menu independent of the WordPress and standalone page styles. */
.offer-menu-bar, .offer-menu-bar * { box-sizing: border-box; }
.offer-menu-bar li { margin: 0; }
.offer-menu-bar summary { padding: 0; }
.offer-menu-bar .offer-menu-toggle { color: inherit; font-family: inherit; line-height: inherit; }

/* Preserve the offer's line heights when the Bricks theme is present. */
.metto-layout-gallery .offer-menu :is(ul, li, details, .offer-menu-groups) { line-height: 28.8px; }
.metto-layout-gallery .offer-menu #offer-menu-items > li > a,
.metto-layout-gallery .offer-menu summary { line-height: 22.4px; }
.metto-layout-gallery .offer-menu .offer-menu-groups strong { line-height: 25.6px; }
.metto-layout-gallery .offer-menu .offer-menu-groups a { line-height: 24px; }


.offer-menu-bar{position:relative;z-index:2;background:#fff;border-block:1px solid #d7d7d7;color:#080808}
.offer-menu-bar .offer-menu{position:relative;display:block;font:18px/1.6 "METTO Gallery Roboto",Arial,sans-serif;--green:#087344}
.offer-menu-bar ul{margin:0;padding:0;list-style:none}
#offer-menu-items{display:flex;align-items:center;gap:clamp(14px,1.5vw,22px);min-height:63px}
#offer-menu-items>li>a,.offer-submenu summary{color:inherit;text-decoration:none;text-transform:uppercase;font-size:14px;font-weight:700;white-space:nowrap}
#offer-menu-items>li>a:hover,.offer-menu-groups a:hover{text-decoration:underline}
#offer-menu-items>li:last-child{margin-inline-start:auto}
#offer-menu-items>li:last-child>a{display:block;min-width:140px;padding:7px 18px;text-align:center;text-transform:none;font-weight:400;background:#eb7500;color:#fff;border-radius:24px!important}
.offer-submenu summary{display:flex;list-style:none;cursor:pointer;justify-content:flex-start;align-items:center;gap:12px}
.offer-submenu summary::after{content:"";width:7px;height:7px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg);margin-top:-4px}
.offer-submenu[open] summary::after{transform:rotate(225deg);margin-top:4px}
.offer-menu-groups{position:absolute;inset:100% 0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:22px;background:#fff;border:1px solid #d7d7d7;box-shadow:0 10px 24px #0002;max-height:65vh;overflow:auto}
.offer-menu-groups strong{display:block;color:var(--green);font-size:16px}
.offer-menu-groups a{display:inline-block;color:inherit;font-size:15px;text-decoration:none}
.offer-menu-toggle{display:none}
@media (width > 1090px) {
    #offer-menu-items > li > a { display: block; }
}
@media(max-width:1090px){
 .offer-menu-toggle{display:flex;align-items:center;gap:12px;border:0;background:none;padding:12px 0;text-transform:uppercase;font-size:14px;font-weight:700;cursor:pointer}
 .offer-menu-toggle span{display:block;width:20px;height:14px;border-block:2px solid;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
 #offer-menu-items{display:none;align-items:stretch;gap:12px;padding:4px 0 16px}
 .offer-menu-toggle[aria-expanded=true]+#offer-menu-items{display:grid}
 #offer-menu-items>li:last-child{margin-inline-start:0;justify-self:start}
 .offer-menu-groups{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:14px;box-shadow:none;max-height:none}
}
@media(max-width:360px){.offer-menu-groups{grid-template-columns:1fr}}

.offer-submenu{border:0;padding:0;margin:0}
.offer-submenu summary::-webkit-details-marker{display:none}

@media (width > 1090px) {
 .offer-menu-groups.offer-menu-independent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .offer-menu-column { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
 .offer-menu-column strong { text-transform: uppercase; }
}