:root { --uac-bg: #fffaf8; --uac-surface: #ffffff; --uac-ink: #1b151b; --uac-muted: #756b73; --uac-line: #eadfdf; --uac-accent: #d88f98; --uac-accent-dark: #b66b76; --uac-soft: #f8eceb; --uac-success: #2f8a62; --uac-shadow: 0 24px 80px rgba(54, 36, 47, .18); --uac-ease: cubic-bezier(.22, 1, .36, 1); } html.uac-lock, html.uac-lock body { overflow: hidden; } .uac { position: fixed; inset: 0; z-index: 99999; visibility: hidden; pointer-events: none; opacity: 0; transition: visibility 0s linear .52s, opacity .34s ease; font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-family: var(--font-body); color: var(--uac-ink); } .uac.is-open { visibility: visible; pointer-events: auto; opacity: 1; transition-delay: 0s; } .uac__overlay { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(25, 19, 24, .44); opacity: 0; transition: opacity .42s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .uac.is-open .uac__overlay { opacity: 1; } .uac__panel { position: absolute; top: 0; display: flex; flex-direction: column; width: 460px; max-width: 100%; height: 100%; background: var(--uac-bg); box-shadow: var(--uac-shadow); opacity: .92; transition: transform .52s var(--uac-ease), opacity .34s ease; will-change: transform, opacity; /* Берём направление у */ direction: inherit; text-align: start; } /* ========================= RTL — Hebrew Корзина справа ========================= */ html[dir="rtl"] .uac__panel { right: 0; left: auto; transform: translate3d(104%, 0, 0); } /* ========================= LTR — RU / EN Корзина слева ========================= */ html[dir="ltr"] .uac__panel { left: 0; right: auto; transform: translate3d(-104%, 0, 0); } .uac.is-open .uac__panel { transform: translate3d(0, 0, 0); opacity: 1; } .uac__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 24px 18px; background: var(--uac-surface); border-bottom: 1px solid var(--uac-line); } .uac__title { margin: 0; font-size: 29px; line-height: 1.1; } .uac__count { margin-top: 7px; color: var(--uac-muted); font-size: 13px; } .uac__close, .uac-item__remove { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; color: var(--uac-muted); transition: transform .2s ease, background-color .2s ease, color .2s ease; } .uac__close { width: 38px; height: 38px; border-radius: 50%; background: var(--uac-soft); font-size: 27px; line-height: 1; } .uac__close:hover, .uac-item__remove:hover { transform: scale(1.06); color: var(--uac-ink); } .uac__shipping { margin: 18px 24px 0; padding: 16px; border: 1px solid #ecd8d6; border-radius: 16px; background: linear-gradient(135deg, #fff 0%, #fbedeb 100%); } .uac__shipping-top { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; } .uac__progress { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #ecdfdf; } .uac__progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--uac-accent), #e6b0aa); transition: width .5s var(--uac-ease), background-color .3s ease; } .uac__shipping.is-complete .uac__progress span { background: var(--uac-success); } .uac__shipping p { margin: 10px 0 0; color: var(--uac-muted); font-size: 13px; line-height: 1.5; } .uac__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 24px 24px; } .uac__items { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; } .uac-item { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 15px; padding: 12px; border: 1px solid var(--uac-line); border-radius: 18px; background: var(--uac-surface); box-shadow: 0 8px 24px rgba(66, 39, 53, .055); transition: transform .32s var(--uac-ease), opacity .28s ease, box-shadow .25s ease; } .uac-item:hover { box-shadow: 0 12px 30px rgba(66, 39, 53, .08); } .uac-item.is-removing { opacity: 0; pointer-events: none; } html[dir="rtl"] .uac-item.is-removing { transform: translateX(24px) scale(.97); } html[dir="ltr"] .uac-item.is-removing { transform: translateX(-24px) scale(.97); } .uac-item__media { display: block; overflow: hidden; border-radius: 14px; background: #f3eded; aspect-ratio: 4 / 5; } .uac-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--uac-ease); } .uac-item:hover .uac-item__media img { transform: scale(1.035); } .uac-item__content { min-width: 0; display: flex; flex-direction: column; } .uac-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .uac-item__title { color: var(--uac-ink); font-size: 15px; font-weight: 700; line-height: 1.45; text-decoration: none; } .uac-item__remove { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #f7f1f1; font-size: 18px; } .uac-item__options { margin-top: 7px; color: var(--uac-muted); font-size: 12px; line-height: 1.45; } .uac-item__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; color: var(--uac-muted); font-size: 12px; line-height: 1.45; } .uac-item__meta-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--uac-soft); } .uac-item__meta-item b { color: var(--uac-ink); font-weight: 700; } .uac-item__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 13px; } .uac-item__qty { display: inline-grid; grid-template-columns: 32px 38px 32px; align-items: center; height: 34px; border: 1px solid var(--uac-line); border-radius: 999px; background: #fff; overflow: hidden; direction: ltr; } .uac-item__qty button, .uac-item__qty input { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; font: inherit; } .uac-item__qty button { cursor: pointer; font-size: 17px; transition: background-color .2s ease; } .uac-item__qty button:hover { background: var(--uac-soft); } .uac-item__qty input { appearance: textfield; -moz-appearance: textfield; color: var(--uac-ink); font-weight: 700; } .uac-item__qty input::-webkit-outer-spin-button, .uac-item__qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .uac-item__prices { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .uac-item__prices del { color: #a3999f; font-size: 12px; } .uac-item__prices strong { font-size: 15px; } .uac__empty { display: none; min-height: 350px; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 40px 20px; } .uac[data-empty="1"] .uac__items, .uac[data-empty="1"] .uac__footer { display: none; } .uac[data-empty="1"] .uac__empty { display: flex; } .uac__empty-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--uac-soft); color: var(--uac-accent-dark); font-size: 34px; } .uac__empty h3 { margin: 18px 0 6px; font-size: 21px; } .uac__empty p { margin: 0; color: var(--uac-muted); font-size: 14px; } .uac__footer { padding: 19px 24px 20px; border-top: 1px solid var(--uac-line); background: rgba(255, 255, 255, .96); } .uac__total { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; font-size: 16px; } .uac__total strong { font-size: 18px; } .uac__checkout, .uac__secondary { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 14px; text-decoration: none; cursor: pointer; font-weight: 700; transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease; } .uac__checkout { background: var(--uac-ink); color: #fff; box-shadow: 0 12px 24px rgba(27, 21, 27, .16); } .uac__checkout:hover, .uac__secondary:hover { transform: translateY(-1px); } .uac__checkout:hover { box-shadow: 0 16px 30px rgba(27, 21, 27, .22); } .uac__secondary { margin-top: 20px; background: var(--uac-soft); color: var(--uac-ink); } .uac__note { margin: 10px 0 0; color: var(--uac-muted); font-size: 11px; text-align: center; } .uac.is-loading .uac__panel::after { content: ""; position: absolute; inset: 0; z-index: 20; background: rgba(255, 250, 248, .48); cursor: wait; opacity: 1; transition: opacity .2s ease; } .uac.is-loading .uac__panel::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 21; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(27, 21, 27, .16); border-top-color: var(--uac-ink); border-radius: 50%; animation: uac-spin .7s linear infinite; } @keyframes uac-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .uac, .uac__overlay, .uac__panel, .uac-item, .uac-item__media img, .uac__progress span, .uac__checkout, .uac__secondary { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media (max-width: 600px) { .uac__panel { width: 100%; } .uac__header { padding: 18px 18px 15px; } .uac__shipping { margin: 14px 18px 0; } .uac__body { padding-right: 18px; padding-left: 18px; } .uac__footer { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); } .uac-item { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; } }