@charset "utf-8";
/* =========================================================================
   Cookie consent banner (.bpr-cc)
   Loaded standalone in the public + checkout shells (like toasts.css) so it
   is available wherever the banner renders. Built entirely from design-tokens.
   Non-modal, bottom-anchored card; equal-weight Accept / Reject; a Manage
   panel with toggle rows. Behaviour: content/static/content/js/cookie-consent.js.
   ========================================================================= */

.bpr-cc {
  position: fixed;
  left: var(--page-gutter, 1.5rem);
  right: auto;
  bottom: var(--page-gutter, 1.5rem);
  z-index: 1090;
  width: min(30rem, calc(100vw - 2 * var(--page-gutter, 1.5rem)));
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-4);
  font-family: var(--font-body);
  color: var(--color-text);
  animation: bpr-cc-in 200ms ease both;
}
.bpr-cc[hidden] { display: none; }

@keyframes bpr-cc-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bpr-cc { animation: none; }
}

.bpr-cc__inner {
  padding: var(--sp-5);
}

.bpr-cc__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}
.bpr-cc__title:focus { outline: none; }
.bpr-cc__title:focus-visible {
  outline: 2px solid var(--brand-green-300);
  outline-offset: 3px;
}

.bpr-cc__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0 0 var(--sp-4);
}
.bpr-cc__body a {
  color: var(--brand-green-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bpr-cc__body a:hover { color: var(--brand-green-500); }

/* Actions row — Accept + Reject are EQUAL prominence (same size + solid fill);
   Manage is a quiet tertiary text link, never a de-emphasised "reject". */
.bpr-cc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* Shared sizing for the three pill buttons. Accept + Save compose the existing
   .btn-pill--primary variant (forest fill); this class only tightens the size.
   Equal prominence: Accept and Reject are the same size and both solid — Reject
   is a filled outline, not a suppressed ghost (PECR: rejecting must be as easy
   as accepting). */
.bpr-cc__btn {
  font-size: var(--fs-sm);
  padding: 0.6rem 1.25rem;
}
/* Reject: same size as Accept, a SOLID outline on the white card. */
.bpr-cc__btn--reject {
  background: #fff;
  color: var(--brand-ink-900);
  border-color: var(--brand-ink-900);
  box-shadow: var(--shadow-1);
}
.bpr-cc__btn--reject:hover {
  background: var(--brand-ink-900);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.bpr-cc__btn--save {
  margin-top: var(--sp-4);
}

.bpr-cc__manage-toggle {
  background: none;
  border: 0;
  padding: 0.25rem 0.15rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand-green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bpr-cc__manage-toggle:hover { color: var(--brand-green-500); }
.bpr-cc__manage-toggle:focus-visible {
  outline: 2px solid var(--brand-green-300);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Manage panel */
.bpr-cc__manage {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}
.bpr-cc__manage[hidden] { display: none; }

.bpr-cc__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.bpr-cc__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.bpr-cc__row-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}
.bpr-cc__row-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand-ink-900);
}
.bpr-cc__row-desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--brand-charcoal-500);
}
.bpr-cc__always {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  /* Forest, not --color-success (#3FA561 fails AA text contrast on white at
     this size). Forest reads as "active" and clears 4.5:1. */
  color: var(--color-primary);
  padding-top: 0.15rem;
}

/* Toggle switch — a real checkbox restyled, so it stays keyboard-operable and
   announces its checked state to assistive tech. */
.bpr-cc__switch {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 2.4rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: var(--radius-pill);
  /* Unchecked: a light track with a CHARCOAL border so the control boundary
     clears 3:1 (WCAG 1.4.11). The old --brand-paper-200 fill + --color-border
     both resolved to #E5E3DC — invisible on the white card. */
  background: var(--brand-paper-100);
  border: 1px solid var(--brand-charcoal-500);
  position: relative;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.bpr-cc__switch::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  /* A charcoal edge so the thumb is visible against the light unchecked track. */
  border: 1px solid var(--brand-charcoal-500);
  box-shadow: var(--shadow-1);
  transform: translateY(-50%);
  transition: left 140ms ease;
}
.bpr-cc__switch:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.bpr-cc__switch:checked::after {
  left: calc(100% - 1.05rem - 2px);
  border-color: var(--color-primary);
}
.bpr-cc__switch:focus-visible {
  outline: 2px solid var(--brand-green-300);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .bpr-cc {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: auto;
  }
  .bpr-cc__actions .bpr-cc__btn { flex: 1 1 auto; }
}

/* Footer "Cookie preferences" reopen control — a <button> (no href, JS-wired).
   Just the button-chrome reset; the link colour/size is inherited from each
   shell's existing footer-link rule, which now also targets .js-cookie-prefs
   (design-tokens.css `.bpr-footer__legal`, meganav.css `.checkout-shell__footer`). */
.bpr-footer__legal .js-cookie-prefs,
.checkout-shell__footer .js-cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}