/* ========================================================================= * Instant Add to Cart & Side Cart — frontend styles * CSS custom properties are injected inline in (see Frontend::print_css_vars). * ===================================================================== */ :root { --iac-accent: #1677ff; --iac-accent-contrast: #fff; --iac-radius: 10px; --iac-width: 420px; --iac-anim: 260ms; --iac-bg: #fff; --iac-fg: #1f1f1f; --iac-muted: #8c8c8c; --iac-border: #f0f0f0; --iac-line: #f5f5f5; --iac-danger: #ff4d4f; --iac-success: #52c41a; --iac-shadow: 0 8px 40px rgba(0, 0, 0, .16); } @media (prefers-color-scheme: dark) { :root { --iac-bg: #1f1f1f; --iac-fg: #f5f5f5; --iac-muted: #8c8c8c; --iac-border: #303030; --iac-line: #2a2a2a; --iac-shadow: 0 8px 40px rgba(0, 0, 0, .5); } } html.iac-locked { overflow: hidden; } /* ---- Overlay -------------------------------------------------------- */ .iac-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity var(--iac-anim) ease; backdrop-filter: blur(1px); } .iac-overlay.is-visible { opacity: 1; } /* ---- Drawer --------------------------------------------------------- */ .iac-drawer { position: fixed; top: 0; bottom: 0; z-index: 99999; width: min(var(--iac-width), 92vw); display: flex; flex-direction: column; background: var(--iac-bg); color: var(--iac-fg); box-shadow: var(--iac-shadow); font-size: calc(14px * (var(--iac-font-scale, 100%) / 100%)); transition: transform var(--iac-anim) cubic-bezier(.4, 0, .2, 1); -webkit-font-smoothing: antialiased; } .iac-drawer--right { right: 0; transform: translateX(105%); } .iac-drawer--left { left: 0; transform: translateX(-105%); } .iac-drawer.is-open { transform: translateX(0); } .iac-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--iac-border); } .iac-drawer__title { margin: 0; font-size: 1.15em; font-weight: 600; display: flex; align-items: center; gap: 8px; } .iac-drawer__count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--iac-accent); color: var(--iac-accent-contrast); font-size: .72em; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .iac-drawer__close { border: 0; background: transparent; font-size: 28px; line-height: 1; color: var(--iac-muted); cursor: pointer; padding: 0 4px; transition: color var(--iac-anim); } .iac-drawer__close:hover { color: var(--iac-fg); } .iac-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px; } .iac-drawer__body.is-empty { display: flex; align-items: center; justify-content: center; } /* ---- Free shipping bar --------------------------------------------- */ .iac-freeship { padding: 12px 20px; border-bottom: 1px solid var(--iac-border); } .iac-freeship__msg { font-size: .85em; margin-bottom: 8px; color: var(--iac-fg); } .iac-freeship__track { height: 6px; border-radius: 3px; background: var(--iac-line); overflow: hidden; } .iac-freeship__fill { height: 100%; width: 0; border-radius: 3px; background: var(--iac-accent); transition: width 500ms cubic-bezier(.4, 0, .2, 1); } .iac-freeship.is-qualified .iac-freeship__fill { background: var(--iac-success); } .iac-freeship.is-qualified .iac-freeship__msg { color: var(--iac-success); font-weight: 600; } /* ---- Cart item ------------------------------------------------------ */ .iac-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--iac-line); opacity: 0; transform: translateY(6px); transition: opacity var(--iac-anim), transform var(--iac-anim), background var(--iac-anim); } .iac-item.is-in { opacity: 1; transform: none; } .iac-item.is-removing { opacity: 0; transform: translateX(20px); } .iac-item--ghost { opacity: .55; } .iac-item--ghost.is-in { opacity: .65; } .iac-item--error { background: rgba(255, 77, 79, .08); } .iac-item__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--iac-radius); overflow: hidden; background: var(--iac-line); } .iac-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .iac-item__main { flex: 1 1 auto; min-width: 0; } .iac-item__top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .iac-item__name { font-weight: 500; color: var(--iac-fg); text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .iac-item__name:hover { color: var(--iac-accent); } .iac-item__remove { flex: 0 0 auto; border: 0; background: transparent; color: var(--iac-muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; transition: color var(--iac-anim); } .iac-item__remove:hover { color: var(--iac-danger); } .iac-item__price { margin: 4px 0 2px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .iac-item__regular { color: var(--iac-muted); font-size: .85em; } .iac-item__unit { font-weight: 600; } .iac-item__save { display: inline-block; margin-top: 2px; font-size: .72em; font-weight: 600; color: var(--iac-success); background: rgba(82, 196, 26, .12); padding: 1px 7px; border-radius: 999px; } /* ---- Meta unfold ---------------------------------------------------- */ .iac-item__meta { margin: 6px 0; } .iac-meta__toggle { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--iac-muted); font-size: .78em; cursor: pointer; padding: 2px 0; } .iac-meta__toggle svg { transition: transform var(--iac-anim); } .iac-item__meta.is-open .iac-meta__toggle svg { transform: rotate(180deg); } .iac-meta__list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--iac-anim) ease; } .iac-item__meta.is-open .iac-meta__list { max-height: 400px; } .iac-meta__list li { display: flex; gap: 6px; font-size: .78em; padding: 2px 0; color: var(--iac-muted); } .iac-meta__k { font-weight: 600; } .iac-meta__k::after { content: ':'; } .iac-item__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .iac-item__subtotal { font-weight: 600; } /* ---- Quantity control ---------------------------------------------- */ .iac-qty { display: inline-flex; align-items: center; border: 1px solid var(--iac-border); border-radius: var(--iac-radius); overflow: hidden; } .iac-qty__btn { width: 30px; height: 30px; border: 0; background: transparent; color: var(--iac-fg); font-size: 16px; cursor: pointer; transition: background var(--iac-anim); } .iac-qty__btn:hover:not(:disabled) { background: var(--iac-line); } .iac-qty__btn:disabled { opacity: .4; cursor: not-allowed; } .iac-qty__input { width: 38px; height: 30px; border: 0; text-align: center; background: transparent; color: var(--iac-fg); font-size: .9em; -moz-appearance: textfield; } .iac-qty__input::-webkit-outer-spin-button, .iac-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---- Skeleton preloader -------------------------------------------- */ .iac-skel { align-items: center; } .iac-skel__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--iac-radius); } .iac-skel__lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; } .iac-skel__line { height: 12px; border-radius: 6px; } .iac-skel__line--lg { width: 80%; } .iac-skel__line--md { width: 55%; } .iac-skel__line--sm { width: 35%; } .iac-skel__thumb, .iac-skel__line { background: linear-gradient(90deg, var(--iac-line) 25%, var(--iac-border) 37%, var(--iac-line) 63%); background-size: 400% 100%; } /* Shimmer */ .iac-skel--shimmer .iac-skel__thumb, .iac-skel--shimmer .iac-skel__line { animation: iac-shimmer 1.4s ease infinite; } @keyframes iac-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Pulse */ .iac-skel--pulse .iac-skel__thumb, .iac-skel--pulse .iac-skel__line { animation: iac-pulse 1.2s ease-in-out infinite; } @keyframes iac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Wave */ .iac-skel--wave .iac-skel__thumb, .iac-skel--wave .iac-skel__line { animation: iac-shimmer 1.8s linear infinite; } /* ---- Empty state ---------------------------------------------------- */ .iac-empty { text-align: center; color: var(--iac-muted); padding: 40px 20px; } .iac-empty svg { color: var(--iac-border); margin-bottom: 12px; } .iac-empty p { margin: 0 0 16px; } /* ---- Cross-sells ---------------------------------------------------- */ .iac-crosssells { padding: 14px 20px; border-top: 1px solid var(--iac-border); } .iac-crosssells__title { margin: 0 0 10px; font-size: .9em; font-weight: 600; } .iac-xsell { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .iac-xsell img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .iac-xsell__info { flex: 1 1 auto; font-size: .8em; } .iac-xsell__info a { color: var(--iac-fg); text-decoration: none; display: block; } .iac-xsell__add { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--iac-accent); background: transparent; color: var(--iac-accent); font-size: 16px; cursor: pointer; transition: background var(--iac-anim), color var(--iac-anim); } .iac-xsell__add:hover { background: var(--iac-accent); color: var(--iac-accent-contrast); } /* ---- Footer --------------------------------------------------------- */ .iac-drawer__foot { padding: 16px 20px; border-top: 1px solid var(--iac-border); background: var(--iac-bg); } .iac-drawer__foot.is-sticky { position: sticky; bottom: 0; } .iac-trust { margin-bottom: 14px; } .iac-trust__badges { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 10px; padding: 0; justify-content: center; } .iac-trust__badge { display: flex; align-items: center; gap: 5px; font-size: .74em; color: var(--iac-muted); } .iac-trust__badge svg { color: var(--iac-accent); } .iac-trust__secure { text-align: center; font-size: .76em; color: var(--iac-muted); margin: 6px 0; } .iac-trust__pay { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; } .iac-pay { font-size: .62em; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--iac-border); color: var(--iac-muted); } .iac-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .iac-subtotal__label { font-size: .95em; } .iac-subtotal__value { font-size: 1.25em; font-weight: 700; } .iac-savings { text-align: right; font-size: .78em; color: var(--iac-success); font-weight: 600; margin-bottom: 12px; } .iac-actions { display: flex; flex-direction: column; gap: 8px; } /* ---- Buttons -------------------------------------------------------- */ .iac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; border-radius: var(--iac-radius); font-weight: 600; font-size: .95em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: all var(--iac-anim); } .iac-btn--primary { background: var(--iac-accent); color: var(--iac-accent-contrast); } .iac-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22, 119, 255, .28); } .iac-btn--ghost { background: transparent; border-color: var(--iac-border); color: var(--iac-fg); } .iac-btn--ghost:hover { border-color: var(--iac-accent); color: var(--iac-accent); } .iac-btn--link { background: transparent; color: var(--iac-muted); padding: 6px; } .iac-btn--link:hover { color: var(--iac-accent); } /* ---- Floating bubble ----------------------------------------------- */ .iac-bubble { position: fixed; bottom: 24px; z-index: 99990; right: 24px; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--iac-accent); color: var(--iac-accent-contrast); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); transition: transform var(--iac-anim); } .iac-bubble:hover { transform: scale(1.06); } .iac-bubble.is-bump { animation: iac-bump 420ms ease; } @keyframes iac-bump { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.94); } } .iac-bubble__count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; background: var(--iac-danger); color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ---- Add-to-cart button states ------------------------------------- */ .iac-loading { position: relative; pointer-events: none; opacity: .8; } .iac-loading::after { content: ''; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: iac-spin .6s linear infinite; } @keyframes iac-spin { to { transform: rotate(360deg); } } .iac-added { background: var(--iac-success) !important; border-color: var(--iac-success) !important; color: #fff !important; } /* ---- Toast ---------------------------------------------------------- */ .iac-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px); z-index: 100000; background: #1f1f1f; color: #fff; padding: 12px 20px; border-radius: var(--iac-radius); font-size: .85em; box-shadow: var(--iac-shadow); opacity: 0; transition: all var(--iac-anim); max-width: 90vw; } .iac-toast.is-show { transform: translate(-50%, 0); opacity: 1; } /* ---- Reduced motion ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }