.wc-block-components-radio-control .wc-block-components-radio-control__input {
padding:unset;
} .wc-block-components-radio-control__secondary-label {
display: none !important;
} #custom-gallery {
text-align: center;
max-width: 600px;
width: 48%;
float: left;
margin-bottom: 1.5em;
}
.main-image-container {
position: relative;
width: 100%;
height: 400px;
background-color: white; display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#main-image {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 20px;
}
#prev-btn {
left: 10px;
}
#next-btn {
right: 10px;
}
.thumbnail-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 600px;
overflow: hidden;
}
.thumbnails-wrapper {
overflow-x: auto;
scroll-behavior: smooth;
width: 100%;
display: flex;
white-space: nowrap;
}
.thumbnails {
display: flex;
gap: 5px;
flex-wrap: nowrap;
}
.thumbnail {
width: 80px;
height: 80px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
transition: border 0.2s;
}
.thumbnail:hover,
.thumbnail.active {
border: 2px solid #097252;
}
.thumb-nav-btn {
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
font-size: 20px;
position: absolute;
z-index: 10;
}
#thumb-prev {
left: 0;
}
#thumb-next {
right: 0;
} .lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.hidden {
display: none;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
#lightbox-image {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}  .lightbox-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 24px;
font-weight: bold;
color: white;
background: rgba(0, 0, 0, 0.6); border: none;
cursor: pointer;
padding: 10px 15px;
border-radius: 5px; transition: background 0.3s ease-in-out;
}
.lightbox-close:hover {
background: rgba(255, 255, 255, 0.8); color: black;
} .lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
cursor: pointer;
padding: 10px;
}
#lightbox-prev {
left: 10px;
}
#lightbox-next {
right: 10px;
} .zoom-icon {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
transition: background 0.3s ease-in-out;
}
.zoom-icon svg {
width: 20px;
height: 20px;
}
.zoom-icon:hover {
background: rgba(255, 255, 255, 0.8);
}
.zoom-icon:hover svg circle,
.zoom-icon:hover svg line {
stroke: black;
} .tanan-taust{
height: 260px;
width: 100vw;
position: absolute;
left: 0;
background-image: url(https://pulmad.sydamegalooming.ee/wp-content/uploads/2025/02/Tanan.png);
background-position: center;
background-position-y: center;
}
.tanan-taust-tuhi {
height: 260px;
position: relative;
}
.tanan-sektsioon {
position: relative;
box-sizing: border-box;
width: 50%;
background-color: rgba(255, 248, 249, 0.8);
padding: 30px;
} @media only screen and (max-width: 815px) {
.tanan-sektsioon {
width: 100%;
}
#custom-gallery {
width: 100%;
}
} @media (max-width: 768px) {
.woocommerce-breadcrumb-search-container {
flex-direction: column;
align-items: flex-start;
gap: 0.5em;
}
.woocommerce-search-wrapper {
width: 100%;
}
.woocommerce-product-search {
display: flex;
width: 100%;
}
.woocommerce-product-search input.search-field {
flex: 1;
}
.woocommerce-product-search button {
flex-shrink: 0;
}
}