/* ── Cart Drawer ─────────────────────────────────────────────────────────────
   Figma sources: 1146:7104 (filled) · 1146:7366 (empty)
   All measurements from absoluteRenderBounds.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ OVERLAY ═══════════════════════════════════════════════════════════════ */

.alq-cd-overlay {
    position:       fixed;
    inset:          0;
    background:     transparent;
    z-index:        9998;
    pointer-events: none;
}
.alq-cd-overlay.is-open { pointer-events: auto; }

/* ═══ DRAWER PANEL ══════════════════════════════════════════════════════════ */

.alq-cd-drawer {
    position:       fixed;
    top:            0;
    right:          0;
    width:          390px;
    height:         100dvh;
    background:     #ffffff;
    z-index:        9999;
    display:        flex;
    flex-direction: column;
    transform:      translateX(100%);
    transition:     transform 0.22s ease;
    overflow-y:     auto;
    overflow-x:     hidden;
}
.alq-cd-overlay.is-open .alq-cd-drawer { transform: translateX(0); }

/* ═══ HEADER ════════════════════════════════════════════════════════════════
   Filled: CART 16px Medium ls=3px + "N items" 10px Regular #808080
   Empty:  CART 30px Medium ls=3px + × 64px Cormorant Garamond
   ─────────────────────────────────────────────────────────────────────────*/

.alq-cd-head {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    padding:         30px 24px 0;
    height:          68px;
    flex-shrink:     0;
    box-sizing:      border-box;
}

.alq-cd-head-titles {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

/* "CART" — filled: 16px Medium, ls=3px */
.alq-cd-title {
    font-family:    'Montserrat', sans-serif;
    font-size:      16px;
    font-weight:    500;
    line-height:    19px;
    letter-spacing: 3px;
    color:          #0a0a0a;
    margin:         0;
    text-transform: uppercase;
}

/* "N ITEMS IN YOUR CART" — 10px Regular #0a0a0a */
.alq-cd-count {
    font-family:    'Montserrat', sans-serif;
    font-size:      10px;
    font-weight:    400;
    line-height:    12px;
    letter-spacing: 1px;
    color:          #0a0a0a;
    margin:         0;
    text-transform: uppercase;
}

/* × close — filled: 22px Montserrat Light */
.alq-cd-close {
    font-family:     'Montserrat', sans-serif;
    font-size:       22px;
    font-weight:     300;
    line-height:     26px;
    color:           #0a0a0a;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    min-width:       44px;
    min-height:      44px;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    padding:         0;
    margin-top:      -4px;
}
.alq-cd-close:hover { opacity: 0.5; }

/* ═══ TOP DIVIDER (filled only) ══════════════════════════════════════════ */

.alq-cd-divider-top {
    height:     1px;
    background: #e0e0e0;
    margin:     0 24px;
    flex-shrink: 0;
}

/* ═══ BODY — scrollable items ═══════════════════════════════════════════ */

.alq-cd-body {
    overflow-y:                 visible;
    padding:                    16px 24px 0;
    -webkit-overflow-scrolling: touch;
}

/* Loading / error */
.alq-cd-loading {
    font-family: 'Montserrat', sans-serif;
    font-size:   15px;
    font-weight: 300;
    color:       #0b40b4;
    padding:     40px 0;
    text-align:  center;
    margin:      0;
}

/* ═══ ITEM ROW ══════════════════════════════════════════════════════════
   Thumbnail 52×66px · gap 12px · content flex-1
   ───────────────────────────────────────────────────────────────────── */

.alq-cd-item {
    display:        flex;
    gap:            12px;
    padding-bottom: 24px;
    margin-bottom:  24px;
    border-bottom:  1px solid #e0e0e0;
}
.alq-cd-item:last-child {
    border-bottom:  none;
    padding-bottom: 0;
    margin-bottom:  0;
}

.alq-cd-item-img {
    width:       52px;
    height:      66px;
    flex-shrink: 0;
    background:  #f5f5f5;
    overflow:    hidden;
}
.alq-cd-item-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.alq-cd-item-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-width:      0;
}

/* Name + price on the same row, space-between */
.alq-cd-item-top-row {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             8px;
}

/* Item name — 10px Medium */
.alq-cd-item-name {
    font-family: 'Montserrat', sans-serif;
    font-size:   10px;
    font-weight: 500;
    line-height: 12px;
    color:       #0a0a0a;
    margin:      0;
    min-width:   0;
}

/* Item price — 10px Regular */
.alq-cd-item-price {
    font-family: 'Montserrat', sans-serif;
    font-size:   10px;
    font-weight: 400;
    line-height: 12px;
    color:       #0a0a0a;
    margin:      0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Short description e.g. "90 min with Anissa" — 9px Regular #808080 */
.alq-cd-item-subdesc {
    font-family: 'Montserrat', sans-serif;
    font-size:   9px;
    font-weight: 400;
    line-height: 11px;
    color:       #808080;
    margin:      4px 0 0;
}

/* Qty stepper — 19px gap from name bottom (without subdesc) */
.alq-cd-qty {
    display:     flex;
    align-items: center;
    margin-top:  19px;
}
/* Tighter gap when a short desc is present */
.alq-cd-qty--has-sub { margin-top: 6px; }

/* Stepper buttons — 44×44 touch target, visually 24×24 */
.alq-cd-qty-btn {
    font-family:     'Montserrat', sans-serif;
    font-size:       10px;
    font-weight:     400;
    color:           #0a0a0a;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    padding:         0;
    margin:          -10px;
}
.alq-cd-qty-btn svg     { display: block; width: 13px; height: 13px; stroke: #858585; }
.alq-cd-qty-btn:hover   { opacity: 0.6; }
.alq-cd-qty-btn:disabled { opacity: 0.35; cursor: default; }

/* Qty number */
.alq-cd-qty-num {
    font-family: 'Montserrat', sans-serif;
    font-size:   10px;
    font-weight: 400;
    line-height: 12px;
    color:       #0a0a0a;
    min-width:   14px;
    text-align:  center;
    user-select: none;
}

/* ═══ FOOTER — filled state ══════════════════════════════════════════════
   Figma: divider at y=366, SUBTOTAL y=389, shipping y=404, btn y=432, link y=494
   ─────────────────────────────────────────────────────────────────────── */

.alq-cd-foot {
    position:    sticky;
    bottom:      0;
    padding:     0 24px 36px;
    background:  #ffffff;
}

/* Divider above footer */
.alq-cd-foot::before {
    content:    '';
    display:    block;
    height:     1px;
    background: #e0e0e0;
    margin:     0 0 22px;
}

/* SUBTOTAL row */
.alq-cd-subtotal-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   8px;
}

.alq-cd-subtotal-label {
    font-family:    'Montserrat', sans-serif;
    font-size:      9px;
    font-weight:    500;
    line-height:    11px;
    letter-spacing: 2px;
    color:          #0a0a0a;
    text-transform: uppercase;
}

.alq-cd-subtotal-value {
    font-family: 'Montserrat', sans-serif;
    font-size:   9px;
    font-weight: 400;
    line-height: 11px;
    color:       #0a0a0a;
}

/* Shipping note — 9px Regular #808080 */
.alq-cd-shipping-note {
    font-family:  'Montserrat', sans-serif;
    font-size:    9px;
    font-weight:  400;
    line-height:  11px;
    color:        #808080;
    margin:       0 0 18px;
}

/* PROCEED TO CHECKOUT — 342×46px, black, 10px Medium white ls=2px */
.alq-cd-checkout-btn {
    display:         block;
    width:           100%;
    height:          46px;
    background:      #0a0a0a;
    color:           #ffffff;
    font-family:     'Montserrat', sans-serif;
    font-size:       10px;
    font-weight:     500;
    letter-spacing:  2px;
    text-transform:  uppercase;
    text-decoration: none;
    text-align:      center;
    line-height:     46px;
    border:          none;
    cursor:          pointer;
    box-sizing:      border-box;
    transition:      background 0.2s;
}
.alq-cd-checkout-btn:hover {
    background:      #1a1a1a;
    color:           #ffffff;
    text-decoration: none;
}

/* ← Continue Shopping — 11px Medium cobalt #0B40B4, ls=4% */
.alq-cd-continue {
    display:         block;
    text-align:      left;
    margin-top:      22px;
    font-family:     'Montserrat', sans-serif;
    font-size:       11px;
    font-weight:     500;
    line-height:     13px;
    letter-spacing:  0.04em;
    color:           #0b40b4;
    text-decoration: none;
}
.alq-cd-continue:hover { opacity: 0.75; color: #0b40b4; text-decoration: none; }

/* ═══ EMPTY STATE ════════════════════════════════════════════════════════
   Figma 1146:7366 — x=68 y=3998 · 390×844
   CART 30px Medium ls=3px · × 64px Cormorant Garamond
   · · · 10px Light ls=5px #757575 · msg 28px Light Italic lh=22px
   BROWSE btn 241×33px black 13px Medium white ls=4%
   ─────────────────────────────────────────────────────────────────────── */

/* Hide items/footer in empty state */
.alq-cd-overlay--empty .alq-cd-divider-top { display: none; }
.alq-cd-overlay--empty .alq-cd-body        { display: none; }
.alq-cd-overlay--empty .alq-cd-foot        { display: none; }

/* Show empty state */
.alq-cd-empty-state { display: none; }
.alq-cd-overlay--empty .alq-cd-empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    flex:           1;
    padding:        223px 24px 0;
    box-sizing:     border-box;
    width:          100%;
}

/* Header — empty state: CART 30px, close 64px Cormorant */
.alq-cd-overlay--empty .alq-cd-head {
    height:    auto;
    min-height: 80px;
    padding:   38px 24px 0;
    align-items: flex-start;
}

.alq-cd-overlay--empty .alq-cd-title {
    font-size:      30px;
    line-height:    36px;
    letter-spacing: 3px;
    color:          #000000;
}

.alq-cd-overlay--empty .alq-cd-count { display: none; }

.alq-cd-overlay--empty .alq-cd-close {
    font-family: 'Cormorant Garamond', serif;
    font-size:   64px;
    font-weight: 400;
    line-height: 1;
    color:       #000000;
    margin-top:  -14px;
    min-width:   44px;
    min-height:  44px;
}

/* "· · ·" ornament — 10px Light ls=5px #757575 */
.alq-cd-empty-ornament {
    font-family:    'Montserrat', sans-serif;
    font-size:      10px;
    font-weight:    300;
    line-height:    12px;
    letter-spacing: 5px;
    color:          #757575;
    text-align:     center;
    margin:         0 0 14px;
}

/* "Your bag is empty." — 28px Light Italic lh=22px ls=0.5px */
.alq-cd-empty-msg {
    font-family:    'Montserrat', sans-serif;
    font-size:      28px;
    font-weight:    300;
    font-style:     italic;
    line-height:    22px;
    letter-spacing: 0.5px;
    color:          #000000;
    text-align:     center;
    max-width:      267px;
    margin:         0 auto 32px;
}

/* BROWSE THE BOUTIQUE — 241×33px black, 13px Medium white ls=4% */
.alq-cd-empty-cta {
    display:         block;
    width:           241px;
    height:          33px;
    background:      #000000;
    color:           #ffffff;
    font-family:     'Montserrat', sans-serif;
    font-size:       13px;
    font-weight:     500;
    line-height:     33px;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    text-decoration: none;
    text-align:      center;
    margin:          0 auto;
    flex-shrink:     0;
}
.alq-cd-empty-cta:hover { background: #222222; color: #ffffff; text-decoration: none; }

/* ═══ MOBILE ════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .alq-cd-drawer { width: 100vw; }
    .alq-cd-overlay--empty .alq-cd-empty-state { max-height: none; }
}