.cc-color-override--1085510111 .cc-tooltip, .cc-color-override--1085510111 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override--1085510111.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override--1085510111.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override--1085510111 .cc-link,.cc-color-override--1085510111 .cc-link:active,.cc-color-override--1085510111 .cc-link:visited{color: #f7f7f8}.cc-color-override--1085510111 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override--1085510111 .cc-btn:hover, .cc-color-override--1085510111 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override--1085510111 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme--1085510111 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override-202346862 .cc-tooltip, .cc-color-override-202346862 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override-202346862.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override-202346862.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override-202346862 .cc-link,.cc-color-override-202346862 .cc-link:active,.cc-color-override-202346862 .cc-link:visited{color: #f7f7f8}.cc-color-override-202346862 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override-202346862 .cc-btn:hover, .cc-color-override-202346862 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override-202346862 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme-202346862 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override-1391231726 .cc-tooltip, .cc-color-override-1391231726 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override-1391231726.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override-1391231726.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override-1391231726 .cc-link,.cc-color-override-1391231726 .cc-link:active,.cc-color-override-1391231726 .cc-link:visited{color: #f7f7f8}.cc-color-override-1391231726 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override-1391231726 .cc-btn:hover, .cc-color-override-1391231726 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override-1391231726 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme-1391231726 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override-2079206629 .cc-tooltip, .cc-color-override-2079206629 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override-2079206629.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override-2079206629.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override-2079206629 .cc-link,.cc-color-override-2079206629 .cc-link:active,.cc-color-override-2079206629 .cc-link:visited{color: #f7f7f8}.cc-color-override-2079206629 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override-2079206629 .cc-btn:hover, .cc-color-override-2079206629 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override-2079206629 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme-2079206629 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override--163370984 .cc-tooltip, .cc-color-override--163370984 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override--163370984.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override--163370984.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override--163370984 .cc-link,.cc-color-override--163370984 .cc-link:active,.cc-color-override--163370984 .cc-link:visited{color: #f7f7f8}.cc-color-override--163370984 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override--163370984 .cc-btn:hover, .cc-color-override--163370984 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override--163370984 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme--163370984 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override--1203609303 .cc-tooltip, .cc-color-override--1203609303 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override--1203609303.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override--1203609303.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override--1203609303 .cc-link,.cc-color-override--1203609303 .cc-link:active,.cc-color-override--1203609303 .cc-link:visited{color: #f7f7f8}.cc-color-override--1203609303 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override--1203609303 .cc-btn:hover, .cc-color-override--1203609303 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override--1203609303 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme--1203609303 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override-2114303219 .cc-tooltip, .cc-color-override-2114303219 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override-2114303219.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override-2114303219.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override-2114303219 .cc-link,.cc-color-override-2114303219 .cc-link:active,.cc-color-override-2114303219 .cc-link:visited{color: #f7f7f8}.cc-color-override-2114303219 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override-2114303219 .cc-btn:hover, .cc-color-override-2114303219 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override-2114303219 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme-2114303219 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override-645553747 .cc-tooltip, .cc-color-override-645553747 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override-645553747.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override-645553747.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override-645553747 .cc-link,.cc-color-override-645553747 .cc-link:active,.cc-color-override-645553747 .cc-link:visited{color: #f7f7f8}.cc-color-override-645553747 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override-645553747 .cc-btn:hover, .cc-color-override-645553747 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override-645553747 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme-645553747 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override--217161014 .cc-tooltip, .cc-color-override--217161014 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override--217161014.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override--217161014.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override--217161014 .cc-link,.cc-color-override--217161014 .cc-link:active,.cc-color-override--217161014 .cc-link:visited{color: #f7f7f8}.cc-color-override--217161014 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override--217161014 .cc-btn:hover, .cc-color-override--217161014 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override--217161014 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme--217161014 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}.cc-color-override--1515152730 .cc-tooltip, .cc-color-override--1515152730 .cc-tooltip:after{color: #f7f7f8;background-color: #1a1a1a}.cc-color-override--1515152730.cc-window{color: #f7f7f8;background-color: #1a1a1a}.cc-color-override--1515152730.cc-revoke{color: #f7f7f8;background-color: #1a1a1a}.cc-color-override--1515152730 .cc-link,.cc-color-override--1515152730 .cc-link:active,.cc-color-override--1515152730 .cc-link:visited{color: #f7f7f8}.cc-color-override--1515152730 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override--1515152730 .cc-btn:hover, .cc-color-override--1515152730 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override--1515152730 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme--1515152730 {--prefTextColor: #f7f7f8;--prefBodyColor: #1a1a1a;--prefFooterColor: #1a1a1a;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #1a1a1a;}.cc-color-override--449665426 .cc-tooltip, .cc-color-override--449665426 .cc-tooltip:after{color: #f7f7f8;background-color: #131313}.cc-color-override--449665426.cc-window{color: #f7f7f8;background-color: #131313}.cc-color-override--449665426.cc-revoke{color: #f7f7f8;background-color: #131313}.cc-color-override--449665426 .cc-link,.cc-color-override--449665426 .cc-link:active,.cc-color-override--449665426 .cc-link:visited{color: #f7f7f8}.cc-color-override--449665426 .cc-btn{color: #1a1a1a;border-color: #e0f782;background-color: #e0f782}.cc-color-override--449665426 .cc-btn:hover, .cc-color-override--449665426 .cc-btn:focus{background-color: #f7ff3d}.cc-color-override--449665426 .cc-highlight .cc-btn:nth-child(2){color: #f7f7f8}.cmp-theme--449665426 {--prefTextColor: #f7f7f8;--prefBodyColor: #131313;--prefFooterColor: #131313;--prefButtonColor: #e0f782;--prefButtonTextColor: #1a1a1a;--prefSelectorBgColor: #e0f782;--prefSelectorTextColor: #131313;}
/* Domain Level Customised Custom CSS */
/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override--1085510111.cmp-body, .cmp-theme--1085510111.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override--1085510111.cc-window, .cmp-theme--1085510111.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override--1085510111.cc-window[class][class].cc-floating, .cmp-theme--1085510111.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override--1085510111The selector still outweighs the vendor's own .cc-window, .cmp-theme--1085510111The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override--1085510111.cc-window[class][class].cc-invisible, .cmp-theme--1085510111.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override--1085510111.cc-window.cc-floating.cc-bottom, .cmp-theme--1085510111.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override--1085510111.cc-window.cc-floating.cc-right, .cmp-theme--1085510111.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override--1085510111.cc-window .cc-message-container, .cmp-theme--1085510111.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override--1085510111.cc-window .cc-message, .cmp-theme--1085510111.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override--1085510111.cc-window .cc-message > p, .cmp-theme--1085510111.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override--1085510111.cc-window .cc-message > a.cc-link, .cmp-theme--1085510111.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override--1085510111.cc-window .cc-message > a.cc-link:hover, .cmp-theme--1085510111.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override--1085510111.cc-window .cc-close.cc-close-banner-btn, .cmp-theme--1085510111.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme--1085510111.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--1085510111.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme--1085510111.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override--1085510111.cc-window[class][class] .cc-compliance, .cmp-theme--1085510111.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override--1085510111.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme--1085510111.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override--1085510111.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--1085510111.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override--1085510111.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme--1085510111.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override--1085510111.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1085510111.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override--1085510111.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--1085510111.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override--1085510111 `.cc-allow, .cmp-theme--1085510111 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override--1085510111.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--1085510111.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override--1085510111.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1085510111.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override--1085510111.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1085510111.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override--1085510111.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme--1085510111.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override--1085510111.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme--1085510111.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme--1085510111.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override--1085510111.cc-window .cmp-pref-link > span:first-child, .cmp-theme--1085510111.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override--1085510111.cc-window .cmp-pref-link svg, .cmp-theme--1085510111.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override--1085510111.cc-window .cmp-pref-link svg path, .cmp-theme--1085510111.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override--1085510111.cc-window .cmp-pref-link svg rect, .cmp-theme--1085510111.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override--1085510111.cc-window .cmp-pref-link svg circle, .cmp-theme--1085510111.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override--1085510111.cmp-body.show-modal, .cmp-theme--1085510111.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal, .cmp-theme--1085510111.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override--1085510111.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme--1085510111.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override--1085510111.cmp-body .cmp-modal .accept-reject-all, .cmp-theme--1085510111.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override--1085510111.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme--1085510111.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cmp-body .cmp-link-btn:hover, .cmp-theme--1085510111.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-list, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override--1085510111.cmp-body .cmp-details-view, .cmp-theme--1085510111.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override--1085510111.cmp-body .cmp-details-header, .cmp-theme--1085510111.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme--1085510111.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override--1085510111.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme--1085510111.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-header h1, .cmp-theme--1085510111.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-header > p, .cmp-theme--1085510111.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme--1085510111.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--1085510111.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme--1085510111.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override--1085510111.cmp-body .cmp-accordion__item, .cmp-theme--1085510111.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--1085510111.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme--1085510111.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override--1085510111.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme--1085510111.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--1085510111.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme--1085510111.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--1085510111.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme--1085510111.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override--1085510111.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme--1085510111.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override--1085510111.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme--1085510111.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override--1085510111.cc-window.cc-floating :focus-visible, .cmp-theme--1085510111.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override--1085510111.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme--1085510111.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override--1085510111.cmp-body, .cmp-theme--1085510111.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override--1085510111.cc-window[class][class].cc-floating, .cmp-theme--1085510111.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--1085510111.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override-202346862.cmp-body, .cmp-theme-202346862.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override-202346862.cc-window, .cmp-theme-202346862.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override-202346862.cc-window[class][class].cc-floating, .cmp-theme-202346862.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override-202346862The selector still outweighs the vendor's own .cc-window, .cmp-theme-202346862The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override-202346862.cc-window[class][class].cc-invisible, .cmp-theme-202346862.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override-202346862.cc-window.cc-floating.cc-bottom, .cmp-theme-202346862.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override-202346862.cc-window.cc-floating.cc-right, .cmp-theme-202346862.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override-202346862.cc-window .cc-message-container, .cmp-theme-202346862.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override-202346862.cc-window .cc-message, .cmp-theme-202346862.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override-202346862.cc-window .cc-message > p, .cmp-theme-202346862.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override-202346862.cc-window .cc-message > a.cc-link, .cmp-theme-202346862.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override-202346862.cc-window .cc-message > a.cc-link:hover, .cmp-theme-202346862.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override-202346862.cc-window .cc-close.cc-close-banner-btn, .cmp-theme-202346862.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme-202346862.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-202346862.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme-202346862.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override-202346862.cc-window[class][class] .cc-compliance, .cmp-theme-202346862.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override-202346862.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme-202346862.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override-202346862.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-202346862.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override-202346862.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme-202346862.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override-202346862.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-202346862.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override-202346862.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-202346862.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override-202346862 `.cc-allow, .cmp-theme-202346862 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override-202346862.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-202346862.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override-202346862.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-202346862.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override-202346862.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-202346862.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override-202346862.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme-202346862.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override-202346862.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme-202346862.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme-202346862.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override-202346862.cc-window .cmp-pref-link > span:first-child, .cmp-theme-202346862.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override-202346862.cc-window .cmp-pref-link svg, .cmp-theme-202346862.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override-202346862.cc-window .cmp-pref-link svg path, .cmp-theme-202346862.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override-202346862.cc-window .cmp-pref-link svg rect, .cmp-theme-202346862.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override-202346862.cc-window .cmp-pref-link svg circle, .cmp-theme-202346862.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override-202346862.cmp-body.show-modal, .cmp-theme-202346862.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal, .cmp-theme-202346862.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override-202346862.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme-202346862.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override-202346862.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override-202346862.cmp-body .cmp-modal .accept-reject-all, .cmp-theme-202346862.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override-202346862.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme-202346862.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cmp-body .cmp-link-btn:hover, .cmp-theme-202346862.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-list, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override-202346862.cmp-body .cmp-details-view, .cmp-theme-202346862.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override-202346862.cmp-body .cmp-details-header, .cmp-theme-202346862.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme-202346862.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override-202346862.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme-202346862.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-header h1, .cmp-theme-202346862.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-header > p, .cmp-theme-202346862.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme-202346862.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-202346862.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme-202346862.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override-202346862.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme-202346862.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override-202346862.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override-202346862.cmp-body .cmp-accordion__item, .cmp-theme-202346862.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-202346862.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme-202346862.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override-202346862.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme-202346862.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-202346862.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme-202346862.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-202346862.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme-202346862.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override-202346862.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme-202346862.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override-202346862.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme-202346862.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override-202346862.cc-window.cc-floating :focus-visible, .cmp-theme-202346862.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override-202346862.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme-202346862.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override-202346862.cmp-body, .cmp-theme-202346862.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override-202346862.cc-window[class][class].cc-floating, .cmp-theme-202346862.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-202346862.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override-1391231726.cmp-body, .cmp-theme-1391231726.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override-1391231726.cc-window, .cmp-theme-1391231726.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override-1391231726.cc-window[class][class].cc-floating, .cmp-theme-1391231726.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override-1391231726The selector still outweighs the vendor's own .cc-window, .cmp-theme-1391231726The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override-1391231726.cc-window[class][class].cc-invisible, .cmp-theme-1391231726.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override-1391231726.cc-window.cc-floating.cc-bottom, .cmp-theme-1391231726.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override-1391231726.cc-window.cc-floating.cc-right, .cmp-theme-1391231726.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override-1391231726.cc-window .cc-message-container, .cmp-theme-1391231726.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override-1391231726.cc-window .cc-message, .cmp-theme-1391231726.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override-1391231726.cc-window .cc-message > p, .cmp-theme-1391231726.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override-1391231726.cc-window .cc-message > a.cc-link, .cmp-theme-1391231726.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override-1391231726.cc-window .cc-message > a.cc-link:hover, .cmp-theme-1391231726.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override-1391231726.cc-window .cc-close.cc-close-banner-btn, .cmp-theme-1391231726.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme-1391231726.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-1391231726.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme-1391231726.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override-1391231726.cc-window[class][class] .cc-compliance, .cmp-theme-1391231726.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override-1391231726.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme-1391231726.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override-1391231726.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-1391231726.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override-1391231726.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme-1391231726.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override-1391231726.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-1391231726.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override-1391231726.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-1391231726.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override-1391231726 `.cc-allow, .cmp-theme-1391231726 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override-1391231726.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-1391231726.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override-1391231726.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-1391231726.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override-1391231726.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-1391231726.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override-1391231726.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme-1391231726.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override-1391231726.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme-1391231726.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme-1391231726.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override-1391231726.cc-window .cmp-pref-link > span:first-child, .cmp-theme-1391231726.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override-1391231726.cc-window .cmp-pref-link svg, .cmp-theme-1391231726.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override-1391231726.cc-window .cmp-pref-link svg path, .cmp-theme-1391231726.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override-1391231726.cc-window .cmp-pref-link svg rect, .cmp-theme-1391231726.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override-1391231726.cc-window .cmp-pref-link svg circle, .cmp-theme-1391231726.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override-1391231726.cmp-body.show-modal, .cmp-theme-1391231726.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal, .cmp-theme-1391231726.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override-1391231726.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme-1391231726.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override-1391231726.cmp-body .cmp-modal .accept-reject-all, .cmp-theme-1391231726.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override-1391231726.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme-1391231726.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cmp-body .cmp-link-btn:hover, .cmp-theme-1391231726.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-list, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override-1391231726.cmp-body .cmp-details-view, .cmp-theme-1391231726.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override-1391231726.cmp-body .cmp-details-header, .cmp-theme-1391231726.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme-1391231726.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override-1391231726.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme-1391231726.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-header h1, .cmp-theme-1391231726.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-header > p, .cmp-theme-1391231726.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme-1391231726.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-1391231726.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme-1391231726.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override-1391231726.cmp-body .cmp-accordion__item, .cmp-theme-1391231726.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-1391231726.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme-1391231726.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override-1391231726.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme-1391231726.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-1391231726.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme-1391231726.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-1391231726.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme-1391231726.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override-1391231726.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme-1391231726.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override-1391231726.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme-1391231726.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override-1391231726.cc-window.cc-floating :focus-visible, .cmp-theme-1391231726.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override-1391231726.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme-1391231726.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override-1391231726.cmp-body, .cmp-theme-1391231726.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override-1391231726.cc-window[class][class].cc-floating, .cmp-theme-1391231726.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-1391231726.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override-2079206629.cmp-body, .cmp-theme-2079206629.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override-2079206629.cc-window, .cmp-theme-2079206629.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override-2079206629.cc-window[class][class].cc-floating, .cmp-theme-2079206629.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override-2079206629The selector still outweighs the vendor's own .cc-window, .cmp-theme-2079206629The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override-2079206629.cc-window[class][class].cc-invisible, .cmp-theme-2079206629.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override-2079206629.cc-window.cc-floating.cc-bottom, .cmp-theme-2079206629.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override-2079206629.cc-window.cc-floating.cc-right, .cmp-theme-2079206629.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override-2079206629.cc-window .cc-message-container, .cmp-theme-2079206629.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override-2079206629.cc-window .cc-message, .cmp-theme-2079206629.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override-2079206629.cc-window .cc-message > p, .cmp-theme-2079206629.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override-2079206629.cc-window .cc-message > a.cc-link, .cmp-theme-2079206629.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override-2079206629.cc-window .cc-message > a.cc-link:hover, .cmp-theme-2079206629.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override-2079206629.cc-window .cc-close.cc-close-banner-btn, .cmp-theme-2079206629.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme-2079206629.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-2079206629.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme-2079206629.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override-2079206629.cc-window[class][class] .cc-compliance, .cmp-theme-2079206629.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override-2079206629.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme-2079206629.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override-2079206629.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-2079206629.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override-2079206629.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme-2079206629.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override-2079206629.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2079206629.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override-2079206629.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-2079206629.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override-2079206629 `.cc-allow, .cmp-theme-2079206629 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override-2079206629.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-2079206629.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override-2079206629.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2079206629.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override-2079206629.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2079206629.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override-2079206629.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme-2079206629.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override-2079206629.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme-2079206629.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme-2079206629.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override-2079206629.cc-window .cmp-pref-link > span:first-child, .cmp-theme-2079206629.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override-2079206629.cc-window .cmp-pref-link svg, .cmp-theme-2079206629.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override-2079206629.cc-window .cmp-pref-link svg path, .cmp-theme-2079206629.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override-2079206629.cc-window .cmp-pref-link svg rect, .cmp-theme-2079206629.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override-2079206629.cc-window .cmp-pref-link svg circle, .cmp-theme-2079206629.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override-2079206629.cmp-body.show-modal, .cmp-theme-2079206629.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal, .cmp-theme-2079206629.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override-2079206629.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme-2079206629.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override-2079206629.cmp-body .cmp-modal .accept-reject-all, .cmp-theme-2079206629.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override-2079206629.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme-2079206629.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cmp-body .cmp-link-btn:hover, .cmp-theme-2079206629.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-list, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override-2079206629.cmp-body .cmp-details-view, .cmp-theme-2079206629.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override-2079206629.cmp-body .cmp-details-header, .cmp-theme-2079206629.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme-2079206629.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override-2079206629.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme-2079206629.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-header h1, .cmp-theme-2079206629.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-header > p, .cmp-theme-2079206629.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme-2079206629.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-2079206629.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme-2079206629.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override-2079206629.cmp-body .cmp-accordion__item, .cmp-theme-2079206629.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-2079206629.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme-2079206629.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override-2079206629.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme-2079206629.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-2079206629.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme-2079206629.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-2079206629.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme-2079206629.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override-2079206629.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme-2079206629.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override-2079206629.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme-2079206629.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override-2079206629.cc-window.cc-floating :focus-visible, .cmp-theme-2079206629.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override-2079206629.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme-2079206629.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override-2079206629.cmp-body, .cmp-theme-2079206629.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override-2079206629.cc-window[class][class].cc-floating, .cmp-theme-2079206629.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-2079206629.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override--163370984.cmp-body, .cmp-theme--163370984.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override--163370984.cc-window, .cmp-theme--163370984.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override--163370984.cc-window[class][class].cc-floating, .cmp-theme--163370984.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override--163370984The selector still outweighs the vendor's own .cc-window, .cmp-theme--163370984The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override--163370984.cc-window[class][class].cc-invisible, .cmp-theme--163370984.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override--163370984.cc-window.cc-floating.cc-bottom, .cmp-theme--163370984.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override--163370984.cc-window.cc-floating.cc-right, .cmp-theme--163370984.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override--163370984.cc-window .cc-message-container, .cmp-theme--163370984.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override--163370984.cc-window .cc-message, .cmp-theme--163370984.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override--163370984.cc-window .cc-message > p, .cmp-theme--163370984.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override--163370984.cc-window .cc-message > a.cc-link, .cmp-theme--163370984.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override--163370984.cc-window .cc-message > a.cc-link:hover, .cmp-theme--163370984.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override--163370984.cc-window .cc-close.cc-close-banner-btn, .cmp-theme--163370984.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme--163370984.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--163370984.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme--163370984.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override--163370984.cc-window[class][class] .cc-compliance, .cmp-theme--163370984.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override--163370984.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme--163370984.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override--163370984.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--163370984.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override--163370984.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme--163370984.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override--163370984.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--163370984.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override--163370984.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--163370984.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override--163370984 `.cc-allow, .cmp-theme--163370984 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override--163370984.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--163370984.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override--163370984.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--163370984.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override--163370984.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--163370984.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override--163370984.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme--163370984.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override--163370984.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme--163370984.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme--163370984.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override--163370984.cc-window .cmp-pref-link > span:first-child, .cmp-theme--163370984.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override--163370984.cc-window .cmp-pref-link svg, .cmp-theme--163370984.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override--163370984.cc-window .cmp-pref-link svg path, .cmp-theme--163370984.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override--163370984.cc-window .cmp-pref-link svg rect, .cmp-theme--163370984.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override--163370984.cc-window .cmp-pref-link svg circle, .cmp-theme--163370984.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override--163370984.cmp-body.show-modal, .cmp-theme--163370984.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal, .cmp-theme--163370984.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override--163370984.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme--163370984.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override--163370984.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override--163370984.cmp-body .cmp-modal .accept-reject-all, .cmp-theme--163370984.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override--163370984.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme--163370984.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cmp-body .cmp-link-btn:hover, .cmp-theme--163370984.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-list, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override--163370984.cmp-body .cmp-details-view, .cmp-theme--163370984.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override--163370984.cmp-body .cmp-details-header, .cmp-theme--163370984.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme--163370984.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override--163370984.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme--163370984.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-header h1, .cmp-theme--163370984.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-header > p, .cmp-theme--163370984.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme--163370984.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--163370984.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme--163370984.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override--163370984.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme--163370984.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override--163370984.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override--163370984.cmp-body .cmp-accordion__item, .cmp-theme--163370984.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--163370984.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme--163370984.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override--163370984.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme--163370984.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--163370984.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme--163370984.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--163370984.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme--163370984.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override--163370984.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme--163370984.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override--163370984.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme--163370984.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override--163370984.cc-window.cc-floating :focus-visible, .cmp-theme--163370984.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override--163370984.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme--163370984.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override--163370984.cmp-body, .cmp-theme--163370984.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override--163370984.cc-window[class][class].cc-floating, .cmp-theme--163370984.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--163370984.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override--1203609303.cmp-body, .cmp-theme--1203609303.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override--1203609303.cc-window, .cmp-theme--1203609303.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override--1203609303.cc-window[class][class].cc-floating, .cmp-theme--1203609303.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override--1203609303The selector still outweighs the vendor's own .cc-window, .cmp-theme--1203609303The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override--1203609303.cc-window[class][class].cc-invisible, .cmp-theme--1203609303.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override--1203609303.cc-window.cc-floating.cc-bottom, .cmp-theme--1203609303.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override--1203609303.cc-window.cc-floating.cc-right, .cmp-theme--1203609303.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override--1203609303.cc-window .cc-message-container, .cmp-theme--1203609303.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override--1203609303.cc-window .cc-message, .cmp-theme--1203609303.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override--1203609303.cc-window .cc-message > p, .cmp-theme--1203609303.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override--1203609303.cc-window .cc-message > a.cc-link, .cmp-theme--1203609303.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override--1203609303.cc-window .cc-message > a.cc-link:hover, .cmp-theme--1203609303.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override--1203609303.cc-window .cc-close.cc-close-banner-btn, .cmp-theme--1203609303.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme--1203609303.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--1203609303.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme--1203609303.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override--1203609303.cc-window[class][class] .cc-compliance, .cmp-theme--1203609303.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override--1203609303.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme--1203609303.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override--1203609303.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--1203609303.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override--1203609303.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme--1203609303.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override--1203609303.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1203609303.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override--1203609303.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--1203609303.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override--1203609303 `.cc-allow, .cmp-theme--1203609303 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override--1203609303.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--1203609303.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override--1203609303.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1203609303.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override--1203609303.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1203609303.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override--1203609303.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme--1203609303.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override--1203609303.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme--1203609303.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme--1203609303.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override--1203609303.cc-window .cmp-pref-link > span:first-child, .cmp-theme--1203609303.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override--1203609303.cc-window .cmp-pref-link svg, .cmp-theme--1203609303.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override--1203609303.cc-window .cmp-pref-link svg path, .cmp-theme--1203609303.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override--1203609303.cc-window .cmp-pref-link svg rect, .cmp-theme--1203609303.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override--1203609303.cc-window .cmp-pref-link svg circle, .cmp-theme--1203609303.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override--1203609303.cmp-body.show-modal, .cmp-theme--1203609303.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal, .cmp-theme--1203609303.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override--1203609303.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme--1203609303.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override--1203609303.cmp-body .cmp-modal .accept-reject-all, .cmp-theme--1203609303.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override--1203609303.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme--1203609303.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cmp-body .cmp-link-btn:hover, .cmp-theme--1203609303.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-list, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override--1203609303.cmp-body .cmp-details-view, .cmp-theme--1203609303.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override--1203609303.cmp-body .cmp-details-header, .cmp-theme--1203609303.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme--1203609303.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override--1203609303.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme--1203609303.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-header h1, .cmp-theme--1203609303.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-header > p, .cmp-theme--1203609303.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme--1203609303.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--1203609303.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme--1203609303.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override--1203609303.cmp-body .cmp-accordion__item, .cmp-theme--1203609303.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--1203609303.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme--1203609303.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override--1203609303.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme--1203609303.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--1203609303.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme--1203609303.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--1203609303.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme--1203609303.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override--1203609303.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme--1203609303.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override--1203609303.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme--1203609303.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override--1203609303.cc-window.cc-floating :focus-visible, .cmp-theme--1203609303.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override--1203609303.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme--1203609303.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override--1203609303.cmp-body, .cmp-theme--1203609303.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override--1203609303.cc-window[class][class].cc-floating, .cmp-theme--1203609303.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--1203609303.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override-2114303219.cmp-body, .cmp-theme-2114303219.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override-2114303219.cc-window, .cmp-theme-2114303219.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override-2114303219.cc-window[class][class].cc-floating, .cmp-theme-2114303219.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override-2114303219The selector still outweighs the vendor's own .cc-window, .cmp-theme-2114303219The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override-2114303219.cc-window[class][class].cc-invisible, .cmp-theme-2114303219.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override-2114303219.cc-window.cc-floating.cc-bottom, .cmp-theme-2114303219.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override-2114303219.cc-window.cc-floating.cc-right, .cmp-theme-2114303219.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override-2114303219.cc-window .cc-message-container, .cmp-theme-2114303219.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override-2114303219.cc-window .cc-message, .cmp-theme-2114303219.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override-2114303219.cc-window .cc-message > p, .cmp-theme-2114303219.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override-2114303219.cc-window .cc-message > a.cc-link, .cmp-theme-2114303219.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override-2114303219.cc-window .cc-message > a.cc-link:hover, .cmp-theme-2114303219.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override-2114303219.cc-window .cc-close.cc-close-banner-btn, .cmp-theme-2114303219.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme-2114303219.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-2114303219.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme-2114303219.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override-2114303219.cc-window[class][class] .cc-compliance, .cmp-theme-2114303219.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override-2114303219.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme-2114303219.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override-2114303219.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-2114303219.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override-2114303219.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme-2114303219.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override-2114303219.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2114303219.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override-2114303219.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-2114303219.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override-2114303219 `.cc-allow, .cmp-theme-2114303219 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override-2114303219.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-2114303219.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override-2114303219.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2114303219.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override-2114303219.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-2114303219.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override-2114303219.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme-2114303219.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override-2114303219.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme-2114303219.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme-2114303219.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override-2114303219.cc-window .cmp-pref-link > span:first-child, .cmp-theme-2114303219.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override-2114303219.cc-window .cmp-pref-link svg, .cmp-theme-2114303219.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override-2114303219.cc-window .cmp-pref-link svg path, .cmp-theme-2114303219.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override-2114303219.cc-window .cmp-pref-link svg rect, .cmp-theme-2114303219.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override-2114303219.cc-window .cmp-pref-link svg circle, .cmp-theme-2114303219.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override-2114303219.cmp-body.show-modal, .cmp-theme-2114303219.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal, .cmp-theme-2114303219.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override-2114303219.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme-2114303219.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override-2114303219.cmp-body .cmp-modal .accept-reject-all, .cmp-theme-2114303219.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override-2114303219.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme-2114303219.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cmp-body .cmp-link-btn:hover, .cmp-theme-2114303219.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-list, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override-2114303219.cmp-body .cmp-details-view, .cmp-theme-2114303219.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override-2114303219.cmp-body .cmp-details-header, .cmp-theme-2114303219.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme-2114303219.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override-2114303219.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme-2114303219.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-header h1, .cmp-theme-2114303219.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-header > p, .cmp-theme-2114303219.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme-2114303219.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-2114303219.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme-2114303219.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override-2114303219.cmp-body .cmp-accordion__item, .cmp-theme-2114303219.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-2114303219.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme-2114303219.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override-2114303219.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme-2114303219.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-2114303219.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme-2114303219.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-2114303219.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme-2114303219.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override-2114303219.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme-2114303219.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override-2114303219.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme-2114303219.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override-2114303219.cc-window.cc-floating :focus-visible, .cmp-theme-2114303219.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override-2114303219.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme-2114303219.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override-2114303219.cmp-body, .cmp-theme-2114303219.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override-2114303219.cc-window[class][class].cc-floating, .cmp-theme-2114303219.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-2114303219.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override-645553747.cmp-body, .cmp-theme-645553747.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override-645553747.cc-window, .cmp-theme-645553747.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override-645553747.cc-window[class][class].cc-floating, .cmp-theme-645553747.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override-645553747The selector still outweighs the vendor's own .cc-window, .cmp-theme-645553747The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override-645553747.cc-window[class][class].cc-invisible, .cmp-theme-645553747.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override-645553747.cc-window.cc-floating.cc-bottom, .cmp-theme-645553747.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override-645553747.cc-window.cc-floating.cc-right, .cmp-theme-645553747.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override-645553747.cc-window .cc-message-container, .cmp-theme-645553747.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override-645553747.cc-window .cc-message, .cmp-theme-645553747.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override-645553747.cc-window .cc-message > p, .cmp-theme-645553747.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override-645553747.cc-window .cc-message > a.cc-link, .cmp-theme-645553747.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override-645553747.cc-window .cc-message > a.cc-link:hover, .cmp-theme-645553747.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override-645553747.cc-window .cc-close.cc-close-banner-btn, .cmp-theme-645553747.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme-645553747.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-645553747.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme-645553747.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override-645553747.cc-window[class][class] .cc-compliance, .cmp-theme-645553747.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override-645553747.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme-645553747.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override-645553747.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-645553747.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override-645553747.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme-645553747.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override-645553747.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-645553747.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override-645553747.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme-645553747.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override-645553747 `.cc-allow, .cmp-theme-645553747 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override-645553747.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme-645553747.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override-645553747.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-645553747.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override-645553747.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme-645553747.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override-645553747.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme-645553747.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override-645553747.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme-645553747.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme-645553747.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override-645553747.cc-window .cmp-pref-link > span:first-child, .cmp-theme-645553747.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override-645553747.cc-window .cmp-pref-link svg, .cmp-theme-645553747.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override-645553747.cc-window .cmp-pref-link svg path, .cmp-theme-645553747.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override-645553747.cc-window .cmp-pref-link svg rect, .cmp-theme-645553747.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override-645553747.cc-window .cmp-pref-link svg circle, .cmp-theme-645553747.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override-645553747.cmp-body.show-modal, .cmp-theme-645553747.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal, .cmp-theme-645553747.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override-645553747.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme-645553747.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override-645553747.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override-645553747.cmp-body .cmp-modal .accept-reject-all, .cmp-theme-645553747.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override-645553747.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme-645553747.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cmp-body .cmp-link-btn:hover, .cmp-theme-645553747.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-list, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override-645553747.cmp-body .cmp-details-view, .cmp-theme-645553747.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override-645553747.cmp-body .cmp-details-header, .cmp-theme-645553747.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme-645553747.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override-645553747.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme-645553747.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-header h1, .cmp-theme-645553747.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-header > p, .cmp-theme-645553747.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme-645553747.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-645553747.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme-645553747.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override-645553747.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme-645553747.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override-645553747.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override-645553747.cmp-body .cmp-accordion__item, .cmp-theme-645553747.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override-645553747.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme-645553747.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override-645553747.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme-645553747.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-645553747.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme-645553747.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override-645553747.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme-645553747.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override-645553747.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme-645553747.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override-645553747.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme-645553747.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override-645553747.cc-window.cc-floating :focus-visible, .cmp-theme-645553747.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override-645553747.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme-645553747.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override-645553747.cmp-body, .cmp-theme-645553747.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override-645553747.cc-window[class][class].cc-floating, .cmp-theme-645553747.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme-645553747.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override--217161014.cmp-body, .cmp-theme--217161014.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override--217161014.cc-window, .cmp-theme--217161014.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override--217161014.cc-window[class][class].cc-floating, .cmp-theme--217161014.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override--217161014The selector still outweighs the vendor's own .cc-window, .cmp-theme--217161014The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override--217161014.cc-window[class][class].cc-invisible, .cmp-theme--217161014.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override--217161014.cc-window.cc-floating.cc-bottom, .cmp-theme--217161014.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override--217161014.cc-window.cc-floating.cc-right, .cmp-theme--217161014.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override--217161014.cc-window .cc-message-container, .cmp-theme--217161014.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override--217161014.cc-window .cc-message, .cmp-theme--217161014.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override--217161014.cc-window .cc-message > p, .cmp-theme--217161014.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override--217161014.cc-window .cc-message > a.cc-link, .cmp-theme--217161014.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override--217161014.cc-window .cc-message > a.cc-link:hover, .cmp-theme--217161014.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override--217161014.cc-window .cc-close.cc-close-banner-btn, .cmp-theme--217161014.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme--217161014.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--217161014.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme--217161014.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override--217161014.cc-window[class][class] .cc-compliance, .cmp-theme--217161014.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override--217161014.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme--217161014.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override--217161014.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--217161014.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override--217161014.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme--217161014.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override--217161014.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--217161014.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override--217161014.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--217161014.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override--217161014 `.cc-allow, .cmp-theme--217161014 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override--217161014.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--217161014.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override--217161014.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--217161014.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override--217161014.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--217161014.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override--217161014.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme--217161014.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override--217161014.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme--217161014.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme--217161014.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override--217161014.cc-window .cmp-pref-link > span:first-child, .cmp-theme--217161014.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override--217161014.cc-window .cmp-pref-link svg, .cmp-theme--217161014.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override--217161014.cc-window .cmp-pref-link svg path, .cmp-theme--217161014.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override--217161014.cc-window .cmp-pref-link svg rect, .cmp-theme--217161014.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override--217161014.cc-window .cmp-pref-link svg circle, .cmp-theme--217161014.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override--217161014.cmp-body.show-modal, .cmp-theme--217161014.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal, .cmp-theme--217161014.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override--217161014.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme--217161014.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override--217161014.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override--217161014.cmp-body .cmp-modal .accept-reject-all, .cmp-theme--217161014.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override--217161014.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme--217161014.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cmp-body .cmp-link-btn:hover, .cmp-theme--217161014.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-list, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override--217161014.cmp-body .cmp-details-view, .cmp-theme--217161014.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override--217161014.cmp-body .cmp-details-header, .cmp-theme--217161014.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme--217161014.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override--217161014.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme--217161014.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-header h1, .cmp-theme--217161014.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-header > p, .cmp-theme--217161014.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme--217161014.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--217161014.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme--217161014.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override--217161014.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme--217161014.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override--217161014.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override--217161014.cmp-body .cmp-accordion__item, .cmp-theme--217161014.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--217161014.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme--217161014.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override--217161014.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme--217161014.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--217161014.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme--217161014.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--217161014.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme--217161014.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override--217161014.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme--217161014.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override--217161014.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme--217161014.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override--217161014.cc-window.cc-floating :focus-visible, .cmp-theme--217161014.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override--217161014.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme--217161014.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override--217161014.cmp-body, .cmp-theme--217161014.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override--217161014.cc-window[class][class].cc-floating, .cmp-theme--217161014.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--217161014.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override--1515152730.cmp-body, .cmp-theme--1515152730.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override--1515152730.cc-window, .cmp-theme--1515152730.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override--1515152730.cc-window[class][class].cc-floating, .cmp-theme--1515152730.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override--1515152730The selector still outweighs the vendor's own .cc-window, .cmp-theme--1515152730The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override--1515152730.cc-window[class][class].cc-invisible, .cmp-theme--1515152730.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override--1515152730.cc-window.cc-floating.cc-bottom, .cmp-theme--1515152730.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override--1515152730.cc-window.cc-floating.cc-right, .cmp-theme--1515152730.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override--1515152730.cc-window .cc-message-container, .cmp-theme--1515152730.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override--1515152730.cc-window .cc-message, .cmp-theme--1515152730.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override--1515152730.cc-window .cc-message > p, .cmp-theme--1515152730.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override--1515152730.cc-window .cc-message > a.cc-link, .cmp-theme--1515152730.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override--1515152730.cc-window .cc-message > a.cc-link:hover, .cmp-theme--1515152730.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override--1515152730.cc-window .cc-close.cc-close-banner-btn, .cmp-theme--1515152730.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme--1515152730.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--1515152730.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme--1515152730.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override--1515152730.cc-window[class][class] .cc-compliance, .cmp-theme--1515152730.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override--1515152730.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme--1515152730.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override--1515152730.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--1515152730.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override--1515152730.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme--1515152730.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override--1515152730.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1515152730.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override--1515152730.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--1515152730.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override--1515152730 `.cc-allow, .cmp-theme--1515152730 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override--1515152730.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--1515152730.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override--1515152730.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1515152730.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override--1515152730.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--1515152730.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override--1515152730.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme--1515152730.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override--1515152730.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme--1515152730.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme--1515152730.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override--1515152730.cc-window .cmp-pref-link > span:first-child, .cmp-theme--1515152730.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override--1515152730.cc-window .cmp-pref-link svg, .cmp-theme--1515152730.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override--1515152730.cc-window .cmp-pref-link svg path, .cmp-theme--1515152730.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override--1515152730.cc-window .cmp-pref-link svg rect, .cmp-theme--1515152730.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override--1515152730.cc-window .cmp-pref-link svg circle, .cmp-theme--1515152730.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override--1515152730.cmp-body.show-modal, .cmp-theme--1515152730.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal, .cmp-theme--1515152730.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override--1515152730.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme--1515152730.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override--1515152730.cmp-body .cmp-modal .accept-reject-all, .cmp-theme--1515152730.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override--1515152730.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme--1515152730.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cmp-body .cmp-link-btn:hover, .cmp-theme--1515152730.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-list, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override--1515152730.cmp-body .cmp-details-view, .cmp-theme--1515152730.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override--1515152730.cmp-body .cmp-details-header, .cmp-theme--1515152730.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme--1515152730.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override--1515152730.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme--1515152730.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-header h1, .cmp-theme--1515152730.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-header > p, .cmp-theme--1515152730.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme--1515152730.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--1515152730.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme--1515152730.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override--1515152730.cmp-body .cmp-accordion__item, .cmp-theme--1515152730.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--1515152730.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme--1515152730.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override--1515152730.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme--1515152730.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--1515152730.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme--1515152730.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--1515152730.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme--1515152730.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override--1515152730.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme--1515152730.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override--1515152730.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme--1515152730.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override--1515152730.cc-window.cc-floating :focus-visible, .cmp-theme--1515152730.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override--1515152730.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme--1515152730.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override--1515152730.cmp-body, .cmp-theme--1515152730.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override--1515152730.cc-window[class][class].cc-floating, .cmp-theme--1515152730.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--1515152730.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}

/* Uniify brand skin for the Securiti CMP.
Console > Consent > Cookie Consent > Custom CSS. Scope: .cc-window (banner)
and .cmp-body (preference center).

Design source: Figma "Terms" file, page "🚧 In Progress" (node 1:83) —
frames "EU + Global – opt in", "US – out out",
"Canada Japan Switzerland – hybrid", "Rest of world – opt out", and the two
preference-center frames.

The SDK stylesheet loads AFTER this file, so a tie on specificity loses.
That is why !important is everywhere, and why the rules that fight vendor
geometry carry [class][class] (+0-2-0) — a single [class] ties and loses.

Securiti scopes only the LAST selector of a group with its theme hash, so
every rule below has exactly one selector. Do not group them.

Browser floor: Safari 15.6 / iOS 15.6. That rules out nesting (17.2),
container queries (16), text-wrap: balance (17.5) and colour-mix — none of
which appear below. Everything that IS used clears 15.6, and the two features
caniuse rates only partly supported there (intrinsic sizing, display:contents)
carry a note at their use site. */

.cc-window,
.cc-color-override--449665426.cmp-body, .cmp-theme--449665426.cmp-body {
--brand-surface: #1c1e21;
--brand-tile: rgba(255, 255, 255, 0.05);
--brand-control: rgba(255, 255, 255, 0.1);
--brand-control-hover: rgba(255, 255, 255, 0.16);
--brand-border: rgba(255, 255, 255, 0.1);
--brand-text: #ffffff;
--brand-text-muted: rgba(255, 255, 255, 0.6);
--brand-text-dim: rgba(255, 255, 255, 0.4);
--brand-text-faint: rgba(255, 255, 255, 0.2);
--brand-accent: #e0f782;
--brand-on-accent: #1a1a1a;
--brand-switch-off: #5c626a;
--brand-radius-surface: 16px;
--brand-radius-control: 10px;
--brand-radius-chip: 6px;
--brand-font: Inter, ui-sans-serif, system-ui, sans-serif;
--brand-inset: 16px;
--brand-gap: 20px;
/* The tile chevron ships as an icon with no text node, so this label is the
one string the skin injects. Override per locale if the CMP is translated. */
--brand-learn-more: "Learn more";
}

.cmp-body,
.cc-color-override--449665426.cc-window, .cmp-theme--449665426.cc-window {
--prefBodyColor: var(--brand-surface) !important;
--prefFooterColor: var(--brand-surface) !important;
--prefTextColor: var(--brand-text) !important;
--prefLinkColor: var(--brand-text) !important;
--prefButtonColor: var(--brand-accent) !important;
--prefButtonTextColor: var(--brand-on-accent) !important;
--prefFocusRingColor: var(--brand-accent) !important;
--prefSelectorBgColor: var(--brand-accent) !important;
--prefSelectorTextColor: var(--brand-on-accent) !important;
}

/* ==========================  BANNER  ===================================== */

/* [class][class] on the box metrics: the vendor caps .cc-floating at 24em and
its sheet loads after this one, so a plain max-width ties and loses. */
.cc-color-override--449665426.cc-window[class][class].cc-floating, .cmp-theme--449665426.cc-window[class][class].cc-floating {
box-sizing: border-box;
position: fixed;
/* NOT !important, unlike its neighbours: the SDK closes the banner by writing
an inline display:none (and reads that same inline value back in isOpen()),
so an !important here outranks the close and leaves the card laid out at
opacity:0 — an invisible tap target over the bottom-right of the viewport.
.cc-color-override--449665426The selector still outweighs the vendor's own .cc-window, .cmp-theme--449665426The selector still outweighs the vendor's own .cc-window {display:none}, so
the open state renders without it. */
display: flex;
flex-direction: column !important;
gap: var(--brand-gap) !important;
width: 400px !important;
max-width: calc(100vw - 32px) !important;
padding: var(--brand-inset) !important;
background-color: var(--brand-surface) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none;
/* both inherit, so setting them on the card covers every control inside:
iOS paints a grey flash on tap, and inflates text in narrow viewports */
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}

/* cc-invisible is only opacity:0 in the vendor sheet, and the inline
display:none that actually hides the card is written a full second later by
the transitionend handler. Without this the banner still eats taps for the
whole fade-out. */
.cc-color-override--449665426.cc-window[class][class].cc-invisible, .cmp-theme--449665426.cc-window[class][class].cc-invisible {
pointer-events: none !important;
}

.cc-color-override--449665426.cc-window.cc-floating.cc-bottom, .cmp-theme--449665426.cc-window.cc-floating.cc-bottom {
bottom: 16px;
}

.cc-color-override--449665426.cc-window.cc-floating.cc-right, .cmp-theme--449665426.cc-window.cc-floating.cc-right {
right: 16px;
}

.cc-color-override--449665426.cc-window .cc-message-container, .cmp-theme--449665426.cc-window .cc-message-container {
padding: 0 !important;
}

/* Column so the policy link can be promoted above the paragraph and act as the
card's heading — the banner markup carries no title element, and `text.link`
is the only translated string that reads "Cookie Notice". */
.cc-color-override--449665426.cc-window .cc-message, .cmp-theme--449665426.cc-window .cc-message {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin: 0 !important;
}

.cc-color-override--449665426.cc-window .cc-message > p, .cmp-theme--449665426.cc-window .cc-message > p {
margin: 0 !important;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--brand-text-muted) !important;
}

.cc-color-override--449665426.cc-window .cc-message > a.cc-link, .cmp-theme--449665426.cc-window .cc-message > a.cc-link {
order: -1;
max-width: 100%;
padding-right: 32px;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 24px !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}

.cc-color-override--449665426.cc-window .cc-message > a.cc-link:hover, .cmp-theme--449665426.cc-window .cc-message > a.cc-link:hover {
color: var(--brand-accent) !important;
}

/* Absolute because .cc-close is a sibling of .cc-message-container, not of the
heading it sits beside; 16/16 lands it on the heading's 24px line box.
Only rendered when Banner Settings > "Show close button" is on. */
.cc-color-override--449665426.cc-window .cc-close.cc-close-banner-btn, .cmp-theme--449665426.cc-window .cc-close.cc-close-banner-btn {
box-sizing: border-box;
top: var(--brand-inset) !important;
right: var(--brand-inset) !important;
width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 4px 6px !important;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
opacity: 1 !important;
/* the SDK writes style.fill inline from the palette, so this needs !important */
fill: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cc-window .cc-close.cc-close-banner-btn:hover, .cmp-theme--449665426.cc-window .cc-close.cc-close-banner-btn:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--449665426.cc-window .cc-close.cc-close-banner-btn svg, .cmp-theme--449665426.cc-window .cc-close.cc-close-banner-btn svg {
width: 14px !important;
height: 14px !important;
}

/* [class][class] throughout this row: the vendor's layout rules are five classes
deep AND !important AND load later, so an equal-specificity override loses the
tie — most visibly its per-button `margin: 0 8px 8px 0`, which lands on top of
row-gap and doubles the gap between the two actions. */
.cc-color-override--449665426.cc-window[class][class] .cc-compliance, .cmp-theme--449665426.cc-window[class][class] .cc-compliance {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 8px !important;
row-gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* Three tiers off one rule, and the Figma frames are exactly those three tiers:
labels that fit sit as equal halves (hybrid + rest-of-world), a label too wide
for a half takes the whole row (the US statutory phrase), a label too wide for
the row wraps. `white-space: normal` is load-bearing for tier three — the
vendor ships nowrap, and min-width:fit-content only clamps to the available
width when the text is allowed to wrap. Nothing here is pinned to a label
length, which matters because machine translation is on. */
.cc-color-override--449665426.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format, .cmp-theme--449665426.cc-window[class][class] .cc-compliance .cc-btn.cc-btn-format {
flex: 1 1 0 !important;
/* prefixed first: caniuse rates intrinsic sizing fully supported only from
Safari 16, and this row's whole three-tier behaviour hangs off it */
min-width: -webkit-fit-content !important;
min-width: fit-content !important;
width: auto !important;
margin: 0 !important;
box-sizing: border-box;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 8px 18px !important;
border-radius: var(--brand-radius-control) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-align: center;
white-space: normal !important;
border: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease, filter 0.15s ease, transform 0.12s ease-out;
}

/* Accept sits on the right in every frame that has one, but the SDK emits it
first on both the opt-in and the hybrid template. */
.cc-color-override--449665426.cc-window[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--449665426.cc-window[class][class] .cc-compliance .cc-btn.cc-allow {
order: 1;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-allow:hover, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-allow:hover {
filter: brightness(1.06);
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-allow:active, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-allow:active {
transform: scale(0.96);
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-deny, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-deny {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-deny:hover, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-deny:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-dismiss {
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-control-hover) !important;
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-deny:active, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-deny:active {
transform: scale(0.96);
}

.cc-color-override--449665426.cc-window .cc-compliance .cc-btn.cc-dismiss:active, .cmp-theme--449665426.cc-window .cc-compliance .cc-btn.cc-dismiss:active {
transform: scale(0.96);
}

/* Dismiss is the rejection on an opt-in banner (that type exposes no Deny) and
keeps full weight there; on an opt-out banner it sits beside a real Deny and
is only an acknowledgement, so Figma draws it as an outline. */
.cc-color-override--449665426.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--449665426.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss {
background: transparent !important;
box-shadow: inset 0 0 0 1px var(--brand-border) !important;
color: var(--brand-text) !important;
}

.cc-color-override--449665426.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover, .cmp-theme--449665426.cc-window.cc-type-opt-out .cc-compliance .cc-btn.cc-dismiss:hover {
background: var(--brand-tile) !important;
}

/* Button order is ours, not the SDK's: it emits allow-then-dismiss on the
opt-in template and deny-then-dismiss on the opt-out one, and the generic
.cc-color-override--449665426 `.cc-allow, .cmp-theme--449665426 `.cc-allow {order: 1 }` above is the rest-of-world default. Both stay below
the pref link's order: 2 so it keeps its own row. Of the three opt-out
templates only the US one renders two buttons — Default and No Banner Hidden
ship deny alone, where order is inert. */
.cc-color-override--449665426.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow, .cmp-theme--449665426.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-allow {
order: 0 !important;
}

.cc-color-override--449665426.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--449665426.cc-window.cc-type-opt-in[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 1 !important;
}

.cc-color-override--449665426.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss, .cmp-theme--449665426.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-dismiss {
order: 0 !important;
}

.cc-color-override--449665426.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny, .cmp-theme--449665426.cc-window.cc-type-opt-out[class][class] .cc-compliance .cc-btn.cc-deny {
order: 1 !important;
}

/* Full-width outline button on its own row, below the actions. */
.cc-color-override--449665426.cc-window[class][class] .cc-compliance .cmp-pref-link, .cmp-theme--449665426.cc-window[class][class] .cc-compliance .cmp-pref-link {
box-sizing: border-box;
order: 2 !important;
flex: 0 0 100% !important;
width: 100% !important;
min-height: 40px;
height: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center !important;
gap: 6px;
margin: 0 !important;
padding: 8px 18px !important;
background: transparent !important;
border: 1px solid var(--brand-border) !important;
border-radius: var(--brand-radius-control) !important;
box-shadow: none !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cc-window .cc-compliance .cmp-pref-link:hover, .cmp-theme--449665426.cc-window .cc-compliance .cmp-pref-link:hover {
background: var(--brand-tile) !important;
}

.cc-color-override--449665426.cc-window .cmp-pref-link > span:first-child, .cmp-theme--449665426.cc-window .cmp-pref-link > span:first-child {
display: inline-flex;
align-items: center;
}

/* the icon ships at 15x15 with a viewBox, so a CSS size scales it cleanly */
.cc-color-override--449665426.cc-window .cmp-pref-link svg, .cmp-theme--449665426.cc-window .cmp-pref-link svg {
width: 20px !important;
height: 20px !important;
}

.cc-color-override--449665426.cc-window .cmp-pref-link svg path, .cmp-theme--449665426.cc-window .cmp-pref-link svg path {
fill: currentColor;
}

.cc-color-override--449665426.cc-window .cmp-pref-link svg rect, .cmp-theme--449665426.cc-window .cmp-pref-link svg rect {
fill: currentColor;
}

.cc-color-override--449665426.cc-window .cmp-pref-link svg circle, .cmp-theme--449665426.cc-window .cmp-pref-link svg circle {
fill: currentColor;
}

/* ====================  PREFERENCE CENTER — LIST  ========================== */

/* .cmp-body is itself the fixed overlay; ships at black/20, ours matches
Dialog.Overlay in src/shared/ui/modal-v2.tsx */
.cc-color-override--449665426.cmp-body.show-modal, .cmp-theme--449665426.cmp-body.show-modal {
background-color: rgba(0, 0, 0, 0.65) !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal, .cmp-theme--449665426.cmp-body .cmp-modal {
box-sizing: border-box;
font-family: var(--brand-font);
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: var(--brand-surface) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
box-shadow: none !important;
max-width: 640px !important;
}

/* the vendor sets overflow:unset on this variant, so the square footer corners
poke out of the rounded card */
.cc-color-override--449665426.cmp-body .cmp-modal.f-cmp-fixed-footer, .cmp-theme--449665426.cmp-body .cmp-modal.f-cmp-fixed-footer {
overflow: hidden !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__body, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__body {
padding: var(--brand-inset) !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__header, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
padding: 0 !important;
margin: 0 0 8px !important;
border-bottom: 0 !important;
}

/* Figma's header is title + close only. */
.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__logo, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__logo {
display: none !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__title, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__title {
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__close, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__close {
box-sizing: border-box;
position: static !important;
order: 3;
margin-left: auto !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
padding: 4px 6px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 99px !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--brand-text) !important;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__close:hover, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__close:hover {
background-color: var(--brand-control) !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__close svg, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__close svg {
width: 14px !important;
height: 14px !important;
fill: currentColor;
}

/* the tab shell insets its content by 4px and pushes it down 24px, which widens
the 16px body rail to 20px and turns the 8px title/intro gap into 32px */
.cc-color-override--449665426.cmp-body .cmp-modal .cmp-horizontal-tabs__content, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-horizontal-tabs__content {
margin: 0 !important;
padding: 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__sub-title, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__sub-title {
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__sub-title p, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__sub-title p {
margin: 0 !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__sub-title a, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__sub-title a {
color: var(--brand-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}

/* Figma omits the bulk controls; kept because removing a one-click reject-all
from an opt-in CMP is a compliance regression, restyled as chips to match. */
.cc-color-override--449665426.cmp-body .cmp-modal .accept-reject-all, .cmp-theme--449665426.cmp-body .cmp-modal .accept-reject-all {
position: relative;
display: flex !important;
align-items: center;
gap: 8px;
height: auto !important;
margin: 0 0 var(--brand-gap) !important;
padding: 0 !important;
}

/* the live region announcing "all selected/unselected" is a sibling of the two
chips; the vendor hides it with height:0, which stops costing anything once
the row above is a flex container, so it eats width the moment it gets text.
Clipped rather than display:none so it stays in the accessibility tree. */
.cc-color-override--449665426.cmp-body .cmp-modal .accept-reject-all .sr-action-message, .cmp-theme--449665426.cmp-body .cmp-modal .accept-reject-all .sr-action-message {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-link-btn, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-link-btn {
box-sizing: border-box;
flex: 0 0 auto;
white-space: nowrap;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cmp-body .cmp-link-btn:hover, .cmp-theme--449665426.cmp-body .cmp-link-btn:hover {
background-color: var(--brand-control-hover) !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-list, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-list {
display: flex !important;
flex-direction: column;
gap: 8px;
margin: 0 !important;
}

/* Two-row grid so the description runs the full tile width instead of indenting
under the label, as the Figma tile does. */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile {
box-sizing: border-box;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center !important;
column-gap: 12px;
row-gap: 8px;
margin: 0 !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

/* pinned to the label's first line rather than centred on the row: identical at
one line (24px label, 16px switch), correct when a long label wraps */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:first-child {
grid-area: 1 / 1;
align-self: start;
margin-top: 4px;
}

/* display:contents lifts h2 / p / decline-text into the tile grid; the vendor
uses this wrapper only for the category data attribute, never for painting. */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-content {
display: contents !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content h2, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content h2 {
grid-area: 1 / 2;
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content > p, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content > p {
grid-area: 2 / 1 / 3 / 4;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-decline-text {
grid-area: 3 / 1 / 4 / 4;
}

/* The vendor appends this one only to a gpc_excluded category, so it is the one
tile child that can arrive unplaced — and column 1 is `auto`, so auto-placing
it there sizes that track to its text and collapses the minmax(0, 1fr) column
the label lives in, leaving the label 0px wide and wrapping over Learn more.
Row is left to auto-placement rather than pinned: it follows .cmp-decline-text
when there is one and takes row 3 when there is not, instead of skipping an
empty row and doubling the gap. */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile-content > .cmp-tabs__gpc-message {
grid-column: 1 / -1;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile > .cmp-list-tile-action:last-child {
grid-area: 1 / 3;
justify-self: end;
align-self: start;
}

/* The chevron button is the "Learn more" chip; the icon has no text node, so the
label comes from --brand-learn-more. */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button {
box-sizing: border-box;
height: 24px !important;
min-width: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
cursor: pointer;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button::before {
content: var(--brand-learn-more);
padding: 0 6px;
font-family: var(--brand-font);
font-size: 12px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* the chevron ships 16x16 with NO viewBox, so a CSS width crops it instead of
scaling; transform + negative margin gets a 12px glyph in a 12px box */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-list-tile .cmp-list-tile-button svg {
width: 16px !important;
height: 16px !important;
margin: -2px !important;
transform: scale(0.75);
fill: currentColor !important;
}

/* ==========================  SWITCH  ===================================== */

/* Retracked from the vendor's 56x24 to Figma's 28x16. min-width must be reset
alongside width — the vendor sets min-width:48px on the switch, and min-width
clamps width however important it is. Knob travel = 28 - 12 - 2*2 = 12px. */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch {
width: 28px !important;
min-width: 28px !important;
height: 16px !important;
margin: 0 !important;
}

/* The hidden input is the hit target, and 28x16 is well under the 44px minimum,
so it is inflated past the track without moving the painted switch.

appearance:none is load-bearing, not cosmetic. A checkbox that keeps its
native appearance is a replaced-like box, so `width: auto` resolves to the
intrinsic 12x12 and the left/right insets are ignored — WebKit follows that
rule, Chromium honours the insets anyway. At 12x12 the input lands entirely
behind the slider span, which paints later, leaving no clickable pixel: in
Safari the category toggles were inert, not merely small.

Longhands rather than the `inset` shorthand because the vendor sets top/left
on this input from a later sheet; the un-!important shorthand lost those two
sides, which anchored the target to the track's top-left instead of centring
it (32x28 rather than 36x40). */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch input, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch input {
position: absolute;
-webkit-appearance: none;
appearance: none;
top: -12px !important;
right: -4px !important;
bottom: -12px !important;
left: -4px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
z-index: 1;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch__slider, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch__slider {
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background-color: var(--brand-switch-off) !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch__slider::after, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch__slider::after {
top: 2px !important;
left: 2px !important;
width: 12px !important;
height: 12px !important;
border-radius: 8px !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider {
background-color: var(--brand-accent) !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch input:checked + .cmp-switch__slider::after {
transform: translateX(12px) !important;
border: 1px solid rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.32), 0 1px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

/* always-on categories ship at opacity .6, which turns the lime muddy olive */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch.readonly .cmp-switch__slider {
opacity: 1 !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch.readonly, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch.readonly {
cursor: default;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch.readonly input, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch.readonly input {
cursor: default;
}

/* the vendor's tick glyph is sized for a 24px track and overflows a 16px one */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch__slider svg, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch__slider svg {
display: none !important;
}

/* the vendor's focus rule adds `margin: 1px 0`, which nudges the whole track */
.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-switch input:focus + .cmp-switch__slider {
margin: 0 !important;
}

/* ===============  PREFERENCE CENTER — CATEGORY DETAIL  =================== */

/* One 16px text rail: the modal body already insets 16px, so the vendor's extra
padding here has to go or the category heading sits further in than the
section headings below it. */
.cc-color-override--449665426.cmp-body .cmp-details-view, .cmp-theme--449665426.cmp-body .cmp-details-view {
padding: 0 !important;
}

/* Same tile as the list rows, and a flex column purely to reorder: the vendor
emits [title+switch][decline-text][description], which states the consequence
before the thing it follows from. */
.cc-color-override--449665426.cmp-body .cmp-details-header, .cmp-theme--449665426.cmp-body .cmp-details-header {
box-sizing: border-box;
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin: 0 0 var(--brand-gap) !important;
padding: var(--brand-inset) !important;
border: 0 !important;
border-radius: var(--brand-radius-surface) !important;
background-color: var(--brand-tile) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-header .cmp-header-layout, .cmp-theme--449665426.cmp-body .cmp-details-header .cmp-header-layout {
order: 1;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
margin: 0 !important;
}

/* the switch precedes the label in the design and follows it in the markup */
.cc-color-override--449665426.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch, .cmp-theme--449665426.cmp-body .cmp-details-header .cmp-header-layout .cmp-switch {
order: -1;
margin: 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-header h1, .cmp-theme--449665426.cmp-body .cmp-details-header h1 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-header > p, .cmp-theme--449665426.cmp-body .cmp-details-header > p {
order: 2;
margin: 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-header > .cmp-decline-text, .cmp-theme--449665426.cmp-body .cmp-details-header > .cmp-decline-text {
order: 3;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-decline-text, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-decline-text {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--449665426.cmp-body.cmp-multi-level .cmp-tabs__gpc-message, .cmp-theme--449665426.cmp-body.cmp-multi-level .cmp-tabs__gpc-message {
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background-color: transparent !important;
font-size: 14px !important;
line-height: 20px !important;
color: var(--brand-text-faint) !important;
}

/* "‹ Back" is the same chip as "Learn more". :not(.hidden) is load-bearing — the
vendor toggles .hidden to swap the header between title and Back, and its rule
is a plain display:none that an unconditional display:...!important here would
beat, leaving Back stranded on the list where it has nothing to return to. */
.cc-color-override--449665426.cmp-body .cmp-modal .cmp-back-button:not(.hidden), .cmp-theme--449665426.cmp-body .cmp-modal .cmp-back-button:not(.hidden) {
box-sizing: border-box;
height: 24px !important;
display: inline-flex !important;
align-items: center;
gap: 2px;
margin: 0 !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: var(--brand-radius-chip) !important;
background-color: var(--brand-control) !important;
color: var(--brand-text) !important;
font-family: var(--brand-font);
font-size: 12px !important;
font-weight: 500 !important;
line-height: 16px !important;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-back-button:hover, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-back-button:hover {
background-color: var(--brand-control-hover) !important;
}

/* same no-viewBox crop as the tile chevron, from a 24x24 canvas */
.cc-color-override--449665426.cmp-body .cmp-modal .cmp-back-button svg, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-back-button svg {
width: 24px !important;
height: 24px !important;
margin: -6px !important;
transform: scale(0.5);
fill: currentColor;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-back-button span, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-back-button span {
padding: 0 4px 0 2px !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion {
padding: 0 !important;
margin: var(--brand-gap) 0 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion > h2, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion > h2 {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion > p, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion > p {
margin: 8px 0 0 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-muted) !important;
}

/* the vendor's divider is `1px solid var(--prefFooterColor)`, and we point that
token at the surface colour, so every divider painted invisibly */
.cc-color-override--449665426.cmp-body .cmp-accordion__item, .cmp-theme--449665426.cmp-body .cmp-accordion__item {
border-bottom: 1px solid var(--brand-border) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__header, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__header {
padding: 12px 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__header > div, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__header > div {
padding: 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__item > .cmp-accordion__header > svg {
width: 20px;
height: 20px;
fill: currentColor;
opacity: 0.55;
transition: opacity 0.15s ease;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__item:hover > .cmp-accordion__header > svg {
opacity: 1;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__title, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__title {
padding: 0 24px 0 0 !important;
font-size: 16px !important;
line-height: 24px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--brand-text) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__sub-title, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__sub-title {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
}

/* the row's click target is an absolutely-positioned transparent button over the
top of the row, which swallows this link. Lift the <a> only — its wrapper spans
the full row and lifting that would swallow the row's own toggle. */
.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__header a, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__header a {
position: relative;
z-index: 1;
padding: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
letter-spacing: 0.1px !important;
color: var(--brand-text-dim) !important;
text-decoration: none !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__header a:hover, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__header a:hover {
color: var(--brand-text) !important;
text-decoration: underline !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__content, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__content {
padding: 0 0 12px !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion {
padding: 2px 12px !important;
margin: 0 0 4px !important;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background-color: var(--brand-tile) !important;
box-shadow: none !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__content > .cmp-accordion > .cmp-accordion__item:last-child {
border-bottom: 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-accordion__content .cmp-accordion__title {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
font-size: 13px !important;
line-height: 20px !important;
font-weight: 500 !important;
}

/* each meta row ships with an opaque --prefBodyColor fill and a negative
horizontal margin, which paints a darker panel behind the table */
.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-cookie-info, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-cookie-info {
margin: 0 !important;
background-color: transparent !important;
font-size: 12px !important;
line-height: 18px !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-cookie-head, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-cookie-head {
width: 108px !important;
padding: 3px 0 !important;
font-weight: 400 !important;
color: var(--brand-text-faint) !important;
}

.cc-color-override--449665426.cmp-body .cmp-details-view .cmp-cookie-text, .cmp-theme--449665426.cmp-body .cmp-details-view .cmp-cookie-text {
padding: 3px 0 3px 12px !important;
color: var(--brand-text-dim) !important;
}

/* ==========================  FOOTER  ===================================== */

/* Figma has no footer bar — just the save button in the card's bottom-right.
The surface colour stays because the footer is sticky over a scrolling list. */
.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer {
background-color: var(--brand-surface) !important;
border-top: 0 !important;
border-radius: 0 0 var(--brand-radius-surface) var(--brand-radius-surface);
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-logo-wrapper {
display: none !important;
}

/* flex-direction is load-bearing: the vendor turns this wrapper into a column at
narrow widths, which silently reinterprets justify-content as vertical and
centres the save button instead of right-aligning it. */
.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px;
padding: 0 var(--brand-inset) var(--brand-inset) !important;
background-color: transparent !important;
border-top: 0 !important;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-accent) !important;
color: var(--brand-on-accent) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
transition: filter 0.15s ease, transform 0.12s ease-out;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:hover {
filter: brightness(1.06);
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-save-btn:active {
transform: scale(0.96);
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn {
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--brand-radius-control) !important;
background: var(--brand-control) !important;
color: var(--brand-text) !important;
box-shadow: none !important;
font-family: var(--brand-font);
font-size: 14px !important;
font-weight: 600 !important;
line-height: 16px !important;
text-decoration: none !important;
transition: background-color 0.15s ease;
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-decline-btn:hover {
background: var(--brand-control-hover) !important;
}

/* ==========================  FOCUS  ====================================== */

/* The vendor rings plain :focus with !important on every descendant, so a mouse
click leaves a persistent outline. Worse, it gives each category heading
tabindex="-1" and focuses it programmatically on entering the detail view,
drawing a lime box around a heading that cannot be clicked or tabbed to.
Long selectors on purpose: the vendor rings from '.cmp-multi-level * :focus'
and its sheet loads after this file, so a short selector ties and loses. */
.cc-color-override--449665426.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible), .cmp-theme--449665426.cmp-body.f-pref-sdk-banner.cmp-multi-level * :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--449665426.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible), .cmp-theme--449665426.cmp-body.f-pref-sdk-banner :focus:not(:focus-visible) {
outline: none !important;
}

.cc-color-override--449665426.cc-window.cc-floating :focus:not(:focus-visible), .cmp-theme--449665426.cc-window.cc-floating :focus:not(:focus-visible) {
outline: none !important;
}

/* :focus-visible does NOT help here — Chrome matches it when focus moves
programmatically, which is exactly how the SDK focuses this heading. Verify
through a real click into a category; a manual .focus() behaves differently
and will report the ring as already suppressed. */
.cc-color-override--449665426.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus, .cmp-theme--449665426.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus {
outline: none !important;
}

.cc-color-override--449665426.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible, .cmp-theme--449665426.cmp-body.cmp-theme.f-pref-sdk-banner.cmp-multi-level .cmp-details-view .cmp-details-header h1:focus-visible {
outline: none !important;
}

.cc-color-override--449665426.cc-window.cc-floating :focus-visible, .cmp-theme--449665426.cc-window.cc-floating :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

.cc-color-override--449665426.cmp-body.f-pref-sdk-banner :focus-visible, .cmp-theme--449665426.cmp-body.f-pref-sdk-banner :focus-visible {
outline: 2px solid var(--brand-accent) !important;
outline-offset: 2px;
}

/* ==========================  MOBILE  ===================================== */

@media (max-width: 640px) {
.cc-window,
.cc-color-override--449665426.cmp-body, .cmp-theme--449665426.cmp-body {
--brand-gap: 16px;
}

/* iOS keeps the browser chrome inside the layout viewport, so a flat 12px can
park the action row under the toolbar or the home indicator. max() holds the
12px floor where the inset is 0. */
.cc-color-override--449665426.cc-window[class][class].cc-floating, .cmp-theme--449665426.cc-window[class][class].cc-floating {
width: auto !important;
max-width: none !important;
left: max(12px, env(safe-area-inset-left, 0px));
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.cc-color-override--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper, .cmp-theme--449665426.cmp-body .cmp-modal .cmp-modal__footer .cmp-btn-wrapper {
padding: 0 var(--brand-inset) var(--brand-inset) !important;
}
}