/* ============================================================
   Lazuli Management, CookieYes visual override (v2.2).

   File:        assets/css/cookieyes-override.css
   Purpose:     Restyle the CookieYes (cookie-law-info v3.4.2)
                consent banner, preferences modal, and revisit
                pill so they follow the canonical design system
                without extending it. Every value flows through
                var(--*) declared in tokens.css. Reject button
                recipe is documented as a derived fill of a
                §2.1 gap (see spec doc 2026-05-20-cookieyes-visual.md).
   Depends on:  tokens.css (canonical tokens) + base.css
                (global :focus-visible ring). Enqueue handle
                lazuli-tokens must load first; lazuli-base may
                load alongside. Philip wires the enqueue.
   Date:        2026-05-20 (v2.2)
   Author:      Mila
   Scope:       Selectors limited to .cky-* (CookieYes v3 namespace).

   v2 CHANGES (from Jonathan QA 2026-05-20-1310):
     1. Selector drift fixes per QA §3.2:
        .cky-banner-bottom         -> .cky-box-bottom-left
        .cky-preference-body       -> .cky-preference-body-wrapper
        .cky-preference-footer     -> .cky-prefrence-btn-wrapper (plugin typo preserved)
        .cky-btn-preferences-close -> .cky-btn-close
        .cky-revisit-consent       -> .cky-btn-revisit-wrapper + .cky-btn-revisit
        Dropped: .cky-modal-backdrop, .cky-btn-do-not-sell, .cky-revisit-bottom-right
     2. Targeted !important added on properties losing to plugin inline styles
        per QA §5.2. Each carries a per-occurrence comment naming the inline
        declaration it counters.
     3. Toggle switch block removed (CookieYes Lite v3.4.2 emits no .cky-switch
        elements; see spec §11 for restoration note on Pro upgrade path).
     4. New recipe added for .cky-btn-preferences (Save My Preferences in
        modal footer) using the primary CTA family (yellow / navy-ink / pill).

   v2.1 CHANGES (from user UAT 2026-05-20):
     Bug 1: Banner double background. .cky-box-bottom-left removed from
            the card-chrome rule (it is on the outer wrapper, not the
            card). Section 1 base rule + section 8 mobile padding rule
            both updated.
     Bug 2: Modal click-locked. Plugin inline-styles .cky-overlay to a
            very high z-index, painting it above .cky-preference-center
            and intercepting clicks. Forced .cky-overlay z-index to 0
            !important and .cky-preference-center z-index to 1 !important
            so the card paints above the scrim inside .cky-modal's
            stacking context.
     Bug 3: Description text styled as a card. .cky-preference-content-wrapper
            removed from the modal-card chrome rule (it is the inner
            description-text wrapper) and given an explicit
            chrome-stripping rule. .cky-preference-center chrome
            properties gated with !important so they win the cascade.
     Bug 4: Accordion chevrons broken. Section 10 restructured to match
            actual v3 DOM. .cky-accordion-item is now the flex row
            (owns padding); .cky-accordion-chevron is the 24px arrow
            wrapper; .cky-chevron-right is rendered as a CSS-border
            caret. Plugin's ::before glyph suppressed.

   v2.2 CHANGES (from parent-thread deep audit of preferences modal):
     Section A (cascade-wins on existing rules, !important added):
       A1 .cky-preference-title font-size + color + font-weight
       A2 .cky-preference-header padding
       A3 .cky-prefrence-btn-wrapper padding
       A4 .cky-preference-center color (cascade into descendants)
       A5 .cky-accordion-btn color + font-weight + letter-spacing + border-radius
       A6 .cky-btn-close height + line-height + display (hit-target floor)
     Section B (new rules for selectors with zero prior treatment):
       B1 .cky-show-desc-btn   (inline text-link recipe)
       B2 .cky-always-active   (§2.8 chip recipe, light-success bg)
       B3 .cky-audit-table     (paper-2 panel inside accordion)
       B4 .cky-empty-cookies-text (italic muted placeholder)
       B5 .cky-preference-content-wrapper p (explicit body-text recipe)
       B6 .cky-accordion-header-des (paragraph color + line-height fix)
       B7 .cky-modal background transparent (counter plugin inline white)
     Section C (off-grid / structural cleanups):
       C1 .cky-accordion-chevron margin (drop plugin 22px right)
       C2 .cky-accordion-wrapper border/margin (drop wrapper to prevent double-border)
       C3 .cky-accordion-item margin (counter plugin 10px top off-grid)
       C4 .cky-accordion-body padding (back on 4-pt grid + bottom padding)
     Section D (CTA button-size consistency):
       All four CTA buttons (.cky-btn-accept, .cky-btn-reject,
       .cky-btn-preferences, .cky-btn base) standardised to §2.1
       medium: padding 16px 24px, font-size 15px, min-height 52px.
       Customize stays as text link per Sam.
     Section E (.cky-preference-center width):
       flex-shrink: 0 + flex-grow: 0 so the card holds its
       min(760px, calc(100vw - 2 * var(--gutter))) inside .cky-modal's
       flex container instead of shrinking under cross-axis content.
     Section F (focus-ring fidelity, Jonathan §5.1):
       outline: 0 !important on every .cky-*:focus-visible variant
       so the plugin's focus styles cannot override the canonical
       two-color focus ring.
   ============================================================ */


/* ──────────────────────────────────────────────────────────
   1. BANNER CARD, base appearance.
   Layout values per locked decisions:
     desktop (>=1024)   floating bottom-left card
     sm/md (640..1023)  bottom-anchored centered card
     mobile (<640)      bottom card, full-bleed minus gutter

   Plugin emits .cky-consent-bar inside .cky-consent-container,
   and the bottom-left template adds .cky-box-bottom-left as a
   sibling layout class on the outer wrapper.
   ────────────────────────────────────────────────────────── */
.cky-consent-container {
	position: fixed;
	bottom: var(--gutter);
	left: var(--gutter);
	right: auto;
	width: min(420px, calc(100vw - 2 * var(--gutter)));
	max-width: calc(100vw - 2 * var(--gutter));
	z-index: 40;
	font-family: var(--font-body);
}

/* v2.1: only .cky-consent-bar (the inner card) carries chrome.
   .cky-box-bottom-left is a positional modifier on the outer
   .cky-consent-container; applying chrome to both painted a
   visible card-in-card with doubled padding + two shadows. */
.cky-consent-bar {
	background: var(--white) !important;            /* counter plugin default white-but-via-inline-style */
	border: var(--border-hairline) !important;      /* counter plugin inline border (light-grey hairline default) */
	border-radius: var(--radius-card-lg) !important; /* counter plugin default 6px */
	box-shadow: var(--shadow-floating) !important;  /* counter plugin default soft drop shadow */
	padding: var(--space-5) var(--space-6) !important; /* counter plugin default 20px 26px */
	color: var(--ink);
	transition:
		background var(--duration-fast) var(--ease-base),
		box-shadow var(--duration-fast) var(--ease-base);
}

/* Title and body copy inside the banner.
   Plugin emits inline color:rgb(33,33,33); we counter with --ink. */
.cky-consent-bar .cky-title,
.cky-box-bottom-left .cky-title {
	margin: 0 0 var(--space-2) 0;
	color: var(--ink) !important;                   /* counter plugin inline color (dark-grey title default) */
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-normal);
}

.cky-consent-bar .cky-notice-des,
.cky-box-bottom-left .cky-notice-des,
.cky-consent-bar .cky-notice-des p,
.cky-box-bottom-left .cky-notice-des p {
	margin: 0;
	color: var(--muted) !important;                 /* counter plugin inline color (dark-grey body default) */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: var(--leading-relaxed);
}

.cky-consent-bar .cky-notice-des a,
.cky-box-bottom-left .cky-notice-des a {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.cky-consent-bar .cky-notice-des a:hover,
.cky-box-bottom-left .cky-notice-des a:hover {
	color: var(--navy-deep);
}


/* ──────────────────────────────────────────────────────────
   2. BANNER ACTION ROW.
   Desktop default: Accept and Reject on one row, Customize as
   a text link to the right. Mobile rule in section 8 stacks
   them per the locked decision.
   ────────────────────────────────────────────────────────── */
.cky-notice-btn-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
	align-items: center;
}


/* ──────────────────────────────────────────────────────────
   3. BUTTONS, base recipe.
   All variants share radius, padding floor, focus pattern,
   and motion. Per §2.1 medium button (12 / 22 raw px allowed).
   ────────────────────────────────────────────────────────── */
.cky-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 16px 24px;
	min-height: 52px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-normal);
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-base),
		color var(--duration-fast) var(--ease-base),
		border-color var(--duration-fast) var(--ease-base),
		box-shadow var(--duration-fast) var(--ease-base);
}

.cky-btn:focus-visible {
	outline: 0 !important;                          /* counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
}


/* ──────────────────────────────────────────────────────────
   4. Accept button, §2.1 primary.
   Plugin inline style renders this as blue (rgb(24,99,220)) on
   white with 2px solid blue border and 16/24 padding. All four
   must be overridden to land the canonical yellow/navy-ink pair.
   ────────────────────────────────────────────────────────── */
.cky-btn-accept {
	background: var(--yellow) !important;           /* counter plugin inline background-color (plugin-default blue) */
	color: var(--navy-ink) !important;              /* counter plugin inline color (white-on-blue default) */
	border: 1px solid var(--yellow) !important;     /* counter plugin inline border (2px solid plugin-default blue) */
	padding: 16px 24px !important;                  /* §2.1 medium; v2.2 standardised across all CTAs */
	font-size: 15px !important;                     /* §2.1 medium font size; counter plugin default */
}

.cky-btn-accept:hover {
	background: var(--yellow-hover) !important;     /* counter plugin inline hover bg */
	border-color: var(--yellow-hover) !important;   /* keep border in sync with bg */
}


/* ──────────────────────────────────────────────────────────
   5. Reject button, derived recipe filling §2.1 gap.
   Outlined neutral pattern: transparent fill, line-strong
   border, ink-2 text. Locked by Sam on 2026-05-20.
   Plugin inline renders this as blue-on-white-with-blue-border.
   ────────────────────────────────────────────────────────── */
.cky-btn-reject {
	background: transparent !important;             /* counter plugin inline background-color */
	color: var(--ink-2) !important;                 /* counter plugin inline color (plugin-default blue) */
	border: 1px solid var(--line-strong) !important; /* counter plugin inline border (2px solid plugin-default blue) */
	padding: 16px 24px !important;                  /* §2.1 medium; v2.2 standardised across all CTAs */
	font-size: 15px !important;                     /* §2.1 medium font size; counter plugin default */
}

.cky-btn-reject:hover {
	background: var(--paper-2) !important;          /* counter plugin inline hover bg */
	border-color: var(--line-strong) !important;    /* keep neutral border on hover */
	color: var(--ink) !important;                   /* deepen text on hover */
}


/* ──────────────────────────────────────────────────────────
   6. Customize / preferences trigger, rendered as a text link.
   Plugin emits this as a third pill-shaped button with blue
   border and 6px radius. We must flatten it to a text link:
   transparent bg, no border, no padding pill, navy color,
   underline on hover. Border-radius forced to 0 so any focus
   ring sits on a clean rectangle (with --radius-xs in :focus-visible).
   ────────────────────────────────────────────────────────── */
.cky-btn-customize {
	background: transparent !important;             /* counter plugin inline background-color */
	border: 0 !important;                           /* counter plugin inline border (2px solid plugin-default blue) */
	border-radius: 0 !important;                    /* counter plugin default 6px radius */
	padding: var(--space-2) var(--space-1) !important; /* counter plugin default 16px 24px */
	color: var(--navy) !important;                  /* counter plugin inline color */
	font-weight: 600 !important;                    /* counter plugin default weight 400 */
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	text-decoration: none;
	cursor: pointer;
	margin-left: auto;
	transition: color var(--duration-fast) var(--ease-base);
}

.cky-btn-customize:hover {
	color: var(--navy-deep) !important;             /* counter plugin inline hover color */
	background: transparent !important;             /* prevent plugin hover from drawing a pill */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.cky-btn-customize:focus-visible {
	outline: 0 !important;                          /* counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
	border-radius: var(--radius-xs);
}


/* ──────────────────────────────────────────────────────────
   7. Disabled state (any .cky-btn variant).
   ────────────────────────────────────────────────────────── */
.cky-btn[aria-disabled="true"],
.cky-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}


/* ──────────────────────────────────────────────────────────
   8. Responsive layout.
   sm/md tier centers the card; mobile tier stacks buttons
   with Accept full-width first, then Reject and Customize
   side-by-side underneath.
   ────────────────────────────────────────────────────────── */

/* sm and md: bottom-anchored centered card */
@media (max-width: 1023.98px) {
	.cky-consent-container {
		left: 50%;
		right: auto;
		bottom: var(--gutter);
		transform: translateX(-50%);
		width: min(680px, calc(100% - 2 * var(--gutter)));
	}
}

/* mobile: full-bleed minus gutter, stacked actions */
@media (max-width: 639.98px) {
	.cky-consent-container {
		left: var(--gutter);
		right: var(--gutter);
		bottom: var(--gutter);
		transform: none;
		width: auto;
		max-width: none;
	}

	/* v2.1: outer wrapper dropped from this rule per Bug 1. */
	.cky-consent-bar {
		padding: var(--space-5) !important;         /* counter plugin default mobile padding */
	}

	.cky-notice-btn-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
	}

	/* Accept spans both columns and sits on top. */
	.cky-btn-accept {
		grid-column: 1 / -1;
		order: 1;
		width: 100%;
	}

	.cky-btn-reject {
		order: 2;
		width: 100%;
	}

	.cky-btn-customize {
		order: 3;
		width: 100%;
		margin-left: 0;
		justify-self: stretch;
	}
}


/* ──────────────────────────────────────────────────────────
   9. PREFERENCES MODAL.
   Centered on every viewport, max-width 760 with gutter,
   max-height clamped with internal body scroll.
   Scrim derived from the --ink value at 0.55 alpha.
   ────────────────────────────────────────────────────────── */
.cky-modal,
.cky-modal.cky-modal-open {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	font-family: var(--font-body);
	background: transparent !important;             /* counter plugin inline background (white modal container painted behind overlay) */
}

/* Scrim: plugin default is solid black; counter to the canonical
   ink-based translucent scrim derived from the --ink value.
   v2.1: z-index forced below the modal card (Bug 2). Plugin
   inline-styles overlay to z-index ~99999999 which painted above
   .cky-preference-center and intercepted all clicks (close, action
   buttons, scrim). Both overlay and card sit inside .cky-modal so
   the high overlay z-index relative to the page is preserved. */
.cky-overlay {
	position: fixed;
	inset: 0;
	background: rgba(16, 45, 65, 0.55) !important;  /* counter plugin inline background (solid-black scrim default) */
	z-index: 0 !important;                          /* counter plugin inline z-index (~99999999) so card paints above */
}

/* v2.1: .cky-preference-content-wrapper removed from this rule
   per Bug 3. It is an inner description-text wrapper, not the
   modal card. Card chrome here is gated by !important so the
   modal card wins against plugin defaults (Bug 3 second cause). */
.cky-preference-center {
	position: relative;
	background: var(--white) !important;            /* counter plugin inline background */
	color: var(--ink) !important;                   /* v2.2 A4: counter plugin inline color cascading into descendants */
	width: min(760px, calc(100vw - 2 * var(--gutter))) !important; /* counter plugin default width */
	max-height: min(85vh, 720px) !important;        /* counter plugin default max-height */
	border-radius: var(--radius-card-lg) !important; /* counter plugin default 6px */
	box-shadow: var(--shadow-floating) !important;  /* counter plugin default soft shadow */
	border: var(--border-hairline) !important;      /* counter plugin default border */
	display: flex !important;                       /* counter plugin default display */
	flex-direction: column !important;              /* counter plugin default flex-direction */
	overflow: hidden !important;                    /* counter plugin default overflow */
	z-index: 1 !important;                          /* counter plugin inline z-index; paints above .cky-overlay (Bug 2) */
	flex-shrink: 0 !important;                      /* v2.2 E: hold specified width inside .cky-modal flex container */
	flex-grow: 0 !important;                        /* v2.2 E: prevent flex container from sizing the card */
	flex-basis: auto !important;                    /* v2.2.1: counter plugin flex: 1 1 0px; basis: 0 was collapsing the card to 0px width regardless of width: 760px */
}

/* v2.1: inner content wrapper is NOT a card. Strip any plugin
   chrome it may have inherited so the description paragraph
   reads as text inside the body, not as a nested card (Bug 3). */
.cky-preference-content-wrapper {
	background: transparent !important;             /* counter any plugin background-color */
	border: 0 !important;                           /* counter any plugin border */
	border-radius: 0 !important;                    /* counter any plugin border-radius */
	box-shadow: none !important;                    /* counter any plugin box-shadow */
	width: auto;
	max-height: none;
	overflow: visible;
}

/* v2.2 B5: description paragraphs inside the content wrapper.
   Match the body wrapper text recipe explicitly so descendants
   don't drift on parent color changes. */
.cky-preference-content-wrapper p {
	color: var(--ink-2) !important;                 /* counter plugin inline color cascading from .cky-preference-center */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	margin: 0 0 var(--space-3) 0;
}

.cky-preference-content-wrapper p:last-child {
	margin-bottom: 0;
}

.cky-preference-header {
	padding: var(--space-5) var(--space-6) !important; /* v2.2 A2: counter plugin default 22px 24px */
	border-bottom: var(--border-hairline);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.cky-preference-title,
.cky-preference-header .cky-preference-title,
.cky-preference-header h2,
.cky-preference-header h3 {
	margin: 0;
	color: var(--ink) !important;                   /* v2.2 A1: counter plugin inline color (dark-grey default) */
	font-family: var(--font-display);
	font-size: var(--text-xl) !important;           /* v2.2 A1: counter plugin default 18px */
	font-weight: 600 !important;                    /* v2.2 A1: counter plugin default 700 */
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
}

/* Modal dismiss button. Plugin emits .cky-btn-close (renamed from
   v1 .cky-btn-preferences-close). v2.2 A6: plugin's line-height:0
   collapses height; force display + height + line-height so the
   button hits WCAG SC 2.5.8 / HIG 44pt and the inner img centers. */
.cky-btn-close,
.cky-preference-header .cky-btn-close {
	background: transparent;
	border: 0;
	color: var(--muted);
	padding: var(--space-2);
	min-width: 44px;
	min-height: 44px;
	height: 44px !important;                        /* v2.2 A6: counter plugin line-height:0 collapsing height */
	width: 44px !important;                         /* v2.2 A6: match height so the hit target is square */
	line-height: 1 !important;                      /* v2.2 A6: counter plugin inline line-height:0 */
	display: inline-flex !important;                /* v2.2 A6: counter plugin default display so img centers */
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-circle);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-base),
		color var(--duration-fast) var(--ease-base);
}

.cky-btn-close:hover,
.cky-preference-header .cky-btn-close:hover {
	background: var(--paper-2);
	color: var(--ink);
}

.cky-btn-close:focus-visible {
	outline: 0 !important;                          /* counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
}

/* Modal scrollable body wrapper (v3 plugin class: -body-wrapper). */
.cky-preference-body-wrapper {
	padding: var(--space-5) var(--space-6);
	overflow-y: auto;
	flex: 1 1 auto;
	color: var(--ink-2);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.cky-preference-body-wrapper p {
	color: var(--ink-2);
}

/* Modal footer action row. Plugin class carries the typo
   'prefrence' (missing 'e'). Preserved verbatim, do NOT correct. */
.cky-prefrence-btn-wrapper {
	padding: var(--space-4) var(--space-6) !important; /* v2.2 A3: counter plugin default 22px 24px */
	border-top: var(--border-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: flex-end;
	background: var(--paper);
}


/* ──────────────────────────────────────────────────────────
   10. ACCORDION rows for cookie categories.

   v2.1 restructure (Bug 4): DOM is
     .cky-accordion
       > .cky-accordion-item            (flex row, owns padding)
           > .cky-accordion-chevron     (positioned arrow wrapper)
               > i.cky-chevron-right    (the actual arrow glyph)
           > .cky-accordion-header-wrapper
               > .cky-accordion-header  (title + always-active badge)
               > .cky-accordion-header-des
       > .cky-accordion-body
   v1 and v2 styled .cky-accordion-header as the flex row, which
   broke chevron placement. v2.1 moves padding + flex onto
   .cky-accordion-item and renders the chevron as a CSS arrow.
   ────────────────────────────────────────────────────────── */
/* v2.2 C2: only the individual .cky-accordion carries the border.
   .cky-accordion-wrapper had its own border and margin which
   double-stacked. Wrapper is now a plain container. */
.cky-accordion {
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
	background: var(--white);
	overflow: hidden;
	transition: box-shadow var(--duration-fast) var(--ease-base);
}

.cky-accordion-wrapper {
	border: 0 !important;                           /* v2.2 C2: counter plugin inline border that double-stacked with .cky-accordion */
	border-radius: 0 !important;                    /* v2.2 C2: counter plugin default radius */
	margin: 0 !important;                           /* v2.2 C2: counter plugin default 0 0 10px so children own spacing */
	background: transparent !important;             /* v2.2 C2: wrapper is structural only */
}

/* The actual row container. row-reverse puts chevron on the right
   per common accordion convention. */
.cky-accordion-item {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	margin: 0 !important;                           /* v2.2 C3: counter plugin default 10px 0 0 0 off-grid margin */
	cursor: pointer;
	background: var(--white);
	transition: background var(--duration-fast) var(--ease-base);
}

.cky-accordion-item:hover {
	background: var(--paper-2);
}

.cky-accordion-item:focus-visible {
	outline: 0;
	outline-offset: 0;
	box-shadow: var(--focus-ring);
}

/* Chevron wrapper, sized to 24px square so the arrow has room to
   draw. Rotates 90deg when its parent .cky-accordion carries the
   plugin's .cky-accordion-active class. */
.cky-accordion-chevron {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 2px 0 0 0 !important;                   /* v2.2 C1: counter plugin default 2px 22px 0 0 (22px right is plugin garbage) */
	color: var(--muted);
	transition: transform var(--duration-fast) var(--ease-base);
}

.cky-accordion.cky-accordion-active .cky-accordion-chevron {
	transform: rotate(90deg);
}

/* Replace the plugin's hairline ::before glyph with a clean CSS
   arrow (8px square with two borders rotated -45deg = right caret).
   Plugin's own ::before is suppressed. */
.cky-chevron-right {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.cky-chevron-right::before {
	content: none !important;                       /* counter plugin ::before content drawing a separate tiny glyph */
}

/* Header wrapper takes the remaining row width. min-width:0 lets
   long category titles wrap inside the flex item. */
.cky-accordion-header-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/* Header is now a content block, not the flex row. Padding moved
   to .cky-accordion-item above. Keep flex here for inline layout
   of the title + Always-Active badge. */
.cky-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: var(--leading-snug);
}

.cky-accordion-header:focus-visible {
	outline: 0 !important;                          /* counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
}

/* v2.2 A5: the actual category-name button inside the header.
   Plugin emits this as a pill-shaped button with letter-spacing
   and weight 700. We flatten it to a heading-like text element. */
.cky-accordion-btn {
	background: transparent !important;             /* counter plugin inline background */
	border: 0 !important;                           /* counter plugin inline border */
	border-radius: 0 !important;                    /* counter plugin default 9999px pill on a transparent button */
	padding: 0 !important;                          /* counter plugin default padding */
	color: var(--ink) !important;                   /* counter plugin inline color (dark-grey default) */
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600 !important;                    /* counter plugin default 700 */
	letter-spacing: -0.005em !important;            /* counter plugin default +0.16px positive tracking */
	line-height: var(--leading-snug);
	text-align: left;
	cursor: pointer;
}

.cky-accordion-btn:focus-visible {
	outline: 0 !important;                          /* counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
	border-radius: var(--radius-xs) !important;     /* small radius rect for clean focus ring */
}

/* v2.2 B6: small description line under each category name in
   the accordion. Plugin emits this in dark-grey with line-height
   24px on 14px text. Quieted to --muted and proper line-height. */
.cky-accordion-header-des {
	margin: var(--space-2) 0 var(--space-4) 0;
	color: var(--muted) !important;                 /* counter plugin inline color (dark-grey default) */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 400;
	line-height: var(--leading-relaxed);
}

.cky-accordion-header-des p {
	margin: 0;
	color: inherit;
}

.cky-accordion-body {
	padding: var(--space-3) var(--space-5) var(--space-4) !important; /* v2.2 C4: counter plugin default 0 22px (off-grid + no bottom) */
	color: var(--ink-2) !important;                 /* v2.2: counter plugin inline color */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	background: var(--paper);
	border-top: var(--border-hairline);
}


/* ──────────────────────────────────────────────────────────
   11. TOGGLE SWITCH, intentionally not styled.

   CookieYes Lite v3.4.2 emits no per-category toggle UI; only
   the Necessary "Always Active" badge is rendered. The Mila v1
   .cky-switch* rule block was dead code on this plugin tier
   (confirmed by Jonathan QA 2026-05-20, evidence folder
   exports/qa-evidence/2026-05-20-1310-cookieyes-jonathan-verify/).

   Block intentionally removed in v2. If the site upgrades to
   CookieYes Pro and per-category toggles appear, restore the v1
   recipe (off track: --bone-deep, on track: --success, knob:
   --white with --shadow-avatar, disabled: opacity 0.6).
   ────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────
   12. REVISIT PILL (post-consent floating trigger).
   v3 markup: outer wrapper carries .cky-btn-revisit-wrapper
   plus a positional modifier (.cky-revisit-bottom-left); inner
   element carries .cky-btn-revisit. Plugin inline-styles the
   wrapper as a 50%-radius circle in a plugin-default blue at
   bottom:15px, left:15px. We override all five inline properties.

   Strategy: style the wrapper as the pill, neutralize the inner
   button so the wrapper's pill shape is what shows.
   ────────────────────────────────────────────────────────── */
.cky-btn-revisit-wrapper.cky-revisit-bottom-left,
.cky-btn-revisit-wrapper {
	position: fixed !important;                     /* preserve fixed positioning */
	left: var(--gutter) !important;                 /* counter plugin inline left:15px */
	right: auto !important;                         /* counter any plugin right-side inline */
	bottom: var(--gutter) !important;               /* counter plugin inline bottom:15px */
	z-index: 40;
	background: var(--navy-ink) !important;         /* counter plugin inline background-color (plugin-default blue) */
	color: var(--white) !important;                 /* counter plugin inline color (white; consistent but explicit) */
	border: 0 !important;                           /* counter any plugin border */
	border-radius: var(--radius-pill) !important;   /* counter plugin default border-radius:50% (circle) */
	padding: 10px 16px !important;                  /* counter plugin default circular padding */
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--leading-snug);
	box-shadow: var(--shadow-floating) !important;  /* counter plugin default shadow */
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-base),
		box-shadow var(--duration-fast) var(--ease-base);
}

.cky-btn-revisit-wrapper.cky-revisit-bottom-left:hover,
.cky-btn-revisit-wrapper:hover {
	background: var(--navy-deep) !important;        /* counter plugin inline hover background */
	box-shadow: var(--shadow-hover) !important;     /* counter plugin default hover shadow */
}

.cky-btn-revisit-wrapper.cky-revisit-bottom-left:focus-visible,
.cky-btn-revisit-wrapper:focus-visible {
	outline: 0 !important;                          /* v2.2 F: counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles, retain canonical ring */
}

/* Inner button: neutralized so the wrapper's pill shape is what
   shows. The plugin's default hover-yellow on .cky-btn-revisit
   would otherwise paint over our navy-ink wrapper. */
.cky-btn-revisit {
	background: transparent !important;             /* counter plugin inline background-color */
	color: inherit !important;                      /* counter plugin inline color; inherit wrapper white */
	border: 0 !important;                           /* counter any inner border */
	border-radius: 0 !important;                    /* counter inner radius */
	padding: 0 !important;                          /* let wrapper own the padding */
	box-shadow: none !important;                    /* counter inner shadow */
	font: inherit;
	cursor: pointer;
}

.cky-btn-revisit:hover,
.cky-btn-revisit:focus,
.cky-btn-revisit:focus-visible {
	background: transparent !important;             /* counter plugin hover-yellow on inner button */
	color: inherit !important;
}


/* ──────────────────────────────────────────────────────────
   13. Save My Preferences button (modal footer).
   Plugin emits .cky-btn-preferences. Per Jonathan QA §3.3 and
   Sam v2 direction: use the primary CTA family (yellow / navy-ink /
   pill) to keep the modal's affirmative-action prominence
   consistent with the Accept button.
   ────────────────────────────────────────────────────────── */
.cky-btn-preferences {
	background: var(--yellow) !important;           /* counter plugin inline background-color (plugin-default blue) */
	color: var(--navy-ink) !important;              /* counter plugin inline color (white-on-blue default) */
	border: 1px solid var(--yellow) !important;     /* counter plugin inline border (2px solid plugin-default blue) */
	border-radius: var(--radius-pill) !important;   /* counter plugin default 6px */
	padding: 16px 24px !important;                  /* §2.1 medium; v2.2 standardised across all CTAs */
	font-family: var(--font-body);
	font-size: 15px !important;                     /* §2.1 medium font size; counter plugin default */
	font-weight: 600;
	line-height: var(--leading-snug);
	min-height: 52px;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-base),
		border-color var(--duration-fast) var(--ease-base),
		box-shadow var(--duration-fast) var(--ease-base);
}

.cky-btn-preferences:hover {
	background: var(--yellow-hover) !important;     /* counter plugin inline hover bg */
	border-color: var(--yellow-hover) !important;   /* keep border in sync */
}

.cky-btn-preferences:focus-visible {
	outline: 0 !important;                          /* v2.2 F: counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
}


/* ──────────────────────────────────────────────────────────
   14. v2.2 additions: deep-cascade audit fixes.

   These selectors were unaddressed in v1, v2, and v2.1 because
   they emerge only when the preferences modal is fully expanded.
   Documented in spec doc §12 v2.2 changelog (sections B1-B4).
   ────────────────────────────────────────────────────────── */

/* v2.2 B1: "Show more" inline link inside description blocks.
   Plugin renders this as plugin-default blue. Style as inline text-link. */
.cky-show-desc-btn {
	background: transparent !important;             /* counter plugin inline background */
	border: 0 !important;                           /* counter plugin inline border */
	color: var(--navy) !important;                  /* counter plugin inline color (plugin-default blue) */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 0 !important;                          /* counter plugin default padding */
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.cky-show-desc-btn:hover {
	color: var(--navy-deep) !important;             /* counter plugin inline hover color */
}

.cky-show-desc-btn:focus-visible {
	outline: 0 !important;                          /* v2.2 F: counter plugin focus outline */
	outline-offset: 0;
	box-shadow: var(--focus-ring) !important;       /* counter plugin focus styles */
	border-radius: var(--radius-xs);
}


/* v2.2 B2: "Always Active" badge next to the Necessary category.
   Plugin renders as plain green text. Promote to a §2.8 chip:
   light-success tint background with ink-2 text for AAA readability. */
.cky-always-active {
	display: inline-flex;
	align-items: center;
	background: var(--success-bg) !important;       /* counter plugin inline background; uses canonical translucent success tint */
	color: var(--ink-2) !important;                 /* counter plugin inline color (plugin-default green) */
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	line-height: 1;
	white-space: nowrap;
}


/* v2.2 B3: cookie audit table inside expanded accordion bodies.
   Plugin renders as a light-grey panel with 6px radius. Bring into system. */
.cky-audit-table {
	background: var(--paper-2) !important;          /* counter plugin inline background (plugin-default light-grey) */
	border: var(--border-hairline) !important;      /* counter plugin inline border */
	border-radius: var(--radius-md) !important;     /* counter plugin default 6px */
	padding: var(--space-3) var(--space-4) !important; /* counter plugin default padding */
	color: var(--ink-2) !important;                 /* counter plugin inline color */
}


/* v2.2 B4: "No cookies to display" placeholder text. Plugin renders
   at 10px padding with line-height 2.0 in plugin-default dark-grey. Quiet it. */
.cky-empty-cookies-text {
	color: var(--muted) !important;                 /* counter plugin inline color (dark-grey default) */
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-style: italic;
	line-height: 1.4;
	padding: var(--space-2) 0;
	margin: 0;
}