/** * PMCF Checkout Gate (v0.4.27 — classic / FunnelKit) * * When JS decides the active address is incomplete OR the server says Amazon * rejected it, we add `pmcf-shipping-gated` to (and also * `pmcf-address-invalid` for the rejected-by-Amazon variant). We then: * - Hide the rate list (#shipping_method and the FunnelKit wrapper items) * - Hide FunnelKit's own "Shipping method" heading (it duplicates the one * inside the options card above) * - Inject a styled placeholder inside the FunnelKit shipping-options * container (or tr.shipping on vanilla). Copy swaps between "Enter your * shipping address..." (gated/incomplete) and "Fix the address above..." * (invalid) based on which body class is active. Note: the invalid copy * is deliberately generic — the real diagnosis lives in the inline * .pmcf-zip-suggestion next to the offending field, so this placeholder * just points upward and never competes with / contradicts it. * * Also renders the rewritten rate label bits from pmcf-checkout-gate.js: * - .pmcf-was / del → original price, struck through, muted gray. * - .pmcf-pct → "50% off" tail, small uppercase-ish accent. */ /* --- Gated state: hide the rates + the duplicate FunnelKit heading -------- */ body.pmcf-shipping-gated #shipping_method, body.pmcf-shipping-gated .wfacp_shipping_table, body.pmcf-shipping-gated .wfacp_single_shipping_method { display: none !important; } /* FunnelKit renders its own "Shipping method" label outside the options wrapper (.wfacp_border > .wfacp_main_form.label_shiping). It's redundant with the card heading above — only visible when the card is empty, which is the exact state we're creating. Hide it while gated. */ body.pmcf-shipping-gated .wfacp_border .wfacp_main_form.label_shiping, body.pmcf-shipping-gated .wfacp_main_form.label_shiping { display: none !important; } /* v0.4.25: FunnelKit renders its native "There are no shipping options available..." notice as a child element inside .wfacp_shipping_options (and/or tr.shipping td on vanilla classic). That message duplicates — and contradicts — our own placeholder. Hide every direct child while gated so only our ::after placeholder shows through. ::after is a pseudo-element, not a child, so it survives. */ body.pmcf-shipping-gated .wfacp_shipping_options > *, body.pmcf-shipping-gated tr.shipping td > * { display: none !important; } /* FunnelKit path: render the placeholder as a styled box inside the options wrapper. Neutral light background, square corners, matches the way the site's other "empty state" blocks read. */ body.pmcf-shipping-gated .wfacp_shipping_options::after, body.pmcf-shipping-gated tr.shipping td::after { content: "Enter your shipping address to view available shipping methods."; display: block; margin-top: 8px; padding: 18px 24px; background: #fafafa; border: 1px solid #e6e6e6; color: #555; font-size: 15px; font-weight: 400; line-height: 1.5; text-align: center; } /* Invalid-address variant: same shell, different copy + an error tint so it's obvious the user needs to do something, not just wait. */ body.pmcf-shipping-gated.pmcf-address-invalid .wfacp_shipping_options::after, body.pmcf-shipping-gated.pmcf-address-invalid tr.shipping td::after { content: "Fix the address above to see shipping options."; background: #fdf4f4; border-color: #e8c9c9; color: #8a3a3a; } /* v0.4.25: right-column order-summary placeholder injected by syncSummaryShippingCell() in pmcf-checkout-gate.js. Narrower column, so tighter padding + smaller font than the main-form placeholder, but the same neutral/error palette so the two locations read as one system. */ .pmcf-summary-placeholder { display: block; padding: 10px 12px; background: #fafafa; border: 1px solid #e6e6e6; color: #555; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: center; } .pmcf-summary-placeholder.pmcf-invalid { background: #fdf4f4; border-color: #e8c9c9; color: #8a3a3a; } /* --- Invalid-field styling: red accent on the offending inputs ----------- */ body.pmcf-address-invalid .pmcf-field-error input, body.pmcf-address-invalid .pmcf-field-error select { border-color: #c0392b !important; box-shadow: 0 0 0 1px rgba( 192, 57, 43, 0.15 ); } body.pmcf-address-invalid .pmcf-field-error label { color: #8a3a3a; } /* --- Styled discount label bits (rewritten client-side from plain text) --- */ #shipping_method .pmcf-was { color: #888; font-weight: 400; margin-left: 4px; } #shipping_method .pmcf-was del { text-decoration: line-through; text-decoration-thickness: 1px; } #shipping_method .pmcf-pct { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e8f5ec; color: #2c7a3d; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; vertical-align: 1px; } /* --- v0.4.27: ZIP "did you mean" suggestion (Google Maps integration) --- * * Rendered by renderZipSuggestion() in pmcf-checkout-gate.js whenever * pmcf-address-autocomplete.js emits a `pmcf:zip-suggestion` event. Lives * inside the postcode field's form-row (below the input + above the next * field), mirroring Shopify's inline error treatment from Intelligent Change. * * Colors are tuned to the same red family used by the "invalid address" * placeholder above (#8a3a3a / #e8c9c9) so the whole invalid state reads as * one UI layer, not two independent features. */ .pmcf-zip-suggestion { display: block; margin-top: 6px; padding: 0; color: #8a3a3a; font-size: 13px; font-weight: 400; line-height: 1.4; } .pmcf-zip-suggestion a.pmcf-zip-apply { color: #8a3a3a; text-decoration: underline; font-weight: 600; cursor: pointer; } .pmcf-zip-suggestion a.pmcf-zip-apply:hover, .pmcf-zip-suggestion a.pmcf-zip-apply:focus { color: #6b2c2c; text-decoration: underline; } /* Address autocomplete dropdown. We render our own dropdown (Places API (New) * is headless — no injected .pac-container), so these styles target the custom * markup produced by assets/js/pmcf-address-autocomplete.js. The JS anchors the * dropdown to the address input by setting inline left/top/width at render time * and promoting the input's parent to position: relative; these rules just * handle presentation. */ .pmcf-ac-dropdown { position: absolute; z-index: 100001; /* sit above FunnelKit's checkout-layout stacking context */ background: #fff; border: 1px solid #d5d5d5; border-radius: 4px; box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 ); font-family: inherit; font-size: 14px; line-height: 1.4; margin: 2px 0 0; padding: 4px 0; max-height: 320px; overflow-y: auto; box-sizing: border-box; } .pmcf-ac-dropdown[hidden] { display: none; } .pmcf-ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; color: #1e1e1e; white-space: nowrap; overflow: hidden; } .pmcf-ac-item:hover, .pmcf-ac-item-selected { background: #f6f7f7; } .pmcf-ac-icon { flex: 0 0 18px; color: #888; opacity: 0.9; } .pmcf-ac-item-selected .pmcf-ac-icon, .pmcf-ac-item:hover .pmcf-ac-icon { color: #444; } .pmcf-ac-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pmcf-ac-main { font-weight: 600; } .pmcf-ac-secondary { color: #666; font-weight: 400; } /* --- v0.4.32: magnifying-glass hint inside the address_1 input --- * * The autocomplete is headless (no Google-injected UI), so the input looks * like a plain text field until you start typing. Painting a search glyph * on the right-hand side signals "this is searchable" before the dropdown * opens. attachSearchIcon() in pmcf-address-autocomplete.js injects the * span, positions it with inline left/top relative to the input's parent, * and re-anchors on resize + updated_checkout. pointer-events: none keeps * the input clickable through the glyph. */ .pmcf-ac-search-icon { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #888; opacity: 0.85; pointer-events: none; z-index: 2; } .pmcf-ac-search-icon svg { width: 18px; height: 18px; display: block; }