/* ========================================================= FITZ PDP — PRODUCT PAGE STYLES Loaded only on single product pages (is_product()). Desktop >= 1025px : 2-column image grid Tablet 768–1024px : single-column vertical stack Mobile <= 767px : native Woo slider + custom pill dots Gallery selectors are scoped to .woocommerce-product-gallery so they cannot break if an Elementor class is renamed. Sticky selectors use # (IDs) because fitz-pdp-info and fitz-pdp-row are entered in Elementor's CSS ID field, not CSS Classes. ========================================================= */ /* ========================================================= GLOBAL — NO THUMBNAILS, NO ARROWS, ANY DEVICE ========================================================= */ .woocommerce-product-gallery .flex-control-nav, .woocommerce-product-gallery .flex-control-thumbs, .woocommerce-product-gallery .woocommerce-product-gallery__thumbnails, .woocommerce-product-gallery .flex-direction-nav, .woocommerce div.product .flex-control-thumbs, .woocommerce div.product .woocommerce-product-gallery__thumbnails { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Gallery container fills its Elementor column everywhere */ .woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* ========================================================= DESKTOP — 2 COLUMN IMAGE GRID 1025px and up ========================================================= */ @media (min-width: 1025px) { /* Neutralise the FlexSlider viewport */ .woocommerce-product-gallery .flex-viewport { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; position: static !important; transition: none !important; } /* 2-column grid */ .woocommerce-product-gallery__wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; transition: none !important; } /* Each slide becomes a grid cell */ .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; position: relative !important; left: auto !important; top: auto !important; /* FlexSlider fade/slide leftovers */ opacity: 1 !important; z-index: auto !important; } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; } /* FlexSlider duplicates the first/last slide */ .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.clone { display: none !important; } /* No dots on desktop */ .woocommerce-product-gallery .custom-dots { display: none !important; } } /* ========================================================= TABLET — SINGLE COLUMN VERTICAL STACK 768px – 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .woocommerce-product-gallery .flex-viewport { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; position: static !important; transition: none !important; } .woocommerce-product-gallery__wrapper { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; transition: none !important; } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; clear: both !important; margin: 0 0 4px 0 !important; padding: 0 !important; position: static !important; left: auto !important; top: auto !important; opacity: 1 !important; z-index: auto !important; } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image.clone { display: none !important; } /* No dots on tablet */ .woocommerce-product-gallery .custom-dots { display: none !important; } } /* ========================================================= MOBILE — NATIVE SLIDER + PILL DOTS 767px and below ========================================================= */ @media (max-width: 767px) { /* IMPORTANT: no layout overrides here. FlexSlider must keep its own inline widths and transforms for swiping to work. */ .woocommerce-product-gallery .custom-dots { display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; margin-top: 8px; flex-wrap: nowrap; } .woocommerce-product-gallery .custom-dots .dot { width: 4px; height: 4px; padding: 0; background: #3A3A3A; border: none; border-radius: 50%; cursor: pointer; transition: all 0.4s ease; flex: 0 0 auto; opacity: 0.60; } .woocommerce-product-gallery .custom-dots .dot.active { width: 10px; border-radius: 8px; background: #121212; opacity: 1; } } /* ========================================================= SAFETY — DOTS NEVER SHOW ABOVE MOBILE ========================================================= */ @media (min-width: 768px) { .woocommerce-product-gallery .custom-dots { display: none !important; } } /* ========================================================= STICKY PRODUCT INFO — DESKTOP + TABLET ONLY The info column pins while the gallery scrolls past it, then releases and scrolls with the page once the gallery ends. Requires #fitz-pdp-row to be the DIRECT parent of #fitz-pdp-info, with no ancestor using overflow: hidden or a transform (either one silently kills sticky). --fitz-sticky-top is the gap from the top of the viewport where the panel catches. Set it to your sticky header's height plus a little breathing room. Change it in ONE place below. ========================================================= */ :root { --fitz-sticky-top: 100px; } @media (min-width: 768px) { #fitz-pdp-row { align-items: flex-start !important; } #fitz-pdp-info { position: sticky !important; top: var(--fitz-sticky-top) !important; align-self: flex-start !important; } } /* ========================================================= OUT-OF-STOCK SIZE SWATCHES Matches the fitZ carousel treatment: faded, struck through, and not clickable. The .fitz-oos class is applied by pdp.js from the variation stock data. ========================================================= */ .variations_form .variable-item.fitz-oos { opacity: 0.35; pointer-events: none; cursor: not-allowed; } .variations_form .variable-item.fitz-oos .variable-item-span { text-decoration: line-through !important; } /* ========================================================= HIDE NATIVE STOCK TEXT + CLEAR BUTTON Availability is communicated by the crossed-out swatches above, so Woo's own "In stock" line and Clear link are redundant here. ========================================================= */ .woocommerce div.product form.cart .woocommerce-variation-availability, .woocommerce div.product form.cart .reset_variations { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }