/* ========================================================================== ARFA KHUSHBOO — slide-out cart drawer. The cart lives here now, not on a page of its own. Everything is drawn from the tokens in theme.css: black, white and grey, one sans family, the same .ak-btn and .ak-price the rest of the shop uses. Prefix is .ak-cd — .ak-drawer belongs to the mobile nav and .ak-cart to the cart page, and neither should be disturbed. ========================================================================== */ /* ------------------------------------------------------------------ scrim */ .ak-cd-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(17, 17, 17, .45); opacity: 0; pointer-events: none; transition: opacity .3s var(--ak-ease); } .ak-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. */ .ak-cd-lock, .ak-cd-lock body { overflow: hidden; } /* ------------------------------------------------------------------ panel */ .ak-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(--ak-white); color: var(--ak-ink); box-shadow: var(--ak-shadow); transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ak-ease), visibility 0s linear .3s; } .ak-cd[data-open="true"] { transform: none; visibility: visible; transition: transform .3s var(--ak-ease), visibility 0s linear 0s; } @media (min-width: 500px) { .ak-cd { width: 400px; max-width: 92vw; } } .ak-cd[data-busy="true"] .ak-cd__content { opacity: .55; pointer-events: none; } .ak-cd__content { transition: opacity .15s var(--ak-ease); } /* ------------------------------------------------------------------- head */ .ak-cd__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ak-gap); padding: .75rem var(--ak-gutter); border-bottom: 1px solid var(--ak-line); } .ak-cd__title { margin: 0; font-size: var(--ak-fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .ak-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(--ak-black); font-size: var(--ak-fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .ak-cd__close:hover { color: var(--ak-gold); } .ak-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. */ .ak-cd__content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .ak-cd__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--ak-gutter); } /* ------------------------------------------------------------------ items */ .ak-cd__items { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; } .ak-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(--ak-line); } .ak-cd__items > .ak-cd__item:last-child { border-bottom: 0; padding-bottom: 0; } .ak-cd__thumb { display: block; width: 72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ak-cream); border-radius: var(--ak-radius); } .ak-cd__thumb img { width: 100%; height: 100%; object-fit: cover; } .ak-cd__info { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; } .ak-cd__name { font-size: var(--ak-fs-base); font-weight: 600; line-height: 1.3; } .ak-cd__meta { margin: 0; font-size: var(--ak-fs-sm); color: var(--ak-muted); line-height: 1.4; } /* ---------------------------------------------------------------- stepper */ .ak-cd__qty { display: inline-flex; align-items: stretch; margin-top: .15rem; border: 1px solid var(--ak-line); border-radius: var(--ak-radius); background: var(--ak-white); } .ak-cd__step { display: inline-grid; place-items: center; width: 44px; min-height: 44px; border: 0; background: none; color: var(--ak-black); font-size: 1rem; line-height: 1; } .ak-cd__step:hover { background: var(--ak-cream); } .ak-cd__step[disabled] { color: var(--ak-gold-soft); cursor: not-allowed; } .ak-cd__count { width: 46px; min-height: 44px; padding: 0 .15rem; border: 0; border-inline: 1px solid var(--ak-line); background: none; color: var(--ak-ink); font-family: inherit; font-size: var(--ak-fs-sm); font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; } .ak-cd__count::-webkit-outer-spin-button, .ak-cd__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ak-cd__count:focus-visible { outline: 2px solid var(--ak-gold); outline-offset: -2px; } .ak-cd__remove { min-height: 32px; padding: 0; border: 0; background: none; color: var(--ak-muted); font-size: var(--ak-fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .ak-cd__remove:hover { color: var(--ak-black); } .ak-cd__line { text-align: end; white-space: nowrap; font-size: var(--ak-fs-sm); } /* ------------------------------------------------------------------ empty */ .ak-cd__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 50vh; text-align: center; } .ak-cd__empty-line { margin: 0; font-size: var(--ak-fs-md); font-weight: 600; } .ak-cd__empty-note { margin: 0 0 1rem; font-size: var(--ak-fs-sm); color: var(--ak-muted); } /* ------------------------------------------------------------------- foot */ .ak-cd__foot { flex: none; padding: var(--ak-gutter); border-top: 1px solid var(--ak-line); background: var(--ak-white); padding-bottom: max(var(--ak-gutter), env(safe-area-inset-bottom)); } .ak-cd__totals { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ak-gap); } .ak-cd__totals-label { font-size: var(--ak-fs-xs); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .ak-cd__totals-value { font-size: var(--ak-fs-md); } .ak-cd__note { margin: .35rem 0 1rem; font-size: var(--ak-fs-sm); color: var(--ak-muted); } .ak-cd__checkout { width: 100%; } /* --------------------------------------------------------- button loading */ .ak-cd-loading { position: relative; pointer-events: none; opacity: .7; } @media (prefers-reduced-motion: reduce) { .ak-cd, .ak-cd-scrim, .ak-cd__content { transition: none !important; } }