/* =====================================================================
   ALQ-CART.CSS  —  ALQQAMAR Cart Page Styles
   Figma source: "💙 CART" · ✨ Optimized frames
   Desktop: 1146:7262 (1440px) | Mobile: 1146:7298 (390px)
   All measurements from absoluteRenderBounds. All code fluid.
   ===================================================================== */

/* ═══ WHITE BACKGROUND — override WooCommerce/plugin defaults ════════ */
body.woocommerce-cart,
body.woocommerce-cart .main-wrap { background-color: #ffffff !important; }

/* ═══ PAGE WRAPPER ═══════════════════════════════════════════════════ */
/* Fluid padding: 24px at 390px → 75px at 1440px, then centers content */

.ct-page {
  box-sizing:     border-box;
  padding-top:    68px;   /* mobile: back-link at Figma y=68 */
  padding-bottom: 80px;
  padding-left:   max(clamp(24px, calc(24px + 51 * ((100vw - 390px) / 1050)), 75px), calc((100vw - 1290px) / 2));
  padding-right:  max(clamp(24px, calc(24px + 51 * ((100vw - 390px) / 1050)), 75px), calc((100vw - 1290px) / 2));
}

/* ═══ BACK LINK ══════════════════════════════════════════════════════ */
/* Mobile: Figma y=68, cobalt, 11px Medium, 4% tracking, uppercase     */
/* Desktop: same style, different vertical gap                           */

.ct-continue {
  display:         inline-block;
  font-family:     'Montserrat', sans-serif;
  font-size:       11px;
  font-weight:     500;
  line-height:     13px;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  color:           #0B40B4;
  text-decoration: none;
  margin-bottom:   13px; /* mobile: 94 - (68+13) = 13px gap to heading */
}

/* ═══ CART HEADER ════════════════════════════════════════════════════ */

/* CART heading */
/* Mobile: Montserrat Light 28px, lineHeight 34px, uppercase, y=94     */
.ct-title {
  display:        block;
  font-family:    'Montserrat', sans-serif;
  font-size:      28px;
  font-weight:    300;
  line-height:    34px;
  text-transform: uppercase;
  color:          #000000;
  margin:         0 0 10px; /* mobile: 138 - (94+34) = 10px gap to count */
}

/* Item count */
/* Mobile: 11px Regular, black, lineHeight 13px, y=138                 */
.ct-count {
  display:     block;
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  font-weight: 400;
  line-height: 13px;
  color:       #000000; /* mobile: black */
  margin:      0 0 9px; /* mobile: 160 - (138+13) = 9px gap to rule */
}

/* Divider below header */
/* Mobile: 0.5px black; Desktop: 0.5px #CCCCCC (overridden below)      */
hr.ct-title-rule {
  border:     none;
  border-top: 0.5px solid #000000;
  margin:     0;
}

/* ═══ CART FORM ══════════════════════════════════════════════════════ */

.alq-cart-form { margin-top: 14px; }

/* ═══ COLUMN HEADERS ═════════════════════════════════════════════════ */
/* Mobile: grid 48px | 1fr | 60px (QTY) | 52px (TOTAL)                */
/* ITEM header hidden on mobile; QTY + TOTAL visible, Regular 9px black */

.alq-cart-head {
  display:               grid;
  grid-template-columns: 48px 1fr 60px 52px;
  column-gap:            8px;
  align-items:           center;
  padding-bottom:        10px;
  border-bottom:         0.5px solid #000000; /* mobile: black hairline */
}

.alq-cart-head__item  { grid-column: 2; display: none; } /* hidden mobile */
.alq-cart-head__qty   { grid-column: 3; text-align: center; }
.alq-cart-head__total { grid-column: 4; text-align: right; }

.alq-cart-head__item,
.alq-cart-head__qty,
.alq-cart-head__total {
  font-family:    'Montserrat', sans-serif;
  font-size:      9px;
  font-weight:    400;
  line-height:    11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color:          #000000;
}

/* ═══ CART ITEM ROWS ═════════════════════════════════════════════════ */
/* Mobile: 48×62px thumb, flexible info, 60px qty (centered), 52px price */

.alq-ci {
  display:               grid;
  grid-template-columns: 48px 1fr 60px 52px;
  grid-template-areas:   "img info qty total";
  column-gap:            8px;
  align-items:           center; /* vertically center columns per Anissa */
  padding:               12px 0;
  border-bottom:         0.5px solid #000000; /* mobile: black hairline */
}

/* Thumbnail */
.alq-ci__img {
  grid-area: img;
  width:     48px;
  height:    62px;
  overflow:  hidden;
  align-self: start; /* thumbnail anchors to top of row */
}
.alq-ci__img a   { display: block; width: 100%; height: 100%; }
.alq-ci__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Product info */
.alq-ci__info {
  grid-area:  info;
  min-width:  0;
  align-self: start;
  padding-top: 8px; /* mobile: name at y=210, thumb at y=202 → 8px offset */
}

/* Product name */
/* Mobile: Montserrat Regular 11px, lineHeight 13px, black              */
.alq-ci__name {
  display:         block;
  font-family:     'Montserrat', sans-serif;
  font-size:       11px;
  font-weight:     400;
  line-height:     13px;
  color:           #000000;
  text-decoration: none;
}

/* Product subtitle / variation */
/* Mobile: Regular 10px, lineHeight 12px, black                         */
.alq-ci__info dl.variation { margin: 4px 0 0; padding: 0; }
.alq-ci__info dl.variation dt,
.alq-ci__info dl.variation dd {
  display:     inline;
  font-family: 'Montserrat', sans-serif;
  font-size:   10px;
  font-weight: 400;
  line-height: 12px;
  color:       #000000; /* mobile: black */
  margin:  0; padding: 0;
}
.alq-ci__info dl.variation p         { display: inline; margin: 0; }
.alq-ci__info dl.variation dt::after { content: ':'; margin-right: 2px; }
.alq-ci__info dl.variation dd + dt   { margin-left: 6px; }

/* Remove text link — visible in info column per Figma design           */
/* Mobile: 8px Regular, lineHeight 10px, #757575 at 75% opacity        */
a.remove.alq-ci__remove,
a.alq-ci__remove {
  display:         inline-block;
  font-family:     'Montserrat', sans-serif;
  font-size:       8px;
  font-weight:     400;
  line-height:     10px;
  color:           rgba(117, 117, 117, 0.75);
  text-decoration: none;
  margin-top:      6px;
}

/* WooCommerce default remove (not our custom link) */
.woocommerce-cart-form a.remove:not(.alq-ci__remove) { display: none !important; }

/* ── Qty controls ── */
.alq-ci__qty {
  grid-area:       qty;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             2px;
}

.alq-qbtn {
  background: none;
  border:     none;
  padding:    0; margin: 0;
  cursor:     pointer;
  line-height: 1;
  width:       20px;
  height:      20px;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Trash SVG (qty = 1) */
.alq-qbtn--minus svg {
  width:       13px;
  height:      13px;
  stroke:      #858585;
  flex-shrink: 0;
}

/* Minus character (qty > 1) */
/* Mobile: Montserrat Regular 14px, lineHeight 16px                     */
.alq-qbtn--minus .alq-minus,
.alq-minus {
  font-family: 'Montserrat', sans-serif;
  font-size:   14px;
  font-weight: 400;
  line-height: 16px;
  color:       #111111;
  display:     inline;
}

/* Plus button */
/* Mobile: Montserrat Regular 13px, lineHeight 16px                     */
.alq-qbtn--plus {
  font-family: 'Montserrat', sans-serif;
  font-size:   13px;
  font-weight: 400;
  line-height: 16px;
  color:       #111111;
}

/* Qty number input */
/* Mobile: Montserrat Regular 13px, lineHeight 16px                     */
.alq-qnum,
.alq-qnum.qty {
  font-family: 'Montserrat', sans-serif;
  width:       20px;
  font-size:   13px;
  font-weight: 400;
  line-height: 16px;
  color:       #111111;
  text-align:  center;
  border:      none !important;
  outline:     none !important;
  background:  none;
  padding:     0;
  -moz-appearance:  textfield;
  appearance:       textfield;
}
.alq-qnum::-webkit-outer-spin-button,
.alq-qnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Singular qty display */
.alq-ci__qty--singular { align-self: center; }
.alq-qnum-singular {
  font-family: 'Montserrat', sans-serif;
  font-size:   13px;
  font-weight: 400;
  color:       #111111;
}

/* ── Price / Total ── */
/* Mobile: Montserrat Regular 11px, lineHeight 13px, black, right-aligned */
.alq-ci__total {
  grid-area:  total;
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  font-weight: 400;
  line-height: 13px;
  color:       #000000;
  text-align:  right;
  white-space: nowrap;
  min-width:   52px;
}

/* ═══ CART TOTALS ════════════════════════════════════════════════════ */
/* Mobile: subtotal y=406, last row divider y=378, gap = 28px           */

.cart-collaterals { padding-top: 28px; }

.alq-totals-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         8px 0;
}

/* Mobile: all labels/values Regular 11px black                         */
.alq-totals-lbl {
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  font-weight: 400;
  line-height: 13px;
  color:       #000000;
}
.alq-totals-val {
  font-family: 'Montserrat', sans-serif;
  font-size:   11px;
  font-weight: 400;
  line-height: 13px;
  color:       #000000;
  text-align:  right;
}

/* Mobile subtotal amount: Regular 14px                                 */
.alq-subtotal-row .alq-totals-val {
  font-size:   14px;
  font-weight: 400;
  line-height: 17px;
}

/* ═══ CTA PROCEED BUTTON ════════════════════════════════════════════ */
/* Mobile: left-aligned, 214×33px, black; Desktop: right-aligned 214px */

.alq-cart-proceed { margin-top: 45px; } /* mobile: 468-(406+17)=45px */

.alq-ship-note {
  display:         block;
  font-family:     'Montserrat', sans-serif;
  font-size:       9px;
  font-weight:     300;
  line-height:     11px;
  color:           #858585;
  margin-bottom:   12px;
}

.alq-proceed-btn-wrap .woocommerce-Button,
.alq-proceed-btn-wrap .checkout-button,
.alq-proceed-btn-wrap .button,
.alq-proceed-btn-wrap a {
  display:          block;
  box-sizing:       border-box;
  width:            214px; /* mobile: left-aligned 214px per Figma x=24 */
  margin:           0;
  height:           33px;  /* CORRECTED from 40px — Figma: 33px */
  padding:          0 32px;
  background-color: #000000 !important;
  color:            #ffffff !important;
  text-align:       center;
  font-family:      'Montserrat', sans-serif;
  font-size:        11px;
  font-weight:      500;
  line-height:      33px;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
  text-decoration:  none;
  border:           none;
  border-radius:    0;
  cursor:           pointer;
}

/* ═══ EMPTY CART STATE (page — not drawer) ═══════════════════════════ */

.alq-bag-empty {
  font-family:    'Montserrat', sans-serif;
  font-size:      14px;
  font-style:     italic;
  font-weight:    300;
  line-height:    18px;
  letter-spacing: 0.5px;
  color:          #0f0f0f;
  margin:  41px 0 0;
  padding: 0;
}
.alq-cart-explore { margin: 21px 0 0; padding: 0; }
.alq-cart-explore a {
  font-family:     'Montserrat', sans-serif;
  font-size:       11px;
  font-weight:     500;
  line-height:     13px;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  color:           #0B40B4;
  text-decoration: none;
}

/* ═══ SUPPRESS WOOCOMMERCE NOISE ════════════════════════════════════ */

#wc-stripe-express-checkout-element,
.wc-stripe-express-checkout-wrapper,
.wcpay-express-checkout-wrapper,
.wc-block-components-express-payment,
.wc-express-payment-container,
#payment-request-button-separator,
.woocommerce-PaymentMethod--applePay,
[id*="express-checkout"],
[class*="express-checkout"],
[class*="apple-pay"],
[class*="google-pay"],
#wc-stripe-payment-request-wrapper { display: none !important; }

.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info { display: none !important; }

/* ═══ DESKTOP (≥ 1024px) ═════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* Page */
  .ct-page { padding-top: 204px; } /* desktop: ct-continue near Figma y=201 */

  /* ── Back link ── */
  /* Desktop: same cobalt/11px/500/tracking from base; only margin changes */
  .ct-continue { margin-bottom: 12px; } /* 226-(201+13)=12px */

  /* ── Cart heading ── */
  /* Desktop: Montserrat Regular 32px, lineHeight 39px, y=226            */
  .ct-title {
    font-size:   32px;
    font-weight: 400;
    line-height: 39px;
    margin:      0 0 6px; /* 271-(226+39)=6px */
  }

  /* ── Item count ── */
  /* Desktop: gray #757575, margin 13px to top rule                      */
  .ct-count {
    color:  #757575; /* CORRECTED from #858585 */
    margin: 0 0 13px; /* 297-(271+13)=13px */
  }

  /* ── Dividers ── */
  hr.ct-title-rule { border-top: 0.5px solid #CCCCCC; } /* desktop: light gray */

  /* ── Column headers ── */
  /* Desktop: Montserrat SemiBold 15px, lineHeight 11px (tight), 14% tracking */
  /* Grid: 56px thumb | 1fr info | 90px qty | 80px total                */
  .alq-cart-head {
    grid-template-columns: 56px 1fr 90px 80px;
    column-gap:    12px;
    padding-bottom: 16px;
    border-bottom:  0.5px solid #CCCCCC;
  }
  .alq-cart-head__item { display: block; } /* visible on desktop */

  .alq-cart-head__item,
  .alq-cart-head__qty,
  .alq-cart-head__total {
    font-size:      15px;   /* CORRECTED from 9px */
    font-weight:    600;
    line-height:    11px;   /* tighter than font-size — intentional Figma spec */
    letter-spacing: 0.14em;
    color:          #757575; /* CORRECTED from #858585 */
  }

  /* ── Cart item rows ── */
  /* Desktop: 56×72px thumb, align-items start (name pins top)          */
  .alq-ci {
    grid-template-columns: 56px 1fr 90px 80px;
    column-gap:   12px;
    align-items:  start;
    padding:      18px 0;
    border-bottom: 0.5px solid #CCCCCC;
  }

  .alq-ci__img {
    width:  56px;
    height: 72px;
  }

  .alq-ci__info { padding-top: 0; }

  /* Desktop: Montserrat Medium 12px, lineHeight 15px                   */
  .alq-ci__name {
    font-size:   12px;
    font-weight: 500;
    line-height: 15px;
  }

  /* Desktop subtitle: Regular 10px, lineHeight 12px, gray #757575      */
  .alq-ci__info dl.variation dt,
  .alq-ci__info dl.variation dd { color: #757575; }

  /* Desktop remove link: Regular 9px, lineHeight 11px                  */
  a.remove.alq-ci__remove,
  a.alq-ci__remove {
    font-size:  9px;
    line-height: 11px;
    margin-top: 4px;
  }

  /* Desktop qty number: Regular 12px */
  .alq-qnum,
  .alq-qnum.qty { font-size: 12px; width: 24px; }

  /* Desktop total: Medium 12px, lineHeight 15px, 80px min-width        */
  .alq-ci__total {
    font-size:   12px;
    font-weight: 500;
    line-height: 15px;
    min-width:   80px;
  }

  /* ── Desktop totals (right-aligned, 495px section) ── */
  /* Subtotal section spans x=870–1365 in 1440 frame = 495px            */
  .cart-collaterals {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    padding-top:    0;
    margin-top:     24px;
  }
  .alq-cart-totals { width: 495px; }

  .alq-totals-row { padding: 12px 0; }

  /* Desktop subtotal label: SemiBold 13px, lineHeight 11px, 14%, gray  */
  .alq-subtotal-row .alq-totals-lbl {
    font-size:      13px;    /* CORRECTED from 9px */
    font-weight:    600;
    line-height:    11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          #757575; /* CORRECTED from #858585 */
  }

  /* Desktop subtotal amount: SemiBold 14px, lineHeight 17px, black     */
  .alq-subtotal-row .alq-totals-val {
    font-size:   14px;
    font-weight: 600;
    line-height: 17px;
    color:       #000000;
  }

  /* Desktop CTA placement — right-aligned within 495px totals zone      */
  .alq-cart-proceed {
    margin-top:     20px;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    width:          495px;
  }
  .alq-ship-note { text-align: right; margin-bottom: 10px; }

  /* Desktop CTA — height: 33px, 11px Medium, right-aligned             */
  /* (base already sets 33px; no override needed — repeating for clarity) */
  .alq-proceed-btn-wrap .woocommerce-Button,
  .alq-proceed-btn-wrap .checkout-button,
  .alq-proceed-btn-wrap .button,
  .alq-proceed-btn-wrap a {
    height:      33px;
    line-height: 33px;
  }

  /* Desktop empty state */
  .alq-bag-empty  { font-size: 16px; line-height: 20px; margin-top: 46px; }
  .alq-cart-explore { margin-top: 18px; }
  .alq-cart-explore a { font-size: 12px; line-height: 15px; }

}