/* ============================================================
   Aitrixa — Mini-cart drawer (MOBILE ONLY)
   ----------------------------------------------------------------
   Slides in from the right; on mobile fills ~92vw. Desktop is
   excluded entirely via the media query wrapper below — the
   header cart link continues to navigate to /cart/ on desktop.

   Tokens come from assets/css/aitrixa.css (already loaded).
   ============================================================ */

@media (max-width: 781px) {

  /* Backdrop */
  .cart-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(11, 11, 13, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .cart-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Drawer shell */
  .cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 95;
    width: min(320px, 85vw);
    max-width: 320px;
    background: var(--white);
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -12px 0 32px rgba(11, 11, 13, .10);
  }
  .cart-drawer.open { transform: translateX(0); }

  /* Header */
  .cart-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--white);
    flex-shrink: 0;
  }
  .cart-drawer__title {
    font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--ink); font-weight: 500;
    display: flex; align-items: baseline; gap: 8px;
  }
  .cart-drawer__count {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .2em;
    color: var(--mute); font-weight: 400;
  }
  .cart-drawer__close {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    transition: border-color .15s;
  }
  .cart-drawer__close:active { border-color: var(--ink); }
  .cart-drawer__close svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 1.4; }

  /* Scrollable body */
  .cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 0;
  }

  /* ---- Line items ---- */
  .cart-line {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: 14px; row-gap: 8px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
  }
  .cart-line__thumb {
    grid-column: 1; grid-row: 1 / 4;
    width: 84px; height: 84px;
    background: var(--panel);
    overflow: hidden;
  }
  .cart-line__thumb img {
    width: 100%; height: 100%; object-fit: cover;
  }
  /* Fallback hatched placeholder when no thumb image */
  .cart-line__thumb:empty {
    background: repeating-linear-gradient(
      -45deg,
      var(--white) 0, var(--white) 6px,
      var(--panel-2) 6px, var(--panel-2) 12px
    );
  }
  .cart-line__title {
    grid-column: 2; grid-row: 1;
    font-family: var(--font-serif);
    font-size: 22px; line-height: 1; letter-spacing: -.01em;
    color: var(--ink); padding-right: 20px;
  }
  .cart-line__meta {
    grid-column: 2; grid-row: 2;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--mute);
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  }
  .cart-line__meta .dot {
    width: 2px; height: 2px; background: var(--mute-2); border-radius: 50%;
  }
  .cart-line__controls {
    grid-column: 2 / 4; grid-row: 3;
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 4px;
  }
  .cart-line__qty {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line);
    background: var(--white);
    height: 30px;
  }
  .cart-line__qty button {
    width: 28px; height: 100%;
    background: transparent; border: 0;
    font-family: var(--font-mono); font-size: 13px; color: var(--mute);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .cart-line__qty input {
    width: 28px; border: 0; background: transparent;
    text-align: center; font-family: var(--font-mono);
    font-size: 12px; color: var(--ink); padding: 0; outline: none;
    -moz-appearance: textfield;
  }
  .cart-line__qty input::-webkit-outer-spin-button,
  .cart-line__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .cart-line__price {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 16px; color: var(--ink); letter-spacing: -.01em;
  }
  .cart-line__remove {
    position: absolute; top: 18px; right: 20px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
  }
  .cart-line__remove svg { width: 11px; height: 11px; stroke: var(--mute); fill: none; stroke-width: 1.4; }
  .cart-line__remove:active svg { stroke: var(--ink); }

  /* ---- Promo ---- */
  .cart-promo {
    margin: 0 20px 14px;
    padding: 14px 0 4px;
    border-top: 1px dashed var(--line);
  }
  .cart-promo__label {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--mute); font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
  }
  .cart-promo__label svg { width: 12px; height: 12px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
  .cart-promo__row {
    display: flex; align-items: stretch;
    border: 1px solid var(--line);
    background: var(--white);
    height: 38px;
  }
  .cart-promo__input {
    flex: 1; border: 0; background: transparent;
    padding: 0 12px;
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); outline: none;
  }
  .cart-promo__input::placeholder {
    color: var(--mute-2); letter-spacing: .18em;
  }
  .cart-promo__apply {
    border: 0; border-left: 1px solid var(--line);
    background: var(--white); color: var(--ink);
    padding: 0 16px;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .cart-promo__apply:hover { background: var(--ink); color: var(--white); }
  .cart-promo__apply:disabled { color: var(--mute-2); cursor: not-allowed; }
  .cart-promo__apply:disabled:hover { background: var(--white); color: var(--mute-2); }
  .cart-promo__error {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: #b3261e;
    display: none;
  }
  .cart-promo.has-error .cart-promo__error { display: block; }

  /* ---- Footer (sticky) ---- */
  .cart-drawer__foot {
    flex-shrink: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  }
  .cart-foot__row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px;
  }
  .cart-foot__label {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--mute);
  }
  .cart-foot__total {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 24px; color: var(--ink); letter-spacing: -.02em;
  }

  /* Free-shipping progress */
  .cart-ship { margin: 6px 0 14px; }
  .cart-ship__label {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink);
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
  }
  .cart-ship__label svg { width: 13px; height: 13px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
  .cart-ship__label strong { font-weight: 600; }
  .cart-ship__bar {
    position: relative;
    height: 4px;
    background: var(--panel-2);
    margin-bottom: 8px;
  }
  .cart-ship__fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: var(--ink);
    transition: width .35s ease;
  }
  .cart-ship__tier {
    position: absolute; top: -3px; left: 100%;
    width: 10px; height: 10px;
    background: var(--white);
    border: 1.5px solid var(--ink);
    transform: translateX(-50%) rotate(45deg);
  }
  .cart-ship__tier.met { background: var(--ink); }
  .cart-ship__tiers {
    display: flex; justify-content: flex-end;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--mute);
  }
  .cart-ship__tier-label.met { color: var(--ink); font-weight: 500; }

  /* Secondary "View cart" button — outlined, sits above checkout CTA */
  .cart-view {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background .15s, color .15s;
    text-decoration: none;
  }
  .cart-view:hover { background: var(--ink); color: var(--white); }
  .cart-view svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }

  /* Primary checkout CTA */
  .cart-checkout {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    height: 54px;
    padding: 0 20px;
    background: var(--ink); color: var(--white);
    border: 0;
    font-family: var(--font-mono);
    font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
  }
  .cart-checkout svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .cart-checkout__amt {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 13.5px; letter-spacing: 0; text-transform: none;
    margin-left: auto;
  }

  /* ---- Empty state ---- */
  .cart-empty {
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 80px 30px;
    gap: 14px;
  }
  .cart-empty svg { width: 36px; height: 36px; stroke: var(--mute-2); fill: none; stroke-width: 1; }
  .cart-empty h3 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: 24px; letter-spacing: -.01em; color: var(--ink);
  }
  .cart-empty p {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--mute);
  }
  .cart-drawer.is-empty .cart-empty { display: flex; }
  .cart-drawer.is-empty .cart-drawer__foot,
  .cart-drawer.is-empty .cart-lines,
  .cart-drawer.is-empty .cart-promo { display: none; }

  /* Loading state for any line under live AJAX update */
  .cart-line.is-updating { opacity: .5; pointer-events: none; }

  /* Lock body scroll while drawer is open */
  body.cart-open { overflow: hidden; }
}

/* Desktop: hide the drawer entirely. The header cart <a> keeps its
   default navigation behavior to /cart/. */
@media (min-width: 782px) {
  .cart-drawer,
  .cart-backdrop { display: none !important; }
}


/* astra-input-reset: neutralize parent-theme form styling inside the cart drawer */
@media (max-width: 781px) {
  .cart-drawer .cart-promo__input,
  .cart-drawer .cart-line__qty input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .cart-drawer .cart-promo__input { padding: 0 12px !important; }
  .cart-drawer .cart-line__qty button { padding: 0 !important; min-width: 0 !important; width: 28px !important; }
}


/* astra-reset-2: neutralize parent-theme list margin, button padding/border, and collapsed icons inside the cart drawer */
@media (max-width: 781px) {
  .cart-drawer ul.cart-lines {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .cart-drawer .cart-line__remove {
    padding: 0 !important;
    min-width: 0 !important;
    width: 22px !important;
  }
  .cart-drawer .cart-line__remove svg {
    width: 11px !important;
    height: 11px !important;
    max-width: none !important;
  }
  .cart-drawer .cart-drawer__close {
    padding: 0 !important;
    min-width: 0 !important;
    width: 32px !important;
    border: 1px solid transparent !important;
  }
  .cart-drawer .cart-drawer__close:active { border-color: var(--ink) !important; }
  .cart-drawer .cart-drawer__close svg {
    width: 14px !important;
    height: 14px !important;
    max-width: none !important;
  }
}