/* ============================================================
   ACCREDO — cookie banner

   The banner has to look at home on both style variants, and the two do not
   share a vocabulary: the main site's warm palette names its surfaces --paper,
   --clay and --forest, the shop's neon palette names them --surface, --brand
   and --accent. Reading the warm names directly is what broke this — in the
   shop --paper, --clay and --forest are simply not defined, so the banner fell
   back to its hard-coded warm hex values and rendered a white card with an
   orange button on a near-black page, while --ink *did* resolve, to the shop's
   near-white text. White on white; the heading was unreadable.

   So the banner has its own small set of tokens, mapped once per variant. Every
   rule below reads only those, and a third variant is one block of six lines.
   The fallbacks stay on each mapping, so the plugin still looks finished if it
   is ever active without the theme.

   A card at the bottom edge, not a full-screen overlay. It does not cover the
   page and does not trap focus — a visitor who wants to read first can, and
   nothing non-essential runs meanwhile.
   ============================================================ */

/* Warm (main site) — and the default for any variant we do not know. */
.accredo-consent,
.accredo-consent-reopen{
  --cc-surface:   var(--paper, #fff);
  --cc-ink:       var(--ink, #23201d);
  --cc-ink-2:     var(--ink-2, #55493f);
  --cc-line:      var(--line, #e0d9cd);
  --cc-line-2:    var(--line-strong, #c9bdaa);
  --cc-accent:    var(--clay, #c4692c);
  --cc-accent-hi: var(--clay-hi, #d4793a);
  --cc-on-accent: var(--on-dark, #fdf8f1);
  --cc-link:      var(--forest, #2d6a4a);
  --cc-link-hi:   var(--clay-deep, #a0521c);
  --cc-radius:    var(--r-lg, 20px);
  --cc-shadow:    var(--shadow-lg, 0 24px 60px -24px rgba(30, 24, 18, .45));
}

/* Neon (shop). Dark card, magenta button, cyan link — the shop's own colours. */
[data-theme="neon"] .accredo-consent,
[data-theme="neon"] .accredo-consent-reopen{
  --cc-surface:   var(--surface, #1a1626);
  --cc-ink:       var(--ink, #f6f2f8);
  --cc-ink-2:     var(--ink-2, #c9c0cf);
  --cc-line:      var(--line, #3a3350);
  --cc-line-2:    var(--line-2, #574d70);
  --cc-accent:    var(--brand, #e6197a);
  --cc-accent-hi: var(--brand-deep, #c4126a);
  --cc-on-accent: var(--on-brand, #fdf7fb);
  --cc-link:      var(--accent, #6fd8ee);
  --cc-link-hi:   var(--brand, #e6197a);
  --cc-radius:    var(--r-card, 14px);
  --cc-shadow:    var(--shadow-lg, 0 34px 80px -30px rgba(0, 0, 0, .6));
}

.accredo-consent{
  position: fixed;
  z-index: 200;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 clamp(12px, 3vw, 28px) clamp(12px, 3vw, 28px);
  pointer-events: none;
}

.accredo-consent[hidden]{ display: none; }

.accredo-consent__inner{
  pointer-events: auto;
  width: min(880px, 100%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  background: var(--cc-surface);
  color: var(--cc-ink);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
  box-shadow: var(--cc-shadow);

  /* Slides up once, and only if the visitor has not asked for less motion. */
  transform: translateY(14px);
  opacity: 0;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1), opacity .38s ease;
}

.accredo-consent.is-open .accredo-consent__inner{
  transform: none;
  opacity: 1;
}

.accredo-consent__text{
  flex: 1 1 min(420px, 100%);
  min-width: 0;
}

.accredo-consent__title{
  font-family: var(--font-display, inherit);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--cc-ink);
}

.accredo-consent__text p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cc-ink-2);
}

.accredo-consent__more{ margin-top: 8px !important; }

.accredo-consent__more a{
  color: var(--cc-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accredo-consent__more a:hover{ color: var(--cc-link-hi); }

.accredo-consent__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}

/* Equal size, equal prominence: refusing has to be as easy as accepting, so
   the two differ in colour only, never in weight or size. */
.accredo-consent__btn{
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 14px 24px;
  border-radius: var(--r-pill, 999px);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.accredo-consent__btn--accept{
  background: var(--cc-accent);
  color: var(--cc-on-accent);
}

.accredo-consent__btn--accept:hover{
  background: var(--cc-accent-hi);
  transform: translateY(-1px);
}

.accredo-consent__btn--decline{
  background: transparent;
  color: var(--cc-ink);
  border-color: var(--cc-line-2);
}

.accredo-consent__btn--decline:hover{
  border-color: var(--cc-ink);
  transform: translateY(-1px);
}

.accredo-consent__btn:focus-visible{
  outline: 2px solid var(--cc-accent);
  outline-offset: 3px;
}

/* The "cookie settings" link, wherever it is placed. */
.accredo-consent-reopen{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accredo-consent-reopen:hover{ color: var(--cc-link); }

@media (max-width: 640px){
  .accredo-consent__actions{ width: 100%; }
  .accredo-consent__btn{ flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce){
  .accredo-consent__inner{ transition: none; transform: none; opacity: 1; }
  .accredo-consent__btn:hover{ transform: none; }
}