/* Liftaya side cart drawer. Uses brand variables (site-wide) with literal fallbacks. */

.lcd-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(27, 18, 20, 0.45);
  opacity: 0; transition: opacity 0.25s ease;
}
.lcd-overlay.is-open { opacity: 1; }
.lcd-overlay[hidden] { display: none; }

.lcd {
  position: fixed; top: 0; right: 0; z-index: 99999;
  height: 100%; width: min(100vw, 420px);
  background: #fff;
  box-shadow: -20px 0 60px rgba(27, 18, 20, 0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--brand-font-body, 'Lexend', system-ui, sans-serif);
  color: #3a2f33;
}
.lcd.is-open { transform: translateX(0); }

.lcd__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--brand-line, #ffb8d4); flex: none;
}
.lcd__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--brand-font-display, 'Fraunces', Georgia, serif);
  font-weight: 600; font-size: 1.3rem; color: var(--brand-secondary, #1b1214);
}
.lcd__hcount {
  font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--brand-primary, #ff2d78);
  border-radius: 999px; min-width: 1.3rem; height: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0.35rem;
}
.lcd__hcount[hidden] { display: none; }
.lcd__close {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--brand-line, #ffb8d4); background: #fff;
  color: var(--brand-secondary, #1b1214); cursor: pointer; transition: 0.15s; flex: none;
}
.lcd__close:hover { background: var(--brand-primary, #ff2d78); color: #fff; border-color: var(--brand-primary, #ff2d78); }
/* X drawn in pure CSS (immune to any site-wide rule that was hiding the inline <svg> on live). */
.lcd__close::before, .lcd__close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.05rem; height: 2px; border-radius: 2px; background: currentColor;
}
.lcd__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lcd__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lcd__close svg { display: none; }

.lcd__timer {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1rem; flex: none;
  background: var(--brand-secondary, #1b1214); color: #fff;
  font-size: 0.78rem; letter-spacing: 0.02em;
}
.lcd__timer[hidden] { display: none; }
.lcd__timer svg { width: 1rem; height: 1rem; color: var(--brand-accent, #ff7eb0); }
.lcd__timer b { color: var(--brand-accent, #ff7eb0); font-variant-numeric: tabular-nums; }

.lcd__inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* empty state */
.lcd__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; text-align: center; color: var(--brand-muted, #8a7078); }
.lcd__empty p { margin: 0; font-size: 1rem; }

/* free-shipping bar */
.ship { padding: 0.85rem 1.25rem; background: #fff0f7; border-bottom: 1px solid var(--brand-line, #ffb8d4); flex: none; }
.ship__txt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: #3a2f33; margin-bottom: 0.5rem; }
.ship__txt b { color: var(--brand-primary, #ff2d78); }
.ship__txt svg { width: 1rem; height: 1rem; color: var(--brand-primary, #ff2d78); flex: none; }
.ship__txt--won { color: var(--brand-primary, #ff2d78); margin-bottom: 0; }
.ship__bar { height: 0.5rem; border-radius: 99px; background: #fff; border: 1px solid var(--brand-line, #ffb8d4); overflow: hidden; }
.ship__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-accent, #ff7eb0), var(--brand-primary, #ff2d78)); border-radius: 99px; transition: width 0.3s ease; }

.lcd__scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.25rem 1.25rem; }

/* items */
.lcd__items { }
.item { display: flex; gap: 0.85rem; padding: 1rem 0; border-bottom: 1px dashed var(--brand-line, #ffb8d4); position: relative; }
.item .item__img,
.item img { width: 66px !important; height: 82px; object-fit: cover; border-radius: 12px; background: #ffeef5; flex: none; margin: 0 !important; }
/* Bundle line item: two component packshots as an overlapping circle duo (same as cross-sell).
   Wider than a single thumb so the 2nd product stays clearly visible behind the 1st. */
.item .item__img--duo { width: 84px !important; height: 82px; background: none !important; border-radius: 0 !important; position: relative; }
.item .item__img--duo img { position: absolute; top: 50%; left: auto; width: 50px !important; height: 50px !important; border-radius: 50% !important; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(27, 18, 20, 0.18); background: #ffeef5; transform: translateY(-50%); }
.item .item__img--duo img:first-child { left: 0; z-index: 2; }
.item .item__img--duo img:last-child { left: 34px; z-index: 1; }
.item__main { flex: 1; min-width: 0; padding-right: 1.2rem; }
.item__name { font-weight: 700; font-size: 0.9rem; color: var(--brand-secondary, #1b1214); margin: 0 0 0.15rem; }
.item__meta { font-size: 0.76rem; color: var(--brand-muted, #8a7078); margin: 0 0 0.55rem; }
.item__meta p { margin: 0; }
/* Per-line size picker (A–D) — change the size right in the cart. */
.item__size { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin: 0.1rem 0 0.5rem; }
.item__size-lbl { font-size: 0.72rem; color: var(--brand-muted, #8a7078); margin-right: 0.1rem; }
.item__size--need .item__size-lbl { color: var(--brand-primary-dark, #d90048); font-weight: 700; }
.item__size-btn { min-width: 1.55rem; height: 1.55rem; padding: 0 0.25rem; border: 1px solid var(--brand-line, #ffb8d4); background: #fff; border-radius: 7px; font-size: 0.72rem; font-weight: 700; color: var(--brand-secondary, #1b1214); cursor: pointer; line-height: 1; transition: 0.12s; }
.item__size-btn:hover { border-color: var(--brand-primary, #ff2d78); color: var(--brand-primary, #ff2d78); }
.item__size-btn.is-active { background: var(--brand-primary, #ff2d78); border-color: var(--brand-primary, #ff2d78); color: #fff; }
.item__size--need .item__size-btn { border-color: var(--brand-primary, #ff2d78); }
.item__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--brand-line, #ffb8d4); border-radius: 999px; overflow: hidden; }
.qty button { width: 1.9rem; height: 1.9rem; border: 0; background: #fff; color: var(--brand-secondary, #1b1214); font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qty button:hover { background: #fff0f7; color: var(--brand-primary, #ff2d78); }
.qty span { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 0.84rem; }
.item__price { font-weight: 800; font-size: 0.92rem; color: var(--brand-secondary, #1b1214); text-align: right; }
.item__price s { display: block; font-weight: 500; font-size: 0.74rem; color: var(--brand-muted, #8a7078); }
.item__remove { position: absolute; top: 1rem; right: 0; width: 1.6rem; height: 1.6rem; border: 0; background: none; color: var(--brand-muted, #8a7078); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.item__remove:hover { background: #ffeef5; color: var(--brand-primary, #ff2d78); }
.item__remove svg { width: 1rem; height: 1rem; }

/* cross-sell */
.xs { margin: 1.1rem 0 0.5rem; }
.xs__h { display: flex; align-items: center; gap: 0.6rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary, #ff2d78); margin: 0 0 0.7rem; }
.xs__h::before, .xs__h::after { content: ""; flex: 1; height: 1px; background: var(--brand-line, #ffb8d4); }
.xs__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border: 1px solid var(--brand-line, #ffb8d4); border-radius: 14px; margin-bottom: 0.55rem; background: #fff0f7; }
.xs__item--up { border-color: var(--brand-primary, #ff2d78); border-width: 1.5px; box-shadow: 0 6px 16px rgba(255, 45, 120, 0.12); }
.xs__img { width: 54px; height: 54px; border-radius: 10px; object-fit: contain; background: #fff; flex: none; padding: 0.15rem; }
/* A bundle shows its two key component packshots as overlapping circle avatars (a "duo" stack)
   so it clearly reads as TWO products. Packshots are portrait 3:4 — circle-cropped + cover keeps
   the pair centred; the component names are spelled out in .xs__parts below the title. */
.xs__img--collage { width: 76px; height: 52px; border-radius: 0; background: none; padding: 0; position: relative; display: block; overflow: visible; }
.xs__img--collage img { position: absolute; top: 50%; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(27, 18, 20, 0.18); background: #fff0f7; transform: translateY(-50%); }
.xs__img--collage img:first-child { left: 0; z-index: 2; }
.xs__img--collage img:last-child { left: 30px; z-index: 1; }
.xs__info { flex: 1; min-width: 0; }
.xs__name { font-weight: 700; font-size: 0.82rem; color: var(--brand-secondary, #1b1214); }
.xs__parts { font-size: 0.68rem; color: var(--brand-muted, #9a7d88); margin-top: 0.05rem; }
.xs__save { font-size: 0.7rem; font-weight: 700; color: #0da777; margin: 0.1rem 0; }
.xs__price { font-size: 0.78rem; }
.xs__price .now { font-weight: 800; color: var(--brand-primary, #ff2d78); }
.xs__price s { color: var(--brand-muted, #8a7078); margin-right: 0.3rem; font-size: 0.72rem; }
.xs__add { flex: none; border: 1.5px solid var(--brand-primary, #ff2d78); background: #fff; color: var(--brand-primary, #ff2d78); font-weight: 800; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer; transition: 0.15s; }
.xs__add:hover { background: var(--brand-primary, #ff2d78); color: #fff; }
.xs__item--up .xs__add { background: linear-gradient(145deg, var(--brand-primary, #ff2d78), var(--brand-primary-dark, #d90048)); color: #fff; }

/* footer */
.lcd__foot { flex: none; border-top: 1px solid var(--brand-line, #ffb8d4); padding: 1rem 1.25rem 1.25rem; background: #fff; }
/* Pre-sale "Rabat" summary (display-only anchoring — the charged total is unchanged). */
.totals__row { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.9rem; margin-bottom: 0.4rem; }
.totals__row .lbl { color: var(--brand-secondary, #1b1214); }
.totals__row--reg .lbl, .totals__row--reg .val { color: var(--brand-muted, #8a7078); }
.totals__row--save .lbl { color: var(--brand-primary-dark, #d90048); font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
.totals__row--save .val { color: var(--brand-primary-dark, #d90048); font-weight: 800; }
.totals__row--save svg { width: 0.95rem; height: 0.95rem; flex: none; }
.totals__sep { border: 0; border-top: 1px dashed var(--brand-line, #ffb8d4); margin: 0.55rem 0; }
.totals { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.2rem; }
.totals__label { font-size: 0.95rem; font-weight: 600; color: var(--brand-secondary, #1b1214); }
.totals__val { font-family: var(--brand-font-display, 'Fraunces', Georgia, serif); font-weight: 700; font-size: 1.5rem; color: var(--brand-primary, #ff2d78); }
.totals__val .amount { color: inherit; }
.totals__note { font-size: 0.72rem; color: var(--brand-muted, #8a7078); margin: 0 0 0.9rem; }

.lcd-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border: 0; border-radius: 999px; padding: 1.05rem 1.5rem; font-weight: 800; font-size: 0.95rem; text-decoration: none; cursor: pointer; transition: transform 0.15s; font-family: inherit; }
.lcd-btn:hover { transform: translateY(-1px); }
.lcd-btn--primary { color: #fff; background: linear-gradient(145deg, var(--brand-primary, #ff2d78), var(--brand-primary-dark, #d90048)); box-shadow: 0 14px 30px rgba(255, 45, 120, 0.28); }
.lcd-btn svg { width: 1.05rem; height: 1.05rem; }
.lcd__viewcart { display: block; text-align: center; margin-top: 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--brand-muted, #8a7078); text-decoration: underline; }
.lcd__trust { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 0.85rem; font-size: 0.7rem; color: var(--brand-muted, #8a7078); flex-wrap: wrap; }
.lcd__trust span { display: inline-flex; align-items: center; gap: 0.3rem; }
.lcd__trust svg { width: 0.9rem; height: 0.9rem; color: var(--brand-primary, #ff2d78); }

/* header cart-count badge (on the icon) */
.lcd-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px;
  background: var(--brand-primary, #ff2d78); color: #fff;
  font-size: 0.62rem; font-weight: 800; line-height: 1.05rem; text-align: center;
}
.lcd-count[hidden] { display: none; }