/** * IGSHOP Shop Kit — mobile price bar (TikTok style). * * Rendered under the product gallery and shown on phones only (below * 768px). Moved out of product-gallery.css so the bar keeps its styles when * the tiled gallery is switched off (e.g. the IGSHOP Store theme's * "classic" gallery layout). Loaded right after product-gallery.css, so on * sites with both, every rule keeps the order it always had. * * Two layouts: * Elementor Pro templates The bar is appended inside the Product Images * widget. The gallery reserves the bar's height * as bottom margin and the bar is pulled up into * it, because Elementor's flex line sizing would * otherwise let the next section overlap it. * IGSHOP Store theme The theme prints the bar right after * div.images; it sits in normal flow. * * The Elementor-only rules end in :where(:not(.igs-theme *)). That skips * them on the IGSHOP Store theme (whose carries .igs-theme) while * adding zero specificity — :where() never counts — so on every other site * they win and lose exactly as they did before 2.10.0. */ :root { --qav-mpb-h: 72px; } /* --------------------------------------------------------------------------- Mobile price bar (TikTok style) — rendered under the gallery, phones only. --------------------------------------------------------------------------- */ .qav-mpb { --qav-mpb-h: 72px; display: none; background: var(--qav-brand-primary, var(--e-global-color-primary, #330917)); color: #fff; padding: 12px 14px; align-items: center; justify-content: space-between; gap: 10px; } .qav-mpb-left { display: flex; flex-direction: column; gap: 2px; } .qav-mpb-row { display: flex; align-items: center; gap: 10px; } .qav-mpb-pill { background: var(--qav-brand-accent, var(--e-global-color-accent, #14848c)); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 6px; } .qav-mpb-now { font-size: 24px; font-weight: 700; line-height: 1; } .qav-mpb-cur, .qav-mpb-from { font-size: 14px; font-weight: 600; } .qav-mpb-was { font-size: 12px; color: rgba(255, 255, 255, 0.75); text-decoration: line-through; /* Breathing room so the struck-through digits stay legible. */ letter-spacing: 0.5px; } /* Right side: countdown */ .qav-mpb-ends { display: flex; flex-direction: column; align-items: center; gap: 5px; } .qav-mpb-lbl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; } .qav-mpb-boxes { display: flex; align-items: center; gap: 4px; } .qav-mpb-t { background: var(--qav-brand-accent, var(--e-global-color-accent, #14848c)); color: #fff; font-size: 13px; font-weight: 400; padding: 3px 5px; border-radius: 4px; font-variant-numeric: tabular-nums; } .qav-mpb-c { opacity: 0.6; font-size: 12px; } /* Days box (and its colon) drop off inside the final 24 hours. */ .qav-mpb-ends[data-days='0'] .qav-mpb-u-days, .qav-mpb-ends[data-days='0'] .qav-mpb-c-days { display: none; } /* Flash sale (flag written by the WooCommerce Bulk Sales Manager plugin): red bar, black discount pill and ticker boxes, bold "Flash Sale" label. */ .qav-mpb.flash-sale { background: #ff0000; } .qav-mpb.flash-sale .qav-mpb-pill { background: #000; } .qav-mpb.flash-sale .qav-mpb-t { background: #000; } .qav-mpb.flash-sale .qav-mpb-lbl { font-weight: 800; opacity: 1; } /* Right side: free shipping */ .qav-mpb-ship { display: flex; align-items: center; gap: 8px; max-width: 46%; } .qav-mpb-ship svg { width: 22px; height: 22px; flex: 0 0 auto; opacity: 0.9; } .qav-mpb-fs-lines { display: flex; flex-direction: column; gap: 1px; } .qav-mpb-fs1 { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .qav-mpb-fs2 { font-size: 10px; opacity: 0.75; } @media (max-width: 767px) { /* Elementor-built pages: a fixed-height bar pulled up into the space div.images reserves below (see further down). */ .qav-mpb:where(:not(.igs-theme *)) { height: var(--qav-mpb-h, 72px); margin-top: calc(-1 * var(--qav-mpb-h, 72px)); box-sizing: border-box; } /* IGSHOP Store theme (classic WooCommerce templates): the theme prints the bar straight after div.images in the gallery column, so it simply sits in normal flow under the photos, full width, no negative margin. */ .igs-theme .qav-mpb { width: 100%; min-height: var(--qav-mpb-h, 72px); margin: 0; box-sizing: border-box; } /* The bar's discount pill replaces the sale badge on phones. */ .woocommerce .elementor-widget-woocommerce-product-images span.onsale { display: none; } /* Elementor's wrapped-flex line sizing shorts the gallery column by ~32px versus its real rendered height, which pulls the next section (title) under the overlaid bar. Give the title explicit clearance on phones; the bar is a fixed 72px so this is deterministic. */ .single-product div.product .product_title:where(:not(.igs-theme *)) { margin-top: 50px !important; } /* The template gives the image widget and its ancestor containers fixed heights sized for the desktop tile grid. On phones that leaves a dead gap under the 4:5 image, clips the price bar, and lets the title overlap it. Let every box in the chain hug its content instead. */ .single-product .e-con:has(.elementor-widget-woocommerce-product-images), .single-product .elementor-widget-woocommerce-product-images, .single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery, .single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery__wrapper { height: auto !important; min-height: 0 !important; max-height: none !important; flex-basis: auto !important; flex-shrink: 0 !important; } /* Elementor's wrapped-flex line sizing tracks the gallery's box INCLUDING its margins, but not a sibling added after it — so a bar in normal flow gets overlapped by the next section. Trick: reserve exactly the bar's height as gallery bottom margin (replacing Hello Commerce's 64px), then pull the bar up into that reserved space. The layout engine counts the margin; shoppers see the bar. */ .single-product .woocommerce div.product div.images:where(:not(.igs-theme *)), .single-product div.product div.images:where(:not(.igs-theme *)) { margin-bottom: var(--qav-mpb-h, 72px) !important; } .qav-mpb { display: flex; } /* The bar replaces the standard price widget and the countdown card on phones. The archive overlay countdowns in product grids are excluded. The countdown card rule applies on the IGSHOP Store theme too: on phones the bar carries the countdown there as well. */ .single-product .elementor-widget-woocommerce-product-price, .single-product .wc-sale-countdown:not(.archive-countdown-wrapper .wc-sale-countdown) { display: none !important; } }