/**
 * Anonymous guest cart (PL-GUESTCART).
 *
 * Tokens and accessibility rules are taken from pdp_purchase.css deliberately, so the cart
 * a guest sees is visually the same product as the page they came from:
 *   - --sf-red is #A82024, the red the live site renders, which clears WCAG AAA on white.
 *     The brighter #E03C31 from older brand material fails AA and is not used here either.
 *   - every interactive control has a :focus-visible ring distinct from its hover state.
 *   - touch targets are at least 44px on the short edge (WCAG 2.5.8). The quantity
 *     steppers and Remove are the controls that matter for this on a phone.
 *   - state is never colour alone.
 *
 * Scoped entirely under .sf-guest-cart. This sheet loads on every website page (the JS
 * that needs it does too), so nothing here may leak into webshop's own cart, which a
 * signed-in shopper still sees.
 */

.sf-guest-cart {
  --sf-red: #A82024;
  --sf-red-dark: #8C191D;
  --sf-ink: #1F1B18;
  --sf-muted: #5C5550;
  --sf-line: #DDD5C9;
  --sf-cream: #FDFAF3;
  --sf-radius: 8px;

  color: var(--sf-ink);
  max-width: 720px;
  margin: 1.5rem auto 3rem;
  padding: 0 16px;
}

.sf-guest-cart-title {
  font-size: 1.6rem;
  margin: 0 0 1rem;
  color: var(--sf-ink);
}

/* ---------- lines ---------- */

.sf-gc-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "main qty price" "main qty remove";
  gap: 0.25rem 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--sf-line);
}

.sf-gc-main { grid-area: main; min-width: 0; }

.sf-gc-name {
  display: block;
  font-weight: 600;
  color: var(--sf-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sf-gc-name:hover,
.sf-gc-name:focus-visible { color: var(--sf-red); text-decoration: underline; }

.sf-gc-meta {
  font-size: 0.85rem;
  color: var(--sf-muted);
  margin-top: 0.15rem;
}

.sf-gc-qty {
  grid-area: qty;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sf-gc-qty button {
  /* 44px short edge: WCAG 2.5.8. */
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--sf-line);
  background: #FFFFFF;
  border-radius: var(--sf-radius);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--sf-ink);
  cursor: pointer;
}

.sf-gc-qty button:hover { border-color: var(--sf-red); color: var(--sf-red); }

.sf-gc-n {
  min-width: 2.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sf-gc-price {
  grid-area: price;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sf-gc-remove {
  grid-area: remove;
  justify-self: end;
  /* Text button, so the 44px rule is met with padding rather than a box. */
  min-height: 44px;
  padding: 0 0.25rem;
  border: none;
  background: none;
  color: var(--sf-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.sf-gc-remove:hover { color: var(--sf-red); }

/* ---------- footer ---------- */

.sf-gc-foot {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--sf-cream);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius);
}

.sf-gc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 1.1rem;
}

.sf-gc-total strong { font-variant-numeric: tabular-nums; }

.sf-gc-note {
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
  color: var(--sf-muted);
}

.sf-gc-checkout {
  display: block;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: var(--sf-radius);
  background: var(--sf-red);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.sf-gc-checkout:hover { background: var(--sf-red-dark); }
.sf-gc-checkout[disabled] { opacity: 0.6; cursor: wait; }

.sf-gc-signin {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--sf-muted);
}

.sf-gc-signin a { color: var(--sf-red); text-decoration: underline; }

/* ---------- focus, shared ---------- */

.sf-guest-cart a:focus-visible,
.sf-guest-cart button:focus-visible {
  outline: 3px solid var(--sf-red);
  outline-offset: 2px;
}

/* ---------- phone ---------- */

@media (max-width: 560px) {
  .sf-gc-line {
    grid-template-columns: 1fr auto;
    grid-template-areas: "main main" "qty price" "remove remove";
    row-gap: 0.5rem;
  }
  .sf-gc-remove { justify-self: start; }
}