/* ========================================================================== Munna Watches — Futuristic Product Page Sticky media column (left) + scrolling content column (right) that travels through info / description / tabs / "You may also like", then releases at the end of that block — same behaviour as the Nixon.com reference screenshots. Loaded after css/style.css so these rules win on equal specificity via source order + a couple of targeted !important escapes only where the base theme uses inline/very-specific selectors. ========================================================================== */ /* Hidden thumbnail rail — kept in the markup only so Slick's asNavFor has a real element to sync against (see the gallery include's comment). Deliberately UNSCOPED to any media query so it's hidden at every screen width, not just desktop. */ .mw-product-futuristic .bb-product-gallery-thumbnails.mw-hidden-thumbnail-nav { display: none !important; position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .mw-product-futuristic { --mw-bg: #0b0d12; --mw-surface: #ffffff; --mw-surface-soft: #f6f7fb; --mw-ink: #10131a; --mw-ink-soft: #5b6272; --mw-line: #e7e9f0; --mw-accent-a: #5b8cff; --mw-accent-b: #7b5bff; --mw-accent-c: #00e0c6; --mw-accent-grad: linear-gradient(115deg, var(--mw-accent-a) 0%, var(--mw-accent-b) 55%, var(--mw-accent-c) 100%); --mw-glow: 0 0 0 1px rgba(16, 19, 26, 0.06), 0 20px 45px -20px rgba(16, 19, 26, 0.35); --mw-radius-lg: 22px; --mw-radius-md: 14px; --mw-radius-sm: 10px; --mw-ease: cubic-bezier(0.22, 1, 0.36, 1); color: var(--mw-ink, #10131a); } @media (prefers-reduced-motion: reduce) { .mw-product-futuristic * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Smooth-scroll is enabled via JS (scoped to this page only) so it works reliably regardless of :has() support — see product-futuristic.js */ /* -------------------------------------------------------------------- Layout shell -------------------------------------------------------------------- */ .ps-page--product { padding-top: 44px; padding-bottom: 20px; } .mw-product-futuristic.ps-product--fullwidth { padding: 0; } /* The floating "mini product bar" (thumbnail + title + price + Add to cart) that used to slide in over the page while scrolling — this markup (header-product-page.blade.php, output via Theme::set('topHeader', ...) in views/ecommerce/product.blade.php) is rendered ONLY on the product page, so hiding it here can't affect any other page. */ .header--product, .ps-product--header-sticky { display: none !important; } /* No sidebar/ad column on this layout — the media+content pair uses the full container width, matching the Nixon reference. !important because the base rule (.ps-page__left{max-width:calc(100% - 290px)}) was left over from when a 290px sidebar sat next to it — without forcing this, removing that sidebar's markup just leaves .ps-page__left stuck at its old narrower width with dead flex space where the sidebar used to be, instead of expanding to fill it. Scoped three different ways on purpose, not just body#product-page: confirmed via DevTools that the free space persisted even with !important, which means that selector had stopped matching at all (most likely the header rework changed how/whether the tag gets its id). .ps-page--product is visible directly in the DOM tree screenshot, and :has(.mw-product-futuristic) is tied to a class this file adds itself, so at least one of these is guaranteed to match regardless of what happens to the body tag. */ body#product-page .ps-page__left, .ps-page--product .ps-page__left, .ps-page__left:has(.mw-product-futuristic) { max-width: 100% !important; flex: 0 0 100% !important; padding-right: 0 !important; } body#product-page .ps-page__right, .ps-page--product .ps-page__right, .ps-page__container:has(.mw-product-futuristic) .ps-page__right { display: none !important; } /* The actual two-column grid, the sticky gallery positioning and every gallery visual rule now live in ONE place only — the "NIXON PDP LAYOUT V3" block near the end of this file. This used to be a second, separate flex-based attempt at the same layout; keeping two competing systems in the same stylesheet (plus a THIRD one that had drifted into nixon-skin.css's source copy, hardcoding 680px/110px regardless of viewport) is exactly what made the sticky column unreliable. If you need to change the sticky/grid mechanics, edit the V3 block — nowhere else. */ .mw-sticky-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; } /* -------------------------------------------------------------------- Countdown / sold-items promo box — compact + monochrome, fits the narrow column instead of the plugin's oversized default box. -------------------------------------------------------------------- */ .mw-scroll-content .ps-product__countdown { padding: 16px; background: var(--mw-surface-soft, #f6f7fb); border: 1px solid var(--mw-line, #e7e9f0); border-radius: var(--mw-radius-md); margin-bottom: 18px; } .mw-scroll-content .ps-product__countdown .ps-countdown li { background: var(--mw-surface, #ffffff); border: 1px solid var(--mw-line, #e7e9f0); border-radius: 8px; } .mw-scroll-content .ps-product__countdown .ps-countdown li span { color: var(--mw-ink, #10131a); font-size: 1.1rem; } .mw-scroll-content .ps-product__progress-bar.ps-progress { background: var(--mw-line, #e7e9f0); } .mw-scroll-content .ps-product__progress-bar .ps-progress__value span { background: var(--mw-ink, #10131a); } /* -------------------------------------------------------------------- Cross-sale ("Frequently Bought Together") + up-sale ("Buy Together & Save") plugin widgets. These are AJAX-lazy-loaded (data-bb-toggle="block-lazy-loading") and the cross-sale carousel is Slick, whose responsive "slidesToShow" breakpoints key off window width, not the width of the column it's actually rendered in — so in our ~38% column it tries to lay out 4-5 full-size (220px) cards and overflows. Real class names below (verified against the plugin source, not guessed) with !important throughout: both widgets render inside an internal Bootstrap `.container` and Slick sets inline widths via JS, so normal specificity/cascade can't be relied on here — !important is the correct tool for overriding third-party plugin + JS-set inline styles reliably regardless of load order. -------------------------------------------------------------------- */ /* Hard width containment — guarantees no visual overflow no matter what Slick computes internally, at every level of nesting. width (not just max-width) matters here: every slide has flex-shrink:0 (so individual cards can't get squeezed thinner than their own 150px cap), so if this row's own box is ever left to "auto" instead of a hard 100%, the flex row can push past its parent's edge before overflow:hidden gets a chance to clip it — that's what was dragging the whole page wider than the viewport at normal zoom and pulling unrelated content (the "Add Selected to Cart" button) off-screen along with it. */ .mw-scroll-content .ec-cross-sale-section, .mw-scroll-content .ec-cross-sale-section .container, .mw-scroll-content .ec-cross-sale-wrapper, .mw-scroll-content .ec-cross-sale-slider, .mw-scroll-content .ec-cross-sale-carousel, .mw-scroll-content .ec-cross-sale-carousel .slick-list, .mw-scroll-content .ec-cross-sale-carousel .slick-track, .mw-scroll-content .ec-upsell-bundle, .mw-scroll-content .ec-upsell-bundle .container, .mw-scroll-content .ec-upsell-bundle-wrapper, .mw-scroll-content .ec-upsell-bundle-item, .mw-scroll-content .ec-upsell-bundle-item-inner { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mw-scroll-content .ec-cross-sale-section .container, .mw-scroll-content .ec-upsell-bundle .container { padding-left: 0 !important; padding-right: 0 !important; } /* Desktop only, this one element specifically — mobile keeps the 100% width from the shared rule above untouched. */ @media (min-width: 1200px) { .mw-scroll-content .ec-upsell-bundle-wrapper { width: 50% !important; max-width: 50% !important; } } .mw-scroll-content .ec-cross-sale-slider, .mw-scroll-content .ec-cross-sale-carousel, .mw-scroll-content .ec-cross-sale-carousel .slick-list, .mw-scroll-content .ec-cross-sale-carousel .slick-track { overflow: hidden !important; } /* Cap each slide's width regardless of Slick's inline style or the pre-init flex fallback (both default to 220px). */ .mw-scroll-content .ec-cross-sale-carousel:not(.slick-initialized) .ec-cross-sale-slide, .mw-scroll-content .ec-cross-sale-carousel.slick-initialized .slick-slide, .mw-scroll-content .ec-cross-sale-slide { flex: 0 0 150px !important; width: 150px !important; max-width: 150px !important; min-width: 0 !important; } .mw-scroll-content .ec-cross-sale-card-inner { padding: 10px !important; } .mw-scroll-content .ec-cross-sale-name { font-size: 12.5px !important; } .mw-scroll-content .ec-cross-sale-arrows { top: -56px !important; } /* Up-sell bundle rows: the earlier flex-wrap override here assumed a much narrower column than what's actually rendering (confirmed via DevTools: the column is ~1230px wide, plenty of room for the plugin's default single-row layout). Forcing flex-wrap + an unbounded flex-grow on the info block was pushing the per-item "add" button and the footer's "Add Selected to Cart" button onto their own line and out past the visible area — that was the actual cause of the "half cut" section, not a caching issue. Removed; the plugin's own layout already fits comfortably at this width. Only keep a safety-net max-width so nothing can ever force the column wider than its container, same as everything else in this section. -------------------------------------------------------------------- */ .mw-scroll-content .ec-upsell-bundle-footer, .mw-scroll-content .ec-upsell-add-btn, .mw-scroll-content .ec-upsell-bundle-action { max-width: 100%; } /* The footer (total + "Add Selected to Cart") was being pushed fully off-screen when it didn't fit on one line — flex-shrink:0 (above, previously) stopped it shrinking OR wrapping, so it just overflowed invisibly instead. Letting it wrap guarantees the button is always visible, worst case on its own line below the total. */ .mw-scroll-content .ec-upsell-bundle-footer { flex-wrap: wrap !important; gap: 12px !important; } .mw-scroll-content .ec-upsell-bundle-add-all { max-width: 100%; flex-shrink: 1; } /* Monochrome retheme — real selectors this time, verified against platform/plugins/ecommerce/public/css/front-upsale-crosssale.css. Reference design doesn't have anything like these boxed widgets at all, so rather than trying to force them into that exact look (they add real value — bundle discounts — so removing them isn't right either), toning the box down to feel like a quiet, natural part of the page instead of a loud card competing for attention. */ .mw-scroll-content .ec-cross-sale-wrapper, .mw-scroll-content .ec-upsell-bundle-wrapper { background: transparent !important; border: none !important; border-top: 1px solid var(--mw-line, #e7e9f0) !important; border-radius: 0 !important; padding-top: 24px !important; box-shadow: none !important; } .mw-scroll-content .ec-cross-sale-icon, .mw-scroll-content .ec-upsell-bundle-icon { background: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-cross-sale-title h4, .mw-scroll-content .ec-upsell-bundle-title h4 { color: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-cross-sale-price-current, .mw-scroll-content .ec-upsell-price-sale, .mw-scroll-content .ec-upsell-total-price { color: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-cross-sale-add-btn, .mw-scroll-content .ec-upsell-bundle-add-all { background: var(--mw-ink, #10131a) !important; color: #fff !important; } .mw-scroll-content .ec-cross-sale-add-btn svg, .mw-scroll-content .ec-upsell-bundle-add-all svg { color: #fff !important; stroke: #fff !important; } .mw-scroll-content .ec-cross-sale-add-btn:hover, .mw-scroll-content .ec-upsell-bundle-add-all:hover:not(:disabled) { background: #000 !important; color: #fff !important; box-shadow: none !important; transform: none !important; } .mw-scroll-content .ec-cross-sale-card-inner:hover { border-color: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-cross-sale-name a:hover { color: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-cross-sale-plus svg { color: var(--mw-ink, #10131a) !important; } /* This "+" badge is positioned at top:50% of the whole card's height (thumb + name + price + button stacked) — fine at the plugin's original ~220px card height, but our narrower cards are taller relative to their width, so 50% lands mid-text instead of over the thumbnail. Hiding it; it's a connector/divider affordance the reference design doesn't have anyway. */ .mw-scroll-content .ec-cross-sale-plus { display: none !important; } .mw-scroll-content .ec-cross-sale-arrows .slick-arrow:hover:not(.slick-disabled) { background: var(--mw-ink, #10131a) !important; border-color: var(--mw-ink, #10131a) !important; color: #fff !important; } .mw-scroll-content .ec-upsell-bundle-item:hover { border-color: var(--mw-ink, #10131a) !important; box-shadow: none !important; } .mw-scroll-content .ec-upsell-checkbox:checked ~ .ec-upsell-checkmark, .mw-scroll-content .ec-upsell-bundle-checkbox input[type='checkbox']:checked ~ .ec-upsell-checkmark { background-color: var(--mw-ink, #10131a) !important; border-color: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-upsell-discount-badge { background: var(--mw-ink, #10131a) !important; } .mw-scroll-content .ec-upsell-add-btn:hover { background: var(--mw-ink, #10131a) !important; border-color: var(--mw-ink, #10131a) !important; } /* -------------------------------------------------------------------- Info column typography -------------------------------------------------------------------- */ .mw-scroll-content > h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 10px; } .mw-scroll-content .ps-product__meta { border-bottom: none; padding-bottom: 0; margin-bottom: 6px; color: var(--mw-ink-soft, #5b6272); } .mw-scroll-content .ps-product__price { display: inline-flex; align-items: baseline; gap: 10px; font-size: 1.65rem; font-weight: 700; color: var(--mw-ink, #10131a); margin: 6px 0 18px; } .mw-scroll-content .ps-product__price del, .mw-scroll-content .ps-product__price .price-old { font-weight: 400; font-size: 1.05rem; color: var(--mw-ink-soft, #5b6272); } .mw-scroll-content .ps-product__desc { color: var(--mw-ink-soft, #5b6272); line-height: 1.7; padding-bottom: 18px; border-bottom: 1px solid var(--mw-line, #e7e9f0); margin-bottom: 18px; } /* -------------------------------------------------------------------- Shopping form -------------------------------------------------------------------- */ .mw-scroll-content .ps-product__shopping { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0; background: transparent; border: none; margin-bottom: 22px; } .mw-scroll-content .form-group--number.product__qty { display: inline-flex !important; flex-direction: row !important; align-items: center !important; flex-shrink: 0; border-radius: 999px; background: var(--mw-surface, #ffffff); border: 1px solid var(--mw-line, #e7e9f0); padding: 3px; position: relative; gap: 2px; height: auto !important; } /* The base theme positions .up/.down with their own (icon-font dependent) styling, which was rendering as a solid dark blob instead of a +/- control in this context — most likely the icon font glyph itself, not something recoverable by re-theming colors. Forced to static positioning with explicit flex order, and the icon glyph itself is hidden and replaced with a plain +/- character via ::before so it can't depend on an icon font resolving at all. Also forcing top/float/vertical-align/align-self explicitly — the base theme's version of these buttons was floating above the pill container rather than sitting inside it, most likely a leftover absolute-positioning offset that isn't fully neutralised just by switching position to static. */ .mw-scroll-content .form-group--number.product__qty .up, .mw-scroll-content .form-group--number.product__qty .down { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; float: none !important; vertical-align: middle !important; align-self: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: none !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: normal !important; transition: background 0.2s var(--mw-ease), color 0.2s var(--mw-ease); } .mw-scroll-content .form-group--number.product__qty .down { order: 1; } .mw-scroll-content .form-group--number.product__qty .qty-input { order: 2; align-self: center !important; } .mw-scroll-content .form-group--number.product__qty .up { order: 3; } .mw-scroll-content .form-group--number.product__qty .up i, .mw-scroll-content .form-group--number.product__qty .down i { font-size: 0 !important; width: 14px; height: 14px; position: relative; display: inline-block; } .mw-scroll-content .form-group--number.product__qty .up i::before, .mw-scroll-content .form-group--number.product__qty .down i::before { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 600; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--mw-ink, #10131a); } .mw-scroll-content .form-group--number.product__qty .up i::before { content: '+'; } .mw-scroll-content .form-group--number.product__qty .down i::before { content: '\2212'; } /* Bug fix: the base rule above sets `background: transparent !important` on .up/.down (needed so nothing else can force a stray background onto the resting state). CSS `!important` always beats a non-`!important` declaration no matter how specific or how much later it appears in the file — so these two hover rules previously had no `!important` and were silently losing that fight. Net effect: the icon-color rule below WAS winning (nothing else contests `color`), flipping the +/- glyph to white on hover, while the background rule was discarded and stayed transparent — a white glyph on a transparent/white pill, i.e. invisible. Adding `!important` here is what actually lets the dark hover circle show up behind the now-white glyph. */ .mw-scroll-content .form-group--number.product__qty .up:hover, .mw-scroll-content .form-group--number.product__qty .down:hover { background: var(--mw-ink, #10131a) !important; } .mw-scroll-content .form-group--number.product__qty .up:hover i::before, .mw-scroll-content .form-group--number.product__qty .down:hover i::before { color: #fff !important; } .mw-scroll-content .form-group--number.product__qty .qty-input { width: 34px !important; min-width: 34px; text-align: center; border: none !important; background: transparent !important; color: var(--mw-ink, #10131a) !important; font-weight: 600; font-size: 0.9rem; padding: 0 !important; -moz-appearance: textfield; } .mw-scroll-content .form-group--number.product__qty .qty-input::-webkit-outer-spin-button, .mw-scroll-content .form-group--number.product__qty .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mw-scroll-content .add-to-cart-button.ps-btn { flex-shrink: 1; min-width: 0; border: none; border-radius: 6px; padding: 13px 18px; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.01em; background: var(--mw-ink, #10131a); color: #fff; box-shadow: none; white-space: nowrap; transition: transform 0.2s var(--mw-ease), background 0.2s var(--mw-ease); } .mw-scroll-content .add-to-cart-button.ps-btn:hover { background: #000; transform: translateY(-1px); } .mw-scroll-content .add-to-cart-button.ps-btn:active { transform: translateY(0); } .mw-scroll-content .ps-product__actions { display: inline-flex; flex-shrink: 0; } .mw-scroll-content .ps-product__actions a { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--mw-line, #e7e9f0); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s var(--mw-ease), color 0.2s var(--mw-ease), transform 0.2s var(--mw-ease); } .mw-scroll-content .ps-product__actions a:hover { border-color: var(--mw-ink, #10131a); color: var(--mw-ink, #10131a); transform: translateY(-2px); } /* At genuinely narrow widths even the compacted version can't hold 4 elements on one line — better to wrap cleanly than clip. */ @media (max-width: 420px) { .mw-scroll-content .ps-product__shopping { flex-wrap: wrap; } } /* -------------------------------------------------------------------- Specification / sharing chips -------------------------------------------------------------------- */ .mw-scroll-content .ps-product__specification { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.85rem; color: var(--mw-ink-soft, #5b6272); margin-bottom: 14px; } .mw-scroll-content .ps-product__sharing { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--mw-line, #e7e9f0); } .mw-scroll-content .ps-product__sharing a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mw-line, #e7e9f0); display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s var(--mw-ease); } .mw-scroll-content .ps-product__sharing a:hover { background: var(--mw-ink, #10131a); border-color: transparent; color: #fff; transform: translateY(-2px); } /* -------------------------------------------------------------------- Tabs — description / specification / reviews / faq — now rendered as a full-width section BELOW the sticky media/content pair (once the sticky pairing has ended), not squeezed into the narrow column. -------------------------------------------------------------------- */ .mw-full-tabs-wrap { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--mw-line, #e7e9f0); } .mw-full-tabs-wrap .ps-product__content.ps-tab-root { margin-top: 0; padding-top: 0; border-top: none; } .mw-full-tabs-wrap .ps-tab-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; padding: 5px; background: var(--mw-surface-soft, #f6f7fb); border-radius: 999px; border-bottom: none; max-width: fit-content; } .mw-full-tabs-wrap .ps-tab-list li a { border-radius: 999px; padding: 11px 22px; font-size: 0.9rem; font-weight: 600; color: var(--mw-ink-soft, #5b6272); transition: color 0.25s var(--mw-ease), background 0.25s var(--mw-ease); } .mw-full-tabs-wrap .ps-tab-list li a:before { display: none; } .mw-full-tabs-wrap .ps-tab-list li.active a, .mw-full-tabs-wrap .ps-tab-list li a:hover { color: var(--mw-ink, #10131a); background: var(--mw-surface, #ffffff); box-shadow: 0 6px 16px -8px rgba(16, 19, 26, 0.25); } .mw-full-tabs-wrap .ps-tab p, .mw-full-tabs-wrap .ps-tab li { color: var(--mw-ink-soft, #5b6272); line-height: 1.75; } /* Keep long-form text readable instead of stretching edge-to-edge now that this section spans the full container width. */ .mw-full-tabs-wrap .ps-document, .mw-full-tabs-wrap #tab-specification, .mw-full-tabs-wrap #tab-vendor { max-width: 900px; } /* -------------------------------------------------------------------- "You may also like" (2nd instance) — full-width section below the description/specification/reviews tabs, above the footer. Separate from .mw-related-products (which lives inside the narrow sticky right column further up the page) — this is a second, independent occurrence of the same carousel, deliberately wider so it can show 4 cards per row on desktop instead of 2. -------------------------------------------------------------------- */ .mw-product-futuristic .mw-related-products-secondary { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--mw-line, #e7e9f0); } .mw-product-futuristic .mw-related-products-secondary .ps-section__header h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 18px; position: relative; display: inline-block; } .mw-product-futuristic .mw-related-products-secondary .ps-section__header h3:after { content: ''; position: absolute; left: 0; bottom: -8px; width: 44px; height: 3px; border-radius: 3px; background: var(--mw-ink, #10131a); } .mw-product-futuristic .mw-related-products-secondary .ps-product { text-align: center; } .mw-product-futuristic .mw-related-products-secondary .ps-product__thumbnail { position: relative; aspect-ratio: 1 / 1; background: var(--mw-surface-soft, #f6f7fb); border-radius: 6px; overflow: hidden; } .mw-product-futuristic .mw-related-products-secondary .ps-product__thumbnail img, .mw-product-futuristic .mw-related-products-secondary .ps-product__thumbnail-link img { width: 100% !important; height: 100% !important; object-fit: cover; } /* Owl's default nav arrows float over the row's vertical center; keep them clear of the card content and visible against the white background used here (no dots — arrows only, matching the reference layout). */ .mw-product-futuristic .mw-related-products-secondary .owl-nav { position: absolute; top: 35%; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; } .mw-product-futuristic .mw-related-products-secondary .owl-nav button { pointer-events: auto; } .mw-product-futuristic .mw-related-products-secondary .ps-carousel--nav { position: relative; } /* Owl only turns a track into an actual carousel (.owl-carousel class + wrapping .owl-stage/.owl-item elements) once there are 2+ cards — see product-futuristic.js / main.js's owlCarouselConfig, which requires "children(...).length >= 2" before calling .owlCarousel(). With exactly one related product the markup never gets wrapped, so the lone .ps-product is still a *direct* child here and, being a plain block element, stretches to the full row width instead of sitting in a 1/4 (or 2.5-per-row) column. The :not(.owl-carousel) fallback below only ever matches that un-initialised, single-card state — once Owl adds its own class and wrapper markup this rule no longer applies to anything. */ .mw-product-futuristic .mw-related-products-secondary .ps-carousel--nav:not(.owl-carousel) { display: flex; flex-wrap: wrap; gap: 20px; } .mw-product-futuristic .mw-related-products-secondary .ps-carousel--nav:not(.owl-carousel) > .ps-product { flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px); box-sizing: border-box; } @media (max-width: 991.98px) { .mw-product-futuristic .mw-related-products-secondary .ps-carousel--nav:not(.owl-carousel) > .ps-product { flex-basis: calc(33.3333% - 14px); max-width: calc(33.3333% - 14px); } } @media (max-width: 767.98px) { /* Correction: Owl always initialises this track (see the single-item-carousel note further down), so .owl-stage-outer's default overflow:hidden is exactly what produces the intended "2.5 cards, partial 3rd peeking in" look by clipping the stage at the container edge — forcing it to overflow:visible here undid that clipping and let every slide render un-clipped in a single static row instead of a real, swipeable carousel. Only the outer safety net (stop that from bleeding into horizontal page scroll) is still needed. */ .mw-product-futuristic .mw-related-products-secondary { overflow-x: hidden; } .mw-product-futuristic .mw-related-products-secondary .ps-carousel--nav:not(.owl-carousel) { flex-wrap: nowrap; overflow-x: auto; gap: 12px; } .mw-product-futuristic .mw-related-products-secondary .ps-carousel--nav:not(.owl-carousel) > .ps-product { flex: 0 0 40%; max-width: 40%; } } /* -------------------------------------------------------------------- "You may also like" — inside the sticky-paired scroll column -------------------------------------------------------------------- */ .mw-related-products { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--mw-line, #e7e9f0); } .mw-related-header h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 18px; position: relative; display: inline-block; } .mw-related-header h3:after { content: ''; position: absolute; left: 0; bottom: -8px; width: 44px; height: 3px; border-radius: 3px; background: var(--mw-ink, #10131a); } .mw-related-carousel .ps-product { padding: 0; text-align: center; } .mw-related-carousel .ps-product__container, .mw-related-carousel .ps-product__thumbnail { border-radius: 6px; overflow: hidden; } /* Thumbnails were rendering small/inconsistent — force a square, fully-filled image regardless of whatever intrinsic size the source image has. */ .mw-related-carousel .ps-product__thumbnail { position: relative; aspect-ratio: 1 / 1; background: var(--mw-surface-soft, #f6f7fb); } .mw-related-carousel .ps-product__thumbnail img, .mw-related-carousel .ps-product__thumbnail-link img { width: 100% !important; height: 100% !important; object-fit: cover; } /* Same single-related-product case as .mw-related-products-secondary above: Owl needs 2+ cards before it wraps the track in .owl-carousel/.owl-item and actually constrains each card's width. With only one related product the lone .ps-product is a plain block element here and stretches to the full column width instead of the intended 1-of-2 (or 1-of-1 on very small mobile) share. */ .mw-related-carousel.ps-carousel--responsive:not(.owl-carousel) { display: flex; flex-wrap: wrap; gap: 16px; } .mw-related-carousel.ps-carousel--responsive:not(.owl-carousel) > .ps-product { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); box-sizing: border-box; } @media (max-width: 479.98px) { .mw-related-carousel.ps-carousel--responsive:not(.owl-carousel) > .ps-product { flex-basis: 100%; max-width: 100%; } } /* Reference (Nixon) uses dead-simple cards: image, name, price, one plain outlined text button — no floating icon overlay, no wishlist/compare clutter, no card shadow. The grid system's own markup only has an icon-only "add to cart" link (no visible text in the DOM, just a title attribute), so the button label below is injected via ::after rather than relying on text that isn't there. product-futuristic.js also moves this element to sit after the title/price instead of floating over the image, since flex `order` can't reach across the two different parent containers involved. */ .mw-related-carousel .ps-product__container { padding-top: 14px; text-align: center; } .mw-related-carousel .ps-product__content { display: flex; flex-direction: column; align-items: center; } .mw-related-carousel .ps-product__title { font-weight: 600; margin-bottom: 4px; } .mw-related-carousel .rating_wrap { display: flex; justify-content: center; margin-bottom: 4px; } .mw-related-carousel .ps-product__price { justify-content: center; } /* "You may also like" cards show the product image only (with the sitewide hover-swap to the second photo — nixon-product-grid.css, loaded on every page) and title/price underneath. No Add to cart/Select options button at all, on hover or otherwise — the base theme ships this "always visible, laid out inside the thumbnail" by default, which is what was overlapping/covering the product photo. */ .mw-related-carousel .ps-product__actions { display: none !important; } .mw-related-carousel .ps-product { transition: opacity 0.2s var(--mw-ease); } .mw-related-carousel .ps-product:hover { opacity: 0.88; } /* Base theme positions .owl-dots absolutely (bottom:0 of the whole carousel) — meant to overlay near the bottom of a short, uniform carousel. Our redesigned cards are tall and vary in height (2-line titles etc.), so the dots' computed position ends up landing somewhere in the middle of the card content instead of below it. Forcing static/normal flow is the only way to guarantee they always render where they visually belong, regardless of how tall any given card turns out to be. */ .mw-related-carousel.owl-carousel .owl-dots { position: static !important; bottom: auto !important; top: auto !important; text-align: left; margin-top: 12px; } .mw-related-carousel.owl-carousel .owl-dot span { background: var(--mw-line, #e7e9f0); } .mw-related-carousel.owl-carousel .owl-dot.active span { background: var(--mw-ink, #10131a); } /* -------------------------------------------------------------------- Real single-related-product state (both "You may also like" widgets). Correction: the ":not(.owl-carousel)" rules above (and the matching ones under .mw-related-products-secondary) never actually match anything. main.js's initOwlCarousel() wraps EVERY related-products track in Owl regardless of how many slides it holds — with exactly one slide it still adds .owl-carousel, plus a .single-item-carousel modifier, and sets items:1 on every breakpoint. So the track is always .owl-carousel; the "un-initialised" fallback is dead code. Owl's JS also writes its own inline width/transform styles onto .owl-stage and .owl-item (sized for a single, full-width slide, since items:1). Those need !important to override, and the width has to be set on .owl-item itself — NOT on .ps-product nested inside it. .owl-item has no explicit width of its own in a flex row, so a percentage width on .ps-product resolves against an indeterminate/auto-sized parent and collapses to almost nothing (a first attempt at this fix put the percentage on .ps-product, which is what produced the tiny, text-wrapping card). Sizing .owl-item directly, then letting .ps-product simply fill it, avoids that. */ .mw-related-carousel.owl-carousel.single-item-carousel .owl-stage, .mw-related-products-secondary .owl-carousel.single-item-carousel .owl-stage { display: flex !important; width: 100% !important; transform: none !important; } .mw-related-carousel.owl-carousel.single-item-carousel .owl-item, .mw-related-products-secondary .owl-carousel.single-item-carousel .owl-item { float: none; flex: 0 0 auto; margin: 0 !important; box-sizing: border-box; } .mw-related-carousel.owl-carousel.single-item-carousel .owl-item .ps-product, .mw-related-products-secondary .owl-carousel.single-item-carousel .owl-item .ps-product { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } /* Top widget: 2 cards per row on tablet/desktop (matches its own data-owl-item-sm/md/lg/xl="2"), 1 per row on narrow mobile (data-owl-item-xs="1"). */ .mw-related-carousel.owl-carousel.single-item-carousel .owl-item { width: 50% !important; } @media (max-width: 479.98px) { .mw-related-carousel.owl-carousel.single-item-carousel .owl-item { width: 100% !important; } } /* Bottom widget: 4 cards per row on desktop (data-owl-item-lg/xl="4"), 3 on tablet (data-owl-item-md="3"), 2.5 on mobile (data-owl-item-xs/sm="2.5") — same breakpoints the multi-item Owl config already uses, so a lone product sits in the same column a real one would. */ .mw-related-products-secondary .owl-carousel.single-item-carousel .owl-item { width: 25% !important; } @media (max-width: 991.98px) { .mw-related-products-secondary .owl-carousel.single-item-carousel .owl-item { width: 33.3333% !important; } } @media (max-width: 767.98px) { .mw-related-products-secondary .owl-carousel.single-item-carousel .owl-item { width: 40% !important; } } /* -------------------------------------------------------------------- Scroll-reveal micro animation -------------------------------------------------------------------- */ .mw-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--mw-ease), transform 0.6s var(--mw-ease); } .mw-reveal.is-visible { opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------------- Responsive -------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .mw-sticky-header.ps-product__header { flex-flow: column wrap; gap: 28px; } .mw-sticky-header .mw-sticky-media, .mw-sticky-header .mw-scroll-content { max-width: 100% !important; flex-basis: 100% !important; flex: 1 1 100% !important; position: static !important; } } @media (max-width: 767.98px) { .ps-page--product { padding-top: 20px; } .mw-scroll-content > h1 { font-size: 1.5rem; } .mw-scroll-content .ps-product__price { font-size: 1.5rem; } .mw-scroll-content .ps-product__shopping { flex-direction: column; align-items: stretch; } .mw-scroll-content .add-to-cart-button.ps-btn { width: 100%; text-align: center; } /* Countdown box: the plugin's own .ps-countdown is a hard `flex-flow: row nowrap` with a 320px max-width, so on a true mobile viewport the later segments (hours/minutes/seconds) overflow straight out of the promo box instead of wrapping. */ .mw-scroll-content .ps-product__countdown { overflow: hidden; } .mw-scroll-content .ps-product__countdown .ps-countdown { flex-wrap: wrap !important; max-width: 100% !important; gap: 8px; } .mw-scroll-content .ps-product__countdown .ps-countdown li { margin-right: 0 !important; padding-right: 0 !important; } /* Up-sell/cross-sale section headers (icon + heading text) were wrapping into a stacked, overlapping mess at this width — force a predictable row-then-wrap layout instead. */ .mw-scroll-content .ec-upsell-bundle-header, .mw-scroll-content .ec-cross-sale-header { flex-wrap: nowrap !important; align-items: flex-start !important; } .mw-scroll-content .ec-upsell-bundle-icon, .mw-scroll-content .ec-cross-sale-icon { flex-shrink: 0 !important; } /* The "add X to cart to unlock discount" notice: icon was overlapping the (very wrapped) text instead of sitting beside it. */ .mw-scroll-content .ec-upsell-bundle-notice { align-items: flex-start !important; gap: 10px !important; } .mw-scroll-content .ec-upsell-bundle-notice svg { flex-shrink: 0 !important; margin-top: 2px; } /* Related-product card: no button to size any more (see the .mw-related-carousel .ps-product__actions rule above) — image, title and price only. */ /* Up-sell/cross-sale items: unlike the ~1230px desktop column, mobile is genuinely narrow, so wrapping the row (checkbox/thumb/ name/price/action) is the correct fix here — this was previously removed because forcing it on the wide desktop column pushed the button off-screen, but that concern doesn't apply at this width. */ .mw-scroll-content .ec-upsell-bundle-item-inner { flex-wrap: wrap !important; } .mw-scroll-content .ec-upsell-bundle-info { flex-basis: calc(100% - 90px) !important; min-width: 0 !important; } .mw-scroll-content .ec-upsell-bundle-action { margin-left: auto; } .mw-scroll-content .ec-upsell-bundle-footer { flex-direction: column; align-items: stretch !important; } .mw-scroll-content .ec-upsell-bundle-add-all { width: 100%; justify-content: center; } /* Cross-sale cards: shrink further so at least 1.5 cards preview, matching the mobile breakpoint the plugin's own CSS expects. */ .mw-scroll-content .ec-cross-sale-carousel:not(.slick-initialized) .ec-cross-sale-slide, .mw-scroll-content .ec-cross-sale-carousel.slick-initialized .slick-slide, .mw-scroll-content .ec-cross-sale-slide { width: 130px !important; max-width: 130px !important; flex: 0 0 130px !important; } /* Quantity stepper: keep it from stretching full-width awkwardly next to the buttons once they've gone full-width/stacked above. */ .mw-scroll-content .form-group--number.product__qty { align-self: flex-start; } /* Related-product cards: two per row instead of edge-to-edge. */ .mw-related-carousel .ps-product__badge, .mw-related-carousel .ec-product-badge { font-size: 0.65rem; } } /* ========================================================================== MUNNA WATCHES — NIXON PDP LAYOUT V3 -------------------------------------------------------------------------- This is deliberately scoped to .mw-product-futuristic only. Core principle: - The RIGHT column owns the document height. - The LEFT gallery is a normal sticky element inside that same row. - The gallery itself has a viewport-safe fixed height, so position:sticky can actually hold it instead of becoming trapped by an over-tall child. - Botble/Slick remains responsible for changing images; this CSS only controls the presentation. ========================================================================== */ @media (min-width: 1200px) { /* The theme's old .ps-product--detail thumbnail rule makes the outer thumbnail a flex row-reverse. That rule is for the old gallery and is the main source of the strange sizing seen after scrolling. */ /* Flexbox, not Grid: a Grid formatting context here combined with a position:sticky, height:auto grid-item child (.mw-sticky-media, below) is what was producing a broken first paint on some products — the gallery column's own width would resolve correctly (its computed track width matches the 1.55fr share exactly), but the browser could get stuck on an incomplete intrinsic-size pass for that sticky item, leaving its first child image simply never painted until something forced a reflow (resize, or toggling this very rule off in DevTools). Flex does not have that failure mode for a sticky, auto-height flex item, so the same visual two-column proportions are reproduced with flex-grow ratios instead of fr units: 1.55 vs 1, with the info column keeping its 430px floor via flex-basis instead of grid's minmax(430px, 1fr). */ .mw-product-futuristic .ps-product__header.mw-sticky-header { display: flex !important; flex-flow: row nowrap !important; align-items: flex-start !important; column-gap: 48px !important; row-gap: 0 !important; width: 100% !important; position: relative !important; overflow: visible !important; } /* -------------------------------------------------------------------- Dual sticky columns ("race to the bottom"). Both columns get position:sticky at the SAME top offset, and both are only as tall as their own natural content (align-self:start — no stretch to the row's height). With two sibling sticky elements set up that way, plain CSS does the rest on its own: - Whichever column is SHORTER has "spare" room below it inside the shared row (whose height = the taller column), so it sticks at the top offset and stays visually fixed there while the page scrolls past it — right up until the row itself ends, at which point it un-sticks and settles at the bottom, flush with the taller column's end. - Whichever column is TALLER has no such spare room (its own height already is the row's height), so it can't meaningfully "stick" anywhere — it just scrolls normally, revealing more of itself as the page moves, which is exactly the behaviour needed to read/see the rest of it. That covers both cases from spec with the same two rules: - gallery shorter than info+description+"You may also like" -> gallery sticks, right column scrolls past it (old behaviour). - image grid taller than the right column (many photos) -> right column sticks, image grid scrolls to reveal the rest. No JS height math, no capped/cropped gallery — every rule here lets each column size itself naturally. -------------------------------------------------------------------- */ .mw-product-futuristic .mw-sticky-header > .mw-sticky-media, .mw-product-futuristic .mw-sticky-header > .mw-scroll-content { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; position: -webkit-sticky !important; position: sticky !important; top: var(--mw-sticky-offset, 115px) !important; align-self: start !important; height: auto !important; max-height: none !important; } /* Fixed 65% / 35% split, set directly as percentages so it's exact regardless of viewport width or content — flexbox `gap` already subtracts the column gap from the space these percentages are of, so 65% + 35% always fits without overflow. */ .mw-product-futuristic .mw-sticky-header > .mw-sticky-media { flex: 0 0 65%; max-width: 65%; min-width: 0; z-index: 3; } .mw-product-futuristic .mw-sticky-header > .mw-scroll-content { flex: 0 0 35%; max-width: 35%; min-width: 0; z-index: 1; } /* Sticky positioning is disabled by overflow/contain on an ancestor. Keep every ancestor in this product-only chain visible. */ .mw-product-futuristic, .mw-product-futuristic .ps-product__header, .mw-product-futuristic .mw-sticky-header, .mw-product-futuristic .mw-sticky-media, .mw-product-futuristic .mw-scroll-content { overflow: visible !important; } /* The shell no longer forces any height — the image grid below determines it, and .mw-sticky-media (sticky, see above) follows it naturally. */ .mw-product-futuristic .mw-gallery-sticky-shell { width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; } .mw-product-futuristic .bb-product-gallery-wrapper, .mw-product-futuristic .bb-product-gallery { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } /* ---------------------------------------------------------------- Nixon-style photo grid: every product image shown at once, two per row, instead of a one-at-a-time slider with a thumbnail rail. Botble/Slick still initialises on .bb-product-gallery-images underneath this (kept deliberately — see the include's own comment: it's what makes click-to-zoom and colour/variant image swapping keep working). Slick's own positioning is neutralised with display:contents on its wrapper divs, which removes those wrappers from the box tree entirely so the actual /image elements become direct grid children instead — the grid rules below are what actually places them on screen. ---------------------------------------------------------------- */ .mw-product-futuristic .bb-product-gallery { display: block !important; } /* Thumbnail rail hidden at every width now — see the unscoped rule near the top of this file. */ .mw-product-futuristic .bb-product-gallery-images { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; align-items: start !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; position: static !important; } /* Slick's fade mode hides every slide except the "current" one by setting position/opacity/z-index directly, INLINE, on the .slick-slide element itself. Collapsing that same element with display:contents (as this used to do) doesn't reliably clear that — browsers can still apply an inherited opacity:0 through a display:contents box, so every image but the first vanished instead of joining the grid. Only unwrap the two layers ABOVE the slide (.slick-list/.slick-track, which fade mode doesn't individually hide), and directly override every property fade mode sets on .slick-slide so it's forced visible as a real grid item instead of relying on contents to erase them. */ .mw-product-futuristic .bb-product-gallery-images .slick-list, .mw-product-futuristic .bb-product-gallery-images .slick-track { display: contents !important; } /* Slick's own slick.css puts a clearfix on .slick-track: .slick-track:before, .slick-track:after { display: table; content: ''; } display:contents removes .slick-track's OWN box, but a ::before/::after pseudo-element still generates its own box regardless — so that empty, imageless "content: ''" box was becoming grid item #1 (this is what was actually causing the grid's first cell to render blank, pushing every real photo one slot late — not asNavFor, which was a red herring). Kill both pseudo-elements outright; nothing here relies on the clearfix since these elements aren't floated. */ .mw-product-futuristic .bb-product-gallery-images .slick-track::before, .mw-product-futuristic .bb-product-gallery-images .slick-track::after, .mw-product-futuristic .bb-product-gallery-images .slick-list::before, .mw-product-futuristic .bb-product-gallery-images .slick-list::after { content: none !important; display: none !important; } /* Height is no longer forced to a fixed ratio — each cell's height now simply follows its own image's natural proportions (auto), the same way nixon.com's gallery does. That means the photo always shows in full, with nothing cropped off, and the cell never shows letterboxing/background around it either, since the box and the image are the same size. */ .mw-product-futuristic .bb-product-gallery-images .slick-slide { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; z-index: auto !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .mw-product-futuristic .bb-product-gallery-images .slick-slide > div { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .mw-product-futuristic .bb-product-gallery-images a, .mw-product-futuristic .bb-product-gallery-images .bb-product-video { width: 100% !important; height: auto !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; background: #f3f3f3 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* .bb-product-video keeps `position: relative` (its own inline default — deliberately NOT overridden to `static` like the plain `a` slides above) because includes/product-gallery-video.blade.php's play button is `position: absolute; top/left: 50%` *relative to this exact div*. Forcing this to `static` was what sent the button flying off to center against a much bigger ancestor instead of the video tile — i.e. the "button floats in the middle of the gallery" bug. */ .mw-product-futuristic .bb-product-gallery-images .bb-product-video { position: relative !important; } .mw-product-futuristic .bb-product-gallery-images .bb-button-trigger-play-video { z-index: 3 !important; } /* `video` is included alongside `img` here on purpose. Without it, the

elements back as plain direct children of .bb-product-gallery-images, which is what the child selectors below target. (It re-`slick()` those same elements, with the exact options front-ecommerce.js normally uses, if the viewport ever grows back past this breakpoint — e.g. rotating to landscape — so desktop's fade/thumbnail-nav behaviour comes back correctly.) The `.slick-slide` selector is kept alongside the plain child one purely as a first-paint fallback for the brief moment before that JS has run. This block comes after the 1199.98px grid block above and wins on narrower widths simply by being later in the file (same specificity + !important on both sides — last one in source order applies). -------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* Full-bleed: the gallery normally sits inside the page container's side padding. Breaking it out to the true viewport width used to rely purely on the "100vw + negative-margin" CSS trick, but that trick's percentages resolve against whatever containing block happens to sit directly above this element — which is only ever guaranteed to equal the true viewport when every intermediate ancestor's own box is perfectly width-symmetric. In practice one link in that chain (a container/row/col combo, a max-width cap, a scrollbar-gutter reflow, etc.) is enough to leave a persistent margin on both sides instead of true edge-to-edge, which is what the CSS-only version of this rule kept showing. product-futuristic.js now measures this element's REAL rendered position with getBoundingClientRect() and writes the exact pixel width/offset into --mw-gallery-bleed-width / --mw-gallery-bleed-offset on this same element. That is immune to nesting/padding entirely, since it is based on the actual box the browser drew, not a CSS percentage guess. The 100vw/-50vw values below are only the fallback used for the first paint, before JS has run once (and if JS is ever unavailable) — expect a one-frame correction on load/resize as the JS value replaces it. */ .mw-product-futuristic .bb-product-gallery-wrapper { width: var(--mw-gallery-bleed-width, 100vw) !important; max-width: var(--mw-gallery-bleed-width, 100vw) !important; position: relative !important; left: 0 !important; right: auto !important; margin-left: var(--mw-gallery-bleed-offset, -50vw) !important; margin-right: 0 !important; } .mw-product-futuristic .bb-product-gallery-images { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; gap: 12px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .mw-product-futuristic .bb-product-gallery-images::-webkit-scrollbar { display: none !important; height: 0 !important; } /* First image shown ~full width, next one peeking about half into view at the right edge, matching the Nixon reference. 66% leaves ~34% of the viewport for the next slide to peek into — since that next slide is itself 66% wide, 34/66 ≈ roughly half of it is visible. Targets both the pre-unslick Slick markup (.slick-slide) and the plain /video children unslick() leaves behind — only one of the two will actually exist in the DOM at a given moment, so this is not a conflict, just covering both. */ .mw-product-futuristic .bb-product-gallery-images .slick-slide, .mw-product-futuristic .bb-product-gallery-images > a, .mw-product-futuristic .bb-product-gallery-images > .bb-product-video { flex: 0 0 66% !important; width: 66% !important; max-width: 66% !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; margin: 0 !important; } .mw-product-futuristic .bb-product-gallery-images .slick-slide, .mw-product-futuristic .bb-product-gallery-images > a { position: static !important; } /* Same reasoning as the desktop/tablet blocks above: .bb-product-video keeps `position: relative` so the play button centers on the video tile instead of jumping to a bigger ancestor. */ .mw-product-futuristic .bb-product-gallery-images > .bb-product-video { position: relative !important; } .mw-product-futuristic .bb-product-gallery-images .bb-button-trigger-play-video { z-index: 3 !important; } .mw-product-futuristic .bb-product-gallery-images img, .mw-product-futuristic .bb-product-gallery-images video { display: block !important; width: 100% !important; height: auto !important; object-fit: contain !important; margin: 0 !important; } } /* ========================================================================== MUNNA WATCHES — VERTICAL THUMBNAIL GALLERY LAYOUT (nixon.com style) -------------------------------------------------------------------------- Second, opt-in, PER-PRODUCT gallery layout: one large image at a time with a scrollable vertical thumbnail rail down the left edge, instead of the "every image at once, two per row" grid above. Chosen per product via the "Product Gallery Layout" admin field (functions/product-gallery- layout.php, stored as product metadata: gallery_layout = vertical_thumb) and rendered by includes/product-gallery-vertical.blade.php, which is swapped in for includes/product-gallery.blade.php in product.blade.php only when that metadata value is set. Grid stays the default for every product that hasn't explicitly picked this layout. DESKTOP ONLY, ON PURPOSE — scoped to `@media (min-width: 1200px)` and to `.mw-product-futuristic.mw-gallery-layout-vertical` (both classes; the second is only added to the page wrapper when this layout is selected). Every rule ABOVE this block that's scoped to plain `.mw-product-futuristic` — including the entire `max-width: 1199.98px` tablet block and the `max-width: 767.98px` phone block — still matches vertical-layout products too, since they carry that base class as well. That's what makes mobile/tablet pixel-for-pixel identical to the grid layout without a single duplicated mobile rule here, exactly as required: this layout changes nothing below 1200px. The two-column sticky mechanism ("dual sticky columns" — search for that phrase above) is reused completely unchanged: `.mw-sticky-media` / `.mw-scroll-content` don't know or care what's inside the gallery column, so the same "gallery sticks at --mw-sticky-offset and releases exactly when the right-hand info/description/"You may also like" column finishes" behaviour the grid layout already has carries over here for free. The only thing this block adds on top is giving the gallery column a real, near-viewport-height height (grid leaves it as `auto`, sized by the photos) so it visually reads as full-screen the way nixon.com's gallery does, and swapping the grid's `display:grid` / hidden-thumbnails treatment for a real, visible, Slick-paginated thumbnail rail. Slick itself is NOT neutralised the way it is for the grid layout above (no display:contents tricks, no forced-visible .slick-slide overrides) — this layout wants Slick's native one-at-a- time fade behaviour and its native asNavFor thumbnail sync, so it's left alone to do exactly that. product-futuristic.js already re-inits Slick with fade + asNavFor on every desktop-width product page regardless of which layout is active (it only ever targets the shared .bb-product-gallery-images / .bb-product-gallery-thumbnails classes), so no JS changes were needed for this layout at all. ========================================================================== */ @media (min-width: 1200px) { /* Give the sticky gallery COLUMN itself a real height instead of `auto`, so it fills (most of) the viewport the way nixon.com's does. 72px is subtracted off the bottom so a sliver of the page stays visible behind it instead of the column wedging flush to the viewport's bottom edge. This still plays correctly with `position: sticky` on .mw-sticky-media (see the dual-sticky-columns rule far above, which this does not touch): as long as this height is shorter than the info column next to it — true on every product with a description/specs/related-products section — the gallery sticks at --mw-sticky-offset and holds there for the whole scroll, releasing naturally right as the info column ends. Same release behaviour as the grid layout, just driven by a fixed height instead of the photos' own content height. */ .mw-product-futuristic.mw-gallery-layout-vertical .mw-sticky-header > .mw-sticky-media { height: calc(100vh - var(--mw-sticky-offset, 115px) - 72px) !important; max-height: none !important; } /* Carry that real height down through every wrapper layer between the sticky column and the actual gallery markup, so the percentage heights further down (thumbnails, main image, img/video) all resolve against something real instead of hitting `auto` partway down and collapsing. */ .mw-product-futuristic.mw-gallery-layout-vertical .mw-gallery-sticky-shell, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-wrapper { height: 100% !important; max-height: none !important; min-height: 0 !important; } /* Undo the grid layout's `display: block` (that rule is scoped to plain .mw-product-futuristic, so it still matches this layout too) and restore a real flex row: thumbnails first in the DOM but shown on the left because of row-reverse — this is Botble's own default .bb-product-gallery behaviour, just given an explicit, !important restatement here since the grid rule above would otherwise win. */ .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery { display: flex !important; flex-flow: row-reverse nowrap !important; align-items: stretch !important; align-content: stretch !important; width: 100% !important; height: 100% !important; } /* Real, visible thumbnail rail — NOT the grid layout's hidden nav. includes/product-gallery-vertical.blade.php simply never adds the .mw-hidden-thumbnail-nav class in the first place, so the unscoped hiding rule at the top of this file doesn't even match; this only needs to handle sizing. Slick paginates this vertically already (data-vertical="1" in the markup + the `vertical`/`verticalSwiping` options in product-futuristic.js's reslickForDesktop()) using its own default up/down arrow styling from the plugin's base CSS (.bb-product-gallery-thumbnails .slick-arrow), which is left alone here. */ .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-thumbnails { display: block !important; position: relative !important; height: 100% !important; max-height: 100% !important; max-width: 96px !important; min-width: 96px !important; width: 96px !important; overflow: hidden !important; } .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-thumbnails .slick-track { height: auto !important; } .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-thumbnails .slick-slide, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-thumbnails > div { height: 96px !important; margin-bottom: 10px !important; } .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-thumbnails img { width: 96px !important; height: 96px !important; object-fit: cover !important; background: #f3f3f3 !important; } /* Main image column: fills whatever width the 96px thumbnail rail doesn't take, and the full height of the gallery column. Slick's own fade-mode positioning (position:absolute per slide, one visible at a time) is left completely alone — only height is added here so each slide/image actually fills that full column height instead of sizing to its own natural aspect ratio the way the grid layout's cells do. */ .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images { display: block !important; position: relative !important; width: 100% !important; max-width: calc(100% - 112px) !important; height: 100% !important; } .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images .slick-list, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images .slick-track, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images .slick-slide, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images .slick-slide > div { height: 100% !important; } .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images a, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images .bb-product-video { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; background: #f3f3f3 !important; } /* Same img+video pairing as the video-thumb fix above the grid block — see that comment for why `video` has to be listed alongside `img`. `contain` (not `cover`) so watch photography is never cropped, just letterboxed inside the neutral background above. */ .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images img, .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-gallery-images video { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } .mw-product-futuristic.mw-gallery-layout-vertical .bb-product-video .bb-button-trigger-play-video { z-index: 3 !important; } }