/**handles:quickcommerce-cart-view-style**/ .qcom-error-boundary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; text-align: center; } .qcom-error-boundary__message { margin: 0; font-size: 0.875rem; color: hsl(var(--qcom-muted-fg)); } .qcom-error-boundary__retry { padding: 0.375rem 1rem; font-size: 0.8125rem; font-weight: 500; color: #fff; background-color: hsl(var(--qcom-primary)); border: none; border-radius: var(--qcom-radius-md); cursor: pointer; transition: opacity 0.15s ease; } .qcom-error-boundary__retry:hover { opacity: 0.9; } .qcom-error-boundary__retry:focus-visible { outline: 2px solid hsl(var(--qcom-primary)); outline-offset: 2px; } /* ========================================================================== Toast (qcom-toast) BEM CSS for the Toast component backed by Radix ToastPrimitives. ========================================================================== */ /* -- Animations ---------------------------------------------------------- */ @keyframes qcom-toast-slide-in-from-top { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes qcom-toast-slide-in-from-bottom { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes qcom-toast-fade-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* -- Viewport ------------------------------------------------------------ */ .qcom-toast__viewport { position: fixed; bottom: 1em; right: 1em; z-index: var(--qcom-toast-viewport-z, 99999); display: flex; max-height: 100vh; min-width: 200px; max-width: var(--qcom-toast-max-width, 420px); box-sizing: border-box; flex-direction: column; padding: 1rem; /* Re-scope design tokens — this portal renders to where the WP theme overrides :root CSS variables. */ --qcom-bg: 0 0% 100%; --qcom-fg: 222.2 84% 4.9%; --qcom-border: 214.3 31.8% 91.4%; --qcom-destructive: 0 84.2% 60.2%; --qcom-destructive-fg: 210 40% 98%; --qcom-success: 142 76% 36%; --qcom-success-bg: #f0fdf4; --qcom-success-border: #86efac; --qcom-success-text: #14532d; --qcom-warning: 38 92% 50%; --qcom-warning-bg: #fffbeb; --qcom-warning-border: #fde68a; --qcom-warning-text: #92400e; --qcom-info-bg: #eff6ff; --qcom-info-border: #7dd3fc; --qcom-info-text: #0c4a6e; --qcom-ring: 222.2 84% 4.9%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 0.875rem !important; line-height: 1.5; } /* -- Toast root ---------------------------------------------------------- */ .qcom-toast { pointer-events: auto; position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden; border-radius: var(--qcom-toast-radius, var(--qcom-radius-md)); border: 1px solid var(--qcom-toast-border-color, hsl(var(--qcom-border))); padding: 1rem; padding-right: 2.5rem; box-shadow: var(--qcom-toast-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)); transition: transform 150ms ease, opacity 150ms ease; } /* Swipe handling via Radix CSS custom properties */ .qcom-toast[data-swipe="cancel"] { transform: translateX(0); } .qcom-toast[data-swipe="move"] { transform: translateX(var(--radix-toast-swipe-move-x)); transition: none; } .qcom-toast[data-swipe="end"] { animation: qcom-toast-fade-out-right 150ms ease-out forwards; --qcom-toast-end-x: var(--radix-toast-swipe-end-x); } /* Open / close animations */ .qcom-toast[data-state="open"] { animation: qcom-toast-slide-in-from-bottom 150ms ease-out; } .qcom-toast[data-state="closed"] { animation: qcom-toast-fade-out-right 200ms ease-in forwards; } /* -- Variant: default ---------------------------------------------------- */ .qcom-toast--default { background-color: var(--qcom-toast-default-bg, hsl(var(--qcom-bg))); color: var(--qcom-toast-default-color, hsl(var(--qcom-fg))); } /* -- Variant: destructive ------------------------------------------------ */ .qcom-toast--destructive { border-color: var(--qcom-toast-destructive-border, hsl(var(--qcom-destructive))); background-color: var(--qcom-toast-destructive-bg, hsl(var(--qcom-destructive))); color: var(--qcom-toast-destructive-color, hsl(var(--qcom-destructive-fg))); } /* -- Variant: success ---------------------------------------------------- */ .qcom-toast--success { border-color: var(--qcom-success-border); background-color: var(--qcom-success-bg); color: var(--qcom-success-text); } /* -- Variant: warning ---------------------------------------------------- */ .qcom-toast--warning { border-color: var(--qcom-warning-border); background-color: var(--qcom-warning-bg); color: var(--qcom-warning-text); } /* -- Variant: info ------------------------------------------------------- */ .qcom-toast--info { border-color: var(--qcom-info-border); background-color: var(--qcom-info-bg); color: var(--qcom-info-text); } /* -- Close button -------------------------------------------------------- */ .qcom-toast__close { position: absolute; right: 0.5rem; top: 0.5rem; border-radius: var(--qcom-radius-md); padding: 0.25rem; color: var(--qcom-toast-close-color, hsl(var(--qcom-fg) / 0.5)); opacity: 0; transition: opacity 150ms ease, color 150ms ease; background: transparent; border: none; cursor: pointer; line-height: 1; } .qcom-toast__close:hover { color: var(--qcom-toast-close-hover-color, hsl(var(--qcom-fg))); } .qcom-toast__close:focus { opacity: 1; outline: none; box-shadow: 0 0 0 2px var(--qcom-ring-color, hsl(var(--qcom-ring))); } /* Show close button when toast is hovered */ .qcom-toast:hover .qcom-toast__close { opacity: 1; } /* Destructive close-button overrides */ .qcom-toast--destructive .qcom-toast__close { color: var(--qcom-toast-destructive-close-color, rgb(252, 165, 165)); /* red-300 */ } .qcom-toast--destructive .qcom-toast__close:hover { color: var(--qcom-toast-destructive-close-hover, rgb(254, 242, 242)); /* red-50 */ } .qcom-toast--destructive .qcom-toast__close:focus { box-shadow: 0 0 0 2px var(--qcom-toast-destructive-ring, rgb(248, 113, 113)); /* red-400 */ } .qcom-toast__close-icon { width: 1rem; height: 1rem; display: block; } /* -- Action -------------------------------------------------------------- */ .qcom-toast__action { display: inline-flex; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--qcom-radius-md); border: 1px solid var(--qcom-toast-action-border, hsl(var(--qcom-border))); background: transparent; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; font-weight: 500; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; cursor: pointer; } .qcom-toast__action:hover { background-color: var(--qcom-toast-action-hover-bg, hsl(var(--qcom-secondary))); } .qcom-toast__action:focus { outline: none; box-shadow: 0 0 0 2px var(--qcom-ring-color, hsl(var(--qcom-ring))), 0 0 0 4px var(--qcom-ring-offset-color, hsl(var(--qcom-bg))); } .qcom-toast__action:disabled { pointer-events: none; opacity: 0.5; } /* Destructive action overrides */ .qcom-toast--destructive .qcom-toast__action { border-color: rgba(hsl(var(--qcom-muted)), 0.4); } .qcom-toast--destructive .qcom-toast__action:hover { border-color: rgba(hsl(var(--qcom-destructive)), 0.3); background-color: hsl(var(--qcom-destructive)); color: hsl(var(--qcom-destructive-fg)); } .qcom-toast--destructive .qcom-toast__action:focus { box-shadow: 0 0 0 2px hsl(var(--qcom-destructive)); } /* -- Title --------------------------------------------------------------- */ .qcom-toast__title { font-size: 0.875rem; font-weight: 600; } /* -- Description --------------------------------------------------------- */ .qcom-toast__description { font-size: 0.875rem; opacity: 0.9; } /* -- Toaster grid (used by Toaster component) ---------------------------- */ .qcom-toast__text-group { display: grid; gap: 0.25rem; } /* ========================================================================== Drawer (qcom-drawer) BEM CSS for the Drawer component backed by Radix DialogPrimitive. ========================================================================== */ /* -- Animations ---------------------------------------------------------- */ @keyframes qcom-drawer-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes qcom-drawer-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes qcom-drawer-slide-in-from-top { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes qcom-drawer-slide-out-to-top { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes qcom-drawer-slide-in-from-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes qcom-drawer-slide-out-to-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes qcom-drawer-slide-in-from-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes qcom-drawer-slide-out-to-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes qcom-drawer-slide-in-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes qcom-drawer-slide-out-to-right { from { transform: translateX(0); } to { transform: translateX(100%); } } /* -- Overlay ------------------------------------------------------------- */ .qcom-drawer__overlay { position: fixed; inset: 0; z-index: var(--qcom-drawer-overlay-z, 9999); } .qcom-drawer__overlay[data-state="open"] { animation: qcom-drawer-fade-in 150ms ease-out; } .qcom-drawer__overlay[data-state="closed"] { animation: qcom-drawer-fade-out 150ms ease-in; } /* -- Content (shared) ---------------------------------------------------- */ .qcom-drawer__content { position: fixed; z-index: var(--qcom-drawer-content-z, 9999); background-color: var(--qcom-drawer-bg, hsl(var(--qcom-bg))); box-shadow: var(--qcom-drawer-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)); display: flex; flex-direction: column; transition: transform ease-in-out; font-size: 16px; line-height: 1.5; } .qcom-drawer__content[data-state="open"] { animation-duration: var(--qcom-drawer-open-duration, 500ms); animation-timing-function: ease-in-out; } .qcom-drawer__content[data-state="closed"] { animation-duration: var(--qcom-drawer-close-duration, 300ms); animation-timing-function: ease-in-out; } /* -- Side: top ----------------------------------------------------------- */ .qcom-drawer__content--top { inset-inline: 0; top: 0; border-bottom: 1px solid var(--qcom-drawer-border-color, hsl(var(--qcom-border))); } .qcom-drawer__content--top[data-state="open"] { animation-name: qcom-drawer-slide-in-from-top; } .qcom-drawer__content--top[data-state="closed"] { animation-name: qcom-drawer-slide-out-to-top; } /* -- Side: bottom -------------------------------------------------------- */ .qcom-drawer__content--bottom { inset-inline: 0; bottom: 0; border-top: 1px solid var(--qcom-drawer-border-color, hsl(var(--qcom-border))); } .qcom-drawer__content--bottom[data-state="open"] { animation-name: qcom-drawer-slide-in-from-bottom; } .qcom-drawer__content--bottom[data-state="closed"] { animation-name: qcom-drawer-slide-out-to-bottom; } /* -- Side: left ---------------------------------------------------------- */ .qcom-drawer__content--left { inset-block: 0; left: 0; height: 100%; width: 100%; border-right: 1px solid var(--qcom-drawer-border-color, hsl(var(--qcom-border))); } .qcom-drawer__content--left[data-state="open"] { animation-name: qcom-drawer-slide-in-from-left; } .qcom-drawer__content--left[data-state="closed"] { animation-name: qcom-drawer-slide-out-to-left; } @media (min-width: 640px) { .qcom-drawer__content--left { width: 640px; max-width: 640px; } } /* -- Side: right --------------------------------------------------------- */ .qcom-drawer__content--right { inset-block: 0; right: 0; height: 100%; width: 100%; border-left: 1px solid var(--qcom-drawer-border-color, hsl(var(--qcom-border))); } .qcom-drawer__content--right[data-state="open"] { animation-name: qcom-drawer-slide-in-from-right; } .qcom-drawer__content--right[data-state="closed"] { animation-name: qcom-drawer-slide-out-to-right; } @media (min-width: 640px) { .qcom-drawer__content--right { width: 640px; max-width: 640px; } } /* -- Scrollable body ----------------------------------------------------- */ .qcom-drawer__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } /* -- Close button -------------------------------------------------------- */ .qcom-drawer__close { position: absolute; right: 1rem; top: 1rem; border-radius: 0.125rem; opacity: 0.7; transition: opacity 150ms ease; background: transparent; border: none; padding: 0; cursor: pointer; color: inherit; line-height: 1; } .qcom-drawer__close:hover { opacity: 1; } .qcom-drawer__close:focus { outline: none; box-shadow: 0 0 0 2px var(--qcom-ring-color, hsl(var(--qcom-ring))), 0 0 0 4px var(--qcom-ring-offset-color, hsl(var(--qcom-bg))); } .qcom-drawer__close:disabled { pointer-events: none; } .qcom-drawer__close[data-state="open"] { background-color: var(--qcom-drawer-close-open-bg, hsl(var(--qcom-secondary))); } /* -- Header -------------------------------------------------------------- */ .qcom-drawer__header { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; text-align: center; } @media (min-width: 640px) { .qcom-drawer__header { text-align: left; } } /* -- Footer -------------------------------------------------------------- */ .qcom-drawer__footer { border-top: 1px solid var(--qcom-drawer-border-color, hsl(var(--qcom-border))); background-color: var(--qcom-drawer-bg, hsl(var(--qcom-bg))); padding: 1rem; display: flex; } @media (min-width: 640px) { .qcom-drawer__footer { flex-direction: row; justify-content: flex-end; gap: 0.5rem; } } /* -- Title --------------------------------------------------------------- */ .qcom-drawer__title { font-size: var(--qcom-drawer-title-size, 1.125rem); font-weight: 800; color: var(--qcom-drawer-title-color, hsl(var(--qcom-fg))); } /* -- Description --------------------------------------------------------- */ .qcom-drawer__description { font-size: var(--qcom-drawer-description-size, 0.875rem); color: var(--qcom-drawer-description-color, hsl(var(--qcom-muted-fg))); padding-left: 1rem; padding-right: 1rem; } /* -- Screen-reader only -------------------------------------------------- */ .qcom-drawer__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* button.css -- BEM styles for qcom-button */ /* Base */ .qcom-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font-size: 0.875rem; font-weight: 500; border-radius: var(--qcom-radius-md); transition: colors 0.15s; cursor: pointer; border: none; } .qcom-button:focus-visible { outline: 2px solid hsl(var(--qcom-primary)); outline-offset: 2px; } .qcom-button:disabled { pointer-events: none; opacity: 0.5; } .qcom-button svg { pointer-events: none; width: 1rem; height: 1rem; flex-shrink: 0; } /* Variants */ .qcom-button--default { background: hsl(var(--qcom-primary)); color: hsl(var(--qcom-primary-fg)); } .qcom-button--default:hover { opacity: 0.9; } .qcom-button--destructive { background: hsl(var(--qcom-destructive)); color: hsl(var(--qcom-destructive-fg)); } .qcom-button--destructive:hover { opacity: 0.9; } .qcom-button--outline { border: 1px solid hsl(var(--qcom-border)); background: transparent; } .qcom-button--outline:hover { background: hsl(var(--qcom-accent)); } .qcom-button--secondary { background: hsl(var(--qcom-secondary)); color: hsl(var(--qcom-secondary-fg)); } .qcom-button--secondary:hover { opacity: 0.8; } .qcom-button--ghost { background: transparent; } .qcom-button--ghost:hover { background: hsl(var(--qcom-accent)); } .qcom-button--link { background: transparent; color: hsl(var(--qcom-primary)); text-decoration-underline-offset: 4px; } .qcom-button--link:hover { text-decoration: underline; } /* Sizes */ .qcom-button--size-default { height: 2.5rem; padding: 0.5rem 1rem; } .qcom-button--size-sm { height: 2.25rem; padding: 0 0.75rem; } .qcom-button--size-lg { height: 2.75rem; padding: 0 2rem; } .qcom-button--size-icon { height: 2.5rem; width: 2.5rem; } .qcom-carousel { position: relative; } .qcom-carousel__viewport { overflow: hidden; } .qcom-carousel__content { display: flex; } .qcom-carousel__content--horizontal { margin-left: -1rem; } .qcom-carousel__content--vertical { margin-top: -1rem; flex-direction: column; } .qcom-carousel__item { min-width: 0; flex-shrink: 0; flex-grow: 0; flex-basis: 100%; } .qcom-carousel__item--horizontal { padding-left: 1rem; } .qcom-carousel__item--vertical { padding-top: 1rem; } .qcom-carousel__button { position: absolute; height: 2rem; width: 2rem; border-radius: 50%; } .qcom-carousel__button--prev-horizontal { left: -3rem; top: 50%; transform: translateY(-50%); } .qcom-carousel__button--next-horizontal { right: -3rem; top: 50%; transform: translateY(-50%); } .qcom-carousel__button--prev-vertical { top: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); } .qcom-carousel__button--next-vertical { bottom: -3rem; left: 50%; transform: translateX(-50%) rotate(90deg); } .qcom-carousel__button-icon { width: 1rem; height: 1rem; } .qcom-carousel__sr-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ── Badge ── qcom-badge ───────────────────────────────────── */ .qcom-badge { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid transparent; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; transition: background-color 0.15s ease; } .qcom-badge--default { background: hsl(var(--qcom-primary)); color: #fff; } .qcom-badge--secondary { background: var(--qcom-badge-secondary-bg, rgba(0, 0, 0, 0.06)); color: inherit; } .qcom-badge--destructive { background: hsl(var(--qcom-destructive)); color: #fff; } .qcom-badge--outline { border-color: hsl(var(--qcom-border)); background: transparent; color: inherit; } .qcom-price-block { display: flex; flex-direction: column; } .qcom-price-block--gap-sm { gap: 0.25rem; } .qcom-price-block--gap-md { gap: 0.5rem; } .qcom-price-block--gap-lg { gap: 0.75rem; } .qcom-price-block__row { display: flex; align-items: center; gap: 0.5rem; } .qcom-price-block__badge--sm { font-size: 0.75rem; padding: 0.125rem 0.375rem; border-radius: var(--qcom-radius-sm); } .qcom-price-block__badge--md { font-size: 0.875rem; padding: 0.25rem 0.5rem; border-radius: var(--qcom-radius-sm); } .qcom-price-block__badge--lg { font-size: 0.875rem; padding: 0.375rem 0.75rem; border-radius: var(--qcom-radius-sm); } .qcom-price-block__main { /* container for price display */ } .qcom-price-block__prices { display: flex; align-items: center; gap: 0.5rem; } .qcom-price-block__primary { color: hsl(var(--qcom-fg)); } .qcom-price-block__primary--sm { font-size: 0.875rem; font-weight: 600; } .qcom-price-block__primary--md { font-size: 1rem; font-weight: 700; } .qcom-price-block__primary--lg { font-size: 1.125rem; font-weight: 700; } .qcom-price-block__original { text-decoration: line-through; color: hsl(var(--qcom-muted-fg)); } .qcom-price-block__original--sm { font-size: 0.75rem; } .qcom-price-block__original--md { font-size: 0.875rem; } .qcom-price-block__original--lg { font-size: 1rem; } .qcom-price-block__tax-amount { color: hsl(var(--qcom-muted-fg)); } .qcom-price-block__tax-amount--sm { font-size: 0.75rem; } .qcom-price-block__tax-amount--md { font-size: 0.875rem; } .qcom-price-block__tax-amount--lg { font-size: 1rem; } .qcom-price-block__savings { display: flex; align-items: center; gap: 0.25rem; } .qcom-price-block__savings-text { color: hsl(var(--qcom-success)); font-weight: 500; } .qcom-price-block__savings-text--sm { font-size: 0.75rem; } .qcom-price-block__savings-text--md { font-size: 0.875rem; } .qcom-price-block__savings-text--lg { font-size: 1rem; }