/** * SP Cart Slider — Premium light theme (v3.3.13) * Palette is driven entirely by --sp-primary / --sp-accent (injected from * settings) so each site keeps its own brand. Neutrals + status green are fixed. */ .sp-cart-drawer-overlay{ --c-primary: var(--sp-primary,#192F79); --c-accent: var(--sp-accent,#D32F2D); --c-head: var(--sp-heading, color-mix(in srgb, var(--sp-primary,#192F79) 82%, #000)); --c-primary-lt:color-mix(in srgb, var(--sp-primary,#192F79) 55%, #fff); --c-cta-dk: color-mix(in srgb, var(--sp-accent,#D32F2D) 80%, #000); --c-p-04: color-mix(in srgb, var(--sp-primary,#192F79) 5%, #fff); --c-p-08: color-mix(in srgb, var(--sp-primary,#192F79) 9%, #fff); --c-a-06: color-mix(in srgb, var(--sp-accent,#D32F2D) 7%, #fff); --c-a-16: color-mix(in srgb, var(--sp-accent,#D32F2D) 16%, #fff); --c-text: var(--sp-text,#333333); --c-muted: var(--sp-muted,#8085A3); --c-faint:#9aa2b4; --c-border:#D9DCE4; --c-hair: var(--sp-border,#EAECF1); --c-track: var(--sp-track,#E6E9EF); --c-gift: var(--sp-gift,#4b5563); /* free-gift rail + FREE label — admin-colorable; patriotic grey/steel default */ } /* Overlay */ .sp-cart-drawer-overlay{ position: fixed; inset: 0; background: rgba(0, 14, 42, 0.34); z-index: 999999; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; overscroll-behavior: contain; } .sp-cart-drawer-overlay.sp-active{ visibility: visible; opacity: 1; } /* Drawer */ .sp-cart-drawer{ position: fixed; top: 0; right: 0; width: 404px; max-width: 100%; height: 100%; background: var(--sp-drawer-bg,#ffffff); z-index: 1000000; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s; box-shadow: -30px 0 70px -30px rgba(0,14,42,.35); } .sp-cart-drawer::before{ content:''; display:block; height:3px; flex:none; background: linear-gradient(90deg, var(--c-head), var(--c-primary) 55%, var(--c-accent)); } .sp-cart-drawer-overlay.sp-active .sp-cart-drawer{ transform: translateX(0); } /* OWN OUR SURFACE — the open drawer MUST stay interactive no matter what CSS a host theme/plugin ships. Some sites set `.sp-cart-drawer-overlay{pointer- events:none!important}` (e.g. to neutralize a hidden overlay); without this, the drawer — a DOM child of the overlay — inherits `none` and nothing inside is clickable and scroll falls through to the page. These rules win by higher specificity (`.sp-active` = two classes) + !important, so no single-class site rule can override them. Closed overlay stays inert so it never blocks the page. */ .sp-cart-drawer-overlay{ pointer-events: none; } #sp-cart-drawer-overlay.sp-active, .sp-cart-drawer-overlay.sp-active{ pointer-events: auto !important; } #sp-cart-drawer, .sp-cart-drawer-overlay.sp-active .sp-cart-drawer{ pointer-events: auto !important; } /* Header */ .sp-cart-drawer-header{ padding: 20px 22px 16px; background: var(--sp-drawer-bg,#fff); border-bottom: 1px solid var(--c-hair); display: flex; justify-content: space-between; align-items: center; } .sp-drawer-title-link{ font-size: 16px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--c-head) !important; background: none !important; padding: 0 !important; border: none !important; text-decoration: none !important; } .sp-drawer-title-link:hover{ color: var(--c-primary) !important; } .sp-cart-drawer-close{ background: none !important; border: none !important; font-size: 26px !important; cursor: pointer; color: #7a8296 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; transition: background .15s, color .15s; } .sp-cart-drawer-close:hover{ background:#f1f3f7 !important; color: var(--c-head) !important; } @media (max-width: 480px){ .sp-cart-drawer-close{ font-size: 30px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; } } /* Body */ .sp-cart-drawer-body{ flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 20px 6px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .sp-cart-drawer-body.sp-loading{ opacity: 0.5; } /* Progress / offer rails */ .sp-offers-wrap{ padding: 8px 20px 2px; display: flex; flex-direction: column; gap: 8px; } .sp-offers-wrap.sp-hidden, .sp-offers-wrap:empty{ display: none; } .sp-offers-progress-bar{ padding: 9px 14px 8px; margin: 0; background: var(--c-p-04); border: 1px solid var(--c-hair); border-radius: 12px; box-shadow: 0 1px 2px rgba(9,18,42,.05), 0 10px 22px -14px rgba(9,18,42,.30); } .sp-offers-bar--save{ background: var(--c-a-06); border-color: var(--c-a-16); } .sp-offers-progress-bar.sp-offers-progress-loading{ visibility: hidden; } .sp-offers-progress-bar.sp-hidden{ display: none; } .sp-offers-progress-message{ font-size: 13.5px !important; font-weight: 500 !important; color: var(--sp-text, #4a5266) !important; text-align: left; margin: 0 0 7px; } .sp-offers-progress-message b{ color: var(--c-primary); font-weight: 700; } .sp-offers-bar--save .sp-offers-progress-message b{ color: var(--c-accent); } .sp-offers-progress-foot{ display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--c-faint); } .sp-offers-progress-foot .sp-offers-goal{ color: var(--c-primary); } .sp-offers-bar--save .sp-offers-progress-foot .sp-offers-goal{ color: var(--c-accent); } /* --- Liquid-metal progress bar --------------------------------------- Recessed channel + raised polished bead. The hue comes from brand vars, the metal comes from a vertical specular shade layer (bright top, dark underside = rounded chrome tube) plus a pinned gloss and a slow gleam. */ .sp-offers-progress-track{ width: 100%; height: 9px; background: var(--c-track); border-radius: 7px; position: relative; /* clip-path (not overflow:hidden) — Safari/WebKit anti-aliases clip-path cleanly, but jags the bottom edge of an overflow:hidden + border-radius box. */ clip-path: inset(0 round 7px); /* Recessed channel depth. Top-inner dark = sunken; bottom-inner light is BLURRED (not a hard 1px line) so it reads as a lip, never as a jagged edge in Safari. */ box-shadow: inset 0 1.5px 2.5px rgba(9,18,42,.30), inset 0 -1px 1.5px rgba(255,255,255,.55); } .sp-offers-progress-fill{ height: 100%; width: 0%; /* overflow:hidden CONTAINS the traveling gleam's layout (it sweeps to left:120%, past the right edge) so it can't create phantom horizontal scroll on mobile. No border-radius here on purpose — a rounded overflow:hidden box is what jags in Safari; clip-path does the rounding cleanly instead. Both together = gleam contained AND corners clean. */ position: relative; overflow: hidden; clip-path: inset(0 round 7px); transition: width 0.85s cubic-bezier(0.4, 0, 0.2, 1); /* Liquid metal: vertical specular shade (bright top -> dark underside = a rounded chrome tube) + a light top-weighted darken (so the gleam pops) + horizontal hue with a bright lateral sheen. The jagged edge was NEVER this shading — it was the Safari overflow:hidden clip, now fixed with clip-path — so the depth is safe. */ background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 50%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.16) 100%), linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%), linear-gradient(90deg, var(--c-head) 0%, var(--c-primary) 30%, var(--c-primary-lt) 50%, var(--c-primary) 70%, var(--c-head) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1.5px rgba(0,0,0,.16); } /* pinned top gloss — the fixed highlight of polished metal (soft gradient, no hard edge) */ .sp-offers-progress-fill::before{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; border-radius: 7px 7px 40% 40% / 7px 7px 10px 10px; background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events: none; } /* traveling gleam — a narrow bright streak that sweeps then pauses. Vertically masked so the bright band fades out before the fill's curved top/bottom edges — otherwise clipping the blurred streak against the rounded bottom stair-steps into a jaggy edge whenever the gleam crosses a bar. */ .sp-offers-progress-fill::after{ content: ''; position: absolute; top: -25%; left: -60%; width: 42%; height: 150%; transform: skewX(-20deg); filter: blur(1px); pointer-events: none; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--sp-gleam-ship,#fff) 12%, transparent) 32%, color-mix(in srgb, var(--sp-gleam-ship,#fff) 90%, transparent) 50%, color-mix(in srgb, var(--sp-gleam-ship,#fff) 12%, transparent) 68%, transparent 100%); -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); animation: sp-liquid-gleam 3.4s cubic-bezier(.5,0,.4,1) infinite; } @keyframes sp-liquid-gleam{ 0% { left: -60%; } 50% { left: 120%; } 100% { left: 120%; } /* hold, then repeat — periodic gleam, not a scanner */ } /* De-sync the gleam across rails — different periods (never re-phase) + negative delays so each starts mid-sweep. The three bars shimmer independently, not in lockstep, which reads far more like real light catching metal. */ .sp-offers-bar--ship .sp-offers-progress-fill::after{ animation-duration: 3.4s; animation-delay: -0.4s; } .sp-offers-bar--save .sp-offers-progress-fill::after{ animation-duration: 3.9s; animation-delay: -1.7s; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--sp-gleam-save,#fff) 12%, transparent) 32%, color-mix(in srgb, var(--sp-gleam-save,#fff) 90%, transparent) 50%, color-mix(in srgb, var(--sp-gleam-save,#fff) 12%, transparent) 68%, transparent 100%); } .sp-offers-bar--gift .sp-offers-progress-fill::after{ animation-duration: 4.4s; animation-delay: -2.9s; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--sp-gleam-gift,#fff) 12%, transparent) 32%, color-mix(in srgb, var(--sp-gleam-gift,#fff) 90%, transparent) 50%, color-mix(in srgb, var(--sp-gleam-gift,#fff) 12%, transparent) 68%, transparent 100%); } /* save = polished oxblood metal. Reached state must NOT force red on every rail — each rail keeps its own hue when unlocked (ship navy, save red, gift grey). */ .sp-offers-bar--save .sp-offers-progress-fill{ background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 50%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.16) 100%), linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%), linear-gradient(90deg, var(--c-cta-dk) 0%, var(--c-accent) 34%, color-mix(in srgb, var(--c-accent) 55%, #fff) 50%, var(--c-accent) 66%, var(--c-cta-dk) 100%); } @media (prefers-reduced-motion: reduce){ .sp-offers-progress-fill::after{ animation: none; opacity: 0; } } .sp-offers-bar--save.sp-goal-reached .sp-offers-progress-message, .sp-offers-bar--save.sp-goal-reached .sp-offers-progress-message b{ color: var(--c-cta-dk) !important; } @keyframes sp-goal-pop{ 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} } .sp-offers-progress-bar.sp-goal-reached{ animation: sp-goal-pop 0.4s ease; } /* Free-gift rail = gunmetal-grey liquid metal (ties to the grey FREE badge on the gift line). Patriotic palette: ship = navy, save = oxblood-red, gift takes the sanctioned grey/steel fallback since red & blue are spoken for. Placed AFTER the shared .sp-goal-reached rules so a reached gift rail stays steel, not oxblood. */ .sp-offers-bar--gift{ background: color-mix(in srgb, var(--c-gift) 7%, #fff); border-color: color-mix(in srgb, var(--c-gift) 18%, #fff); } .sp-offers-bar--gift .sp-offers-progress-message b{ color: var(--c-gift); } .sp-offers-bar--gift .sp-offers-progress-foot .sp-offers-goal{ color: var(--c-gift); } .sp-offers-bar--gift .sp-offers-progress-fill, .sp-offers-bar--gift.sp-goal-reached .sp-offers-progress-fill{ background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 50%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.16) 100%), linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 100%), linear-gradient(90deg, color-mix(in srgb, var(--c-gift) 78%, #000) 0%, var(--c-gift) 34%, color-mix(in srgb, var(--c-gift) 55%, #fff) 50%, var(--c-gift) 66%, color-mix(in srgb, var(--c-gift) 78%, #000) 100%); } .sp-offers-bar--gift.sp-goal-reached .sp-offers-progress-message, .sp-offers-bar--gift.sp-goal-reached .sp-offers-progress-message b{ color: var(--c-gift) !important; } /* Cart items */ .sp-cart-items{ display: flex; flex-direction: column; gap: 12px; } .sp-cart-item{ display: flex; gap: 14px; align-items: center; position: relative; background: var(--sp-card-bg,#fff); border: 1px solid var(--c-border); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,14,42,.04), 0 6px 18px -12px rgba(0,14,42,.22); } .sp-remove{ position: absolute; top: 11px; right: 11px; background: var(--c-a-06) !important; border: 1px solid var(--c-a-16) !important; font-size: 15px; cursor: pointer; color: var(--c-accent) !important; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; max-height: 28px !important; padding: 0 !important; margin: 0 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; z-index: 1; box-sizing: border-box !important; transition: background .15s; } .sp-remove:hover{ background: var(--c-a-16) !important; } @media (max-width: 480px){ .sp-remove{ width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; font-size: 16px; } } .sp-item-img{ width: 72px; height: 72px; flex: none; border-radius: 11px; overflow: hidden; background: radial-gradient(circle at 50% 36%, #eef1f9, #e3e8f4 72%); border: 1px solid var(--c-hair); display: flex; align-items: center; justify-content: center; } .sp-item-img img{ width: 72px; height: 72px; object-fit: cover; display: block; } .sp-item-info{ flex: 1; min-width: 0; } .sp-item-name{ font-size: 15.5px !important; font-weight: 600 !important; color: var(--c-head) !important; text-decoration: none !important; display: block; margin-bottom: 5px; line-height: 1.25; } .sp-item-name:hover{ color: var(--c-primary) !important; } .sp-free-badge{ font-size: 11px; font-style: normal; color: var(--c-gift); font-weight: 700; letter-spacing:.02em; } .sp-free-price{ color: var(--c-gift) !important; font-weight: 800; letter-spacing:.03em; } .sp-item-price{ font-size: 13.5px; margin-bottom: 8px; color: var(--c-primary); font-weight: 700; } .sp-item-tier-hint{ font-size: 11px; color: var(--c-primary); font-weight: 600; margin: -3px 0 9px; letter-spacing: .01em; opacity: .9; } .sp-item-price del{ color: var(--c-faint); margin-right: 5px; font-weight: 400; } .sp-sale-price{ color: var(--c-accent); font-weight: 800; } .sp-item-qty{ display: inline-flex; align-items: center; gap: 10px; } .sp-qty-btn{ width: 32px; height: 32px; border: 1px solid var(--c-border) !important; background: var(--sp-card-bg,#fff) !important; color: var(--c-head) !important; cursor: pointer; border-radius: 9px !important; padding: 0; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px; line-height: 1; transition: background .15s, border-color .15s; } .sp-qty-btn:hover{ background: #f2f4f9 !important; border-color: var(--c-primary) !important; } .sp-cart-qty-readonly{ font-size: 13px; color: var(--c-muted); } .sp-qty-val{ min-width: 18px; height: 32px; line-height: 32px; text-align: center; font-size: 15px; font-weight: 700; color: var(--c-head); border: none; } /* Empty */ .sp-cart-empty{ text-align: center; padding: 48px 20px; color: var(--c-muted); } .sp-cart-empty-icon{ font-size: 32px; margin-bottom: 12px; } .sp-cart-empty h3{ color: var(--c-head) !important; font-weight: 600 !important; margin: 0 0 6px !important; } /* Footer */ .sp-cart-drawer-footer{ padding: 13px 22px 16px; border-top: 1px solid var(--c-hair); background: var(--sp-drawer-bg,#fff); position: relative; } /* Discount / Coupon accordion */ .sp-discount-section-wrapper{ border-bottom: 1px solid var(--c-hair); margin-bottom: 10px; padding-bottom: 10px; } .sp-discount-section-wrapper:empty{ display: none; } .sp-discount-toggle{ background: none !important; border: none !important; padding: 0 !important; font-size: 13.5px !important; color: var(--c-head) !important; cursor: pointer; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; text-align: left !important; font-weight: 600 !important; } .sp-discount-toggle:hover{ opacity: 0.7; } .sp-arrow{ font-size: 11px; transition: transform 0.2s; color: var(--c-muted); } .sp-discount-form{ margin-top: 10px; display: flex; gap: 8px; } .sp-discount-form input{ flex: 1; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 9px; font-size: 14px; color: var(--c-text); } .sp-discount-form input:focus{ outline: none; border-color: var(--c-primary); } .sp-apply-coupon{ background: var(--c-primary) !important; color: #fff !important; border: none !important; padding: 9px 16px !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap; } .sp-apply-coupon:hover{ background: var(--c-head) !important; } .sp-applied-coupons{ margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .sp-coupon-tag{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--c-head); } .sp-remove-coupon{ background: none !important; border: none !important; color: var(--c-muted) !important; font-size: 18px !important; cursor: pointer !important; padding: 0 !important; } .sp-coupon-notice{ font-size: 13px; padding: 8px 12px; border-radius: 8px; margin-top: 8px; } .sp-coupon-error{ background: var(--c-a-06); color: var(--c-cta-dk); border: 1px solid var(--c-a-16); } .sp-coupon-success{ background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .sp-subtotal{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .sp-subtotal > span:first-child{ font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); } .sp-subtotal-amount{ font-size: 28px !important; font-weight: 700 !important; color: var(--c-primary) !important; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .sp-footer-buttons{ display: flex; flex-direction: column; gap: 11px; } .sp-view-cart, .sp-continue-shopping, .sp-checkout-button{ width: 100%; padding: 15px 12px !important; cursor: pointer; border-radius: 11px !important; text-transform: uppercase !important; font-weight: 700 !important; font-size: 13.5px !important; font-family: inherit !important; font-style: normal !important; letter-spacing: .14em !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; display: block !important; } .sp-view-cart, .sp-continue-shopping{ background: var(--sp-card-bg,#fff) !important; border: 1.5px solid var(--c-head) !important; color: var(--c-head) !important; order: 1; } .sp-view-cart:hover, .sp-continue-shopping:hover{ background: color-mix(in srgb, var(--c-head) 6%, var(--sp-card-bg,#fff)) !important; } .sp-checkout-button{ background: var(--sp-checkout-bg,#BF0A30) !important; border: none !important; color: var(--sp-checkout-text,#fff) !important; order: 2; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--sp-checkout-bg,#BF0A30) 55%, transparent) !important; } .sp-checkout-button:hover{ filter: brightness(1.06); } /* Mobile: View Cart + Checkout share one row to save vertical space */ @media (max-width: 480px){ .sp-footer-buttons{ flex-direction: row !important; gap: 10px !important; } .sp-footer-buttons .sp-view-cart, .sp-footer-buttons .sp-continue-shopping, .sp-footer-buttons .sp-checkout-button{ flex: 1 1 0 !important; width: auto !important; padding: 14px 8px !important; letter-spacing: .10em !important; } } /* FBT Carousel */ .sp-fbt-section{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-hair); } .sp-fbt-section h4{ font-size: 12px !important; font-weight: 700 !important; letter-spacing:.14em !important; text-transform: uppercase !important; color: var(--c-muted) !important; margin: 0 0 12px 0 !important; padding: 0 !important; } .sp-fbt-carousel{ display: flex; align-items: center; gap: 8px; } .sp-fbt-nav{ width: 32px; height: 32px; min-width: 32px; border: 1px solid var(--c-border) !important; background: var(--sp-card-bg,#fff) !important; color: var(--c-head) !important; cursor: pointer; border-radius: 9px !important; font-size: 18px; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0; } .sp-fbt-nav:hover{ background: #f2f4f9 !important; } .sp-fbt-track{ flex: 1; overflow: hidden; position: relative; } .sp-fbt-slider{ display: flex; transition: transform 0.4s ease; } .sp-fbt-product{ flex: 0 0 100%; display: flex; align-items: center; gap: 12px; min-width: 0; } .sp-fbt-product img{ width: 56px !important; height: 56px !important; object-fit: cover; flex-shrink: 0; border-radius: 9px; border: 1px solid var(--c-hair); } .sp-fbt-info{ flex: 1; min-width: 0; } .sp-fbt-info h5{ font-size: 13px !important; font-weight: 600 !important; color: var(--c-head) !important; margin: 0 0 4px 0 !important; padding: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-fbt-price{ font-size: 13px !important; color: var(--c-primary) !important; font-weight: 700; } .sp-fbt-add-to-cart{ padding: 8px 18px !important; background: var(--c-primary) !important; color: #fff !important; border: none !important; border-radius: 9px !important; cursor: pointer; font-size: 12px !important; font-weight: 700 !important; letter-spacing:.04em; white-space: nowrap; } .sp-fbt-add-to-cart:hover{ background: var(--c-head) !important; } /* Scroll lock */ body.sp-cart-open{ overflow: hidden; } /* Loading */ .sp-cart-loading-init{ text-align: center; padding: 40px; color: var(--c-faint); } /* Add to Cart button states */ .add_to_cart_button.loading, .ajax_add_to_cart.loading, button[type="submit"].loading{ opacity: 0.6; pointer-events: none; } .add_to_cart_button.added, .ajax_add_to_cart.added, button[type="submit"].added{ background-color: #22c55e !important; border-color: #22c55e !important; color: #fff !important; } .add_to_cart_button.added::after, .ajax_add_to_cart.added::after{ content: " ✓"; } /* Fly to Cart */ #sp-fly-to-cart{ position: fixed !important; width: 120px !important; height: 120px !important; background-size: cover !important; background-position: center !important; background-color: #fff !important; border-radius: 8px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important; z-index: 9999999 !important; pointer-events: none !important; opacity: 0; transform: scale(1); display: block !important; visibility: visible !important; } #sp-fly-to-cart.sp-flying{ transition: left 1.6s cubic-bezier(0.2, 1, 0.3, 1), top 1.6s cubic-bezier(0.2, 1, 0.3, 1), transform 1.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 1.6s ease !important; } .sp-cart-pulse{ animation: sp-cart-pulse 0.4s ease; } @keyframes sp-cart-pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} } /* ── Floating cart button (optional) ─────────────────────────────────────── */ .sp-cart-fab{ position: fixed; bottom: 22px; z-index: 9998; width: 56px; height: 56px; padding: 0; border-radius: 50%; /* !important guards the button from host themes that colour all