/* ══════════════════════════════════════════════════════════════════ Weekly Stock · Regional availability widget (.wks-rav) ────────────────────────────────────────────────────────────────── Faithful port of the DROIX design handoff ("Regional Availability Widget" + availability.css), namespaced wks- and self-contained: all design tokens are defined locally with the DROIX defaults and a host theme can retint everything by overriding the --wks-* variables on .weekly-stock-widget. Each state sets only TWO tokens (--wks-accent, --wks-tint): in_stock → green backorder → amber (+ pulsing live-ETA cue) backorder_no_date → amber preorder_deposit → purple (deposit/BNPL accent) unavailable → neutral grey ════════════════════════════════════════════════════════════════ */ .weekly-stock-widget, .wks-rav-pop { /* brand + neutral tokens (DROIX defaults — override per theme). Also scoped onto the region popover: it is appended to , outside the widget subtree, so it would otherwise resolve every var to nothing (no border/shadow/fonts). Theme overrides that target .weekly-stock-widget are mirrored onto it by widget.js at open time. */ --wks-green: #B0CB1F; --wks-green-dark: #74A401; --wks-green-tint: #F3F8DC; --wks-purple: #BB3DA1; --wks-warning: #FFBE1E; --wks-fg-1: #0B0B0B; --wks-fg-2: #242421; --wks-fg-4: #666666; --wks-fg-5: #999999; --wks-bg-2: #F8F8F8; --wks-bg-3: #F6F8FA; --wks-stroke-1: #F0F0F0; --wks-font-ui: inherit; --wks-font-body: inherit; --wks-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04); --wks-shadow-lg: 0 16px 40px rgba(38, 38, 38, 0.16); display: block; } .wks-rav { /* token defaults — overridden by the state modifier */ --wks-accent: var(--wks-green-dark); --wks-tint: var(--wks-green-tint); font-family: var(--wks-font-body); box-sizing: border-box; width: 100%; max-width: 430px; border: 1px solid color-mix(in srgb, var(--wks-accent) 24%, transparent); background: var(--wks-tint); border-radius: 16px; } /* ── state tokens ── */ .wks-rav--in_stock { --wks-accent: var(--wks-green-dark); --wks-tint: var(--wks-green-tint); } .wks-rav--backorder { --wks-accent: color-mix(in srgb, var(--wks-warning), black 45%); --wks-tint: color-mix(in srgb, var(--wks-warning) 14%, white); } .wks-rav--backorder_no_date { --wks-accent: color-mix(in srgb, var(--wks-warning), black 45%); --wks-tint: color-mix(in srgb, var(--wks-warning) 14%, white); } .wks-rav--preorder_deposit { --wks-accent: var(--wks-purple); --wks-tint: color-mix(in srgb, var(--wks-purple) 9%, white); } .wks-rav--unavailable { --wks-accent: var(--wks-fg-4); --wks-tint: var(--wks-bg-2); } /* neutral pre-resolution state — no colour implied before the region resolves */ .wks-rav--loading { --wks-accent: var(--wks-fg-4); --wks-tint: #fff; border-color: var(--wks-stroke-1); } /* ── status row ── */ .wks-rav-row { display: flex; gap: 11px; padding: 13px 16px 13px; align-items: flex-start; } .wks-rav-dot { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--wks-accent); } .wks-rav-dot.is-live { animation: wks-rav-pulse 2.1s infinite; } @keyframes wks-rav-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wks-accent) 50%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--wks-accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wks-accent) 0%, transparent); } } .wks-rav-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wks-rav-primary { font-family: var(--wks-font-ui); font-weight: 700; font-size: 15px; line-height: 1.32; color: var(--wks-fg-1); } .wks-rav-primary .wks-rav-accent { color: var(--wks-accent); } .wks-rav-sub { font-size: 12.75px; line-height: 1.45; color: var(--wks-fg-4); } .wks-rav-low { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--wks-font-ui); font-weight: 700; font-size: 12px; color: var(--wks-accent); } .wks-rav-low::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wks-accent); } /* ── live-ETA affordance: pulsing micro-dot + hover tip ── */ .wks-rav-live { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; padding: 1px 7px 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--wks-accent) 12%, transparent); color: var(--wks-accent); font-family: var(--wks-font-ui); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; cursor: default; vertical-align: middle; } .wks-rav-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wks-accent); animation: wks-rav-pulse 2.1s infinite; } .wks-rav-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); width: max-content; max-width: 220px; background: var(--wks-fg-1); color: #fff; font-family: var(--wks-font-body); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: none; line-height: 1.4; padding: 7px 10px; border-radius: 9px; box-shadow: var(--wks-shadow-md); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 5; } .wks-rav-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--wks-fg-1); } .wks-rav-live:hover .wks-rav-tip { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── region switcher row ── */ .wks-rav-region { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 2px; padding: 9px 16px; border-top: 1px solid color-mix(in srgb, var(--wks-accent) 16%, transparent); border-radius: 0 0 15px 15px; background: color-mix(in srgb, #fff 55%, transparent); font-size: 12.5px; color: var(--wks-fg-4); } /* circular country flags (SVG, no emoji — per design handoff) */ .wks-flag { display: inline-block; border-radius: 50%; overflow: hidden; flex: 0 0 auto; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); background: var(--wks-bg-3); } .wks-flag svg { display: block; width: 100%; height: 100%; } .wks-flag img { display: block; width: 100%; height: 100%; border-radius: 50%; } /* monogram fallback when a flag asset is missing */ .wks-flag--missing::after { content: attr(data-code); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #E8ECEF; color: #666; font: 700 8px/1 var(--wks-font-ui, system-ui, sans-serif); } .wks-rav-region-name { color: var(--wks-fg-2); font-weight: 600; white-space: nowrap; } .wks-rav-change { all: unset; cursor: pointer; margin-left: 2px; color: var(--wks-green-dark); font-weight: 700; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; } .wks-rav-change:hover { color: var(--wks-fg-1); } /* ── region popover (searchable country list) ── */ @keyframes wks-pop-in { from { opacity: 0; transform: translateY(-5px) scale(0.985); } to { opacity: 1; transform: none; } } .wks-rav-pop { animation: wks-pop-in 0.16s ease-out; transform-origin: top center; position: fixed; z-index: 100000; width: 268px; background: #fff; border: 1px solid var(--wks-stroke-1); border-radius: 16px; box-shadow: var(--wks-shadow-lg); overflow: hidden; font-family: var(--wks-font-body); } .wks-rav-pop-search { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--wks-stroke-1); } .wks-rav-pop-search svg { flex: 0 0 auto; color: var(--wks-fg-5); } .wks-rav-pop-search input { all: unset; flex: 1; font-size: 13.5px; color: var(--wks-fg-1); } .wks-rav-pop-search input::placeholder { color: var(--wks-fg-5); } .wks-rav-pop-list { max-height: 232px; overflow-y: auto; padding: 5px; } .wks-rav-opt { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--wks-fg-2); } .wks-rav-opt:hover { background: var(--wks-bg-2); } .wks-rav-opt.is-sel { background: var(--wks-green-tint); color: var(--wks-fg-1); font-weight: 600; } .wks-rav-opt-name { flex: 1; min-width: 0; } .wks-rav-opt-check { color: var(--wks-green-dark); display: flex; } .wks-rav-pop-empty { padding: 22px 14px; text-align: center; color: var(--wks-fg-5); font-size: 13px; } /* ── loading skeleton (page-cache-safe hydration) ── */ .wks-skel { padding: 14px 16px; } .wks-skel-row { display: flex; gap: 11px; align-items: flex-start; } .wks-skel-dot { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; } .wks-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; } .wks-shimmer { height: 11px; border-radius: 6px; background: linear-gradient(100deg, var(--wks-bg-3) 30%, var(--wks-bg-2) 50%, var(--wks-bg-3) 70%); background-size: 220% 100%; animation: wks-rav-sheen 1.25s ease-in-out infinite; } .wks-skel-dot.wks-shimmer { border-radius: 50%; } @keyframes wks-rav-sheen { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } } /* ── cart / checkout notice (informational, non-blocking) ── Rendered inside WooCommerce's native notice wrapper; these classes reproduce the design's amber info card where the theme allows HTML. */ .wks-rav-notice { display: flex; gap: 11px; align-items: flex-start; width: 100%; max-width: 560px; box-sizing: border-box; padding: 13px 16px; border-radius: 14px; background: color-mix(in srgb, #FFBE1E 13%, white); border: 1px solid color-mix(in srgb, #FFBE1E 38%, white); font-family: inherit; } .wks-rav-notice-ic { flex: 0 0 auto; margin-top: 1px; color: color-mix(in srgb, #FFBE1E, black 38%); display: flex; } .wks-rav-notice-txt { font-size: 13px; line-height: 1.5; color: #242421; } .wks-rav-notice-txt strong { color: #0B0B0B; font-weight: 700; } /* ── Theme compatibility ───────────────────────────────────────────────── While the widget shows an authoritative per-region state (body gets .weekly-rav-active from widget.js), hide zone-blind theme stock UIs that would contradict it — currently CommerceKit's inventory bar ("10+ in stock" + progress bar, Shoptimizer stores). The merchant-placed shortcode variant is deliberately left visible. When the widget defers to the theme (unknown SKU / API failure) the class is absent and everything shows. */ body.weekly-rav-active .commercekit-inventory:not(.cgkit-inventory-shortcode), body.weekly-rav-pending .commercekit-inventory:not(.cgkit-inventory-shortcode) { display: none !important; } /* Shoptimizer's top-of-summary stock badge (.stock-container pill) is the store-wide status — same zone-blind contradiction, same rule. */ body.weekly-rav-active .stock-container, body.weekly-rav-pending .stock-container { display: none !important; }