/* =========================================================
   SATYASHA PRODUCT TABS
   ========================================================= */

.satyasha-product-tabs{
    position:relative;
    width:100%;
    max-width:100%;
    margin:45px auto 0;
    padding:0;
    box-sizing:border-box;

    --satyasha-dark:#171717;
    --satyasha-teal:#5B8F96;
    --satyasha-blue:#2478C9;
    --satyasha-border:#E7E7E7;
    --satyasha-text:#4B4B4B;

    overflow:visible !important;
    clear:both;
}

/* =========================================================
   IMPORTANT ASTRA / WOOCOMMERCE OVERRIDE
   ========================================================= */

/*
 * These are intentionally limited to the product page.
 *
 * They prevent common Astra / WooCommerce wrappers
 * from breaking position: sticky.
 */

/* ===== Astra Sticky Fix ===== */

body.single-product .site,
body.single-product .site-content,
body.single-product .content-area,
body.single-product .site-main,
body.single-product .ast-container,
body.single-product .woocommerce,
body.single-product div.product{
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
}

/*
 * Do NOT apply overflow rules to Elementor inner
 * containers globally.
 */


/* =========================================================
   STICKY TAB HEADER
   ========================================================= */

.satyasha-product-tabs-nav-wrapper{
    position: sticky;
    top: 0;
    z-index: 100;

    width: 100%;
    background: #fff;

    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);

    overflow: hidden;
}

.satyasha-product-tabs-nav-wrapper::-webkit-scrollbar{
    display:none;
}

/* =========================================================
   TAB NAVIGATION
   ========================================================= */
.satyasha-product-tabs{
    position: relative;
    width: 100%;
    margin: 45px auto 0;
    clear: both;
    overflow: visible !important;
}

.satyasha-product-tabs-nav{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

}

.satyasha-product-tabs-nav::-webkit-scrollbar{
    display: none;
}

/* =========================================================
   TAB BUTTON
   ========================================================= */

.satyasha-product-tab-link{
    flex: 0 0 auto;

    min-height: 66px;
    padding: 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    background: #fff;
    border: 0;
    border-right: 1px solid #ececec;

    white-space: nowrap;

    color: var(--satyasha-text);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;

}

.satyasha-product-tab-link:last-child{
    border-right:none;
}
/* =========================================================
   TAB SEPARATOR
   ========================================================= */

.satyasha-product-tab-link:not(:last-child)::before {

	content: "";

	position: absolute;

	right: 0;

	top: 15px;
	bottom: 15px;

	width: 1px;

	background: #EEEEEE;

}


/* =========================================================
   ACTIVE UNDERLINE
   ========================================================= */

.satyasha-product-tab-link::after {

	content: "";

	position: absolute;

	left: 22px;
	right: 22px;

	bottom: 0;

	height: 3px;

	background: var(--satyasha-blue);

	transform: scaleX(0);

	transform-origin: center;

	transition: transform 0.25s ease;

}


/* =========================================================
   HOVER
   ========================================================= */

.satyasha-product-tab-link:hover {

	color: var(--satyasha-teal);

	background: #FAFCFC;

}


/* =========================================================
   ACTIVE
   ========================================================= */

.satyasha-product-tab-link.active {

	color: var(--satyasha-blue);

	font-weight: 600;

	background: #ffffff;

}


.satyasha-product-tab-link.active::after {

	transform: scaleX(1);

}


/* =========================================================
   CONTENT WRAPPER
   ========================================================= */

.satyasha-product-tabs-content {

	width: 100%;

	margin: 0;
	padding: 0;

	overflow: visible;

	box-sizing: border-box;

}


/* =========================================================
   TAB CONTENT SECTION
   ========================================================= */

.satyasha-product-tab-content {

	width: 100%;

	margin: 0;

	padding: 60px 0;

	border-bottom: 1px solid var(--satyasha-border);

	box-sizing: border-box;

	/*
	 * Space for sticky header when clicking tabs.
	 */
	scroll-margin-top: 80px;

}


/* =========================================================
   LAST TAB
   ========================================================= */

.satyasha-product-tab-content:last-child {

	margin-bottom: 0;

}


/* =========================================================
   TAB HEADING
   ========================================================= */

.satyasha-product-tab-heading {

	margin: 0 0 22px;

	color: var(--satyasha-teal);

	font-family: inherit;

	font-size: 30px;

	font-weight: 600;

	line-height: 1.3;

}


/* =========================================================
   TAB TEXT
   ========================================================= */

.satyasha-product-tab-text {

	color: #555555;

	font-family: inherit;

	font-size: 16px;

	line-height: 1.8;

}


.satyasha-product-tab-text p {

	margin: 0 0 18px;

}


/* =========================================================
   LISTS
   ========================================================= */

.satyasha-product-tab-text ul,
.satyasha-product-tab-text ol {

	margin: 0 0 22px;

	padding-left: 25px;

}


.satyasha-product-tab-text li {

	margin-bottom: 8px;

}


/* =========================================================
   LINKS
   ========================================================= */

.satyasha-product-tab-text a {

	color: var(--satyasha-blue);

	text-decoration: underline;

}


/* =========================================================
   IMAGES
   ========================================================= */

.satyasha-product-tab-text img {

	display: block;

	max-width: 100%;

	height: auto;

	margin: 20px 0;

}


/* =========================================================
   TABLES
   ========================================================= */

.satyasha-product-tab-text table {

	width: 100%;

	margin: 25px 0;

	border-collapse: collapse;

}


.satyasha-product-tab-text th,
.satyasha-product-tab-text td {

	padding: 13px 16px;

	border: 1px solid #DDDDDD;

	text-align: left;

}


.satyasha-product-tab-text th {

	background: #F5F8F8;

	color: var(--satyasha-dark);

	font-weight: 600;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {


	.satyasha-product-tabs {

		margin-top: 30px;

	}


	.satyasha-product-tabs-nav-wrapper {

        position:relative !important;
        top:auto !important;
        z-index:1;
        width:100%;
        background:#fff;
        box-shadow:none;
        border-top:1px solid #ececec;
        border-bottom:1px solid #ececec;
        overflow:hidden;
        
    }

    .satyasha-product-tabs-nav {
        
        display:flex;
        flex-wrap:nowrap;
        width:max-content;
        min-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        scroll-behavior:smooth;

    }

	.satyasha-product-tab-link {

        flex:0 0 auto;
        min-height:54px;
        padding:0 22px;
        font-size:14px;
        white-space:nowrap;

	}
    .satyasha-product-tabs-nav::-webkit-scrollbar{
        display: none;
    }


	.satyasha-product-tab-link:not(:last-child)::before {

		top: 13px;

		bottom: 13px;

	}


	.satyasha-product-tab-link::after {

		left: 14px;

		right: 14px;

		height: 3px;

	}


	.satyasha-product-tab-content {

		padding: 42px 0;

		scroll-margin-top: 70px;

	}


	.satyasha-product-tab-heading {

		font-size: 24px;

		margin-bottom: 16px;

	}


	.satyasha-product-tab-text {

		font-size: 15px;

		line-height: 1.7;

	}


	.satyasha-product-tab-text table {

		display: block;

		overflow-x: auto;

		white-space: nowrap;

	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {


	.satyasha-product-tab-link {

		min-height: 50px;

		padding: 0 17px;

		font-size: 13px;

	}

}
