/* * component-cart-live.css — brand-themes the SHIPPED storefront cart markup so the live cart components * (cart_embed / cart_mini / cart_drawer_button / free_ship_bar) look on-brand on generated pages, where * the full storefront CSS isn't loaded. apb-rx-* tokens only, no !important. Styles the shipped classes * (.apb-store-*) the storefront cart JS renders, plus our own apb-rx-* wrappers. Loaded in (no FOUC). */ /* shared storefront primitives (scoped enough to not fight the real storefront CSS on storefront pages) */ .apb-rx-section .apb-store-btn, .apb-rx-cartmini .apb-store-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; padding: 12px 22px; border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * .8); background: var(--apb-rx-surface); color: var(--apb-rx-ink); } .apb-rx-section .apb-store-btn-primary, .apb-rx-cartmini .apb-store-btn-primary { background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); border-color: transparent; } .apb-store-cart-loading, .apb-store-mini-cart-loading { color: var(--apb-rx-dim); font-size: 14px; padding: 16px 0; text-align: center; } /* cart_embed — the shipped cart-root render --------------------------------------------------- */ .apb-rx-cart-embed { max-width: 720px; margin: 0 auto; } .apb-rx-cart-h { font-family: var(--apb-rx-font-display, inherit); font-weight: 800; font-size: clamp(24px, 3.5vw, 32px); letter-spacing: -.02em; margin: 0 0 20px; } .apb-rx-cart-embed .apb-store-cart { display: flex; flex-direction: column; gap: 14px; } .apb-rx-cart-embed .apb-store-cart-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--apb-rx-line); } .apb-rx-cart-embed .apb-store-cart-item img { width: 68px; height: 68px; object-fit: cover; border-radius: calc(var(--apb-rx-radius) * .7); background: var(--apb-rx-soft); } .apb-rx-cart-embed .apb-store-cart-item-name { font-weight: 600; font-size: 15px; } .apb-rx-cart-embed .apb-store-cart-item-meta { font-size: 13px; color: var(--apb-rx-dim); } .apb-rx-cart-embed .apb-store-qty { display: inline-flex; align-items: center; border: 1px solid var(--apb-rx-line); border-radius: 999px; } .apb-rx-cart-embed .apb-store-qty button { border: 0; background: transparent; width: 30px; height: 30px; cursor: pointer; color: var(--apb-rx-ink); font: inherit; } .apb-rx-cart-embed .apb-store-summary { margin-top: 18px; } .apb-rx-cart-embed .apb-store-summary-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--apb-rx-dim); padding: 6px 0; } .apb-rx-cart-embed .apb-store-summary-row strong, .apb-rx-cart-embed .apb-store-summary-row span { color: var(--apb-rx-ink); } .apb-rx-cart-embed .apb-store-summary-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 18px; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--apb-rx-line); } .apb-rx-cart-embed .apb-store-ship-progress { margin: 12px 0; } .apb-rx-cart-embed .apb-store-ship-progress progress { width: 100%; height: 8px; } .apb-rx-cart-embed .apb-store-empty { text-align: center; color: var(--apb-rx-dim); padding: 40px 0; } .apb-rx-cart-embed input[type="text"], .apb-rx-cart-embed input[type="email"] { border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * .7); padding: 10px 12px; font: inherit; font-size: 13px; background: var(--apb-rx-surface); color: var(--apb-rx-ink); } /* cart_mini — details popover ----------------------------------------------------------------- */ .apb-rx-cartmini-wrap { display: flex; justify-content: flex-end; } .apb-rx-cartmini { position: relative; } .apb-rx-cartmini-trigger { position: relative; list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * .7); background: var(--apb-rx-surface); color: var(--apb-rx-ink); cursor: pointer; } .apb-rx-cartmini-trigger::-webkit-details-marker { display: none; } .apb-rx-cartmini-badge { position: absolute; top: -6px; right: -6px; background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .apb-rx-cartmini-pop { position: absolute; top: 52px; right: 0; width: 320px; background: var(--apb-rx-surface); border: 1px solid var(--apb-rx-line); border-radius: var(--apb-rx-radius); box-shadow: var(--apb-rx-shadow-1, 0 16px 44px rgba(0,0,0,.16)); z-index: 30; padding: 6px 16px 16px; } .apb-rx-cartmini .apb-store-section-title { font-weight: 700; font-size: 14px; padding: 12px 0 6px; margin: 0; } .apb-rx-cartmini .apb-store-mini-cart-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--apb-rx-line); font-size: 13px; } .apb-rx-cartmini .apb-store-mini-cart-item-name { font-weight: 600; } .apb-rx-cartmini .apb-store-mini-cart-item-meta { color: var(--apb-rx-dim); } .apb-rx-cartmini .apb-store-mini-cart-empty { color: var(--apb-rx-dim); font-size: 13px; padding: 14px 0; text-align: center; } .apb-rx-cartmini .apb-store-mini-cart-foot { padding-top: 12px; } .apb-rx-cartmini .apb-store-mini-cart-total { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; } .apb-rx-cartmini .apb-store-mini-cart-foot .apb-store-btn { display: block; text-align: center; } /* cart_drawer_button -------------------------------------------------------------------------- */ .apb-rx-cartbtn { display: flex; justify-content: flex-end; } .apb-rx-cartbtn .apb-store-cart-link { position: relative; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--apb-rx-ink); border: 1px solid var(--apb-rx-line); border-radius: calc(var(--apb-rx-radius) * .7); padding: 10px 14px; background: var(--apb-rx-surface); } .apb-rx-cartbtn .apb-store-cart-link svg { width: 20px; height: 20px; } .apb-rx-cartbtn .apb-store-cart-count-badge { background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* free_ship_bar ------------------------------------------------------------------------------- */ .apb-rx-freeship-wrap { max-width: 620px; margin: 0 auto; } .apb-rx-freeship { display: flex; align-items: center; gap: 12px; background: var(--apb-rx-surface); border: 1px solid var(--apb-rx-line); border-radius: var(--apb-rx-radius); padding: 14px 18px; } .apb-rx-freeship-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--apb-rx-soft); display: flex; align-items: center; justify-content: center; color: var(--apb-rx-accent-text, var(--apb-rx-brand)); } .apb-rx-freeship-body { flex: 1; min-width: 0; } .apb-rx-freeship-msg { font-size: 14px; font-weight: 600; } .apb-rx-freeship-track { height: 8px; border-radius: 999px; background: var(--apb-rx-soft); overflow: hidden; margin-top: 8px; } .apb-rx-freeship-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--apb-rx-brand); transition: width var(--apb-rx-t, .3s) ease; } /* the shipped slide-out drawer is appended to — theme it too so the drawer button opens a brand-styled panel on generated pages */ .apb-store-cart-drawer { background: var(--apb-rx-surface); color: var(--apb-rx-ink); } .apb-store-cart-drawer-item { border-bottom: 1px solid var(--apb-rx-line); } .apb-store-cart-drawer .apb-store-btn-primary { background: var(--apb-rx-brand); color: var(--apb-rx-accent-contrast, #fff); } @media (max-width: 560px) { .apb-rx-cartmini-pop { width: min(320px, 86vw); } }