/* ============================================================
   RWD
   ============================================================ */

/* --- ≤1680 --- */
@media (max-width:1680px) {
  .hero h1 {
    font-size: 56px
  }

  .service .wm {
    font-size: 340px
  }
}

/* --- 1381-1680 --- */
@media (min-width:1381px) and (max-width:1680px) {
  /* HEADER */
  header nav ul {
    gap: 38px
  }

  header nav a {
    font-size: 13.5px;
    letter-spacing: .6px
  }

  .h-loc {
    font-size: 0;
    gap: 0;
    padding: 0 16px
  }

  .h-loc i {
    font-size: 17px
  }
}

/* --- ≤1380 --- */
@media (max-width:1380px) {
  .hero h1 {
    font-size: 50px
  }

  .service .wm {
    font-size: 280px;
    top: 14rem
  }

  .f-grid {
    gap: 32px
  }
}

/* --- ≤1200 --- */
@media (max-width:1200px) {
  .pad {
    padding: 84px 0
  }

  .hero h1 {
    font-size: 46px
  }

  .hero .wrap {
    gap: 48px;
    padding: 64px 28px 120px
  }

  .service {
    padding-top: 110px
  }

  .service .wm {
    font-size: 210px;
    top: 16rem;
    right: -3rem
  }

  .service h2,
  .ctaband h2 {
    font-size: 34px
  }

  .kontakt .wrap {
    gap: 32px
  }

  .f-grid {
    grid-template-columns: 1fr 1.4fr 1.2fr 1fr;
    gap: 30px
  }

  .f-col-social {
    grid-column: 1/-1;
    flex-direction: row;
    align-items: center;
    text-align: left
  }

  .socials {
    flex-direction: row
  }
}

/* --- 992-1200 --- */
@media (min-width:992px) and (max-width:1200px) {
  /* HEADER */
  .h-phone,
  .h-mail,
  .h-loc {
    font-size: 0;
    gap: 0;
    padding: 0 12px
  }

  .h-phone i,
  .h-mail i,
  .h-loc i {
    font-size: 17px
  }

  .h-right {
    gap: 18px
  }

  header nav ul {
    gap: 26px
  }

  header nav a {
    font-size: 13px;
    letter-spacing: .4px
  }

  .h-right .btn {
    padding: 10px 20px
  }

  /* PAGE-TITLE */
  .page-title h1 {
    font-size: 48px
  }

  .entry-page {
    padding: 2rem;
  }

  /* PASEK CECH */
  .feat {
    gap: 14px;
    padding: 22px 18px
  }

  .feat i {
    width: 48px;
    height: 48px;
    font-size: 20px
  }

  .feat b {
    font-size: 14px;
    margin-bottom: 4px
  }

  .feat span {
    font-size: 12.5px;
    line-height: 1.4
  }

  /* ABOUT */
  .af {
    flex-direction: column;
    gap: 10px;
    padding: 16px
  }

  .af i {
    width: 38px;
    height: 38px;
    font-size: 18px
  }

  .af b {
    font-size: 12.5px;
    line-height: 1.4
  }

  /* KONTAKT */
  .kontakt .wrap {
    grid-template-columns: 1fr 1fr
  }

  .kontakt-photo {
    display: none
  }
}

/* --- 1201-1380 --- */
@media (min-width:1201px) and (max-width:1380px) {
  /* HEADER */
  header nav ul {
    gap: 32px
  }

  header nav a {
    font-size: 13px;
    letter-spacing: .5px
  }

  .h-mail,
  .h-loc {
    font-size: 0;
    gap: 0;
    padding: 0 14px
  }

  .h-mail i,
  .h-loc i {
    font-size: 17px
  }

  .h-right .btn {
    font-size: 12.5px;
    padding: 10px 26px
  }

  /* PAGE-TITLE */
  .page-title h1 {
    font-size: 54px
  }
  /* ABOUT */
  .af {
    flex-direction: column;
    gap: 11px
  }

  .af b {
    font-size: 13.5px;
    font-weight: 500
  }
}

/* ============================================================
   ≤991
   ============================================================ */
@media (max-width:991px) {

  /* --- Header --- */
  header nav,
  .h-contact,
  .h-phone,
  .h-mail {
    display: none
  }

  .h-right .btn {
    display: none
  }

  .burger {
    display: block
  }

  header .wrap {
    height: 70px
  }

  .brand img {
    height: 50px
  }

  /* --- Pełnoekranowy panel mobilny --- */
  .mobile-nav {
    inset: 0;
    z-index: 80;
    padding: 0;
    gap: 0;
    border-top: 0
  }

  .mn-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line)
  }

  .mn-top .brand {
    padding: 0;
    border: 0;
    display: inline-flex
  }

  .mn-top .brand img {
    height: 48px
  }

  .mn-close {
    font-size: 30px;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 1;
    padding: 6px
  }

  .mn-nav {
    padding: 16px 22px 6px
  }

  .mobile-nav ul {
    width: 100%
  }

  .mobile-nav .m-contact {
    padding: 10px 22px 30px;
    margin-top: 0
  }

  /* --- Sekcje --- */
  .pad {
    padding: 64px 0
  }

  /* HERO */
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 28px 86px
  }

  .hero h1 {
    font-size: 42px
  }

  .hero p {
    max-width: none
  }

  .hero-orn {
    display: none
  }

  .hero-photo {
    width: 100%;
    opacity: .10
  }

  .hero-img {
    max-width: 440px;
    margin: 0 auto
  }

  /* FEATURES */
  .features {
    margin: -56px auto 0
  }

  .features .box {
    grid-template-columns: repeat(2, 1fr);
    min-height: 0
  }

  .feat {
    padding: 24px
  }

  .feat:nth-child(3) {
    border-left: 0
  }

  /* SERVICE */
  .service {
    padding-top: 80px
  }

  .service .wm {
    font-size: 150px;
    top: auto;
    bottom: 1.5rem;
    right: -2rem
  }

  .svc-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 36px
  }

  .svc-head .endline {
    display: none
  }

  .rotator-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 30px
  }

  .rotator-intro h2 {
    font-size: 30px
  }

  .svc-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  /* PRODUCERS */
  .prod .wrap {
    grid-template-columns: 1fr;
    gap: 28px
  }

  /* ABOUT */
  .about .wrap {
    grid-template-columns: 1fr
  }

  .about-img {
    min-height: 300px
  }

  .about-txt {
    padding: 54px 28px 60px
  }

  /* KONTAKT */
  .ci-ic {
    width: 40px;
    height: 40px;
    font-size: 15px
  }

  .ci a,
  .ci span {
    font-size: 15px
  }

  /* CTA BAND */
  .ctaband .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 46px 28px
  }

  /* OPINIE */
  .opinie .wrap {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .rev-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  /* KONTAKT */
  .kontakt .wrap {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .kontakt-photo img {
    min-height: 220px;
    max-height: 300px
  }

  .sec-head h2,
  .service h2,
  .ctaband h2,
  .prod h2,
  .about-txt h2,
  .opinie h2,
  .kontakt h2 {
    font-size: 30px
  }

  /* STOPKA */
  .f-info {
    grid-template-columns: repeat(2, 1fr)
  }

  .f-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px
  }

  .f-col-logo {
    grid-column: 1/-1
  }

  .f-col-logo .f-logo img {
    height: 90px
  }

  .f-col-social {
    grid-column: 1/-1;
    flex-direction: column;
    align-items: flex-start;
    text-align: left
  }

  .socials {
    flex-direction: row
  }

  /* PODSTRONY */
  .page-title h1 {
    font-size: 50px
  }

  .entry-page {
    padding: 2rem;
  }

  .entry-content .wp-block-gallery.has-nested-images {
    columns: 2
  }

  /* PRODUKT / OFERTA */
  .product-hero {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .product-name {
    font-size: 38px
  }

  .offer-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .post-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ============================================================
   ≤768
   ============================================================ */
@media (max-width:768px) {
  .pad {
    padding: 54px 0
  }

  .svc-grid,
  .rev-grid,
  .about-feats,
  .offer-grid,
  .post-grid {
    grid-template-columns: 1fr
  }

  .post-nav {
    grid-template-columns: 1fr
  }

  .post-nav__next {
    text-align: left;
    align-items: flex-start
  }

  .f-info,
  .f-grid {
    grid-template-columns: 1fr
  }

  .f-col-logo,
  .f-col-social {
    grid-column: auto
  }

  .wpcf7-form,
  .wpcf7-form>.cf7-row {
    grid-template-columns: 1fr
  }

  /* FEATURES */
  .features .box {
    grid-template-columns: 1fr
  }

  .feat {
    border-left: 0;
    border-top: 1px solid var(--line)
  }

  .feat:first-child {
    border-top: 0
  }

  .feat:nth-child(3) {
    border-left: 0
  }

  /* STOPKA */
  .f-bar .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }

  .f-bar-right {
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap
  }

  .f-top {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    margin: 0
  }

  .hero h1 {
    font-size: 38px
  }

  /* FORMULARZ */
  .wpcf7-form label {
    font-size: 13px
  }

  .wpcf7-form input:not([type=checkbox]):not([type=submit]),
  .wpcf7-form select,
  .wpcf7-form textarea {
    font-size: 14px;
    padding: 11px 13px
  }

  .wpcf7-form textarea {
    min-height: 150px
  }

  .wpcf7-form .wpcf7-submit {
    padding: 13px 34px;
    font-size: 13px
  }

  /* PODSTRONY */
  .page-title h1 {
    font-size: 42px
  }

  .page-title .wrap {
    display: block;
    gap: 0;
    padding: 48px 28px 42px
  }

  .page-title .wrap:before {
    display: none
  }

  .crumbs {
    margin-top: 14px
  }

  .page-wrapper {
    padding: 40px 0 56px
  }

  .entry-page {
    padding: 30px 22px;
    border-radius: 12px
  }

  .entry-content h2 {
    font-size: 26px
  }

  .entry-content h3 {
    font-size: 21px
  }

  .entry-content p,
  .entry-content ul li,
  .entry-content ol li {
    font-size: 14px
  }

  .entry-content .wp-block-gallery.has-nested-images {
    columns: 1
  }

  .kontakt-photo img {
    min-height: 200px;
    max-height: 260px
  }

  /* PRODUKT */
  .product-name {
    font-size: 32px
  }

  .related-title {
    font-size: 26px
  }

  .tab-btn {
    font-size: 20px
  }

  .spec-table th {
    width: 50%
  }

  .offer-card__name {
    font-size: 23px
  }

  .product-media {
    padding: 16px
  }

  .spec-table {
    font-size: 13px
  }

  .spec-table th,
  .spec-table td {
    padding: 10px 12px
  }

  .tabs-nav .btn {
    padding: 8px 15px;
    font-size: 11.5px
  }

  .wp-image-27 {
    display: none
  }
}

/* ============================================================
   ≤576
   ============================================================ */
@media (max-width:576px) {
  .wrap {
    padding: 0 18px
  }

  .pad {
    padding: 46px 0
  }

  .ds-modal {
    padding: 16px
  }

  .ds-modal__dialog {
    padding: 32px 22px
  }

  .ds-modal__title {
    font-size: 28px
  }

  .mobile-nav .m-contact {
    grid-template-columns: 1fr
  }

  .mobile-nav .m-contact .btn {
    justify-self: stretch
  }

  .tabs-actions {
    grid-auto-flow: row;
    width: 100%
  }

  /* HERO */
  .hero .wrap {
    padding: 40px 18px 64px;
    gap: 26px
  }

  .hero h1 {
    font-size: 33px
  }

  .hero p {
    font-size: 15px
  }

  .hero-cta {
    width: 100%
  }

  .hero-cta .btn {
    flex: 1 1 100%;
    justify-content: center
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 2px
  }

  .sec-head h2,
  .service h2,
  .ctaband h2,
  .prod h2,
  .about-txt h2,
  .opinie h2,
  .kontakt h2 {
    font-size: 27px
  }

  .prod-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .features {
    margin: -44px auto 0
  }

  .svc {
    padding: 24px 20px
  }

  .about-img {
    min-height: 240px
  }

  .about-txt {
    padding: 42px 18px 48px
  }

  /* CTA BAND */
  .ctaband .wrap {
    padding: 40px 18px
  }

  .ctaband .acts {
    width: 100%
  }

  .ctaband .acts .btn {
    flex: 1 1 100%;
    justify-content: center
  }

  /* PODSTRONY */
  .page-title h1 {
    font-size: 34px
  }

  .page-title .wrap {
    padding: 40px 18px 36px
  }

  .page-wrapper {
    padding: 32px 0 48px
  }

  .entry-page {
    padding: 24px 18px
  }

  #cols-kontakt .wp-block-column {
    padding: 22px 20px
  }

  /* STOPKA */
  .f-col-logo {
    display: none
  }

  .f-info-ic {
    width: 46px;
    height: 46px
  }

  .f-copy,
  .f-credit {
    font-size: 13px
  }

  /* PRODUKT */
  .product-media {
    padding: 12px;
    border-radius: 12px
  }

  .tab-btn {
    font-size: 18px;
    padding: 6px 4px 12px
  }

  .tabs-nav .btn {
    padding: 6px 12px;
    font-size: 10.5px;
    gap: 6px
  }

  .color-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
  }

  .color-swatch {
    min-height: 62px
  }

  .color-meta {
    padding: 8px 9px 9px
  }

  .color-name {
    font-size: 12px
  }

  .color-ral {
    font-size: 10.5px
  }

  .spec-table {
    font-size: 11px
  }

  .spec-table th,
  .spec-table td {
    padding: 7px 9px
  }

  .ds-lb-nav {
    width: 44px;
    height: 44px;
    font-size: 24px
  }

  .ds-lb-prev {
    left: 14px
  }

  .ds-lb-next {
    right: 14px
  }
}

/* ============================================================
   ≤340
   ============================================================ */
@media (max-width:340px) {
  .wrap {
    padding: 0 14px
  }

  .pad {
    padding: 40px 0
  }

  header .wrap {
    height: 64px
  }

  .brand img {
    height: 44px
  }

  .mn-top {
    height: 64px;
    padding: 0 16px
  }

  .mn-top .brand img {
    height: 42px
  }

  .mn-nav {
    padding: 14px 16px 4px
  }

  .mobile-nav a {
    font-size: 20px
  }

  .mobile-nav .m-contact {
    padding: 8px 16px 24px
  }

  .hero .wrap {
    padding: 32px 14px 54px
  }

  .hero h1 {
    font-size: 28px
  }

  .hero p {
    font-size: 14px
  }

  .sec-head h2,
  .service h2,
  .ctaband h2,
  .prod h2,
  .about-txt h2,
  .opinie h2,
  .kontakt h2 {
    font-size: 24px
  }

  .prod-grid {
    grid-template-columns: 1fr
  }

  .btn {
    padding: 11px 22px;
    font-size: 12.5px
  }

  .feat i {
    width: 54px;
    height: 54px;
    font-size: 22px
  }

  .feat b {
    font-size: 16px
  }

  .page-title h1 {
    font-size: 30px
  }

  .entry-page {
    padding: 20px 14px
  }

  .about-txt {
    padding: 38px 14px 44px
  }

  .f-info-item {
    gap: 12px
  }

  .f-info-ic {
    width: 44px;
    height: 44px;
    font-size: 17px
  }

  .f-info-tx b {
    font-size: 15px
  }
}