/* ── Ikura basket modal ─────────────────────────────────
   Centered panel with blurred backdrop via .ik-drawer::before
──────────────────────────────────────────────────────── */

/* Motion tokens — iOS-like hierarchy (micro → content → nav → personality) */
.ik-drawer {
    --ik-motion-instant: 0ms;
    --ik-motion-fast: 120ms;
    --ik-motion-normal: 220ms;
    --ik-motion-slow: 300ms;
    --ik-motion-celebration: 900ms;
    --ik-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ik-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ik-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ik-ease-press: cubic-bezier(0.2, 0, 0, 1);
}

body.ik-drawer-open {
    overflow: hidden;
    overscroll-behavior: none;
}

html.ik-drawer-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* full-screen overlay */
.ik-drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--ik-motion-normal) var(--ik-ease-out),
        visibility var(--ik-motion-normal) var(--ik-ease-out);
}

.ik-drawer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ik-drawer.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/* Closed drawer: block descendant hit-targets. Children that force
   visibility:visible + pointer-events:auto (e.g. .ik-basket__mode) would
   otherwise sit invisible over the page and steal footer clicks/hover. */
.ik-drawer:not(.is-open) * {
    pointer-events: none !important;
}

/* centered panel */
.ik-drawer__panel {
    position: relative;
    z-index: 1;
    width: 800px;
    max-width: min(800px, calc(100vw - 32px));
    height: min(680px, calc(100dvh - 32px));
    max-height: min(680px, calc(100dvh - 32px));
    background: var(--color-bg-page);
    border: var(--border-width) solid var(--color-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    transform: scale(0.98) translateY(12px);
    transition: transform var(--ik-motion-slow) var(--ik-ease-out);
}

@media (min-width: 641px) {
    .ik-drawer[data-screen="confirm"] .ik-drawer__panel {
        height: min(780px, calc(100dvh - 24px));
        max-height: min(780px, calc(100dvh - 24px));
    }
}

.ik-drawer.is-open .ik-drawer__panel {
    transform: scale(1) translateY(0);
}

/* ── header ───────────────────────────────────────────── */
.ik-drawer__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    background: var(--color-bg-surface);
    border-bottom: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
}

.ik-drawer__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.ik-drawer__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: left;
}

.ik-drawer__crumbs {
    width: 100%;
}

.ik-drawer__crumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ik-drawer__crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text-disabled);
}

.ik-drawer__crumb-icon {
    flex-shrink: 0;
    width: 10px;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    color: inherit;
    opacity: 0.75;
}

.ik-drawer__crumb-icon[hidden] {
    display: none;
}

.ik-drawer__crumb-label {
    min-width: 0;
}

.ik-drawer__crumb:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    color: var(--color-text-disabled);
    opacity: 0.65;
    font-weight: 400;
}

.ik-drawer__crumb.is-done {
    color: var(--color-text-disabled);
}

.ik-drawer__crumb.is-done .ik-drawer__crumb-icon {
    color: var(--color-accent);
    opacity: 0.9;
}

.ik-drawer__crumb.is-active {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.ik-drawer__crumb.is-active .ik-drawer__crumb-icon {
    opacity: 1;
}

.ik-drawer__crumb.is-failed {
    color: color-mix(in srgb, #c62828 70%, var(--color-text-secondary));
}

.ik-drawer__crumb.is-failed .ik-drawer__crumb-icon {
    color: #c62828;
    opacity: 1;
}

.ik-drawer__lead {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.ik-drawer__lead-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

.ik-drawer__lead-mark i,
.ik-drawer__lead .ik-drawer__back i {
    display: block;
    width: 1em;
    text-align: center;
}

.ik-drawer__lead .ik-drawer__back {
    position: absolute;
    inset: 0;
}

.ik-drawer__lead.is-back .ik-drawer__lead-mark {
    visibility: hidden;
}

.ik-drawer__lead.is-confirm .ik-drawer__lead-mark {
    visibility: visible;
}

.ik-drawer__lead.is-spacer .ik-drawer__lead-mark {
    visibility: hidden;
}

.ik-drawer__lead.is-confirm-waiting .ik-drawer__lead-mark {
    color: var(--color-text-secondary);
    opacity: 0.88;
}

.ik-drawer__lead.is-confirm-timeout .ik-drawer__lead-mark {
    color: #c62828;
}

.ik-drawer__lead.is-confirm-done .ik-drawer__lead-mark {
    color: color-mix(in srgb, #4caf50 72%, var(--color-accent));
}

.ik-drawer__lead:not(.is-back) .ik-drawer__back {
    visibility: hidden;
    pointer-events: none;
}

.ik-drawer__back,
.ik-drawer__action {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    flex-shrink: 0;
    transition: color 0.15s, opacity 0.15s;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
}

.ik-drawer__promo-clear {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    flex-shrink: 0;
    transition: color 0.15s, opacity 0.15s;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.ik-drawer__promo-clear:hover,
.ik-drawer__promo-clear:focus-visible {
    color: var(--color-text-secondary);
    background: transparent;
    outline: none;
}

.ik-drawer__promo-clear-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    line-height: 1;
}

.ik-drawer__promo-clear-icon {
    font-size: 15px;
    line-height: 1;
}

.ik-drawer__promo-clear-slash {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 1.35em;
    height: 2.5px;
    margin-left: -0.675em;
    margin-top: -1.25px;
    background: #c4121a;
    border-radius: 2px;
    transform: rotate(-32deg) scaleX(1);
    transform-origin: center;
    opacity: 1;
    pointer-events: none;
    box-shadow: 0 0 0 0.5px #c4121a;
}

/* Desktop with real hover: hide strike until hover; allow X roll */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
    .ik-drawer__promo-clear-slash {
        transform: rotate(-32deg) scaleX(0);
        opacity: 0;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .ik-drawer__promo-clear:hover .ik-drawer__promo-clear-slash,
    .ik-drawer__promo-clear:focus-visible .ik-drawer__promo-clear-slash {
        transform: rotate(-32deg) scaleX(1);
        opacity: 1;
    }

    .ik-drawer__close i {
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ik-drawer__close:hover i {
        transform: rotate(90deg);
    }

    .ik-drawer__action:not(.is-slot-hidden):not(.is-disabled):not(:disabled) i {
        display: block;
        transform-origin: 50% 60%;
        transition: color 0.15s ease;
    }

    .ik-drawer__action:not(.is-slot-hidden):not(.is-disabled):not(:disabled):hover i,
    .ik-drawer__action:not(.is-slot-hidden):not(.is-disabled):not(:disabled):focus-visible i {
        color: var(--color-accent);
        animation: ik-clear-basket-wiggle 0.7s cubic-bezier(0.34, 1.35, 0.64, 1);
    }
}

@keyframes ik-clear-basket-wiggle {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    18% {
        transform: rotate(-14deg) translateY(-1px);
    }
    36% {
        transform: rotate(12deg) translateY(-2px);
    }
    54% {
        transform: rotate(-8deg) translateY(-1px);
    }
    72% {
        transform: rotate(5deg) translateY(0);
    }
    100% {
        transform: rotate(0deg) translateY(0);
    }
}

.ik-drawer__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.ik-drawer__actions-sep {
    display: none;
    width: 1px;
    height: 14px;
    margin: 0 6px;
    background: var(--color-border);
    flex-shrink: 0;
}

.ik-drawer__actions-sep.is-visible {
    display: inline-block;
}

.ik-drawer__actions-sep[hidden] {
    display: none !important;
}

.ik-drawer__action.is-slot-hidden,
.ik-drawer__promo-clear.is-slot-hidden {
    visibility: hidden;
    pointer-events: none;
}

.ik-drawer__action.is-disabled,
.ik-drawer__action:disabled {
    color: var(--color-text-disabled);
    opacity: 0.42;
    cursor: default;
    pointer-events: none;
}

.ik-drawer__promo-clear[hidden] {
    display: none;
}

/* QR promo remove — app-style bottom sheet */
.ik-promo-confirm {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.ik-promo-confirm.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.ik-promo-confirm[hidden] {
    display: none !important;
}

.ik-promo-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(10 8 6 / 52%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ik-promo-confirm__sheet {
    position: relative;
    z-index: 1;
    width: min(22.5rem, 100%);
    padding: 1.55rem 1.4rem 1.3rem;
    border-radius: 22px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-surface) 92%, #fff) 0%, var(--color-bg-surface) 100%);
    color: var(--color-text-primary);
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 35%) inset,
        0 18px 48px rgb(0 0 0 / 28%);
    transform: scale(0.94);
    opacity: 0;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
}

.ik-promo-confirm.is-open .ik-promo-confirm__sheet {
    transform: scale(1);
    opacity: 1;
}

.ik-promo-confirm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 1.15rem;
    border-radius: 1.05rem;
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-page));
    color: var(--color-accent);
}

.ik-promo-confirm__icon-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
}

.ik-promo-confirm__icon-mark i {
    font-size: 1.35rem;
    line-height: 1;
}

.ik-promo-confirm__icon-slash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 135%;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-42deg);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-bg-surface) 70%, transparent);
}

.ik-promo-confirm__title {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.ik-promo-confirm__active {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-bg-page) 72%, var(--color-bg-surface));
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    text-align: center;
}

.ik-promo-confirm__active[hidden] {
    display: none !important;
}

.ik-promo-confirm__active-label {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    line-height: 1.2;
}

.ik-promo-confirm__active-value {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
    white-space: pre-line;
    word-break: break-word;
}

.ik-promo-confirm__lead {
    margin: 0 0 1.35rem;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ik-promo-confirm__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ik-promo-confirm__btn {
    appearance: none;
    border: 0;
    border-radius: 14px;
    min-height: 3rem;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    line-height: 1.1;
    width: 100%;
    transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.15s ease;
}

.ik-promo-confirm__btn:active {
    transform: scale(0.98);
}

.ik-promo-confirm__btn--ok {
    background: var(--color-accent);
    color: #fff;
}

.ik-promo-confirm__btn--ok:hover {
    background: var(--color-accent-hover, var(--color-accent));
}

.ik-promo-confirm__btn--cancel {
    background: transparent;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.ik-promo-confirm__btn--cancel:hover {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-text-secondary) 8%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .ik-promo-confirm,
    .ik-promo-confirm__sheet,
    .ik-promo-confirm__btn {
        transition: none;
    }

    .ik-promo-confirm__sheet {
        transform: none;
    }
}

.ik-drawer__close-wrap {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.ik-drawer__close {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-button);
    transition: color 0.15s;
    font-size: 17px;
    position: relative;
    z-index: 1;
}

.ik-drawer__close i {
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    transform-origin: center;
}

.ik-drawer__close-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ik-drawer__close-wrap.is-counting .ik-drawer__close-ring {
    opacity: 1;
}

.ik-drawer__close-ring-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 2;
    opacity: 0.45;
}

.ik-drawer__close-ring-progress {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
}

/* Progress driven by JS time (Date.now) so throttled tabs stay accurate */
.ik-drawer__close-wrap.is-counting .ik-drawer__close-ring-progress {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ik-drawer__close-wrap.is-counting .ik-drawer__close-ring {
        opacity: 0.55;
    }
}

.ik-drawer__back  { color: var(--color-accent); }
.ik-drawer__back:hover  { opacity: 0.75; }
.ik-drawer__action:hover { color: var(--color-accent); }
.ik-drawer__close:hover { color: var(--color-text-primary); }
@media (prefers-reduced-motion: reduce) {
    .ik-drawer__promo-clear-slash,
    .ik-drawer__close i,
    .ik-drawer__action i {
        transition: none !important;
    }
    .ik-drawer__close:hover i {
        transform: none !important;
    }
    .ik-drawer__action:not(.is-slot-hidden):not(.is-disabled):not(:disabled):hover i,
    .ik-drawer__action:not(.is-slot-hidden):not(.is-disabled):not(:disabled):focus-visible i {
        animation: none !important;
    }
}

.ik-drawer__close:disabled,
.ik-drawer__close-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.ik-drawer__close-btn:disabled {
    background: color-mix(in srgb, var(--color-accent) 45%, var(--color-bg-surface));
    color: color-mix(in srgb, var(--color-text-primary) 70%, var(--color-text-disabled));
}

/* ── screens ──────────────────────────────────────────── */
.ik-screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: absolute;
    inset: 48px 0 0 0;
    transition:
        transform var(--ik-motion-slow) var(--ik-ease-out),
        opacity var(--ik-motion-normal) var(--ik-ease-out);
}

.ik-screen--active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
}

.ik-screen--left {
    transform: translateX(-40%);
    opacity: 0;
    pointer-events: none;
}

.ik-screen--right {
    transform: translateX(40%);
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ik-drawer,
    .ik-drawer__panel,
    .ik-screen {
        transition-duration: 0.01ms !important;
    }

    .ik-screen--left,
    .ik-screen--right {
        transform: none;
    }
}

/* ── basket screen ────────────────────────────────────── */
.ik-basket__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1.15fr);
    flex: 1;
    min-height: 0;
}

.ik-basket__layout.is-single,
.ik-basket__layout.is-empty {
    grid-template-columns: 1fr;
}

.ik-basket__layout.is-empty .ik-basket__aside {
    display: none;
}

.ik-basket__layout.is-single .ik-basket__list,
.ik-basket__layout.is-empty .ik-basket__list {
    border-right: none;
}

.ik-basket__layout.is-empty .ik-basket__list {
    justify-content: center;
    align-items: center;
}

.ik-basket__list {
    position: relative;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: var(--border-width) solid var(--color-border);
}

.ik-basket__empty-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.ik-basket__layout.is-empty .ik-basket__empty-sky.is-on {
    opacity: 1;
    visibility: visible;
}

.ik-basket__empty-sky-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.ik-basket__list-shell {
    position: relative;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Soft fade at the bottom of the scroll column — only while more content below */
.ik-basket__layout:not(.is-empty) .ik-basket__list-shell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ik-motion-normal) var(--ik-ease-out);
    background: linear-gradient(
        to top,
        var(--color-bg-page) 0%,
        color-mix(in srgb, var(--color-bg-page) 72%, transparent) 42%,
        transparent 100%
    );
}

.ik-basket__layout:not(.is-empty) .ik-basket__list-shell.has-more-below::after {
    opacity: 1;
}

.ik-basket__list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.ik-basket__aside {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 0;
    gap: 0;
    background: var(--color-bg-page);
    overflow: hidden;
}

.ik-basket__aside-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ik-basket__aside .ik-basket__checkout-panel {
    flex-shrink: 0;
}

.ik-basket__checkout {
    flex-shrink: 0;
    margin: 10px 12px 12px;
}

.ik-basket__checkout.ik-btn-primary[hidden],
.ik-basket__layout.is-empty ~ .ik-basket__checkout {
    display: none !important;
}

@media (min-width: 641px) {
    .ik-screen--basket.ik-screen--active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 1.15fr);
        grid-template-rows: minmax(0, 1fr) auto;
        row-gap: 12px;
        min-height: 0;
        overflow: hidden;
    }

    .ik-basket__layout {
        display: contents;
    }

    .ik-basket__list-shell {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .ik-basket__list {
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 28px;
    }

    .ik-basket__aside {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
        overflow: hidden;
    }

    .ik-basket__aside-scroll {
        flex: 1 1 0;
        min-height: 0;
        padding: 12px 12px 0;
    }

    .ik-basket__aside .ik-basket__checkout-panel {
        padding: 10px 12px 0;
        flex: 0 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .ik-slots__grid:not(.is-collapsed) {
        max-height: min(200px, 30dvh);
    }

    .ik-basket__checkout.ik-btn-primary {
        grid-column: 2;
        grid-row: 2;
        box-sizing: border-box;
        width: auto;
        max-width: none;
        justify-self: stretch;
        align-self: stretch;
        margin: 0 12px 12px;
    }

    .ik-basket__layout.is-empty .ik-basket__list,
    .ik-basket__layout.is-single .ik-basket__list {
        grid-column: 1 / -1;
        grid-row: 1;
        border-right: none;
    }

    .ik-basket__layout.is-empty .ik-basket__list-shell,
    .ik-basket__layout.is-single .ik-basket__list-shell {
        grid-column: 1 / -1;
    }
}

/* totals */
.ik-basket__totals {
    margin: 0;
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-shrink: 0;
    min-height: 108px;
}

.ik-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    min-height: 18px;
}

.ik-totals__row--fee.is-reserved {
    visibility: hidden;
}

.ik-totals__row--promo.is-reserved {
    visibility: hidden;
}

.ik-totals__row--fee.animate__feeIn,
.ik-totals__row--promo.animate__feeIn {
    animation: ik-fee-fadeIn var(--ik-motion-fast) var(--ik-ease-out) both;
}

.ik-totals__row--fee.animate__feeOut,
.ik-totals__row--promo.animate__feeOut {
    animation: ik-fee-fadeOut var(--ik-motion-fast) var(--ik-ease-in) both;
}

@keyframes ik-fee-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ik-fee-fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-basket__mode,
    .ik-basket__cash-ack,
    .ik-basket__mode-slot.is-cash-pending .ik-basket__mode,
    .ik-basket__mode-slot.is-cash-pending .ik-basket__cash-ack,
    .ik-basket__times,
    .ik-basket__times.is-cash-gated {
        transition: none;
        transition-delay: 0s;
    }

    .ik-cash-ack__input:checked + .ik-cash-ack__mark {
        animation: none;
    }

    .ik-totals__row--fee.animate__feeIn,
    .ik-totals__row--fee.animate__feeOut,
    .ik-totals__row--promo.animate__feeIn,
    .ik-totals__row--promo.animate__feeOut {
        animation: none;
    }
}

.ik-totals__row--fee span:last-child {
    color: var(--color-text-secondary);
}

.ik-totals__divider {
    height: 0.5px;
    background: var(--color-border);
    margin: 2px 0;
}

.ik-totals__row--total span:first-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ik-totals__row--total span:last-child {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-accent);
}

.ik-basket__empty {
    position: relative;
    z-index: 1;
    flex: 0 1 auto;
    width: 100%;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 20px 30px;
    background-color: var(--color-bg-card);
    border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    border-radius: var(--radius-card);
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.ik-basket__empty.is-appear {
    animation: ik-empty-in var(--ik-motion-normal) var(--ik-ease-out) both;
}

@keyframes ik-empty-in {
    from {
        opacity: 0;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ik-basket__empty-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: var(--color-text-primary);
}

.ik-basket__empty-mascot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 280px;
}

.ik-basket__empty-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 252px;
    height: auto;
    max-height: 144px;
    object-fit: contain;
    object-position: 46% 50%;
    opacity: 0.9;
    animation: ik-empty-mascot-float 4.8s ease-in-out infinite;
    will-change: transform;
}

.ik-basket__empty-shadow {
    display: block;
    width: 148px;
    height: 20px;
    margin-top: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.32) 40%,
        rgba(0, 0, 0, 0.1) 62%,
        transparent 78%
    );
    transform-origin: center center;
    animation: ik-empty-mascot-shadow 4.8s ease-in-out infinite;
    will-change: transform, opacity;
    pointer-events: none;
}

@keyframes ik-empty-mascot-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes ik-empty-mascot-shadow {
    0%,
    100% {
        transform: scale(1, 1);
        opacity: 0.85;
    }

    50% {
        transform: scale(0.68, 0.78);
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-basket__empty.is-appear {
        animation: none;
    }

    .ik-basket__empty-img,
    .ik-basket__empty-shadow {
        animation: none;
        will-change: auto;
    }

    .ik-basket__empty-shadow {
        opacity: 0.7;
        transform: none;
    }

    .ik-basket__empty-sky {
        transition: none;
    }
}

.ik-basket__empty-hint {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 260px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ik-basket__empty-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(100%, 220px);
    margin-top: 4px;
    padding: 12px 20px;
    cursor: pointer;
}

@media (min-width: 641px) {
    .ik-basket__layout.is-empty .ik-basket__list {
        padding: 28px 20px 34px;
        align-items: center;
    }

    .ik-basket__empty {
        width: 100%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        padding: 32px 28px 34px;
        gap: 16px;
    }
}

.ik-basket__item {
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}

.ik-basket__item-img {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
}

.ik-basket__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ik-basket__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ik-basket__item-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ik-basket__item-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em 0.45em;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    color: var(--color-accent);
}

.ik-basket__item.is-gift .ik-basket__item-price {
    color: var(--color-accent);
}

.ik-basket__item-was {
    text-decoration: line-through;
    opacity: 0.55;
    font-weight: 400;
}

.ik-basket__item-free {
    font-weight: 600;
}

.ik-basket__item-gift-badge {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.9;
}

.ik-totals__row--promo.is-action {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.ik-totals__row--promo.is-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ik-basket__item-unit {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-disabled);
}

.ik-basket__qty {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.ik-basket__qbtn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: var(--border-width) solid #444;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ik-motion-fast) var(--ik-ease-press), transform var(--ik-motion-fast) var(--ik-ease-press);
    -webkit-tap-highlight-color: transparent;
}

.ik-basket__qbtn:active {
    transform: scale(0.92);
}

.ik-basket__qbtn:hover { background: #333; }

.ik-basket__qnum {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    min-width: 18px;
    text-align: center;
}

/* checkout panel: mode + slots + button */
.ik-basket__checkout-panel {
    --ik-cash-fade-in: var(--ik-motion-fast) var(--ik-ease-in);
    --ik-cash-fade-out: var(--ik-motion-fast) var(--ik-ease-out);
    --ik-cash-times-unfade-delay: var(--ik-motion-fast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.ik-basket__times {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    opacity: 1;
    transition: opacity var(--ik-motion-fast) var(--ik-ease-out);
}

.ik-basket__times.is-cash-gated {
    opacity: 0.4;
    pointer-events: none;
}

.ik-basket__times .ik-field__label {
    display: block;
    min-height: 12px;
    margin: 0;
    padding: 0;
    line-height: 12px;
}

.ik-basket__slots {
    min-height: 0;
}

.ik-slots {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ik-basket__mode .ik-seg__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--mode-row-pad-x);
    font-size: var(--mode-row-font);
    line-height: var(--mode-row-lh);
    font-weight: 500;
    box-sizing: border-box;
}

.ik-slot {
    border-radius: var(--radius-button);
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 500;
}

.ik-basket__slots .ik-slots__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.ik-basket__mode-slot {
    --mode-row-pad-y: 9px;
    --mode-row-pad-x: 6px;
    --mode-row-pad-start-cash: 10px;
    --mode-row-font: 12px;
    --mode-row-lh: 1.25;
    --mode-row-h: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--mode-row-h);
    position: relative;
    border-radius: var(--radius-button);
    background: var(--color-bg-surface);
    overflow: hidden;
}

.ik-basket__mode,
.ik-basket__cash-ack {
    grid-area: 1 / 1;
    width: 100%;
    height: var(--mode-row-h);
    max-height: var(--mode-row-h);
    box-sizing: border-box;
    transition:
        opacity var(--ik-motion-fast) var(--ik-ease-out),
        transform var(--ik-motion-fast) var(--ik-ease-out),
        visibility 0s linear 0.12s;
}

.ik-basket__mode {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ik-basket__cash-ack {
    display: flex;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    box-sizing: border-box;
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-button);
}

.ik-basket__mode-slot.is-cash-pending .ik-basket__mode {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity var(--ik-motion-fast) var(--ik-ease-out),
        transform var(--ik-motion-fast) var(--ik-ease-out),
        visibility 0s linear 0.12s;
}

.ik-basket__mode-slot.is-cash-pending .ik-basket__cash-ack {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity var(--ik-motion-fast) var(--ik-ease-out),
        transform var(--ik-motion-fast) var(--ik-ease-out),
        visibility 0s linear 0s;
}

.ik-basket__mode .ik-seg {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.ik-cash-ack {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 var(--mode-row-pad-x);
    padding-left: var(--mode-row-pad-start-cash);
    font-size: var(--mode-row-font);
    font-weight: 500;
    line-height: var(--mode-row-lh);
    color: var(--color-text-secondary);
    user-select: none;
    box-sizing: border-box;
}

.ik-cash-ack__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.ik-cash-ack__control {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--mode-row-font) * var(--mode-row-lh));
    height: calc(var(--mode-row-font) * var(--mode-row-lh));
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ik-cash-ack__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.ik-cash-ack__mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-page);
    box-sizing: border-box;
    pointer-events: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ik-cash-ack__input:checked + .ik-cash-ack__mark {
    background: var(--color-accent);
    border-color: var(--color-accent);
    animation: ik-cash-check-pop 0.1s ease-out;
}

@keyframes ik-cash-check-pop {
    from {
        transform: scale(0.92);
    }

    to {
        transform: scale(1);
    }
}

.ik-cash-ack__input:checked + .ik-cash-ack__mark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid var(--color-text-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.ik-cash-ack__input:focus-visible + .ik-cash-ack__mark {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.ik-cash-ack-dismiss {
    flex: 0 0 auto;
    align-self: stretch;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: var(--border-width) solid var(--color-border);
    background: transparent;
    color: var(--color-text-disabled);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.ik-cash-ack-dismiss:hover {
    color: var(--color-text-secondary);
    background: color-mix(in srgb, var(--color-border) 35%, transparent);
}

.ik-basket__cash-ack.is-invalid {
    border-color: var(--color-danger, #c0392b);
}

.ik-basket__cash-ack.is-invalid .ik-cash-ack__text {
    color: var(--color-danger, #c0392b);
}

.ik-basket__cash-ack.is-invalid .ik-cash-ack__mark {
    border-color: var(--color-danger, #c0392b);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-danger, #c0392b) 35%, transparent);
}

/* ── order screen ─────────────────────────────────────── */
.ik-screen--order .ik-screen__body {
    overflow: hidden;
}

.ik-screen__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ik-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ik-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 10px;
    align-items: end;
    overflow: visible;
}

.ik-field--grow-col {
    min-width: 0;
}

.ik-field--guests {
    overflow: visible;
}

.ik-field--guests .ik-field__label-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 15px;
}

.ik-field--guests .ik-field__label {
    flex: 1;
    min-width: 0;
}

.ik-field__info {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--color-text-disabled);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.15s;
}

.ik-field__info:hover,
.ik-field__info.is-open {
    color: var(--color-accent);
}

.ik-field__info-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(240px, 70vw);
    z-index: 12;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.ik-field--guests .ik-field__input {
    text-align: center;
}

.ik-field__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-disabled);
}

.ik-field__input {
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-text-primary);
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.15s;
}

.ik-field__input::placeholder { color: var(--color-text-disabled); }
.ik-field__input:focus { border-color: var(--color-accent); }

.ik-field.is-invalid .ik-field__input,
.ik-cond.is-invalid .ik-field__input,
.ik-field__input.is-invalid {
    border-color: #d94a4a;
}

.ik-basket__times.is-invalid .ik-basket__slots,
.ik-basket__times.is-invalid .ik-slots__grid {
    box-shadow: inset 0 0 0 1px #d94a4a;
    border-radius: 6px;
}

.ik-form-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: #d94a4a;
}

.ik-form-error--basket {
    margin: 0 0 6px;
}

.ik-form-error--order {
    margin-bottom: 8px;
}

.ik-field--grow {
    flex: 1;
    min-height: 0;
}

.ik-field__textarea {
    flex: 1;
    min-height: 120px;
    resize: none;
    line-height: 1.45;
}

/* segmented control */
.ik-seg {
    display: flex;
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-button);
    overflow: hidden;
}

.ik-seg__opt {
    flex: 1;
    text-align: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ik-seg__opt.is-active {
    background: var(--color-accent);
    color: var(--color-text-primary);
}

/* conditional blocks */
.ik-cond {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.ik-cond.is-show {
    display: flex;
}

.ik-cond .ik-field__input + .ik-field__input {
    margin-top: 6px;
}

.ik-addr-field {
    position: relative;
}

.ik-addr-suggest {
    position: fixed;
    z-index: 10005;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    pointer-events: auto;
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.ik-addr-suggest__item {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}

.ik-addr-suggest__item:hover,
.ik-addr-suggest__item.is-active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-accent);
}

/* time slots */
.ik-slots__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    align-items: stretch;
}

.ik-slots__actions .ik-slot {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ik-slots__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 5px;
}

.ik-slots__grid.is-collapsed {
    display: none;
}

.ik-slots__grid:not(.is-collapsed) {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    max-height: min(220px, 32dvh);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #666666 #272727;
}

.ik-slots__grid.is-reveal .ik-slot.is-cascade {
    opacity: 0;
}

.ik-slots__grid.is-reveal .ik-slot.is-cascade.is-visible {
    animation-name: ik-slot-cascade;
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--slot-i, 0) * 30ms);
}

@keyframes ik-slot-cascade {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.92);
    }

    60% {
        opacity: 1;
        transform: translateY(-3px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ik-slot--schedule i {
    transition: transform var(--ik-motion-fast) var(--ik-ease-out);
}

.ik-slots__grid:not(.is-collapsed)::-webkit-scrollbar {
    width: 5px;
}

.ik-slots__grid:not(.is-collapsed)::-webkit-scrollbar-track {
    background: #272727;
    border-radius: 999px;
}

.ik-slots__grid:not(.is-collapsed)::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 999px;
}

.ik-slot {
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    text-align: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ik-slot.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

.ik-slot.is-disabled,
.ik-slot:disabled {
    color: var(--color-text-disabled);
    border-color: var(--color-border);
    background: var(--color-bg-surface);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-text-disabled) 55%, transparent);
    opacity: 0.55;
    pointer-events: none;
}

.ik-slot--asap {
    letter-spacing: normal;
}

.ik-slot--schedule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ik-slot--schedule i {
    font-size: 10px;
    opacity: 0.85;
}

.ik-slot:hover:not(.is-active):not(.is-disabled):not(:disabled) {
    border-color: #555;
    color: var(--color-text-primary);
}

/* out-of-hours message */
.ik-basket__ooh {
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-accent-badge, #7A1219);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #F5C5C7;
    line-height: 1.6;
    margin-bottom: 6px;
}

.ik-basket__ooh.is-reveal {
    animation: ik-banner-reveal var(--ik-motion-normal) var(--ik-ease-out) both;
}

@keyframes ik-banner-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ik-screen--basket.is-kitchen-closed .ik-basket__checkout.ik-btn-primary:not([hidden]) {
    margin-top: 10px;
}

.ik-basket__checkout.is-orders-paused,
.ik-drawer__confirm-btn.is-orders-paused {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ik-basket__ooh i {
    color: var(--color-accent);
    margin-right: 4px;
}

/* ── confirm screen ───────────────────────────────────── */
.ik-screen--confirm.ik-screen--active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ik-confirm {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 16px 12px;
    gap: 8px;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@media (min-width: 641px) {
    .ik-confirm {
        padding: 12px 18px 14px;
    }

    .ik-screen--confirm .ik-drawer__footer {
        padding-top: 12px;
        padding-bottom: 14px;
    }
}

.ik-confirm__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    padding-top: 10px;
    background-color: var(--color-bg-card);
    border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    border-radius: var(--radius-card);
    text-align: left;
    gap: 10px;
    overflow: visible;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.ik-confirm__card.is-waiting-kitchen {
    border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
}

.ik-confirm__card.is-kitchen-timeout {
    border-color: color-mix(in srgb, #e8a317 28%, var(--color-border));
}

.ik-confirm__card.is-kitchen-timeout .ik-confirm__callout {
    visibility: hidden;
    pointer-events: none;
}

.ik-confirm__card.is-kitchen-accepted {
    border-color: color-mix(in srgb, #4caf50 55%, var(--color-accent) 20%, var(--color-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, #4caf50 18%, transparent);
}

.ik-confirm__card.is-kitchen-celebrate {
    animation: ik-confirm-celebrate var(--ik-motion-celebration) var(--ik-ease-out);
}

@keyframes ik-confirm-celebrate {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, #4caf50 40%, transparent);
        transform: scale(1);
    }
    22% {
        box-shadow: 0 0 0 5px color-mix(in srgb, #4caf50 22%, transparent);
        transform: scale(1.008);
    }
    100% {
        box-shadow: 0 0 0 1px color-mix(in srgb, #4caf50 18%, transparent);
        transform: scale(1);
    }
}

.ik-confirm__kitchen-banner {
    margin: -4px 0 0;
    padding: 8px 12px;
    border-radius: var(--radius-button);
    background: color-mix(in srgb, #4caf50 16%, var(--color-bg-card));
    border: 1px solid color-mix(in srgb, #4caf50 42%, transparent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: color-mix(in srgb, #8fd694 88%, var(--color-text-primary));
}

.ik-confirm__kitchen-banner[hidden] {
    display: none;
}

.ik-confirm__kitchen-notice {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-button);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.ik-confirm__kitchen-notice[hidden] {
    display: none;
}

.ik-confirm__kitchen-notice.is-waiting {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-card));
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    color: var(--color-text-secondary);
    min-height: 2.6rem;
}

.ik-confirm__kitchen-notice.is-prewarn {
    background: color-mix(in srgb, #c62828 12%, var(--color-bg-card));
    border: 1px solid color-mix(in srgb, #c62828 42%, var(--color-border));
    color: color-mix(in srgb, #8b1a1a 72%, var(--color-text-secondary));
    min-height: 6.5rem;
}

.ik-confirm__kitchen-notice.is-prewarn .ik-confirm__kitchen-notice-title {
    color: #9f1f1f;
    font-weight: 600;
}

.ik-confirm__kitchen-notice.is-prewarn .ik-confirm__kitchen-notice-title i {
    color: #c62828;
    opacity: 1;
}

.ik-confirm__kitchen-notice.is-prewarn .ik-confirm__kitchen-notice-text {
    color: color-mix(in srgb, #7a1818 65%, var(--color-text-secondary));
}

.ik-confirm__kitchen-notice.is-prewarn .ik-confirm__kitchen-notice-phone {
    color: #b71c1c;
}

.ik-confirm__kitchen-notice.is-prewarn .ik-confirm__kitchen-notice-phone:hover,
.ik-confirm__kitchen-notice.is-prewarn .ik-confirm__kitchen-notice-phone:focus-visible {
    color: #8b0000;
}

.ik-confirm__kitchen-notice-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.ik-confirm__kitchen-notice-title i {
    margin-right: 4px;
    font-size: 12px;
    color: var(--color-accent);
    opacity: 0.85;
}

.ik-confirm__kitchen-notice-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.ik-confirm__kitchen-notice-phone {
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.ik-confirm__kitchen-notice-phone:hover,
.ik-confirm__kitchen-notice-phone:focus-visible {
    text-decoration: underline;
    outline: none;
}

.ik-confirm__ref-block,
.ik-confirm__kitchen-notice,
.ik-confirm__kitchen-banner,
.ik-confirm-timeline,
.ik-confirm-receipt,
.ik-confirm__callout {
    position: relative;
    z-index: 1;
}

.ik-confirm__callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    min-height: 3.1rem;
    justify-content: center;
    box-sizing: border-box;
}

.ik-confirm__callout-text {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.ik-confirm__callout-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.ik-confirm__callout-phone i {
    font-size: 14px;
    color: var(--color-accent);
}

.ik-confirm__phone-num {
    font-variant-numeric: tabular-nums;
}

.ik-confirm__ref-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.ik-confirm__ref-label {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-disabled);
}

.ik-confirm__ref {
    margin: 0;
    font-size: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.ik-confirm-receipt {
    padding: 8px 0 0;
    border-top: var(--border-width) solid var(--color-border);
}

.ik-confirm-receipt__title,
.ik-confirm-receipt__items,
.ik-confirm-receipt__delivery {
    position: relative;
    z-index: 1;
}

.ik-confirm-receipt__title {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-disabled);
}

.ik-confirm-receipt__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(42vh, 15.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #666 #272727;
}

.ik-confirm-receipt__row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    font-size: 13px;
    line-height: 1.4;
}

.ik-confirm-receipt__name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 72%;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ik-confirm-receipt__dots {
    flex: 1 1 16px;
    min-width: 16px;
    margin: 0 6px 0.12em;
    height: 0;
    align-self: flex-end;
    border-bottom: 1px dotted color-mix(in srgb, var(--color-text-disabled) 85%, transparent);
}

.ik-confirm-receipt__qty {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ik-confirm-receipt__delivery {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--color-border) 80%, transparent);
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    line-height: 1.4;
}

.ik-confirm-receipt__delivery-label {
    font-weight: 600;
    color: var(--color-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}

.ik-confirm-receipt__delivery-addr {
    color: var(--color-text-secondary);
}

.ik-confirm-receipt__delivery-cash {
    color: var(--color-text-disabled);
    font-size: 11px;
}

.ik-confirm-timeline {
    list-style: none;
    margin: 0;
    padding: 8px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.ik-confirm-timeline--horizontal {
    --tl-step-gap: 10px;
    --tl-dot-size: 18px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: stretch;
    gap: var(--tl-step-gap);
    padding: 2px 0 0;
}

.ik-confirm-timeline__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 0 16px 0;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    min-width: 0;
    text-align: center;
    z-index: 1;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step:nth-child(1) { z-index: 1; }
.ik-confirm-timeline--horizontal .ik-confirm-timeline__step:nth-child(2) { z-index: 2; }
.ik-confirm-timeline--horizontal .ik-confirm-timeline__step:nth-child(3) { z-index: 3; }

.ik-confirm-timeline__step:last-child {
    padding-bottom: 0;
}

.ik-confirm-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 0;
    width: 2px;
    z-index: 0;
    pointer-events: none;
    background: var(--color-border);
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step:not(:last-child)::after {
    left: calc(50% + var(--tl-dot-size) / 2);
    right: auto;
    width: calc(100% + var(--tl-step-gap) - var(--tl-dot-size));
    top: calc(var(--tl-dot-size) / 2 - 1px);
    bottom: auto;
    height: 2px;
}

.ik-confirm-timeline__step.is-done:not(:last-child)::after {
    background: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
}

.ik-confirm-timeline__dot {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-bg-card);
    box-sizing: border-box;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__dot {
    margin-top: 0;
}

.ik-confirm-timeline__step.is-active .ik-confirm-timeline__dot,
.ik-confirm-timeline__step.is-done .ik-confirm-timeline__dot {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg-card));
}

.ik-confirm-timeline__step.is-done .ik-confirm-timeline__dot {
    background: var(--color-accent);
    box-shadow: inset 0 0 0 3px var(--color-bg-card);
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-done .ik-confirm-timeline__dot {
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px color-mix(in srgb, #4caf50 22%, transparent),
        inset 0 0 0 3px var(--color-bg-card);
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-done .ik-confirm-timeline__dot::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-done .ik-confirm-timeline__caption,
.ik-confirm-timeline__step[data-tl-step="kitchen"].is-done .ik-confirm-timeline__value {
    color: color-mix(in srgb, #8fd694 80%, var(--color-text-primary));
}

.ik-confirm-timeline__step.is-pending .ik-confirm-timeline__dot {
    animation: ik-tl-pulse 1.4s ease-in-out infinite;
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-pending .ik-confirm-timeline__dot {
    border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border));
    animation: ik-tl-kitchen-pulse 1.15s ease-in-out infinite;
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-pending .ik-confirm-timeline__caption {
    animation: ik-tl-kitchen-caption 1.15s ease-in-out infinite;
}

.ik-confirm-timeline__step.is-failed .ik-confirm-timeline__dot {
    animation: none;
    border-color: color-mix(in srgb, #c62828 48%, var(--color-border));
    background: color-mix(in srgb, #c62828 10%, var(--color-bg-card));
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-failed .ik-confirm-timeline__dot::after {
    content: "×";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, #c62828 88%, var(--color-text-primary));
}

.ik-confirm-timeline__step.is-failed .ik-confirm-timeline__caption,
.ik-confirm-timeline__step.is-failed .ik-confirm-timeline__value {
    color: var(--color-text-disabled);
    opacity: 0.8;
}

.ik-confirm-timeline__step[data-tl-step="kitchen"].is-failed:not(:last-child)::after {
    background: color-mix(in srgb, #c62828 22%, var(--color-border));
    opacity: 0.7;
}

.ik-confirm-timeline__step.is-cancelled {
    opacity: 0.38;
    transition: opacity 0.35s ease;
}

.ik-confirm-timeline__step.is-cancelled .ik-confirm-timeline__dot {
    animation: none;
    border-style: dashed;
    border-color: var(--color-border);
    background: transparent;
    box-shadow: none;
}

.ik-confirm-timeline__step.is-cancelled .ik-confirm-timeline__caption,
.ik-confirm-timeline__step.is-cancelled .ik-confirm-timeline__value {
    color: var(--color-text-disabled);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-text-disabled) 55%, transparent);
    text-decoration-thickness: 1px;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"].is-cancelled .ik-confirm-timeline__caption,
.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"].is-cancelled .ik-confirm-timeline__value {
    font-weight: 500;
    color: var(--color-text-disabled);
}

@keyframes ik-tl-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes ik-tl-kitchen-pulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 35%, transparent);
    }
    50% {
        opacity: 1;
        transform: scale(1.14);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 0%, transparent);
    }
}

@keyframes ik-tl-kitchen-caption {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

.ik-confirm-timeline__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.ik-confirm-timeline__caption {
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--color-text-disabled);
}

.ik-confirm-timeline__value {
    font-size: 13px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__label {
    max-width: 100%;
    width: 100%;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__caption {
    font-size: 11px;
    word-break: break-word;
    hyphens: auto;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__value {
    font-size: 12px;
}

.ik-confirm-timeline__step.is-active .ik-confirm-timeline__caption,
.ik-confirm-timeline__step.is-done .ik-confirm-timeline__caption,
.ik-confirm-timeline__step.is-active .ik-confirm-timeline__value,
.ik-confirm-timeline__step.is-done .ik-confirm-timeline__value {
    color: var(--color-text-primary);
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"] .ik-confirm-timeline__caption {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"] .ik-confirm-timeline__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"] .ik-confirm-timeline__value:empty {
    display: none;
}

.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"].is-active .ik-confirm-timeline__caption,
.ik-confirm-timeline--horizontal .ik-confirm-timeline__step[data-tl-step="time"].is-done .ik-confirm-timeline__caption {
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .ik-confirm-timeline__step.is-pending .ik-confirm-timeline__dot,
    .ik-confirm-timeline__step[data-tl-step="kitchen"].is-pending .ik-confirm-timeline__dot,
    .ik-confirm-timeline__step[data-tl-step="kitchen"].is-pending .ik-confirm-timeline__caption,
    .ik-confirm-timeline__step.is-cancelled {
        animation: none;
        transition: none;
    }

    .ik-confirm__card.is-kitchen-celebrate {
        animation: none;
    }
}

/* ── footer (shared) ──────────────────────────────────── */
.ik-drawer__footer {
    padding: 12px 14px 14px;
    background: var(--color-bg-page);
    border-top: var(--border-width) solid var(--color-border);
    flex-shrink: 0;
}

.ik-btn-primary {
    width: 100%;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-button);
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    padding: 12px 16px;
    min-height: 48px;
    line-height: 1.2;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.ik-btn-primary:hover { background: var(--color-accent-hover, #E02530); }

.ik-btn-primary:active {
    transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
    .ik-btn-primary:active {
        transform: none;
    }
}

/* ── mobile cart ─────────────────────────────────────── */

@media (max-width: 640px) {
    html.ik-drawer-open,
    body.ik-drawer-open {
        overflow: hidden;
        overscroll-behavior: none;
        width: 100%;
        touch-action: none;
    }

    html.ik-drawer-open body {
        position: fixed;
        left: 0;
        right: 0;
    }

    html:not(.ik-ios).ik-drawer-open,
    html:not(.ik-ios) body.ik-drawer-open {
        position: fixed;
    }

    html.ik-ios.ik-drawer-open {
        height: 100%;
    }

    .ik-drawer {
        z-index: 10060;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        overscroll-behavior: none;
        touch-action: none;
        background: var(--color-bg-page);
    }

    .ik-drawer::before {
        position: fixed;
        inset: 0;
        background: var(--color-bg-page);
    }

    .ik-drawer__panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border-right: none;
        border-left: none;
        border-bottom: none;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
        transform: translateY(100%);
        transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    .ik-drawer[data-screen="order"],
    .ik-drawer[data-screen="confirm"] {
        align-items: stretch;
        justify-content: stretch;
        touch-action: auto;
    }

    .ik-drawer[data-screen="order"] .ik-drawer__panel,
    .ik-drawer[data-screen="confirm"] .ik-drawer__panel {
        border-radius: 0;
        min-height: 100dvh;
        height: 100%;
        max-height: none;
    }

    .ik-drawer[data-screen="order"] .ik-drawer__panel {
        touch-action: auto;
    }

    .ik-drawer {
        height: 100%;
        height: 100svh;
    }

    .ik-drawer.is-open .ik-drawer__panel {
        transform: translateY(0);
    }

    .ik-drawer__header {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            'lead title actions'
            '. crumbs crumbs';
        column-gap: 8px;
        row-gap: 2px;
        padding: 8px 14px;
        padding-top: max(8px, calc(env(safe-area-inset-top, 0px) + 4px));
        align-items: center;
    }

    .ik-drawer__lead {
        grid-area: lead;
        align-self: center;
    }

    /* Let title + crumbs sit on separate grid rows so actions align with title */
    .ik-drawer__heading {
        display: contents;
    }

    .ik-drawer__title {
        grid-area: title;
        font-size: 16px;
        align-self: center;
        min-width: 0;
    }

    .ik-drawer__crumbs {
        grid-area: crumbs;
        min-width: 0;
        width: auto;
    }

    .ik-drawer__crumbs-list {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .ik-drawer__crumb {
        font-size: 10px;
        white-space: nowrap;
    }

    .ik-drawer__crumb:not(:last-child)::after {
        margin-left: 4px;
    }

    .ik-drawer__actions {
        grid-area: actions;
        margin-left: 0;
        align-self: center;
    }

    .ik-drawer__lead,
    .ik-drawer__back,
    .ik-drawer__action,
    .ik-drawer__promo-clear,
    .ik-drawer__close-wrap {
        width: 36px;
        height: 36px;
    }

    .ik-drawer__promo-clear-icon {
        font-size: 16px;
    }

    .ik-screen--active {
        flex: 1 1 0;
        min-height: 0;
    }

    .ik-screen--basket.ik-screen--active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    .ik-screen--order.ik-screen--active {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: pan-y;
    }

    .ik-screen--confirm.ik-screen--active {
        touch-action: pan-y;
    }

    .ik-confirm {
        padding: 8px 14px 12px 16px;
        gap: 8px;
    }

    .ik-confirm-receipt__items {
        max-height: min(38vh, 13.5rem);
    }

    .ik-confirm__card {
        padding: 12px;
        padding-top: 8px;
        gap: 8px;
    }

    .ik-confirm__ref {
        font-size: 18px;
    }

    .ik-screen--confirm .ik-drawer__footer {
        padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .ik-basket__layout,
    .ik-basket__layout.is-single,
    .ik-basket__layout.is-empty {
        display: contents;
    }

    .ik-basket__list-shell {
        flex: 1 1 0;
        order: 1;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .ik-basket__list {
        flex: 1 1 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 5px;
        padding: 10px 10px 8px 14px;
        border-right: none;
        border-bottom: none;
    }

    .ik-basket__list::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .ik-basket__aside {
        --ik-basket-footer-gap: 8px;
        flex: 0 0 auto;
        order: 2;
        display: flex;
        flex-direction: column;
        gap: var(--ik-basket-footer-gap);
        overflow: visible;
        border-top: var(--border-width) solid var(--color-border);
        padding: var(--ik-basket-footer-gap) 16px 0;
    }

    .ik-basket__aside .ik-basket__checkout-panel {
        padding: 0;
        gap: var(--ik-basket-footer-gap);
    }

    .ik-basket__aside-scroll {
        height: auto;
        max-height: none;
        padding: 0;
        gap: 0;
        overflow: visible;
    }

    .ik-basket__totals {
        min-height: 0;
        padding: 6px 8px;
        gap: 2px;
        border-radius: 6px;
    }

    .ik-totals__row {
        min-height: 0;
        font-size: 12px;
        line-height: 1.25;
    }

    .ik-totals__row--total {
        font-size: 13px;
    }

    .ik-totals__divider {
        margin: 0;
    }

    .ik-basket__checkout-panel {
        gap: var(--ik-basket-footer-gap);
    }

    .ik-basket__times {
        gap: 2px;
    }

    .ik-basket__times .ik-field__label {
        min-height: 0;
        line-height: 1.2;
        font-size: 11px;
    }

    .ik-basket__mode-slot {
        --mode-row-pad-y: 8px;
        --mode-row-pad-x: 6px;
        --mode-row-pad-start-cash: 10px;
        --mode-row-font: 12px;
        --mode-row-h: 36px;
    }

    .ik-slot {
        padding: 9px 6px;
        font-size: 12px;
    }

    .ik-cash-ack {
        gap: 12px;
    }

    .ik-cash-ack__control {
        width: calc(var(--mode-row-font) * var(--mode-row-lh));
        height: calc(var(--mode-row-font) * var(--mode-row-lh));
    }

    .ik-cash-ack__mark {
        border-radius: 7px;
    }

    .ik-cash-ack__input:checked + .ik-cash-ack__mark::after {
        width: 6px;
        height: 11px;
        border-width: 0 2.5px 2.5px 0;
        transform: rotate(45deg) translate(-1px, -2px);
    }

    .ik-cash-ack-dismiss {
        width: 48px;
        min-width: 48px;
        font-size: 16px;
    }

    .ik-basket__slots .ik-slots__grid,
    .ik-slots__grid {
        gap: 4px;
    }

    .ik-slots__grid:not(.is-collapsed) {
        max-height: min(180px, 28dvh);
    }

    .ik-basket__ooh {
        margin: 0;
        padding: 8px 10px;
        line-height: 1.45;
    }

    .ik-screen--basket.is-kitchen-closed .ik-basket__aside .ik-basket__checkout-panel {
        display: flex;
        flex-direction: column;
        gap: var(--ik-basket-footer-gap);
        padding-bottom: 0;
    }

    .ik-screen--basket.is-kitchen-closed .ik-basket__times {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding: 0;
        margin: 0;
    }

    .ik-screen--basket.is-kitchen-closed .ik-basket__slots {
        width: 100%;
    }

    .ik-screen--basket.is-kitchen-closed .ik-basket__ooh {
        margin: 0;
        width: 100%;
    }

    .ik-form-error--basket {
        display: none !important;
    }

    .ik-basket__checkout.ik-btn-primary:not([hidden]) {
        flex: 0 0 auto;
        order: 3;
        display: block;
        box-sizing: border-box;
        width: calc(100% - 32px);
        min-height: 44px;
        padding: 10px 14px;
        margin: 8px 16px max(6px, env(safe-area-inset-bottom, 0px));
        text-align: center;
        touch-action: manipulation;
    }

    .ik-screen--basket.is-kitchen-closed .ik-basket__checkout.ik-btn-primary:not([hidden]) {
        margin-top: 8px;
    }

    .ik-basket__checkout.ik-btn-primary[hidden] {
        display: none;
    }

    .ik-basket__checkout.ik-btn-primary:not([hidden]):active {
        transform: scale(0.98);
        background: var(--color-accent-hover);
    }

    .ik-drawer__footer .ik-btn-primary:active {
        transform: scale(0.98);
        background: var(--color-accent-hover);
    }

    .ik-btn-primary:hover {
        background: var(--color-accent);
    }

    .ik-basket__item {
        gap: 7px;
        padding: 5px 8px;
    }

    .ik-basket__item-img {
        width: 40px;
        height: 40px;
    }

    .ik-basket__item-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
        line-height: 1.25;
    }

    .ik-basket__qbtn {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .ik-basket__slots .ik-slots__grid,
    .ik-slots__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ik-basket__empty {
        padding: 24px 18px 26px;
    }

    .ik-basket__empty-img {
        width: min(252px, 72vw);
        max-height: 138px;
    }

    .ik-screen__body {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 10px 16px 6px;
        gap: 8px;
    }

    .ik-screen--order .ik-screen__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        scroll-padding-top: 8px;
        scroll-padding-bottom: 24px;
        padding-bottom: 4px;
    }

    .ik-screen--order .ik-drawer__footer {
        flex: 0 0 auto;
        position: relative;
        z-index: 1;
    }

    /* Free vertical space for the focused field above the keyboard. */
    .ik-drawer.is-keyboard-open[data-screen="order"] .ik-drawer__footer {
        display: none;
    }

    .ik-drawer.is-keyboard-open[data-screen="order"] .ik-drawer__header {
        display: none;
    }

    .ik-screen--order .ik-field {
        gap: 4px;
    }

    .ik-screen--order .ik-field-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ik-screen--order .ik-field__input,
    .ik-screen--order .ik-field__textarea {
        font-size: 16px;
        padding: 10px 12px;
    }

    .ik-screen--order .ik-field__textarea {
        min-height: 96px;
    }

    .ik-screen--order .ik-cond {
        gap: 6px;
    }

    .ik-screen--order .ik-cond .ik-field__input + .ik-field__input {
        margin-top: 4px;
    }

    .ik-screen--order .ik-form-error--order {
        margin-bottom: 4px;
    }

    .ik-screen--order .ik-drawer__footer {
        padding: 6px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .ik-field--guests .ik-field__input {
        text-align: left;
    }

    .ik-drawer__footer {
        flex-shrink: 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--color-bg-page);
        border-top: var(--border-width) solid var(--color-border);
    }

    .ik-addr-suggest {
        z-index: 10005;
        max-height: min(280px, 40dvh);
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .ik-drawer__panel {
        transition: none;
    }

    .ik-drawer.is-open .ik-drawer__panel {
        transform: translateY(0);
    }
}

/* ——— PWA standalone only: tighter basket chrome (mobile browser unchanged) ——— */
@media (max-width: 640px) {
    html.ik-standalone .ik-drawer[data-screen="basket"] .ik-drawer__header {
        padding: 6px 12px;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        gap: 6px;
    }

    html.ik-standalone .ik-basket__aside {
        --ik-basket-footer-gap: 8px;
        padding: var(--ik-basket-footer-gap) 12px 0;
    }

    html.ik-standalone .ik-basket__aside .ik-basket__checkout-panel {
        padding: 0;
        gap: var(--ik-basket-footer-gap);
    }

    html.ik-standalone .ik-basket__aside-scroll {
        padding: 0;
        gap: 0;
    }

    html.ik-standalone .ik-basket__totals {
        padding: 5px 7px;
        gap: 2px;
    }

    html.ik-standalone .ik-basket__checkout-panel {
        gap: var(--ik-basket-footer-gap);
    }

    html.ik-standalone .ik-basket__times {
        gap: 2px;
    }

    html.ik-standalone .ik-basket__mode-slot {
        --mode-row-h: 34px;
    }

    html.ik-standalone .ik-slot {
        padding: 8px 6px;
    }

    html.ik-standalone .ik-slots__grid:not(.is-collapsed) {
        max-height: min(160px, 24dvh);
    }

    html.ik-standalone .ik-basket__list {
        padding: 8px 8px 6px 12px;
        gap: 4px;
    }

    html.ik-standalone .ik-basket__checkout.ik-btn-primary:not([hidden]) {
        width: calc(100% - 24px);
        min-height: 42px;
        padding: 9px 12px;
        margin: 8px 12px max(4px, env(safe-area-inset-bottom, 0px));
    }

    html.ik-standalone .ik-screen--basket.is-kitchen-closed .ik-basket__checkout.ik-btn-primary:not([hidden]) {
        margin-top: 8px;
    }

    html.ik-standalone .ik-basket__layout.is-empty .ik-basket__list {
        justify-content: center;
        align-items: center;
        padding-top: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    html.ik-standalone .ik-basket__empty {
        flex: 0 1 auto;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        min-height: 0;
        padding: 24px 18px 26px;
        justify-content: center;
    }

    html.ik-standalone .ik-basket__empty-img {
        max-height: 138px;
    }
}

/* PWA-only: iOS-like sheet spring for basket drawer */
@media (max-width: 640px) {
    html.ik-standalone .ik-drawer__panel {
        transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1);
    }

    html.ik-standalone .ik-basket__checkout.ik-btn-primary:not([hidden]) {
        transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.15s ease;
    }

    html.ik-standalone .ik-basket__checkout.ik-btn-primary:not([hidden]):active {
        transform: scale(0.985);
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    html.ik-standalone .ik-drawer__panel {
        transition: none;
    }
}

/* Basket inline upsell (under cart items) */
.ik-basket__items {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ik-basket__layout.is-empty .ik-basket__items {
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
}

.ik-basket__upsell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    margin-top: 4px;
    padding-top: 12px;
    border-top: var(--border-width) solid var(--color-border);
}

.ik-basket__upsell[hidden] {
    display: none !important;
}

.ik-basket__upsell-title {
    margin: 0;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.ik-basket__upsell-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ik-upsell__card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 8px;
    opacity: 0;
}

.ik-upsell__card.is-instant {
    opacity: 1;
}

.ik-upsell__card.is-in {
    animation-name: ik-upsell-card-in;
    animation-duration: var(--ik-motion-slow);
    animation-timing-function: var(--ik-ease-out);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--upsell-i, 0) * 40ms);
}

.ik-upsell__card.is-in.is-instant:not(.is-shake) {
    animation: none;
    opacity: 1;
    transform: none;
}

.ik-upsell__card.is-out {
    animation-name: ik-upsell-card-out;
    animation-duration: var(--ik-motion-normal);
    animation-timing-function: var(--ik-ease-in);
    animation-fill-mode: forwards;
    animation-delay: 0ms;
    pointer-events: none;
}

@keyframes ik-upsell-card-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ik-upsell-card-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-6px);
        height: 0 !important;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        border-width: 0;
    }
}

.ik-upsell__card.is-in.is-shake,
.ik-upsell__card.is-shake {
    animation-name: ik-upsell-card-shake;
    animation-duration: 0.65s;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    opacity: 1;
}

@keyframes ik-upsell-card-shake {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    15% {
        transform: translate3d(-5px, 0, 0) rotate(-0.8deg);
    }
    30% {
        transform: translate3d(5px, 0, 0) rotate(0.8deg);
    }
    45% {
        transform: translate3d(-4px, 0, 0) rotate(-0.55deg);
    }
    60% {
        transform: translate3d(4px, 0, 0) rotate(0.45deg);
    }
    75% {
        transform: translate3d(-2px, 0, 0);
    }
    90% {
        transform: translate3d(2px, 0, 0);
    }
}

.ik-basket__item.is-enter {
    opacity: 0;
}

.ik-basket__item.is-enter-run {
    animation-name: ik-basket-item-in;
    animation-duration: var(--ik-motion-normal);
    animation-timing-function: var(--ik-ease-out);
    animation-fill-mode: forwards;
}

@keyframes ik-basket-item-in {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-upsell__card {
        opacity: 1;
    }

    .ik-upsell__card.is-in,
    .ik-upsell__card.is-out,
    .ik-upsell__card.is-shake,
    .ik-basket__item.is-enter,
    .ik-basket__item.is-enter-run,
    .ik-basket__ooh.is-reveal,
    .ik-slots__grid.is-reveal,
    .ik-slots__grid.is-reveal .ik-slot.is-cascade,
    .ik-slots__grid.is-reveal .ik-slot.is-cascade.is-visible {
        animation: none;
        opacity: 1;
        transform: none;
        height: auto !important;
    }

    .ik-basket__qbtn:active {
        transform: none;
    }
}

.ik-upsell__img-wrap {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
}

.ik-upsell__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ik-upsell__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ik-upsell__name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ik-upsell__price {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.ik-upsell__unit {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-disabled);
}

.ik-upsell__action {
    flex: 0 0 auto;
}

.ik-upsell__add {
    width: 24px;
    min-width: 24px;
}

@media (max-width: 640px) {
    .ik-basket__upsell {
        margin-top: 2px;
        padding-top: 8px;
        gap: 8px;
    }

    .ik-basket__upsell-title {
        font-size: 13px;
        padding: 0 2px 2px;
    }

    .ik-basket__upsell-list {
        gap: 5px;
    }

    .ik-upsell__card {
        padding: 5px 8px;
    }

    .ik-upsell__img-wrap {
        width: 40px;
        height: 40px;
    }

    .ik-upsell__name {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.2;
        text-overflow: unset;
        white-space: normal;
    }

    .ik-upsell__add,
    .ik-basket__upsell .ik-basket__qbtn {
        width: 28px;
        min-width: 28px;
        height: 28px;
        font-size: 15px;
    }
}

/* Floating scroll hint — basket list overflow */
.ik-basket__scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 38%, #0a0a0a);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-page) 78%, #000);
    color: var(--color-accent);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.45),
        0 8px 22px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateX(-50%);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--ik-motion-normal) var(--ik-ease-out),
        border-color var(--ik-motion-fast) var(--ik-ease-out),
        background var(--ik-motion-fast) var(--ik-ease-out),
        box-shadow var(--ik-motion-fast) var(--ik-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.ik-basket__scroll-hint.is-visible {
    opacity: 1;
    pointer-events: auto;
    animation: ik-basket-scroll-hint-bob 2.1s ease-in-out infinite;
}

.ik-basket__scroll-hint[hidden] {
    display: none !important;
}

.ik-basket__scroll-hint i {
    font-size: 15px;
    line-height: 1;
    transform: translateY(0);
}

.ik-basket__scroll-hint.is-visible i {
    animation: ik-basket-scroll-hint-arrow 1.35s ease-in-out infinite;
}

.ik-basket__scroll-hint:hover {
    border-color: color-mix(in srgb, var(--color-accent) 28%, #000);
    background: color-mix(in srgb, var(--color-bg-page) 68%, #000);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 10px 26px rgba(0, 0, 0, 0.5);
}

.ik-basket__scroll-hint:active {
    animation: none;
    transform: translateX(-50%) scale(0.96);
}

.ik-basket__scroll-hint:active i {
    animation: none;
}

@keyframes ik-basket-scroll-hint-bob {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(3.5px);
    }
}

@keyframes ik-basket-scroll-hint-arrow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2.5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ik-basket__scroll-hint.is-visible,
    .ik-basket__scroll-hint.is-visible i {
        animation: none;
    }

    .ik-basket__scroll-hint:active {
        transform: translateX(-50%);
    }

    .ik-basket__ooh.is-reveal,
    .ik-confirm__card.is-kitchen-celebrate {
        animation: none;
    }
}

@media (max-width: 640px) {
    .ik-basket__layout:not(.is-empty) .ik-basket__list-shell::after {
        height: 48px;
    }

    .ik-basket__scroll-hint {
        bottom: 8px;
        width: 38px;
        height: 38px;
        background: color-mix(in srgb, #1a1a1a 82%, var(--color-accent));
        border-color: color-mix(in srgb, var(--color-accent) 45%, #000);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 10px 24px rgba(0, 0, 0, 0.55);
    }
}

@media (min-width: 641px) {
    .ik-basket__scroll-hint {
        bottom: 12px;
        border-color: color-mix(in srgb, var(--color-accent) 32%, #050505);
    }

    .ik-basket__scroll-hint.is-visible {
        animation-duration: 2s;
    }

    .ik-basket__scroll-hint.is-visible i {
        animation-duration: 1.25s;
    }
}