/** * Product page "Share" popover styles. * * Matches speedcar123.com's product-detail share popover exactly * (confirmed live via its actual rendered DOM and click behavior): a small * bordered square toggle button, a white rounded popover with WhatsApp/ * Telegram icons + "Copy link", and a top-center "Copy successful" toast. * * Positioned `position: absolute` within `.wcvm-product-share` rather than * portaled to `` (contrast the Vehicle Filter widget's dropdown, * `vehicle-filter.css`) — there is no confirmed stacking-context trap here * yet, since the real single-product template can't be inspected live * while chinaspeedcar.com's store pages are in WooCommerce's "Coming Soon" * mode. If clipping is reported once visible, apply the same portal * pattern documented in TROUBLESHOOTING.md. */ .wcvm-product-share { --wcvm-share-border: #e2e2e2; --wcvm-share-icon: #b6b6b6; position: relative; display: inline-flex; } /* * Every visual property below reads from a `--wcvm-share-btn-*` custom * property first — `ProductShare::build_markup()` sets these inline from * the "Vehicle Manager → Share Button" settings page * (`Admin\ShareButtonSettings`), per-render. The `var(..., default)` * fallback on every single one is what this rule looked like statically * before that settings page existed, so an admin who never opens the * settings page (or a request where the settings service is unavailable * for any reason) gets byte-identical rendering to before. */ .wcvm-product-share__toggle { display: flex; align-items: center; justify-content: center; width: var( --wcvm-share-btn-size, 30px ); height: var( --wcvm-share-btn-size, 30px ); padding: var( --wcvm-share-btn-padding, 0 ); margin: var( --wcvm-share-btn-margin, 0 ); border: var( --wcvm-share-btn-border-width, 1px ) solid var( --wcvm-share-btn-border-color, var( --wcvm-share-border ) ); border-radius: var( --wcvm-share-btn-radius, 6px ); background: var( --wcvm-share-btn-bg, #fff ); color: var( --wcvm-share-btn-icon-color, var( --wcvm-share-icon ) ); cursor: pointer; box-sizing: border-box; transition: color 0.2s ease, border-color 0.2s ease; } .wcvm-product-share__toggle:hover, .wcvm-product-share__toggle[aria-expanded="true"] { color: #333; border-color: #333; } .wcvm-product-share__panel { position: absolute; top: calc( 100% + 10px ); right: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.18 ); white-space: nowrap; } .wcvm-product-share__panel[hidden] { display: none; } .wcvm-product-share__item { display: flex; align-items: center; gap: 8px; padding: 0; border: none; background: none; cursor: pointer; color: #333; font-size: 14px; font-weight: 500; } .wcvm-product-share__item:not( :last-child )::after { content: ''; display: inline-block; width: 1px; height: 18px; margin-left: 10px; background: var( --wcvm-share-border ); } .wcvm-product-share__item--copy:hover { color: #2563eb; } /* "Copy successful" toast */ .wcvm-product-share__toast { position: fixed; top: 16px; left: 50%; z-index: 100001; display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: #fff; border: 1px solid #d1fae5; border-radius: 8px; box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.15 ); font-size: 14px; color: #333; transform: translate( -50%, -12px ); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .wcvm-product-share__toast[hidden] { display: none; } .wcvm-product-share__toast.is-visible { transform: translate( -50%, 0 ); opacity: 1; } @media ( max-width: 480px ) { .wcvm-product-share__panel { right: auto; left: 50%; transform: translateX( -50% ); } } /* * Unrelated pre-existing site bug, patched here as a pragmatic fix — see * TROUBLESHOOTING.md. The product page's own "All Images" * (`elementor-element-ddde213`) and "All Videos" * (`elementor-element-bbef5f0`) Elementor Icon List widgets both sit * inside a sidebar column only ~120-207px wide. Elementor's own * `.elementor-icon-list-text` has `word-break: break-word` with no * minimum width on its flex-item chain, so once the column is narrower * than the text's natural width, the browser wraps it one character per * line instead of as whole words. Confirmed live (removing this plugin's * own Share widget entirely from the DOM didn't change it) that this has * nothing to do with this plugin — patched here only because this * stylesheet is already the one asset this plugin loads on every product * page, not because it conceptually belongs to "Share." Scoped to these * two specific widgets' own generated element ids, deliberately NOT the * bare `.elementor-icon-list-text` class — that class is Elementor's own * generic icon-list styling, used by other icon lists on this site that * may legitimately want normal word-wrapping; only these two * narrow-column instances need the override. * `white-space: nowrap` keeps each label as one readable line (it may * overflow its narrow column visually) instead of the unreadable * per-character stack — a real fix would give the sidebar column enough * width for its content, a template change outside this plugin's files. */ .elementor-element-ddde213 .elementor-icon-list-text, .elementor-element-bbef5f0 .elementor-icon-list-text { white-space: nowrap; } /* * The "All Images"/"All Videos" widgets above sit side by side * (`display: flex; flex-direction: row; flex-wrap: nowrap`) in their own * shared parent container (`elementor-element-4ad5e6d`), each only ~45px * wide. Making their text `nowrap` (above) stopped it wrapping * per-character, but both labels now overflow rightward into the *same* * space and visually collide with each other. Allowing this row to wrap * lets the second widget drop to its own line instead of overlapping the * first — same "unrelated pre-existing bug, patched pragmatically here" * caveat as above. Confirmed live this needs `!important`: without it, * Elementor's own generated per-post CSS * (`wp-content/uploads/elementor/css/post-*.css`) still wins and the row * stays `nowrap` — same class of cascade fight already hit multiple * times elsewhere in this plugin (see TROUBLESHOOTING.md). */ .elementor-element-4ad5e6d { flex-wrap: wrap !important; } /* * Root cause of the narrow ~120-207px sidebar itself (the actual cause * behind both patches above, and the product page's main reported * "layout broken" symptom — big blank gap next to a crushed gallery/specs * column). Confirmed live and reproducible on every product page checked * (present since before this plugin's Share widget existed — same layout * on a page with the widget entirely removed from the DOM): the row * holding the breadcrumb (`elementor-element-133ba137`), the H1 title * (`elementor-element-76c6b046`), and the gallery/specs/share sidebar * (`elementor-element-5f9c7f1`) has all three as flex items with * `flex-shrink: 1`, but the breadcrumb and title are each configured with * `width: 100%` (visible via `getComputedStyle(el).getPropertyValue( * '--width')` — Elementor's own `.e-con { width: var(--width) }` engine) * while the sidebar is configured `width: 40%`. That's 240% of the row's * actual width being requested by three competing items — the browser's * proportional flex-shrink math crushes all three down to fit, and * because the breadcrumb/title's oversized 100% "asks" dominate that * math, the sidebar (holding the gallery, Key Specifications, price, and * the Share button) ends up rendering at ~18% instead of its own intended * 40%. Elementor's "Regenerate CSS & Data" tool does not fix this — the * generated `--width` values are correct, this is a genuine flexbox * sizing outcome, not a stale-cache problem. Not this plugin's bug (see * TROUBLESHOOTING.md for the full diagnosis, including the DOM-removal * test proving it), but patched here pragmatically for the same reason as * the two patches above: this stylesheet is already loaded on every * product page. * * Deliberately only `flex-shrink` — no `width`/`flex-basis`/`flex-grow` * of any kind. Per explicit request: "remove hard coded widths... it must * use elementor widths." `flex-basis` defaults to `auto`, which per the * CSS Flexbox spec resolves to the element's own `width` property when * unset — since Elementor already sets `width: var(--width)` (its own * configured 40%) via the `.e-con` rule, the sidebar's *sizing* was * always correctly driven by Elementor's own value; the only problem was * `flex-shrink: 1` letting the other two siblings' oversized 100% claims * crush it below that value. Setting `flex-shrink: 0` stops it being * crushed while changing nothing about *what* size it resolves to — if * this widget's Width setting is ever changed in the Elementor editor, * this rule keeps respecting whatever that new value is, since no size is * hardcoded here at all. The breadcrumb and title are left completely * untouched (no override of any kind) — they simply shrink, using their * own native flex-shrink behavior, against whatever space remains once * the sidebar has taken its own guaranteed share. * * Scoped inside `@media (min-width: 1025px)` deliberately: the template's * own responsive behavior already switches this same row to * `flex-direction`-driven full-width stacking (`--width: 100%` on all * three, confirmed live) at 1024px and below — confirmed the exact * threshold live (1024px still 100%, 1025px already 40%). Applying this * override unconditionally would have fought that intentional * mobile/tablet stacked layout and forced a cramped 40%-wide column on a * phone-width screen instead. */ @media ( min-width: 1025px ) { .elementor-element-5f9c7f1 { flex-shrink: 0 !important; } }