/* * SmartCart Pro — Drawer styles * Design tokens at :root, set inline in per DrawerRenderer. * All user-overridable via the Appearance settings (v0.4). * * Conventions: * - .scp-* prefix on every selector (no leakage) * - transform/opacity animations only (no width/height) * - prefers-reduced-motion respected * - RTL via [dir="rtl"] selectors where positional */ :root { --scp-primary: #0f172a; --scp-accent: #6366f1; --scp-bg: #ffffff; --scp-text: #0f172a; --scp-muted: #64748b; --scp-overlay: rgba(15, 23, 42, 0.5); --scp-border: #e2e8f0; --scp-success: #10b981; --scp-danger: #f43f5e; --scp-radius: 0; --scp-width: 420px; --scp-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); --scp-ease: cubic-bezier(0.32, 0.72, 0, 1); --scp-duration: 400ms; --scp-z: 999999; } /* ============== Drawer container ============== */ .scp-drawer { position: fixed; inset: 0; z-index: var(--scp-z); pointer-events: none; } .scp-drawer[data-state="closed"] { visibility: hidden; } .scp-drawer[data-state="open"], .scp-drawer[data-state="opening"], .scp-drawer[data-state="closing"] { visibility: visible; } .scp-overlay { position: absolute; inset: 0; background: var(--scp-overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--scp-duration) var(--scp-ease); pointer-events: none; } .scp-drawer[data-state="open"] .scp-overlay, .scp-drawer[data-state="opening"] .scp-overlay { opacity: 1; pointer-events: auto; } /* ============== Panel ============== */ .scp-panel { position: absolute; top: 0; bottom: 0; width: min(var(--scp-width), 100vw); background: var(--scp-bg); color: var(--scp-text); box-shadow: var(--scp-shadow); display: flex; flex-direction: column; pointer-events: auto; transform: translateX(100%); transition: transform var(--scp-duration) var(--scp-ease); -webkit-overflow-scrolling: touch; contain: layout style; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.5; } .scp-drawer--right .scp-panel { right: 0; } .scp-drawer--left .scp-panel { left: 0; transform: translateX(-100%); } .scp-drawer[data-state="open"] .scp-panel, .scp-drawer[data-state="opening"] .scp-panel { transform: translateX(0); } .scp-handle { display: none; /* mobile only */ width: 40px; height: 4px; border-radius: 2px; background: var(--scp-border); margin: 8px auto 0; } /* ============== Header ============== */ .scp-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--scp-border); flex-shrink: 0; } .scp-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--scp-text); display: flex; align-items: center; gap: 8px; } .scp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--scp-accent); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .scp-close { background: transparent; border: 0; cursor: pointer; padding: 8px; border-radius: 6px; color: var(--scp-muted); display: inline-flex; align-items: center; justify-content: center; transition: background-color 150ms ease, color 150ms ease; } .scp-close:hover { background: var(--scp-border); color: var(--scp-text); } .scp-close:focus-visible { outline: 2px solid var(--scp-accent); outline-offset: 2px; } /* ============== Progress bar ============== */ .scp-progress { padding: 16px 24px; border-bottom: 1px solid var(--scp-border); flex-shrink: 0; } .scp-progress__track { height: 6px; background: var(--scp-border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; position: relative; } .scp-progress__fill { height: 100%; background: linear-gradient(90deg, var(--scp-accent), color-mix(in srgb, var(--scp-accent) 70%, white)); transition: width 400ms var(--scp-ease); border-radius: 3px; } .scp-progress--achieved .scp-progress__fill { background: var(--scp-success); } .scp-progress__msg { margin: 0; font-size: 13px; color: var(--scp-muted); text-align: center; } .scp-progress--achieved .scp-progress__msg { color: var(--scp-success); font-weight: 500; } /* ============== Tiered progress (v0.9.2) ============== */ /* When tiers are active, the track can no longer clip its children — the marker dots and labels overflow above and below intentionally. We grow the wrapper padding so labels don't crash into the surrounding content. */ .scp-progress--tiered { padding-bottom: 32px; /* room for marker labels */ } .scp-progress--tiered .scp-progress__track { overflow: visible; } .scp-progress__markers { position: absolute; inset: 0; pointer-events: none; } .scp-progress__marker { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; /* Allow the label to overflow downward */ pointer-events: none; user-select: none; } .scp-progress__marker-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--scp-bg); border: 2px solid var(--scp-border); transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease; box-shadow: 0 0 0 2px var(--scp-bg); } .scp-progress__marker.is-achieved .scp-progress__marker-dot { background: var(--scp-success); border-color: var(--scp-success); transform: scale(1.1); } .scp-progress__marker-label { position: absolute; top: 14px; font-size: 11px; font-weight: 500; color: var(--scp-muted); white-space: nowrap; transition: color 200ms ease; /* Clamp labels at the edges so they don't overflow the drawer */ max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .scp-progress__marker.is-achieved .scp-progress__marker-label { color: var(--scp-success); font-weight: 600; } /* Reduced motion — skip the dot scale and label color transitions */ @media (prefers-reduced-motion: reduce) { .scp-progress__marker-dot, .scp-progress__marker-label { transition: none; } .scp-progress__marker.is-achieved .scp-progress__marker-dot { transform: none; } } /* ============== Action area (messages, upsells) ============== */ .scp-actions-area:empty { display: none; } .scp-message { padding: 12px 16px; margin: 12px 24px; border-radius: 8px; font-size: 14px; border: 1px solid transparent; } .scp-message--info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; } .scp-message--success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .scp-message--warning { background: #fffbeb; color: #92400e; border-color: #fde68a; } .scp-upsell { margin: 12px 24px 0; padding-top: 12px; border-top: 1px solid var(--scp-border); } .scp-upsell__heading { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--scp-muted); text-transform: uppercase; letter-spacing: 0.04em; } .scp-upsell__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .scp-upsell__card { display: flex; flex-direction: column; border: 1px solid var(--scp-border); border-radius: 8px; overflow: hidden; background: var(--scp-bg); transition: border-color 150ms ease, transform 150ms ease; } .scp-upsell__card:hover { border-color: var(--scp-accent); transform: translateY(-2px); } .scp-upsell__img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--scp-border); } .scp-upsell__body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .scp-upsell__name { font-size: 13px; font-weight: 500; color: var(--scp-text); margin: 0; line-height: 1.3; } .scp-upsell__price { font-size: 13px; color: var(--scp-muted); margin: 0; font-variant-numeric: tabular-nums; } .scp-upsell__btn { margin-top: auto; background: var(--scp-text); color: var(--scp-bg); border: 0; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 150ms ease; } .scp-upsell__btn:hover { opacity: 0.85; } .scp-upsell__btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============== Items list ============== */ .scp-items { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; overscroll-behavior: contain; } .scp-items::-webkit-scrollbar { width: 6px; } .scp-items::-webkit-scrollbar-thumb { background: var(--scp-border); border-radius: 3px; } .scp-empty { padding: 48px 24px; text-align: center; color: var(--scp-muted); font-size: 14px; } .scp-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--scp-border); transition: opacity 200ms ease; } .scp-item[aria-busy="true"] { opacity: 0.5; pointer-events: none; } .scp-item--entering { animation: scp-slide-in 250ms var(--scp-ease); } .scp-item--leaving { animation: scp-slide-out 250ms var(--scp-ease) forwards; } @keyframes scp-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes scp-slide-out { from { opacity: 1; transform: translateX(0); max-height: 200px; } to { opacity: 0; transform: translateX(20px); max-height: 0; padding-top: 0; padding-bottom: 0; border: 0; } } .scp-item__image { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--scp-border); flex-shrink: 0; } .scp-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .scp-item__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .scp-item__title { font-size: 14px; font-weight: 500; color: var(--scp-text); text-decoration: none; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .scp-item__title:hover { color: var(--scp-accent); } .scp-item__variation { font-size: 12px; color: var(--scp-muted); } .scp-qty { display: inline-flex; align-items: center; border: 1px solid var(--scp-border); border-radius: 6px; overflow: hidden; height: 32px; width: fit-content; } .scp-qty button { background: transparent; border: 0; width: 28px; height: 30px; cursor: pointer; color: var(--scp-text); font-size: 16px; line-height: 1; padding: 0; transition: background-color 100ms ease; } .scp-qty button:hover:not(:disabled) { background: var(--scp-border); } .scp-qty button:disabled { opacity: 0.4; cursor: not-allowed; } .scp-qty input { width: 32px; border: 0; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; background: transparent; color: var(--scp-text); padding: 0; } .scp-qty input:focus { outline: none; } .scp-item__price { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4px; } .scp-item__price-amount { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--scp-text); } .scp-item__remove { background: transparent; border: 0; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--scp-muted); transition: color 150ms ease; } .scp-item__remove:hover { color: var(--scp-danger); } .scp-item__remove:focus-visible { outline: 2px solid var(--scp-accent); outline-offset: 1px; } /* ============== Footer ============== */ .scp-footer { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--scp-border); background: var(--scp-bg); flex-shrink: 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04); } .scp-totals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .scp-totals__row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .scp-totals__row--total { padding-top: 8px; border-top: 1px dashed var(--scp-border); font-size: 16px; } .scp-money { font-variant-numeric: tabular-nums; color: var(--scp-text); } .scp-money--negative { color: var(--scp-success); } .scp-money--pulse { animation: scp-pulse 400ms ease; } @keyframes scp-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); color: var(--scp-accent); } 100% { transform: scale(1); } } .scp-checkout { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 16px; background: var(--scp-text); color: var(--scp-bg); font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: opacity 150ms ease, transform 100ms ease; } .scp-checkout:hover { opacity: 0.9; color: var(--scp-bg); } .scp-checkout:active { transform: scale(0.99); } .scp-checkout:focus-visible { outline: 2px solid var(--scp-accent); outline-offset: 2px; } /* ============== Sticky cart button (v0.9) ============== * Customization knobs (set inline by PHP from DrawerSettings): * --scp-sticky-size circle diameter (40-80px) * --scp-sticky-offset-x distance from horizontal edge * --scp-sticky-offset-y distance from vertical edge (desktop) * --scp-sticky-offset-y-mobile distance from bottom on mobile (avoid chat widgets) * --scp-sticky-bg background color (defaults to --scp-text) * --scp-sticky-fg icon color (defaults to --scp-bg) * * The button is fixed-positioned and uses transform-only animations so it * does not trigger layout/paint on scroll. Hover state respects the user's * reduced-motion preference. */ .scp-sticky { /* Variable defaults — overridden inline when admin customizes */ --scp-sticky-size: 56px; --scp-sticky-offset-x: 24px; --scp-sticky-offset-y: 24px; --scp-sticky-offset-y-mobile: 80px; --scp-sticky-bg: var(--scp-text); --scp-sticky-fg: var(--scp-bg); position: fixed; z-index: calc(var(--scp-z) - 1); width: var(--scp-sticky-size); height: var(--scp-sticky-size); border-radius: 999px; background: var(--scp-sticky-bg); color: var(--scp-sticky-fg); border: 0; margin: 0; padding: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; will-change: transform; transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease; /* iOS Safari tap highlight removal */ -webkit-tap-highlight-color: transparent; /* Forbid text selection on the label */ user-select: none; } .scp-sticky:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28); } .scp-sticky:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; } .scp-sticky:focus-visible { outline: 2px solid var(--scp-accent); outline-offset: 4px; } /* Position variants */ .scp-sticky--bottom-right { bottom: var(--scp-sticky-offset-y); right: var(--scp-sticky-offset-x); } .scp-sticky--bottom-left { bottom: var(--scp-sticky-offset-y); left: var(--scp-sticky-offset-x); } .scp-sticky--top-right { top: var(--scp-sticky-offset-y); right: var(--scp-sticky-offset-x); } .scp-sticky--top-left { top: var(--scp-sticky-offset-y); left: var(--scp-sticky-offset-x); } /* With label (pill shape) */ .scp-sticky--with-label { width: auto; min-width: var(--scp-sticky-size); padding: 0 18px 0 14px; border-radius: 999px; } .scp-sticky--with-label .scp-sticky__icon { width: 24px; height: 24px; } .scp-sticky__icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .scp-sticky__icon svg { display: block; } .scp-sticky__label { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } /* Visually hidden screen-reader text — announces real count */ .scp-sticky__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Badge */ .scp-sticky__count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--scp-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transform: scale(0); transform-origin: center; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .scp-sticky[data-count]:not([data-count="0"]) .scp-sticky__count { transform: scale(1); } .scp-sticky[data-bumped="true"] .scp-sticky__count { animation: scp-bump 400ms ease; } @keyframes scp-bump { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } } /* Optional: hide the entire button when cart is empty */ .scp-sticky--hide-empty[data-count="0"] { opacity: 0; pointer-events: none; transform: scale(0.8); } /* Mobile — raise the bottom-pinned button so it doesn't collide with chat widgets (Tawk, Tidio, WhatsApp button, Intercom — typically anchored at bottom-right with ~16-24px offset and ~60px size). */ @media (max-width: 640px) { .scp-sticky--bottom-right, .scp-sticky--bottom-left { bottom: var(--scp-sticky-offset-y-mobile); } } /* Reduced motion — kill the bumps and scales, keep simple opacity for badge */ @media (prefers-reduced-motion: reduce) { .scp-sticky, .scp-sticky:hover, .scp-sticky:active, .scp-sticky__count { transition: none; animation: none; transform: none !important; } .scp-sticky[data-count]:not([data-count="0"]) .scp-sticky__count { transform: none !important; opacity: 1; } .scp-sticky[data-count="0"] .scp-sticky__count { opacity: 0; } } /* ============== Toast (undo / errors) ============== */ .scp-toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%) translateY(80px); z-index: calc(var(--scp-z) + 1); background: var(--scp-text); color: var(--scp-bg); padding: 12px 16px; border-radius: 8px; box-shadow: var(--scp-shadow); font-size: 14px; display: flex; align-items: center; gap: 16px; opacity: 0; transition: transform 300ms var(--scp-ease), opacity 300ms ease; max-width: 90vw; } .scp-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .scp-toast__action { background: transparent; border: 0; color: var(--scp-accent); font-weight: 600; cursor: pointer; padding: 0; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; } /* ============== Mobile ============== */ @media (max-width: 640px) { .scp-panel { width: 100vw; max-height: 95vh; top: auto; border-top-left-radius: 16px; border-top-right-radius: 16px; } .scp-handle { display: block; } .scp-header { padding-top: 12px; } .scp-drawer--right .scp-panel, .scp-drawer--left .scp-panel { right: 0; left: 0; transform: translateY(100%); } .scp-drawer[data-state="open"] .scp-panel, .scp-drawer[data-state="opening"] .scp-panel { transform: translateY(0); } .scp-sticky { width: 52px; height: 52px; } .scp-sticky--bottom-right { bottom: 16px; right: 16px; } .scp-sticky--bottom-left { bottom: 16px; left: 16px; } } /* ============== A11y ============== */ @media (prefers-reduced-motion: reduce) { .scp-panel, .scp-overlay, .scp-progress__fill, .scp-item, .scp-money--pulse, .scp-sticky__count { transition: none !important; animation: none !important; } } /* ============== RTL ============== */ [dir="rtl"] .scp-drawer--right .scp-panel { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .scp-drawer--left .scp-panel { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .scp-drawer[data-state="open"] .scp-panel { transform: translateX(0); } [dir="rtl"] .scp-sticky--bottom-right { right: auto; left: 24px; } [dir="rtl"] .scp-sticky--bottom-left { left: auto; right: 24px; } [dir="rtl"] .scp-item__price { align-items: flex-start; } [dir="rtl"] .scp-upsell__heading { text-align: right; } /* ============== Menu cart (v0.9.4) ============== * * Inline cart UI for theme nav menus + [smartcart_menu] shortcode. Shares the * sticky button's visual language (icon + count badge) but rendered inline * so it inherits theme menu typography and spacing. * * Three contexts where this can render: * - .scp-menu-cart--menu inside an

inside wp_nav_menu_items * - .scp-menu-cart--shortcode via [smartcart_menu] * - .scp-menu-cart--standalone via programmatic render call * * Themes target .menu-item a, so we use as the root. currentColor * inheritance means we don't override theme link colors — the icon inherits * whatever color the menu link has by default. */ .scp-menu-cart { position: relative; display: inline-flex; align-items: center; gap: 8px; /* Inherit menu typography. No font-size override — themes win. */ line-height: 1.2; text-decoration: none; color: inherit; transition: opacity 200ms var(--scp-ease, ease); /* Touch target on mobile (44px min per Apple HIG). Achieved via vertical padding that themes can override; we don't enforce min-height to avoid breaking very compact theme menus. */ padding: 8px 4px; -webkit-tap-highlight-color: transparent; } .scp-menu-cart:hover, .scp-menu-cart:focus-visible { opacity: 0.85; text-decoration: none; color: inherit; } .scp-menu-cart:focus-visible { outline: 2px solid var(--scp-accent, #6366f1); outline-offset: 2px; border-radius: 4px; } .scp-menu-cart__icon { display: inline-flex; align-items: center; justify-content: center; /* SVG itself is sized in PHP via width="1.25em" — currentColor handles tint */ } .scp-menu-cart__label { font-weight: inherit; } .scp-menu-cart__subtotal { font-weight: 600; font-size: 0.9em; color: inherit; opacity: 0.85; } .scp-menu-cart__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 600; line-height: 1; color: #fff; background: var(--scp-accent, #6366f1); border-radius: 999px; font-variant-numeric: tabular-nums; transition: transform 200ms var(--scp-ease, cubic-bezier(0.16, 1, 0.3, 1)); } .scp-menu-cart[data-count="0"] .scp-menu-cart__count { /* Zero is rendered but subtly de-emphasized — avoids a layout shift when the first item is added. Hide-when-empty (below) is opt-in. */ background: var(--scp-muted, #94a3b8); opacity: 0.6; } .scp-menu-cart[data-bumped="true"] .scp-menu-cart__count { transform: scale(1.25); } /* Hide-when-empty: smooth fade instead of abrupt display:none so the layout doesn't jolt when the cart empties on the same page. The 200ms is short enough to not feel laggy. */ .scp-menu-cart--hidden-empty { opacity: 0; visibility: hidden; pointer-events: none; /* Collapse so it doesn't take menu width */ width: 0; max-width: 0; margin: 0; padding: 0; overflow: hidden; } /* Mobile dedup with sticky button — when admin enabled the menu_cart_hide_sticky_mobile setting AND menu cart is rendering, hide the sticky on mobile widths. Desktop keeps both because they live in different visual zones. */ @media (max-width: 768px) { body.scp-has-menu-cart .scp-sticky { display: none; } } /* Reduced-motion */ @media (prefers-reduced-motion: reduce) { .scp-menu-cart, .scp-menu-cart__count { transition: none; } .scp-menu-cart[data-bumped="true"] .scp-menu-cart__count { transform: none; } } /* RTL: count badge sits to the left of the icon instead of right */ [dir="rtl"] .scp-menu-cart { flex-direction: row-reverse; } /* ============================================================ * Desktop drawer tightening (v0.9.5) * * Scope: ≥1024px only. Mobile (<1024px) is left exactly as it was, * per the SmartCart Pro v0.9.5 release scope — the production * screenshot showed desktop with three items eating ~40% of the * viewport because the row chrome (padding, gaps, ghost vertical * space in the right-column flex) was too loose for the panel width. * * What changes: * - Panel widens to clamp(480px, 38vw, 540px) — covers the spec range * and adapts smoothly to ultra-wide displays without going past 540px * - Item row padding 16→12 vertical, 24→20 horizontal — denser without * feeling crowded * - Image grows 64→72 px (still inside the 70-80 spec band) * - Info column gap 6→4 px — title and qty visually grouped * - Price column STAYS flex-column but loses justify-content:space-between * in favor of natural top-align + margin-top:auto on remove. This was * the actual cause of the "remove icon floating alone" — space-between * stretched to fill the (tall) row, leaving a gap. Now remove sits * right below the price amount, matching the qty control's vertical * position on the info side. * - Footer paddings tightened, totals gap reduced, checkout stays full-width * - Empty-state padding tightened (was wasting half the body on empty cart) * * What is NOT changed: * - HTML structure (zero JS changes) * - Mobile rules (untouched by definition of the media query) * - Animation timings / reduced-motion handling * - Color tokens or theme variables * ============================================================ */ @media (min-width: 1024px) { /* Drawer panel — wider, within spec band */ .scp-drawer { --scp-width: clamp(480px, 38vw, 540px); } /* Items list — tighter empty state. Mobile keeps the original 48px airy padding because mobile drawers ARE the whole screen and need the breathing room; desktop uses inline drawers where the chrome is already visible. */ .scp-empty { padding: 32px 20px; } /* Item row — denser padding, slightly larger image, tighter info gap. Grid template stays 3-col; the row height now flows from content rather than artificially stretching from the price column's space-between. */ .scp-item { grid-template-columns: 72px 1fr auto; gap: 14px; padding: 12px 20px; align-items: start; /* explicit — was implicit stretch before */ } .scp-item__image { width: 72px; height: 72px; } .scp-item__info { gap: 4px; /* was 6px — tighter visual grouping */ padding-top: 2px; /* optical alignment with the image top edge */ } .scp-item__title { font-size: 14px; line-height: 1.35; } /* Quantity control — compact width, hugs content, slightly smaller height. Buttons get more comfortable hit area than the 28x30 mobile sizing. */ .scp-qty { height: 30px; } .scp-qty button { width: 26px; height: 28px; } .scp-qty input { width: 28px; } /* Price column — natural stacking. Remove icon now sits directly under the price amount instead of being pushed to the row's bottom edge by justify-content:space-between. Aligns visually with the qty control on the info column side (your "not floating alone" requirement). */ .scp-item__price { justify-content: flex-start; gap: 8px; padding-top: 2px; /* match info column for clean baselines */ } .scp-item__remove { margin-left: auto; /* right-align within its column */ padding: 2px; } /* Footer — compact summary, full-width checkout. Reduces the "disconnected" feel by tightening padding and the totals→checkout gap. */ .scp-footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); } .scp-totals { gap: 4px; /* was 6px */ margin-bottom: 12px; /* was 16px */ } .scp-totals__row { font-size: 13px; } .scp-totals__row--total { padding-top: 6px; font-size: 15px; } .scp-checkout { width: 100%; /* explicit — themes sometimes shrink-wrap buttons */ } /* Progress bar block (free-shipping / multi-tier) — also tightens. Skip when tiered because tier labels need the lower padding budget. */ .scp-progress { padding: 12px 20px; } .scp-progress--tiered { padding-bottom: 28px; /* tier labels still need room */ } /* Drawer header — slightly tighter to give the items list more vertical room */ .scp-header { padding: 14px 20px; } }