/* ========================================================================== Alice Academy — slide-out bag drawer. The bag lives here now, not on a page of its own. Everything is drawn from the tokens in theme.css: warm neutral grounds, ink text, rose the single accent, Archivo display headings, the same .aa-btn and .aa-price the rest of the shop uses. Prefix is .aa-cd — .aa-drawer belongs to the mobile nav and .aa-cart to the cart page, and neither should be disturbed. ========================================================================== */ /* ------------------------------------------------------------------ scrim */ .aa-cd-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(22, 18, 26, .45); opacity: 0; pointer-events: none; transition: opacity .3s var(--aa-ease); } .aa-cd-scrim[data-open="true"] { opacity: 1; pointer-events: auto; } /* Scroll lock. Set on so the class survives the mobile nav clearing its own inline overflow. */ .aa-cd-lock, .aa-cd-lock body { overflow: hidden; } /* ------------------------------------------------------------------ panel */ .aa-cd { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 120; display: flex; flex-direction: column; width: 100%; max-width: 100%; background: var(--aa-surface); color: var(--aa-ink); box-shadow: var(--aa-shadow); transform: translateX(100%); visibility: hidden; transition: transform .3s var(--aa-ease), visibility 0s linear .3s; } .aa-cd[data-open="true"] { transform: none; visibility: visible; transition: transform .3s var(--aa-ease), visibility 0s linear 0s; } @media (min-width: 500px) { .aa-cd { width: 400px; max-width: 92vw; } } .aa-cd[data-busy="true"] .aa-cd__content { opacity: .55; pointer-events: none; } .aa-cd__content { transition: opacity .15s var(--aa-ease); } /* ------------------------------------------------------------------- head */ .aa-cd__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--aa-gap); padding: .75rem var(--aa-gutter); border-bottom: 1px solid var(--aa-hairline); } .aa-cd__title { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--aa-font-display, 'Archivo', sans-serif); font-size: var(--aa-fs-md); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aa-ink); } .aa-cd__bag { width: 18px; height: 18px; flex: none; color: var(--aa-rose); } .aa-cd__close { display: inline-flex; align-items: center; justify-content: flex-end; gap: .45rem; min-height: 44px; min-width: 44px; margin-inline-end: -.5rem; padding: 0 .5rem; border: 0; background: none; color: var(--aa-ink); font-size: var(--aa-fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .aa-cd__close:hover { color: var(--aa-rose); } .aa-cd__close-x { font-size: 1.15rem; line-height: 1; } /* ---------------------------------------------------------------- content */ /* The body is swapped wholesale by ajax, so the flex chain that keeps the footer pinned has to start on the wrapper the JS never replaces. */ .aa-cd__content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .aa-cd__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--aa-gutter); } /* ------------------------------------------------------------------ items */ .aa-cd__items { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; } .aa-cd__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding-bottom: 1.25rem; border-bottom: 1px solid var(--aa-hairline); } .aa-cd__items > .aa-cd__item:last-child { border-bottom: 0; padding-bottom: 0; } .aa-cd__thumb { display: block; width: 72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--aa-surface-soft); border-radius: var(--aa-radius); } .aa-cd__thumb img { width: 100%; height: 100%; object-fit: cover; } .aa-cd__info { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; } .aa-cd__name { font-size: var(--aa-fs-base); font-weight: 600; line-height: 1.3; } .aa-cd__meta { margin: 0; font-size: var(--aa-fs-sm); color: var(--aa-muted); line-height: 1.4; } /* ---------------------------------------------------------------- stepper */ .aa-cd__qty { display: inline-flex; align-items: stretch; margin-top: .15rem; border: 1px solid var(--aa-hairline); border-radius: var(--aa-radius); background: var(--aa-surface); } .aa-cd__step { display: inline-grid; place-items: center; width: 44px; min-height: 44px; border: 0; background: none; color: var(--aa-ink); font-size: 1rem; line-height: 1; } .aa-cd__step:hover { background: var(--aa-surface-soft); } .aa-cd__step[disabled] { color: var(--aa-sand); cursor: not-allowed; } .aa-cd__count { width: 46px; min-height: 44px; padding: 0 .15rem; border: 0; border-inline: 1px solid var(--aa-hairline); background: none; color: var(--aa-ink); font-family: inherit; font-size: var(--aa-fs-sm); font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; } .aa-cd__count::-webkit-outer-spin-button, .aa-cd__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .aa-cd__count:focus-visible { outline: 2px solid var(--aa-rose); outline-offset: -2px; } .aa-cd__remove { min-height: 32px; padding: 0; border: 0; background: none; color: var(--aa-muted); font-size: var(--aa-fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .aa-cd__remove:hover { color: var(--aa-ink); } .aa-cd__line { text-align: end; white-space: nowrap; font-size: var(--aa-fs-sm); } /* ------------------------------------------------------------------ empty */ .aa-cd__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 50vh; text-align: center; } .aa-cd__empty-line { margin: 0; font-size: var(--aa-fs-md); font-weight: 600; } .aa-cd__empty-note { margin: 0 0 1rem; font-size: var(--aa-fs-sm); color: var(--aa-muted); } /* ------------------------------------------------------------------- foot */ .aa-cd__foot { flex: none; padding: var(--aa-gutter); border-top: 1px solid var(--aa-hairline); background: var(--aa-surface); padding-bottom: max(var(--aa-gutter), env(safe-area-inset-bottom)); } .aa-cd__totals { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aa-gap); } .aa-cd__totals-label { font-size: var(--aa-fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .aa-cd__totals-value { font-size: var(--aa-fs-md); } .aa-cd__note { margin: .35rem 0 1rem; font-size: var(--aa-fs-sm); color: var(--aa-muted); } .aa-cd__checkout { width: 100%; } .aa-cd__viewbag { width: 100%; margin-top: .6rem; } /* --------------------------------------------------------- button loading */ .aa-cd-loading { position: relative; pointer-events: none; opacity: .7; } @media (prefers-reduced-motion: reduce) { .aa-cd, .aa-cd-scrim, .aa-cd__content { transition: none !important; } }