:root {
    --badge--filled-bg: var(--color--primary--500);
    --badge--filled-tx: var(--color--base--0);
    --badge--ghost-tx: var(--color--primary--600);
    --badge--outlined-bg: var(--color--primary--50);
    --badge--outlined-br: var(--color--primary--500);
    --badge--outlined-tx: var(--color--primary--600);
    --badge--tonal-bg: var(--color--primary--100);
    --badge--tonal-tx: var(--color--primary--600);
    --button--filled-bg-disabled: var(--color--base--300);
    --button--filled-bg-enabled: var(--color--primary--original);
    --button--filled-bg-focused: var(--color--accent);
    --button--filled-bg-hovered: var(--color--accent);
    --button--filled-bg-pressed: var(--color--accent--dark);
    --button--filled-tonal-bg-disabled: var(--color--base--300);
    --button--filled-tonal-bg-enabled: var(--color--primary--100);
    --button--filled-tonal-bg-focused: var(--color--primary--200);
    --button--filled-tonal-bg-hovered: var(--color--primary--200);
    --button--filled-tonal-bg-pressed: var(--color--primary--300);
    --button--filled-tonal-tx-disabled: var(--color--base--0);
    --button--filled-tonal-tx-enabled: var(--color--primary--600);
    --button--filled-tonal-tx-focused: var(--color--base--0);
    --button--filled-tonal-tx-hovered: var(--color--base--0);
    --button--filled-tonal-tx-pressed: var(--color--base--0);
    --button--filled-tx-disabled: var(--color--base--0);
    --button--filled-tx-enabled: var(--color--base--0);
    --button--filled-tx-focused: var(--color--base--0);
    --button--filled-tx-hovered: var(--color--base--0);
    --button--filled-tx-pressed: var(--color--base--0);
    --button--ghost-tx-disabled: var(--color--base--500);
    --button--ghost-tx-enabled: var(--color--primary--500);
    --button--ghost-tx-focused: var(--color--primary--600);
    --button--ghost-tx-hovered: var(--color--primary--600);
    --button--ghost-tx-pressed: var(--color--primary--700);
    --button--outlined-bg-disabled: var(--color--base--0);
    --button--outlined-bg-focused: var(--color--primary--50);
    --button--outlined-bg-hovered: var(--color--primary--50);
    --button--outlined-bg-pressed: var(--color--primary--100);
    --button--outlined-br-disabled: var(--color--base--500);
    --button--outlined-br-enabled: var(--color--primary--400);
    --button--outlined-br-focused: var(--color--primary--500);
    --button--outlined-br-hovered: var(--color--primary--500);
    --button--outlined-br-pressed: var(--color--primary--600);
    --button--outlined-tx-disabled: var(--color--base--500);
    --button--outlined-tx-enabled: var(--color--primary--600);
    --button--outlined-tx-focused: var(--color--primary--700);
    --button--outlined-tx-hovered: var(--color--primary--700);
    --button--outlined-tx-pressed: var(--color--primary--800);
    --button--size-sm-scale: 0.85;
    --button--size-lg-scale: 1.3;
    --color--primary--original: oklch(0.692 0.110 227.7);
    --color--primary--50: oklch(from var(--color--primary--original) 0.97 calc(c * 0.15) h);
    --color--primary--100: oklch(from var(--color--primary--original) 0.93 calc(c * 0.25) h);
    --color--primary--200: oklch(from var(--color--primary--original) 0.87 calc(c * 0.45) h);
    --color--primary--300: oklch(from var(--color--primary--original) 0.78 calc(c * 0.65) h);
    --color--primary--400: oklch(from var(--color--primary--original) 0.68 calc(c * 0.85) h);
    --color--primary--500: oklch(from var(--color--primary--original) 0.58 calc(c * 1.00) h);
    --color--primary--600: oklch(from var(--color--primary--original) 0.48 calc(c * 0.95) h);
    --color--primary--700: oklch(from var(--color--primary--original) 0.39 calc(c * 0.85) h);
    --color--primary--800: oklch(from var(--color--primary--original) 0.31 calc(c * 0.70) h);
    --color--primary--900: oklch(from var(--color--primary--original) 0.25 calc(c * 0.50) h);
    --color--primary--950: oklch(from var(--color--primary--original) 0.18 calc(c * 0.40) h);
    --color--base--0: oklch(1.00 0 0);
    --color--base--50: oklch(from var(--color--primary--original) 0.97 0.008 h);
    --color--base--100: oklch(from var(--color--primary--original) 0.93 0.010 h);
    --color--base--200: oklch(from var(--color--primary--original) 0.87 0.012 h);
    --color--base--300: oklch(from var(--color--primary--original) 0.78 0.014 h);
    --color--base--400: oklch(from var(--color--primary--original) 0.68 0.015 h);
    --color--base--500: oklch(from var(--color--primary--original) 0.58 0.015 h);
    --color--base--600: oklch(from var(--color--primary--original) 0.48 0.014 h);
    --color--base--700: oklch(from var(--color--primary--original) 0.39 0.012 h);
    --color--base--800: oklch(from var(--color--primary--original) 0.31 0.010 h);
    --color--base--900: oklch(from var(--color--primary--original) 0.25 0.008 h);
    --color--base--950: oklch(from var(--color--primary--original) 0.18 0.006 h);
    --color--base--1000: oklch(0.00 0 0);
    --color--error--original: oklch(0.55 0.20 25);
    --color--error--light: oklch(from var(--color--error--original) 0.78 calc(c * 0.65) h);
    --color--error--dark: oklch(from var(--color--error--original) 0.39 calc(c * 0.85) h);
    --color--success--original: oklch(0.65 0.18 145);
    --color--success--light: oklch(from var(--color--success--original) 0.78 calc(c * 0.65) h);
    --color--success--dark: oklch(from var(--color--success--original) 0.39 calc(c * 0.85) h);
    --font--size--1: clamp(var(--text--size--h1-min), 1.6154rem + 1.5385vi, var(--text--size--h1-max));
    --font--size--2: clamp(var(--text--size--h2-min), 1.5577rem + 0.7692vi, var(--text--size--h2-max));
    --font--size--3: clamp(var(--text--size--h3-min), 1.3077rem + 0.7692vi, var(--text--size--h3-max));
    --font--size--4: clamp(var(--text--size--h4-min), 1.0577rem + 0.7692vi, var(--text--size--h4-max));
    --font--size--5: clamp(var(--text--size--h5-min), 0.9808rem + 0.5769vi, var(--text--size--h5-max));
    --font--size--6: clamp(var(--text--size--h6-min), 1.0000rem + 0.0000vi, var(--text--size--h6-max));
    --font--size--badge: clamp(var(--text--size--badge-min), 0.8750rem + 0.0000vi, var(--text--size--badge-max));
    --font--size--button: clamp(var(--text--size--button-min), 0.7788rem + 0.3846vi, var(--text--size--button-max));
    --font--size--content: clamp(var(--text--size--content-min), 0.9038rem + 0.3846vi, var(--text--size--content-max));
    --radius--none: var(--size--0);
    --radius--xxs: var(--size--1);
    --radius--xs: var(--size--2);
    --radius--sm: var(--size--3);
    --radius--md: var(--size--4);
    --radius--lg: var(--size--5);
    --radius--xl: var(--size--6);
    --radius--2xl: var(--size--8);
    --radius--3xl: var(--size--10);
    --radius--4xl: var(--size--12);
    --radius--5xl: var(--size--16);
    --radius--6xl: var(--size--20);
    --radius--7xl: var(--size--28);
    --radius--8xl: var(--size--32);
    --radius--9xl: var(--size--40);
    --radius--10xl: var(--size--48);
    --size--0: 0px;
    --size--1: 2px;
    --size--2: 4px;
    --size--3: 6px;
    --size--4: 8px;
    --size--5: 10px;
    --size--6: 12px;
    --size--7: 14px;
    --size--8: 16px;
    --size--9: 18px;
    --size--10: 20px;
    --size--12: 24px;
    --size--14: 28px;
    --size--16: 32px;
    --size--18: 36px;
    --size--20: 40px;
    --size--24: 48px;
    --size--28: 56px;
    --size--32: 64px;
    --size--36: 72px;
    --size--40: 80px;
    --size--48: 96px;
    --size--56: 112px;
    --size--64: 128px;
    --size--72: 144px;
    --size--80: 160px;
    --size--96: 192px;
    --size--128: 256px;
    --size--160: 320px;
    --size--192: 384px;
    --spacing--none: var(--size--0);
    --spacing--xxs: var(--size--1);
    --spacing--xs: var(--size--2);
    --spacing--sm: var(--size--4);
    --spacing--md: var(--size--6);
    --spacing--lg: var(--size--8);
    --spacing--xl: var(--size--10);
    --spacing--2xl: var(--size--12);
    --spacing--3xl: var(--size--16);
    --spacing--4xl: var(--size--20);
    --spacing--5xl: var(--size--24);
    --spacing--6xl: var(--size--28);
    --spacing--7xl: var(--size--32);
    --spacing--8xl: var(--size--36);
    --spacing--9xl: var(--size--40);
    --spacing--10xl: var(--size--48);
    --spacing--11xl: var(--size--56);
    --spacing--12xl: var(--size--64);
    --spacing--13xl: var(--size--72);
    --spacing--14xl: var(--size--80);
    --spacing--15xl: var(--size--96);
    --text--color--content: oklch(from var(--color--primary--original) 0.43 0.023 h);
    --text--color--heading: oklch(from var(--color--primary--original) 0.356 0.039 h);
    --text--size--badge-max: var(--size--7);
    --text--size--badge-min: var(--size--7);
    --text--size--button-max: var(--size--8);
    --text--size--button-min: var(--size--8);
    --text--size--content-max: var(--size--9);
    --text--size--content-min: var(--size--8);
    --text--size--h1-max: var(--size--24);
    --text--size--h1-min: var(--size--16);
    --text--size--h2-max: var(--size--14);
    --text--size--h2-min: var(--size--12);
    --text--size--h3-max: var(--size--12);
    --text--size--h3-min: var(--size--10);
    --text--size--h4-max: var(--size--10);
    --text--size--h4-min: var(--size--9);
    --text--size--h5-max: var(--size--9);
    --text--size--h5-min: var(--size--8);
    --text--size--h6-max: var(--size--8);
    --text--size--h6-min: var(--size--8);
    --container--full: 100%;
    --container--max: 1120px;
    --container--narrow: 820px;
    --container--min: 350px;
    --container--width: var(--container--max);
    --font--family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font--family-sans-serif: "Roboto", system-ui, "Segoe UI", Helvetica, Arial, sans-serif, var(--font--family-emoji);
    --font--family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font--family-emoji);
    --font--family: var(--font--family-sans-serif);
    --font--spacing-block: var(--size--8);
    --font--line-height: 1.55;
    --font--weight: 300;
    --border--width: calc(var(--size--1) / 2);
    --border--color: var(--color--primary--600);
    --border--radius: var(--radius--xs);
    --outline--width: var(--size--1);
    --outline--border: var(--outline--width) solid var(--color--base--800);
    --box--shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 1px -1px rgba(0, 0, 0, 0.05);
    --box--shadow-focus-with-button: 0 0 0 var(--outline--width) var(--border-color);
    --spacing--block: var(--spacing--sm);
    --spacing--block-start: var(--spacing--block);
    --spacing--block-end: var(--spacing--block);
    --spacing--inline: var(--spacing--lg);
    --spacing--inline-start: var(--spacing--inline);
    --spacing--inline-end: var(--spacing--inline);
    --grid--item-min-width: 240px;
    --grid--item-max-width: 1fr;
    --grid--row-gap: var(--spacing--3xl);
    --grid--col-gap: var(--spacing--5xl);
    --grid--gap: var(--grid--row-gap) var(--grid--col-gap);
    --section--padding-block: var(--spacing--7xl);
    --section--padding-inline: var(--spacing--4xl);
    --blockquote--border-color: var(--color--primary--400);
    --blockquote--cite-color: var(--color--primary--600);
    --table--border-color: var(--color--base--400);
    --table--row-stripped-background-color: var(--color--base--50);
    --code--background-color: var(--color--base--200);
    --code--color: var(--color--base--700);
    --code--kbd-background-color: var(--color--base--50);
    --code--kbd-color: var(--color--base--200);
    --switch--background-color: var(--color--base--200);
    --switch--checked-background-color: var(--color--primary--500);
    --switch--color: var(--color--base--0);
    --switch--thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --accordion--border-color: var(--color--base--300);
    --accordion--active-summary-color: var(--color--primary--200);
    --accordion--close-summary-color: var(--color--base--600);
    --accordion--open-summary-color: var(--color--base--900);
    --accordion--closed-summary-background: transparent;
    --accordion--open-summary-background: var(--color--base--50);
    --accordion--active-summary-background: var(--color--base--200);
    --accordion--icon-circle: 15px;
    --accordion--icon-circle-color: transparent;
    --accordion--spacing-inline: var(--spacing--inline);
    --accordion--spacing-block: var(--spacing--block);
    --card--background-color: var(--color--base--0);
    --card--border-color: var(--color--base--50);
    --card--box-shadow: var(--box--shadow);
    --card--border-radius: var(--border--radius);
    --pagination--item-radius: calc(var(--border--radius) / 2);
    --transition: 0.3s ease;
    --icon--minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 11V13H19V11H5Z"></path></svg>');
    --icon--plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6Z"/></svg>');
    --icon--chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 13.2 5-5 1.4 1.4L12 16 5.6 9.6l1.5-1.4 4.9 5Z"/></svg>');
    --icon--caret: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.2 12-5-5 1.4-1.4L16 12l-6.4 6.4L8.2 17l5-5Z"/></svg>');
    --icon--arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13 16.2 5.4-5.4 1.4 1.4L12 20l-7.8-7.8 1.4-1.4 5.4 5.4V4h2v12.2Z"/></svg>');
    --icon--search: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m18 16.6 4.3 4.3-1.4 1.4-4.3-4.3a9 9 0 1 1 1.4-1.4Zm-2-.7A7 7 0 0 0 11 4a7 7 0 1 0 4.9 12l.1-.1Z"/></svg>');
    --icon--close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 10.6 5-5 1.4 1.5-5 4.9 5 5-1.5 1.4-4.9-5-5 5L5.6 17l5-5-5-5L7 5.7l5 5Z"/></svg>');
    --icon--base: var(--icon--chevron);
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    accent-color: var(--color--primary--original);
    background-color: var(--color--base--0);
    color: var(--text--color--content);
    font-weight: var(--font--weight);
    font-size: var(--font--size--content);
    line-height: var(--font--line-height);
    font-family: var(--font--family);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit;
}

[hidden] {
    display: none;
}

small,
.small {
    font-size: var(--size--6);
}

h1, h2, h3, h4, h5, h6 {
    --font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--text--color--heading);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font-line-height);
    font-family: var(--font--family);
}

h1 {
    --font-size: var(--font--size--1);
    --font-line-height: 1.125;
    --spacing-block-start: var(--size--24);
}

h2 {
    --font-size: var(--font--size--2);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--20);
}

h3 {
    --font-size: var(--font--size--3);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--16);
}

h4 {
    --font-size: var(--font--size--4);
    --font-line-height: 1.4;
    --spacing-block-start: var(--size--12);
}

h5 {
    --font-size: var(--font--size--5);
    --font-line-height: 1.5;
    --spacing-block-start: var(--size--12);
}

h6 {
    --font-size: var(--font--size--6);
    --font-line-height: 1.25;
    --spacing-block-start: var(--size--10);
}

pre,
code,
kbd,
samp {
    --font-family: var(--font--family-monospace);
    font-size: 0.875em;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    max-width: 100%;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
}

kbd {
    --font-weight: bolder;
    background-color: var(--code--kbd-background-color);
    color: var(--code--kbd-color);
    vertical-align: baseline;
}

ul, ol {
    padding-inline-start: 1em;
}

b,
strong {
    font-weight: bolder;
}

sub,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

address,
blockquote,
dl,
ol,
p,
pre {
    color: var(--text--color--content);
    font-style: normal;
    font-weight: var(--font--weight);
}

p, dl, ol, ul, address {
    margin-top: 0;
    margin-bottom: 0;
}

table {
    margin-top: 0;
}

blockquote {
    display: block;
    margin: 0;
    padding: var(--spacing--lg);
    border-right-style: none;
    border-left: 0.25rem solid var(--blockquote--border-color);
    border-inline-start: 0.25rem solid var(--blockquote--border-color);
    border-inline-end: none;
}

blockquote cite {
    color: var(--blockquote--cite-color);
}

mark {
    padding: 0.125rem 0.25rem;
    background-color: var(--color--base--50);
    color: var(--text--color--content);
    vertical-align: baseline;
}

abbr[title] {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    text-decoration: none;
    cursor: help;
}

ins {
    color: var(--color--success--original, var(--color--primary--500));
    text-decoration: none;
}

del {
    color: var(--color--error--original, var(--color--base--400));
}

a {
    --text-decoration: underline;
    --color-text: var(--color--primary--500);
    outline-style: none;
    color: var(--color-text);
    text-decoration: var(--text-decoration);
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}

a:where(:hover, :active, :focus) {
    --color-text: var(--color--primary--400);
    --text-decoration: none;
    cursor: pointer;
}

:where(button, [role=button], [type=submit]), .button, .btn-filled {
    --background-color: var(--button--filled-bg-enabled);
    --color-text: var(--button--filled-tx-enabled);
    --spacing-block: var(--spacing--block);
    --spacing-inline: var(--spacing--inline);
    --border-radius: var(--radius--xs);
    --border-color: transparent;
    --border-style: solid;
    --border-width: 1px;
    --text-decoration: none;
    --font-weight: 600;
    --font-size: var(--font--size--button);
    display: flex;
    justify-content: center;
    color: var(--color-text);
    background-color: var(--background-color);
    padding: var(--spacing-block) var(--spacing-inline);
    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-style) var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font--line-height);
    text-align: center;
    text-decoration: var(--text-decoration);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

:where(button, .button, [role=button], [type=submit]):is([aria-current]:not([aria-current=false])),
:where(button, .button, [role=button], [type=submit]):is(:hover, :active) {
    --background-color: var(--button--filled-bg-hovered)
}

:where(button, .button, [role=button], [type=submit], a):is([aria-current]:not([aria-current=false])):focus:not(:focus-visible) {
    outline-style: none;
}

:where(button, .button, [role=button], [type=submit], a):active {
    --background-color: var(--button--filled-bg-pressed)
}

:where(button, .button, [role=button], [type=submit], a):focus-visible,
:where(button, .button, [role=button], [type=submit], a):is([aria-current]:not([aria-current=false])):focus-visible {
    outline: var(--outline--border);
}

:where(button, .button, [role=button], [type=submit] )[disabled] {
    --background-color: var(--button--filled-bg-disabled);
    --color-text: var(--button--filled-tx-disabled);
    pointer-events: none;
}

:where(button, .button, [role=button], [type=submit])[aria-busy=true]::before {
    filter: brightness(0) invert(1);
}

:where([role=tab]) {
    --background-color: transparent;
    --color-text: var(--button--outlined-tx-enabled);
    --border-color: var(--button--outlined-br-enabled);
    --spacing-block: var(--spacing--block);
    --spacing-inline: var(--spacing--inline);
    --border-radius: var(--radius--xs);
    --border-style: solid;
    --border-width: 1px;
    --text-decoration: none;
    --font-weight: 600;
    --font-size: var(--size--9);
    display: flex;
    justify-content: center;
    color: var(--color-text);
    background-color: var(--background-color);
    padding: var(--spacing-block) var(--spacing-inline);
    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-style) var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font--line-height);
    text-align: center;
    text-decoration: var(--text-decoration);
    cursor: pointer;
}

:where([role=tab]):is(:hover) {
    --background-color: var(--button--outlined-bg-hovered);
    --border-color: var(--button--outlined-br-hovered)
}

:where([role=tab].active) {
    --border-color: transparent;
    --background-color: var(--button--filled-bg-enabled);
    --color-text: var(--button--filled-tx-enabled);
}

:where([role=tab].active):is(:hover) {
    --background-color: var(--button--filled-bg-hovered);
    --color-text: var(--button--filled-tx-hovered);
}

:where([role=tab])[disabled] {
    --border-color: transparent;
    --background-color: var(--button--filled-bg-disabled);
    --color-text: var(--button--filled-tx-disabled);
    pointer-events: none;
}

.btn-tonal {
    --background-color: var(--button--filled-tonal-bg-enabled);
    --color-text: var(--button--filled-tonal-tx-enabled);
}

.btn-tonal:where(:hover) {
    --background-color: var(--button--filled-tonal-bg-hovered);
}

.btn-tonal:where(:active) {
    --background-color: var(--button--filled-tonal-bg-pressed);
}

.btn-tonal:where([disabled]) {
    --background-color: var(--button--filled-tonal-bg-disabled);
    --color-text: var(--button--filled-tonal-tx-disabled);
}

.btn-outlined {
    --background-color: transparent;
    --color-text: var(--button--outlined-tx-enabled);
    --border-color: var(--button--outlined-br-enabled);
}

.btn-outlined:where(:hover) {
    --background-color: var(--button--outlined-bg-hovered);
    --border-color: var(--button--outlined-br-hovered);
}

.btn-outlined:where(:active) {
    --background-color: var(--button--outlined-bg-pressed);
    --border-color: var(--button--outlined-br-pressed);
    --color-text: var(--button--outlined-tx-pressed);
}

.btn-outlined:where([disabled]) {
    --background-color: var(--button--outlined-bg-disabled);
    --border-color: var(--button--outlined-br-disabled);
    --color-text: var(--button--outlined-tx-disabled);
}

.btn-ghost {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-enabled);
}

.btn-ghost:where(:hover) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-hovered);
}

.btn-ghost:where(:active) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-pressed);
}

.btn-ghost:where([disabled]) {
    --background-color: transparent;
    --color-text: var(--button--ghost-tx-disabled);
}

/* Button size modifiers */
:where(button, [role=button], [type=submit], .button, .btn-filled, .btn-tonal, .btn-outlined, .btn-ghost):is(.size-sm) {
    --spacing-block: calc(var(--spacing--block) * var(--button--size-sm-scale));
    --spacing-inline: calc(var(--spacing--inline) * var(--button--size-sm-scale));
    --font-size: clamp(
            calc(var(--text--size--button-min) * var(--button--size-sm-scale)),
            calc(0.7788rem * var(--button--size-sm-scale) + 0.3846vi * var(--button--size-sm-scale)),
            calc(var(--text--size--button-max) * var(--button--size-sm-scale))
    );
    padding: var(--spacing-block) var(--spacing-inline);
    font-size: var(--font-size);
}

:where(button, [role=button], [type=submit], .button, .btn-filled, .btn-tonal, .btn-outlined, .btn-ghost):is(.size-lg) {
    --spacing-block: calc(var(--spacing--block) * var(--button--size-lg-scale));
    --spacing-inline: calc(var(--spacing--inline) * var(--button--size-lg-scale));
    --font-size: clamp(
            calc(var(--text--size--button-min) * var(--button--size-lg-scale)),
            calc(0.7788rem * var(--button--size-lg-scale) + 0.3846vi * var(--button--size-lg-scale)),
            calc(var(--text--size--button-max) * var(--button--size-lg-scale))
    );
    padding: var(--spacing-block) var(--spacing-inline);
    font-size: var(--font-size);
}

:where(.badge, .badge-filled, .badge-tonal, .badge-outlined, .badge-ghost) {
    --background-color: var(--badge--filled-bg);
    --color-text: var(--badge--filled-tx);
    --spacing-block: var(--spacing--sm);
    --spacing-inline: var(--spacing--md);
    --border-radius: var(--radius--2xl);
    --border-color: transparent;
    --border-style: solid;
    --border-width: 1px;
    --text-decoration: none;
    --font-weight: 400;
    --font-size: var(--size--7);
    --font-line-height: 1.1;
    display: inline-block;
    color: var(--color-text);
    background-color: var(--background-color);
    padding: var(--spacing-block) var(--spacing-inline);
    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-style) var(--border-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--font-line-height);
    text-align: center;
    text-decoration: var(--text-decoration);
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.badge-tonal {
    --border-color: transparent;
    --background-color: var(--badge--tonal-bg);
    --color-text: var(--badge--tonal-tx);
}

.badge-outlined {
    --border-color: var(--badge--outlined-br);
    --background-color: var(--badge--outlined-bg);
    --color-text: var(--badge--outlined-tx);
}

.badge-ghost {
    --background-color: transparent;
    --border-color: transparent;
    --color-text: var(--badge--ghost-tx);
}

[aria-controls] {
    cursor: pointer;
}

[aria-disabled=true],
[disabled] {
    cursor: not-allowed;
}

[aria-hidden=false][hidden] {
    display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

:where(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select) {
    font-size: inherit;
    font-family: var(--font--family);
    border-radius: var(--radius--xs);
    background-color: var(--color--base--50);
    border: var(--border--width) solid var(--color--base--200);
    padding: var(--spacing--sm);
    width: 100%;
    color: var(--text--color--content);
}

.invalid {
    border-color: var(--color--error--original);
    color: var(--color--error--original);
}

label {
    font-size: calc(var(--font--size--content) * 0.9);
    margin-top: 0.5rem;
    text-indent: 0.15em;
    line-height: calc(var(--font--line-height) * 1.45);
}

:where(input:not([type="checkbox"], [type="radio"]), textarea, select):focus {
    outline: 2px solid var(--color--base--600);
}

:where(input, textarea)::placeholder {
    color: var(--color--base--600);
    opacity: 0.7;
}

label:has( + [required] )::after {
    content: "(*" attr(data-text-required) ")";
    margin-left: 0.5ch;
    color: var(--color--base--600);
}

fieldset {
    border-radius: var(--radius--xs);
    background-color: var(--color--base--0);
    border: var(--border--width) solid var(--color--base--200);
    padding: var(--spacing--lg);
}

.field-group {
    display: flex;
}

.field-group-prepend {
    border-right: unset;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.field-group-append {
    border-left: unset;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.field-group > :not(.field-group-prepend, .field-group-append) {
    border-right: unset;
    border-radius: 0;
}

[dir=rtl] {
    direction: rtl;
}

::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

:-moz-focusring {
    outline-width: 0;
}

:-moz-ui-invalid {
    box-shadow: none;
}

::-ms-expand {
    display: none;
}

[role=switch] {
    --border-width: 0.1875rem;
    --background-color: var(--switch--background-color);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 2.25em;
    height: 1.25em;
    border: var(--border--width) solid var(--border--color);
    border-radius: 1.25em;
    background-color: var(--background-color);
    line-height: 1.25em;
}

[role=switch]:before {
    display: block;
    aspect-ratio: 1;
    height: 100%;
    border-radius: 50%;
    background-color: var(--switch--color);
    box-shadow: var(--switch--thumb-box-shadow);
    content: "";
    transition: margin .1s ease-in-out;
}

[role=switch]:focus-visible,
[role=switch]:focus {
    --background-color: var(--switch--background-color);
    --border-color: var(--switch--background-color);
}

[role=switch]:checked {
    --background-color: var(--switch--checked-background-color);
    --border-color: var(--switch--checked-background-color);
    background-image: none;
}

[role=switch]:checked:before {
    margin-inline-start: 1em;
}

[role=switch]:not([aria-invalid]) {
    --border-color: var(--switch--background-color);
}

details {
    margin-block-end: 0.25rem;
    border-radius: var(--radius--md);
    border: var(--border--width) solid var(--accordion--border-color);
    color: var(--accordion--close-summary-color);
    padding-inline: var(--accordion--spacing-inline);
}

details:where(:hover, :focus) summary::before,
details:where(:hover, :focus) summary::after {
    box-shadow: 0 0 0 24px var(--accordion--active-summary-color);
}

details :last-child {
    margin-block-end: 0;
}

details:where([open]) {
    background-color: var(--accordion--open-summary-background);
    padding-block-end: var(--accordion--spacing-block);
}

details:where([open]) summary {
    color: var(--accordion--open-summary-color);
}

details:where([open]) summary::before,
details:where([open]) summary::after {
    --icon-rotate: -180deg;
}

summary {
    width: 100%;
    padding-block: var(--accordion--spacing-block);
    user-select: none;
    cursor: pointer;
    list-style-type: none;
    display: flex;
    color: var(--accordion--close-summary-color);
    text-decoration: none;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing--sm);
    overflow-wrap: anywhere;
    background-image: radial-gradient(
        circle calc(var(--accordion--icon-circle) + 0px) at var(--accordion--icon-circle) 50%,
        var(--accordion--icon-circle-color) 100%,
        transparent 100%
    );
}

summary:where(.icon-right) {
    background-image: radial-gradient(
        circle calc(var(--accordion--icon-circle) + 0px) at calc(100% - var(--accordion--icon-circle)) 50%,
        var(--accordion--icon-circle-color) 100%,
        transparent 100%
    );
}

summary::before, summary::after {
    mask-image: var(--icon, var(--icon--base));
    -webkit-mask-image: var(--icon, var(--icon--base));
    mask-size: 1rem;
    mask-position: center center;
    mask-repeat: no-repeat;
    transform: rotate(var(--icon-rotate, 0deg)) scale(var(--icon-scale), 1);
    content: "";
    display: block;
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: var(--transition);
    border-radius: 24px;
    background-color: currentColor;
    box-shadow: 0 0 0 24px var(--accordion--active-summary-background);
}

summary::before {
    margin-inline-start: calc(var(--accordion--icon-circle) - 12px);
}

summary::after {
    margin-left: auto;
    margin-inline-end: calc(var(--accordion--icon-circle) - 12px);
}

summary:where(.icon-style-plus) {
    --icon: var(--icon--plus);
}

summary:where(.icon-style-arrow) {
    --icon: var(--icon--arrow);
}

summary:where(.icon-style-caret) {
    --icon: var(--icon--caret);
}

summary:where(.icon-right)::before {
    content: unset;
}

summary:not(.icon-right)::after {
    content: unset;
}

summary > :where(h1,h2,h3,h4,h5,h6) {
    font-weight: 500;
    font-size: var(--font--size--5);
}

dialog[open] {
    display: block;
}

:is([role=dialog], dialog):where([open], .open) {
    padding: var(--spacing--2xl);
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    background-color: var(--card--background-color);
    border: var(--border--width) solid var(--border--color);
    box-shadow: var(--box--shadow);
    border-radius: var(--radius--md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.cookie-notice {
    position: fixed;
    z-index: 1000;
    max-width: 330px;
    bottom: 20px;
}

:is([role=dialog], dialog):where([open], .open).cookie-notice {
    transform: unset;
    top: unset;
    left: unset;
    bottom: var(--spacing--lg);
    right: var(--spacing--lg);
    max-width: 60ch;
}

:where([role=dialog],
  dialog):where([open], .open) > div {
    padding: var(--modal--spacing-block-start) var(--modal--spacing) var(--modal--spacing);
}

:is([role=dialog], dialog):where([open], .open) + .backdrop {
    position: fixed;
    inset: 0 0 0 0;
    background-color: var(--modal--overlay-background-color);
    z-index: 9998;
}

:where([role=dialog], dialog) [data-action=close] {
    display: flex;
    align-items: center;
    column-gap: var(--spacing-inline);
    order: -1;
    align-self: flex-end;
    width: 16px;
    height: 16px;
    border-radius: 32px;
    mask-image: var(--icon--close);
    -webkit-mask-image: var(--icon--close);
    mask-size: 1rem;
    mask-position: center center;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

:where([role=dialog], dialog) button span {
    width: 0;
    height: 0;
    overflow: clip;
    position: fixed;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}

button, input, textarea, select {
    font: inherit;
}

main {
    flex: 1;
}

section {
    padding: var(--section--padding-block) var(--section--padding-inline);
}

table {
    --table-border-color: var(--color--base--200);
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
}

th,
td {
    padding: var(--spacing--lg);
    border-bottom: var(--border--width) solid var(--table-border-color);
    background-color: var(--color--base--0);
    color: var(--text--color--content);
    font-weight: var(--font--weight);
    text-align: left;
}

:where(thead) th,
:where(thead) td,
:where(tfoot) th,
:where(tfoot) td {
    --font-weight: 600;
    --border-width: calc(var(--border--width) * 2)
}

:where(thead) th {
    border-bottom: var(--border-width) solid var(--table-border-color);
}

:where(tfoot) th,
:where(tfoot) td {
    border-top: var(--border-width) solid var(--table-border-color);
    border-bottom-width: 0;
}

.striped-rows :where(tr:nth-child(odd)) > * {
    background-color: var(--table--row-stripped-background-color);
}

audio:not([controls]) {
    display: none;
    height: 0;
}

video,
audio,
object,
iframe {
    border-style: none;
    max-width: 100%;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
    border-style: none;
    object-fit: cover;
    object-position: center;
}

hr {
    border: none;
    border-top: var(--border--width) solid var(--color--base--200);
    margin-block: var(--spacing--block);
}

figure {
    margin: 0 0 var(--spacing--block-end, var(--spacing--lg)) 0;
    padding: 0;
}

figcaption {
    padding: var(--spacing--lg);
    color: var(--color--base--600);
}

svg:not(:root) {
    overflow: hidden;
}

pre code {
    font-size: inherit;
    font-family: inherit;
}

pre {
    -ms-overflow-style: scrollbar;
    display: block;
    margin-bottom: var(--spacing--block-end, var(--spacing--lg));
    overflow-x: auto;
    padding: var(--spacing--lg);
}

pre,
code,
kbd {
    border-radius: var(--radius--md);
    color: var(--code--color);
    font-weight: var(--font--weight);
    line-height: initial;
}

code,
kbd {
    display: inline-block;
    padding: 0.375rem;
}

pre > code {
    display: block;
    padding: unset;
    background-image: none;
    line-height: var(--font--line-height);
}

.gutter {
    padding: var(--section--padding-block) var(--section--padding-inline);
}

.outer-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: var(--spacing--block) var(--spacing--inline);
}

.container {
    --max-width: var(--container--width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--max-width);
}

.page-content {
    width: 100%;
}

.page-content :where(h1,h2,h3,h4,h5,h6):not(:first-child) {
    margin-top: var(--spacing-block-start);
}

.page-content :where(h1,h2,h3,h4,h5,h6) {
    margin-bottom: var(--spacing--block-end, var(--spacing--block));
}

.page-content :where(p, ul, ol, dl, blockquote):not(:last-child) {
    margin-bottom: var(--spacing--block-end, var(--spacing--block));
}

.page-content :where(blockquote):not(:first-child) {
    margin-top: var(--spacing--block);
}

.flex, .flex-row {
    display: flex;
    gap: var(--spacing--inline);
    justify-content: flex-start;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--block);
    align-items: flex-start;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.grid, .grid-fit, .grid-fill {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid--item-min-width), var(--grid--item-max-width)));
    grid-template-rows: auto;
    gap: var(--grid--gap);
    width: 100%;
}

.grid-fill {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid--item-min-width), var(--grid--item-max-width)));
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

.grid-rows-1 {
    grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
    grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
    grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
    grid-template-rows: repeat(4, 1fr);
}

.grid-rows-5 {
    grid-template-rows: repeat(5, 1fr);
}

.grid-rows-6 {
    grid-template-rows: repeat(6, 1fr);
}

/* Grid column span — for child items */
.grid-col-span-1 {
    grid-column: span 1;
}

.grid-col-span-2 {
    grid-column: span 2;
}

.grid-col-span-3 {
    grid-column: span 3;
}

.grid-col-span-4 {
    grid-column: span 4;
}

.grid-col-span-5 {
    grid-column: span 5;
}

.grid-col-span-6 {
    grid-column: span 6;
}

.grid-col-span-full {
    grid-column: 1 / -1;
}

/* Grid row span — for child items */
.grid-row-span-1 {
    grid-row: span 1;
}

.grid-row-span-2 {
    grid-row: span 2;
}

.grid-row-span-3 {
    grid-row: span 3;
}

.grid-row-span-full {
    grid-row: 1 / -1;
}

.gap-none {
    gap: var(--spacing--none);
}

.gap-xxs {
    gap: var(--spacing--xxs);
}

.gap-xs {
    gap: var(--spacing--xs);
}

.gap-sm {
    gap: var(--spacing--sm);
}

.gap-md {
    gap: var(--spacing--md);
}

.gap-lg {
    gap: var(--spacing--lg);
}

.gap-xl {
    gap: var(--spacing--xl);
}

.gap-2xl {
    gap: var(--spacing--2xl);
}

.gap-3xl {
    gap: var(--spacing--3xl);
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.text-center {
    text-align: center;
}

.text-balance {
    text-wrap: balance;
}

.color-primary {
    color: var(--color--primary--500);
}

.bg-primary {
    background-color: var(--color--primary--100);
}

.border-color-primary {
    border-color: var(--color--primary--500);
}

.font-size-1 {
    font-size: var(--font--size--1);
    --font-line-height: 1.125;
    --spacing-block-start: var(--size--24);
}

.font-size-2 {
    font-size: var(--font--size--2);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--20);
}

.font-size-3 {
    font-size: var(--font--size--3);
    --font-line-height: 1.15;
    --spacing-block-start: var(--size--16);
}

.font-size-4 {
    font-size: var(--font--size--4);
    --font-line-height: 1.4;
    --spacing-block-start: var(--size--12);
}

.font-size-5 {
    font-size: var(--font--size--5);
    --font-line-height: 1.5;
    --spacing-block-start: var(--size--12);
}

.font-size-6 {
    font-size: var(--font--size--6);
    --font-line-height: 1.25;
    --spacing-block-start: var(--size--10);
}

.builderiusContent {
    display: contents;
}

.skip-navigation {
    position: fixed;
    top: -9999999px;
    z-index: 999999999;
    left: var(--spacing--lg);
    background-color: var(--color--base--200);
}

.skip-navigation:focus {
    top: var(--spacing--lg);
}

*:focus:not(:focus-visible) {
    outline-style: none;
}

[role=tablist] {
    display: flex;
}

*:focus:focus-visible {
    outline: var(--outline--border);
}

.visuallyhidden, .screen-reader-text, .sr-only {
    border-width: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

builderius-smart-form button.processing {
    cursor: progress;
}

.footer-col {
    display: flex;
}

.card {
    padding: var(--spacing--3xl);
    border-radius: var(--card--border-radius);
    background-color: var(--card--background-color);
    border: solid var(--border--width) var(--card--border-color);
    box-shadow: var(--card--box-shadow);
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing--sm);
    align-items: flex-start;
}

.search-form {
    display: flex;
    gap: var(--spacing--sm);
    overflow: hidden;
    font-size: var(--font--size--6);
    align-items: stretch;
    border-radius: var(--radius--xs);
    background-color: var(--color--base--50);
    outline: var(--border--width) solid var(--color--base--200);
    width: 100%;
}

.search-form:focus-within {
    border-color: var(--color--base--300);
    outline-color: var(--color--base--600);
}

.search-form input[type=search]:focus {
    border-style: none;
    outline-style: none;
}

.search-form input[type="search"] {
    background-color: transparent;
    border-style: none;
    outline-style: none;
    font-size: inherit;
    flex-grow: 1;
    text-indent: var(--spacing--inline);
}

.search-button {
    --icon: var(--icon--search);
    display: flex;
    font-size: inherit;
    color: var(--color--base--0);
    padding-top: unset;
    padding-bottom: unset;
    align-items: center;
    min-height: 2em;
    line-height: 2em;
    border-style: none;
    outline-style: none;
}

.icon-btn {
    display: inherit;
    --icon-height: var(--size--8);
    --icon-width: var(--size--8);
    --icon-bg: var(--button--filled-bg-enabled);
    --icon-fill-color: var(--button--filled-tx-enabled);
}

:where(.icon-btn) .icon {
    mask-image: var(--icon--search);
    -webkit-mask-image: var(--icon--search);
    background-color: currentColor;
    mask-size: 1em;
    mask-position: center center;
    mask-repeat: no-repeat;
    height: var(--icon-height);
    width: var(--icon-width);
}

:where(.icon-btn) svg {
    height: var(--icon-height);
    width: var(--icon-width);
}

:where(.icon-btn) svg path {
    fill: var(--icon-fill-color);
}

:where(.icon-btn):is(.btn-tonal) svg path {
    --icon-fill-color: var(--button--filled-tonal-tx-enabled);
}

:where(.icon-btn):is(.btn-outlined) svg path {
    --icon-fill-color: var(--button--outlined-tx-enabled);
}

:where(.icon-btn):is(.btn-ghost) svg path {
    --icon-fill-color: var(--button--ghost-tx-enabled);
}

:where(.icon-btn):is(.badge) svg path {
    --icon-fill-color: var(--button--filled-tx-enabled);
}

:where(.icon-btn):is(.badge-tonal) svg path {
    --icon-fill-color: var(--badge--tonal-tx);
}

:where(.icon-btn):is(.badge-outlined) svg path {
    --icon-fill-color: var(--badge--outlined-tx);
}

:where(.icon-btn):is(.badge-ghost) svg path {
    --icon-fill-color: var(--badge--ghost-tx);
}

.icon-end {
    --icon-size: 1.5em;
    --spacing-inline: 0.5em;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing--inline);
}

.icon-end::after {
    display: inline-flex;
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    mask-image: var(--icon--chevron);
    background-color: currentColor;
}

.icon-start {
    display: inline-flex;
    align-items: center;
    --icon-size: 1.5em;
    --spacing-inline: 0.5em;
    gap: var(--spacing--inline);
}

.icon-start::before {
    display: inline-flex;
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    mask-image: var(--icon--chevron);
    background-color: currentColor;
}

.contact-form > * {
    width: 100%;
}

.contact-form textarea {
    min-height: 7em;
}

.contact-form button {
    margin-top: 0.85rem;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: var(--pagination--item-radius);
}

.page-numbers {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    line-height: var(--font--line-height);
    color: var(--color--primary--500);
    border: var(--border--width) solid var(--color--base--50);
    text-decoration: none;
}

.page-numbers:where(a):hover, .page-numbers:where(.current) {
    color: var(--color--base--0);
    background-color: var(--color--primary--400);
    border-color: var(--color--primary--400);
}

:where(.icon-right) [data-accordion-header] {
    flex-direction: row;
    justify-content: flex-start;
}

:where(.icon-right) [aria-hidden=true] {
    margin-inline-start: auto;
    transform: rotate(90deg);
}

:where(.icon-right) [aria-expanded=true] [aria-hidden=true] {
    transform: rotate(0);
}

/* ==========================================================================
   E-BOATS SARDINIA — SITE LAYER
   Everything below extends the framework above. Framework :root values were
   adjusted in place (colors, type scale, container, spacing); new tokens and
   selectors live here.

   Breakpoints (plain media queries — static site, no build step):
     laptop  ≤ 1280px
     tablet  ≤ 1024px
     nav     ≤ 1080px  (hamburger menu)
     mobile  ≤  767px  (columns stack)
   ========================================================================== */

/* Self-hosted Roboto (variable, latin subset) */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/roboto-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/roboto-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   New tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --color--navy: oklch(0.288 0.082 280);                  /* header / footer bars */
    --color--accent: oklch(0.582 0.232 28);                 /* red: hovers, CTAs */
    --color--accent--dark: oklch(from var(--color--accent) 0.5 c h);
    --color--light: oklch(0.953 0.004 236.5);               /* light text on navy */
    --color--footer-text: oklch(0.723 0.025 250.2);         /* muted text on navy */
    --color--title: oklch(0.683 0 0);                       /* grey page titles */
    --color--muted: oklch(0.6 0 0);                         /* grey body copy */
    --color--price: oklch(0.77 0.121 194.9);                /* turquoise prices */
    --color--ink: oklch(0.321 0 0);                         /* header menu text */
    --color--shade: oklch(0 0 0 / 0.1);                     /* footer menu items */
    --color--facebook: oklch(0.58 0.2 259);
    --color--instagram: oklch(0.63 0.2 12);

    /* Header */
    --header--top-height: 40px;
    --header--main-height: 90px;
    --header--bottom-height: 60px;
    --header--height: calc(var(--header--top-height) + var(--header--main-height) + var(--header--bottom-height));
    --header--padding-inline: var(--section--padding-inline);
    --nav--item-padding: var(--spacing--sm);
    --logo--height: 130px;

    /* Hero tint: navy gradient laid over hero photos / sliders */
    --hero--tint-top: oklch(from var(--color--navy) l c h / 0.55);
    --hero--tint-mid: oklch(from var(--color--navy) l c h / 0.2);
    --hero--tint-bottom: oklch(from var(--color--navy) l c h / 0.65);
    --hero--panel-bg: oklch(from var(--color--navy) l c h / 0.5);
    --hero--panel-border: oklch(1 0 0 / 0.18);
    --hero--panel-shadow: 0 1.5rem 3rem oklch(0 0 0 / 0.3);

    /* Components */
    --hero--height: calc(100svh - var(--header--height));
    --text--shadow: 1px 1px 3px oklch(0.321 0 0);
    --divider--thickness: var(--size--1);
    --tour--card-width: 540px;
    --tour--cta-width: 320px;
}

@media (max-width: 1280px) {
    :root {
        --header--main-height: 100px;
        --header--bottom-height: 50px;
        --logo--height: 70px;
    }
}

@media (max-width: 1024px) {
    :root {
        --header--main-height: 70px;
        --logo--height: 50px;
        --section--padding-inline: var(--spacing--2xl);
    }
}

@media (max-width: 767px) {
    :root {
        --section--padding-block: var(--spacing--4xl);
        --grid--col-gap: var(--spacing--3xl);
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
    scroll-padding-top: var(--header--height);
}

body {
    padding-block-start: var(--header--height);
    height: auto;
    min-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    --font-weight: 400;
}

b,
strong {
    font-weight: 700;
}

a {
    --color-text: var(--color--primary--original);
    --text-decoration: none;
}

a:hover {
    --color-text: var(--color--accent);
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

.button {
    --spacing-block: var(--spacing--md);
    --spacing-inline: var(--spacing--3xl);
    --border-radius: var(--border--radius);
    --font-weight: 700;
    align-items: center;
    gap: var(--spacing--sm);
    line-height: 1.2;
}

.button-accent {
    --background-color: var(--color--accent);
}

.button-accent:hover {
    --background-color: var(--color--accent--dark);
}

/* Text helpers */
.page-title {
    color: var(--color--title);
}

.page-subtitle {
    color: var(--color--accent);
}

.text-muted {
    color: var(--color--muted);
}

.text-justify {
    text-align: justify;
}

.text-primary {
    color: var(--color--primary--original);
}

.price {
    color: var(--color--price);
}

/* Vertical rhythm for prose blocks */
.prose > * + * {
    margin-block-start: var(--spacing--xl);
}

.prose :where(ul, ol) {
    padding-inline-start: var(--spacing--2xl);
}

.prose li + li {
    margin-block-start: var(--spacing--sm);
}

.prose :where(h2, h3, h4) {
    margin-block-start: var(--spacing--5xl);
}

/* Layout helpers */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--2xl);
}

.stack-lg {
    gap: var(--spacing--5xl);
}

hgroup.stack {
    gap: var(--spacing--sm);
}

.cols {
    display: grid;
    gap: var(--grid--row-gap) var(--grid--col-gap);
    align-items: start;
}

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-2-1 { grid-template-columns: 2fr 1fr; }
.cols-1-2 { grid-template-columns: 1fr 2fr; }
.cols-3-1 { grid-template-columns: 3fr 1fr; }

@media (max-width: 767px) {
    .cols {
        grid-template-columns: 1fr;
    }
}

/* Boxed content inside a full-width band: container width + section side padding */
.boxed {
    width: 100%;
    max-width: calc(var(--container--max) + 2 * var(--section--padding-inline));
    margin-inline: auto;
    padding-inline: var(--section--padding-inline);
}

.section-sm {
    --section--padding-block: var(--spacing--3xl);
}

.section-flush {
    padding: 0;
}

/* Divider with centred title between two lines */
.divider {
    display: flex;
    align-items: center;
    gap: var(--spacing--lg);
    text-align: center;
    color: var(--divider--color, var(--color--primary--original));
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-block-start: var(--divider--thickness) solid currentColor;
}

.divider-title {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing--sm);
    color: inherit;
}

.rule {
    border: none;
    border-block-start: var(--divider--thickness) solid var(--rule--color, var(--color--base--100));
    margin: 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
}

.header-top,
.header-bottom {
    background-color: var(--color--navy);
}

.header-top {
    height: var(--header--top-height);
    color: var(--color--footer-text);
}

.header-top-inner,
.header-main-inner,
.header-bottom-inner {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-top-inner {
    justify-content: flex-end;
    gap: var(--spacing--2xl);
}

.header-contact {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing--sm);
    --color-text: inherit;
}

.header-contact:hover {
    --color-text: var(--color--base--0);
}

.header-contact .icon {
    font-size: 0.85em;
}

.header-main {
    position: relative;
    height: var(--header--main-height);
    background-color: var(--color--base--0);
    color: var(--color--ink);
    box-shadow: var(--box--shadow);
    z-index: 2;
}

.header-logo {
    position: relative;
    z-index: 3;
    display: block;
    flex-shrink: 0;
    height: var(--logo--height);
}

.header-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.header-bottom {
    position: relative;
    z-index: 1;
    height: var(--header--bottom-height);
    color: var(--color--light);
    box-shadow: var(--box--shadow);
}

.header-bottom-inner {
    justify-content: flex-end;
}

/* Social icons (header + footer) */
.socials {
    display: flex;
    gap: var(--spacing--xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-link {
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    font-size: var(--size--9);
    --color-text: var(--social--color);
}

.social-link:hover {
    --color-text: var(--color--base--0);
    background-color: var(--social--color);
}

.social-facebook { --social--color: var(--color--facebook); }
.social-instagram { --social--color: var(--color--instagram); }

/* Main navigation */
.main-nav {
    margin-inline-start: auto;
    margin-inline-end: calc(var(--nav--item-padding) * -1); /* last item's text sits on the container edge */
    height: 100%;
}

.nav-list {
    display: flex;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
    height: var(--header--main-height);
    padding: 0 var(--nav--item-padding);
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    --color-text: inherit;
}

@media (max-width: 1280px) {
    .nav-link {
        font-size: var(--size--8);
    }
}


.nav-link:hover,
.nav-link[aria-current="page"],
.nav-item:hover > .nav-link,
.nav-item.is-open > .nav-link,
.has-current > .nav-link {
    color: var(--color--accent);
}

.submenu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-width: 16rem;
    list-style: none;
    margin: 0;
    padding: var(--spacing--sm) 0;
    background-color: var(--color--navy);
    box-shadow: var(--box--shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--spacing--sm));
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.nav-item.is-open > .submenu {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.submenu-link {
    display: block;
    padding: 0.6em var(--spacing--xl);
    font-size: var(--size--8);
    white-space: nowrap;
    --color-text: var(--color--light);
}

.submenu-link:hover,
.submenu-link[aria-current="page"] {
    --color-text: var(--color--accent);
}

.nav-toggle {
    display: none;
    margin-inline-start: auto;
    padding: var(--spacing--sm);
    background: none;
    border: 0;
    color: inherit;
    font-size: var(--size--12);
}

.nav-toggle .icon-close,
.main-nav.is-open .nav-toggle .icon-open {
    display: none;
}

.main-nav.is-open .nav-toggle .icon-close {
    display: block;
}

@media (max-width: 1080px) {
    .main-nav {
        display: flex;
        align-items: center;
        margin-inline-end: 0;
    }

    .nav-toggle {
        display: block;
    }

    .nav-list {
        display: none;
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        height: auto;
        max-height: calc(100svh - var(--header--top-height) - var(--header--main-height));
        overflow-y: auto;
        flex-direction: column;
        padding-block: var(--spacing--sm);
        background-color: var(--color--base--0);
        box-shadow: var(--box--shadow);
    }

    .main-nav.is-open .nav-list {
        display: flex;
    }

    .nav-link {
        height: auto;
        width: 100%;
        padding: 0.6em var(--header--padding-inline);
        font-size: var(--size--9);
    }

    .submenu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        min-width: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .submenu-link {
        padding-inline-start: calc(var(--header--padding-inline) + var(--spacing--xl));
        font-size: var(--size--8);
        --color-text: var(--color--ink);
    }
}

@media (max-width: 767px) {
    .header-top-inner {
        justify-content: space-between;
        gap: var(--spacing--md);
        font-size: var(--size--7);
    }

    .header-contact .label {
        display: none;
    }

    .header-contact .icon {
        font-size: var(--size--8);
    }

}

/* --------------------------------------------------------------------------
   Slider (home hero, product heroes, boat galleries)
   -------------------------------------------------------------------------- */
.slider {
    position: relative;
    overflow: hidden;
}

.slider-track {
    display: flex;
    height: 100%;
    transition: transform 1s ease;
}

.slider-slide {
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider[data-effect="fade"] .slider-track {
    display: grid;
    transition: none;
}

.slider[data-effect="fade"] .slider-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 1s ease;
}

.slider[data-effect="fade"] .slider-slide.is-active,
.slider[data-effect="fade"]:not(.is-ready) .slider-slide:first-child {
    opacity: 1;
}

.slider-dots {
    position: absolute;
    inset-block-end: var(--spacing--xl);
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: var(--spacing--sm);
    z-index: 2;
}

.slider-dot {
    width: var(--size--8);
    height: var(--size--8);
    padding: 0;
    border: 0;
    border-radius: var(--radius--xxs);
    background-color: var(--slider--dot, var(--color--base--0));
}

.slider-dot[aria-current="true"] {
    background-color: var(--color--primary--original);
}

.slider-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xs);
    margin-block-start: var(--spacing--xs);
}

.slider-thumb {
    width: 4rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.slider-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-thumb:hover,
.slider-thumb[aria-current="true"] {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
/* Shared tint for every photo/slider hero: sits above the media, below the content */
.hero-tint {
    position: relative;
    isolation: isolate;
}

.hero-tint::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(180deg, var(--hero--tint-top) 0%, var(--hero--tint-mid) 45%, var(--hero--tint-bottom) 100%);
    pointer-events: none;
}

.home-hero {
    display: grid;
    place-items: center;
    min-height: var(--hero--height);
    color: var(--color--base--0);
    overflow: hidden;
}

.home-hero .slider {
    position: absolute;
    inset: 0;
}

/* Frosted navy glass panel — shared by the home hero and the tour cards */
.glass-panel {
    position: relative;
    z-index: 2;
    border: 1px solid var(--hero--panel-border);
    border-block-start: var(--size--2) solid var(--color--primary--original);
    border-radius: var(--radius--lg);
    background-color: var(--hero--panel-bg);
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    box-shadow: var(--hero--panel-shadow);
    color: var(--color--base--0);
    --divider--color: var(--color--primary--300);
    --rule--color: var(--hero--panel-border);
    --divider--thickness: var(--size--1);
}

/* Small uppercase light-blue line between rules (use with .divider) */
.panel-kicker {
    font-size: var(--panel--kicker-size, var(--font--size--4));
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero-content {
    max-width: 48rem;
    margin-inline: var(--section--padding-inline);
    padding: var(--spacing--5xl) var(--spacing--7xl);
}

.home-hero-intro {
    color: inherit;
    font-size: var(--font--size--4);
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    text-wrap: pretty;
}

.home-hero-title {
    color: inherit;
    text-align: center;
    text-shadow: var(--text--shadow);
}

@media (max-width: 767px) {
    .home-hero-content {
        margin-inline: var(--spacing--lg);
        padding: var(--spacing--3xl) var(--spacing--xl);
    }
}

/* --------------------------------------------------------------------------
   Full-height image hero (E-Boats page)
   -------------------------------------------------------------------------- */
.image-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: var(--hero--height);
    background-size: cover;
    background-position: center;
}

.image-hero-img,
.contact-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-hero-arrow {
    position: relative;
    z-index: 2;
    margin-block-end: var(--spacing--7xl);
    font-size: var(--size--32);
    --color-text: var(--color--base--0);
}

.image-hero-arrow:hover {
    --color-text: var(--color--accent);
}

/* --------------------------------------------------------------------------
   Icon boxes, downloads, video
   -------------------------------------------------------------------------- */
.iconbox {
    display: flex;
    gap: var(--spacing--xl);
    align-items: flex-start;
}

.iconbox-icon {
    font-size: var(--size--16);
    color: var(--color--primary--original);
}

.iconbox-title {
    margin-block-end: var(--spacing--md);
}

.downloads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing--xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing--sm);
    text-align: center;
    font-weight: 400;
    --color-text: var(--text--color--heading);
}

.download .icon {
    font-size: var(--size--16);
    color: var(--color--primary--original);
}

.download:hover .icon {
    color: var(--color--accent);
}

.download-lg {
    font-size: var(--font--size--5);
    line-height: 1.4;
}

.aside-downloads {
    --rule--color: var(--color--base--100);
    padding-block-start: var(--spacing--2xl);
}

.video {
    aspect-ratio: 16 / 9;
    width: 100%;
    background-color: var(--color--base--1000);
}

.video iframe {
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Boat pages
   -------------------------------------------------------------------------- */
.boat-slider .slider-track {
    aspect-ratio: 352 / 348;
}

.boat-slider .slider-slide img {
    object-fit: contain;
}

.skipper-slider .slider-track {
    aspect-ratio: 1;
}

.feature-list {
    padding-inline-start: var(--spacing--xl);
}

.feature-list li + li {
    margin-block-start: var(--spacing--md);
}

.cta-big {
    --font-size: var(--size--12);
    --spacing-block: var(--spacing--3xl);
    width: 100%;
}

/* --------------------------------------------------------------------------
   Virtual tour
   -------------------------------------------------------------------------- */
.vr-section {
    padding: 0;
    background-color: var(--color--navy);
}

.vr-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: var(--hero--height);
    border: 0;
}

/* --------------------------------------------------------------------------
   Gallery (masonry + lightbox)
   -------------------------------------------------------------------------- */
.gallery-grid {
    columns: 3;
    column-gap: var(--spacing--xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-grid li {
    break-inside: avoid;
    margin-block-end: var(--spacing--xl);
}

.gallery-grid a {
    display: block;
}

.gallery-grid img {
    width: 100%;
    transition: opacity var(--transition);
}

.gallery-grid a:hover img {
    opacity: 0.85;
}

@media (max-width: 767px) {
    .gallery-grid {
        columns: 2;
    }
}

.lightbox[open] {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100svh;
    max-width: none;
    max-height: none;
    padding: var(--spacing--7xl);
    border: 0;
    border-radius: 0;
    background-color: var(--color--base--1000);
    box-shadow: none;
}

.lightbox::backdrop {
    background-color: var(--color--base--1000);
}

.lightbox img {
    max-width: 100%;
    max-height: calc(100svh - var(--spacing--7xl) * 2);
    object-fit: contain;
}

.lightbox-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--size--24);
    height: var(--size--24);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color--shade);
    color: var(--color--base--0);
    font-size: var(--size--10);
}

.lightbox-btn:hover {
    background-color: var(--color--accent);
}

.lightbox-close { inset-block-start: var(--spacing--lg); inset-inline-end: var(--spacing--lg); }
.lightbox-prev { inset-inline-start: var(--spacing--lg); top: 50%; translate: 0 -50%; }
.lightbox-next { inset-inline-end: var(--spacing--lg); top: 50%; translate: 0 -50%; }

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.contact-hero {
    /* text runs across the whole photo: stronger, even tint */
    --hero--tint-top: oklch(from var(--color--navy) l c h / 0.6);
    --hero--tint-mid: oklch(from var(--color--navy) l c h / 0.5);
    --hero--tint-bottom: oklch(from var(--color--navy) l c h / 0.7);
    position: relative;
    background-size: cover;
    background-position: center;
    color: var(--color--base--0);
}

.contact-hero > .container {
    position: relative;
    z-index: 2;
}

.contact-map {
    display: block;
    width: 100%;
    height: var(--size--192);
    border: 0;
}

.contact-hours {
    color: inherit;
    line-height: 2.5;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--md);
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing--md);
}

.contact-list a {
    --color-text: var(--color--base--0);
}

.contact-list a:hover {
    --color-text: var(--color--primary--original);
}

/* CraftForms embeds — contact form and the two booking forms
   embed.js fetches each form at runtime and swaps it into .form-slot, appending the
   plugin's own stylesheets to <head> — i.e. AFTER this file. Every rule below therefore
   carries one class/element more than the plugin's default skin, so it still wins where
   the two touch the same property.

   Rendered markup: .form-slot > craftforms-form > form.wp-block-craftforms-form
   Variants:  .cf-eboats-contact — labels hidden (.sr-only), placeholders only, so it
                                   reproduces the old WordPress contact form
              .cf-eboats-booking — visible labels, seasonal datepicker, live total
   -------------------------------------------------------------------------- */
.form-slot {
    /* Doubles as the height of embed.js's spinner, so the page doesn't jump on load */
    --craftforms-embed-loader-color: var(--color--primary--original);
    --craftforms-embed-loader-height: 20rem;
    min-height: 20rem;
}

.form-slot craftforms-form {
    display: block;
}

/* Most of the look is just a re-token — the plugin's default skin reads all of these. */
.form-slot form.wp-block-craftforms-form {
    --cf-field-gap: var(--spacing--xs);
    --cf-options-gap: var(--spacing--sm);
    --cf-input-padding: var(--spacing--md) var(--spacing--lg);
    --cf-input-border-color: transparent;
    --cf-input-border-radius: var(--radius--none);
    --cf-input-font-size: var(--size--8);
    --cf-focus-color: var(--color--primary--original);
    --cf-color-error-text: var(--color--accent);

    display: flex;
    flex-direction: column;
    gap: var(--spacing--xl);
}

/* WordPress' layout stylesheet spaces children with margins; the flex gap above owns it */
.form-slot form.wp-block-craftforms-form > * {
    margin-block: 0;
}

/* CraftForms prints its own red asterisk inside the label. The framework's generic
   label:has( + [required] )::after rule above would add a second "(*)" next to it. */
.form-slot form.wp-block-craftforms-form label::after {
    content: none;
}

/* Safety net. The contact form hides its labels (.sr-only in the form markup) because
   the placeholders carry the field names — that's what the original WordPress form did.
   If an embed ever arrives WITHOUT placeholders the result is a column of blank boxes
   with no clue what goes where, which is exactly what happened to the copy imported
   into craftforms.app. Show the label again whenever its field has no placeholder, so
   the form degrades to "labelled" instead of "unusable".
   Scoped to .form-field, which only the text/textarea fields carry — the privacy
   checkbox group has its own visible choice-label and must stay hidden. */
.form-slot .form-field:has(> input:not([placeholder]), > textarea:not([placeholder])) > label.sr-only {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: var(--size--7);
    font-weight: 500;
    color: var(--text--color--heading);
}

/* Two-field rows. WordPress compiles the block's minimumColumnWidth to
   repeat(auto-fill, …), so in a container wide enough for three 280px tracks a pair of
   fields fills two and stops short, leaving a ragged empty third. auto-fit collapses
   the empty track so the pair spans the full width; min(280px, 100%) still drops them
   to one column on narrow screens. */
.form-slot form.wp-block-craftforms-form .wp-block-group.is-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Inputs ------------------------------------------------------------------- */
.form-slot form.wp-block-craftforms-form :is(.wp-block-craftforms-text-input,
                                             .wp-block-craftforms-textarea,
                                             .craftforms-datepicker-input) {
    width: 100%;
    background-color: var(--color--base--100);
    color: var(--text--color--content);
    font-family: inherit;
    line-height: 1.4;
}

/* The original form showed the message box at the same height as the single-line
   inputs, so the block is set to rows="1" (see the form in WordPress). Dragging it
   taller stays available; for a roomier box by default, raise rows there. */
.form-slot form.wp-block-craftforms-form .wp-block-craftforms-textarea {
    resize: vertical;
}

.form-slot form.wp-block-craftforms-form :is(.wp-block-craftforms-text-input,
                                             .wp-block-craftforms-textarea,
                                             .craftforms-datepicker-input)::placeholder {
    color: var(--color--muted);
    opacity: 1;
}

.form-slot form.wp-block-craftforms-form :is(.wp-block-craftforms-text-input,
                                             .wp-block-craftforms-textarea,
                                             .craftforms-datepicker-input):focus-visible {
    outline: var(--size--1) solid var(--color--primary--original);
    outline-offset: calc(var(--size--1) * -1);
}

/* Privacy consent — the only checkbox on the site (contact form) */
.form-slot form.wp-block-craftforms-form .wp-block-craftforms-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing--md);
    cursor: pointer;
    font-size: var(--size--8);
    line-height: 1.4;
}

.form-slot form.wp-block-craftforms-form .wp-block-craftforms-checkbox-option input[type="checkbox"] {
    flex: none;
    appearance: none;
    width: var(--size--12);
    height: var(--size--12);
    margin: 0;
    border: none;
    background-color: var(--color--base--100);
    cursor: pointer;
    transition: background-color var(--transition);
}

.form-slot form.wp-block-craftforms-form .wp-block-craftforms-checkbox-option input[type="checkbox"]:checked {
    background-color: var(--color--primary--original);
    /* Checkmark, drawn as a mask so it takes the tick colour from the box itself */
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12L20.2 5.6z'/%3E%3C/svg%3E") center / 80% no-repeat,
           linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.form-slot form.wp-block-craftforms-form .wp-block-craftforms-checkbox-option input[type="checkbox"]:focus-visible {
    outline: var(--size--1) solid var(--color--primary--original);
    outline-offset: var(--size--1);
}

/* Submit ------------------------------------------------------------------- */
.form-slot form.wp-block-craftforms-form .wp-block-craftforms-submit-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing--sm);
    align-self: flex-start;
    width: auto;
    padding: var(--spacing--md) var(--spacing--xl);
    border-radius: var(--radius--xs);
    background-color: var(--color--primary--original);
    color: var(--color--base--0);
    font-family: inherit;
    font-size: var(--size--8);
    font-weight: 700;
    transition: background-color var(--transition);
}

/* Envelope icon, as on the original contact form */
.form-slot form.cf-eboats-contact .wp-block-craftforms-submit-button::before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-slot form.wp-block-craftforms-form .wp-block-craftforms-submit-button:where(:hover, :focus-visible) {
    background-color: var(--color--primary--600);
}

.form-slot form.wp-block-craftforms-form .wp-block-craftforms-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 767px) {
    .form-slot form.wp-block-craftforms-form .wp-block-craftforms-submit-button {
        align-self: stretch;
        justify-content: center;
    }
}

/* Booking forms ------------------------------------------------------------
   Unlike the contact form these keep their labels: a date, a boat count and a
   head count are not self-evident from a placeholder alone. */
.form-slot form.cf-eboats-booking .wp-block-craftforms-label {
    display: block;
    font-size: var(--size--7);
    font-weight: 500;
    color: var(--text--color--heading);
}

/* The date field opens a calendar on click, so give the empty box an affordance —
   otherwise it reads as a plain disabled input. */
.form-slot form.cf-eboats-booking .craftforms-datepicker-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23808080'%3E%3Cpath d='M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing--lg) center;
    background-size: 1em;
    cursor: pointer;
}

/* Time slots. Sizing and the visible resting state now ship with the plugin, so this
   is only a palette swap: CraftForms exposes every slot colour as a --cf-slot-*
   custom property, which inherits down to the buttons. Setting variables rather than
   re-declaring properties means nothing here has to out-specify the plugin's own
   rules — those sit at (0,2,1) to survive its internal `button` reset. */
.form-slot form.cf-eboats-booking {
    --cf-slot-gap: var(--spacing--sm);
    --cf-slot-radius: var(--radius--xs);
    --cf-slot-bg: var(--color--base--100);
    --cf-slot-border: var(--color--base--300);
    --cf-slot-color: var(--text--color--content);
    --cf-slot-border-hover: var(--color--primary--original);
    --cf-slot-color-hover: var(--color--primary--original);
    --cf-slot-bg-selected: var(--color--primary--original);
    --cf-slot-border-selected: var(--color--primary--original);
    --cf-slot-color-selected: var(--color--base--0);
    --cf-slot-bg-selected-hover: var(--color--primary--600);
    --cf-slot-border-selected-hover: var(--color--primary--600);
}

/* Same for the calendar's own chrome, which ships WordPress blue (#3858e9) and a
   green selected day — both read as someone else's UI next to the site palette. */
.form-slot form.cf-eboats-booking .datepicker__close-button,
.form-slot form.cf-eboats-booking .datepicker__submit-button {
    border-radius: var(--radius--xs);
    background-color: var(--color--primary--original);
}

.form-slot form.cf-eboats-booking .datepicker__close-button:hover,
.form-slot form.cf-eboats-booking .datepicker__submit-button:hover {
    background-color: var(--color--primary--600);
}

.form-slot form.cf-eboats-booking .datepicker__clear-button {
    border-radius: var(--radius--xs);
}

/* NOTE: there is deliberately no rule for --month-day--selected here. Reopening the
   picker re-renders the calendar without restoring the selection classes to the live
   cells, so the previously chosen day shows no highlight at all — verified with an
   !important probe, which also had no effect. That is a plugin-side bug; styling it
   from here would be dead CSS. The chosen date is still shown in the input. */

/* Live total */
.form-slot form.cf-eboats-booking .wp-block-craftforms-infoblock p {
    margin-block: 0;
}

.form-slot form.cf-eboats-booking .wp-block-craftforms-infoblock p + p {
    margin-block-start: var(--spacing--sm);
}

.funding-logos {
    display: block;
    margin-inline: auto;
    width: fit-content;
}

/* --------------------------------------------------------------------------
   Product (tour) pages
   -------------------------------------------------------------------------- */
.tour-hero {
    --tour--hero-height: 80vh;
    position: relative;
    height: var(--tour--hero-height);
    min-height: 28rem;
}

.tour-hero-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-block-end: calc(var(--tour--hero-height) / 10);
    pointer-events: none;
}

.tour-hero .slider {
    height: 100%;
}

.tour-card {
    width: var(--tour--card-width);
    max-width: 100%;
    padding: var(--spacing--4xl) var(--spacing--5xl);
    text-align: center;
    pointer-events: auto;
    --panel--kicker-size: var(--size--7);
}

.tour-card-title {
    color: inherit;
    font-size: var(--font--size--1);
    line-height: 1.15;
    text-shadow: var(--text--shadow);
    text-wrap: balance;
}

.tour-card-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--spacing--md);
    color: var(--color--primary--200);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--size--7);
}

.tour-card-price strong {
    color: var(--color--base--0);
    font-size: var(--size--16);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.tour-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing--sm);
    min-height: var(--size--24);
    border-radius: var(--radius--md);
    background-color: var(--color--accent);
    box-shadow: 0 0.5rem 1.25rem oklch(from var(--color--accent) l c h / 0.35);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    --color-text: var(--color--base--0);
}

.tour-cta:hover {
    background-color: var(--color--accent--dark);
    transform: translateY(calc(var(--size--1) * -1));
    box-shadow: 0 0.75rem 1.5rem oklch(from var(--color--accent) l c h / 0.45);
    --color-text: var(--color--base--0);
}

.tour-cta .icon {
    transition: transform var(--transition);
}

.tour-cta:hover .icon {
    transform: translateX(var(--size--2));
}

@media (max-width: 767px) {
    .tour-hero {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .tour-hero .slider {
        aspect-ratio: 16 / 10;
    }

    .tour-hero-inner {
        position: static;
        display: block;
        max-width: none;
        padding: 0;
    }

    .tour-card {
        width: auto;
        max-width: none;
        border-radius: 0;
        border-inline: 0;
        background-color: var(--color--navy);
        box-shadow: none;
        padding: var(--spacing--3xl) var(--spacing--2xl);
    }
}

/* Single column: the booking <aside> was dropped from both product pages — it only
   ever held an empty placeholder, and the form version puts the form in the content
   column instead. */
.tour-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing--5xl);
    padding-block: var(--spacing--4xl) var(--spacing--5xl);
}

.tour-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--4xl);
    min-width: 0;
}

.tour-quicknav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--color--primary--original);
}

.tour-quicknav a {
    display: inline-flex;
    padding: var(--spacing--md) var(--spacing--2xl);
    font-size: var(--size--8);
    text-transform: uppercase;
    --color-text: var(--color--base--0);
}

.tour-quicknav a:hover {
    --color-text: var(--color--navy);
}

.tour-part {
    padding: 0; /* not a page band: drop the framework's section padding */
    color: var(--color--base--1000);
    font-size: var(--size--8);
    line-height: 1.7;
}

.tour-part-title {
    display: flex;
    align-items: center;
    gap: var(--spacing--lg);
    margin-block-end: var(--spacing--lg);
    font-size: var(--font--size--2);
    line-height: 1.35;
}

.tour-part-title::after {
    content: "";
    flex: 1;
    border-block-end: 3px solid var(--color--primary--original);
}

.tour-part-body p {
    color: inherit;
    margin-block: 0 var(--spacing--lg);
}

.tour-part-body > :last-child {
    margin-block-end: 0;
}

.tour-part-body ul {
    list-style: square;
    padding-inline-start: var(--spacing--2xl);
}

.tour-part-body li {
    margin-block: var(--spacing--xxs);
}

.tour-part-body li::marker {
    color: var(--color--primary--original);
}

.tour-price {
    display: flex;
    margin: 0;
    padding-block: var(--spacing--xxs);
    border-block-end: 1px solid oklch(from var(--color--primary--original) l c h / 0.38);
}

.tour-price dt {
    flex: 0 0 min(390px, 50%);
}

.tour-price dd {
    margin: 0;
    color: var(--color--accent);
}

.tour-gallery {
    max-width: 680px;
    padding-block-end: var(--spacing--3xl);
    --slider--dot: oklch(0.8 0 0 / 0.61);
}

.tour-gallery .slider-track {
    aspect-ratio: 1;
}

.tour-gallery .slider-dots {
    inset-block-end: 0;
}

.tour-map {
    display: block;
    width: 100%;
    height: var(--size--192);
    border: 0;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal {
    font-size: var(--size--8);
}

.legal :where(h2, h3, h4) {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding: var(--spacing--3xl) var(--section--padding-inline);
    background-color: var(--color--navy);
    color: var(--color--footer-text);
    text-align: center;
    font-size: var(--size--7);
}

.site-footer p {
    color: inherit;
}

.site-footer a {
    --color-text: var(--color--light);
}

.site-footer a:hover {
    --color-text: var(--color--accent);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing--md);
}

.footer-inner > .rule {
    width: 100%;
    --rule--color: var(--color--title);
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing--lg);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--size--6);
}

.footer-menu a {
    display: block;
    padding: 0.8em;
    background-color: var(--color--shade);
}

/* --------------------------------------------------------------------------
   GTranslate switcher (third-party widget, lives in the bottom header bar)
   -------------------------------------------------------------------------- */
.gtranslate_wrapper {
    font-size: var(--size--7);
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Cookie consent banner (built by assets/js/consent.js)
   -------------------------------------------------------------------------- */
.cookie-banner {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 200;
    padding: var(--spacing--md) var(--section--padding-inline);
    background-color: var(--color--navy);
    color: var(--color--light);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.25);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing--md) var(--spacing--xl);
}

.cookie-banner-text {
    flex: 1;
    margin: 0;
    color: inherit;
    font-size: var(--size--8);
    line-height: 1.5;
}

.cookie-banner-text a {
    --color-text: var(--color--light);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: var(--spacing--sm);
    flex-shrink: 0;
}

.cookie-button {
    --spacing-inline: var(--spacing--xl);
    --background-color: var(--color--light);
    --color-text: var(--color--navy);
    --border-color: var(--color--light);
}

.cookie-button:where(:hover, :focus-visible) {
    --background-color: var(--color--accent);
    --color-text: var(--color--light);
    --border-color: var(--color--accent);
}

@media (max-width: 767px) {
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner-actions > * {
        flex: 1;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .slider-track,
    .slider-slide {
        transition: none;
    }
}