.sidecart { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } .sidecart__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.2s ease; } .sidecart__panel { position: absolute; top: 0; right: 0; width: min(400px, 100%); height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; padding: 1.5rem; } .sidecart.is-open { pointer-events: auto; } .sidecart.is-open .sidecart__overlay { opacity: 1; } .sidecart.is-open .sidecart__panel { transform: translateX(0); } .sidecart__close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; margin-left: auto; } .sidecart__actions { margin-top: 1rem; display: flex; gap: 0.5rem; } .btn.btn--cart, .btn.btn--checkout { flex: 1; text-align: center; } .header-cart-icon { border: none; background: transparent; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .header-cart-icon__svg { width: 22px; height: 22px; display: block; } /* =========== SIDECART WRAPPER =========== */ .sidecart { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex; justify-content: flex-end; font-family: inherit; } .sidecart__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.25s ease; } .sidecart__panel { position: relative; max-width: 400px; width: 100%; height: 100%; background: #ffffff; box-shadow: -4px 0 18px rgba(0, 0, 0, 0.16); transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; padding: 1.5rem; } /* Open state */ .sidecart.is-open { pointer-events: auto; } .sidecart.is-open .sidecart__overlay { opacity: 1; } .sidecart.is-open .sidecart__panel { transform: translateX(0); } /* Prevent body scroll when open (you already toggle .sidecart-open on ) */ html.sidecart-open, html.sidecart-open body { overflow: hidden; } /* =========== HEADER & CLOSE =========== */ .sidecart__close { position: absolute; top: 0.75rem; right: 0.75rem; border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; } .sidecart__panel > h3 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; } /* =========== ITEMS LIST =========== */ #sidecart-cart { flex: 1 1 auto; overflow-y: auto; padding-right: 0.25rem; margin-bottom: 1rem; } .sidecart__empty { margin: 0; font-size: 0.95rem; color: #555; } .sidecart-items { list-style: none; margin: 0; padding: 0; } .sidecart-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #eee; font-size: 0.9rem; } /* Thumb */ .sidecart-item__thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: #f5f5f5; display: flex; align-items: center; justify-content: center; } .sidecart-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .sidecart-item__thumb--placeholder span { font-size: 0.75rem; color: #999; } /* Info */ .sidecart-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } .sidecart-item__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .sidecart-item__name { font-weight: 500; font-size: 0.9rem; line-height: 1.3; color: #222; word-break: break-word; } .sidecart-item__price { white-space: nowrap; font-weight: 600; font-size: 0.9rem; } .sidecart-item__meta { font-size: 0.8rem; color: #777; } .sidecart-item__bottom { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; margin-top: 0.25rem; } .sidecart-item__qty { color: #555; } .sidecart-item__remove { color: #c0392b; text-decoration: none; cursor: pointer; } .sidecart-item__remove:hover { text-decoration: underline; } /* =========== SUMMARY + BUTTONS =========== */ .sidecart-summary { border-top: 1px solid #eee; padding-top: 0.75rem; margin-bottom: 1rem; font-size: 0.9rem; } .sidecart-summary__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; } .sidecart-summary__row--total span:first-child { font-weight: 600; } .sidecart-summary__row--total span:last-child { font-weight: 700; } /* Buttons under cart */ .sidecart__actions { display: flex; flex-direction: column; gap: 0.5rem; } .sidecart__actions .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; padding: 0.6rem 0.8rem; font-size: 0.9rem; text-decoration: none; border: 1px solid transparent; } /* tweak these colors to your brand */ .btn.btn--cart { background: #f5f5f5; color: #333; } .btn.btn--cart:hover { background: #e4e4e4; } .btn.btn--checkout { background: #111827; color: #ffffff; } .btn.btn--checkout:hover { background: #000000; } /* =========== RESPONSIVE =========== */ @media (max-width: 480px) { .sidecart__panel { max-width: 100%; padding: 1.25rem; } .sidecart-item { padding: 0.6rem 0; } }