/* =====================================================================
   RESPONSIVE.CSS  -  Anabolics Online
   - HTML / JS / class names bilkul same hain, sirf ye file replace karni hai
   - Desktop (>=1400px) ka design untouched hai
   - Breakpoints: 1399 / 1199 / 991 / 767 / 575 / 480 / 400 / 359
   - NOTE: responsive.css, nav.css se pehle load hoti hai, isliye nav / owl /
     modal ke overrides me selector specificity thodi badhayi gayi hai.
   ===================================================================== */

/* ---------- Large screens (original rule, as it was) ---------- */
@media (min-width: 1440px) {
	.container{
		width: 1440px;
		margin: 0px auto;
		box-sizing: border-box;
	}
}

/* ---------- Global safety ---------- */
:root{ --gutter: 80px; }              /* left/right spacing, breakpoints me chhota hota hai */
body{ overflow-x: hidden; }
.nav-toggle,
.nav-drawer-head,
.nav-overlay{ display: none; }   /* sirf <=991px par dikhte hain */
img{ max-width: 100%; }

.container{ padding-left: var(--gutter); padding-right: var(--gutter); }
.header-top{ padding-left: var(--gutter); padding-right: var(--gutter); }

.home-sec-two-product-area .product-box img{
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.form-control{ padding-right: 70px; }   /* send button ke neeche text na chhupe */


/* =====================================================================
   <= 1399px  : hero banner ko flexible banao (text image se bahar na nikle)
   ===================================================================== */
@media (max-width: 1399px){
	.banner-item img{ min-height: 420px; object-fit: cover; }
	.banner-content-area{ top: 0; display: flex; align-items: center; }
	.banner-content-area h1{
		font-size: clamp(38px, 4.4vw, 62px);
		margin-bottom: 24px;
	}
	.banner-content-area p{
		width: 100%;
		max-width: 420px;
		font-size: clamp(16px, 1.5vw, 20px);
		margin-bottom: 30px;
	}
}


/* =====================================================================
   <= 1199px  : small desktop / landscape tablet
   ===================================================================== */
@media (max-width: 1199px){
	:root{ --gutter: 40px; }

	/* header */
	.main-logo{ width: 170px; flex-shrink: 0; }
	.search-area{ width: auto; flex: 1 1 280px; max-width: 450px; margin: 0 24px; }

	/* mega menu */
	.megha-menu .mega-inner{
		grid-template-columns: 1fr 1fr 1fr 160px;
		column-gap: 24px;
	}

	/* headings */
	.home-sec-two-title-area .content h2,
	.home-section-five h2,
	.home-section-eight h2,
	.home-faq-right h2{ font-size: 36px; }

	.home-sec-two-product-area{ gap: 30px; }

	/* sale banners */
	.home-sale-banner-one{ height: 460px; }
	.home-sale-content h2{ font-size: 30px; }

	/* footer */
	.footer-top{ gap: 24px; }
	.foot-one{ width: 300px; }
	.foot-three{ width: 260px; }
}


/* =====================================================================
   <= 991px  : tablet
   ===================================================================== */
@media (max-width: 991px){
	:root{ --gutter: 32px; }

	/* ---------- header ---------- */
	.header-top{ flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; row-gap: 12px; }
	.main-logo{ order: 1; width: 150px; }
	.head-top-right{ order: 2; }
	.search-area{ order: 3; flex: 0 0 100%; max-width: 100%; margin: 0; }

	/* ---------- MOBILE MENU (hamburger + left drawer) ---------- */
	.nav-toggle{
		display: inline-flex; align-items: center; justify-content: center;
		width: 42px; height: 42px; margin-left: -8px;
		border: 0; background: none; cursor: pointer; color: #000;
	}
	.nav-toggle .material-symbols-outlined{ font-size: 28px; }
	.main-logo{ margin-right: auto; }

	.navbar{
		position: fixed; top: 0; left: 0; bottom: 0;
		width: min(86vw, 340px); height: 100%;
		padding: 0; border: 0; background: #fff;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		z-index: 10001;
		transform: translateX(-100%); visibility: hidden;
		transition: transform .3s ease, visibility .3s;
		box-shadow: 0 0 40px rgba(0,0,0,.25);
	}
	.navbar.open{ transform: none; visibility: visible; }

	.nav-drawer-head{
		display: flex; justify-content: space-between; align-items: center;
		position: sticky; top: 0; z-index: 2;
		padding: 14px 20px; background: #fff; border-bottom: 1px solid #eee;
		font-size: 18px; font-weight: 700;
	}
	.nav-close{ display: flex; border: 0; background: none; cursor: pointer; color: #000; }
	.nav-close .material-symbols-outlined{ font-size: 26px; }

	.nav-overlay{
		display: block; position: fixed; inset: 0; z-index: 10000;
		background: rgba(0,0,0,.5);
		opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
	}
	.nav-overlay.open{ opacity: 1; visibility: visible; }
	body.nav-locked{ overflow: hidden; }

	.navbar ul{
		position: static; flex-direction: column; justify-content: flex-start;
		gap: 0; padding: 0 20px 24px; overflow: visible; white-space: normal;
	}
	.navbar ul li{ width: 100%; border-bottom: 1px solid #eee; }
	.navbar ul li a{ justify-content: space-between; padding: 16px 0; font-size: 16px; font-weight: 500; }

	/* mega menu => accordion (JS .open class lagata hai) */
	.navbar .megha-menu,
	.navbar .dropdown-btn:hover + .megha-menu,
	.navbar .megha-menu:hover{
		position: static; display: none;
		width: 100%; max-height: none; overflow: visible;
		transform: none; opacity: 1; visibility: visible; pointer-events: auto;
		padding: 4px 0 12px 12px; border-radius: 0; box-shadow: none; background: #faf5f3;
	}
	.navbar .megha-menu.open{ 
		display: block; 
		transform: translate(0%, 0);
	}
	.megha-menu::before{ display: none; }
	.megha-menu .mega-inner{ grid-template-columns: 1fr; column-gap: 0; }
	.megha-menu .mega-banner{ display: none; }
	.mega-group{ padding: 14px 0; }
	.mega-footer{ margin-top: 10px; padding-bottom: 6px; }

	/* ---------- hero ---------- */
	.banner-item img{ min-height: 360px; }

	/* ---------- section spacing ---------- */
	.home-section-one{ padding: 28px 0; }
	.home-section-two,
	.home-section-four,
	.home-section-five,
	.home-section-six,
	.home-section-seven,
	.home-section-eight,
	.home-section-nine,
	.home-section-ten{ padding-top: 60px; padding-bottom: 60px; }
	.home-section-three{ padding-top: 60px; padding-bottom: 40px; }

	.home-sec-two-title-area{ margin-bottom: 28px; gap: 16px; }
	.home-sec-two-title-area .content h2,
	.home-section-five h2,
	.home-section-eight h2,
	.home-faq-right h2{ font-size: 32px; }
	.home-section-five h2,
	.home-section-eight h2,
	.home-faq-right h2{ margin-bottom: 28px; }

	/* ---------- features strip ---------- */
	.home-sec-one{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

	/* ---------- categories (5 items, last row centered) ---------- */
	.home-sec-two-product-area{
		display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 20px;
	}
	.home-sec-two-product-area .product-box{ width: calc((100% - 40px) / 3); }

	/* ---------- best sellers / new arrivals ---------- */
	.home-best-seller-area{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.home-best-seller-box{ display: flex; flex-direction: column; margin-bottom: 0; }
	.home-best-seller-box img{ flex-shrink: 0; }
	.home-best-seller-box .content{ flex: 1; display: flex; flex-direction: column; }
	.home-best-seller-box .content .price{ margin-top: auto; }   /* sab cards me button same line me */

	/* ---------- shop by goals ---------- */
	.shop-by-goal-area{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

	/* ---------- why choose us (2 columns, borders redraw) ---------- */
	.home-sec-fiv-head-area{ grid-template-columns: repeat(2, 1fr); }
	.home-why-choose-box{ border: 0; padding: 30px 24px; }
	.home-why-choose-box-one,
	.home-why-choose-box-three,
	.home-why-choose-box-five{ border-right: 1px solid #bdbdbd; }
	.home-why-choose-box-one,
	.home-why-choose-box-two,
	.home-why-choose-box-three,
	.home-why-choose-box-four{ border-bottom: 1px solid #bdbdbd; }

	/* ---------- brands ---------- */
	.shop-by-brand-area{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.shop-by-brand-box{ margin-bottom: 0; }
	.shop-by-brand-content{ padding: 16px 12px; }
	.shop-by-brand-content h3{ font-size: 17px; margin-bottom: 10px; }
	.shop-by-brand-content a{ font-size: 13px; gap: 4px; }

	/* ---------- sale banners: 1 full + 2 side-by-side ---------- */
	.home-sec-seven-area{ grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.home-sale-banner-one{ grid-row: auto; grid-column: 1 / -1; height: 400px; }

	/* ---------- testimonials: arrows andar laao ---------- */
	.home-section-eight .owl-carousel .owl-prev{ left: -22px; }
	.home-section-eight .owl-carousel .owl-next{ right: -22px; }

	/* ---------- blogs ---------- */
	.home-blog-area{ gap: 16px; }
	.blog-content h3{ font-size: 18px; }
	.blog-content p{ font-size: 14px; margin-bottom: 18px; }

	/* ---------- FAQ: single column ---------- */
	.home-faq-area{ grid-template-columns: 1fr; gap: 30px; }
	.home-faq-left img{ max-width: 420px; margin: 0 auto; }

	/* ---------- footer ---------- */
	.footer-top{ flex-wrap: wrap; gap: 32px; }
	.foot-one{ width: 100%; }
	.foot-one p{ max-width: 560px; }
	.foot-two{ flex: 1 1 180px; }
	.foot-three{ width: auto; flex: 1 1 260px; }
}


/* =====================================================================
   <= 767px  : large phones / portrait tablets
   ===================================================================== */
@media (max-width: 767px){
	:root{ --gutter: 24px; }

	.mega-group ul{
		gap: 4px;
	}
	.mega-group ul li a{
		padding: 8px 0px;
	}

	.main-logo{ width: 130px; }

.desktop-banner{
	display: none !important;
}
.mobile-banner{
	display: block !important;
}

.head-top-right li .lang-filter{
	display: none !important;
}
.navbar ul li .lang-filter{
	display: flex;
	justify-content: flex-start;
	gap: 8px;
}
.main-logo{
	margin-right: 0px;
	width: 166px;
}
.head-top-right{
	gap: 15px;
}


	/* hero */
	.banner-item img{ min-height: 400px; object-position: 70% center; }
	.banner-content-area{ background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.2)); }
	.banner-content-area h1{ font-size: 40px; margin-bottom: 18px; }
	.banner-content-area p{ font-size: 16px; letter-spacing: .3px; margin-bottom: 26px; }
	.btn-shop-product{ width: 160px; height: 48px; }

	/* section spacing */
	.home-section-two,
	.home-section-four,
	.home-section-five,
	.home-section-six,
	.home-section-seven,
	.home-section-eight,
	.home-section-nine,
	.home-section-ten{ padding-top: 50px; padding-bottom: 50px; }
	.home-section-three{ padding-top: 50px; padding-bottom: 30px; }

	.home-sec-two-title-area .content h2,
	.home-section-five h2,
	.home-section-eight h2,
	.home-faq-right h2{ font-size: 30px; }

	/* blogs: 1 column */
	.home-blog-area{ grid-template-columns: 1fr; gap: 20px; }

	/* brands: 2 columns */
	.shop-by-brand-area{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.shop-by-brand-content h3{ font-size: 18px; }

	/* testimonials */
	.home-section-eight .owl-carousel .owl-nav{ display: none; }   /* swipe + dots kaafi hain */
	.home-section-eight .testimonial-card{ padding: 24px; }
	.home-section-eight .testimonial-text{ min-height: auto; line-height: 25px; }
	.home-section-eight .owl-carousel .owl-item .client-info img{ width: 52px; height: 52px; }

	/* sale banners */
	.home-sale-banner-one{ height: 360px; }
	.home-sale-content{ left: 24px; top: 32px; max-width: 80%; }
	.home-sale-content h2{ font-size: 26px; }

	/* FAQ */
	.faq-header{ padding: 14px 18px; gap: 12px; }
	.faq-header h3{ font-size: 16px; }
	.faq-content{ padding: 0 18px; }
	.faq-item.active .faq-content{ padding: 0 18px 20px; }
	.faq-item{ border-radius: 14px; margin-bottom: 14px; }

	/* site-preferences modal */
	.sp-overlay .sp-modal{ max-height: calc(100vh - 32px); overflow-y: auto; }
	.sp-overlay .sp-field select{ font-size: 16px; }   /* iOS zoom roke */
}


/* =====================================================================
   <= 575px  : phones
   ===================================================================== */
@media (max-width: 575px){



	/* inputs: 16px => iOS auto-zoom nahi hoga */
	.search-area .search-input,
	.form-control{ font-size: 16px; }
	.search-area .search-input{ padding: 13px 15px; }

	/* hero */
	.banner-item img{ min-height: 420px; }
	.banner-content-area h1{ font-size: 34px; }
	.banner-content-area p{ 
		font-size: 14px; line-height: 1.55; 
		max-width: 256px;
	}
	.btn-shop-product .material-symbols-outlined{
		font-size: 18px;
	}

	/* titles + view-all button */
	.home-sec-two-title-area .content h2,
	.home-section-five h2,
	.home-section-eight h2,
	.home-faq-right h2{ font-size: 26px; }
	.home-sec-two-title-area .content span,
	.home-section-five span,
	.home-section-eight span,
	.home-faq-right span{ font-size: 14px; padding-bottom: 10px; }
	.home-sec-two-title-area{ margin-bottom: 24px; }
	.home-sec-two-title-area .content{ min-width: 0; }
	.btn-view{ width: auto; flex-shrink: 0; height: 40px; padding: 0 16px; font-size: 14px; gap: 6px; }

	/* categories: 2 per row */
	.home-sec-two-product-area{ gap: 24px 16px; }
	.home-sec-two-product-area .product-box{ width: calc((100% - 16px) / 2); }
	.home-sec-two-product-area .product-box img{ width: 130px; }
	.home-sec-two-product-area .product-box h3{ font-size: 16px; margin-bottom: 6px; }
	.home-sec-two-product-area .product-box span{ font-size: 13px; }

	/* best sellers: 2 columns, compact card */
	.home-best-seller-area{ gap: 12px; }
	.home-best-seller-box{ border-radius: 12px; }
	.home-best-seller-box img{ border-top-left-radius: 12px; border-top-right-radius: 12px; }
	.home-best-seller-box .content{ padding: 14px 12px; }
	.home-best-seller-box .content h3{ font-size: 15px; line-height: 1.3; margin-bottom: 10px; }
	.home-best-seller-box .content .rating{ gap: 8px; margin-bottom: 10px; align-items: center; }
	.home-best-seller-box .content .rating-star{ gap: 1px; }
	.home-best-seller-box .content .rating-star .material-icons-outlined{ font-size: 14px; }
	.home-best-seller-box .content .rating-count{ font-size: 13px; }
	.home-best-seller-box .content p{ font-size: 12px; margin-bottom: 10px; }
	.home-best-seller-box .content .price{ font-size: 17px; margin-bottom: 14px; flex-wrap: wrap; gap: 2px 8px; }
	.home-best-seller-box .content .price span{ font-size: 13px; }
	.btn-add-to-cart{ height: 42px; font-size: 14px; }

	/* shop by goals: compact overlay */
	.shop-by-goal-area{ gap: 12px; }
	.shop-by-goal-content{ left: 12px; right: 12px; bottom: 12px; }
	.shop-by-goal-content h3{ font-size: 16px; margin-bottom: 8px; }
	.btn-learn-more{ display: inline-flex; width: auto; height: 30px; padding: 0 10px; font-size: 12px; }

	/* why choose us: 1 column */
	.home-sec-fiv-head-area{ grid-template-columns: 1fr; }
	.home-why-choose-box-one,
	.home-why-choose-box-two,
	.home-why-choose-box-three,
	.home-why-choose-box-four,
	.home-why-choose-box-five,
	.home-why-choose-box-six{ border: 0; border-bottom: 1px solid #bdbdbd; }
	.home-why-choose-box-six{ border-bottom: 0; }
	.home-why-choose-box{ padding: 26px 8px; }
	.home-why-choose-box h3{ font-size: 18px; }

	/* brands compact */
	.shop-by-brand-area{ gap: 12px; }
	.shop-by-brand-box{ border-radius: 12px; }
	.shop-by-brand-box img{ border-top-left-radius: 12px; border-top-right-radius: 12px; }
	.shop-by-brand-content{ padding: 12px 10px; }
	.shop-by-brand-content h3{ font-size: 15px; margin-bottom: 8px; }
	.shop-by-brand-content a{ font-size: 12px; align-items: center; }

	/* sale banners: stack */
	.home-sec-seven-area{ grid-template-columns: 1fr; gap: 14px; }
	.home-sale-banner-one{ height: 340px; }
	.home-sale-banner-two,
	.home-sale-banner-three{ height: 220px; }
	.home-sale-content{ left: 20px; top: 28px; max-width: 85%; }
	.home-sale-content h2{ font-size: 24px; margin-bottom: 12px; }
	.home-sale-content .badge{ margin-bottom: 16px; }
	.home-sale-content .price{ margin-bottom: 18px; }
	.btn-start-now{ padding: 10px 20px; font-size: 14px; }

	/* FAQ */
	.home-faq-left img{ max-width: 260px; }

	/* footer */
	.footer{ padding-top: 32px; }
	.footer-top{ gap: 28px 16px; padding-bottom: 28px; }
	.foot-two{ flex: 1 1 calc(50% - 8px); min-width: 0; }
	.foot-three{ width: 100%; flex: 1 1 100%; }
	.foot-two h3,
	.foot-three h3{ font-size: 16px; margin-bottom: 16px; }
	.foot-two ul li{ padding-bottom: 12px; }
	.footer-bottom{ flex-direction: column; align-items: center; gap: 14px; text-align: center; }
	.footer-bottom ul{ flex-wrap: wrap; justify-content: center; }
}


/* =====================================================================
   <= 480px  : small phones
   ===================================================================== */
@media (max-width: 480px){
	:root{ --gutter: 16px; }

	.home-sec-one{ grid-template-columns: 1fr; gap: 18px; }
	.home-sec-one-box .content h3{ margin-bottom: 4px; font-size: 17px; }

	.sp-overlay .sp-modal{ padding: 18px; }
	.sp-overlay .sp-head h3{ font-size: 20px; }
}


/* =====================================================================
   <= 400px  : header ko ek line me rakhne ke liye
   ===================================================================== */
@media (max-width: 400px){
	.main-logo{ width: 105px; }
	.head-top-right{ gap: 12px; }
	.head-top-right li .lang-filter{ font-size: 12px; gap: 4px; }
	.head-top-right li .lang-filter img{ width: 18px; }
	.head-top-right li a .material-symbols-outlined{ font-size: 22px; }

	.banner-content-area h1{ font-size: 30px; }
	.home-section-eight .testimonial-card{ padding: 20px 18px; }
}

/* =====================================================================
   <= 375px  : very small devices
   ===================================================================== */
@media (max-width: 375px){
	.banner-content-area p{
		max-width: 218px;
	}
	.topbar p{
		font-size: 12px;
	}
}



/* =====================================================================
   <= 359px  : very small devices
   ===================================================================== */
@media (max-width: 359px){
	.home-best-seller-area{ grid-template-columns: 1fr; }
	.foot-two{ flex: 1 1 100%; }
}


/* =====================================================================
   <= 359px  : very small devices
   ===================================================================== */
@media (max-width: 325px){
	.banner-content-area p{
		max-width: 188px;
	}
	.btn-shop-product{
		font-size: 14px;
		width: 160px;
      height: 40px;
	}
	.btn-shop-product .material-symbols-outlined{
		font-size: 16px;
	}
}




/* #####################################################################
   #####################################################################
   PRODUCT PAGE  -  responsive (neeche ka sab kuch product page ke liye)
   Upar ka home page ka code bilkul untouched hai.
   Breakpoints: 1399 / 1199 / 991 / 767 / 575 / 400
   ##################################################################### */


/* =====================================================================
   PRODUCT  <= 1399px  : CTA banner (product-section-four)
   ===================================================================== */
@media (max-width: 1399px){
	.product-section-four img{ min-height: 360px; object-fit: cover; }
	.product-bg-content{ top: 0; display: flex; align-items: center; }
	.product-bg-content .container{ width: 100%; }
	.product-section-four h2{
		width: 100%; max-width: 400px;
		font-size: clamp(30px, 3.4vw, 45px); line-height: 1.2;
	}
	.product-section-four p{
		width: 100%; max-width: 466px;
		font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; margin-bottom: 26px;
	}
}


/* =====================================================================
   PRODUCT  <= 1199px  : small desktop
   ===================================================================== */
@media (max-width: 1199px){
	.product-content h1{ font-size: 36px; }
	.product-section-two,
	.product-section-three{ padding-top: 70px; padding-bottom: 70px; }

	/* accordion ka max-height 500px lamba content kaat deta tha */
	.product-section-two .faq-container .faq-item.active .faq-content{ max-height: 2000px; }
}


/* =====================================================================
   PRODUCT  <= 991px  : tablet  (gallery upar, details neeche)
   ===================================================================== */
@media (max-width: 991px){

	.breadcrumbs{ padding-top: 22px; padding-bottom: 16px; }

	/* top area: single column */
	.product-area{ flex-direction: column; gap: 28px; }
	.product-gallery{ width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
	.stage{ height: auto; }
	.stage img{ height: auto; aspect-ratio: 1 / 1; }
	.product-content{ width: 100%; }
	.product-content h1{ font-size: 34px; }
	.product-specification{ margin-top: 24px; }
	.buy{ padding: 18px; }

	/* description / accordion section */
	.product-section-two,
	.product-section-three{ padding-top: 60px; padding-bottom: 60px; }
	.product-section-two .faq-container .faq-header h3{ font-size: 22px; }
	.product-description{ padding-bottom: 24px; }
	.product-description h2{ font-size: 26px; margin-bottom: 14px; }

	/* tabs (agar .product-card-area use ho) => horizontal scroll pills */
	.product-card-area{ flex-direction: column; gap: 16px; }
	.product-card-left{ flex: none; width: 100%; }
	.product-card-left ul{
		flex-direction: row; gap: 10px; overflow-x: auto; white-space: nowrap;
		padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
	}
	.product-card-left ul::-webkit-scrollbar{ display: none; }
	.product-card-left ul li{ flex: 0 0 auto; }
	.product-card-left ul li a{ width: auto; padding: 12px 22px; font-size: 15px; border-radius: 50px; }
	.product-card-right{ padding: 20px; }

	/* related products: 3 compact cards */
	.product-section-three .home-best-seller-area{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.product-section-three .home-best-seller-box .content{ padding: 18px 14px; }
	.product-section-three .home-best-seller-box .content h3{ font-size: 17px; line-height: 1.3; }
	.product-section-three .home-best-seller-box .content p{ font-size: 13px; }
	.product-section-three .home-best-seller-box .content .price{ font-size: 19px; }
	.product-section-three .home-best-seller-box .content .price span{ font-size: 14px; }
	.product-section-three .home-best-seller-box .btn-add-to-cart{ height: 44px; font-size: 15px; }
}


/* =====================================================================
   PRODUCT  <= 767px  : large phones
   ===================================================================== */
@media (max-width: 767px){

	/* breadcrumbs: wrap ho jaye, bahar na nikle */
	.breadcrumbs{ flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 16px; padding-bottom: 12px; }
	.breadcrumbs li,
	.breadcrumbs span,
	.breadcrumbs li a{ font-size: 13px; }

	.product-content h1{ font-size: 30px; margin-bottom: 12px; }
	.product-content .sub{ font-size: 15px; line-height: 25px; }
	.qty output{ min-width: 24px; text-align: center; }

	.product-section-two,
	.product-section-three{ padding-top: 50px; padding-bottom: 50px; }

	/* accordion */
	.product-section-two .faq-container .faq-header h3{ font-size: 20px; }
	.product-section-two .faq-container .faq-icon{ font-size: 22px; }
	.product-section-two .faq-container .faq-content li{ font-size: 15px; line-height: 1.7; }

	/* related products => swipe slider */
	.product-section-three .home-best-seller-area{
		display: flex; gap: 14px;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 0 calc(-1 * var(--gutter));
		padding: 0 var(--gutter) 12px;
		scroll-padding-left: var(--gutter);
	}
	.product-section-three .home-best-seller-area::-webkit-scrollbar{ display: none; }
	.product-section-three .home-best-seller-box{ flex: 0 0 min(300px, 78%); scroll-snap-align: start; }

	/* CTA banner */
	.product-section-four img{ min-height: 340px; }
	.product-section-four h2{ font-size: 28px; }
	.product-section-four p{ font-size: 15px; }
}


/* =====================================================================
   PRODUCT  <= 575px  : phones
   ===================================================================== */
@media (max-width: 575px){

	.product-area{ gap: 22px; }
	.product-gallery{ max-width: 100%; }
	.product-content h1{ font-size: 26px; }

	/* buy box => 2 column grid
	   row1: salt name | row2: strength + qty | row3: price + add to cart */
	.buy{
		display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
		padding: 14px; margin-top: 20px; margin-bottom: 18px;
	}
	.buy > span{ grid-column: 1 / -1; }
	.buy .value{ font-size: 14px; }
	.buy .qty{ justify-self: end; }
	.buy .add{ width: 100%; height: 44px; font-size: 14px; }

	/* specification table: 2 columns hi rahe, text wrap ho */
	.product-specification{ margin-top: 20px; }
	.product-specification li{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); font-size: 13px; }
	.product-specification li .product-space-left,
	.product-specification li .product-space-right{ padding: 8px 10px; overflow-wrap: break-word; }

	/* trust boxes (agar use ho) */
	.trust-area{ grid-template-columns: 1fr; gap: 18px; }

	.product-section-two,
	.product-section-three{ padding-top: 40px; padding-bottom: 40px; }
	.product-description h2{ font-size: 22px; }
	.product-description p{ font-size: 15px; line-height: 25px; }
	.product-card-left ul li a{ padding: 10px 18px; font-size: 14px; }
	.product-card-right{ padding: 16px; }

	.product-section-two .faq-container .faq-header h3{ font-size: 18px; }
	.product-section-two .faq-container .faq-icon{ font-size: 20px; }
	.product-section-two .faq-container .faq-area{ margin-bottom: 20px; }
	.product-section-two .faq-container .faq-area h4{ font-size: 16px; }

	/* CTA banner */
	.product-section-four img{ min-height: 320px; }
	.product-section-four h2{ font-size: 24px; margin-bottom: 14px; }
	.product-section-four p{ font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
	.product-section-four a{ width: 150px; height: 46px; font-size: 15px; }
}


/* =====================================================================
   PRODUCT  <= 400px  : small phones
   ===================================================================== */
@media (max-width: 400px){
	.product-content h1{ font-size: 24px; }
	.product-specification li b{ white-space: normal; }
	.product-specification li{ font-size: 12.5px; }
}