/* * Advanced Marketplace — design system. * * One token layer shared by the storefront, both dashboards and the admin * screens. Components never hard-code a colour, size or radius. * * Palette note: the primary is the TrustBazaar navy from the logo, paired with * the brand gold as an accent. Money needs its own semantics, so * positive/pending/negative are distinct hues that never double as brand * colour — a green button must always mean "money in", never merely "confirm". */ .advmp, .advmp-store-grid, .advmp-empty, .advmp-notice, .advmp-pagination, .advmp-toast-stack, .advmp-modal, /* * Rendered by a WooCommerce template hook rather than a marketplace * shortcode, so it sits outside .advmp and must carry the tokens itself — * otherwise every var() below resolves to nothing and the shorthand * properties that use them (border, background) drop out entirely. */ .advmp-live { /* Brand */ --advmp-primary: #003887; --advmp-primary-hover: #002d6e; --advmp-primary-active: #002456; --advmp-primary-contrast: #ffffff; --advmp-primary-soft: #e7edf9; --advmp-primary-ring: rgba(0, 56, 135, .28); /* Brand gold, from the logo. Accent only — never a semantic state. */ --advmp-accent: #e2a624; --advmp-accent-contrast: #14213d; --advmp-accent-soft: #fdf3dd; /* Money semantics — never reused for generic UI intent */ --advmp-money-in: #0f7b3f; --advmp-money-in-soft: #e7f5ec; --advmp-money-hold: #a15c07; --advmp-money-hold-soft: #fdf3e3; --advmp-money-out: #b3261e; --advmp-money-out-soft: #fdecea; /* Status */ --advmp-success: #0f7b3f; --advmp-success-soft: #e7f5ec; --advmp-warning: #a15c07; --advmp-warning-soft: #fdf3e3; --advmp-danger: #b3261e; --advmp-danger-soft: #fdecea; --advmp-info: #0b6a8f; --advmp-info-soft: #e7f2f7; /* Neutrals — very slightly warm so surfaces feel less clinical */ --advmp-bg: #ffffff; --advmp-surface: #ffffff; --advmp-surface-muted: #f7f8f7; --advmp-surface-sunken: #eef0ef; --advmp-border: #e2e6e4; --advmp-border-strong: #c8cfcc; --advmp-text: #121716; --advmp-text-muted: #566160; --advmp-text-subtle: #7d8886; /* Type — owned, not inherited, so dashboards are internally consistent */ /* * Track the theme's own face rather than a system stack. The site sets * --site-body-font (Outfit) on :root, so marketplace surfaces read as part * of the storefront instead of as an embedded admin tool; the system stack * stays as the fallback for installs that define no such token. */ --advmp-font: var(--site-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); --advmp-font-heading: var(--site-heading-font, var(--advmp-font)); --advmp-fs-xs: .75rem; --advmp-fs-sm: .8125rem; --advmp-fs-base: .9375rem; --advmp-fs-md: 1rem; --advmp-fs-lg: 1.125rem; --advmp-fs-xl: 1.375rem; --advmp-fs-2xl: 1.75rem; --advmp-fs-3xl: 2.25rem; --advmp-lh-tight: 1.2; --advmp-lh: 1.55; /* Space — 4px base */ --advmp-space-1: 4px; --advmp-space-2: 8px; --advmp-space-3: 12px; --advmp-space-4: 16px; --advmp-space-5: 24px; --advmp-space-6: 32px; --advmp-space-7: 48px; --advmp-space-8: 64px; --advmp-radius-sm: 6px; --advmp-radius: 10px; --advmp-radius-lg: 16px; --advmp-radius-full: 999px; /* Elevation — one real step so cards lift off the page */ --advmp-shadow-sm: 0 1px 2px rgba(18, 23, 22, .05); --advmp-shadow: 0 2px 4px rgba(18, 23, 22, .05), 0 6px 16px rgba(18, 23, 22, .07); --advmp-shadow-lg: 0 8px 12px rgba(18, 23, 22, .06), 0 20px 44px rgba(18, 23, 22, .11); --advmp-speed: 170ms; --advmp-ease: cubic-bezier(.2, .7, .3, 1); font-family: var(--advmp-font); color: var(--advmp-text); } /* * Dark palette — OPT-IN ONLY. * * Deliberately NOT bound to prefers-color-scheme. A plugin renders inside * whatever theme the site runs; honouring the visitor's OS preference painted * near-black cards with light text on top of a light theme, which is exactly * as bad as it sounds. The host must opt in explicitly by setting * data-theme="dark" on , or adding .advmp-dark to the wrapper. */ :root[data-theme="dark"] .advmp, :root[data-theme="dark"] .advmp-store-grid, :root[data-theme="dark"] .advmp-empty, :root[data-theme="dark"] .advmp-notice, :root[data-theme="dark"] .advmp-pagination, :root[data-theme="dark"] .advmp-toast-stack, :root[data-theme="dark"] .advmp-modal, :root[data-theme="dark"] .advmp-live, .advmp-dark, .advmp-dark .advmp { --advmp-primary: #6f9ee0; --advmp-primary-hover: #8db4ea; --advmp-primary-contrast: #04142e; --advmp-primary-soft: #10203c; --advmp-primary-ring: rgba(111, 158, 224, .35); --advmp-accent: #f0bb46; --advmp-accent-contrast: #04142e; --advmp-accent-soft: #33270c; --advmp-money-in: #4fb27e; --advmp-money-in-soft: #0e2a1a; --advmp-money-hold: #e0a552; --advmp-money-hold-soft: #2c2113; --advmp-money-out: #f28b82; --advmp-money-out-soft: #2d1715; --advmp-success: #4fb27e; --advmp-success-soft: #0e2a1a; --advmp-warning: #e0a552; --advmp-warning-soft: #2c2113; --advmp-danger: #f28b82; --advmp-danger-soft: #2d1715; --advmp-info: #6fb8d8; --advmp-info-soft: #10262f; --advmp-bg: #0e1211; --advmp-surface: #161b1a; --advmp-surface-muted: #1c2221; --advmp-surface-sunken: #232a29; --advmp-border: #2a3231; --advmp-border-strong: #3c4645; --advmp-text: #e9eeec; --advmp-text-muted: #a3aeac; --advmp-text-subtle: #7d8886; --advmp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --advmp-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .45); --advmp-shadow-lg: 0 8px 12px rgba(0, 0, 0, .5), 0 20px 44px rgba(0, 0, 0, .55); } /* * Force the light rendering intent so browser UA styles (autofill, scrollbars, * form controls) do not go dark underneath a light theme. */ .advmp { color-scheme: light; } :root[data-theme="dark"] .advmp, .advmp-dark { color-scheme: dark; } .advmp *, .advmp *::before, .advmp *::after { box-sizing: border-box; } /* ------------------------------------------------------------------ */ /* Money */ /* ------------------------------------------------------------------ */ /* * Amounts are the most important content on these screens. Tabular figures * keep columns aligned; without them a table of prices visibly wobbles. */ .advmp-money, .advmp-table td .amount, .advmp-stat__value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -.01em; } .advmp-money--in { color: var(--advmp-money-in); } .advmp-money--hold { color: var(--advmp-money-hold); } .advmp-money--out { color: var(--advmp-money-out); } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ /* * Every rule below is written as a doubled class — .advmp-btn.advmp-btn — for * one reason: themes routinely style bare `button` with a compound selector. * Bevesi ships `button:not(.unset) { background: var(--color-gray-200) }`, * specificity (0,1,1), which outranks a lone `.advmp-btn--primary` at (0,1,0) * and painted every primary action on the site grey. Doubling lifts these to * (0,2,0) without reaching for !important, which would in turn be unbeatable * by a site that legitimately wants to restyle a button. * * The variant rules deliberately pair the variant with the base class rather * than repeating the variant, so the intent still reads at a glance. */ .advmp-btn.advmp-btn, .advmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--advmp-space-2); padding: 10px 18px; min-height: 42px; border: 1px solid transparent; border-radius: var(--advmp-radius-sm); font-family: inherit; font-size: var(--advmp-fs-base); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--advmp-speed) var(--advmp-ease), border-color var(--advmp-speed) var(--advmp-ease), color var(--advmp-speed) var(--advmp-ease), box-shadow var(--advmp-speed) var(--advmp-ease), transform var(--advmp-speed) var(--advmp-ease); } .advmp-btn.advmp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--advmp-primary-ring); } .advmp-btn.advmp-btn:active { transform: translateY(1px); } .advmp-btn.advmp-btn[disabled], .advmp-btn.advmp-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } .advmp-btn.advmp-btn--primary { background: var(--advmp-primary); color: var(--advmp-primary-contrast); box-shadow: var(--advmp-shadow-sm); } .advmp-btn.advmp-btn--primary:hover, .advmp-btn.advmp-btn--primary:focus { background: var(--advmp-primary-hover); color: var(--advmp-primary-contrast); } .advmp-btn.advmp-btn--secondary { background: var(--advmp-surface); border-color: var(--advmp-border-strong); color: var(--advmp-text); } .advmp-btn.advmp-btn--secondary:hover { background: var(--advmp-surface-muted); } /* Tertiary: for row actions, so tables do not become a wall of buttons. */ .advmp-btn.advmp-btn--ghost { background: transparent; color: var(--advmp-text-muted); padding: 6px 10px; min-height: 32px; } .advmp-btn.advmp-btn--ghost:hover { background: var(--advmp-surface-sunken); color: var(--advmp-text); } .advmp-btn.advmp-btn--danger { background: transparent; border-color: transparent; color: var(--advmp-danger); } .advmp-btn.advmp-btn--danger:hover { background: var(--advmp-danger-soft); } .advmp-btn.advmp-btn--sm { min-height: 32px; padding: 5px 12px; font-size: var(--advmp-fs-sm); } .advmp-btn.advmp-btn--lg { min-height: 50px; padding: 13px 26px; font-size: var(--advmp-fs-md); } .advmp-btn.advmp-btn--block { width: 100%; } .advmp-btn__icon { width: 18px; height: 18px; flex-shrink: 0; } /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ .advmp-icon { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .advmp-icon--sm { width: 16px; height: 16px; } .advmp-icon--lg { width: 26px; height: 26px; } /* ------------------------------------------------------------------ */ /* Notices */ /* ------------------------------------------------------------------ */ .advmp-notice { display: flex; gap: var(--advmp-space-3); padding: var(--advmp-space-4) var(--advmp-space-5); border: 1px solid var(--advmp-border); border-left-width: 3px; border-radius: var(--advmp-radius); background: var(--advmp-surface); font-size: var(--advmp-fs-base); line-height: var(--advmp-lh); margin: var(--advmp-space-5) 0; } .advmp-notice p { margin: 0 0 var(--advmp-space-2); } .advmp-notice p:last-child { margin-bottom: 0; } .advmp-notice__body { flex: 1; min-width: 0; } .advmp-notice__title { font-weight: 700; font-size: var(--advmp-fs-md); } .advmp-notice__reason { color: var(--advmp-text-muted); font-size: var(--advmp-fs-sm); } .advmp-notice--info { border-left-color: var(--advmp-info); background: var(--advmp-info-soft); } .advmp-notice--warning { border-left-color: var(--advmp-warning); background: var(--advmp-warning-soft); } .advmp-notice--success { border-left-color: var(--advmp-success); background: var(--advmp-success-soft); } .advmp-notice--danger { border-left-color: var(--advmp-danger); background: var(--advmp-danger-soft); } .advmp-notice--compact { padding: var(--advmp-space-3) var(--advmp-space-4); margin: 0 0 var(--advmp-space-4); } /* ------------------------------------------------------------------ */ /* Empty state */ /* ------------------------------------------------------------------ */ .advmp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--advmp-space-3); padding: var(--advmp-space-7) var(--advmp-space-5); border: 1px dashed var(--advmp-border-strong); border-radius: var(--advmp-radius-lg); background: var(--advmp-surface-muted); margin: var(--advmp-space-5) 0; } .advmp-empty__icon { width: 44px; height: 44px; color: var(--advmp-text-subtle); margin-bottom: var(--advmp-space-1); } .advmp-empty__title { margin: 0; font-size: var(--advmp-fs-lg); font-weight: 700; line-height: var(--advmp-lh-tight); } .advmp-empty__body { margin: 0; max-width: 48ch; color: var(--advmp-text-muted); font-size: var(--advmp-fs-base); line-height: var(--advmp-lh); } .advmp-empty__extra { width: 100%; max-width: 460px; margin-top: var(--advmp-space-2); } /* ------------------------------------------------------------------ */ /* Badges */ /* ------------------------------------------------------------------ */ .advmp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--advmp-radius-full); font-size: var(--advmp-fs-xs); font-weight: 700; letter-spacing: .01em; line-height: 1.7; background: var(--advmp-surface-sunken); color: var(--advmp-text-muted); white-space: nowrap; } /* Dot carries the status so it reads without relying on colour alone. */ .advmp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .advmp-badge--approved, .advmp-badge--active, .advmp-badge--available, .advmp-badge--paid { background: var(--advmp-success-soft); color: var(--advmp-success); } .advmp-badge--pending, .advmp-badge--under_review, .advmp-badge--held, .advmp-badge--draft { background: var(--advmp-warning-soft); color: var(--advmp-warning); } .advmp-badge--rejected, .advmp-badge--suspended, .advmp-badge--banned, .advmp-badge--expired, .advmp-badge--failed, .advmp-badge--cancelled { background: var(--advmp-danger-soft); color: var(--advmp-danger); } /* ------------------------------------------------------------------ */ /* Tabs */ /* ------------------------------------------------------------------ */ .advmp-tabs { display: flex; gap: var(--advmp-space-1); border-bottom: 1px solid var(--advmp-border); margin-bottom: var(--advmp-space-5); overflow-x: auto; scrollbar-width: none; } .advmp-tabs::-webkit-scrollbar { display: none; } .advmp-tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; padding: var(--advmp-space-3) var(--advmp-space-4); margin-bottom: -1px; font-family: inherit; font-size: var(--advmp-fs-base); font-weight: 600; color: var(--advmp-text-muted); cursor: pointer; white-space: nowrap; transition: color var(--advmp-speed) var(--advmp-ease), border-color var(--advmp-speed) var(--advmp-ease); } .advmp-tab:hover { color: var(--advmp-text); } .advmp-tab.is-active { color: var(--advmp-primary); border-bottom-color: var(--advmp-primary); } .advmp-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--advmp-primary-ring); border-radius: var(--advmp-radius-sm); } .advmp-panel { display: none; } .advmp-panel.is-active { display: block; animation: advmp-fade var(--advmp-speed) var(--advmp-ease); } @keyframes advmp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------ */ .advmp-form { display: flex; flex-direction: column; gap: var(--advmp-space-5); } .advmp-fieldset { border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius); padding: var(--advmp-space-5); margin: 0; background: var(--advmp-surface); } .advmp-legend { padding: 0 var(--advmp-space-2); font-size: var(--advmp-fs-md); font-weight: 700; } .advmp-field { display: flex; flex-direction: column; gap: var(--advmp-space-2); margin-bottom: var(--advmp-space-4); } .advmp-field:last-child { margin-bottom: 0; } .advmp-label { display: flex; align-items: center; gap: var(--advmp-space-2); font-size: var(--advmp-fs-sm); font-weight: 600; } .advmp-optional { font-weight: 500; font-size: var(--advmp-fs-xs); color: var(--advmp-text-subtle); } .advmp-required { color: var(--advmp-danger); } .advmp-input { width: 100%; padding: 11px 13px; min-height: 44px; border: 1px solid var(--advmp-border-strong); border-radius: var(--advmp-radius-sm); background: var(--advmp-bg); color: var(--advmp-text); font-family: inherit; font-size: var(--advmp-fs-base); line-height: 1.4; transition: border-color var(--advmp-speed) var(--advmp-ease), box-shadow var(--advmp-speed) var(--advmp-ease); } .advmp-input::placeholder { color: var(--advmp-text-subtle); } .advmp-input:focus { outline: none; border-color: var(--advmp-primary); box-shadow: 0 0 0 3px var(--advmp-primary-ring); } /* Inline validation: the field itself carries the error, not a distant banner. */ .advmp-field.has-error .advmp-input { border-color: var(--advmp-danger); background: var(--advmp-danger-soft); } .advmp-field.has-error .advmp-input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .22); } .advmp-error { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--advmp-danger); font-size: var(--advmp-fs-sm); font-weight: 600; } textarea.advmp-input { min-height: 96px; resize: vertical; } select.advmp-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; } .advmp-hint { margin: 0; font-size: var(--advmp-fs-sm); color: var(--advmp-text-subtle); line-height: var(--advmp-lh); } .advmp-hint--lead { margin-bottom: var(--advmp-space-4); } .advmp-grid-2, .advmp-grid-3 { display: grid; gap: var(--advmp-space-4); } .advmp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .advmp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .advmp-checkbox label { display: flex; align-items: flex-start; gap: var(--advmp-space-3); font-size: var(--advmp-fs-base); line-height: var(--advmp-lh); cursor: pointer; } .advmp-checkbox input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--advmp-primary); } /* ------------------------------------------------------------------ */ /* Choice cards — the registration fork */ /* ------------------------------------------------------------------ */ .advmp-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--advmp-space-5); margin: var(--advmp-space-6) 0; } .advmp-choice-card { display: flex; flex-direction: column; gap: var(--advmp-space-3); padding: var(--advmp-space-6); border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-lg); background: var(--advmp-surface); box-shadow: var(--advmp-shadow-sm); text-align: left; cursor: pointer; text-decoration: none; color: inherit; transition: box-shadow var(--advmp-speed) var(--advmp-ease), border-color var(--advmp-speed) var(--advmp-ease), transform var(--advmp-speed) var(--advmp-ease); } .advmp-choice-card:hover { box-shadow: var(--advmp-shadow); border-color: var(--advmp-primary); transform: translateY(-2px); } .advmp-choice-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--advmp-radius); background: var(--advmp-primary-soft); color: var(--advmp-primary); } .advmp-choice-card__title { margin: 0; font-size: var(--advmp-fs-xl); font-weight: 700; line-height: var(--advmp-lh-tight); } .advmp-choice-card__lead { margin: 0; color: var(--advmp-text-muted); font-size: var(--advmp-fs-base); line-height: var(--advmp-lh); } .advmp-choice-card__figure { font-size: var(--advmp-fs-3xl); font-weight: 800; line-height: 1; color: var(--advmp-money-in); font-variant-numeric: tabular-nums; } .advmp-choice-card__figure small { display: block; font-size: var(--advmp-fs-sm); font-weight: 600; color: var(--advmp-text-muted); margin-top: var(--advmp-space-1); } .advmp-choice-card ul { margin: 0; padding-left: 18px; color: var(--advmp-text-muted); font-size: var(--advmp-fs-sm); line-height: 1.8; } /* ------------------------------------------------------------------ */ /* Steps */ /* ------------------------------------------------------------------ */ /* * Doubled selectors throughout: the theme ships `.klb-post ol` at (0,1,1), * which both re-indents the rail by 20px and puts a decimal marker back on * every item — including the connector bars. */ .advmp-steps.advmp-steps { display: flex; align-items: center; justify-content: center; gap: var(--advmp-space-2); margin: 0 0 var(--advmp-space-6); padding: 0; list-style: none; } .advmp-step.advmp-step, .advmp-step__bar.advmp-step__bar { list-style: none; } .advmp-step { display: flex; align-items: center; gap: 9px; font-size: var(--advmp-fs-sm); font-weight: 600; color: var(--advmp-text-subtle); white-space: nowrap; } .advmp-step__num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--advmp-border-strong); background: var(--advmp-surface); font-size: var(--advmp-fs-xs); font-variant-numeric: tabular-nums; line-height: 1; flex-shrink: 0; transition: background var(--advmp-speed) var(--advmp-ease), border-color var(--advmp-speed) var(--advmp-ease), box-shadow var(--advmp-speed) var(--advmp-ease); } .advmp-step.is-active { color: var(--advmp-primary); } .advmp-step.is-active .advmp-step__num { border-color: var(--advmp-primary); background: var(--advmp-primary); color: var(--advmp-primary-contrast); box-shadow: 0 0 0 4px rgba(13, 125, 108, 0.14); } /* * Completed steps stay on the marketplace teal rather than the success green: * a rail that changes hue as it fills reads as three unrelated states. */ .advmp-step.is-done { color: var(--advmp-text-muted); } .advmp-step.is-done .advmp-step__num { border-color: var(--advmp-primary); background: var(--advmp-primary); color: var(--advmp-primary-contrast); font-size: 0; } .advmp-step.is-done .advmp-step__num::after { content: "✓"; font-size: 13px; line-height: 1; } .advmp-step__bar { flex: 0 1 48px; min-width: 14px; height: 2px; border-radius: 2px; background: var(--advmp-border); transition: background var(--advmp-speed) var(--advmp-ease); } /* The bar always follows the step it leads away from, so it fills with it. */ .advmp-step.is-done + .advmp-step__bar { background: var(--advmp-primary); } /* * Narrow cards keep the rail readable by labelling only where the user is; * the label rule itself lives with the rest of the 640px block further down. */ @media (max-width: 640px) { .advmp-step__bar { flex: 0 1 32px; } } /* * Steps are only collapsed once JavaScript has enhanced the form. Without * that guard a no-JS visitor would see a single step and no way forward. */ .advmp-stepped.is-enhanced .advmp-fieldset[data-step] { display: none; } .advmp-stepped.is-enhanced .advmp-fieldset[data-step].is-active { display: block; animation: advmp-fade var(--advmp-speed) var(--advmp-ease); } .advmp-stepped:not(.is-enhanced) .advmp-step-actions [data-advmp-step-next], .advmp-stepped:not(.is-enhanced) .advmp-step-actions [data-advmp-step-prev] { display: none; } .advmp-step-actions { display: flex; gap: var(--advmp-space-3); align-items: center; flex-wrap: wrap; } .advmp-step-actions .advmp-spacer { flex: 1; } /* ------------------------------------------------------------------ */ /* Registration shell */ /* ------------------------------------------------------------------ */ .advmp-register { max-width: 820px; margin: 0 auto var(--advmp-space-8); } .advmp-register__intro { margin-bottom: var(--advmp-space-5); } .advmp-register__title { margin: 0 0 var(--advmp-space-2); font-size: var(--advmp-fs-2xl); font-weight: 800; line-height: var(--advmp-lh-tight); letter-spacing: -.015em; } .advmp-register__lead { margin: 0; max-width: 58ch; color: var(--advmp-text-muted); font-size: var(--advmp-fs-md); line-height: var(--advmp-lh); } .advmp-register__foot { text-align: center; margin-top: var(--advmp-space-5); } .advmp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--advmp-space-3); color: var(--advmp-text-muted); font-size: var(--advmp-fs-sm); font-weight: 600; text-decoration: none; } .advmp-back:hover { color: var(--advmp-primary); } /* ------------------------------------------------------------------ */ /* Confirmation */ /* ------------------------------------------------------------------ */ .advmp-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--advmp-space-7) var(--advmp-space-5); border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-lg); background: var(--advmp-surface); box-shadow: var(--advmp-shadow-sm); } .advmp-confirm__mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--advmp-success-soft); color: var(--advmp-success); margin-bottom: var(--advmp-space-4); } .advmp-confirm__title { margin: 0 0 var(--advmp-space-2); font-size: var(--advmp-fs-2xl); font-weight: 800; } .advmp-confirm__lead { margin: 0 0 var(--advmp-space-6); color: var(--advmp-text-muted); font-size: var(--advmp-fs-md); } .advmp-confirm__actions { display: flex; gap: var(--advmp-space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--advmp-space-6); } .advmp-timeline { list-style: none; margin: 0; padding: 0; text-align: left; max-width: 420px; width: 100%; } .advmp-timeline li { position: relative; padding: 0 0 var(--advmp-space-5) var(--advmp-space-6); border-left: 2px solid var(--advmp-border); } .advmp-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .advmp-timeline li::before { content: ""; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--advmp-surface); border: 2px solid var(--advmp-border-strong); } .advmp-timeline li.is-done { border-left-color: var(--advmp-success); } .advmp-timeline li.is-done::before { background: var(--advmp-success); border-color: var(--advmp-success); } .advmp-timeline li.is-current::before { border-color: var(--advmp-primary); box-shadow: 0 0 0 4px var(--advmp-primary-ring); } .advmp-timeline strong { display: block; font-size: var(--advmp-fs-base); margin-bottom: 2px; } .advmp-timeline span { color: var(--advmp-text-muted); font-size: var(--advmp-fs-sm); line-height: var(--advmp-lh); } /* ------------------------------------------------------------------ */ /* Modal */ /* ------------------------------------------------------------------ */ .advmp-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: var(--advmp-space-4); background: rgba(10, 16, 15, .55); backdrop-filter: blur(2px); animation: advmp-fade 120ms var(--advmp-ease); } .advmp-modal[hidden] { display: none; } .advmp-modal__panel { width: 100%; max-width: 440px; background: var(--advmp-surface); border-radius: var(--advmp-radius-lg); box-shadow: var(--advmp-shadow-lg); padding: var(--advmp-space-6); display: flex; flex-direction: column; gap: var(--advmp-space-3); } .advmp-modal__title { margin: 0; font-size: var(--advmp-fs-lg); font-weight: 700; } .advmp-modal__body { margin: 0; color: var(--advmp-text-muted); font-size: var(--advmp-fs-base); line-height: var(--advmp-lh); } .advmp-modal__actions { display: flex; gap: var(--advmp-space-3); justify-content: flex-end; margin-top: var(--advmp-space-3); } /* ------------------------------------------------------------------ */ /* Toasts */ /* ------------------------------------------------------------------ */ .advmp-toast-stack { position: fixed; right: var(--advmp-space-5); bottom: var(--advmp-space-5); z-index: 100001; display: flex; flex-direction: column; gap: var(--advmp-space-2); max-width: min(380px, calc(100vw - 32px)); } .advmp-toast { display: flex; align-items: flex-start; gap: var(--advmp-space-3); padding: var(--advmp-space-3) var(--advmp-space-4); border-radius: var(--advmp-radius); background: var(--advmp-surface); border: 1px solid var(--advmp-border); border-left: 3px solid var(--advmp-primary); box-shadow: var(--advmp-shadow); font-size: var(--advmp-fs-base); animation: advmp-toast-in 220ms var(--advmp-ease); } .advmp-toast--success { border-left-color: var(--advmp-success); } .advmp-toast--danger { border-left-color: var(--advmp-danger); } .advmp-toast.is-leaving { animation: advmp-toast-out 180ms var(--advmp-ease) forwards; } @keyframes advmp-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes advmp-toast-out { to { opacity: 0; transform: translateY(6px); } } /* ------------------------------------------------------------------ */ /* Skeletons */ /* ------------------------------------------------------------------ */ .advmp-skeleton { background: linear-gradient(90deg, var(--advmp-surface-sunken) 25%, var(--advmp-surface-muted) 37%, var(--advmp-surface-sunken) 63%); background-size: 400% 100%; animation: advmp-shimmer 1.4s ease-in-out infinite; border-radius: var(--advmp-radius-sm); } .advmp-skeleton--text { height: 12px; margin-bottom: 8px; } .advmp-skeleton--title { height: 20px; width: 45%; margin-bottom: 14px; } .advmp-skeleton--card { height: 96px; } @keyframes advmp-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } } /* ------------------------------------------------------------------ */ /* Store grid */ /* ------------------------------------------------------------------ */ .advmp-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--advmp-space-5); margin: var(--advmp-space-5) 0; } .advmp-store-card { display: flex; flex-direction: column; border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-lg); background: var(--advmp-surface); box-shadow: var(--advmp-shadow-sm); overflow: hidden; transition: box-shadow var(--advmp-speed) var(--advmp-ease), transform var(--advmp-speed) var(--advmp-ease); } .advmp-store-card:hover { box-shadow: var(--advmp-shadow); transform: translateY(-2px); } .advmp-store-card__banner { display: block; aspect-ratio: 16 / 7; background: var(--advmp-surface-muted); overflow: hidden; } .advmp-store-card__banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .advmp-store-card__banner-placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--advmp-surface-muted), var(--advmp-primary-soft)); } .advmp-store-card__body { position: relative; padding: var(--advmp-space-5) var(--advmp-space-4) var(--advmp-space-4); text-align: center; } .advmp-store-card__logo { position: absolute; top: calc(var(--advmp-space-5) * -1); left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--advmp-surface); object-fit: cover; background: var(--advmp-surface); box-shadow: var(--advmp-shadow-sm); } .advmp-store-card__name { margin: var(--advmp-space-4) 0 var(--advmp-space-1); font-size: var(--advmp-fs-md); font-weight: 700; line-height: 1.35; } .advmp-store-card__name a { color: var(--advmp-text); text-decoration: none; } .advmp-store-card__name a:hover { color: var(--advmp-primary); } .advmp-store-card__meta, .advmp-store-card__rating { margin: 0; color: var(--advmp-text-muted); font-size: var(--advmp-fs-sm); } /* Product cards inside the reseller catalogue read left-aligned. */ .advmp-store-card--product .advmp-store-card__body { text-align: left; padding-top: var(--advmp-space-4); } .advmp-store-card--product .advmp-store-card__name { margin-top: 0; } /* ------------------------------------------------------------------ */ /* Copy field */ /* ------------------------------------------------------------------ */ .advmp-copy { display: flex; gap: var(--advmp-space-2); align-items: stretch; } .advmp-copy .advmp-input { font-size: var(--advmp-fs-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ------------------------------------------------------------------ */ /* Pagination */ /* ------------------------------------------------------------------ */ .advmp-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--advmp-space-2); margin: var(--advmp-space-6) 0; } .advmp-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--advmp-space-3); border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-sm); background: var(--advmp-surface); color: var(--advmp-text); font-size: var(--advmp-fs-base); text-decoration: none; transition: background-color var(--advmp-speed) var(--advmp-ease); } .advmp-pagination .page-numbers:hover { background: var(--advmp-surface-muted); } .advmp-pagination .page-numbers.current { background: var(--advmp-primary); border-color: var(--advmp-primary); color: var(--advmp-primary-contrast); font-weight: 700; } /* ------------------------------------------------------------------ */ /* Responsive */ /* ------------------------------------------------------------------ */ @media (max-width: 640px) { .advmp-store-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--advmp-space-4); } .advmp-empty { padding: var(--advmp-space-6) var(--advmp-space-4); } .advmp-grid-2, .advmp-grid-3 { grid-template-columns: minmax(0, 1fr); } .advmp-fieldset { padding: var(--advmp-space-4); } .advmp-tab { padding: var(--advmp-space-3); font-size: var(--advmp-fs-sm); } .advmp-toast-stack { right: var(--advmp-space-3); left: var(--advmp-space-3); bottom: var(--advmp-space-3); max-width: none; } /* Keep the label on the step the user is actually on — collapsing the whole rail to bare numbers leaves nothing saying what this page asks for. See the matching rule beside the step block above. */ .advmp-step:not(.is-active) span:not(.advmp-step__num) { display: none; } .advmp-choice-card { padding: var(--advmp-space-5); } } @media (prefers-reduced-motion: reduce) { .advmp *, .advmp *::before, .advmp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------ */ /* Live photos and videos on the product page */ /* ------------------------------------------------------------------ */ .advmp-live { margin: 2.5rem 0; padding: 1.5rem; border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius); background: var(--advmp-surface); } /* * Own visually-hidden helper rather than the theme's .screen-reader-text — * this block also renders through a shortcode on sites whose theme may not * define that class at all. */ .advmp-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* * Off-screen but still focusable and selectable — the copy-link control needs * a real field it can select(), which .advmp-sr-only's clip-path prevents. */ .advmp-offscreen { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; } .advmp-live__head { max-width: 46rem; margin: 0 auto 1.5rem; text-align: center; } .advmp-live__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--advmp-text); } .advmp-live__note { margin: 0; font-size: .9375rem; color: var(--advmp-text-muted); } /* * Masonry, deliberately via multi-column rather than grid. * * The tiles mix 4:3 photos, square photos and 9:16 phone clips. Any * fixed-height grid crops or letterboxes at least one of those, and the * letterboxed portrait clip was the original complaint. Multi-column lets * every tile keep its own intrinsic height with no JS measuring pass. */ .advmp-live__gallery { column-count: 4; column-gap: .875rem; } @media (max-width: 1200px) { .advmp-live__gallery { column-count: 3; } } @media (max-width: 782px) { .advmp-live__gallery { column-count: 2; } } @media (max-width: 420px) { .advmp-live__gallery { column-count: 1; } } .advmp-live__item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: block; margin: 0 0 .875rem; overflow: hidden; border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-sm); background: var(--advmp-surface); } /* --- Photo tiles --- */ .advmp-live__open { position: relative; display: block; line-height: 0; text-decoration: none; } .advmp-live__photo { display: block; width: 100%; height: auto; transition: transform .25s ease; } .advmp-live__open:hover .advmp-live__photo, .advmp-live__open:focus-visible .advmp-live__photo { transform: scale(1.04); } .advmp-live__zoom { position: absolute; right: .5rem; bottom: .5rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transform: translateY(.25rem); transition: opacity .2s ease, transform .2s ease; } .advmp-live__open:hover .advmp-live__zoom, .advmp-live__open:focus-visible .advmp-live__zoom { opacity: 1; transform: none; } .advmp-live__caption { margin: 0; padding: .5rem .625rem; font-size: .8125rem; line-height: 1.4; color: var(--advmp-text-muted); } /* --- Video tiles --- */ .advmp-live__frame { position: relative; /* * Set inline from attachment metadata, then corrected by the script from * the file's own videoWidth/videoHeight. 16/9 is only the pre-metadata * placeholder, never what a portrait clip ends up rendering at. */ aspect-ratio: var(--advmp-live-ar, 16 / 9); background: #000; line-height: 0; } .advmp-live__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } .advmp-live__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .35)); color: var(--advmp-primary); cursor: pointer; transition: background .2s ease; } .advmp-live__play:hover { background: rgba(0, 0, 0, .18); } .advmp-live__play-dot { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding-left: .18rem; /* optical centring of the triangle */ border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .35); transition: transform .2s ease; } .advmp-live__play:hover .advmp-live__play-dot { transform: scale(1.08); } .advmp-live__duration { position: absolute; right: .5rem; bottom: .5rem; padding: .125rem .375rem; border-radius: var(--advmp-radius-sm); background: rgba(0, 0, 0, .72); color: #fff; font-size: .75rem; line-height: 1.5; font-variant-numeric: tabular-nums; } .advmp-live__item.is-playing .advmp-live__play, .advmp-live__item.is-playing .advmp-live__duration { display: none; } /* ------------------------------------------------------------------ */ /* Photo lightbox */ /* ------------------------------------------------------------------ */ .advmp-lightbox[hidden] { display: none; } .advmp-lightbox { position: fixed; inset: 0; /* * Above sticky theme headers and the WooCommerce cart drawer, both of * which sit in the high thousands on this theme. */ z-index: 999999; display: grid; place-items: center; } .advmp-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); } .advmp-lightbox__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 100%; height: 100%; padding: 3.5rem 3.5rem 3rem; box-sizing: border-box; justify-content: center; } .advmp-lightbox__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--advmp-radius-sm); } .advmp-lightbox__caption { margin: 0; max-width: 46rem; color: rgba(255, 255, 255, .82); font-size: .875rem; line-height: 1.5; text-align: center; } .advmp-lightbox__caption[hidden] { display: none; } .advmp-lightbox__close, .advmp-lightbox__nav { position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .2s ease; } .advmp-lightbox__close:hover, .advmp-lightbox__nav:hover { background: rgba(255, 255, 255, .26); } .advmp-lightbox__close { top: 1rem; right: 1rem; } .advmp-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); } .advmp-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); } .advmp-lightbox__nav[hidden] { display: none; } .advmp-lightbox__counter { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); margin: 0; color: rgba(255, 255, 255, .7); font-size: .8125rem; font-variant-numeric: tabular-nums; } .advmp-lightbox__counter[hidden] { display: none; } /* Stop the page behind the overlay scrolling under the finger on touch. */ .advmp-lightbox-open, .advmp-lightbox-open body { overflow: hidden; } @media (max-width: 600px) { .advmp-lightbox__stage { padding: 3.5rem .75rem 3rem; } .advmp-lightbox__nav--prev { left: .25rem; } .advmp-lightbox__nav--next { right: .25rem; } } @media (prefers-reduced-motion: reduce) { .advmp-live__open:hover .advmp-live__photo, .advmp-live__open:focus-visible .advmp-live__photo, .advmp-live__play:hover .advmp-live__play-dot { transform: none; } } /* ---------------------------------------------------------------------- */ /* Store context banner */ /* ---------------------------------------------------------------------- */ /* * Shown on a product page when the visitor arrived through a reseller * store, so a price that differs from the marketplace reads as that shop * pricing its own stock rather than as the site contradicting itself. */ .advmp-store-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--advmp-space-3, 12px); margin: 0 0 var(--advmp-space-4, 16px); padding: 10px 14px; border: 1px solid var(--advmp-border, #e3e6e8); border-left: 3px solid var(--advmp-primary, #12776a); border-radius: var(--advmp-radius, 8px); background: var(--advmp-surface-sunken, #f6f8f8); font-size: var(--advmp-fs-sm, 13.5px); line-height: 1.45; } .advmp-store-banner__text { color: var(--advmp-text, #16191c); } .advmp-store-banner__link { margin-left: auto; flex-shrink: 0; font-weight: 600; color: var(--advmp-primary, #12776a); text-decoration: underline; } @media (max-width: 480px) { .advmp-store-banner__link { margin-left: 0; } } /* ------------------------------------------------------------------ Front-page product feed ------------------------------------------------------------------ Almost nothing here touches the cards themselves — those come from the theme's own content-product template and should keep looking exactly like the shop. This styles the frame around them and nothing else. */ .advmp-feed { max-width: var(--advmp-feed-max, 1320px); margin: 0 auto; padding: 8px 16px 48px; } .advmp-feed__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; } .advmp-feed__title { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; } /* The grid wrapper comes from the theme's own loop-start template, so it already carries the shop's column classes, counts and breakpoints. Two rules only, and neither redefines any of that. A `1fr` track is `minmax(auto, 1fr)`, so a grid item whose min-content is wider than its share pushes the track out and the columns stop being equal — which on a 375px phone overflowed the row. `min-width: 0` lets the item shrink to its track instead, and leaves the column count to the theme. */ .advmp-feed .products > * { min-width: 0; } .advmp-feed .products img { max-width: 100%; height: auto; } .advmp-feed__foot { display: flex; justify-content: center; padding: 28px 0 4px; } .advmp-feed__more { appearance: none; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 12px 30px; border-radius: 999px; transition: background-color .15s ease, color .15s ease; } .advmp-feed__more:hover:not(:disabled) { background: currentColor; } /* The label has to stay legible once the background becomes the text colour. */ .advmp-feed__more:hover:not(:disabled) { color: #fff; background: #16150f; border-color: #16150f; } .advmp-feed__more:disabled { opacity: .55; cursor: default; } .advmp-feed__more:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .advmp-feed__end, .advmp-feed__status { margin: 0; text-align: center; font-size: 14px; opacity: .65; } .advmp-feed__status:empty { display: none; } @media (max-width: 480px) { .advmp-feed { padding: 4px 10px 36px; } } /* ------------------------------------------------------------------ Side cart ------------------------------------------------------------------ The drawer's chrome — slide, overlay, width, z-index — all comes from the theme's own .site-drawer. These rules only cover the two things the theme has no opinion about: hiding the trigger, and giving the mini cart room to breathe now that it is a full-height panel rather than a small dropdown. */ /* The trigger exists for the theme's drawer.js to bind to and is clicked programmatically. It must stay in the DOM and out of the layout, so it is not display:none — a hidden element still needs to be clickable. */ .advmp-cart-drawer__trigger { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* * The theme's drawer panel is a plain block that scrolls as a whole, which is * right for a menu and wrong for a cart: with four items the Checkout button * ends up several hundred pixels below the fold, and the shopper has to scroll * a panel they just opened to find the one control they wanted. Scoped to this * drawer only, so the menu, search and category drawers keep their own * behaviour untouched. */ .advmp-cart-drawer .site-drawer-inner { display: flex; flex-direction: column; overflow: hidden; } .advmp-cart-drawer .site-drawer-header { flex: none; } .advmp-cart-drawer .site-drawer-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .advmp-cart-drawer .fl-mini-cart-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* The list scrolls; the totals and buttons stay put at the bottom. Without this a cart of fifteen items pushes checkout off the end of the drawer. The list is `div.products`, not WooCommerce's stock `ul.woocommerce-mini-cart` — this theme overrides mini-cart.php and emits its own markup. Both are matched so the rule survives the template being reverted. */ /* * `flex: 0 1 auto`, not `1 1 auto`. Letting the list grow left a 245px hole * between the last item and the subtotal on a three-item cart — the totals * were pinned to the floor of the panel with nothing in between. Taking only * the height it needs closes that, and shrink plus overflow still hands a long * cart a scrolling list with the totals in view underneath it. */ .advmp-cart-drawer .fl-mini-cart-content > .products, .advmp-cart-drawer .woocommerce-mini-cart { flex: 0 1 auto; overflow-y: auto; min-height: 0; margin: 0; padding: 0; list-style: none; } .advmp-cart-drawer .woocommerce-mini-cart__total, .advmp-cart-drawer .woocommerce-mini-cart__buttons, .advmp-cart-drawer .klb-cart-free-shipping { flex: none; } /* ---- Cart rows ----------------------------------------------------------- The theme's compact mini-cart styling is scoped to `.site-header .site-mini-cart`, and this drawer is a sibling of the header rather than a descendant, so none of it reaches here. Left alone, `div.products` falls through to the shop-grid rules and every row renders as a full product card — a 273px image and a 374px-tall row, so barely one item fits on screen. These rules restate the theme's own mini-cart layout, scaled for a panel that is taller and wider than a dropdown: a 64px thumbnail instead of 42px, and the variation shown rather than hidden, because a side cart has the room and "which size did I add?" is the question it exists to answer. */ .advmp-cart-drawer .fl-mini-cart-content > .products { display: flex; flex-direction: column; gap: 0; } .advmp-cart-drawer .mini_cart_item { padding: 14px 0; border-bottom: 1px solid var(--color-slate-200, #e2e8f0); } .advmp-cart-drawer .mini_cart_item:first-child { padding-top: 0; } .advmp-cart-drawer .mini_cart_item:last-child { border-bottom: 0; } .advmp-cart-drawer .mini_cart_item .product-inner { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 12px; white-space: normal; } .advmp-cart-drawer .mini_cart_item .thumbnail-wrapper { flex: 0 0 auto; width: 64px; } .advmp-cart-drawer .mini_cart_item .thumbnail-wrapper img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; } .advmp-cart-drawer .mini_cart_item .content-wrapper { flex: 1 1 auto; min-width: 0; } /* Two lines of title, then ellipsis — a long marketplace title would otherwise push the price out of the row and make every row a different height. */ .advmp-cart-drawer .mini_cart_item .product-title { margin: 0 0 4px; font-size: 13.5px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .advmp-cart-drawer .mini_cart_item .product-title a { color: inherit; text-decoration: none; } .advmp-cart-drawer .mini_cart_item .price .woocommerce-Price-amount { color: var(--color-green-600, #16a34a); } /* The dropdown hides this for space. The drawer has room, and it is the one detail a shopper checks before paying. */ .advmp-cart-drawer .mini_cart_item .variation { display: block; margin: 2px 0 0; font-size: 12px; opacity: .7; } .advmp-cart-drawer .mini_cart_item .variation dt, .advmp-cart-drawer .mini_cart_item .variation dd { display: inline; margin: 0; font-weight: 400; } .advmp-cart-drawer .mini_cart_item .variation dd::after { content: ''; display: block; } /* The theme's rose corner badge, kept — but on the row's trailing edge and a little larger, because this one is tapped with a thumb rather than clicked with a cursor. */ .advmp-cart-drawer .mini_cart_item .remove_from_cart_button { position: absolute; top: 0; right: 0; left: auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--color-white, #fff); background-color: var(--color-rose-600, #e11d48); border-radius: 50%; z-index: 1; text-decoration: none; } .advmp-cart-drawer .mini_cart_item .content-wrapper { padding-right: 28px; } .advmp-cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--color-slate-200, #e2e8f0); font-size: 15px; } .advmp-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 600; } .advmp-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount { font-weight: 700; font-size: 16px; } .advmp-cart-drawer .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; } .advmp-cart-drawer .woocommerce-mini-cart__buttons a { display: block; text-align: center; } /* An empty cart should say so in the middle of the panel, not cling to the top of a mostly blank column. */ .advmp-cart-drawer .site-mini-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; text-align: center; } /* ---- Quantity stepper ---------------------------------------------------- New markup with its own prefix, so these rules collide with nothing in the theme. Styled once and used in both the side cart and the header dropdown, which render the same fragment. */ /* A filled pill with two round buttons sitting inside it. The buttons only take a background on hover, so at rest the control reads as one object rather than three. */ .advmp-qty { display: inline-flex; align-items: center; vertical-align: middle; flex: none; gap: 2px; padding: 2px; background: var(--color-slate-100, #f1f5f9); border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 999px; line-height: 1; transition: opacity .12s ease; } /* Dimmed only while the change is on its way to the server. The number has already moved, so this is a progress hint and not a lock — the buttons stay live, which is the whole point of debouncing them. */ .advmp-qty.is-pending { opacity: .65; } /* * Doubled class, deliberately. * * The theme ships `button:not(.unset) { height: var(--site-form-button-height); * padding: 0 18px; background: … }` at specificity (0,1,1), which outranks a * single class and stretched each of these into a 38x40 grey slab. Doubling to * (0,2,0) wins without !important, which would block any future restyle. The * theme offers `.unset` as its own escape hatch, but that class is * theme-specific and has no business in a portable plugin. */ .advmp-qty__btn.advmp-qty__btn { appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--color-slate-600, #475569); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; width: 24px; min-width: 0; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; box-shadow: none; transition: background-color .12s ease, color .12s ease; } .advmp-qty__btn.advmp-qty__btn:hover:not(:disabled) { background: var(--color-white, #fff); color: var(--color-slate-900, #0f172a); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); } .advmp-qty__btn.advmp-qty__btn:active:not(:disabled) { transform: scale(.94); } /* A product that is sold individually, or down to its last unit, disables the plus rather than letting the shopper press something that always refuses. */ .advmp-qty__btn.advmp-qty__btn:disabled { opacity: .35; cursor: default; background: transparent; } .advmp-qty__btn.advmp-qty__btn:focus-visible { outline: 2px solid rgb(var(--site-primary-color, 0 113 220)); outline-offset: -2px; } /* Tabular figures so the pill does not change width between 1 and 8, which would nudge the price sideways on every press. */ .advmp-qty__value { min-width: 20px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-slate-900, #0f172a); } .advmp-qty__price { flex: none; font-size: 14px; font-weight: 700; white-space: nowrap; vertical-align: middle; } .advmp-qty__price .woocommerce-Price-amount { color: var(--color-green-600, #16a34a); } /* Stepper left, line price hard right, on one line under the title. The content column is about 210px, which is enough for both and leaves the price where the eye already goes looking for it. flex-direction has to be stated. The theme sets `.price { flex-direction: row-reverse }` globally so that a sale price renders before the struck-out original — inherited here, it silently swapped the stepper and the amount even though the markup order was right. */ .advmp-cart-drawer .mini_cart_item .price { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; margin-top: 8px; font-size: 13.5px; font-weight: 600; } /* ------------------------------------------------------------------ */ /* Reseller share dialogs */ /* ------------------------------------------------------------------ */ /* Narrower than the confirm modal it borrows its shell from: both steps are a question and two or three controls, and a 440px panel around that much content reads as an empty box. */ .advmp-share .advmp-modal__panel { max-width: 380px; gap: var(--advmp-space-4); } /* Doubled to outrank `.klb-post h2 { font-size: 38.5px }`, which the theme applies to every heading inside a page wrapper — dialogs included. */ .advmp-share__title.advmp-share__title { font-size: var(--advmp-fs-lg); font-weight: 700; line-height: 1.35; margin: 0; } .advmp-share__opts { display: flex; flex-direction: column; gap: var(--advmp-space-1); } .advmp-share__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--advmp-space-4); padding: 10px 2px; margin: 0; font-size: var(--advmp-fs-base); font-weight: 500; color: var(--advmp-text); cursor: pointer; } .advmp-share__opt.is-disabled { opacity: .45; cursor: not-allowed; } /* The theme sizes bare checkboxes to the body font, which leaves a tap target too small to hit on a phone. Doubled so those rules lose. */ .advmp-share__check.advmp-share__check { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--advmp-primary); cursor: pointer; } .advmp-share__actual { margin: 0; font-size: var(--advmp-fs-base); font-weight: 700; color: var(--advmp-text); } .advmp-share__legend { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--advmp-primary); } .advmp-share__modes { display: flex; align-items: center; gap: var(--advmp-space-6); margin: calc( var(--advmp-space-2) * -1 ) 0; } .advmp-share__mode { display: inline-flex; align-items: center; gap: var(--advmp-space-2); margin: 0; font-size: var(--advmp-fs-base); color: var(--advmp-text); cursor: pointer; } .advmp-share__mode input { width: 18px; height: 18px; margin: 0; accent-color: var(--advmp-primary); cursor: pointer; } /* The prefix sits inside the field rather than beside it, so the symbol and the number read as one amount — and it swaps to % when the margin does. */ .advmp-share__field { display: flex; align-items: center; gap: var(--advmp-space-2); padding: 0 12px; border: 1px solid var(--advmp-border-strong); border-radius: var(--advmp-radius-sm); background: var(--advmp-surface); transition: border-color var(--advmp-speed) var(--advmp-ease), box-shadow var(--advmp-speed) var(--advmp-ease); } .advmp-share__field:focus-within { border-color: var(--advmp-primary); box-shadow: 0 0 0 3px var(--advmp-primary-ring, rgba(0, 56, 135, .18)); } .advmp-share__prefix { font-size: var(--advmp-fs-base); font-weight: 700; color: var(--advmp-primary); } /* Doubled: the theme styles bare inputs with its own border and background, which would draw a second box inside the field wrapper. */ .advmp-share__input.advmp-share__input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 11px 0; border: 0; background: none; box-shadow: none; outline: none; font-size: var(--advmp-fs-base); color: var(--advmp-text); } .advmp-share__final { margin: 0; font-size: var(--advmp-fs-base); font-weight: 600; color: var(--advmp-primary); } /* Both steps end in a pair of equal buttons, matching the dialogs resellers already know from the app rather than the right-aligned confirm modal. */ .advmp-share__actions { justify-content: stretch; margin-top: var(--advmp-space-2); } .advmp-share__actions .advmp-btn { flex: 1 1 0; justify-content: center; } /* The hand-over step, for browsers whose share sheet will not take files. The message sits in a real textarea so it can be selected and read before it is sent, rather than being copied out of sight. */ .advmp-share__lead { margin: 0; font-size: var(--advmp-fs-sm); line-height: var(--advmp-lh); color: var(--advmp-text-muted); } .advmp-share__message.advmp-share__message { width: 100%; padding: 10px 12px; border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-sm); background: var(--advmp-surface-sunken); font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--advmp-text); resize: vertical; } /* Three buttons do not fit side by side at 380px, and a cramped row reads as a mistake. Let them wrap and each take a whole line when they must. */ .advmp-share__actions { flex-wrap: wrap; } .advmp-share__actions .advmp-btn { flex: 1 1 120px; } /* The ordered hand-over. Three buttons in a row said nothing about sequence, and the text went into the message box and was sent before the photos were ever attached — two messages, which is the whole thing this is trying to avoid. Numbering the steps is the fix. */ .advmp-share__steps.advmp-share__steps { display: flex; flex-direction: column; gap: var(--advmp-space-3); margin: 0; padding: 0; list-style: none; counter-reset: advmp-share-step; } /* Doubled above and here: `.klb-post ol` and `.klb-post ul li` put a decimal marker and a 20px indent back on any list used as a UI component. */ .advmp-share__steps.advmp-share__steps li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--advmp-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--advmp-fs-sm); line-height: 1.35; color: var(--advmp-text); } /* Doubled to beat `.advmp li::before { content: none }` in dashboard.css, which is the same (0,1,2) as a single class here and loads later, so it was winning the tie and the step numbers never drew. The modal root carries `advmp`, which is how that rule reaches into a dialog at all. */ .advmp-share__steps.advmp-share__steps li::before { counter-increment: advmp-share-step; content: counter(advmp-share-step); flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--advmp-primary); color: var(--advmp-primary-contrast); font-size: 12px; font-weight: 700; } .advmp-share__steps li > span { flex: 1 1 130px; min-width: 0; } /* Pushed to the right of its own line, and onto a line of its own when the instruction is too long to share one. */ .advmp-share__steps li > .advmp-btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; } .advmp-share__warn { margin: 0; padding: 9px 11px; border-radius: var(--advmp-radius-sm); background: var(--advmp-warning-soft); color: var(--advmp-warning); font-size: 12.5px; line-height: var(--advmp-lh); } /* ------------------------------------------------------------------ */ /* Dispatch photos */ /* ------------------------------------------------------------------ */ .advmp-dispatch { margin: var(--advmp-space-6) 0; } .advmp-dispatch__title.advmp-dispatch__title { margin: 0 0 var(--advmp-space-1); font-size: var(--advmp-fs-lg); font-weight: 700; color: var(--advmp-text); } .advmp-dispatch__lead { margin: 0 0 var(--advmp-space-3); font-size: var(--advmp-fs-sm); color: var(--advmp-text-muted); } /* Doubled, and `list-style` restated on the items: the theme puts a decimal marker and a 20px indent back on any list inside a page wrapper, and the account page is one. */ .advmp-dispatch__grid.advmp-dispatch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--advmp-space-3); margin: 0; padding: 0; list-style: none; } .advmp-dispatch__grid.advmp-dispatch__grid > li { margin: 0; padding: 0; list-style: none; } .advmp-dispatch__item { overflow: hidden; border: 1px solid var(--advmp-border); border-radius: var(--advmp-radius-sm); background: var(--advmp-surface-sunken); } /* Square tiles so a mix of portrait photos and landscape clips still reads as one grid rather than a ragged column. */ .advmp-dispatch__media { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #000; } .advmp-dispatch__item a { display: block; line-height: 0; } /* ------------------------------------------------------------------ */ /* Wholesale quantity ladder, under the price on a product page */ /* ------------------------------------------------------------------ */ /* Deliberately small and quiet. It is a footnote to the price, not a second price — a shopper buying one should be able to ignore it. */ .advmp-qty-ladder { margin: 0 0 1.2em; padding: 0.75em 0.9em; border: 1px solid var(--advmp-border, #e3e3e3); border-radius: var(--advmp-radius-sm, 6px); background: var(--advmp-surface-sunken, #fafafa); max-width: 22em; } .advmp-qty-ladder__title { margin: 0 0 0.5em; font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .advmp-qty-ladder__table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9em; } .advmp-qty-ladder__table th, .advmp-qty-ladder__table td { padding: 0.3em 0; border: 0; text-align: left; } .advmp-qty-ladder__table td + td, .advmp-qty-ladder__table th + th { text-align: right; } .advmp-qty-ladder__table thead th { font-size: 0.85em; font-weight: 500; opacity: 0.7; } .advmp-qty-ladder__table tbody tr + tr td { border-top: 1px solid var(--advmp-border, #e8e8e8); } /* ------------------------------------------------------------------ */ /* Complaints */ /* ------------------------------------------------------------------ */ /* One thread renders identically on a buyer's account page, a reseller's dashboard and a vendor's order. The classes below are the storefront half; the dashboards inherit their own card and form styling and only need the thread itself. */ .advmp-complaints { margin: 2em 0; } .advmp-complaints__heading { margin: 0 0 0.6em; font-size: 1.15em; } .advmp-complaint { margin: 0 0 1.2em; padding: 1em 1.1em; border: 1px solid var(--advmp-border, #e3e3e3); border-radius: var(--advmp-radius-sm, 6px); } .advmp-complaint__head { display: flex; gap: 0.75em; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .advmp-complaint__meta { margin: 0.2em 0 0.9em; font-size: 0.85em; } .advmp-complaint__thread { margin: 0 0 1em; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7em; } .advmp-complaint__message { margin: 0; padding: 0.65em 0.8em; border-radius: var(--advmp-radius-sm, 6px); background: var(--advmp-surface-sunken, #f6f6f6); } /* The reader's own messages sit visually apart, so a long back-and-forth can be skimmed for "what did they say" without reading every line. */ .advmp-complaint__message.is-mine { background: transparent; border: 1px solid var(--advmp-border, #e3e3e3); } .advmp-complaint__who { margin: 0 0 0.25em; display: flex; gap: 0.6em; align-items: baseline; font-size: 0.82em; } .advmp-complaint__body { margin: 0; } .advmp-complaint__actions { margin-top: 0.5em; } .advmp-complaint__resolve { margin-top: 0.6em; } .advmp-complaint-picker { margin: 0.6em 0; } .advmp-complaint-picker > summary { cursor: pointer; padding: 0.4em 0; } /* ------------------------------------------------------------------ */ /* Become a seller / become a reseller */ /* ------------------------------------------------------------------ */ /* In a nav menu these inherit the theme's own menu-item styling and need nothing from us; the hook is here for a site that wants to pick them out from the rest of the navigation. */ .advmp-join-item > a { white-space: nowrap; } /* The fallback strip, for a site with no menu to inject into. */ .advmp-joinbar { background: var(--advmp-surface-sunken, #f4f4f5); border-bottom: 1px solid var(--advmp-border, #e3e3e3); font-size: 0.85rem; } .advmp-joinbar__inner { max-width: 1200px; margin: 0 auto; padding: 0.4em 1em; display: flex; gap: 1.2em; justify-content: flex-end; flex-wrap: wrap; } .advmp-joinbar__link { text-decoration: none; } .advmp-joinbar__link:hover { text-decoration: underline; } /* The shortcode, for an Elementor header or anywhere else by hand. */ .advmp-joinlinks { display: inline-flex; gap: 0.5em; align-items: center; flex-wrap: wrap; } .advmp-joinlinks--plain .advmp-joinlinks__link { text-decoration: none; } .advmp-joinlinks--plain .advmp-joinlinks__link:hover { text-decoration: underline; }