#invst-sf-modal-root { display: none; }

.invst-modal__overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 100000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}

.invst-modal__overlay.is-open {
  opacity: 1; pointer-events: auto;
}

.invst-modal__box {
  background: #fff;
  max-width: 960px; width: calc(100% - 40px);
  max-height: 90vh; overflow: auto;
  border-radius: 14px; position: relative;
  padding: 20px; outline: none;
  transform: scale(.94) translateY(8px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

.invst-modal__overlay.is-open .invst-modal__box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.invst-modal__close {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent;
  font-size: 28px; 
  line-height: 1;
   cursor: pointer;
       padding: 15px;
    height: auto;
    line-height: 1;
    max-height: none;
    padding-top:8px;
}

.invst-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}

.invst-modal__sizes {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.invst-chip {
  border: 1px solid #ddd; background: #fafafa;
  border-radius: 999px; padding: .35em .8em; cursor: pointer;
}

.invst-chip.is-active {
  border-color: #222; background: #fff;
}

.invst-size-btn {
  margin-left: 8px; display: inline-block;
 
   border: 1px solid #ddd;
  background: #f7f7f7; border-radius: 4px; cursor: pointer;
  font-size: .9em;
}

.invst-size-btn:hover { background: #eee; }

.invst-modal__content table {
  width: 100%; border-collapse: collapse;
}
.invst-modal__content table td,
.invst-modal__content table th {
  border: 1px solid #e5e5e5; padding: 8px;
}


.invst-fit-btn{
  margin-left: 8px; display:inline-block; 
  border:1px solid #ddd; background:#f7f7f7; border-radius:4px; cursor:pointer; font-size:.9em
}
.invst-fit-btn:hover{ background:#eee }

/* === Modal box węższy === */
.invst-modal__box{
  background:#fff;
  max-width: 600px;
     
  width:calc(100% - 40px);
  max-height:90vh;
  overflow:auto;
  border-radius:14px;
  position:relative;
  padding:20px;
  outline:none;
  transform:scale(.94) translateY(8px);
  opacity:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

/* Obraz w pop-upie "Krój" */
.invst-fit-pane img{
   max-width: 480px;
    max-height: 480px;
    object-fit: cover;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:12px;
}

/* Pasek zakładek POD obrazem — pełna szerokość, kolumny równe */
.invst-fit-tabs-bar{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  gap:14px;
}

/* Guziki zakładek — jak na screenie */
.invst-fit-tabbtn{
  width:100%;
  display:inline-block;
  padding:8px 10px;
  border:1px solid #e5e5e5;
  background:#fff;
  border-radius:8px;
  text-align:center;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  color:#111;
  height: auto;
}

.invst-fit-tabbtn.is-active{
  background:#000;
  color:#fff;
  border-color:#000;
}

/* Opis pod zakładkami */
.invst-fit-bottom{
  margin-top:16px;
}

.invst-fit-bottom p{
  font-size: 14px;
  line-height: 1.5;
}

@media(max-width: 480px){
.row-isw-swatch label{
        width: 100%;
    display: inline-block;
}

  .invst-size-btn {
   margin-left: 0;
  }
   .invst-size-btn , .invst-fit-btn{
      height: auto;
    font-size: 12px;
    padding: 8px 12px;
    line-height: 1;
  }
}

@media(max-width: 850px){
.row-isw-swatch label{
        width: 100%;
    display: inline-block;
}
	 .invst-size-btn {
   margin-left: 0;
  }
	
	.row-isw-swatch .selected-term-name{
		width:100%;
		margin-bottom:5px;
		font-weight:700;
	}
}

.row-isw-swatch .selected-term-name{
		
		font-weight:700;
	}