/* Cookie-Banner im Aussehen von Perspective (vanilla-cookieconsent v3, MIT, plus Perspective-Theme), 1:1 aus den gesicherten Funnels übernommen. */
#cc-main {
  background: transparent;
  color: var(--cc-primary-color);
  font-family: var(--cc-font-family);
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.15;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  position: fixed;
  z-index: var(--cc-z-index);
}
#cc-main :after,
#cc-main :before,
#cc-main a,
#cc-main button,
#cc-main div,
#cc-main h2,
#cc-main input,
#cc-main p,
#cc-main span {
  all: unset;
  box-sizing: border-box;
}
#cc-main .pm__badge,
#cc-main button {
  all: initial;
  box-sizing: border-box;
  color: unset;
  visibility: unset;
}
#cc-main .pm__badge,
#cc-main a,
#cc-main button,
#cc-main input {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 100%;
  line-height: normal;
  margin: 0;
  outline: revert;
  outline-offset: 2px;
  overflow: hidden;
}
#cc-main table,
#cc-main tbody,
#cc-main td,
#cc-main th,
#cc-main thead,
#cc-main tr {
  all: revert;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
:root {
  --cc-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --cc-modal-border-radius: 0.5rem;
  --cc-btn-border-radius: 0.4rem;
  --cc-modal-transition-duration: 0.25s;
  --cc-link-color: var(--cc-btn-primary-bg);
  --cc-modal-margin: 1rem;
  --cc-z-index: 2147483647;
  --cc-bg: #fff;
  --cc-primary-color: #2c2f31;
  --cc-secondary-color: #5e6266;
  --cc-btn-primary-bg: #30363c;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
  --cc-btn-primary-hover-bg: #000;
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);
  --cc-btn-secondary-bg: #eaeff2;
  --cc-btn-secondary-color: var(--cc-primary-color);
  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
  --cc-btn-secondary-hover-bg: #d4dae0;
  --cc-btn-secondary-hover-color: #000;
  --cc-btn-secondary-hover-border-color: #d4dae0;
  --cc-separator-border-color: #f0f4f7;
  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
  --cc-toggle-off-bg: #667481;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg);
  --cc-toggle-enabled-icon-color: var(--cc-bg);
  --cc-toggle-disabled-icon-color: var(--cc-bg);
  --cc-toggle-readonly-bg: #d5dee2;
  --cc-toggle-readonly-knob-bg: #fff;
  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
  --cc-section-category-border: var(--cc-cookie-category-block-bg);
  --cc-cookie-category-block-bg: #f0f4f7;
  --cc-cookie-category-block-border: #f0f4f7;
  --cc-cookie-category-block-hover-bg: #e9eff4;
  --cc-cookie-category-block-hover-border: #e9eff4;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #dee4e9;
  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
  --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
  --cc-footer-bg: var(--cc-btn-secondary-bg);
  --cc-footer-color: var(--cc-secondary-color);
  --cc-footer-border-color: #e4eaed;
  --cc-pm-toggle-border-radius: 4em;
}
#cc-main.cc--rtl {
  direction: rtl;
}
#cc-main .cm__title,
#cc-main a,
#cc-main b,
#cc-main em,
#cc-main strong {
  font-weight: 600;
}
#cc-main button > span {
  pointer-events: none;
}
#cc-main .cc__link,
#cc-main a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  font-weight: 600;
  position: relative;
  transition:
    background-size 0.25s,
    color 0.25s ease;
}
#cc-main .cc__link:hover,
#cc-main a:hover {
  background-size: 100% 1px;
  color: var(--cc-primary-color);
}
#cc-main .cc__link {
  color: var(--cc-link-color);
}
#cc-main .cm__desc,
#cc-main .pm__body {
  overscroll-behavior: auto contain;
  scrollbar-width: thin;
}
@media screen and (min-width: 640px) {
  #cc-main ::-webkit-scrollbar,
  #cc-main ::-webkit-scrollbar-thumb,
  #cc-main ::-webkit-scrollbar-track {
    all: revert;
  }
  #cc-main ::-webkit-scrollbar-thumb {
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: var(--cc-toggle-readonly-bg);
    border: 0.25rem solid var(--cc-bg);
    border-radius: 1rem;
  }
  #cc-main ::-webkit-scrollbar-thumb:hover {
    background: var(--cc-toggle-off-bg);
  }
  #cc-main ::-webkit-scrollbar {
    background: transparent;
    width: 12px;
  }
}
html.disable--interaction.show--consent,
html.disable--interaction.show--consent body {
  height: auto !important;
  overflow: hidden !important;
}
@media (prefers-reduced-motion) {
  #cc-main {
    --cc-modal-transition-duration: 0s;
  }
}
.cc--darkmode {
  --cc-bg: #161a1c;
  --cc-primary-color: #ebf3f6;
  --cc-secondary-color: #aebbc5;
  --cc-btn-primary-bg: #c2d0e0;
  --cc-btn-primary-color: var(--cc-bg);
  --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
  --cc-btn-primary-hover-bg: #98a7b6;
  --cc-btn-primary-hover-color: #000;
  --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);
  --cc-btn-secondary-bg: #242c31;
  --cc-btn-secondary-color: var(--cc-primary-color);
  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg);
  --cc-btn-secondary-hover-bg: #353d43;
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: var(--cc-btn-secondary-hover-bg);
  --cc-separator-border-color: #222a30;
  --cc-toggle-on-bg: var(--cc-btn-primary-bg);
  --cc-toggle-off-bg: #525f6b;
  --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
  --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
  --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);
  --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
  --cc-toggle-readonly-bg: #343e45;
  --cc-toggle-readonly-knob-bg: #5f6b72;
  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
  --cc-section-category-border: #1e2428;
  --cc-cookie-category-block-bg: #1e2428;
  --cc-cookie-category-block-border: var(--cc-section-category-border);
  --cc-cookie-category-block-hover-bg: #242c31;
  --cc-cookie-category-block-hover-border: #232a2f;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
  --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
  --cc-footer-bg: #0c0e0f;
  --cc-footer-color: var(--cc-secondary-color);
  --cc-footer-border-color: #060809;
}
.cc--darkmode #cc-main {
  color-scheme: dark;
}
#cc-main .cm {
  background: var(--cc-bg);
  border-radius: var(--cc-modal-border-radius);
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 2, 0.3);
  display: flex;
  flex-direction: column;
  max-width: 24rem;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  transform: translateY(1.6em);
  visibility: hidden;
  z-index: 1;
}
#cc-main .cm--top {
  top: var(--cc-modal-margin);
}
#cc-main .cm--middle {
  top: 50%;
  transform: translateY(calc(-50% + 1.6em));
}
#cc-main .cm--bottom {
  bottom: var(--cc-modal-margin);
}
#cc-main .cm--center {
  left: var(--cc-modal-margin);
  margin: 0 auto;
  right: var(--cc-modal-margin);
  width: unset;
}
#cc-main .cm--left {
  left: var(--cc-modal-margin);
  margin-right: var(--cc-modal-margin);
}
#cc-main .cm--right {
  margin-left: var(--cc-modal-margin);
  right: var(--cc-modal-margin);
}
#cc-main .cm__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
#cc-main .cm__btns,
#cc-main .cm__links {
  padding: 1rem 1.3rem;
  width: unset;
}
#cc-main .cm__texts {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0 0;
}
#cc-main .cm__desc,
#cc-main .cm__title {
  padding: 0 1.3rem;
}
#cc-main .cm__title {
  font-size: 1.05em;
}
#cc-main .cm__title + .cm__desc {
  margin-top: 1.1em;
}
#cc-main .cm__desc {
  color: var(--cc-secondary-color);
  font-size: 0.9em;
  line-height: 1.5;
  max-height: 40vh;
  overflow-x: visible;
  overflow-y: auto;
  padding-bottom: 1em;
}
#cc-main .cm__btns {
  border-top: 1px solid var(--cc-separator-border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#cc-main .cm__btn-group {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
}
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group {
  margin-top: 0.375rem;
}
#cc-main .cm--flip .cm__btn + .cm__btn,
#cc-main .cm--flip .cm__btn-group + .cm__btn-group {
  margin-bottom: 0.375rem;
  margin-top: 0;
}
#cc-main .cm--inline .cm__btn + .cm__btn {
  margin-left: 0.375rem;
  margin-top: 0;
}
#cc-main .cm--inline.cm--flip .cm__btn + .cm__btn {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0.375rem;
}
#cc-main .cm--inline.cm--flip .cm__btn-group + .cm__btn-group {
  margin-bottom: 0.375rem;
  margin-right: 0;
}
#cc-main .cm--wide .cm__btn + .cm__btn,
#cc-main .cm--wide .cm__btn-group + .cm__btn-group {
  margin-left: 0.375rem;
  margin-top: 0;
}
#cc-main .cm--wide.cm--flip .cm__btn + .cm__btn,
#cc-main .cm--wide.cm--flip .cm__btn-group + .cm__btn-group {
  margin-bottom: 0;
  margin-right: 0.375rem;
}
#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,
#cc-main .cm--wide .cm__btn-group--uneven {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,
#cc-main .cm--wide.cm--flip .cm__btn-group--uneven {
  flex-direction: row-reverse;
}
#cc-main .cm__btn {
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-border-color);
  border-radius: var(--cc-btn-border-radius);
  color: var(--cc-btn-primary-color);
  font-size: 0.82em;
  font-weight: 600;
  min-height: 42px;
  padding: 0.5em 1em;
  text-align: center;
}
#cc-main .cm__btn:hover {
  background: var(--cc-btn-primary-hover-bg);
  border-color: var(--cc-btn-primary-hover-border-color);
  color: var(--cc-btn-primary-hover-color);
}
#cc-main .cm__btn--secondary {
  background: var(--cc-btn-secondary-bg);
  border-color: var(--cc-btn-secondary-border-color);
  color: var(--cc-btn-secondary-color);
}
#cc-main .cm__btn--secondary:hover {
  background: var(--cc-btn-secondary-hover-bg);
  border-color: var(--cc-btn-secondary-hover-border-color);
  color: var(--cc-btn-secondary-hover-color);
}
#cc-main .cm__btn--close {
  border-radius: 0;
  border-bottom-left-radius: var(--cc-btn-border-radius);
  border-right: none;
  border-top: none;
  display: none;
  font-size: 1em;
  height: 42px;
  min-width: auto !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  right: 0;
  top: 0;
  width: 42px;
}
#cc-main .cm__btn--close svg {
  stroke: var(--cc-btn-primary-color);
  transform: scale(0.5);
  transition: stroke 0.15s ease;
}
#cc-main .cm__btn--close:hover svg {
  stroke: var(--cc-btn-primary-hover-color);
}
#cc-main .cm__btn--close.cm__btn--secondary svg {
  stroke: var(--cc-btn-secondary-color);
}
#cc-main .cm__btn--close.cm__btn--secondary:hover svg {
  stroke: var(--cc-btn-secondary-hover-color);
}
#cc-main .cm__btn--close + .cm__texts .cm__title {
  padding-right: 3rem;
}
#cc-main .cm--inline .cm__btn-group {
  grid-auto-flow: column;
}
#cc-main .cm__footer {
  background: var(--cc-footer-bg);
  border-top: 1px solid var(--cc-footer-border-color);
  color: var(--cc-footer-color);
  padding: 0.4em 0 0.5em;
}
#cc-main .cm__links {
  display: flex;
  flex-direction: row;
  padding-bottom: 0;
  padding-top: 0;
}
#cc-main .cm__link-group {
  display: flex;
  flex-direction: row;
  font-size: 0.8em;
  width: 100%;
}
#cc-main .cm__link-group > * + * {
  margin-left: 1.3rem;
}
#cc-main .cm--flip .cm__btn:last-child {
  grid-row: 1;
}
#cc-main .cm--inline.cm--flip .cm__btn:last-child {
  grid-column: 1;
}
#cc-main .cm--box .cm__btn--close {
  display: block;
}
#cc-main .cm--box.cm--flip .cm__btns {
  flex-direction: column-reverse;
}
#cc-main .cm--box.cm--wide {
  max-width: 36em;
}
#cc-main .cm--box.cm--wide .cm__btns {
  flex-direction: row;
  justify-content: space-between;
}
#cc-main .cm--box.cm--wide .cm__btn-group {
  grid-auto-flow: column;
}
#cc-main .cm--box.cm--wide .cm__btn {
  min-width: 120px;
  padding-left: 1.8em;
  padding-right: 1.8em;
}
#cc-main .cm--box.cm--wide.cm--flip .cm__btns {
  flex-direction: row-reverse;
}
#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child {
  grid-column: 1;
}
#cc-main .cm--cloud {
  max-width: 54em;
  width: unset;
}
#cc-main .cm--cloud .cm__body {
  flex-direction: row;
}
#cc-main .cm--cloud .cm__texts {
  flex: 1;
}
#cc-main .cm--cloud .cm__desc {
  max-height: 9.4em;
}
#cc-main .cm--cloud .cm__btns {
  border-left: 1px solid var(--cc-separator-border-color);
  border-top: none;
  max-width: 23em;
}
#cc-main .cm--cloud .cm__btn-group {
  flex-direction: column;
}
#cc-main .cm--cloud .cm__btn {
  min-width: 19em;
}
#cc-main .cm--cloud.cm--flip .cm__btn-group,
#cc-main .cm--cloud.cm--flip .cm__btns {
  flex-direction: column-reverse;
}
#cc-main .cm--cloud.cm--inline .cm__btn-group {
  flex-direction: row;
}
#cc-main .cm--cloud.cm--inline .cm__btn {
  min-width: 10em;
}
#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group {
  flex-direction: row-reverse;
}
#cc-main .cm--bar {
  border-radius: 0;
  left: 0;
  margin: 0;
  max-width: unset;
  opacity: 1;
  right: 0;
  transform: translateY(0);
  width: 100vw;
  --cc-modal-transition-duration: 0.35s;
}
#cc-main .cm--bar.cm--top {
  top: 0;
  transform: translateY(-100%);
}
#cc-main .cm--bar.cm--bottom {
  bottom: 0;
  transform: translateY(100%);
}
#cc-main .cm--bar .cm__body,
#cc-main .cm--bar .cm__links {
  margin: 0 auto;
  max-width: 55em;
  width: 100%;
}
#cc-main .cm--bar .cm__body {
  padding: 0.5em 0 0.9em;
}
#cc-main .cm--bar .cm__btns {
  border-top: none;
  flex-direction: row;
  justify-content: space-between;
}
#cc-main .cm--bar .cm__btn-group {
  grid-auto-flow: column;
}
#cc-main .cm--bar:not(.cm--inline) .cm__btn + .cm__btn,
#cc-main .cm--bar:not(.cm--inline) .cm__btn-group + .cm__btn-group {
  margin-left: 0.375rem;
  margin-top: 0;
}
#cc-main .cm--bar .cm__btn {
  min-width: 120px;
  padding-left: 2em;
  padding-right: 2em;
}
#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn + .cm__btn,
#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group + .cm__btn-group {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0.375rem;
}
#cc-main .cm--bar.cm--flip .cm__btns {
  flex-direction: row-reverse;
}
#cc-main .cm--bar.cm--flip .cm__btn:last-child {
  grid-column: 1;
}
#cc-main .cm--bar.cm--inline .cm__body,
#cc-main .cm--bar.cm--inline .cm__links {
  max-width: 74em;
}
#cc-main .cm--bar.cm--inline .cm__body {
  flex-direction: row;
  padding: 0;
}
#cc-main .cm--bar.cm--inline .cm__btns {
  flex-direction: column;
  justify-content: center;
  max-width: 23em;
}
#cc-main .cm--bar.cm--inline.cm--flip .cm__btns {
  flex-direction: column-reverse;
}
#cc-main .cc--anim .cm,
#cc-main .cc--anim.cm-wrapper:before {
  transition:
    opacity var(--cc-modal-transition-duration) ease,
    visibility var(--cc-modal-transition-duration) ease,
    transform var(--cc-modal-transition-duration) ease;
}
#cc-main .cc--anim .cm__btn,
#cc-main .cc--anim .cm__close {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.disable--interaction #cc-main .cm-wrapper:before {
  background: var(--cc-overlay-bg);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 0;
}
.show--consent #cc-main .cc--anim .cm {
  opacity: 1;
  transform: translateY(0);
  visibility: visible !important;
}
.show--consent #cc-main .cc--anim .cm--middle {
  transform: translateY(-50%);
}
.show--consent #cc-main .cc--anim .cm--bar {
  transform: translateY(0);
}
.show--consent #cc-main .cc--anim.cm-wrapper:before {
  opacity: 1;
  visibility: visible;
}
#cc-main.cc--rtl .cm__btn--close {
  border-bottom-left-radius: unset;
  border-bottom-right-radius: var(--cc-btn-border-radius);
  left: 0;
  right: unset;
}
#cc-main.cc--rtl .cm__btn--close + .cm__texts .cm__title {
  padding-left: 3rem !important;
  padding-right: 1.3rem;
}
#cc-main.cc--rtl .cm--inline .cm__btn + .cm__btn {
  margin-left: 0;
  margin-right: 0.375rem;
}
#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn + .cm__btn {
  margin-left: 0.375rem;
  margin-right: 0;
}
#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn + .cm__btn,
#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group + .cm__btn-group,
#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn + .cm__btn,
#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group + .cm__btn-group {
  margin-left: 0;
  margin-right: 0.375rem;
}
#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn + .cm__btn,
#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn + .cm__btn {
  margin-left: 0.375rem;
  margin-right: 0;
}
#cc-main.cc--rtl .cm__link-group > * + * {
  margin-left: 0;
  margin-right: 1.3rem;
}
@media screen and (max-width: 640px) {
  #cc-main {
    --cc-modal-margin: 0.5em;
  }
  #cc-main .cm {
    max-width: none !important;
    width: auto !important;
  }
  #cc-main .cm__body {
    flex-direction: column !important;
    padding: 0 !important;
  }
  #cc-main .cm__btns,
  #cc-main .cm__desc,
  #cc-main .cm__links,
  #cc-main .cm__title {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
  #cc-main .cm__btns {
    border-left: none !important;
    border-top: 1px solid var(--cc-separator-border-color) !important;
    flex-direction: column !important;
    max-width: none !important;
    min-width: auto !important;
  }
  #cc-main .cm__btn + .cm__btn,
  #cc-main .cm__btn-group + .cm__btn-group {
    margin: 0.375rem 0 0 !important;
  }
  #cc-main .cm--flip .cm__btn + .cm__btn,
  #cc-main .cm--flip .cm__btn-group + .cm__btn-group {
    margin-bottom: 0.375rem !important;
    margin-top: 0 !important;
  }
  #cc-main .cm__btn-group {
    display: flex !important;
    flex-direction: column !important;
    min-width: auto !important;
  }
  #cc-main .cm__btn {
    flex: auto !important;
  }
  #cc-main .cm__link-group {
    justify-content: center !important;
  }
  #cc-main .cm--flip .cm__btn-group,
  #cc-main .cm--flip .cm__btns {
    flex-direction: column-reverse !important;
  }
}
#cc-main .pm-wrapper {
  position: relative;
  z-index: 2;
}
#cc-main .pm {
  background: var(--cc-bg);
  border-radius: var(--cc-modal-border-radius);
  box-shadow: 0 0.625em 1.875em rgba(0, 0, 2, 0.3);
  display: flex;
  flex-direction: column;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  visibility: hidden;
  width: 100%;
  width: unset;
  z-index: 1;
}
#cc-main svg {
  fill: none;
  width: 100%;
}
#cc-main .pm__body,
#cc-main .pm__footer,
#cc-main .pm__header {
  padding: 1em 1.4em;
}
#cc-main .pm__header {
  align-items: center;
  border-bottom: 1px solid var(--cc-separator-border-color);
  display: flex;
  justify-content: space-between;
}
#cc-main .pm__title {
  align-items: center;
  display: flex;
  flex: 1;
  font-weight: 600;
  margin-right: 2em;
}
#cc-main .pm__close-btn {
  background: var(--cc-btn-secondary-bg);
  border: 1px solid var(--cc-btn-secondary-border-color);
  border-radius: var(--cc-btn-border-radius);
  height: 40px;
  position: relative;
  transition: all 0.15s ease;
  width: 40px;
}
#cc-main .pm__close-btn span {
  display: flex;
  height: 100%;
  width: 100%;
}
#cc-main .pm__close-btn svg {
  stroke: var(--cc-btn-secondary-color);
  transform: scale(0.5);
  transition: stroke 0.15s ease;
}
#cc-main .pm__close-btn:hover {
  background: var(--cc-btn-secondary-hover-bg);
  border-color: var(--cc-btn-secondary-hover-border-color);
}
#cc-main .pm__close-btn:hover svg {
  stroke: var(--cc-btn-secondary-hover-color);
}
#cc-main .pm__body {
  flex: 1;
  overflow-y: auto;
  overflow-y: overlay;
}
#cc-main .pm__section,
#cc-main .pm__section--toggle {
  border-radius: var(--cc-btn-border-radius);
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5em;
}
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  border: 1px solid var(--cc-cookie-category-block-border);
  border-radius: var(--cc-btn-border-radius);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: none;
  margin-top: 0 !important;
  overflow: hidden;
}
#cc-main .pm__section {
  border: 1px solid var(--cc-separator-border-color);
  padding: 1em;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
#cc-main .pm__section:first-child {
  border: none;
  margin-bottom: 2em;
  margin-top: 0;
  padding: 0;
  transition: none;
}
#cc-main .pm__section:not(:first-child):hover {
  background: var(--cc-cookie-category-block-bg);
  border-color: var(--cc-cookie-category-block-border);
}
#cc-main .pm__section-toggles + .pm__section {
  margin-top: 2em;
}
#cc-main .pm__section--toggle {
  background: var(--cc-cookie-category-block-bg);
  border-top: none;
  margin-bottom: 0.375rem;
}
#cc-main .pm__section--toggle .pm__section-title {
  align-items: center;
  background: var(--cc-cookie-category-block-bg);
  border: 1px solid var(--cc-cookie-category-block-border);
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 1.1em 5.4em 1.1em 1.2em;
  position: relative;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
  width: 100%;
}
#cc-main .pm__section--toggle .pm__section-title:hover {
  background: var(--cc-cookie-category-block-hover-bg);
  border-color: var(--cc-cookie-category-block-hover-border);
}
#cc-main .pm__section--toggle .pm__section-desc {
  margin-top: 0;
  padding: 1em;
}
#cc-main .pm__section--toggle.is-expanded {
  --cc-cookie-category-block-bg: var(--cc-cookie-category-expanded-block-bg);
  --cc-cookie-category-block-border: var(--cc-cookie-category-expanded-block-hover-bg);
}
#cc-main .pm__section--toggle.is-expanded .pm__section-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg {
  transform: scale(0.5) rotate(180deg);
}
#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
  display: flex;
}
#cc-main .pm__section--expandable .pm__section-title {
  cursor: pointer;
  padding-left: 3.4em;
}
#cc-main .pm__section--expandable .pm__section-arrow {
  background: var(--cc-toggle-readonly-bg);
  border-radius: 100%;
  display: flex;
  height: 20px;
  justify-content: center;
  left: 18px;
  pointer-events: none;
  position: absolute;
  width: 20px;
}
#cc-main .pm__section--expandable .pm__section-arrow svg {
  stroke: var(--cc-btn-secondary-color);
  transform: scale(0.5);
}
#cc-main .pm__section-title-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}
#cc-main .pm__section-title-wrapper + .pm__section-desc-wrapper {
  margin-top: 0.85em;
}
#cc-main .pm__section-title {
  border-radius: var(--cc-btn-border-radius);
  font-size: 0.95em;
  font-weight: 600;
}
#cc-main .pm__badge {
  align-items: center;
  background: var(--cc-btn-secondary-bg);
  border-radius: 5em;
  color: var(--cc-secondary-color);
  display: flex;
  flex: none;
  font-size: 0.8em;
  font-weight: 600;
  height: 23px;
  justify-content: center;
  margin-left: 1em;
  min-width: 23px;
  overflow: hidden;
  padding: 0 0.6em 1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: auto;
}
#cc-main .pm__service-counter {
  background: var(--cc-btn-primary-bg);
  color: var(--cc-btn-primary-color);
  padding: 0;
  width: 23px;
}
#cc-main .pm__service-counter[data-counterlabel] {
  padding: 0 0.6em 1px;
  width: auto;
}
#cc-main .section__toggle,
#cc-main .section__toggle-wrapper,
#cc-main .toggle__icon,
#cc-main .toggle__label {
  border-radius: var(--cc-pm-toggle-border-radius);
  height: 23px;
  transform: translateZ(0);
  width: 50px;
}
#cc-main .section__toggle-wrapper {
  cursor: pointer;
  position: absolute;
  right: 18px;
  z-index: 1;
}
#cc-main .toggle-service {
  height: 19px;
  position: relative;
  right: 0;
  width: 42px;
}
#cc-main .toggle-service .section__toggle,
#cc-main .toggle-service .toggle__icon,
#cc-main .toggle-service .toggle__label {
  height: 19px;
  width: 42px;
}
#cc-main .toggle-service .toggle__icon {
  position: relative;
}
#cc-main .toggle-service .toggle__icon-circle {
  height: 19px;
  width: 19px;
}
#cc-main .toggle-service .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(23px);
}
#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after {
  display: none !important;
}
#cc-main .section__toggle {
  border: 0;
  cursor: pointer;
  display: block;
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
}
#cc-main .section__toggle:disabled {
  cursor: not-allowed;
}
#cc-main .toggle__icon {
  background: var(--cc-toggle-off-bg);
  box-shadow: 0 0 0 1px var(--cc-toggle-off-bg);
  display: flex;
  flex-direction: row;
  pointer-events: none;
  position: absolute;
  transition: all 0.25s ease;
}
#cc-main .toggle__icon-circle {
  background: var(--cc-toggle-off-knob-bg);
  border: none;
  border-radius: var(--cc-pm-toggle-border-radius);
  box-shadow: 0 1px 2px rgba(24, 32, 3, 0.36);
  display: block;
  height: 23px;
  left: 0;
  position: absolute;
  top: 0;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
  width: 23px;
}
#cc-main .toggle__icon-off,
#cc-main .toggle__icon-on {
  height: 100%;
  position: absolute;
  transition: opacity 0.15s ease;
  width: 100%;
}
#cc-main .toggle__icon-on {
  opacity: 0;
  transform: rotate(45deg);
}
#cc-main .toggle__icon-on svg {
  stroke: var(--cc-toggle-on-bg);
  transform: scale(0.55) rotate(-45deg);
}
#cc-main .toggle__icon-off {
  opacity: 1;
}
#cc-main .toggle__icon-off svg {
  stroke: var(--cc-toggle-off-bg);
  transform: scale(0.55);
}
#cc-main .section__toggle:checked ~ .toggle__icon {
  background: var(--cc-toggle-on-bg);
  box-shadow: 0 0 0 1px var(--cc-toggle-on-bg);
}
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  background-color: var(--cc-toggle-on-knob-bg);
  transform: translateX(27px);
}
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-on {
  opacity: 1;
}
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-off {
  opacity: 0;
}
#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
  background: var(--cc-toggle-readonly-bg);
  box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg);
}
#cc-main .section__toggle:checked:disabled ~ .toggle__icon .toggle__icon-circle {
  background: var(--cc-toggle-readonly-knob-bg);
  box-shadow: none;
}
#cc-main .section__toggle:checked:disabled ~ .toggle__icon svg {
  stroke: var(--cc-toggle-readonly-knob-icon-color);
}
#cc-main .toggle__label {
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1;
}
#cc-main .pm__section-desc-wrapper {
  color: var(--cc-secondary-color);
  display: flex;
  flex-direction: column;
  font-size: 0.9em;
}
#cc-main .pm__section-desc-wrapper > :not(:last-child) {
  border-bottom: 1px solid var(--cc-cookie-category-block-border);
}
#cc-main .pm__section-services {
  display: flex;
  flex-direction: column;
}
#cc-main .pm__service {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.4em 1.2em;
  position: relative;
  transition: background-color 0.15s ease;
}
#cc-main .pm__service:hover {
  background-color: var(--cc-cookie-category-block-hover-bg);
}
#cc-main .pm__service-header {
  align-items: center;
  display: flex;
  margin-right: 1em;
  width: 100%;
}
#cc-main .pm__service-icon {
  border: 2px solid;
  border-radius: 100%;
  height: 8px;
  margin-left: 6px;
  margin-right: 20px;
  margin-top: 1px;
  min-width: 8px;
}
#cc-main .pm__service-title {
  font-size: 0.95em;
  width: 100%;
  word-break: break-word;
}
#cc-main .pm__section-desc {
  line-height: 1.5em;
}
#cc-main .pm__section-table {
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  width: 100%;
}
#cc-main .pm__table-caption {
  text-align: left;
}
#cc-main .pm__table-caption,
#cc-main .pm__table-head > tr {
  border-bottom: 1px dashed var(--cc-separator-border-color);
  color: var(--cc-primary-color);
  font-weight: 600;
}
#cc-main .pm__table-tr {
  transition: background-color 0.15s ease;
}
#cc-main .pm__table-tr:hover {
  background: var(--cc-cookie-category-block-hover-bg);
}
#cc-main .pm__table-caption,
#cc-main .pm__table-td,
#cc-main .pm__table-th {
  padding: 0.625em 0.625em 0.625em 1.2em;
  vertical-align: top;
}
#cc-main .pm__footer {
  border-top: 1px solid var(--cc-separator-border-color);
  display: flex;
  justify-content: space-between;
}
#cc-main .pm__btn-group {
  display: flex;
}
#cc-main .pm__btn + .pm__btn,
#cc-main .pm__btn-group + .pm__btn-group {
  margin-left: 0.375rem;
}
#cc-main .pm--flip .pm__btn + .pm__btn,
#cc-main .pm--flip .pm__btn-group + .pm__btn-group {
  margin-left: 0;
  margin-right: 0.375rem;
}
#cc-main .pm__btn {
  background: var(--cc-btn-primary-bg);
  border: 1px solid var(--cc-btn-primary-border-color);
  border-radius: var(--cc-btn-border-radius);
  color: var(--cc-btn-primary-color);
  flex: auto;
  font-size: 0.82em;
  font-weight: 600;
  min-height: 42px;
  min-width: 110px;
  padding: 0.5em 1.5em;
  text-align: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
#cc-main .pm__btn:hover {
  background: var(--cc-btn-primary-hover-bg);
  border-color: var(--cc-btn-primary-hover-border-color);
  color: var(--cc-btn-primary-hover-color);
}
#cc-main .pm__btn--secondary {
  background: var(--cc-btn-secondary-bg);
  border-color: var(--cc-btn-secondary-border-color);
  color: var(--cc-btn-secondary-color);
}
#cc-main .pm__btn--secondary:hover {
  background: var(--cc-btn-secondary-hover-bg);
  border-color: var(--cc-btn-secondary-hover-border-color);
  color: var(--cc-btn-secondary-hover-color);
}
#cc-main .pm--box {
  height: calc(100% - 2em);
  left: var(--cc-modal-margin);
  margin: 0 auto;
  max-height: 37.5em;
  max-width: 43em;
  right: var(--cc-modal-margin);
  top: 50%;
  transform: translateY(calc(-50% + 1.6em));
}
#cc-main .pm--box.pm--flip .pm__btn-group,
#cc-main .pm--box.pm--flip .pm__footer {
  flex-direction: row-reverse;
}
#cc-main .pm--bar {
  border-radius: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  max-height: none;
  max-width: 29em;
  opacity: 1;
  top: 0;
  width: 100%;
  --cc-modal-transition-duration: 0.35s;
}
#cc-main .pm--bar .pm__section-table,
#cc-main .pm--bar .pm__table-body,
#cc-main .pm--bar .pm__table-td,
#cc-main .pm--bar .pm__table-th,
#cc-main .pm--bar .pm__table-tr {
  display: block;
}
#cc-main .pm--bar .pm__table-head {
  display: none;
}
#cc-main .pm--bar .pm__table-caption {
  display: block;
}
#cc-main .pm--bar .pm__table-tr:not(:last-child) {
  border-bottom: 1px solid var(--cc-separator-border-color);
}
#cc-main .pm--bar .pm__table-td {
  display: flex;
  justify-content: space-between;
}
#cc-main .pm--bar .pm__table-td:before {
  color: var(--cc-primary-color);
  content: attr(data-column);
  flex: 1;
  font-weight: 600;
  min-width: 100px;
  overflow: hidden;
  padding-right: 2em;
  text-overflow: ellipsis;
}
#cc-main .pm--bar .pm__table-td > div {
  flex: 3;
}
#cc-main .pm--bar:not(.pm--wide) .pm__body,
#cc-main .pm--bar:not(.pm--wide) .pm__footer,
#cc-main .pm--bar:not(.pm--wide) .pm__header {
  padding: 1em 1.3em;
}
#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,
#cc-main .pm--bar:not(.pm--wide) .pm__footer {
  flex-direction: column;
}
#cc-main .pm--bar:not(.pm--wide) .pm__btn + .pm__btn,
#cc-main .pm--bar:not(.pm--wide) .pm__btn-group + .pm__btn-group {
  margin: 0.375rem 0 0;
}
#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,
#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer {
  flex-direction: column-reverse;
}
#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn + .pm__btn,
#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group + .pm__btn-group {
  margin-bottom: 0.375rem;
  margin-top: 0;
}
#cc-main .pm--bar:not(.pm--wide) .pm__badge {
  display: none;
}
#cc-main .pm--bar.pm--left {
  left: 0;
  transform: translateX(-100%);
}
#cc-main .pm--bar.pm--right {
  right: 0;
  transform: translateX(100%);
}
#cc-main .pm--bar.pm--wide {
  max-width: 35em;
}
#cc-main .pm--bar.pm--wide .pm__body,
#cc-main .pm--bar.pm--wide .pm__footer,
#cc-main .pm--bar.pm--wide .pm__header {
  padding: 1em 1.4em;
}
#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,
#cc-main .pm--bar.pm--wide.pm--flip .pm__footer {
  flex-direction: row-reverse;
}
#cc-main .pm-overlay {
  background: var(--cc-overlay-bg);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  z-index: 1;
}
#cc-main .cc--anim .pm,
#cc-main .cc--anim .pm-overlay {
  transition:
    opacity var(--cc-modal-transition-duration) ease,
    visibility var(--cc-modal-transition-duration) ease,
    transform var(--cc-modal-transition-duration) ease;
}
.show--preferences #cc-main .cc--anim .pm {
  opacity: 1;
  visibility: visible !important;
}
.show--preferences #cc-main .cc--anim .pm--box {
  transform: translateY(-50%);
}
.show--preferences #cc-main .cc--anim .pm--bar {
  transform: translateX(0);
}
.show--preferences #cc-main .cc--anim .pm-overlay {
  opacity: 1;
  visibility: visible;
}
#cc-main.cc--rtl .pm__service-header {
  margin-left: 1em;
  margin-right: 0;
}
#cc-main.cc--rtl .pm__section-arrow {
  left: unset;
  right: 18px;
}
#cc-main.cc--rtl .section__toggle-wrapper {
  left: 18px;
  right: unset;
  transform-origin: left;
}
#cc-main.cc--rtl .toggle-service {
  left: 0;
}
#cc-main.cc--rtl .pm__service-icon {
  margin-left: 20px;
  margin-right: 5px;
}
#cc-main.cc--rtl .pm__section--toggle .pm__section-title {
  padding-left: 5.4em;
  padding-right: 1.2em;
}
#cc-main.cc--rtl .pm__section--expandable .pm__section-title {
  padding-right: 3.4em;
}
#cc-main.cc--rtl .pm__badge {
  margin-left: unset;
  margin-right: 1em;
}
#cc-main.cc--rtl .toggle__icon-circle {
  transform: translateX(27px);
}
#cc-main.cc--rtl .toggle-service .toggle__icon-circle {
  transform: translateX(23px);
}
#cc-main.cc--rtl .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(0);
}
#cc-main.cc--rtl .pm__table-td,
#cc-main.cc--rtl .pm__table-th {
  padding-left: unset;
  padding-right: 1.2em;
  text-align: right;
}
#cc-main.cc--rtl .pm__table-td {
  padding-left: unset;
  padding-right: 1.2em;
}
#cc-main.cc--rtl .pm__table-td:before {
  padding-left: 2em;
  padding-right: unset;
}
#cc-main.cc--rtl .pm__btn + .pm__btn,
#cc-main.cc--rtl .pm__btn-group + .pm__btn-group {
  margin-left: 0;
  margin-right: 0.375rem;
}
#cc-main.cc--rtl .pm--flip .pm__btn + .pm__btn,
#cc-main.cc--rtl .pm--flip .pm__btn-group + .pm__btn-group {
  margin-left: 0.375rem;
  margin-right: 0;
}
#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn + .pm__btn,
#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group + .pm__btn-group {
  margin-left: 0;
}
@media screen and (max-width: 640px) {
  #cc-main .pm {
    border-radius: 0;
    bottom: 0;
    height: auto;
    left: 0;
    max-height: 100%;
    max-width: none !important;
    right: 0;
    top: 0;
    transform: translateY(1.6em);
  }
  #cc-main .pm__body,
  #cc-main .pm__footer,
  #cc-main .pm__header {
    padding: 0.9em !important;
  }
  #cc-main .pm__badge {
    display: none;
  }
  #cc-main .pm__section-table,
  #cc-main .pm__table-body,
  #cc-main .pm__table-caption,
  #cc-main .pm__table-td,
  #cc-main .pm__table-th,
  #cc-main .pm__table-tr {
    display: block;
  }
  #cc-main .pm__table-head {
    display: none;
  }
  #cc-main .pm__table-tr:not(:last-child) {
    border-bottom: 1px solid var(--cc-separator-border-color);
  }
  #cc-main .pm__table-td {
    display: flex;
    justify-content: space-between;
  }
  #cc-main .pm__table-td:before {
    color: var(--cc-primary-color);
    content: attr(data-column);
    flex: 1;
    font-weight: 600;
    min-width: 100px;
    overflow: hidden;
    padding-right: 2em;
    text-overflow: ellipsis;
  }
  #cc-main .pm__table-td > div {
    flex: 3;
  }
  #cc-main .pm__btn-group,
  #cc-main .pm__footer {
    flex-direction: column !important;
  }
  #cc-main .pm__btn-group {
    display: flex !important;
  }
  #cc-main .pm__btn + .pm__btn,
  #cc-main .pm__btn-group + .pm__btn-group {
    margin: 0.375rem 0 0 !important;
  }
  #cc-main .pm--flip .pm__btn + .pm__btn,
  #cc-main .pm--flip .pm__btn-group + .pm__btn-group {
    margin-bottom: 0.375rem !important;
    margin-top: 0 !important;
  }
  #cc-main .pm--flip .pm__btn-group,
  #cc-main .pm--flip .pm__footer {
    flex-direction: column-reverse !important;
  }
  .show--preferences #cc-main .cc--anim .pm {
    transform: translateY(0) !important;
  }
}

/*
 * Perspective consent banner — all Perspective-owned styles.
 *
 * Sections (top → bottom):
 *   1. Library variable overrides (consent modal + preferences modal share these)
 *   2. Initial consent modal — Perspective-owned .pcb-* classes
 *   3. Responsive (mobile) rules for the consent modal
 *   4. Library variable overrides — preferences modal
 *   5. Preferences modal — perspective overrides
 *   6. Preferences modal — responsive
 *   (7. floating settings widget — left for M5)
 *
 * Scoping rule: everything is under `#cc-main` to beat the library's own
 * specificity. The library defines its styles at `#cc-main .foo` so matching
 * that or going one level deeper (`#cc-main .pcb-foo`) is enough.
 */

/* Library sets `overflow: hidden !important` on <html>+<body> while a modal
   is open (`disablePageInteraction: true`). That removes the scrollbar, and
   any centered/max-width layout visibly shifts right by half the scrollbar
   width. Override to leave page scroll alone — the modal's overlay still
   blocks pointer interaction. */
html.disable--interaction.show--consent,
html.disable--interaction.show--consent body,
html.disable--interaction.show--preferences,
html.disable--interaction.show--preferences body {
  overflow: visible !important;
  height: auto !important;
}

/* ---------- 1. Library variable overrides ---------- */
#cc-main {
  /* Surface */
  --cc-bg: #ffffff;
  --cc-primary-color: #171717;       /* near-black for titles */
  --cc-secondary-color: #525252;     /* neutral-600 for body copy */

  /* Modal shell */
  --cc-modal-border-radius: 1rem;    /* rounded-2xl */
  --cc-modal-margin: 1.5rem;         /* 24px inset from viewport edge */
  --cc-overlay-bg: rgba(23, 23, 23, 0.35); /* lighter page dim than library default */

  /* Buttons — static design colors. */
  --cc-btn-border-radius: 10px;
  --cc-btn-primary-bg: #2563eb;                      /* design blue-600 */
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-hover-bg: #1d4ed8;                /* blue-700 */
  --cc-btn-primary-hover-color: #ffffff;
  /* Border follows bg so primary buttons render borderless. */
  --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
  --cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);

  /* Secondary ("More options") — outline style, primary-colored stroke + text */
  --cc-btn-secondary-bg: #ffffff;
  --cc-btn-secondary-color: var(--cc-btn-primary-bg);
  --cc-btn-secondary-border-color: var(--cc-btn-primary-bg);
  --cc-btn-secondary-hover-bg: #f5f5f5;
  --cc-btn-secondary-hover-color: var(--cc-btn-primary-bg);
  --cc-btn-secondary-hover-border-color: var(--cc-btn-primary-bg);

  /* Link / focus */
  --cc-link-color: var(--cc-btn-primary-bg);

  /* Typography */
  --cc-font-family:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* ---------- 2. Initial consent modal — visual overrides ---------- */

/* Modal shell. Library defines `.cm` at #cc-main .cm with max-width: 24rem.
   We re-declare with the same specificity (source order wins): wider cap
   matching design max-w-md, a neutral border, soft shadow. */
#cc-main .cm {
  /* Pin width (28rem = 448px) and clamp on narrow viewports so
     the modal never overflows. `width: auto` alone wasn't enough — buttons
     plus padding pushed the fixed-position element wider than max-width. */
  width: min(28rem, calc(100vw - 2 * var(--cc-modal-margin)));
  max-width: none;
  border: 1px solid #e5e5e5;                         /* neutral-200 */
  box-shadow: 0 25px 50px -12px rgba(23, 23, 23, 0.15);
}

/* Tighten the text block. Library defaults give us 1rem top + 1.3rem side
   padding via .cm__texts and .cm__title/.cm__desc; we just adjust sizing. */
#cc-main .cm__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
#cc-main .cm__title + .cm__desc {
  margin-top: 0.25rem;
}
#cc-main .cm__desc {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cc-secondary-color);
  max-width: 55ch;
  padding-bottom: 1rem;
}

/* ----- Close X ----- */
/* Library forces stroke: var(--cc-btn-primary-color) on the SVG path, which
   in our setup is white — invisible against the transparent button. We
   override the stroke + position to a small floating square top-right
   with rounded hover, matching the design. */
/* Specificity bumped to .cm__btn.cm__btn--close (1,2,0) so these rules
   always win over the general `.cm__btn` styles below, regardless of file
   source order. */
#cc-main .cm__btn.cm__btn--close {
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: #737373 !important;                         /* neutral-500 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#cc-main .cm__btn.cm__btn--close svg {
  stroke: #737373 !important;                        /* neutral-500 */
  stroke-width: 2;
  transform: none !important;
  width: 1rem !important;
  height: 1rem !important;
}
#cc-main .cm__btn.cm__btn--close:hover {
  background-color: #f5f5f5 !important;              /* neutral-100 */
  border: 0 !important;
}
#cc-main .cm__btn.cm__btn--close:hover svg {
  stroke: #404040 !important;                        /* neutral-700 */
}
/* Library reserves padding-right: 3rem on the title when close-X is present;
   that's fine, keep as-is. */

/* ----- Button row ----- */
/* Library renders the three buttons inside two `.cm__btn-group` wrappers.
   `display: contents` dissolves those wrappers from the grid algorithm's
   view so all three buttons become direct grid items of `.cm__btns`. CSS
   then handles placement via `grid-column`. */
#cc-main .cm__btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  border-top: 1px solid #e5e5e5;                     /* neutral-200 divider */
  padding: 1rem 1.25rem 0.5rem !important;
}
/* When the policy-links footer is absent (or empty), .cm__btns is the last
   row in the modal — restore symmetric bottom padding so it matches the top. */
#cc-main .cm__footer:empty {
  display: none !important;
}
#cc-main .cm:not(:has(.cm__footer)) .cm__btns,
#cc-main .cm:has(.cm__footer:empty) .cm__btns {
  padding-bottom: 1rem !important;
}
#cc-main .cm__btn-group {
  display: contents !important;
}
#cc-main .cm__btn {
  box-sizing: border-box;
  height: 2rem !important;                           /* 32px — matches design */
  min-height: 0 !important;
  padding: 0 0.875rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-width: 1px;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none;
}
#cc-main .cm__btn > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Focus ring sits inside the box so it never adds visual height. */
#cc-main .cm__btn:focus-visible {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--cc-btn-primary-bg);
}
/* Design left→right: More options (secondary), Reject all, Accept all. */
#cc-main .cm__btn--secondary {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-style: solid;
  border-width: 1px;
}
#cc-main .cm__btn[data-role='necessary'] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
#cc-main .cm__btn[data-role='all'] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* ----- Footer (privacy + imprint links, library .cm__footer slot) ----- */
/* Library defaults: grey-ish bg + 1px border-top + 0.4em/0.5em padding,
   plus a .cm__link-group inner wrapper with 0.8em font and flex layout.
   We flatten all of that so the links sit flush under the button row
   with just a slim top gap, matching the design's tight body padding. */
#cc-main .cm__footer {
  background: transparent !important;
  border-top: 0 !important;
  padding: 0.375rem 1.25rem 1rem !important;        /* bottom matches .pm__footer */
  color: #737373;                                    /* neutral-500 */
}
#cc-main .cm__links,
#cc-main .cm__link-group {
  padding: 0 !important;
  margin: 0 !important;
  font-size: inherit !important;
}
#cc-main .cm__link-group > * + * {
  margin-left: 0 !important;
}
#cc-main .pcb-consent__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;                              /* match .pcb-pm__links */
  font-size: 0.6875rem;                              /* 11px */
  line-height: 1.5;
}
#cc-main .pcb-consent__link {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 2px;
  transition: none;
}
#cc-main .pcb-consent__link:hover {
  color: inherit;
  text-decoration: underline;
}

/* ---------- 3. Responsive (mobile) ---------- */
@media (max-width: 640px) {
  #cc-main .cm {
    max-width: none;
    margin: 1rem;
  }

  /* Two-column grid: "More options" spans the full top row, Reject and
     Accept share row 2 (Reject left, Accept right — matches design). */
  #cc-main .cm__btns {
    grid-template-columns: 1fr 1fr;
  }
  #cc-main .cm__btn--secondary {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  #cc-main .cm__btn[data-role='necessary'] {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #cc-main .cm__btn[data-role='all'] {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ---------- 4. Library variable overrides — preferences modal ---------- */
#cc-main {
  /* Toggles — primary blue when on, neutral-300 when off, white knobs. */
  --cc-toggle-on-bg: #2563eb;
  --cc-toggle-off-bg: #d4d4d4;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;
  --cc-toggle-readonly-bg: #2563eb;          /* necessary toggle stays "on" */
  --cc-toggle-readonly-knob-bg: #ffffff;
  --cc-toggle-readonly-knob-icon-color: #2563eb;
  --cc-pm-toggle-border-radius: 9999px;

  /* Category rows — neutralize colored block backgrounds. Designer's spec
     is a flat white surface with horizontal dividers. */
  --cc-cookie-category-block-bg: transparent;
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: transparent;
  --cc-cookie-category-block-hover-border: transparent;
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: transparent;
  --cc-section-category-border: #e5e5e5;     /* neutral-200 — used between sections */

  /* Section dividers (used by .pm__section-desc-wrapper > * borders). */
  --cc-separator-border-color: #e5e5e5;
}

/* ---------- 5. Preferences modal — perspective overrides ---------- */

/* ----- Container & positioning ----- */
/* Library default places .pm--box centered with max-width 43em; designer wants
   it pinned to bottom-right at 28rem wide, same visual language as the
   consent banner. */
#cc-main .pm.pm--box {
  width: min(28rem, calc(100vw - 2 * var(--cc-modal-margin)));
  max-width: none;
  /* The library forces `height: calc(100% - 2em)` on .pm--box, which pins the
     modal to viewport height. Override to `auto` so it sizes to its content,
     then clamp the maximum so a fully-expanded modal doesn't get unreadably
     tall on large screens. 48rem (~768px) leaves room for several expanded
     categories while still feeling like a card, not a full-page sheet. */
  height: auto;
  max-height: min(calc(100vh - 2 * var(--cc-modal-margin)), 48rem);
  right: auto;
  left: var(--cc-modal-margin);
  top: auto;
  bottom: var(--cc-modal-margin);
  margin: 0;
  transform: none !important;                  /* lib animates translateY; we don't */
  border: 1px solid #e5e5e5;
  box-shadow: 0 25px 50px -12px rgba(23, 23, 23, 0.15);
  border-radius: var(--cc-modal-border-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Counteract the library's `show--preferences` rule that sets translateY(-50%). */
.show--preferences #cc-main .cc--anim .pm--box {
  transform: none;
}

/* ----- Header ----- */
/* The library renders <div class="pm__header"><h2 class="pm__title">…innerHTML…</h2><button class="pm__close-btn">…</button></div>.
   Our header content lives inside .pm__title as .pcb-pm__head. */
#cc-main .pm__header {
  align-items: flex-start;
  border-bottom: 1px solid #e5e5e5;
  padding: 1rem 1.25rem 0.75rem;               /* pt-4 px-5 pb-3 */
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
#cc-main .pm__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: 400;                            /* reset; inner .pcb-pm__title sets its own */
}
#cc-main .pcb-pm__head {
  display: flex;
  flex-direction: column;
}
#cc-main .pcb-pm__title {
  font-size: 1rem;                             /* text-base */
  font-weight: 600;
  line-height: 1.5;
  color: #171717;                              /* neutral-900 */
}
#cc-main .pcb-pm__intro {
  margin-top: 0.25rem;                         /* mt-1 */
  font-size: 0.75rem;                          /* text-xs */
  line-height: 1.5;                            /* leading-relaxed */
  color: #525252;                              /* neutral-600 */
}
#cc-main .pcb-pm__controller {
  margin-top: 0.375rem;                        /* mt-1.5 */
  font-size: 0.6875rem;                        /* 11px */
  line-height: 1.5;
  color: #737373;                              /* neutral-500 */
  word-break: break-word;
}
#cc-main .pcb-pm__controller-name {
  color: #404040;                              /* neutral-700 */
}
#cc-main .pcb-pm__address {
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #737373;
  word-break: break-word;
}

/* ----- Close X ----- */
#cc-main .pm__close-btn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  height: 1.75rem;
  width: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #737373;
  flex: none;
  margin-top: 0;
  transition: background-color 0.15s ease;
}
#cc-main .pm__close-btn:hover {
  background: #f5f5f5;
  border: 0;
}
/* The library wraps the close SVG in a <span> with display:flex but doesn't
   center its content — center it here. */
#cc-main .pm__close-btn span {
  align-items: center;
  justify-content: center;
}
#cc-main .pm__close-btn svg {
  stroke: #737373;
  stroke-width: 2;
  width: 1rem;
  height: 1rem;
  transform: none;
}
#cc-main .pm__close-btn:hover svg {
  stroke: #404040;
}

/* ----- Body ----- */
#cc-main .pm__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 1.25rem;                          /* px-5, no top/bottom — sections own their padding */
  overflow-y: auto;
}

/* Drop the library's default first-section "intro paragraph" affordance — we
   render no description paragraph there. */
#cc-main .pm__body > .pm__section:first-child:not(.pm__section--toggle) {
  display: none;
}

#cc-main .pm__section-toggles {
  display: flex;
  flex-direction: column;
}

/* ----- Category row ----- */
/* Library produces:
     <div class="pm__section--toggle pm__section--expandable">
       <div class="pm__section-title-wrapper">
         <button class="pm__section-title">…label…<span class="pm__badge">…</span></button>
         <span class="pm__section-arrow"><svg/></span>
         <label class="section__toggle-wrapper">…</label>
       </div>
       <div class="pm__section-desc-wrapper">…services + table…</div>
     </div>
   We pin layout to: [arrow | title/desc grow | toggle]. */
#cc-main .pm__section--toggle {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
#cc-main .pm__section--toggle:last-child {
  border-bottom: 0;
}
#cc-main .pm__section--toggle .pm__section-title-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;                          /* py-3 */
  position: relative;
}
#cc-main .pm__section--toggle .pm__section-title {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  padding: 0 0 0 calc(1.5rem + 0.75rem);       /* leave space for the arrow */
  min-height: 0;
  text-align: left;
  cursor: pointer;
  display: block;
}
#cc-main .pm__section--toggle .pm__section-title:hover {
  background: transparent;
  border: 0;
}
/* Title + always-visible description live inside .pm__section-title as <span>s.
   Both override the library's `.pm__section-title { font-weight: 600 }`
   inheritance — without explicit font-weight on the desc, it renders bold. */
#cc-main .pcb-cat__title {
  display: block;
  font-size: 0.875rem;                         /* text-sm */
  font-weight: 500;
  line-height: 1.4;
  color: #171717;                              /* neutral-900 */
}
#cc-main .pcb-cat__desc {
  display: block;
  margin-top: 0.125rem;                        /* mt-0.5 */
  font-size: 0.75rem;                          /* text-xs */
  font-weight: 400;                            /* override .pm__section-title's 600 */
  line-height: 1.5;
  color: #525252;                              /* neutral-600 */
}
/* The library still wraps services in <p class="pm__section-desc"> inside the
   collapsible body. Strip the <p>'s default margins so service cards sit flush. */
#cc-main .pm__section-desc {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #525252;
  margin: 0;
  padding: 0;
}

/* Move the library's chevron-arrow from absolute-circle to the designer's
   plain square-button with a chevron. We restyle, not recreate. */
#cc-main .pm__section--expandable .pm__section-arrow {
  position: absolute;
  left: 0;
  top: 0.625rem;                               /* py-3 + a hair to align with title */
  width: 1.5rem;                               /* size-6 */
  height: 1.5rem;
  border-radius: 0.375rem;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background-color 0.15s ease;
}
#cc-main .pm__section--expandable .pm__section-title:hover ~ .pm__section-arrow,
#cc-main .pm__section--expandable .pm__section-title:focus-visible ~ .pm__section-arrow {
  background-color: #f5f5f5;
}
#cc-main .pm__section--expandable .pm__section-arrow svg {
  stroke: #737373;
  stroke-width: 2;
  width: 1rem;
  height: 1rem;
  transform: none;
}
#cc-main .pm__section--toggle.is-expanded .pm__section-arrow {
  transform: rotate(180deg);
}
#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg {
  transform: none;
}

/* ----- Toggle pill ----- */
/* Library's toggle is 50×23 by default. Designer uses 36×20 (h-5 w-9). */
#cc-main .section__toggle-wrapper {
  position: static;                            /* lib absolutely-positions to right:18px */
  align-self: flex-start;
  margin-top: 0.125rem;                        /* align with title's first line */
  flex: none;
  width: 2.25rem;                              /* w-9 */
  height: 1.25rem;                             /* h-5 */
}
#cc-main .section__toggle,
#cc-main .toggle__icon,
#cc-main .toggle__label {
  width: 2.25rem;
  height: 1.25rem;
}
#cc-main .toggle__icon {
  background: #d4d4d4;
  box-shadow: none;
  border-radius: 9999px;
}
#cc-main .toggle__icon-circle {
  width: 1rem;                                 /* size-4 */
  height: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  top: 0.125rem;                               /* center vertically: (1.25rem - 1rem)/2 */
  left: 0.125rem;
  transform: none;
}
#cc-main .section__toggle:checked ~ .toggle__icon {
  background: #2563eb;
  box-shadow: none;
}
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(1rem);                  /* 16px shift inside 36 - 16 - 2*2 = 16px track */
  background: #ffffff;
}
#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
  background: #2563eb;
  opacity: 0.6;                                /* matches design "necessary" greyed-out feel */
}
/* Hide the library's on/off check & cross glyphs — design has no glyphs. */
#cc-main .toggle__icon-on,
#cc-main .toggle__icon-off {
  display: none;
}

/* ----- Expanded description wrapper ----- */
/* No animation for now — content snaps in/out via display toggle. */
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
  display: none;
  background: transparent;
  border: 0;
  margin: 0 0 0 calc(1.5rem + 0.75rem);          /* align under the title */
  padding: 0;
}
#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
/* Categories without services (only "necessary" renders a placeholder
   comment in the description slot to keep the layout consistent). Hide the
   expand body so clicking does not reveal an empty strip, hide the chevron,
   and make the title non-interactive so the row visually reads as static.
   :has() is supported in all browsers we target. */
#cc-main .pm__section--toggle:not(:has(.pcb-svc)) .pm__section-desc-wrapper {
  display: none;
}
/* Hide the chevron (but keep its box) so the title text aligns with other
   rows; the title is non-interactive so clicking does nothing — there is no
   body to reveal. */
#cc-main .pm__section--toggle:not(:has(.pcb-svc)) .pm__section-title {
  cursor: default;
  pointer-events: none;
}
#cc-main .pm__section--toggle:not(:has(.pcb-svc)) .pm__section-arrow {
  visibility: hidden;
}
/* Remove the dashed separator the library puts between desc-wrapper children. */
#cc-main .pm__section-desc-wrapper > :not(:last-child) {
  border-bottom: 0;
}

/* ----- Service card ----- */
/* The library applies `all: unset` to every #cc-main div, which resets
   `display` to its initial value `inline`. Every Perspective-owned div that
   should behave as a block must declare `display: block` explicitly.
   Without that, .pcb-svc__name and .pcb-svc__provider render side-by-side
   on one line and the cookies table overflows the purpose text. */
#cc-main .pcb-svc {
  display: block;
  background: #fafafa;                         /* neutral-50 */
  border-radius: 0.5rem;                       /* rounded-lg */
  padding: 0.75rem;                            /* p-3 */
  font-size: 0.75rem;                          /* text-xs */
  line-height: 1.5;
  color: #404040;                              /* neutral-700 for purpose */
}
/* The library wraps all our service HTML inside a single <p class="pm__section-desc">,
   so multiple .pcb-svc siblings are nested inside that <p> rather than being
   direct flex children of .pm__section-desc-wrapper. The wrapper's flex `gap`
   therefore doesn't separate them — set the gap via margin-top instead. */
#cc-main .pcb-svc + .pcb-svc {
  margin-top: 0.75rem;                         /* space-y-3 */
}
#cc-main .pcb-svc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
#cc-main .pcb-svc__head-text {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}
#cc-main .pcb-svc__name {
  display: block;
  font-weight: 500;
  color: #171717;                              /* neutral-900 */
}
#cc-main .pcb-svc__provider {
  display: block;
  margin-top: 0.125rem;                        /* mt-0.5 */
  color: #737373;                              /* neutral-500 */
}
#cc-main .pcb-svc__pp {
  flex: none;
  font-size: 0.6875rem;                        /* 11px */
  color: #737373;
  text-decoration: none;
  text-underline-offset: 2px;
  background-image: none;                      /* defeat library's underline-on-hover gradient */
  font-weight: 400;
}
#cc-main .pcb-svc__pp:hover {
  text-decoration: underline;
  color: #737373;
}
#cc-main .pcb-svc__purpose {
  display: block;
  margin-top: 0.375rem;                        /* mt-1.5 */
  color: #404040;                              /* neutral-700 */
}
#cc-main .pcb-svc__transfers {
  margin-top: 0.5rem;                          /* mt-2 */
  display: flex;
  flex-wrap: wrap;
  gap: 0.0625rem 0.375rem;                     /* gap-x-1.5 gap-y-1 */
  font-size: 0.6875rem;
  color: #737373;
}
#cc-main .pcb-svc__transfers-label {
  font-weight: 500;
  color: #525252;                              /* neutral-600 */
}

/* ----- Cookies table ----- */
#cc-main .pcb-svc__cookies-wrap {
  display: block;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
  border: 1px solid #e5e5e5;
  background: #ffffff;
}
#cc-main .pcb-svc__cookies {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.6875rem;                        /* text-[11px] */
}
#cc-main .pcb-svc__cookies-head {
  border-bottom: 1px solid #e5e5e5;
  background: #fafafa;
  color: #737373;
}
#cc-main .pcb-svc__cookies-h {
  padding: 0.25rem 0.5rem;                     /* py-1 px-2 */
  text-align: left;
  font-weight: 400;
}
#cc-main .pcb-svc__cookies-h-life {
  width: 4.5rem;
}
#cc-main .pcb-svc__cookies-h-type {
  width: 4rem;
}
@media (min-width: 640px) {
  #cc-main .pcb-svc__cookies-h-life { width: 5rem; }
  #cc-main .pcb-svc__cookies-h-type { width: 5.25rem; }   /* fits "sessionStorage" */
}
#cc-main .pcb-svc__cookies-row {
  border-bottom: 1px solid #f5f5f5;            /* neutral-100 */
}
#cc-main .pcb-svc__cookies-row:last-child {
  border-bottom: 0;
}
#cc-main .pcb-svc__cookies-name {
  padding: 0.25rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.625rem;                         /* text-[10px] */
  color: #262626;                              /* neutral-800 */
  word-break: break-all;
}
#cc-main .pcb-svc__cookies-life,
#cc-main .pcb-svc__cookies-type {
  padding: 0.25rem 0.5rem;
  color: #525252;
  word-break: break-word;
}

/* ----- Footer (buttons + extras) ----- */
/* Buttons row: 3-col grid like the consent banner. Dissolve the library's
   two .pm__btn-group wrappers via display: contents (same trick as M3). */
#cc-main .pm__footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 0.5rem;
  border-top: 1px solid #e5e5e5;
  padding: 1rem 1.25rem;                       /* py-4 px-5 */
}
/* Only define a second row + row-gap when the extras (policy links) are
   actually rendered; otherwise the empty row's gap inflates bottom padding. */
#cc-main .pm__footer:has(.pcb-pm__extras) {
  grid-template-rows: auto auto;
  row-gap: 0.875rem;                            /* match consent banner spacing */
}
#cc-main .pm__footer > .pm__btn-group {
  display: contents !important;
}
#cc-main .pm__btn {
  margin: 0;
  height: 2rem;                                /* match consent buttons */
  min-height: 0;
  min-width: 0;
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-width: 1px;
  border-radius: var(--cc-btn-border-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
#cc-main .pm__btn + .pm__btn {
  margin-left: 0 !important;                   /* defeat lib's adjacent-sibling 0.375rem */
}
#cc-main .pm__btn--secondary {
  background: #ffffff;
  color: #2563eb;
  border-color: #2563eb;
}
#cc-main .pm__btn--secondary:hover {
  background: #f5f5f5;
  border-color: #2563eb;
  color: #2563eb;
}
/* Design order, desktop: Save selection (secondary) | Reject all | Accept all */
#cc-main .pm__btn[data-role='save'] {
  grid-column: 1;
  grid-row: 1;
}
#cc-main .pm__btn[data-role='necessary'] {
  grid-column: 2;
  grid-row: 1;
}
#cc-main .pm__btn[data-role='all'] {
  grid-column: 3;
  grid-row: 1;
}
/* Place the extras row spanning all columns at row 2. */
#cc-main .pcb-pm__extras {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.6875rem;                        /* text-[11px] */
  line-height: 1.125rem;                       /* 18px */
  color: #737373;
}
#cc-main .pcb-pm__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;                        /* gap-y-1 gap-x-3 */
}
#cc-main .pcb-pm__link {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 2px;
  background-image: none;
}
#cc-main .pcb-pm__link:hover {
  color: #404040;                              /* neutral-700 */
  text-decoration: underline;
}
/* Hide the library's default toggle label (it's a screen-reader fallback —
   our buttons already have aria-labels). */
#cc-main .pm__section--toggle .toggle__label {
  display: none;
}

/* ---------- 6. Preferences modal — responsive ---------- */
@media (max-width: 640px) {
  /* Full-bleed inset on mobile, matching design `inset-x-4 bottom-4`. */
  #cc-main .pm.pm--box {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 2rem);
  }

  /* Buttons stack: "Save selection" full-width on row 1; Reject + Accept share row 2. */
  #cc-main .pm__footer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  #cc-main .pm__btn[data-role='save'] {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #cc-main .pm__btn[data-role='necessary'] {
    grid-column: 1;
    grid-row: 2;
  }
  #cc-main .pm__btn[data-role='all'] {
    grid-column: 2;
    grid-row: 2;
  }
  /* Library's mobile rule adds `margin: 0.375rem 0 0 !important` to adjacent
     .pm__btn siblings, pushing Reject down. Grid handles spacing here. */
  #cc-main .pm__btn + .pm__btn,
  #cc-main .pm__btn-group + .pm__btn-group {
    margin: 0 !important;
  }
  #cc-main .pcb-pm__extras {
    grid-row: 3;
  }

  /* Cookies table — allow horizontal compression but keep rows readable. */
  #cc-main .pcb-svc__cookies-h-life { width: 4rem; }
  #cc-main .pcb-svc__cookies-h-type { width: 4.25rem; }
}

/* ---------- 7. Floating settings widget (M5) ---------- */

#cc-main .pcb-settings-widget {
  position: fixed;
  left: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 2147483640;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #404040;
  box-shadow: 0 10px 15px -3px rgba(23, 23, 23, 0.1),
              0 4px 6px -4px rgba(23, 23, 23, 0.1);
  cursor: pointer;
  transition: background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

#cc-main .pcb-settings-widget:hover {
  background-color: #fafafa;
}

#cc-main .pcb-settings-widget:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #d4d4d4,
              0 10px 15px -3px rgba(23, 23, 23, 0.1),
              0 4px 6px -4px rgba(23, 23, 23, 0.1);
}

#cc-main .pcb-settings-widget__icon {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

/* Hide while either library modal is open (library toggles these on <html>). */
html.show--consent #cc-main .pcb-settings-widget,
html.show--preferences #cc-main .pcb-settings-widget {
  display: none;
}