/* Triple Victor — FluentCart skin.
*
* Hand-written. Catches every place FluentCart 1.6.0 paints a literal
* light colour that the custom-property maps cannot reach. store.css
* (generated) maps the plugin's --fct-* variables; this file covers what
* the plugin hardcodes instead of routing through a variable.
*
* Why literals exist at all: FluentCart's own dark mode activates under
* an ancestor class `.fluent_theme_dark` this site never sets — its
* light values are compiled in as the default. We stay out of that
* mechanism deliberately: its dark palette is FluentCart's, not ours.
*
* Every rule is scoped under `.tv-shell-page` (the body class
* functions.php adds when tv_use_shell() says yes), so nothing here can
* reach the community, and every value chains to tokens.css — both
* colour schemes follow from the same rule.
*
* Measured against fluent-cart 1.6.0 from wordpress.org, the version on
* staging. A plugin update can add new literals; the sweep that produced
* this file is the thing to re-run, not guesswork.
*/
/* ---------------------------------------------------------------
Element Plus, remapped
---------------------------------------------------------------
The profile app is Element Plus (the community uses the same library)
and themes through --el-* variables declared at :root. Redeclaring
them on body.tv-shell-page wins for everything inside — including
popovers, which teleport to body and stay inside the scope.
The fill ramp feeds skeletons, disabled inputs (the profile email
field) and pagination; mask-color is the loading overlay — stock
value is a 90% white sheet; the primary ramp doubles as a brand fix,
replacing Element blue with the accent. */
.tv-shell-page {
/* Base surfaces and text (these eleven predate this file — moved from
shell.css when the skin grew a home of its own) */
--el-bg-color: var(--color-surface);
--el-bg-color-overlay: var(--color-surface);
--el-bg-color-page: var(--color-bg);
--el-fill-color-blank: var(--color-bg);
--el-color-white: var(--color-surface);
--el-text-color-primary: var(--color-ink);
--el-text-color-regular: var(--color-ink-secondary);
--el-text-color-secondary: var(--color-ink-muted);
--el-border-color: var(--color-line);
--el-border-color-light: var(--color-line-subtle);
--el-border-color-lighter: var(--color-line-subtle);
/* The ramps and states the eleven above do not reach */
--el-fill-color: var(--color-surface-alt);
--el-fill-color-light: var(--color-surface-alt);
--el-fill-color-lighter: var(--color-surface);
--el-fill-color-extra-light: var(--color-surface);
--el-fill-color-dark: var(--color-surface-alt);
--el-fill-color-darker: var(--color-surface-alt);
--el-text-color-placeholder: var(--color-ink-muted);
--el-text-color-disabled: var(--color-ink-muted);
--el-mask-color: color-mix(in srgb, var(--color-bg) 90%, transparent);
--el-mask-color-extra-light: color-mix(in srgb, var(--color-bg) 30%, transparent);
--el-border-color-extra-light: var(--color-line-subtle);
--el-border-color-dark: var(--color-line);
--el-border-color-darker: var(--color-line);
--el-color-primary: var(--color-accent);
--el-color-primary-dark-2:var(--color-accent-hover);
--el-color-primary-light-9:var(--color-accent-muted);
--el-color-primary-light-8:color-mix(in srgb, var(--color-accent) 20%, var(--color-surface));
--el-color-primary-light-7:color-mix(in srgb, var(--color-accent) 30%, var(--color-surface));
--el-color-primary-light-5:color-mix(in srgb, var(--color-accent) 50%, var(--color-surface));
--el-color-primary-light-3:color-mix(in srgb, var(--color-accent) 70%, var(--color-surface));
--el-color-success-light-9:color-mix(in srgb, var(--el-color-success) 12%, var(--color-surface));
--el-color-success-light-8:color-mix(in srgb, var(--el-color-success) 20%, var(--color-surface));
--el-color-success-light-7:color-mix(in srgb, var(--el-color-success) 30%, var(--color-surface));
--el-color-success-light-5:color-mix(in srgb, var(--el-color-success) 50%, var(--color-surface));
--el-color-success-light-3:color-mix(in srgb, var(--el-color-success) 70%, var(--color-surface));
--el-color-warning-light-9:color-mix(in srgb, var(--el-color-warning) 12%, var(--color-surface));
--el-color-warning-light-8:color-mix(in srgb, var(--el-color-warning) 20%, var(--color-surface));
--el-color-warning-light-7:color-mix(in srgb, var(--el-color-warning) 30%, var(--color-surface));
--el-color-warning-light-5:color-mix(in srgb, var(--el-color-warning) 50%, var(--color-surface));
--el-color-warning-light-3:color-mix(in srgb, var(--el-color-warning) 70%, var(--color-surface));
--el-color-danger-light-9:color-mix(in srgb, var(--el-color-danger) 12%, var(--color-surface));
--el-color-danger-light-8:color-mix(in srgb, var(--el-color-danger) 20%, var(--color-surface));
--el-color-danger-light-7:color-mix(in srgb, var(--el-color-danger) 30%, var(--color-surface));
--el-color-danger-light-5:color-mix(in srgb, var(--el-color-danger) 50%, var(--color-surface));
--el-color-danger-light-3:color-mix(in srgb, var(--el-color-danger) 70%, var(--color-surface));
--el-color-error-light-9:color-mix(in srgb, var(--el-color-error) 12%, var(--color-surface));
--el-color-error-light-8:color-mix(in srgb, var(--el-color-error) 20%, var(--color-surface));
--el-color-error-light-7:color-mix(in srgb, var(--el-color-error) 30%, var(--color-surface));
--el-color-error-light-5:color-mix(in srgb, var(--el-color-error) 50%, var(--color-surface));
--el-color-error-light-3:color-mix(in srgb, var(--el-color-error) 70%, var(--color-surface));
--el-color-info-light-9:var(--color-surface-alt);
--el-color-info-light-8:color-mix(in srgb, var(--el-color-info) 20%, var(--color-surface));
--el-color-info-light-7:color-mix(in srgb, var(--el-color-info) 30%, var(--color-surface));
--el-color-info-light-5:color-mix(in srgb, var(--el-color-info) 50%, var(--color-surface));
--el-color-info-light-3:color-mix(in srgb, var(--el-color-info) 70%, var(--color-surface));
}
/* FluentCart's Tailwind-compiled `.bg-white` utility — the original
white-card catch, kept with its family. */
.tv-shell-page .bg-white {
background: var(--color-surface, #f7f5f1);
color: var(--color-ink, #1c1917);
}
/* ---------------------------------------------------------------
Customer profile — plugin-authored surfaces
---------------------------------------------------------------
The address cards, form containers, order tables, badges, dialogs
and buttons of the profile app. These hardcode their colours rather
than routing through --fct-* or --el-* variables. */
/* address list card on Addresses tab — the headline bug: literal white card on dark page */
.tv-shell-page .fct-customer-address-list {
background-color: var(--color-surface);
border-color: var(--color-line);
}
/* address list scrollbar thumb (and identical :hover rule) */
.tv-shell-page .fct-customer-address-list::-webkit-scrollbar-thumb,
.tv-shell-page .fct-customer-address-list::-webkit-scrollbar-thumb:hover {
background-color: var(--color-line);
}
/* individual address block border inside address list */
.tv-shell-page .fct-customer-address-block {
border-color: var(--color-line-subtle);
}
/* 'default address' badge chip */
.tv-shell-page .fct-customer-address-block .badge.is-high-contrast {
background-color: var(--color-surface-alt);
}
/* business details heading on address form */
.tv-shell-page .fct-customer-address-business-details .fct-customer-address-business-details-title {
color: var(--color-ink);
}
/* disabled input field — the known-live disabled email field on the profile form */
.tv-shell-page .el-input.is-disabled .el-input__wrapper {
background-color: var(--color-surface-alt)!important;
}
/* text input border (all el-input fields) */
.tv-shell-page .el-input__wrapper {
border-color: var(--color-line)!important;
}
/* focused input border — near-black, invisible against a dark surface */
.tv-shell-page .el-input__wrapper.is-focus {
border-color: var(--color-accent)!important;
}
/* form field labels */
.tv-shell-page .el-form-item__label {
color: var(--color-ink) !important;
}
/* select control border */
.tv-shell-page .el-select__wrapper,
.tv-shell-page .el-select__wrapper.is-focused {
border-color: var(--color-line);
}
/* select dropdown panel border */
.tv-shell-page .el-select__popper.el-popper {
border-color: var(--color-line)!important;
}
/* select dropdown option text */
.tv-shell-page .el-select-dropdown__list .el-select-dropdown__item {
color: var(--color-ink-secondary)!important;
}
/* selected option text (near-black) */
.tv-shell-page .el-select-dropdown__list .el-select-dropdown__item.is-selected {
color: var(--color-ink)!important;
}
/* hovered option background */
.tv-shell-page .el-select-dropdown__list .el-select-dropdown__item.is-hovering {
background-color: var(--color-surface-alt)!important;
}
/* unchecked checkbox border */
.tv-shell-page .el-checkbox .el-checkbox__inner {
border-color: var(--color-line);
}
/* checked/indeterminate checkbox fill — near-black box vanishes on dark surface */
.tv-shell-page .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
.tv-shell-page .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: var(--color-accent);
background-color: var(--color-accent);
}
/* per-page select control inside pagination */
.tv-shell-page .el-pagination .el-select .el-input__wrapper,
.tv-shell-page .el-pagination .el-select .el-select__wrapper {
border-color: var(--color-line)!important;
background-color: var(--color-surface-alt)!important;
}
/* pagination select placeholder/caret */
.tv-shell-page .el-pagination .el-select .el-select__placeholder.is-transparent,
.tv-shell-page .el-pagination .el-select .el-select__caret {
color: var(--color-ink-secondary)!important;
}
/* pagination input text */
.tv-shell-page .el-pagination .el-input__inner {
color: var(--color-ink-secondary);
}
/* pagination select caret icon */
.tv-shell-page .el-pagination .el-input__suffix-inner .el-icon {
color: var(--color-ink)!important;
}
/* pagination prev/next buttons */
.tv-shell-page .el-pagination button {
color: var(--color-ink-secondary)!important;
}
/* page number buttons — literal white chips */
.tv-shell-page .el-pagination.is-background .el-pager li {
border-color: var(--color-line);
background-color: var(--color-surface);
}
/* hovered page number button */
.tv-shell-page .el-pagination.is-background .el-pager li:hover {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* dropdown menu item text (order row actions menu — known live) */
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item {
color: var(--color-ink);
}
/* hovered dropdown menu item */
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item:hover,
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item:focus {
background-color: var(--color-surface-alt);
}
/* active dropdown menu item text */
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item.active {
color: var(--color-ink);
}
/* destructive menu item hover tint (light pink) */
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item.item-destructive:hover,
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item.item-destructive:focus {
background-color: color-mix(in srgb, rgb(240 68 56) 12%, var(--color-surface));
}
/* link-style dropdown menu item */
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item.item-link a {
color: var(--color-ink);
}
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item.item-link a:hover,
.tv-shell-page .el-dropdown__popper.fct-dropdown .el-dropdown-menu__item.item-link a:focus {
background-color: var(--color-surface-alt);
}
/* table header cells (orders/subscriptions tables) */
.tv-shell-page .el-table th.el-table__cell {
background-color: var(--color-surface-alt)!important;
}
/* table body cell text */
.tv-shell-page .el-table td.el-table__cell {
color: var(--color-ink)!important;
}
/* table row/header borders */
.tv-shell-page .el-table td.el-table__cell,
.tv-shell-page .el-table th.el-table__cell.is-leaf {
border-color: var(--color-line)!important;
}
/* fixed right column header while horizontally scrolled (mobile tables) */
.tv-shell-page .el-table.is-scrolling-right th.el-table-fixed-column--right {
background-color: var(--color-surface-alt)!important;
}
/* Element Plus fixed-column patch cell (corner filler when a table has a fixed right column) */
.tv-shell-page .el-table__body-wrapper tr td.el-table__fixed-right-patch,
.tv-shell-page .el-table__body-wrapper tr th.el-table__fixed-right-patch,
.tv-shell-page .el-table__footer-wrapper tr td.el-table__fixed-right-patch,
.tv-shell-page .el-table__footer-wrapper tr th.el-table__fixed-right-patch,
.tv-shell-page .el-table__header-wrapper tr td.el-table__fixed-right-patch,
.tv-shell-page .el-table__header-wrapper tr th.el-table__fixed-right-patch {
background: var(--color-surface);
}
/* hovered link inside table */
.tv-shell-page .el-table .link:hover {
color: var(--color-ink)!important;
}
/* alternate table style header border */
.tv-shell-page .fct-table-style-two .el-table th.el-table__cell {
border-color: var(--color-line-subtle)!important;
}
/* plan-upgrade variation table borders (subscription upgrade dialog) */
.tv-shell-page .fct-upgrade-variation-table .el-table td.el-table__cell,
.tv-shell-page .fct-upgrade-variation-table .el-table th.el-table__cell.is-leaf {
border-color: var(--color-line-subtle)!important;
}
/* breadcrumb current-page text */
.tv-shell-page .el-breadcrumb__inner {
color: var(--color-ink)!important;
}
/* breadcrumb link text */
.tv-shell-page .el-breadcrumb__inner a,
.tv-shell-page .el-breadcrumb__inner.is-link {
color: var(--color-ink-secondary)!important;
}
.tv-shell-page .el-breadcrumb__inner a:hover,
.tv-shell-page .el-breadcrumb__inner.is-link:hover {
color: var(--color-ink)!important;
}
/* alert body text (skin override; the upstream .el-alertbackground-color:var(--el-color-white) cha */
.tv-shell-page .el-alert,
.tv-shell-page .el-alert__description {
color: var(--color-ink)!important;
}
/* error alert tint background */
.tv-shell-page .el-alert--error.is-light {
background-color: color-mix(in srgb, rgb(240 68 56) 12%, var(--color-surface))!important;
}
/* success alert tint background */
.tv-shell-page .el-alert--success.is-light {
background-color: color-mix(in srgb, rgb(24 152 119) 12%, var(--color-surface))!important;
}
/* warning alert tint background */
.tv-shell-page .el-alert--warning.is-light {
background-color: color-mix(in srgb, rgb(245 142 7) 12%, var(--color-surface))!important;
}
/* info/blue alert tint background */
.tv-shell-page .el-alert--blue.is-light {
background-color: var(--color-accent-muted)!important;
}
/* success status tag (order status chips — known live) */
.tv-shell-page .el-tag.el-tag--success {
background-color: color-mix(in srgb, rgb(24 152 119) 15%, var(--color-surface));
}
/* primary/neutral tag — light bg with near-black border and text */
.tv-shell-page .el-tag.el-tag--primary {
border-color: var(--color-line);
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* info tag */
.tv-shell-page .el-tag.el-tag--info {
background-color: var(--color-surface-alt);
color: var(--color-ink-secondary);
}
/* warning tag background */
.tv-shell-page .el-tag.el-tag--warning {
background-color: color-mix(in srgb, rgb(245 142 7) 15%, var(--color-surface));
}
/* danger tag background */
.tv-shell-page .el-tag.el-tag--danger {
background-color: color-mix(in srgb, rgb(240 68 56) 15%, var(--color-surface));
}
/* 'dark' variant info tag — solid light-gray chip with dark text */
.tv-shell-page .el-tag--dark.el-tag--info {
border-color: var(--color-surface-alt);
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* dialog header divider (known-live el-dialog) */
.tv-shell-page .el-overlay .el-dialog__header,
.tv-shell-page .el-overlay .el-dialog__footer {
border-color: var(--color-line-subtle);
}
/* dialog title text */
.tv-shell-page .el-overlay .el-dialog__header .el-dialog__title {
color: var(--color-ink);
}
/* dialog close button hover — white circle on dark dialog */
.tv-shell-page .el-overlay .el-dialog__headerbtn:hover {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
.tv-shell-page .el-overlay .el-dialog__headerbtn:hover .el-dialog__close {
color: var(--color-ink);
}
/* confirm dialog (message box) title */
.tv-shell-page .el-message-box__title {
color: var(--color-ink);
}
.tv-shell-page .el-message-box__message p {
color: var(--color-ink-secondary);
}
/* message box button row divider */
.tv-shell-page .el-message-box__btns {
border-color: var(--color-line-subtle);
}
/* message box secondary button text; hover twin hardcodes border-color:rgb(192 194 196 / var(--tw- */
.tv-shell-page .el-message-box__btns .el-button:not(.el-button--primary) {
color: var(--color-ink);
}
.tv-shell-page .el-message-box__btns .el-button:not(.el-button--primary):hover {
border-color: var(--color-line);
background-color: var(--color-surface-alt);
}
/* message box primary button — near-black button invisible on dark dialog */
.tv-shell-page .el-message-box__btns .el-button--primary {
border-color: var(--color-accent);
background-color: var(--color-accent);
color: var(--color-on-accent);
}
/* message box warning icon circle; error twin hardcodes background-color:rgb(253 245 243 / var(--t */
.tv-shell-page .el-message-box__status.el-message-box-icon--warning {
background-color: color-mix(in srgb, rgb(245 142 7) 12%, var(--color-surface));
}
.tv-shell-page .el-message-box__status.el-message-box-icon--error {
background-color: color-mix(in srgb, rgb(240 68 56) 12%, var(--color-surface));
}
/* default button in the profile app (known live) */
.tv-shell-page .fluent-cart-customer-profile-app .el-button {
border-color: var(--color-line)!important;
color: var(--color-ink)!important;
}
/* default button hover fill */
.tv-shell-page .fluent-cart-customer-profile-app .el-button:hover {
background-color: var(--color-surface-alt)!important;
}
/* default button focus state */
.tv-shell-page .fluent-cart-customer-profile-app .el-button:focus {
border-color: var(--color-line)!important;
background-color: var(--color-surface-alt)!important;
color: var(--color-ink)!important;
}
/* soft info button; hover twin hardcodes border/background rgb(234 236 240 / ...)!important */
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info[soft] {
border-color: var(--color-surface-alt)!important;
background-color: var(--color-surface-alt)!important;
color: var(--color-ink)!important;
}
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info[soft]:hover {
border-color: var(--color-line-subtle)!important;
background-color: var(--color-line-subtle)!important;
}
/* disabled buttons */
.tv-shell-page .fluent-cart-customer-profile-app .el-button:disabled,
.tv-shell-page .fluent-cart-customer-profile-app .el-button.is-disabled {
border-color: var(--color-surface-alt)!important;
background-color: var(--color-surface-alt)!important;
color: var(--color-ink-muted)!important;
}
/* link-style buttons (also .is-link.is-text twin with the same literal) */
.tv-shell-page .fluent-cart-customer-profile-app .el-button.is-link,
.tv-shell-page .fluent-cart-customer-profile-app .el-button.is-link.is-text {
color: var(--color-ink)!important;
}
/* plain/text info buttons; hover twin hardcodes background-color:rgb(245 246 247 / ...)!important */
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info.is-link,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info.is-plain,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info.is-text {
border-color: var(--color-line)!important;
background-color: var(--color-surface)!important;
color: var(--color-ink)!important;
}
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info.is-link:hover,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info.is-plain:hover,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--info.is-text:hover {
background-color: var(--color-surface-alt)!important;
}
/* plain/text warning buttons; hover twin hardcodes background-color:rgb(254 244 230 / ...)!importa */
.tv-shell-page .fluent-cart-customer-profile-app .el-button--warning.is-link,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--warning.is-plain,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--warning.is-text {
background-color: color-mix(in srgb, rgb(245 142 7) 12%, var(--color-surface))!important;
}
/* plain/text danger buttons (e.g. cancel subscription); hover twin hardcodes background-color:rgb( */
.tv-shell-page .fluent-cart-customer-profile-app .el-button--danger.is-link,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--danger.is-plain,
.tv-shell-page .fluent-cart-customer-profile-app .el-button--danger.is-text {
background-color: color-mix(in srgb, rgb(240 68 56) 12%, var(--color-surface))!important;
}
/* plugin status badge, success (known-live badges) */
.tv-shell-page .fct-badge.fct-success {
background-color: color-mix(in srgb, rgb(24 152 119) 18%, var(--color-surface));
color: rgb(24 152 119);
}
/* warning badge */
.tv-shell-page .fct-badge.fct-warning {
background-color: color-mix(in srgb, rgb(245 142 7) 18%, var(--color-surface));
color: rgb(245 142 7);
}
/* danger badge */
.tv-shell-page .fct-badge.fct-danger {
background-color: color-mix(in srgb, rgb(240 68 56) 18%, var(--color-surface));
color: rgb(240 68 56);
}
/* primary/neutral badge — light gray chip, near-black text */
.tv-shell-page .fct-badge.fct-primary {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* blue badge */
.tv-shell-page .fct-badge.fct-blue {
background-color: var(--color-accent-muted);
color: var(--color-accent-ink);
}
/* info/unshipped badge */
.tv-shell-page .fct-badge.fct-info,
.tv-shell-page .fct-badge.fct-unshipped {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* subscription renewal badge */
.tv-shell-page .fct-badge.fct-renewal-badge {
background-color: var(--color-accent-muted);
color: var(--color-accent-ink);
}
/* inclusive tax badge on order line items */
.tv-shell-page .fct-order-item-tax-rate.is-inclusive .fct-tax-badge {
background-color: color-mix(in srgb, #3b6d11 18%, var(--color-surface));
color: color-mix(in srgb, #3b6d11 60%, var(--color-ink));
}
.tv-shell-page .fct-order-item-tax-rate.is-inclusive .fct-tax-amount {
color: color-mix(in srgb, #3b6d11 60%, var(--color-ink));
}
/* exclusive tax badge; .fct-order-item-tax-rate.is-exclusive .fct-tax-amount separately hardcodes */
.tv-shell-page .fct-order-item-tax-rate.is-exclusive .fct-tax-badge {
background-color: color-mix(in srgb, #854f0b 18%, var(--color-surface));
color: color-mix(in srgb, #854f0b 60%, var(--color-ink));
}
.tv-shell-page .fct-order-item-tax-rate.is-exclusive .fct-tax-amount {
color: color-mix(in srgb, #854f0b 60%, var(--color-ink));
}
/* single-order detail list labels; sibling .text rule hardcodes color:rgb(47 52 72 / var(--tw-text */
.tv-shell-page .fct-customer-single-order-list .title {
color: var(--color-ink-secondary);
}
.tv-shell-page .fct-customer-single-order-list .text {
color: var(--color-ink);
}
/* dashboard list row card; child rules hardcode .title color:rgb(47 52 72 / ...), .variation-title */
.tv-shell-page .fct-customer-dashboard-list-content-item {
border-color: var(--color-line-subtle);
}
.tv-shell-page .fct-customer-dashboard-list-content-item .title {
color: var(--color-ink);
}
.tv-shell-page .fct-customer-dashboard-list-content-item .variation-title,
.tv-shell-page .fct-customer-dashboard-list-content-item .text {
color: var(--color-ink-secondary);
}
.tv-shell-page .fct-customer-dashboard-list-content-item .license-right-content.has-bg {
background-color: var(--color-surface-alt);
}
/* three-dot more-options button */
.tv-shell-page .fct-more-option-wrap .more-btn {
color: var(--color-ink);
}
/* dashboard section heading; sibling .text hardcodes color:rgb(86 88 101 / var(--tw-text-opacity, */
.tv-shell-page .fct-customer-dashboard-heading .title {
color: var(--color-ink);
}
.tv-shell-page .fct-customer-dashboard-heading .text {
color: var(--color-ink-secondary);
}
/* license section text set: .license-key-text, .license-meta-list li .meta-text, .license-product- */
.tv-shell-page .license-key-title,
.tv-shell-page .license-meta-list li .meta-title,
.tv-shell-page .license-product-wrap .license-product-title {
color: var(--color-ink);
}
.tv-shell-page .license-key-text,
.tv-shell-page .license-meta-list li .meta-text,
.tv-shell-page .license-product-wrap .license-product-text {
color: var(--color-ink-secondary);
}
/* separator dot between license meta items */
.tv-shell-page .license-meta-list li:after {
background-color: var(--color-line);
}
/* license activated status pill */
.tv-shell-page .fct-license-activated-status {
background-color: var(--color-accent-muted);
}
/* license key monospace box */
.tv-shell-page .fct-license-key-wrap .license-key {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* inline code element (bare element selector — leaks beyond the app root) */
.tv-shell-page code {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* copy-to-clipboard input (license key / download URL) — literal white field */
.tv-shell-page .fct-copy-advanced input {
border-color: var(--color-line)!important;
background-color: var(--color-surface)!important;
color: var(--color-ink)!important;
}
/* copy button attached to the copy input; hover twin hardcodes background-color:rgb(234 236 240 / */
.tv-shell-page .fct-copy-advanced .fct-copy-btn {
border-color: var(--color-line)!important;
background-color: var(--color-surface-alt)!important;
color: var(--color-ink)!important;
}
.tv-shell-page .fct-copy-advanced .fct-copy-btn:hover {
background-color: var(--color-line-subtle)!important;
}
.tv-shell-page .fct-copy-advanced .fct-copy-btn:disabled {
background-color: var(--color-surface-alt)!important;
}
/* basic copy button hover */
.tv-shell-page .fct-copy-basic .fct-copy-btn:hover {
background-color: var(--color-surface-alt);
}
/* copy icon fill — dark gray icon invisible on dark */
.tv-shell-page .fct-copy-basic .fct-copy-btn svg {
fill: var(--color-ink-secondary);
}
/* profile form container border */
.tv-shell-page .fct-form-container {
border-color: var(--color-line-subtle);
}
/* plain (non-Element) form inputs/selects — literal white fields */
.tv-shell-page .form-input-group input,
.tv-shell-page .form-input-group select {
border-color: var(--color-line)!important;
background-color: var(--color-bg)!important;
color: var(--color-ink)!important;
}
.tv-shell-page .form-input-group input:focus,
.tv-shell-page .form-input-group select:focus {
border-color: var(--color-accent)!important;
}
/* plugin form group labels */
.tv-shell-page .fct-form-group label {
color: var(--color-ink);
}
/* file upload trigger button (dashboard file uploader exists: .fct-customer-dashboard-file-uploade */
.tv-shell-page .file-upload-button {
border-color: var(--color-line);
background-color: var(--color-surface);
color: var(--color-ink);
}
.tv-shell-page .file-upload-button:hover {
background-color: var(--color-surface-alt);
}
/* uploaded image thumbnail border; twin rule .fct-customer-dashboard-file-uploader .el-upload-list */
.tv-shell-page .fct-customer-dashboard-file-uploader-img,
.tv-shell-page .fct-customer-dashboard-file-uploader .el-upload-list--picture-card .el-upload-list__item {
border-color: var(--color-line-subtle);
}
/* icon button base — literal white square button */
.tv-shell-page .icon-button {
border-color: var(--color-line);
background-color: var(--color-surface);
color: var(--color-ink-secondary);
}
/* icon button focus state */
.tv-shell-page .icon-button:focus {
border-color: var(--color-line);
background-color: var(--color-surface-alt);
color: var(--color-ink-secondary);
}
/* icon button hover */
.tv-shell-page button.icon-button:hover,
.tv-shell-page a.icon-button:hover {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
/* disabled icon button; :hover twin repeats border and bg literals */
.tv-shell-page .icon-button.is-disabled,
.tv-shell-page .icon-button:disabled,
.tv-shell-page .icon-button.is-disabled:hover,
.tv-shell-page .icon-button:disabled:hover {
border-color: var(--color-line);
background-color: var(--color-surface-alt);
color: var(--color-ink-muted);
}
/* primary icon button — near-black on dark surface; :hover hardcodes rgb(28 39 50 / ...) for borde */
.tv-shell-page .icon-button.primary {
border-color: var(--color-accent);
background-color: var(--color-accent);
color: var(--color-on-accent);
}
.tv-shell-page .icon-button.primary:hover {
border-color: var(--color-accent-hover);
background-color: var(--color-accent-hover);
}
/* soft variant icon buttons — family of light-tint chips: .icon-button.success[soft] rgb(232 245 2 */
.tv-shell-page .icon-button[soft],
.tv-shell-page .icon-button[outline] {
border-color: var(--color-line-subtle)!important;
background-color: var(--color-surface-alt)!important;
color: var(--color-ink)!important;
}
/* explicit white icon button */
.tv-shell-page .icon-button.white {
background-color: var(--color-surface);
}
/* hover-primary icon button; .icon-button.hover-danger:hover hardcodes bg rgb(253 245 243 / ...); */
.tv-shell-page .icon-button.hover-primary:hover {
border-color: var(--color-line);
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
.tv-shell-page .icon-button.hover-danger:hover {
background-color: color-mix(in srgb, rgb(240 68 56) 12%, var(--color-surface));
}
.tv-shell-page .icon-button.hover-info:hover {
background-color: var(--color-surface-alt);
}
/* material-style select border (address form country/state) */
.tv-shell-page .fct-material-select .el-select .el-select__wrapper {
border-color: var(--color-line);
}
/* mobile order card border; child .link hardcodes color:rgb(47 52 72 / var(--tw-text-opacity, 1))! */
.tv-shell-page .order-content-only-mobile-item {
border-color: var(--color-line);
}
.tv-shell-page .order-content-only-mobile-item .link {
color: var(--color-ink)!important;
}
/* mobile subscription card border; .item-header .fct-card-info .text hardcodes color:rgb(86 88 101 */
.tv-shell-page .subscription-only-mobile-item {
border-color: var(--color-line);
}
.tv-shell-page .subscription-only-mobile-item .item-header .fct-card-info .text {
color: var(--color-ink-secondary);
}
/* mobile license card border; child .text-meta hardcodes color:rgb(86 88 101 / ...) */
.tv-shell-page .license-only-mobile-item {
border-color: var(--color-line);
}
.tv-shell-page .license-only-mobile-item .text-meta {
color: var(--color-ink-secondary);
}
/* downloads table header */
.tv-shell-page .fct-customer-single-download-table thead th {
background-color: var(--color-surface-alt)!important;
color: var(--color-ink)!important;
}
/* downloads table cells; .link, .link:hover and .variation-title rules repeat the same ink literal */
.tv-shell-page .fct-customer-single-download-table tr td,
.tv-shell-page .fct-customer-single-download-table .link,
.tv-shell-page .fct-customer-single-download-table .link:hover,
.tv-shell-page .fct-customer-single-download-table .variation-title {
color: var(--color-ink)!important;
}
/* downloads table borders; tbody td twin repeats the literal */
.tv-shell-page .fct-customer-single-download-table table tr th,
.tv-shell-page .fct-customer-single-download-table table tbody td {
border-color: var(--color-line-subtle)!important;
}
/* email verification banner background */
.tv-shell-page .fct-email-verification {
background-color: var(--color-surface-alt);
}
/* verification banner title; .message-title .email and .message-text hardcode color:rgb(86 88 101 */
.tv-shell-page .fct-email-verification .message-title {
color: var(--color-ink);
}
.tv-shell-page .fct-email-verification .message-title .email,
.tv-shell-page .fct-email-verification .message-text {
color: var(--color-ink-secondary);
}
/* verification banner dismiss button — white circle */
.tv-shell-page .fct-email-verification .btn-close {
background-color: var(--color-surface);
color: var(--color-ink);
}
/* empty-state helper text */
.tv-shell-page .fct-empty-text p {
color: var(--color-ink-secondary);
}
/* order row action link button background */
.tv-shell-page .fct-customer-orders-items .fct-action-link-btn {
background-color: var(--color-surface-alt);
}
/* product order item divider; .title hardcodes color:rgb(47 52 72 / ...), .variation-title hardcod */
.tv-shell-page .fct-product-orders-items p {
border-color: var(--color-line-subtle);
}
.tv-shell-page .fct-product-orders-items .title {
color: var(--color-ink);
}
.tv-shell-page .fct-product-orders-items .variation-title {
color: var(--color-ink-secondary);
}
/* dashboard table item border */
.tv-shell-page .fct-customer-dashboard-content-table-item {
border-color: var(--color-line-subtle);
}
/* single order detail card border */
.tv-shell-page .fct-customer-dashboard-single-order-item {
border-color: var(--color-line-subtle);
}
/* product info card secondary text */
.tv-shell-page .fct-product-info-card .additional-info {
color: var(--color-ink)!important;
}
/* generic list item text */
.tv-shell-page .fct-list li {
color: var(--color-ink-secondary);
}
/* selected payment method radio card — near-black border on dark; label twin .fct-update-payment-m */
.tv-shell-page .fct-update-payment-method-radio .el-radio.is-bordered.is-checked {
border-color: var(--color-accent);
}
.tv-shell-page .fct-update-payment-method-radio .el-radio__input.is-checked+.el-radio__label {
color: var(--color-ink);
}
/* update payment method form heading */
.tv-shell-page .fct-update-payment-method-form .form-heading {
color: var(--color-ink);
}
/* transaction list rows; standalone .transaction-lists li:hover hardcodes background-color:rgb(245 */
.tv-shell-page .fct-plain-order-box .fct-single-order-body .transaction-lists li {
color: var(--color-ink-secondary);
}
.tv-shell-page .transaction-lists li:hover {
background-color: var(--color-surface-alt);
}
/* single download row text */
.tv-shell-page .fct-single-download-item {
color: var(--color-ink);
}
/* order summary header action; sibling .tr rows and .fct-customer-tax-breakdown-heading hardcode t */
.tv-shell-page .fct-order-summary-wrap .fct-order-summary-header-action,
.tv-shell-page .fct-order-summary-wrap .fct-order-summary-body .fct-order-summary-order-calculation .tr,
.tv-shell-page .fct-order-summary-wrap .fct-order-summary-body .fct-order-summary-order-calculation .tr.fct-customer-tax-breakdown-heading {
color: var(--color-ink-secondary);
}
/* tax breakdown box inside order summary; standalone .fct-customer-tax-box rule repeats the same b */
.tv-shell-page .fct-order-summary-wrap .fct-order-summary-body .fct-order-summary-order-calculation .fct-customer-tax-box,
.tv-shell-page .fct-customer-tax-box {
background-color: var(--color-surface-alt);
}
.tv-shell-page .fct-customer-tax-box .tr,
.tv-shell-page .fct-customer-tax-box .fct-customer-tax-breakdown-heading {
color: var(--color-ink-secondary);
}
/* plain link button; :hover hardcodes color:rgb(47 52 72 / ...) */
.tv-shell-page .simple-link-btn {
color: var(--color-ink-secondary);
}
.tv-shell-page .simple-link-btn:hover {
color: var(--color-ink);
}
/* underlined link buttons; :hover and .el-button.is-text.underline-link-button:hover hardcode colo */
.tv-shell-page .underline-link-button {
color: var(--color-ink)!important;
}
.tv-shell-page .underline-link-button:hover,
.tv-shell-page .el-button.is-text.underline-link-button:hover {
color: var(--color-ink-secondary)!important;
}
/* empty-state icon circle; sibling h4 hardcodes color:rgb(47 52 72 / ...), p hardcodes color:rgb(8 */
.tv-shell-page .fct-customer-dashboard-empty-state .fct-empty-icon-box {
background-color: var(--color-surface-alt);
}
.tv-shell-page .fct-customer-dashboard-empty-state h4 {
color: var(--color-ink);
}
.tv-shell-page .fct-customer-dashboard-empty-state p {
color: var(--color-ink-secondary);
}
/* card-style tabs active-edge mask (right twin hardcodes border-left:1px solid #fff; border-card t */
.tv-shell-page .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active {
border-right: 1px solid var(--color-surface);
}
.tv-shell-page .el-tabs--right.el-tabs--card .el-tabs__item.is-right.is-active {
border-left: 1px solid var(--color-surface);
}
.tv-shell-page .el-tabs--left.el-tabs--border-card .el-tabs__item.is-left.is-active,
.tv-shell-page .el-tabs--right.el-tabs--border-card .el-tabs__item.is-right.is-active {
border-color: var(--color-line) transparent;
}
/* date picker shortcut active background */
.tv-shell-page .el-picker-panel__shortcut.active {
background-color: var(--color-accent-muted);
}
/* date-range picker inner time panel */
.tv-shell-page .el-date-range-picker__time-picker-wrap .el-picker-panel {
background: var(--color-surface);
}
/* ---------------------------------------------------------------
Customer profile — chrome
---------------------------------------------------------------
The sidebar collapse toggle, compact-mode tooltips, mobile nav, page
titles, and the Tailwind text utilities the profile app leans on. */
/* sidebar collapse toggle — the small chevron button on the dashboard sidebar edge (confirmed from */
.tv-shell-page .fct-nav-compact-toggle-wrap button {
background-color: var(--color-surface);
border-color: var(--color-line-subtle);
color: var(--color-ink);
}
/* nav-item label tooltip shown on hover when the sidebar is in compact mode (confirmed from prior */
.tv-shell-page .fct-customer-navs .fct-customer-nav-tooltip,
.tv-shell-page .fct-customer-navs .fct-customer-nav-tooltip:before {
background-color: var(--color-surface);
border-color: var(--color-line-subtle);
}
/* dashboard page heading (e.g. "Purchase History") — near-black #2F3448 text, invisible on a dark */
.tv-shell-page .fct-customer-page-title h1 {
color: var(--color-ink);
}
/* mobile hamburger nav toggle button background (light gray #F5F6F7) */
.tv-shell-page #fct-customer-menu-container #fct-customer-menu-toggle,
.tv-shell-page #fct-customer-menu-container #fct-customer-menu-toggle:focus,
.tv-shell-page #fct-customer-menu-toggle:hover,
.tv-shell-page #fct-customer-menu-toggle:focus {
background-color: var(--color-surface-alt);
}
/* hamburger icon strokes (currentColor) — near-black, invisible on dark */
.tv-shell-page #fct-customer-menu-toggle svg {
color: var(--color-ink);
}
/* mobile nav dropdown popover panel (confirmed from prior grep) — rule lives inside @media (max-wi */
@media (max-width: 806px) {
.tv-shell-page #fct-customer-menu-holder {
background-color: var(--color-surface);
border-color: var(--color-line-subtle);
}
}
/* Tailwind border-color utility (#D6DAE1) used on profile cards/boxes — reads as a bright line on */
.tv-shell-page .fluent-cart-customer-profile-app .border-gray-outline {
border-color: var(--color-line-subtle);
}
/* primary text utility (#253241 near-black) — invisible on dark */
.tv-shell-page .fluent-cart-customer-profile-app .text-primary-500 {
color: var(--color-ink);
}
/* system-dark text utility (#2F3448 near-black) — invisible on dark */
.tv-shell-page .fluent-cart-customer-profile-app .text-system-dark {
color: var(--color-ink);
}
/* secondary text utility (#565865 dark gray) — poor contrast on dark */
.tv-shell-page .fluent-cart-customer-profile-app .text-system-mid {
color: var(--color-ink-secondary);
}
/* gray-800 text utility (#758195) — mid gray tuned for light surfaces, marginal (~4:1) on dark */
.tv-shell-page .fluent-cart-customer-profile-app .text-gray-800 {
color: var(--color-ink-secondary);
}
/* gray-700 muted text utility (#808B9C) */
.tv-shell-page .fluent-cart-customer-profile-app .text-gray-700 {
color: var(--color-ink-muted);
}
/* gray-600 muted text utility (#8E99AA) */
.tv-shell-page .fluent-cart-customer-profile-app .text-gray-600 {
color: var(--color-ink-muted);
}
/* system-light muted text utility (#9D9FAC) */
.tv-shell-page .fluent-cart-customer-profile-app .text-system-light {
color: var(--color-ink-muted);
}
/* destructive/error text utility (#C72F08 dark red) — ~3:1 on dark surfaces, tuned for light */
.tv-shell-page .fluent-cart-customer-profile-app .text-red-600 {
color: rgb(240 68 56);
}
/* license-key copy button (near-white #F9FAFB bg) in the Licenses section */
.tv-shell-page .fluent-cart-customer-profile-app .fct-license-key-wrap .fct-copy-wrap .el-button {
background-color: var(--color-surface-alt)!important;
color: var(--color-ink-secondary)!important;
}
/* divider under the avatar/name block at the top of the dashboard sidebar (border-bottom, #EAECF0) */
.tv-shell-page .fct-customer-dashboard-customer-info {
border-color: var(--color-line-subtle);
}
/* Stripe card-field wrapper in the update-payment-method dialog (referenced by .update-payment-det */
body.tv-shell-page .stripe-element {
background: var(--color-bg);
border-color: var(--color-line);
}
/* info notice (payment rate-limit) inside the payment dialog — light blue box */
body.tv-shell-page .rate-limit-notice {
background-color: var(--color-surface-alt);
border-color: var(--color-line);
}
/* rate-limit notice body text — dark blue, tuned for the light-blue box */
body.tv-shell-page .rate-limit-text {
color: var(--color-ink-secondary);
}
/* warning variant of the rate-limit notice — light amber box */
body.tv-shell-page .rate-limit-notice-warning {
background-color: var(--color-accent-muted);
border-color: var(--color-accent);
}
/* warning notice text — dark amber, tuned for the light amber box */
body.tv-shell-page .rate-limit-notice-warning .rate-limit-text {
color: var(--color-accent-ink);
}
/* direct-checkout embeddable widget card (block/shortcode) */
body.tv-shell-page .fluent-cart-direct-checkout-app {
background: var(--color-surface);
border-color: var(--color-line-subtle);
}
/* widget title underline */
body.tv-shell-page .fluent-cart-direct-checkout-app-title {
border-bottom-color: var(--color-line-subtle);
}
/* product-id muted label — dark gray, poor on dark */
body.tv-shell-page .fluent-cart-direct-checkout-app-product-id {
color: var(--color-ink-secondary);
}
/* widget reset/clear button — light bg with near-black text */
body.tv-shell-page .fluent-cart-direct-checkout-app-reset-button {
background: var(--color-surface-alt);
border-color: var(--color-line-subtle);
color: var(--color-ink);
}
/* add-to-cart embeddable widget card — exact twin of the Start2 direct-checkout widget */
body.tv-shell-page .fluent-cart-add-to-cart-app {
background: var(--color-surface);
border-color: var(--color-line-subtle);
}
/* widget title underline */
body.tv-shell-page .fluent-cart-add-to-cart-app-title {
border-bottom-color: var(--color-line-subtle);
}
/* product-id muted label */
body.tv-shell-page .fluent-cart-add-to-cart-app-product-id {
color: var(--color-ink-secondary);
}
/* widget reset/clear button */
body.tv-shell-page .fluent-cart-add-to-cart-app-reset-button {
background: var(--color-surface-alt);
border-color: var(--color-line-subtle);
color: var(--color-ink);
}
/* WordPress-admin-style front-end notice banner (e.g. test-mode/store-manager notices); style6.css */
.tv-shell-page .fct-admin-notice {
background: var(--color-surface-alt);
color: var(--color-ink);
}
/* ---------------------------------------------------------------
Shop archive — filters, sorting, variation picker, quick view
---------------------------------------------------------------
The Vue shop app: price slider, sort dropdown, swatches, the two
quick-view modal variants, loaders and empty states. */
/* loading spinner track ring (Tailwind utility, pairs with .fill-blue-600 arc) */
.tv-shell-page .fct-products-wrapper .text-gray-200 {
color: var(--color-line);
}
/* product-card skeleton shimmer overlay while cards load */
.tv-shell-page .fct-products-wrapper .fluent-cart-shop-app-product-skeleton-loader {
background-image: linear-gradient(90deg,var(--color-surface-alt) 25%,var(--color-surface),var(--color-surface-alt) 75%);
}
/* infinite-scroll three-dot loader (dots are currentColor box-shadows via @keyframes bblFadInOut) */
.tv-shell-page .fct-products-wrapper .scroll-loader {
color: var(--color-ink);
}
/* reset-filters icon button (filter sidebar and no-results panel) */
.tv-shell-page .fct-shop-reset-filter-button,
.tv-shell-page .fct-shop-reset-filter-button:hover {
color: var(--color-ink);
}
/* 'no products found' empty-state panel */
.tv-shell-page .fluent-cart-shop-app-no-products {
background-color: var(--color-surface);
}
/* mobile slide-in filter drawer panel */
.tv-shell-page .fct-shop-responsive-filter-container {
background-color: var(--color-surface);
}
/* mobile filter drawer close (X) button icon */
.tv-shell-page .fct-shop-responsive-filter-container .fct-shop-responsive-filter-close-button {
color: var(--color-ink-secondary);
}
/* mobile drawer close button hover bg */
.tv-shell-page .fct-shop-responsive-filter-container .fct-shop-responsive-filter-close-button:hover {
background-color: var(--color-surface-alt);
}
/* quick-view product modal sheet (shop grid variant) — one of the two white modal shells the owner */
.tv-shell-page .fluent-cart-shop-app-single-product-modal-body {
background-color: var(--color-surface);
}
/* quick-view modal scrollbar thumb */
.tv-shell-page .fluent-cart-shop-app-single-product-modal-body::-webkit-scrollbar-thumb {
background-color: var(--color-line);
}
/* quick-view modal close button hover bg */
.tv-shell-page .fluent-cart-shop-app-single-product-modal-close:hover {
background-color: var(--color-surface-alt);
}
/* price-range slider handle drop shadow (acts as the handle's edge on white) */
.tv-shell-page .fct-shop-range-slider .noUi-handle {
--tw-shadow: 0 3px 6px 0px var(--color-line) !important;
}
/* 'Sort by' dropdown panel border */
.tv-shell-page .fct-shop-sorting-dropdown {
border-color: var(--color-line-subtle);
background-color: var(--color-surface);
}
/* 'Sort by' toggle button text/icon on the page bg */
.tv-shell-page .fct-shop-sorting-container .fct-sorting-toggle {
color: var(--color-ink);
}
/* sort option radio ring (unselected) */
.tv-shell-page .fct-shop-sorting .fct-sorting-radio {
border-color: var(--color-line);
}
/* sort radio inner dot (shown when selected, over the dark fill) */
.tv-shell-page .fct-shop-sorting .fct-sorting-radio:after {
background-color: var(--color-surface);
}
/* sort radio ring on row hover (dark navy) */
.tv-shell-page .fct-shop-sorting .fct-shop-sorting-item:hover .fct-sorting-radio {
border-color: var(--color-ink);
}
/* selected sort radio ring (dark navy, invisible on dark) */
.tv-shell-page .fct-shop-sorting .fct-shop-sorting-item.selected .fct-sorting-radio {
border-color: var(--color-ink);
background-color: var(--color-ink);
}
/* sort option label text */
.tv-shell-page .fct-shop-sorting .fct-shop-sorting-item label {
color: var(--color-ink);
}
/* sort option label hover text */
.tv-shell-page .fct-shop-sorting .fct-shop-sorting-item label:hover {
color: var(--color-ink);
}
/* currency sign / icon beside the price-range readouts */
.tv-shell-page .fluent-cart-shop-app-filter-form-range-input-group .fluent-cart-shop-app-filter-form-icon svg {
color: var(--color-ink);
}
/* min/max price readout inputs above the slider */
.tv-shell-page .fc_price_range_input {
color: var(--color-ink)!important;
}
/* product-grid loading spinner rings (dark navy, near-invisible on dark) */
.tv-shell-page .fluent-cart-product-spinner:after,
.tv-shell-page .fluent-cart-product-spinner:before {
border-color: var(--color-ink);
border-top-color: transparent;
border-right-color: transparent;
}
/* 'Out of stock' disabled button on product cards */
.tv-shell-page .fct-product-card button.out-of-stock {
background-color: var(--color-surface);
color: var(--color-ink-muted);
}
/* 'Out of stock' state of the view button */
.tv-shell-page .fct-product-view-button.out-of-stock {
background-color: var(--color-surface);
color: var(--color-ink-muted);
}
/* quick-view modal close (X) circle */
.tv-shell-page .fct-product-modal-close {
background-color: var(--color-surface);
}
/* modal close hover bg */
.tv-shell-page .fct-product-modal-close:hover,
.tv-shell-page .fct-product-modal-close.hovered {
background-color: var(--color-surface-alt);
}
/* quick-view/variation modal sheet (similar-product variant) — the other white modal shell */
.tv-shell-page .fct-product-modal-body {
background-color: var(--color-surface);
}
/* modal scrollbar thumb */
.tv-shell-page .fct-product-modal-body::-webkit-scrollbar-thumb {
background-color: var(--color-line);
}
/* Tailwind border utility used in the variation picker */
.tv-shell-page .border-gray-divider {
border-color: var(--color-line-subtle);
}
/* Tailwind border utility (input-like outlines) */
.tv-shell-page .border-gray-outline {
border-color: var(--color-line);
}
/* Tailwind dark-navy emphasis border (selected states) */
.tv-shell-page .border-primary-500 {
border-color: var(--color-ink);
}
/* Tailwind light-blue selected-state bg utility */
.tv-shell-page .bg-blue-50 {
background-color: var(--color-accent-muted);
}
/* Tailwind light-gray bg utility */
.tv-shell-page .bg-gray-50 {
background-color: var(--color-surface-alt);
}
/* Tailwind dark-ink text utility */
.tv-shell-page .text-system-dark {
color: var(--color-ink);
}
/* hover variant of the dark emphasis border utility */
.tv-shell-page .hover\:border-primary-500:hover {
border-color: var(--color-ink);
}
/* hover variant of the dark-ink text utility */
.tv-shell-page .hover\:text-system-dark:hover {
color: var(--color-ink);
}
/* focus variant of the dark-ink text utility */
.tv-shell-page .focus\:text-system-dark:focus {
color: var(--color-ink);
}
/* variation attribute heading ('Size', 'Color') */
.tv-shell-page .fct-attribute-label {
color: var(--color-ink);
}
/* variation option chip border */
.tv-shell-page .fct-attribute-selector .fct-swatch-item {
border-color: var(--color-line);
background-color: var(--color-surface);
color: var(--color-ink);
}
/* chip hover text */
.tv-shell-page .fct-attribute-selector .fct-swatch-item:hover:not(.disabled):not(.selected) {
color: var(--color-ink);
}
/* diagonal strike-through slash on disabled/unavailable swatch */
.tv-shell-page .fct-attribute-selector .fct-swatch-item.disabled:after {
background-color: var(--color-ink-muted);
}
/* color/image swatch pill background */
.tv-shell-page .fct-attribute-selector .fct-swatch-color,
.tv-shell-page .fct-attribute-selector .fct-swatch-image {
background-color: var(--color-surface-alt);
}
/* swatch pill hover border (dark navy) */
.tv-shell-page .fct-attribute-selector .fct-swatch-color:hover,
.tv-shell-page .fct-attribute-selector .fct-swatch-image:hover {
border-color: var(--color-ink);
color: var(--color-ink);
}
/* swatch pill focus text */
.tv-shell-page .fct-attribute-selector .fct-swatch-color:focus,
.tv-shell-page .fct-attribute-selector .fct-swatch-image:focus {
color: var(--color-ink);
}
/* swatch pill hover background */
.tv-shell-page .fct-attribute-selector .fct-swatch-color:hover:not(.selected):not(.disabled),
.tv-shell-page .fct-attribute-selector .fct-swatch-image:hover:not(.selected):not(.disabled) {
background-color: var(--color-surface-alt);
}
/* selected swatch pill border */
.tv-shell-page .fct-attribute-selector .fct-swatch-color.selected,
.tv-shell-page .fct-attribute-selector .fct-swatch-image.selected {
border-color: var(--color-ink);
background-color: var(--color-surface);
}
/* color-swatch dot outline */
.tv-shell-page .fct-swatch-dot {
border-color: var(--color-line);
}
/* selected value suffix in attribute heading ('Color: Red') */
.tv-shell-page .fct-selected-term-title {
color: var(--color-ink-secondary);
}
/* image-only swatch chip background */
.tv-shell-page .fct-attribute-selector .fct-swatch-image-only {
background-color: var(--color-surface);
}
/* image-only swatch hover background */
.tv-shell-page .fct-attribute-selector .fct-swatch-image-only:hover:not(.selected):not(.disabled) {
background-color: var(--color-surface);
}
/* backplate behind the swatch thumbnail image (object-fit:contain) */
.tv-shell-page .fct-attribute-selector .fct-swatch-image-only .fct-swatch-thumb {
background-color: var(--color-surface);
}
/* text-option pill background (e.g. 'S', 'M', 'L') */
.tv-shell-page .fct-attribute-selector .fct-swatch-label {
background-color: var(--color-surface-alt);
color: var(--color-ink-secondary);
}
/* text-option pill hover background */
.tv-shell-page .fct-attribute-selector .fct-swatch-label:hover:not(.selected):not(.disabled) {
background-color: var(--color-surface-alt);
border-color: var(--color-line);
}
/* selected text-option pill border */
.tv-shell-page .fct-attribute-selector .fct-swatch-label.selected {
border-color: var(--color-ink);
background-color: var(--color-surface);
color: var(--color-ink);
}
/* selected pill hover/focus border */
.tv-shell-page .fct-attribute-selector .fct-swatch-label.selected:hover,
.tv-shell-page .fct-attribute-selector .fct-swatch-label.selected:focus,
.tv-shell-page .fct-attribute-selector .fct-swatch-label.selected:focus-visible {
border-color: var(--color-ink);
background-color: var(--color-surface);
color: var(--color-ink);
}
/* variation dropdown trigger border */
.tv-shell-page .fct-custom-select .fct-custom-select__trigger {
border-color: var(--color-line);
background-color: var(--color-bg);
}
/* dropdown trigger hover border (stronger gray) */
.tv-shell-page .fct-custom-select .fct-custom-select__trigger:hover {
border-color: var(--color-ink-muted);
}
/* dropdown trigger selected-value text */
.tv-shell-page .fct-custom-select .fct-custom-select__value {
color: var(--color-ink);
}
/* dropdown caret (CSS triangle) */
.tv-shell-page .fct-custom-select .fct-custom-select__arrow {
border-top-color: var(--color-ink-secondary);
}
/* variation dropdown options panel border */
.tv-shell-page .fct-custom-select .fct-custom-select__options {
border-color: var(--color-line);
background-color: var(--color-surface);
}
/* dropdown option hover background */
.tv-shell-page .fct-custom-select .fct-custom-select__option:hover {
background-color: var(--color-surface-alt);
}
/* selected dropdown option background (light blue) */
.tv-shell-page .fct-custom-select .fct-custom-select__option.selected {
background-color: var(--color-accent-muted);
color: var(--color-accent-ink);
}
/* selected option's swatch labels */
.tv-shell-page .fct-custom-select .fct-custom-select__option.selected .fct-image-label,
.tv-shell-page .fct-custom-select .fct-custom-select__option.selected .fct-color-label {
color: var(--color-accent-ink);
}
/* dropdown option label text */
.tv-shell-page .fct-custom-select .fct-option-label {
color: var(--color-ink);
}
/* color option label in dropdown */
.tv-shell-page .fct-color-option .fct-color-label {
color: var(--color-ink);
}
/* image option thumbnail border in dropdown */
.tv-shell-page .fct-image-option .fct-image-src {
border-color: var(--color-line-subtle);
}
/* image option label in dropdown */
.tv-shell-page .fct-image-option .fct-image-label {
color: var(--color-ink);
}
/* price slider handle knob */
.tv-shell-page .fct-shop-range-slider .noUi-handle {
background: var(--color-surface);
border-color: var(--color-line);
}
/* ---------------------------------------------------------------
Single product, checkout, receipt, login, cart drawer
--------------------------------------------------------------- */
/* gallery 'see more' thumbnail tile + thumb-strip scrollbar */
.tv-shell-page .fct-gallery-see-more-button {
background-color: var(--color-surface-alt);
}
.tv-shell-page .fct-gallery-see-more-button:hover {
background-color: var(--color-surface);
}
.tv-shell-page .fct-gallery-thumb-controls::-webkit-scrollbar-thumb {
background-color: var(--color-line);
}
.tv-shell-page .fct-gallery-thumb-controls::-webkit-scrollbar-thumb:hover {
background-color: var(--color-ink-muted);
}
/* product description/details tab bar (bottom border, active underline, tab labels) */
.tv-shell-page .fct-product-tab-nav {
border-color: var(--color-line-subtle);
}
.tv-shell-page .fct-product-tab-nav .tab-active-bar {
background-color: var(--color-ink);
}
.tv-shell-page .fct-product-tab-nav-item {
color: var(--color-ink-secondary);
}
.tv-shell-page .fct-product-tab-nav-item.active {
color: var(--color-ink);
}
/* stock/SKU '|' divider glyph + gray text literals (compare-at price, payment-type note) */
.tv-shell-page .fct-product-stock~.fct-product-sku:not(.is-hidden):before {
color: var(--color-line);
}
.tv-shell-page .fct-product-variant-item .fct-product-variant-price .fct-product-variant-compare-price {
color: var(--color-ink-secondary);
}
.tv-shell-page .fct-product-payment-type {
color: var(--color-ink-secondary);
}
/* in-stock / out-of-stock status badges (pastel pill backgrounds) */
.tv-shell-page .fct-product-stock .fct_status_badge_in-stock,
.tv-shell-page .fct-product-stock .fct_status_badge_out-of-stock {
background-color: color-mix(in srgb, currentColor 14%, var(--color-surface));
}
/* selected variant card focus ring (white gap ring used as border) */
.tv-shell-page .fct-product-variant-item.selected {
box-shadow: 0 0 0 2px var(--color-bg),0 0 0 4px #476cff1a;
}
/* light-gray panels and tertiary buttons (browser notify chip, address cancel btn, coupon apply bt */
.tv-shell-page .fct-order-processing .fct-browser-notify {
background: var(--color-surface-alt);
color: var(--color-ink);
}
.tv-shell-page .fct_address_modal button.fct_address_cancel_btn {
background-color: var(--color-surface-alt);
color: var(--color-ink-secondary);
}
.tv-shell-page .fct_address_modal button.fct_address_cancel_btn:hover {
background-color: var(--color-surface);
}
.tv-shell-page .fct_coupon_field button {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
.tv-shell-page .fct_coupon_field button:hover {
background-color: var(--color-surface);
}
.tv-shell-page .fct_tax_input_wrapper button {
background-color: var(--color-surface-alt)!important;
color: var(--color-ink)!important;
}
.tv-shell-page .fct_tax_input_wrapper button:hover {
background-color: var(--color-surface)!important;
}
.tv-shell-page .fct_tax_summary_box {
background: var(--color-surface-alt);
}
/* hardcoded-white surfaces: tax '?' hint buttons, tax tooltips, address-modal close button, VAT in */
.tv-shell-page .fct_line_item .fct_item_tax_hint_button,
.tv-shell-page .fct_tax_summary_box .fct_item_tax_hint_button {
background-color: var(--color-surface);
}
.tv-shell-page .fct_line_item .fct_item_tax_tooltip,
.tv-shell-page .fct_tax_summary_box .fct_item_tax_tooltip {
background-color: var(--color-surface);
}
.tv-shell-page .fct_address_modal_close_btn {
background-color: var(--color-surface);
color: var(--color-ink);
}
.tv-shell-page .fct_address_modal_close_btn:hover {
background-color: var(--color-surface-alt);
color: var(--color-ink);
}
.tv-shell-page .fct_tax_field input[type=text]:focus {
background-color: var(--color-bg);
}
.tv-shell-page .fct_shipping_methods.fct-loading .fct_shipping_methods_list:after {
background-color: var(--color-surface);
}
/* hardcoded ink/gray text literals (empty states, tooltip icon, shipping descriptions, tax loading */
.tv-shell-page .fct-empty-cart-content,
.tv-shell-page .fct-empty-state a,
.tv-shell-page .fluent-cart-checkout-page-empty-cart .fluent-cart-checkout-page-empty-cart-text,
.tv-shell-page .fct_payment_method input[name=_fct_pay_method]:checked~label {
color: var(--color-ink);
}
.tv-shell-page .fct-empty-state,
.tv-shell-page .fct_shipping_methods_item .fct_shipping_method_package_info,
.tv-shell-page .fct_shipping_methods_item .fct_shipping_method_description,
.tv-shell-page .fct_tax_loading,
.tv-shell-page .toastify .toast-close {
color: var(--color-ink-secondary);
}
.tv-shell-page .fct-tooltip svg,
.tv-shell-page .fct_coupon_applied_item .fct_coupon_price {
color: var(--color-ink-muted);
}
.tv-shell-page .toastify .toast-close:hover {
background-color: var(--color-surface-alt);
}
/* warning alert banner (pastel orange) */
.tv-shell-page .fct-alert {
background-color: color-mix(in srgb, #f79009 10%, var(--color-surface));
border-color: color-mix(in srgb, #f79009 30%, var(--color-surface));
color: var(--color-ink);
}
/* select dropdown chevron icon (dark #2F3448 baked into data URI) */
@media (prefers-color-scheme: dark) {
.tv-shell-page .fct_checkout select,
.tv-shell-page .fct_address_modal.show select {
background-image: url('data:image/svg+xml;utf8,