/* podstrony: panele (tabela + rzut), pulapki (ciemna, wykres), zestawy (rzuty), kabiny (zdjecie na cala szerokosc) */

/* wspolne dla rzutow pokoju */
.plan-wall { fill: #fff; stroke: #1b3600; stroke-width: 2; }
.plan-spk{fill:#1b3600}
.plan-ear { fill: none; stroke: #1b3600; stroke-width: 2; }
.plan-ray{fill:none;stroke:#cda34f;stroke-width:1.2;stroke-dasharray:4 3}
.plan-panel { fill: #8fb336; }
.plan-panel--soft{fill:rgba(143,179,54,.35);stroke:#8fb336;stroke-width:1;stroke-dasharray:3 2}
.plan-trap { fill: #1b3600; opacity: .85; }
.plan-diff{fill:#cda34f}
.plan-txt { font: 600 11px 'Open Sans', sans-serif; fill: #1b3600; text-anchor: middle; }
.plan-txt--l{text-anchor:start;fill:#7a9a2c}

/*--- PANELE ---*/
.panels-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 50px 20px 60px;
}
.panels-top__txt{border-left:4px solid var(--olive);padding-left:20px}
.panels-top__h1 { margin: 6px 0 16px; font-size: 32px; line-height: 1.15; color: var(--forest); }
.panels-top__txt p{font-size:15px;color:var(--gray-txt)}
.panels-top__txt .panels-top__small { margin-top: 14px; font-size: 13px; }
.panels-top__img{width:100%;aspect-ratio:760/560;object-fit:cover;background:#dde5cf}
.panels-h2 { margin-bottom: 20px; font-size: 24px; line-height: 1.3; color: var(--forest); }

.panels-matrix{max-width:var(--wrap);margin:0 auto;padding:40px 20px 70px}
.panels-table { border-top: 3px solid var(--forest); }
.panels-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.panels-row > span:first-child { grid-column: 1 / -1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--olive-dark); }
.panels-row--head > span:first-child{display:none}
.panels-row--head span { font-weight: 700; color: var(--forest); font-size: 15px; }
.panels-buy{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.panels-buy b { font-size: 20px; color: var(--forest); }
.panels-buy select{padding:6px;border:1px solid #cfd6c4;font:inherit;font-size:12.5px;max-width:100%}
.panels-buy .add-btn { padding: 9px 10px; font-size: 11px; }
.panels-note{margin-top:16px;font-size:14px;font-style:italic;color:var(--gray-txt)}

.panels-where {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 30px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px 20px;
  background: #eff4e7;
}
.panels-where__txt p{font-size:15px}
.panels-where__txt p + p { margin-top: 12px; }
.panels-where__warn{padding:12px 14px;border-left:3px solid var(--gold);background:#fff}
.panels-plan { width: 100%; max-width: 420px; margin: 0 auto; }

.panels-fabric{max-width:var(--wrap);margin:0 auto;padding:70px 20px 100px}
.panels-swatches { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.swatch{display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:14px;color:#fff;font-size:12.5px}
.swatch b { font-size: 16px; }
.swatch--grafit{background:#3b3f42}
.swatch--jasnoszary { background: #b9bcb8; color: #1a1a1a; }
.swatch--oliwka{background:#6f7a45}
.swatch--piasek { background: #d8c9a8; color: #1a1a1a; }
.panels-sample{display:flex;flex-direction:column;gap:14px;margin-top:20px;padding:20px;border:1px dashed #b9c4a6}
.panels-sample p { font-size: 14px; color: var(--gray-txt); }
.panels-sample .add-btn{align-self:flex-start}

/*--- PULAPKI: cala strona ciemna ---*/
.bass-page .site-main { background: #111c08; color: #e6ecdc; }
.bass-hero{max-width:980px;margin:0 auto;padding:70px 20px 40px}
.bass-hero__h1 { margin: 8px 0 18px; font-size: 40px; line-height: 1.05; color: #fff; }
.bass-hero__lead{font-size:17px;line-height:1.6;color:#c9d6b5}
.bass-h2 { margin-bottom: 18px; font-size: 24px; line-height: 1.3; color: #fff; }
.bass-chart{max-width:980px;margin:0 auto;padding:30px 20px 60px}
.bass-chart__svg { width: 100%; height: auto; }
.bass-grid{stroke:rgba(255,255,255,.12);stroke-width:1}
.bass-tick { font: 11px 'Open Sans', sans-serif; fill: #9fb088; text-anchor: middle; }
.bass-lab{font:600 11.5px 'Open Sans',sans-serif;fill:#e6ecdc}
.bass-bar { fill: #5d6652; }
.bass-bar--weak{fill:#3a4232}
.bass-bar--main { fill: #8fb336; }
.bass-chart__note{margin-top:14px;font-size:13.5px;color:#a9b797}

.bass-duo { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 0 20px 80px; }
.bass-item{display:flex;flex-direction:column;padding:28px 24px;border:1px solid #2e4119;background:#16240b}
.bass-item__tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--olive); }
.bass-item__name{margin:6px 0 12px;font-size:22px;line-height:1.25;color:#fff}
.bass-item p:not(.bass-item__tag) { font-size: 14.5px; color: #c9d6b5; }
.bass-item p + p{margin-top:10px}
.bass-item__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.bass-item__buy select{padding:7px;border:1px solid #3b5220;background:#0f1907;color:#e6ecdc;font:inherit;font-size:13px}
.bass-item__buy b { margin-left: auto; font-size: 24px; color: #fff; }
.bass-page .add-btn{background:var(--olive);color:#111c08}
.bass-page .add-btn:hover { background: #fff; }

.bass-test{max-width:980px;margin:0 auto;padding:10px 20px 80px}
.bass-steps { margin: 0; padding: 0; list-style: none; counter-reset: krok; }
.bass-steps li{position:relative;padding:14px 0 14px 54px;border-top:1px solid #2e4119;font-size:15px;counter-increment:krok}
.bass-steps li::before { content: counter(krok); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; border: 2px solid var(--olive); color: var(--olive); font-weight: 700; line-height: 32px; text-align: center; }
.bass-steps b{color:#fff}

.bass-diff { display: flex; flex-direction: column; gap: 30px; max-width: var(--wrap); margin: 0 auto; padding: 0 20px 100px; }
.bass-diff img{width:100%;aspect-ratio:1;object-fit:cover;background:#2a3a1a}
.bass-diff__txt > p { font-size: 15px; color: #c9d6b5; margin-bottom: 20px; }
.bass-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:14px 0;border-top:1px solid #2e4119}
.bass-row > span { grid-column: 1 / -1; font-size: 13px; color: #a9b797; }
.bass-row > span b{display:block;font-size:16px;color:#fff}
.bass-row__p { font-size: 20px; color: #fff; }

/*--- ZESTAWY ---*/
.kits-head{max-width:900px;margin:0 auto;padding:60px 20px 40px;text-align:center}
.kits-head__h1 { font-size: 34px; line-height: 1.2; color: var(--forest); }
.kits-head p{margin-top:14px;font-size:15px;color:var(--gray-txt)}
.kits-line {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 26px;
    max-width: var(--wrap);
    margin: 0 auto 30px;
    padding: 30px 20px;
    border-top: 1px solid var(--line);
}
.kits-line--alt{background:#f6f9f1}
.kits-plan { width: 100%; max-width: 300px; margin: 0 auto; }
.kits-line__tag{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--olive-dark)}
.kits-line__name { margin: 2px 0 14px; font-size: 24px; line-height: 1.25; color: var(--forest); }
.kits-qty{margin-bottom:14px}
.kits-qty li { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 15px; }
.kits-qty b{min-width:34px;font-size:26px;line-height:1;color:var(--olive)}
.kits-line__body > p { font-size: 14px; color: var(--gray-txt); }
.kits-line__body a{color:var(--forest);text-decoration:underline}
.kits-price { align-self: start; padding: 22px; background: var(--forest); color: #fff; }
.kits-price__old{font-size:14px;text-decoration:line-through;color:#b9c9a0}
.kits-price__now { margin: 2px 0 16px; font-size: 38px; font-weight: 700; line-height: 1.1; }
.kits-price__color{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-size:13px}
.kits-price__color select { padding: 6px; border: 0; font: inherit; font-size: 13px; }
.kits-after{display:flex;flex-direction:column;gap:26px;max-width:var(--wrap);margin:40px auto 0;padding:0 20px 100px}
.kits-after img { width: 100%; aspect-ratio: 900/560; object-fit: cover; background: #dde5cf; }
.kits-after__h{font-size:24px;color:var(--forest);margin-bottom:12px}
.kits-after__txt p { font-size: 15px; color: var(--gray-txt); }
.kits-after__txt p + p{margin-top:12px}

/*--- KABINY ---*/
.booth-hero {
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    background: #0e130e url(../public/kabina-wokalna-mieszkanie.webp) center / cover no-repeat;
    position: relative;
}
.booth-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,19,14,.85),rgba(14,19,14,.2) 70%)}
.booth-hero__in { position: relative; max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 40px 20px; color: #fff; }
.booth-hero__h1{margin:6px 0 12px;font-size:34px;line-height:1.1}
.booth-hero__in p:last-child { max-width: 520px; font-size: 16px; color: #dfe8cf; }
.booth-facts{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--wrap);margin:0 auto;padding:0 20px}
.booth-fact { padding: 24px 0; border-bottom: 1px solid var(--line); }
.booth-fact b{display:block;font-size:30px;line-height:1.1;color:var(--forest)}
.booth-fact span { font-size: 14px; color: var(--gray-txt); }
.booth-h2{font-size:24px;line-height:1.3;color:var(--forest);margin-bottom:18px}
.booth-sizes { max-width: var(--wrap); margin: 0 auto; padding: 70px 20px 40px; }
.booth-table{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:#d7dfca;border:1px solid #d7dfca}
.booth-size { padding: 22px 20px; background: #fff; }
.booth-size__dim{font-size:22px;font-weight:700;color:var(--forest)}
.booth-size p:nth-child(2) { margin: 6px 0 14px; font-size: 14px; color: var(--gray-txt); }
.booth-size__price{font-size:18px;font-weight:700;color:var(--olive-dark)}
.booth-sizes__note { margin-top: 16px; font-size: 13.5px; color: var(--gray-txt); }
.booth-vs{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:var(--wrap);margin:0 auto;padding:40px 20px 70px}
.booth-vs__col { padding: 26px 24px; background: #eff4e7; }
.booth-vs__col--no{background:#fff;border:1px solid var(--line)}
.booth-vs__h { margin-bottom: 12px; font-size: 20px; color: var(--forest); }
.booth-vs__col li{position:relative;padding:5px 0 5px 20px;font-size:14.5px}
.booth-vs__col li::before { content: "—"; position: absolute; left: 0; color: var(--olive); }
.booth-vs__col p{margin-top:10px;font-size:14px;color:var(--gray-txt)}
.booth-vs__col a { text-decoration: underline; color: var(--forest); }
.booth-honest{display:flex;flex-direction:column;gap:30px;max-width:var(--wrap);margin:0 auto;padding:0 20px 80px}
.booth-honest img { width: 100%; aspect-ratio: 620/700; object-fit: cover; background: #dde5cf; }
.booth-honest p{margin-bottom:14px;font-size:15px;color:var(--gray-txt)}
.booth-honest b { color: var(--forest); }
.booth-order{display:flex;flex-direction:column;gap:30px;max-width:var(--wrap);margin:0 auto;padding:0 20px 100px}
.booth-order__form { padding: 30px 20px; border: 1px solid var(--line); }

@media (min-width: 600px) {
  .panels-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
  .booth-facts { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
  .booth-table{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:768px) {
.panels-top{flex-direction:row;align-items:center;gap:60px;padding:90px 40px 80px}
.panels-top__txt,.panels-top__img{flex:1 1 0;min-width:0}
.panels-top__h1 { font-size: 50px; }
.panels-matrix{padding:40px 40px 100px}
.panels-row { grid-template-columns: 180px repeat(3, minmax(0,1fr)); gap: 20px; }
.panels-row > span:first-child{grid-column:auto}
.panels-row--head > span:first-child { display: block; }
.panels-buy{flex-direction:row;flex-wrap:wrap;align-items:center}
.panels-h2 { font-size: 34px; }
.panels-where{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:60px;padding:100px 40px}
.panels-fabric { padding: 100px 40px 130px; }
.panels-sample{flex-direction:row;align-items:center;justify-content:space-between}
.bass-hero { padding: 120px 40px 50px; }
.bass-hero__h1{font-size:72px}
.bass-h2 { font-size: 32px; }
.bass-chart,.bass-test{padding-left:40px;padding-right:40px}
.bass-duo { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); padding: 0 40px 110px; }
.bass-diff{flex-direction:row;align-items:center;gap:60px;padding:0 40px 130px}
.bass-diff img,.bass-diff__txt { flex: 1 1 0; min-width: 0; }
.bass-row{grid-template-columns:minmax(0,1fr) auto auto}
.bass-row > span { grid-column: auto; }
.kits-head{padding:100px 40px 60px}
.kits-head__h1 { font-size: 48px; }
.kits-line{grid-template-columns:260px minmax(0,1fr) 260px;align-items:center;gap:40px;padding:40px}
.kits-after { flex-direction: row; align-items: center; gap: 60px; padding: 0 40px 130px; }
.kits-after img,.kits-after__txt{flex:1 1 0;min-width:0}
.booth-hero { min-height: 560px; }
.booth-hero__in{padding:60px 40px}
.booth-hero__h1 { font-size: 60px; }
.booth-facts,.booth-sizes,.booth-vs{padding-left:40px;padding-right:40px}
.booth-h2 { font-size: 34px; }
.booth-vs{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.booth-honest { flex-direction: row; align-items: center; gap: 60px; padding: 0 40px 110px; }
.booth-honest img{flex:0 0 38%}
.booth-order { flex-direction: row; align-items: stretch; padding: 0 40px 130px; }
.booth-order__form{flex:1.6 1 0;padding:40px}
.booth-order .ask-info { flex: 1 1 0; padding: 40px 34px; }
}

.panels-page .main_head,.kits-page .main_head { border-bottom-color: #dfe6d3; }
.booth-page .main_head{border-bottom:0}
.panels-row--buy { align-items: start; border-bottom: 0; padding-top: 18px; }
.bass-item--wide .bass-item__name{max-width:520px}