/* ========================================================================== Ewa Cart — mini-cart drawer. Light-first, premium, Manrope, akcent #ef850b. Drawer + overlay są bezpośrednimi dziećmi (JS), więc position:fixed działa. ZERO serif. Mobile = pełnoekranowy. (autor: Robert Palka) ========================================================================== */ .ewacart-drawer, .ewacart-overlay { --ewc-accent: #ef850b; --ewc-accent-2: #fba43a; --ewc-grad: linear-gradient(135deg, #fba43a 0%, #ef850b 100%); --ewc-bg: #ffffff; --ewc-soft: #f7f5f2; --ewc-ink: #1b140d; --ewc-text: #2a2118; --ewc-muted: #6f6256; --ewc-border: #ece7e1; --ewc-ok: #1f9d57; --ewc-low: #c2410c; --ewc-r: 14px; --ewc-r-sm: 10px; --ewc-r-pill: 999px; --ewc-ease: cubic-bezier(.22, 1, .36, 1); --ewc-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-sizing: border-box; } .ewacart-drawer *, .ewacart-drawer *::before, .ewacart-drawer *::after { box-sizing: border-box; } /* ---- Overlay ---- */ .ewacart-overlay { position: fixed; inset: 0; z-index: 2147483000; background: rgba(18, 12, 7, .42); opacity: 0; visibility: hidden; transition: opacity .32s var(--ewc-ease), visibility .32s var(--ewc-ease); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .ewacart-overlay[hidden] { display: block; } /* sterujemy klasą, nie atrybutem */ .ewacart-overlay.is-open { opacity: 1; visibility: visible; } /* ---- Panel ---- */ .ewacart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147483001; width: min(94vw, 420px); height: 100dvh; display: flex; flex-direction: column; background: var(--ewc-bg); color: var(--ewc-text); font-family: var(--ewc-sans); font-style: normal; box-shadow: -24px 0 60px -28px rgba(0, 0, 0, .45); transform: translateX(100%); transition: transform .36s var(--ewc-ease); will-change: transform; visibility: hidden; } .ewacart-drawer.is-open { transform: translateX(0); visibility: visible; } @media (max-width: 560px) { .ewacart-drawer { width: 100vw; } } /* ---- Head ---- */ .ewacart-drawer__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--ewc-border); } .ewacart-drawer__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ewc-ink); display: flex; align-items: center; gap: 8px; } .ewacart-drawer__title .ewacart-count { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--ewc-grad); border-radius: var(--ewc-r-pill); } .ewacart-drawer__close { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ewc-r-pill); background: var(--ewc-soft); color: var(--ewc-ink); cursor: pointer; transition: background .2s var(--ewc-ease); } .ewacart-drawer__close:hover { background: #efe9e2; } .ewacart-drawer__close svg { width: 20px; height: 20px; } /* ---- Live region (a11y) ---- */ .ewacart-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- Body (scroll) ---- */ .ewacart-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px; } .ewacart-items { list-style: none; margin: 0; padding: 0; } .ewacart-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--ewc-border); } .ewacart-item:last-child { border-bottom: 0; } .ewacart-item__media { width: 64px; height: 64px; border-radius: var(--ewc-r-sm); overflow: hidden; background: var(--ewc-soft); } .ewacart-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ewacart-item__name { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ewc-ink); } .ewacart-item__name a { color: inherit; text-decoration: none; } .ewacart-item__name a:hover { color: var(--ewc-accent); } .ewacart-item__meta { margin-top: 3px; font-size: 12.5px; color: var(--ewc-muted); } .ewacart-item__meta p { margin: 0; } .ewacart-item__stock { margin-top: 6px; display: inline-block; font-size: 12px; font-weight: 600; color: var(--ewc-low); background: rgba(194, 65, 12, .08); padding: 2px 8px; border-radius: var(--ewc-r-pill); } /* Chipy szkolenia: data + miasto (z nazwy) + tag zadatku. */ .ewacart-item__chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .ewacart-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--ewc-ink); background: var(--ewc-soft); border: 1px solid var(--ewc-border); border-radius: var(--ewc-r-pill); letter-spacing: -.005em; /* Dywiz w zakresie dat („08-09.08.2026") jest punktem łamania wiersza. */ white-space: nowrap; } .ewacart-chip svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--ewc-accent); } .ewacart-chip--deposit { color: var(--ewc-low); background: rgba(194, 65, 12, .08); border-color: rgba(194, 65, 12, .2); font-weight: 700; } .ewacart-item__row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ewacart-qty { display: inline-flex; align-items: center; border: 1px solid var(--ewc-border); border-radius: var(--ewc-r-pill); overflow: hidden; } .ewacart-qty__btn { width: 30px; height: 30px; border: 0; background: transparent; color: var(--ewc-ink); font-size: 16px; line-height: 1; cursor: pointer; transition: background .15s var(--ewc-ease); } .ewacart-qty__btn:hover { background: var(--ewc-soft); } .ewacart-qty__val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ewc-ink); } .ewacart-item__price { font-size: 14.5px; font-weight: 800; color: var(--ewc-ink); white-space: nowrap; } .ewacart-item__price del { color: var(--ewc-muted); font-weight: 500; margin-right: 4px; } .ewacart-item__remove { position: absolute; top: 14px; right: 0; width: 24px; height: 24px; border: 0; background: transparent; color: var(--ewc-muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; transition: color .15s var(--ewc-ease), background .15s var(--ewc-ease); } .ewacart-item__remove:hover { color: var(--ewc-low); background: var(--ewc-soft); } /* ---- Empty ---- */ .ewacart-empty { text-align: center; padding: 56px 20px; } .ewacart-empty__icon { width: 48px; height: 48px; color: var(--ewc-accent); opacity: .85; } .ewacart-empty__text { margin: 14px 0 20px; font-size: 15px; color: var(--ewc-muted); } /* ---- Bespoke pasek „w cenie" (wypełnia pustkę przy 1 pozycji) ---- */ .ewacart-perks { margin: 16px 0 4px; padding: 13px 15px 14px; display: grid; gap: 9px; background: var(--ewc-soft); border: 1px solid var(--ewc-border); border-radius: var(--ewc-r); } .ewacart-perks__label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ewc-muted); } .ewacart-perk { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ewc-text); letter-spacing: -.005em; } .ewacart-perk__ico { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ewc-accent); } /* ---- Foot (pinned) ---- */ .ewacart-foot { flex: 0 0 auto; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ewc-border); background: var(--ewc-bg); } .ewacart-foot[hidden] { display: none; } .ewacart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 15px; color: var(--ewc-muted); } .ewacart-subtotal__val { font-size: 20px; font-weight: 800; color: var(--ewc-ink); } .ewacart-subtotal__val .woocommerce-Price-amount { color: var(--ewc-ink); } /* Wyróżniona mini-karta zadatku „dziś" (premium, ikona portfela). */ .ewacart-deposit { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 13px 15px; background: linear-gradient(135deg, rgba(251, 164, 58, .12), rgba(239, 133, 11, .07)); border: 1px solid rgba(239, 133, 11, .24); border-radius: var(--ewc-r); } .ewacart-deposit__ico { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ewc-grad); border-radius: 12px; box-shadow: 0 9px 20px -9px rgba(239, 133, 11, .75); } .ewacart-deposit__ico svg { width: 22px; height: 22px; } .ewacart-deposit__main { flex: 1 1 auto; min-width: 0; } .ewacart-deposit__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ewacart-deposit__label { font-size: 13px; font-weight: 700; color: var(--ewc-ink); letter-spacing: -.005em; } .ewacart-deposit__amt { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ewc-ink); white-space: nowrap; } .ewacart-deposit__amt .woocommerce-Price-amount { color: var(--ewc-ink); } .ewacart-deposit__sub { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ewc-muted); } .ewacart-deposit__sub .woocommerce-Price-amount { color: var(--ewc-text); font-weight: 700; } .ewacart-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 20px; border: 0; border-radius: var(--ewc-r); font-family: inherit; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; cursor: pointer; text-decoration: none; transition: transform .15s var(--ewc-ease), box-shadow .2s var(--ewc-ease), background .2s var(--ewc-ease); } .ewacart-btn--primary { color: #fff; background: var(--ewc-grad); box-shadow: 0 12px 26px -12px rgba(239, 133, 11, .7); } .ewacart-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(239, 133, 11, .8); } .ewacart-btn--ghost { margin-top: 8px; color: var(--ewc-muted); background: transparent; font-weight: 600; font-size: 14px; padding: 8px; } .ewacart-btn--ghost:hover { color: var(--ewc-ink); } /* ---- Scroll-lock (body) ---- */ body.ewacart-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* ---- Loading (in-flight AJAX) ---- */ .ewacart-drawer.is-loading .ewacart-drawer__body, .ewacart-drawer.is-loading .ewacart-foot { opacity: .55; pointer-events: none; transition: opacity .15s var(--ewc-ease); } @media (prefers-reduced-motion: reduce) { .ewacart-drawer, .ewacart-overlay { transition: none; } }