/* VendMizer Pro — storefront product-page controls. * * The two blocks assets/js/vmzp-store-addons.js contributes through the core * product page's block extension seam: the product add-ons picker * (.vmz-sf-addon-*) and the subscription selector (.vmz-sf-sub__*). The seam * adds no class of its own to a block's body and the core storefront ships no * rules for either prefix, so everything the two blocks need is here. * * Scope. Every selector opens on one of those two prefixes, so nothing here * can reach the core storefront's own markup. Modelled on vmzp-store.css, * which does the same for the checkout tip selector. * * Theme. Loads after the core's vmz-store.css and reads only its `--sf-*` * design tokens. The core swaps the whole token set by putting .vmz-sf-light * or .vmz-sf-dark on (applyTheme() in vmz-store-app.js), so dark mode * needs no rules of its own here — with one exception, at the bottom: the * browser paints native date / time / colour / range widgets from * `color-scheme`, which no token can carry. * * Direction. The core sets dir="rtl" on and overrides physical * properties under [dir="rtl"]. Everything below is written with logical * properties, which flip on their own; the [dir="rtl"] block at the bottom is * only for the two things logical properties cannot express. */ /* ── Add-on groups ──────────────────────────────────────────────────────── */ .vmz-sf-addon-groups { display:flex;flex-direction:column;gap:14px;margin:16px 0 } .vmz-sf-addon-group { border:1px solid var(--sf-border);border-radius:var(--sf-radius); background:var(--sf-bg-card);overflow:hidden; } .vmz-sf-addon-group__head { display:flex;align-items:center;gap:8px;width:100%; padding:11px 14px;background:var(--sf-bg-secondary); border-bottom:1px solid var(--sf-border-light); font-family:var(--sf-font);text-align:start; } .vmz-sf-addon-group__head--static { cursor:default } .vmz-sf-addon-group__head:hover { background:var(--sf-bg-hover) } .vmz-sf-addon-group__head--static:hover { background:var(--sf-bg-secondary) } .vmz-sf-addon-group__icon { display:inline-flex;color:var(--sf-text-muted);flex-shrink:0 } .vmz-sf-addon-group__title { font-size:14px;font-weight:600;color:var(--sf-text);flex:1;min-width:0 } .vmz-sf-addon-group__chev { display:inline-flex;color:var(--sf-text-muted);flex-shrink:0; transition:transform var(--sf-transition-fast); } .vmz-sf-addon-group__chev--shut { transform:rotate(-90deg) } .vmz-sf-addon-group__desc { padding:8px 14px 0;font-size:12px;line-height:1.5;color:var(--sf-text-muted); } .vmz-sf-addon-group__body { display:flex;flex-direction:column;gap:14px;padding:14px } .vmz-sf-addon-group__body--shut { display:none } /* ── Tab strip inside a group ───────────────────────────────────────────── */ .vmz-sf-addon-tabs { display:flex;gap:4px;flex-wrap:wrap; border-bottom:1px solid var(--sf-border);padding-bottom:6px; } .vmz-sf-addon-tab { padding:6px 12px;font-size:12px;font-weight:600;font-family:var(--sf-font); color:var(--sf-text-secondary);background:transparent; border:1px solid transparent;border-radius:var(--sf-radius-full); transition:background var(--sf-transition-fast),color var(--sf-transition-fast); } .vmz-sf-addon-tab:hover { color:var(--sf-text);background:var(--sf-bg-hover) } .vmz-sf-addon-tab--active { color:var(--sf-accent);background:var(--sf-accent-soft);border-color:var(--sf-accent); } .vmz-sf-addon-panel { display:flex;flex-direction:column;gap:14px } .vmz-sf-addon-panel--hidden { display:none } /* ── One field ──────────────────────────────────────────────────────────── */ .vmz-sf-addon-field { display:flex;flex-direction:column;gap:6px } .vmz-sf-addon-field--hidden { display:none } .vmz-sf-addon-field--bad .vmz-sf-addon-input, .vmz-sf-addon-field--bad .vmz-sf-addon-select, .vmz-sf-addon-field--bad .vmz-sf-addon-opts, .vmz-sf-addon-field--bad .vmz-sf-addon-swatches { border-color:var(--sf-danger); } .vmz-sf-addon-field__row { display:flex;align-items:baseline;gap:8px;min-height:16px } .vmz-sf-addon-field__label { font-size:13px;font-weight:600;color:var(--sf-text);flex:1;min-width:0; } .vmz-sf-addon-field__req { color:var(--sf-danger);margin-inline-start:3px } .vmz-sf-addon-field__delta { margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--sf-accent); white-space:nowrap;font-variant-numeric:tabular-nums; } .vmz-sf-addon-field__control { display:block } .vmz-sf-addon-field__help { font-size:11px;line-height:1.5;color:var(--sf-text-muted) } .vmz-sf-addon-field__error { font-size:11px;line-height:1.5;color:var(--sf-danger);font-weight:600 } /* ── Text, numeric and stamp inputs ─────────────────────────────────────── */ .vmz-sf-addon-input, .vmz-sf-addon-select { width:100%;padding:9px 12px;font-size:14px;font-family:var(--sf-font); color:var(--sf-text);background:var(--sf-input-bg,var(--sf-bg-card)); border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm); transition:border-color var(--sf-transition-fast); } .vmz-sf-addon-input:focus, .vmz-sf-addon-select:focus { outline:none;border-color:var(--sf-accent) } .vmz-sf-addon-input::placeholder { color:var(--sf-text-muted) } .vmz-sf-addon-input--area { resize:vertical;min-height:76px;line-height:1.5 } .vmz-sf-addon-input--num { max-width:160px } .vmz-sf-addon-input--stamp { max-width:220px } .vmz-sf-addon-range-wrap { display:flex;align-items:center;gap:10px } .vmz-sf-addon-range { flex:1;min-width:0;accent-color:var(--sf-accent) } .vmz-sf-addon-range__out { min-width:48px;text-align:end;font-size:13px;font-weight:600; color:var(--sf-text);font-variant-numeric:tabular-nums; } .vmz-sf-addon-color { width:44px;height:32px;padding:2px;background:var(--sf-bg-card); border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm); } /* ── Radio / checkbox option lists ──────────────────────────────────────── */ .vmz-sf-addon-opts { display:flex;flex-direction:column;gap:6px;border:1px solid transparent } .vmz-sf-addon-opt { display:flex;align-items:center;gap:8px;padding:8px 11px; border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm); background:var(--sf-bg-card);cursor:pointer; transition:border-color var(--sf-transition-fast),background var(--sf-transition-fast); } .vmz-sf-addon-opt:hover { border-color:var(--sf-text-muted) } .vmz-sf-addon-opt--on { border-color:var(--sf-accent);background:var(--sf-accent-soft) } .vmz-sf-addon-opt--off { opacity:.45;cursor:not-allowed } .vmz-sf-addon-opt--off:hover { border-color:var(--sf-border) } .vmz-sf-addon-opt--single { width:100% } .vmz-sf-addon-opt__box { flex-shrink:0;accent-color:var(--sf-accent);cursor:inherit } .vmz-sf-addon-opt__text { font-size:13px;color:var(--sf-text);flex:1;min-width:0 } .vmz-sf-addon-opt__delta { font-size:12px;font-weight:700;color:var(--sf-accent); white-space:nowrap;font-variant-numeric:tabular-nums; } /* ── Image swatch grids ─────────────────────────────────────────────────── */ .vmz-sf-addon-swatches { display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px; border:1px solid transparent; } .vmz-sf-addon-swatch { display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px; border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm); background:var(--sf-bg-card);font-family:var(--sf-font); transition:border-color var(--sf-transition-fast),background var(--sf-transition-fast); } .vmz-sf-addon-swatch:hover { border-color:var(--sf-text-muted) } .vmz-sf-addon-swatch--on { border-color:var(--sf-accent);background:var(--sf-accent-soft) } .vmz-sf-addon-swatch--off { opacity:.45;cursor:not-allowed } .vmz-sf-addon-swatch--off:hover { border-color:var(--sf-border) } .vmz-sf-addon-swatch__img { width:100%;aspect-ratio:1/1;object-fit:cover; border-radius:var(--sf-radius-sm);background:var(--sf-bg-muted); } .vmz-sf-addon-swatch__blank { display:flex;align-items:center;justify-content:center; width:100%;aspect-ratio:1/1;color:var(--sf-text-muted); border-radius:var(--sf-radius-sm);background:var(--sf-bg-muted); } .vmz-sf-addon-swatch__label { font-size:11px;line-height:1.4;color:var(--sf-text);text-align:center; overflow:hidden;text-overflow:ellipsis;max-width:100%; } .vmz-sf-addon-swatch__delta { font-size:11px;font-weight:700;color:var(--sf-accent);font-variant-numeric:tabular-nums; } /* ── File upload ────────────────────────────────────────────────────────── */ .vmz-sf-addon-file { display:flex;align-items:center;gap:8px;flex-wrap:wrap } .vmz-sf-addon-file__pick { display:inline-flex;align-items:center;gap:6px;padding:7px 12px; font-size:13px;font-weight:600;color:var(--sf-text-secondary); border:1px dashed var(--sf-border);border-radius:var(--sf-radius-sm); background:var(--sf-bg-card);cursor:pointer; transition:border-color var(--sf-transition-fast),color var(--sf-transition-fast); } .vmz-sf-addon-file__pick:hover { border-color:var(--sf-accent);color:var(--sf-accent) } .vmz-sf-addon-file__pick-text { white-space:nowrap } .vmz-sf-addon-file__input { position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .vmz-sf-addon-file__name { font-size:12px;color:var(--sf-text);overflow:hidden;text-overflow:ellipsis; max-width:220px;white-space:nowrap; } .vmz-sf-addon-file__clear { display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;color:var(--sf-text-muted); border-radius:var(--sf-radius-full);background:transparent; } .vmz-sf-addon-file__clear:hover { color:var(--sf-danger);background:var(--sf-bg-hover) } .vmz-sf-addon-file__status { font-size:11px;color:var(--sf-text-muted) } .vmz-sf-addon-file__status--bad { color:var(--sf-danger);font-weight:600 } /* ── Presentational fields ──────────────────────────────────────────────── */ .vmz-sf-addon-divider { border:none;border-top:1px solid var(--sf-border-light);margin:2px 0 } .vmz-sf-addon-heading { font-family:var(--sf-font-heading);font-size:13px;font-weight:700; color:var(--sf-heading);text-transform:uppercase;letter-spacing:.03em; } .vmz-sf-addon-static { font-size:12px;line-height:1.6;color:var(--sf-text-secondary) } .vmz-sf-addon-notice { display:flex;align-items:flex-start;gap:8px;padding:9px 12px; font-size:12px;line-height:1.5;border-radius:var(--sf-radius-sm); border-inline-start:3px solid transparent; } .vmz-sf-addon-notice__icon { display:inline-flex;flex-shrink:0;margin-top:1px } .vmz-sf-addon-notice__text { min-width:0 } .vmz-sf-addon-notice--info { background:var(--sf-accent-soft);border-inline-start-color:var(--sf-accent);color:var(--sf-text-secondary); } .vmz-sf-addon-notice--warning { background:var(--sf-warning-soft);border-inline-start-color:var(--sf-warning);color:var(--sf-warning); } .vmz-sf-addon-notice--success { background:var(--sf-success-soft);border-inline-start-color:var(--sf-success);color:var(--sf-success); } .vmz-sf-addon-image { border-radius:var(--sf-radius-sm);overflow:hidden } .vmz-sf-addon-image__img { width:100%;height:auto;background:var(--sf-bg-muted) } /* ── Running add-ons total ──────────────────────────────────────────────── */ .vmz-sf-addon-total { display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 14px;font-size:13px; border:1px dashed var(--sf-border);border-radius:var(--sf-radius-sm); background:var(--sf-bg-secondary); } .vmz-sf-addon-total--zero { display:none } .vmz-sf-addon-total__label { color:var(--sf-text-muted) } .vmz-sf-addon-total__val { font-weight:700;color:var(--sf-accent);font-variant-numeric:tabular-nums; } /* ── Subscription selector ──────────────────────────────────────────────── */ .vmz-sf-sub { margin:16px 0;padding:14px; border:1px solid var(--sf-border);border-radius:var(--sf-radius); background:var(--sf-bg-card); } .vmz-sf-sub__head { display:flex;align-items:center;gap:8px;margin-bottom:10px } .vmz-sf-sub__icon { display:inline-flex;color:var(--sf-text-muted);flex-shrink:0 } .vmz-sf-sub__title { font-size:14px;font-weight:600;color:var(--sf-text);flex:1;min-width:0 } .vmz-sf-sub__badge { padding:2px 9px;font-size:11px;font-weight:700;white-space:nowrap; color:var(--sf-success);background:var(--sf-success-soft); border-radius:var(--sf-radius-full); } .vmz-sf-sub__opts { display:flex;flex-direction:column;gap:6px } .vmz-sf-sub__opt { display:flex;align-items:center;gap:8px;padding:10px 12px; border:1px solid var(--sf-border);border-radius:var(--sf-radius-sm); cursor:pointer; transition:border-color var(--sf-transition-fast),background var(--sf-transition-fast); } .vmz-sf-sub__opt:hover { border-color:var(--sf-text-muted) } .vmz-sf-sub__opt--on { border-color:var(--sf-accent);background:var(--sf-accent-soft) } .vmz-sf-sub__radio { flex-shrink:0;accent-color:var(--sf-accent);cursor:inherit } .vmz-sf-sub__opt-name { font-size:13px;font-weight:600;color:var(--sf-text) } .vmz-sf-sub__opt-note { padding:1px 7px;font-size:10px;font-weight:700;white-space:nowrap; color:var(--sf-success);background:var(--sf-success-soft); border-radius:var(--sf-radius-full); } .vmz-sf-sub__opt-price { margin-inline-start:auto;font-size:13px;font-weight:700; color:var(--sf-text);white-space:nowrap;font-variant-numeric:tabular-nums; } .vmz-sf-sub__note { margin-top:9px;font-size:11px;line-height:1.5;color:var(--sf-text-muted) } /* ── Narrow screens ─────────────────────────────────────────────────────── */ @media(max-width:480px) { .vmz-sf-addon-swatches { grid-template-columns:repeat(auto-fill,minmax(72px,1fr)) } .vmz-sf-addon-file__name { max-width:140px } .vmz-sf-sub__opt { flex-wrap:wrap } } /* ── Dark theme ─────────────────────────────────────────────────────────── */ /* Every colour above resolves through a --sf-* token, and the core redefines * the whole set under .vmz-sf-dark, so the rules themselves need no dark * variant. What a token cannot reach is the widget the browser draws itself: * the date and time pickers, the colour well and the range track are painted * from `color-scheme`, and without this they come back light-on-light inside * a dark page. */ .vmz-sf-dark .vmz-sf-addon-input--stamp, .vmz-sf-dark .vmz-sf-addon-color, .vmz-sf-dark .vmz-sf-addon-range, .vmz-sf-dark .vmz-sf-addon-select { color-scheme:dark } /* ── RTL ────────────────────────────────────────────────────────────────── */ /* Everything else here is written in logical properties and flips on its own. * These two cannot be: a range track's direction is not a logical property, * and the collapse chevron points along the reading direction, so the * collapsed rotation has to go the other way. */ [dir="rtl"] .vmz-sf-addon-range { direction:rtl } [dir="rtl"] .vmz-sf-addon-group__chev--shut { transform:rotate(90deg) }