/* ========================================================= WHEELOPEDIA - FINAL PERFECT CTA BUTTON ROW Add to Cart + Buy Now Desktop + Tablet + Mobile ========================================================= */ /* ========================================================= FORM ROW ========================================================= */ body.single-product .summary.entry-summary form.cart { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 0 18px 0 !important; padding: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } /* ========================================================= VERY IMPORTANT Remove WooCommerce / theme clearfix pseudo elements These were causing staggered button positions ========================================================= */ body.single-product .summary.entry-summary form.cart::before, body.single-product .summary.entry-summary form.cart::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; flex: 0 0 0 !important; } /* ========================================================= HIDDEN QUANTITY ========================================================= */ body.single-product .summary.entry-summary form.cart .quantity { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 0 !important; } /* ========================================================= BOTH BUTTONS ========================================================= */ body.single-product .summary.entry-summary form.cart .single_add_to_cart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; width: 0 !important; max-width: none !important; min-width: 0 !important; height: 58px !important; min-height: 58px !important; margin: 0 !important; padding: 0 22px !important; float: none !important; clear: none !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none; background: #ffffff !important; color: #2d2c2b !important; border: 2px solid #2d2c2b !important; border-radius: 999px !important; box-shadow: none !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; text-align: center !important; text-transform: none !important; white-space: nowrap !important; cursor: pointer !important; box-sizing: border-box !important; transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s ease !important; } /* ========================================================= REMOVE INLINE BUY NOW TOP MARGIN ========================================================= */ body.single-product .summary.entry-summary form.cart .gc-instant-buy-now { margin-top: 0 !important; } /* ========================================================= HOVER Reference: normal = white outline hover = dark filled ========================================================= */ body.single-product .summary.entry-summary form.cart .single_add_to_cart_button:hover, body.single-product .summary.entry-summary form.cart .single_add_to_cart_button:focus { background: #2d2c2b !important; color: #ffffff !important; border-color: #2d2c2b !important; box-shadow: 0 8px 20px rgba(45, 44, 43, .13) !important; transform: translateY(-1px) !important; outline: none !important; } /* ========================================================= CLICK EFFECT ========================================================= */ body.single-product .summary.entry-summary form.cart .single_add_to_cart_button:active { transform: translateY(0) scale(.985) !important; box-shadow: 0 3px 8px rgba(45, 44, 43, .10) !important; } /* ========================================================= LOADING / DISABLED ========================================================= */ body.single-product .summary.entry-summary form.cart .single_add_to_cart_button:disabled, body.single-product .summary.entry-summary form.cart .single_add_to_cart_button.disabled { opacity: .58 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* ========================================================= TABLET ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { body.single-product .summary.entry-summary form.cart { gap: 10px !important; } body.single-product .summary.entry-summary form.cart .single_add_to_cart_button { height: 54px !important; min-height: 54px !important; padding: 0 16px !important; font-size: 15px !important; } } /* ========================================================= MOBILE Still side-by-side ========================================================= */ @media only screen and (max-width: 767px) { body.single-product .summary.entry-summary form.cart { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; margin-bottom: 16px !important; } body.single-product .summary.entry-summary form.cart .single_add_to_cart_button { flex: 1 1 0 !important; width: 0 !important; height: 50px !important; min-height: 50px !important; padding: 0 10px !important; font-size: 14px !important; border-width: 1.5px !important; white-space: nowrap !important; } } /* ========================================================= SMALL MOBILE 320px - 420px ========================================================= */ @media only screen and (max-width: 420px) { body.single-product .summary.entry-summary form.cart { gap: 7px !important; } body.single-product .summary.entry-summary form.cart .single_add_to_cart_button { height: 48px !important; min-height: 48px !important; padding: 0 7px !important; font-size: 12.5px !important; } } /* ========================================================= EXTRA SMALL MOBILE Keep same row safely ========================================================= */ @media only screen and (max-width: 340px) { body.single-product .summary.entry-summary form.cart { gap: 6px !important; } body.single-product .summary.entry-summary form.cart .single_add_to_cart_button { height: 46px !important; min-height: 46px !important; padding: 0 5px !important; font-size: 11.5px !important; } } /* ========================================= PREMIUM PRODUCT PRICE CARD ========================================= */ .wa-dynamic-price-box { position: relative; overflow: hidden; width: 100%; margin: 0 0 20px; padding: 20px 22px 17px; background: linear-gradient( 135deg, #ffffff 0%, #fafafa 100% ); border: 1px solid #ebebeb; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,0.055); box-sizing: border-box; } /* Premium small accent */ .wa-dynamic-price-box::before { content: ""; position: absolute; top: 0; left: 22px; width: 46px; height: 3px; background: #2d2c2b; border-radius: 0 0 4px 4px; } /* ========================= PRICE LINE ========================= */ .wa-price-line { display: flex; align-items: center; flex-wrap: wrap; column-gap: 12px; row-gap: 7px; } /* ========================= SALE PRICE ========================= */ .wa-sale-price { order: 1; color: #111111; font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.7px; white-space: nowrap; } .wa-sale-price .woocommerce-Price-amount, .wa-sale-price .woocommerce-Price-currencySymbol { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; } /* ========================= DISCOUNT ========================= */ .wa-discount { order: 2; display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; background: #1d1d1d; color: #ffffff; border-radius: 7px; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 0.1px; white-space: nowrap; } /* ========================= MRP - NEW LINE ========================= */ .wa-mrp { order: 3; flex-basis: 100%; display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #777777; font-size: 14px; line-height: 1.4; font-weight: 400; } .wa-mrp del { color: #8a8a8a; opacity: 1; text-decoration-thickness: 1px; text-decoration-color: #999999; } .wa-mrp del .woocommerce-Price-amount { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; } /* ========================= TAX TEXT ========================= */ .wa-tax-text { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #6e6e6e; font-size: 13px; line-height: 1.4; font-weight: 400; } /* Small premium tick */ .wa-tax-text::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #eaf7f5; color: #008c82; border-radius: 50%; font-size: 10px; font-weight: 700; } /* ========================= MOBILE ========================= */ @media (max-width: 600px) { .wa-dynamic-price-box { padding: 18px 17px 15px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); } .wa-dynamic-price-box::before { left: 17px; width: 38px; } .wa-sale-price { font-size: 27px; } .wa-discount { padding: 5px 8px; font-size: 11px; } .wa-mrp { font-size: 13px; } .wa-tax-text { margin-top: 7px; font-size: 12px; } } /* Hide Wishlist button on single product pages */ body.single-product .wishsuite-btn.wishsuite-product-after_cart_btn { display: none !important; } /* ========================================================= WHEELOPEDIA - FINAL PREMIUM TRUST WIDGET V5 IMPORTANT: 1. Delete ALL previous trust/marquee/safe-checkout CSS. 2. Keep ONLY this CSS for the wpv5-* HTML. 3. Brand: #ffc600 + #2d2c2b ========================================================= */ /* ========================================================= 01. MAIN WRAPPER ========================================================= */ body.single-product .wpv5-wrap { width: 100%; max-width: 100%; margin: 14px 0 20px; padding: 0; box-sizing: border-box; } /* WordPress Text Widget may inject unwanted paragraphs / BR */ body.single-product .wpv5-wrap > p, body.single-product .wpv5-ticker > p, body.single-product .wpv5-track > p, body.single-product .wpv5-safe > p, body.single-product .wpv5-safe-head > p { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 02. SECTION TITLE ========================================================= */ body.single-product .wpv5-heading { display: block; margin: 0 0 12px 0 !important; padding: 0 !important; color: #2d2c2b !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.15px; } /* ========================================================= 03. VERTICAL TICKER VIEWPORT ========================================================= */ body.single-product .wpv5-ticker { position: relative; width: 100% !important; height: 68px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff; border: 0 !important; border-radius: 18px !important; box-shadow: inset 0 0 0 1px rgba(45, 44, 43, 0.08), 0 6px 18px rgba(45, 44, 43, 0.045) !important; box-sizing: border-box !important; isolation: isolate; } /* ========================================================= 04. MOVING VERTICAL TRACK ========================================================= */ body.single-product .wpv5-track { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: translate3d(0, 0, 0); will-change: transform; animation: wpv5PerfectVerticalSlide 32s linear infinite !important; } /* ========================================================= 05. EACH BENEFIT SLIDE ========================================================= */ body.single-product .wpv5-item { position: relative !important; display: flex !important; align-items: center !important; flex: 0 0 68px !important; width: 100% !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; gap: 15px !important; margin: 0 !important; padding: 0 19px !important; overflow: hidden !important; box-sizing: border-box !important; transform: translateZ(0); } /* ========================================================= 06. INDIVIDUAL SOFT CARD BACKGROUNDS ========================================================= */ body.single-product .wpv5-delivery { background: #fff9e8 !important; } body.single-product .wpv5-support { background: #f3f7ff !important; } body.single-product .wpv5-price { background: #f2f8f3 !important; } body.single-product .wpv5-cod { background: #fff4f1 !important; } body.single-product .wpv5-emi { background: #f7f3ff !important; } /* ========================================================= 07. FINAL VERTICAL SLIDE Long hold + short premium movement ========================================================= */ @keyframes wpv5PerfectVerticalSlide { /* Delivery */ 0%, 15% { transform: translate3d(0, 0, 0); } /* Support */ 16.5%, 31% { transform: translate3d(0, -68px, 0); } /* Best Pricing */ 32.5%, 47% { transform: translate3d(0, -136px, 0); } /* COD */ 48.5%, 63% { transform: translate3d(0, -204px, 0); } /* EMI */ 64.5%, 79% { transform: translate3d(0, -272px, 0); } /* Duplicate Delivery for seamless loop */ 80.5%, 100% { transform: translate3d(0, -340px, 0); } } /* Pause on mouse hover */ @media (hover: hover) { body.single-product .wpv5-ticker:hover .wpv5-track { animation-play-state: paused !important; } } /* ========================================================= 08. ICON CIRCLE ========================================================= */ body.single-product .wpv5-icon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; background: #2d2c2b !important; color: #ffffff !important; border-radius: 50% !important; box-shadow: 0 5px 14px rgba(45, 44, 43, 0.16) !important; box-sizing: border-box !important; transform-origin: center; z-index: 2; } /* Icon SVG */ body.single-product .wpv5-icon svg { display: block; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; fill: none !important; stroke: #ffffff !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= 09. BENEFIT TEXT ========================================================= */ body.single-product .wpv5-text { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #2d2c2b !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; } /* ========================================================= 10. ICON MICRO ANIMATIONS ========================================================= */ /* Delivery */ body.single-product .wpv5-anim-truck { animation: wpv5TruckMove 2.4s ease-in-out infinite; } /* Support */ body.single-product .wpv5-anim-support { animation: wpv5SupportPulse 2.8s ease-in-out infinite; } /* Price */ body.single-product .wpv5-anim-price { animation: wpv5PriceTilt 2.8s ease-in-out infinite; } /* COD */ body.single-product .wpv5-anim-cod { animation: wpv5CodFloat 2.7s ease-in-out infinite; } /* EMI */ body.single-product .wpv5-anim-emi { animation: wpv5EmiMove 3s ease-in-out infinite; } @keyframes wpv5TruckMove { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(2.5px); } 55% { transform: translateX(1px); } } @keyframes wpv5SupportPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @keyframes wpv5PriceTilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } } @keyframes wpv5CodFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes wpv5EmiMove { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(4deg) scale(1.04); } } /* ========================================================= 11. SAFE CHECKOUT CARD ========================================================= */ body.single-product .wpv5-safe { width: 100%; margin: 14px 0 0 !important; padding: 15px 16px 14px !important; background: #ffffff !important; border: 1px solid rgba(45, 44, 43, 0.08) !important; border-radius: 18px !important; box-shadow: 0 8px 22px rgba(45, 44, 43, 0.045) !important; box-sizing: border-box !important; } /* ========================================================= 12. SAFE CHECKOUT HEADER ========================================================= */ body.single-product .wpv5-safe-head { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; gap: 13px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Any injected WordPress P/BR inside safe header */ body.single-product .wpv5-safe-head > p, body.single-product .wpv5-safe-head > br { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 13. LOCK ICON ========================================================= */ body.single-product .wpv5-lock { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important; background: #fff6d6 !important; border: 1px solid rgba(255, 198, 0, 0.12) !important; border-radius: 14px !important; box-sizing: border-box !important; transform-origin: center; } /* Lock SVG */ body.single-product .wpv5-lock svg { display: block; width: 23px !important; height: 23px !important; margin: 0 !important; padding: 0 !important; fill: none !important; stroke: #2d2c2b !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; } /* Lock animation */ body.single-product .wpv5-anim-lock { animation: wpv5LockMotion 2.8s ease-in-out infinite !important; } @keyframes wpv5LockMotion { 0%, 36%, 100% { transform: scale(1); } 48% { transform: scale(1.09) rotate(-2deg); } 58% { transform: scale(1); } } /* ========================================================= 14. GUARANTEED SAFE CHECKOUT TEXT FIX Fixes WordPress injected BR gap ========================================================= */ body.single-product .wpv5-safe-copy { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; position: static !important; line-height: 1 !important; transform: none !important; box-sizing: border-box !important; } /* WordPress inserted BR */ body.single-product .wpv5-safe-copy > br { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } /* WordPress inserted P */ body.single-product .wpv5-safe-copy > p { display: contents !important; margin: 0 !important; padding: 0 !important; } /* Reset all title/subtitle theme spacing */ body.single-product .wpv5-safe-copy > strong, body.single-product .wpv5-safe-copy > span { position: static !important; display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* Title */ body.single-product .wpv5-safe-copy > strong { color: #2d2c2b !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -0.2px; } /* Subtitle */ body.single-product .wpv5-safe-copy > span { color: #77736e !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; } /* ========================================================= 15. DIVIDER ========================================================= */ body.single-product .wpv5-divider { display: block; width: 100%; height: 1px; margin: 11px 0 10px !important; padding: 0; background: rgba(45, 44, 43, 0.09); } /* ========================================================= 16. PAYMENT IMAGE CONTAINER ========================================================= */ body.single-product .wpv5-payment { position: relative; display: block; width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #ffffff; border-radius: 13px !important; box-sizing: border-box; } /* Payment Image */ body.single-product .wpv5-payment img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 13px !important; object-fit: contain !important; background: #ffffff !important; box-shadow: none !important; } /* Remove WordPress image paragraph spacing */ body.single-product .wpv5-payment p { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } /* ========================================================= 17. TABLET 768 - 1024 ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 1024px) { body.single-product .wpv5-ticker { height: 64px !important; } body.single-product .wpv5-item { flex: 0 0 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; } body.single-product .wpv5-track { animation-name: wpv5PerfectVerticalSlideTablet !important; } @keyframes wpv5PerfectVerticalSlideTablet { 0%, 15% { transform: translate3d(0, 0, 0); } 16.5%, 31% { transform: translate3d(0, -64px, 0); } 32.5%, 47% { transform: translate3d(0, -128px, 0); } 48.5%, 63% { transform: translate3d(0, -192px, 0); } 64.5%, 79% { transform: translate3d(0, -256px, 0); } 80.5%, 100% { transform: translate3d(0, -320px, 0); } } } /* ========================================================= 18. MOBILE strong { font-size: 17px !important; line-height: 1.12 !important; } body.single-product .wpv5-safe-copy > span { font-size: 11.5px !important; line-height: 1.18 !important; } body.single-product .wpv5-divider { margin: 9px 0 8px !important; } body.single-product .wpv5-payment, body.single-product .wpv5-payment img { border-radius: 11px !important; } } /* ========================================================= 19. SMALL MOBILE strong { font-size: 16px !important; } body.single-product .wpv5-safe-copy > span { font-size: 11px !important; } } /* ========================================================= 20. ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { body.single-product .wpv5-track { animation: none !important; transform: translate3d(0, 0, 0) !important; } body.single-product .wpv5-anim-truck, body.single-product .wpv5-anim-support, body.single-product .wpv5-anim-price, body.single-product .wpv5-anim-cod, body.single-product .wpv5-anim-emi, body.single-product .wpv5-anim-lock { animation: none !important; transform: none !important; } } /* ========================================================= WHEELOPEDIA - LUXURY PRODUCT IMAGE TRANSITION Soft reveal + micro zoom + subtle depth All screen sizes ========================================================= */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery { position: relative !important; overflow: hidden !important; } /* Every slide occupies exactly the same stage */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 1 !important; transform: scale(1.012) translateY(3px) !important; filter: blur(1.2px) !important; transition: opacity .46s cubic-bezier(.22, 1, .36, 1), transform .58s cubic-bezier(.22, 1, .36, 1), filter .48s cubic-bezier(.22, 1, .36, 1), visibility .46s ease !important; } /* Active image */ body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li.wp-gallery-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 3 !important; transform: scale(1) translateY(0) !important; filter: blur(0) !important; } /* Initial first image */ body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li:first-child { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 3 !important; transform: scale(1) translateY(0) !important; filter: blur(0) !important; } /* Premium reveal triggered by JS */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li.wp-premium-reveal { animation: wpLuxuryImageReveal .56s cubic-bezier(.22, 1, .36, 1) both !important; } @keyframes wpLuxuryImageReveal { 0% { opacity: 0; transform: scale(1.025) translateY(5px); filter: blur(2px) brightness(.985); } 45% { opacity: .92; } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0) brightness(1); } } /* Image itself settles gently */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img { transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .5s cubic-bezier(.22, 1, .36, 1) !important; } /* No global image zoom when mouse enters frame */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper:hover .swiper-slide-imglink img { transform: none !important; } /* Counter subtly reacts when image changes */ body.single-product .wp-gallery-counter { transition: opacity .25s ease, transform .25s ease, background-color .25s ease !important; } /* Respect accessibility setting */ @media (prefers-reduced-motion: reduce) { body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li, body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li.wp-premium-reveal { animation: none !important; transition: opacity .15s ease !important; transform: none !important; filter: none !important; } } /* ========================================================= WHEELOPEDIA - THUMBNAIL SCROLL FINAL POLISH Desktop / Laptop only ========================================================= */ @media only screen and (min-width: 1025px) { /* ----------------------------------------- THUMBNAIL SCROLL AREA Extra breathing room top/bottom ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper { padding: 6px 7px 6px 3px !important; scroll-padding-top: 6px !important; scroll-padding-bottom: 6px !important; /* * Firefox: * light grey scrollbar with approx 50% feel */ scrollbar-width: thin !important; scrollbar-color: rgba(180, 180, 180, 0.50) transparent !important; } /* Give first/last thumbnail room */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper { padding: 2px 0 4px 0 !important; box-sizing: border-box !important; } /* ----------------------------------------- THUMBNAIL DEFAULT ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { position: relative !important; transform: none !important; box-shadow: 0 2px 7px rgba(45, 44, 43, 0.05) !important; transition: border-color .20s ease, box-shadow .20s ease, opacity .20s ease !important; } /* ----------------------------------------- HOVER No movement = no clipping ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide:hover { transform: none !important; border-color: rgba(45, 44, 43, 0.55) !important; box-shadow: 0 3px 9px rgba(45, 44, 43, 0.09) !important; z-index: 3 !important; } /* ----------------------------------------- SELECTED IMAGE ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.active, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active { border: 2px solid #2d2c2b !important; box-shadow: 0 3px 10px rgba(45, 44, 43, 0.10) !important; transform: none !important; } /* CommerceKit's old inner active border */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.active::before, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.swiper-slide-thumb-active::before { display: none !important; content: none !important; border: none !important; } /* ===================================================== CHROME / EDGE / SAFARI SCROLLBAR ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar { width: 6px !important; } /* Transparent track */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-track { background: rgba(235, 235, 235, 0.35) !important; border-radius: 20px !important; } /* * Scroll thumb: * light grey + 50% transparency */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb { background: rgba(170, 170, 170, 0.50) !important; border-radius: 20px !important; border: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb:hover { background: rgba(45, 44, 43, 0.50) !important; } /* ----------------------------------------- SCROLL UP ARROW #2d2c2b ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ::-webkit-scrollbar-button:single-button:vertical:decrement { height: 13px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 5px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%232d2c2b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ----------------------------------------- SCROLL DOWN ARROW #2d2c2b ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ::-webkit-scrollbar-button:single-button:vertical:increment { height: 13px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 5px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%232d2c2b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } } /* ========================================================= WHEELOPEDIA - PREMIUM PRODUCT GALLERY (REFINED) Desktop/Laptop custom UI Tablet + Mobile retain native CommerceKit behaviour Brand colors: #ffc600 + #2d2c2b ========================================================= */ /* ========================================================= LARGE DESKTOP ========================================================= */ @media only screen and (min-width: 1200px) { /* ----------------------------------------- GALLERY WRAPPER ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery-wrapper { width: 650px !important; max-width: 650px !important; flex: 0 1 650px !important; margin: 0 !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery.cg-layout-vertical-scroll { display: flex !important; align-items: flex-start !important; gap: 18px !important; width: 100% !important; margin: 0 !important; } /* ----------------------------------------- MAIN IMAGE FRAME ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper { order: 2 !important; flex: 0 1 560px !important; width: 560px !important; max-width: 560px !important; height: 560px !important; margin: 0 !important; position: relative !important; overflow: hidden !important; background: #f8f8f6 !important; border: 1px solid rgba(45, 44, 43, 0.08) !important; border-radius: 20px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery { display: block !important; position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; transform: none !important; gap: 0 !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; grid-column: auto !important; } body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li { display: none !important; } body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li:first-child { display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li { display: none !important; } body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li.wp-gallery-active { display: flex !important; align-items: center !important; justify-content: center !important; } /* ----------------------------------------- IMAGE HOLDER ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink { width: 100% !important; height: 100% !important; display: block !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border-radius: 20px !important; box-sizing: border-box !important; } /* MAIN IMAGE WILL COVER FRAME */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; border-radius: 20px !important; transition: transform 0.25s ease !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper:hover .swiper-slide-imglink img { transform: scale(1.01); } /* ----------------------------------------- THUMBNAIL COLUMN ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper { display: block !important; order: 1 !important; flex: 0 0 72px !important; width: 72px !important; height: 560px !important; max-height: 560px !important; margin: 0 !important; padding: 0 6px 0 0 !important; position: relative !important; top: auto !important; align-self: auto !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; scrollbar-width: thin; scrollbar-color: #ffc600 transparent; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; transform: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { flex: 0 0 62px !important; width: 62px !important; height: 62px !important; padding: 3px !important; margin: 0 !important; background: #ffffff !important; border: 1px solid rgba(45, 44, 43, 0.12) !important; border-radius: 12px !important; opacity: 1 !important; overflow: hidden !important; box-sizing: border-box !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 8px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide:hover { border-color: rgba(45, 44, 43, 0.28) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.active, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active { border: 2px solid #ffc600 !important; background: #fffdf4 !important; box-shadow: 0 0 0 2px rgba(255, 198, 0, 0.15), 0 6px 14px rgba(0,0,0,0.06) !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar { width: 4px; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-track { background: transparent; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb { background: #ffc600; border-radius: 20px; } /* ----------------------------------------- ARROWS ----------------------------------------- */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 48px !important; height: 48px !important; margin: 0 !important; background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(45, 44, 43, 0.10) !important; border-radius: 50% !important; box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important; color: #2d2c2b !important; cursor: pointer !important; z-index: 20 !important; opacity: 1 !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev { left: 16px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { right: 16px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { font-family: Arial, sans-serif !important; font-size: 30px !important; font-weight: 400 !important; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; -webkit-mask-image: none !important; mask-image: none !important; color: #2d2c2b !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after { content: "‹" !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { content: "›" !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev:hover, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next:hover { background: #ffc600 !important; border-color: #ffc600 !important; box-shadow: 0 10px 22px rgba(255,198,0,0.22) !important; } /* ----------------------------------------- IMAGE COUNTER ----------------------------------------- */ body.single-product .wp-gallery-counter { position: absolute !important; right: 16px !important; bottom: 16px !important; z-index: 20 !important; padding: 8px 12px !important; background: rgba(45, 44, 43, 0.88) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.3px !important; pointer-events: none !important; box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important; } } /* ========================================================= LAPTOP 1025px - 1199px ========================================================= */ @media only screen and (min-width: 1025px) and (max-width: 1199px) { body.single-product #commercegurus-pdp-gallery-wrapper { width: 548px !important; max-width: 548px !important; flex: 0 1 548px !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery.cg-layout-vertical-scroll { display: flex !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; margin: 0 !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper { order: 2 !important; flex: 0 1 480px !important; width: 480px !important; max-width: 480px !important; height: 480px !important; position: relative !important; overflow: hidden !important; margin: 0 !important; background: #f8f8f6 !important; border: 1px solid rgba(45, 44, 43, 0.08) !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.04) !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; gap: 0 !important; } body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li { display: none !important; } body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li.wp-gallery-active { display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li { display: none !important; } body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li:first-child { display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink { display: block !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border-radius: 18px !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; border-radius: 18px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper { display: block !important; order: 1 !important; flex: 0 0 58px !important; width: 58px !important; height: 480px !important; max-height: 480px !important; margin: 0 !important; padding-right: 4px !important; position: relative !important; top: auto !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; scrollbar-width: thin; scrollbar-color: #ffc600 transparent; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; transform: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { flex: 0 0 54px !important; width: 54px !important; height: 54px !important; padding: 3px !important; margin: 0 !important; background: #ffffff !important; border: 1px solid rgba(45, 44, 43, 0.12) !important; border-radius: 10px !important; overflow: hidden !important; opacity: 1 !important; box-sizing: border-box !important; cursor: pointer !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 7px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.active, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active { border: 2px solid #ffc600 !important; background: #fffdf4 !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; margin: 0 !important; background: rgba(255,255,255,.94) !important; border: 1px solid rgba(45,44,43,0.10) !important; border-radius: 50% !important; z-index: 20 !important; cursor: pointer !important; box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev { left: 12px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { right: 12px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { font-family: Arial, sans-serif !important; font-size: 27px !important; width: auto !important; height: auto !important; background: none !important; -webkit-mask-image: none !important; mask-image: none !important; color: #2d2c2b !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after { content: "‹" !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { content: "›" !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev:hover, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next:hover { background: #ffc600 !important; border-color: #ffc600 !important; } body.single-product .wp-gallery-counter { position: absolute !important; right: 13px !important; bottom: 12px !important; z-index: 20 !important; padding: 6px 10px !important; background: rgba(45,44,43,.88) !important; color: #ffffff !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; } } /* ========================================================= TABLET + MOBILE SAFETY Native CommerceKit gallery untouched ========================================================= */ @media only screen and (max-width: 1024px) { body.single-product #commercegurus-pdp-gallery-wrapper { max-width: 100% !important; } body.single-product #commercegurus-pdp-gallery img { max-width: 100% !important; height: auto !important; } } /* ========================================================= WHEELOPEDIA PDP GALLERY - FINAL FINE TUNE Desktop / Laptop only ========================================================= */ @media only screen and (min-width: 1025px) { /* ===================================================== 1. GALLERY + CONTENT GAP FIX ===================================================== */ body.single-product .product-details-wrapper { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; width: calc(100% - 48px) !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; gap: 38px !important; box-sizing: border-box !important; } /* Right content should use remaining space */ body.single-product #page div.product .summary.entry-summary { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; /* * Shoptimizer makes summary sticky by default. * We want gallery sticky instead. */ position: relative !important; top: auto !important; align-self: flex-start !important; } /* ===================================================== 2. STICKY PRODUCT IMAGE SECTION ===================================================== */ body.single-product #commercegurus-pdp-gallery-wrapper { position: sticky !important; top: 90px !important; align-self: flex-start !important; z-index: 10 !important; } /* ===================================================== 3. REMOVE COMMERCEKIT INNER BLACK ACTIVE BORDER ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.active::before, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.swiper-slide-thumb-active::before { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; } /* Remove browser focus outline inside thumb */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img { outline: none !important; } /* ===================================================== 4. SELECTED THUMBNAIL #2d2c2b ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.active, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active { border: 2px solid #2d2c2b !important; background: #ffffff !important; box-shadow: 0 4px 12px rgba(45, 44, 43, 0.10) !important; } /* ===================================================== 5. THUMBNAILS - FIT 8 CLEANLY ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper { gap: 8px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; border-radius: 11px !important; padding: 3px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img { border-radius: 7px !important; } /* ===================================================== 6. LIGHT GREY THUMBNAIL SCROLLBAR ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper { scrollbar-width: thin; scrollbar-color: #d5d5d5 #f3f3f3; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar { width: 7px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-track { background: #f2f2f2 !important; border-radius: 20px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb { background: #d2d2d2 !important; border-radius: 20px !important; border: 1px solid #f2f2f2 !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb:hover { background: #bdbdbd !important; } /* Scroll UP arrow */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-button:single-button:vertical:decrement { display: block !important; height: 12px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 5px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' fill='none' stroke='%232d2c2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* Scroll DOWN arrow */ body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-button:single-button:vertical:increment { display: block !important; height: 12px !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 8px 5px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%232d2c2b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ===================================================== 7. MAIN IMAGE Keep frame completely filled No image zoom on whole gallery hover ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transform: none !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper:hover .swiper-slide-imglink img { transform: none !important; } /* ===================================================== 8. MAIN LEFT / RIGHT ARROWS GLASS EFFECT Same normal tone Hover = only slight zoom ===================================================== */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { background: rgba(255, 255, 255, 0.62) !important; border: 1px solid rgba(255, 255, 255, 0.80) !important; color: #2d2c2b !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; box-shadow: 0 6px 18px rgba(45, 44, 43, 0.10) !important; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { color: #2d2c2b !important; } /* IMPORTANT: no yellow background on hover */ body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev:hover, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next:hover { background: rgba(255, 255, 255, 0.76) !important; border-color: rgba(255, 255, 255, 0.90) !important; box-shadow: 0 9px 22px rgba(45, 44, 43, 0.14) !important; transform: translateY(-50%) scale(1.07) !important; } /* ===================================================== 9. IMAGE COUNT - GLASS EFFECT ===================================================== */ body.single-product .wp-gallery-counter { right: 16px !important; bottom: 16px !important; padding: 8px 12px !important; background: rgba(45, 44, 43, 0.48) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 999px !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } } /* ========================================================= LAPTOP FINE TUNE 1025px - 1199px ========================================================= */ @media only screen and (min-width: 1025px) and (max-width: 1199px) { body.single-product .product-details-wrapper { width: calc(100% - 32px) !important; max-width: 1120px !important; gap: 26px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper { gap: 7px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { width: 50px !important; height: 50px !important; flex-basis: 50px !important; } body.single-product #commercegurus-pdp-gallery-wrapper { top: 80px !important; } } /* ========================================================= TABLET / MOBILE Do not apply desktop sticky/gap system ========================================================= */ @media only screen and (max-width: 1024px) { body.single-product #commercegurus-pdp-gallery-wrapper { position: relative !important; top: auto !important; } body.single-product #page div.product .summary.entry-summary { width: 100%; max-width: 100%; } } /* ========================================================= WHEELOPEDIA - FINAL RESPONSIVE GALLERY OVERRIDE Same premium gallery language on Desktop / Tablet / Mobile Brand: #ffc600 + #2d2c2b ========================================================= */ /* DESKTOP / LAPTOP: SAFE STICKY OFFSET + LAYERING */ @media only screen and (min-width: 1025px) { body.single-product #commercegurus-pdp-gallery-wrapper { position: sticky !important; top: 78px !important; align-self: flex-start !important; z-index: 2 !important; } body.admin-bar.single-product #commercegurus-pdp-gallery-wrapper { top: 110px !important; } body.single-product .product-details-wrapper { justify-content: flex-start !important; gap: 38px !important; } } /* TABLET + MOBILE: SAME PREMIUM GALLERY DESIGN */ @media only screen and (max-width: 1024px) { body.single-product .product-details-wrapper { display: block !important; width: calc(100% - 32px) !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery-wrapper { position: relative !important; top: auto !important; z-index: 1 !important; width: 100% !important; max-width: 100% !important; margin: 0 0 22px 0 !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery.cg-layout-vertical-scroll { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 12px !important; margin: 0 !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper { order: 1 !important; position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; overflow: hidden !important; background: #f8f8f6 !important; border: 1px solid rgba(45,44,43,.08) !important; border-radius: 18px !important; box-shadow: 0 10px 24px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.04) !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery { display: block !important; position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; transform: none !important; gap: 0 !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper > .cg-psp-gallery > li { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; grid-column: auto !important; } body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li, body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li { display: none !important; } body.single-product #commercegurus-pdp-gallery:not(.wp-gallery-ready) .cg-main-swiper > .cg-psp-gallery > li:first-child, body.single-product #commercegurus-pdp-gallery.wp-gallery-ready .cg-main-swiper > .cg-psp-gallery > li.wp-gallery-active { display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink { display: block !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; border-radius: 18px !important; box-sizing: border-box !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; border-radius: 18px !important; transform: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper { display: block !important; order: 2 !important; position: relative !important; top: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 3px 2px 8px !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; scrollbar-width: thin !important; scrollbar-color: rgba(170,170,170,.50) transparent !important; -webkit-overflow-scrolling: touch; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper > .swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: max-content !important; min-width: 100% !important; height: auto !important; padding: 2px 0 3px !important; margin: 0 !important; transform: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { position: relative !important; flex: 0 0 68px !important; width: 68px !important; height: 68px !important; padding: 3px !important; margin: 0 !important; background: #fff !important; border: 1px solid rgba(45,44,43,.12) !important; border-radius: 11px !important; opacity: 1 !important; overflow: hidden !important; box-sizing: border-box !important; cursor: pointer !important; transform: none !important; box-shadow: 0 2px 7px rgba(45,44,43,.05) !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 7px !important; outline: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.active, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide.swiper-slide-thumb-active { border: 2px solid #2d2c2b !important; background: #fff !important; box-shadow: 0 3px 10px rgba(45,44,43,.10) !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.active::before, body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper ul.swiper-wrapper li.swiper-slide-thumb-active::before { display: none !important; content: none !important; border: 0 !important; box-shadow: none !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar { height: 5px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-track { background: rgba(235,235,235,.35) !important; border-radius: 20px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper::-webkit-scrollbar-thumb { background: rgba(170,170,170,.50) !important; border-radius: 20px !important; border: 0 !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 50% !important; width: 42px !important; height: 42px !important; margin: 0 !important; transform: translateY(-50%) !important; background: rgba(255,255,255,.62) !important; border: 1px solid rgba(255,255,255,.80) !important; border-radius: 50% !important; color: #2d2c2b !important; box-shadow: 0 6px 18px rgba(45,44,43,.10) !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; cursor: pointer !important; z-index: 20 !important; opacity: 1 !important; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev { left: 12px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { right: 12px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { font-family: Arial,sans-serif !important; font-size: 27px !important; font-weight: 400 !important; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; -webkit-mask-image: none !important; mask-image: none !important; color: #2d2c2b !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after { content: "‹" !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { content: "›" !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev:hover, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next:hover { background: rgba(255,255,255,.76) !important; border-color: rgba(255,255,255,.90) !important; box-shadow: 0 9px 22px rgba(45,44,43,.14) !important; transform: translateY(-50%) scale(1.06) !important; } body.single-product .wp-gallery-counter { position: absolute !important; right: 13px !important; bottom: 13px !important; z-index: 20 !important; padding: 7px 11px !important; background: rgba(45,44,43,.48) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.24) !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(0,0,0,.10) !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .3px !important; pointer-events: none !important; } body.single-product #page div.product .summary.entry-summary { position: relative !important; top: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } } /* MOBILE */ @media only screen and (max-width: 767px) { body.single-product .product-details-wrapper { width: calc(100% - 24px) !important; max-width: 100% !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-slide-imglink img { border-radius: 15px !important; } body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { flex-basis: 60px !important; width: 60px !important; height: 60px !important; border-radius: 10px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { width: 38px !important; height: 38px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev { left: 10px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next { right: 10px !important; } body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-prev::after, body.single-product #commercegurus-pdp-gallery .cg-main-swiper .swiper-button-next::after { font-size: 24px !important; } } @media only screen and (max-width: 480px) { body.single-product #commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide { flex-basis: 56px !important; width: 56px !important; height: 56px !important; } body.single-product .wp-gallery-counter { right: 10px !important; bottom: 10px !important; padding: 6px 9px !important; font-size: 10px !important; } } .single-product .site-content .col-full { background-color: #fff !important; } /* ========================================================= WHEELOPEDIA - FINAL ADDITIONAL CSS Archive Full Width + Safe Single Product Desktop Container + Scoped Utilities ========================================================= */ /* ========================================================= 1. HIDE VIEW ALL PRODUCTS BUTTON - WOOLENTOR ========================================================= */ .elementor-element-f5e39c2 .wl-ps-foot-row { display: none !important; } .wl-ps-modern-v1 .wl-ps-viewall:hover { border-color: #2d2c2b !important; background: #2d2c2b !important; color: #ffffff !important; } /* ========================================================= 2. PRODUCT CATEGORY ARCHIVE ========================================================= */ /* Prevent horizontal overflow only on product category pages */ body.tax-product_cat { overflow-x: clip !important; } /* Remove Shoptimizer archive width restriction */ body.tax-product_cat .shoptimizer-archive > .col-full { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Keep archive entry content normal */ body.tax-product_cat .entry-content { position: relative !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* WooCommerce products header */ body.tax-product_cat .woocommerce-products-header { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Hide native Shoptimizer archive header */ body.tax-product_cat .shoptimizer-archive > .archive-header { display: none !important; } /* ========================================================= 3. FULL WIDTH CATEGORY BANNER Background full width Inner content centered ========================================================= */ body.tax-product_cat .elementor-element-c8fdda9 { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Keep heading + sort dropdown inside centered container */ body.tax-product_cat .elementor-element-c8fdda9 > .e-con-inner { width: calc(100% - 60px) !important; max-width: 1750px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* ========================================================= 4. PRODUCT AREA ========================================================= */ body.tax-product_cat .archive-products-inner { width: calc(100% - 60px) !important; max-width: 1750px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* ========================================================= 5. CATEGORY SORT DROPDOWN ========================================================= */ body.tax-product_cat .woolentor_archive_catalog_ordering .woocommerce-ordering { margin: 0 !important; } /* Sort dropdown */ body.tax-product_cat .woolentor_archive_catalog_ordering .woocommerce-ordering select { width: auto !important; min-width: 225px !important; height: 48px !important; padding: 0 44px 0 16px !important; font-family: "Futura PT", sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 48px !important; color: #ffffff !important; background-color: #2d2c2b !important; border: 0 !important; border-radius: 5px !important; outline: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 11px auto !important; cursor: pointer !important; box-sizing: border-box !important; transition: background-color 0.2s ease, box-shadow 0.2s ease !important; } /* Hover */ body.tax-product_cat .woolentor_archive_catalog_ordering .woocommerce-ordering select:hover { background-color: #171717 !important; } /* Focus */ body.tax-product_cat .woolentor_archive_catalog_ordering .woocommerce-ordering select:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(255, 197, 1, 0.28) !important; } /* ========================================================= 6. CUSTOM SECTIONS ========================================================= */ .wc-premium-categories, .wp-wheelopedia-cta, .wp-trust-premium { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; left: auto !important; right: auto !important; box-sizing: border-box !important; } /* Slider viewport */ .wc-category-viewport, .wp-trust-viewport { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* Slider tracks */ .wc-category-grid, .wp-trust-track { box-sizing: border-box !important; } /* Images inside only custom sections */ .wc-premium-categories img, .wp-wheelopedia-cta img, .wp-trust-premium img { max-width: 100%; height: auto; } /* Elementor HTML widgets */ .elementor-widget-html, .elementor-widget-html > .elementor-widget-container { max-width: 100%; } /* ========================================================= 7. SINGLE PRODUCT BUTTONS ========================================================= */ body.single-product .single_add_to_cart_button { margin-left: 0 !important; display: block; margin-bottom: 12px; } /* Get A Quote button */ body.single-product .wpb-get-a-quote-button-form-fire.wpb-get-a-quote-button-btn-large.wpb-get-a-quote-button-btn.wpb-get-a-quote-button-btn-default { padding: 16px 18px; position: relative !important; width: calc(100% - 90px); text-align: center !important; display: inline-block; } /* Book button */ body.single-product .book-btn { background-color: #FFCC02; padding: 12px; position: relative !important; width: calc(100% - 90px); text-align: center !important; display: inline-block; color: #303B89; border-radius: 4px; font-weight: 600; margin-bottom: 10px; } body.single-product .book-btn:hover { background-color: #EDC00C; color: #303B89; } /* ========================================================= 8. SINGLE PRODUCT GENERAL ========================================================= */ body.single-product h2.yikes-custom-woo-tab-title { display: none !important; } body.single-product .product_meta { display: none !important; } /* Product label */ .product-label.type-bubble, li.product .onsale { right: 10px; left: auto; } /* Cart thumbnail */ table.cart .product-thumbnail img { max-width: 100px !important; } /* ========================================================= 9. CHECKOUT ========================================================= */ body.woocommerce-checkout .form-row label { margin-top: 18px; } body.woocommerce-checkout #billing_last_name_field { margin-bottom: 18px; } body.woocommerce-checkout p#billing_country_field { display: none; } body.woocommerce-checkout #order_comments_field { display: none; } /* ========================================================= 10. REVIEWS ========================================================= */ .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review { background-color: #303B89; } .cr-all-reviews-shortcode .cr-review-form-wrap .cr-review-form-buttons .cr-review-form-submit { background-color: #303B89; } .cr-all-reviews-shortcode .cr-summaryBox-wrap .cr-add-review-wrap .cr-all-reviews-add-review:hover { background-color: #303B89; } /* ========================================================= 11. WHATSAPP BUTTON ========================================================= */ body.single-product .wa-res-container { display: inline-block !important; clear: both !important; width: 100% !important; margin: 12px 0 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.single-product .wa-custom-btn { background-color: #FFCC02 !important; color: #303B89 !important; padding: 12px !important; position: relative !important; width: calc(100% - 90px) !important; text-align: center !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 4px; font-weight: 600; text-decoration: none !important; height: 48px; box-sizing: border-box !important; border: none !important; } body.single-product .wa-res-icon { width: 30px !important; height: 30px !important; margin-right: 10px !important; } /* ========================================================= 12. PRODUCT GALLERY ========================================================= */ body.single-product .woocommerce-product-gallery img { -webkit-user-drag: none !important; -webkit-touch-callout: none !important; user-select: none !important; -webkit-user-select: none !important; } body.single-product .woocommerce-product-gallery .flex-control-thumbs img { cursor: pointer !important; } /* ========================================================= 13. SINGLE PRODUCT DESKTOP CONTAINER Desktop/laptop only (1025px+) Keeps global header/site width untouched. Uses the actual Shoptimizer DOM: #content.site-content > .shoptimizer-archive > .col-full ========================================================= */ @media only screen and (min-width: 1025px) { body.single-product #content.site-content > .shoptimizer-archive > .col-full { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } } /* ========================================================= 14. MOBILE ========================================================= */ @media only screen and (max-width: 767px) { /* Archive banner inner spacing */ body.tax-product_cat .elementor-element-c8fdda9 > .e-con-inner { width: calc(100% - 30px) !important; } /* Archive products spacing */ body.tax-product_cat .archive-products-inner { width: calc(100% - 30px) !important; } /* Sort dropdown */ body.tax-product_cat .woolentor_archive_catalog_ordering .woocommerce-ordering select { min-width: 205px !important; height: 44px !important; line-height: 44px !important; font-size: 14px !important; padding-left: 14px !important; padding-right: 40px !important; } } /* ========================================================= 15. SMALL MOBILE ========================================================= */ @media only screen and (max-width: 600px) { body.single-product .single_add_to_cart_button { margin-left: 0 !important; width: 100% !important; } body.single-product .wpb-get-a-quote-button-form-fire.wpb-get-a-quote-button-btn-large.wpb-get-a-quote-button-btn.wpb-get-a-quote-button-btn-default { width: 100% !important; display: inline-block; } body.theme-shoptimizer .site-header .custom-logo-link img, body.wp-custom-logo .site-header .custom-logo-link img { height: 28px !important; } body.single-product .book-btn { position: relative !important; width: 100% !important; display: inline-block; } .socialicon { display: none; } body.single-product .wa-res-container { margin: 10px 0 !important; } body.single-product .wa-custom-btn { width: 100% !important; display: flex !important; margin-left: 0 !important; } } /* ========================================================= 16. DESKTOP LOGO ========================================================= */ @media only screen and (min-width: 1025px) { body.theme-shoptimizer .site-header .custom-logo-link img, body.wp-custom-logo .site-header .custom-logo-link img { height: 42px !important; } } /* ========================================================= 17. MOBILE FORM FONT FIX ========================================================= */ @media only screen and (max-device-width: 768px) and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5) { input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, .checkout .input-text { font-family: Arial, sans-serif; } body.single-product .woocommerce-message .message-inner .buttons-wrapper a span { border-bottom: 0 !important; } }