/** * Nasionka Cart 2.0 — scoped drawer styles. * * EVERYTHING is scoped to #cart-popup.nasionka-cart-2 (the scope class is * added by JS on init). Without the class: * - Cart 2.0 modules stay hidden, * - the native Flatsome cart renders untouched. * => JS failure or plugin off = Cart 1.0. Progressive enhancement. * * Design tokens (overridable from admin via inline :root): * --nc2-primary #8AC429 official brand primary (CTA) * --nc2-dark #2E5E1F * --nc2-surface #FBFAF6 * --nc2-radius 14px * --nc2-drawer-max 640px */ :root { --nc2-primary: #8AC429; --nc2-dark: #2E5E1F; --nc2-surface: #FBFAF6; --nc2-ink: #333333; --nc2-muted: #7a7a72; --nc2-line: #ecebe4; --nc2-radius: 14px; --nc2-drawer-max: 640px; } /* Modules are inert until the scope class exists. */ #cart-popup .nc2-module { display: none; } /* ===================================================================== */ /* Drawer width — same cart, more room on bigger screens */ /* ===================================================================== */ @media (max-width: 849px) { .mfp-content.off-canvas-cart.nc2-drawer, .nc2-drawer .off-canvas-cart { width: 100vw !important; max-width: 100vw !important; } } @media (min-width: 850px) and (max-width: 1199px) { .mfp-content.off-canvas-cart.nc2-drawer, .nc2-drawer .off-canvas-cart { width: clamp(500px, 46vw, 600px) !important; max-width: 600px !important; } } @media (min-width: 1200px) { .mfp-content.off-canvas-cart.nc2-drawer, .nc2-drawer .off-canvas-cart { width: clamp(560px, 34vw, var(--nc2-drawer-max)) !important; max-width: var(--nc2-drawer-max) !important; } } /* ===================================================================== */ /* Opaque drawer background (Patch 1.31) */ /* */ /* On some mobile browsers the page behind the drawer was visible through */ /* it, especially below the progress section. None of our ancestors ever */ /* declared an explicit opaque background, so painting stopped wherever */ /* Flatsome's own background rule happened not to reach. Fixed by setting */ /* white explicitly at every layer of the drawer chain — belt-and-braces, */ /* CSS only, strictly scoped to the active Cart 2.0 classes so Cart 1.0 */ /* and the rest of the site are completely unaffected. */ /* ===================================================================== */ .mfp-content.off-canvas-cart.nc2-drawer { background: #fff; } #cart-popup.nasionka-cart-2, #cart-popup.nasionka-cart-2 .cart-popup-inner, #cart-popup.nasionka-cart-2 .widget_shopping_cart, #cart-popup.nasionka-cart-2 .widget_shopping_cart_content { background: #fff; } /* ===================================================================== */ /* Fixed overlay layer (Patch 1.32 §1, §7, §8) */ /* */ /* PATCH 1.32 §1 ROOT CAUSE: in 1.31 this bar was position:fixed INSIDE */ /* #cart-popup. Flatsome animates the drawer with a CSS transform, and a */ /* transformed ancestor becomes the containing block for fixed children — */ /* so the bar was fixed to the scrolling cart content and parked wherever */ /* it first appeared (around the 5th product) instead of tracking the */ /* viewport. */ /* */ /* Now cart.js moves the bar into THIS layer, which lives on — */ /* outside every transformed ancestor — and keeps its left/width aligned */ /* to the open drawer's real bounding box. The layer also hosts the */ /* scroll hint and back-to-top so all three share one positioning path. */ /* ===================================================================== */ .nc2-fixed-layer { position: fixed; bottom: 0; /* PATCH 1.33: width comes from CSS, mirroring .nc2-drawer's breakpoints, so the layer is correctly sized even when init() runs while the drawer is still animating open and measures 0 wide. JS only refines this when measurement returns something sane — it is no longer a prerequisite. */ right: 0; width: 100vw; z-index: 100001; /* above the drawer, below the undo toast (100002) */ display: none; /* off unless the drawer is genuinely open */ pointer-events: none; /* only the children opt back in */ font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .nc2-fixed-layer.nc2-layer-on { display: block; } @media (min-width: 850px) and (max-width: 1199px) { .nc2-fixed-layer { width: clamp(500px, 46vw, 600px); } } @media (min-width: 1200px) { .nc2-fixed-layer { width: clamp(560px, 34vw, var(--nc2-drawer-max)); } } /* ---- sticky checkout bar ---- */ .nc2-fixed-layer .nc2-sticky-slot { transform: translateY(102%); transition: transform 0.18s ease; will-change: transform; } .nc2-fixed-layer.nc2-show-cta .nc2-sticky-slot { transform: none; pointer-events: auto; } .nc2-fixed-layer .nc2-sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0)); background: #fff; border-top: 1px solid var(--nc2-line); box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08); } .nc2-fixed-layer .nc2-sticky-cta__total { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .nc2-fixed-layer .nc2-sticky-cta__total-label { font-size: 11px; color: var(--nc2-muted); } /* 1.34 §2 + 1.35 §1 + 1.351 §8 — readable, but the CTA stays dominant. 17px -> 15px -> 14.25px. Weight deliberately left at 600 (§8: stop fighting font-weight); ONLY the sticky bar's amount is affected — the final order summary total is untouched. */ .nc2-fixed-layer .nc2-sticky-cta__total-amount { font-size: 14.25px; font-weight: 600; color: var(--nc2-ink); white-space: nowrap; } /* §2 — arrow alignment. ONE flex row, align-items:center, no absolute positioning and no translateY correction: the arrow simply sits at the end of the row and is vertically centred by the flex container itself. The label takes the free space so the arrow stays hard right. */ /* §1 — the sticky bar is a persistent SHORTCUT, so it must read as secondary to the filled-green final CTA. Outline treatment: white fill, brand-green border, green label AND green arrow. The final CTA is untouched. */ .nc2-fixed-layer .nc2-sticky-cta__btn, .nc2-fixed-layer .nc2-sticky-cta__btn.nc2-btn--primary { background: #fff; color: var(--nc2-dark); border: 2px solid var(--nc2-primary); box-shadow: none; } .nc2-fixed-layer .nc2-sticky-cta__btn .nc2-checkout__label, .nc2-fixed-layer .nc2-sticky-cta__btn .nc2-checkout__arrow { color: var(--nc2-dark); } @media (hover: hover) { .nc2-fixed-layer .nc2-sticky-cta__btn:hover { background: var(--nc2-surface); border-color: var(--nc2-dark); filter: none; } } .nc2-fixed-layer .nc2-sticky-cta__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; min-height: 46px; padding: 0 18px; flex: 0 1 auto; line-height: 1; text-decoration: none; } .nc2-fixed-layer .nc2-sticky-cta__btn .nc2-checkout__label { position: static; line-height: 1; } /* Override the main CTA's absolutely-positioned arrow inside this button. */ .nc2-fixed-layer .nc2-sticky-cta__btn .nc2-checkout__arrow { position: static; transform: none; top: auto; right: auto; display: inline-flex; align-items: center; font-size: 17px; line-height: 1; } /* ---- scroll navigation (1.35 §7/§8) -------------------------------- Both controls are small, quiet, circular chevrons sharing one visual language and one stacking position, so they can never overlap each other or the sticky bar. PATCH 1.35 ROOT CAUSE (↓ never visible): the previous rule `.nc2-show-cta .nc2-scroll-hint { opacity: 0 }` force-hid the hint whenever the sticky CTA was showing. On a genuinely long cart the final CTA is off-screen the moment the drawer opens, so the sticky bar is showing immediately — meaning the hint was suppressed at exactly the moment it was supposed to appear. It could never be seen on the only carts it exists for. The two are now mutually exclusive in JS (§9) and stacked, not suppressed. */ .nc2-fixed-layer .nc2-nav-btn { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 1px solid var(--nc2-line); /* PATCH 1.4 §1 — these two controls are the ONLY