.ec-react-gallery-host{min-width:0} /* Keep the server-first EveryCommerce host in WooCommerce/Shoptimizer's normal image-column sizing system without identifying it as a native gallery runtime. This matters at Shoptimizer's desktop product breakpoint (~992px): `images` supplies the column geometry, while omitting `woocommerce-product-gallery` prevents the theme/native gallery behavior from attaching to this host. */ body.ec-react-product-gallery-page #ec-react-gallery-host.images{box-sizing:border-box} /* React mode renders no native WooCommerce/Shoptimizer gallery DOM. */ body.ec-react-product-gallery-page .ec-rpg-bootstrap-host{display:block} body.ec-react-product-gallery-page .ec-rpg-bootstrap{display:block} /* Mobile LCP handoff: keep the server-rendered first frame visibly painted while the React gallery initializes transparently underneath. The React layer still receives pointer events, and JavaScript removes the bootstrap layer on the first real interaction so swipe/color/zoom behavior remains immediate. */ @media(max-width:767px){ body.ec-react-product-gallery-page #ec-react-gallery-host.ec-rpg-preserve-bootstrap{position:relative} body.ec-react-product-gallery-page #ec-react-gallery-host.ec-rpg-preserve-bootstrap>.ec-rpg-bootstrap{position:relative;z-index:2;pointer-events:none} body.ec-react-product-gallery-page #ec-react-gallery-host.ec-rpg-preserve-bootstrap>.ec-rpg-react-mount{position:absolute;inset:0;z-index:1;width:100%;opacity:0;pointer-events:auto} } .ec-rpg-bootstrap .ec-rpg-card{cursor:default} .ec-rpg-bootstrap picture{display:block;width:100%;height:100%} .ec-rpg-bootstrap-image{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none} .ec-rpg-bootstrap .ec-rpg-card.is-frame-original picture, .ec-rpg-bootstrap .ec-rpg-card.is-frame-original .ec-rpg-bootstrap-image{height:auto;object-fit:contain} .ec-rpg{width:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .ec-rpg button{font:inherit} .ec-rpg-desktop{display:block} .ec-rpg-mobile{display:none} .ec-rpg-card{position:relative;display:block;width:100%;overflow:hidden;border:0;background:#f5f5f3;padding:0;cursor:zoom-in} .ec-rpg-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none} /* Persistent two-layer image surface used only by the interactive React gallery. The painted layer remains visible until the replacement DOM image has loaded and decoded, preventing the card background from flashing between colors. */ .ec-rpg-image-buffer{position:relative;display:block;width:100%;height:100%;overflow:hidden} .ec-rpg-image-buffer>.ec-rpg-buffer-layer{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none} .ec-rpg-image-buffer>.ec-rpg-buffer-layer.is-active{position:relative;inset:auto;z-index:2;opacity:1} .ec-rpg-card.is-frame-4x5{aspect-ratio:4/5} .ec-rpg-card.is-frame-square{aspect-ratio:1/1} .ec-rpg-card.is-frame-3x4{aspect-ratio:3/4} .ec-rpg-card.is-frame-original{aspect-ratio:auto;background:#f7f7f5} .ec-rpg-card.is-frame-original img{height:auto;object-fit:contain} .ec-rpg-image-fade{animation:ecRpgImageFade .28s ease both} @keyframes ecRpgImageFade{from{opacity:.72}to{opacity:1}} .ec-rpg-view-cue{position:absolute;right:14px;bottom:12px;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:rgba(250,250,248,.88);color:#222;font-size:17px;font-weight:300;opacity:0;transform:scale(.94);transition:opacity .16s ease,transform .16s ease;pointer-events:none} .ec-rpg-card:hover .ec-rpg-view-cue{opacity:1;transform:scale(1)} /* Editorial desktop */ .ec-rpg-editorial{display:flex;flex-direction:column;gap:6px} .ec-rpg-editorial-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .ec-rpg-editorial-top.count-1{grid-template-columns:1fr} .ec-rpg-editorial-top.count-2{grid-template-columns:repeat(2,minmax(0,1fr))} .ec-rpg-editorial .ec-rpg-card.is-hero{width:100%} .ec-rpg-editorial-bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .ec-rpg-editorial-bottom .ec-rpg-card:last-child:nth-child(odd){grid-column:1/-1} /* Classic desktop */ .ec-rpg-classic{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} .ec-rpg-classic.has-thumbs{grid-template-columns:72px minmax(0,1fr);align-items:start} .ec-rpg-classic-thumbs{display:flex;flex-direction:column;gap:7px;max-height:78vh;overflow:auto;scrollbar-width:none} .ec-rpg-classic-thumbs::-webkit-scrollbar{display:none} .ec-rpg-classic-thumb{width:100%;aspect-ratio:4/5;overflow:hidden;border:1px solid transparent;background:#f4f4f2;padding:0;opacity:.58;cursor:pointer;transition:opacity .15s ease,border-color .15s ease} .ec-rpg-classic-thumb:hover,.ec-rpg-classic-thumb.is-active{opacity:1} .ec-rpg-classic-thumb.is-active{border-color:#1d1d1f} .ec-rpg-classic-thumb img{display:block;width:100%;height:100%;object-fit:cover} .ec-rpg-classic-stage{position:relative;min-width:0} .ec-rpg-counter{position:absolute;right:13px;bottom:12px;z-index:3;padding:5px 7px;background:rgba(250,250,248,.84);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.05em;color:#363638} /* Full-screen viewer */ .ec-rpg-viewer{position:fixed;inset:0;z-index:1000000;display:flex;align-items:center;justify-content:center;background:rgba(247,247,244,.98);animation:ecRpgViewerIn .22s ease both} @keyframes ecRpgViewerIn{from{opacity:0}to{opacity:1}} .ec-rpg-viewer-image{display:flex;align-items:center;justify-content:center;width:calc(100vw - 120px);height:calc(100vh - 76px);overflow:hidden;cursor:zoom-in} .ec-rpg-viewer-image.is-zoomed{cursor:grab} .ec-rpg-viewer-image img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center center;transition:transform .08s linear;will-change:transform;user-select:none} .ec-rpg-viewer-close{position:fixed;right:22px;top:18px;z-index:4;display:grid;width:38px;height:38px;place-items:center;border:0;background:transparent;color:#1d1d1f;font-size:30px;font-weight:200;cursor:pointer} .ec-rpg-viewer-counter{position:fixed;left:24px;top:27px;z-index:4;color:#55555a;font-size:11px;letter-spacing:.08em} .ec-rpg-viewer-nav{position:fixed;top:50%;z-index:4;width:44px;height:64px;margin-top:-32px;border:0;background:transparent;color:#6a6a6f;font-size:39px;font-weight:200;cursor:pointer} .ec-rpg-viewer-prev{left:15px}.ec-rpg-viewer-next{right:15px} /* Mobile always becomes a clean swipe stage */ @media(max-width:767px){ .ec-rpg-desktop{display:none} .ec-rpg-mobile{display:block;touch-action:pan-y} body.ec-react-product-gallery-page .ec-rpg-mobile-viewport{ width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .ec-rpg-mobile .ec-rpg-card{cursor:zoom-in} .ec-rpg-mobile-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px 0;color:#66666b;font-size:10px} .ec-rpg-mobile-progress>i{position:relative;display:block;height:1px;flex:1;overflow:hidden;background:#e6e6e4} .ec-rpg-mobile-progress>i>b{position:absolute;inset:0 auto 0 0;display:block;background:#77777c;transition:width .2s ease} .ec-rpg-view-cue{display:none} .ec-rpg-viewer{background:rgba(250,250,248,.99)} .ec-rpg-viewer-image{width:100vw;height:100vh;padding:52px 0;box-sizing:border-box} .ec-rpg-viewer-nav{display:none} .ec-rpg-viewer-close{right:12px;top:10px} .ec-rpg-viewer-counter{left:14px;top:21px} } @media(prefers-reduced-motion:reduce){ .ec-rpg-image-fade,.ec-rpg-viewer{animation:none} .ec-rpg-viewer-image img{transition:none} } /* === Editorial image captions === */ .ec-rpg-caption{ position:absolute;left:14px;bottom:12px;z-index:2;max-width:calc(100% - 58px); color:#fff;font-size:12px;font-weight:450;line-height:1.3;letter-spacing:-.01em; text-align:left;text-shadow:0 1px 5px rgba(0,0,0,.5);pointer-events:none } @media(max-width:767px){ .ec-rpg-caption{left:12px;bottom:11px;max-width:calc(100% - 24px);font-size:11px} } /* === Mobile caption placement === */ .ec-rpg-mobile-caption{ padding:10px 2px 2px; color:#1d1d1f; font-size:11px; font-weight:450; line-height:1.35; letter-spacing:-.01em; text-align:left; } @media(max-width:767px){ .ec-rpg-mobile-caption + .ec-rpg-mobile-progress{ padding-top:7px; } } /* === Caption contrast + mobile alignment fix === */ @media(min-width:768px){ .ec-rpg-desktop .ec-rpg-card .ec-rpg-caption{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.72), 0 2px 7px rgba(0,0,0,.42) !important; } } @media(max-width:767px){ .ec-rpg-mobile-caption{ min-height:28px; box-sizing:border-box; padding:10px 24px 3px !important; color:#1d1d1f !important; -webkit-text-fill-color:#1d1d1f !important; text-shadow:none !important; } .ec-rpg-mobile-caption.is-empty{ visibility:hidden; pointer-events:none; } .ec-rpg-mobile-caption + .ec-rpg-mobile-progress{ margin-left:24px; margin-right:24px; } } /* === Explicit per-image caption colors === */ @media(min-width:768px){ .ec-rpg-desktop .ec-rpg-card .ec-rpg-caption{ padding:0 !important; background:none !important; filter:none !important; text-shadow:none !important; } .ec-rpg-desktop .ec-rpg-card .ec-rpg-caption::before{display:none !important} .ec-rpg-desktop .ec-rpg-card .ec-rpg-caption.is-white{ color:#fff !important; -webkit-text-fill-color:#fff !important; } .ec-rpg-desktop .ec-rpg-card .ec-rpg-caption.is-black{ color:#111 !important; -webkit-text-fill-color:#111 !important; } } @media(max-width:767px){ .ec-rpg-mobile-caption.is-white{ color:#fff !important; -webkit-text-fill-color:#fff !important; } .ec-rpg-mobile-caption.is-black{ color:#1d1d1f !important; -webkit-text-fill-color:#1d1d1f !important; } } /* === Continuous mobile filmstrip === */ @media(max-width:767px){ .ec-rpg-mobile-viewport{ position:relative; width:100%; overflow:hidden; touch-action:pan-y; } .ec-rpg-mobile-track{ display:flex; align-items:stretch; transition:transform .32s cubic-bezier(.22,.61,.36,1); } .ec-rpg-mobile-viewport.is-dragging .ec-rpg-mobile-track{ will-change:transform; } .ec-rpg-mobile-viewport.is-dragging .ec-rpg-mobile-track{ transition:none; } .ec-rpg-mobile-slide{ flex:0 0 auto; min-width:0; } .ec-rpg-mobile-slide .ec-rpg-card{ width:100%; } /* Color changes replace the gallery rather than visually sliding from the shopper's previous image index back to image 1. The old painted image sits above the preloaded new first image for a very short crossfade. */ .ec-rpg-mobile-track.is-color-changing{ transition:none; } .ec-rpg-mobile-color-crossfade{ position:absolute; inset:0; overflow:hidden; z-index:4; pointer-events:none; opacity:1; animation:ec-rpg-color-crossfade-out 150ms ease-out forwards; } .ec-rpg-mobile-color-crossfade img{ display:block; width:100%; height:100%; object-fit:cover; } @keyframes ec-rpg-color-crossfade-out{ from{opacity:1} to{opacity:0} } } /* === Fullscreen zoom/pan polish === */ .ec-rpg-viewer-image{ position:relative; overscroll-behavior:none; } .ec-rpg-viewer-image img{ transform-origin:center center; will-change:transform; backface-visibility:hidden; } .ec-rpg-viewer-image.is-zoomed{ overflow:hidden; } /* === Mobile fullscreen: edge-to-edge cover baseline === */ @media(max-width:767px){ .ec-rpg-viewer{ background:#000; } .ec-rpg-viewer-image{ width:100vw !important; height:100dvh !important; padding:0 !important; box-sizing:border-box; overflow:hidden; } .ec-rpg-viewer-image img{ width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center center !important; } } /* === Fullscreen close: subtle scale + crossfade === */ .ec-rpg-viewer{ opacity:1; transform:scale(1); transition: opacity 190ms ease, transform 210ms cubic-bezier(.22,.61,.36,1); transform-origin:center center; } .ec-rpg-viewer.is-closing{ opacity:0; transform:scale(.975); pointer-events:none; } @media(prefers-reduced-motion:reduce){ .ec-rpg-viewer{ transition:opacity 120ms linear !important; transform:none !important; } .ec-rpg-viewer.is-closing{ transform:none !important; } } /* === Mobile fullscreen authoritative cover model === */ @media(max-width:767px){ .ec-rpg-viewer{ inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; overflow:hidden !important; background:#000 !important; } .ec-rpg-viewer .ec-rpg-viewer-image{ width:100vw !important; height:100vh !important; height:100dvh !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; display:block !important; } .ec-rpg-viewer .ec-rpg-viewer-image img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center center !important; display:block !important; transform-origin:center center !important; } } /* === Desktop fullscreen zoom interaction === */ @media(min-width:768px){ .ec-rpg-viewer-image{ cursor:zoom-in; } .ec-rpg-viewer-image[data-zoomed="1"]{ cursor:grab; } .ec-rpg-viewer-image[data-zoomed="1"]:active{ cursor:grabbing; } .ec-rpg-viewer-image[data-zoomed="1"] ~ .ec-rpg-viewer-nav, .ec-rpg-viewer-image[data-zoomed="1"] + .ec-rpg-viewer-nav{ pointer-events:none; opacity:.18; } } /* === Desktop gallery/viewer visual polish === */ @media(min-width:768px){ /* Browsing state: normal pointer. The small + is the only zoom affordance. */ .ec-rpg-desktop .ec-rpg-card{ cursor:pointer !important; } .ec-rpg-desktop .ec-rpg-view-cue{ right:12px; bottom:12px; width:38px; height:38px; border:1px solid rgba(29,29,31,.10); background:rgba(255,255,255,.88); box-shadow:0 3px 14px rgba(0,0,0,.06); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:transparent !important; font-size:0 !important; opacity:0; transform:translateY(2px) scale(.96); transition: opacity 160ms ease, transform 180ms cubic-bezier(.22,.61,.36,1); } /* Draw the + geometrically so it is optically centered on every browser. */ .ec-rpg-desktop .ec-rpg-view-cue::before, .ec-rpg-desktop .ec-rpg-view-cue::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1px; border-radius:1px; background:#1d1d1f; transform:translate(-50%,-50%); } .ec-rpg-desktop .ec-rpg-view-cue::after{ transform:translate(-50%,-50%) rotate(90deg); } .ec-rpg-desktop .ec-rpg-card:hover .ec-rpg-view-cue{ opacity:1; transform:translateY(0) scale(1); } /* Dedicated desktop inspection surface: no product-page bleed-through. */ .ec-rpg-viewer{ background:#f7f7f5 !important; } .ec-rpg-viewer-image{ width:calc(100vw - 176px) !important; height:calc(100vh - 104px) !important; max-width:1440px; margin:0 auto; cursor:zoom-in; } .ec-rpg-viewer-image img{ max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; } .ec-rpg-viewer-image[data-zoomed="1"]{ cursor:grab; } .ec-rpg-viewer-image[data-zoomed="1"]:active{ cursor:grabbing; } } /* === Desktop hover cue final sizing === */ @media(min-width:768px){ .ec-rpg-desktop .ec-rpg-view-cue{ width:30px !important; height:30px !important; background:rgba(255,255,255,.80) !important; } .ec-rpg-desktop .ec-rpg-view-cue::before, .ec-rpg-desktop .ec-rpg-view-cue::after{ width:10px !important; } } /* === Desktop viewer controls: safe inset layout === */ @media(min-width:768px){ /* Keep controls inside the fullscreen composition without tying them to transformed image geometry. This preserves the viewer's working layout. */ .ec-rpg-viewer-counter{ left:64px !important; top:34px !important; } .ec-rpg-viewer-close{ right:54px !important; top:24px !important; left:auto !important; transform:none !important; } .ec-rpg-viewer-prev{ left:52px !important; right:auto !important; } .ec-rpg-viewer-next{ right:52px !important; left:auto !important; } } /* === Desktop dedicated image-inspection modal === */ @media(min-width:768px){ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ position:fixed !important; inset:0 !important; z-index:1000000 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:34px 72px !important; box-sizing:border-box !important; background:rgba(20,20,20,.32) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); overflow:hidden !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-stage{ position:relative; display:flex; align-items:center; justify-content:center; width:min(1320px,calc(100vw - 180px)); height:min(880px,calc(100vh - 100px)); padding:0; margin:0; background:#f7f7f5; box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06); overflow:hidden; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image{ width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; background:#f7f7f5; cursor:zoom-in; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image img{ display:block !important; max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image[data-zoomed="1"]{ cursor:grab; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image[data-zoomed="1"]:active{ cursor:grabbing; } /* Controls belong to the modal composition, not the browser edges. */ .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-counter{ position:absolute !important; left:calc(50% - min(660px,calc((100vw - 180px)/2)) + 18px) !important; top:calc(50% - min(440px,calc((100vh - 100px)/2)) + 16px) !important; z-index:1000002 !important; color:#4a4a4f !important; font-size:11px !important; letter-spacing:.08em; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-close{ position:absolute !important; right:calc(50% - min(660px,calc((100vw - 180px)/2)) + 10px) !important; top:calc(50% - min(440px,calc((100vh - 100px)/2)) + 6px) !important; left:auto !important; width:40px !important; height:40px !important; z-index:1000002 !important; color:#1d1d1f !important; transform:none !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-nav{ position:absolute !important; top:50% !important; z-index:1000002 !important; width:44px !important; height:64px !important; margin-top:-32px !important; transform:none !important; color:#66666b !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-prev{ left:calc(50% - min(660px,calc((100vw - 180px)/2)) - 54px) !important; right:auto !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-next{ right:calc(50% - min(660px,calc((100vw - 180px)/2)) - 54px) !important; left:auto !important; } /* Keep existing close transition restrained inside the modal. */ .ec-rpg-viewer-desktop-modal.is-closing{ opacity:0; transform:scale(.985); } } /* === Desktop modal: image defines the modal surface === */ @media(min-width:768px){ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ position:fixed !important; inset:0 !important; z-index:2147483000 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; background:rgba(18,18,18,.34) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow:hidden !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-stage{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:auto; height:auto; max-width:84vw !important; max-height:84vh !important; padding:0 !important; margin:0 !important; background:transparent !important; overflow:hidden !important; box-shadow:0 26px 70px rgba(0,0,0,.18) !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image{ width:auto !important; height:auto !important; max-width:84vw !important; max-height:84vh !important; padding:0 !important; margin:0 !important; background:transparent !important; overflow:hidden !important; display:flex !important; align-items:center !important; justify-content:center !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image img{ display:block !important; width:auto !important; height:auto !important; max-width:84vw !important; max-height:84vh !important; margin:0 !important; padding:0 !important; object-fit:contain !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-counter{ position:fixed !important; left:50% !important; top:3.5vh !important; transform:translateX(-50%) !important; z-index:2147483002 !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-close{ position:fixed !important; top:3vh !important; right:3vw !important; left:auto !important; transform:none !important; z-index:2147483002 !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-prev{ left:3vw !important; right:auto !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-next{ right:3vw !important; left:auto !important; } } /* === Desktop modal close: dissolve / refocus === */ @media(min-width:768px){ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ opacity:1; transform:none !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition: opacity 180ms ease-out, background-color 180ms ease-out, backdrop-filter 180ms ease-out, -webkit-backdrop-filter 180ms ease-out !important; } .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing{ opacity:0 !important; transform:none !important; background:rgba(18,18,18,0) !important; backdrop-filter:blur(0) !important; -webkit-backdrop-filter:blur(0) !important; pointer-events:none; } .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing .ec-rpg-viewer-modal-stage, .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing .ec-rpg-viewer-counter, .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing .ec-rpg-viewer-close, .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing .ec-rpg-viewer-nav{ transform:none !important; } } @media(prefers-reduced-motion:reduce){ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ transition:opacity 100ms linear !important; } } /* === Desktop modal controls live inside image-defined stage === */ @media(min-width:768px){ .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-stage{ position:relative !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-counter{ position:absolute; left:14px; top:13px; z-index:12; padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#46464b; font-size:11px; line-height:1; letter-spacing:.08em; pointer-events:none; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-close{ position:absolute; right:12px; top:10px; z-index:12; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#1d1d1f; font-size:25px; font-weight:200; line-height:1; cursor:pointer; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-nav{ position:absolute; top:50%; z-index:12; display:grid; place-items:center; width:38px; height:54px; margin:0; padding:0; border:0; background:rgba(255,255,255,.64); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); color:#55555a; font-size:34px; font-weight:200; line-height:1; cursor:pointer; transform:translateY(-50%); } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-prev{ left:10px; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-next{ right:10px; } /* Hide old viewport-positioned desktop controls if earlier CSS remains. */ .ec-rpg-viewer-desktop-modal > .ec-rpg-viewer-counter, .ec-rpg-viewer-desktop-modal > .ec-rpg-viewer-close, .ec-rpg-viewer-desktop-modal > .ec-rpg-viewer-nav{ display:none !important; } /* 250ms pure dissolve/refocus; no scale. */ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ opacity:1; transform:none !important; transition: opacity 250ms ease-out, background-color 250ms ease-out, backdrop-filter 250ms ease-out, -webkit-backdrop-filter 250ms ease-out !important; } .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing{ opacity:0 !important; transform:none !important; background:rgba(18,18,18,0) !important; backdrop-filter:blur(0) !important; -webkit-backdrop-filter:blur(0) !important; pointer-events:none; } } /* === Desktop modal controls: minimal external treatment === */ @media(min-width:768px){ /* Keep counter inside the image. */ .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-counter{ left:14px !important; top:13px !important; background:rgba(255,255,255,.72) !important; } /* Simple black X just outside the image's top-right corner. */ .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-close{ right:-42px !important; top:-7px !important; width:32px !important; height:32px !important; border:0 !important; border-radius:0 !important; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; color:#111 !important; font-size:27px !important; font-weight:300 !important; line-height:1 !important; } /* Bare chevrons outside the image — no boxes, pills, or backgrounds. */ .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-nav{ top:50% !important; width:36px !important; height:52px !important; border:0 !important; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; color:#222 !important; font-size:36px !important; font-weight:200 !important; opacity:.72; transform:translateY(-50%) !important; transition:opacity 140ms ease; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-nav:hover{ opacity:1; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-prev{ left:-54px !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-next{ right:-54px !important; } /* Slower dissolve/refocus, no scale. */ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ transition: opacity 350ms ease-out, background-color 350ms ease-out, backdrop-filter 350ms ease-out, -webkit-backdrop-filter 350ms ease-out !important; transform:none !important; } .ec-rpg-viewer.ec-rpg-viewer-desktop-modal.is-closing{ opacity:0 !important; transform:none !important; background:rgba(18,18,18,0) !important; backdrop-filter:blur(0) !important; -webkit-backdrop-filter:blur(0) !important; } } /* === Desktop modal structural fix: portal + unclipped external controls === */ @media(min-width:768px){ .ec-rpg-viewer.ec-rpg-viewer-desktop-modal{ position:fixed !important; inset:0 !important; z-index:2147483640 !important; align-items:center !important; justify-content:center !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-stage{ overflow:visible !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-image{ overflow:hidden !important; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-nav, .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-modal-close{ z-index:20 !important; } } /* === Desktop full-resolution progressive loading === */ @media(min-width:768px){ .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-hires-loading{ position:absolute; left:50%; bottom:16px; z-index:18; display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:rgba(20,20,20,.70); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:11px; font-weight:500; line-height:1; letter-spacing:.01em; transform:translateX(-50%); pointer-events:none; animation:ecRpgHiResFadeIn 140ms ease-out both; } .ec-rpg-viewer-desktop-modal .ec-rpg-viewer-hires-spinner{ width:11px; height:11px; border:1.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:ecRpgHiResSpin .75s linear infinite; flex:0 0 auto; } @keyframes ecRpgHiResSpin{ to{transform:rotate(360deg)} } @keyframes ecRpgHiResFadeIn{ from{opacity:0;transform:translateX(-50%) translateY(3px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } } @media(prefers-reduced-motion:reduce){ .ec-rpg-viewer-hires-spinner{ animation:none !important; } .ec-rpg-viewer-hires-loading{ animation:none !important; } } /* === Mobile gallery metadata aligns with product content === */ @media(max-width:767px){ body.ec-react-product-gallery-page .ec-rpg-mobile-caption{ width:auto; margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px); padding-left:0 !important; padding-right:0 !important; } body.ec-react-product-gallery-page .ec-rpg-mobile-caption + .ec-rpg-mobile-progress{ margin-left:calc(50% - 50vw + 24px); margin-right:calc(50% - 50vw + 24px); } } /* === Keyboard accessibility === */ .ec-rpg-card:focus-visible, .ec-rpg-classic-thumb:focus-visible, .ec-rpg-mobile-viewport:focus-visible, .ec-rpg-viewer-close:focus-visible, .ec-rpg-viewer-nav:focus-visible, .ec-rpg-viewer-modal-close:focus-visible, .ec-rpg-viewer-modal-nav:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } /* === Mobile fullscreen close: pure dissolve === * Keep the current fullscreen presentation intact, but remove the scale-back * from the mobile close transition so the return to the product gallery feels * like a soft dissolve rather than a shrinking/jumping viewport. */ @media(max-width:767px){ .ec-rpg-viewer:not(.ec-rpg-viewer-desktop-modal){ transform:none !important; transition:opacity 240ms ease-out !important; } .ec-rpg-viewer:not(.ec-rpg-viewer-desktop-modal).is-closing{ opacity:0 !important; transform:none !important; } } @media(max-width:767px) and (prefers-reduced-motion:reduce){ .ec-rpg-viewer:not(.ec-rpg-viewer-desktop-modal){ transition:opacity 100ms linear !important; } } /* === EveryCommerce React variation swatches === */ /* Server-first suppression for products configured to use React swatches. The body class is emitted by PHP before first paint, so legacy Woo/CommerceKit controls never flash while the React controls are mounting. */ body.ec-react-swatches-configured .summary form.variations_form table.variations, body.ec-react-swatches-configured .summary form.variations_form .cgkit-attribute-swatches, body.ec-react-swatches-configured .entry-summary form.variations_form table.variations, body.ec-react-swatches-configured .entry-summary form.variations_form .cgkit-attribute-swatches{ display:none !important; } body.ec-react-swatches-active form.ec-react-swatches-form table.variations, body.ec-react-swatches-active form.ec-react-swatches-form .cgkit-attribute-swatches, body.ec-react-swatches-active form.ec-react-swatches-form [data-trigger="sizeGuide"], body.ec-react-swatches-active form.ec-react-swatches-form .sg-trigger, body.ec-react-swatches-active form.ec-react-swatches-form a.size-guide, body.ec-react-swatches-active form.ec-react-swatches-form button.size-guide, body.ec-react-swatches-active form.ec-react-swatches-form a.size-guide-link, body.ec-react-swatches-active form.ec-react-swatches-form button.size-guide-link, body.ec-react-swatches-active form.ec-react-swatches-form a.cgkit-size-guide, body.ec-react-swatches-active form.ec-react-swatches-form button.cgkit-size-guide{ display:none !important; } .ec-react-variation-controls{ width:100%; margin:0 0 24px; color:inherit; } .ec-rvs{ --ec-rvs-fg:currentColor; --ec-rvs-border:rgba(128,128,128,.38); --ec-rvs-border-strong:currentColor; --ec-rvs-muted:rgba(128,128,128,.95); --ec-rvs-soft:rgba(128,128,128,.08); color:inherit; display:flex; flex-direction:column; gap:24px; } @supports (color:color-mix(in srgb,currentColor 50%,transparent)){ .ec-rvs{ --ec-rvs-border:color-mix(in srgb,currentColor 24%,transparent); --ec-rvs-border-strong:color-mix(in srgb,currentColor 88%,transparent); --ec-rvs-muted:color-mix(in srgb,currentColor 68%,transparent); --ec-rvs-soft:color-mix(in srgb,currentColor 7%,transparent); } } .ec-rvs-group{margin:0;padding:0} .ec-rvs-heading{ display:flex; align-items:baseline; gap:10px; margin:0 0 9px; min-height:18px; } .ec-rvs-label{ color:inherit; font-size:13px; font-weight:700; line-height:1.2; letter-spacing:.015em; } .ec-rvs-selected-value{ color:var(--ec-rvs-muted); font-size:13px; font-weight:500; line-height:1.2; } .ec-rvs-message{ margin:-1px 0 10px; color:var(--ec-rvs-muted); font-size:13px; font-weight:450; line-height:1.4; } .ec-rvs-options{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } .ec-rvs-option{ -webkit-appearance:none; appearance:none; position:relative; box-sizing:border-box; margin:0; font:inherit; color:inherit; background:transparent; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,opacity .16s ease,transform .16s ease; } .ec-rvs-option:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } .ec-rvs-option.is-disabled, .ec-rvs-option:disabled{ cursor:not-allowed; opacity:.34; } /* Ring: Apple-like color disc with a separate selection ring. */ .ec-rvs-style-ring .ec-rvs-color{ display:grid; place-items:center; width:44px; height:44px; padding:4px; border:1px solid transparent; border-radius:999px; } .ec-rvs-style-ring .ec-rvs-color::after{ content:""; position:absolute; inset:0; border:2px solid transparent; border-radius:inherit; pointer-events:none; } .ec-rvs-style-ring .ec-rvs-color.is-selected::after{ border-color:var(--ec-rvs-border-strong); } .ec-rvs-style-ring .ec-rvs-color-chip{ display:block; width:32px; height:32px; border:1px solid color-mix(in srgb,currentColor 28%,transparent); border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } .ec-rvs-style-ring .ec-rvs-text{ min-width:54px; height:44px; padding:0 16px; border:1px solid var(--ec-rvs-border); border-radius:5px; background:var(--ec-rvs-soft); font-size:14px; font-weight:500; line-height:42px; text-align:center; } .ec-rvs-style-ring .ec-rvs-text.is-selected{ border-color:var(--ec-rvs-border-strong); box-shadow:inset 0 0 0 1px var(--ec-rvs-border-strong); background:transparent; } /* Tile: descriptive color chip + label, useful for similar apparel colors. */ .ec-rvs-style-tile .ec-rvs-option{ min-height:44px; border:1px solid var(--ec-rvs-border); border-radius:11px; background:var(--ec-rvs-soft); } .ec-rvs-style-tile .ec-rvs-option.is-selected{ border-color:var(--ec-rvs-border-strong); box-shadow:inset 0 0 0 1px var(--ec-rvs-border-strong); background:transparent; } .ec-rvs-style-tile .ec-rvs-color{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px 7px 8px; } .ec-rvs-style-tile .ec-rvs-color-chip{ display:block; width:28px; height:28px; flex:0 0 28px; border:1px solid color-mix(in srgb,currentColor 25%,transparent); border-radius:999px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } .ec-rvs-style-tile .ec-rvs-option-label{ font-size:13px; font-weight:550; white-space:nowrap; } .ec-rvs-style-tile .ec-rvs-text{ min-width:54px; padding:0 15px; font-size:14px; font-weight:500; line-height:42px; text-align:center; } /* Optional custom artwork inside existing color chips. */ .ec-rvs-color-chip.has-image{overflow:hidden;background:transparent !important} .ec-rvs-color-chip.has-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* Photo thumbnails: intentionally compact, not miniature product cards. */ .ec-rvs-style-photos .ec-rvs-color{display:grid;place-items:center;width:64px;height:64px;padding:3px;border:1px solid transparent;border-radius:12px} .ec-rvs-style-photos .ec-rvs-color::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;pointer-events:none} .ec-rvs-style-photos .ec-rvs-color.is-selected::after{border-color:var(--ec-rvs-border-strong)} .ec-rvs-style-photos .ec-rvs-photo-thumb{display:block;width:56px;height:56px;overflow:hidden;border:1px solid var(--ec-rvs-border);border-radius:9px;background:var(--ec-rvs-soft)} .ec-rvs-style-photos .ec-rvs-photo-thumb img,.ec-rvs-style-photos .ec-rvs-photo-fallback{display:block;width:100%;height:100%} .ec-rvs-style-photos .ec-rvs-photo-thumb img{object-fit:cover} .ec-rvs-style-photos .ec-rvs-text{min-width:54px;height:44px;padding:0 16px;border:1px solid var(--ec-rvs-border);border-radius:5px;background:var(--ec-rvs-soft);font-size:14px;font-weight:500;line-height:42px;text-align:center} .ec-rvs-style-photos .ec-rvs-text.is-selected{border-color:var(--ec-rvs-border-strong);box-shadow:inset 0 0 0 1px var(--ec-rvs-border-strong);background:transparent} @media(max-width:767px){.ec-rvs-style-photos .ec-rvs-color{width:60px;height:60px;border-radius:11px}.ec-rvs-style-photos .ec-rvs-photo-thumb{width:52px;height:52px;border-radius:8px}} .ec-rvs-size-guide{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:38px; margin:3px 0 0; padding:0 4px 0 0; border:0; border-radius:7px; background:transparent; color:var(--ec-rvs-muted); font:inherit; font-size:14px; font-weight:500; line-height:1.2; text-decoration:none; cursor:pointer; transition:color .16s ease,opacity .16s ease,background-color .16s ease; } .ec-rvs-size-guide-icon{ width:17px; height:17px; flex:0 0 17px; } .ec-rvs-size-guide:hover{color:inherit} .ec-rvs-size-guide:active{opacity:.68} .ec-rvs-size-guide:focus-visible{ outline:2px solid currentColor; outline-offset:3px; } /* Preserve the legacy fit-note hook names so the existing modal styling remains exact. */ .er-size-alert-link{ display:inline-block; margin-top:10px; color:inherit; text-decoration:underline; text-underline-offset:2px; } @media(max-width:767px){ .ec-react-variation-controls{margin-bottom:22px} .ec-rvs{gap:22px} .ec-rvs-heading{margin-bottom:9px} .ec-rvs-style-ring .ec-rvs-color{width:44px;height:44px} .ec-rvs-style-ring .ec-rvs-color-chip{width:32px;height:32px} .ec-rvs-style-ring .ec-rvs-text, .ec-rvs-style-tile .ec-rvs-text{min-width:55px} } @media(prefers-reduced-motion:reduce){ .ec-rvs-option{transition:none} } /* === React gallery mobile navigation contrast scrim === * Mobile only: a deliberately shallow, low-opacity top fade protects the * white storefront navigation over bright product photography. Desktop/tablet * navigation sits outside the gallery, so no scrim is rendered there. */ @media(max-width:767px){ body.ec-react-product-gallery-page #ec-react-gallery-host{ position:relative; } body.ec-react-product-gallery-page #ec-react-gallery-host::before{ content:""; position:absolute; z-index:3; top:0; left:50%; width:100vw; height:118px; transform:translateX(-50%); pointer-events:none; /* True continuous fade: CSS interpolates opacity at every pixel. */ background:linear-gradient( to bottom, rgba(0,0,0,.225) 0, rgba(0,0,0,0) 118px ); } }