/*
 * Product Details (Leizi style) — styles ported from the Leizi Digital Astra child theme
 * (newdemo.leizi.xyz product-details.php page). Class names are kept 1:1 so HTML copied
 * from any Leizi-built product page drops in unchanged. Scoped under .mpd.
 *
 * Brand colour: --mpd-primary falls back to the site's --mewoo-violet, then to Leizi blue.
 */
.mpd {
	--mpd-primary: var(--mewoo-violet, #006af6);
	--mpd-primary-dark: var(--mewoo-navy, #001429);
	--mpd-ink: #233645;
	--mpd-muted: #5f6780;
	--mpd-grey: #f8f9fc;
	--mpd-ltblue: #f4f6f9;
	--mpd-border: #dbdbdb;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #fff;
	color: var(--mpd-ink);
	font-size: 16px;
	line-height: 1.6;
	overflow: hidden;
}
.mpd *, .mpd *::before, .mpd *::after { box-sizing: border-box; }
.mpd img { max-width: 100%; height: auto; display: inline-block; }
.mpd h1, .mpd .h1 { font-size: 34px; line-height: 1.2; font-weight: 700; margin: 0 0 15px; color: var(--mpd-ink); letter-spacing: normal; }
.mpd h2 { font-size: 30px; line-height: 1.25; font-weight: 700; margin: 0 0 15px; color: var(--mpd-ink); letter-spacing: normal; }
.mpd h3 { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 25px 0 10px; }
.mpd p { margin: 0 0 15px; }
.mpd a { color: var(--mpd-primary); text-decoration: none; }
.mpd a:hover { color: var(--mpd-primary-dark); }

/* ---- Bootstrap-3 style grid (from Leizi's utility bundle, flex instead of float) ---- */
.mpd .container { width: 92%; max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.mpd .container1420 { max-width: 1420px; }
.mpd .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.mpd .cust-row { margin: 0 -15px; }
.mpd [class*="col-"] { position: relative; min-height: 1px; padding: 0 15px; width: 100%; }
@media (min-width: 992px) {
	.mpd .cust-row { margin: 0 -30px; }
	.mpd .cust-row > [class*="col-"] { padding: 0 30px; }
	.mpd .col-md-4 { width: 33.333333%; }
	.mpd .col-md-5 { width: 41.666667%; }
	.mpd .col-md-6 { width: 50%; }
	.mpd .col-md-7 { width: 58.333333%; }
	.mpd .col-md-8 { width: 66.666667%; }
	.mpd .col-md-12 { width: 100%; }
}
.mpd .text-center { text-align: center; }
.mpd .text-left { text-align: left; }
.mpd .clearfix { clear: both; }
.mpd .paddTop5 { padding-top: 5px; }  .mpd .paddBottom5 { padding-bottom: 5px; }
.mpd .paddTop10 { padding-top: 10px; } .mpd .paddBottom10 { padding-bottom: 10px; }
.mpd .paddTop20 { padding-top: 20px; } .mpd .paddBottom20 { padding-bottom: 20px; }
.mpd .paddTop70 { padding-top: 70px; } .mpd .paddBottom70 { padding-bottom: 70px; }
.mpd .paddTop75 { padding-top: 75px; } .mpd .paddBottom75 { padding-bottom: 75px; }
.mpd .paddTop90 { padding-top: 90px; } .mpd .paddBottom90 { padding-bottom: 90px; }
.mpd .tableScroll { overflow-x: auto; margin-bottom: 20px; }
.mpd table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mpd th, .mpd td { border: 1px solid #e3e6ee; padding: 10px 12px; text-align: left; vertical-align: top; }
.mpd th { background: var(--mpd-grey); font-weight: 600; }

/* ---- Colours ---- */
.mpd .greySection { background: var(--mpd-grey); }
.mpd .ltBlueSection { background: var(--mpd-ltblue); }

/* ---- Buttons (a.commonBtn) ---- */
.mpd a.commonBtn {
	display: inline-block; color: #fff !important; font-size: 16px; font-weight: 600; text-align: center;
	border-radius: 40px; text-decoration: none; background: var(--mpd-primary); border: 1px solid var(--mpd-primary);
	padding: 18px 60px 18px 30px; position: relative; transition: all .3s; line-height: 1.2; cursor: pointer;
}
.mpd a.commonBtn::before {
	position: absolute; content: ''; top: 50%; right: 30px; width: 15px; height: 14px; margin-top: -7px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 7h12M8 2l5 5-5 5'/></svg>") 0 0 no-repeat;
	transition: all .3s;
}
.mpd a.commonBtn:hover { background: var(--mpd-primary-dark); border-color: var(--mpd-primary-dark); }
.mpd a.commonBtn:hover::before { right: 25px; }
.mpd a.minwidth245 { min-width: 245px; }
.mpd .bannerBtn a.commonBtn { min-width: 215px; }

/* ---- 1. Banner (.pc3Banner) ---- */
.mpd .pc3Banner { position: relative; background: var(--mpd-primary-dark); }
.mpd .bannerImg { text-align: center; }
.mpd .bannerImg img { width: 100%; height: clamp(320px, 30vw, 574px); object-fit: cover; display: block; }
.mpd .pc3Banner .container { position: absolute; top: 0; left: 0; right: 0; height: 100%; }
.mpd .pc3Banner .row { height: 100%; }
.mpd .pc3Banner .bannerContent { width: 100%; height: 100%; display: flex; align-items: center; z-index: 2; padding: 0 15px; }
.mpd .pc3Banner .bannerContainer { width: 100%; }
.mpd .pc3BannerHeading { font-size: 50px; font-weight: 700; margin-bottom: 15px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.mpd .pc3BannerDetails { max-width: 550px; display: inline-block; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.mpd .pc3BannerDetails p:last-child { margin-bottom: 0; }
.mpd .bannerBtn { padding-top: 20px; }
.mpd .pc3Banner--noimg { padding: 70px 0; }
.mpd .pc3Banner--noimg .container { position: static; height: auto; }

/* ---- 2. Gallery (.detailSection1) ---- */
.mpd .productSliderWraper { max-width: 640px; margin: 0 auto; }
.mpd ul.detailProductSlider { margin: 0; padding: 0; list-style: none; position: relative; background: #fff; border-radius: 6px; overflow: hidden; }
.mpd ul.detailProductSlider .slide { display: none; text-align: center; margin: 0; }
.mpd ul.detailProductSlider .slide.current { display: block; animation: mpdFade .4s ease; }
.mpd ul.detailProductSlider .slide img { width: 100%; max-height: 520px; object-fit: contain; display: block; cursor: zoom-in; }
@keyframes mpdFade { from { opacity: 0; } to { opacity: 1; } }
.mpd .productSliderPagerWrap { position: relative; margin-top: 35px; padding: 0 20px; }
.mpd ul.productSliderPager { margin: 0 -10px; padding: 0; list-style: none; display: flex; overflow: hidden; scroll-behavior: smooth; }
.mpd ul.productSliderPager .slide { flex: 0 0 25%; margin: 0; padding: 0 10px; max-height: 99px; display: flex; align-items: center; overflow: hidden; }
.mpd ul.productSliderPager .slide a { display: block; width: 100%; border: 2px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; }
.mpd ul.productSliderPager .slide.current a { border-color: var(--mpd-primary); }
.mpd ul.productSliderPager .slide img { width: 100%; height: 95px; object-fit: cover; display: block; }
.mpd .slick-arrow {
	position: absolute; top: 50%; width: 13px; height: 26px; margin-top: -13px; padding: 0; border: 0; text-indent: -9999px; overflow: hidden;
	cursor: pointer; z-index: 2; background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 26' fill='none' stroke='%23233645' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2 2 13l9 11'/></svg>");
	background-repeat: no-repeat; background-size: 13px 26px; opacity: .75; transition: opacity .2s;
}
.mpd .slick-arrow:hover { opacity: 1; }
.mpd .slick-prev { left: -8px; }
.mpd .slick-next { right: -8px; transform: scaleX(-1); }

/* ---- Diamond bullet list (.diamondList) ---- */
.mpd .diamondList ul { padding: 0; margin: 0 0 15px; list-style: none; position: relative; }
.mpd .diamondList ul li { padding-left: 20px; margin-bottom: 15px; position: relative; }
.mpd .diamondList ul li::before { position: absolute; content: ''; top: 9px; left: 0; width: 8px; height: 8px; background: #aeaeae; transform: rotate(45deg); }
.mpd .diamondList ol { padding-left: 20px; margin: 0 0 15px; }

/* ---- 3. Tabs (.tabsWrapper) + catalog ---- */
.mpd .tabsWrapper { padding: 20px; border: 1px solid var(--mpd-border); border-radius: 3px; background: #fff; overflow: hidden; }
.mpd .tabsWrapper ul.tabs { margin: 0; padding: 0; list-style: none; background: #fff; display: flex; flex-wrap: wrap; }
.mpd .tabsWrapper ul.tabs li {
	display: inline-block; padding: 0 0 15px; color: var(--mpd-muted); font-size: 18px; font-weight: 500; margin-right: 40px;
	border-bottom: 3px solid transparent; transition: all .3s; cursor: pointer; position: relative; user-select: none;
}
.mpd .tabsWrapper ul.tabs li:hover { color: var(--mpd-primary); }
.mpd .tabsWrapper ul.tabs li.current { color: var(--mpd-primary); border-bottom-color: var(--mpd-primary); }
.mpd .tabsWrapper .tab-content { display: none; padding: 30px 0 0; }
.mpd .tabsWrapper .tab-content.current { display: block; }
.mpd .catalogBox { display: inline-block; max-width: 370px; }
.mpd .catalogImg a { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 30, 60, .12); }
.mpd .catalogImg img { width: 100%; display: block; }
.mpd .catalogTitle a { display: inline-block; font-size: 16px; line-height: 20px; color: var(--mpd-primary); font-weight: 500; padding-bottom: 10px; border-bottom: 2px solid var(--mpd-primary); }

/* ---- 4. Repeat sections (.pc3RepeatSection) ---- */
.mpd .pc3RepeatSection .row { align-items: center; }
.mpd .pc3Section3img { text-align: center; }
.mpd .pc3Section3img img { border-radius: 6px; }
.mpd .pc3RepeatSection h2 { margin-bottom: 18px; }
.mpd .pc3RepeatSection a.commonBtn { margin-top: 10px; }
.mpd .videoImg { text-align: center; }
.mpd .videoImg a { display: inline-block; position: relative; overflow: hidden; border-radius: 6px; }
.mpd .videoImg a::before {
	position: absolute; content: ''; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 1;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76'><circle cx='38' cy='38' r='36' fill='rgba(255,255,255,.92)' stroke='%23006af6' stroke-width='2'/><path d='M30 24l22 14-22 14z' fill='%23006af6'/></svg>") 0 0 no-repeat;
	transition: transform .3s;
}
.mpd .videoImg a:hover::before { transform: scale(1.1); }

/* ---- 5. Related products (.img3Slider) ---- */
.mpd .img3SliderWrap { position: relative; padding: 0 30px; }
.mpd ul.img3Slider { margin: 0; padding: 0; list-style: none; display: flex; overflow: hidden; }
.mpd ul.img3Slider .slide { flex: 0 0 33.3333%; padding: 10px 15px; margin: 0; }
.mpd .img3SliderWrap .slick-arrow { width: 23px; height: 26px; background-size: 13px 26px; background-position: center; }
.mpd .img3SliderWrap .slick-prev { left: 0; }
.mpd .img3SliderWrap .slick-next { right: 0; }
.mpd .dp4relatedProduct { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 22px rgba(20, 30, 60, .08); height: 100%; padding-bottom: 15px; }
.mpd .dp4relatedProductImg img { width: 100%; aspect-ratio: 370 / 260; object-fit: cover; display: block; transition: transform .3s; }
.mpd .dp4relatedProduct:hover .dp4relatedProductImg img { transform: scale(1.04); }
.mpd .dp4relatedProductTitle { font-size: 20px; font-weight: 500; color: var(--mpd-ink); padding: 10px 12px 0; }
.mpd .dp4relatedProductTitle a { color: var(--mpd-ink); }
.mpd .dp4relatedProductTitle a:hover { color: var(--mpd-primary); }

/* ---- 6. Article + FAQ accordion + sticky form ---- */
.mpd .productFAQs h2 { margin-bottom: 18px; }
.mpd .accordiaBox { border: 1px solid var(--mpd-border); border-radius: 6px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.mpd .accordiaBox .accordion {
	position: relative; padding: 16px 50px 16px 20px; font-size: 17px; font-weight: 600; cursor: pointer; color: var(--mpd-ink);
	transition: all .3s; user-select: none;
}
.mpd .accordiaBox .accordion::before { position: absolute; content: '+'; top: 50%; right: 18px; transform: translateY(-50%); font-size: 30px; line-height: 1; font-weight: 300; color: var(--mpd-primary); }
.mpd .accordiaBox.active .accordion { color: var(--mpd-primary); }
.mpd .accordiaBox.active .accordion::before { content: '−'; }
.mpd .accordiaBox .panel { display: none; padding: 0 20px 18px; color: var(--mpd-muted); }
.mpd .accordiaBox.active .panel { display: block; }
.mpd .accordiaBox .panel p:last-child { margin-bottom: 0; }
.mpd .articleSection .row { align-items: flex-start; }
.mpd .quickQuote { padding: 30px 25px; width: 100%; background: #fff; border: 1px solid var(--mpd-border); border-radius: 6px; box-shadow: 0 10px 30px rgba(20, 30, 60, .08); }
.mpd .divScroll { position: sticky; top: 20px; }
.mpd .quickQuoteTitle { font-size: 22px; font-weight: 600; color: #060a12; margin-bottom: 10px; }
.mpd .quickQuote .mewoo-lead-form { max-width: none; padding: 0; border: 0; box-shadow: none; border-radius: 0; }
.mpd .quickQuote .mewoo-lead-form__grid { grid-template-columns: 1fr; }
.mpd .quickQuote .mewoo-button, .mpd .quickQuote button[type="submit"] { width: 100%; }

/* ---- Popup (#contactPopUpForm) ---- */
.mewoo-pd-page .popupOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 9998; }
.mewoo-pd-page #contactPopUpForm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 560px; max-height: 90vh; overflow-y: auto; z-index: 9999; }
.mewoo-pd-page #contactPopUpForm .quickQuote { position: relative; padding: 40px 30px; border-radius: 15px; background: #fff; color: #233645; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.mewoo-pd-page #contactPopUpForm .quickQuoteTitle { font-size: 22px; font-weight: 600; color: #060a12; margin: 0 30px 15px 0; }
.mewoo-pd-page #contactPopUpForm .mewoo-lead-form { max-width: none; padding: 0; border: 0; box-shadow: none; }
.mewoo-pd-page #contactPopUpForm .mewoo-lead-form__grid { grid-template-columns: 1fr 1fr; }
.mewoo-pd-page .closePopup {
	display: inline-block; width: 26px; height: 26px; line-height: 24px; text-align: center; color: #fff; border-radius: 25px; position: absolute;
	right: 20px; top: 20px; background: #b7bfcf; border: 1px solid #b7bfcf; cursor: pointer; font-size: 18px; padding: 0;
}
.mewoo-pd-page .closePopup:hover { background: var(--mpd-primary-dark, #001429); border-color: var(--mpd-primary-dark, #001429); }
.mewoo-pd-page [hidden] { display: none !important; }

/* ---- Lightbox (image / YouTube) ---- */
.mpd-lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mpd-lightbox-overlay img { max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.mpd-lightbox-overlay iframe { width: min(92vw, 960px); aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #000; }
.mpd-lightbox-overlay .mpd-lightbox-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.mpd-lightbox-overlay .mpd-lightbox-close:hover { background: rgba(255, 255, 255, .35); }

/* ---- Responsive (breakpoints copied from Leizi) ---- */
@media (max-width: 1199px) {
	.mpd .pc3Banner .bannerBtn { padding-top: 0; }
	.mpd ul.productSliderPager .slide { max-height: 82px; }
	.mpd ul.productSliderPager .slide img { height: 78px; }
	.mpd .quickQuote { padding: 20px 15px; }
}
@media (max-width: 991px) {
	.mpd .responsiveMargin { margin-top: 30px; }
	.mpd .pc3BannerHeading { font-size: 32px; margin-bottom: 10px; }
	.mpd .pc3BannerDetails br { display: none; }
	.mpd .pc3RepeatSection .row > .col-md-6:first-child { order: 0; }
	.mpd .pc3RepeatSection .row > .col-md-6:last-child { order: 1; }
	.mpd ul.img3Slider .slide { flex-basis: 50%; }
	.mpd ul.productSliderPager .slide { flex-basis: 33.3333%; max-height: 140px; }
	.mpd ul.productSliderPager .slide img { height: 120px; }
	.mpd .divScroll { position: static; }
	.mpd .paddTop90 { padding-top: 60px; } .mpd .paddBottom90 { padding-bottom: 60px; }
	.mpd .paddTop75 { padding-top: 50px; } .mpd .paddBottom75 { padding-bottom: 50px; }
	.mpd .paddTop70 { padding-top: 50px; } .mpd .paddBottom70 { padding-bottom: 50px; }
}
@media (max-width: 767px) {
	.mpd h1, .mpd .h1 { font-size: 28px; }
	.mpd h2 { font-size: 24px; }
	.mpd .tabsWrapper { padding: 10px; }
	.mpd .tabsWrapper ul.tabs li { display: block; width: 100%; margin: 0 0 12px; text-align: center; }
	.mpd .pc3Banner .container { position: relative; height: auto; }
	.mpd .pc3Banner .bannerContent { position: relative; padding: 20px 15px 30px; }
	.mpd .pc3Banner { background: var(--mpd-primary-dark); }
	.mpd .bannerImg img { height: 220px; }
	.mpd .pc3BannerHeading { font-size: 30px; }
	.mpd ul.img3Slider .slide { flex-basis: 100%; }
	.mpd ul.productSliderPager .slide { max-height: 94px; }
	.mpd ul.productSliderPager .slide img { height: 90px; }
	.mewoo-pd-page #contactPopUpForm .quickQuote { padding: 30px 15px 15px; }
	.mewoo-pd-page #contactPopUpForm .mewoo-lead-form__grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
	.mpd .quickQuoteTitle { font-size: 18px; }
	.mpd a.commonBtn { padding: 14px 50px 14px 22px; font-size: 15px; }
	.mpd a.minwidth245 { min-width: 0; }
	.mpd ul.productSliderPager .slide { flex-basis: 50%; }
}

/* ---- WhatsApp CTA next to quote buttons (1.0.4) ---- */
.mpd .mpd-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mpd a.commonBtn.commonBtn--wa { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 30px; background: #25d366; border-color: #25d366; }
.mpd a.commonBtn.commonBtn--wa::before { display: none; }
.mpd a.commonBtn.commonBtn--wa:hover { background: #1ebe5b; border-color: #1ebe5b; }
.mpd .quickQuote .mewoo-inquiry__fast { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.mpd .quickQuote .mewoo-inquiry__fast .mewoo-button--whatsapp { width: 100%; }
.mpd .quickQuote .mewoo-lead-form__note { text-align: center; }
.mewoo-pd-page #contactPopUpForm .mewoo-inquiry__fast { justify-content: center; }
@media (max-width: 767px) {
	.mpd .mpd-cta-row a.commonBtn { flex: 1 1 auto; }
	.mpd .pc3Banner .mpd-cta-row a.commonBtn { padding: 12px 40px 12px 18px; font-size: 14px; }
	.mpd .pc3Banner .mpd-cta-row a.commonBtn--wa { padding: 12px 18px; }
}

/* ---- 3b. Product grid (v1.0.5) ---- */
.mpd .pc3ProductGrid { background: #fff; }
.mpd .pc3ProductGrid h2 { margin-bottom: 10px; }
.mpd .mpdProductIntro { max-width: 760px; margin: 0 auto 30px; color: #52606d; }
.mpd .mpdProductGroup + .mpdProductGroup { margin-top: 48px; }
.mpd .mpdProductGroup h3 { font-size: 24px; margin: 0 0 6px; }
.mpd .mpdProductGroupText { color: #52606d; margin-bottom: 18px; max-width: 820px; }
.mpd ul.mpdProductGrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mpd ul.mpdProductGrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpd ul.mpdProductGrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpd .mpdProductCard { display: flex; flex-direction: column; padding-bottom: 0; }
.mpd .mpdProductCardBody { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.mpd .mpdProductCardBody .dp4relatedProductTitle { padding: 0; font-size: 17px; line-height: 1.35; }
.mpd .mpdProductBadge { display: inline-block; align-self: flex-start; background: var(--mpd-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 20px; }
.mpd .mpdProductCardText { margin: 0; font-size: 14px; line-height: 1.55; color: #52606d; }
@media (max-width: 991px) { .mpd ul.mpdProductGrid, .mpd ul.mpdProductGrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mpd ul.mpdProductGrid, .mpd ul.mpdProductGrid--3, .mpd ul.mpdProductGrid--2 { grid-template-columns: 1fr; } .mpd .mpdProductGroup h3 { font-size: 20px; } }