@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600;700&display=swap");

*,
::before,
::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:where(ul, ol):where([class]) {
    padding-left: 0;
}

body,
:where(blockquote, figure):where([class]) {
    margin: 0;
}

:where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl):where([class]) {
    margin-block: 0;
}

:where(dd[class]) {
    margin-left: 0;
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none;
}

:where(ul[class]) {
    list-style: none;
}

:where(address[class]) {
    font-style: normal;
}

p {
    margin-block: 0;
}

p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom);
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

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

input[type="search"]::-webkit-search-cancel-button {
    filter: brightness(0) invert(1);
}

html {
    height: 100%;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
:has(:target) {
    scroll-behavior: smooth;
}

html,
body {
    -webkit-overflow-scrolling: touch !important;
}

body {
    width: 100%;
    min-height: 100%;
    line-height: 1.5;
}

body.header-search-open {
    overflow-x: hidden;
}

a:where([class]) {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

button,
label {
    cursor: pointer;
}

:where([fill]:not([fill=none],
        [fill^=url])) {
    fill: currentColor;
}

:where([stroke]:not([stroke=none],
        [stroke^=url])) {
    stroke: currentColor;
}

svg * {
    -webkit-transition-property: fill, stroke;
    transition-property: fill, stroke;
}

:where(table) {
    border-collapse: collapse;
    border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Chrome / Edge / Opera / Safari */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-legend);
    border-radius: 8px;
}

/*

Inter

Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Black 900

*/
/* inter-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/inter-v18-latin-300.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-300.woff2") format("woff2"), url("../fonts/inter-v18-latin-300.woff") format("woff"), url("../fonts/inter-v18-latin-300.ttf") format("truetype"), url("../fonts/inter-v18-latin-300.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* inter-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/inter-v18-latin-regular.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-regular.woff2") format("woff2"), url("../fonts/inter-v18-latin-regular.woff") format("woff"), url("../fonts/inter-v18-latin-regular.ttf") format("truetype"), url("../fonts/inter-v18-latin-regular.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* inter-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/inter-v18-latin-500.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-500.woff2") format("woff2"), url("../fonts/inter-v18-latin-500.woff") format("woff"), url("../fonts/inter-v18-latin-500.ttf") format("truetype"), url("../fonts/inter-v18-latin-500.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* inter-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/inter-v18-latin-600.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-600.woff2") format("woff2"), url("../fonts/inter-v18-latin-600.woff") format("woff"), url("../fonts/inter-v18-latin-600.ttf") format("truetype"), url("../fonts/inter-v18-latin-600.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* inter-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/inter-v18-latin-700.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-700.woff2") format("woff2"), url("../fonts/inter-v18-latin-700.woff") format("woff"), url("../fonts/inter-v18-latin-700.ttf") format("truetype"), url("../fonts/inter-v18-latin-700.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* inter-800 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/inter-v18-latin-800.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-800.woff2") format("woff2"), url("../fonts/inter-v18-latin-800.woff") format("woff"), url("../fonts/inter-v18-latin-800.ttf") format("truetype"), url("../fonts/inter-v18-latin-800.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* inter-900 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/inter-v18-latin-900.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/inter-v18-latin-900.eot?#iefix") format("embedded-opentype"), url("../fonts/inter-v18-latin-900.woff2") format("woff2"), url("../fonts/inter-v18-latin-900.woff") format("woff"), url("../fonts/inter-v18-latin-900.ttf") format("truetype"), url("../fonts/inter-v18-latin-900.svg#Inter") format("svg");
    /* Legacy iOS */
}

/* newsreader-600italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 600;
    src: url("../fonts/newsreader-v20-latin-600italic.eot");
    /* IE9 Compat Modes */
    src: url("../fonts/newsreader-v20-latin-600italic.eot?#iefix") format("embedded-opentype"), url("../fonts/newsreader-v20-latin-600italic.woff2") format("woff2"), url("../fonts/newsreader-v20-latin-600italic.woff") format("woff"), url("../fonts/newsreader-v20-latin-600italic.ttf") format("truetype"), url("../fonts/newsreader-v20-latin-600italic.svg#Newsreader") format("svg");
    /* Legacy iOS */
}

/* newsreader-500italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/newsreader-v26-latin-500italic.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/newsreader-v26-latin-500italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/newsreader-v26-latin-500italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/newsreader-v26-latin-500italic.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/newsreader-v26-latin-500italic.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/newsreader-v26-latin-500italic.svg#Newsreader') format('svg');
    /* Legacy iOS */
}

@font-face {
    font-family: "Material Symbols";
    src: url("../fonts/Material_Symbols_Rounded/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Material Icons";
    src: url("../fonts/Material_Icons_Round/MaterialIconsRound-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

.mf-icon {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* або інший розмір */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.m-icon {
    font-family: "Material Symbols";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

:root {
    --color-brand: #B5FB02;
    --color-brand-dark: #C2FA33;
    --color-brand-dark-02: #527300;
    --color-green-dark: #394233;
    --color-orange-01: #FFA600;
    --color-red-01: #ff0000;
    --color-red-dark: #aa3838;
    --color-light: #FFFFFF;
    --color-modal: var(--color-background-02);
    --color-header-menu: #fff9ee;
    --color-top: #141618;
    --color-background-01: #181A1D;
    --color-background-02: #1E2025;
    --color-gray-light-01: #BCBCBC;
    --color-gray-light-02: #DADADA;
    --color-gray-light-02-rgba-50: rgba(218, 218, 218, 0.5);
    --color-gray-light-03: #DDDDDD;
    --color-gray-light-04: #EFEFEF;
    --color-gray-light-05: #55545E;
    --color-gray: #9A9A9A;
    --color-gray-02: #494949;
    --color-gray-03: #6C6767;
    --color-gray-04: #4B4E57;
    --color-gray-05: #67696C;
    --color-gray-06: #666666;
    --color-dark: #0E0F12;
    --color-line: #66666653;
    --color-divider: rgba(217, 217, 217, 0.09);
    --color-legend: #282A2F;
    --color-legend-02: #353840;
    --color-secondary-gray-light: rgba(217, 217, 217, 0.09);
    --color-help-info: #7F7F7F;
    --font-family-base: "Inter", sans-serif;
    --font-family-accent: "Newsreader";
    --font-family-ui: var(--font-family-base);
    --font-family-heading: var(--font-family-base);
    --font-family-display: var(--font-family-accent);
    --container-width: 120rem;
    --container-padding-x: clamp(0.625rem, 0.1964285714rem + 2.1428571429vw, 2.125rem);
    --transition-duration: 0.3s;
    --transition-duration-fast: 0.15s;
    --transition-timing: ease;
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --page-section-padding-block: clamp(var(--space-8), 4vw, var(--space-12));
    --products-sticky-top: calc(5rem + var(--page-section-padding-block));
    --products-sticky-top-tablet: 5rem;
    --products-sticky-top-mobile: clamp(3rem, 2.1071rem + 4.4643vw, 4.25rem);
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999rem;
    --font-size-caption: 0.75rem;
    --font-size-small: 0.875rem;
    --font-size-button-small: 0.875rem;
    --font-size-button-medium: 0.9375rem;
    --font-size-body: 1rem;
    --font-size-button-large: 1rem;
    --font-size-navigation: 0.9375rem;
    --font-size-large: 1.25rem;
    --font-size-h5: 1.375rem;
    --font-size-h4: 1.75rem;
    --font-size-h3: 2.25rem;
    --font-size-h2: 3rem;
    --font-size-h2-accent: 3.375rem;
    --font-size-hero-h1: 4rem;
    --font-size-hero-accent: 4.1rem;
    --font-size-2xs: var(--font-size-caption);
    --font-size-xs: var(--font-size-caption);
    --font-size-sm: var(--font-size-small);
    --font-size-base: var(--font-size-body);
    --font-size-lg: var(--font-size-large);
    --font-size-xl: var(--font-size-h5);
    --font-size-2xl: var(--font-size-h4);
    --font-size-3xl: var(--font-size-h3);
    --font-size-4xl: var(--font-size-h2);
    --font-size-5xl: var(--font-size-hero-h1);
    --font-size-fluid-sm: var(--font-size-small);
    --font-size-fluid-base: var(--font-size-body);
    --font-size-fluid-lg: var(--font-size-large);
    --font-size-fluid-title: var(--font-size-h2);
    --font-size-fluid-display: var(--font-size-hero-h1);
    --line-height-caption: 1.125rem;
    --line-height-small: 1.375rem;
    --line-height-button-small: 0.875rem;
    --line-height-button-medium: 0.9375rem;
    --line-height-button-large: 1rem;
    --line-height-navigation: 1.375rem;
    --line-height-body: 1.625rem;
    --line-height-large: 2rem;
    --line-height-h5: 1.875rem;
    --line-height-h4: 2.25rem;
    --line-height-h3: 2.75rem;
    --line-height-h2: 3.5rem;
    --line-height-hero: 4.5rem;
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-base: var(--line-height-body);
    --line-height-relaxed: 1.65;
    --line-height-button: var(--line-height-button-medium);
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.03em;
    --text-body-size: var(--font-size-body);
    --text-body-line-height: var(--line-height-body);
    --text-body-weight: var(--font-weight-regular);
    --text-large-size: var(--font-size-large);
    --text-large-line-height: var(--line-height-large);
    --text-small-size: var(--font-size-small);
    --text-small-line-height: var(--line-height-small);
    --caption-size: var(--font-size-caption);
    --caption-line-height: var(--line-height-caption);
    --caption-weight: var(--font-weight-medium);
    --text-muted-color: var(--color-gray-light-01);
    --heading-color: var(--color-light);
    --heading-font-family: var(--font-family-heading);
    --heading-font-weight: var(--font-weight-semibold);
    --heading-line-height: var(--line-height-tight);
    --heading-letter-spacing: var(--letter-spacing-normal);
    --hero-h1-size: var(--font-size-hero-h1);
    --hero-h1-line-height: var(--line-height-hero);
    --hero-h1-weight: var(--font-weight-semibold);
    --hero-accent-size: var(--font-size-hero-accent);
    --hero-accent-line-height: var(--line-height-hero);
    --hero-accent-weight: var(--font-weight-regular);
    --h2-size: var(--font-size-h2);
    --h2-line-height: var(--line-height-h2);
    --h2-weight: var(--font-weight-semibold);
    --h2-accent-size: var(--font-size-h2-accent);
    --h2-accent-line-height: var(--line-height-h2);
    --h2-accent-weight: var(--font-weight-regular);
    --h3-size: var(--font-size-h3);
    --h3-line-height: var(--line-height-h3);
    --h3-weight: var(--font-weight-semibold);
    --h4-size: var(--font-size-h4);
    --h4-line-height: var(--line-height-h4);
    --h4-weight: var(--font-weight-semibold);
    --h5-size: var(--font-size-h5);
    --h5-line-height: var(--line-height-h5);
    --h5-weight: var(--font-weight-semibold);
    --navigation-size: var(--font-size-navigation);
    --navigation-line-height: var(--line-height-navigation);
    --navigation-weight: var(--font-weight-medium);
    --button-large-size: var(--font-size-button-large);
    --button-large-line-height: var(--line-height-button-large);
    --button-large-padding-y: 1rem;
    --button-large-padding-x: 1.75rem;
    --button-medium-size: var(--font-size-button-medium);
    --button-medium-line-height: var(--line-height-button-medium);
    --button-medium-padding-y: 0.8125rem;
    --button-medium-padding-x: 1.375rem;
    --button-small-size: var(--font-size-button-small);
    --button-small-line-height: var(--line-height-button-small);
    --button-small-padding-y: 0.625rem;
    --button-small-padding-x: 1rem;
    --button-font-weight: var(--font-weight-semibold);
    --button-letter-spacing: 0;
    --button-radius: var(--radius-pill);
    --display-font-family: var(--font-family-display);
    --display-font-style: italic;
    --display-font-weight: var(--font-weight-regular);
    --display-line-height: var(--line-height-hero);
    --control-height-sm: 2.125rem;
    --control-height-md: 2.5625rem;
    --control-height-lg: 3rem;
    --control-padding-x: 1rem;
    --button-gap: 0.5rem;
    --button-shadow-focus: 0 0 0 0.25rem rgba(181, 251, 2, 0.22);
    --hero-button-font-size: 1rem;
    --hero-button-font-weight: var(--font-weight-semibold);
    --hero-button-height: 3.5rem;
    --hero-button-padding-x: 1.75rem;
    --hero-button-radius: var(--radius-pill);
    --hero-button-letter-spacing: -0.01em;
    --hero-button-mobile-font-size: 1rem;
    --hero-button-mobile-height: 3.625rem;
    --hero-button-mobile-padding-x: 1.5rem;
    --hero-button-mobile-radius: var(--radius-pill);
    --hero-button-mobile-min-width: 11.25rem;

    --alert-success-text: var(--color-brand);
    --alert-success-icon: var(--color-brand);
    --alert-success-border: var(--color-brand);
    --alert-success-bg: rgba(30, 32, 37, 0.9);

    --alert-info-text: #02a4fb;
    --alert-info-icon: #02a4fb;
    --alert-info-border: #02a4fb;
    --alert-info-bg: rgba(30, 32, 37, 0.9);

    --alert-warning-text: #FFE08A;
    --alert-warning-icon: #FFB703;
    --alert-warning-border: rgba(255, 183, 3, 0.45);
    --alert-warning-bg: rgba(255, 183, 3, 0.22);

    --alert-error-text: #fb0202;
    --alert-error-icon: #fb0202;
    --alert-error-border: #fb0202;
    --alert-error-bg: rgba(30, 32, 37, 0.9);

    --alert-neutral-text: #EFEFEF;
    --alert-neutral-border: rgba(239, 239, 239, 0.35);
    --alert-neutral-bg: rgba(239, 239, 239, 0.16);
    --header-nav-height: clamp(60px, calc(50.48px + 2.98vw), 80px);
    --mobile-nav-height: 60px;
    --mobile-nav-padding-x: 16px;
}

@media (max-width: 47.99875rem) {
    :root {
        --font-size-large: 1.125rem;
        --font-size-h5: 1.125rem;
        --font-size-h4: 1.375rem;
        --font-size-h3: 1.75rem;
        --font-size-h2: 2.125rem;
        --font-size-h2-accent: 2.375rem;
        --font-size-hero-h1: 2.625rem;
        --font-size-hero-accent: 3rem;
        --line-height-large: 1.75rem;
        --line-height-h5: 1.75rem;
        --line-height-h4: 1.875rem;
        --line-height-h3: 2.25rem;
        --line-height-h2: 2.625rem;
        --line-height-hero: 3rem;
    }
}

#nprogress .bar {
    z-index: 2147483647 !important;
    background: #B5FB02 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px #B5FB02, 0 0 5px #B5FB02 !important;
}

#nprogress .spinner {
    z-index: 2147483647 !important;
}

#nprogress .spinner-icon {
    border-top-color: #B5FB02 !important;
    border-left-color: #B5FB02 !important;
}

.global-mobile-filters {
    display: none !important;
}

@media (max-width: 80rem) {
    :root {
        --container-width: 85.25rem;
    }
}

.container-fluid {
    --bs-gutter-x: 1.5rem;
    /* 16px */
}

@media (min-width: 576px) {
    .container-fluid {
        --bs-gutter-x: 1.5rem;
        /* 24px */
    }
}

@media (min-width: 992px) {
    .container-fluid {
        --bs-gutter-x: 2rem;
        /* 32px */
    }
}

@media (min-width: 1400px) {
    .container-fluid {
        --bs-gutter-x: 4rem;
        /* 64px */
    }
}

@media (min-width: 1800px) {
    .container-fluid {
        --bs-gutter-x: 10rem;
        /* 96px */
    }
}

@media (min-width: 2400px) {
    .container-fluid {
        --bs-gutter-x: 16rem;
        /* 128px */
    }
}

@media (min-width: 1800px) {
    .row>.col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

.mt-1 {
    margin-top: 1rem;
}

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

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
}

.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-4));
}

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

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

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.text-xs {
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-line-height);
}

.text-sm {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
}

.text-base {
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
}

.text-lg {
    font-size: var(--text-large-size);
    line-height: var(--text-large-line-height);
}

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

.heading {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
    color: var(--heading-color);
}

.heading-1 {
    font-size: var(--hero-h1-size);
    font-weight: var(--hero-h1-weight);
    line-height: var(--hero-h1-line-height);
}

.heading-2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
}

.heading-3 {
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
}

.heading-4 {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
}

.heading-5 {
    font-size: var(--h5-size);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
}

.heading-accent {
    font-family: var(--display-font-family);
    font-style: var(--display-font-style);
    font-weight: var(--display-font-weight);
}

.display-text {
    font-family: var(--display-font-family);
    font-style: var(--display-font-style);
    font-weight: var(--display-font-weight);
    line-height: var(--display-line-height);
    color: var(--heading-color);
}

.nav-text {
    font-size: var(--navigation-size);
    font-weight: var(--navigation-weight);
    line-height: var(--navigation-line-height);
}

@media (max-width: 47.99875rem) {

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
}

.captcha-hidden {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

.captcha-visible {
    opacity: 1;
    visibility: visible;
    position: relative;
    top: auto;
    height: auto;
    transition: opacity 0.5s ease-in;
    margin-bottom: 15px;
}

@media (min-width: 64.00125rem) {
    .visible-tablet {
        display: none !important;
    }
}

@media (max-width: 64rem) {
    .hidden-tablet {
        display: none !important;
    }
}

@media (max-width: 47.99875rem) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 47.99875rem) {
    .visible-mobile {
        display: none !important;
    }
}

.is-loading {
    pointer-events: none;
    cursor: wait;
}

.d-flex {
    display: flex;
}

.d-flex.fd-row {
    flex-direction: row;
}

.gap-1 {
    gap: 1rem;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 10;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.relative {
    position: relative;
}

.mb-3 {
    margin-bottom: 3rem;
}

.no-border {
    border: none !important;
}

body {
    font-size: var(--text-body-size);
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: var(--font-family-ui);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    color: var(--color-light);
    background-color: var(--color-background-01);
}

body.no-scroll {
    height: 100vh;
    overflow: hidden;
}

main {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

a,
button,
label,
input,
textarea,
select,
svg * {
    -webkit-transition-duration: var(--transition-duration);
    transition-duration: var(--transition-duration);
}

a {
    color: inherit;
}

a[class] {
    text-decoration: none;
}

button {
    color: inherit;
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

:focus-visible {
    outline: 0.125rem dashed var(--color-light);
    outline-offset: 0.25rem;
    -webkit-transition-duration: 0s !important;
    transition-duration: 0s !important;
}

/* Alpine strips this attribute once a component is initialised. Without the
   rule the attribute did nothing at all, so anything marked with it flashed
   into view before Alpine booted — seven places in the views already relied on
   it working. */
[x-cloak] {
    display: none !important;
}

.loader {
    display: flex;
    position: absolute;
}

.loader {
    animation: l8 1s infinite;
}

@keyframes l8 {
    0% {
        scale: 15%;
    }

    50% {
        scale: 25%;
    }

    100% {
        scale: 15%;
    }
}

.card--skeleton {
    position: relative;
    overflow: hidden;
    width: auto;
    aspect-ratio: 16 / 9;
    background-color: var(--color-background-02);
}

.card-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(115, 115, 115, 0) 0%,
            rgba(115, 115, 115, 0.3) 50%,
            rgba(115, 115, 115, 0) 100%);
    animation: shimmer-move 1.3s infinite;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1000;
}

/* Inside real cards the shimmer sits above the image but below icons (z-index: 10) */
.card>.card-shimmer {
    z-index: 2;
}

@keyframes shimmer-move {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Load more + pagination row */
.products-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Load more button wrapper */
.load-more-wrapper {
    width: 100%;
}

.load-more-btn {
    position: relative;
    display: flex !important;
    width: 100%;
    height: 2.5rem;
    padding: 0 1rem !important;
    background-color: var(--color-background-02) !important;
    border-width: 0.0625rem !important;
    border-color: var(--color-line) !important;
    font-family: var(--font-family-ui);
    font-size: var(--button-medium-size) !important;
    font-weight: var(--navigation-weight) !important;
    line-height: var(--button-medium-line-height) !important;
    letter-spacing: var(--button-letter-spacing);
}

.load-more-btn__text--hidden {
    visibility: hidden;
}

.load-more-btn__loader {
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

@media (max-width: 79.99875rem) {
    .products-bottom {
        gap: 1.25rem;
    }

    .load-more-btn {
        height: 2.25rem;
        font-size: var(--button-small-size) !important;
        line-height: var(--button-small-line-height) !important;
    }
}

@media (max-width: 63.99875rem) {
    .products-bottom {
        gap: 1rem;
    }

    .load-more-btn {
        height: 2rem;
        font-size: var(--button-small-size) !important;
        line-height: var(--button-small-line-height) !important;
    }
}

@media (max-width: 47.99875rem) {
    .products-bottom {
        gap: 0.875rem;
    }

    .load-more-btn {
        height: 1.75rem;
        font-size: var(--caption-size) !important;
        line-height: var(--caption-line-height) !important;
    }
}

/* Empty state */
.empty-state {
    padding: 3rem 0;
    text-align: center;
}

.empty-state__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 2.25rem;
    color: #EFEFEF;
    margin-bottom: 0.75rem;
}

.empty-state__icon {
    width: 1.375rem;
    height: 1.1875rem;
    flex-shrink: 0;
}

.empty-state__subtitle {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1875rem;
    color: #666666;
}

@media (max-width: 63.99875rem) {
    .empty-state__title {
        font-size: 1.5rem;
        line-height: 1.875rem;
        gap: 0.5rem;
    }

    .empty-state__icon {
        width: 1.125rem;
        height: 0.9375rem;
    }

    .empty-state__subtitle {
        font-size: 0.9375rem;
        line-height: 1.125rem;
    }
}

@media (max-width: 47.99875rem) {
    .empty-state {
        padding: 2rem 0;
    }

    .empty-state__title {
        font-size: 1.25rem;
        line-height: 1.5rem;
        gap: 0.375rem;
        flex-wrap: wrap;
    }

    .empty-state__icon {
        width: 0.9375rem;
        height: 0.8125rem;
    }

    .empty-state__subtitle {
        font-size: 0.875rem;
        line-height: 1.0625rem;
    }
}

/* Center align checkbox headers and checkboxes */
.table th.table__fill:nth-child(3),
.table th.table__fill:nth-child(4) {
    text-align: center;
}

.table td.table__fill:nth-child(3),
.table td.table__fill:nth-child(4) {
    text-align: center;
}

.table td.table__fill:nth-child(3) .checkbox__label,
.table td.table__fill:nth-child(4) .checkbox__label {
    justify-content: center;
}

.table__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.table__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* Smooth appearance for NEW products only */
.content__grid .card__wrapper.new-product,
.content__grid .card.new-product {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for new cards only */
.content__grid .card__wrapper.new-product:nth-child(1) {
    animation-delay: 0.05s;
}

.content__grid .card__wrapper.new-product:nth-child(2) {
    animation-delay: 0.1s;
}

.content__grid .card__wrapper.new-product:nth-child(3) {
    animation-delay: 0.15s;
}

.content__grid .card__wrapper.new-product:nth-child(4) {
    animation-delay: 0.2s;
}

.content__grid .card__wrapper.new-product:nth-child(5) {
    animation-delay: 0.25s;
}

.content__grid .card__wrapper.new-product:nth-child(6) {
    animation-delay: 0.3s;
}

.content__grid .card__wrapper.new-product:nth-child(7) {
    animation-delay: 0.35s;
}

.content__grid .card__wrapper.new-product:nth-child(8) {
    animation-delay: 0.4s;
}

.content__grid .card__wrapper.new-product:nth-child(9) {
    animation-delay: 0.45s;
}

/* Expanded project products (All Pack) styling */
.content__grid .card__wrapper--expanded {
    border-left: 3px solid var(--color-brand);
    padding-left: 8px;
}

.content__grid .card__wrapper--expanded.is-entering {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.burger-button {
    width: 1.5rem;
    height: 2rem;
    position: relative;
    color: var(--color-brand);
    background-color: transparent;
    border: none;
}

.burger-button__line {
    width: 1.5rem;
    position: absolute;
    height: 0.125rem;
    left: 0;
    top: 48%;
    border-radius: 1rem;
    background-color: currentColor;
    -webkit-transition: background-color 0.3s ease, width 0.3s ease;
    transition: background-color 0.3s ease, width 0.3s ease;
}

@media (max-width: 47.99875rem) {
    .burger-button__line {
        width: 1.25rem;
    }
}

.burger-button__line:first-child {
    -webkit-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
}

@media (max-width: 47.99875rem) {
    .burger-button__line:first-child {
        -webkit-transform: translateY(-0.43rem);
        transform: translateY(-0.43rem);
    }
}

.burger-button__line:last-child {
    -webkit-transform: translateY(0.5rem);
    transform: translateY(0.5rem);
}

@media (max-width: 47.99875rem) {
    .burger-button__line:last-child {
        -webkit-transform: translateY(0.43rem);
        transform: translateY(0.43rem);
    }
}

.burger-button.active .burger-button__line:first-child {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}

.burger-button.active .burger-button__line:nth-child(2) {
    width: 0;
}

.burger-button.active .burger-button__line:last-child {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

.button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--button-gap);
    min-height: var(--control-height-md);
    padding: var(--button-medium-padding-y) var(--button-medium-padding-x);
    font-size: var(--button-medium-size);
    font-family: var(--font-family-ui);
    font-weight: var(--button-font-weight);
    line-height: var(--button-medium-line-height);
    letter-spacing: var(--button-letter-spacing);
    color: var(--color-dark);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--color-brand);
    border: 0.125rem solid var(--color-brand);
    border-radius: var(--button-radius);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-duration: var(--transition-duration-fast);
    transition-timing-function: var(--transition-timing);
}

.button:focus {
    outline: none;
}

.button:focus-visible {
    outline: 0.125rem solid var(--color-brand);
    outline-offset: 0.1875rem;
    box-shadow: var(--button-shadow-focus);
}

.button:disabled,
.button.disabled,
.button.is-disabled,
.button.dark-disabled,
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

@media (hover: hover) {
    .button:hover:not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]) {
        background-color: var(--color-brand-dark);
        border-color: var(--color-brand-dark);
    }
}

.button--reverse {
    color: var(--color-brand);
    background-color: transparent;
}

.button--reverse:hover:not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]) {
    color: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
    background-color: transparent;
}

.button--none {
    padding: 0 !important;
    color: var(--color-brand);
    background-color: transparent;
    border: none;
}

.button--none svg {
    width: clamp(1.5rem, 1.2142857143rem + 1.4285714286vw, 2.5rem);
    stroke: var(--color-brand);
    stroke-width: 0.125rem;
    border-radius: 6.25rem;
}

.button--none svg:hover {
    color: var(--color-dark);
    background-color: var(--color-brand-dark);
}

.button.sb {
    font-weight: 600 !important;
}

.button.edit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
}

.button.delete {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.125rem;
}

.button.dark {
    color: var(--color-light);
    background-color: var(--color-background-02);
    border-color: var(--color-line);
}

.button.dark:hover:not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]) {
    background-color: var(--color-legend-02);
    border-color: var(--color-line);
}

.button.dark-disabled {
    color: var(--color-gray-04);
    background-color: var(--color-legend);
    border-color: var(--color-line);
}

.button.dark .divider {
    border-right: 1px solid rgba(217, 217, 217, 0.23) !important;
}

.button.light {
    color: var(--color-background-01);
    background-color: var(--color-light);
    border-color: var(--color-light);
}

.button.light:hover:not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]) {
    background-color: var(--color-gray-light-04);
    border-color: var(--color-gray-light-04);
}

.button.orange {
    color: var(--color-background-01);
    background-color: var(--color-orange-01);
    border-color: var(--color-orange-01);
}

.button.gray {
    color: var(--color-light);
    background-color: var(--color-gray-light-05);
    border-color: var(--color-gray-light-05);
}

.button.sm {
    min-height: var(--control-height-sm);
    padding: var(--button-small-padding-y) var(--button-small-padding-x);
    font-size: var(--button-small-size);
    line-height: var(--button-small-line-height);
}

.button.lg {
    min-height: var(--control-height-lg);
    padding: var(--button-large-padding-y) var(--button-large-padding-x);
    font-size: var(--button-large-size);
    line-height: var(--button-large-line-height);
}

.button.line {
    border: 0.0625rem solid var(--color-line) !important;
}

.button.chevrone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 47.99875rem) {
    .button.chevrone {
        width: 100%;
    }
}

.button.chevrone .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(0.3125rem, 0.2053571429rem + 0.5357142857vw, 0.6875rem);
}

.button.chevrone .divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 1.75rem;
    max-height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.26);
}

@media (max-width: 47.99875rem) {
    .button.chevrone .divider {
        display: none;
    }
}

.button.chevrone .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dropdown-button {
    justify-content: space-between;
    min-width: 155px;
}

.dropdown-button .left {
    width: 100%;
    align-self: center;
}

.button.dropdown-button.dark .right {
    justify-self: end;
    padding-left: 8px;
    border-left: 1px solid rgba(217, 217, 217, 0.23) !important;
}

@media (max-width: 47.99875rem) {
    .button.chevrone .right {
        display: none;
    }
}

.button.h35 {
    min-height: 2.1875rem;
    max-height: 2.1875rem;
}

.btn-close {
    background-color: transparent;
    border: none;
    width: 2rem;
    height: 2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    z-index: 4000;
    color: var(--color-light);
    border-radius: var(--radius-pill);
    transition-property: color, background-color, box-shadow, opacity;
    transition-duration: var(--transition-duration-fast);
    transition-timing-function: var(--transition-timing);
}

@media (hover: hover) {
    .btn-close:hover {
        color: var(--color-brand);
        background-color: var(--color-secondary-gray-light);
    }
}

.btn-close:focus-visible {
    outline: 0.125rem solid var(--color-brand);
    outline-offset: 0.1875rem;
    box-shadow: var(--button-shadow-focus);
}

@media (min-width: 63.99875rem) {
    .btn-close {
        display: none;
    }
}

.btn-close__icon {
    position: relative;
    color: var(--color-light);
}

.btn-close__icon--form {
    display: none;
    font-variation-settings: "wght" 200;
}

@media (max-width: 63.99875rem) {
    .btn-close__icon--form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

.checkbox {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    margin-right: 0.875rem;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--color-gray-light-02);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.checkbox:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

.checkbox:checked::after {
    content: "";
    background-image: url("../icons/checkbox.svg");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    color: var(--color-background-02);
    font-size: 1rem;
    top: 0.31rem;
    left: 0.29rem;
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
}

.checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox:disabled:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    opacity: 0.5;
}

.checkbox:disabled+.checkbox__custom {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 0 1.6875rem;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 1.3125rem;
}

.checkbox__label--stretch {
    padding-left: 0;
    margin-top: 0.75rem;
}

.checkbox__label--categories.active {
    background-color: var(--color-legend-02);
}

@media (max-width: 63.99875rem) {
    .checkbox__label--categories.active {
        z-index: 16001;
    }
}

@media (hover: hover) {
    .checkbox__label--categories.active:hover {
        background-color: var(--color-legend-02);
    }
}

.checkbox__label--categories {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
}

@media (hover: hover) {
    .checkbox__label--categories:hover {
        background-color: var(--color-legend);
    }
}

.switch {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5625rem;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-secondary-gray-light);
    border-radius: 2.125rem;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider::before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 0.375rem;
    bottom: 0.3125rem;
    background-color: var(--color-gray-light-02);
    border-radius: 50%;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked+.slider {
    background-color: var(--color-brand);
    /* Зелений колір */
}

input:checked+.slider::before {
    -webkit-transform: translateX(1rem);
    transform: translateX(1rem);
    background-color: var(--color-background-01);
    /* Переміщення вправо */
}

.icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.icon--question-mark {
    stroke: var(--color-brand);
}

.radio {
    padding-left: 27px;
}

.radio input[type=radio] {
    display: none;
}

/* Стилізація мітки */
.radio label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 32px;
}

/* Створюємо квадрат як радіо-кнопку */
.radio label::before {
    content: "";
    margin-right: 8px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-gray-light-02);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 12px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: transparent;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Активний стан (радіо-кнопка натиснута) */
.radio input[type=radio]:checked+label::before {
    background-color: transparent;
    border-color: var(--color-brand);
}

/* Внутрішній квадрат в активному стані */
.radio input[type=radio]:checked+label::after {
    content: "";
    background-color: var(--color-brand);
    width: 10px;
    height: 10px;
    top: 12px;
    left: 4px;
    border-radius: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.radio label::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-brand);
    -webkit-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.radio input[type=radio]:checked+label::after {
    -webkit-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.radio label::before,
.radio input[type=radio]:checked+label::after {
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.search-button {
    flex: 1;
    height: 100%;
    max-height: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--color-light);
    background-color: transparent;
    border: none;
}

.search-button svg {
    max-height: 100%;
    width: clamp(1.25rem, 1.1785714286rem + 0.3571428571vw, 1.5rem);
}

.search-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 47.99875rem) {
    .search-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        opacity: 0;
        visibility: hidden;
        width: 100%;
        left: 0;
        top: 0;
        -webkit-transform: translate(0);
        transform: translate(0);
        background-color: var(--color-background-01);
        z-index: 0;
    }

    .search-form.active {
        opacity: 1;
        visibility: visible;
        z-index: 17000;
    }
}

.search-form-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    background-color: var(--color-background-01);
    border-radius: 1.875rem;
    border: 0.063rem solid var(--color-line);
    -webkit-transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

.search-form-container:hover {
    background-color: var(--color-background-02);
}

.search-form-container:focus-within {
    background-color: var(--color-background-01);
    border-color: var(--color-brand);
}

.search-form-container:has(.header__search-form-input:focus) .header__search-form-icon,
.search-form-container:has(.header__search-form-input:active) .header__search-form-icon {
    color: var(--color-gray-light-02);
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

@media (max-width: 47.99875rem) {
    .search-form-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0.5625rem 1.0625rem;
        background-color: var(--color-background-01);
    }
}

.search-form-input {
    color: var(--color-gray-light-01);
    width: 18vw;
    height: 2.5rem;
    padding: 0.625rem 1rem 0.625rem 2.625rem;
    background-color: transparent;
    border: 0;
    -webkit-transition: width 0.5s cubic-bezier(0, 0, 0, 1);
    transition: width 0.5s cubic-bezier(0, 0, 0, 1);
}

@media (max-width: 47.99875rem) {
    .search-form-input {
        width: 100%;
        height: 1.875rem;
        padding: 0.625rem 1rem 0.625rem 1.75rem;
        background-color: transparent;
        margin-right: 0.875rem;
    }
}

.search-form-input::-webkit-input-placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: clamp(0.625rem, 0.5535714286rem + 0.3571428571vw, 0.875rem);
    font-weight: 400;
    opacity: 50%;
}

.search-form-input::-moz-placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: clamp(0.625rem, 0.5535714286rem + 0.3571428571vw, 0.875rem);
    font-weight: 400;
    opacity: 50%;
}

.search-form-input:-ms-input-placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: clamp(0.625rem, 0.5535714286rem + 0.3571428571vw, 0.875rem);
    font-weight: 400;
    opacity: 50%;
}

.search-form-input::placeholder {
    font-weight: 400 !important;
    color: #55545E !important;
    opacity: 1;
    min-height: 40px;
    font-size: clamp(0.625rem, 0.5535714286rem + 0.3571428571vw, 0.875rem);
}

.search-form-input:active,
.search-form-input:focus {
    width: 35vw;
    outline: none;
}

@media (max-width: 47.99875rem) {

    .search-form-input:active,
    .search-form-input:focus {
        width: 100%;
    }
}

.search-form-container svg {
    color: var(--color-light);
    width: 1.25rem;
    position: absolute;
    top: 50%;
    left: 0.875rem;
    -webkit-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
    transform: translateY(-50%);
}

@media (max-width: 47.99875rem) {
    .search-form-container svg {
        left: 1.5rem;
    }
}

.search-form-button {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin: 0.25rem;
    padding-inline: 0.875rem;
    border-radius: 1.625rem;
    background-color: var(--color-brand);
    color: var(--color-background-01);
    font-weight: 600;
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    white-space: nowrap;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.search-form-button:hover {
    background-color: var(--color-brand-dark);
}

.aside {
    --aside-scrollbar-width: 0.5rem;
    position: sticky;
    top: var(--products-sticky-top);
    max-height: calc(100vh - var(--products-sticky-top));
    padding: 1.0625rem 0.775rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-background-02);
    color: var(--color-light);
    line-height: 1.5rem;
    -ms-flex-item-align: start;
    align-self: start;
    gap: 1.0625rem 0;
    border: 0.063rem solid var(--color-line);
    border-radius: 1.0625rem;
    -webkit-transition: border-radius 0.3s ease;
    transition: border-radius 0.3s ease;
}

/* Scrollbar styles for aside */
.aside::-webkit-scrollbar {
    width: 0.5rem;
    background: transparent;
}

.aside::-webkit-scrollbar-track {
    background: transparent;
}

.aside::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.25rem;
    border: 0.063rem solid transparent;
    transition: all 0.3s ease;
}

.aside.show-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(154, 154, 154, 0.3);
    border: 0.063rem solid rgba(154, 154, 154, 0.1);
}

.aside.show-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(154, 154, 154, 0.5);
    border: 0.063rem solid rgba(154, 154, 154, 0.2);
}

.aside.show-scrollbar::-webkit-scrollbar-thumb:active {
    background: rgba(154, 154, 154, 0.7);
    border: 0.063rem solid rgba(154, 154, 154, 0.3);
}

.aside--legal {
    width: 20.375rem;
    padding: 3.25rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #CCCCCC;
}

@media (width <=63.99875rem) {
    .aside--legal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 16000;
        border-radius: 0;
        -webkit-transition: -webkit-transform 0.3s ease !important;
        transition: -webkit-transform 0.3s ease !important;
        transition: transform 0.3s ease !important;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease !important;
    }
}

.aside--legal__menu {
    display: flex;
    flex-direction: column;
    gap: 31px 0;
}

.aside--legal__menu-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 22px;
}

@media (max-width: 63.99875rem) {
    .aside {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        gap: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 16000;
        border-radius: 0;
        -webkit-transition: -webkit-transform 0.3s ease !important;
        transition: -webkit-transform 0.3s ease !important;
        transition: transform 0.3s ease !important;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease !important;
    }

    .global-mobile-filters {
        display: flex !important;
    }

    .aside--legal__menu {
        overflow-y: scroll;
    }
}

.aside.open {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

@media (max-width: 63.99875rem) {
    .aside.open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.aside__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: var(--color-background-02);
    border: none;
    color: var(--color-light);
    cursor: pointer;
}

.aside__mobile-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.aside__apply-button {
    width: 3.875rem;
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5rem;
    border-width: 0.0625rem;
}

.aside__close-button {
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--color-gray-light-02);
}

.aside__close-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    fill: currentColor;
    pointer-events: none;
}

@media (min-width: 64rem) {

    .aside__mobile-actions,
    .aside__apply-button {
        display: none;
    }
}

@media (max-width: 63.99875rem) {
    .aside__header--desktop {
        display: none !important;
    }

    .aside__header--mobile {
        /* Push interactive content below the browser URL bar.
           On iOS (viewport-fit=cover): top: 0 starts at the physical screen top,
           behind the status bar (env(safe-area-inset-top)) AND the URL bar (~44px).
           On Android Chrome: safe area is 0, URL bar is ~56px.
           max() picks the correct value per device:
             - iPhone 15 Pro: max(59+44=103, 64) = 103px
             - iPhone SE:     max(20+44=64,  64) = 64px
             - Android:       max(0+44=44,   64) = 64px  */
        --aside-header-top-inset: max(calc(env(safe-area-inset-top) + 2.75rem), 4rem);
        padding-top: var(--aside-header-top-inset);
        padding-inline: 1rem;
        padding-bottom: 0.625rem;
        height: calc(3.125rem + var(--aside-header-top-inset));
        min-height: calc(3.125rem + var(--aside-header-top-inset));
        align-items: flex-end;
        background-color: var(--color-top);
    }

    .aside__header--mobile .aside__title,
    .aside__header--mobile .aside__mobile-actions {
        align-items: center;
    }

    .aside__header--mobile .aside__title-text {
        font-size: 0.875rem;
        font-weight: 600;
    }

    .aside__legend-container {
        font-size: 0.875rem;
        font-weight: 600;
    }

    .aside__content,
    .aside__content-category,
    .checkbox__label,
    .radio label,
    .aside__footer .aside__title {
        font-size: 0.875rem;
        font-weight: 400;
    }
}

@media (min-width: 63.99875rem) {
    .aside__header--mobile {
        display: none !important;
    }
}

.aside__title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-weight: 800;
    white-space: nowrap;
    -webkit-transition: visibility 0.3s ease, opacity 0.3s ease;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 63.99875rem) {
    .aside__title {
        font-size: 0.875rem;
    }
}

.aside__icon {
    font-size: 1.375rem;
    margin-right: 0.375rem;
    fill: var(--color-light);
}

.aside__icon--slider {
    width: 1rem;
    height: 0.8125rem;
    fill: none;
}

.aside.collapsed {
    border-radius: 0.5rem;
    overflow: hidden;
    -webkit-transition: padding 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
    transition: padding 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
}

.aside.collapsed .aside__title-text,
.aside.collapsed .aside__title-checkbox,
.aside.collapsed .aside__content,
.aside.collapsed .aside__content-container,
.aside.collapsed .aside__item {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0.3s ease, opacity 0.3s ease;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

.aside.collapsed .aside__header {
    padding: 0;
}

.aside.collapsed .aside__title {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
}

.aside__title-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.aside__content-container {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-right: calc(var(--aside-scrollbar-width) * -1);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.0625rem;
    -webkit-transition: overflow-y 0.3s;
    transition: overflow-y 0.3s;
}

@media (max-width: 63.99875rem) {
    .aside__content-container {
        overflow-y: scroll;
        padding: 1.0625rem calc(0.6875rem + var(--aside-scrollbar-width)) 1.0625rem 0.6875rem;
    }
}

.aside__content-container::-webkit-scrollbar {
    width: 0.5rem;
    background: transparent;
}

.aside__content-container::-webkit-scrollbar-track {
    background: transparent;
}

.aside__content-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.25rem;
    border: 0.063rem solid transparent;
    transition: all 0.3s ease;
}

.aside.show-scrollbar .aside__content-container::-webkit-scrollbar-thumb {
    background: rgba(154, 154, 154, 0.1);
    border: 0.063rem solid rgba(154, 154, 154, 0.1);
}

.aside.show-scrollbar .aside__content-container::-webkit-scrollbar-thumb:hover {
    background: rgba(154, 154, 154, 0.2);
    border: 0.063rem solid rgba(154, 154, 154, 0.2);
}

.aside.show-scrollbar .aside__content-container::-webkit-scrollbar-thumb:active {
    background: rgba(154, 154, 154, 0.3);
    border: 0.063rem solid rgba(154, 154, 154, 0.3);
}

.aside__fieldset {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border: none;
}

.aside__footer {
    padding: 0 0 0 1rem;
    gap: 1.0625rem;
}

.aside__legend-container {
    padding: 0.3125rem 0.8125rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: var(--color-legend);
    border-radius: 1.3125rem;
    cursor: pointer;
    color: var(--color-light);
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    white-space: nowrap;
    border: 0.063rem solid var(--color-line);
    -webkit-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}

.aside__legend-container:hover {
    background-color: var(--color-legend-02);
}

@media (max-width: 63.99875rem) {
    .aside__legend-container {
        z-index: 16000;
    }
}

.aside__legend-container.white {
    background-color: var(--color-light) !important;
    color: var(--color-background-01) !important;
}

.aside__legend-container.start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: start !important;
}

.aside__legend-icon {
    width: 1rem;
    fill: var(--color-light);
}

.aside__legend-container[data-expanded=false] .aside__legend-icon {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.aside__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 0.75rem;
    overflow: hidden;
    height: auto;
    font-size: 0.875rem !important;
    gap: 1rem;
    visibility: visible;
    opacity: 1;
    -webkit-transition: height 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
    transition: height 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
}

.aside__content-categories {
    gap: 0.3125rem;
}

.aside__content-category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.3125rem 0 0.3125rem 1.6875rem;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 1.3125rem;
    gap: 0.625rem;
    fill: var(--color-light);
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.aside__content-category svg {
    height: 16px;
    width: 1rem !important;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.aside__content-category.active {
    color: var(--color-brand);
    background-color: var(--color-legend);
    fill: var(--color-brand) !important;
}

@media (max-width: 63.99875rem) {
    .aside__content-category.active {
        z-index: 16001;
    }
}

@media (hover: hover) {
    .aside__content-category.active:hover {
        color: var(--color-brand);
        background-color: var(--color-legend);
        fill: var(--color-brand) !important;
    }
}

@media (hover: hover) {
    .aside__content-category:hover {
        background-color: var(--color-legend);
    }
}

.aside__content.collapsed {
    height: 0;
    margin-top: 0;
}

.aside__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.375rem;
}

.aside__item {
    padding-left: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.aside-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
    z-index: 15000;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.aside-mobile .aside__title {
    font-size: 1rem;
}

.aside-mobile.open {
    -webkit-transform: translate(0);
    transform: translate(0);
}

.aside-mobile .aside {
    height: 100%;
}

.aside-mobile .aside__header {
    position: sticky;
}

.aside-mobile .aside__content-container {
    max-height: calc(100vh - 80px);
    overflow: scroll;
}

.aside-mobile .aside__content-container::-webkit-scrollbar {
    width: 0.5rem;
    background: transparent;
}

.aside-mobile .aside__content-container::-webkit-scrollbar-track {
    background: transparent;
}

.aside-mobile .aside__content-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.25rem;
    border: 0.063rem solid transparent;
    transition: all 0.3s ease;
}

.aside-mobile.show-scrollbar .aside__content-container::-webkit-scrollbar-thumb {
    background: rgba(154, 154, 154, 0.3);
    border: 0.063rem solid rgba(154, 154, 154, 0.1);
}

.aside-mobile.show-scrollbar .aside__content-container::-webkit-scrollbar-thumb:hover {
    background: rgba(154, 154, 154, 0.5);
    border: 0.063rem solid rgba(154, 154, 154, 0.2);
}

.aside-mobile.show-scrollbar .aside__content-container::-webkit-scrollbar-thumb:active {
    background: rgba(154, 154, 154, 0.7);
    border: 0.063rem solid rgba(154, 154, 154, 0.3);
}

.aside-mobile__buttons {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.9375rem 0;
    border-bottom: 1px solid var(--color-legend);
    padding-inline: var(--container-padding-x);
    height: clamp(3.3125rem, 2.8303571429rem + 2.4107142857vw, 5rem);
}

@media (max-width: 64rem) {
    .aside-mobile__buttons {
        display: none;
    }
}

.aside-mobile__buttons--right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

.aside-mobile__button {
    padding: clamp(0.1875rem, 0.1160714286rem + 0.3571428571vw, 0.4375rem) clamp(1rem, 0.9464285714rem + 0.2678571429vw, 1.1875rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--color-light);
    background-color: var(--color-background-02);
    font-family: var(--font-family-ui);
    font-size: var(--button-small-size);
    font-weight: var(--button-font-weight);
    line-height: var(--button-small-line-height);
    letter-spacing: var(--button-letter-spacing);
    border-radius: var(--button-radius);
    gap: 0.375rem;
    border: 0.063rem solid var(--color-line);
}

.aside-mobile__icon {
    width: clamp(1.0625rem, 0.9732142857rem + 0.4464285714vw, 1.375rem);
    height: clamp(1.0625rem, 0.9732142857rem + 0.4464285714vw, 1.375rem);
    fill: var(--color-light);
}

.aside-mobile__icon--filter {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.aside-mobile__icon--slider {
    width: 1rem;
    height: 0.8125rem;
    fill: none;
    -webkit-transform: none;
    transform: none;
}

/* Bottom Navigation Bar */
.bottom-navigation-bar {
    display: none;
}

.bottom-header-menu {
    display: none;
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 17020;
    color: var(--color-gray-light-02);
    background-color: rgba(20, 22, 24, 0.78);
    border-top: 0.0625rem solid var(--color-line);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(0.75rem);
    transform: translateY(0.75rem);
    transition:
        opacity var(--transition-duration) var(--transition-timing),
        visibility var(--transition-duration) var(--transition-timing),
        -webkit-transform var(--transition-duration) var(--transition-timing);
    transition:
        opacity var(--transition-duration) var(--transition-timing),
        visibility var(--transition-duration) var(--transition-timing),
        transform var(--transition-duration) var(--transition-timing);
    transition:
        opacity var(--transition-duration) var(--transition-timing),
        visibility var(--transition-duration) var(--transition-timing),
        transform var(--transition-duration) var(--transition-timing),
        -webkit-transform var(--transition-duration) var(--transition-timing);
}

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

.cookie-consent.open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.cookie-consent__inner {
    position: relative;
    padding-block: 2.125rem 1.875rem;
    padding-right: calc(var(--container-padding-x) + 9rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
}

.cookie-consent__inner::-webkit-scrollbar {
    width: 0.25rem;
}

.cookie-consent__inner::-webkit-scrollbar-track {
    background: transparent;
}

.cookie-consent__inner::-webkit-scrollbar-thumb {
    background-color: var(--color-legend-02);
    border-radius: 6.25rem;
}

.cookie-consent__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-right: 2.5rem;
}

.cookie-consent__text {
    max-width: 56rem;
}

.cookie-consent__title {
    margin: 0 0 1rem;
    color: var(--color-gray-light-04);
    font-family: var(--font-family-base);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

.cookie-consent__description {
    margin: 0;
    color: var(--color-gray-light-02);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
}

.cookie-consent__description a {
    color: var(--color-brand);
    text-decoration: none;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

@media (hover: hover) {
    .cookie-consent__description a:hover {
        color: var(--color-brand-dark);
    }
}

.cookie-consent__accept {
    position: absolute;
    top: 50%;
    right: var(--container-padding-x);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    min-width: 7rem;
    min-height: 2.5rem;
    padding: 0.5rem 1.5rem;
    color: var(--color-brand);
    background-color: transparent;
    border: 0.063rem solid var(--color-brand);
    border-radius: 6.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--transition-duration-fast) var(--transition-timing),
        background-color var(--transition-duration-fast) var(--transition-timing),
        border-color var(--transition-duration-fast) var(--transition-timing);
}

@media (hover: hover) {
    .cookie-consent__accept:hover {
        color: var(--color-dark);
        background-color: var(--color-brand);
    }
}

.cookie-consent__accept:focus-visible,
.cookie-consent__close:focus-visible,
.cookie-consent__details-toggle:focus-visible,
.cookie-consent__checkbox:focus-visible {
    outline: 0.125rem solid var(--color-brand);
    outline-offset: 0.1875rem;
}

.cookie-consent__close {
    position: absolute;
    top: 1.125rem;
    right: var(--container-padding-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--color-light);
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

.cookie-consent__close .m-icon {
    font-size: 1.375rem;
}

@media (hover: hover) {
    .cookie-consent__close:hover {
        color: var(--color-brand);
    }
}

.cookie-consent__details {
    margin-top: 1.375rem;
}

.cookie-consent__details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    color: var(--color-light);
    background-color: transparent;
    border: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

.cookie-consent__details-toggle span {
    display: inline-flex;
    align-items: center;
    min-height: 1.125rem;
}

.cookie-consent__details-icon {
    flex: 0 0 auto;
    color: var(--color-light);
    display: block;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

@media (hover: hover) {

    .cookie-consent__details-toggle:hover,
    .cookie-consent__details-toggle:hover .cookie-consent__details-icon {
        color: var(--color-brand);
    }
}

.cookie-consent__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem 2.25rem;
    margin-top: 1.25rem;
}

.cookie-consent__option {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding-left: 0;
    color: var(--color-light);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

.cookie-consent__option--locked {
    cursor: default;
}

.cookie-consent__checkbox {
    margin-right: 0;
}

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

@media (max-width: 64rem) {
    body {
        padding-bottom: 50px;
    }

    .bottom-navigation-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 17010;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 50px;
        background: #141618;
        border-top: 1px solid var(--color-line);
        backface-visibility: hidden;
        transform: translateZ(0);
        will-change: transform;
    }

    .bottom-navigation-bar__item {
        min-width: 0;
        height: 100%;
        padding: 0 0.125rem;
        display: grid;
        grid-template-rows: 0.1875rem 1.625rem 0.125rem 0.75rem 0.3125rem;
        align-items: center;
        justify-items: center;
        color: #818181;
        background: transparent;
        border: 0;
        text-decoration: none;
        font-size: var(--caption-size);
        font-weight: var(--caption-weight);
        line-height: 1;
    }

    .bottom-navigation-bar__item.active {
        color: #fff;
    }

    .bottom-navigation-bar__item.active .bottom-navigation-bar__icon {
        color: var(--color-brand);
    }

    .bottom-navigation-bar__icon-box {
        grid-row: 2;
        width: 1.625rem;
        height: 1.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .bottom-navigation-bar__icon {
        width: 1.375rem;
        height: 1.375rem;
        display: block;
        fill: currentColor;
        flex-shrink: 0;
        overflow: visible;
    }

    .bottom-navigation-bar__icon--software {
        width: 1.5rem;
        height: auto;
    }

    .bottom-navigation-bar__icon--filters {
        width: 1.375rem;
        height: 1.375rem;
        transform: rotate(90deg);
    }

    .bottom-navigation-bar__icon--liked {
        width: 1.25rem;
        height: 1.25rem;
    }

    .bottom-navigation-bar__icon--menu {
        width: 1.125rem;
        height: 0.75rem;
    }

    .bottom-navigation-bar__icon--slider {
        width: 1.125rem;
        height: 0.9375rem;
        fill: none;
    }

    .bottom-navigation-bar__label {
        grid-row: 4;
        max-width: 100%;
        min-height: 0.75rem;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1;
    }

    .bottom-header-menu {
        position: fixed;
        right: 0;
        bottom: 50px;
        left: 0;
        z-index: 16000;
        display: block;
        max-height: calc(100dvh - 50px);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: #1E2025;
        border: 0.0125rem solid var(--color-line);
        border-bottom: none;
        border-radius: 0.5rem 0.5rem 0 0;
        color: #DADADA;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
        transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
    }

    .bottom-header-menu.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .bottom-header-menu__list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1.125rem 1.625rem 0.625rem;
    }

    .bottom-header-menu__link,
    .bottom-header-menu__trigger {
        width: 100%;
        min-height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0;
        color: inherit;
        background: transparent;
        border: 0;
        text-align: left;
        text-decoration: none;
        font-size: var(--navigation-size);
        font-weight: var(--navigation-weight);
        line-height: var(--navigation-line-height);
    }

    .bottom-header-menu__link.active,
    .bottom-header-menu__trigger.active {
        color: var(--color-brand);
        font-weight: var(--font-weight-semibold);
    }

    .bottom-header-menu__chevron {
        width: 0.625rem;
        height: 0.375rem;
        flex-shrink: 0;
    }

    .bottom-header-menu__trigger[aria-expanded="true"] .bottom-header-menu__chevron {
        transform: rotate(180deg);
    }

    .bottom-header-menu__submenu {
        height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0 0 0 0.875rem;
        transition: height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
    }

    .bottom-header-menu__submenu.open {
        opacity: 1;
        visibility: visible;
        transition: height 0.3s ease, opacity 0.2s ease, visibility 0s linear 0s;
    }
}

@media (max-width: 47.99875rem) {
    .cookie-consent {
        bottom: 50px;
    }

    .cookie-consent__inner {
        padding-block: 1.5rem;
        padding-right: var(--container-padding-x);
        max-height: calc(100dvh - 50px - 0.75rem);
    }

    .cookie-consent__content {
        flex-direction: column;
        gap: 1.25rem;
        padding-right: 2rem;
    }

    .cookie-consent__title {
        margin-bottom: 0.75rem;
        font-size: clamp(1.125rem, 0.8571rem + 1.3393vw, 1.5rem);
    }

    .cookie-consent__accept {
        position: static;
        -webkit-transform: none;
        transform: none;
        width: 100%;
        min-height: 2.75rem;
    }

    .cookie-consent__details {
        margin-top: 1.25rem;
    }

    .cookie-consent__options {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

.card {
    --download-block-item-width: min(72%, 12.75rem);
    --card-action-size: 2.0625rem;
    --card-action-icon-size: 1.25rem;
    --card-action-offset: 0.8125rem;
    --card-like-size: 40px;
    --card-like-icon-width: 28.15px;
    --card-like-icon-height: 24.55px;
    --card-meta-min-width: 95px;
    --card-meta-height: 26px;
    --card-meta-gap: 6px;
    --card-meta-padding: 10px;
    --card-meta-font-size: 0.75rem;
    --card-meta-icon-size: 16px;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-background-02);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 0.813rem;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 0.094rem solid transparent;
    transition: border-color 0.25s ease;
}

@media (max-width: 119.99875rem) {
    .card {
        --download-block-item-width: min(74%, 12rem);
    }
}

@media (max-width: 79.99875rem) {
    .card {
        --download-block-item-width: min(78%, 11.5rem);
    }
}

@media (max-width: 63.99875rem) {
    .card {
        --download-block-item-width: min(82%, 12.25rem);
    }
}

@media (max-width: 47.99875rem) {
    .card {
        --download-block-item-width: min(86%, 14rem);
        --card-action-size: clamp(1.5rem, 8.5cqw, 1.875rem);
        --card-action-icon-size: clamp(0.9375rem, 5cqw, 1.125rem);
        --card-action-offset: clamp(0.5rem, 3.5cqw, 0.8125rem);
        --card-like-size: clamp(1.75rem, 9.5cqw, 2.25rem);
        --card-like-icon-width: clamp(1.25rem, 7cqw, 1.625rem);
        --card-like-icon-height: clamp(1.125rem, 6.1cqw, 1.4375rem);
        --card-meta-min-width: clamp(4.75rem, 27cqw, 5.9375rem);
        --card-meta-height: clamp(1.375rem, 7.4cqw, 1.625rem);
        --card-meta-gap: clamp(0.25rem, 1.6cqw, 0.375rem);
        --card-meta-padding: clamp(0.4375rem, 2.4cqw, 0.625rem);
        --card-meta-font-size: clamp(0.625rem, 3.2cqw, 0.75rem);
        --card-meta-icon-size: clamp(0.75rem, 4.4cqw, 1rem);
        container-type: inline-size;
    }
}

/* Guarded, unlike before: on a touch screen :hover latches onto whatever the
   finger passes over and stays there, so dragging through the feed painted a
   brand border on card after card — indistinguishable from the outline that
   marks the card actually playing. Every other hover affordance on the card is
   already behind this query; this one was missed because it paints a border
   rather than an outline. */
@media (hover: hover) {
    .card:hover {
        border-color: var(--color-brand);
    }
}


.card__icon {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-background-02);
    border: none;
    color: var(--color-light);
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.card__icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.card__icon.like {
    background-color: transparent;
    color: var(--color-brand);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--card-like-icon-width);
    height: var(--card-meta-height);
    padding: 0;
    line-height: 0;
}

.card__icon.like svg {
    position: static !important;
    transform: none !important;
    width: var(--card-like-icon-width) !important;
    height: var(--card-like-icon-height) !important;
    max-width: var(--card-like-icon-width);
    max-height: var(--card-like-icon-height);
    margin-top: 0;
}

.card:hover .card__icon.like {
    opacity: 1;
    visibility: visible;
}

.card:hover .card__sound-toggle {
    opacity: 1;
    visibility: visible;
}

.card:hover .card__icon.brand {
    opacity: 1;
    visibility: visible;
}

.card:hover .card__all-pack {
    opacity: 1;
    visibility: visible;
}

.card:hover .card__project-title {
    opacity: 1;
}

/* Auto-hide after 3 seconds */
.card.auto-hide .card__sound-toggle,
.card.auto-hide .card__icon.brand,
.card.auto-hide .card__project-title {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.card.auto-hide .card__all-pack,
.card.auto-hide .card__edit,
.card.auto-hide .card__icon.like {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.card.auto-hide .card__all-pack.is-open {
    opacity: 1 !important;
    visibility: visible !important;
}

.card.auto-hide .card__icon.download-all {
    opacity: 1 !important;
    visibility: visible !important;
}

.card.is-all-pack-open .card__actions,
.card.is-all-pack-open .card__icon.download-all {
    opacity: 1 !important;
    visibility: visible !important;
}

.card.auto-hide .card__project-title {
    transform: none !important;
}

/* Don't hide like button if project is liked */
.card.auto-hide .card__icon.like.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.card__icon.like:hover {
    background-color: transparent;
}

.card__icon.like .like-icon--filled path {
    fill: var(--color-brand);
    transition: fill 0.2s ease;
}

.card__icon.like .like-icon--outline path {
    fill: none;
    stroke: #EFEFEF;
    transition: stroke 0.2s ease;
}

@media (hover: hover) {
    .card__icon.like:hover .like-icon--filled path {
        fill: var(--color-brand-dark);
    }

    .card__icon.like:hover .like-icon--outline path {
        stroke: var(--color-brand);
    }
}



.card__icon.like.active {
    background-color: transparent;
    color: var(--color-brand);
}

.card__icon.like.active.icon-hidden {
    opacity: 1;
}

.card__icon.icon-hidden {
    opacity: 0;
}

.card__icon:hover {
    background-color: var(--color-light);
    color: var(--color-background-02);
}

.card__icon.brand {
    color: var(--color-background-02);
    background-color: var(--color-brand);
    width: var(--card-action-size);
    height: var(--card-action-size);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card__icon.brand svg {
    position: static !important;
    transform: none !important;
    width: var(--card-action-icon-size);
    height: var(--card-action-icon-size);
}

.card__icon.brand:hover {
    color: var(--color-brand);
    background-color: transparent;
    border: 2px solid var(--color-brand);
}

.card__icon.download-all {
    display: flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0 0.75rem;
    width: auto;
    min-width: 5rem;
    border-radius: 1.625rem;
    border: 2px solid var(--color-brand);
}

/* Montserrat was named here but never loaded — no @font-face, no import, and the
   name appeared nowhere else in the project. The label fell through to the
   generic sans-serif while the rest of the card rendered in Inter, which is why
   the two pills on one card carried different typefaces. */
.card__icon.download-all .download-all__text {
    font-family: var(--font-family-ui);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

.card__icon.download-all svg {
    position: static !important;
    transform: none !important;
    width: var(--card-action-icon-size);
    height: var(--card-action-icon-size);
    flex-shrink: 0;
}

/* Always-painted preview. Sits under the video, which fades in over it while
   playing — see the comment in incs/product-card.blade.php for why the
   <video poster> attribute cannot be relied on here. */
.card__poster {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

/* Pagination scrolls the listing back into view, and scrollIntoView() aligns
   its top with the top of the viewport — where the fixed header is. That hid
   the first card behind the header and left the second one looking like the
   first. The margin stops the scroll below the chrome instead. */
#paginated-products {
    scroll-margin-top: calc(var(--header-nav-height) + var(--promo-bar-height, 0px) + 1.5rem);
}

/* Out of the way once there are frames to show. These previews carry an alpha
   channel, so the poster underneath was visible straight through the
   transparent parts of the video and the two images played on top of each
   other. It only exists to cover an element with nothing in it, which stops
   being the case the moment playback starts — and it comes back the moment it
   stops. */
.card.is-playing .card__poster {
    opacity: 0;
}

.card__video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

/* Revealed as soon as the card becomes the active one, not once play() has
   resolved. WebKit will not autoplay a video it treats as invisible, so gating
   visibility on successful playback deadlocked iOS: the video could not start
   until it was visible, and it was not visible until it had started. A <video>
   with no decoded frame paints nothing, so the poster layer underneath still
   shows through while it loads. */
.card.is-playing .card__video,
.card.is-mobile-active .card__video {
    opacity: 1;
}

/* Centred over the preview while the video is fetching its first frame. Sits
   above .card__link (z-index 3) so it is not painted behind the tap target, and
   ignores pointer events so a tap still opens the product. Same centring as
   .card__all-pack-loader; the scale comes from the shared .loader animation. */
.card__video-loader {
    inset: 0;
    margin: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
}

/* Sized and coloured here rather than left to the SVG's own attributes, the
   way the other loaders in this file are done: the artwork is 61x117 and the
   shared .loader animation scales it, so without a width it lands at an
   arbitrary size, and a presentation attribute is the weakest source of a fill
   there is. Brand green, from the variable. */
.card__video-loader svg {
    width: 2.125rem;
    height: auto;
}

.card__video-loader path {
    fill: var(--color-brand);
}

/* No play affordance on the card. The whole card is a link to the product on
   mobile, and a spot that does something else instead breaks the only rule the
   card has. A preview that will not autoplay stays a still image. */

/* --- Card bottom bar --- */
.card__bottom {
    position: absolute;
    bottom: var(--card-action-offset);
    left: var(--card-action-offset);
    right: var(--card-action-offset);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0;
    z-index: 10;
    pointer-events: none;
}

.card__bottom.hidden {
    display: none;
}

.card__project-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--color-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card__project-title {
    opacity: 1;
}

.card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    pointer-events: all;
}

/* --- Top bar container --- */
.card__top {
    position: absolute;
    top: var(--card-action-offset);
    left: var(--card-action-offset);
    right: var(--card-action-offset);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 11;
    padding: 0;
    box-sizing: border-box;
}

.card__top-left {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-right: auto;
}

/* --- Current subscription panel (above the pricing cards) --- */
.subscription-status {
    max-width: 45rem;
    margin: 0 auto var(--space-8);
    padding: clamp(1.125rem, 4vw, 1.5rem);
    background-color: var(--color-background-02);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

.subscription-status__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.subscription-status__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.2;
}

.subscription-status__badge {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: capitalize;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
}

.subscription-status__plan {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.subscription-status__amount {
    font-weight: 400;
    color: var(--color-gray-light-02);
}

.subscription-status__note {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-gray-light-02);
}

.subscription-status__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

/* Two pill buttons side by side get cramped on a phone and read as one blob —
   full width each, stacked, is both easier to hit and easier to tell apart. */
@media (max-width: 35.99875rem) {
    .subscription-status__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .subscription-status__actions .button {
        width: 100%;
    }
}

/* --- Top meta actions (visible on hover) --- */
.card__meta-action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--card-meta-gap);
    min-width: var(--card-meta-min-width);
    height: var(--card-meta-height);
    padding: 0 var(--card-meta-padding);
    border: none;
    border-radius: calc(var(--card-meta-height) / 2);
    background-color: var(--color-brand);
    color: var(--color-top);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Sized to its own content: a three-character label and a 16px icon never
   filled the shared pill width, and the leftover space read as a stray gap
   between the two. The overrides sit on the button, not on .card, so the Edit
   pill beside it keeps the shared width. They are flat values on purpose —
   they replace the mobile clamps for this button, which is small enough that
   scaling a 3px gap buys nothing; height, font and icon still scale. */
.card__all-pack {
    --card-meta-gap: 0.1875rem;
    --card-meta-padding: 0.5rem;
    min-width: 0;
}

.card__all-pack-content--hidden {
    visibility: hidden;
}

.card__all-pack-loader {
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.card__all-pack-loader svg {
    width: 2.125rem;
    height: auto;
}

.card__all-pack-loader path {
    fill: var(--color-top);
}

.card__edit {
    min-width: 4.625rem;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--color-brand);
    color: var(--color-brand);
}

.card__edit:visited,
.card__edit span {
    color: var(--color-brand) !important;
}

@media (hover: hover) {
    .card__edit:hover {
        background-color: var(--color-brand);
        color: var(--color-top);
    }

    .card__edit:hover span {
        color: var(--color-top) !important;
    }
}

.card:hover .card__all-pack,
.card:hover .card__edit {
    opacity: 1;
    visibility: visible;
}

.card__all-pack.is-open {
    opacity: 1;
    visibility: visible;
}

.card__meta-action span {
    font-family: 'Inter', sans-serif;
    font-size: var(--card-meta-font-size);
    font-weight: 600;
    line-height: 1;
    color: var(--color-top);
    white-space: nowrap;
}

.card__all-pack>svg {
    flex-shrink: 0;
    display: block;
    width: var(--card-meta-icon-size);
    height: var(--card-meta-icon-size);
}

@media (hover: hover) {
    .card__actions {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .card:hover .card__actions {
        opacity: 1;
        visibility: visible;
    }

    .card__icon.like {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .card:hover .card__icon.like {
        opacity: 1;
        visibility: visible;
    }

    .card__icon.like.active {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: none),
(max-width: 1024px) {
    .card__video {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        /* Opacity is deliberately not set here: the base rule keeps the video
           transparent until the card is active or playing, so the poster layer
           stays visible underneath. */
    }

    .card__actions {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .card__icon.like {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .card__project-title {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .card__sound-toggle {
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .card__icon.brand {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .card__all-pack {
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .card__edit {
        display: flex !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Tapping a card opens the product; playback is driven by scroll position. */

    .card.is-all-pack-open:not(.is-mobile-active) .card__actions,
    .card.is-all-pack-open:not(.is-mobile-active) .card__icon.download-all {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .card.is-all-pack-open .card__all-pack,
    .card__all-pack.is-open {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .card.is-mobile-active .card__actions,
    .card.is-mobile-active .card__icon.like,
    .card.is-mobile-active .card__project-title,
    .card.is-mobile-active .card__sound-toggle,
    .card.is-mobile-active .card__icon.brand,
    .card.is-mobile-active .card__all-pack,
    .card.is-mobile-active .card__edit {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Marks the card the autoplay coordinator picked. Outline rather than
       border so it cannot shift the 16/9 box. */
    .card.is-mobile-active {
        outline: 0.125rem solid var(--color-brand);
        outline-offset: -0.125rem;
    }

    .card__icon:hover {
        background-color: var(--color-background-02);
        color: #DADADA;
    }

    .card__icon.brand:hover {
        color: var(--color-background-02);
        background-color: var(--color-brand);
        border: none;
    }
}

.card__sound-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--card-action-size);
    height: var(--card-action-size);
    border-radius: 50%;
    background-color: var(--color-background-02);
    border: none;
    color: var(--color-light);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card__sound-toggle:hover {
    background-color: var(--color-light);
    color: var(--color-background-02);
}

.card__sound-toggle svg {
    width: var(--card-action-icon-size);
    height: var(--card-action-icon-size);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .card__progress-bar {
        display: none !important;
    }
}

.card__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 0.125rem;
    background: var(--color-light);
    -webkit-transition: width 0.1s linear;
    transition: width 0.1s linear;
    z-index: 15;
}

.card__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.card__bottom,
.download-block {
    z-index: 10;
}

.content__body {
    display: grid;
    padding-top: 0;
    grid-template-columns: 13.9375rem 1fr;
    gap: 0 2rem;
    -webkit-transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease, -ms-grid-columns 0.3s ease;
}

/* The gap belongs to whatever column holds a card grid, not to the catalogue
   alone: the downloads grid sits in the profile column, and without the token
   here `gap: var(--content-grid-gap)` is invalid and the cards touch. */
.content__inner,
.downloads-list--grid,
.product__content .row {
    --content-grid-gap: clamp(0.3125rem, 0.2232142857rem + 0.4464285714vw, 0.625rem);
}

.content__inner {
    container-type: inline-size;
}

.legal__body {
    display: grid;
    padding-top: clamp(1.125rem, 0.7321428571rem + 1.9642857143vw, 2.5rem);
    grid-template-columns: 20.375rem 1fr;
    gap: 0 clamp(1.375rem, 0.2857142857rem + 5.4464285714vw, 5.1875rem);
    -webkit-transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease, -ms-grid-columns 0.3s ease;
}

@media (max-width: 63.99875rem) {
    .legal__body {
        padding-top: 0;
        grid-template-columns: auto;
    }

    .legal__content {
        padding-top: clamp(1.125rem, 0.7321428571rem + 1.9642857143vw, 2.5rem) !important;
    }
}

.legal__content {
    padding-top: 0;
    color: #EFEFEF;
}

.legal__content p {
    margin-bottom: 15px;
}

.legal__content h1 {
    font-size: clamp(1.25rem, 1.1071428571rem + 0.7142857143vw, 1.75rem);
    margin-top: 0 !important;
}

.legal__content h2 {
    margin-bottom: 32px;
}

.legal__content ul li {
    margin-bottom: 15px;
}

.legal__content hr {
    border-color: rgb(217, 217, 217, 0.09) !important;
    margin: 34px 0;
}

/* Додаємо в resources/css/app.css */
.legal__content table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-legend);
}

.legal__content thead {
    background-color: transparent;
}

.legal__content thead th {
    padding: 0.75rem 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal__content tr {
    border: 1px solid var(--color-legend);
}

.legal__content tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
}

.privacy-copyright {
    color: var(--color-gray-05);
    margin-top: 70px;
}

.content__body:has(.aside.collapsed) {
    grid-template-columns: 3.3125rem 1fr;
}

.content__body:not(:has(.aside)) {
    grid-template-columns: 1fr;
    gap: 0;
}

@media (max-width: 63.99875rem) {
    .content__body {
        grid-template-columns: auto;
    }
}

.content__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--content-grid-gap);
    padding-left: 0;
}

@media (max-width: 119.99875rem) {
    .content__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 79.99875rem) {
    .content__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 47.99875rem) {
    .content__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 30.001rem) and (max-width: 47.99875rem) {
    #paginated-products .content__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.content__grid--pb {
    padding-bottom: 1.5rem;
}

@media (max-width: 79.99875rem) {
    .content__grid--pb {
        padding-bottom: 1.25rem;
    }
}

@media (max-width: 63.99875rem) {
    .content__grid--pb {
        padding-bottom: 1rem;
    }
}

@media (max-width: 47.99875rem) {
    .content__grid--pb {
        padding-bottom: 0.875rem;
    }
}

.content__grid[data-js-skeleton] {
    display: none;
}

.content__grid[data-js-products] {
    display: grid;
}

.download-block {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.8125rem;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 400;
}

.download-block.active {
    opacity: 100%;
    visibility: visible;
}

.download-block__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.375rem;
}

.download-block--loading .download-block__list,
.download-block--loading .download-block__back {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.download-block__loader {
    inset: 0;
    z-index: 1;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

.download-block__loader path {
    fill: var(--color-brand);
}

.download-block__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: min(100%, var(--download-block-item-width));
    height: 15%;
    min-height: 1.625rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--color-brand);
    border-radius: 3.125rem;
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    line-height: 1.5rem;
    font-weight: 600;
    cursor: pointer;
}

.download-block__item:hover {
    background-color: var(--color-light);
    border: 1px solid var(--color-light);
}

.download-block__link {
    color: var(--color-brand);
}

.download-block__item:hover .download-block__link {
    color: var(--color-background-01);
}

.download-block__back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0.625rem;
    left: 0.8125rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-light);
    border: 1px solid var(--color-light);
    border-radius: 50%;
}

.download-block__back:hover {
    color: var(--color-background-01);
    background-color: var(--color-light);
}

.download-block__icon {
    margin-right: 0.125rem;
    font-size: 1rem;
    color: inherit;
}

.download-block__back:hover .download-block__icon {
    color: var(--color-background-01);
}

.dropdown {
    width: 100%;
    position: relative;
}

.dropdown__list {
    width: auto;
    min-width: 100%;
    position: absolute;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: none;
    flex-direction: column;
    padding: 0.625rem 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 24px;
    border-radius: 0.5rem;
    z-index: 1000;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
}

@media (max-width: 63.99875rem) {
    .dropdown__list {
        width: auto;
        right: inherit;
    }

    .dropdown__list.right {
        width: auto;
        right: 0 !important;
    }
}

.dropdown__list.light {
    background-color: var(--color-gray-light-04);
    color: var(--color-background-01) !important;
}

.dropdown__list.light .dropdown__button.active,
.dropdown__list.light .dropdown__button:hover {
    background-color: var(--color-gray-light-03);
}

.dropdown__list.dark {
    background-color: var(--color-legend);
    color: var(--color-light) !important;
    border: 0.0625rem solid var(--color-line);
}

.dropdown__list.dark .dropdown__button.active,
.dropdown__list.dark .dropdown__button:hover {
    background-color: var(--color-legend-02);
}

.dropdown__list.dark .dropdown__button {
    padding: 0.25rem 1.0625rem;
    font-size: 0.875rem;
}

.dropdown__list.active {
    display: block;
}

.dropdown__list.up {
    bottom: calc(100% + 4px);
    top: auto;
    animation: dropdownUp 0.15s ease-out;

}

.dropdown__list.down {
    top: calc(100% + 4px);
    bottom: auto;
    animation: dropdownDown 0.15s ease-out;
}

@keyframes dropdownDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropdownUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown__item {
    width: auto;
}

.dropdown__button {
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    background-color: transparent;
    border: none;
    padding: 0.25rem 0.625rem;
    gap: 0.375rem;
    white-space: nowrap;
}

.dropdown__button:disabled {
    color: var(--color-gray);
}

.dropdown__button-icon {
    font-size: 1.125rem;
}

.dropdown__button-icon svg {
    width: 16px;
}

.dropdown__button-size {
    font-size: 0.625rem;
    font-weight: 500;
    margin-left: auto;
}

.dropdown__button .bold {
    font-weight: 700;
}

.footer {
    background-color: var(--color-top);
    font-size: var(--navigation-size);
    font-weight: var(--navigation-weight);
    line-height: var(--navigation-line-height);
}

.footer__body {
    padding-block: clamp(1.875rem, 1.3392857143rem + 2.6785714286vw, 3.75rem);
}

.footer__menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-column-gap: clamp(1.125rem, -0.0714285714rem + 5.9821428571vw, 5.3125rem);
    -moz-column-gap: clamp(1.125rem, -0.0714285714rem + 5.9821428571vw, 5.3125rem);
    column-gap: clamp(1.125rem, -0.0714285714rem + 5.9821428571vw, 5.3125rem);
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto 3.75rem auto;
}

.footer__menu-column {
    display: grid;
    row-gap: clamp(1.0625rem, 0.9017857143rem + 0.8035714286vw, 1.625rem);
}

.footer__menu-list {
    display: grid;
    row-gap: 0.688rem;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.footer__menu-title {
    font-size: var(--navigation-size);
    line-height: var(--navigation-line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-05);
}

.footer__menu-link--soc1al {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: clamp(0.4375rem, 0.3660714286rem + 0.3571428571vw, 0.6875rem);
    line-height: inherit;
    fill: var(--color-brand);
}

.footer__menu-link--soc1al svg {
    flex-shrink: 0;
    align-self: start;
    margin-top: 0.125em;
    width: clamp(1rem, 0.8571428571rem + 0.7142857143vw, 1.5rem);
    height: clamp(1rem, 0.8571428571rem + 0.7142857143vw, 1.5rem);
}

.footer__extra {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--color-gray-light-01);
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-line-height);
    text-align: center;
}

.footer__logo {
    flex-shrink: 0;
    margin-top: 0.125em;
    margin-right: clamp(0.3125rem, 0.25rem + 0.3125vw, 0.53125rem);
    width: clamp(0.5rem, 0.4107142857rem + 0.4464285714vw, 0.8125rem);
}

@media (max-width: 47.99875rem) {
    .footer__menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
        justify-items: start;
        max-width: none;
        margin: 0 0 2rem;
    }

    .footer__menu-column {
        width: 100%;
        row-gap: 0.875rem;
    }

    .footer__extra {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.5rem;
        text-align: left;
    }

    .footer__logo {
        margin-right: 0;
    }
}

.main {
    border-bottom: 1px solid var(--color-line);
}

.modal-overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 20000;
    padding: var(--space-4);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.modal-overlay.open {
    visibility: visible;
    opacity: 1;
}

/* The backdrop only fades. Transitioning the overlay itself scaled the dark
   sheet along with everything on it, which looked like the page zooming. */
.modal-overlay--in {
    animation: modal-backdrop-in 0.2s ease-out both;
}

.modal-overlay--out {
    animation: modal-backdrop-in 0.16s ease-in reverse both;
}

/* The card is what moves: a short rise, no bounce. */
.modal--in {
    animation: modal-card-in 0.26s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.modal--out {
    animation: modal-card-in 0.16s ease-in reverse both;
}

@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modal-card-in {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay--in,
    .modal-overlay--out,
    .modal--in,
    .modal--out {
        animation-duration: 0.01ms;
    }
}

.modal {
    width: min(100%, 31.25rem);
    height: auto;
    max-height: calc(100vh - var(--space-4) * 2);
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: auto;
    background-color: var(--color-modal);
    color: var(--color-light);
    padding: clamp(var(--space-10), 5vw, var(--space-12)) clamp(var(--space-4), 4vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-8));
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    position: relative;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    font-variation-settings: "wght" 300;
    color: var(--color-light);
    cursor: pointer;
}

.modal__img-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-background-02);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-md);
    margin-bottom: clamp(var(--space-6), 3vw, var(--space-8));
}

.modal__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal__title {
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    margin-bottom: var(--space-1);
}

.modal__text {
    text-align: center;
    font-size: var(--text-small-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-small-line-height);
    margin-bottom: clamp(var(--space-6), 4vw, var(--space-8));
}

.modal__button {
    width: 100%;
    min-height: var(--control-height-md);
    padding: var(--button-medium-padding-y) var(--button-medium-padding-x);
    font-size: var(--button-medium-size);
    font-weight: var(--button-font-weight);
    line-height: var(--button-medium-line-height);
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-dark);
    margin-bottom: var(--space-2);
}

.modal__link {
    display: inline-flex;
    font-size: var(--caption-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--caption-line-height);
    color: var(--color-light);
    margin-top: var(--space-0);
}

.modal__link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Success modal — shown once, right after a subscription is paid for.

   A different rhythm from the prompt modal above: that one persuades and leans
   on a preview image, this one confirms and has nothing to sell. So the type
   carries it — a mark, a short headline, one line of explanation, and the
   countdown kept quiet at the bottom where it informs without nagging.
--------------------------------------------------------------------------- */
.modal--success {
    width: min(100%, 27rem);
    padding: clamp(var(--space-8), 4vw, var(--space-10)) clamp(var(--space-5), 4vw, var(--space-8)) clamp(var(--space-6), 3vw, var(--space-8));
    text-align: center;
}

.modal__mark {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background-color: var(--color-brand);
    color: var(--color-dark);
}

.modal__mark svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Pending and done swap in place, so the card must not resize under the
   reader: the mark holds its box while the spinner turns. */
.modal__mark--pending {
    background-color: transparent;
    border: 2px solid var(--color-line);
    border-top-color: var(--color-brand);
    animation: modal-spin 0.9s linear infinite;
}

@keyframes modal-spin {
    to { transform: rotate(360deg); }
}

.modal--success .modal__title {
    font-size: var(--h4-size);
    line-height: var(--h4-line-height);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
    text-wrap: balance;
}

.modal--success .modal__text {
    max-width: 30ch;
    margin-inline: auto;
    margin-bottom: clamp(var(--space-6), 3vw, var(--space-8));
    color: var(--color-light);
    opacity: 0.75;
}

.modal--success .modal__mark--pending ~ .modal__text {
    margin-bottom: 0;
}

.modal__plan {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-brand);
}

.modal--success .modal__button {
    margin-bottom: 0;
}

.modal__countdown {
    display: block;
    align-self: stretch;
    margin-top: var(--space-5);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    color: var(--color-light);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

.modal__countdown-bar {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: var(--space-2);
    border-radius: 2px;
    background-color: var(--color-line);
    overflow: hidden;
}

.modal__countdown-fill {
    display: block;
    height: 100%;
    width: 100%;
    background-color: var(--color-brand);
    transform-origin: left center;
    animation: modal-countdown linear forwards;
}

@keyframes modal-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .modal__mark--pending { animation-duration: 2.4s; }
    .modal__countdown-fill { animation: none; transform: scaleX(0); }
}

/* ---------------------------------------------------------------------------
   Cancellation modal — a form, not an announcement. Left-aligned and a little
   wider than the confirmation above, because the reason list is the content
   here and centred radio buttons in a column read as a poll, not a choice.
--------------------------------------------------------------------------- */
.modal--cancel {
    width: min(100%, 30rem);
    align-items: stretch;
    text-align: left;
    padding: clamp(var(--space-8), 4vw, var(--space-10)) clamp(var(--space-5), 4vw, var(--space-8)) clamp(var(--space-6), 3vw, var(--space-8));
}

.modal--cancel .modal__title {
    align-self: flex-start;
    text-align: left;
    margin-bottom: var(--space-2);
}

.modal--cancel .modal__text {
    text-align: left;
    margin-bottom: var(--space-5);
    opacity: 0.75;
}

.modal--cancel .modal__button {
    margin-top: var(--space-1);
}

.modal--cancel .modal__link {
    align-self: center;
    margin-top: var(--space-3);
    opacity: 0.7;
}

.modal--cancel .modal__link:hover {
    opacity: 1;
}

.cancel-reasons {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    margin-bottom: var(--space-4);
}

.cancel-reason {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cancel-reason:hover {
    border-color: var(--color-light);
}

.cancel-reason.is-selected {
    border-color: var(--color-brand);
    background-color: rgba(181, 251, 2, 0.06);
}

.cancel-reason input {
    flex: none;
    margin: 0;
    accent-color: var(--color-brand);
}

/* The comment field: a proper input, not a squeezed strip with a drag handle.
   Fixed height and no native resizer — the grip is the ugliest control the
   browser owns, and three rows is enough for the sentence people actually
   write. */
.cancel-comment__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    width: 100%;
    margin-bottom: var(--space-2);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    color: var(--color-light);
}

.cancel-comment__label span {
    font-size: 0.75em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.45;
}

/* "Required" has to read as a fact, not a warning — it turns up before anyone
   has done anything wrong. */
.cancel-comment__label .is-required {
    color: var(--color-brand);
    opacity: 0.9;
}

.cancel-comment.has-error {
    border-color: var(--color-error, #ff6b6b);
}

.cancel-comment {
    display: block;
    width: 100%;
    min-height: 5.5rem;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background-color: var(--color-background-02, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    color: var(--color-light);
    font-family: inherit;
    font-size: var(--text-small-size);
    line-height: 1.55;
    resize: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cancel-comment::placeholder {
    color: var(--color-light);
    opacity: 0.4;
}

.cancel-comment:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.cancel-comment:focus {
    outline: none;
    border-color: var(--color-brand);
    background-color: rgba(181, 251, 2, 0.04);
}

/* ---------------------------------------------------------------------------
   Scrollbars.

   A modal that scrolls was showing the operating system's own scrollbar — a
   bright chrome strip down the side of a dark card, which is what "looks
   broken" means to anyone who did not build it. Styled to sit inside the
   design instead: thin, dim, and only as visible as it needs to be to say the
   content continues.
--------------------------------------------------------------------------- */
.modal,
.cancel-comment,
.cancel-reasons {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.modal::-webkit-scrollbar,
.cancel-comment::-webkit-scrollbar,
.cancel-reasons::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.modal::-webkit-scrollbar-track,
.cancel-comment::-webkit-scrollbar-track,
.cancel-reasons::-webkit-scrollbar-track {
    background: transparent;
}

.modal::-webkit-scrollbar-thumb,
.cancel-comment::-webkit-scrollbar-thumb,
.cancel-reasons::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    /* Inset by a transparent border so the bar never touches the card edge. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

.modal:hover::-webkit-scrollbar-thumb,
.cancel-comment:hover::-webkit-scrollbar-thumb,
.cancel-reasons:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.32);
}

.modal::-webkit-scrollbar-thumb:active,
.cancel-comment::-webkit-scrollbar-thumb:active {
    background-color: var(--color-brand);
}

/* The card scrolls, never the dimmed sheet behind it — a scrollbar down the
   whole viewport edge is what made this look like a broken page. */
.modal-overlay {
    overflow: hidden;
}

.modal {
    overscroll-behavior: contain;
}

.cancel-error {
    width: 100%;
    margin: 0 0 var(--space-3);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    color: var(--color-error, #ff6b6b);
}

.pricing__card {
    min-height: 35.8125rem;
    padding: clamp(1.5rem, 1.3928571429rem + 0.5357142857vw, 1.875rem) clamp(1.375rem, 1.125rem + 1.25vw, 2.25rem) clamp(2rem, 1.6964285714rem + 1.5178571429vw, 3.0625rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 20rem;
    flex: 1 1 20rem;
    width: auto;
    min-width: min(100%, 18.5rem);
    max-width: 30.375rem;
    background-color: var(--color-dark);
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--color-line);
}

.pricing__card.accent {
    border-color: #B5FB0253;
}

@media (max-width: 63.99875rem) {
    .pricing__card {
        min-height: auto;
        max-width: 20rem;
    }
}

.pricing__card-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    gap: 0.625rem;
    margin-bottom: clamp(1.625rem, 1.4464285714rem + 0.8928571429vw, 2.25rem);
}

.pricing__card-title--h3 {
    /* Bootstrap gives every h3 a bottom margin, which centres the boxes but not
       what is inside them — the logo sat level with the text's middle while the
       text itself rode high. */
    margin: 0;
    font-size: clamp(1.75rem, 1.6785714286rem + 0.3571428571vw, 2rem);
    line-height: 1.2;
}

.pricing__card-logo {
    width: clamp(1rem, 0.9285714286rem + 0.3571428571vw, 1.25rem);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.pricing__card-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    font-size: clamp(0.875rem, 0.8392857143rem + 0.1785714286vw, 1rem);
    font-weight: 500;
    gap: 0.625rem;
    margin-bottom: clamp(1.75rem, 1.5rem + 1.25vw, 2.625rem);
}

/* Monthly / Yearly, in the card's own header, opposite the plan name. A pair of
   buttons rather than an on/off switch: neither period is an "off" state. Kept
   small enough to read as a control on the price, not as a second heading. */
.pricing__card-period {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    background-color: var(--color-secondary-gray-light);
    border: 0.0625rem solid var(--color-line);
    border-radius: 2.125rem;
}

.pricing__card-period-option {
    min-height: 1.75rem;
    padding: 0 0.75rem;
    background-color: transparent;
    border: none;
    border-radius: 2.125rem;
    color: var(--color-gray-light-01);
    font-family: var(--font-family-ui);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease;
    transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .pricing__card-period-option:hover {
        color: var(--color-light);
    }
}

.pricing__card-period-option.is-active,
.pricing__card-period-option.is-active:hover {
    background-color: var(--color-brand);
    color: var(--color-dark);
}

.pricing__card-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 0.25rem;
    line-height: 1.2;
}

.pricing__card-current-price {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.pricing__card-price .accent {
    font-size: clamp(2.25rem, 2.1785714286rem + 0.3571428571vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.pricing__card-old-price {
    color: var(--color-brand-dark-02);
    font-family: inherit;
    font-size: clamp(1rem, 0.9285714286rem + 0.3571428571vw, 1.25rem);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: line-through;
    white-space: nowrap;
}

.pricing__card-old-price--placeholder {
    visibility: hidden;
}

.pricing__card-subtext {
    color: #cccccc;
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    font-weight: 500;
    line-height: 1.2;
}

/* Quieter than the billing note above it: this is a caveat, not a selling
   point, but it has to be legible before the buyer reaches checkout and sees
   tax added on top. */
.pricing__card-tax {
    margin-top: 0.375rem;
    color: var(--color-gray-light-02-rgba-50);
    font-size: clamp(0.6875rem, 0.6696428571rem + 0.0892857143vw, 0.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.pricing__card-button {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.75rem;
    font-size: clamp(1rem, 0.9642857143rem + 0.1785714286vw, 1.125rem);
    font-weight: 700;
    line-height: 1.2;
    border-radius: 2.0625rem;
}

/* The plan the visitor is already on. It stays the same size as the buttons
   around it so the row of cards keeps its rhythm — only the styling says this
   one is not for clicking. */
.pricing__card-button.is-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--color-brand);
    color: var(--color-brand);
    cursor: default;
}

.pricing__card-button.is-current svg {
    flex-shrink: 0;
}

/* Switching to another plan is a secondary action next to buying: quieter than
   the brand-filled button, but still clearly a button. */
.pricing__card-button.is-switch {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: inherit;
}

@media (hover: hover) {
    .pricing__card-button.is-switch:hover {
        border-color: var(--color-brand);
        color: var(--color-brand);
    }
}

.pricing__card-list {
    /* No indent: the plan name, the price and the button all start at the card's
       left edge, and the list used to be the one thing that did not. */
    margin-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #cccccc;
    font-size: clamp(0.875rem, 0.8392857143rem + 0.1785714286vw, 1rem);
    font-weight: 400;
    line-height: 1.2;
    width: 18.75rem;
    gap: 0.75rem;
    white-space: normal;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pricing__card-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 0.625rem;
}

.pricing__card-icon {
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 0.875rem;
    height: auto;
    margin-top: 0.1875rem;
    color: var(--color-brand);
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pagination.small {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media (min-width: 47.99875rem) {
    .pagination.small {
        display: none;
    }
}

@media (max-width: 47.99875rem) {
    .pagination.big {
        display: none;
    }
}

.pagination__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0.25rem;
    width: 2.625rem;
    height: 2.625rem;
    font-family: var(--font-family-ui);
    font-size: var(--navigation-size);
    font-weight: var(--navigation-weight);
    line-height: var(--navigation-line-height);
    border: 1px solid var(--color-line);
    border-radius: 50%;
    cursor: pointer;
}

.pagination__item.active {
    background-color: var(--color-light);
    color: var(--color-background-01);
}

.pagination__item.active .pagination__icon {
    fill: var(--color-background-01);
}

.pagination__item.disabled {
    color: var(--color-gray);
    border: 1px solid var(--color-line);
}

.pagination__item.disabled .pagination__icon {
    fill: var(--color-gray);
}


@media (hover: hover) {
    .pagination__item:hover {
        background-color: var(--color-light);
        color: var(--color-background-01);
    }

    .pagination__item:hover .pagination__icon {
        fill: var(--color-background-01);
    }

    .pagination__item.disabled:hover {
        color: var(--color-gray);
        fill: var(--color-gray);
        background-color: transparent;
    }

    .pagination__item.disabled:hover .pagination__icon {
        fill: var(--color-gray);
    }
}

.pagination__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: transparent;
    width: 2.625rem;
    height: 2.625rem;
    border: none;
    font: inherit;
}

.pagination__link svg {
    width: 24px;
    height: 24px;
}

.pagination__link {
    fill: var(--color-gray-light-02);
}

.pagination__link.left {
    margin-right: -0.45rem;
}

.pagination__link.right {
    margin-left: 0.125rem;
}

@media (max-width: 47.99875rem) {
    .pagination__item:not(:has(.left)):not(:has(.right)) {
        display: none;
    }
}

.search-results {
    display: none;
    z-index: 17000;
}

@media (max-width: 63.99875rem) {
    .search-results {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }
}

.search-results__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    gap: 0.625rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-background-01);
    padding: 0.625rem 1.0625rem 1.25rem 1.0625rem;
    border: 0 0 0.75rem 0.75rem;
}

.search-results__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.375rem;
    font-size: 0.75rem;
}

.search-results__icon {
    font-variation-settings: "wght" 200;
}

.section__title {
    font-size: clamp(1rem, 0.7142857143rem + 1.4285714286vw, 2rem);
    font-weight: 800;
}

.section__title--mb {
    margin-bottom: 2rem;
}

.soft {
    height: 4.375rem;
    max-height: 4.375rem;
    background-color: var(--color-top);
}

/* Inline soft nav inside header__body (products page, desktop only) */
.soft--inline {
    flex: 1;
    height: 100%;
    align-self: stretch;
    max-height: none;
    background-color: transparent;
    min-width: 0;
    margin-left: 2.4375rem;
}

.soft--inline .soft__list {
    width: 100%;
    height: 100%;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3.6875rem;
    overflow: visible;
}

.soft--inline .soft__list-item {
    flex-shrink: 1;
    min-width: 0;
    height: 100%;
}

.soft--inline .soft__list-link {
    height: 100%;
    padding: 0;
    border-bottom: 3px solid transparent;
    font-size: var(--navigation-size);
    line-height: var(--navigation-line-height);
    font-weight: var(--navigation-weight);
    color: #666666;
    white-space: nowrap;
}

.soft--inline .soft__list-link.active {
    color: var(--color-gray-light-02);
}

.soft--inline .soft__list-link:hover {
    color: var(--color-gray-light-02);
}

/* Hide inline version on mobile — mobile panel takes over */
@media (max-width: 64rem) {
    .soft--inline {
        display: none;
    }
}

/* Hide the below-header soft nav on desktop for products page */
@media (min-width: 64rem) {
    .soft-nav--mobile-only {
        display: none;
    }
}

@media (max-width: 64rem) {
    .soft {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        -webkit-transform: translate(100%);
        transform: translate(100%);
        background-color: var(--color-background-02);
        color: var(--color-light);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 17020;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s ease;
    }

    .soft.open {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

.soft__container {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (max-width: 64rem) {
    .soft__container {
        min-height: 100%;
        padding: 1.0625rem 0 calc(3.125rem + env(safe-area-inset-bottom));
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.soft__header {
    position: sticky;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 1.25rem;
    background-color: var(--color-background-02);
    z-index: 1;
}

@media (min-width: 64.00125rem) {
    .soft__header {
        display: none;
    }
}

.soft__title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    font-size: var(--navigation-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--navigation-line-height);
    white-space: nowrap;
}

.soft__list {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap: clamp(0.25rem, -1.3571428571rem + 8.0357142857vw, 5.875rem);
}

@media (min-width: 79.99875rem) {
    .soft__list {
        gap: clamp(0.25rem, -1.3571428571rem + 8.0357142857vw, 5.875rem);
    }
}

@media (max-width: 79.99875rem) {
    .soft__list {
        gap: 2.8125rem;
        ;
    }
}

@media (max-width: 63.99875rem) {
    .soft__list {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 2.25rem 0;
        gap: 0.25rem;
        overflow: hidden;
        -webkit-transition: height 0.3s ease;
        transition: height 0.3s ease;
    }
}

@media (max-width: 63.99875rem) {
    .soft__list-item {
        width: 100%;
    }
}

.soft__list-item {
    height: 100%;
}

.soft__list-link {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-column-gap: 0.5rem;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    font-size: var(--navigation-size);
    font-weight: var(--navigation-weight);
    line-height: var(--navigation-line-height);
    color: var(--color-gray-05);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    -webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

@media (max-width: 79.99875rem) {
    .soft__list-link {
        -webkit-column-gap: clamp(0.375rem, 0.3392857143rem + 0.1785714286vw, 0.5rem);
        -moz-column-gap: clamp(0.375rem, 0.3392857143rem + 0.1785714286vw, 0.5rem);
        column-gap: clamp(0.375rem, 0.3392857143rem + 0.1785714286vw, 0.5rem);
    }
}

@media (max-width: 63.99875rem) {
    .soft__list-link {
        padding: 0.875rem 1.25rem;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: var(--navigation-size);
        line-height: var(--navigation-line-height);
        border-radius: 0;
        border: none;
    }
}

.soft__list-link.active {
    color: var(--color-gray-light-02);
    fill: var(--color-gray-light-02);
    border-bottom: 0.188rem solid var(--color-brand);
}

@media (max-width: 63.99875rem) {
    .soft__list-link.active {
        color: var(--color-light);
        background-color: var(--color-legend);
        fill: var(--color-light);
        border: none;
    }
}

.soft__list-link svg {
    width: 19px;
}

.soft__list-link.active svg {
    fill: var(--color-light);
}

@media (max-width: 63.99875rem) {
    .soft__list-link.active .soft__list-link svg {
        fill: var(--color-light);
    }
}

.soft__list-link:hover {
    color: var(--color-gray-light-02);
    fill: var(--color-gray-light-02);
    border-bottom: 3px solid var(--color-brand);
}

@media (hover: hover) {
    .soft__list-link:hover {
        color: var(--color-gray-light-02);
        fill: var(--color-gray-light-02);
        border-bottom: 3px solid var(--color-brand);
    }
}

.soft__list-link:hover svg {
    fill: var(--color-gray-light-02);
}

.soft__list-link svg {
    fill: var(--color-gray-05);
    width: clamp(0.875rem, 0.6964285714rem + 0.8928571429vw, 1.5rem);
    height: auto;
}

@media (max-width: 63.99875rem) {
    .soft__list-link svg {
        width: clamp(1.0625rem, 0.9732142857rem + 0.4464285714vw, 1.375rem);
        height: clamp(1.0625rem, 0.9732142857rem + 0.4464285714vw, 1.375rem);
        fill: var(--color-gray-05);
    }

    .soft__list-link:hover {
        border-bottom: none;
    }
}

.tags__list {
    padding-top: 1.75rem;
    margin-bottom: clamp(1.5625rem, 1.2053571429rem + 1.7857142857vw, 2.8125rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: clamp(0.1875rem, 0.0803571429rem + 0.5357142857vw, 0.5625rem);
    padding-left: 0 !important;
}

.product__video-container .tags__list {
    width: 60%;
    max-width: 60%;
    padding-top: clamp(0.875rem, 0.5179rem + 1.7857vw, 1.3125rem);
    margin-bottom: 0;
}

.tags__item {
    max-height: 2rem;
}

.tags__link {
    display: inline-flex;
    align-items: center;
    max-height: 2rem;
    color: var(--color-gray-light-02);
    padding: clamp(0.375rem, 0.3392857143rem + 0.1785714286vw, 0.5rem) clamp(0.6875rem, 0.6517857143rem + 0.1785714286vw, 0.8125rem);
    font-size: 0.75rem;
    font-weight: 400;
    background-color: var(--color-background-02);
    border-radius: 1.3125rem;
}

.tags__link:hover {
    color: var(--color-background-01);
    background-color: var(--color-light);
}

.tags__link.active {
    color: var(--color-background-01);
    background-color: var(--color-light);
}

.pricing__inner {
    padding: clamp(1.375rem, 0.9642857143rem + 2.0535714286vw, 2.8125rem) 0 clamp(3.125rem, 2.2321428571rem + 4.4642857143vw, 6.25rem) 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(2.25rem, 1.8214285714rem + 2.1428571429vw, 3.75rem);
}

.pricing__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 47.99875rem) {
    .pricing__inner {
        padding-top: 0.75rem;
        padding-bottom: 1.75rem;
    }

    .pricing__header {
        max-width: none;
        width: 100%;
    }
}

/* A plain block, not a flex box: the cards used to be its direct children, but
   they now sit in a Bootstrap row that lays itself out. A row inside a flex
   container shrinks to fit its content, which made `col-*-4` a third of the
   cards rather than a third of the page — at 1440px one plan came out 109px
   wide, two 241px, three 374px, and only four or more reached the intended
   416px. As a block child the row spans the body, and its negative gutter
   margins keep the cards flush with the container as before. */
.pricing__body {
    width: 100%;
}

@media (max-width: 47.99875rem) {
    .pricing__card {
        width: 100%;
        max-width: 20rem;
    }
}

.pricing__title {
    text-align: center;
}

.pricing__text {
    /* Was clamping down to 7px — unreadable, and a jarring drop from a 64px
       heading. A deck needs to sit between the heading and the cards, not
       vanish under it. */
    max-width: 34rem;
    margin: 0 auto;
    color: var(--color-gray-light-01);
    font-size: clamp(0.9375rem, 0.8928571429rem + 0.2232142857vw, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.product-section {
    padding-top: 0;
    border-bottom: 0.063rem solid var(--color-line);
}

.product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: clamp(var(--space-6), 1.4464285714rem + 1.5178571429vw, var(--space-10));
}

.product-breadcrumbs {
    min-width: 0;
    margin-bottom: clamp(var(--space-4), 2vw, var(--space-6));
}

.product-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-gray);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    font-weight: var(--caption-weight);
}

.product-breadcrumbs__item {
    display: flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
}

.product-breadcrumbs__item:last-child {
    flex-shrink: 1;
}

.product-breadcrumbs__link {
    color: var(--color-gray);
    transition: color var(--transition-duration);
}

.product-breadcrumbs__link:hover {
    color: var(--color-brand);
}

.product-breadcrumbs__separator {
    color: var(--color-gray-06);
}

.product-breadcrumbs__current {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--color-gray-light-04);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(var(--space-5), 4vw, 3.5625rem);
}

@media (max-width: 64rem) {
    .product__inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: clamp(var(--space-5), 2.5vw, var(--space-8));
        background-color: transparent;
        border-radius: 0;
    }

    .product__mobile-header {
        display: flex;
        order: 1;
        width: 100%;
    }

    .product__header-block--desktop {
        display: none;
    }

    .product__video-container {
        order: 2;
    }

    .product__content-wrapper {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 47.99875rem) {
    .product-breadcrumbs__list {
        gap: var(--space-1);
        font-size: var(--caption-size);
    }

    .product-breadcrumbs {
        margin-bottom: var(--space-3);
    }
}

.product__video-container {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    height: auto;
    border-radius: 1rem;
    /* 16px */
}

.product__video-frame {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem;
}

.product__video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1rem;
    /* 16px */
}

.product__info {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    max-width: none;
    padding: var(--space-0);
    container-type: inline-size;
}

.product__info-header {
    margin-bottom: var(--space-5);
}

.product__actions {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: var(--control-height-md);
    gap: var(--space-3);
    margin-bottom: 0;
}

.product__actions-download {
    position: relative;
    height: 100%;
    flex: 0 0 auto;
}

.product__button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.75rem;
    width: -webkit-fit-content;
    width: fit-content;
    min-height: var(--control-height-md);
    height: 100%;
    color: var(--color-dark);
    background-color: var(--color-brand);
    font-family: var(--font-family-ui);
    font-weight: var(--button-font-weight);
    font-size: var(--button-small-size);
    line-height: var(--button-small-line-height);
    letter-spacing: var(--button-letter-spacing);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0 var(--button-small-padding-x);
    border: 1.65px solid var(--color-brand);
    border-radius: var(--button-radius);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-duration: var(--transition-duration-fast);
    transition-timing-function: var(--transition-timing);
}

.product__button:focus {
    outline: none;
}

.product__button:focus-visible {
    outline: 0.125rem solid var(--color-brand);
    outline-offset: 0.1875rem;
    box-shadow: var(--button-shadow-focus);
}

.product__button:disabled {
    background-color: var(--color-brand-dark-02);
    border-color: var(--color-brand-dark-02);
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.product__button:active {
    -webkit-transform: none;
    transform: none;
}

.product__button-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    gap: var(--button-gap);
    width: 100%;
}

/* While downloading: keep the inner content in flow (preserves button width)
   but hidden, and overlay the spinner centered on top. */
.product__button-inner--loading {
    visibility: hidden;
}

.product__button .loader {
    inset: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Split-button layout (was provided by .button.chevrone) */
.product__button .left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(0.3125rem, 0.2053571429rem + 0.5357142857vw, 0.6875rem);
}

.product__button .right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: -2px;
}

.product__button--all {
    font-weight: var(--button-font-weight);
}

/* Icons & divider follow the text color so they turn brand on hover */
.product__button .left svg path {
    stroke: currentColor;
}

.product__button-arrow svg {
    fill: currentColor;
}

.product__button .divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 1.75rem;
    max-height: 100%;
    border-right: 1px solid currentColor;
    opacity: 0.35;
}

/* Hover — same look as home .btn-brand (translucent brand fill, brand text/outline) */
.product__button:hover:not(:disabled) {
    background-color: rgba(181, 251, 2, 0.16);
    color: var(--color-brand);
    border-color: var(--color-brand);
}

@media (max-width: 47.99875rem) {
    .product__button {
        width: 100%;
    }

    .product__button .divider,
    .product__button .right {
        display: none;
    }
}

.product__button .left svg {
    width: clamp(0.875rem, 0.8035714286rem + 0.3571428571vw, 1.125rem);
}

.product__button-arrow {
    display: inline-flex;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    font-variation-settings: "wght" 200;
    -webkit-transition: -webkit-transform var(--transition-duration-fast) var(--transition-timing);
    transition: transform var(--transition-duration-fast) var(--transition-timing);
}

.product__button-arrow.rotate {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.product__actions .dropdown__list {
    min-width: 100%;
}

.product__actions .dropdown__button {
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
}

.product__actions .dropdown__button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.product__content-wrapper>.product__property-group--flex .button--reverse {
    min-height: var(--control-height-md);
    padding: 0 var(--button-small-padding-x);
    font-size: var(--button-small-size);
    font-weight: var(--button-font-weight);
    border-width: 0.125rem;
}

/* Product content wrapper styles */
.product__content-wrapper {
    --product-info-inset: clamp(var(--space-2), 0.972vw, 0.875rem);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 30%;
    max-width: 30%;
    gap: var(--space-0);
}

/* Product header block styles */
.product__header-block {
    min-height: 0;
    padding: var(--space-0);
    padding-bottom: clamp(var(--space-4), 2.083vw, 1.875rem);
    margin-bottom: clamp(var(--space-4), 2.083vw, 1.875rem);
    border-bottom: 0.0125rem solid var(--color-line);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
}

.product__mobile-header {
    display: none;
}

.product__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-1);
}

.product__title {
    font-family: var(--heading-font-family);
    font-weight: var(--font-weight-bold);
    font-size: clamp(var(--font-size-h5), calc(0.8846rem + 0.9615vw), var(--font-size-h4));
    line-height: var(--heading-line-height);
    color: var(--color-gray-light-04);
    margin: 0;
}

.product__author {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    font-weight: var(--font-weight-semibold);
}

.product__author--italic {
    font-family: var(--font-family-accent);
    font-style: italic;
}

.product__author--link {
    color: var(--color-brand);
}

/* Like button styles */
.product__like-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2) 0 var(--space-2) var(--space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition-duration-fast) var(--transition-timing);
    color: var(--color-gray-06);
    flex-shrink: 0;
}

.product__like-button--video {
    position: absolute;
    top: clamp(var(--space-2), 2.5vw, 1.375rem);
    right: clamp(var(--space-2), 2.5vw, 1.375rem);
    z-index: 2;
    padding: var(--space-2);
}

.product__like-button--video .product__like-icon {
    width: clamp(1.5rem, 2.78vw, 2.5rem);
    height: auto;
}

.product__edit-button {
    position: absolute;
    top: clamp(var(--space-4), 1.55vw, 1.375rem);
    left: clamp(var(--space-4), 1.55vw, 1.375rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.625rem;
    min-height: var(--control-height-sm);
    padding: 0 var(--button-small-padding-x);
    color: var(--color-brand);
    font-family: var(--font-family-ui);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    font-weight: var(--button-font-weight);
    text-decoration: none;
    background-color: rgba(14, 15, 18, 0.54);
    border: 0.0625rem solid var(--color-brand);
    border-radius: var(--button-radius);
    transition: color var(--transition-duration-fast) var(--transition-timing), background-color var(--transition-duration-fast) var(--transition-timing), border-color var(--transition-duration-fast) var(--transition-timing);
}

.product__edit-button:visited {
    color: var(--color-brand);
}

.product__edit-button:active {
    -webkit-transform: none;
    transform: none;
}

@media (hover: hover) {
    .product__edit-button:hover {
        color: var(--color-top);
        background-color: var(--color-brand);
        border-color: var(--color-brand);
    }
}

.product__like-button:active {
    -webkit-transform: none;
    transform: none;
}

.product__like-button:hover .product__like-icon {
    color: var(--color-brand);
}

.product__like-button--liked {
    color: var(--color-brand);
}

.product__like-icon {
    width: 1.6875rem;
    height: 1.4375rem;
    display: block;
    overflow: visible;
    transition: color var(--transition-duration-fast) var(--transition-timing);
}

/* Responsive styles */
@media (max-width: 64rem) {

    /* 1024px */
    .product__mobile-header {
        display: flex;
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .product__header-block--desktop {
        display: none;
    }

    .product__video-container {
        flex: 0 1 auto;
        width: 100%;
        max-width: none;
    }

    .product__content-wrapper {
        width: 100%;
        max-width: none;
        flex-basis: auto;
        gap: var(--space-0);
    }

    .product__content-wrapper>.product__property-group--flex {
        position: static;
        justify-content: flex-start;
    }

    .product__actions {
        flex-wrap: wrap;
        height: auto;
        gap: var(--space-3);
        width: 100%;
    }

    .product__actions-download,
    .product__button {
        height: var(--control-height-md);
    }

    .product__header-block {
        padding: var(--space-0);
        padding-bottom: clamp(var(--space-4), 2.5vw, var(--space-6));
        margin-bottom: 0;
    }

    .product__header-block.product__mobile-header {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .product__video-container,
    .product__video-frame {
        border-radius: 0.625rem;
        /* 10px */
    }

    .product__video {
        border-radius: 0.625rem;
        /* 10px */
    }

    .product__info {
        padding: var(--space-0);
        margin-bottom: var(--space-6);
        max-width: none;
        min-height: 0;
    }

    .product__like-icon {
        width: 1.5rem;
        /* 24px */
        height: auto;
    }
}

@media (max-width: 30rem) {
    .product__inner {
        gap: var(--space-5);
    }

    .product__info {
        margin-bottom: var(--space-5);
    }

    .product__header-block {
        margin-bottom: 0;
    }

    .product__header-block {
        padding-bottom: var(--space-4);
    }

    .product__actions {
        width: 100%;
    }

    .product__actions-download,
    .product__button,
    .product__button--all {
        width: 100%;
        min-width: 0;
    }

    .product__button {
        padding-inline: var(--button-small-padding-x);
    }

    .product__actions .button.chevrone .divider {
        display: none;
    }
}

@media (max-width: 48rem) {

    /* 768px */
    .product__actions {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--space-2);
    }

    .product__actions-download {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    .product__button,
    .product__button--all {
        width: 100%;
        min-width: 0;
    }

    .product__button-inner {
        justify-content: center;
    }

    .product__button .right {
        margin-left: 0;
    }

    .product__actions .button.chevrone .left {
        justify-content: center;
    }

    .product__actions .button.chevrone .divider,
    .product__actions .button.chevrone .right {
        display: none;
    }

    .product__actions .dropdown__list,
    .product__actions .dropdown__list.right {
        left: 0;
        right: 0 !important;
        width: 100%;
    }

    .product__content-wrapper {
        --product-info-inset: var(--space-2);
        gap: var(--space-0);
    }

    .product__header-block {
        padding: var(--space-0);
        padding-bottom: var(--space-4);
        margin-bottom: 0;
    }

    .product__title {
        font-size: var(--font-size-body);
        line-height: var(--line-height-snug);
    }

    .product__video-container,
    .product__video-frame {
        border-radius: clamp(0.25rem, -0.0179rem + 1.3393vw, 0.625rem);
    }

    .product__video {
        border-radius: clamp(0.25rem, -0.0179rem + 1.3393vw, 0.625rem);
    }

    .product__info {
        padding: var(--space-0);
        margin-bottom: var(--space-5);
        max-width: none;
    }

    .product__like-icon {
        width: 1.25rem;
        /* 20px */
        height: auto;
    }
}

.product__descriptions-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding-left: 0;
    margin-bottom: clamp(var(--space-5), 0.6346rem + 0.9615vw, var(--space-8));
    list-style: none;
}

@media (max-width: 47.99875rem) {
    .product__descriptions-list {
        padding: 0 0 0 var(--space-2);
    }
}

.product__descriptions-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    gap: var(--space-2);
    color: var(--color-gray-light-04);
    font-family: var(--font-family-ui);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow-wrap: normal;
}

@media (max-width: 64rem) {
    .product__descriptions-list {
        column-gap: var(--space-8);
        row-gap: var(--space-2);
    }
}

@container (max-width: 25rem) {
    .product__descriptions-list {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 47.99875rem) {
    .product__descriptions-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--space-5);
        row-gap: var(--space-2);
    }
}

@media (max-width: 20rem) {
    .product__info {
        margin-bottom: var(--space-4);
    }

    .product__header-block {
        padding-bottom: var(--space-3);
        margin-bottom: 0;
    }

    .product__descriptions-list {
        grid-template-columns: 1fr;
        margin-bottom: var(--space-3);
    }
}

.product__descriptions-item svg {
    width: 0.5625rem;
    height: auto;
    color: var(--color-brand);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.product__property-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    column-gap: clamp(var(--space-6), 3vw, var(--space-10));
    row-gap: var(--space-2);
    margin-bottom: clamp(var(--space-5), 0.6346rem + 0.9615vw, var(--space-8));
    padding-top: clamp(var(--space-5), 0.6346rem + 0.9615vw, var(--space-8));
    padding-bottom: clamp(var(--space-5), 0.6346rem + 0.9615vw, var(--space-8));
    border-top: 0.0125rem solid var(--color-line);
    border-bottom: 0.0125rem solid var(--color-line);
}

.product__property-group:last-child {
    border-bottom: 0;
}

.product__property-group--flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.product__content-wrapper>.product__property-group--flex {
    position: absolute;
    top: 31.375rem;
    right: 0;
    gap: var(--space-4);
    margin-bottom: 0;
    padding: 0 0 0 var(--product-info-inset);
    border: 0;
}

.product__property-group--flex.justify-content-between {
    justify-content: space-between;
}

.product__property-list {
    display: contents;
}

.product__property-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-2);
    color: var(--color-gray-light-04);
    font-family: var(--font-family-ui);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
}

.product__property-item svg {
    width: 1.25rem;
    max-height: 1.5rem;
    fill: var(--color-gray-light-02);
    flex-shrink: 0;
}

.product__property-item svg .stroke {
    fill: none;
    stroke: var(--color-gray-light-02);
}

.product__property-stretch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.product__property-stretch svg {
    width: 0.75rem;
    height: auto;
    max-height: none;
    flex-shrink: 0;
}

.product__property-stretch svg:last-child {
    transform: scaleX(-1);
}

.product__softs {
    margin-bottom: clamp(var(--space-5), 0.6346rem + 0.9615vw, var(--space-8));
}

.product__softs-group {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: start;
    gap: var(--space-0);
}

.product__softs-title {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    font-weight: var(--font-weight-regular);
    margin-bottom: clamp(var(--space-2), 0.2946rem + 1.0268vw, var(--space-3));
    color: var(--color-gray-light-01);
}

.product__softs-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--space-8);
    row-gap: var(--space-3);
    margin-bottom: 0;
}

.product__softs-item {
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-gray-light-04);
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product__softs-color {
    width: 0.438rem;
    height: 0.438rem;
    border-radius: 50%;
    flex: 0 0 0.438rem;
}

@media (max-width: 47.99875rem) {
    .product__softs-list {
        grid-template-columns: 1fr;
        padding: 0 0 0 var(--space-2);
        row-gap: var(--space-4);
    }
}

.product__softs-item svg {
    fill: var(--color-brand);
    width: 0.4375rem;
    max-width: 0.4375rem;
    height: auto;
}

.form__color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form__color {
    width: 3rem;
    height: 2.5rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: 0.375rem;
    background: transparent;
    cursor: pointer;
}

.admin-soft-color {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    vertical-align: middle;
}

.product__softs-divider:not(:last-child) {
    height: 4.0625rem;
    border-right: 1px solid var(--color-divider);
}

@media (max-width: 47.99875rem) {
    .product__softs-divider {
        display: none;
    }
}

.product__content {
    padding-block: var(--page-section-padding-block);
    padding-inline: 0;
}

.product__content .section__title--mb {
    margin-bottom: clamp(1rem, 0.7946rem + 1.0268vw, 1.25rem);
}

.product__content .content__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
}

@media (max-width: 64rem) {
    .product__content .content__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 47.99875rem) {
    .product__content .content__grid {
        grid-template-columns: 1fr;
    }
}

/* The related grids are Bootstrap rows, not `.content__grid`, so their spacing
   comes from the gutters: feed both the same token the catalogue grid uses,
   otherwise the cards here sit 1.5rem apart while the catalogue keeps 0.625rem. */
.product__content .row {
    --bs-gutter-x: var(--content-grid-gap);
    --bs-gutter-y: var(--content-grid-gap);
}

.product__content--divider {
    border-bottom: 1px solid var(--color-line);
}

.signup,
.verify-email {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.signup__inner,
.verify-email__inner {
    padding: clamp(1.375rem, 0.9642857143rem + 2.0535714286vw, 2.8125rem) 0 clamp(3.125rem, 2.2321428571rem + 4.4642857143vw, 6.25rem) 0;
}

.verify-email__inner {
    display: flex;
    gap: 20px;
}

.signup__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: clamp(1.625rem, 1.125rem + 2.5vw, 3.375rem);
}

@media (max-width: 47.99875rem) {
    .signup__header {
        max-width: clamp(14.125rem, 0.3035714286rem + 69.1071428571vw, 62.5rem);
    }
}

.signup__title {
    line-height: 1.2;
    font-family: "Newsreader";
    font-style: italic;
}

.signup__text {
    color: var(--color-gray-light-01);
    font-size: clamp(0.4375rem, 0.3125rem + 0.625vw, 0.875rem);
    font-weight: 500;
}

.verify-email__text {
    text-align: center;
    color: var(--color-light);
    font-size: clamp(0.7375rem, 0.3125rem + 0.625vw, 0.875rem);
    font-weight: 500;
}

.signup__card {
    padding: clamp(2.25rem, 1.6428571429rem + 3.0357142857vw, 4.375rem) clamp(1.25rem, 0.9642857143rem + 1.4285714286vw, 2.25rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: clamp(18.5rem, 15.1071428571rem + 16.9642857143vw, 30.375rem);
    background-color: var(--color-dark);
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--color-legend);
}

.signup__form.reset-password {
    margin-bottom: 0 !important;
}

.signup__card-button {
    position: relative;
    padding: clamp(0.75rem, 0.6428571429rem + 0.5357142857vw, 1.125rem) clamp(0.875rem, 0.2321428571rem + 3.2142857143vw, 3.125rem);
    height: clamp(2.625rem, 2.3392857143rem + 1.4285714286vw, 3.625rem);
    background-color: var(--color-light);
    border-color: var(--color-light);
    font-size: clamp(0.875rem, 0.8392857143rem + 0.1785714286vw, 1rem);
    font-weight: 800;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.5rem;
}

@media (hover: hover) {
    .signup__card-button:hover {
        color: var(--color-light) !important;
        background-color: transparent !important;
        border-color: var(--color-light) !important;
    }
}

.signup__card-divider {
    position: relative;
    padding: 1.6875rem 0;
    font-size: clamp(0.875rem, 0.8035714286rem + 0.3571428571vw, 1.125rem);
}

.signup__card-divider::before,
.signup__card-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(6.25rem, 5rem + 6.25vw, 10.625rem);
    border: 0.05rem solid var(--color-line);
}

.signup__card-divider::before {
    left: 200%;
}

.signup__card-divider::after {
    right: 200%;
}

.signup__card-text {
    color: var(--color-gray-light-02);
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    font-weight: 400;
}

.signup__card-link {
    font-weight: 500;
    text-decoration: underline !important;
}

.signup__card-link.forgot-password {
    align-self: center;
    color: var(--color-gray-light-01);
    white-space: nowrap;
}

.signup__card-legal {
    text-align: center;
    margin-top: 1.1rem;
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    font-weight: 400;
    color: var(--color-gray-05);
}

.signup__card-legal a {
    font-weight: 600;
    text-decoration: underline !important;
}

.signup__form {
    width: 100%;
    margin-bottom: 1.6875rem;
}

.signup__form-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
}

.signup__form-input {
    padding: clamp(0.75rem, 0.6071428571rem + 0.7142857143vw, 1.25rem) 1.625rem;
    color: var(--color-gray-light-01);
    border-radius: 3.125rem;
    background-color: var(--color-legend);
    border: none;
    width: 100%;
}

.signup__form-input.error {
    border: 1px solid var(--color-red-01);
}

.signup__form-input:focus {
    outline: none;
}

.signup__form-input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    width: 100%;
    height: 100%;
}

.signup__form-checkbox-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.signup__form-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile__form-icon,
.signup__form-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-variation-settings: "wght" 300;
    color: var(--color-gray-light-01);
    position: absolute;
    top: 50%;
    right: 2rem;
    cursor: pointer;
    transform: translateY(-50%);
}

.profile__form-icon {
    right: 1rem !important;
}

.profile__form-group {
    position: relative;
}

.errors {
    color: var(--color-red-01);
}

.signup__form-error {
    padding: 0 1.625rem;
}

.user-menu {
    padding: 1.0625rem 1rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-background-02);
    color: var(--color-light);
    line-height: 1.5rem;
    -ms-flex-item-align: start;
    align-self: start;
    gap: 1.0625rem 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: border-radius 0.3s ease, -webkit-transform 0.3s ease;
    transition: border-radius 0.3s ease, -webkit-transform 0.3s ease;
    transition: border-radius 0.3s ease, transform 0.3s ease;
    transition: border-radius 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

@media (width <=63.99875rem) {
    .user-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0 !important;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 16000;
        -webkit-transition: -webkit-transform 0.3s ease !important;
        transition: -webkit-transform 0.3s ease !important;
        transition: transform 0.3s ease !important;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease !important;
    }
}

.user-menu.open {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

@media (width <=63.99875rem) {
    .user-menu.open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.user-menu__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: var(--color-background-02);
    border: none;
    color: var(--color-light);
    cursor: pointer;
}

@media (width <=63.99875rem) {
    .user-menu__header--desktop {
        display: none !important;
    }
}

@media (width >=63.99875rem) {
    .user-menu__header--mobile {
        display: none !important;
    }
}

.user-menu__title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-weight: 800;
    white-space: nowrap;
}

.user-menu__title svg {
    font-size: 1.375rem;
    margin-right: 0.375rem;
    fill: var(--color-light);
}

.user-menu.collapsed {
    padding: 1.0625rem 0.875rem;
    border-radius: 0.5rem;
    overflow: hidden;
    -webkit-transition: padding 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
    transition: padding 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
}

.user-menu.collapsed .user-menu__title-text,
.user-menu.collapsed .user-menu__title-checkbox,
.user-menu.collapsed .user-menu__fieldset,
.user-menu.collapsed .user-menu__content-container {
    opacity: 0;
    visibility: hidden;
}

.user-menu.collapsed .user-menu__header {
    padding: 0;
}

.user-menu.collapsed .user-menu__title {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
}

.user-menu__content-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.0625rem;
    -webkit-transition: overflow-y 0.3s;
    transition: overflow-y 0.3s;
}

.user-menu__content-container:hover {
    overflow-y: auto;
}

.user-menu__content-container::-webkit-scrollbar {
    display: none;
    width: 0.3125rem;
}

.user-menu__content-container::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-dark);
    border-radius: 0.1875rem;
}

.user-menu__fieldset {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border: none;
    visibility: visible;
    opacity: 1;
    -webkit-transition: height 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
    transition: height 0.3s ease, margin-top 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
}

.user-menu__footer {
    padding: 0 0 0 1rem;
    gap: 1.0625rem;
}

.user-menu__legend-container {
    padding: 0.3125rem 0.8125rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: var(--color-legend);
    border-radius: 1.3125rem;
    cursor: pointer;
    white-space: nowrap;
    border: 0.0625rem solid var(--color-line);
}

.user-menu__legend {
    color: var(--color-light);
    font-weight: 800;
}

@media (width <=63.99875rem) {
    .user-menu__legend {
        z-index: 160;
    }
}

.user-menu__legend-icon {
    width: 1rem;
    fill: var(--color-light);
}

.user-menu__content {
    padding: 0.875rem 0;
    overflow: hidden;
    height: auto;
    -webkit-transition: height 0.3s ease, margin-top 0.3s ease;
    transition: height 0.3s ease, margin-top 0.3s ease;
}

.user-menu__content.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.user-menu__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 1rem 1.6875rem;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
}

.user-menu__list {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
}

.user-menu__link {
    color: var(--color-gray-light-02);
    fill: var(--color-gray-light-02);
    padding: 0.3125rem 0.8125rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 1.3125rem;
    line-height: 1;
}

.user-menu__link:hover {
    background-color: var(--color-legend);
    fill: var(--color-light);
}

.user-menu__link.active {
    color: var(--color-brand);
    background-color: var(--color-legend);
    fill: var(--color-light);
}

.user-menu__link svg {
    min-width: 20px;
}

/* Author/user menu: tighter left padding and larger icons than the filters aside */
.user-menu__list .aside__content-category {
    padding-left: 0.8125rem;
}

.user-menu__list .aside__content-category svg {
    width: 1.375rem !important;
    height: 1.375rem;
}

/* The page you are standing on should be readable at a glance. `.user-menu__list`
   already asks for 600, the way the admin menu does, but `.aside__content-category`
   is a filters-aside class and resets the weight to 400 — so the active item says
   it explicitly. */
.user-menu__list .aside__content-category.active {
    font-weight: 600;
}

.profile {
    padding-block: var(--page-section-padding-block);
}

.profile__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(2.25rem, 2.1785714286rem + 0.3571428571vw, 2.5rem);
    min-width: 0;
}

.profile__title {
    font-size: clamp(1.25rem, 1.0714285714rem + 0.8928571429vw, 1.875rem);
}

.profile:has(.downloads-list) .profile__body {
    padding-top: var(--space-0);
}

.profile:has(.downloads-list) .profile__inner {
    gap: var(--space-8);
}

.profile:has(.downloads-list) .profile__title {
    margin-bottom: var(--space-0);
}

.downloads-list {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Downloads as a grid of cards — the same cards as the liked page, so getting
   back to something you already own works the way finding it did.

   The wrapper keeps its class because the profile layout keys off it, but it no
   longer stacks rows: the grid inside does the arranging.
--------------------------------------------------------------------------- */
.downloads-list--grid {
    display: block;
}

/* On a page listing what you have already taken, the download button is the
   reason to be there — it should not have to be discovered by hovering.

   It is the action bar, not the button, that a mouse-driven screen hides, so
   that is the level the page has to speak at: `visibility: visible` on the
   button alone still left it inside a container at `opacity: 0` — invisible,
   while every computed style on the button itself read as shown. The narrow and
   touch screens keep their own rules (they hide the bar with `!important` until
   a card is tapped), which is why this stays inside the hover query. */
@media (hover: hover) {
    .content__grid--always-actions .card__actions {
        opacity: 1;
        visibility: visible;
    }
}

/* The sound toggle beside it is deliberately left out: it belongs to a preview
   that is playing, and appears on hover as everywhere else. */
.content__grid--always-actions .card__icon.brand {
    opacity: 1;
    visibility: visible;
}

/* And it stays lit through the preview. `auto-hide` clears the card's chrome
   three seconds into playback so the video is seen unobstructed — but it took
   the download button with it, which on this page is the one control that must
   never go away. Beating an `!important` needs both weight and the flag. */
.content__grid--always-actions .card.auto-hide .card__icon.brand {
    opacity: 1 !important;
    visibility: visible !important;
}

.download-item {
    display: grid;
    grid-template-columns: 9.375rem minmax(14rem, 1fr) auto;
    align-items: center;
    gap: clamp(var(--space-4), 2vw, var(--space-10));
    padding: var(--space-5) var(--space-0);
    border-bottom: 0.0625rem solid var(--color-line);
}

.download-item:first-child {
    border-top: 0.0625rem solid var(--color-line);
}

.download-item__media {
    display: block;
    width: 9.375rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--color-background-02);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.download-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-item__media--with-bg .download-item__image {
    object-fit: contain;
}

.download-item__content {
    min-width: 0;
    align-self: start;
}

.download-item__title {
    display: inline;
    color: var(--color-light);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.download-item__title:hover {
    color: var(--color-brand);
}

.download-item__author {
    margin-top: var(--space-1);
    color: var(--color-gray-light-02);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-small);
}

.download-item__date {
    margin-top: var(--space-1);
    color: var(--color-gray);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
}

.download-item__status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
    color: var(--color-red-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-caption);
    border: 0.0625rem solid var(--color-red-dark);
    border-radius: var(--radius-sm);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: var(--space-2);
    padding: 0 1.5em;
    color: var(--color-brand);
    font-size: .6875em;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid var(--color-brand);
    border-radius: 8px;
}

.badge svg {
    width: 12px;
}

.badge.approved {
    color: var(--color-brand);
    border-color: var(--color-brand) !important;
}

.badge.reviewing {
    color: var(--color-orange-01);
    border-color: var(--color-orange-01) !important;
}

.badge.rejected {
    color: var(--color-red-01);
    border-color: var(--color-red-01) !important;
}

.badge.blocked {
    color: var(--color-red-dark);
    border-color: var(--color-red-dark) !important;
}

.badge.blocked svg {
    fill: var(--color-red-dark);
}

.badge.project-status-deleted {
    color: var(--color-red-dark);
    border-color: var(--color-red-dark) !important;
}

.badge.project-status-visible {
    color: var(--color-brand);
    border-color: var(--color-brand) !important;
}

.badge.project-status-hidden {
    color: var(--color-orange-01);
    border-color: var(--color-orange-01) !important;
}

.my-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.my-items-project__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    cursor: pointer;
    list-style: none;
    border-bottom: 0.0625rem solid var(--color-line);
}

.my-items-project:first-child .my-items-project__summary {
    border-top: 0.0625rem solid var(--color-line);
}

.my-items-project__summary::-webkit-details-marker {
    display: none;
}

.my-items-project__summary-content,
.my-items-project__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.my-items-project__summary .badge {
    margin-top: var(--space-0);
}

.my-items-project__title {
    overflow: hidden;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-items-project__count {
    flex-shrink: 0;
    color: var(--color-gray);
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
}

.my-items-project__icon {
    color: var(--color-gray-light-02);
    transition: transform var(--transition-duration) ease;
}

.my-items-project[open] .my-items-project__icon {
    transform: rotate(180deg);
}

.my-items-project__products {
    max-height: min(32.5rem, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.my-items-project__products-inner {
    padding: var(--space-4);
}

.my-items-project__products .download-item:first-child {
    border-top: 0;
}

.my-items-project__products::-webkit-scrollbar {
    width: 0.5rem;
    background: transparent;
}

.my-items-project__products::-webkit-scrollbar-track {
    background: transparent;
}

.my-items-project__products::-webkit-scrollbar-thumb {
    background: var(--color-legend);
    border-radius: 0.5rem;
}

@media (width < 47.99875rem) {
    .my-items-project__summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .my-items-project__badges {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: wrap;
    }

    .my-items-project__summary-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

.download-item__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    justify-content: space-between;
    gap: var(--space-2);
}

.download-item__actions .download-item__date {
    margin-top: var(--space-0);
    text-align: right;
}

.download-item__button {
    position: relative;
}

.download-item__button-content {
    display: inline-flex;
    align-items: center;
    gap: var(--button-gap);
}

.download-item__button-content--hidden {
    visibility: hidden;
}

.download-item__button .m-icon {
    font-size: var(--font-size-lg);
}

.download-item__button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.download-item__button-loader {
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.download-item__button-loader svg {
    width: 2.125rem;
    height: auto;
}

.downloads-list__empty {
    padding: var(--space-6) var(--space-0);
    color: var(--color-gray-light-02);
    border-top: 0.0625rem solid var(--color-line);
    border-bottom: 0.0625rem solid var(--color-line);
}

@media (width <=47.99875rem) {
    .download-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-0) var(--space-6);
    }

    .download-item__media {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .download-item__title {
        font-size: var(--font-size-base);
        line-height: var(--line-height-snug);
    }

    .download-item__author {
        margin-top: var(--space-1);
        font-size: var(--font-size-sm);
    }

    .download-item__date {
        font-size: var(--caption-size);
        line-height: var(--caption-line-height);
    }

    .download-item__actions {
        align-items: stretch;
        justify-content: flex-start;
    }

    .download-item__actions .download-item__date {
        text-align: left;
    }

    .download-item__button {
        width: 100%;
        min-width: 0;
    }
}

.profile__body {
    display: grid;
    padding-top: clamp(1.125rem, 0.7321428571rem + 1.9642857143vw, 2.5rem);
    grid-template-columns: 13.9375rem minmax(6.25rem, auto);
    gap: clamp(0.5rem, 0.1071428571rem + 1.9642857143vw, 1.875rem);
    -webkit-transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease, -ms-grid-columns 0.3s ease;
}

.content .profile__body {
    padding-top: var(--space-0);
}

.profile__body:has(.aside.collapsed) {
    grid-template-columns: 3.3125rem minmax(6.25rem, auto);
}

@media (width <=79.99875rem) {
    .profile__body {
        grid-template-columns: 13.9375rem minmax(6.25rem, auto);
    }
}

@media (width <=63.99875rem) {
    .profile__body {
        grid-template-columns: minmax(6.25rem, auto);
    }
}

.profile__body:has(.downloads-list),
.profile__body:has(.form__profile),
.profile__body:has(.my-items-list),
.profile__body:has(.statistics__inner) {
    grid-template-columns: 13.9375rem minmax(0, 1fr);
}

.profile__body:has(.aside.collapsed):has(.downloads-list),
.profile__body:has(.aside.collapsed):has(.form__profile),
.profile__body:has(.aside.collapsed):has(.my-items-list),
.profile__body:has(.aside.collapsed):has(.statistics__inner) {
    grid-template-columns: 3.3125rem minmax(0, 1fr);
}

@media (width <=63.99875rem) {

    .profile__body:has(.downloads-list),
    .profile__body:has(.form__profile),
    .profile__body:has(.my-items-list),
    .profile__body:has(.statistics__inner) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.profile__body-filters,
.profile__body-user-menu {
    border-radius: 1.0625rem;
    -ms-flex-item-align: start;
    align-self: start;
    -webkit-transition: border-radius 0.3s ease;
    transition: border-radius 0.3s ease;
}

/* Profile sidebar (desktop): stick the menu + author badge together as one column */
@media (min-width: 64rem) {
    .profile__body>.content__aside {
        position: sticky;
        top: var(--products-sticky-top);
        align-self: start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .profile__body>.content__aside>.aside {
        position: static;
        max-height: none;
        -ms-flex-item-align: stretch;
        align-self: stretch;
        width: 100%;
    }
}

.form__profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.25rem;
    grid-template-areas: "email email" "full-name full-name" "password confirm-password" "save-changes save-changes";
}

@media (width <=47.99875rem) {
    .form__profile {
        grid-template-columns: 1fr;
        grid-template-areas: "email" "full-name" "password" "confirm-password" "save-changes";
    }
}

.form__profile-button {
    width: clamp(8.125rem, 7.5357142857rem + 2.9464285714vw, 10.1875rem);
    height: clamp(2rem, 1.7678571429rem + 1.1607142857vw, 2.8125rem);
}

.form__item {
    width: 100%;
    position: relative;
    margin-bottom: 3.875rem;
}

.form__item select option {
    color: var(--color-background-02);
}

/* Help text under an admin field. Bootstrap's `.text-muted` is a near-black
   grey that all but disappears on the dark admin — the theme's own way of
   quieting text is opacity on the light colour (see .claude/conventions.md).
   The absolute-positioned label above needs the hint out of the input's flow,
   hence the block display and its own top margin. */
.form__hint {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-light);
    opacity: 0.65;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
}

.form__item--email {
    grid-area: email;
}

.form__item--full-name {
    grid-area: full-name;
}

.form__item--password {
    grid-area: password;
}

.form__item--confirm-password {
    grid-area: confirm-password;
}

.form__item--user-name {
    grid-area: user-name;
}

.form__item--country {
    grid-area: country;
}

.form__item--payment {
    grid-area: payment;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: clamp(1.1875rem, 0.6339285714rem + 2.7678571429vw, 3.125rem);
}

@media (width <=47.99875rem) {
    .form__item--payment {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end;
        margin-bottom: 2.8125rem !important;
    }
}

.form__item--payment-email {
    grid-area: payment-email;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: clamp(1.1875rem, 0.6339285714rem + 2.7678571429vw, 3.125rem);
}

@media (width <=47.99875rem) {
    .form__item--payment-email {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: end;
        margin-bottom: 2.8125rem !important;
    }
}

.form__item--profile-img {
    grid-area: profile-img;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.form__item--profile-background {
    grid-area: profile-background;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.form__item--save-changes {
    grid-area: save-changes;
    position: relative;
    padding-top: 3.375rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    overflow: hidden;
}

.form__item--save-changes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0.0625rem;
    background-color: var(--color-line);
    z-index: -1;
}

.form__label {
    position: absolute;
    left: 0;
    top: -2rem;
    font-size: clamp(0.8125rem, 0.7767857143rem + 0.1785714286vw, 0.9375rem);
    font-weight: 400;
}

.form__input {
    width: 100%;
    color: var(--color-light);
    background-color: transparent;
    padding: clamp(0.625rem, 0.5535714286rem + 0.3571428571vw, 0.875rem) clamp(0.625rem, 0.4642857143rem + 0.8035714286vw, 1.1875rem);
    font-size: clamp(0.75rem, 0.6964285714rem + 0.2678571429vw, 0.9375rem);
    font-weight: 600;
    line-height: var(--line-height-base);
    border-radius: var(--radius-sm);
    border: 0.0625rem solid var(--color-gray-light-02-rgba-50);
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--transition-duration-fast);
    transition-timing-function: var(--transition-timing);
}

.form__input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--button-shadow-focus);
}

.form__input:disabled,
.form__textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form__input-icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0.75rem;
    font-size: 1.375rem;
    color: var(--color-brand) !important;
}

.form__button {
    min-width: 7.375rem;
    height: 100%;
}

.form__profile-img {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 2.3125rem;
}

.form__profile-background {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    width: 100%;
    margin-bottom: 2.3125rem;
    background-size: cover;
    background-position: center;
}

.form__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    flex-direction: row;
    gap: 1.75rem;
}

@media (width <=47.99875rem) {
    .form__row {
        flex-direction: column;
        gap: 0;
    }
}

.form__secondary-text {
    color: var(--color-gray-light-02);
    font-size: clamp(0.8125rem, 0.7767857143rem + 0.1785714286vw, 0.9375rem);
}

.form__textarea {
    width: 100%;
    background-color: transparent;
    border: 1px solid rgba(218, 218, 218, 0.5);
    border-radius: var(--radius-sm);
    color: var(--color-light);
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    line-height: var(--line-height-base);
    padding: 0.5rem;
    resize: none;
    font-weight: 400;
    overflow-y: scroll;
    outline: none;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: var(--transition-duration-fast);
    transition-timing-function: var(--transition-timing);
}

.form__textarea:focus {
    border-color: var(--color-brand);
    box-shadow: var(--button-shadow-focus);
}

.form__file-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.form__file-button {
    cursor: pointer;
    padding: 0.625rem 1.5rem;
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    white-space: nowrap;
}

.form__file-name {
    color: var(--color-gray-light-02);
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    flex: 1;
}

.toast-title {
    font-weight: bold;
}

.toast-message {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.toast-message a,
.toast-message label {
    color: #FFFFFF;
}

.toast-message a:hover {
    color: #CCCCCC;
    text-decoration: none;
}

.toast-close-button {
    position: relative;
    right: -0.3em;
    top: -0.3em;
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    -webkit-text-shadow: 0 1px 0 #ffffff;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    line-height: 1;
}

.toast-close-button:hover,
.toast-close-button:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40);
}

.rtl .toast-close-button {
    left: -0.3em;
    float: left;
    right: 0.3em;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    /* -webkit-appearance: none; */
}

.toast-top-center {
    top: 0;
    right: 0;
    width: 100%;
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%;
}

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%;
}

.toast-top-left {
    top: 12px;
    left: 12px;
}

.toast-top-right {
    top: 12px;
    right: 12px;
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px;
}

.toast-bottom-left {
    bottom: 12px;
    left: 12px;
}

#toast-container {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    /*overrides*/
}

#toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#toast-container>div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px;
    width: 300px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    /* -moz-box-shadow: 0 0 12px #999999;
    -webkit-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999; */
    color: #FFFFFF;
    opacity: 0.9;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
}

#toast-container>div.rtl {
    direction: rtl;
    padding: 15px 50px 15px 15px;
    background-position: right 15px center;
}

#toast-container>div:hover {
    -moz-box-shadow: 0 0 12px #000000;
    -webkit-box-shadow: 0 0 12px #000000;
    box-shadow: 0 0 12px #000000;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    cursor: pointer;
}

/* #toast-container>.toast-info {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}

#toast-container>.toast-error {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}

#toast-container>.toast-success {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}

#toast-container>.toast-warning {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
} */

#toast-container.toast-top-center>div,
#toast-container.toast-bottom-center>div {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#toast-container.toast-top-full-width>div,
#toast-container.toast-bottom-full-width>div {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

.toast {
    background-color: #030303;
}

.toast-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text) !important;
    border: 1px solid var(--alert-success-border);
    font-weight: 700 !important;
}

.toast-error {
    background-color: var(--alert-error-bg);
    color: var(--alert-error-text) !important;
    border: 1px solid var(--alert-error-border);
    font-weight: 700 !important;
}

.toast-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text) !important;
    border: 1px solid var(--alert-info-border);
}

.toast-warning {
    background-color: #F89406;
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000000;
    opacity: 0.2;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    filter: alpha(opacity=20);
}

/*Responsive Design*/
@media all and (max-width: 240px) {
    #toast-container>div {
        padding: 8px 8px 8px 50px;
        width: 11em;
    }

    #toast-container>div.rtl {
        padding: 8px 50px 8px 8px;
    }

    #toast-container .toast-close-button {
        right: -0.2em;
        top: -0.2em;
    }

    #toast-container .rtl .toast-close-button {
        left: -0.2em;
        right: 0.2em;
    }
}

@media all and (min-width: 241px) and (max-width: 480px) {
    #toast-container>div {
        padding: 8px 8px 8px 50px;
        width: 18em;
    }

    #toast-container>div.rtl {
        padding: 8px 50px 8px 8px;
    }

    #toast-container .toast-close-button {
        right: -0.2em;
        top: -0.2em;
    }

    #toast-container .rtl .toast-close-button {
        left: -0.2em;
        right: 0.2em;
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {
    #toast-container>div {
        padding: 15px 15px 15px 50px;
        width: 25em;
    }

    #toast-container>div.rtl {
        padding: 15px 50px 15px 15px;
    }
}

.form__search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex: 0 0 auto;
    width: clamp(18rem, 24vw, 24rem);
    max-width: 24rem;
}

.history__tags-group .form__search {
    width: calc((100cqw - (var(--content-grid-gap) * 3)) / 4);
    max-width: none;
}

@media (max-width: 119.99875rem) {
    .history__tags-group .form__search {
        width: calc((100cqw - (var(--content-grid-gap) * 2)) / 3);
    }
}

@media (max-width: 79.99875rem) {
    .history__tags-group .form__search {
        width: calc((100cqw - var(--content-grid-gap)) / 2);
    }
}

@media (width <=47.99875rem) {
    .form__search {
        max-width: none;
        width: 100%;
    }
}

.form__search-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 2.5rem;
    padding-left: 1rem;
    padding-right: 0.1875rem;
    overflow: hidden;
    background-color: rgba(30, 32, 37, 0.5);
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
    border: 0.063rem solid var(--color-line);
    border-radius: 1.875rem;
    -webkit-transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

@media (width <=47.99875rem) {
    .form__search-container {
        width: 100%;
    }
}

.form__search-container:focus-within {
    background-color: rgba(24, 26, 29, 0.72);
    border-color: var(--color-brand);
}

.form__search-input {
    flex: 1;
    min-width: 0;
    color: var(--color-gray-light-01);
    width: 100%;
    height: 2.5rem;
    padding: 0.25rem;
    background: none;
    font-family: var(--font-family-ui);
    font-size: var(--button-small-size);
    font-weight: var(--navigation-weight);
    line-height: var(--button-small-line-height);
    border: none;
    outline: none;
}

.form__search-input::placeholder {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #55545E !important;
    opacity: 1;
}

.form__search-input:hover {
    background: none;
}

@media (width <=47.99875rem) {
    .form__search-input {
        width: 100%;
        padding: 0.25rem;
        background: none;
        margin-right: 0;
    }
}

.form__search-input::-webkit-input-placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: var(--button-small-size);
    font-weight: var(--navigation-weight);
    line-height: var(--button-small-line-height);
}

.form__search-input::-moz-placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: var(--button-small-size);
    font-weight: var(--navigation-weight);
    line-height: var(--button-small-line-height);
}

.form__search-input:-ms-input-placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: var(--button-small-size);
    font-weight: var(--navigation-weight);
    line-height: var(--button-small-line-height);
}

.form__search-input::placeholder {
    color: rgba(215, 215, 215, 0.55);
    min-height: 40px;
    font-size: var(--button-small-size);
    font-weight: var(--navigation-weight);
    line-height: var(--button-small-line-height);
}

.form__search-input:active,
.form__search-input:focus {
    width: 100%;
    outline: none;
    background: none;
}

.form__search-icon {
    flex-shrink: 0;
    color: var(--color-gray-light-02);
    width: 1.125rem;
    height: 1.0625rem;
}

.form__search-button {
    flex-shrink: 0;
    width: 5rem;
    height: 2rem;
    margin-left: -0.25rem;
    padding-inline: 0;
    color: var(--color-dark);
    background-color: var(--color-brand);
    border: 0.03125rem solid rgba(202, 255, 51, 0.42);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: var(--button-font-weight);
    line-height: var(--button-medium-line-height);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.3s ease;
    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.3s ease;
}

.form__search-container:has(.form__search-input:not(:placeholder-shown)) .form__search-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

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

.form__search-container:focus-within .form__search-button {
    color: var(--color-dark);
    background-color: var(--color-brand);
}

.form__search-container:focus-within .form__search-button:hover {
    background-color: var(--color-brand-dark);
}

@media (max-width: 30rem) {
    .form__search-container {
        height: 2.5rem;
        padding-left: clamp(0.75rem, 0.4821rem + 1.3393vw, 1.125rem);
        padding-right: clamp(0.25rem, 0.0714rem + 0.8929vw, 0.5rem);
    }

    .form__search-button {
        width: clamp(4.5rem, 4.1429rem + 1.7857vw, 5rem);
        height: clamp(2.25rem, 1.875rem + 1.875vw, 2.75rem);
        font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.9375rem);
    }

    .form__search-input {
        font-size: clamp(0.625rem, 0.3571rem + 1.3393vw, 1rem);
    }
}

@media (max-width: 20rem) {
    .form__search-container {
        height: 2.5rem;
        padding-left: 0.75rem;
        padding-right: 0.1875rem;
    }

    .form__search-button {
        width: 5rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }

}

/*
 * Frosted glass like the navbar. The blur lives on the container itself —
 * its own transform does NOT break its own backdrop-filter (unlike a
 * transformed ancestor, which silently kills blur on ::before/::after).
 *
 * The box is stretched up to the header (padding-top + a compensating
 * negative margin-top, both = --history-gap) so the gap above the bar and
 * the bar are ONE continuous frosted surface — the cards get blurred the
 * whole way up, with no seam.
 *
 * The vertical tint fades from transparent at the top (so the gap blends
 * into the page background and the spacing reads the same as before) down
 * to the navbar tint where the bar starts.
 */
.history__container {
    --history-gap: 2rem;
    --history-bleed: 1.5rem;
    --history-pad: 2rem;
    --history-fade: 4rem;
    --history-rise: 0.75rem;
    position: sticky;
    top: 5rem;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    margin-top: calc(-1 * var(--history-gap));
    margin-bottom: calc(var(--history-pad) - var(--history-fade));
    margin-left: calc(-1 * var(--history-bleed));
    margin-right: calc(-1 * var(--history-bleed));
    padding-top: var(--history-gap);
    padding-bottom: var(--history-fade);
    padding-left: var(--history-bleed);
    padding-right: var(--history-bleed);
    gap: 0.75rem;
    /* the box overlaps the products' top with its transparent fade tail —
       let clicks pass through it (children re-enable pointer events) */
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(24, 26, 29, 0.2) 0, rgba(24, 26, 29, 0.1) var(--history-gap));
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
    /*
     * Two mask layers intersected: the frost spills softly past the
     * left/right edges (horizontal) and fades out via opacity at the
     * bottom (vertical), so it dissolves smoothly into the scrolling
     * content instead of ending on a hard line.
     */
    -webkit-mask:
        linear-gradient(to right, transparent 0, black var(--history-bleed), black calc(100% - var(--history-bleed)), transparent 100%),
        linear-gradient(to bottom, black calc(100% - var(--history-fade) - var(--history-rise)), rgba(0, 0, 0, 0.78) calc(100% - var(--history-fade) * 0.68 - var(--history-rise)), rgba(0, 0, 0, 0.45) calc(100% - var(--history-fade) * 0.42 - var(--history-rise)), rgba(0, 0, 0, 0.18) calc(100% - var(--history-fade) * 0.2 - var(--history-rise)), rgba(0, 0, 0, 0.05) calc(100% - var(--history-fade) * 0.08 - var(--history-rise)), transparent calc(100% - var(--history-rise)));
    -webkit-mask-composite: source-in;
    mask:
        linear-gradient(to right, transparent 0, black var(--history-bleed), black calc(100% - var(--history-bleed)), transparent 100%),
        linear-gradient(to bottom, black calc(100% - var(--history-fade) - var(--history-rise)), rgba(0, 0, 0, 0.78) calc(100% - var(--history-fade) * 0.68 - var(--history-rise)), rgba(0, 0, 0, 0.45) calc(100% - var(--history-fade) * 0.42 - var(--history-rise)), rgba(0, 0, 0, 0.18) calc(100% - var(--history-fade) * 0.2 - var(--history-rise)), rgba(0, 0, 0, 0.05) calc(100% - var(--history-fade) * 0.08 - var(--history-rise)), transparent calc(100% - var(--history-rise)));
    mask-composite: intersect;
    transform: translateY(var(--history-sticky-offset, 0px)) translateZ(0);
}

.history__container>* {
    pointer-events: auto;
}

@media (max-width: 63.99875rem) {
    .history__container {
        --history-gap: 1rem;
        --history-pad: 1rem;
        --history-fade: 2.5rem;
        top: var(--products-sticky-top-tablet);
    }
}

@media (max-width: 47.99875rem) {
    .history__container {
        --history-gap: 1rem;
        --history-bleed: 0.75rem;
        --history-pad: 1rem;
        --history-fade: 2.5rem;
        top: var(--products-sticky-top-mobile);
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.625rem;
    }
}

.history__tags-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.history__tags {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.history__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.625rem;
    padding-right: 1rem;
    font-family: var(--font-family-ui);
    font-size: var(--button-small-size);
    font-weight: var(--navigation-weight);
    line-height: var(--button-small-line-height);
}

/* Glass effect like the navbar — shared by the tags and the shuffle button. */
.button.history__tag {
    background-color: rgba(30, 32, 37, 0.5);
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
}

.history__tag span {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    width: 1rem;
}

.history__clear-tags {
    background-color: transparent;
    border: none;
    text-decoration: underline;
    color: var(--color-gray-05);
    font-family: var(--font-family-ui);
    font-size: var(--navigation-size);
    font-weight: var(--navigation-weight);
    line-height: var(--navigation-line-height);
}

.history__shuffle {
    margin-left: auto;
    flex-shrink: 0;
}

.button.history__shuffle {
    width: clamp(6.25rem, 5.8214285714rem + 2.1428571429vw, 7.75rem);
    height: clamp(2rem, 1.8571428571rem + 0.7142857143vw, 2.5rem);
    max-height: none;
    padding: 0;
    font-size: var(--button-small-size);
    line-height: var(--button-small-line-height);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    color: var(--color-gray-light-02);
}

.history__shuffle svg {
    width: clamp(0.875rem, 0.8214285714rem + 0.2678571429vw, 1.0625rem);
    height: auto;
    flex-shrink: 0;
}

.history__items-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex-shrink: 0;
    min-width: clamp(6.25rem, 5.8214285714rem + 2.1428571429vw, 7.75rem);
    height: clamp(2rem, 1.8571428571rem + 0.7142857143vw, 2.5rem);
    padding: 0 0.875rem;
    font-family: var(--font-family-ui);
    line-height: 1.5rem;
    color: #B4B4B4;
    background-color: rgba(30, 32, 37, 0.35);
    -webkit-backdrop-filter: blur(0.625rem) saturate(130%);
    backdrop-filter: blur(0.625rem) saturate(130%);
    border: 0.0625rem solid var(--color-line);
    border-radius: var(--button-radius);
    white-space: nowrap;
}

.history__items-badge svg {
    width: 0.625rem;
    height: 1.1875rem;
    flex-shrink: 0;
}

.history__items-count {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5rem;
    color: #B4B4B4;
}

.history__items-label {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.5rem;
    color: #818181;
}

@media (max-width: 47.99875rem) {
    .history__tags-group {
        display: contents;
    }

    .history__tags-group .form__search {
        order: 1;
        width: 100%;
        max-width: none;
    }

    .history__tag:not(.history__shuffle),
    .history__clear-tags {
        order: 5;
    }

    .history__shuffle {
        order: 2;
        margin-left: 0;
    }

    .history__items-badge {
        order: 3;
    }

    .button.history__shuffle,
    .history__items-badge {
        width: calc(50% - 0.3125rem);
        min-width: 0;
        height: 2.1875rem;
    }
}

@media (max-width: 30rem) {
    #paginated-products .history__tags-group .form__search {
        display: none;
    }
}

.upload {
    padding: clamp(1.125rem, 0.7321428571rem + 1.9642857143vw, 2.5rem) 0 4.0625rem 0;
}

.upload__authors-menu {
    grid-area: authors-menu;
}

.upload__inner {
    grid-area: form;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2rem;
}

.upload__inner .upload__form-group {
    margin-bottom: 0;
}

.upload__body {
    display: grid;
    grid-template-columns: minmax(6.25rem, auto) minmax(13.9375rem, 15.625rem);
    grid-template-areas: "form info";
    gap: 2rem;
    -webkit-transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease;
    transition: grid-template-columns 0.3s ease, -ms-grid-columns 0.3s ease;
}

.upload__body:has(.authors-menu.collapsed) {
    grid-template-columns: 3.3125rem minmax(6.25rem, auto) minmax(13.9375rem, 15.625rem);
}

@media (width <=79.99875rem) {
    .upload__body {
        grid-template-columns: 13.9375rem minmax(6.25rem, auto) minmax(13.9375rem, 15.625rem);
    }
}

@media (width <=63.99875rem) {
    .upload__body {
        grid-template-columns: minmax(6.25rem, auto);
        grid-template-areas: "info" "form" "authors-menu";
        gap: 3rem;
    }
}

@media (width <=47.99875rem) {
    .upload__body {
        gap: 3.375rem;
    }
}

.upload__body-filters,
.upload__body-authors-menu {
    border-radius: 1.0625rem;
    -ms-flex-item-align: start;
    align-self: start;
    -webkit-transition: border-radius 0.3s ease;
    transition: border-radius 0.3s ease;
}

@media (width <=63.99875rem) {

    .upload__filters,
    .upload__author-menu {
        display: none;
    }
}

.upload__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

@media (width <=79.99875rem) {
    .upload__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <=47.99875rem) {
    .upload__grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.upload__grid--pb {
    padding-bottom: 4.0625rem;
}

.upload__form {
    max-width: 100%;
}

.upload__form-row {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

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

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

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

.upload__form-group,
.artist__form-group {
    position: relative;
    width: 100%;
    margin-bottom: 2.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.upload__form-label,
.artist__form-label {
    font-size: clamp(0.75rem, 0.6964285714rem + 0.2678571429vw, 0.9375rem);
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--color-gray-light-02);
}

.upload__form-help-info,
.artist__form-help-info {
    position: absolute;
    right: 0;
    top: 0.625rem;
    color: var(--color-help-info);
    font-size: 0.75rem;
    font-weight: 40;
}

.upload__form-input,
.upload__form-textarea,
.upload__form-tags,
.artist__form-input,
.artist__form-textarea,
.artist__form-tags {
    background-color: transparent;
    border: 1px solid rgba(218, 218, 218, 0.5);
    border-radius: 0.375rem;
    color: var(--color-light);
    font-size: clamp(0.75rem, 0.7142857143rem + 0.1785714286vw, 0.875rem);
    padding: 0.5rem;
}

.upload__form-input:focus,
.upload__form-textarea:focus,
.upload__form-tags:focus,
.artist__form-input,
.artist__form-textarea,
.artist__form-tags {
    outline: none;
}

.upload__form-input,
.artist__form-input {
    font-weight: 500;
    height: 2.625rem;
}

.upload__form-textarea,
.artist__form-textarea {
    resize: none;
    font-weight: 400;
    overflow: hidden;
}

.upload__form-checkboxes {
    display: grid;
    grid-template-columns: repeat(4, auto);
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    gap: 0.875rem;
    padding-top: 0.625rem;
}

@media (width <=79.99875rem) {
    .upload__form-checkboxes {
        grid-template-columns: repeat(2, auto);
    }
}

@media (width <=47.99875rem) {
    .upload__form-checkboxes {
        grid-template-columns: auto;
    }
}

.upload__form-tags {
    max-width: 100%;
    position: relative;
    padding: 0 0.625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 0.5rem;
    height: 2.625rem;
    overflow-x: scroll;
    white-space: nowrap;
}

.upload__form-tags::-webkit-scrollbar {
    display: none;
}

.upload__form-tags-input {
    border: none;
    outline: none;
    padding: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.upload__form-tag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.25rem 0.5rem 0.25rem 0.125rem;
    background-color: var(--color-legend);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    gap: 0.5rem;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.upload__form-tag-close {
    all: unset;
    color: var(--color-light);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding: 0;
    cursor: pointer;
}

.upload__form-tag-close svg {
    width: 1.25rem;
}

.upload__form-dropdown {
    padding: 1.375rem 0;
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    max-height: 18.75rem;
    background: var(--color-legend);
    border: 0.0625rem solid var(--color-gray-02);
    border-radius: 0.375rem;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    z-index: 100;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.upload__form-dropdown.open {
    opacity: 1;
    visibility: visible;
}

.upload__form-dropdown-list {
    display: flex;
    flex-direction: column;
}

.upload__form-dropdown-item {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    gap: 0.5rem;
}

.upload__form-dropdown-item:not(:last-child) {
    border-bottom: 0.0625rem solid rgba(146, 146, 146, 0.07);
}

.upload__button {
    width: 100%;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 45px;
}

.upload__button-inner {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.upload__button svg {
    margin-right: 0.5rem;
    font-variation-settings: "wght" 400;
}

.upload__button:disabled {
    background-color: var(--color-brand-dark-02);
    border-color: var(--color-brand-dark-02);
}

.upload__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.5rem;
}

.upload__card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    padding: clamp(1.5rem, 1.2857142857rem + 1.0714285714vw, 2.25rem) clamp(0.5rem, 0.2142857143rem + 1.4285714286vw, 1.5rem);
    background-color: var(--color-background-02);
    border-radius: 0.375rem;
    gap: 1.25rem;
}

.upload__card-btn-close {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    position: absolute;
    top: 1rem;
    right: clamp(0rem, -0.25rem + 1.25vw, 0.875rem);
    font-variation-settings: "wght" 300;
}

.upload__card-header {
    grid-area: header;
    font-size: 1rem;
    color: var(--color-gray-light-02);
    font-weight: 700;
}

.upload__card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header header" "file list" "button list";
    gap: 1.9375rem;
}

.upload__card-body.small {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "list";
    gap: 1.9375rem;
}

@media (width <=79.99875rem) {
    .upload__card-body {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "file" "list" "button";
    }
}

.upload__card-file {
    grid-area: file;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    cursor: pointer;
    border: 1px dashed var(--color-gray-light-02);
    border-radius: 0.25rem;
    background-color: rgba(217, 217, 217, 0.03);
}

.upload__card-file::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

@media (width <=63.99875rem) {
    .upload__card-file {
        width: 100%;
        max-width: 100%;
    }
}

.upload__card-circle {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    background-color: var(--color-gray-03);
    border-radius: 50%;
}

.upload__card-cross-line {
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 1.4375rem;
    height: 0.375rem;
    background-color: var(--color-gray-light-02);
    border-radius: 3.125rem;
}

.upload__card-cross-line.rotate90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.upload__card-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.upload__card-input {
    display: none;
}

.upload__card-button {
    grid-area: button;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 0.75rem;
}

.upload__card-list {
    grid-area: list;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.375rem;
}

.upload__card-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    font-size: 0.875rem;
    font-weight: 400;
    gap: clamp(0.3125rem, 0.2053571429rem + 0.5357142857vw, 0.6875rem);
    white-space: wrap;
}



.upload__card-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.upload__card-item-name {
    min-width: 0;
    word-break: break-all;
}

.upload__card-item-size {
    font-size: 0.6875rem;
    opacity: 0.45;
}

.upload__card-item-button {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 1rem;
    max-height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-color: rgba(217, 217, 217, 0.26);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    margin-left: 1.3125rem;
}

.upload__card-item-button svg {
    fill: var(--color-light);
    width: 100%;
}

.upload__card-item-loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload__card-item.softs svg {
    fill: var(--color-gray-05);
    width: 1.125rem;
}

.upload__add-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-light);
    padding: 0.6875rem 0.9375rem;
    -ms-flex-item-align: start;
    align-self: start;
    font-size: clamp(0.875rem, 0.8392857143rem + 0.1785714286vw, 1rem);
    font-weight: 700;
    background-color: var(--color-legend);
    border: none;
    border-radius: 3.125rem;
}

.upload__add-btn-circle {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    background-color: var(--color-gray-03);
    border-radius: 50%;
}

.upload__add-btn-line {
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 1rem;
    height: 0.15rem;
    background-color: var(--color-gray-light-02);
    border-radius: 3.125rem;
}

.upload__add-btn-line.rotate90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.upload__custom-desc-item {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.125rem;
}

.upload__custom-desc-item .upload__form-tag-close {
    opacity: 0.5;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.upload__custom-desc-item .upload__form-tag-close:hover {
    opacity: 1;
}

.upload__form-custom-desc-add {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0 0 1.6875rem;
}

.upload__form-custom-desc-add .upload__form-input {
    max-width: 13.75rem;
    margin-bottom: 0;
    padding: 0.5rem 0.75rem;
}

.upload__form-custom-desc-add .button {
    white-space: nowrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.upload__info {
    grid-area: info;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.875rem;
}

@media (width <=63.99875rem) {
    .upload__info {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        background-color: var(--color-background-02);
        border-radius: 1.0625rem;
        padding: 1.0625rem 0 1.8125rem 0;
    }
}

@media (width <=47.99875rem) {
    .upload__info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        background-color: transparent;
        padding: 0;
        gap: 1rem;
    }
}

.upload__info hr {
    width: 100%;
    border-color: rgba(217, 217, 217, 0.06);
    margin: 0;
}

.upload__info-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 0.875rem;
}

.upload__info-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 1.6875rem;
    gap: 1.375rem;
}

.upload__info-pack {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-background-02);
    border-radius: 1.0625rem;
    padding: 1.0625rem 0 1.8125rem 0;
    gap: 1.5rem;
}

@media (width <=63.99875rem) {
    .upload__info-pack {
        background-color: transparent;
        padding: 0;
    }
}

@media (width <=47.99875rem) {
    .upload__info-pack {
        background-color: var(--color-background-02);
        padding: 1.0625rem 0 1.8125rem 0;
    }
}

.upload__info-pack .upload__card-item-button {
    margin-right: 0;
    margin-left: 1.3125rem;
}

.upload__info-button {
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 0.75rem;
    height: 45px;
}

.upload__info-button:disabled {
    background-color: var(--color-gray-light-01);
    border-color: var(--color-gray-light-01);
}

.upload__info-button-inner {
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.upload__progress {
    position: relative;
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}

.upload__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #B5FB02, #6EC400);
    width: 0%;
    transition: width 0.2s ease;
}

.upload__progress-text {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #333;
    margin-top: 4px;
}

.artist__form-inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: clamp(18.125rem, 6.3928571429rem + 58.6607142857vw, 59.1875rem);
    padding: clamp(1.375rem, 0.9821428571rem + 1.9642857143vw, 2.75rem) clamp(0.9375rem, 0.0267857143rem + 4.5535714286vw, 4.125rem);
    background-color: var(--color-background-02);
    border: 0.01875rem solid var(--color-gray-05);
    border-radius: 0.6875rem;
    gap: clamp(1.75rem, 1.2678571429rem + 2.4107142857vw, 3.4375rem);
}

.artist__form-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.375rem, 0.9642857143rem + 2.0535714286vw, 2.8125rem) 0;
}

.artist__form-title {
    font-size: clamp(1.25rem, 1.0714285714rem + 0.8928571429vw, 1.875rem);
    font-weight: 400;
}

.artist__form-title .accent {
    font-family: 'Newsreader', sans-serif;
    font-style: italic;
    font-size: clamp(1.4375rem, 1.2053571429rem + 1.1607142857vw, 2.25rem);
    font-weight: 500;
}

.artist__form {
    width: 100%;
}

.artist__button {
    width: 100%;
    height: clamp(2.1875rem, 2.0089285714rem + 0.8928571429vw, 2.8125rem);
    border-radius: 0.375rem !important;
    font-size: 0.938rem;
    line-height: 17px;
}

.artist__button svg {
    fill: var(--color-background-01);
}

.artist-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.813rem;
    padding: 0.563rem 0.875rem;
    margin-top: 1rem;
    background-color: var(--color-brand);
    color: var(--color-top);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5rem;
    border-radius: 2rem;
}

.artist-badge__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    min-width: 1.7rem;
    height: 1.7rem;
    border: 0.063rem solid var(--color-top);
    border-radius: 50%;
}

.artist-badge p {
    white-space: nowrap;
    visibility: visible;
    opacity: 1;
}

.artist-badge__check svg {
    margin-left: 0.063rem;
}

.artist-badge.collapsed {
    border-radius: 0.5rem;
    padding: 0.563rem 0.775rem;
    -webkit-transition: padding 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
    transition: padding 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
}

.artist-badge.collapsed p {
    display: none;
    visibility: hidden;
    opacity: 0;
}

/* Tags responsive behavior */
.tags--desktop {
    display: block;
}

.tags--mobile {
    display: none;
}

@media (max-width: 64rem) {

    /* 1024px */
    .tags--desktop {
        display: none;
    }

    .tags--mobile {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-top: clamp(0.75rem, 0.3214rem + 2.1429vw, 1.125rem);
        margin-bottom: 0;
        overflow: hidden;
    }

    .tags--mobile .tags__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-top: 0;
        margin-bottom: 0;
        scrollbar-width: none;
    }

    .tags--mobile .tags__list::-webkit-scrollbar {
        display: none;
    }

    .tags--mobile .tags__item {
        flex: 0 0 auto;
    }

    .tags--mobile .tags__link {
        white-space: nowrap;
    }
}

/* Product info responsive adjustments for large screens */
@media (min-width: 1280px) {
    .product__info {
        flex-grow: 1;
        flex-shrink: 0;
        height: auto;
        justify-content: flex-start;
        align-self: flex-start;
    }
}

/* ===================================================
   START / HOME PAGE
   =================================================== */

.start-page {
    --adv-pad-v: clamp(3rem, 2rem + 5vw, 5.5rem);
}

/* --- Hero --- */
.start-hero {
    position: relative;
    overflow: hidden;
    padding: calc(clamp(1.75rem, 1.25rem + 2.5vw, 3.375rem) + 0.5rem) 0 clamp(1.75rem, 1.25rem + 2.5vw, 3.375rem);
    text-align: center;
    border-bottom: 1px solid var(--color-line);
}

.start-hero--has-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(18, 18, 18, 0.82) 0%, rgba(18, 18, 18, 0.58) 48%, rgba(18, 18, 18, 0.78) 100%);
    pointer-events: none;
}

.start-hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}

.start-hero__video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

.start-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-inline: calc(var(--container-padding-x) + 4rem);
}

.start-hero__title {
    font-family: var(--heading-font-family);
    font-size: var(--hero-h1-size);
    font-weight: var(--hero-h1-weight);
    line-height: var(--hero-h1-line-height);
    color: var(--color-light);
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: normal;
}

.start-hero__accent {
    display: inline-block;
    font-family: var(--display-font-family);
    font-style: var(--display-font-style);
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--hero-accent-size);
    letter-spacing: var(--letter-spacing-normal);
    line-height: var(--hero-accent-line-height);
    white-space: nowrap;
}

.start-hero__accent em {
    font-style: italic;
}

.start-hero__line {
    display: inline;
}

.start-hero__intro-text,
.start-hero__for-video,
.start-hero__editing {
    display: inline;
}

.start-hero__library {
    position: relative;
    display: inline-block;
    font-family: var(--display-font-family);
    font-style: var(--display-font-style);
    font-weight: var(--font-weight-medium);
    font-size: var(--hero-accent-size);
    line-height: var(--hero-accent-line-height);
    white-space: nowrap;
    isolation: isolate;
}

.start-hero__circle {
    position: absolute;
    top: 40%;
    left: -0.8rem;
    transform: translateY(-50%);
    width: calc(42% + 5rem);
    max-width: none;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.start-hero__library-front {
    position: relative;
    z-index: 2;
}

.start-hero__library-back {
    position: relative;
    z-index: 0;
}

.start-hero__lightning {
    display: inline-block;
    height: 0.7em;
    width: auto;
    vertical-align: middle;
    position: relative;
    top: -0.05em;
    color: var(--color-brand);
    overflow: visible;
    shape-rendering: geometricPrecision;
}

@media (min-width: 64rem) {
    .start-hero {
        text-align: left;
    }

    .start-hero__inner {
        align-items: flex-start;
        padding-inline: var(--container-padding-x);
    }

    .start-hero__line {
        display: block;
    }
}

.start-hero__word {
    position: relative;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    z-index: 2;
}

.start-hero__word::after {
    content: '';
    position: absolute;
    bottom: 4%;
    left: -3px;
    width: calc(85% + 3px);
    height: 6px;
    background-image: url('/assets/images/home/incs/line.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.start-hero__search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 39.375rem;
    height: clamp(2.75rem, 2.33rem + 1.78vw, 3.9375rem);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        rgba(10, 12, 14, 0.2);
    border: 0.03125rem solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(0.25rem) saturate(115%);
    backdrop-filter: blur(0.25rem) saturate(115%);
    padding-left: clamp(0.875rem, 0.5893rem + 1.4286vw, 1.375rem);
    padding-right: 0.5rem;
    gap: 0.5rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 1rem 2.5rem rgba(0, 0, 0, 0.16);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.start-hero__search:focus-within {
    border-color: rgba(202, 255, 51, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 1rem 2.5rem rgba(0, 0, 0, 0.2),
        0 0 0 0.1875rem rgba(202, 255, 51, 0.12);
}

@media (min-width: 48rem) and (max-width: 79.99875rem) {
    .start-hero__search {
        width: clamp(35.5rem, 16.125rem + 24.21875vw, 39.375rem);
        max-width: none;
        height: clamp(3.75rem, 3rem + 1.171875vw, 3.9375rem);
        padding: 0.5rem 0.5rem 0.5rem clamp(0.875rem, 0.5893rem + 1.4286vw, 1.375rem);
    }
}

.start-hero__search-icon {
    flex-shrink: 0;
    color: var(--color-gray-light-02);
    width: clamp(1rem, 0.7857rem + 1.0714vw, 1.75rem);
    height: clamp(0.875rem, 0.6607rem + 1.0714vw, 1.625rem);
}

.start-hero__search-input {
    flex: 1;
    padding: 0.25rem;
    background: none;
    border: none;
    color: var(--color-light);
    font-size: 0.9375rem;
    outline: none;
    min-width: 0;
}

.start-hero__search-input::placeholder {
    color: var(--color-gray-06);
}

.start-hero__search-btn {
    flex-shrink: 0;
    width: clamp(5rem, 4.5rem + 2.16vw, 6.4375rem);
    height: clamp(2.125rem, 1.9rem + 0.94vw, 2.75rem);
    padding-inline: 0;
    background-color: var(--color-brand);
    color: var(--color-dark);
    border: 0.03125rem solid rgba(202, 255, 51, 0.42);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(0.25rem) saturate(115%);
    backdrop-filter: blur(0.25rem) saturate(115%);
    font-size: clamp(0.75rem, 0.6875rem + 0.3125vw, 0.9375rem);
    font-weight: var(--button-font-weight);
    line-height: var(--button-medium-line-height);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.start-hero__search-btn:hover {
    background-color: var(--color-brand-dark);
    border-color: rgba(202, 255, 51, 0.62);
    color: var(--color-dark);
}

/* --- Categories Grid --- */
.start-categories {
    border-bottom: 1px solid var(--color-line);
}

.start-categories__inner {
    /* padding-inline: clamp(1rem, 0.43rem + 2.44vw, 2.625rem); */
    padding-top: clamp(1.5rem, 0.8571rem + 3.2143vw, 3.75rem);
    padding-bottom: clamp(1.5rem, 0.8571rem + 3.2143vw, 3.75rem);
}

.start-categories__grid {
    display: grid;
    grid-template-columns: repeat(5, 257px);
    gap: 23px;
    justify-content: center;
}

@media (max-width: 91.25rem) {
    .start-categories__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-categories__grid {
        grid-template-columns: repeat(5, clamp(14.375rem, 0.875rem + 16.875vw, 16.0625rem));
        gap: 1.1875rem;
    }
}

@media (max-width: 79.99875rem) {
    .start-categories__grid {
        grid-template-columns: repeat(4, 257px);
    }
}

@media (max-width: 73rem) {
    .start-categories__grid {
        grid-template-columns: repeat(3, 257px);
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-categories__grid {
        grid-template-columns: repeat(5, clamp(11.5rem, 0rem + 17.96875vw, 14.375rem));
        gap: clamp(0.75rem, -0.25rem + 1.5625vw, 1rem);
    }
}

@media (max-width: 63.99875rem) {
    .start-categories__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}

@media (max-width: 47.99875rem) {
    .start-categories__grid {
        grid-template-columns: repeat(2, clamp(8.875rem, 1rem + 39.2857vw, 19.875rem));
        gap: 12px;
    }
}

@media (max-width: 30rem) {
    .start-categories__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.start-category-card {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 257px;
    height: 284px;
    color: var(--color-gray-light-01);
    text-decoration: none;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.25s ease, transform 0.25s ease;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        rgba(10, 12, 14, 0.32);
    border: 0.125rem solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    -webkit-backdrop-filter: blur(0.375rem) saturate(120%);
    backdrop-filter: blur(0.375rem) saturate(120%);
    padding: 0.75rem;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.75rem 2rem rgba(0, 0, 0, 0.08);
}

@media (max-width: 91.25rem) {
    .start-category-card {
        width: 100%;
        height: auto;
        aspect-ratio: 257 / 284;
    }
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-category-card {
        width: clamp(14.375rem, 0.875rem + 16.875vw, 16.0625rem);
        height: clamp(15.875rem, 0.875rem + 18.75vw, 17.75rem);
        aspect-ratio: auto;
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-category-card {
        width: clamp(11.5rem, 0rem + 17.96875vw, 14.375rem);
        height: clamp(12.625rem, -0.375rem + 20.3125vw, 15.875rem);
        aspect-ratio: auto;
        padding: 0.5rem;
    }
}

@media (max-width: 47.99875rem) {
    .start-category-card {
        width: clamp(8.875rem, 1rem + 39.2857vw, 19.875rem);
        height: clamp(10.5rem, 2.2857rem + 41.0714vw, 22rem);
        aspect-ratio: auto;
        padding: 0.5rem;
        border-radius: clamp(0.9375rem, 0.7143rem + 1.1161vw, 1.25rem);
    }
}

.start-category-card:hover {
    color: var(--color-brand);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),
        rgba(10, 12, 14, 0.38);
    border-color: rgba(202, 255, 51, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1rem 2.5rem rgba(0, 0, 0, 0.14);
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

/* Placeholder gradient fills — замінити на background-image: url(...) коли будуть зображення */
.start-category-card--1 .start-category-card__body {
    background: linear-gradient(135deg, #1e2730 0%, #0e1820 100%);
}

.start-category-card--2 .start-category-card__body {
    background: linear-gradient(135deg, #1e2525 0%, #0e1818 100%);
}

.start-category-card--3 .start-category-card__body {
    background: linear-gradient(135deg, #22201a 0%, #141210 100%);
}

.start-category-card--4 .start-category-card__body {
    background: linear-gradient(135deg, #1f1a27 0%, #120f18 100%);
}

.start-category-card--5 .start-category-card__body {
    background: linear-gradient(135deg, #1a2020 0%, #0e1515 100%);
}

.start-category-card--6 .start-category-card__body {
    background: linear-gradient(135deg, #1e1e1e 0%, #111111 100%);
}

.start-category-card__body {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    overflow: hidden;
    border: none;
    background-color: var(--color-legend);
    /* background-image: url(...) — замінити коли будуть зображення */
    background-size: cover;
    background-position: center;
    margin-bottom: 0.75rem;
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-category-card__body {
        width: clamp(13rem, 16.25vw, 14.625rem);
        height: clamp(12.625rem, -0.375rem + 16.25vw, 14.25rem);
        aspect-ratio: auto;
        align-self: center;
        flex-shrink: 0;
        margin-bottom: clamp(0.5rem, -1.5rem + 2.5vw, 0.75rem);
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-category-card__body {
        width: clamp(10.375rem, -0.125rem + 16.40625vw, 13rem);
        height: clamp(10.125rem, 0.125rem + 15.625vw, 12.625rem);
        aspect-ratio: auto;
        align-self: center;
        flex-shrink: 0;
        margin-bottom: clamp(0.25rem, -0.75rem + 1.5625vw, 0.5rem);
    }
}

@media (max-width: 63.99875rem) {
    .start-category-card__body {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 64rem) {
    .start-category-card__body {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 47.99875rem) {
    .start-category-card__body {
        margin-bottom: 0.5rem;
    }
}

.start-category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.start-category-card__icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.start-category-card:hover .start-category-card__icon {
    opacity: 1;
}

.start-category-card__icon svg {
    width: 100%;
    height: 100%;
    fill: var(--color-light);
}

.start-category-card__icon path {
    fill: var(--color-light);
}

.start-category-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 80rem) {
    .start-category-card__footer {
        margin-bottom: 0.5rem;
    }
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-category-card__footer {
        margin-bottom: clamp(0rem, -4rem + 5vw, 0.5rem);
    }
}

@media (max-width: 64rem) {
    .start-category-card__footer {
        margin-bottom: 0.375rem;
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-category-card__footer {
        margin-bottom: clamp(0.375rem, -0.125rem + 0.78125vw, 0.5rem);
    }
}

.start-category-card__title {
    font-size: var(--navigation-size);
    line-height: var(--navigation-line-height);
    font-weight: var(--navigation-weight);
    color: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

@media (min-width: 64rem) and (max-width: 90rem) {
    .start-category-card__title {
        font-size: var(--navigation-size);
        line-height: var(--navigation-line-height);
    }
}

@media (max-width: 64rem) {
    .start-category-card__title {
        font-size: var(--navigation-size);
        line-height: var(--navigation-line-height);
    }
}

@media (max-width: 47.99875rem) {
    .start-category-card__title {
        font-size: var(--navigation-size);
        line-height: var(--navigation-line-height);
    }
}

.start-category-card__arrow {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7A7A7A;
    transition: color 0.2s;
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-category-card__arrow {
        width: clamp(1rem, 0rem + 1.25vw, 1.125rem);
        height: clamp(1rem, 0rem + 1.25vw, 1.125rem);
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-category-card__arrow {
        width: clamp(0.875rem, 0.375rem + 0.78125vw, 1rem);
        height: clamp(0.875rem, 0.375rem + 0.78125vw, 1rem);
    }
}

@media (max-width: 64rem) {
    .start-category-card__arrow {
        width: 0.875rem;
        height: 0.875rem;
    }
}

@media (max-width: 47.99875rem) {
    .start-category-card__arrow {
        width: 0.875rem;
        height: 0.875rem;
    }
}

.start-categories {
    --start-category-card-aspect: 257 / 284;
    --start-category-card-body-aspect: 234 / 228;
    --start-category-card-track: var(--start-category-card-width);
    --start-category-card-width: 16.0625rem;
    --start-category-card-padding: 0.75rem;
    --start-category-card-image-gap: 0;
    --start-category-card-footer-gap: 0.5rem;
    --start-category-card-footer-offset: 0rem;
    --start-category-card-footer-optical-offset: 0.16em;
    --start-category-card-title-size: 1rem;
    --start-category-card-title-line: 1.25rem;
    --start-category-card-arrow-size: 1.125rem;
    --start-category-card-grid-gap: 1.4375rem;
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-categories {
        --start-category-card-width: clamp(14.375rem, 0.875rem + 16.875vw, 16.0625rem);
        --start-category-card-padding: clamp(0.625rem, -0.375rem + 1.25vw, 0.75rem);
        --start-category-card-image-gap: 0;
        --start-category-card-footer-offset: clamp(0rem, -4rem + 5vw, 0.5rem);
        --start-category-card-title-size: clamp(0.875rem, -0.125rem + 1.25vw, 1rem);
        --start-category-card-title-line: clamp(1rem, -1rem + 2.5vw, 1.25rem);
        --start-category-card-arrow-size: clamp(1rem, 0rem + 1.25vw, 1.125rem);
        --start-category-card-grid-gap: 1.1875rem;
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-categories {
        --start-category-card-width: clamp(11.5rem, 0rem + 17.96875vw, 14.375rem);
        --start-category-card-padding: 0.5rem;
        --start-category-card-image-gap: 0;
        --start-category-card-footer-offset: clamp(0.375rem, -0.125rem + 0.78125vw, 0.5rem);
        --start-category-card-title-size: clamp(0.75rem, 0.25rem + 0.78125vw, 0.875rem);
        --start-category-card-title-line: clamp(0.875rem, 0.375rem + 0.78125vw, 1rem);
        --start-category-card-arrow-size: clamp(0.875rem, 0.375rem + 0.78125vw, 1rem);
        --start-category-card-grid-gap: clamp(0.75rem, -0.25rem + 1.5625vw, 1rem);
    }
}

@media (max-width: 63.99875rem) {
    .start-categories {
        --start-category-card-track: 11.5rem;
        --start-category-card-width: 11.5rem;
        --start-category-card-padding: 0.5rem;
        --start-category-card-image-gap: 0;
        --start-category-card-footer-offset: 0.375rem;
        --start-category-card-title-size: 0.75rem;
        --start-category-card-title-line: 0.875rem;
        --start-category-card-arrow-size: 0.875rem;
        --start-category-card-grid-gap: 1rem;
    }
}

@media (max-width: 48rem) {
    .start-categories {
        --start-category-card-track: clamp(8.875rem, 1rem + 39.2857vw, 19.875rem);
        --start-category-card-width: clamp(8.875rem, 1rem + 39.2857vw, 19.875rem);
        --start-category-card-image-gap: 0;
        --start-category-card-footer-offset: clamp(1rem, 0.6429rem + 1.7857vw, 1.625rem);
        --start-category-card-title-size: clamp(0.625rem, 0.3571rem + 1.3393vw, 1rem);
        --start-category-card-title-line: clamp(0.75rem, 0.3929rem + 1.7857vw, 1.25rem);
        --start-category-card-arrow-size: clamp(1rem, 0.7321rem + 1.3393vw, 1.375rem);
        --start-category-card-grid-gap: 0.75rem;
    }
}

.start-categories__grid {
    grid-template-columns: repeat(5, var(--start-category-card-track));
    gap: var(--start-category-card-grid-gap);
}

@media (max-width: 48rem) {
    .start-categories__grid {
        grid-template-columns: repeat(2, var(--start-category-card-track));
    }
}

@media (max-width: 30rem) {
    .start-categories {
        --start-category-card-track: 100%;
        --start-category-card-width: 100%;
        --start-category-card-title-size: 1rem;
        --start-category-card-title-line: 1.25rem;
        --start-category-card-arrow-size: 1.125rem;
    }

    .start-categories__grid {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }
}

@media (min-width: 48.00125rem) and (max-width: 63.99875rem) {
    .start-categories__grid {
        grid-template-columns: repeat(auto-fit, var(--start-category-card-track));
    }
}

.start-category-card {
    width: var(--start-category-card-width);
    height: auto;
    aspect-ratio: var(--start-category-card-aspect);
    padding: var(--start-category-card-padding);
}

.start-category-card__body {
    width: 100%;
    height: auto;
    aspect-ratio: var(--start-category-card-body-aspect);
    align-self: center;
    flex-shrink: 0;
    margin-bottom: 0;
}

@media (max-width: 63.99875rem) {
    .start-category-card__body {
        aspect-ratio: var(--start-category-card-body-aspect);
    }
}

.start-category-card__footer {
    gap: var(--start-category-card-footer-gap);
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
}

.start-category-card__title {
    display: flex;
    align-items: center;
    font-size: var(--start-category-card-title-size);
    font-weight: var(--navigation-weight);
    line-height: var(--start-category-card-title-line);
    transform: translateY(var(--start-category-card-footer-optical-offset));
}

.start-category-card__arrow {
    width: var(--start-category-card-arrow-size);
    height: var(--start-category-card-arrow-size);
    transform: translateY(var(--start-category-card-footer-optical-offset));
}

.start-category-card__arrow svg {
    fill: none;
}

.start-category-card:hover .start-category-card__arrow {
    color: var(--color-brand);
}

/* --- Advantages Section --- */
.start-advantages {
    border-bottom: 1px solid var(--color-line);
}

.start-advantages__header {
    text-align: center;
    padding-top: clamp(1.5rem, 1.04rem + 1.97vw, 2.8125rem);
    padding-bottom: clamp(1.5rem, 1.04rem + 1.97vw, 2.8125rem);
    padding-inline: clamp(1.25rem, -0.51rem + 7.51vw, 6.25rem);
}

.start-advantages__title {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.25rem, 1.03rem + 0.94vw, 1.875rem);
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--color-light);
}

.start-advantages__title-accent {
    font-family: var(--font-family-accent);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.5rem, 1.22rem + 1.22vw, 2.3125rem);
    line-height: 1.5rem;
}

/* Each advantage block: full-width divider between them */
.start-adv {
    border-top: 1px solid var(--color-line);
}

.start-adv--dark {
    background-color: var(--color-top);
}

.start-adv__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 2.5vw, 5rem);
    padding-top: clamp(2rem, 0.99rem + 4.32vw, 4.875rem);
    padding-bottom: clamp(2rem, 0.99rem + 4.32vw, 4.875rem);
    padding-inline: clamp(1.25rem, -0.51rem + 7.51vw, 6.25rem);
}

@media (max-width: 63.99875rem) {
    .start-adv__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Reverse: swap visual to right */
.start-adv--reverse .start-adv__visual {
    order: 2;
}

@media (max-width: 63.99875rem) {
    .start-adv--reverse .start-adv__visual {
        order: 0;
    }
}

/* Visual box */
.start-adv__visual {
    border-radius: 1rem;
    overflow: hidden;
}

.start-adv__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.start-adv__mockup {
    padding: 1.75rem;
}

/* Mockup card (download panel) */
.start-adv__mockup-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.start-adv__mockup-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--color-legend-02) 0%, var(--color-legend) 100%);
    border: 1px solid var(--color-line);
}

.start-adv__mockup-meta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.start-adv__mockup-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-light);
}

.start-adv__mockup-dropdown {
    background-color: var(--color-legend);
    border: 1px solid var(--color-line);
    border-radius: 0.375rem;
    overflow: hidden;
}

.start-adv__mockup-dropdown-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-brand);
    border-bottom: 1px solid var(--color-line);
}

.start-adv__mockup-dropdown-label::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-brand);
    flex-shrink: 0;
}

.start-adv__mockup-dropdown-list {
    padding: 0.375rem 0;
}

.start-adv__mockup-dropdown-list span {
    display: block;
    padding: 0.3125rem 0.75rem;
    font-size: 0.6875rem;
    color: var(--color-gray-light-01);
}

/* Mockup softs list */
.start-adv__mockup-softs {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    background-color: var(--color-legend);
    border: 1px solid var(--color-line);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

.start-adv__mockup-soft-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-line);
}

.start-adv__mockup-soft-row:last-child {
    border-bottom: none;
}

.start-adv__mockup-soft-name {
    font-size: 0.6875rem;
    color: var(--color-gray-light-01);
}

.start-adv__mockup-soft-size {
    font-size: 0.6875rem;
    color: var(--color-brand);
    font-weight: 600;
    white-space: nowrap;
}

/* Mockup grid (product thumbnails) */
.start-adv__mockup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

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

.start-adv__mockup-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, var(--color-legend-02) 0%, var(--color-legend) 100%);
    border: 1px solid var(--color-line);
}

/* Advantage text */
.start-adv__text {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: clamp(0.75rem, 0.49rem + 1.13vw, 1.5rem);
    border-left: 2px solid var(--color-brand);
    text-align: left;
}

.start-adv--reverse .start-adv__text {
    padding-left: 0;
    border-left: none;
    padding-right: clamp(0.75rem, 0.49rem + 1.13vw, 1.5rem);
    border-right: 2px solid var(--color-brand);
    text-align: right;
}

@media (max-width: 63.99875rem) {

    .start-adv__text,
    .start-adv--reverse .start-adv__text {
        padding-right: 0;
        border-right: none;
        padding-left: clamp(0.75rem, 0.49rem + 1.13vw, 1.5rem);
        border-left: 2px solid var(--color-brand);
        text-align: left;
    }
}

.start-adv__heading {
    font-family: "Inter", sans-serif;
    font-size: clamp(1.125rem, 0.9rem + 0.94vw, 1.75rem);
    font-weight: 400;
    line-height: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
    color: var(--color-light);
}

.start-adv__em {
    font-family: var(--font-family-accent);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.375rem, 1.11rem + 1.13vw, 2.125rem);
    line-height: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}

.start-adv__sub {
    font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.125rem);
    color: var(--color-gray);
    line-height: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}

/* --- CTA Banner --- */
.start-cta {
    border-top: 1px solid var(--color-line);
    padding: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) 0;
}

.start-page .start-cta {
    padding: 4.625rem 0;
}

@media (min-width: 80rem) and (max-width: 90rem) {
    .start-page .start-cta {
        padding: clamp(3.5rem, -5.5rem + 11.25vw, 4.625rem) 0;
    }
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-page .start-cta {
        padding: clamp(3rem, 1rem + 3.125vw, 3.5rem) 0;
    }
}

@media (min-width: 48rem) and (max-width: 63.99875rem) {
    .start-page .start-cta {
        padding: 3rem 0;
    }
}

@media (min-width: 20rem) and (max-width: 48rem) {
    .start-page .start-cta {
        padding: clamp(1.875rem, 1.0714rem + 4.0179vw, 3rem) 0;
    }
}

.start-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding-inline: clamp(1.25rem, -0.51rem + 7.51vw, 6.25rem);
}

.start-cta__title {
    color: var(--color-light);
    line-height: var(--h2-line-height);
}

.start-cta__title-accent {
    position: relative;
    display: inline-block;
    font-family: var(--font-family-accent);
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.75rem, 0.98rem + 3.3vw, 3.625rem);
    line-height: var(--h2-accent-line-height);
    vertical-align: baseline;
    isolation: isolate;
}

.start-cta__infinity-back,
.start-cta__infinity-front {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.start-cta__infinity-back {
    width: calc(100% + 2.5rem);
    transform: translate(-50%, -50%);
    z-index: 0;
}

.start-cta__unlimited {
    position: relative;
    z-index: 1;
    font-weight: var(--font-weight-semibold);
}

.start-cta__infinity-front {
    width: calc(76% + 1.9rem);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.start-cta__title-main {
    font-family: var(--font-family-accent);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.25rem, 0.78rem + 2vw, 2.375rem);
    line-height: var(--h2-line-height);
    vertical-align: baseline;
}

.start-cta__sub {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    color: var(--color-light);
    white-space: nowrap;
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-page .start-cta__sub {
        font-size: var(--text-small-size);
        line-height: var(--text-small-line-height);
    }
}

.start-cta__btn {
    flex-shrink: 0;
    width: 12.1875rem;
    height: var(--hero-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--hero-button-padding-x);
    font-size: var(--hero-button-font-size);
    font-weight: var(--hero-button-font-weight);
    line-height: 1rem;
    letter-spacing: var(--hero-button-letter-spacing);
    border-radius: var(--hero-button-radius);
    border-width: 0.0625rem;
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-cta__btn {
        width: clamp(10.625rem, 4.375rem + 9.7656vw, 12.1875rem);
        height: var(--hero-button-height);
        padding-inline: var(--hero-button-padding-x);
        font-size: var(--hero-button-font-size);
        line-height: 1rem;
    }
}

@media (min-width: 48rem) and (max-width: 63.99875rem) {
    .start-cta__inner {
        flex-wrap: nowrap;
    }

    .start-cta__btn {
        width: 10.625rem;
        height: var(--hero-button-height);
        padding-inline: var(--hero-button-padding-x);
        font-size: var(--hero-button-font-size);
        line-height: 1rem;
    }
}

@media (min-width: 42.62625rem) and (max-width: 47.99875rem) {
    .start-cta__btn {
        width: 10.625rem;
        height: var(--hero-button-height);
        padding-inline: var(--hero-button-padding-x);
        font-size: var(--hero-button-font-size);
        line-height: 1rem;
    }
}

@media (max-width: 42.625rem) {
    .start-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
    }
}

@media (max-width: 42.625rem) {
    .start-cta__btn {
        width: 100%;
        min-width: var(--hero-button-mobile-min-width);
        height: var(--hero-button-mobile-height);
        padding-inline: var(--hero-button-mobile-padding-x);
        font-size: var(--hero-button-mobile-font-size);
        line-height: 1rem;
        letter-spacing: var(--hero-button-letter-spacing);
        border-radius: var(--hero-button-mobile-radius);
    }
}

/* ===== START PAGE — RESPONSIVE ===== */

/* --- Tablet (≤1024px) --- */
@media (max-width: 63.99875rem) {

    /* Hero */
    .start-hero__inner {
        gap: 0.7rem;
    }

    .start-hero__title {
        line-height: var(--hero-h1-line-height);
    }

    .start-hero__accent {
        display: inline-flex;
        align-items: baseline;
        gap: 0.5rem;
        line-height: var(--hero-accent-line-height);
    }

    .start-hero__circle {
        left: -0.5rem;
        width: calc(100% + 1rem);
    }

    .start-hero__library-back {
        margin-right: 6px;
    }

    .start-hero__search {
        max-width: 100%;
    }

    /* Advantages */
    .start-advantages__title {
        line-height: 1.75rem;
    }

    .start-advantages__title-accent {
        line-height: 1.75rem;
    }

}

/* --- Small phone (<=480px) --- */
@media (max-width: 30rem) {
    .start-hero {
        padding-block: clamp(1rem, 0.6429rem + 1.7857vw, 1.5rem) clamp(1.75rem, 1.25rem + 2.5vw, 3.375rem);
        text-align: left;
    }

    .start-hero__inner {
        align-items: stretch;
        gap: var(--space-4);
        padding-inline: var(--container-padding-x);
    }

    .start-hero__title {
        width: 100%;
        max-width: none;
        font-size: clamp(2.25rem, 2rem + 1.25vw, 2.625rem);
        line-height: clamp(2.5rem, 2.1667rem + 1.6667vw, 3rem);
        white-space: normal;
        overflow-wrap: break-word;
        text-align: left;
    }

    .start-hero__accent {
        display: inline-block;
        font-size: clamp(2.5rem, 2.1667rem + 1.6667vw, 3rem);
        line-height: clamp(2.5rem, 2.1667rem + 1.6667vw, 3rem);
        white-space: nowrap;
    }

    .start-hero__library {
        display: inline-block;
        width: auto;
        font-size: clamp(2.5rem, 2.1667rem + 1.6667vw, 3rem);
        line-height: clamp(2.5rem, 2.1667rem + 1.6667vw, 3rem);
    }

    .start-hero__search {
        align-self: center;
        width: 100%;
        max-width: 35.5rem;
        height: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
        padding-left: clamp(0.75rem, 0.4821rem + 1.3393vw, 1.125rem);
        padding-right: clamp(0.25rem, 0.0714rem + 0.8929vw, 0.5rem);
    }

    .start-hero__search-btn {
        width: clamp(4.5rem, 4.1429rem + 1.7857vw, 5rem);
        height: clamp(2.25rem, 1.875rem + 1.875vw, 2.75rem);
        font-size: clamp(0.75rem, 0.625rem + 0.625vw, 0.9375rem);
    }

    .start-hero__search-input {
        font-size: clamp(0.625rem, 0.3571rem + 1.3393vw, 1rem);
    }

    .start-hero__circle {
        left: -0.4rem;
        width: calc(100% + 0.75rem);
        top: 44%;
    }

    .start-hero__library-back {
        margin-right: 0px;
    }

    .start-hero__word::after {
        width: calc(90% + 3px);
    }

    .start-hero__lightning {
        height: 0.8em;
    }

    /* Advantages */
    .start-advantages__title {
        line-height: 2rem;
    }

    .start-advantages__title-accent {
        line-height: 2rem;
    }

    .start-adv__inner {
        gap: 1.5rem;
        padding-top: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
        padding-bottom: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
    }

}

@media (max-width: 30rem) {
    .start-hero__word::after {
        bottom: 0;
    }
}

@media (max-width: 20rem) {
    .start-hero__search {
        width: 17.5rem;
        max-width: 17.5rem;
        height: 3rem;
        padding-left: 0.75rem;
        padding-right: 0.25rem;
    }

    .start-hero__search-btn {
        width: 5rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }
}

/* CTA Unlimited styles */
.start-cta__title {
    position: relative;
}

.start-page .start-cta__title {
    display: inline-block;
}

.start-cta__title-accent {
    position: relative;
    z-index: 2;
}

.start-cta__title-main {
    position: relative;
    z-index: 2;
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-page .start-cta__title-main {
        font-size: clamp(1.875rem, -0.125rem + 3.125vw, 2.375rem);
    }
}

@media (min-width: 20rem) and (max-width: 48rem) {
    .start-page .start-cta__title-main {
        font-size: clamp(1.125rem, 0.5893rem + 2.6786vw, 1.875rem);
    }
}

.start-cta__unlimited {
    position: relative;
    z-index: 2;
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-page .start-cta__unlimited {
        font-size: clamp(2.75rem, -0.25rem + 4.6875vw, 3.5rem);
        letter-spacing: 0.04em;
    }
}

@media (min-width: 20rem) and (max-width: 48rem) {
    .start-page .start-cta__unlimited {
        font-size: clamp(1.75rem, 1.0357rem + 3.5714vw, 2.75rem);
        letter-spacing: 0.04em;
    }
}

.start-cta__unlimited-icon {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-page .start-cta__unlimited-icon {
        width: clamp(14.375rem, -2.125rem + 25.78125vw, 18.5rem);
    }
}

@media (min-width: 48rem) and (max-width: 63.99875rem) {
    .start-page .start-cta__unlimited-icon {
        width: 14.375rem;
    }
}

@media (min-width: 20rem) and (max-width: 48rem) {
    .start-page .start-cta__unlimited-icon {
        width: clamp(9.4rem, 4.7321rem + 20.0893vw, 14.375rem);
        left: 26%;
    }
}

.start-cta__logo {
    display: inline-flex;
    align-items: baseline;
    font-size: 1em;
    line-height: inherit;
    vertical-align: baseline;
    white-space: nowrap;
}

.start-cta__logo-motion {
    font-family: "Comfortaa", var(--font-family-base);
    font-size: 1em;
    font-weight: 700;
    line-height: inherit;
    letter-spacing: -0.03em;
}

.start-cta__logo-domain {
    font-family: "Comfortaa", var(--font-family-base);
    font-size: 1em;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: -0.01em;
}

.start-cta__logo-motion {
    color: var(--color-light);
}

.start-cta__logo-library {
    font-family: var(--font-family-accent);
    font-size: 1.08em;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    color: var(--color-light);
    letter-spacing: -0.02em;
}

.start-cta__logo-domain {
    color: var(--color-brand);
}

@media (min-width: 64rem) and (max-width: 80rem) {
    .start-page .start-cta__logo {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .start-cta__sub {
        white-space: normal;
        font-size: var(--text-small-size);
        line-height: var(--text-small-line-height);
    }

    .start-cta__logo {
        font-size: 1em;
    }
}

@media (min-width: 20rem) and (max-width: 48rem) {
    .start-page .start-cta__sub {
        font-size: var(--text-small-size);
        line-height: var(--text-small-line-height);
    }

    .start-page .start-cta__logo {
        font-size: 1em;
    }
}

/* Products page — compact CTA banner */
.start-cta--compact {
    position: relative;
    z-index: 1001;
    border-bottom: 1px solid var(--color-line);
}

.start-cta--compact .start-cta__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.start-cta--compact .start-cta__btn {
    flex-shrink: 0;
    width: auto;
}

@media (min-width: 64rem) {
    .start-cta--compact {
        min-height: clamp(5rem, 0.54rem + 6.97vw, 6.8125rem);
        padding: 0;
    }

    .start-cta--compact .start-cta__inner {
        min-height: clamp(5rem, 0.54rem + 6.97vw, 6.8125rem);
        padding-block: 1rem;
        padding-inline: 0;
        justify-content: center;
        gap: clamp(4rem, 54.09vw - 30.62rem, 18.0625rem);
    }
}

@media (max-width: 63.99875rem) {
    .start-cta--compact {
        padding: clamp(1rem, 3vw, 1.5rem) 0;
    }

    .start-cta--compact .start-cta__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: clamp(0.75rem, 3vw, 2rem);
    }
}

@media (max-width: 47.99875rem) {
    .start-cta--compact .start-cta__btn {
        display: none;
    }

    .start-cta--compact .start-cta__inner {
        justify-content: center;
    }
}

.statistics {
    padding-block: var(--page-section-padding-block);
}

.statistics__body {
    padding-top: var(--space-0);
}

.statistics__inner {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.statistics__inner-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.statistics__range {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.75rem, 0.3824rem + 1.634vw, 2rem);
}

.statistics__range-buttons {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.statistics__range-dropdown {
    display: none;
}

.statistics__chart {
    margin-bottom: clamp(0rem, -0.4047rem + 1.7986vw, 1.375rem);
}

.statistics__info {
    width: 100%;
    padding: 0;
    margin-bottom: clamp(0rem, -0.4047rem + 1.7986vw, 1.375rem);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.statistics__ticket {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: clamp(10rem, 8.8971rem + 4.902vw, 13.75rem);
    height: clamp(2.25rem, 2.0294rem + 0.9804vw, 3rem);
    padding: 0 clamp(0.875rem, 0.7647rem + 0.4902vw, 1.25rem);
    color: #B4B4B4;
    background-color: transparent;
    border: 0.0625rem solid var(--color-line);
    border-radius: var(--button-radius);
    white-space: nowrap;
}

.statistics__ticket-label {
    font-size: clamp(0.75rem, 0.7132rem + 0.1634vw, 0.875rem);
    font-weight: var(--font-weight-medium);
    color: #818181;
}

.statistics__ticket-value {
    font-size: clamp(0.875rem, 0.8382rem + 0.1634vw, 1rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-brand);
}

.statistics-items {
    width: 100%;
}

.statistics-items__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 12rem) auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(0.5rem, 0.2794rem + 0.9804vw, 1.25rem) clamp(0.6875rem, 0.1176rem + 2.5359vw, 2.625rem);
    color: var(--color-gray-light-01);
    border-bottom: 0.0625rem solid var(--color-line);
    font-size: clamp(0.75rem, 0.6397rem + 0.4902vw, 1.125rem);
    font-weight: 600;
}

.statistics-items__list {
    overflow: hidden;
}

.statistics-item {
    grid-template-columns: clamp(5.5rem, 4.7647rem + 3.268vw, 8rem) minmax(0, 1fr) minmax(7rem, 12rem) auto;
    padding: clamp(0.625rem, 0.5147rem + 0.4902vw, 1rem);
    gap: clamp(0.75rem, 0.6397rem + 0.4902vw, 1.125rem);
    border-bottom: 0.0625rem solid var(--color-line);
}

.statistics-item:last-child {
    border-bottom: none;
}

.statistics-item__media {
    width: clamp(5.5rem, 4.7647rem + 3.268vw, 8rem);
    aspect-ratio: 16 / 9;
    flex: 0 0 clamp(5.5rem, 4.7647rem + 3.268vw, 8rem);
}

.statistics-item__image {
    height: 100%;
}

.statistics-item__content {
    justify-content: center;
}

.statistics-item__title {
    font-size: clamp(0.875rem, 0.8382rem + 0.1634vw, 1rem);
    line-height: 1.35;
}

.statistics-item__project,
.statistics-item__date {
    font-size: clamp(0.75rem, 0.7132rem + 0.1634vw, 0.875rem);
}

.statistics-item__softs,
.admin-statistics__softs {
    color: #B4B4B4;
    font-size: clamp(0.75rem, 0.7132rem + 0.1634vw, 0.875rem);
    line-height: 1.35;
}

.statistics-soft-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.statistics-soft-icons__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-gray-05);
}

.statistics-soft-icons__item svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--color-gray-05);
}

.statistics-soft-icons__empty {
    overflow-wrap: anywhere;
}

.statistics-item__downloads {
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.125rem;
    min-width: 6rem;
    color: #B4B4B4;
}

.statistics-item__downloads-value {
    color: var(--color-brand);
    font-size: clamp(1rem, 0.9265rem + 0.3268vw, 1.25rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.statistics-item__downloads-label {
    color: #818181;
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
}

.chart__wrapper {
    width: 100%;
    height: clamp(7.125rem, 1.2426rem + 26.1438vw, 27.125rem);
    padding: clamp(0rem, -0.2206rem + 0.9804vw, 0.75rem);
    display: flex;
    background-color: var(--color-background-02);
    border: 0.0625rem solid var(--color-line);
    border-radius: 0.375rem;
}

.chart__body {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 0.625rem;
}

.chart__area {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.range {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.range__text {
    font-size: clamp(0.625rem, 0.5515rem + 0.3268vw, 0.875rem) !important;
}

.range__button {
    max-height: clamp(1.5625rem, 1.3787rem + 0.817vw, 2.1875rem);
    max-width: clamp(7rem, 6.1912rem + 3.5948vw, 9.75rem);
    padding: clamp(0.4375rem, 0.3824rem + 0.2451vw, 0.625rem) clamp(0.75rem, 0.6765rem + 0.3268vw, 1rem);
    background-color: var(--color-legend) !important;
    border-color: var(--color-legend) !important;
    font-size: clamp(0.625rem, 0.5515rem + 0.3268vw, 0.875rem) !important;
    font-weight: 400 !important;
    gap: clamp(1.3125rem, 1.2574rem + 0.2451vw, 1.5rem) !important;
    z-index: 2;
}

.range__button.active,
.range__button.hover:hover {
    background-color: var(--color-legend-02) !important;
    border-color: var(--color-legend-02) !important;
}

.range__icon {
    font-size: clamp(0.875rem, 0.7647rem + 0.4902vw, 1.25rem);
}

.calendar {
    position: absolute;
    right: 0;
    top: 110%;
    width: 13.75rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    color: var(--color-light);
    background-color: var(--color-legend);
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 1.25rem var(--color-background-01);
    overflow: hidden;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.calendar.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.calendar__header,
.calendar__year-picker,
.calendar__year-change {
    display: flex;
    align-items: center;
}

.calendar__header {
    justify-content: space-between;
}

.calendar__body {
    position: relative;
    display: flex;
    flex-direction: column;
    place-items: center;
}

.calendar__month-picker {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
}

.calendar__year-picker {
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.calendar__year-change {
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    border: 0.0625rem solid var(--color-gray-light-02);
    border-radius: 50%;
    cursor: pointer;
}

.calendar__year-change i {
    color: var(--color-gray-light-02);
    font-size: 0.875rem;
}

.calendar__week-days,
.calendar__days {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar__week-days {
    color: var(--color-gray);
    cursor: pointer;
    font-size: 0.625rem;
    margin-bottom: 0.25rem;
}

.calendar__week-days div {
    display: grid;
    place-items: center;
}

.calendar__days {
    gap: 0.125rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0);
    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
}

.calendar__days.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-100%);
}

.calendar__days div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: 0.0625rem solid transparent;
    border-radius: 0.25rem;
    position: relative;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}

.calendar__days div:empty {
    visibility: hidden;
}

.calendar__days div.active {
    border-color: var(--color-light);
    background-color: var(--color-legend-02);
}

.calendar__days div.in-range,
.calendar__days div:hover {
    background-color: var(--color-legend-02);
}

.calendar__days div.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.calendar__month-list {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 75%;
    left: 0;
    top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.25rem;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    transform: translate(100%);
    transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
}

.calendar__month-list>div {
    display: grid;
    place-content: center;
    border-radius: 0.125rem;
    padding: 0.5rem;
    cursor: pointer;
}

.calendar__month-list>div.active,
.calendar__month-list>div:hover {
    background-color: var(--color-legend-02);
}

.calendar__month-list.show {
    opacity: 1;
    transform: translate(0);
    visibility: visible;
    pointer-events: auto;
}

.accordion {
    width: 100%;
    border-radius: 0.375rem;
    background: var(--color-background-02);
    border: 0.0625rem solid var(--color-line);
    margin: auto;
    overflow: hidden;
}

.accordion__title,
.accordion__trigger,
.accordion__list-item {
    display: flex;
    justify-content: space-between;
}

.accordion__title {
    color: var(--color-gray-light-01);
    padding: clamp(0.5rem, 0.2794rem + 0.9804vw, 1.25rem) clamp(0.6875rem, 0.1176rem + 2.5359vw, 2.625rem);
    border-bottom: 1px solid var(--color-legend-02);
    font-size: clamp(0.75rem, 0.6397rem + 0.4902vw, 1.125rem);
    font-weight: 600;
}

.accordion__item {
    border-bottom: 1px solid var(--color-legend-02);
}

.accordion__item:last-child {
    border: none;
}

.accordion__trigger {
    align-items: center;
    padding: clamp(0.5rem, 0.2794rem + 0.9804vw, 1.25rem) clamp(0.6875rem, 0.1176rem + 2.5359vw, 2.625rem);
    cursor: pointer;
    font-size: clamp(0.75rem, 0.6397rem + 0.4902vw, 1.125rem);
    font-weight: 400;
    transition: background 0.3s;
}

.accordion__trigger-title {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    min-width: 0;
}

.accordion__trigger-title p,
.accordion__list-item p:first-child {
    overflow-wrap: anywhere;
}

.accordion__toggle {
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
    border-radius: 50%;
    border: 0.125rem solid var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s ease;
}

.accordion__toggle::before,
.accordion__toggle::after {
    content: "";
    position: absolute;
    background: var(--color-light);
    transition: transform 0.3s ease;
}

.accordion__toggle::before {
    width: 0.625rem;
    height: 0.125rem;
}

.accordion__toggle::after {
    width: 0.125rem;
    height: 0.625rem;
}

.accordion__toggle.open::after {
    transform: scaleY(0);
}

.accordion__content {
    max-height: 125rem;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.accordion__content.collapsed {
    max-height: 0;
}

.accordion__inner {
    background: var(--color-legend);
}

.accordion__list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 0.5294rem + 0.9804vw, 1.5rem);
    padding: clamp(0.625rem, 0.4412rem + 0.817vw, 1.25rem) clamp(0.6875rem, 0.1176rem + 2.5359vw, 2.625rem) clamp(0.625rem, 0.4412rem + 0.817vw, 1.25rem) clamp(2rem, 0.7647rem + 5.4902vw, 6.25rem);
}

.accordion__list-item {
    gap: 1rem;
    font-size: clamp(0.75rem, 0.6397rem + 0.4902vw, 1.125rem);
}

.statistics__empty {
    text-align: center;
}

.admin-statistics {
    gap: 1.5rem;
}

.admin-statistics__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-statistics__eyebrow {
    margin: 0 0 0.25rem;
    color: var(--color-gray);
    font-size: var(--caption-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--caption-line-height);
}

.admin-statistics__title {
    margin: 0;
}

.admin-statistics__items-header,
.admin-statistics__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, 12rem) minmax(8rem, 14rem) auto;
    align-items: center;
    gap: 1rem;
}

.admin-statistics__item {
    grid-template-columns: clamp(5.5rem, 4.7647rem + 3.268vw, 8rem) minmax(0, 1fr) minmax(7rem, 12rem) minmax(8rem, 14rem) auto;
}

.admin-statistics__author {
    color: #B4B4B4;
    font-size: clamp(0.75rem, 0.7132rem + 0.1634vw, 0.875rem);
    line-height: 1.35;
}

.admin-statistics__author span {
    overflow-wrap: anywhere;
}

@media (width <=47.99875rem) {
    .statistics__inner-range {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .statistics__range-buttons {
        display: none;
    }

    .statistics__range-dropdown {
        display: block;
        width: 100%;
    }

    .statistics__range-dropdown-button {
        width: 100%;
        justify-content: space-between;
    }

    .statistics__range-dropdown-button.button.chevrone .right {
        display: flex;
    }

    .statistics__range-dropdown-list,
    .dropdown__list.statistics__range-dropdown-list {
        width: 100%;
        right: 0;
    }

    .statistics__range {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
    }

    .range {
        min-width: 0;
    }

    .range__text {
        display: none;
    }

    .range .range__button {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }

    .statistics__info {
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }

    .statistics__chart {
        height: 22rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .statistics__chart .chart__body {
        min-width: 44rem;
        flex: 0 0 44rem;
    }

    .statistics__ticket {
        width: 100%;
    }

    .statistics-items__header {
        display: none;
    }

    .statistics-items__list {
        border-radius: 0;
    }

    .statistics-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-0) var(--space-6);
    }

    .statistics-item__media {
        width: 100%;
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }

    .statistics-item__content {
        justify-content: flex-start;
    }

    .statistics-item__title {
        font-size: var(--font-size-base);
        line-height: var(--line-height-snug);
    }

    .statistics-item__project {
        margin-top: var(--space-1);
        font-size: var(--font-size-sm);
    }

    .statistics-item__downloads {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        padding-top: 0.5rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top: 0.0625rem solid var(--color-line);
    }

    .statistics-item__softs,
    .admin-statistics__softs {
        padding-top: 0.5rem;
        border-top: 0.0625rem solid var(--color-line);
    }

    .calendar.m-left {
        left: 0;
        right: auto;
    }

    .admin-statistics__header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-statistics__items-header {
        display: none;
    }

    .admin-statistics__item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-statistics__author {
        padding-top: 0.5rem;
        border-top: 0.0625rem solid var(--color-line);
    }
}

/* Promo bar sits above the fixed header; its height (set by JS) offsets
           the header and the page content so nothing is covered or shifted. */
:root {
    --promo-bar-height: 0px;
}

.promo-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
}

body {
    padding-top: var(--promo-bar-height, 0px);
}

.site-header.custom-sticky {
    top: var(--promo-bar-height, 0px);
}

.contributor-promo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 48px;
    min-height: 44px;
    background: var(--color-brand);
    color: var(--color-background-01);
    font-size: .9rem;
    font-weight: 600;
}

.contributor-promo__inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.contributor-promo__bolt {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.contributor-promo__cta {
    display: inline-flex;
    align-items: center;
    background: #0e0f12;
    color: #fff;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
}

.contributor-promo__cta:hover {
    color: #fff;
    opacity: .88;
}

.contributor-promo__close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #0e0f12;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}

.contributor-promo__close:hover {
    opacity: 1;
}