/* Sunchips Video Pro (K) — popup UI * Scoped to .svpro-mfp (the Magnific mainClass). The popup is moved to by * Magnific, so everything here is intentionally NOT scoped to the Elementor wrapper. * Layout mirrors the site's reference popup: large media left, one-per-row list right. */ /* ---- Popup shell ---- (own class; theme's .video-lightbox no longer used) */ .svpro-mfp .svpro-lightbox { background: #fff !important; max-width: 1000px !important; width: 92% !important; margin: 24px auto !important; padding: 18px !important; position: relative !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); } /* ---- Two columns: media left, list right ---- */ .svpro-mfp .svpro-wrap { display: grid !important; grid-template-columns: 40% 1fr !important; gap: 22px !important; align-items: stretch !important; } /* Left media fills the whole column — full width & height (#4) */ .svpro-mfp .svpro-video-col { display: flex; min-width: 0; } .svpro-mfp .svpro-media { width: 100%; height: 78vh; border-radius: 14px; overflow: hidden; background: #000; display: flex; } .svpro-mfp .svpro-popup-video, .svpro-mfp .svpro-media iframe, .svpro-mfp .svpro-media video { display: block; width: 100% !important; height: 100% !important; object-fit: cover; background: #000; } /* Right list */ .svpro-mfp .svpro-content-col { max-height: 78vh; overflow-y: auto; padding-right: 4px; min-width: 0; } .svpro-mfp .svpro-list { display: flex !important; flex-direction: column !important; gap: 14px !important; grid-template-columns: none !important; /* cancel any theme .products grid */ margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ============ Popup PRODUCT card (own .svpro-pcard classes only) ============ * Fully independent of the theme's shop grid. Layout: image | title+price | "+" (right). */ .svpro-mfp .svpro-pcard { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: box-shadow .2s ease, transform .2s ease; } .svpro-mfp .svpro-pcard:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); transform: translateY(-1px); } .svpro-mfp .svpro-pcard-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; display: block; background: #f4f4f4; } .svpro-mfp .svpro-pcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .svpro-mfp .svpro-pcard-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .svpro-mfp .svpro-pcard-title { font-weight: 700; font-size: 15px; line-height: 1.25; color: #1a1a1a; text-decoration: none; } .svpro-mfp .svpro-pcard-title:hover { color: #c8102e; } /* Price: row-reverse so WooCommerce's trailing "From:" label shows first ("From: ₹499.00"). * inline-flex + align-self keeps it left-aligned; no underline on the sale tag. */ .svpro-mfp .svpro-pcard-price { display: inline-flex; align-self: flex-start; flex-direction: row-reverse; align-items: baseline; gap: 5px; color: #128a3c; font-weight: 600; text-decoration: none; } .svpro-mfp .svpro-pcard-price, .svpro-mfp .svpro-pcard-price * { text-decoration: none !important; } .svpro-mfp .svpro-pcard-price ins { background: transparent; color: #128a3c; } .svpro-mfp .svpro-pcard-price .amount { color: #128a3c; } .svpro-mfp .svpro-pcard-price del { color: #999; font-weight: 400; font-size: 85%; } /* "+" add / choose-options button, pinned to the right */ .svpro-mfp .svpro-pcard-add { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #2b2b2b; color: #fff !important; border: none; border-radius: 10px; font-size: 24px; font-weight: 400; line-height: 1; cursor: pointer; text-decoration: none; } .svpro-mfp .svpro-pcard-add:hover { background: #000; } .svpro-mfp .svpro-pcard-add.loading { opacity: .6; pointer-events: none; } /* ---- Card (products AND categories share this — one per row) ---- */ .svpro-mfp .svpro-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .svpro-mfp .svpro-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); transform: translateY(-1px); border-color: rgba(0, 0, 0, 0.12); } .svpro-mfp .svpro-card-thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: #f4f4f4; display: flex; align-items: center; justify-content: center; } .svpro-mfp .svpro-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .svpro-mfp .svpro-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .svpro-mfp .svpro-card-title { font-weight: 700; font-size: 16px; line-height: 1.25; color: #1a1a1a; } .svpro-mfp .svpro-card-price { font-weight: 600; color: #128a3c; } .svpro-mfp .svpro-card-price .amount { color: #128a3c; } .svpro-mfp .svpro-card-price del { color: #999; font-weight: 400; margin-right: 6px; } /* ---- Popup next / prev arrows (small circles on the sides) ---- * !important is used deliberately: theme/global `button {}` rules were stretching * these to full width. These declarations must win. */ .svpro-mfp .svpro-popup-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; min-width: 0 !important; max-width: 42px !important; flex: 0 0 auto !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: #fff !important; color: #111 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important; cursor: pointer; z-index: 6; } .svpro-mfp .svpro-popup-nav:hover { background: #f2f2f2 !important; } .svpro-mfp .svpro-popup-nav svg { width: 22px; height: 22px; } .svpro-mfp .svpro-popup-nav.svpro-prev { left: -14px !important; right: auto !important; } .svpro-mfp .svpro-popup-nav.svpro-next { right: -14px !important; left: auto !important; } /* ---- Magnific close button polish ---- */ .svpro-mfp .mfp-close { color: #333; } /* ---- Responsive (#5): stack video on top, products below ---- */ @media (max-width: 782px) { /* !important needed to beat the base .svpro-wrap !important rule */ .svpro-mfp .svpro-wrap { grid-template-columns: 1fr !important; } .svpro-mfp .svpro-video-col { order: 0; } .svpro-mfp .svpro-content-col { order: 1; } .svpro-mfp .svpro-media { height: auto !important; max-height: 50vh; } .svpro-mfp .svpro-popup-video, .svpro-mfp .svpro-media video, .svpro-mfp .svpro-media iframe { height: auto !important; max-height: 50vh; object-fit: contain; } .svpro-mfp .svpro-content-col { max-height: none; overflow: visible; } .svpro-mfp .svpro-popup-nav.svpro-prev { left: 6px !important; } .svpro-mfp .svpro-popup-nav.svpro-next { right: 6px !important; } } /* ===================== Thumbnail (carousel item) ===================== * 9:16 so full-height reel videos show without cropping (#2). */ .svpro .svpro-video-item { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; cursor: pointer; } .svpro .svpro-thumb-video, .svpro .svpro-video-item video, .svpro .svpro-video-item iframe { width: 100%; height: 100%; object-fit: cover; display: block; } /* Cart trigger icon (top-left overlay) */ .svpro .svpro-cart-trigger { position: absolute; top: 10px; left: 10px; z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; transition: background .2s ease; } .svpro .svpro-cart-trigger:hover { background: #c8102e; } .svpro .svpro-cart-trigger svg { width: 20px; height: 20px; } /* ---- Quick-view Back button (#1) ---- */ .svpro-qv-mfp .mfp-content { position: relative; } .svpro-qv-mfp .svpro-qv-back { position: absolute; top: 12px; left: 12px; z-index: 1100; display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px 7px 10px; border: none; border-radius: 999px; background: #111; color: #fff; font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .svpro-qv-mfp .svpro-qv-back:hover { background: #333; } .svpro-qv-mfp .svpro-qv-back svg { width: 18px; height: 18px; }