/* «خصّص علبتك» (owner, 20/10/2026; first named «اعمل علبتك»): the shop's purple box in 3D, the sizes, the kinds and the
   bar that adds the box to the basket. Loaded on that page only. The box's own colours are the real box's, in light and
   dark alike.
   Owner, the same day, after seeing it on a laptop: the box must stand straight, whole and clear on every screen. So the
   box is drawn at the size its place allows (the page's script measures the place and sets --w, --d and --h), never a
   small drawing scaled up, and on a wide screen it keeps the full height of the window beside the choices while the bar
   with the price stays under the choices, clear of the box. */
.bx {
    --bx-p1: #7b3fa3;
    --bx-p2: #5e2b82;
    --bx-p3: #47206a;
    --bx-floor: #f1ebf5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "choose" "stage" "pick" "bar";
    gap: 14px 40px;
    margin-top: 4px
}
.bx-choose {
    grid-area: choose;
    min-width: 0
}
.bx-stage-col {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    min-width: 0
}
.bx-pick {
    grid-area: pick;
    min-width: 0
}
/* A shorter head on this page: the box is what the page is for. */
.bx-head .eh-page-hero {
    margin-block-end: 14px;
    padding: 22px 30px 34px
}
.bx-head .eh-page-hero h1 {
    font-size: calc(24px * var(--scale, 1))
}
.bx-head .eh-page-hero p {
    margin-top: 4px;
    font-size: calc(14px * var(--scale, 1))
}
@media(max-width:700px) {
    .bx-head .eh-page-hero {
        padding: 18px 20px 30px
    }
    .bx-head .eh-page-hero h1 {
        font-size: calc(21px * var(--scale, 1))
    }
}
/* A wide screen: the box keeps the whole height of the window on one side while the choosing scrolls on the other, and
   the bar with the price and the basket stays at the foot of the choosing. */
@media(min-width:960px) {
    .bx {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        grid-template-areas: "stage choose" "stage pick" "stage bar";
        grid-template-rows: auto 1fr auto;
        align-items: start;
        column-gap: clamp(28px, 4vw, 56px)
    }
    .bx-stage-col {
        position: sticky;
        top: calc(var(--header-h, 92px) + 10px);
        height: calc(100vh - var(--header-h, 92px) - 20px);
        height: calc(100dvh - var(--header-h, 92px) - 20px);
        min-height: 300px;
        max-height: 820px
    }
}

/* ---- The box --------------------------------------------------------------------------------------------------- */
/* The box stands straight in the middle of its place, seen a little from above. While it is filled its lid is lifted
   away, so the rows stay in sight; the lid comes down on the box when it is full. */
.bx-stage {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    height: clamp(250px, 82vw, 400px);
    min-height: 0;
    perspective: var(--bx-perspective, 1400px);
    perspective-origin: 50% 35%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    overflow: visible
}
@media(min-width:960px) {
    .bx-stage {
        flex: 1 1 auto;
        height: auto
    }
}
.bx-choose .bx-sizes {
    margin-bottom: 4px
}
.bx-box {
    --tilt: 28deg;
    --ry: 0deg;
    --h: calc(var(--w, 296px) * .11);
    position: relative;
    flex: none;
    width: var(--w, 296px);
    height: var(--d, 276px);
    transform-style: preserve-3d;
    transform: translateY(var(--shift, 0px)) rotateX(var(--tilt)) rotateZ(var(--ry));
    transition: transform .6s var(--ease)
}
.bx-box.is-turning {
    transition: none
}
.bx-box.is-measuring {
    visibility: hidden
}
.bx-shadow {
    position: absolute;
    inset: -5% -4% -9%;
    border-radius: 26px;
    background: radial-gradient(closest-side, rgba(45, 20, 60, .34), transparent);
    filter: blur(8px);
    transform: translateZ(-1px)
}
.bx-floor {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--lanes), minmax(0, 1fr));
    gap: calc(var(--w, 296px) * .022);
    padding: calc(var(--w, 296px) * .028);
    border-radius: 4px;
    background: linear-gradient(180deg, #e7dcef, #f4eef8);
    transform-style: preserve-3d
}
.bx-wall {
    position: absolute;
    backface-visibility: hidden
}
.bx-wall-front {
    inset: auto 0 0;
    height: var(--h);
    transform-origin: bottom;
    transform: rotateX(-90deg);
    background: linear-gradient(0deg, var(--bx-p3), var(--bx-p2) 55%, var(--bx-p1));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18)
}
.bx-wall-back {
    inset: 0 0 auto;
    height: var(--h);
    transform-origin: top;
    transform: rotateX(90deg);
    background: linear-gradient(180deg, var(--bx-p3), var(--bx-p2))
}
.bx-wall-left {
    inset: 0 auto 0 0;
    width: var(--h);
    transform-origin: left;
    transform: rotateY(-90deg);
    background: linear-gradient(90deg, var(--bx-p3), var(--bx-p2))
}
.bx-wall-right {
    inset: 0 0 0 auto;
    width: var(--h);
    transform-origin: right;
    transform: rotateY(90deg);
    background: linear-gradient(270deg, var(--bx-p2), var(--bx-p3))
}
.bx-rim {
    position: absolute;
    inset: -4px;
    border: 4px solid var(--bx-p1);
    border-radius: 5px;
    transform: translateZ(var(--h));
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14)
}

/* A row between two white card dividers, as in the real box. It is a button: a tap empties it. */
.bx-lane {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--bx-floor);
    box-shadow: inset 0 0 0 1px rgba(94, 43, 130, .08);
    transform-style: preserve-3d;
    cursor: pointer;
    color: #b9a3c8
}
.bx-lane::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: calc(var(--w, 296px) * -.0215);
    width: calc(var(--w, 296px) * .02);
    background: linear-gradient(90deg, #fff, #efeaf2);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07);
    transform: translateZ(calc(var(--h) * .42))
}
.bx-lane:last-child::before {
    display: none
}
.bx-lane:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 1px
}
.bx-lane.is-next {
    box-shadow: inset 0 0 0 2px var(--red)
}
.bx-plus {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: clamp(16px, calc(var(--w, 296px) * .07), 26px);
    transform: translateZ(1px)
}
.bx-lane:not(.is-empty) .bx-plus {
    display: none
}
/* Each tile is one piece of the row's picture; the pieces lie end to end, so a full row reads like the photo itself. The
   picture repeats down the tile: a tile reaches a pixel into the next one, and after the picture's last piece that pixel
   is its first one again (the ready pictures run on from their end into their start), never the empty floor. */
.bx-tile {
    position: absolute;
    left: 0;
    right: 0;
    background-repeat: repeat-y;
    transform: translateZ(3px);
    backface-visibility: hidden;
    pointer-events: none
}

/* The lid: the photo of the real lid on top, its own inside under it. Lifted away while the box is filled. */
.bx-lid {
    position: absolute;
    inset: calc(var(--w, 296px) * -.022);
    transform-origin: top center;
    transform: translateZ(calc(var(--h) + 2px));
    transform-style: preserve-3d;
    transition: transform 1.05s cubic-bezier(.3, 1.3, .5, 1) .9s, opacity .35s ease .9s;
    pointer-events: none
}
.bx-box.is-open .bx-lid {
    transform: translateZ(calc(var(--h) + var(--w, 296px) * .7)) translateY(-12%) rotateX(-8deg);
    opacity: 0;
    transition: transform .7s var(--ease), opacity .45s ease .15s
}
.bx-lid-face {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    backface-visibility: hidden
}
.bx-lid-out {
    background: center / cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25)
}
.bx-lid-in {
    display: grid;
    place-items: center;
    padding: 12%;
    background: linear-gradient(#f3eef6, #e4d9ec);
    box-shadow: inset 0 0 0 5px #d8c8e4;
    transform: rotateX(180deg);
    color: #9b86ae;
    font-size: 15px;
    text-align: center
}
.bx-lid-edge {
    position: absolute;
    background: linear-gradient(0deg, #a77fc6, #cdb0e0);
    backface-visibility: hidden
}
.bx-lid-edge-front {
    inset: auto 0 0;
    height: calc(var(--h) * .36);
    transform-origin: bottom;
    transform: rotateX(90deg)
}
.bx-lid-edge-back {
    inset: 0 0 auto;
    height: calc(var(--h) * .36);
    transform-origin: top;
    transform: rotateX(-90deg)
}
.bx-lid-edge-left {
    inset: 0 auto 0 0;
    width: calc(var(--h) * .36);
    transform-origin: left;
    transform: rotateY(90deg);
    background: linear-gradient(90deg, #9e74bf, #c4a2da)
}
.bx-lid-edge-right {
    inset: 0 0 0 auto;
    width: calc(var(--h) * .36);
    transform-origin: right;
    transform: rotateY(-90deg);
    background: linear-gradient(270deg, #9e74bf, #c4a2da)
}
.bx-spark {
    position: absolute;
    inset: 0;
    pointer-events: none
}
.bx-spark i {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--c)
}
.bx-hint {
    margin: 6px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: calc(12.5px * var(--scale))
}

/* ---- Choosing ------------------------------------------------------------------------------------------------- */
.bx-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface)
}
.bx-modes button {
    min-height: 40px;
    border-radius: 999px;
    color: var(--muted);
    font-size: calc(14px * var(--scale));
    transition: background var(--fast), color var(--fast), box-shadow var(--fast)
}
.bx-modes button[aria-checked=true] {
    background: var(--elevated);
    color: var(--ink);
    font-weight: 500;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .14)
}
.bx-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: calc(17px * var(--scale));
    font-weight: 500
}
.bx-step span {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--red);
    font-size: calc(13px * var(--scale))
}
.bx-step-note {
    margin: -6px 0 12px;
    color: var(--muted);
    font-size: calc(13px * var(--scale))
}
.bx-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin-bottom: 22px
}
.bx-sizes button {
    display: grid;
    gap: 2px;
    padding: 10px 6px;
    border-radius: 16px;
    background: var(--elevated);
    box-shadow: inset 0 0 0 1px var(--line);
    text-align: center;
    transition: box-shadow var(--fast), color var(--fast)
}
.bx-sizes b {
    font-size: calc(15px * var(--scale));
    font-weight: 500
}
.bx-sizes small {
    color: var(--muted);
    font-size: calc(12px * var(--scale))
}
.bx-sizes button[aria-checked=true] {
    box-shadow: inset 0 0 0 1.5px var(--red);
    color: var(--red)
}
/* The kinds, on their shelves: «بقلاوة», then «نواشف». */
.bx-shelf + .bx-shelf {
    margin-top: 18px
}
.bx-shelf-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--muted);
    font-size: calc(13px * var(--scale));
    font-weight: 500
}
.bx-shelf-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}
.bx-kinds {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}
.bx-kind {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 18px;
    background: var(--elevated);
    box-shadow: inset 0 0 0 1px var(--line)
}
.bx-kind.is-chosen {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 55%, var(--line))
}
.bx-kind-pic {
    width: 72px;
    height: 58px;
    border-radius: 12px;
    background: center / cover no-repeat var(--surface);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05)
}
.bx-kind-text {
    display: grid;
    min-width: 0;
    gap: 1px
}
.bx-kind-text b {
    font-size: calc(14.5px * var(--scale));
    font-weight: 500;
    line-height: 1.6
}
.bx-kind-text small {
    color: var(--muted);
    font-size: calc(12.5px * var(--scale))
}
.bx-kind-text .bx-kind-price {
    color: var(--red);
    font-weight: 500
}
.bx-kind-text [hidden] {
    display: none
}
.bx-kind-actions {
    display: flex;
    align-items: center;
    gap: 8px
}
.bx-more,.bx-less {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: transform var(--fast), opacity var(--fast), background var(--fast)
}
.bx-more {
    background: var(--red);
    color: #fff
}
.bx-less {
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink)
}
.bx-more .icon,.bx-less .icon {
    width: 16px;
    height: 16px
}
.bx-more:active,.bx-less:active {
    transform: scale(.9)
}
.bx-more:disabled {
    opacity: .3;
    cursor: default
}
.bx-less[hidden],.bx-count[hidden] {
    display: none
}
.bx-count {
    min-width: 1.4em;
    text-align: center;
    font-weight: 500;
    font-variant-numeric: tabular-nums
}
.bx-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: calc(12px * var(--scale));
    line-height: 1.8
}
/* A phone: each shelf a row of small cards to swipe, right under the box. */
@media(max-width:959px) {
    .bx-kinds {
        grid-auto-flow: column;
        grid-auto-columns: minmax(148px, 42%);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding: 2px var(--gutter) 6px;
        scroll-padding-inline: var(--gutter)
    }
    .bx-kinds::-webkit-scrollbar {
        display: none
    }
    .bx-kind {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        align-items: start;
        gap: 8px;
        padding: 8px;
        scroll-snap-align: start
    }
    .bx-kind-pic {
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 4
    }
    .bx-kind-actions {
        justify-content: space-between
    }
    .bx-kind-actions .bx-more {
        margin-inline-start: auto
    }
    .bx-step-note {
        margin-bottom: 10px
    }
}

/* ---- The bar: how full, how much, and the basket -------------------------------------------------------------- */
.bx-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    grid-area: bar;
    margin-inline: calc(var(--gutter) * -1);
    padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--elevated);
    box-shadow: 0 -1px 0 var(--line), 0 -14px 28px -22px rgba(0, 0, 0, .35)
}
@media(min-width:960px) {
    .bx-bar {
        margin-inline: 0;
        border-radius: 22px 22px 0 0;
        padding-inline: 22px
    }
}
.bx-progress {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: calc(13px * var(--scale))
}
.bx-track {
    height: 6px;
    margin: 6px 0 10px;
    border-radius: 9px;
    background: var(--surface);
    overflow: hidden
}
.bx-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--tint, #6f8f4e);
    transition: width .5s var(--ease)
}
.bx-buy {
    display: flex;
    align-items: center;
    gap: 14px
}
.bx-total {
    display: grid;
    margin: 0;
    min-width: 96px;
    font-size: calc(19px * var(--scale));
    font-weight: 500;
    white-space: nowrap
}
.bx-total small {
    color: var(--muted);
    font-size: calc(11.5px * var(--scale));
    font-weight: 400
}
.bx-add {
    flex: 1;
    min-height: 48px
}
.bx-add:disabled {
    opacity: .45;
    cursor: default
}
.bx-add.is-ready {
    animation: bx-ready 1.6s var(--ease) 1.4s 2
}
@keyframes bx-ready {
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--red) 16%, transparent)
    }
}
.bx-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 10px 0 0;
    font-size: calc(13.5px * var(--scale))
}
.bx-done[hidden] {
    display: none
}
.bx-done span {
    color: var(--ink);
    font-weight: 500
}
.bx-done a,.bx-done button {
    color: var(--red);
    font-size: inherit
}
.bx-noscript {
    grid-column: 1 / -1;
    padding: 14px;
    border-radius: 16px;
    background: var(--soft)
}
@media(prefers-reduced-motion:reduce) {
    .bx-box,.bx-lid,.bx-track span {
        transition: none !important
    }
    .bx-add.is-ready {
        animation: none
    }
}
@media(hover:hover) and (pointer:fine) {
    .bx-sizes button:hover {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, var(--line))
    }
    .bx-more:hover:not(:disabled) {
        background: color-mix(in srgb, var(--red) 88%, #000)
    }
    .bx-stage {
        cursor: grab
    }
}