/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ======================================================================
   PRODUCT GALLERY
   ====================================================================== */

/* new product slider */
.sf-product-gallery { width: 100%; }

.sf-product-gallery__main{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.sf-product-gallery__main .swiper-wrapper{ display: flex; }

.sf-product-gallery__main .swiper-slide{
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-product-gallery__main {
  position: relative;
  height: clamp(360px, 60vh, 560px);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.sf-product-gallery__main .swiper-wrapper,
.sf-product-gallery__main .swiper-slide,
.sf-product-gallery__main .sfpg-main-clickarea {
  height: 100%;
}

.sf-product-gallery__main .sfpg-main-clickarea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sf-product-gallery__main img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 12px;
}

.sf-product-gallery__thumbs-wrap{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.sf-product-gallery__thumbs{
  width: 100%;
  overflow: hidden;
}

.sf-product-gallery__thumbs .swiper-wrapper{
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-product-gallery__thumbs .swiper-slide{
  flex: 0 0 auto;
  width: 155px;
  aspect-ratio: 1 / 1; 
  height: auto;    
  border-radius: 8px;
  overflow: hidden;
  opacity: .55;
  transform: scale(.94);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}

.sf-product-gallery__thumbs .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;    
  display: block;
}

.sf-product-gallery__thumbs .swiper-slide-thumb-active{
  opacity: 1;
  transform: scale(1);
}

.sf-product-gallery .swiper-button-prev, .sf-product-gallery .swiper-button-next, .sf-product-gallery .sfpg-thumbs-prev, .sf-product-gallery .sfpg-thumbs-next {
	background-color: #E6E6E6!important;
}

/*.sf-product-gallery__thumbs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}*/
/*.sf-product-gallery__main img{
  width: 100%;
  height: 100%;
  max-height: clamp(320px, 60vh, 550px);
  object-fit: contain;
  display: block;
}*/

.sf-product-gallery .sfpg-thumbs-prev::after, .sf-product-gallery .sfpg-thumbs-next::after {
	content: "prev"!important;
}

.sf-product-gallery .swiper-button-prev,
.sf-product-gallery .swiper-button-next,
.sf-product-gallery .sfpg-thumbs-prev,
.sf-product-gallery .sfpg-thumbs-next{
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  cursor: pointer;
}

.sf-product-gallery .swiper-button-prev,
.sf-product-gallery .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.sf-product-gallery .sfpg-thumbs-prev,
.sf-product-gallery .sfpg-thumbs-next{
  position: static;
  transform: none;
  z-index: 1;
}

.sf-product-gallery .swiper-button-prev:after,
.sf-product-gallery .swiper-button-next:after{
  font-size: 16px;
  color:#161616;
}

.sf-product-gallery .sfpg-thumbs-prev::after {
  display: block;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  color: #161616;
  content: 'prev'!important;
}

.sf-product-gallery .sfpg-thumbs-next::after {
  display: block;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  color: #161616;
  content: 'next'!important;
}

.sf-product-gallery .sfpg-thumbs-next::after{ content: "next"; }

.sf-product-gallery .swiper-button-disabled,
.sf-product-gallery .sfpg-thumbs-prev.swiper-button-disabled,
.sf-product-gallery .sfpg-thumbs-next.swiper-button-disabled{
  opacity: .35;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.swiper-slide {
	border-radius: 24px!important;
	background: #FFF!important;
	border: 1px solid #98A2B3;
}

.swiper-slide-active {
	border-radius: 24px!important;
	background: #FFF!important;
	border: 1px solid #98A2B3!important;
}

.swiper-slide-active img {
	border-radius: 24px!important;
}

/* Scroll lock only while open */
html.sfpg-lightbox-lock,
html.sfpg-lightbox-lock body {
  overflow: hidden;
  height: 100%;
}

/* Lightbox base */
.sfpg-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.sfpg-lightbox.is-open{ display:block; }

.sfpg-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.85);
}

.sfpg-lightbox__ui{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(14px, 3vw, 28px);
}

/*.sfpg-lightbox__figure{
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.sfpg-lightbox__img{
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 14px;
} */

.sfpg-lightbox__figure {
  margin: 0;
  width: min(1200px, 92vw);
  height: 82vh;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sfpg-lightbox__img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: calc(82vh - 40px);
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  display: block;
}

@media (max-width: 767px) {
  .sfpg-lightbox__figure {
    width: 94vw;
    height: 76vh;
    max-height: 76vh;
  }

  .sfpg-lightbox__img {
    max-height: calc(76vh - 40px);
  }
}

.sfpg-lightbox__caption{
  color: rgba(255,255,255,.8);
  font-size: 14px;
  text-align:center;
  max-width: 80ch;
}

/* Controls */
.sfpg-lightbox__close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
}

.sfpg-lightbox__nav{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor:pointer;
}

.sfpg-lightbox__prev{ position:absolute; left: 16px; }

.sfpg-lightbox__next{ position:absolute; right: 16px; }

/* Make the slide the positioning context */
.sf-product-gallery [data-sfpg-main] .swiper-slide{
  position: relative;
}

/* Zoom button overlay */
.sf-product-gallery .sfpg-zoom-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}

/* Show only on ACTIVE slide */
.sf-product-gallery [data-sfpg-main] .swiper-slide-active .sfpg-zoom-btn{
  opacity: 1;
  transform: scale(1);
  cursor: pointer;
}

/* Center the X and arrows perfectly inside their circles */
.sfpg-lightbox__close,
.sfpg-lightbox__nav{
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

/* Make the X use a consistent glyph size + no baseline weirdness */
.sfpg-lightbox__close{
  font-size: 28px;          /* adjust if you want */
  font-weight: 400;
}

/* Make arrows consistent */
.sfpg-lightbox__nav{
  font-size: 34px;          /* adjust if you want */
  font-weight: 400;
}

/* Optional: nudge visually if your font still looks slightly off */
.sfpg-lightbox__close,
.sfpg-lightbox__nav{
  transform: translateY(0); /* change to translateY(-1px) if you want a tiny nudge */
}

/* Active slide cursor + zoom icon (keep your zoom CSS too) */
.sf-product-gallery [data-sfpg-main] .swiper-slide-active img { cursor: zoom-in; }