/* =========================== WooCommerce Single Product =========================== */ /* ══ WCGS Fancybox Lightbox ══════════════════════════════════════ Plugin: Gallery Slider for WooCommerce (uses @fancyapps/ui) Key selectors: .fancybox__container — outer wrapper .fancybox__toolbar — top bar (close button lives here) .fancybox__nav — prev/next arrow area .f-button.is-close-btn — X close button .f-button.is-prev / .f-button.is-next — arrows .fancybox__infobar — "1 / 3" counter ════════════════════════════════════════════════════════════════ */ /* ── CSS variable overrides ──────────────────────────────────── */ .fancybox__container { --f-button-bg: transparent; /* ไม่มี bg ทุก state */ --f-button-hover-bg: transparent; --f-button-active-bg: transparent; --f-button-shadow: none; } /* ── All .f-button — transparent ทุก state, ลบ svg filter ───── */ .fancybox__container .f-button { background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } .fancybox__container .f-button:hover, .fancybox__container .f-button:active, .fancybox__container .f-button:focus { background: transparent !important; outline: none; } .fancybox__container .f-button svg { filter: none !important; } /* ── 3. Counter "1/3" — ซ่อน, dots จะถูก inject โดย JS ─────── */ .fancybox__infobar { display: none !important; } /* ── Dot navigation (inject โดย woo-product-single.js) ─────── */ .wwc-fancybox-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; z-index: 30; pointer-events: none; } .wwc-fancybox-dots .wwc-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transition: background 0.2s, transform 0.2s; cursor: pointer; pointer-events: all; flex-shrink: 0; } .wwc-fancybox-dots .wwc-dot.is-active { background: #ffffff; transform: scale(1.3); } /* ── wcgs gallery preloader flash fix ─────────────────────────── wcgs shows .wcgs-gallery-preloader (white overlay) when rebuilding gallery after variation change / add-to-cart reset. The 600ms hidePreloader timeout causes a visible white flash. Making background transparent keeps preloader functional but invisible. ──────────────────────────────────────────────────────────────── */ .wcgs-gallery-preloader { background-color: transparent !important; background-image: none !important; } /* ── Elementor lightbox conflict fix ──────────────────────────── wcgs (gallery-slider-for-woocommerce) opens Fancybox which adds .has-fancybox on . Elementor's own lightbox also opens briefly → causes black flash on open/close. Hide it immediately via CSS so JS removal by wcgs is invisible. ──────────────────────────────────────────────────────────────── */ body.has-fancybox .elementor-lightbox { display: none !important; } /* ══ Single Product — Add to Cart button states ══════════════════ Normal: black bg + white text (from theme/Elementor). Hover / loading (AJAX) / added: white bg + black border + black text. Override WooCommerce + Hello Elementor defaults (purple loading state). ══════════════════════════════════════════════════════════════════ */ .single_add_to_cart_button:hover, .single_add_to_cart_button:focus, .single_add_to_cart_button.loading, .single_add_to_cart_button.added { background-color: #fff !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; } /* Checkmark icon on button after successful add (replaces WooCommerce default) */ .single_add_to_cart_button.added::before { content: '' !important; display: inline-block !important; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; vertical-align: middle; margin-right: 6px; margin-bottom: 1px; } .single_add_to_cart_button.added::after { display: none !important; content: none !important; } /* Align button, spinner, and eye icon on the same baseline */ .single-product form.cart { display: flex; align-items: center; flex-wrap: wrap; /*gap: 8px;*/ } /* Loading spinner — outside button, same slot as eye icon */ .wwc-atc-spinner { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; } .wwc-atc-spinner::before { content: ''; width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.15); border-top-color: #000; border-radius: 50%; animation: wwc-spin 0.6s linear infinite; } @keyframes wwc-spin { to { transform: rotate(360deg); } } /* "View cart" link injected by WooCommerce AJAX next to the button: icon-only eye button, matching woo-loop-add-to-cart.css archive style */ .woocommerce-product-details__short-description ~ * .added_to_cart, form.cart ~ .added_to_cart, .product-type-simple .added_to_cart, .single-product .added_to_cart.wc-forward { font-size: 0 !important; width: 36px !important; height: 36px !important; min-width: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; transition: background .2s; margin-left: 5px; } .single-product .added_to_cart.wc-forward:hover { background: rgba(0,0,0,.07) !important; } .single-product .added_to_cart.wc-forward::before { content: ''; display: block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23000'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } /* ── Hide magnifier/zoom icon on mobile (tap-to-open handled by JS) */ @media (max-width: 767px) { .wcgs-zoom-icon, .wcgs-slider-lightbox-icon, .wcgs-magnifier-icon { display: none !important; } } /* ══ Elementor Pro Lightbox (fallback) ══════════════════════════ */ .elementor-slideshow__counter { display: none !important; } .elementor-swiper-button-prev, .elementor-swiper-button-next { box-shadow: none !important; text-shadow: none !important; -webkit-tap-highlight-color: transparent; } .elementor-swiper-button-prev:hover, .elementor-swiper-button-next:hover, .elementor-swiper-button-prev:active, .elementor-swiper-button-next:active, .elementor-swiper-button-prev:focus, .elementor-swiper-button-next:focus { background: transparent !important; color: inherit !important; outline: none; } .dialog-close-button:hover { background: transparent !important; }