.cart-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: var(--space-3); padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .cart-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); } .cart-toggle svg { width: 20px; height: 20px; } .cart-toggle__count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--color-accent); color: var(--color-accent-on); font-size:12px; font-weight: 700; line-height: 19px; text-align: center; } .cart-toggle.is-empty .cart-toggle__count { display: none; } .cart-fab { display: none; position: fixed; right: 24px; bottom: 24px; z-index: 1100; align-items: center; justify-content: center; width: 58px; height: 58px; padding: 0; border: 1px solid rgba(207, 164, 105, 0.3); border-radius: 50%; background: #fff; color: var(--color-accent-strong); cursor: pointer; box-shadow: 0 14px 30px -8px rgba(19, 17, 16, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cart-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -8px rgba(19, 17, 16, 0.34); } .cart-fab svg { width: 24px; height: 24px; } .cart-fab .cart-toggle__count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--color-accent); color: var(--color-accent-on); font-size:15px; font-weight: 700; line-height: 22px; text-align: center; border: 2px solid #fff; } .cart-fab.is-empty .cart-toggle__count { display: none; } @media (min-width: 1025px) { .cart-fab { display: flex; } } .cart-drawer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(19, 17, 16, 0.45); opacity: 0; transition: opacity 0.25s ease; } .cart-drawer__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: min(420px, 100%); height: 100%; background: var(--color-surface); box-shadow: -12px 0 40px rgba(19, 17, 16, 0.14); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } body.cart-open .cart-drawer { pointer-events: auto; } body.cart-open .cart-drawer__backdrop { opacity: 1; } body.cart-open .cart-drawer__panel { transform: none; } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size:15px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text); } .cart-drawer__close { border: 0; background: none; font-size:27px; line-height: 1; color: var(--color-text-muted); cursor: pointer; } .cart-drawer__close:hover { color: var(--color-text); } .cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); } .cart-drawer__pusty { color: var(--color-text-muted); font-size:18px; padding: var(--space-5) 0; } .cart-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); } .cart-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cart-item__nazwa { font-size:18px; font-weight: 600; color: var(--color-text); } .cart-item__opis { font-size:18px; color: var(--color-text-muted); } .cart-item__meta { font-size:18px; color: var(--color-text-faint); } .cart-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); } .cart-item__cena { font-size:18px; font-weight: 700; color: var(--color-text); white-space: nowrap; } .cart-item__usun { border: 0; background: none; padding: 0; font-size:15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); cursor: pointer; } .cart-item__usun:hover { color: var(--color-accent-strong); } .cart-drawer__foot { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-bg); } .cart-drawer__sum { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .cart-drawer__sum strong { font-size:23px; letter-spacing: 0; color: var(--color-text); } .cart-drawer__cta { justify-content: center; text-align: center; border-radius: 999px; width: 100%; } .cart-drawer__cta--kasa { margin-top: 10px; } .cart-drawer__link { font-size:18px; text-align: center; color: var(--color-text-muted); } .cart-drawer__link:hover { color: var(--color-accent-strong); } @media (max-width: 640px) { .cart-drawer__panel { width: 100%; } .cart-toggle { width: 38px; height: 38px; } }