/* -------------------------
   Product info / frontend CSS
   (Replace entire frontend.css with this)
   ------------------------- */

/* Global box-sizing */
.pi-product-gallery, .pi-tabs, .pi-usps-grid, .pi-faq-list { box-sizing: border-box; }

/* -------------------------
   Tabs / Panels / FAQ
   ------------------------- */

/* Tabs nav - updated to match JS (.pi-tab-link, .pi-tab-panel) */
.pi-tabs { width:100%; box-sizing:border-box; }
.pi-tabs .pi-tabs-nav { 
	list-style:none; 
	gap:30px; 
	flex-wrap:wrap; 
	box-sizing:border-box; 
	display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.pi-tabs .pi-tabs-nav .pi-tab-nav-item{
	flex: 0 0 23.2%;
} 
.pi-tabs .pi-tab-link {
    background: #fff;
    color: var(--pi-tab-color, #333);
    display: inline-block;
    text-decoration: none;
    border-radius: 32px;
    cursor: pointer;
	text-align: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 500;
    padding: 14px 35px 14px 35px;
    width: 100%;
    border: 1px solid #e2395d;
}
.pi-tabs .pi-tab-link.active {
    background-color: transparent;
    color: var(--e-global-color-a048915);
    background-image: linear-gradient(90deg, #F7A090 0%, #EF687B 100%);
    border-style: none;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.26);
}

/* Tab panel */
.pi-tabs-content{
	margin-top: 20px;
}
.pi-tabs .pi-tab-panel {
	border: none;
    padding: 15px;
    background: var(--pi-panel-bg, #fff);
    border-radius: 4px;
    box-sizing: border-box;
	color: #2b2b2b;
/*     text-align: center; */
}
.pi-tabs .pi-tab-panel ul{
	text-align: left;
}
.pi-tabs .pi-tab-panel ul li{
	margin-bottom:10px;
}
.pi-tabs .pi-tab-panel:not(.active){ display:none; }

/* Alignment helpers addable as wrapper class: .align-left/.align-center/.align-right */
.pi-tabs.align-left .pi-tabs-nav { justify-content:flex-start; }
.pi-tabs.align-center .pi-tabs-nav { justify-content:center; }
.pi-tabs.align-right .pi-tabs-nav { justify-content:flex-end; }

/* -------------------------
   FAQ
   ------------------------- */
.pi-faq-item.active .pi-faq-answer {
/*     display: block; */
}
.pi-faq-list { margin:0; padding:0; list-style:none; }
.pi-faq-item {padding: 10px 0; }
.pi-faq-question { padding:10px; }
.pi-faq-toggle {
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  padding: 10px 0;
  box-sizing:border-box;
}
.pi-faq-toggle .pi-faq-icon {
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:none;
  flex:0 0 22px;
  font-weight:700;
}
.pi-faq-answer { padding:20px 15px 16px 15px; display:none; box-sizing:border-box; overflow: hidden;}
.pi-faq-answer p{
	margin-block-end: 0;
}
/* active FAQ */
.pi-faq-item.active button{
/*     background: #e2395d !important;
    color: #ffffff !important; */
    box-shadow: none !important;
}

.pi-faq-item button{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 20px !important;
    background: #F2F2F2 !important;
    color: #000 !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 40px !important;
    cursor: pointer !important;
    text-align: left !important;
	transition:0.4s all ease-in-out;
    transition: background 0.3s ease, color 0.3s ease;
	white-space:normal;
}
.pi-faq-item button:hover{
	color: #e2395d !important;
	    letter-spacing: 0;
	transition:0.3s all ease-in-out;
	background-image:none !important;
}
.pi-faq-item button span{
	flex-direction: row-reverse;
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.pi-faq-item.active .pi-faq-toggle .pi-faq-icon { background: none; ); }
.pi-faq-item.active .pi-faq-answer { padding-bottom: 5px; }

.pi-variant-buttons button{
	background-color: #fff !important;
    color: #000 !important;
    background-image: none !important;
}
.pi-variant-buttons button:hover{
/* 	color: #fff !important; */
}
.pi-variant-buttons button.active{
	background-color: transparent !important;
    color: var(--e-global-color-a048915) !important;
    background-image: linear-gradient(90deg, #F7A090 0%, #EF687B 100%) !important;
}

/* -------------------------
   USPs
   ------------------------- */
.pi-usps-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:20px !important; box-sizing:border-box; }
.pi-usps-grid.single-usp {
    display: block; /* or grid-template-columns: 1fr */
}
.pi-usp-item { text-align:center; padding:10px; border-radius:6px; box-sizing:border-box; }
.pi-usp-icon img { max-width:100%; display:block; margin:0; height:auto; }
.pi-usp-title { color: #2b2b2b;
    font-weight: 500; text-align:left;}

/* USP placements */
.pi-usp-item.placement-top .pi-usp-icon { display:block; margin-bottom:8px; }
.pi-usp-item.placement-bottom .pi-usp-icon { display:block; margin-top:8px; }
.pi-usp-item.inline-row { display:flex; align-items:center; gap:10px; justify-content:center; }
.pi-usp-item.inline-row .pi-usp-icon img { display:inline-block; }

/* -------------------------
   Swiper gallery / thumbnails
   ------------------------- */

/* Container base */
.pi-product-gallery { display:flex; gap:20px; align-items:flex-start; width:100%; box-sizing:border-box; position:relative; }

/* Layout variants */
.pi-product-gallery.pi-layout-left { flex-direction:row; }
.pi-product-gallery.pi-layout-bottom { flex-direction:column; }

/* Main gallery */
.pi-gallery-main-box { flex:1 1 auto; min-width:220px; max-width:100%; box-sizing:border-box; overflow:hidden; position:relative; }
.pi-swiper-main { width:100%; box-sizing:border-box; position:relative; }
.pi-swiper-main .swiper-wrapper { display:flex; box-sizing:border-box; flex-wrap:nowrap !important; }
.pi-swiper-main .swiper-slide {
    flex: 0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Image inner box keeps image in the boxed container and prevents bleed */
.pi-image-inner {
   width: 100%;
    padding: 0;
    box-sizing: border-box;
    background: #fff;
    border: none;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
}
.pi-image-inner img {
    max-width:100%;
    max-height:100%;
    display:block;
    object-fit:contain;
}

/* Buttons / arrows improvements */
.pi-swiper-button-prev, .pi-swiper-button-next { z-index:50; position:absolute; top:50%; transform:translateY(-50%); }
.pi-product-gallery .pi-swiper-button-prev { left:8px; }
.pi-product-gallery .pi-swiper-button-next { right:8px; }

/* -------------------------
   Thumbnails: centered horizontal row (default)
   ------------------------- */

/* Thumbs container spans full width and centers contents */
.pi-swiper-thumbs {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 6px;
    display: flex;
    justify-content: center;   /* center the whole thumbnails row */
    align-items: center;
    gap: 12px;
    background: transparent;
}

/* Ensure wrapper is a single non-wrapping horizontal row */
.pi-swiper-thumbs .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    align-items: center;
    justify-content: left;
    box-sizing: border-box;
	padding-bottom:0;
}
.pi-layout-bottom .pi-swiper-thumbs .swiper-wrapper::-webkit-scrollbar {
	height:5px;
	margin-top:20px;
}
.pi-layout-bottom .pi-swiper-thumbs .swiper-wrapper::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
  	border-radius: 10px;
}

.pi-layout-bottom .pi-swiper-thumbs .swiper-wrapper::-webkit-scrollbar-thumb {
  background: #e2395d;
  border-radius: 10px;
}

/* Each thumb slide becomes auto-width and sits inline */
.pi-swiper-thumbs .swiper-slide {
    width: auto !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Square thumbnail visual */
.pi-swiper-thumbs .swiper-slide img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
    border: 0;
    border-radius: 12px;
    padding: 4px;
    background: #f8f2ec;
    box-shadow: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* hover state */
.pi-swiper-thumbs .swiper-slide img:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* active thumbnail (highlight) */
.pi-swiper-thumbs .swiper-slide-thumb-active img,
.pi-swiper-thumbs .swiper-slide.pi-thumb-active img {
    border-color: #111;
    box-shadow: none;
    transform: none;
    opacity: 1;
}

/* subtle scrollbar styling */
.pi-swiper-thumbs::-webkit-scrollbar { height:6px; }
.pi-swiper-thumbs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius:3px; }

/* Vertical (left column) thumbs support when JS adds .vertical */
.pi-swiper-thumbs.vertical {
    width: 90px;
    flex: 0 0 90px;
    overflow-y: auto;
    padding: 0;
    justify-content:flex-start;
}
.pi-swiper-thumbs.vertical .swiper-wrapper { flex-direction: column !important; gap:8px; }
.pi-swiper-thumbs.vertical .swiper-slide img { width:100%; height:auto; object-fit:cover; }

/* Bottom thumbs layout fallback */
.pi-layout-bottom .pi-swiper-thumbs { width:100%; order:2;    margin-top: 0;
    padding-top: 0; }
.pi-layout-bottom .pi-swiper-thumbs .swiper-wrapper { flex-direction:row; gap:15px; overflow:auto; }

/* Ensure good rendering */
.pi-gallery-main-box, .pi-swiper-main, .pi-swiper-thumbs { -webkit-font-smoothing:antialiased; }
.pi-product-gallery, .pi-swiper-main, .pi-swiper-thumbs, .pi-gallery-main-box { position:relative; }

.pi-swiper-button-next:after, .swiper-rtl .pi-swiper-button-next:after,.pi-swiper-button-prev:after, .pi-swiper-button-prev:after {
    color: #666666;
}

/* responsive adjustments */
@media(max-width:900px){
    .pi-product-gallery { flex-direction:column; gap:12px; }
    .pi-swiper-thumbs { width:100%; flex:0 0 auto; order:2; display:block; overflow:auto; padding-left: 10px; padding-right: 10px; padding-bottom: 0;}
    .pi-swiper-thumbs .swiper-wrapper { display:flex; flex-direction:row; gap:8px; }
    .pi-image-inner { min-height:300px; }
	.pi-tabs .pi-tab-panel { padding: 0; }
	.pi-faq-item button span,.pi-faq-answer p { font-size: 15px; }
}
@media(max-width:575px){
	.pi-tabs .pi-tabs-nav {
		overflow-x: auto;
        white-space: nowrap;
        gap: 15px;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
	}
	.pi-tabs .pi-tabs-nav::-webkit-scrollbar {
        display: none;
    }
	.pi-tabs .pi-tabs-nav .pi-tab-nav-item {
    flex: 0 0 auto;
		        padding-bottom: 6px;

}
}
/* Small screens: tighten padding so image doesn't overflow */
@media(max-width:480px){
    .pi-image-inner { padding:8px; min-height:220px; }
    .pi-swiper-thumbs .swiper-slide img { width:56px; height:56px; }
}

/* Additional niceties */
.pi-gallery-main-box img, .pi-swiper-thumbs img { -webkit-user-drag: none; user-select: none; }

/* Ensure the main swiper contents are contained inside the parent, preventing overlap */
.pi-swiper-main .swiper-slide img { display:block; max-width:100%; height:auto;    background: #f8f2ec; }

/* final safety: ensure swiper-wrapper doesn't wrap and cause slide overflow */
.pi-swiper-main .swiper-wrapper { flex-wrap:nowrap !important; }