/** * TitanCart Wishlist+ — Storefront list UI * Self-contained styles for the Smart Wishlists customer-facing app. * * Scope: all classes are prefixed `tcwp-` to avoid collision with core * `.tc-wishlist` / `.tc-toast` styles in titancart.css. Design tokens live on * :root because the toast and modal overlay are appended to (outside the * .tcwp-wishlist mount), so they must reach the tokens from the document root. * * Palette: Pulse UI. Font: Inter (falls back to the theme/system stack). */ :root { /* Brand + semantic colors are constant across light/dark (theme design anchor). */ --tcwp-primary: #171717; --tcwp-accent: #2563EB; --tcwp-accent-d:#1D4ED8; --tcwp-success: #16A34A; --tcwp-amber: #D97706; --tcwp-error: #DC2626; /* Surfaces/text/borders consume the theme's mode-aware tokens (--tct-*, flipped under [data-theme="dark"] on ) with Pulse light values as fallback — so dark mode "just works" with the theme active, and plugin-only / third-party-theme installs keep the current light look with zero regression (Pattern #105). */ --tcwp-text: var( --tct-text, #0A0A0A ); --tcwp-muted: var( --tct-text-secondary, #737373 ); --tcwp-border: var( --tct-border, #E5E5E5 ); --tcwp-bg: var( --tct-bg-elevated, #FFFFFF ); --tcwp-bg-soft: var( --tct-bg-secondary, #FAFAFA ); --tcwp-bg-hover:var( --tct-bg-tertiary, #F5F5F5 ); --tcwp-radius: 10px; --tcwp-radius-sm: 7px; --tcwp-shadow: 0 1px 3px rgba( 0, 0, 0, .08 ), 0 1px 2px rgba( 0, 0, 0, .04 ); --tcwp-shadow-lg: 0 12px 32px rgba( 0, 0, 0, .14 ); --tcwp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── Mount + base ─────────────────────────────────────────────────────────── */ .tcwp-wishlist { font-family: var( --tcwp-font ); color: var( --tcwp-text ); font-size: 15px; line-height: 1.5; box-sizing: border-box; -webkit-font-smoothing: antialiased; } .tcwp-wishlist *, .tcwp-wishlist *::before, .tcwp-wishlist *::after { box-sizing: border-box; } .tcwp-wishlist a { color: var( --tcwp-accent ); text-decoration: none; } .tcwp-wishlist a:hover { text-decoration: underline; } /* ── Loading + spinner ────────────────────────────────────────────────────── */ .tcwp-loading { display: flex; align-items: center; gap: 10px; padding: 32px 4px; color: var( --tcwp-muted ); font-size: 14px; } .tcwp-spinner { width: 18px; height: 18px; border: 2px solid var( --tcwp-border ); border-top-color: var( --tcwp-accent ); border-radius: 50%; display: inline-block; animation: tcwp-spin .7s linear infinite; flex: none; } @keyframes tcwp-spin { to { transform: rotate( 360deg ); } } /* ── Header ───────────────────────────────────────────────────────────────── */ .tcwp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; } .tcwp-h { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var( --tcwp-text ); } /* ── List tabs ────────────────────────────────────────────────────────────── */ .tcwp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; border-bottom: 1px solid var( --tcwp-border ); padding-bottom: 14px; } .tcwp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var( --tcwp-border ); background: var( --tcwp-bg ); color: var( --tcwp-text ); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s; line-height: 1.2; } .tcwp-tab:hover { background: var( --tcwp-bg-hover ); border-color: var( --tct-border-strong, #d4d4d4 ); } .tcwp-tab--active { background: var( --tcwp-accent ); border-color: var( --tcwp-accent ); color: #fff; } .tcwp-tab--active:hover { background: var( --tcwp-accent-d ); border-color: var( --tcwp-accent-d ); } .tcwp-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var( --tcwp-bg-hover ); color: var( --tcwp-muted ); font-size: 12px; font-weight: 600; } .tcwp-tab--active .tcwp-tab__count { background: rgba( 255, 255, 255, .22 ); color: #fff; } .tcwp-tab__star { color: var( --tcwp-amber ); font-size: 13px; line-height: 1; } .tcwp-tab--active .tcwp-tab__star { color: #FCD34D; } /* ── Panel ────────────────────────────────────────────────────────────────── */ .tcwp-panel { margin: 0 0 8px; } .tcwp-panel__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; } .tcwp-panel__title { font-size: 18px; font-weight: 700; margin: 0; color: var( --tcwp-text ); } /* ── Pills ────────────────────────────────────────────────────────────────── */ .tcwp-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.6; } .tcwp-pill--default { background: #FEF3C7; color: #92400E; } .tcwp-pill--reg { background: #DBEAFE; color: #1E40AF; } /* ── Registry meta ────────────────────────────────────────────────────────── */ .tcwp-reg-meta { margin: 0 0 14px; } .tcwp-reg-meta:empty { margin: 0; } .tcwp-reg-meta__date { display: inline-block; font-size: 14px; font-weight: 600; color: var( --tcwp-amber ); margin: 0 0 4px; } .tcwp-reg-meta__desc { font-size: 14px; color: var( --tcwp-muted ); margin: 4px 0 0; max-width: 640px; } /* ── List-level actions row ───────────────────────────────────────────────── */ .tcwp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } /* ── Share row ────────────────────────────────────────────────────────────── */ .tcwp-share { margin: 0 0 18px; padding: 14px; background: var( --tcwp-bg-soft ); border: 1px solid var( --tcwp-border ); border-radius: var( --tcwp-radius ); } .tcwp-share__label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var( --tcwp-muted ); margin: 0 0 8px; } .tcwp-share__row { display: flex; gap: 8px; } .tcwp-share__url { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var( --tcwp-muted ); background: var( --tcwp-bg ); } /* ── Share actions: one-click social + email-a-list ──────────────────────── */ .tcwp-share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .tcwp-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tcwp-social__label { font-size: 12px; font-weight: 600; color: var( --tcwp-muted ); } .tcwp-social__btn { display: inline-flex; align-items: center; padding: 5px 12px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var( --tcwp-text ); background: var( --tcwp-bg ); border: 1px solid var( --tcwp-border ); border-radius: 999px; cursor: pointer; text-decoration: none; transition: background .14s, border-color .14s, color .14s; } .tcwp-social__btn:hover { background: var( --tcwp-bg-hover ); border-color: var( --tct-border-strong, #d4d4d4 ); color: var( --tcwp-text ); text-decoration: none; } .tcwp-share__email { margin-left: auto; } /* ── Email-a-list modal form ─────────────────────────────────────────────── */ .tcwp-email-form .tcwp-field { margin-bottom: 4px; } .tcwp-field__hint { margin: 2px 0 14px; font-size: 12px; color: var( --tcwp-muted ); } .tcwp-email-form textarea.tcwp-input { resize: vertical; font-family: inherit; } /* ── Per-item alerts bell ────────────────────────────────────────────────── */ .tcwp-bell { padding: 6px 10px; line-height: 1; } .tcwp-bell span { font-size: 14px; } .tcwp-bell--on { color: var( --tcwp-accent, #2563EB ); border-color: var( --tcwp-accent, #2563EB ); } /* ── Item grid + cards ────────────────────────────────────────────────────── */ .tcwp-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); gap: 16px; margin: 0; } .tcwp-card { display: flex; flex-direction: column; border: 1px solid var( --tcwp-border ); border-radius: var( --tcwp-radius ); background: var( --tcwp-bg ); overflow: hidden; transition: box-shadow .14s, transform .14s, border-color .14s; } .tcwp-card:hover { box-shadow: var( --tcwp-shadow ); border-color: var( --tct-border-strong, #d4d4d4 ); transform: translateY( -2px ); } .tcwp-card__media { display: block; position: relative; /* Inherit the site-wide product image shape (Settings → Thumbnails → Product Image Shape, emitted by the plugin as :root{--tc-img-ratio}). Falls back to the storefront default 3/4 ("tall") so wishlist cards always match the shop, PDP, cart and checkout (Pattern #105 — consume the global token, don't hardcode). */ aspect-ratio: var( --tc-img-ratio, 3 / 4 ); background: var( --tcwp-bg-soft ); overflow: hidden; } .tcwp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; /* Hide alt text on broken images; the placeholder bg shows through instead. */ color: transparent; font-size: 0; } .tcwp-card__media--ph { display: flex; align-items: center; justify-content: center; } .tcwp-card__ph { font-size: 40px; color: #d4d4d4; line-height: 1; } .tcwp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; flex: 1 1 auto; } .tcwp-card__name { font-size: 14px; font-weight: 600; color: var( --tcwp-text ); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tcwp-card__name:hover { color: var( --tcwp-accent ); text-decoration: none; } .tcwp-card__price { font-size: 15px; font-weight: 700; color: var( --tcwp-text ); } .tcwp-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; } /* ── Stock badge ──────────────────────────────────────────────────────────── */ .tcwp-badge { display: inline-flex; align-items: center; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .tcwp-badge--in { background: #DCFCE7; color: #166534; } .tcwp-badge--out { background: #FEE2E2; color: #991B1B; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .tcwp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 16px; border: 1px solid transparent; border-radius: var( --tcwp-radius-sm ); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center; transition: background .12s, border-color .12s, color .12s, opacity .12s; text-decoration: none; white-space: nowrap; } .tcwp-btn:hover { text-decoration: none; } .tcwp-btn--sm { padding: 6px 11px; font-size: 13px; } .tcwp-btn--primary { background: var( --tcwp-accent ); border-color: var( --tcwp-accent ); color: #fff; } .tcwp-btn--primary:hover { background: var( --tcwp-accent-d ); border-color: var( --tcwp-accent-d ); color: #fff; } .tcwp-btn--ghost { background: var( --tcwp-bg ); border-color: var( --tcwp-border ); color: var( --tcwp-text ); } .tcwp-btn--ghost:hover { background: var( --tcwp-bg-hover ); border-color: var( --tct-border-strong, #d4d4d4 ); color: var( --tcwp-text ); } .tcwp-btn--danger { background: var( --tcwp-bg ); border-color: #FECACA; color: var( --tcwp-error ); } .tcwp-btn--danger:hover { background: #FEF2F2; border-color: var( --tcwp-error ); color: var( --tcwp-error ); } .tcwp-btn--muted { background: var( --tcwp-bg-soft ); border-color: var( --tcwp-border ); color: var( --tcwp-muted ); cursor: default; } .tcwp-btn[disabled], .tcwp-btn.is-busy { opacity: .6; cursor: default; pointer-events: none; } /* ── Empty state ──────────────────────────────────────────────────────────── */ .tcwp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 20px; color: var( --tcwp-muted ); } .tcwp-empty__icon { font-size: 48px; line-height: 1; color: #d4d4d4; } .tcwp-empty p { margin: 0; font-size: 15px; } /* ── Notices ──────────────────────────────────────────────────────────────── */ .tcwp-notice { padding: 12px 16px; border-radius: var( --tcwp-radius-sm ); font-size: 14px; border: 1px solid transparent; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tcwp-notice--error { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } .tcwp-notice--info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; margin: 0 0 18px; } .tcwp-notice--info a { font-weight: 700; } /* ── Login prompt (PHP fallback for guests when guest lists are off) ───────── */ .tcwp-login-prompt { padding: 16px 18px; background: var( --tcwp-bg-soft ); border: 1px solid var( --tcwp-border ); border-radius: var( --tcwp-radius ); font-size: 15px; color: var( --tcwp-text ); } /* ── Toast (appended to ) ───────────────────────────────────────────── */ .tcwp-toast { position: fixed; left: 50%; bottom: 28px; transform: translate( -50%, 16px ); z-index: 100000; max-width: 90vw; padding: 11px 20px; background: var( --tcwp-primary ); color: #fff; border-radius: 999px; font-family: var( --tcwp-font ); font-size: 14px; font-weight: 500; box-shadow: var( --tcwp-shadow-lg ); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .tcwp-toast--in { opacity: 1; transform: translate( -50%, 0 ); } /* ── Modal (overlay appended to ) ───────────────────────────────────── */ .tcwp-modal-overlay { position: fixed; inset: 0; z-index: 100001; background: rgba( 10, 10, 10, .5 ); display: flex; align-items: center; justify-content: center; padding: 20px; animation: tcwp-fade .15s ease; } @keyframes tcwp-fade { from { opacity: 0; } to { opacity: 1; } } .tcwp-modal { width: 100%; max-width: 460px; max-height: calc( 100vh - 40px ); overflow-y: auto; background: var( --tcwp-bg ); border-radius: var( --tcwp-radius ); box-shadow: var( --tcwp-shadow-lg ); font-family: var( --tcwp-font ); color: var( --tcwp-text ); animation: tcwp-pop .16s ease; } @keyframes tcwp-pop { from { opacity: 0; transform: translateY( 8px ) scale( .98 ); } to { opacity: 1; transform: translateY( 0 ) scale( 1 ); } } .tcwp-modal__head { padding: 18px 20px 0; } .tcwp-modal__head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var( --tcwp-text ); } .tcwp-modal__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; } .tcwp-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; } /* ── Form fields ──────────────────────────────────────────────────────────── */ .tcwp-field { display: flex; flex-direction: column; gap: 6px; } .tcwp-field > span { font-size: 13px; font-weight: 600; color: var( --tcwp-text ); } .tcwp-input { width: 100%; padding: 9px 12px; border: 1px solid var( --tcwp-border ); border-radius: var( --tcwp-radius-sm ); font: inherit; font-size: 14px; color: var( --tcwp-text ); background: var( --tcwp-bg ); transition: border-color .12s, box-shadow .12s; } .tcwp-input:focus { outline: none; border-color: var( --tcwp-accent ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, .15 ); } textarea.tcwp-input { resize: vertical; min-height: 56px; } .tcwp-reg-fields { display: flex; flex-direction: column; gap: 14px; } /* ── Pick-list (move/copy target chooser) ─────────────────────────────────── */ .tcwp-picklist { display: flex; flex-direction: column; gap: 8px; } .tcwp-picklist__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border: 1px solid var( --tcwp-border ); border-radius: var( --tcwp-radius-sm ); background: var( --tcwp-bg ); font: inherit; font-size: 14px; font-weight: 500; color: var( --tcwp-text ); cursor: pointer; text-align: left; transition: background .12s, border-color .12s; } .tcwp-picklist__item:hover { background: var( --tcwp-bg-hover ); border-color: var( --tcwp-accent ); } /* ── Utility ──────────────────────────────────────────────────────────────── */ .tcwp-muted { color: var( --tcwp-muted ); font-size: 14px; margin: 0 0 12px; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media ( max-width: 600px ) { .tcwp-grid { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); gap: 12px; } .tcwp-h { font-size: 19px; } .tcwp-head { margin-bottom: 14px; } .tcwp-modal { max-width: 100%; } .tcwp-share__row { flex-direction: column; } .tcwp-share__row .tcwp-btn { width: 100%; } .tcwp-share__actions { flex-direction: column; align-items: stretch; } .tcwp-share__email { margin-left: 0; width: 100%; justify-content: center; } }