/* ============================================================
   Cart dialog — the cart itself ("Added to your cart" /
   "Your cart"). Sized between the first (large) dialog and a fully compact one
   (Klaas, 2026-10-13).
   Markup: template-parts/cart/*.
   Behaviour: assets/js/cart-flow.js. Tokens only (tokens.css +
   the --soofos-* bridge in assets/css/tokens.css).
   ============================================================ */

html.sf-cart-locked { overflow: hidden; }

/* Header icon outside #sf-nav (shell.css styles the header one). */
.sf-cart-icon[hidden] { display: none; }

/* ---------- Shell ---------- */
.sf-cartm {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--soofos-space-2xl) var(--soofos-space-lg); overflow-y: auto;
  font-family: var(--font); color: var(--body);
}
.sf-cartm[hidden] { display: none; }
.sf-cartm__scrim {
  position: fixed; inset: 0; background: var(--overlay);
  opacity: 0; transition: opacity .2s ease;
}
.is-open > .sf-cartm__scrim { opacity: 1; }

.sf-cart-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--soofos-control-min-height); height: var(--soofos-control-min-height);
  border: 0; border-radius: var(--r-btn); background: transparent; color: var(--muted); cursor: pointer;
}
.sf-cart-x:hover { background: var(--blue-fill); color: var(--ink); }
.sf-cart-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sf-cartm__dialog {
  position: relative; width: 100%; max-width: 660px;
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease;
}
.sf-cartm.is-open .sf-cartm__dialog { opacity: 1; transform: none; }
.sf-cartm__close { position: absolute; top: var(--soofos-space-xs); right: var(--soofos-space-xs); z-index: 1; }
.sf-cartm__body[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- Cart ---------- */
.sf-cartm__main { padding: var(--soofos-space-xl) var(--soofos-space-2xl) var(--soofos-space-xl); }
.sf-cartm__title {
  display: flex; align-items: center; gap: var(--soofos-space-xs);
  margin: 0 var(--soofos-space-2xl) var(--soofos-space-md) 0;
  font: 800 1.1875rem/1.3 var(--font); color: var(--ink);
}
.sf-cartm__ok { display: inline-flex; color: var(--green-ink); }
.sf-cartm__ok .sf-icon { width: 22px; height: 22px; }

.sf-cartm__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sf-cartm__line { border-bottom: 1px solid var(--card-border); }
.sf-cartm__line:first-child { border-top: 1px solid var(--card-border); }
.sf-cartm__line > .sf-cart-row { padding: var(--soofos-space-sm) 0; border: 0; border-radius: 0; background: none; }

.sf-cartm__totals { margin: var(--soofos-space-md) 0 0; display: flex; flex-direction: column; gap: var(--soofos-space-2xs); }
.sf-cartm__total-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--soofos-space-md); font-size: .9375rem; color: var(--muted); }
.sf-cartm__total-row dt, .sf-cartm__total-row dd { margin: 0; }
.sf-cartm__total-row--discount dd { color: var(--green-ink); font-weight: 700; }
.sf-cartm__total-row--total { padding-top: var(--soofos-space-2xs); color: var(--ink); font-weight: 800; font-size: var(--soofos-text-lg); }
.sf-cartm__coupon-x {
  margin-left: var(--soofos-space-xs); padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--soofos-text-xs) var(--font); color: var(--deep-blue); text-decoration: underline;
}
.sf-cartm__coupon-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.sf-cartm__coupon { margin-top: var(--soofos-space-sm); font-size: var(--soofos-text-sm); }
.sf-cartm__coupon summary {
  display: inline-flex; align-items: center; min-height: var(--soofos-control-min-height);
  cursor: pointer; font-weight: 700; color: var(--deep-blue); list-style: none;
}
.sf-cartm__coupon summary::-webkit-details-marker { display: none; }
.sf-cartm__coupon summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-btn); }
.sf-cartm__coupon-form { display: flex; gap: var(--soofos-space-xs); }
.sf-cartm__coupon-form input {
  flex: 1 1 auto; min-width: 0; min-height: var(--soofos-control-min-height);
  padding: 0 var(--soofos-space-md); border: 1px solid var(--card-border); border-radius: var(--r-btn);
  font: 600 var(--soofos-text-sm) var(--font); color: var(--ink); background: var(--white);
}
.sf-cartm__coupon-form input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.sf-cartm__coupon-form .btn { min-height: var(--soofos-control-min-height); }

.sf-cartm__cta { display: flex; align-items: center; gap: var(--soofos-space-md); margin-top: var(--soofos-space-md); }
.sf-cartm__checkout { flex: 1 1 auto; justify-content: center; min-height: var(--soofos-control-min-height); }
.sf-cartm__checkout .sf-icon { width: 18px; height: 18px; }
.sf-cartm__continue {
  flex: 0 0 auto; min-height: var(--soofos-control-min-height); border: 0; background: none; cursor: pointer;
  font: 700 var(--soofos-text-sm) var(--font); color: var(--deep-blue); border-radius: var(--r-btn);
}
.sf-cartm__continue:hover { text-decoration: underline; }
.sf-cartm__continue:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sf-cartm__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--soofos-space-sm); }
.sf-cartm__empty p { margin: 0; color: var(--muted); font-size: var(--soofos-text-sm); }

.sf-cartm__more { background: var(--page); border-top: 1px solid var(--card-border); padding: var(--soofos-space-xl) var(--soofos-space-2xl); }
.sf-cartm__bundle { margin-top: var(--soofos-space-md); }

/* ---------- Rows ---------- */
.sf-cart-row {
  display: flex; align-items: center; gap: var(--soofos-space-md);
  padding: var(--soofos-space-sm) var(--soofos-space-md); background: var(--white);
  border: 1px solid var(--card-border); border-radius: var(--r-card-sm);
}
.sf-cart-row__thumb {
  flex: 0 0 auto; width: 80px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-btn); background: var(--blue-fill);
}
.sf-cart-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--soofos-space-2xs); }
.sf-cart-row__title {
  font: 700 .9375rem/1.35 var(--font); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.sf-cart-row__title:hover { color: var(--deep-blue); }
.sf-cart-row__title:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.sf-cart-row__meta { display: flex; flex-wrap: wrap; gap: var(--soofos-space-sm); font-size: var(--soofos-text-xs); color: var(--muted); }
.sf-cart-row__rating, .sf-cart-row__students { display: inline-flex; align-items: center; gap: var(--soofos-space-2xs); }
.sf-cart-row__rating { color: var(--ink); font-weight: 700; }
.sf-cart-row__star { width: 13px; height: 13px; color: var(--star); fill: currentColor; }
.sf-cart-row__students .sf-icon { width: 13px; height: 13px; }
.sf-cart-row__muted { color: var(--muted); font-weight: 600; font-size: var(--soofos-text-xs); }
.sf-cart-row__side { flex: 0 0 auto; display: flex; align-items: center; gap: var(--soofos-space-xs); }
.sf-cart-row__price { font: 800 .9375rem var(--font); color: var(--ink); white-space: nowrap; }
.sf-cart-row__was { color: var(--muted-2); font-weight: 600; margin-right: var(--soofos-space-2xs); }

.sf-cart-remove {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--soofos-control-min-height); min-height: var(--soofos-control-min-height);
  border: 0; border-radius: var(--r-btn); background: transparent; color: var(--muted); cursor: pointer;
}
.sf-cart-remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-cart-remove .sf-icon { width: 18px; height: 18px; }
.sf-cart-remove:hover { background: var(--blue-fill); color: var(--ink); }
.sf-cart-remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sf-cart-add {
  min-height: var(--soofos-control-min-height); background: var(--white); color: var(--deep-blue);
  border: 1px solid var(--blue); gap: var(--soofos-space-2xs);
}
.sf-cart-add:hover { background: var(--blue-fill); }
.sf-cart-add:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sf-cart-add .sf-icon { width: 15px; height: 15px; }
.sf-cart-add.is-loading { opacity: .6; pointer-events: none; }
.sf-cart-added {
  display: inline-flex; align-items: center; gap: var(--soofos-space-2xs);
  min-height: var(--soofos-control-min-height); padding: 0 var(--soofos-space-xs);
  font: 700 var(--soofos-text-sm) var(--font); color: var(--green-ink);
}
.sf-cart-added .sf-icon { width: 15px; height: 15px; }
.sf-cart-added:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-btn); }
.sf-cart-error { margin: var(--soofos-space-xs) 0 0; font-size: var(--soofos-text-xs); color: var(--red-danger); }

/* ---------- Suggestions ---------- */
.sf-cart-sugg { display: flex; flex-direction: column; gap: var(--soofos-space-md); }
.sf-cart-sugg__h {
  display: flex; align-items: center; gap: var(--soofos-space-xs);
  margin: 0 0 var(--soofos-space-sm); font: 800 var(--soofos-text-md)/1.3 var(--font); color: var(--ink);
}
.sf-cart-sugg__h .sf-icon { width: 16px; height: 16px; color: var(--deep-blue); }
.sf-cart-sugg__list { display: flex; flex-direction: column; gap: var(--soofos-space-xs); }

.sf-cart-bundle {
  padding: var(--soofos-space-md); background: var(--blue-tint);
  border: 1px solid var(--card-border); border-radius: var(--r-card-sm);
}
.sf-cart-bundle__note { display: flex; align-items: center; gap: var(--soofos-space-xs); margin: calc(-1 * var(--soofos-space-xs)) 0 var(--soofos-space-sm); font-size: var(--soofos-text-sm); color: var(--muted); }
.sf-cart-bundle__note--ok { color: var(--green-ink); font-weight: 700; }
.sf-cart-bundle__note .sf-icon { width: 14px; height: 14px; }

.sf-cart-plus {
  display: flex; align-items: center; gap: var(--soofos-space-sm);
  padding: var(--soofos-space-sm) var(--soofos-space-md); background: var(--white);
  border: 1px solid var(--card-border); border-radius: var(--r-card-sm); color: var(--ink);
}
.sf-cart-plus:hover { border-color: var(--blue); }
.sf-cart-plus:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sf-cart-plus__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-btn); background: var(--blue-fill); color: var(--deep-blue);
}
.sf-cart-plus__text { flex: 1 1 auto; display: flex; flex-direction: column; font-size: var(--soofos-text-xs); color: var(--muted); }
.sf-cart-plus__text strong { color: var(--ink); font-size: var(--soofos-text-sm); }
.sf-cart-plus__cta { display: inline-flex; align-items: center; gap: var(--soofos-space-2xs); font: 700 var(--soofos-text-sm) var(--font); color: var(--deep-blue); white-space: nowrap; }
.sf-cart-plus__cta .sf-icon { width: 15px; height: 15px; }

.sf-cart-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Small screens: bottom sheet ---------- */
@media (max-width: 640px) {
  .sf-cartm { padding: 0; align-items: flex-end; }
  .sf-cartm__dialog { border-radius: var(--r-card) var(--r-card) 0 0; max-height: 92vh; overflow-y: auto; }
  .sf-cartm__main, .sf-cartm__more { padding-left: var(--soofos-space-lg); padding-right: var(--soofos-space-lg); }
  .sf-cart-row__thumb { width: 64px; }
  /* Suggestions: thumb | title, with price + Add on a second row under the title. */
  .sf-cart-sugg .sf-cart-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--soofos-space-sm); row-gap: var(--soofos-space-xs); }
  .sf-cart-sugg .sf-cart-row__side { grid-column: 2; justify-content: space-between; }
  .sf-cartm__cta { flex-direction: column; align-items: stretch; gap: var(--soofos-space-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-cartm__scrim, .sf-cartm__dialog { transition: none; }
}