/** * Mini-cart — a floating build card. * * Follows the deals-grid design system in sale-products-importer, which that file documents as * "slate ink + OC green, hairline borders, soft shadow with a lift on hover, filled green actions, * light-green hover states". Every value below is that system's, not a new one: * * surface #fff · border #e2e8f0 · tint #f8fafc / #f1f5f9 · ink #0f172a / #1e293b * muted #64748b · dim #94a3b8 · green #1c8e4d / #166534 · light green #f0fdf4 / #dcfce7 / #bbf7d0 * radii .5 / .625 / .75 / 1rem · system font stack · tabular numerals · .15s ease * * Two deliberate departures, both because the deals grid has no equivalent element: * * 1. The card carries the deals card's HOVER shadow at rest. An overlay is permanently lifted, * so it takes the system's elevated tier rather than inventing a third one. * 2. The open/close transition keeps its authored curves. Hover and state changes use the * system's own .15s ease. * * ON THE `!important`s BELOW — they are deliberate and bounded, not laziness. * * The card is appended to on whatever page the visitor is on, so it competes with the live * theme (Breakdance) on every bare element it contains: an

takes the theme's heading scale, an * takes the theme's link colour. That is not hypothetical — on production the title rendered at * the theme's h2 size and the CTA rendered dark-on-green, inverting on hover. Page-builder output * routinely reaches three-class selectors, so raising specificity alone is a race this file cannot * be sure of winning. * * So: element+class compound selectors everywhere the tag matters, plus `!important` on exactly the * properties a host theme clobbers — typography, colour, background, text-decoration, list and * heading margins. Layout, spacing and motion stay unmarked. Nothing outside `.srpp-cart-` is touched, so the blast radius is the card itself. / / Every top-level element the cart puts in the page must be listed here. Custom properties inherit from ancestors, and each of these is a direct child of — the bubble and the toast do NOT sit inside the panel, so declaring the tokens on the panel alone left their backgrounds resolving to nothing, i.e. transparent, with the page showing through. / .srpp-cart-panel, .srpp-cart-btn, .srpp-cart-fab, .srpp-cart-toast { --srpp-cart-surface: #ffffff; --srpp-cart-tint: #f8fafc; --srpp-cart-line: #e2e8f0; --srpp-cart-ink: #0f172a; --srpp-cart-ink-soft: #1e293b; --srpp-cart-muted: #64748b; --srpp-cart-dim: #94a3b8; --srpp-cart-accent: #1c8e4d; --srpp-cart-accent-ink: #166534; --srpp-cart-accent-wash: #f0fdf4; --srpp-cart-accent-tint: #dcfce7; --srpp-cart-accent-line: #bbf7d0; --srpp-cart-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } / ============================================ 0. THEME ARMOUR ============================================ / / The theme's own element defaults, neutralised inside the card only. / .srpp-cart-panel, .srpp-cart-panel , .srpp-cart-panel ::before, .srpp-cart-panel ::after { box-sizing: border-box !important; } .srpp-cart-panel h2, .srpp-cart-panel p, .srpp-cart-panel ul, .srpp-cart-panel li, .srpp-cart-panel a, .srpp-cart-panel button, .srpp-cart-panel span, .srpp-cart-panel strong, .srpp-cart-panel img { margin: 0 !important; padding: 0 !important; font-family: var(--srpp-cart-font) !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; float: none !important; max-width: none !important; } .srpp-cart-panel ul, .srpp-cart-panel li { list-style: none !important; } .srpp-cart-panel a { text-decoration: none !important; /* Themes that highlight links paint a background on the anchor, not just the text. / background-color: transparent !important; box-shadow: none !important; } .srpp-cart-panel button { border: none !important; background: none !important; / A theme's `button { font-size: 2rem }` reaches the icon-only buttons too, where it silently scales anything sized in em and drags the row's line box with it. / font-size: inherit !important; color: inherit; text-align: inherit; appearance: none; -webkit-appearance: none; } / ============================================ 1. THE CARD ============================================ / .srpp-cart-panel { position: fixed; right: 20px; bottom: 20px; z-index: 99990; display: flex; flex-direction: column; width: 372px; max-width: calc(100vw - 40px); / Height follows content: three parts make a short card, twelve make a tall one that stops short of the viewport. A fixed full height is what makes an overlay read as furniture. / max-height: min(620px, calc(100vh - 40px)); border: 1px solid var(--srpp-cart-line); border-radius: 1rem; background: var(--srpp-cart-surface) !important; color: var(--srpp-cart-ink) !important; font-family: var(--srpp-cart-font) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; text-align: left !important; overflow: hidden; / The deals card's hover elevation, at rest — see the file header. / box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04); / Closed. The base rule carries the CLOSING transition — a transition to a state uses that state's own timing, so leaving .is-open animates with what is written here. Closing is intentionally not the reverse of opening: quick and accelerating. / transform-origin: 100% 100%; visibility: hidden; opacity: 0; transform: translateY(14px) scale(.97); transition: transform 200ms cubic-bezier(.55, 0, 1, .45), opacity 160ms cubic-bezier(.55, 0, 1, .45), visibility 0s linear 200ms; } / Open. Transform runs a long decelerating curve over 420ms while opacity resolves in 180ms, so the card is fully readable before it finishes settling instead of fading in lock-step with its own movement. Scaling from the bottom-right corner makes it read as growing out of the button rather than sliding in from off-screen. The curve stops AT its target — no bounce-back. / .srpp-cart-panel.is-open { visibility: visible; opacity: 1; transform: translateY(0) scale(1); transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s; } / Browser surfaces the design system would otherwise leave at their defaults. / .srpp-cart-panel ::selection { background: var(--srpp-cart-accent-tint); color: var(--srpp-cart-accent-ink); } .srpp-cart-panel :focus-visible { outline: 2px solid var(--srpp-cart-accent) !important; outline-offset: 2px !important; border-radius: .375rem; } / ============================================ 2. HEAD ============================================ / .srpp-cart-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 16px 20px 12px !important; } / Compound h2 + class: the theme's heading scale is what made this render oversized on production. / .srpp-cart-panel h2.srpp-cart-paneltitle { display: flex; align-items: center; gap: 9px; color: var(--srpp-cart-ink) !important; font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; } / The deals discount-badge idiom: soft green pill, not a filled dot. / .srpp-cart-panel .srpp-cart-panelcount { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 8px !important; border-radius: .5rem; background: var(--srpp-cart-accent-tint) !important; color: var(--srpp-cart-accent-ink) !important; font-size: .72rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; letter-spacing: .01em !important; } .srpp-cart-panel .srpp-cart-panelcount:empty { display: none; } / The .sp-action ghost idiom the deal cards use for View / Compare. / .srpp-cart-panel button.srpp-cart-panelclose { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; border: 1px solid var(--srpp-cart-line) !important; border-radius: .625rem; background: var(--srpp-cart-surface) !important; color: var(--srpp-cart-muted) !important; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .srpp-cart-panel button.srpp-cart-panelclose:hover { border-color: var(--srpp-cart-accent) !important; background: var(--srpp-cart-accent-wash) !important; color: var(--srpp-cart-accent-ink) !important; } / The deals "OTHER SHOPS" label idiom, reused verbatim. / .srpp-cart-panel p.srpp-cart-paneleco { flex: 0 0 auto; padding: 0 20px 12px !important; color: var(--srpp-cart-dim) !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .srpp-cart-panel p.srpp-cart-paneleco[hidden] { display: none; } / ============================================ 3. ITEMS ============================================ / .srpp-cart-panel ul.srpp-cart-list { flex: 1 1 auto; padding: 6px 12px !important; overflow-y: auto; border-top: 1px solid var(--srpp-cart-line); scrollbar-width: thin; scrollbar-color: var(--srpp-cart-line) transparent; } / Only when the list actually scrolls: fade its top and bottom edge so rows dissolve into the card instead of being cut by it. Toggled from JS so a short list keeps crisp edges. / .srpp-cart-panel ul.srpp-cart-list.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); } .srpp-cart-panel ul.srpp-cart-list::-webkit-scrollbar { width: 8px; } .srpp-cart-panel ul.srpp-cart-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #cbd5e1; background-clip: content-box; } / Each category is named once, in its own heading, instead of being repeated under every product. The label reuses the deals grid's "OTHER SHOPS" idiom; the icon is the category's own, from get_component_categories(). / .srpp-cart-panel li.srpp-cart-group + li.srpp-cart-group { margin-top: 2px !important; border-top: 1px solid var(--srpp-cart-line); } .srpp-cart-panel .srpp-cart-grouphead { display: flex; align-items: center; gap: 7px; padding: 12px 8px 6px !important; color: var(--srpp-cart-dim) !important; } .srpp-cart-panel .srpp-cart-groupicon { display: inline-flex; flex: 0 0 auto; } .srpp-cart-panel .srpp-cart-groupicon svg { width: 13px; height: 13px; display: block; } .srpp-cart-panel .srpp-cart-groupname { color: var(--srpp-cart-dim) !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .srpp-cart-panel .srpp-cart-groupcount { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; padding: 1px 5px !important; border-radius: .375rem; background: #f1f5f9 !important; color: var(--srpp-cart-muted) !important; font-size: .65rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; } / Modelled on .sale-products-shop-row: a flat hover row, not a nested card. / .srpp-cart-panel li.srpp-cart-item { position: relative; display: grid; grid-template-columns: 2.5rem 1fr auto 1.5rem; align-items: center; gap: 10px; padding: 8px !important; border-radius: .5rem; transition: background .15s ease; / Rows start low and transparent; the card's .is-open drives them in on a 28ms-per-row stagger. The stagger is the effect — the per-row curve stays ordinary on purpose. / opacity: 0; transform: translateY(9px); } .srpp-cart-panel li.srpp-cart-item + li.srpp-cart-item::after { content: ""; position: absolute; inset: -1px 8px auto 3.25rem; height: 1px; background: var(--srpp-cart-line); } .srpp-cart-panel.is-open li.srpp-cart-item { opacity: 1; transform: translateY(0); transition: opacity 260ms cubic-bezier(.4, 0, .2, 1) calc(var(--srpp-i, 0) 28ms), transform 320ms cubic-bezier(.16, 1, .3, 1) calc(var(--srpp-i, 0) * 28ms), background .15s ease; } .srpp-cart-panel li.srpp-cart-item:hover { background: var(--srpp-cart-tint); } .srpp-cart-panel li.srpp-cart-item:hover::after, .srpp-cart-panel li.srpp-cart-item:hover + li.srpp-cart-item::after { opacity: 0; } .srpp-cart-panel .srpp-cart-itemimg { width: 2.5rem; height: 2.5rem; padding: 2px !important; border: 1px solid var(--srpp-cart-line) !important; border-radius: .5rem; /* The deals card's image plate. / background: var(--srpp-cart-tint) !important; object-fit: contain; } .srpp-cart-panel .srpp-cart-itemimg--empty { display: block; } .srpp-cart-panel .srpp-cart-itembody { min-width: 0; } / Compound a + class: the theme's link colour is what these fall to otherwise. / .srpp-cart-panel .srpp-cart-itemname { display: block; overflow: hidden; color: var(--srpp-cart-ink-soft) !important; font-size: .9rem !important; font-weight: 600 !important; line-height: 1.35 !important; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; } .srpp-cart-panel a.srpp-cart-itemname:hover { color: var(--srpp-cart-accent-ink) !important; } / Why this price: the shop count and the top of the spread. The right-hand column carries price_min (the figure the total sums), so this line never repeats it. / .srpp-cart-panel .srpp-cart-itemmeta { display: block; color: var(--srpp-cart-muted) !important; font-size: .72rem !important; font-weight: 400 !important; line-height: 1.4 !important; font-variant-numeric: tabular-nums; } / Same rule and wording as the builder's own compatibility warning, so the two never disagree. / .srpp-cart-panel .srpp-cart-itemwarn { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px !important; padding: 1px 6px 1px 5px !important; border-radius: .375rem; background: #fffbeb !important; color: #b45309 !important; font-size: .68rem !important; font-weight: 600 !important; line-height: 1.5 !important; } .srpp-cart-panel .srpp-cart-itemwarn svg { flex: 0 0 auto; } .srpp-cart-panel .srpp-cart-itemprice { color: var(--srpp-cart-ink) !important; font-size: .85rem !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; white-space: nowrap; } .srpp-cart-panel button.srpp-cart-itemremove { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: .375rem; background: transparent !important; color: var(--srpp-cart-dim) !important; cursor: pointer; transition: background .15s ease, color .15s ease; } .srpp-cart-panel button.srpp-cart-itemremove:hover { background: #fef2f2 !important; color: #dc2626 !important; } .srpp-cart-panel li.srpp-cart-empty { padding: 26px 12px 30px !important; text-align: center !important; } .srpp-cart-panel li.srpp-cart-empty p { margin: 0 0 12px !important; color: var(--srpp-cart-muted) !important; font-size: .9rem !important; } .srpp-cart-panel a.srpp-cart-emptylink { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 14px !important; border: 1px solid var(--srpp-cart-accent-line) !important; border-radius: .625rem; background: var(--srpp-cart-accent-wash) !important; color: var(--srpp-cart-accent-ink) !important; font-size: .76rem !important; font-weight: 600 !important; transition: border-color .15s ease, background .15s ease; } .srpp-cart-panel a.srpp-cart-emptylink:hover { border-color: var(--srpp-cart-accent) !important; background: var(--srpp-cart-accent-tint) !important; color: var(--srpp-cart-accent-ink) !important; } / ============================================ 4. FOOT ============================================ / .srpp-cart-panel .srpp-cart-panelfoot { flex: 0 0 auto; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid var(--srpp-cart-line); } .srpp-cart-panel .srpp-cart-panelfoot[hidden] { display: none; } .srpp-cart-panel .srpp-cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px !important; } .srpp-cart-panel .srpp-cart-totallabel { color: var(--srpp-cart-dim) !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } / The .sp-stat-val idiom from the deals header stats. / .srpp-cart-panel .srpp-cart-totalvalue { color: var(--srpp-cart-ink) !important; font-size: 1.7rem !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; letter-spacing: -.03em !important; line-height: 1.1 !important; } / The .sale-products-button idiom, matched value for value. Compound a + class and an explicit colour in BOTH states: on production the theme's link rules rendered this dark on green and inverted it on hover. / .srpp-cart-panel a.srpp-cart-cta, .srpp-cart-panel a.srpp-cart-cta:link, .srpp-cart-panel a.srpp-cart-cta:visited { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 18px !important; border: none !important; border-radius: .75rem; background: var(--srpp-cart-accent) !important; color: #ffffff !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: .01em !important; text-align: center !important; text-decoration: none !important; transition: background .15s ease; } .srpp-cart-panel a.srpp-cart-cta:hover, .srpp-cart-panel a.srpp-cart-cta:focus, .srpp-cart-panel a.srpp-cart-cta:active { background: var(--srpp-cart-accent-ink) !important; color: #ffffff !important; text-decoration: none !important; } .srpp-cart-panel button.srpp-cart-clear { display: block; width: 100%; margin-top: 8px !important; padding: 6px !important; border-radius: .375rem; background: transparent !important; color: var(--srpp-cart-muted) !important; font-size: .76rem !important; font-weight: 500 !important; text-align: center !important; cursor: pointer; transition: color .15s ease; } .srpp-cart-panel button.srpp-cart-clear:hover { color: #dc2626 !important; } / ============================================ 5. BUTTON ([srpp_cart_button]) ============================================ / / The .sp-action idiom, so a cart button in the header reads as the same family as the actions on every deal card. This one lives inside the theme's own header markup, so it needs the same armour as the card's controls. / button.srpp-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 2.25rem; padding: 0 12px !important; border: 1px solid var(--srpp-cart-line) !important; border-radius: .625rem !important; background: var(--srpp-cart-surface) !important; color: #475569 !important; font-family: var(--srpp-cart-font) !important; font-size: .76rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } button.srpp-cart-btn:hover { border-color: var(--srpp-cart-accent) !important; background: var(--srpp-cart-accent-wash) !important; color: var(--srpp-cart-accent-ink) !important; } button.srpp-cart-btn:focus-visible { outline: 2px solid var(--srpp-cart-accent) !important; outline-offset: 2px !important; } button.srpp-cart-btn .srpp-cart-btn-icon { flex: 0 0 auto; } button.srpp-cart-btn .srpp-cart-btn-label { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: .01em !important; text-transform: none !important; } / Filled green, like .discount-btn.active and the "N shops" badge. / button.srpp-cart-btn .srpp-cart-badge { position: absolute; top: -7px; right: -7px; display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px !important; margin: 0 !important; border-radius: 999px; background: var(--srpp-cart-accent) !important; color: #ffffff !important; font-size: .68rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; line-height: 1 !important; / Hidden by visibility, never display: the count only exists once JS has read localStorage, and a header button must not change size when it arrives. / visibility: hidden; } / Asymmetric on purpose — a fast snap up, a slower settle. A symmetric pulse reads mechanical. / @keyframes srpp-cart-badge-pulse { 0% { transform: scale(1); } 26% { transform: scale(1.18); } 100% { transform: scale(1); } } button.srpp-cart-btn .srpp-cart-badge.is-pulse { animation: srpp-cart-badge-pulse 350ms cubic-bezier(.16, 1, .3, 1); } / ============================================ 6. MOBILE BUBBLE + ADD TOAST ============================================ / / Rendered by JS only on a phone, on a scope page, with a non-empty build and no visible header button. Same armour as everything else: it sits directly in the theme's . / button.srpp-cart-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 99989; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 0 !important; margin: 0 !important; border: 1px solid var(--srpp-cart-line) !important; border-radius: 999px !important; background: var(--srpp-cart-surface) !important; color: var(--srpp-cart-accent-ink) !important; font-family: var(--srpp-cart-font) !important; font-size: 14px !important; line-height: 1 !important; box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .22), 0 4px 8px -4px rgba(0, 0, 0, .12) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; / Hidden until JS says otherwise; same two-curve entrance as the card, scaled from the corner. / visibility: hidden; opacity: 0; transform: translateY(10px) scale(.9); transform-origin: 100% 100%; transition: transform 180ms cubic-bezier(.55, 0, 1, .45), opacity 140ms cubic-bezier(.55, 0, 1, .45), visibility 0s linear 180ms; } button.srpp-cart-fab.is-in { visibility: visible; opacity: 1; transform: translateY(0) scale(1); transition: transform 360ms cubic-bezier(.16, 1, .3, 1), opacity 160ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s; } button.srpp-cart-fab:focus-visible { outline: 2px solid var(--srpp-cart-accent) !important; outline-offset: 3px !important; } button.srpp-cart-fab .srpp-cart-fabcount { position: absolute; top: -2px; right: -2px; display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 5px !important; margin: 0 !important; border: 2px solid var(--srpp-cart-surface) !important; border-radius: 999px !important; background: var(--srpp-cart-accent) !important; color: #ffffff !important; font-size: .68rem !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; line-height: 1 !important; } / The toast the bubble swallows. Sits just above it, right-aligned, so the flight is short and reads as "this went in there" rather than as a banner sliding off somewhere. / .srpp-cart-toast { position: fixed; right: 16px; bottom: calc(16px + 3.25rem + 10px + env(safe-area-inset-bottom, 0px)); z-index: 99991; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 9px 14px 9px 9px; border: 1px solid var(--srpp-cart-line); border-radius: .875rem; background: var(--srpp-cart-surface); color: var(--srpp-cart-ink); font-family: var(--srpp-cart-font); box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .26), 0 4px 8px -4px rgba(0, 0, 0, .12); pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 100% 100%; transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 160ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 320ms; } .srpp-cart-toast.is-in { visibility: visible; opacity: 1; transform: translateY(0) scale(1); transition: transform 360ms cubic-bezier(.16, 1, .3, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s; } / The flight. Longer on transform than on opacity so it is still visible while it travels and fades out only as it lands — the inverse of the entrance, on purpose. / .srpp-cart-toast.is-flying { visibility: visible; opacity: 0; transition: transform 420ms cubic-bezier(.5, 0, .35, 1), opacity 300ms cubic-bezier(.5, 0, 1, .5) 120ms, visibility 0s linear 420ms; } .srpp-cart-toastimg { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; padding: 2px; box-sizing: border-box; border: 1px solid var(--srpp-cart-line); border-radius: .5rem; background: var(--srpp-cart-tint); object-fit: contain; } .srpp-cart-toastbody { min-width: 0; } .srpp-cart-toastlabel { display: block; color: var(--srpp-cart-accent-ink); font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; } .srpp-cart-toastname { display: block; overflow: hidden; max-width: 15rem; color: var(--srpp-cart-ink); font-size: .82rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } / ============================================ 7. RESPONSIVE + REDUCED MOTION ============================================ / @media (max-width: 560px) { / Anchored on both sides rather than sized: a card that cannot be wider than the gap between its own insets cannot overflow the page, whatever the layout viewport does. / .srpp-cart-panel { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; max-height: min(72vh, calc(100vh - 24px)); transform-origin: 50% 100%; } } @media (prefers-reduced-motion: reduce) { .srpp-cart-panel, .srpp-cart-panel.is-open, .srpp-cart-panel li.srpp-cart-item, .srpp-cart-panel.is-open li.srpp-cart-item, .srpp-cart-panel a.srpp-cart-cta, button.srpp-cart-btn, .srpp-cart-panel button.srpp-cart-panelclose, .srpp-cart-panel button.srpp-cart-itemremove, .srpp-cart-panel .srpp-cart-itemname { transition-duration: 1ms !important; transition-delay: 0ms !important; transform: none !important; } button.srpp-cart-btn .srpp-cart-badge.is-pulse { animation: none !important; } / The bubble still appears and the toast still says what was added — they just stop moving. The flight is the one thing that cannot degrade into a shorter version of itself, so it is removed outright and the toast simply fades where it stands. */ button.srpp-cart-fab, button.srpp-cart-fab.is-in, .srpp-cart-toast, .srpp-cart-toast.is-in, .srpp-cart-toast.is-flying { transition-duration: 1ms !important; transition-delay: 0ms !important; transform: none !important; } }