.elementor-106 .elementor-element.elementor-element-6c636b8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-106 .elementor-element.elementor-element-a51fbc5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-106 .elementor-element.elementor-element-a51fbc5:not(.elementor-motion-effects-element-type-background), .elementor-106 .elementor-element.elementor-element-a51fbc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0A0A0A;}.elementor-106 .elementor-element.elementor-element-45d1612{--display:flex;}.elementor-106 .elementor-element.elementor-element-d9f2f14{--display:flex;--justify-content:center;}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-106 .elementor-element.elementor-element-0c45d11 .cart button, .elementor-106 .elementor-element.elementor-element-0c45d11 .cart .button{transition:all 0.2s;}.elementor-106 .elementor-element.elementor-element-0c45d11 .quantity .qty{transition:all 0.2s;}@media(min-width:768px){.elementor-106 .elementor-element.elementor-element-a51fbc5{--content-width:1280px;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-9a3a74a *//* ================================================================ NEXT LEVEL LABS — PRODUCT IMAGES [".elementor-106 .elementor-element.elementor-element-9a3a74a" VERSION] ================================================================ >>> KAHAN PASTE KARNA HAI <<< Elementor me "Product Images" widget par click karo -> Advanced tab -> Custom CSS -> paste -> Update ".elementor-106 .elementor-element.elementor-element-9a3a74a" ko Elementor us widget ke unique ID se replace karta hai, is liye koi CSS class add karne ki zaroorat nahi. >>> ZAROORI <<< Elementor ke Style tab me kuch set NA karna — woh inline CSS banata hai jo is file ko override kar dega. Style tab default chhod do. >>> AHEM: LIGHTBOX / ZOOM <<< WooCommerce ka PhotoSwipe lightbox me append hota hai, widget ke ANDAR nahi. Us par ".elementor-106 .elementor-element.elementor-element-9a3a74a" kaam nahi karta. Uske liye is file ke aakhir me section 8 ka site-wide snippet hai. ================================================================ */ /* ================================================================ 0. TEST — Comment hatao, GREEN border dikhe = CSS chal rahi hai. ================================================================ */ /* .elementor-106 .elementor-element.elementor-element-9a3a74a{outline:3px solid #10b981 !important} */ /* ================================================================ 1. VARIABLES + BASE ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a{ --n950:#0a0a0a; --n900:#171717; --n800:#262626; --z950:#09090b; --z900:#18181b; --z800:#27272a; --z700:#3f3f46; --z600:#52525b; --z500:#71717a; --z400:#a1a1aa; --z300:#d4d4d8; --z200:#e4e4e7; --z100:#f4f4f5; --r400:#f87171; --r500:#ef4444; --r600:#dc2626; --r700:#b91c1c; --r900:#7f1d1d; --r950:#450a0a; --em400:#34d399; --em500:#10b981; --em900:#064e3b; --amber:#f59e0b; --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-family:var(--sans); } /* ================================================================ 2. GALLERY WRAPPER ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery{ margin:0 !important; position:relative !important; opacity:1 !important; /* Woo ka JS kabhi opacity 0 chhod deta hai */ } .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__wrapper{ margin:0 !important; border-radius:16px !important; overflow:hidden !important; background:var(--z950) !important; border:1px solid var(--z900) !important; transition:border-color .3s,box-shadow .3s !important; box-shadow:0 20px 25px -5px rgba(0,0,0,.45) !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery:hover .woocommerce-product-gallery__wrapper{ border-color:rgba(220,38,38,.4) !important; box-shadow:0 25px 50px -12px rgba(69,10,10,.35) !important; } /* ================================================================ 3. MAIN IMAGE ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__image, .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__image a{ display:block !important; margin:0 !important; background:var(--n950) !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__image img, .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery img{ width:100% !important; height:auto !important; display:block !important; border-radius:0 !important; aspect-ratio:1/1 !important; object-fit:cover !important; background:var(--n950) !important; transition:transform .6s cubic-bezier(.16,1,.3,1) !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__image:hover img{transform:scale(1.05) !important} /* ================================================================ 4. ZOOM TRIGGER (magnifier icon) ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__trigger{ position:absolute !important; top:14px !important; right:14px !important; left:auto !important; z-index:9 !important; width:38px !important; height:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(10,10,10,.85) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important; border:1px solid var(--z800) !important; border-radius:10px !important; color:var(--z300) !important; font-size:0 !important; /* Woo ka text/emoji hide */ text-indent:0 !important; box-shadow:none !important; transition:background .25s,border-color .25s,color .25s !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__trigger::before, .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__trigger::after{display:none !important} /* apna magnifier icon SVG se */ .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__trigger{ background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__trigger:hover{ background-color:var(--r600) !important; border-color:var(--r600) !important; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important; } /* ================================================================ 5. SALE BADGE ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a .onsale, .elementor-106 .elementor-element.elementor-element-9a3a74a span.onsale{ position:absolute !important; top:14px !important; left:14px !important; right:auto !important; z-index:9 !important; margin:0 !important; min-width:0 !important; min-height:0 !important; padding:4px 10px !important; border-radius:4px !important; background:rgba(69,10,10,.9) !important; -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important; border:1px solid rgba(127,29,29,.55) !important; color:var(--r400) !important; font-family:var(--mono) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; line-height:1.6 !important; } /* ================================================================ 6. THUMBNAILS ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs, .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-nav{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:10px !important; margin:12px 0 0 !important; padding:0 !important; list-style:none !important; overflow:visible !important; } @media(min-width:1024px){ .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs{grid-template-columns:repeat(5,1fr) !important} } .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs li{ width:100% !important; margin:0 !important; float:none !important; list-style:none !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs img{ width:100% !important; height:auto !important; aspect-ratio:1/1 !important; object-fit:cover !important; display:block !important; opacity:.55 !important; border:1px solid var(--z900) !important; border-radius:10px !important; background:var(--n950) !important; cursor:pointer !important; transition:opacity .25s,border-color .25s,transform .25s !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs img:hover{ opacity:.85 !important; border-color:var(--z700) !important; transform:translateY(-2px) !important; } .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs img.flex-active, .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs .flex-active img{ opacity:1 !important; border-color:var(--r600) !important; box-shadow:0 0 0 1px var(--r600), 0 0 14px rgba(220,38,38,.28) !important; } /* ================================================================ 7. PLACEHOLDER (jab product ki image na ho) ================================================================ */ .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery img.wp-post-image[src*="placeholder"], .elementor-106 .elementor-element.elementor-element-9a3a74a img.woocommerce-placeholder{ opacity:.35 !important; filter:grayscale(1) !important; } /* ================================================================ 8. MOBILE ================================================================ */ @media(max-width:767px){ .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__wrapper{border-radius:14px !important} .elementor-106 .elementor-element.elementor-element-9a3a74a .flex-control-thumbs{grid-template-columns:repeat(4,1fr) !important;gap:8px !important} .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__trigger{width:34px !important;height:34px !important;top:10px !important;right:10px !important} .elementor-106 .elementor-element.elementor-element-9a3a74a .onsale{top:10px !important;left:10px !important} } @media(prefers-reduced-motion:reduce){ .elementor-106 .elementor-element.elementor-element-9a3a74a *,.elementor-106 .elementor-element.elementor-element-9a3a74a *::before,.elementor-106 .elementor-element.elementor-element-9a3a74a *::after{transition:none !important} .elementor-106 .elementor-element.elementor-element-9a3a74a .woocommerce-product-gallery__image:hover img{transform:none !important} } /* ================================================================ 9. LIGHTBOX (PhotoSwipe) — SITE-WIDE SNIPPET ------------------------------------------------------------------ >>> YEH HISSA WIDGET KE CUSTOM CSS ME NAHI JAYEGA <<< PhotoSwipe me append hota hai. Neeche wala block copy karo aur Appearance > Customize > Additional CSS me paste karo. Copy karte waqt / * aur * / hata dena. ------------------------------------------------------------------ .pswp__bg{background:#0a0a0a !important} .pswp__caption__center{ font-family:'JetBrains Mono',monospace !important; font-size:11px !important; color:#a1a1aa !important; text-align:center !important; } .pswp__button{opacity:.75 !important} .pswp__button:hover{opacity:1 !important} .pswp__counter{ font-family:'JetBrains Mono',monospace !important; font-size:11px !important; color:#71717a !important; } .pswp__preloader__donut{border-color:#dc2626 !important} ================================================================ *//* End custom CSS */ /* Start custom CSS for woocommerce-product-title, class: .elementor-element-c108e70 *//* ================================================================ NEXT LEVEL LABS — PRODUCT TITLE [".elementor-106 .elementor-element.elementor-element-c108e70" VERSION] ================================================================ >>> KAHAN PASTE KARNA HAI <<< Elementor me "Product Title" widget par click karo -> Advanced tab -> Custom CSS -> paste -> Update ".elementor-106 .elementor-element.elementor-element-c108e70" ko Elementor us widget ke unique ID se replace karta hai, is liye koi CSS class add karne ki zaroorat nahi. >>> ZAROORI <<< Elementor ke Style tab me kuch set NA karna — woh inline CSS banata hai jo is file ko override kar dega. Style tab default chhod do. NOTE: Yeh widget server-rendered H1 deta hai — SEO ke liye behtar hai bajaye HTML widget me JS se naam lagane ke. ================================================================ */ /* ================================================================ 0. TEST — Comment hatao, GREEN border dikhe = CSS chal rahi hai. ================================================================ */ /* .elementor-106 .elementor-element.elementor-element-c108e70{outline:3px solid #10b981 !important} */ /* ================================================================ 1. VARIABLES + BASE ================================================================ */ .elementor-106 .elementor-element.elementor-element-c108e70{ --n950:#0a0a0a; --n900:#171717; --n800:#262626; --z950:#09090b; --z900:#18181b; --z800:#27272a; --z700:#3f3f46; --z600:#52525b; --z500:#71717a; --z400:#a1a1aa; --z300:#d4d4d8; --z200:#e4e4e7; --z100:#f4f4f5; --r400:#f87171; --r500:#ef4444; --r600:#dc2626; --r700:#b91c1c; --r900:#7f1d1d; --r950:#450a0a; --em400:#34d399; --em500:#10b981; --em900:#064e3b; --amber:#f59e0b; --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-family:var(--sans); } /* ================================================================ 2. TITLE ================================================================ */ .elementor-106 .elementor-element.elementor-element-c108e70 .product_title, .elementor-106 .elementor-element.elementor-element-c108e70 h1.product_title, .elementor-106 .elementor-element.elementor-element-c108e70 .elementor-heading-title, .elementor-106 .elementor-element.elementor-element-c108e70 h1,.elementor-106 .elementor-element.elementor-element-c108e70 h2,.elementor-106 .elementor-element.elementor-element-c108e70 h3{ font-family:var(--sans) !important; font-size:28px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:-.02em !important; color:#fff !important; line-height:1.12 !important; margin:0 !important; padding:0 !important; word-break:break-word !important; } @media(min-width:640px){ .elementor-106 .elementor-element.elementor-element-c108e70 .product_title, .elementor-106 .elementor-element.elementor-element-c108e70 h1.product_title, .elementor-106 .elementor-element.elementor-element-c108e70 .elementor-heading-title, .elementor-106 .elementor-element.elementor-element-c108e70 h1,.elementor-106 .elementor-element.elementor-element-c108e70 h2,.elementor-106 .elementor-element.elementor-element-c108e70 h3{font-size:40px !important} } @media(min-width:1024px){ .elementor-106 .elementor-element.elementor-element-c108e70 .product_title, .elementor-106 .elementor-element.elementor-element-c108e70 h1.product_title, .elementor-106 .elementor-element.elementor-element-c108e70 .elementor-heading-title, .elementor-106 .elementor-element.elementor-element-c108e70 h1,.elementor-106 .elementor-element.elementor-element-c108e70 h2,.elementor-106 .elementor-element.elementor-element-c108e70 h3{font-size:44px !important} } /* ================================================================ 3. RED ACCENT UNDERLINE (chahiye to comment kholo) ================================================================ */ /* .elementor-106 .elementor-element.elementor-element-c108e70{position:relative;display:block;padding-bottom:16px !important} .elementor-106 .elementor-element.elementor-element-c108e70::after{ content:'';position:absolute;left:0;bottom:0; width:64px;height:3px;border-radius:3px; background:linear-gradient(90deg,#dc2626,#7f1d1d); } */ /* ================================================================ 4. SHIMMER GRADIENT TEXT (brand ka signature effect) Chahiye to yeh comment kholo — title par red-silver shimmer chalega. ================================================================ */ /* @keyframes nll-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} .elementor-106 .elementor-element.elementor-element-c108e70 .product_title, .elementor-106 .elementor-element.elementor-element-c108e70 .elementor-heading-title, .elementor-106 .elementor-element.elementor-element-c108e70 h1{ background:linear-gradient(90deg,#ef4444 0%,#f87171 25%,#e5e5e5 50%,#ef4444 75%,#ef4444 100%) !important; background-size:200% auto !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; animation:nll-shimmer 4s linear infinite !important; } @media(prefers-reduced-motion:reduce){ .elementor-106 .elementor-element.elementor-element-c108e70 .product_title,.elementor-106 .elementor-element.elementor-element-c108e70 .elementor-heading-title,.elementor-106 .elementor-element.elementor-element-c108e70 h1{animation:none !important} } */ /* ================================================================ 5. MOBILE ================================================================ */ @media(max-width:420px){ .elementor-106 .elementor-element.elementor-element-c108e70 .product_title, .elementor-106 .elementor-element.elementor-element-c108e70 h1.product_title, .elementor-106 .elementor-element.elementor-element-c108e70 .elementor-heading-title, .elementor-106 .elementor-element.elementor-element-c108e70 h1{font-size:23px !important;letter-spacing:-.01em !important} }/* End custom CSS */ /* Start custom CSS for woocommerce-product-price, class: .elementor-element-e60a243 *//* ================================================================ NEXT LEVEL LABS — PRODUCT PRICE [".elementor-106 .elementor-element.elementor-element-e60a243" VERSION] ================================================================ >>> KAHAN PASTE KARNA HAI <<< Elementor me "Product Price" widget par click karo -> Advanced tab -> Custom CSS -> paste -> Update ".elementor-106 .elementor-element.elementor-element-e60a243" ko Elementor us widget ke unique ID se replace karta hai, is liye koi CSS class add karne ki zaroorat nahi. >>> ZAROORI <<< Elementor ke Style tab me kuch set NA karna — woh inline CSS banata hai jo is file ko override kar dega. Style tab default chhod do. ================================================================ */ /* ================================================================ 0. TEST — Comment hatao, GREEN border dikhe = CSS chal rahi hai. ================================================================ */ /* .elementor-106 .elementor-element.elementor-element-e60a243{outline:3px solid #10b981 !important} */ /* ================================================================ 1. VARIABLES + BASE ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243{ --n950:#0a0a0a; --n900:#171717; --n800:#262626; --z950:#09090b; --z900:#18181b; --z800:#27272a; --z700:#3f3f46; --z600:#52525b; --z500:#71717a; --z400:#a1a1aa; --z300:#d4d4d8; --z200:#e4e4e7; --z100:#f4f4f5; --r400:#f87171; --r500:#ef4444; --r600:#dc2626; --r700:#b91c1c; --r900:#7f1d1d; --r950:#450a0a; --em400:#34d399; --em500:#10b981; --em900:#064e3b; --amber:#f59e0b; --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-family:var(--sans); } /* ================================================================ 2. PRICE WRAPPER ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243 .price, .elementor-106 .elementor-element.elementor-element-e60a243 p.price, .elementor-106 .elementor-element.elementor-element-e60a243 span.price{ display:flex !important; align-items:baseline !important; flex-wrap:wrap !important; gap:10px !important; margin:0 !important; padding:0 !important; font-family:var(--mono) !important; line-height:1.2 !important; } /* ================================================================ 3. MAIN AMOUNT ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243 .price .amount, .elementor-106 .elementor-element.elementor-element-e60a243 .price bdi, .elementor-106 .elementor-element.elementor-element-e60a243 .amount{ font-family:var(--mono) !important; font-size:30px !important; font-weight:800 !important; color:#fff !important; letter-spacing:-.01em !important; } @media(min-width:640px){ .elementor-106 .elementor-element.elementor-element-e60a243 .price .amount, .elementor-106 .elementor-element.elementor-element-e60a243 .price bdi, .elementor-106 .elementor-element.elementor-element-e60a243 .amount{font-size:34px !important} } /* currency symbol thoda chhota */ .elementor-106 .elementor-element.elementor-element-e60a243 .woocommerce-Price-currencySymbol{ font-size:.6em !important; font-weight:700 !important; color:var(--z400) !important; vertical-align:super !important; margin-right:2px !important; } /* ================================================================ 4. SALE — purani price (del) + nayi price (ins) ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243 .price del, .elementor-106 .elementor-element.elementor-element-e60a243 del{ text-decoration:line-through !important; text-decoration-color:rgba(127,29,29,.8) !important; text-decoration-thickness:2px !important; opacity:1 !important; order:2 !important; } .elementor-106 .elementor-element.elementor-element-e60a243 .price del .amount, .elementor-106 .elementor-element.elementor-element-e60a243 .price del bdi, .elementor-106 .elementor-element.elementor-element-e60a243 del .amount,.elementor-106 .elementor-element.elementor-element-e60a243 del bdi{ font-size:16px !important; font-weight:400 !important; color:var(--z600) !important; } .elementor-106 .elementor-element.elementor-element-e60a243 .price ins, .elementor-106 .elementor-element.elementor-element-e60a243 ins{ text-decoration:none !important; order:1 !important; } .elementor-106 .elementor-element.elementor-element-e60a243 .price ins .amount, .elementor-106 .elementor-element.elementor-element-e60a243 .price ins bdi, .elementor-106 .elementor-element.elementor-element-e60a243 ins .amount,.elementor-106 .elementor-element.elementor-element-e60a243 ins bdi{ color:var(--r500) !important; font-weight:800 !important; } /* ================================================================ 5. PRICE RANGE (variable product: $89 – $249) ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243 .price .woocommerce-Price-amount + .woocommerce-Price-amount{ color:var(--z300) !important; } /* ================================================================ 6. LABEL — "Est. Lab Cost" (chahiye to comment kholo) ================================================================ */ /* .elementor-106 .elementor-element.elementor-element-e60a243 .price::before{ content:'Est. Lab Cost'; display:block; width:100%; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:#71717a; margin-bottom:6px; } */ /* ================================================================ 7. SUFFIX / TAX NOTE ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243 .woocommerce-price-suffix, .elementor-106 .elementor-element.elementor-element-e60a243 small.woocommerce-price-suffix{ font-family:var(--mono) !important; font-size:11px !important; font-weight:400 !important; color:var(--z600) !important; order:3 !important; width:100% !important; margin-top:4px !important; } /* ================================================================ 8. VARIATION PRICE (add-to-cart ke andar wali) ================================================================ */ .elementor-106 .elementor-element.elementor-element-e60a243 .woocommerce-variation-price .price .amount{font-size:26px !important} /* ================================================================ 9. MOBILE ================================================================ */ @media(max-width:420px){ .elementor-106 .elementor-element.elementor-element-e60a243 .price .amount,.elementor-106 .elementor-element.elementor-element-e60a243 .price bdi,.elementor-106 .elementor-element.elementor-element-e60a243 .amount{font-size:25px !important} .elementor-106 .elementor-element.elementor-element-e60a243 .price del .amount,.elementor-106 .elementor-element.elementor-element-e60a243 del .amount{font-size:14px !important} }/* End custom CSS */ /* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-0c45d11 *//* ================================================================ NEXT LEVEL LABS — ADD TO CART [".elementor-106 .elementor-element.elementor-element-0c45d11" VERSION] ================================================================ >>> KAHAN PASTE KARNA HAI <<< Elementor me "Add To Cart / Custom Add To Cart" widget par click karo -> Advanced tab -> Custom CSS -> paste -> Update ".elementor-106 .elementor-element.elementor-element-0c45d11" ko Elementor us widget ke unique ID se replace karta hai, is liye koi CSS class add karne ki zaroorat nahi. >>> ZAROORI <<< Elementor ke Style tab me kuch set NA karna — woh inline CSS banata hai jo is file ko override kar dega. Style tab default chhod do. Simple aur Variable dono products cover hain — variation dropdowns, reset link, variation price, stock status, sab. ================================================================ */ /* ================================================================ 0. TEST — Comment hatao, GREEN border dikhe = CSS chal rahi hai. ================================================================ */ /* .elementor-106 .elementor-element.elementor-element-0c45d11{outline:3px solid #10b981 !important} */ /* ================================================================ 1. VARIABLES + BASE ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11{ --n950:#0a0a0a; --n900:#171717; --n800:#262626; --z950:#09090b; --z900:#18181b; --z800:#27272a; --z700:#3f3f46; --z600:#52525b; --z500:#71717a; --z400:#a1a1aa; --z300:#d4d4d8; --z200:#e4e4e7; --z100:#f4f4f5; --r400:#f87171; --r500:#ef4444; --r600:#dc2626; --r700:#b91c1c; --r900:#7f1d1d; --r950:#450a0a; --em400:#34d399; --em500:#10b981; --em900:#064e3b; --amber:#f59e0b; --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-family:var(--sans); } /* ================================================================ 2. FORM WRAPPER ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 form.cart, .elementor-106 .elementor-element.elementor-element-0c45d11 .cart{ display:flex !important; flex-wrap:wrap !important; align-items:stretch !important; gap:12px !important; margin:0 !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 form.variations_form{ display:flex !important; flex-direction:column !important; gap:16px !important; } /* ================================================================ 3. QUANTITY ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity{ display:inline-flex !important; align-items:center !important; flex:0 0 auto !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity input.qty, .elementor-106 .elementor-element.elementor-element-0c45d11 input[type="number"].qty{ width:76px !important; height:100% !important; min-height:52px !important; background:var(--n950) !important; border:1px solid var(--z800) !important; border-radius:12px !important; padding:12px !important; font-family:var(--mono) !important; font-size:14px !important; font-weight:700 !important; color:var(--z200) !important; text-align:center !important; outline:none !important; box-shadow:none !important; transition:border-color .25s !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity input.qty:focus{border-color:var(--r600) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 input[type=number]::-webkit-outer-spin-button, .elementor-106 .elementor-element.elementor-element-0c45d11 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .elementor-106 .elementor-element.elementor-element-0c45d11 input[type=number].qty{-moz-appearance:textfield} /* plus / minus buttons (theme ya Elementor ke) */ .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity .plus, .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity .minus, .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity button{ width:34px !important;height:34px !important; background:var(--z900) !important; border:1px solid var(--z800) !important; border-radius:9px !important; color:var(--z300) !important; font-weight:700 !important;cursor:pointer !important; transition:border-color .25s,color .25s !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity .plus:hover, .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity .minus:hover{border-color:var(--r600) !important;color:var(--r400) !important} /* ================================================================ 4. ADD TO CART BUTTON ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button, .elementor-106 .elementor-element.elementor-element-0c45d11 button.single_add_to_cart_button, .elementor-106 .elementor-element.elementor-element-0c45d11 .button.alt, .elementor-106 .elementor-element.elementor-element-0c45d11 .elementor-button{ flex:1 1 200px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; min-height:52px !important; background:var(--r600) !important; background-color:var(--r600) !important; border:none !important; border-radius:12px !important; padding:16px 32px !important; font-family:var(--mono) !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:#fff !important; line-height:1.2 !important; cursor:pointer !important; box-shadow:0 10px 15px -3px rgba(127,29,29,.4) !important; transition:background .3s,box-shadow .3s,transform .2s !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button:hover, .elementor-106 .elementor-element.elementor-element-0c45d11 .button.alt:hover{ background:var(--r700) !important;background-color:var(--r700) !important; box-shadow:0 10px 25px -3px rgba(127,29,29,.6) !important; transform:scale(1.02) !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button:active{transform:scale(.97) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button.disabled, .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button:disabled, .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button.wc-variation-selection-needed{ opacity:.42 !important;cursor:not-allowed !important;transform:none !important; box-shadow:none !important; } /* loading state */ .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button.loading{opacity:.75 !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button.added::after{ border-color:#fff !important;border-right-color:transparent !important} /* ================================================================ 5. VARIATIONS TABLE (variable products) ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations{ width:100% !important; border:none !important; border-collapse:collapse !important; background:transparent !important; margin:0 !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations tr{ display:flex !important; flex-direction:column !important; border:none !important; background:transparent !important; margin-bottom:14px !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations th, .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations td{ display:block !important; width:100% !important; border:none !important; padding:0 !important; background:transparent !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations th.label label{ font-family:var(--mono) !important; font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.08em !important; color:var(--z500) !important; margin:0 0 6px !important; display:block !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations select, .elementor-106 .elementor-element.elementor-element-0c45d11 .variations select{ width:100% !important; background:var(--n950) !important; background-color:var(--n950) !important; border:1px solid var(--z800) !important; border-radius:12px !important; padding:13px 38px 13px 16px !important; font-family:var(--mono) !important; font-size:12px !important; color:var(--z200) !important; outline:none !important; min-height:0 !important; cursor:pointer !important; -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; transition:border-color .25s !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations select:focus{border-color:var(--r600) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 table.variations select option{background:var(--n950) !important;color:var(--z200) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 a.reset_variations{ display:inline-block !important; font-family:var(--mono) !important; font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.08em !important; color:var(--z500) !important; text-decoration:none !important; margin-top:6px !important; transition:color .2s !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 a.reset_variations:hover{color:var(--r400) !important} /* ================================================================ 6. VARIATION PRICE + DESCRIPTION BOX ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 .single_variation_wrap, .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation{ display:flex !important; flex-direction:column !important; gap:12px !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation-description, .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation-availability{ background:rgba(24,24,27,.5) !important; border:1px solid var(--z800) !important; border-radius:12px !important; padding:12px 14px !important; font-family:var(--mono) !important; font-size:11px !important; color:var(--z400) !important; line-height:1.7 !important; margin:0 !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation-description p{margin:0 !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation-price .price, .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation-price .amount, .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-variation-price bdi{ font-family:var(--mono) !important; font-size:24px !important; font-weight:800 !important; color:#fff !important; } /* ================================================================ 7. STOCK STATUS ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 .stock, .elementor-106 .elementor-element.elementor-element-0c45d11 p.stock{ width:100% !important; font-family:var(--mono) !important; font-size:10px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.1em !important; margin:0 !important; display:flex !important; align-items:center !important; gap:7px !important; } .elementor-106 .elementor-element.elementor-element-0c45d11 .stock::before{ content:'';width:6px;height:6px;border-radius:9999px;flex-shrink:0; background:currentColor; } .elementor-106 .elementor-element.elementor-element-0c45d11 .stock.in-stock{color:var(--em500) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .stock.available-on-backorder{color:var(--amber) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .stock.out-of-stock{color:var(--r500) !important} /* ================================================================ 8. GROUPED PRODUCTS TABLE ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 table.woocommerce-grouped-product-list{ width:100% !important;border-collapse:collapse !important; background:var(--z950) !important;border:1px solid var(--z900) !important; border-radius:14px !important;overflow:hidden !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-grouped-product-list-item{ border-top:1px solid var(--z900) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-grouped-product-list td{ padding:13px !important;border:none !important; font-family:var(--mono) !important;font-size:12px !important;color:var(--z300) !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-grouped-product-list-item__label a{ color:#fff !important;font-weight:700 !important;text-decoration:none !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-grouped-product-list-item__label a:hover{color:var(--r400) !important} /* ================================================================ 9. NOTICES ================================================================ */ .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-info, .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-message{ width:100% !important; background:rgba(2,44,34,.35) !important;border:1px solid var(--em900) !important; border-radius:12px !important;color:var(--em400) !important; font-family:var(--mono) !important;font-size:12px !important;line-height:1.7 !important; padding:12px 15px !important;list-style:none !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .woocommerce-error{ width:100% !important; background:rgba(69,10,10,.3) !important;border:1px solid rgba(127,29,29,.5) !important; border-radius:12px !important;color:var(--r400) !important; font-family:var(--mono) !important;font-size:12px !important; padding:12px 15px !important;list-style:none !important} /* ================================================================ 10. MOBILE ================================================================ */ @media(max-width:520px){ .elementor-106 .elementor-element.elementor-element-0c45d11 form.cart,.elementor-106 .elementor-element.elementor-element-0c45d11 .cart{gap:10px !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity input.qty{width:100% !important;min-height:48px !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .quantity{flex:1 1 100% !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button{ flex:1 1 100% !important;min-height:50px !important; padding:15px 24px !important;font-size:12px !important} } @media(prefers-reduced-motion:reduce){ .elementor-106 .elementor-element.elementor-element-0c45d11 *,.elementor-106 .elementor-element.elementor-element-0c45d11 *::before,.elementor-106 .elementor-element.elementor-element-0c45d11 *::after{transition:none !important} .elementor-106 .elementor-element.elementor-element-0c45d11 .single_add_to_cart_button:hover{transform:none !important} }/* End custom CSS */