/* ——————————————————————————————————————————————— */
/*  ZMIENNE GLOBALNE  */
:root {
  --gap: calc(1rem + 1vw);
  --radius: 5px;
  
  --c-border: #e5e5e5;
  --c-primary: #6b9f1e;
  --c-secondary: #666;
  --c-button: #6b9f1e;
  --c-red-button: #bf0a28;
  --c-button-checked: #fff;
  --c-button-hover: #333;

  --f-size: clamp(0.8rem, 0.8rem + 0.5vw, 1.8rem);
  --fh-size: clamp(1.4rem, 1.2rem + 1vw, 2.5rem);
  --fw-normal: 400;
  --fw-bold: 600;
}

/* ——————————————————————————————————————————————— */
.contact_stocks {
  display: none !important;
}

#tab-opis:checked ~ #panel-opis,
#tab-tech:checked ~ #panel-tech,
#tab-montaz:checked ~ #panel-montaz,
#tab-konfigurator:checked ~ #panel-konfigurator {
  display: block;
}

.product-tabs {
  font-size: var(--f-size);

  .tab-toggle {
    display: none;
  }

  #tab-opis:checked ~ .tab-controls label[for="tab-opis"],
  #tab-tech:checked ~ .tab-controls label[for="tab-tech"],
  #tab-montaz:checked ~ .tab-controls label[for="tab-montaz"],
  #tab-konfigurator:checked ~ .tab-controls label[for="tab-konfigurator"] {
    background: var(--c-primary);
    color: var(--c-button-checked);
    font-weight: var(--fw-bold);
  }

    #tab-konfigurator ~ .tab-controls label[for="tab-konfigurator"] {
    background: var(--c-red-button);
    color: var(--c-button-checked);
    }

  .tab-controls {
    display: flex;
    gap: var(--gap);
    justify-content: center;
    flex-direction: column;

    @media (min-width: 767px) {
      & {
        flex-direction: row;
      }
    }

    .tab-btn {
      padding: 1rem 2rem;
      flex: 1;
      text-align: center;
      border: 1px solid var(--c-border);
      cursor: pointer;
      user-select: none;
      transition: 0.2s ease;
      border-radius: var(--radius);

      &:hover {
        opacity: 0.8;
        transition: 0.2s ease;
      }
    }
  }

  .tab-panel {
    display: none;
    padding: var(--gap);
    background: #fff;
    margin-top: var(--gap);

    .bold {
      font-weight: var(--fw-bold) !important;
    }

    .color {
      color: var(--c-primary);
    }

    .button {
      background: var(--c-button);
      color: #fff;
      border: none;
      padding: 1rem 4rem;
      cursor: pointer;
      font-size: var(--f-size);
      transition: 0.2s ease;
      max-width: fit-content;
      margin-left: auto;
      display: flex;

      &:hover {
        background: var(--c-button-hover);
        transition: 0.2s ease;
      }
    }

    #close {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 1px;
      width: 1px;
      overflow: hidden;
    }

    p {
      font-weight: var(--fw-normal);
      text-align: justify;
      line-height: 2.5rem;
    }

    .panel-opis_wrapper {
      display: flex;
      flex-direction: column;
      margin: calc(var(--gap) * 2) 0;

      &.grey {
        background: #f3f3f3;
        padding: var(--gap);
      }

      p {
        font-weight: var(--fw-normal);
        text-align: justify;
        line-height: 2.5rem;
      }

      h2 {
        font-weight: var(--fw-bold);
        text-align: center;
        font-size: var(--fh-size);

        &::after {
          content: "";
          display: block;
          width: calc(50px + 5vw);
          height: 5px;
          background: var(--c-primary);
          margin: var(--gap) auto;
        }
      }

      .stellar-gal-wrapper {
        p {
          font-weight: var(--fw-normal);
          text-align: justify;
          line-height: 2.5rem;
        }
        .gal {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: var(--gap);
          flex-wrap: wrap;

          p {
            font-weight: var(--fw-normal);
            text-align: justify;
            line-height: 2.5rem;
          }

          img {
            cursor: pointer;
            transition: transform 0.2s ease;

            &:hover {
              transform: scale(1.05);
            }
          }

          @media screen and (max-width: 1024px) {
            grid-template-columns: repeat(3, 1fr);
          }

          @media screen and (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        .lightbox {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(10px);
          display: none;
          align-items: center;
          justify-content: center;
          z-index: 9999;

          &:target {
            display: flex;
          }

          .lb-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
            background: #00000099;
            display: flex;
            backdrop-filter: blur(10px);
            align-items: center;
            justify-content: center;

            img {
              width: 80%;
              height: 80%;
            }

            .lb-close {
              position: absolute;
              top: 1rem;
              right: 1rem;
              font-size: 2rem;
              color: #fff;
              text-decoration: none;
              background: rgba(0, 0, 0, 0.6);
              border-radius: 50%;
              width: 36px;
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background 0.2s ease;

              &:hover {
                background: rgba(0, 0, 0, 0.85);
              }
            }

            .lb-prev,
            .lb-next {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              font-size: 2.5rem;
              color: #fff;
              text-decoration: none;
              background: rgba(0, 0, 0, 0.4);
              width: 48px;
              height: 48px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background 0.2s ease, transform 0.2s ease;

              &:hover {
                background: rgba(0, 0, 0, 0.75);
                transform: translateY(-50%) scale(1.1);
              }
            }

            .lb-prev {
              left: 1rem;
            }

            .lb-next {
              right: 1rem;
            }
          }
        }
      }
    }

    .panel-opis_container {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      p {
        font-weight: var(--fw-normal);
        text-align: justify;
        line-height: 2.5rem;
      }

      &.--2col,
      &.--3col,
      &.--4col,
      &.--5col,
      &.--6col {
        display: grid;
        align-items: center;
        gap: calc(2 * var(--gap));

        @media (max-width: 1024px) {
          &.--4col,
          &.--5col,
          &.--6col {
            grid-template-columns: repeat(2, 1fr) !important;
          }
        }
        @media (max-width: 767px) {
          &.--2col,
          &.--3col {
            grid-template-columns: 1fr !important;
          }
        }
      }

      &.--2col {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      &.--3col {
        grid-template-columns: repeat(3, 1fr) !important;
      }
      &.--4col {
        grid-template-columns: repeat(4, 1fr) !important;
      }
      &.--5col {
        grid-template-columns: repeat(5, 1fr) !important;
      }
      &.--6col {
        grid-template-columns: repeat(6, 1fr) !important;
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      border-radius: var(--radius);
      margin-top: 10px;

      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
      }
      th {
        background: #f2f2f2;
        text-align: left;
      }
    }

    &#panel-tech {
      padding: 0;
    }

    &#panel-montaz {
      border: 1px solid var(--c-border);
      border-radius: var(--radius);

      h4 {
        color: var(--c-primary);
      }
      span {
        font-weight: var(--fw-bold);
      }
    }
  }
}

/* ——————————————————————————————————————————————— */
/* GALERIA - KOLUMNY RESPONSYWNE */
.gal.--2col,
.gal.--3col,
.gal.--4col,
.gal.--5col,
.gal.--6col {
  display: grid;
  gap: var(--gap);
}

.gal.--2col {
  grid-template-columns: repeat(2, 1fr) !important;
}
.gal.--3col {
  grid-template-columns: repeat(3, 1fr) !important;
}
.gal.--4col {
  grid-template-columns: repeat(4, 1fr) !important;
}
.gal.--5col {
  grid-template-columns: repeat(5, 1fr) !important;
}
.gal.--6col {
  grid-template-columns: repeat(6, 1fr) !important;
}

@media (max-width: 1024px) {
  .gal.--4col,
  .gal.--5col,
  .gal.--6col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .gal.--2col,
  .gal.--3col {
    grid-template-columns: 1fr !important;
  }
}

/* ——————————————————————————————————————————————— */
/*  UKRYWANIE PÓL I SEKCJI  */
#projector_status {
display: none !important;
}
#projector_returns {
display: none !important;
}
#projector_paypo {
display: none !important;
}
.cop_delivery__time {
display: none !important;
}
.cop_time__label {
display: none !important;
}
.cop_time__value {
display: none !important;
}

/* ——————————————————————————————————————————————— */
/*  UKRYWANIE sekcji wskazówki   */
#main_tree5 {
      display: none !important;
  }
  /* ——————————————————————————————————————————————— */
/*  slider opinie   */
.slider-opinie {
  width: 100%;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  margin: 30px auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.slider-opinie .slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  scroll-behavior: smooth;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.slider-opinie .slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  text-align: center;
}

.slider-opinie .slide img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 10px;
}

.slider-nav {
  text-align: center;
  margin-top: 10px;
}

.slider-nav a {
  text-decoration: none;
  font-size: 24px;
  margin: 0 5px;
  color: #ccc;
}

.slider-nav a:focus {
  outline: none;
  color: #333;
}