/*====================================================================*/
/*------------------------------- RESET ------------------------------*/
/*====================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
progress, meter {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, search,
footer, header, hgroup, menu, nav, section, main {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

[hidden], template {
    display: none !important;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

summary {
    display: list-item;
    cursor: pointer;
}

/*====================================================================*/
/*------------------------------ FONTS -------------------------------*/
/*====================================================================*/

/*---------------------------- OPEN SANS ----------------------------*/

@font-face {
    font-family: Open Sans Fallback;
    size-adjust: 105.467%;
    ascent-override: 100%;
    font-weight: 400;
    font-style: normal;
    src: local("Arial");
}

@font-face {
    font-family: Open Sans Fallback;
    font-weight: 700;
    size-adjust: 104.801%;
    ascent-override: 100%;
    src: local("Arial");
}

@font-face {
    font-family: Open Sans;
    src: url(/fonts/OpenSans-VariableFont_wdth,wght.woff2?74049f597c2b57899b308e7f5bd27681) format("woff2-variations");
    /*src: url("../fonts/OpenSans-VariableFont_wdth,wght.woff2") format("woff2") tech("variations");*/
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Open Sans;
    src: url(/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2?a51b2c4bebd0d33df77b0e8f9b8c67f7) format("woff2-variations");
    /*src: url("../fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2") tech("variations");*/
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/*---------------------------- ABRIL FATFACE ----------------------------*/

@font-face {
    font-family: Abril Fatface Fallback;
    size-adjust: 88.444%;
    ascent-override: 128.85%;
    src: local("Georgia Bold");
}

@font-face {
    font-family: Abril Fatface;
    src: url(/fonts/AbrilFatface-Regular.woff2?be9985e37e8406381a3aa94be7e60630) format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*====================================================================*/
/*------------------------ CUSTOM-PROPERTIES -------------------------*/
/*====================================================================*/

/* Základní nastavení globálních proměnných webu. */

:root {
    --is-medium: 0;
    --is-small: 0;
    --is-tight: 0;
}

@media (max-width: 77.74375em) {

    :root {
        --is-tight: 1;
    }
}

@media (max-width: 63.99375em) {

    :root {
        --is-medium: 1;
        --is-tight: 0;
    }
}

@media (max-width: 39.99375em) {

    :root {
        --is-tight: 1;
    }
}

@media (max-width: 29.99375em) {

    :root {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }
}

@media (max-width: 23.43125em) {

    :root {
        --is-tight: 1;
    }
}

:root {
    --is-global-medium: var(--is-medium);
    --is-global-small: var(--is-small);
    --is-global-tight: var(--is-tight);

    --page-max-width: 148.4rem;
    --page-min-width: 32rem;
    --page-padding: calc(
        4rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
    );
}

@media (max-width: 22.49375em) {

    :root {
        --page-padding: 1.5rem;
    }
}

:root {

    --page-font-size-number: calc(
        15
        - 2 * var(--is-small)
    );
    --page-font-size: calc(0.1rem * var(--page-font-size-number));
    --page-line-height: calc(
        22 / 15 * (1 - var(--is-small))
        + 19 / 13 * var(--is-small)
    );

    --page-background-color: var(--color-light-dimmed);

    --page-dialog-z-index: 1010;

    --font-primary: Open Sans, Open Sans Fallback, Arial, sans-serif;
    --font-secondary: Abril Fatface, Abril Fatface Fallback, Georgia, Times New Roman, serif;
    --font-text: var(--font-primary);
    --font-title: var(--font-secondary);

    --color-primary: #D65A31;
    --color-primary-rgb: 214, 90, 49;
    --color-primary-h: 14.91;
    --color-primary-s: 66.8%;
    --color-primary-l: 51.57%;

    --color-light-dimmed: #eee;
    --color-light-dimmed-rgb: 238, 238, 238;
    --color-light-dimmed-h: 0;
    --color-light-dimmed-s: 0%;
    --color-light-dimmed-l: 93.33%;

    --color-primary-dimmed: #ffebde;

    --color-light-dimmed-darker: #e1e1e1;
    --color-light-dimmed-darker-rgb: 225, 225, 225;
    --color-light-dimmed-darker-h: 0;
    --color-light-dimmed-darker-s: 0%;
    --color-light-dimmed-darker-l: 88.24%;

    --color-dimmed: #CACACA;
    --color-dimmed-rgb: 202, 202, 202;
    --color-dimmed-h: 0;
    --color-dimmed-s: 0%;
    --color-dimmed-l: 79.22%;

    --color-dark-dimmed: #838992;
    --color-dark-dimmed-rgb: 131, 137, 146;
    --color-dark-dimmed-h: 216;
    --color-dark-dimmed-s: 6.44%;
    --color-dark-dimmed-l: 54.31%;

    --color-darker: #828282;

    --color-info-dimmed: #c3e2fc;

    --color-success-dimmed: #d8ffdf;

    --color-warning-dimmed: #fafcc3;

    --color-danger-dimmed: #fcc3c3;

    --color-dark: #222831;
    --color-dark-rgb: 34, 40, 49;
    --color-dark-h: 216;
    --color-dark-s: 18.07%;
    --color-dark-l: 16.27%;

    --color-dark-strong: #121B28;
    --color-dark-strong-rgb: 18, 27, 40;
    --color-dark-strong-h: 215.45;
    --color-dark-strong-s: 37.93%;
    --color-dark-strong-l: 11.37%;

    --color-text: var(--color-dark);
    --color-text-rgb: var(--color-dark-rgb);
    --color-text-h: var(--color-dark-h);
    --color-text-s: var(--color-dark-s);
    --color-text-l: var(--color-dark-l);

    --color-text-inverse: #fff;
    --color-text-inverse-rgb: 255, 255, 255;
    --color-text-inverse-h: 0;
    --color-text-inverse-s: 0%;
    --color-text-inverse-l: 100%;

    --transition-duration: 0.275s;
    --transition-easing: cubic-bezier(.5, .25, .5, 1);
    --transition-delay: 0s;
    --transition: var(--transition-duration) var(--transition-easing) var(--transition-delay);

    --transition-change-duration: 0.125s;
    --transition-change-easing: ease-out;
    --transition-change-delay: 0s;
    --transition-change: var(--transition-change-duration) var(--transition-change-easing) var(--transition-change-delay);

    --transition-active-duration: 0.05s;
    --transition-active-easing: ease-out;
    --transition-active-delay: 0s;
    --transition-active: var(--transition-active-duration) var(--transition-active-easing) var(--transition-active-delay);

    --transition-show-duration: 0.275s;
    --transition-show-easing: cubic-bezier(0, 0, .21, .99);
    --transition-show-delay: 0s;
    --transition-show: var(--transition-show-duration) var(--transition-show-easing) var(--transition-show-delay);
    --transition-show-prop: transform var(--transition-show),
    opacity var(--transition-show);

    --transition-hide-duration: 0.325s;
    --transition-hide-easing: cubic-bezier(.43, .13, .21, .94);
    --transition-hide-delay: 0s;
    --transition-hide: var(--transition-show-duration) var(--transition-show-easing) var(--transition-show-delay);
    --transition-hide-prop: transform var(--transition-hide),
    opacity var(--transition-hide),
    width 0s linear var(--transition-hide-duration),
    height 0s linear var(--transition-hide-duration),
    visibility 0s linear var(--transition-hide-duration);

    /* Viz /css/tools/helpers/stack. */
    --stack-step: 0.5rem;
    --stack-default-size: 4;
    --stack-balanced-padding-adjust: 4;
}

@media (max-width: 47.99375em) {

    :root {
        --page-padding: 1.5rem;

        /* Viz /css/tools/helpers/stack. */
        --is-stack-size-adjust: 1;
    }
}

@media (max-width: 29.99375em) {

    :root {
        --is-_over-padding-active: 1;
    }
}

:root {
    --is-reduced-motion: 1;
}

@media (prefers-reduced-motion: no-preference) {

    :root {
        --is-reduced-motion: 0;
    }
}

:root {
    --_is-overflow-clip-support: 0;
}

@supports (overflow: cwlip) {

    :root {
        --_is-overflow-clip-support: 1;
    }
}

/*====================================================================*/
/*------------------------------- MAIN -------------------------------*/
/*====================================================================*/

/* Základní globální styly webu.
 * Chcete-li upravit konkrétní element, je vhodné pro něj vytvořit
 * samostatnou třídu nebo před selektor tagu přidat selektor komponentu,
 * jehož je element součástí. Přepisování stylů pomocí názvů tagů může
 * způsobit nepředvídatelné výsledky ve zbytku stránky.
 */

/* Velikost písma na elementu html je nastavena na 62.5%,
 * 1rem se tak rovná 10px.
 */

/* Odstraní posuvníky v Chromu, pokud je stránka upravována
 * pomocí Live Preview v editoru Phoenix (dříve Brackets). Simulace
 * mobilních systémů, kde posuvník nezmenšuje obsah. */
html[data-brackets-id]::-webkit-scrollbar {
    display: none;
}

:root:lang(cs),
:not(:lang(cs)) > :lang(cs) {
    quotes: "\201e" "\201c" "\201a" "\2018";
}

* {
    box-sizing: border-box;

    font-family: inherit;
}

::after,
::before {
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
}

html,
body {
    height: 100%;
}

.no-js,
.no-js body {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;

    min-width: var(--page-min-width);

    font-family: var(--font-primary, sans-serif), sans-serif;
    font-size: var(--page-font-size);
    font-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: auto;
    text-rendering: optimizeLegibility;
    line-height: var(--page-line-height);

    background-color: var(--page-background-color);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

svg:where(:not([overflow="visible"])) {
    overflow: hidden;
}

/*====================================================================*/
/*---------------------------- TYPOGRAPHY ----------------------------*/
/*====================================================================*/

/* Globální styly obsahu webu.
 * Chcete-li upravit konkrétní element, je vhodné pro něj vytvořit
 * samostatnou třídu nebo před selektor tagu přidat selektor komponentu,
 * jehož je element součástí. Přepisování stylů pomocí názvů tagů může
 * způsobit nepředvídatelné výsledky ve zbytku stránky.
 */

:where(:not(._reset)):is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--font-title);
}

:where(:not(._reset)):is(h1) {
    font-size: calc(
        8.5rem
        - 2.0rem * var(--is-medium)
        - 4.2rem * var(--is-small)
        - 0.7rem * var(--is-tight)
    );
    line-height: 1.15;
}

:where(:not(._reset)):is(h2) {
    font-size: calc(
        4.0rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    line-height: 1.15;
}

:where(:not(._reset)):is(h3) {
    font-size: calc(
        3.2rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    line-height: 1.15;
}

:where(:not(._reset)):is(h4) {
    font-size: calc(
        2.4rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    line-height: 1.15;
}

:where(:not(._reset)):is(h5) {
    font-family: var(--font-text);
    font-size: calc(
        2.4rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;
    line-height: 1.15;
}

:where(:not(._reset)):is(h6) {
    font-family: var(--font-text);
    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-small)
    );
    font-weight: bold;
    line-height: calc(
        1.46666
        - (1.4666 - (17 / 13)) * var(--is-small)
    );
}

* + :where(:not(._reset)):is(h1) {
    margin-top: calc(
        5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

* + :where(:not(._reset)):is(h2) {
    margin-top: calc(
        4rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

* + :where(:not(._reset)):is(h3) {
    margin-top: calc(
        3rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

* + :where(:not(._reset)):is(h4) {
    margin-top: calc(
        2.5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

* + :where(:not(._reset)):is(h5) {
    margin-top: calc(
        2.5rem
        - 0.5rem * var(--is-small)
    );
}

* + :where(:not(._reset)):is(h6) {
    margin-top: calc(
        2.0rem
        - 0.5rem * var(--is-small)
    );
}

* + :where(:not(._reset)):is(p) {
    margin-top: calc(
        2.0rem
        - 0.5rem * var(--is-small)
    );
}

:where(:not(._reset)):is(q,blockquote) {
    quotes: inherit;
}

:where(:not(._reset)):is(blockquote) {
    margin-left: calc(
        3.0rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );

    font-size: calc(
        2.0rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-style: italic;
    font-weight: 300;
    line-height: 1.25;
}

:where(:not(._reset)):is(blockquote) p {
    font-size: inherit;
}

:is(:where(:not(._reset)):is(blockquote) p):where(:first-of-type)::before {
    content: open-quote;
}

:is(:where(:not(._reset)):is(blockquote) p):where(:last-of-type)::after {
    content: close-quote;
}

:where(:not(._reset)):is(q)::before {
    content: open-quote;
}

:where(:not(._reset)):is(q)::after {
    content: close-quote;
}

* + :where(:not(._reset)):is(ol,ul,dl,hr,img,pre,.table-scrollable,table,figure,blockquote) {
    margin-top: calc(
        3.0rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

:where(:not(._reset)):is(img) {
    display: block;

    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;

    font-style: italic;
}

:where(:not(._reset)):is(figure) {
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

:where(:not(._reset)):is(figure) img {
    margin: 0;
}

:where(:not(._reset)):is(figcaption) {
    width: -moz-min-content;
    width: min-content;
    min-width: 100%;
    margin-top: 1rem;

    font-style: italic;
    line-height: normal;
}

:where(:not(._reset)):is(ol) {
    list-style: decimal inside;
}

:where(:not(._reset)):is(ul) {
    list-style: disc inside;
}

:where(:not(._reset)):is(ul,ol) :is(ul,ol) {
    margin-left: calc(
        3.0rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

:where(:not(:is(ul,ol)._reset)) > * + :where(:not(._reset)):is(li) {
    margin-top: 0.5rem;
}

:where(:not(._reset)):is(dt) {
    font-weight: bold;
}

* + :where(:not(._reset)):is(dt) {
    margin-top: calc(
        2.0rem
        - 0.5rem * var(--is-small)
    );
}

:where(:not(._reset)):is(a) {
    font-weight: bold;
    text-decoration: underline;
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent;
    text-decoration-thickness: 0.1rem;

    color: var(--_ui-link-color, var(--color-primary));
}

@media (hover: hover) {
    :where(:not(._reset)):is(a):hover {
        color: var(--_ui-hover-link-color, var(--color-primary));
        -webkit-text-decoration-color: var(--_ui-hover-link-underline-color, rgba(var(--color-primary-rgb), 0.5));
                text-decoration-color: var(--_ui-hover-link-underline-color, rgba(var(--color-primary-rgb), 0.5));
    }
}

:where(:not(._reset)):is(a):active {
    color: var(--_ui-active-link-color, var(--color-dark-dimmed));
}

:where(:not(._reset)):is(a):where([href*="mailto:"]) {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

:where(:not(._reset)):is(b,strong) {
    font-weight: bold;
}

:where(:not(._reset)):is(i,em,cite) {
    font-style: italic;
}

:where(:not(._reset)):is(s) {
    text-decoration: line-through;
}

:where(:not(._reset)):is(s)::before, :where(:not(._reset)):is(s)::after {
    position: absolute;

    height: 1px;
    width: 1px;
    padding: 0;
    margin: -1px;

    white-space: nowrap;

    border: 0;

    clip: rect(0 0 0 0);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);

    overflow: hidden;
}

:where(:not(._reset)):is(s)::before {
    content: "začátek přeškrtnutého textu";
}

:where(:not(._reset)):is(s)::after {
    content: "konec přeškrtnutého textu";
}

:where(:not(._reset)):is(u) {
    text-decoration: underline;
}

:where(:not(._reset)):is(small) {

}

:where(:not(._reset)):is(mark) {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
}

:where(:not(._reset)):is(sub,sup) {
    position: relative;

    font-size: 0.73em;
    line-height: 0;
    vertical-align: baseline;
}

:where(:not(._reset)):is(sub) {
    bottom: -0.25em;
}

:where(:not(._reset)):is(sup) {
    top: -0.5em;
}

:where(:not(._reset)):is(pre) {
    max-width: 100%;

    overflow: auto;
}

:where(:not(._reset)):is(pre,code) {
    font-family: monospace;
}

:where(:not(._reset)):is(caption) {
    margin-bottom: 1rem;

    font-style: italic;
    text-align: left;
    line-height: normal;
}

:where(:not(._reset)):is(hr) {
    border: none;
    border-top: 0.1rem solid var(--color-dimmed);
}

/* Obaluje <table>.
* Přidá posuvník a indikátor, že tabulka pokračuje.
*/
.table-scrollable {
    max-width: -moz-max-content;
    max-width: max-content;

    background: linear-gradient(to right, rgb(var(--color-light-dimmed-rgb)) 30%, rgba(var(--color-light-dimmed-rgb), 0)),
    linear-gradient(to right, rgba(var(--color-light-dimmed-rgb), 0), rgb(var(--color-light-dimmed-rgb)) 70%),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    background-color: var(--color-light-dimmed);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 3.2rem 100%, 3.2rem 100%, 1.5rem 100%, 1.5rem 100%;
    background-attachment: local, local, scroll, scroll;

    overflow: auto;
}

.table-scrollable--white {
    background-image: linear-gradient(to right, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 70%),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    background-color: #fff;
}

table:where(:not(._reset)) {
    border-collapse: collapse;
}

table:where(:not(._reset)) th, table:where(:not(._reset)) td {
    padding: 1rem 1.5rem;
    border: 0.1rem solid var(--color-dimmed);
}

table:where(:not(._reset)) th {
    font-weight: bold;
    text-align: left;

    background-color: var(--color-dimmed);
}

.table-scrollable :where(table:not(._reset)) {
    margin-top: 0;
    margin-bottom: 0;
}

:is(.table-scrollable :where(table:not(._reset))) :where(th,td) {
    min-width: 15ch;
}

/*====================================================================*/
/*------------------------------- FORM -------------------------------*/
/*====================================================================*/

/* Základní globální styly formulářových prvků.
 * Chcete-li upravit konkrétní element, je vhodné pro něj vytvořit
 * samostatnou třídu nebo před selektor tagu přidat selektor komponentu,
 * jehož je element součástí. Přepisování stylů pomocí názvů tagů může
 * způsobit nepředvídatelné výsledky ve zbytku stránky.
 *
 * Výchozí stylování lze zrušit použitím třídy _clear-form.
 */

body * {
    accent-color: var(--_ui-accent-color, var(--color-primary));
}

label:where(:not(._reset)) {
    display: block;
}

button,
select,
textarea,
[type="submit"],
[type="text"],
[type="password"],
[type="search"],
[type="tel"],
[type="email"],
[type="number"],
[type="step"],
[type^="date"],
[type="time"] {
    transition: all var(--transition);
}

:is(button,select,textarea,[type="submit"],[type="text"],[type="password"],[type="search"],[type="tel"],[type="email"],[type="number"],[type="step"],[type^="date"],[type="time"]):is(:hover,:focus) {
    transition-duration: var(--transition-change-duration);
    transition-timing-function: var(--transition-change-easing);
    transition-delay: var(--transition-change-delay);
}

button:active {
    transition-duration: var(--transition-active-duration);
    transition-timing-function: var(--transition-active-easing);
    transition-delay: var(--transition-active-delay);
}

button,
[type="submit"] {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
}

/* Odstraňuje výchozí stylování elementu button. */
._reset:where(button, [type="submit"]) {
    padding: 0;
    margin: 0;

    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    line-height: inherit;

    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    touch-action: manipulation;
}

select,
textarea,
[type="text"],
[type="password"],
[type="search"],
[type="tel"],
[type="email"],
[type="number"],
[type="step"],
[type^="date"],
[type="time"] {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;

    background: none;
    border: none;
    border-radius: 0rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input:where(._reset)::-ms-clear {
    display: none;
}

input:where(._reset)::-ms-reveal {
    display: none;
}

select:where(._reset)::-ms-expand {
    display: none;
}

input[type="number"]:where(._reset, ._no-arrows) {
    -moz-appearance: textfield;
}

input[type="number"]:where(._reset, ._no-arrows)::-webkit-inner-spin-button,
input[type="number"]:where(._reset, ._no-arrows)::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}

select:where(:not(._reset)) {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}

:is(
    select,
    textarea,
    [type="text"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="email"],
    [type="number"],
    [type="step"],
    [type^="date"],
    [type="time"]
):where(:not(._reset)) {
    height: 4.1rem;
    width: 100%;
    padding-left: calc(
        2.6rem
        - 0.3rem * var(--is-tight)
    );
    padding-right: calc(
        2.6rem
        - 0.3rem * var(--is-tight)
    );

    background-color: white;
    border: 0.1rem solid var(--color-light-dimmed-darker);
    border-radius: 2.2rem;
}

@media (hover: hover) {
    :is(select,textarea,[type="text"],[type="password"],[type="search"],[type="tel"],[type="email"],[type="number"],[type="step"],[type^="date"],[type="time"]):where(:not(._reset)):hover {
        border-color: var(--color-primary);
    }
}

:is(select,textarea,[type="text"],[type="password"],[type="search"],[type="tel"],[type="email"],[type="number"],[type="step"],[type^="date"],[type="time"]):where(:not(._reset)):focus {
    border-color: var(--color-primary);
    outline: none;
}

:is(select,textarea,[type="text"],[type="password"],[type="search"],[type="tel"],[type="email"],[type="number"],[type="step"],[type^="date"],[type="time"]):where(:not(._reset))::-moz-placeholder {
    font-style: italic;

    color: #949494;
}

:is(select,textarea,[type="text"],[type="password"],[type="search"],[type="tel"],[type="email"],[type="number"],[type="step"],[type^="date"],[type="time"]):where(:not(._reset))::placeholder {
    font-style: italic;

    color: #949494;
}

:is(textarea):where(:not(._reset)) {
    height: auto;
    min-height: calc(
        20.7rem
        - 2.9rem * var(--is-small)
    );
    padding-top: calc(
        1.3rem
        - 0.1rem * var(--is-tight)
    );
    padding-bottom: calc(
        1.3rem
        - 0.1rem * var(--is-tight)
    );

    resize: vertical;
}

:where(label:not(._reset)) :is(
    select,
    textarea,
    [type="text"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="email"],
    [type="number"],
    [type="step"],
    [type^="date"],
    [type="time"]
) {
    margin-top: 0.5rem;
}

:where(label:not(._reset)) :is(
    [type="checkbox"],
    [type="radio"]
) {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: calc(
        2rem
        - 0.4rem * var(--is-small)
    );
}

fieldset {
    min-width: 0;
}

legend {
    float: left;

    width: 100%;
}

legend + * {
    clear: left;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::file-selector-button {
    font: inherit;
}

::-webkit-file-upload-button {
    font: inherit;

    -webkit-appearance: button;
}

/*====================================================================*/
/*-------------------------------- UI --------------------------------*/
/*====================================================================*/

/* Obecné nastavení UI.
 * (Zejména výběr, focus, interaktivní elementy a světlá a tmavá varianta UI).
 * */

._inverse-ui {
    --_ui-accent-color: initial;
    --_ui-link-color: var(--color-text-inverse);
    --_ui-hover-link-color: var(--color-primary);
    --_ui-active-link-color: var(--color-dimmed);
    --_ui-link-underline-color: rgba(var(--color-text-inverse-rgb), 0.5);
    --_ui-hover-link-underline-color: var(--color-primary);

    color: var(--color-text-inverse);
    background-color: var(--color-dark);
}

._default-ui {
    --_ui-accent-color: initial;
    --_ui-link-color: initial;
    --_ui-hover-link-color: initial;
    --_ui-active-link-color: initial;
    --_ui-link-underline-color: initial;
    --_ui-hover-link-underline-color: initial;

    color: var(--color-text);
}

/* Styly výběru. */
::-moz-selection {
    color: white;
    background-color: #D65A31;
}

::selection {
    color: white;
    background-color: #D65A31;
}

/* Styly zaměřovatelných elementů. */
:focus {
    outline: var(--_ui-focus-outline-width, 0.1rem) var(--_ui-focus-outline-style, dashed) var(--_ui-focus-outline-color, #000c);
    outline-offset: var(--_ui-focus-outline-offset, 0.1rem);
}

:focus-visible {
    outline: var(--_ui-focus-outline-width, 0.2rem) var(--_ui-focus-outline-style, solid) var(--_ui-focus-visible-outline-color, #000);
    outline-width: max(2px, var(--_ui-focus-outline-width, 0rem));
}

._inverse-ui,
._inverse-focus {
    --_ui-focus-outline-color: #fffc;
    --_ui-focus-visible-outline-color: #fff;
}

._default-ui,
._default-focus {
    --_ui-focus-outline-width: initial;
    --_ui-focus-outline-style: initial;
    --_ui-focus-outline-color: initial;
    --_ui-focus-visible-outline-color: initial;
    --_ui-focus-outline-offset: initial;
}

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

[tabindex="-1"]:focus {
    outline: none;
}

/*====================================================================*/
/*------------------------------ HELPERS -----------------------------*/
/*====================================================================*/

/* Pomocné třídy pro vývoj:
 *
 *   1. _center, _over-padding
 *   2. _push-footer
 *   3. _clear-margin, _clear-padding, _clear-offset
 *   4. _auto-size, _full-size
 *   5. _hidden-toggle
 *   6. _icon
 *   7. _transition
 *   8. _container
 *   -> generated.css
 *   9. _preserve-aspect-ratio (16:9, 4:3, ...)
 *  10. (definované v jiných souborech)
 *
 * ! Tyto třídy začínají znakem "_". V HTML se oddělují znakem "/".
 * ! Od utilit (utility.css) se liší tím, že se jedná o jakési
 *   "polotovary" k dalšímu použití ve vývoji a ne nutně konečný
 *   požadovaný stav stylů. (Proto mají vždy co nejnižší specificitu.)
 */

/* Zarovná osbah do středu stránky. */
._center {
    --is-_center-full-width: 0;
    width: 100%;
    max-width: var(--page-max-width);
    padding-left: calc(var(--page-padding) * (1 - var(--is-_center-full-width)));
    padding-right: calc(var(--page-padding) * (1 - var(--is-_center-full-width)));
    margin-left: auto;
    margin-right: auto;
}

/* Roztáhne element přes padding nastavený pomocí _center. */
._over-padding {
    margin-left: calc(-1 * var(--page-padding) * var(--is-_over-padding-active, 0) * (1 - var(--is-_center-full-width, 0)));
    margin-right: calc(-1 * var(--page-padding) * var(--is-_over-padding-active, 0) * (1 - var(--is-_center-full-width, 0)));
}

/* Zajišťuje, aby byla patička vždy dole.
* Patička stránky musí být následující element a mít flex-shrink: 0.
* */
._push-footer {
    flex: 1 0 auto;
}

._push-footer + * {
    flex-shrink: 0;
}

/* Odstraní margin z elementu. */
._clear-margin,
    /* Odstraní margin z přímých potomků elementu. */
._clear-margin-children > *,
    /* Odstraní margin ze všech potomků elementu. */
._clear-margin-nested *,
    /* Odstraní margin z elementu a jeho přímých potomků. */
[class~="_clear-margin+children"],
[class~="_clear-margin+children"] > *,
    /* Odstraní margin z elementu a všech jeho potomků. */
[class~="_clear-margin+nested"],
[class~="_clear-margin+nested"] * {
    margin: 0;
}

/* Odstraní padding z elementu. */
._clear-padding,
    /* Odstraní padding z přímých potomků elementu. */
._clear-padding-children > *,
    /* Odstraní padding ze všech potomků elementu. */
._clear-padding-nested *,
    /* Odstraní padding z elementu a jeho přímých potomků. */
[class~="_clear-padding+children"],
[class~="_clear-padding+children"] > *,
    /* Odstraní padding z elementu a všech jeho potomků. */
[class~="_clear-padding+nested"],
[class~="_clear-padding+nested"] * {
    padding: 0;
}

/* Odstraní padding a margin z elementu. */
._clear-offset,
    /* Odstraní padding a margin z přímých potomků elementu. */
._clear-offset-children > *,
    /* Odstraní padding a margin ze všech potomků elementu. */
._clear-offset-nested *,
    /* Odstraní padding a margin z elementu a jeho přímých potomků. */
[class~="_clear-offset+children"],
[class~="_clear-offset+children"] > *,
    /* Odstraní padding a margin z elementu a všech jeho potomků. */
[class~="_clear-offset+nested"],
[class~="_clear-offset+nested"] * {
    padding: 0;
    margin: 0;
}

/* Automatická velikost (obrázku) nepřesahující kontejner. */
._auto-size {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Roztáhne element přes relativní rodičovský element. */
._full-size {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

/* Vizuálně skryje element.
* Slouží pro skrytí checkbox a radio inputů,
* kde nemá být input vidět a přepíná se labelem. */
._hidden-toggle {
    position: absolute;
    z-index: 2;

    opacity: 0;
}

/* Přidá elementům obecné vlastnosti pro ikony. */
._icon,
._stroke-icon {
    position: relative;

    display: inline-block;

    fill: currentColor;
}

._stroke-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.2rem;
}

/* Univerzální transition.
* Lze přidat jakémukoliv elementu.
* Pokud bude element s třídou .transition uvnitř elementu,
* který má :hover, :focus nebo :active, bude se chovat stejně,
* jako kdyby i tento element měl :hover, :focus nebo :active. */
:is(a, button, ._transition) {
    transition: all var(--transition);
}

:is(a, button, ._transition):is(:hover, :focus),
:where(a, button, ._transition):is(:hover, :focus) :is(a, button, ._transition) {
    transition-duration: var(--transition-change-duration);
    transition-timing-function: var(--transition-change-easing);
    transition-delay: var(--transition-change-delay);
}

._transition:focus-within,
:where(._transition):focus-within :is(a, button, ._transition) {
    transition-duration: var(--transition-change-duration);
    transition-timing-function: var(--transition-change-easing);
    transition-delay: var(--transition-change-delay);
}

:is(a, button, ._transition):active,
:where(a, button, ._transition):active :is(a, button, ._transition) {
    transition-duration: var(--transition-active-duration);
    transition-timing-function: var(--transition-active-easing);
    transition-delay: var(--transition-active-delay);
}

/* Vytvoří z elementu @container */
._container {
    container-type: inline-size;
}

/* _stack (tools/helpers/stack/stack.css): pomocné třídy pro vytvoření konzistentního odsazení obsahu */
/* _novisited (general/typography.css): zruší styly pro navštívené odkazy */
/* _inverse-ui (general/ui.css): upraví styly pro inverzní prvky (většinou tmavá sekce) */
/* _inverse-focus (general/ui.css): upraví barvu zaměření (:focus) pro inverzní prvky (většinou tmavá sekce) */
/* _inverse-selection (general/ui.css): upraví barvu označení pro inverzní prvky (většinou tmavá sekce) */
/* _default-ui, _default-focus, _default-selection (general/ui.css): vrátí prvky do původního stavu */

/*====================================================================*/
/*------------------------------ HELPERS -----------------------------*/
/*====================================================================*/

._underlined-link {
    -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
            text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
}

@media (hover: hover) {
    ._underlined-link:hover {
        color: var(--color-dark);
        -webkit-text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
                text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
    }
}

._underlined-link:active {
    color: var(--color-dark-dimmed);
}

._text-content {
    font-size: calc(
        1.5rem
        - 0.2rem * var(--is-small)
    );
    line-height: calc(
        22 / 15 * (1 - var(--is-small))
        + 19 / 13 * var(--is-small)
    );
}

/*====================================================================*/
/*------------------------------ UTILITY -----------------------------*/
/*====================================================================*/

/* Třídy pro rychlé stylování obsahu:
 *
 * 1. --x-screen, --x-js, --visually-hidden, ...
 * 2. --x-padding*, --x-margin*
 * 3. --uppercase, --originalcase, --nowrap, --text-balance, --(no)hyphens
 * 4. [data-before]::before, ...
 * 5. --br
 * 6. --cover, --contain, ...
 * -> generated.css
 * 7. --x-desktop, --x-tablet, ...
 * 8. --font-primary, ...
 * 9. --color-primary, --bg-primary, ...
 *
 * ! Specificita je vždy zvýšena o ID.
 * ! Třídy začínají znaky "--". V HTML se oddělují znakem "/".
 * ! Od pomocných stylů pro vývoj (helpers.css) se liší tím,
 *   že se jedná o konečný požadovaný stav stylů a tedy
 *   neměly by být přepisovány ani jinak upravovány.
 */

@media screen {

    #rewrite [class~="--x-screen"] {
        display: none;
    }
}

/* Skryje obsah, pokud je zapnutý/vypnutý JavaScript. */
@media all {

    #rewrite.no-js [class~="--x-no-js"],
    #rewrite.js [class~="--x-js"] {
        display: none;
    }

    /* Vyzuálně skryje obsah, ale zůstane přístupný pro čtečky obrazovek apod. */
    #rewrite.no-js [class~="--visually-hidden-no-js"],
    #rewrite.js [class~="--visually-hidden-js"],
    #rewrite [class~="--visually-hidden"] {
        position: absolute;

        height: 1px;
        width: 1px;
        padding: 0;
        margin: -1px;

        white-space: nowrap;

        border: 0;

        clip: rect(0 0 0 0);
        clip-path: polygon(0px 0px, 0px 0px, 0px 0px);

        overflow: hidden;
    }
}

#rewrite [class~="--x-padding"] {
    padding: 0;
}

#rewrite [class~="--x-padding-top"] {
    padding-top: 0;
}

#rewrite [class~="--x-padding-right"] {
    padding-right: 0;
}

#rewrite [class~="--x-padding-bottom"] {
    padding-bottom: 0;
}

#rewrite [class~="--x-padding-left"] {
    padding-left: 0;
}

#rewrite [class~="--x-padding-y"] {
    padding-top: 0;
    padding-bottom: 0;
}

#rewrite [class~="--x-padding-x"] {
    padding-right: 0;
    padding-left: 0;
}

#rewrite [class~="--x-margin"] {
    margin: 0;
}

#rewrite [class~="--x-margin-top"] {
    margin-top: 0;
}

#rewrite [class~="--x-margin-right"] {
    margin-right: 0;
}

#rewrite [class~="--x-margin-bottom"] {
    margin-bottom: 0;
}

#rewrite [class~="--x-margin-left"] {
    margin-left: 0;
}

#rewrite [class~="--x-margin-y"] {
    margin-top: 0;
    margin-bottom: 0;
}

#rewrite [class~="--x-margin-x"] {
    margin-right: 0;
    margin-left: 0;
}

/* Přidá rozdělování slov. */
#rewrite [class~="-"],
#rewrite [class~="--hyphens"] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Zabrání rozdělování slov. */
#rewrite [class~="--nohyphens"],
#rewrite [class~="--nohyphens"] * {
    word-wrap: normal;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
}

#rewrite [class~="--lowercase"] {
    text-transform: lowercase;
}

#rewrite [class~="--uppercase"] {
    text-transform: uppercase;
}

#rewrite [class~="--originalcase"] {
    text-transform: none;
}

#rewrite [class~="--text-left"] {
    text-align: left;
}

#rewrite [class~="--text-center"] {
    text-align: center;
}

#rewrite [class~="--text-right"] {
    text-align: right;
}

#rewrite [class~="--text-balance"] {
    text-wrap: balance;
}

#rewrite [class~="--text-pretty"] {
    text-wrap: pretty;
}

#rewrite [class~="--text-auto"] {
    text-wrap: initial;
}

#rewrite [class~="--nowrap"] {
    white-space: nowrap;
}

#rewrite [class~="--tabular-nums"] {
    font-variant-numeric: tabular-nums;
}

/* Zobrazí inline obsah před/za elementem podle jeho data-atributu.
* Vhodné pro oddělení obsahu.
*
* Příklad: Chceme oddělit položky seznamu znakem |:
* <ul>
*     <li data-after="|">1</li>
*     <li data-after="|">2</li>
*     <li>3</li>
* </ul>
* */
#rewrite [data-before]::before {
    content: attr(data-before);
}

#rewrite [data-after]::after {
    content: attr(data-after);
}

/* Zalomí inline obsah (vhodné pro seznamy, kde není možné použít <br>). */
#rewrite [class~="--br"]::before {
    content: "\A";

    display: block;

    white-space: nowrap;
}

/* Nastaví elementu vlastnost object-fit. */
#rewrite [class~="--cover"] {
    -o-object-fit: cover;
    object-fit: cover;
}

#rewrite [class~="--contain"] {
    -o-object-fit: contain;
    object-fit: contain;
}

#rewrite [class~="--scale-down"] {
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

@charset "UTF-8";
/* Skrytí obsahu podle velikosti viewportu. */
@media (min-width: 77.75em) {
    #rewrite [class~="--x-desktop"] {
        display: none;
    }
}

@media (min-width: 77.75em) {
    #rewrite [class~="--x+=desktop"] {
        display: none;
    }
}

@media (min-width: 94em) {
    #rewrite [class~="--x-desktop-l"] {
        display: none;
    }
}

@media (min-width: 94em) {
    #rewrite [class~="--x+=desktop-l"] {
        display: none;
    }
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
    #rewrite [class~="--x-desktop-s"] {
        display: none;
    }
}

@media (max-width: 93.99375em) {
    #rewrite [class~="--x-=desktop-s"] {
        display: none;
    }
}

@media (min-width: 77.75em) {
    #rewrite [class~="--x+=desktop-s"] {
        display: none;
    }
}

@media (min-width: 48em) and (max-width: 77.74375em) {
    #rewrite [class~="--x-tablet"] {
        display: none;
    }
}

@media (max-width: 77.74375em) {
    #rewrite [class~="--x-=tablet"] {
        display: none;
    }
}

@media (min-width: 48em) {
    #rewrite [class~="--x+=tablet"] {
        display: none;
    }
}

@media (min-width: 64em) and (max-width: 77.74375em) {
    #rewrite [class~="--x-tablet-l"] {
        display: none;
    }
}

@media (max-width: 77.74375em) {
    #rewrite [class~="--x-=tablet-l"] {
        display: none;
    }
}

@media (min-width: 64em) {
    #rewrite [class~="--x+=tablet-l"] {
        display: none;
    }
}

@media (min-width: 48em) and (max-width: 63.99375em) {
    #rewrite [class~="--x-tablet-s"] {
        display: none;
    }
}

@media (max-width: 63.99375em) {
    #rewrite [class~="--x-=tablet-s"] {
        display: none;
    }
}

@media (min-width: 48em) {
    #rewrite [class~="--x+=tablet-s"] {
        display: none;
    }
}

@media (max-width: 47.99375em) {
    #rewrite [class~="--x-mobile"] {
        display: none;
    }
}

@media (max-width: 47.99375em) {
    #rewrite [class~="--x-=mobile"] {
        display: none;
    }
}

@media (min-width: 40em) and (max-width: 47.99375em) {
    #rewrite [class~="--x-mobile-l"] {
        display: none;
    }
}

@media (max-width: 47.99375em) {
    #rewrite [class~="--x-=mobile-l"] {
        display: none;
    }
}

@media (min-width: 40em) {
    #rewrite [class~="--x+=mobile-l"] {
        display: none;
    }
}

@media (min-width: 30em) and (max-width: 39.99375em) {
    #rewrite [class~="--x-mobile-m"] {
        display: none;
    }
}

@media (max-width: 39.99375em) {
    #rewrite [class~="--x-=mobile-m"] {
        display: none;
    }
}

@media (min-width: 30em) {
    #rewrite [class~="--x+=mobile-m"] {
        display: none;
    }
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
    #rewrite [class~="--x-mobile-s"] {
        display: none;
    }
}

@media (max-width: 29.99375em) {
    #rewrite [class~="--x-=mobile-s"] {
        display: none;
    }
}

@media (min-width: 23.4375em) {
    #rewrite [class~="--x+=mobile-s"] {
        display: none;
    }
}

@media (max-width: 23.43125em) {
    #rewrite [class~="--x-mobile-xs"] {
        display: none;
    }
}

@media (max-width: 23.43125em) {
    #rewrite [class~="--x-=mobile-xs"] {
        display: none;
    }
}

/* Písma */
#rewrite [class~="--font-primary"] {
    font-family: var(--font-primary);
}

#rewrite [class~="--font-secondary"] {
    font-family: var(--font-secondary);
}

#rewrite [class~="--font-text"] {
    font-family: var(--font-text);
}

#rewrite [class~="--font-title"] {
    font-family: var(--font-title);
}

/* Barvy */
#rewrite [class~="--color-primary"],
#rewrite [class~="--hf-color-primary"]:hover,
#rewrite [class~="--hf-color-primary"]:focus {
    color: var(--color-primary);
}

#rewrite [class~="--bg-primary"],
#rewrite [class~="--hf-bg-primary"]:hover,
#rewrite [class~="--hf-bg-primary"]:focus {
    background-color: var(--color-primary);
}

#rewrite [class~="--bd-primary"],
#rewrite [class~="--hf-bd-primary"]:hover,
#rewrite [class~="--hf-bd-primary"]:focus {
    border-color: var(--color-primary);
}

#rewrite [class~="--color-light-dimmed"],
#rewrite [class~="--hf-color-light-dimmed"]:hover,
#rewrite [class~="--hf-color-light-dimmed"]:focus {
    color: var(--color-light-dimmed);
}

#rewrite [class~="--bg-light-dimmed"],
#rewrite [class~="--hf-bg-light-dimmed"]:hover,
#rewrite [class~="--hf-bg-light-dimmed"]:focus {
    background-color: var(--color-light-dimmed);
}

#rewrite [class~="--bd-light-dimmed"],
#rewrite [class~="--hf-bd-light-dimmed"]:hover,
#rewrite [class~="--hf-bd-light-dimmed"]:focus {
    border-color: var(--color-light-dimmed);
}

#rewrite [class~="--color-dimmed"],
#rewrite [class~="--hf-color-dimmed"]:hover,
#rewrite [class~="--hf-color-dimmed"]:focus {
    color: var(--color-dimmed);
}

#rewrite [class~="--bg-dimmed"],
#rewrite [class~="--hf-bg-dimmed"]:hover,
#rewrite [class~="--hf-bg-dimmed"]:focus {
    background-color: var(--color-dimmed);
}

#rewrite [class~="--bd-dimmed"],
#rewrite [class~="--hf-bd-dimmed"]:hover,
#rewrite [class~="--hf-bd-dimmed"]:focus {
    border-color: var(--color-dimmed);
}

#rewrite [class~="--color-dark-dimmed"],
#rewrite [class~="--hf-color-dark-dimmed"]:hover,
#rewrite [class~="--hf-color-dark-dimmed"]:focus {
    color: var(--color-dark-dimmed);
}

#rewrite [class~="--bg-dark-dimmed"],
#rewrite [class~="--hf-bg-dark-dimmed"]:hover,
#rewrite [class~="--hf-bg-dark-dimmed"]:focus {
    background-color: var(--color-dark-dimmed);
}

#rewrite [class~="--bd-dark-dimmed"],
#rewrite [class~="--hf-bd-dark-dimmed"]:hover,
#rewrite [class~="--hf-bd-dark-dimmed"]:focus {
    border-color: var(--color-dark-dimmed);
}

#rewrite [class~="--color-dark"],
#rewrite [class~="--hf-color-dark"]:hover,
#rewrite [class~="--hf-color-dark"]:focus {
    color: var(--color-dark);
}

#rewrite [class~="--bg-dark"],
#rewrite [class~="--hf-bg-dark"]:hover,
#rewrite [class~="--hf-bg-dark"]:focus {
    background-color: var(--color-dark);
}

#rewrite [class~="--bd-dark"],
#rewrite [class~="--hf-bd-dark"]:hover,
#rewrite [class~="--hf-bd-dark"]:focus {
    border-color: var(--color-dark);
}

#rewrite [class~="--color-dark-strong"],
#rewrite [class~="--hf-color-dark-strong"]:hover,
#rewrite [class~="--hf-color-dark-strong"]:focus {
    color: var(--color-dark-strong);
}

#rewrite [class~="--bg-dark-strong"],
#rewrite [class~="--hf-bg-dark-strong"]:hover,
#rewrite [class~="--hf-bg-dark-strong"]:focus {
    background-color: var(--color-dark-strong);
}

#rewrite [class~="--bd-dark-strong"],
#rewrite [class~="--hf-bd-dark-strong"]:hover,
#rewrite [class~="--hf-bd-dark-strong"]:focus {
    border-color: var(--color-dark-strong);
}

#rewrite [class~="--color-text"],
#rewrite [class~="--hf-color-text"]:hover,
#rewrite [class~="--hf-color-text"]:focus {
    color: var(--color-text);
}

#rewrite [class~="--bg-text"],
#rewrite [class~="--hf-bg-text"]:hover,
#rewrite [class~="--hf-bg-text"]:focus {
    background-color: var(--color-text);
}

#rewrite [class~="--bd-text"],
#rewrite [class~="--hf-bd-text"]:hover,
#rewrite [class~="--hf-bd-text"]:focus {
    border-color: var(--color-text);
}

#rewrite [class~="--color-text-inverse"],
#rewrite [class~="--hf-color-text-inverse"]:hover,
#rewrite [class~="--hf-color-text-inverse"]:focus {
    color: var(--color-text-inverse);
}

#rewrite [class~="--bg-text-inverse"],
#rewrite [class~="--hf-bg-text-inverse"]:hover,
#rewrite [class~="--hf-bg-text-inverse"]:focus {
    background-color: var(--color-text-inverse);
}

#rewrite [class~="--bd-text-inverse"],
#rewrite [class~="--hf-bd-text-inverse"]:hover,
#rewrite [class~="--hf-bd-text-inverse"]:focus {
    border-color: var(--color-text-inverse);
}

@charset "UTF-8";
.blueimp-gallery, .blueimp-gallery > .slides > .slide > .slide-content, .blueimp-gallery > .slides > .slide > .slide-content > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .2s linear;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden
}

.blueimp-gallery > .slides > .slide > .slide-content, .blueimp-gallery > .slides > .slide > .slide-content > img {
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    opacity: 1
}

.blueimp-gallery {
    position: fixed;
    z-index: 999999;
    overflow: hidden;
    background: #000;
    opacity: 0;
    display: none;
    direction: ltr;
    touch-action: pinch-zoom
}

.blueimp-gallery-carousel {
    position: relative;
    z-index: auto;
    margin: 1em auto;
    padding-bottom: 56.25%;
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    touch-action: pan-y pinch-zoom;
    display: block
}

.blueimp-gallery-display {
    display: block;
    opacity: 1
}

.blueimp-gallery > .slides {
    position: relative;
    height: 100%;
    overflow: hidden
}

.blueimp-gallery-carousel > .slides {
    position: absolute
}

.blueimp-gallery > .slides > .slide {
    visibility: hidden;
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}

.blueimp-gallery > .slides > .slide-active, .blueimp-gallery > .slides > .slide-next, .blueimp-gallery > .slides > .slide-prev {
    visibility: visible
}

.blueimp-gallery > .slides > .slide-loading {
    background: url(/images/loading.gif?f028c722a78e240e77af95c62a178b57) center no-repeat;
    background-size: 64px 64px
}

.blueimp-gallery-smil > .slides > .slide-loading {
    background-image: url(/images/loading.svg?1f943664b16f224e31567b4105f6979a)
}

.blueimp-gallery > .slides > .slide-loading > .slide-content {
    opacity: 0
}

.blueimp-gallery > .slides > .slide-error {
    background: url(/images/error.png?3bafc2f184a539e0dede926f31e6fbce) center no-repeat
}

.blueimp-gallery-svgasimg > .slides > .slide-error {
    background-image: url(/images/error.svg?f75c874514981ebe761c8eec1450629a)
}

.blueimp-gallery > .slides > .slide-error > .slide-content {
    display: none
}

.blueimp-gallery-display > .next, .blueimp-gallery-display > .prev {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 8px;
    height: 20px;
    padding: 10px 14px 10px 18px;
    margin-top: -23px;
    box-sizing: content-box;
    background: #222 url(/images/prev.png?568f8dfeccd08edb957a9f4a4512c553) center no-repeat;
    background-color: rgba(0, 0, 0, .5);
    border: 3px solid #fff;
    border-radius: 30px;
    opacity: .5;
    cursor: pointer;
    display: none
}

.blueimp-gallery-display > .next {
    right: 15px;
    left: auto;
    background-image: url(/images/next.png?1289eefa54d4f2a5aa44ab5b445cd611)
}

.blueimp-gallery-svgasimg > .prev {
    background-image: url(/images/prev.svg?8d15baa0fbed5d3bb5e1fe68cd1a0093)
}

.blueimp-gallery-svgasimg > .next {
    background-image: url(/images/next.svg?5b3eec6fa6c8caebbf4b72f45fb6910d)
}

.blueimp-gallery-display > .close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: url(/images/close.png?2d9dfafe45b3b0850f4bf433dd1cb621) center no-repeat;
    opacity: .8;
    cursor: pointer;
    display: none
}

.blueimp-gallery-svgasimg > .close {
    background-image: url(/images/close.svg?a602bec812b38bf336f3149fdffcf74e)
}

.blueimp-gallery > .title {
    position: absolute;
    top: 15px;
    left: 15px;
    margin: 0 60px 0 0;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    text-shadow: 0 0 2px #000;
    opacity: .8;
    display: none
}

.blueimp-gallery-display > .play-pause {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 30px;
    height: 30px;
    background: url(/images/play-pause.png?208696f4ab3cc7349f91edf4f08332a3) 0 0 no-repeat;
    cursor: pointer;
    opacity: .5;
    display: none
}

.blueimp-gallery-svgasimg > .play-pause {
    background-image: url(/images/play-pause.svg?ec3526013b9f64376048c82304854c82)
}

.blueimp-gallery-playing > .play-pause {
    background-position: -30px 0
}

.blueimp-gallery-controls > .close, .blueimp-gallery-controls > .next, .blueimp-gallery-controls > .play-pause, .blueimp-gallery-controls > .prev, .blueimp-gallery-controls > .title {
    display: block;
    transform: translateZ(0)
}

.blueimp-gallery-left > .prev, .blueimp-gallery-right > .next, .blueimp-gallery-single > .next, .blueimp-gallery-single > .play-pause, .blueimp-gallery-single > .prev {
    display: none
}

.blueimp-gallery > .close, .blueimp-gallery > .next, .blueimp-gallery > .play-pause, .blueimp-gallery > .prev, .blueimp-gallery > .slides > .slide > .slide-content {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.blueimp-gallery > .close:hover, .blueimp-gallery > .next:hover, .blueimp-gallery > .play-pause:hover, .blueimp-gallery > .prev:hover, .blueimp-gallery > .title:hover {
    color: #fff;
    opacity: 1
}

* + html .blueimp-gallery > .slides > .slide {
    min-height: 300px
}

* + html .blueimp-gallery > .slides > .slide > .slide-content {
    position: relative
}

* + html .blueimp-gallery > .slides > .slide > .slide-content > img {
    position: relative
}

@supports ((-o-object-fit: contain) or (object-fit: contain)) {
    .blueimp-gallery-contain > .slides > .slide > .slide-content, .blueimp-gallery-contain > .slides > .slide > .slide-content > img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }
}

@media (prefers-color-scheme: light) {
    .blueimp-gallery-carousel {
        background: #fff
    }
}

.blueimp-gallery > .indicator {
    position: absolute;
    top: auto;
    right: 15px;
    bottom: 15px;
    left: 15px;
    margin: 0 40px;
    padding: 0;
    list-style: none;
    text-align: center;
    line-height: 10px;
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.blueimp-gallery > .indicator > li {
    display: inline-block;
    position: relative;
    width: 9px;
    height: 9px;
    margin: 6px 3px 0 3px;
    box-sizing: content-box;
    border: 1px solid transparent;
    background: #ccc;
    background: rgba(255, 255, 255, .25) center no-repeat;
    border-radius: 5px;
    box-shadow: 0 0 2px #000;
    opacity: .5;
    cursor: pointer
}

* + html .blueimp-gallery > .indicator > li {
    display: inline
}

.blueimp-gallery > .indicator > .active, .blueimp-gallery > .indicator > li:hover {
    background-color: #fff;
    border-color: #fff;
    opacity: 1
}

.blueimp-gallery > .indicator > li:after {
    opacity: 0;
    display: block;
    position: absolute;
    content: '';
    top: -5em;
    left: 4px;
    width: 75px;
    height: 75px;
    transition: transform .6s ease-out, opacity .4s ease-out;
    transform: translateX(-50%) translateY(0) translateZ(0);
    pointer-events: none
}

.blueimp-gallery > .indicator > li:hover:after {
    opacity: 1;
    border-radius: 50%;
    background: inherit;
    transform: translateX(-50%) translateY(-5px) translateZ(0)
}

.blueimp-gallery > .indicator > .active:after {
    display: none
}

.blueimp-gallery-controls > .indicator {
    display: block;
    transform: translateZ(0)
}

.blueimp-gallery-single > .indicator {
    display: none
}

.blueimp-gallery > .slides > .slide > .video-content > .video-cover, .blueimp-gallery > .slides > .slide > .video-content > iframe, .blueimp-gallery > .slides > .slide > .video-content > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none
}

.blueimp-gallery > .slides > .slide > .video-content > .video-cover {
    background: center no-repeat;
    background-size: contain
}

.blueimp-gallery > .slides > .slide > .video-iframe > .video-cover {
    background-color: #000;
    background-color: rgba(0, 0, 0, .7)
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: -64px auto 0;
    width: 128px;
    height: 128px;
    background: url(/images/video-play.png?d3124d015b69e2ed4c99430b589d41ca) center no-repeat;
    opacity: .8;
    cursor: pointer
}

.blueimp-gallery-svgasimg > .slides > .slide > .video-content > .video-play {
    background-image: url(/images/video-play.svg?4213179296216c65e001ced3d8a66993)
}

.blueimp-gallery > .slides > .slide > .video-playing > .video-cover, .blueimp-gallery > .slides > .slide > .video-playing > .video-play {
    display: none
}

.blueimp-gallery > .slides > .slide > .video-loading > .video-play {
    background: url(/images/loading.gif?f028c722a78e240e77af95c62a178b57) center no-repeat;
    background-size: 64px 64px
}

.blueimp-gallery-smil > .slides > .slide > .video-loading > .video-play {
    background-image: url(/images/loading.svg?1f943664b16f224e31567b4105f6979a)
}

* + html .blueimp-gallery > .slides > .slide > .video-content {
    height: 100%
}

* + html .blueimp-gallery > .slides > .slide > .video-content > .video-play {
    left: 50%;
    margin-left: -64px
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play:hover {
    opacity: 1
}

@keyframes splide-loading {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.splide__track--fade > .splide__list > .splide__slide {
    margin: 0 !important;
    opacity: 0;
    z-index: 0
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
    opacity: 1;
    z-index: 1
}

.splide--rtl {
    direction: rtl
}

.splide__track--ttb > .splide__list {
    display: block
}

.splide__container {
    box-sizing: border-box;
    position: relative
}

.splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
    display: block
}

.splide__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events: none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto
}

.splide:not(.is-overflow) .splide__pagination {
    display: none
}

.splide__progress__bar {
    width: 0
}

.splide {
    position: relative;
    visibility: hidden
}

.splide.is-initialized, .splide.is-rendered {
    visibility: visible
}

.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position: relative
}

.splide__slide img {
    vertical-align: bottom
}

.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: transparent;
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
    display: none
}

.splide__toggle.is-active .splide__toggle__pause {
    display: inline
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0
}

.noUi-target, .noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    touch-action: none;
    -moz-user-select: none;
    user-select: none;
    box-sizing: border-box
}

.noUi-target {
    position: relative
}

.noUi-base, .noUi-connects {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1
}

.noUi-connects {
    overflow: hidden;
    z-index: 0
}

.noUi-connect, .noUi-origin {
    will-change: transform;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    transform-origin: 0 0;
    transform-style: flat
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    left: 0;
    right: auto
}

.noUi-vertical .noUi-origin {
    top: -100%;
    width: 0
}

.noUi-horizontal .noUi-origin {
    height: 0
}

.noUi-handle {
    backface-visibility: hidden;
    position: absolute
}

.noUi-touch-area {
    height: 100%;
    width: 100%
}

.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
    transition: transform .3s
}

.noUi-state-drag * {
    cursor: inherit !important
}

.noUi-horizontal {
    height: 18px
}

.noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    right: -17px;
    top: -6px
}

.noUi-vertical {
    width: 18px
}

.noUi-vertical .noUi-handle {
    width: 28px;
    height: 34px;
    right: -6px;
    bottom: -17px
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    left: -17px;
    right: auto
}

.noUi-target {
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #D3D3D3;
    box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB
}

.noUi-connects {
    border-radius: 3px
}

.noUi-connect {
    background: #3FB8AF
}

.noUi-draggable {
    cursor: ew-resize
}

.noUi-vertical .noUi-draggable {
    cursor: ns-resize
}

.noUi-handle {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #FFF;
    cursor: default;
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB
}

.noUi-active {
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB
}

.noUi-handle:after, .noUi-handle:before {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #E8E7E6;
    left: 14px;
    top: 6px
}

.noUi-handle:after {
    left: 17px
}

.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before {
    width: 14px;
    height: 1px;
    left: 6px;
    top: 14px
}

.noUi-vertical .noUi-handle:after {
    top: 17px
}

[disabled] .noUi-connect {
    background: #B8B8B8
}

[disabled] .noUi-handle, [disabled].noUi-handle, [disabled].noUi-target {
    cursor: not-allowed
}

.noUi-pips, .noUi-pips * {
    box-sizing: border-box
}

.noUi-pips {
    position: absolute;
    color: #999
}

.noUi-value {
    position: absolute;
    white-space: nowrap;
    text-align: center
}

.noUi-value-sub {
    color: #ccc;
    font-size: 10px
}

.noUi-marker {
    position: absolute;
    background: #CCC
}

.noUi-marker-sub {
    background: #AAA
}

.noUi-marker-large {
    background: #AAA
}

.noUi-pips-horizontal {
    padding: 10px 0;
    height: 80px;
    top: 100%;
    left: 0;
    width: 100%
}

.noUi-value-horizontal {
    transform: translate(-50%, 50%)
}

.noUi-rtl .noUi-value-horizontal {
    transform: translate(50%, 50%)
}

.noUi-marker-horizontal.noUi-marker {
    margin-left: -1px;
    width: 2px;
    height: 5px
}

.noUi-marker-horizontal.noUi-marker-sub {
    height: 10px
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 15px
}

.noUi-pips-vertical {
    padding: 0 10px;
    height: 100%;
    top: 0;
    left: 100%
}

.noUi-value-vertical {
    transform: translate(0, -50%);
    padding-left: 25px
}

.noUi-rtl .noUi-value-vertical {
    transform: translate(0, 50%)
}

.noUi-marker-vertical.noUi-marker {
    width: 5px;
    height: 2px;
    margin-top: -1px
}

.noUi-marker-vertical.noUi-marker-sub {
    width: 10px
}

.noUi-marker-vertical.noUi-marker-large {
    width: 15px
}

.noUi-tooltip {
    display: block;
    position: absolute;
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    background: #fff;
    color: #000;
    padding: 5px;
    text-align: center;
    white-space: nowrap
}

.noUi-horizontal .noUi-tooltip {
    transform: translate(-50%, 0);
    left: 50%;
    bottom: 120%
}

.noUi-vertical .noUi-tooltip {
    transform: translate(0, -50%);
    top: 50%;
    right: 120%
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
    transform: translate(50%, 0);
    left: auto;
    bottom: 10px
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
    transform: translate(0, -18px);
    top: auto;
    right: 28px
}

/*====================================================================*/
/*------------------------------- FORM -------------------------------*/
/*====================================================================*/

/*odstraní zabarvení automaticky vyplněných polí v Chromu*/
.form :is(
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="range"],
    input[type="month"],
    input[type="week"],
    input[type="file"],
    input[type="url"],
    input[type^="date"],
    input[type="time"]
):-webkit-autofill {
    -webkit-text-fill-color: #000;
    animation-name: form__clear-autofill;
    animation-fill-mode: both;
}

@keyframes form__clear-autofill {
    to {
        box-shadow: inset 0rem 0rem 0rem 1000vmax var(--color-light-dimmed);
    }
}

/*/*/

.form {
    --_form-column-gap: calc(
        1.6rem
        - 0.4rem * var(--is-medium)
        - 0.2rem * var(--is-tight)
    );
    --_form-item-space: calc(
        2rem
        - 0.4rem * var(--is-medium)
        - 0.9rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.form__table {
    width: 100%;

    container-type: inline-size;
}

@media (max-width: 29.99375em) {

    .form__table {
        width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

* + .form__row {
    border-top: 0.4rem solid transparent;
}

.form__table-info {
    width: 0.1%;
    padding-left: 1.5em;

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;
}

.form__columns {
    display: grid;
    grid-template-columns: repeat(calc(2 - 1 * var(--is-small)), 1fr);
    -moz-column-gap: var(--_form-column-gap);
    column-gap: var(--_form-column-gap);
}

.form__item {
    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    text-align: left;

    color: #000;
}

@media (max-width: 22.49375em) {

    .form__item {
        font-size: 1.3rem;
    }
}

:where(.form__table) .form__item {
    position: relative;
}

.form__item:where(.form__item--text,.form__item--textarea,.form__item--select) {
    --_padding-inline: calc(
        2.6rem
        - 0.2rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (max-width: 22.49375em) {

    .form__item:where(.form__item--text,.form__item--textarea,.form__item--select) {
        --_padding-inline: 1.6rem;
    }
}

:where(.form__columns) .form__item:where(.form__item--text,.form__item--select), * + .form__item:where(.form__item--text,.form__item--select) {
    margin-top: var(--_form-item-space);
}

:where(.form__columns) .form__item:where(.form__item--textarea), * + .form__item:where(.form__item--textarea) {
    margin-top: calc(
        3rem
        - 0.4rem * var(--is-medium)
        - 1.9rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

* + .form__item:where(.form__item--checkbox,.form__item--radio) {
    margin-top: 0.4rem;
}

.form__label {
    font-size: inherit;
    text-align: left;
}

.form__input {
    min-width: 0;

    font-size: inherit;
    text-align: left;

    color: inherit;
}

/*--------------------------------------------------------------------*/
/*------------------------------- TEXT -------------------------------*/
/*--------------------------------------------------------------------*/

:where(.form__item--text) .form__ui {
    position: relative;

    display: grid;
    grid-template-columns: fit-content(58%) minmax(42%, 1fr);

    height: 4.1rem;
    padding-left: var(--_padding-inline);
    padding-right: var(--_padding-inline);

    background-color: var(--color-light-dimmed);
    border: 0.1rem solid var(--color-light-dimmed);
    border-radius: 1000vmax;
}

@media (max-width: 29.99375em) {

    :where(.form__item--text) .form__ui {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (hover: hover) {
    :is(:where(.form__item--text) .form__ui):hover {
        border-color: var(--color-dark-dimmed);
    }
}

:is(:where(.form__item--text) .form__ui):has([aria-invalid="true"]) {
    border-color: var(--color-primary);
}

.is-invalid:where(.form__item) :is(:where(.form__item--text) .form__ui) {
    border-color: var(--color-primary);
}

:is(:where(.form__item--text) .form__ui):focus-within {
    border-color: var(--color-dark);
}

:where(.form__item--text) .form__label {
    align-self: center;

    padding-right: 1em;

    white-space: nowrap;

    text-overflow: ellipsis;
    overflow: hidden;
}

:is(:where(.form__item--text) .form__label)::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

:where(.form__item--text) .form__input {
    z-index: 0;
    align-self: center;

    height: 3.7rem;

    outline: none;
}

:is(:where(.form__item--text) .form__input):where(:only-child) {
    grid-column: 1 / -1;
}

/*--------------------------------------------------------------------*/
/*------------------------------ SELECT ------------------------------*/
/*--------------------------------------------------------------------*/

:where(.form__item--select) .form__input {
    width: 100%;
    height: 4.1rem;
    padding-right: calc((1.8rem * 2) + 1rem);
    padding-left: var(--_padding-inline);

    background-color: var(--color-light-dimmed);
    background-image: url("data:image/svg+xml, %3Csvg fill='%23000' width='10' height='6' viewBox='-0.6 -0.1 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1.25708' width='1.77766' height='6.22179' transform='rotate(-45 0 1.25708)' /%3E%3Crect x='4.39941' y='5.65649' width='1.77766' height='6.22179' transform='rotate(-135 4.39941 5.65649)' /%3E%3C/svg%3E%0A");
    background-size: 1rem 0.6rem;
    background-position: calc(100% - 1.8rem) 50%;
    background-repeat: no-repeat;
    border: 0.1rem solid var(--color-light-dimmed);
    border-radius: 1000vmax;
    outline: none;
}

@media (max-width: 29.99375em) {

    :where(.form__item--select) .form__input {
        width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (hover: hover) {
    :is(:where(.form__item--select) .form__input):hover {
        border-color: var(--color-dark-dimmed);
    }
}

[aria-invalid="true"]:is(:where(.form__item--select) .form__input) {
    border-color: var(--color-primary);
}

:is(:where(.form__item--select) .form__input):focus-within {
    border-color: var(--color-dark);
}

/*--------------------------------------------------------------------*/
/*------------------------------- TEXTAREA ---------------------------*/
/*--------------------------------------------------------------------*/

:where(.form__item--textarea) .form__ui {
    position: relative;

    display: grid;

    background-color: var(--color-light-dimmed);
    border: 0.1rem solid var(--color-light-dimmed);
    border-radius: 2.2rem;
}

@media (max-width: 29.99375em) {

    :where(.form__item--textarea) .form__ui {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (hover: hover) {
    :is(:where(.form__item--textarea) .form__ui):hover {
        border-color: var(--color-dark-dimmed);
    }
}

:is(:where(.form__item--textarea) .form__ui):has([aria-invalid="true"]) {
    border-color: var(--color-primary);
}

.is-invalid:where(.form__item) :is(:where(.form__item--textarea) .form__ui) {
    border-color: var(--color-primary);
}

:is(:where(.form__item--textarea) .form__ui):focus-within {
    border-color: var(--color-dark);
}

:where(.form__item--textarea) .form__label {
    display: block;

    padding-left: var(--_padding-inline);

    padding-right: var(--_padding-inline);
    padding-top: calc(
        1.7rem
        - 0.2rem * var(--is-small)
    );
    padding-bottom: 0.8rem;

    white-space: nowrap;

    text-overflow: ellipsis;
    overflow: hidden;
}

:where(.form__item--textarea) .form__input {
    width: 100%;
    min-height: calc(
        7.6rem
        - 2.2rem * var(--is-small)
    );
    padding-left: var(--_padding-inline);
    padding-right: var(--_padding-inline);
    resize: vertical;

    outline: none;

    transition: none;
}

/*--------------------------------------------------------------------*/
/*--------------------------- CHECKBOX / RADIO -----------------------*/
/*--------------------------------------------------------------------*/

:where(.form__item--checkbox,.form__item--radio) .form__ui {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: baseline;
    gap: 2.2rem;

    cursor: pointer;
}

:is(:where(.form__item--checkbox,.form__item--radio) .form__ui):active {
    color: var(--color-dark-dimmed);
}

:where(.form__item--checkbox,.form__item--radio) .form__input {
    position: relative;
    top: 0.125em;
    z-index: 2;

    width: 1.4rem;
    height: 1.4rem;
}

:where(.form__item--checkbox,.form__item--radio) .form__label {
    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    cursor: pointer;
}

:where(.form__table) :is(:where(.form__item--checkbox,.form__item--radio) .form__label)::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    width: 100cqw;
    height: 100%;
}

:where(.form__item--checkbox,.form__item--radio) .form__label--with-icon {
    --_icon-size: calc(
        3.2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    display: flex;
    align-items: baseline;

    padding-left: calc(
        var(--_icon-size)
        + (1.8rem
        - 1.0rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.6rem * var(--is-tight))
    );
}

:where(.form__item--checkbox,.form__item--radio) .form__label-icon {
    position: absolute;
    top: -0.4rem;
    top: calc(0.5lh - var(--_icon-size) / 2);
    left: calc(
        1.4rem
        + (2.2rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.4rem * var(--is-tight))
    );

    -o-object-fit: scale-down;

    object-fit: scale-down;
    width: var(--_icon-size);
    height: var(--_icon-size);

    image-rendering: crisp-edges;
}


/*====================================================================*/
/*---------------------------- VALIDATOR -----------------------------*/
/*====================================================================*/

.form__error {
    padding: 0;
    margin: 0;
    margin-top: 0.4rem;

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    font-weight: 600;
    text-align: left;

    color: var(--color-primary);
    opacity: 1;
    visibility: visible;

    overflow: hidden;

    transition: padding-top var(--transition-show), padding-bottom var(--transition-show), margin-top var(--transition-show), margin-bottom var(--transition-show), border-top-width var(--transition-show), border-bottom-width var(--transition-show), line-height var(--transition-show), opacity var(--transition-show);
}

:where(.form__item--checkbox,.form__item--radio) .form__error {
    margin-top: 0.2rem;
}

:where(.form__table) + .form__error {
    margin-top: 0.6rem;
}

.form__error:not([aria-hidden="false"]) {
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-top: 0rem;
    margin-bottom: 0rem;

    line-height: 0;

    border-top-width: 0rem;
    border-bottom-width: 0rem;
    opacity: 0;
    visibility: hidden;

    transition: padding-top var(--transition-hide), padding-bottom var(--transition-hide), margin-top var(--transition-hide), margin-bottom var(--transition-hide), line-height var(--transition-hide), border-top-width var(--transition-hide), border-bottom-width var(--transition-hide), opacity var(--transition-hide), visibility 0s linear var(--transition-hide-duration);
}

/*====================================================================*/
/*------------------------- BLUEIMP-GALLERY --------------------------*/
/*====================================================================*/

/* Základní galerie / lightbox pro obrázky a videa.
 * Založeno na: https://github.com/blueimp/Gallery.
 *
 * Používá se stejně jako při použití jQuery pluginu této knihovny:
 * Tedy odkazy musí mít atribut "data-gallery" jehož hodnotou je
 * "id" galerie. Nadřazenému elementu je možné přidat atribut
 * "data-gallery-group" a tím seskupit odkazy se stejným "id".
 * Více informaci: https://github.com/blueimp/Gallery a dodaný manuál.
 *
 * Pro použití je potřeba do stránky importovat soubory knihovny:
 * public/libs/blueimpGallery/js/blueimp-gallery.min.js
 * public/libs/blueimpGallery/css/blueimp-gallery.min.css
 *
 * A také vlastní JS Modul a CSS komponent:
 * css/components/blueimp-gallery/blueimp-gallery.css
 * js/modules/BlueimpGallery.js
 *
 * Modul je potřeba inicializovat metodou "init".
 *
 * Pomocí Custom Properties v selektoru "#blueimp-gallery" lze
 * upravit velikost a styl prvků.
 *  */

#blueimp-gallery {
    /* Velikost prvků */
    --size: 1.75;
    /* "Tučnost prvků" */
    --weight: 3;
    /* Násobič velikosti prvků */
    --media-k: 1;
}

@media (max-width: 63.99375em) {

    #blueimp-gallery {
        --media-k: 0.875;
    }
}

@media (max-width: 47.99375em) {

    #blueimp-gallery {
        --media-k: 0.75;
    }
}

@media (max-width: 39.99375em) {

    #blueimp-gallery {
        --media-k: 0.666666;
    }
}

@media (max-width: 29.99375em) {

    #blueimp-gallery {
        --media-k: 0.625;
    }
}

@media (max-width: 22.49375em) {

    #blueimp-gallery {
        --media-k: 0.5;
    }
}

#blueimp-gallery {
    --_size: var(--size) *var(--media-k);

    display: none;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    will-change: opacity;
}

.blueimp-gallery svg {
    overflow: visible;
}

.blueimp-gallery > .prev,
.blueimp-gallery > .next,
.blueimp-gallery > .close,
.blueimp-gallery > .title,
.blueimp-gallery > .title,
.blueimp-gallery > .play-pause {
    animation: blueimp-hide 0.3s ease 0s 1 forwards;
    will-change: opacity, contents;
}

@supports (animation: name) {

    .blueimp-gallery > .prev,
    .blueimp-gallery > .next,
    .blueimp-gallery > .close,
    .blueimp-gallery > .title,
    .blueimp-gallery > .play-pause {
        display: block;

        pointer-events: none;
    }
}

.blueimp-gallery-controls > .prev,
.blueimp-gallery-controls > .next,
.blueimp-gallery-controls > .close,
.blueimp-gallery-controls > .title,
.blueimp-gallery-controls > .play-pause {
    animation: blueimp-show 0.3s ease 0s 1 backwards;
}

@supports (animation: name) {

    .blueimp-gallery-controls > .prev,
    .blueimp-gallery-controls > .next,
    .blueimp-gallery-controls > .close,
    .blueimp-gallery-controls > .title,
    .blueimp-gallery-controls > .play-pause {
        pointer-events: auto;
    }
}

@keyframes blueimp-hide {
    from {
        display: block;
    }
    to {
        display: none;

        opacity: 0;
    }
}

@keyframes blueimp-show {
    from {
        display: block;

        opacity: 0;
    }
    to {
        display: none;
    }
}

.blueimp-gallery > .prev:focus,
.blueimp-gallery > .next:focus,
.blueimp-gallery > .close:focus,
.blueimp-gallery > .title:focus,
.blueimp-gallery > .play-pause:focus {
    opacity: 1;
}

.blueimp-gallery > .close,
.blueimp-gallery > .prev,
.blueimp-gallery > .next {
    padding: 0;
    margin: 0;

    font-size: 0;

    color: #fff;
    background: rgba(0, 0, 0, 0);
    border: 0;
    border-radius: 0;
    opacity: 0.65;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.blueimp-gallery > .close::-moz-focus-inner,
.blueimp-gallery > .prev::-moz-focus-inner,
.blueimp-gallery > .next::-moz-focus-inner {
    padding: 0;
    margin: 0;
}

.blueimp-gallery .video-content .video-play:focus,
.blueimp-gallery > .close:focus,
.blueimp-gallery > .prev:focus,
.blueimp-gallery > .next:focus {
    outline: none;
}

.blueimp-gallery > .close ._icon,
.blueimp-gallery > .prev ._icon,
.blueimp-gallery > .next ._icon {
    width: inherit;
    height: inherit;

    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: square;
    outline-offset: 0.2rem;

    pointer-events: none;
}

.blueimp-gallery .video-content .video-play:focus-visible,
.blueimp-gallery > .close:focus-visible ._icon,
.blueimp-gallery > .prev:focus-visible ._icon,
.blueimp-gallery > .next:focus-visible ._icon {
    outline: 0.2rem solid rgb(255, 255, 255);
    outline-offset: 0.2rem;
}

.blueimp-gallery-single > .prev,
.blueimp-gallery-single > .next {
    display: none;
}

.blueimp-gallery > .prev,
.blueimp-gallery > .next {
    top: 0%;

    width: calc(3vw + (0.5rem * var(--_size)) + (4rem * var(--_size)));
    height: 100%;
    margin-top: 0px;
}

.blueimp-gallery > .prev {
    left: 0;
}

.blueimp-gallery > .next {
    right: 0;
}

.blueimp-gallery > .prev:hover,
.blueimp-gallery > .next:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.blueimp-gallery > .prev ._icon,
.blueimp-gallery > .next ._icon {
    position: absolute;
    top: 50%;

    width: calc(4rem * var(--_size));
    height: calc(4rem * var(--_size));
    margin-top: calc((-4rem * var(--_size)) / 2);
}

.blueimp-gallery > .prev ._icon {
    left: calc(50% - (0.5rem * var(--_size)));

    margin-left: calc((-4rem * var(--_size)) / 2);

    filter: drop-shadow(0.2rem 0.1rem 0.1rem rgba(0, 0, 0, 0.5));
}

.blueimp-gallery > .next ._icon {
    right: calc(50% - (0.5rem * var(--_size)));

    margin-right: calc((-4rem * var(--_size)) / 2);

    filter: drop-shadow(-0.2rem 0.1rem 0.1rem rgba(0, 0, 0, 0.5));
}

.blueimp-gallery > .prev ._icon,
.blueimp-gallery > .next ._icon {
    transform: translateX(0px);

    transition-property: transform;
    transition-duration: 0.25s;
}

.blueimp-gallery > .next:focus ._icon,
.blueimp-gallery > .next:hover ._icon {
    transition-duration: 0.085s;
}

.blueimp-gallery > .prev:focus ._icon,
.blueimp-gallery > .prev:hover ._icon {
    transform: translateX(calc(-0.3rem * var(--_size)));
}

.blueimp-gallery > .next:focus ._icon,
.blueimp-gallery > .next:hover ._icon {
    transform: translateX(calc(0.3rem * var(--_size)));
}

.blueimp-gallery > .prev:active ._icon,
.blueimp-gallery > .next:active ._icon {
    transition-duration: 0.05s;
}

.blueimp-gallery > .prev:active ._icon {
    transform: translateX(calc(-0.5rem * var(--_size)));
}

.blueimp-gallery > .next:active ._icon {
    transform: translateX(calc(0.5rem * var(--_size)));
}

.blueimp-gallery > .prev ._icon path,
.blueimp-gallery > .next ._icon path {
    stroke-width: calc((0.1rem * (60 / (40 * var(--_size))) * var(--weight)));
}

.blueimp-gallery > .close {
    top: calc(1rem + (0.5rem * var(--_size)));
    right: calc(1rem + (0.5rem * var(--_size)));
    z-index: 9999;

    width: calc(2.2rem * var(--_size));
    height: calc(2.2rem * var(--_size));
}

.blueimp-gallery > .close:hover,
.blueimp-gallery > .close:focus {
    transform: rotate(7deg);
}

.blueimp-gallery > .close:active {
    transform: rotate(14deg);

    transition-duration: 0.05s;
}

.blueimp-gallery > .close::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;
    min-width: 4.8rem;
    height: 100%;
    min-height: 4.8rem;
}

.blueimp-gallery > .close ._icon {
    filter: drop-shadow(0.1rem -0.1rem 0.1rem rgba(0, 0, 0, 0.5));
}

.blueimp-gallery > .close ._icon path {
    stroke-width: calc((0.1rem * (60 / (22 * var(--_size))) * var(--weight)));
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play,
.blueimp-gallery > .slides > .slide > .video-content > .video-cover {
    z-index: 1;

    display: block;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.3s ease 0s;
}

.blueimp-gallery > .slides > .slide > .video-playing > .video-play,
.blueimp-gallery > .slides > .slide > .video-playing > .video-cover {
    z-index: -1;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s ease 0s, visibility 0s ease 0.3s, z-index 0s ease 0.3s;
}

.blueimp-gallery > .slides > .slide:not(.slide-active) > .video-content > .video-play {
    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease 0s, visibility 0s linear 0.3s;
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play {
    top: 50%;
    left: 50%;
    z-index: 2;

    width: calc(5rem * var(--_size));
    min-width: calc(0.7rem * var(--weight));
    height: calc(5rem * var(--_size));
    min-height: calc(0.7rem * var(--weight));
    margin: 0;
    transform: translate(-50%, -50%);

    background: none;
    filter: drop-shadow(0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.5));
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play::before,
.blueimp-gallery > .slides > .slide > .video-content > .video-play::after {
    content: "";

    position: absolute;
    z-index: 1;

    opacity: 0.85;
    backface-visibility: hidden;

    transition: var(--transition);
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play::before {
    top: calc(50% - (1rem * var(--_size)));
    left: calc(50% - ((1.5rem / 3) * var(--_size)));

    transform: scale(calc(0.7 + (var(--weight) / 25) + (var(--_size) / 25)));
    transform-origin: 16.6666% 50%;

    border-top-width: calc(1rem * var(--_size));
    border-right-width: calc(1.5rem * var(--_size));
    border-bottom-width: calc(1rem * var(--_size));
    border-left-width: calc(1.5rem * var(--_size));
    border-style: solid;
    border-color: transparent transparent transparent #fff;
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play::after {
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    border: calc(0.1rem * var(--weight)) solid #fff;
    border-radius: 50%;
}

.blueimp-gallery > .slides > .slide > .video-content > .video-play:hover::after,
.blueimp-gallery > .slides > .slide > .video-content > .video-play:active::after,
.blueimp-gallery > .slides > .slide > .video-content > .video-play:focus::after,
.blueimp-gallery > .slides > .slide > .video-content > .video-play:hover::before,
.blueimp-gallery > .slides > .slide > .video-content > .video-play:active::before,
.blueimp-gallery > .slides > .slide > .video-content > .video-play:focus::before {
    opacity: 1;

    transition: var(--transition-change);
}

.blueimp-gallery > .slides > .slide > .video-content.video-loading > .video-play::after,
.blueimp-gallery > .slides > .slide > .video-content.video-loading > .video-play::before {
    opacity: 0;
}

.blueimp-gallery > .slides > .slide > .video-content iframe,
.blueimp-gallery > .slides > .slide > .video-content video {
    transition: var(--transition-change);
}

.blueimp-gallery > .slides > .slide > .video-playing iframe,
.blueimp-gallery > .slides > .slide > .video-playing video {
    background-color: #000;
}

.blueimp-gallery > .slides > .slide > .video-content.video-loading > .video-play,
.blueimp-gallery > .slides > .slide-loading {
    background: none;
}

.blueimp-gallery > .slides > .slide::after,
.blueimp-gallery > .slides > .slide > .video-content > .video-cover::after {
    content: "";

    position: absolute;
    top: calc(50% - ((0.3em + (0.075em * var(--weight))) / 2));
    left: calc(50% - ((0.3em + (0.075em * var(--weight))) / 2));

    width: calc(0.3em + (0.075em * var(--weight)));
    height: calc(0.3em + (0.075em * var(--weight)));

    font-size: calc(0.4rem + (0.4rem * var(--_size)));

    background-color: transparent;
    border-radius: 50%;
    box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.0),
    -2em -2em 0em 0em rgba(255, 255, 255, 0.142857),
    0em -3em 0em 0em rgba(255, 255, 255, 0.285714),
    2em -2em 0em 0em rgba(255, 255, 255, 0.428571),
    3em 0em 0em 0em rgba(255, 255, 255, 0.571429),
    2em 2em 0em 0em rgba(255, 255, 255, 0.714286),
    0em 3em 0em 0em rgba(255, 255, 255, 0.857143),
    -2em 2em 0em 0em rgba(255, 255, 255, 1.0);
    filter: drop-shadow(0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.5));
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;

    transition: var(--transition-hide-prop);
    animation: blueimp-gallery__loading 1s linear 0s infinite reverse;
}

.blueimp-gallery > .slides > .slide > .video-loading > .video-cover::after,
.blueimp-gallery > .slides > .slide-loading::after {
    opacity: 1;
    visibility: visible;

    transition: var(--transition-show-prop);
}

@keyframes blueimp-gallery__loading {
    0% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.0),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.142857),
        0em -3em 0em 0em rgba(255, 255, 255, 0.285714),
        2em -2em 0em 0em rgba(255, 255, 255, 0.428571),
        3em 0em 0em 0em rgba(255, 255, 255, 0.571429),
        2em 2em 0em 0em rgba(255, 255, 255, 0.714286),
        0em 3em 0em 0em rgba(255, 255, 255, 0.857143),
        -2em 2em 0em 0em rgba(255, 255, 255, 1.0);
    }
    12.5% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.142857),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.285714),
        0em -3em 0em 0em rgba(255, 255, 255, 0.428571),
        2em -2em 0em 0em rgba(255, 255, 255, 0.571429),
        3em 0em 0em 0em rgba(255, 255, 255, 0.714286),
        2em 2em 0em 0em rgba(255, 255, 255, 0.857143),
        0em 3em 0em 0em rgba(255, 255, 255, 1.0),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.0);
    }
    25% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.285714),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.428571),
        0em -3em 0em 0em rgba(255, 255, 255, 0.571429),
        2em -2em 0em 0em rgba(255, 255, 255, 0.714286),
        3em 0em 0em 0em rgba(255, 255, 255, 0.857143),
        2em 2em 0em 0em rgba(255, 255, 255, 1.0),
        0em 3em 0em 0em rgba(255, 255, 255, 0.0),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.142857);
    }
    37.5% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.428571),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.571429),
        0em -3em 0em 0em rgba(255, 255, 255, 0.714286),
        2em -2em 0em 0em rgba(255, 255, 255, 0.857143),
        3em 0em 0em 0em rgba(255, 255, 255, 1.0),
        2em 2em 0em 0em rgba(255, 255, 255, 0.0),
        0em 3em 0em 0em rgba(255, 255, 255, 0.142857),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.285714);
    }
    50% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.571429),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.714286),
        0em -3em 0em 0em rgba(255, 255, 255, 0.857143),
        2em -2em 0em 0em rgba(255, 255, 255, 1.0),
        3em 0em 0em 0em rgba(255, 255, 255, 0.0),
        2em 2em 0em 0em rgba(255, 255, 255, 0.142857),
        0em 3em 0em 0em rgba(255, 255, 255, 0.285714),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.428571);
    }
    62.5% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.714286),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.857143),
        0em -3em 0em 0em rgba(255, 255, 255, 1.0),
        2em -2em 0em 0em rgba(255, 255, 255, 0.0),
        3em 0em 0em 0em rgba(255, 255, 255, 0.142857),
        2em 2em 0em 0em rgba(255, 255, 255, 0.285714),
        0em 3em 0em 0em rgba(255, 255, 255, 0.428571),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.571429);
    }
    75% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.857143),
        -2em -2em 0em 0em rgba(255, 255, 255, 1.0),
        0em -3em 0em 0em rgba(255, 255, 255, 0.0),
        2em -2em 0em 0em rgba(255, 255, 255, 0.142857),
        3em 0em 0em 0em rgba(255, 255, 255, 0.285714),
        2em 2em 0em 0em rgba(255, 255, 255, 0.428571),
        0em 3em 0em 0em rgba(255, 255, 255, 0.571429),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.714286);
    }
    87.5% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 1.0),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.0),
        0em -3em 0em 0em rgba(255, 255, 255, 0.142857),
        2em -2em 0em 0em rgba(255, 255, 255, 0.285714),
        3em 0em 0em 0em rgba(255, 255, 255, 0.428571),
        2em 2em 0em 0em rgba(255, 255, 255, 0.571429),
        0em 3em 0em 0em rgba(255, 255, 255, 0.714286),
        -2em 2em 0em 0em rgba(255, 255, 255, 0.857143);
    }
    100% {
        box-shadow: -3em 0em 0em 0em rgba(255, 255, 255, 0.0),
        -2em -2em 0em 0em rgba(255, 255, 255, 0.142857),
        0em -3em 0em 0em rgba(255, 255, 255, 0.285714),
        2em -2em 0em 0em rgba(255, 255, 255, 0.428571),
        3em 0em 0em 0em rgba(255, 255, 255, 0.571429),
        2em 2em 0em 0em rgba(255, 255, 255, 0.714286),
        0em 3em 0em 0em rgba(255, 255, 255, 0.857143),
        -2em 2em 0em 0em rgba(255, 255, 255, 1.0);
    }
}

.blueimp-gallery > .title {
    top: 0;
    left: 0;
    z-index: 2;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: calc(
        ((1rem + (0.5rem * var(--_size))) * 2) +
        (2.2rem * var(--_size))
    );
    padding-top: calc(1rem + (0.5rem * var(--_size)));
    padding-bottom: calc(1rem + (0.5rem * var(--_size)));
    /*(6 / 4) = (close btn svg size / close btn svg content size)*/
    padding-left: calc((1rem * (6 / 4)) * var(--_size));
    padding-right: calc(
        ((1rem + (0.5rem * var(--_size))) * 2) +
        (2.2rem * var(--_size))
    );

    font-size: calc(1rem + (0.5rem * (var(--_size))));
    font-style: normal;
    font-weight: calc(100 * var(--weight));
    line-height: 1.5;

    background-color: rgba(0, 0, 0, 0.65);
    text-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.25);
    opacity: 1;
    visibility: visible;
    backface-visibility: hidden;
}

.blueimp-gallery > .title:empty {
    display: none;
}

/*====================================================================*/
/*------------------------ ACCESSIBILITY-NAV -------------------------*/
/*====================================================================*/

/* Navigace pro lepší přístupnost.
 * Při spuštění webu se pomocí klávesy tab zobrazí v levém horním rohu
 * možnosti přejít na hlavní navigaci, obsah apod.
 */
.accessibility-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--page-dialog-z-index) - 1);

    padding: 0.8rem 1.2rem;

    font-size: 1.6rem;

    overflow: hidden;
}

.accessibility-nav,
.accessibility-nav:is(:focus, :hover) {
    color: #000;
    background-color: #fff;

    transition: none;
}

.accessibility-nav:not(:focus) {
    width: 0;
    height: 0;
    padding: 0;
}

/*====================================================================*/
/*-------------------------------- BTN -------------------------------*/
/*====================================================================*/

.btn {
    display: flex;
    align-items: center;

    text-decoration: none;
    white-space: nowrap;

    color: inherit;
    background: none;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    backface-visibility: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    touch-action: manipulation;

    transition-property: color, background, border, opacity, fill, stroke, outline-color;
}

.btn,
.btn__text {
    word-wrap: normal;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
}

.btn::-moz-focus-inner {
    padding: 0;

    border: 0;
}

.btn__text,
.btn__icon,
.btn__arrow {
    position: relative;
    z-index: 2;
}

.btn__icon,
.btn__arrow {
    flex-shrink: 0;
}

.btn__arrow {
    transition: inherit;
    transition-property: color;
}

/*---------------------------- SIZES ----------------------------*/

.btn {
    --_increase-block-padding: 0rem;

    position: relative;

    max-width: -moz-max-content;

    max-width: max-content;
    padding-top: calc(
        0.7rem
        + var(--_increase-block-padding)
        - 0.2rem * var(--is-small)
    );
    padding-bottom: calc(
        0.7rem
        + var(--_increase-block-padding)
        - 0.2rem * var(--is-small)
    );
    padding-left: calc(
        2rem
        - 0.4rem * var(--is-small)
    );
    padding-right: calc(
        2rem
        - 0.4rem * var(--is-small)
    );

    font-size: calc(
        1.6rem
        - 0.2rem * var(--is-small)
    );
    line-height: calc(
        2.5rem
        - 0.2rem * var(--is-small)
    );

    border: 0.2rem solid;
    border-radius: 1000vmax;
    backface-visibility: hidden;
}

.btn:where(.btn--more-responsive) {
    padding-top: calc(
        0.7rem
        + var(--_increase-block-padding)
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-bottom: calc(
        0.7rem
        + var(--_increase-block-padding)
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-left: calc(
        2rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-right: calc(
        2rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    line-height: calc(
        2.5rem
        - 0.3rem * var(--is-small)
    );
}

.btn:where(:not(a,button,input)) {
    cursor: default;
}

.btn--thin {
    --_increase-block-padding: 0.1rem;
    border-width: 0.1rem;
}

.btn--small {
    padding: calc(
        0.6rem
        + var(--_increase-block-padding)
        - 0.1rem * var(--is-small)
    ) calc(
        2.4rem
        - 0.4rem * var(--is-small)
    );

    font-size: calc(
        1.5rem
        - 0.2rem * var(--is-small)
    );
}

.btn--smaller {
    padding: 0.45rem 1.2rem;
    font-size: 1.2rem;
}

.btn--small:where(.btn--number) {
    justify-content: center;

    min-width: calc(
        4.4rem
        - 0.4rem * var(--is-small)
    );
    padding-left: calc(
        0.6rem
        - 0.2rem * var(--is-small)
    );
    padding-right: calc(
        0.6rem
        - 0.2rem * var(--is-small)
    );
}

.btn--small:where(.btn--more-responsive) {
    min-width: calc(
        4.4rem
        - 0.4rem * var(--is-medium)
        - 0.7rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
    padding-top: calc(
        0.6rem
        + var(--_increase-block-padding)
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    padding-bottom: calc(
        0.6rem
        + var(--_increase-block-padding)
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    line-height: calc(
        2.5rem
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

.btn--large {
    padding: calc(
        1.1rem
        + var(--_increase-block-padding)
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    ) calc(
        4.2rem
        - 0.4rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    font-size: calc(
        1.6rem
        - 0.2rem * var(--is-small)
    );
    line-height: calc(
        3.1rem
        - 0.2rem * var(--is-small)
    );
}

.btn--important {
    padding: calc(
        0.7rem
        + var(--_increase-block-padding)
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    ) calc(
        2rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    font-size: calc(
        2.0rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    line-height: calc(
        2.5rem
        - 0.3rem * var(--is-small)
    );
}

/*---------------------------- COLORS ----------------------------*/

.btn {
    --_interaction-opacity: 0.1;
    --_interaction-color: #000;
}

@supports (mix-blend-mode: overlay) {

    .btn {
        --_interaction-opacity: 0.45;
    }

    .btn:where(.btn--dark-dark) {
        --_interaction-opacity: 0.35;
    }

    .btn:where(.btn--dark-dimmed) {
        --_interaction-opacity: 0.25;
    }
}

.btn:where(.btn--dark) {
    --_interaction-color: #fff;
}

.btn {

    outline-offset: -0.4rem;
    outline-color: currentColor;
}

.btn::before {
    content: "";

    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    bottom: -0.2rem;
    left: -0.2rem;

    background-color: var(--_interaction-color);
    border-radius: inherit;
    opacity: 0;
    mix-blend-mode: overlay;
    backface-visibility: hidden;

    transition: inherit;
    will-change: opacity;
}

@media (hover: hover) {
    .btn:hover::before {
        opacity: var(--_interaction-opacity);
    }
}

.btn:active::before {
    opacity: calc(1.666 * var(--_interaction-opacity));
}

.btn:where(.btn--primary)::before {
    mix-blend-mode: soft-light;
}

.btn:where(:not(a,button,input))::before {
    content: none;
}

.btn--primary:where(.btn--fill), .btn--primary:where(.btn--fill):where(a,button,input):active, .btn--primary:where(.btn--fill):where(a,button,input):hover {
    font-weight: bold;

    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--dark:where(.btn--fill), .btn--dark:where(.btn--fill):where(a,button,input):active, .btn--dark:where(.btn--fill):where(a,button,input):hover {
    font-weight: 600;

    color: var(--color-text-inverse);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

.btn--dark-dimmed:where(.btn--fill), .btn--dark-dimmed:where(.btn--fill):where(a,button,input):active, .btn--dark-dimmed:where(.btn--fill):where(a,button,input):hover {
    font-weight: bold;

    color: var(--color-text-inverse);
    background-color: var(--color-dark-dimmed);
    border-color: var(--color-dark-dimmed);
}

.btn--primary:where(.btn--stroke) {
    font-weight: 600;

    color: var(--color-text);
    border-color: var(--color-primary);
}

@media (hover: hover) {
    .btn--primary:where(.btn--stroke):where(a,button,input):hover {
        color: var(--color-text-inverse);
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }
}

.btn--primary:where(.btn--stroke):where(a,button,input):focus, .btn--primary:where(.btn--stroke):where(a,button,input):active {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--dark:where(.btn--stroke) {
    font-weight: 500;

    color: var(--color-text);
    border-color: var(--color-dark);
}

@media (hover: hover) {
    .btn--dark:where(.btn--stroke):where(a,button,input):hover {
        color: var(--color-text-inverse);
        background-color: var(--color-dark);
        border-color: var(--color-dark);
    }
}

.btn--dark:where(.btn--stroke):where(a,button,input):focus, .btn--dark:where(.btn--stroke):where(a,button,input):active {
    color: var(--color-text-inverse);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

.btn--dark-dimmed:where(.btn--stroke) {
    font-weight: 600;

    color: var(--color-text);
    border-color: var(--color-dark-dimmed);
}

@media (hover: hover) {
    .btn--dark-dimmed:where(.btn--stroke):where(a,button,input):hover {
        color: var(--color-text-inverse);
        background-color: var(--color-dark-dimmed);
        border-color: var(--color-dark-dimmed);
    }
}

.btn--dark-dimmed:where(.btn--stroke):where(a,button,input):focus, .btn--dark-dimmed:where(.btn--stroke):where(a,button,input):active {
    color: var(--color-text-inverse);
    background-color: var(--color-dark-dimmed);
    border-color: var(--color-dark-dimmed);
}

/*---------------------------- ARROW ----------------------------*/

.btn__arrow {
    width: 0.6rem;
    height: 1rem;
    margin-top: 0.13333em;

    transition: inherit;
    transition-property: color;
}

.btn__arrow:first-child {
    margin-left: -0.4rem;
    margin-right: 1.2rem;
}

.btn__arrow:last-child {
    margin-right: -0.4rem;
    margin-left: 1.2rem;
}

.btn__arrow--horizontal {
    width: 1rem;
    height: 0.6rem;
    margin-top: 0.13333em;
}

:where(.btn--stroke.btn--primary) .btn__arrow {
    color: var(--color-primary);
}

@media (hover: hover) {
    :where(.btn--stroke.btn--primary):where(a,button,input):hover .btn__arrow {
        color: var(--color-text-inverse);
    }
}

:is(:where(.btn--stroke.btn--primary):where(a,button,input):focus,:where(.btn--stroke.btn--primary):where(a,button,input):active) .btn__arrow {
    color: var(--color-text-inverse);
}

:where(.btn--fill.btn--dark) .btn__arrow {
    color: var(--color-primary);
}

/*---------------------------- ICON ----------------------------*/

.btn__icon {
    width: calc(
        2.4rem
        - 0.4rem * var(--is-small)
    );
    height: calc(
        2.4rem
        - 0.4rem * var(--is-small)
    );
}

.btn__icon:first-child {
    margin-right: calc(
        1.0rem
        - 0.2rem * var(--is-small)
    );
    margin-left: -0.4rem;

    [*|href$="#user"] {
        transform: translateX(-0.1rem);
    }
}

:where(.btn--large) .btn__icon {
    width: calc(
        4rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    height: calc(
        3 / 4 * (4rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight))
    );
}

:is(:where(.btn--large) .btn__icon):first-child {
    margin-right: calc(18 / 16 * 1em);
    margin-left: -0.4rem;
}

:where(.btn--important) .btn__icon {
    width: calc(
        2.4rem
        - 0.6rem * var(--is-small)
    );
    height: calc(
        2.4rem
        - 0.6rem * var(--is-small)
    );

    overflow: visible;
}

:is(:where(.btn--important) .btn__icon):first-child {
    margin-right: calc(
        1.0rem
        - 0.2rem * var(--is-small)
    );
    margin-left: -0.4rem;
}

:is(:where(.btn--important) .btn__icon):last-child {
    margin-left: calc(
        1.0rem
        - 0.2rem * var(--is-small)
    );
    margin-right: -0.4rem;

    [*|href$="#plus"] {
        transform: translateX(25%);
    }
}

:where(.btn--fill.btn--dark) .btn__icon {
    color: var(--color-primary);
}

:where(.btn--fill.btn--primary) .btn__icon {
    color: var(--color-dark);

    [*|href$="#plus"] {
        fill: var(--color-text-inverse);
    }
}

/*---------------------------- ICON ONLY ----------------------------*/

.btn--icon, .btn--close {
    justify-content: center;

    width: 3.5rem;
    max-width: none;
    height: 3.4rem;
    padding: 0rem;
}

:is(.btn--icon,.btn--close):where(.btn--small) {
    width: 1.6rem;
    height: 1.6rem;
}

:is(.btn--icon,.btn--close):where(.btn--transparent) {
    color: var(--color-text);
    border-color: transparent;

    outline-offset: 0rem;
}

@media (hover: hover) {
    :is(.btn--icon,.btn--close):where(.btn--transparent):hover {
        color: var(--color-primary);
    }
}

:is(.btn--icon,.btn--close):where(.btn--transparent):active {
    color: var(--color-dark-dimmed);
}

:is(.btn--icon,.btn--close):where(.btn--transparent)::before {
    content: none;
}

:is(.btn--icon,.btn--close):where(.btn--transparent.btn--primary) {
    color: var(--color-primary);
}

@media (hover: hover) {
    :is(.btn--icon,.btn--close):where(.btn--transparent.btn--primary):hover {
        color: var(--color-dark);
    }
}

:is(.btn--icon,.btn--close):where(.btn--transparent.btn--primary):active {
    color: var(--color-dark-dimmed);
}

:where(.btn--icon) .btn__icon {
    width: 2.4rem;
    height: 2.4rem;

    color: currentColor;
}

:where(.btn--icon) .btn__arrow {
    width: 0.6rem;
    height: 1rem;
}

:is(:where(.btn--icon) .btn__arrow):nth-child(1n) {
    margin: 0;
}

:where(.btn--icon):where(.btn--small) .btn__icon {
    width: 1.2rem;
    height: 1.2rem;
}

/*---------------------------- CLOSE ----------------------------*/

.btn--close {
    height: 3.5rem;

    color: var(--color-text);
    border-color: transparent;

    outline-offset: 0rem;
}

.btn--close:where(.btn--more-responsive) {
    width: calc(3.5rem - 0.5rem * var(--is-small));
    height: calc(3.5rem - 0.5rem * var(--is-small));
}

@media (hover: hover) {
    :where(._hidden-toggle):hover ~ .btn--close, :where(._hidden-toggle):hover ~ * .btn--close, .btn--close:hover {
        color: var(--color-text-inverse);
        background-color: var(--color-dark);
        border-color: var(--color-dark);
    }
}

:where(._hidden-toggle):active ~ .btn--close, :where(._hidden-toggle):active ~ * .btn--close, .btn--close:active {
    color: var(--color-text-inverse);
    background-color: var(--color-dark-dimmed);
    border-color: var(--color-dark-dimmed);
}

.btn--close::before {
    content: none;
}

:where(.btn--close) .btn__icon {
    width: calc(1.4rem - 0.2rem * var(--is-small));
    height: calc(1.4rem - 0.2rem * var(--is-small));

    transition: none;
}


/*====================================================================*/
/*------------------------------ TITLE -------------------------------*/
/*====================================================================*/

.title {
    margin: 0;

    font-family: var(--font-title);
    line-height: 1.15;
}

.title--primary {
    font-size: calc(
        8.5rem
        - 2.2rem * var(--is-medium)
        - 4.2rem * var(--is-small)
        - 0.7rem * var(--is-tight)
    );
}

.title--secondary {
    font-size: calc(
        4.0rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.title--secondary:where(.title--more-responsive) {
    font-size: calc(
        4.0rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

.title--small {
    font-size: calc(
        3.2rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.title--x-small {
    font-family: var(--font-text);
    font-size: calc(
        2.4rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    font-weight: bold;
}

.title--subtitle {
    font-family: var(--font-text);
    font-size: calc(
        2.4rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    font-weight: bold;
    text-transform: uppercase;
}

.title--small-subtitle {
    font-family: var(--font-text);
    font-size: calc(
        2.0rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------ SOCIAL-MEDIA-LIST -------------------------*/
/*====================================================================*/

.social-media-list {
    --_color: var(--color-text);
    --_hover-color: var(--color-text-inverse);
    --_active-color: var(--color-light-dimmed);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.4rem;
}

.social-media-list--primary {
    --_color: var(--color-primary);
    --_active-color: var(--color-dark-dimmed);
}

.social-media-list__link {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--_color);
}

@media (hover: hover) {
    .social-media-list__link:hover {
        color: var(--_hover-color);
    }
}

.social-media-list__link:active {
    color: var(--_active-color);
}

.social-media-list__icon {
    width: 2.4rem;
    height: 2.4rem;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*----------------------------- VARIANTS -----------------------------*/
/*====================================================================*/

.variants {
    --is-medium: var(--is-global-medium);
    --is-small: var(--is-global-small);
    --is-tight: var(--is-global-tight);
    --is-allow-over-100p: 1;
}

@media (min-width: 64em) and (max-width: 77.74375em) {

    :where(.page__columns) .variants {
        --is-medium: 1;
        --is-small: 0;
        --is-tight: 0;
    }
}

.variants {

    min-width: 60.4rem;
}

@media (max-width: 100.24375em) {

    .variants {
        min-width: min(
            60.4rem
            - 5rem * var(--is-medium)
            - 10rem * var(--is-small),
            100vw - var(--page-padding) * 2,
            100% * max(2, var(--columns)) + var(--_inline-gap, 0),
            var(--is-allow-over-100p) * 1000vw + (1 - var(--is-allow-over-100p)) * 100%
        );
    }
}

.variants {
    max-height: calc(100% - var(--_position-from-bottom, 0rem));
}

@supports (overflow: clip) {

    .variants {
        max-height: 72rem;
    }
}

.variants {

    background-color: white;
    border-radius: 2.7rem;
    box-shadow: 0.2rem 0.4rem 0.9rem 0.6rem rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;

    overflow: auto;
    scrollbar-width: none;

    transition: opacity var(--transition-hide-duration) var(--transition-hide-easing), visibility 0s linear var(--transition-hide-duration);
    will-change: opacity;
}

[aria-expanded="true"] ~ .variants {
    opacity: 1;
    visibility: visible;

    scrollbar-width: initial;

    transition: opacity var(--transition-show-duration) var(--transition-show-easing);
    animation: variants__scrollbar-width-initial var(--transition-show-duration) linear 0s forwards;
}

@keyframes variants__scrollbar-width-initial {
    from {
        scrollbar-width: none;
    }
    to {
        scrollbar-width: initial;
    }
}

.variants__wrapper {
    display: grid;
    grid-template-rows: 0fr auto;
    grid-template-areas: "table" "detail";

    padding: 0.9rem 1rem 0rem;

    backface-visibility: hidden;

    transition: grid-template-rows var(--transition-hide-duration) var(--transition-hide-easing);
    will-change: grid-template-rows;
}

[aria-expanded="true"] ~ .variants .variants__wrapper {
    grid-template-rows: 1fr auto;
    transition: grid-template-rows var(--transition-show-duration) var(--transition-show-easing);
}

.variants__table-wrapper {
    grid-area: table;

    overflow: hidden;
    overflow-x: auto;

    container-type: inline-size;
}

.variants__table {
    width: 100%;
}

@media (max-width: 39.99375em) {

    .variants__table {
        display: block;
    }

    .variants__table tbody, .variants__table thead, .variants__table tfoot {
        display: contents;
    }
}

.variants__detail {
    position: sticky;
    bottom: 0;
    z-index: 10;

    grid-area: detail;

    background-color: #fff;
}

.variants__detail-link {
    display: flex;
    align-items: center;
    width: 100%;

    padding: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    ) calc(
        2.5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );

    font-size: calc(
        1.4rem - 0.1rem * var(--is-small)
    );

    outline-offset: -0.2rem;

    transition-property: color, -webkit-text-decoration;

    transition-property: color, text-decoration;

    transition-property: color, text-decoration, -webkit-text-decoration;
}

.variants__detail-icon {
    flex-shrink: 0;

    margin-left: calc(
        1.6rem - 0.2rem * var(--is-small)
    );
}

/*--------------------------------------------------------------------*/
/*------------------------------ TABLE -------------------------------*/
/*--------------------------------------------------------------------*/

.variants__item:not(:first-child) {
    border-top: 0.4rem solid white;
}

@media (min-width: 40em) {
    .variants__item > * {
        vertical-align: middle;

        padding-top: calc(
            1.5rem
            - 0.3rem * var(--is-small)
        );

        padding-bottom: calc(
            1.5rem
            - 0.3rem * var(--is-small)
        );

        background-color: var(--color-light-dimmed);

        transition: inherit;
    }

    .variants__item > :first-child {
        border-top-left-radius: 2.2rem;
        border-bottom-left-radius: 2.2rem;
    }

    .variants__item > :last-child {
        border-top-right-radius: 2.2rem;
        border-bottom-right-radius: 2.2rem;
    }

    @media (hover: hover) {
        .variants__item:has(.variants__state-link:hover) > * {
            background-color: var(--color-light-dimmed-darker);
        }
    }
    .variants__item:has(.variants__state-link:active) > * {
        background-color: var(--color-dimmed);
    }
}

@media (max-width: 39.99375em) {

    .variants__item {
        position: relative;

        display: grid;
        grid-template-areas:
            "state"
            "state-detail"
            "price-cart";

        padding: calc(
            1.5rem - 0.3rem * var(--is-small)
        ) calc(
            2.0rem - 0.5rem * var(--is-small)
        );

        background-color: var(--color-light-dimmed);
        border-radius: 2.2rem;
    }

    @media (hover: hover) {

        .variants__item:has(.variants__state-link:hover) {
            background-color: var(--color-light-dimmed-darker);
        }
    }
    .variants__item:has(.variants__state-link:active) {
        background-color: var(--color-dimmed);
    }

    .variants__item > * {
        display: block;
    }
}

.variants__item .btn {
    position: relative;
    z-index: 2;
}

@media (max-width: 22.49375em) {

    .variants__item .btn {
        --is-tight: 1;
    }
}

.variants__state-cell {
    grid-area: state;
}

@media (min-width: 40em) {

    .variants__state-cell {
        position: relative;

        padding-left: calc(
            2.4rem
            - 0.2rem * var(--is-medium)
            - 0.4rem * var(--is-small)
        );
        padding-right: calc(
            2.4rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
        );
    }

    .variants__state-cell.products__item--with-label {
        padding-left: calc(
            4.4rem
            - 0.2rem * var(--is-medium)
            - 0.4rem * var(--is-small)
        );
    }
}

.variants__state,
.variants__state-detail {
    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
}

.variants__state-link:active {
    color: var(--color-dark);
}

.variants__state-link::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    height: 100%;
    width: 100cqw;
}

@media (max-width: 39.99375em) {
    .variants__state-link::after {
        width: 100%;
        height: 100%;
    }
}

.variants__state-detail-cell {
    grid-area: state-detail;
}

@media (min-width: 40em) {

    .variants__state-detail-cell {
        padding-right: calc(
            2.4rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
        );
    }
}

@media (max-width: 39.99375em) {

    .variants__state-detail-cell {
        margin-top: calc(
            1.0rem
            - 0.4rem * var(--is-small)
        );
    }
}

.variants__price-cart-cell {
    grid-area: price-cart;
}

@media (min-width: 40em) {

    .variants__price-cart-cell {
        padding-right: 1rem;
    }
}

@media (max-width: 39.99375em) {

    .variants__price-cart-cell {
        margin-top: calc(
            1.0rem
            - 0.4rem * var(--is-small)
        );
    }
}

.variants__price-cart-group {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    row-gap: calc(
        0.8rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    -moz-column-gap: calc(
        2rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
    column-gap: calc(
        2rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
}

@media (min-width: 94em) {

    .variants__price-cart-group {
        flex-wrap: nowrap;
    }
}

.variants__price-group {
    flex-grow: 1;
    flex-basis: min-content;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    -moz-column-gap: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    column-gap: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );

    text-align: right;
    line-height: 1.2;
}

@media (min-width: 94em) {

    .variants__price-group {
        flex-direction: column;
        align-items: flex-end;

        max-width: -moz-max-content;

        max-width: max-content;
    }
}

.variants__price-before {
    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    white-space: nowrap;
}

.variants__price {
    font-size: calc(
        2.0rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    font-weight: bold;
    white-space: nowrap;

    color: var(--color-primary);
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*----------------------------- PRODUCTS -----------------------------*/
/*====================================================================*/

.products {
    --columns: 5;
    --_info-br-display: none;
}

:where(.page__columns) .products {
    --is-medium: 0;
    --is-tight: 0;
    --columns: 4;
    --_info-br-display: none;
}

:where(.page__columns.one-column-up) .products {
    --columns: 5;
}

@media (max-width: 77.74375em) {

    :where(.page__columns) .products {
        --is-medium: 1;
    }
}

@media (max-width: 71.49375em) {
    :where(.page__columns) .products {
        --columns: 3;
    }

    :where(.page__columns.one-column-up) .products {
        --columns: 4;
    }
}

@media (max-width: 63.99375em) {
    :where(.page__columns) .products {
        --columns: 4;
    }

    :where(.page__columns.one-column-up) .products {
        --columns: 5;
    }
}

@media (max-width: 56.24375em) {
    :where(.page__columns) .products {
        --columns: 3;
    }

    :where(.page__columns.one-column-up) .products {
        --columns: 4;
    }
}

@media (max-width: 39.99375em) {

    :where(.page__columns) .products {
        --is-medium: 0;
        --is-small: 1;
        --_info-br-display: inline;
    }
}

@media (max-width: 34.99375em) {

    :where(.page__columns) .products {
        --is-medium: 1;
        --is-small: 0;
        --columns: 2;
        --_info-br-display: none;
    }
}

@media (max-width: 29.99375em) {

    :where(.page__columns) .products {
        --is-medium: 0;
        --is-small: 1;
        --_info-br-display: inline;
    }
}

@media (max-width: 22.49375em) {

    :where(.page__columns) .products {
        --is-medium: 1;
        --is-small: 0;
        --columns: 1;
        --_info-br-display: none;
    }
}

.products--one-line {
    --is-medium: 0;
    --is-tight: 0;
    --columns: 5;
    --_info-br-display: none;
}

@media (max-width: 93.99375em) {

    .products--one-line {
        --is-medium: 1;
    }
}

@media (max-width: 77.74375em) {

    .products--one-line {
        --is-medium: 0;
        --is-small: 1;
        --_info-br-display: inline;
    }
}

@media (max-width: 63.99375em) {

    .products--one-line {
        --is-medium: 1;
        --is-small: 0;
        --columns: 4;
        --_info-br-display: none;
        --_overflow-size: calc(
            6rem
            - 1.5rem * min(2, 4 - var(--columns))
        );
    }
}

@media (max-width: 56.24375em) {

    .products--one-line {
        --is-medium: 0;
        --is-small: 1;
        --_info-br-display: inline;
    }
}

@media (max-width: 47.99375em) {

    .products--one-line {
        --columns: 3;
        --is-medium: 1;
        --is-small: 0;
        --_info-br-display: none;
    }
}

@media (max-width: 39.99375em) {

    .products--one-line {
        --is-medium: 0;
        --is-small: 1;
        --_info-br-display: inline;
    }
}

@media (max-width: 33.74375em) {

    .products--one-line {
        --columns: 2;
        --is-medium: 1;
        --is-small: 0;
        --_info-br-display: none;
    }
}

@media (max-width: 27.49375em) {

    .products--one-line {
        --is-medium: 0;
        --is-small: 1;
        --_info-br-display: inline;
    }
}

@media (max-width: 22.49375em) {

    .products--one-line {
        --columns: 1;
        --is-medium: 1;
        --is-small: 0;
        --_overflow-size: 8rem;
    }
}

:where(.no-js) .products--one-line {
    overflow: auto;
}

.products__list {
    --_block-gap: calc(
        7.2rem
        - 2.8rem * var(--is-medium)
        - 2.4rem * var(--is-small)
    );
    --_inline-gap: calc(
        2.4rem
        - 0.7rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
    --_size: calc(
        100% / var(--columns)
        - (var(--_inline-gap) / var(--columns)) * (var(--columns) - 1)
        - var(--_overflow-size, 0rem) / var(--columns)
    );
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--_block-gap) var(--_inline-gap);
}

#rewrite .splide.is-initialized .products__list, :where(.products--one-line) .products__list {
    display: flex;
}

@media (max-width: 63.99375em) {

    :where(.js .products--one-line) .products__list {
        gap: 0;
    }
}

/*---------------------------- SPLIDE ----------------------------*/

.products__splide {
    visibility: visible;
}

.products__splide-track {
    overflow: visible;
}

/*--------------------------------------------------------------------*/
/*------------------------------- ITEM -------------------------------*/
/*--------------------------------------------------------------------*/

.products__item {
    position: relative;

    display: flex;
    flex-direction: column;

    padding-left: 0.5rem;

    padding-right: 0.5rem;

    line-height: calc(
        22 / 15 * (1 - var(--is-small))
        + 1.3 * var(--is-small)
    );
}

:where(.products--one-line) .products__item {
    flex-shrink: 0;
    flex-basis: var(--_size);
}

.products__item--with-label::before {
    content: "";

    position: absolute;
    top: 0;
    left: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
    );
    z-index: 2;

    width: 1.9rem;
    height: 3.8rem;

    transform-origin: top left;
    scale: calc(
        1
        - 0.2 * var(--is-medium)
        - 0.4 * var(--is-small)
    );

    background-color: var(--color-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='19' height='38' viewBox='0 0 19 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H19V38L9.5 32L0 38V0Z' /%3E%3C/svg%3E%0A");
    mask-image: url("data:image/svg+xml,%3Csvg width='19' height='38' viewBox='0 0 19 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H19V38L9.5 32L0 38V0Z' /%3E%3C/svg%3E%0A");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    pointer-events: none;
}

.products__image-link {
    position: relative;

    display: block;

    padding-bottom: calc(304 / 251 * 100%);
    margin-left: -0.5rem;
    margin-right: -0.5rem;

    background-color: var(--color-light-dimmed);
    border-radius: 1.5rem;
    outline-offset: -0.2rem;
}

:where(.products__item--lp) .products__image-link {
    padding-bottom: calc(1 * 100%);
}

.products__image-link:where(a):active {
    background-color: var(--color-light-dimmed-darker);
}

.products__image {
    position: absolute;
    top: calc(
        2rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
    );
    right: calc(
        1.5rem
        - 1rem * var(--is-medium)
        - 2.1rem * var(--is-small)
    );
    bottom: calc(
        2rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
    );
    left: calc(
        1.5rem
        - 1rem * var(--is-medium)
        - 2.1rem * var(--is-small)
    );
}

:where(.products__item--lp) .products__image {
    top: calc(
        2rem
        - 0.5rem * var(--is-medium)
        - 1rem * var(--is-small)
    );
    right: calc(
        2rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
    );
    bottom: calc(
        2rem
        - 0.5rem * var(--is-medium)
        - 1rem * var(--is-small)
    );
    left: calc(
        2rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
    );
}

.products__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -o-object-fit: scale-down;

    object-fit: scale-down;
    width: 100%;
    height: 100%;

    border-radius: 0.5rem;
}

.products__authors,
.products__title,
.products__info {
    --_line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--_line-clamp);
    line-clamp: var(--_line-clamp);
    overflow: hidden;
    overflow-wrap: anywhere;
}

:is(.products__authors,.products__title,.products__info), :is(.products__authors,.products__title,.products__info) :where(a) {
    outline-offset: -0.2rem;
}

.products__authors {
    margin-top: calc(
        2.4rem
        - 0.6rem * var(--is-medium)
        - 1.5rem * var(--is-small)
    );

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
}

.products__authors > * {
    color: var(--color-primary);
}

.products__authors :where(a) {
    font-weight: inherit;
    -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
            text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
}

@media (hover: hover) {
    :is(.products__authors :where(a)):hover {
        color: var(--color-dark);
        -webkit-text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
                text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
    }
}

:is(.products__authors :where(a)):active {
    color: var(--color-dark-dimmed);
}

.products__title {
    margin-top: calc(
        0.4rem
        - 0.1rem * var(--is-small)
    );

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    font-weight: bold;
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent;

    color: var(--color-text);
}

@media (hover: hover) {
    .products__title:where(a):hover {
        color: var(--color-primary);
        -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
    }
}

.products__title:where(a):active {
    color: var(--color-dark-dimmed);
}

.products__info {
    --_line-clamp: 2;

    padding-top: calc(
        0.6rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
    );
    margin-top: auto;

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
}

.products__info + :where(.products__info) {
    padding-top: 0.4rem;
    margin-top: 0;
}

.products__info :where(br) {
    display: var(--_info-br-display, inline);
}

.products__info :where(a) {
    font-weight: inherit;
    -webkit-text-decoration-color: rgba(var(--color-text-rgb), 0.5);
            text-decoration-color: rgba(var(--color-text-rgb), 0.5);
    color: var(--color-text);
}

@media (hover: hover) {
    :is(.products__info :where(a)):hover {
        color: var(--color-primary);
        -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
    }
}

:is(.products__info :where(a)):active {
    color: var(--color-dark-dimmed);
}

.products__info :where(strong) {
    color: var(--color-primary);
}

.products__info--less-important {
    --_line-clamp: calc(2 - 1 * var(--is-small));
}

.products__price-remove-group,
.products__btn-variants-group,
.products__btn {
    margin-top: calc(
        2.2rem
        - 0.5rem * var(--is-medium)
        - 1rem * var(--is-small)
    );
}

.products__btn-variants-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    width: 100%;
}

.products__btn--variants {
    justify-content: space-between;

    width: 100%;
    max-width: 100%;
    padding-top: calc(
        0.7rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    padding-bottom: calc(
        0.7rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    padding-left: calc(
        2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    margin-top: 0;

    font-size: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

.products__btn--variants .btn__text {
    flex-shrink: 1;
    display: flex;
    gap: 0.6rem;

    overflow: visible;
}

.products__btn--variants .btn__arrow {
    flex-shrink: 0;

    margin-left: 0.2rem;

    transition: inherit;
    transition-property: rotate;
}

.products__btn--variants[aria-expanded="true"] .btn__arrow {
    rotate: 180deg;
}

.products__btn-variants-count {
    flex-shrink: 1;
    min-width: 3ch;
    max-width: 100%;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--color-dark);

    overflow: hidden;
}

@media (max-width: 93.99375em) {

    .products__btn-variants-count {
        display: none;
    }
}

.products__variants {
    --_position-from-bottom: 5rem;
    position: absolute;
    bottom: var(--_position-from-bottom);
    left: 0;
    z-index: 5;
}

@supports (overflow: clip) {

    .products__variants {
        --_position-from-bottom: 0rem;

        top: 100%;
        bottom: auto;

        margin-top: calc(
            1.7rem
            - 0.2rem * var(--is-medium)
            - 0.5rem * var(--is-small)
        );
        margin-bottom: 0;
    }
}

@media (max-width: 22.49375em) {

    :where(.page__columns) .products__variants {
        --is-allow-over-100p: 0;
    }
}

.products__variants--right {
    left: auto;
    right: 0;
}

.products__variants--center {
    left: 50%;

    transform: translate(-50%);
}

.products__price-remove-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
}

.products__price {
    font-size: 2.0rem;
    font-weight: bold;

    color: var(--color-primary)
}

/*--------------------------------------------------------------------*/
/*---------------------------- HORIZONTAL ----------------------------*/
/*--------------------------------------------------------------------*/

:where(.box) .products--horizontal {
    --is-medium: 0;
    --is-small: 0;
    --is-tight: 0;
    --columns: 3;
}

@media (max-width: 93.99375em) {

    :where(.box) .products--horizontal {
        --is-medium: 1;
    }
}

@media (max-width: 77.74375em) {

    :where(.box) .products--horizontal {
        --is-medium: 0;
        --columns: 2;
    }
}

@media (max-width: 63.99375em) {

    :where(.box) .products--horizontal {
        --is-medium: 1;
    }
}

@media (max-width: 56.24375em) {

    :where(.box) .products--horizontal {
        --is-medium: 0;
        --is-small: 1;
    }
}

@media (max-width: 47.99375em) {

    :where(.box) .products--horizontal {
        --is-medium: 1;
        --is-small: 0;
        --columns: 1;
    }
}

@media (max-width: 29.99375em) {

    :where(.box) .products--horizontal {
        --is-medium: 0;
        --is-small: 1;
    }
}

:where(.products--horizontal) .products__list {
    --_block-gap: calc(
        4.2rem
        - 1.2rem * var(--is-medium)
        - 2.5rem * var(--is-small)
    );
    --_inline-gap: calc(
        4.2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
    );
}

:where(.products--horizontal) .products__item {
    --_image-size: calc(
        14.6rem
        - 2.6rem * var(--is-medium)
        - 4.5rem * var(--is-small)
    );
}

@media (max-width: 22.49375em) {

    :where(.products--horizontal) .products__item {
        --_image-size: 8rem;
    }
}

:where(.products--horizontal) .products__item {

    display: grid;
    grid-template-rows: repeat(3, minmax(0, min-content)) minmax(0, 1fr);
    grid-template-columns: var(--_image-size) 1fr;
    -moz-column-gap: calc(
        3rem
        - 1.0rem * var(--is-medium)
        - 1.8rem * var(--is-small)
    );
    column-gap: calc(
        3rem
        - 1.0rem * var(--is-medium)
        - 1.8rem * var(--is-small)
    );

    padding: 0;
}

:is(:where(.products--horizontal) .products__item) > * {
    grid-column: 2;
}

:where(.products--horizontal) .products__image-link {
    grid-column: 1;
    grid-row: 1 / -1;

    padding-bottom: calc(176 / 146 * 100%);
    margin-left: 0rem;
    margin-right: 0rem;
    margin-bottom: auto;
}

@media (max-width: 22.49375em) {

    :where(.products--horizontal) .products__image-link {
        border-radius: 0.8rem;
    }
}

:where(.products--horizontal) .products__image {
    top: calc(
        2.2rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
    right: calc(
        2.6rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
    bottom: calc(
        2.2rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
    left: calc(
        2.6rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

@media (max-width: 22.49375em) {

    :where(.products--horizontal) .products__image {
        top: 1rem;
        right: 0.8rem;
        bottom: 1rem;
        left: 0.8rem;
    }
}

:where(.products--horizontal) .products__img {
    border-radius: 0.5rem;
}

:where(.products--horizontal) .products__authors {
    --_line-clamp: calc(2 - 1 * var(--is-small));

    margin-top: calc(
        1rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

:where(.products--horizontal) .products__title {
    margin-top: 0.4rem;
}

:where(.products--horizontal) .products__info {
    --_line-clamp: 2;

    padding-top: calc(
        0.7rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
}

:where(.products--horizontal) .products__info--less-important {
    --_line-clamp: 1;
}

:where(.products--horizontal) .products__btn, :where(.products--horizontal) .products__price-remove-group {
    align-self: end;

    margin-bottom: calc(
        0.7rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
    );
}

:is(:where(.products--horizontal) .products__btn,:where(.products--horizontal) .products__price-remove-group):where(:nth-child(4),:nth-child(5)) {
    grid-row: -2;
}

:where(.products--horizontal) .products__price-remove-group {
    margin-top: calc(
        1.6rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
    );
    margin-bottom: calc(
        1.8rem
        - 0.8rem * var(--is-medium)
        - 1.5rem * var(--is-small)
    );
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- BREADCRUMBS ----------------------------*/
/*====================================================================*/

.breadcrumbs__list {
    --_inline-gap: calc(
        2.7rem
        - 0.4rem * var(--is-medium)
        - 0.7rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    --_arrow-width: 0.6rem;

    padding-top: calc(
        2.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    padding-bottom: calc(
        2.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

.breadcrumbs__item {
    position: relative;

    display: inline;
    margin-left: calc(var(--_inline-gap) + var(--_arrow-width) / 2);
    margin-right: calc(var(--_inline-gap) - var(--_arrow-width) / 2);

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
}

.breadcrumbs__item::before {
    content: "";

    position: absolute;
    top: 0.35em;
    left: calc(-1 * var(--_inline-gap) - var(--_arrow-width) / 2);

    width: var(--_arrow-width);
    height: 1rem;

    background-image: url("data:image/svg+xml,%3Csvg fill='%23D65A31' width='6' height='10' viewBox='0 0 6 10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.25684' y='9.2276' width='1.77766' height='6.22179' transform='rotate(-135 1.25684 9.2276)'/%3E%3Crect x='5.65625' y='4.82819' width='1.77766' height='6.22179' transform='rotate(135 5.65625 4.82819)'/%3E%3C/svg%3E");
}

@media (min-width: 30em) {
    .breadcrumbs__item:first-child {
        margin-left: 0;
    }

    .breadcrumbs__item:first-child::before {
        content: none;
    }
}

/*@media (max-width: 29.99375em) {*/
/*    :not(:has(:not(:first-child) > :active,:focus-visible)) > .breadcrumbs__item:not(:first-child) {*/
/*        position: absolute;*/
/*        top: 0;*/
/*        left: 0;*/

/*        width: 1px;*/
/*        height: 1px;*/
/*        margin: -1px;*/

/*        clip-path: polygon(0px 0px, 0px 0px, 0px 0px);*/
/*        overflow: hidden;*/
/*    }*/

/*    .breadcrumbs__item:first-child::before {*/
/*        transform: rotate(180deg);*/
/*    }*/
/*}*/

.breadcrumbs__link {
    font-weight: 400;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*----------------------------- PRODUCT ------------------------------*/
/*====================================================================*/

.product {
    --is-small: 0;
    --is-medium: 0;
    --is-tight: 0;
}

@media (max-width: 77.74375em) {

    .product {
        --is-medium: 1;
    }
}

@media (max-width: 63.99375em) {

    .product {
        --is-medium: 0;
        --is-small: 0;
    }
}

@media (max-width: 56.24375em) {

    .product {
        --is-medium: 1;
    }
}

@media (max-width: 47.99375em) {

    .product {
        --is-medium: 0;
        --is-small: 1;
    }
}

@media (max-width: 39.99375em) {

    .product {
        --is-small: 0;
        --is-medium: 1;
    }
}

@media (max-width: 29.99375em) {

    .product {
        --is-medium: 0;
        --is-small: 1;
    }
}

.product {

    position: relative;
}

@media (max-width: 23.43125em) {

    .product .btn {
        --is-tight: var(--is-small);
    }
}

.product__current-state,
.product__variants-state {
    align-self: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    -moz-column-gap: calc(
        1.5rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
    );
    column-gap: calc(
        1.5rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
    );

    line-height: 1.15;
}

.product__current-state-self,
.product__variants-state-self {
    display: flex;
    align-items: baseline;
    gap: calc(1rem - 0.2rem * var(--is-small));

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-small)
    );
}

.product__current-state-detail,
.product__variants-state-detail {
    padding-top: calc(
        0.2rem
        - 0.2rem * var(--is-small)
    );

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-small)
    );
}

.product__current-stock,
.product__variants-stock {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-small)
    );
}

:is(.product__current-stock,.product__variants-stock) > * {
    flex-shrink: 2;
}

.product__current-price-cart-group,
.product__variants-price-cart-group {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    row-gap: calc(
        0.8rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    -moz-column-gap: calc(
        2.6rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
    column-gap: calc(
        2.6rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
}

.product__current-price-group,
.product__variants-price-group {
    flex-grow: 1;
    flex-basis: min-content;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    -moz-column-gap: calc(
        1.6rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
    column-gap: calc(
        1.6rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );

    text-align: right;
    line-height: 1.2;
}

.product__current-price-before,
.product__variants-price-before {
    font-size: calc(
        2.0rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
    );
    white-space: nowrap;
}

.product__variants-price,
.product__current-price {
    font-size: calc(
        3.2rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
    );
    font-weight: bold;
    white-space: nowrap;

    color: var(--color-primary);
}

/*--------------------------------------------------------------------*/
/*----------------------------- CURRENT ------------------------------*/
/*--------------------------------------------------------------------*/

.product__current {
    display: grid;

    padding-top: calc(
        2rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
    );

    padding-bottom: calc(
        2rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
    );
    padding-right: calc(
        2.2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
    );

    background-color: var(--color-light-dimmed);
    border-radius: 2.2rem;

    overflow: auto;
}

.product__variants-toggle-input {
    top: 0;
    bottom: 0;

    width: calc(
        2 * (2.2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)) + 1rem
    );
    height: auto;

    cursor: pointer;
}

.product__variants-opener {
    grid-area: opener;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    padding-left: calc(
        2.2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
    );
    padding-right: calc(
        2.2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
    );
    margin-right: 0.4rem;

    color: var(--color-primary);
    outline-offset: -0.2rem;
}

@media (hover: hover) {
    :where(.product__variants-toggle-input):hover ~ :where(.product__current) .product__variants-opener, .product__variants-opener:hover {
        color: var(--color-text);
    }
}

:where(.product__variants-toggle-input):active ~ :where(.product__current) .product__variants-opener, .product__variants-opener:active {
    color: var(--color-dark-dimmed);
}

.product__variants-opener-icon {
    width: 1.8rem;
    height: auto;
    margin-top: 0.2em;
}

.product__current-state,
.product__current-stock,
.product__current-price-cart-group {
    padding-left: calc(
        2.2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    padding-right: calc(
        2.2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
}

.product__current-state {
    grid-area: state;
}

:where(.js) .product__current-state {
    padding-left: 0;
}

.product__current-stock {
    grid-area: stock;

    min-height: calc(
        4.3rem
        - 0.6rem * var(--is-medium)
        - 1.4rem * var(--is-small)
    );

    border-right: 0.1rem solid var(--color-dimmed);
    border-left: 0.1rem solid var(--color-dimmed);
}

.product__current-price-cart-group {
    grid-area: price-cart;

    padding-right: 0;
}

/*---------------------------- WIDE ----------------------------*/

@media (min-width: 40em) {
    .product__current {
        grid-template-columns: max-content repeat(2, minmax(min-content, 20%)) auto;
        grid-template-areas: "opener state stock price-cart";
    }

    .product__current-state-stock-group {
        display: contents;
    }
}

/*---------------------------- TIGHT ----------------------------*/

@media (max-width: 39.99375em) {

    .product__current {
        grid-template-columns: max-content auto;
        grid-template-areas:
            "opener state-stock"
            "opener price-cart";
        row-gap: calc(
            1.2rem
            - 0.2rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }

    .product__current-state-stock-group {
        grid-area: state-stock;
        display: flex;
        flex-wrap: wrap;
        -moz-column-gap: 2rem;
        column-gap: 2rem;
        row-gap: calc(0.6rem - 0.2rem * var(--is-small));

        overflow: hidden;

        container-type: inline-size;
    }

    .product__current-state {
        flex-grow: 1;
        align-self: stretch;

        margin-right: -0.1rem;

        border-right: 0.1rem solid var(--color-dimmed);
    }

    .product__current-stock {
        flex-grow: 0.5;
        display: flex;
        justify-content: flex-start;

        padding-left: 0;

        padding-right: 0;
        padding-right: 2rem;

        text-align: center;

        border: none;
    }

    .product__current-stock > * {
        flex-basis: max-content;
        flex-basis: calc((75vw - 201%) * 9999);
        flex-basis: calc((100cqw - 201%) * 9999);

        min-width: -moz-fit-content;

        min-width: fit-content;
    }

    .product__current-price-cart-group {
        padding-left: 0;
    }
}

@media (max-width: 22.49375em) {

    .product__current {
        row-gap: 0.8rem;

        padding-right: 1.2rem;
    }

    .product__variants-opener {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

/*--------------------------------------------------------------------*/
/*----------------------------- VARIANTS -----------------------------*/
/*--------------------------------------------------------------------*/

.product__variants {
    position: absolute;
    top: 0;
    left: -1rem;
    right: -1rem;
    z-index: 2;

    min-height: 100%;
    max-height: 80rem;

    background-color: white;
    border-radius: 2.7rem;
    box-shadow: 0.2rem 0.4rem 0.9rem 0.6rem rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;

    overflow: auto;
    scrollbar-width: none;

    transition: opacity var(--transition-hide), visibility 0s linear var(--transition-hide-duration);
}

@media (max-width: 23.43125em) {

    .product__variants {
        left: -0.8rem;
        right: -0.8rem;
    }
}

:where(.product__variants-toggle-input:checked) ~ .product__variants, .product__variants.is-expanded {
    opacity: 1;
    visibility: visible;

    scrollbar-width: initial;

    transition: opacity var(--transition-show);
    animation: product__variants-scrollbar-width-initial var(--transition-show-duration) linear 0s forwards;
}

@keyframes product__variants-scrollbar-width-initial {
    from {
        scrollbar-width: none;
    }
    to {
        scrollbar-width: initial;
    }
}

.product__variants-wrapper {
    display: grid;
    grid-template-rows: 0fr auto;
    grid-template-areas: "table" "closer";

    padding: 0.9rem 1.2rem;
    padding-bottom: 0rem;

    backface-visibility: hidden;

    transition: grid-template-rows var(--transition-hide);
}

:where(.product__variants-toggle-input):checked ~ :where(.product__variants) .product__variants-wrapper, .is-expanded .product__variants-wrapper {
    grid-template-rows: 1fr auto;

    opacity: 1;
    visibility: visible;

    transition: grid-template-rows var(--transition-show);
}

.product__variants-table-wrapper {
    grid-area: table;

    overflow: hidden;
    overflow-x: auto;
}

.product__variants-closer {
    position: sticky;
    bottom: 0;
    z-index: 10;

    grid-area: closer;
    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: calc(
        1.4rem
    );

    padding-bottom: calc(
        1.4rem
    );
    margin-top: auto;

    color: var(--color-primary);
    background-color: #fff;
    cursor: pointer;
    outline-offset: -0.2rem;
}

@media (hover: hover) {
    .product__variants-closer:hover {
        color: var(--color-text);
    }
}

.product__variants-closer:active {
    color: var(--color-dark-dimmed);
}

.product__variants-closer-icon {
    width: 1rem;
    height: auto;
    transform: rotate(180deg);
}

/*---------------------------- TABLE ----------------------------*/

.product__variants-table-wrapper {
    container-type: inline-size;
}

.product__variants-table {
    width: 100%;
}

.product__variants-table .btn {
    position: relative;
    z-index: 2;
}

.product__variants-item > * {
    vertical-align: middle;

    padding-top: calc(
        1.5rem
        - 0.3rem * var(--is-small)
    );

    padding-bottom: calc(
        1.5rem
        - 0.3rem * var(--is-small)
    );
    padding-left: calc(
        2.2rem
        - 0.2rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    padding-right: calc(
        2.2rem
        - 0.2rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );

    background-color: var(--color-light-dimmed);

    transition: inherit;
}

.product__variants-item:not(:first-child) {
    border-top: 0.6rem solid white;
}

.product__variants-item > :first-child {
    border-top-left-radius: 2.2rem;
    border-bottom-left-radius: 2.2rem;
}

.product__variants-item > :last-child {
    border-top-right-radius: 2.2rem;
    border-bottom-right-radius: 2.2rem;
}

@media (hover: hover) {
    .product__variants-item:has(.product__variants-image-link:hover) > * {
        background-color: var(--color-light-dimmed-darker);
    }
}

.product__variants-item:has(.product__variants-image-link:active) > * {
    background-color: var(--color-dimmed);
}

.product__variants-image-link {
    display: grid;
    grid-template: 100% / 100%;

    max-width: 6.8rem;
    min-width: 6.8rem;

    background-color: var(--color-light-dimmed-darker);
}

.product__variants-image-link::before {
    content: "";

    grid-area: 1 / 1;

    padding-bottom: calc(99 / 68 * 100%);
}

.product__variants-image-link::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    height: 100%;
    width: 100cqw;
}

.product__variants-image {
    grid-area: 1 / 1;
    display: grid;
    grid-template: 100% / 100%;
}

.product__variants-img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

@media (min-width: 22.5em) and (max-width: 39.99375em), (min-width: 94em) {

    .product__variants-price-cart-group {
        flex-wrap: nowrap;
    }
}

@media (min-width: 22.5em) and (max-width: 39.99375em), (min-width: 94em) {

    .product__variants-price-group {
        flex-direction: column;
        align-items: flex-start;

        max-width: -moz-max-content;

        max-width: max-content;
    }
}

/*---------------------------- WIDE ----------------------------*/

@media (min-width: 40em) {

    .product__variants-image-cell {
        position: relative;

        width: 0.1%;
    }

    .product__variants-state-cell {
        width: 25%;
        padding-left: 0;
    }

    .product__variants-stock-cell {
        position: relative;

        text-align: center;
    }

    .product__variants-stock-cell::after {
        content: "";

        position: absolute;
        top: 2rem;
        right: 0rem;
        bottom: 2rem;
        left: 0rem;

        border-right: 0.1rem solid var(--color-dimmed);
        border-left: 0.1rem solid var(--color-dimmed);

        pointer-events: none;
    }
}

/*---------------------------- TIGHT ----------------------------*/

@media (max-width: 39.99375em) {

    .product__variants-table {
        display: block;
    }

    .product__variants-table thead, .product__variants-table tbody, .product__variants-table tfoot {
        display: contents;
    }

    .product__variants-image-link::after {
        width: 100%;
        height: 100%;
    }

    .product__variants-item {
        position: relative;

        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: min-content 1fr min-content;
        grid-template-areas:
                "image      state     "
                "image      stock     "
                "price-cart price-cart";

        padding-top: calc(1.5rem - 0.3rem * var(--is-small));
        padding-bottom: 1.8rem;
        padding-left: calc(2.2rem - 0.2rem * var(--is-small));
        padding-right: calc(2.2rem - 0.2rem * var(--is-small));

        background-color: var(--color-light-dimmed);
        border-radius: 2.2rem;
    }

    @media (hover: hover) {

        .product__variants-item:has(.product__variants-image-link:hover) {
            background-color: var(--color-light-dimmed-darker);
        }
    }
    .product__variants-item:has(.product__variants-image-link:active) {
        background-color: var(--color-dimmed);
    }

    .product__variants-item > * {
        display: contents;
    }

    .product__variants-image-link {
        grid-area: image;

        margin-right: 2.4rem;
        margin-bottom: auto;
    }

    .product__variants-state {
        grid-area: state;

        margin-top: 0.2rem;
        margin-bottom: auto;
    }

    .product__variants-stock {
        grid-area: stock;
        justify-content: flex-start;

        margin-top: calc(
            1.0rem
            - 0.2rem * var(--is-small)
        );
        margin-bottom: auto;
    }

    .product__variants-price-cart-group {
        grid-area: price-cart;
        align-items: flex-end;

        margin-top: calc(
            1.2rem
            - 0.2rem * var(--is-small)
        );
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*----------------------------- FEATURES -----------------------------*/
/*====================================================================*/

.features {
    --is-medium: 0;
    --is-small: 0;
    --is-tight: 0;
    --columns: 4;
    --column-gap: calc(
        2.4rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    --row-gap: calc(
        4.0rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    --_image-size: calc(
        9.9rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (max-width: 93.99375em) {

    .features {
        --is-medium: 0;
        --is-small: 0;
        --is-tight: 0;
        --columns: 2;
        --column-gap: 10.0rem;
        --row-gap: 5.8rem;

        padding-left: 10rem;

        padding-right: 10rem;
    }
}

@media (max-width: 77.74375em) {

    .features {
        --column-gap: 6.0rem;

        padding-left: 5rem;

        padding-right: 5rem;
    }
}

@media (max-width: 63.99375em) {

    .features {
        --is-medium: 1;
        --column-gap: 5.0rem;

        padding-left: 4rem;

        padding-right: 4rem;
    }
}

@media (max-width: 56.24375em) {

    .features {
        --is-medium: 0;
        --is-small: 1;
        --column-gap: 4.0rem;
        --row-gap: 4.8rem;

        padding-left: 0rem;

        padding-right: 0rem;
    }
}

@media (max-width: 47.99375em) {

    .features {
        --is-tight: 1;
        --column-gap: 2.8rem;
        --row-gap: 4.0rem;
    }

    @media (min-width: 40em) {

        .features {
            --_image-size: 8rem;
        }
    }
}

@media (max-width: 39.99375em) {

    .features {
        --is-medium: 1;
        --is-small: 0;
        --is-tight: 0;
        --columns: 1;
        --row-gap: 4.8rem;

        padding-left: max(6%, 3.5rem);

        padding-right: max(6%, 3.5rem);
    }
}

@media (max-width: 29.99375em) {

    .features {
        --is-medium: 0;
        --is-small: 1;
        --row-gap: 3.8rem;

        padding-left: 1rem;

        padding-right: 1rem;
    }
}

@media (max-width: 23.43125em) {

    .features {
        --is-tight: 1;
        --row-gap: 3.5rem;

        padding-left: 0.5rem;

        padding-right: 0.5rem;
    }
}

@media (max-width: 22.49375em) {

    .features {
        --_image-size: 8rem;

        padding-left: 0rem;

        padding-right: 0rem;
    }
}

@media (min-width: 94em) {

    .features {
        margin-left: -1.8rem;
        margin-right: -1.8rem;
    }
}

.features:not(:where(:last-child)) {
    margin-bottom: calc(
        14rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

* + .features {
    margin-top: calc(
        14rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

:where(.box:not(.box--tablet-s-invisible)) + .features {
    margin-top: calc(
        12.8rem
        - 1.5rem * var(--is-medium)
        - 1.0rem * var(--is-tight)
    );
}

@media (max-width: 63.99375em) {

    :where(.box:not(.box--tablet-s-invisible)) + .features {
        margin-top: calc(
            11.2rem
            - 1.5rem * var(--is-medium)
            - 3.0rem * var(--is-small)
            - 1.0rem * var(--is-tight)
        );
    }
}

:where(.other-authors-box) + .features {
    margin-top: calc(
        11.2rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

.features__list {
    display: grid;
    grid-template-columns: repeat(var(--columns), auto);
    row-gap: var(--row-gap);
    -moz-column-gap: var(--column-gap);
    column-gap: var(--column-gap);
}

@media (max-width: 93.99375em) {

    .features__list {
        justify-content: center;
    }
}

.features__item {
    position: relative;

    display: grid;
    grid-template-columns: max-content auto minmax(0, auto);
    grid-template-rows: min-content min-content auto;

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.1rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (max-width: 93.99375em) {

    .features__item:nth-child(1n + 3) {
        left: 10rem;
    }
}

@media (max-width: 77.74375em) {

    .features__item:nth-child(1n + 3) {
        left: 5rem;
    }
}

@media (max-width: 63.99375em) {

    .features__item:nth-child(1n + 3) {
        left: 3rem;
    }
}

@media (max-width: 56.24375em) {

    .features__item:nth-child(1n + 3) {
        left: 0rem;
    }
}

@media (max-width: 39.99375em) {

    .features__item:nth-child(even) {
        left: 3.5rem;
    }
}

@media (max-width: 29.99375em) {

    .features__item:nth-child(even) {
        left: 0rem;
    }
}

.features__item > * {
    grid-column: 2;
}

.features__item-icon {
    grid-column: 1;
    grid-row: 1 / -1;

    width: var(--_image-size);
    height: auto;

    padding: 1.8rem;
    margin-right: calc(
        2.8rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-radius: 50%;

    overflow: visible;

    [*|href] {
        transform-origin: center center;
    }

    [*|href$="#books"] {
        translate: 0% 1%;
    }

    [*|href$="#truck"] {
        translate: 0% -2%;
        scale: calc(
            1
            + 0.025 * var(--is-medium)
            + 0.05 * var(--is-small)
            + 0.0125 * var(--is-tight)
        );
    }

    [*|href$="#box"] {
        translate: 1% -1%;
        scale: calc(
            1
            + 0.05 * var(--is-medium)
            + 0.1 * var(--is-small)
            + 0.025 * var(--is-tight)
        );
    }

    [*|href$="#wallet"] {
        translate: 4% -6%;
        scale: calc(
            1
            + 0.066 * var(--is-medium)
            + 0.133 * var(--is-small)
            + 0.033 * var(--is-tight)
        );
    }
}

.features__item-title {
    margin-bottom: 0.8rem;

    font-size: calc(
        3rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*---------------------------- PAGINATION ----------------------------*/
/*====================================================================*/

.pagination {
    --_gap: calc(
        0.8rem
        - 0.2rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_gap);
}

.pagination__step-link {
    flex-shrink: 0;

    margin-right: calc(-1rem + 0.2rem * var(--is-small));
    margin-left: calc(-1.8rem + 0.2rem * var(--is-small));
}

.pagination__step-link ~ .pagination__step-link {
    margin-right: calc(-1.8rem + 0.2rem * var(--is-small));
    margin-left: calc(-1rem + 0.2rem * var(--is-small));
}

.pagination__pages {
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--_gap);
}

/*====================================================================*/
/*--------------------------- CART-STEPS -----------------------------*/
/*====================================================================*/

.cart-steps {
    position: relative;
    z-index: 2;

    display: grid;
}

@media (min-width: 40em) {

    .cart-steps {
        justify-content: center;
    }
}

:where(.breadcrumbs) + .cart-steps {
    margin-top: calc(
        4.6rem
        - 1.8rem * var(--is-medium)
        - 3.4rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
}

.cart-steps__list {
    --is-medium: 0;
    --is-small: 1;
    --is-tight: 1;
}

@media (min-width: 56.25em) {

    .cart-steps__list {
        --is-tight: 0;
    }
}

@media (min-width: 64em) {

    .cart-steps__list {
        --is-medium: 1;
        --is-small: 0;
        --is-tight: 1;
    }
}

@media (min-width: 77.75em) {

    .cart-steps__list {
        --is-tight: 0;
    }
}

@media (min-width: 94em) {

    .cart-steps__list {
        --is-medium: 0;
    }
}

.cart-steps__list {

    display: grid;
    -moz-column-gap: calc(
        0.9rem
        - 0.2rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    column-gap: calc(
        0.9rem
        - 0.2rem * var(--is-medium)
        - 0.3rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    row-gap: calc(
        0.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );

    background-color: transparent;
}

@media (min-width: 40em) {

    .cart-steps__list {
        grid-auto-flow: column;
    }
}

.cart-steps__item,
.cart-steps__page-title {
    display: flex;
    align-items: stretch;

    width: 100%;
}

.cart-steps__item {
    --_arrow-scale: calc(
        1
        - 0.15 * var(--is-medium)
        - 0.30 * var(--is-small)
        - 0.10 * var(--is-tight)
    );

    position: relative;
    z-index: 10;
}

.cart-steps__item::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 100%;
    z-index: -1;

    width: 6.4rem;
    height: 6.4rem;

    transform: translateY(-50%) translateX(-45%) scale(var(--_arrow-scale));
    transform-origin: 30% center;

    background-color: #fff;

    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

    pointer-events: none;
}

@media (max-width: 39.99375em) {
    .cart-steps__item::before {
        top: 100%;
        left: 50%;

        width: 4.8rem;
        height: 4.8rem;

        transform: translateY(-48%) translateX(-50%) scale(var(--_arrow-scale));
        transform-origin: center 55%;
    }
}

.cart-steps__item + .cart-steps__item {
    z-index: 9;
}

:is(.cart-steps__item + .cart-steps__item) + :is(.cart-steps__item + .cart-steps__item) {
    z-index: 8;
}

:is(:is(.cart-steps__item + .cart-steps__item) + :is(.cart-steps__item + .cart-steps__item)) + :is(:is(.cart-steps__item + .cart-steps__item) + :is(.cart-steps__item + .cart-steps__item)) {
    z-index: 7;
}

.cart-steps__item:last-child::before {
    content: none;
}

.cart-steps__interaction {
    --_increase-left-padding: 0rem;

    position: relative;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    padding-top: calc(
        3rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    padding-bottom: calc(
        3.6rem
        - 0.7rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    padding-right: calc(
        5.5rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    padding-left: calc(
        5.5rem
        + var(--_increase-left-padding)
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );

    text-decoration: none;
    text-align: center;

    color: inherit;
    background-color: var(--color-dark);
    border-radius: calc(
        3rem
        - 0.7rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
    outline-offset: calc(-0.5rem + 0.1rem * var(--is-small));
}

@media (min-width: 40em) {
    :where(.cart-steps__item:nth-child(1n + 2)) .cart-steps__interaction {
        --_increase-left-padding: calc(
            1.0rem
            - 0.4rem * var(--is-medium)
            - 0.6rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

.is-current:where(.cart-steps__item) .cart-steps__interaction {
    background-color: var(--color-primary);
}

.is-current:where(.cart-steps__item) ~ * .cart-steps__interaction {
    background-color: var(--color-dark-dimmed);
}

@media (hover: hover) {
    .cart-steps__interaction[href]:hover {
        text-decoration: none;
        background-color: var(--color-primary);
        color: #fff;
    }
}

.cart-steps__interaction[href]:active {
    background-color: var(--color-dark-dimmed);
}

.cart-steps__interaction::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 2;

    width: 1.8rem;
    height: calc(34 / 18 * 1.8rem);
    margin-left: -0.1rem;

    background-color: inherit;

    transform: translateY(-50%) scale(var(--_arrow-scale));
    transform-origin: left center;

    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);

    pointer-events: none;
}

@media (max-width: 39.99375em) {
    .cart-steps__interaction::after {
        top: 100%;
        left: 50%;

        width: 4.5rem;
        height: calc(23 / 45 * 4.5rem);
        margin-top: -0.1rem;
        margin-left: 0rem;

        transform: translateX(-50%) scale(var(--_arrow-scale));
        transform-origin: center top;

        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    }
}

:is(:where(.cart-steps__item:last-child) .cart-steps__interaction)::after {
    content: none;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------- ORDERED-ITEMS ----------------------------*/
/*====================================================================*/

.ordered-items__item {
    --_image-size: calc(
        12rem
        - 1.5rem * var(--is-medium)
        - 3rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

@media (max-width: 22.49375em) {

    .ordered-items__item {
        --_image-size: 8rem;
    }
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__item {
        --_image-size: calc(
            5.8rem
            - 1.4rem * var(--is-small)
            - 0.6rem * var(--is-tight)
        );
    }
}

.ordered-items__item {

    display: grid;
    grid-template-columns: var(--_image-size) minmax(0, 1fr) minmax(max-content, 12ch) min-content;
    grid-template-areas: "image product price remove";
    align-items: center;
    -moz-column-gap: calc(
        3rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    column-gap: calc(
        3rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    .ordered-items__item {
        grid-template-columns: var(--_image-size) 0rem auto minmax(0, 1fr) min-content;
        grid-template-rows: min-content min-content minmax(min-content, 1fr) min-content;
        grid-template-areas:
            "image  .      authors authors authors"
            "image  .      title   title   title  "
            "image  .      info-1  info-1  info-1 "
            "info-2 info-2 info-2  price   remove "
            "div    div    div     div     div    ";
        align-items: start;
        -moz-column-gap: calc(
            1.8rem
            - 0.5rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        column-gap: calc(
            1.8rem
            - 0.5rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        row-gap: calc(
            0.8rem
            - 0.2rem * var(--is-medium)
            - 0.4rem * var(--is-small)
        );
    }
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__item {
        grid-template-columns: var(--_image-size) auto max-content;
        grid-template-rows: min-content;
        grid-template-areas:
                "image title price"
                "div   div   div  ";
        align-items: center;
        -moz-column-gap: calc(
            2.4rem
            - 0.6rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        column-gap: calc(
            2.4rem
            - 0.6rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        row-gap: 0rem;
    }
}

* + .ordered-items__item {
    margin-top: 2rem;
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) :is(* + .ordered-items__item) {
        margin-top: calc(
            2.0rem
            - 0.4rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }

;
}

.ordered-items__item::before, .ordered-items__item::after {
    content: "";

    grid-column: product / remove;
    grid-row: 1;

    height: 0.1rem;

    background-color: #CBCBCB;

    pointer-events: none;
}

.ordered-items__item::before {
    margin-bottom: auto;
}

.ordered-items__item::after {
    margin-top: auto;
}

@media (max-width: 56.24375em) {
    .ordered-items__item::before {
        display: none;
    }

    .ordered-items__item::after {
        grid-area: div;

        margin-top: 0.5rem;
        margin-bottom: 0.2rem;
    }

    :is(:where(.ordered-items--summary) .ordered-items__item)::after {
        margin-top: calc(
            2.0rem
            - 0.4rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        margin-bottom: 0;
    }

    :is(:where(.ordered-items--summary) .ordered-items__item):last-child::after {
        display: none;
    }
}

.ordered-items__item > * {
    grid-row: 1;
}

.ordered-items__image-link {
    position: relative;

    align-self: start;
    grid-area: image;

    padding-bottom: calc(304 / 251 * 100%);

    background-color: var(--color-light-dimmed);
    border-radius: 1.5rem;
    outline-offset: -0.2rem;
}

@media (min-width: 56.25em) {

    .ordered-items__image-link {
        margin-top: -0.6rem;
    }
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__image-link {
        padding-bottom: calc(53 / 38 * 100%);

        border-radius: 0rem;
    }
}

.ordered-items__image-link:active {
    background-color: var(--color-light-dimmed-darker);
}

.ordered-items__image {
    position: absolute;
    top: calc(
        1.9rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
    );
    right: calc(
        2.1rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
    bottom: calc(
        1.9rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
    );
    left: calc(
        2.1rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__image {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

.ordered-items__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -o-object-fit: scale-down;

    object-fit: scale-down;
    width: 100%;
    height: 100%;

    border-radius: 0.5rem;
}

.ordered-items__product {
    grid-area: product;
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: start;
    -moz-column-gap: calc(
        4rem
        - 0.4rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    column-gap: calc(
        4rem
        - 0.4rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    row-gap: calc(
        0.8rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );

    padding-top: calc(
        2rem
        - 0.4rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    padding-bottom: calc(
        2rem
        - 0.4rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-left: calc(
        2rem
        - 0.4rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-right: calc(
        2rem
        - 0.4rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

@media (max-width: 93.99375em) {

    .ordered-items__product {
        grid-template-columns: 1fr 2fr;
    }
}

@media (max-width: 77.74375em) {

    .ordered-items__product {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 63.99375em) {

    .ordered-items__product {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 56.24375em) {

    .ordered-items__product {
        display: contents;
    }
}

.ordered-items__authors,
.ordered-items__title,
.ordered-items__info {
    --_line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--_line-clamp);
    line-clamp: var(--_line-clamp);
    overflow: hidden;
}

:is(.ordered-items__authors,.ordered-items__title,.ordered-items__info), :is(.ordered-items__authors,.ordered-items__title,.ordered-items__info) :where(a) {
    outline-offset: -0.2rem;
}

.ordered-items__authors {
    grid-column: 1 / -1;

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    .ordered-items__authors {
        grid-area: authors;

        margin-top: 0.8rem;
    }
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__authors {
        display: none;
    }
}

.ordered-items__authors :where(a) {
    font-weight: inherit;
    -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
            text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
}

@media (hover: hover) {
    :is(.ordered-items__authors :where(a)):hover {
        color: var(--color-dark);
        -webkit-text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
                text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
    }
}

:is(.ordered-items__authors :where(a)):active {
    color: var(--color-dark-dimmed);
}

.ordered-items__title {
    grid-column: 1 / -1;

    max-width: 60ch;

    font-size: calc(
        2rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent;

    color: var(--color-text);
}

@media (max-width: 56.24375em) {

    .ordered-items__title {
        grid-area: title;
    }
}

@media (max-width: 39.99375em) {

    .ordered-items__title {
        --_line-clamp: 3;
    }
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__title {
        --_line-clamp: 3;
    }
}

@media (hover: hover) {
    .ordered-items__title:where([href]):hover {
        color: var(--color-primary);
        -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
    }
}

.ordered-items__title:where([href]):active {
    color: var(--color-dark-dimmed);
}

.ordered-items__info {
    margin-top: 0.2rem;

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-small)
    );
}

@media (max-width: 56.24375em) {

    .ordered-items__info {
        grid-area: info-1;

        line-height: 1.3;
    }

    .ordered-items__info + .ordered-items__info {
        --_line-clamp: 3;

        grid-area: info-2;
        align-self: center;
    }

    @media (max-width: 29.99375em) {
        .ordered-items__info + .ordered-items__info {
            margin-top: -0.4rem;
        }
    }
    @media (max-width: 22.49375em) {
        .ordered-items__info + .ordered-items__info {
            width: var(--_image-size);
            min-width: -moz-min-content;
            min-width: min-content;
        }
    }
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__info {
        display: none;
    }
}

.ordered-items__info :where(a) {
    font-weight: inherit;
    -webkit-text-decoration-color: rgba(var(--color-text-rgb), 0.5);
            text-decoration-color: rgba(var(--color-text-rgb), 0.5);
    color: var(--color-text);
}

@media (hover: hover) {
    :is(.ordered-items__info :where(a)):hover {
        color: var(--color-primary);
        -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
    }
}

:is(.ordered-items__info :where(a)):active {
    color: var(--color-dark-dimmed);
}

.ordered-items__info :where(strong) {
    color: var(--color-primary);
}

@media (max-width: 29.99375em) {

    .ordered-items__info :where(strong) {
        display: block;
    }
}

.ordered-items__price {
    grid-area: price;
    justify-self: end;

    font-size: 2.4rem;
    font-weight: bold;
    text-align: right;
}

@media (max-width: 56.24375em) {

    .ordered-items__price {
        align-self: end;

        margin-top: 0.8rem;
    }
}

@media (max-width: 22.49375em) {

    .ordered-items__price {
        font-size: 2rem;
    }
}

:where(.ordered-items--summary) .ordered-items__price {
    margin-right: calc(
        1.2rem
        - 0.6rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    :where(.ordered-items--summary) .ordered-items__price {
        align-self: center;

        margin-top: 0;
        margin-left: calc(
            2.4rem
            - 1.6rem * var(--is-small)
            - 0.8rem * var(--is-tight)
        );

        font-size: calc(
            2.4rem
            - 0.3rem * var(--is-small)
            - 0.1rem * var(--is-tight)
        );
    }
}

.ordered-items__remove {
    grid-area: remove;

    margin-right: calc(
        1.2rem
        - 0.6rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 94em) {

    .ordered-items__remove {
        margin-left: 2.2rem;
    }
}

@media (max-width: 56.24375em) {

    .ordered-items__remove {
        align-self: end;

        margin-top: 0.8rem;
    }
}

@media (max-width: 29.99375em) {

    .ordered-items__remove {
        margin-bottom: 0.2rem;
        margin-left: -0.2rem;
    }
}

@media (max-width: 22.49375em) {

    .ordered-items__remove {
        margin-bottom: 0rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*-------------------- EXPANDABLE-INLINE-CONTENT ---------------------*/
/*====================================================================*/

.expandable-inline-content {
    backface-visibility: hidden;

    overflow: hidden;
}

.expandable-inline-content__hellip {
    position: absolute;
    display: none;
}

:where(.js .expandable-inline-content:has(.expandable-inline-content__button:not([aria-expanded="true"]))) .expandable-inline-content__hellip {
    display: inline;
    animation: expandable-inline-content__hellip 0.3s ease-out 0s 1 forwards;
}

@keyframes expandable-inline-content__hellip {
    from {
        filter: opacity(0%);
    }
    to {
        filter: opacity(100%);
    }
}

.expandable-inline-content__button {
    font-weight: 600;
    text-decoration: underline;
    -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
            text-decoration-color: rgba(var(--color-primary-rgb), 0.5);

    color: var(--color-primary);
    outline-offset: -0.2rem;
    backface-visibility: hidden;
}

@media (hover: hover) {
    .expandable-inline-content__button:hover {
        color: var(--color-dark);
        -webkit-text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
                text-decoration-color: rgba(var(--color-dark-rgb), 0.5);
    }
}

.expandable-inline-content__button:active {
    color: var(--color-dark-dimmed);
}

:where(.expandable-inline-content):has([style]) .expandable-inline-content__button {
    animation: expandable-inline-content__button 0.6s ease 0s 1 forwards;
}

.expandable-inline-content__button[aria-expanded="true"] {
    animation: expandable-inline-content__button-2 0.6s ease 0s 1 forwards;
}

.expandable-inline-content__button[aria-expanded="true"] .expandable-inline-content__expanded-text, .expandable-inline-content__button[aria-expanded="false"] .expandable-inline-content__collapsed-text {
    display: none;
}

@keyframes expandable-inline-content__button {
    0% {
        opacity: 0;
    }
    33.3% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes expandable-inline-content__button-2 {
    0% {
        opacity: 0;
    }
    33.3% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*---------------------- INLINE-MODAL-COMPONENT ----------------------*/
/*====================================================================*/

/*--------------------------------------------------------------------*/
/*------------------------------ INLINE ------------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 64em) {

    .inline-modal-component__opener-toggle,
    .inline-modal-component__overlay,
    .inline-modal-component__closer,
    .inline-modal-component__title {
        display: none;
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ MODAL -------------------------------*/
/*--------------------------------------------------------------------*/

@media (max-width: 63.99375em) {

    .inline-modal-component {
        --_c-inline-modal-component-padding: calc(
            5.8rem
            - 1.2rem * var(--is-medium)
            - 2.4rem * var(--is-small)
            - 0.6rem * var(--is-tight)
        );

        position: fixed;
        top: 0;
        left: 0;
        z-index: calc(var(--page-dialog-z-index) - 5);

        display: grid;
        grid-template: 100% / 100%;
        align-items: center;
        justify-content: center;

        width: 0%;
        height: 0%;

        outline: none;
        visibility: hidden;

        transition: var(--transition-hide-prop);
    }

    :where(.js) .inline-modal-component:not([aria-hidden="true"]), :where(.no-js .inline-modal-component__opener-toggle):checked ~ .inline-modal-component {
        width: 100%;
        height: 100%;

        visibility: visible;

        transition: var(--transition-show-prop);
    }

    @media (max-width: 63.99375em) {
        :where(.js) .inline-modal-component:not(.is-initialized) {
            display: none;
        }
    }

    /*---------------------------- CLOSER / OPENER ----------------------------*/
    .inline-modal-component__opener-toggle:checked {
        --_offset: 0.8rem;
    }

    @media (min-width: 48em) {
        .inline-modal-component__opener-toggle:checked {
            --_offset: 1.2rem;
        }
    }
    .inline-modal-component__opener-toggle:checked {

        position: fixed;
        top: var(--_offset);
        right: var(--_offset);
        z-index: calc(var(--page-dialog-z-index) - 4);

        width: 3.2rem;
        height: 3.2rem;
    }

    .inline-modal-component__closer {
        --_offset: 0.8rem;
    }

    @media (min-width: 48em) {

        .inline-modal-component__closer {
            --_offset: 1.2rem;
        }
    }

    .inline-modal-component__closer {

        position: sticky;
        top: calc(var(--_offset) - var(--page-padding));
        right: calc(var(--_offset) - var(--_c-inline-modal-component-padding));
        z-index: 3;

        margin-top: calc(var(--_offset) - var(--page-padding));
        margin-right: calc(var(--_offset) - var(--_c-inline-modal-component-padding));
        margin-left: auto;
    }

    /*---------------------------- OVERLAY ----------------------------*/
    .inline-modal-component__overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;

        background-color: var(--color-dark);
        opacity: 0;
        visibility: hidden;

        pointer-events: auto;

        transition: opacity 0.3s cubic-bezier(.35, .1, .35, .9) 0s, visibility 0s linear 0.3s;
        will-change: opacity;
    }

    @media (max-width: 47.99375em) {

        .inline-modal-component__overlay {
            display: none;
        }
    }

    :where(.js .inline-modal-component:not([aria-hidden="true"])) .inline-modal-component__overlay, :where(.no-js .inline-modal-component__opener-toggle):checked ~ .inline-modal-component .inline-modal-component__overlay {
        opacity: 0.8;
        visibility: visible;

        transition: var(--transition-show-prop);
    }

    /*---------------------------- BOX ----------------------------*/
    .inline-modal-component__box {
        position: relative;
        z-index: 2;

        width: 100%;
        height: 100%;
        max-height: 100%;
        padding: var(--_c-inline-modal-component-padding);
        padding-top: var(--page-padding);
        margin: auto;

        transform: translateY(-10px);

        background-color: #fff;
        opacity: 0;
        outline: none;
        visibility: hidden;

        overflow: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;

        transition: var(--transition-hide-prop);
        will-change: opacity, transform;
    }

    @media (min-width: 48em) {

        .inline-modal-component__box {
            width: 75%;
            height: auto;
            max-height: 80%;

            border-radius: 2.7rem;
            box-shadow: 0.2rem 0.4rem 0.9rem 0.6rem rgba(0, 0, 0, 0.06);
        }
    }

    :where(.js .inline-modal-component:not([aria-hidden="true"])) .inline-modal-component__box, :where(.no-js .inline-modal-component__opener-toggle):checked ~ .inline-modal-component .inline-modal-component__box {
        transform: translateY(0px);

        opacity: 1;
        visibility: visible;

        transition: var(--transition-show-prop);
    }

    .inline-modal-component__title {
        margin-bottom: calc(
            2.4rem
            - 0.2rem * var(--is-medium)
            - 0.6rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

/*====================================================================*/
/*---------------------------- PAGE-HEADER ---------------------------*/
/*====================================================================*/

.page-header {
    position: relative;
}

.page-header::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;

    width: 100%;
    height: calc(
        2.8rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    background: linear-gradient(
        180deg,
        rgba(96, 96, 96, 0.12) 0%,
        rgba(115, 115, 115, 0.00) 55%
    );

    pointer-events: none;

}

@media (max-width: 47.99375em) {
    .page-header::after {
        content: none;
    }
}

/*--------------------------------------------------------------------*/
/*------------------------- PAGE-HEADER__TOP -------------------------*/
/*--------------------------------------------------------------------*/

.page-header__top {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);

    font-size: 1.5rem;
    line-height: 1.7rem;
    font-weight: 500;
    text-align: center;
}

.page-header__top-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(min-content, max-content) minmax(max-content, 1fr);
    grid-template-areas: ". content social-media-list";
    align-items: center;

    padding-top: 0.8rem;
    padding-bottom: 1rem;
}

.page-header__top-wrapper > * {
    grid-area: content;
}

.page-header__social-media-list {
    grid-area: social-media-list;
    justify-self: end;

    margin-top: -0.9rem;
    margin-bottom: -0.9rem;
}

/*--------------------------------------------------------------------*/
/*------------------------ PAGE-HEADER__MAIN -------------------------*/
/*--------------------------------------------------------------------*/

.page-header__main {
    position: relative;
    z-index: calc(var(--page-dialog-z-index) - 6);

    padding-top: calc(
        1.1rem
        - 0.3rem * var(--is-small)
    );

    background-color: #fff;
}

.has-modal .page-header__main {
    z-index: 2;
}

.page-header__main-wrapper {
    display: grid;
    grid-template-columns: max-content max(1rem, min(4%, 5rem)) minmax(min-content, 1fr) max(1rem, min(4%, 5rem)) max-content;
    grid-template-areas:
            "logo     .        search   .        btns    "
            "main-nav main-nav main-nav main-nav main-nav";
    align-items: center;

    padding-top: 1rem;
}

@media (max-width: 47.99375em) {

    .page-header__main-wrapper {
        grid-template-columns: max-content minmax(max-content, auto) min-content;
        grid-template-areas:
                "logo   btns   main-nav"
                "search search search  ";
    }
}

:where(.js) .page-header__main-wrapper {
    display: contents;
}

:where(.no-js) .page-header__main-fixable-filler, :where(.page-header__main):not(.is-fixed) .page-header__main-fixable-filler, :where(:root.has-modal) .page-header__main-fixable-filler {
    display: none;
}

.page-header__main-desktop-fixable,
.page-header__main-mobile-fixable {
    --_box-shadow-opacity: 0;

    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--page-dialog-z-index) - 6);

    display: grid;
    grid-template-columns: inherit;
    grid-template-areas: inherit;
    align-items: inherit;

    background-color: #fff;
    -o-border-image: linear-gradient(#fff, #fff) 1 / 0 / 0 100vw;
    border-image: linear-gradient(#fff, #fff) 1 fill / 0 / 0 100vw;
    box-shadow: 0.7rem 0.8rem 1rem 0rem rgba(0, 0, 0, var(--_box-shadow-opacity));

    transition: box-shadow 0.3s ease, opacity 0.3s ease;
}

:where(.no-js) :is(.page-header__main-desktop-fixable,.page-header__main-mobile-fixable) {
    display: contents;
}

@media (max-width: 47.99375em) {

    .page-header__main-mobile-fixable {
        padding-top: inherit;
        padding-bottom: 1rem;
        margin-bottom: 1.2rem;
    }

    .is-fixed:where(:root:not(.has-modal) .page-header__main) .page-header__main-mobile-fixable {
        --_box-shadow-opacity: 0.06;

        position: fixed;
    }
}

.page-header__main-desktop-fixable {
    grid-column: logo / btns;
}

@media (min-width: 48em) {

    .page-header__main-desktop-fixable {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

:where(.page-header__main):not(.is-fixed) .page-header__main-desktop-fixable {
    padding-left: 0rem;
    padding-right: 0rem;
}

@media (min-width: 48em) {

    .is-fixed:where(:root:not(.has-modal) .page-header__main) .page-header__main-desktop-fixable {
        --_box-shadow-opacity: 0.06;

        position: fixed;
    }
}

@media (max-width: 47.99375em) {

    .is-fixed:where(:root:not(.has-modal) .page-header__main) .page-header__main-desktop-fixable {
        padding-left: 0rem;
        padding-right: 0rem;
    }
}

/*---------------------------- LOGO ----------------------------*/

.page-header__logo {
    grid-area: logo;

    display: block;

    margin-right: calc(
        2rem
        - 1rem * var(--is-medium)
        - 1rem * var(--is-small)
    );
}

.page-header__logo-img {
    width: calc(
        18rem
        - 1.0rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    height: auto;
}

@media (max-width: 22.49375em) {

    .page-header__logo-img {
        max-width: 9.4rem;
    }
}

/*---------------------------- SEARCH ----------------------------*/

.page-header__desktop-search-target:empty,
.page-header__mobile-search-target:empty {
    display: none;
}

.page-header__desktop-search-target {
    grid-area: search;
}

@media (max-width: 47.99375em) {

    .page-header__search {
        padding-top: 2.2rem;
        padding-bottom: 2.2rem;
    }

    :where(.js) .page-header__search {
        padding-top: 0;
    }
}

.page-header__search-form {
    display: grid;
    align-items: center;
}

.page-header__search-form > * {
    grid-area: 1 / 1;
}

.page-header__search-input {
    padding-left: calc(5.8rem - 0.6rem * var(--is-small));

    font-size: calc(1.5rem - 0.1rem * var(--is-small));
}

.page-header__search-btn {
    margin-top: 0.1rem;
    margin-left: calc(1rem - 0.2rem * var(--is-small));
}

/*---------------------------- BTNS ----------------------------*/

.page-header__btns {
    grid-area: btns;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 47.99375em) {

    .page-header__btns {
        margin-left: auto;
    }
}

@media (min-width: 64em) {
    .page-header__btn--user .btn__text {
        margin-left: calc(-0.1rem * var(--is-tight));
        margin-right: calc(-0.1rem * var(--is-tight));
    }

    .page-header__btn--user .btn__icon {
        margin-left: calc(
            -0.4rem
            - 0.2rem * var(--is-tight)
        );
    }
}

@media (max-width: 39.99375em), (min-width: 48em) and (max-width: 63.99375em) {

    .page-header__btn--user {
        padding-left: calc(1.8rem - 0.2rem * var(--is-small));
        padding-right: calc(1.8rem - 0.2rem * var(--is-small));
    }

    .page-header__btn--user .btn__text {
        width: 0rem;

        overflow: hidden;
    }

    .page-header__btn--user .btn__icon {
        margin: auto;

        [*|href] {
            transform: none;
        }
    }
}

.page-header__btn--cart {
    justify-content: center;
    min-width: calc(
        7.6rem
        - 0.4rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-left: calc(
        1.2rem
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-small) * var(--is-tight)
    );
    padding-right: calc(
        1.2rem
        - 0.2rem * var(--is-small)
        - 0.2rem * var(--is-small) * var(--is-tight)
    );

    .btn__icon [*|href$="#cart"] {
        transform: none;
    }
}

/*---------------------------- MAIN-NAV ----------------------------*/

.page-header__main-nav {
    grid-area: main-nav;

    margin-top: auto;

    margin-bottom: auto;
}

@media (min-width: 48em) {

    .page-header__main-nav {
        margin-top: 1.4rem;
    }

    :where(.no-js) .page-header__main-nav {
        margin-top: 2.4rem;
    }
}


/*====================================================================*/
/*----------------------------- MAIN-NAV -----------------------------*/
/*====================================================================*/

/*--------------------------------------------------------------------*/
/*----------------------------- DESKTOP ------------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 48em) {
    .main-nav {
        position: relative;

        display: flex;
        gap: 2rem;

        padding-top: 0.1rem;

        -o-border-image: linear-gradient(var(--color-light-dimmed-darker), var(--color-light-dimmed-darker)) 1 / 0.1rem 0 0 0 / 0 100vw;

        border-image: linear-gradient(var(--color-light-dimmed-darker), var(--color-light-dimmed-darker)) 1 / 0.1rem 0 0 0 / 0 100vw;
    }

    .main-nav--page-footer {
        padding-top: 0;

        -o-border-image: none;

        border-image: none;
    }

    .main-nav__items-wrapper {
        display: contents;
    }

    .main-nav__social-media-list {
        margin-left: auto;
    }

    /*---------------------------- ITEMS ----------------------------*/
    .main-nav__items {
        --_item-padding: calc(2.6rem - 0.6rem * var(--is-medium));

        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;

        min-height: 8.2rem;
        margin-left: calc(var(--_item-padding) * -1);
    }

    .main-nav__item {
        display: flex;
    }

    .main-nav__item--push-right {
        margin-left: auto;
    }

    .main-nav__link,
    .main-nav__btn {
        display: flex;
        align-items: center;

        padding-top: 0.9rem;
        padding-bottom: 1.4rem;
        padding-left: var(--_item-padding);
        padding-right: var(--_item-padding);

        font-size: 1.6rem;
        -webkit-text-decoration-color: transparent;
                text-decoration-color: transparent;
        text-decoration-thickness: 0.1rem;
        line-height: 1.9rem;

        color: var(--color-text);
        outline-offset: -0.2rem;
    }

    :where(.main-nav--page-footer) :is(.main-nav__link,.main-nav__btn) {
        color: var(--color-text-inverse);
    }

    :is(.main-nav__link,.main-nav__btn):where(.main-nav__link--primary) {
        font-weight: 600;

        color: var(--color-primary);
    }

    @media (hover: hover) {
        :is(.main-nav__link,.main-nav__btn):hover {
            color: var(--color-primary);
            -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                    text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
        }
    }
    :is(.main-nav__link,.main-nav__btn):is([aria-current="true"],[aria-current="page"]) {
        color: var(--color-primary);
    }

    :is(.main-nav__link,.main-nav__btn):active {
        color: var(--color-dark-dimmed);
    }

    :where(.main-nav--page-footer) :is(.main-nav__link,.main-nav__btn):active {
        color: var(--color-dimmed);
    }

    :where(.main-nav__item--push-right) .main-nav__link {
        padding-right: 0;
    }

    .main-nav__btn {
        position: relative;
    }

    .main-nav__btn::after {
        content: "";

        position: absolute;
        bottom: 0;
        left: calc(var(--_item-padding) * 0.5);

        width: calc(100% - var(--_item-padding));
        height: 0.4rem;

        background-color: var(--color-primary);
        opacity: 0;

        transition: inherit;
    }

    :where(.main-nav--page-footer) .main-nav__btn::after {
        top: 0;
        bottom: auto;
    }

    .main-nav__btn[aria-expanded="true"]::after {
        opacity: 1;
    }

    .main-nav__buyback-btn {
        align-self: center;

        margin-top: -0.2rem;
    }

    .main-nav__icon {
        flex-shrink: 0;

        width: auto;
        height: 1.125em;
        margin-right: 0.875em;
    }

    .main-nav__arrow {
        flex-shrink: 0;

        width: 1rem;
        height: 0.6rem;
        margin-top: 0.2rem;
        margin-left: 1.1rem;

        transition: inherit;
        transition-property: rotate;
    }

    :where(.main-nav--page-footer) .main-nav__arrow {
        transform: rotate(180deg);
    }

    [aria-expanded="true"]:where(.main-nav__btn) .main-nav__arrow {
        rotate: 180deg;
    }

    /*---------------------------- SUBITEMS ----------------------------*/
    .main-nav__subitems-wrapper {
        --_box-hor-extension: min(var(--page-padding) / 2, var(--_item-padding) / 2);
    }

    @media (min-width: 100.25em) {

        .main-nav__subitems-wrapper {
            --_box-hor-extension: 5.8rem;
        }
    }

    .main-nav__subitems-wrapper {

        position: absolute;
        top: 100%;
        left: 0;
        z-index: 2;

        display: grid;
        grid-template-columns: 5fr 1fr;
        gap: calc(3rem - 1rem * var(--is-medium));

        width: calc(100% + var(--_box-hor-extension) * 2);
        max-height: min(75vh, calc(100vh - 12rem));
        padding: calc(2.6rem - 0.4rem * var(--is-medium)) calc(5.8rem - 1.8rem * var(--is-medium)) calc(2.8rem - 0.4rem * var(--is-medium));
        margin-left: calc(-1 * var(--_box-hor-extension));

        transform: translateY(-10px);

        background-color: #fff;
        border-radius: 2.7rem;
        box-shadow: 0.7rem 0.8rem 1rem 0rem rgba(0, 0, 0, 0.06);
        opacity: 0;
        visibility: hidden;

        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: contain;

        transition: transform 0.12s ease, opacity 0.12s ease, visibility 0s linear 0.12s;
        will-change: transform, opacity;
    }

    .main-nav__subitems-wrapper::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    :where(.main-nav--page-footer) .main-nav__subitems-wrapper {
        top: auto;
        bottom: 100%;

        transform: translateY(10px);
    }

    :where(.no-js .main-nav__item):focus-within .main-nav__subitems-wrapper, [aria-expanded="true"] ~ .main-nav__subitems-wrapper {
        transform: translateY(0px);

        opacity: 1;
        visibility: visible;

        transition: transform 0.08s ease-out, opacity 0.08s ease-out, visibility 0s linear 0s;
    }

    .main-nav__subitems {
        -moz-column-count: calc(
            3
            - 1 * var(--is-medium)
            - 1 * var(--is-tight)
        );
        column-count: calc(
            3
            - 1 * var(--is-medium)
            - 1 * var(--is-tight)
        );
        -moz-column-gap: calc(3rem - 1rem * var(--is-medium));
        column-gap: calc(3rem - 1rem * var(--is-medium));
    }

    .main-nav__sublink {
        display: block;

        padding-top: 0.375em;

        padding-bottom: 0.375em;

        font-size: calc(1.6rem - 0.1rem * var(--is-medium));
        font-weight: 600;
        -webkit-text-decoration-color: transparent;
                text-decoration-color: transparent;
        text-decoration-thickness: 0.1rem;
        line-height: 1.4375;

        color: var(--color-text);
    }

    @media (hover: hover) {
        .main-nav__sublink:hover {
            color: var(--color-primary);
            -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                    text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
        }
    }
    .main-nav__sublink:is([aria-current="true"],[aria-current="page"]) {
        color: var(--color-primary);
    }

    .main-nav__sublink:active {
        color: var(--color-dark-dimmed);
    }

    .main-nav__subitems-icon {
        max-width: 100%;
        min-width: 10rem;
        height: auto;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
    }

    @media (max-width: 77.74375em) {

        .main-nav__subitems-icon {
            margin-bottom: 0;
        }
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ MOBILE ------------------------------*/
/*--------------------------------------------------------------------*/

@media (max-width: 47.99375em) {

    .main-nav {
        position: relative;
        z-index: calc(var(--page-dialog-z-index) - 5);

        display: flex;
        align-items: center;

        margin-left: 1.5rem;
    }

    @media (max-width: 22.49375em) {

        .main-nav {
            margin-left: 1rem;
        }
    }

    .main-nav:where(.main-nav--page-footer) {
        z-index: auto;

        margin-left: 0;
    }

    .main-nav__items-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        z-index: calc(var(--page-dialog-z-index) - 5);

        display: grid;
        grid-template-rows: 100%;

        width: 100%;
        height: 100%;

        transform: translateY(-10px);

        background-color: #fff;
        opacity: 0;
        visibility: hidden;

        overflow: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        overscroll-behavior: contain;

        transition: var(--transition-hide-prop);
        will-change: transform, opacity;
    }

    .main-nav__items-wrapper.is-expanded, :where(.no-js .main-nav__opener-toggle):checked ~ .main-nav__items-wrapper {
        transform: translateY(0px);

        opacity: 1;
        visibility: visible;

        transition: var(--transition-show-prop);
    }

    .main-nav__items-wrapper > * {
        grid-area: 1 / 1;
    }

    /*---------------------------- CLOSER ----------------------------*/
    .main-nav__closer {
        position: fixed;
        top: 0.8rem;
        right: 0.8rem;
        z-index: 3;
    }

    /*---------------------------- ITEMS ----------------------------*/
    .main-nav__items {
        --_slide-duration: calc(
            0.4s
            - 0.05s * var(--is-small)
        );
        --_padding: calc(2.5rem + max(0px, 100vw - 375px) * 0.04);
        --_padding-top: calc(var(--_padding) + 3.5rem + max((var(--_padding) - 1rem) * -1, min(0px, 100vh - 600px) * 0.05));

        padding-top: var(--_padding-top);
        padding-bottom: var(--_padding);

        transform: translateX(0%);

        font-size: calc(
            1.6rem
            - 0.1rem * var(--is-tight)
        );
        font-weight: 600;

        backface-visibility: hidden;

        transition: transform var(--_slide-duration) cubic-bezier(0, 0, .25, 1) 0s;
        will-change: transform;
    }

    .has-subitems-opened:where(.main-nav) .main-nav__items {
        transform: translateX(-100%);
    }

    .main-nav__item {
        border-bottom: 0.1rem solid #F2F3F4;
    }

    .main-nav__item:first-child {
        border-top: 0.1rem solid #F2F3F4;
    }

    .main-nav__item--has-subitems {
        margin-top: 0.3333em;

        border-bottom: none;
    }

    .main-nav__item--has-subitems + .main-nav__item--has-subitems {
        margin-top: 0;
    }

    .main-nav__item--has-subitems + :not(.main-nav__item--has-subitems) {
        margin-top: 0.2em;

        border-top: 0.1rem solid #F2F3F4;
    }

    .main-nav__link,
    .main-nav__btn {
        display: flex;
        align-items: center;

        width: 100%;
        padding-top: 0.6em;
        padding-bottom: 0.6em;
        padding-left: var(--_padding);
        padding-right: var(--_padding);

        -webkit-text-decoration-color: transparent;

                text-decoration-color: transparent;
        text-decoration-thickness: 0.1rem;

        color: var(--color-text);
        outline-offset: -0.2rem;
    }

    @media (hover: hover) {
        :is(.main-nav__link,.main-nav__btn):hover {
            -webkit-text-decoration-color: rgba(var(--color-text-rgb), 0.5);
                    text-decoration-color: rgba(var(--color-text-rgb), 0.5);
        }
    }
    :is(.main-nav__link,.main-nav__btn):is([aria-current="true"],[aria-current="page"]) {
        color: var(--color-primary);
    }

    :is(.main-nav__link,.main-nav__btn):active {
        color: var(--color-dark-dimmed);
    }

    .main-nav__link--primary {
        color: var(--color-primary);
    }

    .main-nav__btn {
        padding-top: 1.0666em;
        padding-bottom: 1.0666em;

        font-weight: 700;

        container-type: inline-size;
    }

    .main-nav__icon {
        height: 1.3333em;
        width: 1.8666em;
        margin-right: 1.3333em;

        [*|href$="#books-btn"] {
            scale: 0.9;
            transform-origin: center center;
        }
    }

    .main-nav__arrow {
        margin-left: 1rem;
        margin-top: 0.4rem;

        transform: translateY(-0.2rem) rotate(-90deg);
    }

    @container (max-width: 40rem) {

        .main-nav__arrow {
            margin-top: 0;
            margin-left: auto;
        }
    }

    /*---------------------------- SUBITEMS ----------------------------*/
    .main-nav__back,
    .main-nav__sublink {
        display: block;

        width: 100%;
        padding-top: 0.6em;
        padding-bottom: 0.6em;
        padding-left: var(--_padding);
        padding-right: var(--_padding);

        -webkit-text-decoration-color: transparent;

                text-decoration-color: transparent;
        text-decoration-thickness: 0.1rem;

        color: var(--color-text);
        outline-offset: -0.2rem;

        transition-property: -webkit-text-decoration-color;

        transition-property: text-decoration-color;

        transition-property: text-decoration-color, -webkit-text-decoration-color;
    }

    @media (hover: hover) {
        :is(.main-nav__back,.main-nav__sublink):hover {
            -webkit-text-decoration-color: rgba(var(--color-text-rgb), 0.5);
                    text-decoration-color: rgba(var(--color-text-rgb), 0.5);
        }
    }
    :is(.main-nav__back,.main-nav__sublink):is([aria-current="true"],[aria-current="page"]) {
        color: var(--color-primary);
    }

    :is(.main-nav__back,.main-nav__sublink):active {
        color: var(--color-dark-dimmed);
    }

    .main-nav__back {
        display: flex;
        align-items: center;

        font-weight: 700;
    }

    :where(.main-nav__back) .main-nav__arrow {
        transform: none;

        margin: 0;
        margin-top: 0.1rem;
        margin-right: 1rem;
    }

    :where(.no-js) .main-nav__subitems {
        background-color: var(--color-light-dimmed);
        border-bottom: 0.1rem solid #F2F3F4;
    }

    :where(.no-js) .main-nav__subitem {
        border-top: 0.1rem solid #F2F3F4;
    }

    :where(.no-js) .main-nav__sublink {
        text-indent: 1em;
    }

    :where(.js) .main-nav__subitems-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;

        width: 100%;
        height: 100vh;
        height: 100dvh;

        padding-top: var(--_padding-top);
        padding-bottom: var(--_padding);

        transform: translateX(100%);

        background-color: white;
        visibility: hidden;

        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: contain;

        transition: visibility 0s linear var(--_slide-duration);
        will-change: visibility;
    }

    :where(.js) .main-nav__subitems-wrapper::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    [aria-expanded="true"]:where(.main-nav__btn) ~ :is(:where(.js) .main-nav__subitems-wrapper) {
        visibility: visible;

        transition: none;
    }

    :where(.js) .main-nav__subitem {
        border-bottom: 0.1rem solid #F2F3F4;
    }

    :where(.js) .main-nav__subitem--is-back {
        position: sticky;
        top: calc(-1 * var(--_padding-top) + 0.8rem);

        margin-top: calc(-1 * var(--_padding-top) + 0.8rem);

        background-color: #fff;
    }

    :is(:where(.js) .main-nav__subitem--is-back)::before {
        content: "";

        position: absolute;
        bottom: 100%;

        height: 0.8rem;
        width: 100%;

        background-color: inherit;
    }

    /*---------------------------- OPENER ----------------------------*/
    .main-nav__opener-toggle {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        cursor: pointer;
    }

    .main-nav__opener-toggle:checked {
        position: fixed;
        top: 1rem;
        right: 1.6rem;
        bottom: auto;
        left: auto;
        z-index: calc(var(--page-dialog-z-index) - 4);
    }

    .main-nav__opener-toggle,
    .main-nav__opener-icon,
    .main-nav__opener {
        width: 3.2rem;
        height: 3.2rem;
    }

    .main-nav__opener {
        position: relative;
    }

    :where(.main-nav--page-footer) .main-nav__opener {
        margin-right: 2.2rem;
    }

    @media (hover: hover) {
        .main-nav__opener-toggle:hover ~ .main-nav__opener, .main-nav__opener:hover {
            color: var(--color-primary);
        }
    }
    .main-nav__opener-toggle:active ~ .main-nav__opener, .main-nav__opener:active {
        color: var(--color-dark-dimmed);
    }

    .main-nav__opener::before {
        content: "";

        position: absolute;
        top: -0.4rem;
        right: -0.4rem;
        bottom: -0.4rem;
        left: -0.4rem;
    }
}

/*====================================================================*/
/*---------------------------- PAGE-FOOTER ---------------------------*/
/*====================================================================*/

@media (min-width: 30em) and (max-width: 39.99375em) {

    .page-footer {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }
}

.page-footer {

    position: relative;

    padding-bottom: calc(
        12.2rem
        - 3.0rem * var(--is-medium)
        - 5.0rem * var(--is-small)
        - 2.0rem * var(--is-tight)
    );

    font-size: calc(
        1.6rem
        - 0.2rem * var(--is-small)
    );
}

@media (max-width: 93.99375em) {

    .page-footer {
        padding-top: 2rem;
    }
}

@media (max-width: 63.99375em) {

    .page-footer {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 22.49375em) {

    .page-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.page-footer::before { /* hide white line from rounding */
    content: "";

    position: absolute;
    bottom: 100%;
    left: 0;

    width: 100%;
    height: 2px;

    background-color: inherit;
}

.page-footer__wrapper {
    position: relative;
    z-index: 2;

    padding-top: calc(
        4.4rem
    );
}

.page-footer__drawing {
    position: absolute;
    bottom: 100%;
    right: 100%;
    z-index: 2;

    margin-bottom: -3rem;

    pointer-events: none;
}

@media (max-width: 100.30625em) {

    .page-footer__drawing {
        width: 9rem;
        margin-right: -7.8rem;
        margin-bottom: -2rem;
    }
}

@media (max-width: 77.74375em) {

    .page-footer__drawing {
        width: 8.4rem;
        margin-right: -7.4rem;
        margin-bottom: -2.4rem;
    }
}

@media (max-width: 47.99375em) {

    .page-footer__drawing {
        right: auto;
        left: var(--page-padding);

        width: calc(6.4rem + max(0px, 100vw - 360px) * 0.075);
        height: auto;
        margin: 0;
        margin-bottom: calc(-0.6rem + max(0rem, (100vw - 360px) * 0.05));
        margin-left: calc(
            -4rem
            + 1rem * var(--is-small)
            + 1rem * var(--is-tight)
        );
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------- MAIN -------------------------------*/
/*--------------------------------------------------------------------*/

.page-footer__main {
    --_inline-gap: 4rem;
}

@media (max-width: 39.99375em) {

    .page-footer__main {
        --_inline-gap: 3rem;
    }
}

.page-footer__main {

    display: grid;
    grid-template-columns: repeat(4, minmax(min-content, 1fr));
    gap: 4rem var(--_inline-gap);

    padding-bottom: calc(
        6.8rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
    );
}

@media (max-width: 77.74375em) {

    .page-footer__main {
        grid-template-columns: repeat(3, minmax(min-content, 1fr));
    }
}

@media (max-width: 63.99375em) {

    .page-footer__main {
        grid-template-columns: repeat(2, minmax(min-content, 1fr));
    }
}

@media (max-width: 29.99375em) {

    .page-footer__main {
        grid-template-columns: repeat(1, minmax(min-content, 1fr));
    }
}

.page-footer__main :where(a) {
    font-weight: 400;
    text-decoration: underline;
    -webkit-text-decoration-color: rgba(var(--color-text-inverse-rgb), 0.5);
            text-decoration-color: rgba(var(--color-text-inverse-rgb), 0.5);
}

@media (hover: hover) {
    :is(.page-footer__main :where(a)):hover {
        -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
    }
}

.page-footer__main .title {
    color: var(--color-primary);
}

.page-footer__column--products {
    display: grid;
    gap: calc(1.3rem) var(--_inline-gap);
}

@media (max-width: 63.99375em) {

    .page-footer__column--products {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 29.99375em) {

    .page-footer__column--products {
        grid-template-columns: minmax(max-content, 1.25fr) minmax(0, 2fr);
    }
}

.page-footer__column--reviews-payments {
    display: grid;
    grid-auto-rows: min-content;
    gap: 4rem var(--_inline-gap);
}

@media (min-width: 40em) {
    @media (max-width: 77.74375em) {

        .page-footer__column--reviews-payments {
            grid-column: 1 / span 2;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: center;
            justify-content: space-between;
            margin-top: 2rem;
        }
    }
}

@media (max-width: 39.99375em) {

    .page-footer__column--reviews-payments {
        grid-column: 1 / -1;

        margin-top: calc(1.0rem - 0.5rem * var(--is-small));
    }
}

.page-footer__address {
    margin-top: 3.2rem;

    line-height: 1.5;
}

/*---------------------------- LIST ----------------------------*/

:where(.title) + .page-footer__list {
    margin-top: calc(
        1.5rem
        - 0.5rem * var(--is-small)
    );
}

:is(:where(.title) + .page-footer__list):where(.page-footer__list--with-icons) {
    margin-top: calc(
        2.0rem
        - 0.5rem * var(--is-small)
    );
}

.page-footer__link {
    display: block;

    padding-top: calc(
        0.6rem
        - 0.2rem * var(--is-small)
    );

    padding-bottom: calc(
        0.6rem
        - 0.2rem * var(--is-small)
    );
}

:where(.page-footer__list--with-icons) .page-footer__link {
    display: flex;
    align-items: center;

    -webkit-text-decoration-color: transparent;

            text-decoration-color: transparent;
}

.page-footer__link-icon {
    flex-shrink: 0;

    width: calc(2.4rem - 0.4rem * var(--is-small));
    height: calc(2.4rem - 0.4rem * var(--is-small));
    margin-right: calc(1.5rem - 0.3rem * var(--is-small));

    color: var(--color-primary);
}

/*---------------------------- REVIEWS ----------------------------*/

.page-footer__reviews {
    display: grid;
    gap: 2.4rem;
}

.page-footer__google-review {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas:
            "logo stars"
            "logo text ";
    grid-gap: 0.2rem 2.4rem;
}

.page-footer__google-review-logo {
    grid-area: logo;
}

.page-footer__google-review-stars {
    grid-area: stars;

    max-width: 100%;
    height: auto;
}

.page-footer__google-review-text {
    grid-area: text;
}

/*---------------------------- PAYMENTS ----------------------------*/

.page-footer__payments-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem 2.4rem;
}

/*--------------------------------------------------------------------*/
/*------------------------------- NAV --------------------------------*/
/*--------------------------------------------------------------------*/

.page-footer__nav {
    padding-top: calc(
        1.5rem
    );
    padding-bottom: calc(
        1.5rem
    );
}

@media (max-width: 47.99375em) {

    .page-footer__nav {
        padding-top: calc(
            2.4rem
            - 0.4rem * var(--is-small)
        );
        padding-bottom: calc(
            2.4rem
            - 0.4rem * var(--is-small)
        );
    }
}

.page-footer__nav {

    -o-border-image: linear-gradient(var(--color-dark-strong), var(--color-dark-strong)) 1 / 0.1rem 0 / 0 100vw;

    border-image: linear-gradient(var(--color-dark-strong), var(--color-dark-strong)) 1 / 0.1rem 0 / 0 100vw;
}

/*--------------------------------------------------------------------*/
/*------------------------------ BOTTOM ------------------------------*/
/*--------------------------------------------------------------------*/

.page-footer__bottom {
    padding-top: calc(
        4.2rem
        - 0.8rem * var(--is-small)
    );

    font-size: calc(1.6rem - 0.1rem * var(--is-small));
    font-weight: calc(600 - 100 * var(--is-small));

    color: #979EA8;
}

/*====================================================================*/
/*------------------------------ INTRO -------------------------------*/
/*====================================================================*/

@media (min-width: 77.75em) and (max-width: 93.99375em) {

    .intro {
        --is-tight: 1;
    }
}

@media (min-width: 56.25em) and (max-width: 77.74375em) {

    .intro {
        --is-tight: 0;
        --is-medium: 1;
    }
}

@media (min-width: 48em) and (max-width: 56.24375em) {

    .intro {
        --is-tight: 1;
    }
}

.intro {

    position: relative;

    background-color: #fff;

    overflow: hidden;
}

@media (max-width: 47.99375em) {

    .intro {
        display: grid;
        grid-template-rows: max-content auto;
    }
}

@media (min-width: 22.5em) and (max-width: 47.99375em) {

    .intro {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.intro__wrapper {
    position: relative;
    z-index: 2;

    display: grid;
    grid-auto-rows: min-content;

    min-height: min(74.1rem, 741 / 1920 * 100vw);
}

@media (min-width: 48em) {

    .intro__wrapper {
        grid-template-columns: 55%;
    }

    @media (max-width: 63.99375em) {

        .intro__wrapper {
            grid-template-columns: 54%;
        }
    }

    .intro__wrapper {

        padding-top: calc(
            12.6rem + (max(0px, 100vw - 1920px) * 0.0666)
            - 4rem * var(--is-medium)
            - 2rem * var(--is-tight)
        );
        padding-bottom: calc(
            14.2rem + (max(0px, 100vw - 1920px) * 0.0666)
            - 4rem * var(--is-medium)
            - 2rem * var(--is-tight)
        );
    }
}

@media (max-width: 47.99375em) {

    .intro__wrapper {
        grid-row: 2;

        padding-top: calc(
            5.8rem
            - 2rem * var(--is-small)
            - 1rem * var(--is-tight)
        );
        padding-bottom: calc(
            8.8rem
            - 2rem * var(--is-small)
            - 1rem * var(--is-tight)
        );
    }
}

/*--------------------------------------------------------------------*/
/*----------------------------- CONTENT ------------------------------*/
/*--------------------------------------------------------------------*/

.intro__title {
    position: relative;
}

@media (min-width: 22.5em) and (max-width: 47.99375em) {

    .intro__title {
        margin-right: -0.5rem;
    }
}

.intro__title:where(:not([class*=" title--"])) {
    font-size: calc(
        6.4rem
        - 1.2rem * var(--is-medium)
        - 2.2rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

.intro__title-drawing {
    position: absolute;
    top: calc(
        -2.6rem
        + 0.2rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    left: calc(
        -6.6rem
        + 2.8rem * var(--is-medium)
        + 3.8rem * var(--is-small)
    );
    z-index: -1;

    width: calc(
        11.6rem
        * (1 - 0.33 * var(--is-medium))
        * (1 - 0.5 * var(--is-small))
    );
    height: calc(
        10.2rem
        * (1 - 0.33 * var(--is-medium))
        * (1 - 0.5 * var(--is-small))
    );

    pointer-events: none;
}

.intro__content {
    margin-top: calc(
        3.8rem
        - 0.6rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

:where(.title--primary) + .intro__content {
    font-size: calc(
        2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.intro__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem calc(1.6rem - 0.2rem * var(--is-small));

    margin-top: calc(
        3.6rem
        - 0.2rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

@media (min-width: 22.5em) and (max-width: 47.99375em) {

    .intro__btns {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (max-width: 22.49375em) {

    .intro__btns {
        -moz-column-gap: 1rem;
        column-gap: 1rem;
    }
}

:where(.title--primary) ~ .intro__btns {
    margin-top: calc(
        4.8rem
        - 0.2rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

/*--------------------------------------------------------------------*/
/*------------------------------ IAMGE -------------------------------*/
/*--------------------------------------------------------------------*/

.intro__image-wrapper {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

@media (min-width: 48em) {

    .intro__image-wrapper {
        --_width: calc(55.8333% - max(0px, 100vw - 1920px) * 0.1);
        --_width: calc(55.8333vw - max(0px, 100vw - 1920px) * 0.1);
    }

    @media (max-width: 63.99375em) {

        .intro__image-wrapper {
            --_width: 58%;
            --_width: 58vw;
        }
    }

    .intro__image-wrapper {

        position: absolute;
        bottom: 0;
        left: calc(100% - var(--_width));

        width: var(--_width);
        min-width: 80rem;
        height: 100%;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1073' height='741' viewBox='0 0 1073 741' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M552.5 655C178 807 45 528.5 178 340C291.95 178.5 218.5 0 0.5 0H1073V741C1015 571.5 883.984 520.459 552.5 655Z' fill='black'/%3E%3C/svg%3E%0A");

        mask-image: url("data:image/svg+xml,%3Csvg width='1073' height='741' viewBox='0 0 1073 741' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M552.5 655C178 807 45 528.5 178 340C291.95 178.5 218.5 0 0.5 0H1073V741C1015 571.5 883.984 520.459 552.5 655Z' fill='black'/%3E%3C/svg%3E%0A");
    }
}

@media (max-width: 47.99375em) {

    .intro__image-wrapper {
        position: relative;

        padding-bottom: calc(278 / 360 * (80% + 20% * var(--is-small)));

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='360' height='278' viewBox='0 0 360 278' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath d='M141.122 236.41C-40.1049 309.918 -104.466 175.234 -40.1049 84.0755C15.0371 5.97369 -20.5063 0 -126 0H393V278C364.933 196.029 301.532 171.346 141.122 236.41Z' fill='black' /%3E%3C/svg%3E%0A");

        mask-image: url("data:image/svg+xml,%3Csvg width='360' height='278' viewBox='0 0 360 278' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='none'%3E%3Cpath d='M141.122 236.41C-40.1049 309.918 -104.466 175.234 -40.1049 84.0755C15.0371 5.97369 -20.5063 0 -126 0H393V278C364.933 196.029 301.532 171.346 141.122 236.41Z' fill='black' /%3E%3C/svg%3E%0A");
    }
}

@media (min-width: 22.5em) and (max-width: 47.99375em) {

    .intro__image-wrapper {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}

.intro__image {
    position: absolute;
    left: 0;
    bottom: 0;

    width: var(--_width, 100%);
    min-height: 100%;
}

@media (min-width: 48em) {

    .intro__image {
        padding-bottom: calc(741 / 1073 * 100%);
    }
}

.intro__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -o-object-fit: cover;

    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
}

@media (max-width: 47.99375em) {

    .intro__img {
        -o-object-position: 50% 80%;
        object-position: 50% 80%;
    }
}

@media (max-width: 23.43125em) {

    .intro__img {
        -o-object-position: 50% 0%;
        object-position: 50% 0%;
        min-width: 113%;
        margin-left: -8%;
    }
}

.intro__corner-drawing {
    position: absolute;
    top: calc(
        9.4rem
        * (1 - 0.5 * var(--is-medium))
    );
    right: calc(
        3.8rem
        * (1 - 0.25 * var(--is-medium))
    );

    scale: calc(1 - 0.333 * var(--is-medium));
    transform-origin: top right;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*-------------------------- BUYBACK-INTRO ---------------------------*/
/*====================================================================*/

.buyback-intro {
    --_signpost-overflow: calc(
        8rem
        + 2.0rem * var(--is-medium)
        + 1.0rem * var(--is-tight)
    );

    background-color: transparent;
}

:where(.buyback-intro) .intro__wrapper {
    padding-top: calc(
        3.6rem
        - 2rem * var(--is-small)
        - 1rem * var(--is-tight)
    );
    padding-bottom: 0;
}

@media (min-width: 48em) {

    :where(.buyback-intro) .intro__wrapper {
        padding-top: calc(
            5.6rem + (max(0px, 100vw - 1920px) * 0.0666)
            - 2rem * var(--is-medium)
            - 1rem * var(--is-tight)
        );
    }
}

@media (min-width: 48em) {

    :where(.buyback-intro) .intro__image-wrapper {
        bottom: var(--_signpost-overflow);
        height: calc(100% - var(--_signpost-overflow));
    }
}

@media (max-width: 47.99375em) {

    :where(.buyback-intro) .intro__img {
        -o-object-position: 50% 20%;
        object-position: 50% 20%;
    }
}

@media (max-width: 29.99375em) {

    :where(.buyback-intro) .intro__img {
        -o-object-position: 25% 100%;
        object-position: 25% 100%;
    }
}

:where(.buyback-intro) .intro__content {
    grid-column: 1;
}

@media (min-width: 48em) {

    :where(.buyback-intro) .intro__content {
        padding-right: calc(
            20%
            - 10% * var(--is-medium)
            - 6% * var(--is-tight)
        );
    }
}

:where(.buyback-intro) .intro__btns {
    grid-column: 1;
}

/*--------------------------------------------------------------------*/
/*----------------------------- SINGPOST -----------------------------*/
/*--------------------------------------------------------------------*/

.buyback-intro__signpost {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    -moz-column-gap: calc(
        5.4rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    column-gap: calc(
        5.4rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    row-gap: calc(
        3.8rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    padding: calc(
        2.4rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    margin-top: calc(
        3.4rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    background-color: var(--color-primary);
    border-radius: 2.7rem;
}

@media (min-width: 48em) {

    .buyback-intro__signpost {
        grid-column: 1 / 3;

        padding-top: calc(
            5.0rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );

        padding-bottom: calc(
            5.0rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
        margin-top: calc(
            9.2rem + (max(0px, 100vw - 1920px) * 0.0666)
            - 2.4rem * var(--is-medium)
            - 4.8rem * var(--is-small)
            - 1.2rem * var(--is-tight)
        );

        box-shadow: 0.7rem 0.8rem 1rem 0rem rgba(0, 0, 0, 0.06);
    }
}

@media (min-width: 77.6875em) {

    .buyback-intro__signpost {
        grid-template-columns: max-content 1fr;
        align-items: center;

        padding-right: calc(
            2.4rem
            - 0.5rem * var(--is-medium)
            - 1.0rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        padding-left: calc(
            5.8rem
            - 1.0rem * var(--is-medium)
            - 2.0rem * var(--is-small)
            - 0.8rem * var(--is-tight)
        );
    }
}

@media (min-width: 94em) {

    .buyback-intro__signpost {
        margin-left: -1.8rem;
        margin-right: -1.8rem;
    }
}

@media (max-width: 47.99375em) {

    .buyback-intro__signpost {
        margin-left: -0.8rem;
        margin-right: -0.8rem;
    }
}

.buyback-intro__signpost-title {
    font-size: calc(
        2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;
    line-height: 1.15;

    color: black;
}

@media (max-width: 47.99375em) {

    .buyback-intro__signpost-title {
        margin-top: calc(
            2.2rem
            - 0.4rem * var(--is-medium)
            - 0.8rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

.buyback-intro__signpost-list {
    display: grid;
    gap: calc(
        2.2rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    width: 100%;
}

@media (min-width: 48em) {

    .buyback-intro__signpost-list {
        grid-auto-flow: column;
    }
}

.buyback-intro__signpost-item {
    display: grid;
}

.buyback-intro__signpost-link {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    gap: 2.75em;

    padding-top: calc(
        2.8rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    padding-bottom: calc(
        2.8rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-left: calc(
        3.2rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    padding-right: calc(
        3.2rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    font-size: calc(1.6rem - 0.2rem * var(--is-small));
    font-weight: bold;
    text-decoration: none;

    color: var(--color-text);
    background-color: #fff;
    border-radius: 2.2rem;
    outline-offset: -0.4rem;
}

.buyback-intro__signpost-link-text {
    display: grid;
    gap: 0.5rem;

    padding-bottom: 0.4rem;
    margin-bottom: auto;
    margin-left: 0.6rem;
}

.buyback-intro__signpost-link-title {
    font-weight: 400;
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
    -webkit-text-decoration-color: transparent;
            text-decoration-color: transparent;

    color: var(--color-primary);
}

@media (hover: hover) {
    :where(.buyback-intro__signpost-link):hover .buyback-intro__signpost-link-title {
        -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
                text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
    }
}

:where(.buyback-intro__signpost-link):active .buyback-intro__signpost-link-title {
    -webkit-text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
            text-decoration-color: rgba(var(--color-primary-rgb), 0.5);
}

.buyback-intro__signpost-link-arrow {
    width: 1.4rem;
    height: auto;

    color: var(--color-primary);
}

@media (hover: hover) {
    :where(.buyback-intro__signpost-link):hover .buyback-intro__signpost-link-arrow {
        color: var(--color-dark);
    }
}

:where(.buyback-intro__signpost-link):active .buyback-intro__signpost-link-arrow {
    translate: 0.1rem 0;
    scale: 0.98;

    color: var(--color-dark-dimmed);
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- ONLINE-STEPS ---------------------------*/
/*====================================================================*/

.online-steps {
    --is-small: 0;
    --is-medium: 0;
    --is-tight: 0;

    --_top-overflow: 0rem;
}

@media (min-width: 56.25em) {

    .online-steps {
        --is-tight: 0;
    }

    @media (max-width: 93.99375em) {

        .online-steps {
            --is-medium: 1;
        }

        @media (max-width: 83.99375em) {

            .online-steps {
                --is-tight: 1;
            }
        }
    }
    @media (max-width: 77.74375em) {

        .online-steps {
            --is-medium: 0;
            --is-small: 1;
            --is-tight: 0;
        }

        @media (max-width: 70.24375em) {

            .online-steps {
                --is-tight: 1;
            }
        }
    }

    @media (min-width: 64em) {

        .online-steps {
            --_top-overflow: calc(
                3.4rem
                - 0.8rem * var(--is-medium)
                - 1.6rem * var(--is-small)
            );
        }
    }

    .online-steps {

        --_block-gap: calc(
            10rem
            - 1.5rem * var(--is-medium)
            - 3.0rem * var(--is-small)
            - 0.5rem * var(--is-tight)
        );
        --_inline-gap: calc(
            7rem
            - 1.5rem * var(--is-medium)
            - 3.0rem * var(--is-small)
            - 0.5rem * var(--is-tight)
        );
    }
}

.online-steps {
    --_image-size: calc(
        11.7rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    .online-steps {
        --is-tight: 1;

        --_block-gap: calc(
            5.6rem
            - 0.6rem * var(--is-medium)
            - 1.4rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
        --_inline-gap: calc(
            7rem
            - 3.0rem * var(--is-small)
            - 1.5rem * var(--is-tight)
        );
    }
}

@media (max-width: 39.99375em) {

    .online-steps {
        --is-medium: 1;
        --is-tight: 0;
    }
}

@media (max-width: 29.99375em) {

    .online-steps {
        --is-medium: 0;
        --is-small: 1;
    }
}

@media (max-width: 23.43125em) {

    .online-steps {
        --is-tight: 1;
    }
}

@media (min-width: 56.25em) {

    .online-steps {
        display: grid;
        grid-template-columns:
            minmax(min-content, min(40vw - 300px, 29rem))
            minmax(min-content, 1fr)
            minmax(min-content, 1fr)
            minmax(min-content, 1fr)
            max-content;
    }

    @media (max-width: 63.99375em) {

        .online-steps {
            grid-template-columns:
                minmax(min-content, 0.333fr)
                minmax(min-content, 1fr)
                minmax(min-content, 0.333fr)
                minmax(min-content, 1fr)
                minmax(min-content, 0.333fr);

            margin-left: -1rem;

            margin-right: -1rem;
        }
    }

    .online-steps:where(.online-steps--with-offline) {
        grid-template-columns:
                minmax(min-content, min(40vw - 300px, 29rem))
                minmax(min-content, 1fr)
                minmax(min-content, 0.333fr)
                minmax(min-content, 1fr)
                minmax(min-content, 0.333fr);
    }
}

.online-steps {
    gap: var(--_block-gap) var(--_inline-gap);

    padding-top: var(--_top-overflow);

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    .online-steps {
        font-size: calc(
            1.6rem
            - 0.1rem * var(--is-medium)
            - 0.2rem * var(--is-small)
            - 0.1rem * var(--is-tight) * var(--is-small)
        );
    }
}

:where(.promo) + .online-steps {
    margin-top: calc(
        1rem
        + 0.5rem * var(--is-medium)
        + 1rem * var(--is-small)
    );
}

:where(.box) + .online-steps {
    margin-top: calc(
        8.6rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    :where(.box) + .online-steps {
        margin-top: calc(
            6.6rem
            - 2rem * var(--is-small)
            - 1rem * var(--is-tight)
        );
    }
}

.online-steps__title-group {
    grid-row: 1;
    grid-column: 1 / span 1;

    width: -moz-min-content;

    width: min-content;
    margin-top: calc(
        -1 * var(--_top-overflow)
    );
}

@media (max-width: 63.99375em) {

    .online-steps__title-group {
        width: auto;

        text-align: center;
    }

    @media (min-width: 56.25em) {

        .online-steps__title-group {
            --is-medium: 1;
            --is-small: 0;
            --is-tight: 0;

            grid-column: 1 / -1;
        }
    }
}

.online-steps__title {
    display: block;

    margin-top: -0.2rem;

    font-size: calc(
        4.8rem
        - 0.8rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

.online-steps__list {
    --_item-max-width: 48rem;
}

@media (max-width: 56.24375em) {

    .online-steps__list {
        --_item-max-width: min(100% - 10rem, 56rem);
    }
}

@media (max-width: 39.99375em) {

    .online-steps__list {
        --_item-max-width: calc(100% - 6rem);
    }
}

@media (max-width: 33.74375em) {

    .online-steps__list {
        --_item-max-width: calc(100% - 4rem);
    }
}

@media (max-width: 29.99375em) {

    .online-steps__list {
        --_item-max-width: calc(100% - 2rem);
    }
}

@media (max-width: 23.43125em) {

    .online-steps__list {
        --_item-max-width: calc(100% - 1rem);
    }
}

@media (max-width: 22.49375em) {

    .online-steps__list {
        --_item-max-width: 100%;
    }
}

.online-steps__list {

    display: grid;
    justify-items: center;
    row-gap: var(--_block-gap);

    margin-top: calc(
        6.0rem
        - 0.6rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 56.25em) {

    .online-steps__list {
        display: contents;
    }
}

.online-steps__item {
    counter-increment: online-steps-item;

    display: grid;
    grid-template-columns: max-content auto;
    grid-template-rows: min-content min-content min-content;
    max-width: var(--_item-max-width);
    width: 100%;
}

@media (min-width: 56.25em) {

    .online-steps__item:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    @media (min-width: 94em) {

        .online-steps__item:nth-child(1) {
            margin-left: 2.5rem;
        }
    }
    @media (max-width: 83.99375em) {

        .online-steps__item:nth-child(1) {
            padding-right: 10%;
        }
    }
    @media (max-width: 63.99375em) {

        .online-steps__item:nth-child(1) {
            grid-row: 3;

            padding-right: 0;
        }
    }

    .online-steps__item:nth-child(1)::before {
        top: -22%;
        left: 9.5%;
    }
}

@media (max-width: 56.24375em) {

    .online-steps__item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
}

@media (min-width: 56.25em) {

    .online-steps__item:nth-child(3) {
        grid-column: 2 / span 2;
        grid-row: 1;
    }

    @media (max-width: 93.99375em) {

        .online-steps__item:nth-child(3) {
            padding-right: 7%;
        }
    }
    @media (max-width: 77.74375em) {

        .online-steps__item:nth-child(3) {
            padding-right: 10%;
        }
    }
    @media (max-width: 63.99375em) {

        .online-steps__item:nth-child(3) {
            grid-row: 2;

            padding-right: 0;
        }
    }

    .online-steps__item:nth-child(3)::before {
        top: calc(var(--_image-size) - 44.5%);
        left: 17%;
    }
}

@media (max-width: 56.24375em) {

    .online-steps__item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (min-width: 56.25em) {

    .online-steps__item:nth-child(5) {
        grid-column: 3 / span 2;
        grid-row: 2;
    }

    @media (max-width: 63.99375em) {

        .online-steps__item:nth-child(5) {
            grid-row: 3;
        }
    }

    .online-steps__item:nth-child(5)::before {
        top: -7.5%;
        left: -4%;
    }
}

@media (max-width: 56.24375em) {

    .online-steps__item:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (min-width: 56.25em) {

    .online-steps__item:nth-child(7) {
        grid-column: 4 / span 2;
        grid-row: 1;
    }

    @media (max-width: 63.99375em) {

        .online-steps__item:nth-child(7) {
            grid-row: 2;
        }
    }

    .online-steps__item:nth-child(7)::before {
        top: 50%;
        left: -8.5%;
    }
}

@media (max-width: 56.24375em) {

    .online-steps__item:nth-child(7) {
        grid-column: 1;
        grid-row: 4;
    }
}

@media (max-width: 56.24375em) {

    .online-steps__item {
        min-height: calc(
            17.8rem
            - 2.2rem * var(--is-medium)
            - 4.8rem * var(--is-small)
            - 1.4rem * var(--is-tight)
        );
    }

    @media (min-width: 40em) {
        .online-steps__item:nth-child(4n + 1) {
            position: relative;
            left: -2rem;
        }

        .online-steps__item:nth-child(4n + 3) {
            position: relative;
            right: -4rem;
        }
    }
}

.online-steps__item::before {
    content: counter(online-steps-item);

    position: relative;

    z-index: 2;

    grid-area: 1 / 1;
    display: grid;
    place-content: center;

    width: calc(
        3.3rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
    height: calc(
        3.3rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );

    font-size: calc(
        2.0rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;

    color: var(--color-text-inverse);
    background-color: var(--color-dark);
    border-radius: 50%;
    box-shadow: 0rem 0rem 0rem calc(
        0.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    ) var(--color-text-inverse);
}

@media (max-width: 56.24375em) {
    .online-steps__item::before {
        top: -11%;
        left: 9%;
    }
}

@media (min-width: 30em) and (max-width: 56.24375em) {
    .online-steps__item::before {
        scale: 0.95;
        transform-origin: right bottom;
    }
}

.online-steps__item > * {
    grid-column: 2;
}

.online-steps__item-icon {
    grid-column: 1;
    grid-row: 1 / -1;

    width: var(--_image-size);
    height: auto;
    padding: calc(
        2.1rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    margin-right: calc(
        2.9rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-radius: 50%;

    overflow: visible;
}

@media (min-width: 30em) and (max-width: 56.24375em) {

    .online-steps__item-icon {
        scale: 0.95;
        transform-origin: right center;
    }
}

.online-steps__item-icon {

    [*|href] {
        transform-origin: center center;
    }

    [*|href$="#books"] {
        translate: 0% 1%;
    }

    [*|href$="#truck"] {
        translate: 0% -2%;
        scale: calc(
            1
            + 0.025 * var(--is-medium)
            + 0.05 * var(--is-small)
            + 0.0125 * var(--is-tight)
        );
    }

    [*|href$="#box"] {
        translate: 1% -1%;
        scale: calc(
            1
            + 0.05 * var(--is-medium)
            + 0.1 * var(--is-small)
            + 0.025 * var(--is-tight)
        );
    }

    [*|href$="#wallet"] {
        translate: 4% -6%;
        scale: calc(
            1
            + 0.066 * var(--is-medium)
            + 0.133 * var(--is-small)
            + 0.033 * var(--is-tight)
        );
    }
}

@media (min-width: 56.25em) {

    .online-steps__item-line {
        grid-row: 1;
        justify-self: end;

        height: calc(100% - var(--_image-size) + var(--_block-gap) + 2.5rem);
        width: calc(100% - var(--_image-size) / 2 + var(--_inline-gap));
        margin-top: calc(var(--_image-size) - 2.5rem);
        margin-right: calc(-1 * var(--_inline-gap));

        background-repeat: no-repeat;
        background-position: right top;

        pointer-events: none;
    }

    @media (max-width: 63.99375em) {

        .online-steps__item-line {
            grid-row: 2;
        }
    }

    .online-steps__item-line:nth-child(2) {
        grid-column: 1 / span 1;

        background-image: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' width='261' height='148' viewBox='0 0 261 148' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 147.41C26 78.4101 175 -5.58991 260 1.41009' vector-effect='non-scaling-stroke' stroke='black' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: 0% 50%;
        background-size: 100% 80%;
    }

    @media (min-width: 64em) {

        .online-steps__item-line:nth-child(2) {
            background-position: 94% 80%;
            background-size: 86% 87%;
        }
    }
    @media (min-width: 77.75em) {

        .online-steps__item-line:nth-child(2) {
            background-position: right top;
            background-size: 95% 90%;
        }
    }

    @media (min-width: 94em) {

        .online-steps__item-line:nth-child(2) {
            width: calc(100% - var(--_image-size) / 2 + var(--_inline-gap) - 2.5rem);
        }
    }
    .online-steps__item-line:nth-child(4) {
        grid-column: 2 / span 1;

        height: calc(100% - var(--_image-size) + var(--_block-gap) + var(--_image-size) / 2);
        margin-top: var(--_image-size);

        background-image: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' width='182' height='194' viewBox='0 0 182 194' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.970459C1 51.9705 62 173.47 181 192.47' vector-effect='non-scaling-stroke' stroke='black' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E%0A");
        background-position: 70% 4%;
        background-size: 83% 95%;
    }

    @media (min-width: 64em) {
        .online-steps__item-line:nth-child(4) {
            background-position: 55% bottom;
            background-size: 78% 99%;
        }
    }
    .online-steps__item-line:nth-child(6) {
        grid-column: 3 / span 1;

        background-image: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' width='198' height='156' viewBox='0 0 198 156' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 154.97C8.5 100.47 92.2 9.17046 197 1.97046' vector-effect='non-scaling-stroke' stroke='black' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E%0A");
        background-position: 100% 64%;
        background-size: 96% 79%;
    }

    @media (min-width: 84em) {
        .online-steps__item-line:nth-child(6) {
            background-position: 61% 11%;
            background-size: 94% 88%;
        }
    }

    @media (min-width: 94em) {
        .online-steps__item-line:nth-child(6) {
            width: calc(100% - var(--_image-size) / 2 + var(--_inline-gap) - 2.5rem);
        }
    }
}

@media (max-width: 56.24375em) {

    .online-steps__item-line {
        width: 100%;
        max-width: var(--_item-max-width);
        height: calc(100% - var(--_image-size) * 0.75 + var(--_block-gap) + var(--_image-size) * 0.25);
        margin-top: calc(var(--_image-size) * 0.75);

        background-repeat: no-repeat;

        pointer-events: none;
    }

    @media (min-width: 40em) and (max-width: 56.24375em) {
        .online-steps__item-line:nth-child(4n + 2) {
            position: relative;
            left: -2rem;
        }

        .online-steps__item-line:nth-child(4n + 4) {
            position: relative;
            right: 2rem;
        }
    }

    .online-steps__item-line:nth-child(2) {
        grid-column: 1;
        grid-row: 1;

        background-image: url("data:image/svg+xml, %3Csvg width='27' height='78' preserveAspectRatio='none' viewBox='0 0 27 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1C11.9664 10.0074 31.9758 37.8178 24.2824 77' vector-effect='non-scaling-stroke' stroke='black' stroke-dasharray='2 2'/%3E%3C/svg%3E%0A");
        background-size: calc(var(--_image-size) * 0.34) calc(100% - var(--_image-size) * 0.6);
        background-position: calc(var(--_image-size) * 0.62) 60%;
    }

    @media (min-width: 40em) {

        .online-steps__item-line:nth-child(2) {
            scale: -1;

            background-size: calc(var(--_image-size) * 0.5) calc(100% - var(--_image-size) * 0.2);
            background-position: calc(100% - var(--_image-size) * 0.07) 0%;
        }
    }
    .online-steps__item-line:nth-child(4) {
        grid-column: 1;
        grid-row: 2;

        margin-left: -1.5rem;

        background-image: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' width='17' height='81' viewBox='0 0 17 81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.20142 79.9976C0.715584 67.375 -6.59979 33.9045 16.0254 1.00256' vector-effect='non-scaling-stroke' stroke='black' stroke-dasharray='2 2'/%3E%3C/svg%3E%0A");
        background-size: calc(var(--_image-size) * 0.25) calc(100% - var(--_image-size) * 0.34);
        background-position: calc(var(--_image-size) * 0.0) 74%;
    }

    @media (min-width: 40em) {
        .online-steps__item-line:nth-child(4) {
            margin-left: 0rem;

            scale: -1;

            background-size: calc(var(--_image-size) * 0.25) calc(100% - var(--_image-size) * 0.5);
            background-position: calc(100% - var(--_image-size) * 0.9) 35%;
        }
    }
    .online-steps__item-line:nth-child(6) {
        grid-column: 1;
        grid-row: 3;

        background-image: url("data:image/svg+xml, %3Csvg preserveAspectRatio='none' width='23' height='120' viewBox='0 0 23 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.30493 0.345703C11.8871 14.9364 30.1801 59.1554 18.6951 119.306' vector-effect='non-scaling-stroke' stroke='black' stroke-dasharray='2 2'/%3E%3C/svg%3E%0A");
        background-size: calc(var(--_image-size) * 0.3) calc(100% - var(--_image-size) * 0.6);
        background-position: calc(var(--_image-size) * 0.62) 60%;
    }

    @media (min-width: 40em) {
        .online-steps__item-line:nth-child(6) {
            scale: -1;

            background-size: calc(var(--_image-size) * 0.45) calc(100% - var(--_image-size) * 0.25);
            background-position: calc(100% - var(--_image-size) * 0.12) 0%;
        }
    }
}

.online-steps__item-title {
    grid-row: 1;

    margin-top: calc (
    -0.5rem+0.1rem *var(--is-medium) +0.2rem *var(--is-small));
    margin-bottom: calc(
        1.5rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (min-width: 22.5em) and (max-width: 39.99375em) {
    .online-steps__item-title + * {
        padding-right: 10%;
    }
}

.online-steps__item-title--long {
    margin-top: calc(-0.5rem - min(0.5lh, var(--_top-overflow)));
}

@media (min-width: 56.25em) {

    .online-steps__btn {
        grid-column: 5 / span 1;
        grid-row: 2;
        align-self: center;
    }

    @media (max-width: 63.99375em) {

        .online-steps__btn {
            grid-column: 1 / -1;
            grid-row: 4;

            justify-self: center;
        }
    }
}

@media (max-width: 56.24375em) {

    .online-steps__btn {
        margin-top: calc(
            6rem
            - 1.0rem * var(--is-medium)
            - 2.0rem * var(--is-small)
            - 0.5rem * var(--is-tight)
        );
        margin-left: auto;
        margin-right: auto;
    }
}

.online-steps__offline {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    row-gap: 1.8rem;

    margin-top: calc(
        -4rem
        + 2.0rem * var(--is-medium)
        + 3.0rem * var(--is-small)
        + 1.0rem * var(--is-tight)
    );

    font-weight: 500;
    text-align: center;
}

@media (max-width: 63.99375em) {

    .online-steps__offline {
        flex-direction: column;
    }
}

@media (max-width: 56.24375em) {

    .online-steps__offline {
        margin-top: calc(
            6rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*-------------------------- OFFLINE-STEPS ---------------------------*/
/*====================================================================*/

.offline-steps {
    position: relative;
}

:where(.box) + .offline-steps {
    margin-top: calc(
        7rem
        - 1.2rem * var(--is-medium)
        - 2.2rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

.offline-steps__drawing {
    position: absolute;
    top: -2.4rem;
    left: -7.2rem;
}

@media (max-width: 100.24375em) {

    .offline-steps__drawing {
        display: none;
    }
}

@media (min-width: 64em) and (max-width: 77.74375em) {

    .offline-steps__title-group {
        --is-tight: 0;
        --is-medium: 1;
    }
}

.offline-steps__title-group {

    text-align: center;
}

.offline-steps__title {
    display: block;

    font-size: calc(
        4.8rem
        - 0.8rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    .offline-steps__title {
        margin-top: -0.2rem;
    }
}

.offline-steps__list {
    --is-small: 0;
    --is-medium: 0;
    --is-tight: 0;

    --_item-max-width: 48rem;
    --_image-size: calc(
        11.7rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

@media (min-width: 56.25em) {

    .offline-steps__list {
        --_block-gap: calc(
            4.6rem
            - 0.4rem * var(--is-medium)
            - 0.8rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        --_inline-gap: calc(
            7rem
            - 1.5rem * var(--is-medium)
            - 3.0rem * var(--is-small)
            - 0.5rem * var(--is-tight)
        );
    }

    @media (max-width: 93.99375em) {

        .offline-steps__list {
            --is-tight: 1;
        }
    }
    @media (max-width: 84.99375em) {

        .offline-steps__list {
            --is-medium: 1;
            --is-tight: 0;
        }
    }
    @media (max-width: 82.49375em) {

        .offline-steps__list {
            --is-medium: 1;
            --is-tight: 1;
        }
    }
    @media (max-width: 76.24375em) {

        .offline-steps__list {
            --is-medium: 0;
            --is-small: 1;
            --is-tight: 0;
        }
    }
    @media (max-width: 71.24375em) {

        .offline-steps__list {
            --is-tight: 1;
        }
    }
    @media (max-width: 63.99375em) {

        .offline-steps__list {
            --is-medium: 1;
            --is-small: 0;
            --is-tight: 0;

            --_block-gap: calc(
                5.8rem
                - 0.4rem * var(--is-medium)
                - 0.8rem * var(--is-small)
                - 0.2rem * var(--is-tight)
            );
        }
    }
    @media (max-width: 61.24375em) {

        .offline-steps__list {
            --is-medium: 0;
            --is-small: 1;
        }
    }
}

@media (max-width: 56.24375em) {

    .offline-steps__list {
        --is-tight: 1;

        --_item-max-width: min(100% - 10rem, 56rem);
        --_block-gap: calc(
            5.6rem
            - 0.6rem * var(--is-medium)
            - 1.4rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
        --_inline-gap: calc(
            7rem
            - 3.0rem * var(--is-small)
            - 1.5rem * var(--is-tight)
        );
    }
}

@media (max-width: 39.99375em) {

    .offline-steps__list {
        --is-medium: 1;
        --is-tight: 0;

        --_item-max-width: calc(100% - 6rem);
    }
}

@media (max-width: 33.74375em) {

    .offline-steps__list {
        --_item-max-width: calc(100% - 4rem);
    }
}

@media (max-width: 29.99375em) {

    .offline-steps__list {
        --is-medium: 0;
        --is-small: 1;

        --_item-max-width: calc(100% - 2rem);
    }
}

@media (max-width: 23.43125em) {

    .offline-steps__list {
        --is-tight: 1;

        --_item-max-width: calc(100% - 1rem);
    }
}

@media (max-width: 22.49375em) {

    .offline-steps__list {
        --_item-max-width: 100%;
    }
}

.offline-steps__list {

    display: grid;
    grid-template-columns:
            minmax(min-content, 1fr)
            minmax(min-content, 1fr)
            minmax(min-content, 1fr)
            minmax(min-content, 1.5fr)
            minmax(min-content, 1fr)
            minmax(min-content, 1fr);
    align-items: center;
    gap: var(--_block-gap) var(--_inline-gap);
}

@media (max-width: 63.99375em) {

    .offline-steps__list {
        grid-template-columns: repeat(4, minmax(min-content, 1fr));
        justify-content: center;

        padding-left: 2rem;

        padding-right: 2rem;
    }
}

@media (max-width: 56.24375em) {

    .offline-steps__list {
        grid-template-columns: 100%;
        justify-items: center;

        padding-left: 0rem;

        padding-right: 0rem;
    }
}

.offline-steps__list {

    margin-top: calc(
        6.8rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    margin-left: auto;
    margin-right: auto;

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    .offline-steps__list {
        font-size: calc(
            1.6rem
            - 0.1rem * var(--is-medium)
            - 0.2rem * var(--is-small)
            - 0.1rem * var(--is-tight) * var(--is-small)
        );
    }
}

.offline-steps__item {
    counter-increment: offline-steps-item;

    display: grid;
    grid-template-columns: max-content auto;
    align-items: center;
    max-width: var(--_item-max-width);
    width: 100%;
}

@media (min-width: 64em) and (max-width: 93.99375em) {

    .offline-steps__item {
        max-width: -moz-max-content;
        max-width: max-content;
    }
}

@media (min-width: 56.25em) {

    .offline-steps__item:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
}

@media (min-width: 56.25em) {

    .offline-steps__item:nth-child(2) {
        grid-column: 1 / span 3;
        grid-row: 2;
        justify-self: end;
    }

    @media (max-width: 63.99375em) {

        .offline-steps__item:nth-child(2) {
            grid-column: 3 / span 2;
            grid-row: 1;
            justify-self: start;
        }
    }
}

@media (min-width: 56.25em) {

    .offline-steps__item:nth-child(3) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    @media (max-width: 63.99375em) {

        .offline-steps__item:nth-child(3) {
            grid-column: 1 / span 2;
            grid-row: 2;
        }
    }
}

@media (min-width: 56.25em) {

    .offline-steps__item:nth-child(4) {
        grid-column: 4 / span 3;
        grid-row: 2;
    }

    @media (max-width: 63.99375em) {

        .offline-steps__item:nth-child(4) {
            grid-column: 3 / span 2;
            grid-row: 2;
        }
    }
}

@media (min-width: 56.25em) {

    .offline-steps__item:nth-child(5) {
        grid-column: 5 / span 2;
        grid-row: 1;
    }

    @media (max-width: 63.99375em) {

        .offline-steps__item:nth-child(5) {
            grid-column: 2 / span 2;
            grid-row: 3;
        }
    }
}

@media (max-width: 56.24375em) {
    @media (min-width: 40em) {
        .offline-steps__item:nth-child(odd) {
            position: relative;
            left: -1.5rem;
        }

        .offline-steps__item:nth-child(even) {
            position: relative;
            right: -4.5rem;
        }
    }

    .offline-steps__item :where(br) {
        display: none;
    }
}

.offline-steps__item::before {
    content: counter(offline-steps-item);

    position: relative;
    top: -45%;
    left: 45%;
    z-index: 2;

    grid-area: 1 / 1;
    display: grid;
    place-content: center;

    width: calc(
        3.3rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
    height: calc(
        3.3rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );

    font-size: calc(
        2.0rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;

    color: var(--color-text-inverse);
    background-color: var(--color-dark);
    border-radius: 50%;
    box-shadow: 0rem 0rem 0rem calc(
        0.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    ) var(--color-text-inverse);
}

@media (max-width: 56.24375em) {
    .offline-steps__item::before {
        top: -45%;
        left: 9%;
    }
}

@media (min-width: 30em) and (max-width: 56.24375em) {
    .offline-steps__item::before {
        scale: 0.95;
        transform-origin: right bottom;
    }
}

.offline-steps__item-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;

    width: var(--_image-size);
    height: auto;
    padding: calc(
        2.1rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    margin-right: calc(
        2.9rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-radius: 50%;

    overflow: visible;
}

@media (min-width: 30em) and (max-width: 56.24375em) {

    .offline-steps__item-icon {
        scale: 0.95;
        transform-origin: right center;
    }
}

.offline-steps__item-icon {

    [*|href] {
        transform-origin: center center;
    }

    [*|href$="#truck"] {
        translate: 0% -2%;
        scale: calc(
            1
            + 0.025 * var(--is-medium)
            + 0.05 * var(--is-small)
            + 0.0125 * var(--is-tight)
        );
    }

    [*|href$="#docs"] {
        scale: calc(
            1
            + 0.05 * var(--is-medium)
            + 0.1 * var(--is-small)
            + 0.025 * var(--is-tight)
        );
    }

    [*|href$="#wallet"] {
        translate: 4% -6%;
        scale: calc(
            1
            + 0.066 * var(--is-medium)
            + 0.133 * var(--is-small)
            + 0.033 * var(--is-tight)
        );
    }
}

.offline-steps__item-title {
    grid-row: 2;

    margin-bottom: calc(
        1.5rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
}

@media (max-width: 29.99375em) {

    .offline-steps__item-title {
        margin-top: -1rem;
    }
}

.offline-steps__item-title + * {
    grid-row: 3;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------------ FILTERS -----------------------------*/
/*====================================================================*/

.filters {
    margin-bottom: auto;
}

@media (max-width: 63.99375em) {

    .filters {
        display: flex;
        flex-direction: column;

        height: 100%;
    }
}

@media (max-width: 63.99375em) {

    .filters .inline-modal-component__box, .filters .inline-modal-component__content {
        display: grid;
        grid-template-rows: min-content 1fr;

        padding-bottom: 0;
    }
}

@media (min-width: 64em) {

    :where(.page__columns) .filters {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }

    @media (min-width: 77.75em) {

        :where(.page__columns) .filters {
            --is-medium: 1;
            --is-small: 0;
        }
    }
    @media (min-width: 94em) {

        :where(.page__columns) .filters {
            --is-medium: 0;
        }
    }
}

@media (max-width: 63.99375em) {

    .filters__opener {
        justify-content: center;

        width: 100%;
        max-width: min(66.666%, 48rem);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 29.99375em) {

    .filters__opener {
        max-width: none;
    }
}

.filters__group-opener,
.filters__subgroup-opener {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;

    width: 100%;
    padding-top: calc(
        2.4rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    padding-bottom: 1.4rem;

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    font-weight: bold;
}

@media (min-width: 30em) and (max-width: 63.99375em) {

    .filters__group-opener,
    .filters__subgroup-opener {
        justify-content: flex-start;
    }
}

:where(:nth-child(1 of .filters__group)) :is(.filters__group-opener,.filters__subgroup-opener) {
    padding-top: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
}

@media (hover: hover) {
    :is(.filters__group-opener,.filters__subgroup-opener):hover {
        color: var(--color-primary)
    }
}

:is(.filters__group-opener,.filters__subgroup-opener):active {
    color: var(--color-dark-dimmed);
}

.filters__subgroup-opener {
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;

    font-weight: 600;
}

.filters__subgroup-opener-text,
.filters__group-opener-text {
    text-align: left;
}

.filters__subgroup-opener-arrow,
.filters__group-opener-arrow {
    position: relative;
    top: 0.1rem;

    flex-shrink: 0;

    width: 1rem;
    height: 0.6rem;
    margin-right: calc(
        1rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );

    transition: inherit;
}

[aria-expanded="true"] :is(.filters__subgroup-opener-arrow,.filters__group-opener-arrow) {
    transform: rotate(180deg);
}

.filters__group-opener-arrow {
    color: var(--color-primary);
}

.filters__submit-btn {
    margin-top: calc(
        4.0rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

@media (max-width: 63.99375em) {

    .filters__submit-btn {
        position: sticky;
        bottom: var(--_c-inline-modal-component-padding, var(--page-padding));
        z-index: 10;

        justify-content: center;

        width: 100%;
        max-width: min(66.666%, 48rem);
        margin-top: auto;
        margin-bottom: var(--_c-inline-modal-component-padding, var(--page-padding));
        margin-left: auto;
        margin-right: auto;

        box-shadow: 0.2rem 0.4rem 0.9rem 0.6rem rgba(0, 0, 0, 0.06);
    }
}

@media (max-width: 29.99375em) {

    .filters__submit-btn {
        max-width: none;
    }
}

@media (min-width: 64em) {

    :where(.js) .filters__submit-btn {
        display: none;
    }
}

.filters__drawing {
    display: block;

    margin-top: calc(
        4.4rem
        - 0.4rem * var(--is-medium)
        - 1.4rem * var(--is-small)
    );
    margin-right: calc(
        3.2rem
        - 0.4rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
    margin-left: auto;

    scale: calc(
        1
        - 0.1 * var(--is-medium)
        - 0.2 * var(--is-small)
    );
    transform-origin: right top;
}

/*--------------------------------------------------------------------*/
/*------------------------------ GROUP -------------------------------*/
/*--------------------------------------------------------------------*/

.filters__group {
    border-bottom: 0.1rem solid #CBCBCB;

    contain: content;
}

.filters__group:where(:nth-last-child(1 of .filters__group)) {
    margin-bottom: calc(
        4.0rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

.filters__subgroup {
    padding-bottom: 0.2rem;

    border-top: 0.1rem solid #CBCBCB;
}

.filters__group-wrapper,
.filters__subgroup-wrapper {
    display: grid;
    grid-template-rows: 0fr;

    visibility: hidden;

    transition: grid-template-rows var(--transition-hide-duration) var(--transition-hide-easing) 0s, visibility 0s linear var(--transition-hide-duration);
    will-change: grid-template-rows;
}

:where(.no-js) :is(.filters__group-wrapper,.filters__subgroup-wrapper), [aria-expanded="true"] ~ :is(.filters__group-wrapper,.filters__subgroup-wrapper) {
    grid-template-rows: 1fr;

    visibility: visible;

    transition: grid-template-rows var(--transition-show-duration) var(--transition-show-easing) 0s;
}

.filters__group-hidden,
.filters__subgroup-hidden {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;

    overflow: hidden;
}

:is(.filters__group-hidden,.filters__subgroup-hidden)::after {
    content: "";

    display: block;

    padding-bottom: calc(
        1.8rem
        - 0.2rem * var(--is-small)
    );
}

.filters__subgroup-hidden {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;

    overflow: hidden;
}

.filters__subgroup-hidden::before, .filters__subgroup-hidden::after {
    content: "";

    display: block;

    padding-bottom: calc(0.4rem - 0.1rem * var(--is-small));
}

.filters__subgroup-hidden::before {
    padding-bottom: 0.2rem;
}

.filters__item {
    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    line-height: 1.15;
}

.filters__subgroup-link {
    display: block;

    padding-top: calc(0.6rem - 0.1rem * var(--is-small));

    padding-bottom: calc(0.6rem - 0.1rem * var(--is-small));

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    font-weight: 400;
    line-height: 1.15;

    color: inherit;
}

/*---------------------------- CHECKBOX / RADIO ----------------------------*/

.filters__checkbox,
.filters__radio {
    display: flex;
    align-items: baseline;
    gap: calc(
        1.6rem
        - 0.2rem * var(--is-small)
    );

    padding-top: 0.3rem;

    padding-bottom: 0.3rem;

    cursor: pointer;
}

@media (hover: hover) {
    :is(.filters__checkbox,.filters__radio):hover {
        color: var(--color-primary)
    }
}

:is(.filters__checkbox,.filters__radio):active {
    color: var(--color-dark-dimmed);
}

:where(.filters__checkbox,.filters__radio) .filters__input {
    position: relative;
    top: 0.15em;

    flex-shrink: 0;

    width: 1.4rem;
    height: 1.4rem;
}

/*---------------------------- TEXT ----------------------------*/

.filters__input-wrapper {
    max-width: 40rem;
}

.filters__input-wrapper--with-unit {
    display: grid;
}

:where(.filters__input-wrapper) .filters__input {
    padding-left: calc(
        2.4rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
    );
    padding-right: calc(
        2.4rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
    );
    height: calc(
        4.1rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
    );

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );

    border-color: #c5c5c5;
    background-color: transparent;
}

@media (hover: hover) {
    :is(:where(.filters__input-wrapper) .filters__input):hover {
        border-color: var(--color-primary);
    }
}

:is(:where(.filters__input-wrapper) .filters__input):focus {
    border-color: var(--color-primary);
}

:where(.filters__input-wrapper--with-unit) .filters__input {
    grid-area: 1 / 1;

    padding-right: calc(
        5.0rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
    );

    font-weight: 600;
    text-align: right;

    color: var(--color-primary);
}

.filters__input-unit {
    grid-area: 1 / 1;
    align-self: center;

    margin-left: auto;

    width: 100%;
    max-width: calc(
        5.0rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
    );
    padding-right: calc(
        1.2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
    font-weight: 600;
    text-align: center;
    line-height: 1;
    white-space: nowrap;

    text-overflow: ellipsis;
    overflow: hidden;
}

/*---------------------------- RANGE ----------------------------*/

.filters__range {
    max-width: 40rem;
    margin-top: calc(
        1.4rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
}

.filters__range-inputs {
    display: grid;
    grid-template-columns:
            1fr
            calc(
                3rem
                - 0.5rem * var(--is-medium)
                - 1.0rem * var(--is-small)
            )
            1fr;
    grid-template-areas: "min div max";
}

.filters__range-inputs::after {
    content: "-";

    grid-area: div;

    margin: auto;

    font-weight: 600;
}

:where(.filters__range-inputs) .filters__input-wrapper {
    grid-area: min;
}

:is(:where(.filters__range-inputs) .filters__input-wrapper) ~ :is(:where(.filters__range-inputs) .filters__input-wrapper) {
    grid-area: max;
}

:where(.filters__range-inputs) .filters__input {
    padding-left: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
}

.filters__range-slider-input {
    margin-top: calc(
        2.2rem
        - 0.2rem * var(--is-small)
    );
}

.filters__range-slider-input.noUi-horizontal {
    --_height: 0.2rem;
    --_size: calc(2rem - 0.2rem * var(--is-small));

    height: var(--_height);

    background-color: #aeaeae;
    border: none;
    box-shadow: none;
}

.filters__range-slider-input .noUi-base {
    width: calc(100% - var(--_size));
}

.filters__range-slider-input .noUi-handle {
    top: calc(-1 * var(--_size) / 2 + var(--_height) / 2);
    right: calc(-1 * var(--_size));

    width: var(--_size);
    height: var(--_size);

    background-color: var(--color-primary);
    border: 0.2rem solid var(--color-primary);
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;

    transition: var(--transition);
    transition-property: background-color, border-color;
}

@media (hover: hover) {
    :is(.filters__range-slider-input .noUi-handle):hover {
        border-color: var(--color-dark);

        transition: var(--transition-change);
        transition-property: background-color, border-color;
    }
}

:is(.filters__range-slider-input .noUi-handle):focus {
    border-color: var(--color-dark);

    transition: var(--transition-change);
    transition-property: background-color, border-color;
}

:is(.filters__range-slider-input .noUi-handle):active {
    background-color: var(--color-dark-dimmed);
    border-color: var(--color-primary);

    transition: var(--transition-active);
    transition-property: background-color, border-color;
}

:is(.filters__range-slider-input .noUi-handle)::before, :is(.filters__range-slider-input .noUi-handle)::after {
    content: none;
}

.filters__range-slider-input .noUi-touch-area {
    --_overflow: 0.8rem;

    width: calc(100% + var(--_overflow) * 2);
    height: calc(100% + var(--_overflow) * 2);
    margin-top: calc(-1 * var(--_overflow));
    margin-left: calc(-1 * var(--_overflow));

    border-radius: 50%;
}

.filters__range-slider-input .noUi-connect {
    background-color: var(--color-primary);
}


.filters__range-values {
    display: flex;
    flex-wrap: wrap;
    gap: calc(1rem - 0.2rem * var(--is-small));

    margin-top: calc(
        3.8rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
    );
}

.filters__range-value {
    padding-top: calc(
        0.5rem
        - 0.2rem * var(--is-small)
    );
    padding-bottom: calc(
        0.5rem
        - 0.2rem * var(--is-small)
    );
    padding-left: calc(
        1.2rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
    );
    padding-right: calc(
        1.2rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
    );

    font-size: calc(
        1.4rem
        - 0.1rem * var(--is-small)
    );
    font-weight: bold;
    text-decoration: none;
    line-height: calc(
        2rem
        - 0.1rem * var(--is-small)
    );

    color: var(--color-text);
    background-color: #D7D7D7;
    border-radius: calc(
        1.5rem
        - 0.3rem * var(--is-small)
    );
}

@media (hover: hover) {
    .filters__range-value:hover {
        color: var(--color-text-inverse);
        background-color: var(--color-primary);
    }
}

.filters__range-value:active {
    color: var(--color-text-inverse);
    background-color: var(--color-dark-dimmed);
}


@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*----------------------------- CONTACT ------------------------------*/
/*====================================================================*/

.contact {
    display: grid;
    grid-template-columns: 1fr 3fr;
    -moz-column-gap: calc(
        3.8rem
    );
    column-gap: calc(
        3.8rem
    );
    row-gap: calc(
        3.8rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    align-items: center;
}

@media (min-width: 94em) {

    .contact {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

@media (max-width: 63.99375em) {

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

* + .contact {
    margin-top: calc(
        5.8rem
        + 0.2rem * var(--is-small)
    );
}

@media (min-width: 22.5em) {

    :where(.faq) + .contact {
        padding-left: calc(
            3.2rem
            - 0.4rem * var(--is-medium)
            - 0.4rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
        padding-right: calc(
            3.2rem
            - 0.4rem * var(--is-medium)
            - 0.4rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
    }
}

@media (min-width: 64em) and (max-width: 77.74375em) {

    .contact__title {
        --is-medium: 1;
        --is-tight: 0;
    }
}

.contact__title {

    font-family: var(--font-text);
    font-size: calc(
        2.4rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: bold;
    text-transform: uppercase;
}

.contact__list {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: calc(
        4.8rem
    );
    column-gap: calc(
        4.8rem
    );
    row-gap: calc(
        3.8rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

.contact__item {
    flex-basis: 40%;
}

@media (max-width: 93.99375em) {

    .contact__item {
        flex-grow: 1;
    }
}

.contact__link {
    font-size: calc(
        3.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    font-weight: 400;
}

.contact__info {
    font-size: calc(1.6rem - 0.2rem * var(--is-small));
    font-weight: 700;
    text-transform: uppercase;

    margin-top: calc(
        0.2rem
        + 0.3rem * var(--is-medium)
        + 0.6rem * var(--is-small)
    );
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------------- FAQ --------------------------------*/
/*====================================================================*/

* + .faq {
    margin-top: calc(
        9.8rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
}

:where(.box) + .faq {
    margin-top: calc(
        8.2rem
        - 0.4rem * var(--is-small)
    );
}

:where(.offline-steps) + .faq {
    margin-top: calc(
        12.6rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
}

@media (max-width: 47.99375em) {

    .faq__title {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

.faq__list {
    display: grid;
    row-gap: 0.8rem;

    margin-top: calc(
        3.8rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 94em) {

    .faq__list {
        marign-inline: -1.8rem;
    }
}

.faq__list {

    backface-visibility: hidden;
}

.faq__item {
    display: grid;
}

.faq__item-title {
    display: grid;
}

/*--------------------------------------------------------------------*/
/*------------------------------ TOGGLE ------------------------------*/
/*--------------------------------------------------------------------*/

.faq__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    min-height: calc(
        7.9rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    padding-top: calc(1.2rem - 0.2rem * var(--is-small));
    padding-bottom: calc(1.2rem - 0.2rem * var(--is-small));
    padding-left: 3.2rem;
    padding-right: 3.2rem;

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;

    background-color: #fff;
    border-radius: 2.7rem;
    box-shadow: 0.7rem 0.8rem 1rem 0rem rgba(0, 0, 0, 0.06);
    backface-visibility: hidden;
    outline-offset: -0.2rem;
}

@media (hover: hover) {
    .faq__toggle:hover {
        color: var(--color-primary)
    }
}

.faq__toggle:active {
    color: var(--color-dark-dimmed);
}

.faq__toggle-arrow {
    width: 1rem;
    height: 0.6rem;

    transition: inherit;
}

[aria-expanded="true"] .faq__toggle-arrow {
    transform: rotate(180deg);
}

/*--------------------------------------------------------------------*/
/*----------------------------- CONTENT ------------------------------*/
/*--------------------------------------------------------------------*/

.faq__content-wrapper {
    display: grid;
    grid-template-rows: 0fr;

    transition: grid-template-rows var(--transition-hide);
    will-change: grid-template-rows;
}

:where(.no-js) .faq__content-wrapper, .faq__content-wrapper.is-expanded {
    grid-template-rows: 1fr;

    transition: grid-template-rows var(--transition-show);
}

.faq__content {
    padding-left: calc(
        3.4rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    padding-right: calc(
        3.4rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    transition: var(--transition-hide);
}

:where(.no-js) .faq__content, .is-expanded:where(.faq__content-wrapper) .faq__content {
    opacity: 1;
    visibility: visible;

    transition: var(--transition-show);
}

.faq__content > :first-child {
    margin-top: calc(
        2.4rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.faq__content > :last-child {
    margin-bottom: 2.4rem;
}

@media (max-width: 29.99375em) {

    .faq__content :where(.table-scrollable) {
        margin-left: -0.8rem;
        margin-right: -0.8rem;
    }
}


/*====================================================================*/
/*------------------------------- BOX --------------------------------*/
/*====================================================================*/

.box {
    padding: calc(
        5.2rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    ) calc(
        4.2rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    background-color: #fff;
    border-radius: 2.7rem;
    box-shadow: 0.7rem 0.8rem 1rem 0rem rgba(0, 0, 0, 0.06);

    container-type: inline-size;

}

@media (min-width: 94em) {

    .box {
        margin-left: -1.8rem;
        margin-right: -1.8rem;

    }
}

:where(:not(.breadcrumbs)) + .box {
    margin-top: calc(
        5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );
}

@media (max-width: 63.99375em) {

    .box--tablet-s-invisible {
        padding: 0rem;
        margin: 0rem;

        background: none;
        border-radius: 0rem;
        box-shadow: none;
    }
}

.box__title-btn-group {
    display: flex;
    align-items: center;
    gap: 1rem calc(
        4.4rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
    );

    padding-left: 0.5rem;

    padding-right: 0.5rem;
}

@media (max-width: 39.99375em) {

    .box__title-btn-group {
        flex-wrap: wrap;
    }
}

.box__title-btn-divider {
    order: 2;
    flex-grow: 1;

    height: 0.1rem;
}

@media (max-width: 39.99375em) {

    .box__title-btn-divider {
        display: none;
    }
}

.box__title-btn-divider::after {
    content: "";

    display: block;

    padding-bottom: min(0.1rem, (100% - 10rem) * 9999);

    background-color: var(--color-light-dimmed-darker);
}

:where(.box__title-btn-group) .box__title {
    order: 1;
    flex-shrink: 1;

    margin-top: -0.6rem;
}

@media (max-width: 39.99375em) {

    :where(.box__title-btn-group) .box__title {
        flex-basis: min-content;
        flex-grow: 1;

        max-width: none;
    }
}

:where(.box__title-btn-group) .box__btn {
    order: 3;
    flex-shrink: 0;
}

.box__main-link {
    font-size: calc(1.5rem - 0.1rem * var(--is-small));
    font-weight: bold;
    text-transform: uppercase;
}

/*--------------------------------------------------------------------*/
/*------------------------- CART-STEPS-INSET -------------------------*/
/*--------------------------------------------------------------------*/

.box--cart-steps-inset {
    --_box-padding-top: calc(
        5.2rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );

    --_cart-steps-inset: -1.2rem;
}

@media (min-width: 40em) {

    .box--cart-steps-inset {
        --_cart-steps-inset: 3.1rem;
    }
}

@media (min-width: 56.25em) {

    .box--cart-steps-inset {
        --_cart-steps-inset: 3.7rem;
    }
}

@media (min-width: 64em) {

    .box--cart-steps-inset {
        --_cart-steps-inset: 4.0rem;
    }
}

@media (min-width: 77.75em) {

    .box--cart-steps-inset {
        --_cart-steps-inset: 4.6rem;
    }
}

@media (min-width: 94em) {

    .box--cart-steps-inset {
        --_cart-steps-inset: 5.6rem;
    }
}

.box--cart-steps-inset {

    position: relative;

    padding-top: calc(var(--_box-padding-top) + max(0rem, var(--_cart-steps-inset)));
    margin-top: calc(-1 * var(--_cart-steps-inset));
}

.box__cart-steps-drawing {
    position: absolute;
    right: 5.5%;
    bottom: 100%;

    transform: rotate(-3deg);
    transform-origin: 100% 95%;

    pointer-events: none;
}

@media (max-width: 93.99375em) {

    .box__cart-steps-drawing {
        right: 4%;

        scale: 0.85;
    }
}

@media (max-width: 77.74375em) {

    .box__cart-steps-drawing {
        right: 2.5%;

        scale: 0.75;
    }
}

@media (max-width: 63.99375em) {

    .box__cart-steps-drawing {
        display: none;
    }
}

/*--------------------------------------------------------------------*/
/*--------------------------- CONTENT-FORM ---------------------------*/
/*--------------------------------------------------------------------*/

.box--content-form {
    --_content-width: 38rem;

    position: relative;

    display: grid;
    grid-template-columns: var(--_content-width) 1fr;
    -moz-column-gap: calc(
        6.8rem
        - 1.6rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
    column-gap: calc(
        6.8rem
        - 1.6rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
    row-gap: calc(
        3.8rem
        - 1.2rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );

    padding-top: calc(
        4.4rem
        - 1.6rem * var(--is-small)
    );
    padding-bottom: calc(
        7rem
        - 2.0rem * var(--is-medium)
        - 3.4rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
    padding-left: calc(
        5.8rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
    padding-right: calc(
        5.8rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
}

@media (max-width: 77.74375em) {

    .box--content-form {
        --_content-width: 30rem;
    }
}

@media (max-width: 63.99375em) {

    .box--content-form {
        grid-template-columns: 1fr;
    }
}

:where(.box--content-form) .box__title {
    grid-column: 1 / -1;
}

/*----------------------------- CONTENT ------------------------------*/

@media (min-width: 64em) and (max-width: 77.74375em) {

    .box__content {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }
}

@media (max-width: 29.99375em) {

    .box__content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.box__content > :where(p) {
    font-weight: 500;
}

:is(.box__content > :where(p)) :where(a:not(.box__main-link)) {
    font-weight: inherit;
}

.box__content > * + * {
    margin-top: calc(
        2rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

/*------------------------------ FORM --------------------------------*/

@media (min-width: 64em) and (max-width: 77.74375em) {

    .box__form {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }
}

.box__form {

    display: flex;
    flex-direction: column;
}

@media (max-width: 63.99375em) {
    .box__form:where(:not(.box__form--default-form-width)) {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .box__form:where(:not(.box__form--default-form-width)) .form__ui {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

.box__form-main-label {
    display: block;

    padding-left: 0.5rem;
    margin-top: calc(
        -0.6rem
        + 0.6rem * var(--is-tight)
    );
    margin-bottom: calc(
        1.8rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );

    font-size: calc(
        2rem
        - 0.1rem * var(--is-medium)
        - 0.3rem * var(--is-small)
    );
    font-weight: bold;
    line-height: 1.15;
}

@media (max-width: 63.99375em) {

    .box__form-main-label {
        padding-left: 0;
        margin-top: calc(
            1.6rem
            - 0.4rem * var(--is-medium)
            - 1.0rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );

        font-size: calc(
            2rem
            - 0.2rem * var(--is-medium)
            - 0.5rem * var(--is-small)
        );
    }
}

:where(.box__form-main-label) + .form__item {
    margin-top: 0;
}


@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- PRODUCTS-BOX ---------------------------*/
/*====================================================================*/

.products-box {
    position: relative;
    z-index: 1;
}

@media (max-width: 63.99375em) {

    .products-box:where(.box--tablet-s-invisible) {
        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
        margin-left: calc(-1 * var(--page-padding));
        margin-right: calc(-1 * var(--page-padding));

        overflow: hidden;
    }

    @supports (overflow: clip) {

        .products-box:where(.box--tablet-s-invisible) {
            overflow-x: clip;
            overflow-y: visible;
        }
    }
}

:where(.page__columns) .products-box {
    margin-top: 0;
    margin-bottom: auto;
    margin-left: 0;
}

:where(.products-box) .products {
    margin-top: calc(
        4rem
        - 0.5rem * var(--is-medium)
        - 1rem * var(--is-small)
    );
    margin-left: -1rem;
    margin-right: -1rem;
}

@media (max-width: 23.43125em) {

    :where(.products-box) .products {
        margin-left: -1.2rem;
        margin-right: -1.2rem;
    }
}

:where(.products-box) :where(.products-box__header) + .products {
    margin-top: calc(
        3.5rem
        - 0.5rem * var(--is-medium)
        - 1rem * var(--is-small)
    );
}

:where(.box) + .products-box {
    margin-top: calc(
        9.5rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
    );
}

:where(.box--tablet-s-invisible) .products {
    margin-left: 0;
    margin-right: 0;
}

/*--------------------------------------------------------------------*/
/*------------------------------ HEADER ------------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 64em) and (max-width: 77.74375em) {

    :where(.page__columns) .products-box__header {
        --is-medium: 1;
    }
}

.products-box__header {

    display: flex;
    flex-wrap: wrap;
    gap: calc(0.8rem - 0.2rem * var(--is-small)) calc(1rem - 0.4rem * var(--is-small));

    margin-top: calc(
        -1.8rem
        + 0.2rem * var(--is-medium)
        + 0.6rem * var(--is-small)
        + 0.2rem * var(--is-tight)
    );
}

.products-box__header-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: calc(0.8rem - 0.2rem * var(--is-small)) calc(2.4rem - 0.4rem * var(--is-small));
}

@media (max-width: 39.99375em) {

    .products-box__header-item {
        flex-grow: 1;
        flex-basis: 100%;

        margin-right: -0.6rem;
    }
}

.products-box__header-select {
    width: calc(
        25.8rem
        - 3rem * var(--is-medium)
        - 6rem * var(--is-small)
        - 1.8rem * var(--is-tight)
    );
    height: calc(
        4.1rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 4.6rem;

    font-weight: 600;

    color: inherit;
    background-image: url("data:image/svg+xml, %3Csvg fill='%23D65A31' width='10' height='6' viewBox='-0.6 -0.1 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1.25708' width='1.77766' height='6.22179' transform='rotate(-45 0 1.25708)' /%3E%3Crect x='4.39941' y='5.65649' width='1.77766' height='6.22179' transform='rotate(-135 4.39941 5.65649)' /%3E%3C/svg%3E%0A");
    background-size: 1rem 0.6rem;
    background-position: calc(100% - 1.8rem) 50%;
    background-repeat: no-repeat;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (max-width: 22.49375em) {

    .products-box__header-select {
        width: auto;
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ FOOTER ------------------------------*/
/*--------------------------------------------------------------------*/

.products-box__footer {
    display: flex;
    flex-wrap: wrap;
    row-gap: calc(1.6rem - 0.2rem * var(--is-small));
    -moz-column-gap: calc(3.2rem - 0.4rem * var(--is-small));
    column-gap: calc(3.2rem - 0.4rem * var(--is-small));
    align-items: start;

    margin-top: calc(
        4.5rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    margin-bottom: calc(
        -0.7rem
        + 0.5rem * var(--is-medium)
        + 0.9rem * var(--is-small)
        + 0.3rem * var(--is-tight)
    );
}

.products-box__footer::before {
    content: "";

    flex-grow: 1;
    flex-basis: 0;

}

@media (max-width: 63.99375em) {
    .products-box__footer::before {
        content: none;
    }
}

@media (max-width: 93.99375em) {
    :where(.page__columns) .products-box__footer::before {
        content: none;
    }
}

.products-box__pagination {
    flex-grow: 1;
    flex-basis: 0;
    justify-content: flex-end;

    min-width: -moz-fit-content;

    min-width: fit-content;
}

@media (max-width: 39.99375em) {

    .products-box__pagination {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

@media (min-width: 64em) {

    .products-box__pagination :where(.pagination__pages) {
        justify-content: flex-end;
    }
}

@media (min-width: 64em) {

    :where(.page__columns) :is(.products-box__pagination :where(.pagination__pages)) {
        justify-content: flex-start;
    }
}

@media (min-width: 94em) {

    :where(.page__columns) :is(.products-box__pagination :where(.pagination__pages)) {
        justify-content: flex-end;
    }
}


@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- PRODUCT-BOX ----------------------------*/
/*====================================================================*/

.product-box {
    --_padding-inline: calc(
        5.2rem
        - 1.6rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );

    --_content-offset: 60;
    --_gallery-inset: 0;
    --_gallery-width: 460;
    --_gallery-height: 488;
    --_thumb-inline-gap: 26;
    --_thumb-width: 98;
    --_thumb-height: 142;
    --_thumb-count: 3;
    --_thumb-block-gap: calc(
        ((var(--_gallery-height)
        - (var(--_thumb-height) * var(--_thumb-count)))
        / (var(--_thumb-count) - 1))
        * (var(--_thumb-width) / var(--_gallery-width) * 1%)
    );
    --_thumb-container-block-gap: calc(
        ((var(--_gallery-height)
        - (var(--_thumb-height) * var(--_thumb-count)))
        / (var(--_thumb-count) - 1))
        * 1%
    );
    --_box-content-width: 1336;
}

@media (max-width: 93.99375em) {

    .product-box {
        --_content-offset: calc(
            50
            - 10 * var(--is-medium)
            - 5 * var(--is-tight)
        );
    }
}

@media (max-width: 77.74375em) {

    .product-box {
        --_gallery-width: 400;
        --_gallery-height: 468;
        --_thumb-inline-gap: 0;
        --_thumb-width: 0;
        --_gallery-inset: 24;
    }
}

@media (max-width: 63.99375em) {

    .product-box {
        --_gallery-width: 460;
        --_gallery-height: 528;
    }
}

@media (max-width: 47.99375em) {

    .product-box {
        --_gallery-inset: 12;
        --_content-offset: 35;
    }
}

@media (max-width: 39.99375em) {

    .product-box {
        --_gallery-height: 408;
        --_gallery-inset: 36;
        --_content-offset: 0;
    }
}

@media (max-width: 29.99375em) {

    .product-box {
        --_gallery-height: 438;
    }
}

@media (max-width: 22.49375em) {

    .product-box {
        --_gallery-inset: 20;
    }
}

.product-box {

    position: relative;
    z-index: 10;

    display: grid;
    grid-template-columns: calc(var(--_gallery-width) / var(--_box-content-width) * 100%) calc((var(--_box-content-width) - var(--_gallery-width)) / var(--_box-content-width) * 100%);
    grid-template-areas: "gallery content";
}

@media (max-width: 63.99375em) {

    .product-box {
        grid-template-areas:
            "gallery about"
            "product product";
    }
}

@media (max-width: 43.74375em) {

    .product-box {
        grid-template-areas:
            "gallery about-intro"
            "description description"
            "product product";
    }
}

@media (max-width: 39.99375em) {

    .product-box {
        grid-template-columns: 100%;
        grid-template-areas: "gallery" "about-intro" "description" "product";
    }
}

.product-box {

    padding-top: calc(
        5.6rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    padding-bottom: calc(
        6.8rem
        - 2.4rem * var(--is-medium)
        - 4.3rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
    padding-left: var(--_padding-inline);
    padding-right: var(--_padding-inline);
}

/*--------------------------------------------------------------------*/
/*------------------------------ GALLERY -----------------------------*/
/*--------------------------------------------------------------------*/

.product-box__gallery {
    grid-area: gallery;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--_thumb-width) / var(--_gallery-width) * 100%);
    grid-template-rows: min-content;
    grid-template-areas: "main controller";
    -moz-column-gap: calc(
        var(--_thumb-inline-gap) / var(--_gallery-width) * 100%
    );
    column-gap: calc(
        var(--_thumb-inline-gap) / var(--_gallery-width) * 100%
    );

    width: 100%;
    margin-bottom: auto;
}

.product-box__gallery::before {
    content: "";

    grid-row: 1;
    grid-column: main / controller;

    padding-bottom: calc(var(--_gallery-height) / var(--_gallery-width) * 100%);
}

.product-box__gallery * {
    visibility: visible;
}

/*---------------------------- MAIN ----------------------------*/

.product-box__gallery-main {
    position: relative;

    grid-area: main;
    display: grid;

    height: 0px;
    min-height: 100%;
    margin-left: calc(var(--_gallery-inset) * 0.1rem);
    margin-right: calc(var(--_gallery-inset) * 0.1rem);
    margin-bottom: auto;
}

:where(.no-js) .product-box__gallery-list {
    overflow: auto;
}

.product-box__gallery-item,
.product-box__gallery-link,
.product-box__gallery-image {
    position: relative;

    display: grid;
    grid-template: 100% / 100%;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.product-box__gallery-link {
    background-color: var(--color-light-dimmed);
    outline: none;
    cursor: zoom-in;
}

@media (hover: hover) {
    .product-box__gallery-link:hover {
        opacity: 0.8;
    }
}

.product-box__gallery-link:active {
    background-color: var(--color-light-dimmed-darker);
}

.product-box__gallery-link::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    border: 0.2rem solid var(--color-dark);
    box-shadow: inset 0 0 0 0.2rem var(--color-text-inverse);
    opacity: 0;

    pointer-events: none;
}

.product-box__gallery-link:focus-visible::after {
    opacity: 1;
}

.product-box__gallery-img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
    width: 100%;
    height: 100%;
}

/*---------------------------- CONTROLLER ----------------------------*/

.product-box__gallery-controller {
    grid-area: controller;

    display: grid;

    height: 0px;
    min-height: 100%;

    overflow: hidden;
}

@media (max-width: 77.74375em) {

    .product-box__gallery-controller {
        display: none;
    }
}

.product-box__gallery-controller-list {
    display: grid;
    align-content: start;
    row-gap: var(--_thumb-block-gap);
}

.product-box__gallery-controller-item {
    position: relative;

    padding-bottom: calc(var(--_thumb-height) / var(--_thumb-width) * 100%);
    background-color: var(--color-light-dimmed);
    outline: none;
    cursor: pointer;

    overflow: hidden;

    transition-property: background, opacity;
}

@media (hover: hover) {
    .product-box__gallery-controller-item:hover {
        opacity: 0.8;
    }
}

.product-box__gallery-controller-item:active {
    background-color: var(--color-light-dimmed-darker);
}

.product-box__gallery-controller-item::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    border: 0.2rem solid var(--color-dark);
    box-shadow: inset 0 0 0 0.2rem var(--color-text-inverse);
    opacity: 0;

    pointer-events: none;
}

.product-box__gallery-controller-item:focus-visible::after {
    opacity: 1;
}

.product-box__gallery-controller-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.product-box__gallery-controller-img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
    width: 100%;
    height: 100%;
}

/*---------------------------- ARROWS ----------------------------*/

.product-box__gallery-arrows {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;
}

@media (max-width: 77.74375em) {

    .product-box__gallery-arrows {
        display: flex;
        justify-content: space-between;

        top: 0;

        right: calc(-1.0rem - var(--_gallery-inset) * 0.1rem);

        bottom: 0;

        left: calc(-1.0rem - var(--_gallery-inset) * 0.1rem);

        pointer-events: none;
    }
}

@media (max-width: 47.99375em) {

    .product-box__gallery-arrows {
        top: 0;
        right: calc(-1.5rem - var(--_gallery-inset) * 0.1rem);
        bottom: 0;
        left: calc(-1.5rem - var(--_gallery-inset) * 0.1rem);
    }
}

@media (max-width: 39.99375em) {

    .product-box__gallery-arrows {
        top: 0;
        right: calc(0.4rem - var(--_gallery-inset) * 0.1rem);
        bottom: 0;
        left: calc(0.4rem - var(--_gallery-inset) * 0.1rem);
    }
}

@media (max-width: 22.49375em) {

    .product-box__gallery-arrows {
        top: 0;
        right: calc(-0.2rem - var(--_gallery-inset) * 0.1rem);
        bottom: 0;
        left: calc(-0.2rem - var(--_gallery-inset) * 0.1rem);
    }
}

.product-box__gallery-arrows-button {
    position: relative;

    display: flex;
    align-items: center;

    pointer-events: auto;
}

@media (hover: hover) {
    .product-box__gallery-arrows-button:hover {
        color: var(--color-primary);
    }
}

.product-box__gallery-arrows-button:active {
    color: var(--color-dark-dimmed);
}

.product-box__gallery-arrows-button:active:first-child {
    translate: -0.1rem 0;
    scale: 0.98;
}

.product-box__gallery-arrows-button:active:last-child {
    translate: 0.1rem 0;
    scale: 0.98;
}

.product-box__gallery-arrows-button::after {
    content: "";

    position: absolute;
    top: 0;
    right: -1.2rem;
    bottom: 0;
    left: -1.2rem;
}

.product-box__gallery-arrows-button:first-child::after {
    right: -3rem;
}

.product-box__gallery-arrows-button:last-child::after {
    left: -3rem;
}

.product-box__gallery-arrow {
    width: 1.6rem;
    height: auto;
}

@media (max-width: 22.49375em), (min-width: 40em) and (max-width: 47.99375em) {

    .product-box__gallery-arrow {
        scale: 0.8;
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ CONTENT -----------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 40em) {
    @media (max-width: 43.74375em) {

        .product-box__content {
            --is-medium: 0;
            --is-small: 1;
            --is-tight: 0;
        }
    }
}

.product-box__content {

    grid-area: content;
    display: flex;
    flex-direction: column;

    padding-left: calc(0.1rem * var(--_content-offset));
}

@media (max-width: 63.99375em) {

    .product-box__content {
        display: contents;
    }
}

.product-box__product-about {
    grid-area: about;
}

@media (max-width: 63.99375em) {

    .product-box__product-about {
        padding-left: calc(0.1rem * var(--_content-offset));
    }
}

@media (max-width: 43.74375em) {

    .product-box__product-about {
        display: contents;
    }
}

.product-box__product-about-intro {
    grid-area: about-intro;
}

@media (max-width: 43.74375em) {

    .product-box__product-about-intro {
        padding-left: calc(0.1rem * var(--_content-offset));
    }
}

@media (max-width: 39.99375em) {

    .product-box__product-about-intro {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

.product-box__description {
    grid-area: description;
}

@media (max-width: 39.99375em) {

    .product-box__description {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

.product-box__product {
    grid-area: product;
}

/*---------------------------- ABOUT ----------------------------*/

.product-box__title-group {
    display: grid;

    margin-top: calc(
        0.8rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

@media (max-width: 39.99375em) {

    .product-box__title-group {
        margin-top: calc(
            3.6rem
            - 0.6rem * var(--is-medium)
            - 1.2rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

.product-box__title-author {
    font-size: calc(
        2.4rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
    font-weight: bold;
}

.product-box__title {
    margin-top: 0.4rem;
}

.product-box__info {
    margin-top: calc(
        1.2rem
        - 0.5rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
    );
}

.product-box__info + .product-box__info {
    margin-top: 0.2em;
}

.product-box__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;

    margin-top: calc(
        1.8rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.product-box__category {
    position: relative;

    display: flex;
}

@media (max-width: 29.99375em), (min-width: 40em) and (max-width: 56.24375em) {
    .product-box__category:nth-child(1n + 5) {
        display: none;
    }
}

@media (max-width: 29.99375em), (min-width: 40em) and (max-width: 56.24375em) {
    .product-box__category:has( + :nth-child(5))::after {
        content: "…";

        position: absolute;
        bottom: calc(
            0.5rem
            - 0.2rem * var(--is-small)
        );
        left: 100%;

        margin-left: 0.8rem;
    }
}

@media (min-width: 56.24376em) {
    .product-box__category:nth-child(1n + 14) {
        display: none;
    }
}

@media (min-width: 56.24376em) {
    .product-box__category:has( + :nth-child(14))::after {
        content: "…";

        position: absolute;
        bottom: calc(
            0.5rem
            - 0.2rem * var(--is-small)
        );
        left: 100%;

        margin-left: 0.8rem;
    }
}

.product-box__category-link {
    padding-top: calc(
        0.5rem
        - 0.2rem * var(--is-small)
    );
    padding-bottom: calc(
        0.5rem
        - 0.2rem * var(--is-small)
    );
    padding-left: calc(
        1.2rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    padding-right: calc(
        1.2rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );

    text-decoration: none;
    line-height: calc(
        2rem
        - 0.1rem * var(--is-small)
    );

    color: var(--color-text);
    background-color: var(--color-light-dimmed);
    border-radius: calc(
        1.5rem
        - 0.3rem * var(--is-small)
    );
}

@media (hover: hover) {
    .product-box__category-link:hover {
        color: var(--color-text-inverse);
        background-color: var(--color-primary);
    }
}

.product-box__category-link:active {
    color: var(--color-text-inverse);
    background-color: var(--color-dark-dimmed);
}

.product-box__description {
    padding-top: calc(
        3.2rem
        - 0.5rem * var(--is-medium)
        - 1rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

@media (max-width: 56.24375em) {

    :where(.js) .product-box__description .expandable-inline-content__hidden {
        display: none;
    }
}

@media (min-width: 56.25em) {

    .product-box__description-button {
        display: none;
    }
}

.product-box__product {
    margin-top: auto;
    padding-top: calc(
        4.8rem
        - 1rem * var(--is-medium)
        - 2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 22.5em) {
    .product-box__product .product {
        margin-left: -0.8rem;
        margin-right: -0.8rem;
    }
}

.product-box__product-label {
    margin-bottom: calc(
        1.2rem
        - 0.2rem * var(--is-small)
    );

    font-size: calc(
        1.6rem
        - 0.1rem * var(--is-medium)
        - 0.2rem * var(--is-small)
        - 0.1rem * var(--is-tight)
    );
    font-weight: 600;
}

@media (max-width: 39.99375em) {

    .product-box__product-label {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- AUTHOR-BOX -----------------------------*/
/*====================================================================*/

.author-box {
    position: relative;
}

@media (min-width: 40em) {
    @media (max-width: 93.99375em) {

        .author-box {
            --is-medium: 0;
            --is-tight: 1;
        }
    }
    @media (max-width: 77.74375em) {

        .author-box {
            --is-medium: 1;
            --is-tight: 0;
        }
    }
    @media (max-width: 63.99375em) {

        .author-box {
            --is-medium: 1;
            --is-tight: 1;
        }
    }
    @media (max-width: 56.24375em) {

        .author-box {
            --is-tight: 0;
            --is-medium: 0;
            --is-small: 1;
        }
    }
    @media (max-width: 47.99375em) {

        .author-box {
            --is-tight: 1;
        }
    }
}

.author-box {

    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: calc(
        5.8rem
        - 1.0rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    column-gap: calc(
        5.8rem
        - 1.0rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    row-gap: calc(
        3.8rem
        - 0.6rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );

    padding-top: calc(
        5.5rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );

    padding-bottom: calc(
        5.5rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    padding-left: calc(
        5.8rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
    padding-right: calc(
        5.8rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
}

@media (min-width: 40em) {

    .author-box {
        padding-top: calc(
            5.5rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
        padding-bottom: calc(
            5.5rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
    }
}

.author-box__icon {
    position: absolute;
    right: 3%;
    bottom: 100%;

    transform: translateY(50%);
    transform-origin: right 100%;

    pointer-events: none;
}

@media (max-width: 77.74375em) {

    .author-box__icon {
        scale: 0.9;
    }
}

@media (max-width: 63.99375em) {

    .author-box__icon {
        scale: 0.8;
    }
}

@media (max-width: 56.24375em) {

    .author-box__icon {
        scale: 0.75;
    }
}

@media (max-width: 47.99375em) {

    .author-box__icon {
        display: none;
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ IMAGE -------------------------------*/
/*--------------------------------------------------------------------*/

.author-box__figure {
    flex-basis: 0%;
    flex-shrink: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;

    margin-top: calc(
        1.4rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.author-box__img {
    --_size: calc(
        24.5rem
        - 2.2rem * var(--is-medium)
        - 4.4rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );

    -o-object-fit: cover;

    object-fit: cover;
    width: var(--_size);
    min-width: var(--_size);
    height: var(--_size);
    min-height: var(--_size);

    border-radius: 50%;
}

/*--------------------------------------------------------------------*/
/*------------------------------ CONTENT -----------------------------*/
/*--------------------------------------------------------------------*/

.author-box__content {
    flex-grow: 100;
    flex-basis: 0%;
}

@media (max-width: 39.99375em) {

    .author-box__content {
        flex-basis: 100%;
    }
}

@media (min-width: 48em) {

    .author-box__title,
    .author-box__subtitle {
        padding-right: 10rem;
    }
}

.author-box__subtitle {
    margin-top: calc(
        0.2rem
        + 0.2rem * var(--is-small)
    );

    font-size: calc(
        2.4rem
        - 0.3rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
    font-weight: bold;

    color: var(--color-primary);
}

.author-box__description {
    margin-top: calc(
        1.8rem
        + 0.2rem * var(--is-medium)
        + 0.6rem * var(--is-small)
    );
}

:where(.js) .author-box__description .expandable-inline-content__hidden {
    display: none;
}

.author-box__description-button {
    display: block;

    max-width: -moz-max-content;

    max-width: max-content;
    margin-top: calc(
        1.6rem
        - 0.4rem * var(--is-small)
    );

    font-size: calc(
        1.6rem
        - 0.2rem * var(--is-small)
    );
}

@media (max-width: 39.99375em) {

    .author-box__description-button {
        margin-bottom: 0.4rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------- OTHER-AUTHORS-BOX ------------------------*/
/*====================================================================*/

.other-authors-box {
    display: grid;
    align-items: center;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "title list";
    -moz-column-gap: calc(
        2.4rem
    );
    column-gap: calc(
        2.4rem
    );
    row-gap: calc(
        3.8rem
    );

    padding-top: calc(
        2.2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
    padding-bottom: calc(
        2.6rem
        + 0.6rem * var(--is-medium)
        + 1.2rem * var(--is-small)
        + 0.4rem * var(--is-tight)
    );

    overflow: auto;
}

@media (max-width: 93.99375em) {

    .other-authors-box {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "list";
    }
}

:where(.page__columns) + .other-authors-box {
    margin-top: calc(
        7.8rem
        + 1.4rem * var(--is-medium)
        + 2.8rem * var(--is-small)
        + 0.6rem * var(--is-tight)
    );
}

.other-authors-box__title {
    grid-area: title;

    font-size: calc(
        3rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    text-align: center;
}

@media (min-width: 94.0625em) {

    .other-authors-box__title {
        margin-left: 1.1rem;
        margin-right: 1.1rem;

        text-align: left;
    }
}

.other-authors-box__list {
    --is-small: 0;
    --is-medium: 0;
    --is-tight: 0;
}

@media (max-width: 22.49375em), (min-width: 30em) and (max-width: 39.99375em), (min-width: 77.75em) and (max-width: 83.99375em) {

    .other-authors-box__list {
        --is-small: 1;
    }
}

.other-authors-box__list {

    grid-area: list;
    display: grid;
    grid-template-columns: repeat(8, auto);
    gap: 2rem;
}

@media (max-width: 77.74375em) {

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

    @media (min-width: 56.25em) {

        .other-authors-box__list {
            padding-left: 4%;
            padding-right: 4%;
        }
    }
}

@media (max-width: 47.99375em) {

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

    @media (min-width: 40em) {

        .other-authors-box__list {
            padding-left: 2.5%;
            padding-right: 2.5%;
        }
    }
    .other-authors-box__list > :nth-child(1n + 7) {
        display: none;
    }
}

@media (max-width: 39.99375em) {

    .other-authors-box__list {
        margin-left: -0.3rem;
        margin-right: -0.3rem;
    }
}

@media (max-width: 29.99375em) {

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

@media (max-width: 22.49375em) {

    .other-authors-box__list {
        margin-left: -0.6rem;
        margin-right: -0.6rem;
    }
}

.other-authors-box__link {
    display: grid;
    justify-items: center;

    font-size: calc(1.6rem - 0.2rem * var(--is-small));
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
}

.other-authors-box__img {
    -o-object-fit: cover;
    object-fit: cover;
    width: calc(8.6rem - 0.6rem * var(--is-small));
    min-width: calc(8.6rem - 0.6rem * var(--is-small));
    height: calc(8.6rem - 0.6rem * var(--is-small));
    min-height: calc(8.6rem - 0.6rem * var(--is-small));

    border-radius: 50%;
}

.other-authors-box__name {
    width: -moz-min-content;
    width: min-content;
    margin-top: 0.4rem;
    margin-bottom: auto;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*---------------------------- CART-BOX ------------------------------*/
/*====================================================================*/

.cart-box {
    --_box-padding-top: calc(
        6rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );

    position: relative;

    padding-left: 7.2rem;
    padding-right: 5rem;
}

@media (max-width: 93.99375em) {

    .cart-box {
        padding-left: calc(
            5rem
            - 1.2rem * var(--is-medium)
            - 2.4rem * var(--is-small)
            - 0.6rem * var(--is-tight)
        );
        padding-right: calc(
            5rem
            - 1.2rem * var(--is-medium)
            - 2.4rem * var(--is-small)
            - 0.6rem * var(--is-tight)
        );
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ BOTTOM ------------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 40em) {
    @media (max-width: 93.99375em) {

        .cart-box__bottom {
            --is-tight: 1;
            --is-medium: 0;
            --is-small: 0;
        }
    }
    @media (max-width: 77.74375em) {

        .cart-box__bottom {
            --is-tight: 0;
        }
    }
    @media (max-width: 63.99375em) {

        .cart-box__bottom {
            --is-tight: 1;
        }
    }
    @media (max-width: 56.24375em) {

        .cart-box__bottom {
            --is-tight: 0;
            --is-small: 1;
        }
    }
    @media (max-width: 47.99375em) {

        .cart-box__bottom {
            --is-medium: 0;
            --is-small: 1;
            --is-tight: 1;
        }
    }
}

.cart-box__bottom {

    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-areas: "heureka delivery summary";
    grid-column-gap: 5rem;
    grid-row-gap: 3.8rem;

    margin-top: calc(
        5.2rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    margin-bottom: calc(
        1.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-small)
    );
}

@media (max-width: 77.74375em) {

    .cart-box__bottom {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "delivery summary"
            "heureka  summary";
    }
}

@media (max-width: 39.99375em) {

    .cart-box__bottom {
        grid-template-columns: 1fr;
        grid-template-areas:
            "summary"
            "delivery"
            "heureka";
        grid-row-gap: 3.2rem;
        justify-items: center;
    }
}

/*---------------------------- HEUREKA ----------------------------*/

.cart-box__heureka {
    margin-top: calc(
        2.8rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 77.75em) {

    .cart-box__heureka {
        margin-right: calc(5rem - 2rem * var(--is-tight));
    }
}

@media (max-width: 39.99375em) {

    .cart-box__heureka {
        margin-top: calc(
            1.0rem
            - 0.4rem * var(--is-medium)
            - 0.8rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

.cart-box__heureka img {
    max-width: 100%;
    height: auto;
}

/*---------------------------- FREE-DELIVERY ----------------------------*/

.cart-box__free-delivery {
    grid-area: delivery;
    display: grid;
    grid-auto-rows: min-content;

    max-width: -moz-max-content;

    max-width: max-content;
    margin-top: calc(
        2.8rem
        - 0.4rem * var(--is-medium)
        - 0.5rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

@media (max-width: 39.99375em) {

    .cart-box__free-delivery {
        margin-top: calc(
            2.8rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
    }
}

@media (min-width: 30em) and (max-width: 39.99375em) {

    .cart-box__free-delivery {
        max-width: 100%;
        width: min(36rem, 100%);

        text-align: center;
    }
}

@media (max-width: 29.99375em) {

    .cart-box__free-delivery {
        width: 100%;
        max-width: 100%;
    }

    .cart-box__free-delivery :where(p) {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.cart-box__free-delivery-title :where(strong) {
    color: var(--color-primary);
}

.cart-box__free-delivery-meter {
    width: 100%;
    max-width: 36rem;
    height: 1.1rem;

    margin-top: calc(
        1.8rem
        - 0.2rem * var(--is-small)
    );

    background: #efefef;
    border: none;
    border-radius: 1000vmax;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cart-box__free-delivery-meter::-webkit-meter-bar {
    height: 1.1rem;

    background: none;
    background-color: #efefef;
    border-radius: 1000vmax;
}

.cart-box__free-delivery-meter::-webkit-meter-optimum-value {
    background: var(--color-primary);
    border-radius: 1000vmax;
}

.cart-box__free-delivery-meter::-moz-meter-bar {
    background: var(--color-primary);
    border-radius: 1000vmax;
}

.cart-box__free-delivery-form {
    margin-top: calc(
        3.4rem
        - 0.2rem * var(--is-medium)
        - 0.5rem * var(--is-small)
    );
}

.cart-box__free-delivery-form ~ * {
    margin-top: calc(
        2.2rem
        - 0.4rem * var(--is-small)
    );
}

.cart-box__free-delivery-form .form__item {
    font-size: calc(1.5rem - 0.2rem * var(--is-small));
}

.cart-box__free-delivery-form .form__label {
    font-weight: 600;
}

/*---------------------------- SUMMARY-NEXT ----------------------------*/

.cart-box__summary-next-group {
    grid-area: summary;
    display: grid;
    justify-content: end;
    grid-auto-rows: min-content;

    text-align: right;
}

.cart-count-only {
    display: none;
}

@media (max-width: 39.99375em) {

    .cart-box__summary-next-group {
        text-align: center;
    }
}

@media (max-width: 29.99375em) {

    .cart-box__summary-next-group {
        justify-content: stretch;

        width: 100%;
    }
}

.cart-box__summary {
    font-size: 1.5rem;
    font-weight: bold;
}

.cart-box__summary :where(strong) {
    margin-left: 1rem;

    font-size: calc(
        3.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    color: var(--color-primary);
}

.cart-box__next {
    margin-top: 1.2rem;
    margin-left: auto;
}

@media (max-width: 39.99375em) {

    .cart-box__next {
        margin-top: 2.2rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 29.99375em) {

    .cart-box__next {
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-items: center;

        width: 100%;
        max-width: 100%;
    }
}

.cart-box__next ~ * {
    margin-top: calc(
        1.6rem
    );
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*---------------------------- ORDER-BOX -----------------------------*/
/*====================================================================*/

.order-box {
    --_box-padding-top: calc(
        7.8rem
        - 2.4rem * var(--is-medium)
        - 4.8rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    padding-left: 7.2rem;
    padding-right: 5rem;
}

@media (max-width: 93.99375em) {

    .order-box {
        padding-left: calc(
            5rem
            - 1.2rem * var(--is-medium)
            - 2.4rem * var(--is-small)
            - 0.6rem * var(--is-tight)
        );
        padding-right: calc(
            5rem
            - 1.2rem * var(--is-medium)
            - 2.4rem * var(--is-small)
            - 0.6rem * var(--is-tight)
        );
    }
}

.order-box__main {
    --is-small: 0;
    --is-medium: 0;
    --is-tight: 0;
    --_first-row-min-height: 28.8rem;
    --_column-gap: 7.6rem;
}

@media (max-width: 93.99375em) {

    .order-box__main {
        --is-tight: 1;
        --_first-row-min-height: 27rem;
        --_column-gap: 6.2rem;
    }
}

@media (max-width: 83.99375em) {

    .order-box__main {
        --is-tight: 0;
        --is-medium: 1;
        --_first-row-min-height: 26rem;
    }
}

@media (max-width: 77.74375em) {

    .order-box__main {
        --is-medium: 0;
        --is-small: 1;
        --_first-row-min-height: 21rem;
        --_column-gap: 6.0rem;
    }
}

@media (max-width: 63.99375em) {

    .order-box__main {
        --is-medium: 0;
        --is-tight: 1;
        --_first-row-min-height: 18rem;
        --_column-gap: 5.0rem;
    }
}

@media (max-width: 56.24375em) {

    .order-box__main {
        --is-medium: 1;
        --is-small: 0;
        --is-tight: 0;
    }
}

@media (max-width: 47.99375em) {

    .order-box__main {
        --is-tight: 1;
    }
}

@media (max-width: 39.99375em) {

    .order-box__main {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }
}

@media (max-width: 29.99375em) {

    .order-box__main {
        --is-tight: 1;
    }
}

.order-box__main {

    display: grid;
    grid-template-columns: 52.8% auto;
    grid-template-rows:
            minmax(var(--_first-row-min-height), min-content);
    grid-auto-rows: min-content;
    grid-template-areas:
            "address delivery"
            "address payment"
            "address payment";
    -moz-column-gap: var(--_column-gap);
    column-gap: var(--_column-gap);
}

@media (min-width: 94em) {

    .order-box__main {
        margin-right: 4.6rem;
        margin-left: 1.6rem;
    }
}

@media (max-width: 56.24375em) {

    .order-box__main {
        grid-template-columns: 92%;
        grid-template-areas: "address" "delivery" "payment";
        justify-content: center;
    }
}

@media (max-width: 47.99375em) {

    .order-box__main {
        grid-template-columns: 100%;
    }
}

.order-box__main .form__table {
    max-width: 52rem;
}

.order-box__address {
    grid-area: address;
}

.order-box__delivery {
    grid-area: delivery;
}

.order-box__payment {
    grid-area: payment;

    margin-top: 5rem;
}

@media (max-width: 56.24375em) {

    .order-box__delivery,
    .order-box__payment {
        margin-top: calc(
            5.8rem
            - 0.8rem * var(--is-medium)
            - 1.6rem * var(--is-small)
            - 0.4rem * var(--is-tight)
        );
    }
}

.order-box__title {
    margin-bottom: calc(
        3.6rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (max-width: 29.99375em) {

    :where(.order-box__delivery,.order-box__payment) .order-box__title {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

.order-box__delivery-form,
.order-box__payment-form {
    padding-top: 0.4rem;
}

.order-box__ordered-items {
    margin-top: calc(
        6.6rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

/*--------------------------------------------------------------------*/
/*------------------------------ ADDRESS -----------------------------*/
/*--------------------------------------------------------------------*/

/*---------------------------- ADDITIONAL-INFO ----------------------------*/

.order-box__additional-info {
    display: grid;
    gap: 0.4rem 2rem;

    margin-top: calc(
        2.4rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
    );
}

.order-box__additional-section {
    flex-grow: 1;
}

@media (max-width: 29.99375em) {

    .order-box__additional-section {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

.order-box__hidden-section {
    display: grid;
    grid-template-rows: 1fr;

    transition: grid-template-rows var(--transition-show);
    will-change: grid-template-rows;
}

:where(.js) .order-box__hidden-section[aria-hidden="true"] {
    grid-template-rows: 0fr;

    visibility: hidden;

    transition: grid-template-rows var(--transition-hide), visibility 0s linear var(--transition-hide-duration);
}

.order-box__hidden-content {
    overflow: hidden;
}

@media (max-width: 29.99375em) {

    .order-box__hidden-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

.order-box__hidden-content::before, .order-box__hidden-content::after {
    content: "";

    display: block;
}

.order-box__hidden-content::before {
    height: 0.8rem;
}

.order-box__hidden-content::after {
    height: calc(
        2.4rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

/*--------------------------------------------------------------------*/
/*------------------------------ SUMMARY ------------------------------*/
/*--------------------------------------------------------------------*/

.order-box__summary {
    margin-top: 3.4rem;
    margin-right: calc(
        3.2rem
        - 1.2rem * var(--is-tight)
    );

    font-size: 1.5rem;
    font-weight: bold;
    text-align: right;
}

@media (max-width: 63.99375em) {

    .order-box__summary {
        margin-right: 0.4rem;
    }
}

@media (max-width: 39.99375em) {

    .order-box__summary {
        margin-top: calc(
            5.2rem
            - 0.8rem * var(--is-small)
        );
        margin-right: 0;

        text-align: center;
    }
}

.order-box__summary :where(strong) {
    margin-left: 1rem;

    font-size: calc(
        3.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    color: var(--color-primary);
}

/*--------------------------------------------------------------------*/
/*------------------------------ BOTTOM ------------------------------*/
/*--------------------------------------------------------------------*/

.order-box__bottom {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    align-items: center;
    justify-items: end;
    -moz-column-gap: calc(
        3.8rem
        - 0.6rem * var(--is-tight)
    );
    column-gap: calc(
        3.8rem
        - 0.6rem * var(--is-tight)
    );
    row-gap: calc(
        3.8rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );

    margin-top: calc(
        6.2rem
        - 1.6rem * var(--is-medium)
        - 3.2rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
    margin-bottom: calc(
        0.8rem
        - 0.8rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

@media (max-width: 63.99375em) {

    .order-box__bottom {
        grid-template-columns: 1fr min-content;
    }
}

@media (max-width: 39.99375em) {

    .order-box__bottom {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 94em) {

    .order-box__bottom .form__label {
        font-size: 1.7rem;
    }
}

.order-box__next,
.order-box__back {
    margin-bottom: auto;
}

.order-box__next {
    min-width: 15.2rem;
    justify-content: center;
}

@media (max-width: 39.99375em) {

    .order-box__next {
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-items: center;

        min-width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 29.99375em) {

    .order-box__next {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- REQUEST-BOX ----------------------------*/
/*====================================================================*/

.request-box {
}

.request-box__icon {
    position: absolute;
    right: 3%;
    bottom: 100%;

    transform: translateY(73%);
    transform-origin: right 100%;

    pointer-events: none;
}

@media (max-width: 93.99375em) {

    .request-box__icon {
        scale: 0.9;
    }
}

@media (max-width: 77.74375em) {

    .request-box__icon {
        scale: 0.75;
    }
}

@media (max-width: 63.99375em) {

    .request-box__icon {
        right: 4%;

        scale: 0.666;
    }
}

@media (max-width: 47.99375em) {

    .request-box__icon {
        scale: 0.6;
    }
}

@media (max-width: 29.99375em) {

    .request-box__icon {
        right: 5%;

        scale: 0.5;
    }
}

@media (max-width: 22.49375em) {

    .request-box__icon {
        scale: 0.425;
    }
}

/*--------------------------------------------------------------------*/
/*----------------------------- CONTENT ------------------------------*/
/*--------------------------------------------------------------------*/

:is(:where(.request-box) .box__content) > :where(:first-child) {
    padding-bottom: 0.8rem;
}

:is(:where(.request-box) .box__content) > :where(:first-child ~ p) {
    font-weight: 400;
}

/*--------------------------------------------------------------------*/
/*------------------------------ FORM --------------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 64em) and (max-width: 77.74375em) {

    :where(.request-box) .box__form {
        margin-right: -1.0rem;
    }
}

.request-box__new-request {
    display: flex;
    align-items: center;

    margin-top: calc(1.4rem - 0.2rem * var(--is-small));
    margin-bottom: calc(3.4rem - 0.6rem * var(--is-small));

    font-size: calc(1.5rem - 0.1rem * var(--is-small));
    font-weight: 700;
    text-decoration: underline;

    color: var(--color-primary);
}

@media (max-width: 29.99375em) {

    .request-box__new-request {
        margin-left: -0.5rem;
    }
}

.request-box__new-request-icon {
    flex-shrink: 0;

    width: calc(4.2rem - 0.3rem * var(--is-small));
    height: calc(4.1rem - 0.3rem * var(--is-small));
    padding: calc(((4.1rem - 0.3rem * var(--is-small)) - 2.4rem) / 2);
    margin-right: 1.6rem;

    fill: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-radius: 50%;

    transition: inherit;
}

@media (hover: hover) {
    :hover > .request-box__new-request-icon {
        background-color: var(--color-dark);
    }
}

:active > .request-box__new-request-icon {
    background-color: var(--color-dark-dimmed);
}

.request-box__email-group {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: start;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    row-gap: calc(
        2.6rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
    );

    margin-top: auto;
}

.request-box__email-group > * {
    grid-column: 1 / -1;
}

@media (min-width: 40em) and (max-width: 47.99375em) {

    .request-box__email {
        --is-small: 1;
    }
}

.request-box__email {

    margin-top: 0;
}

@media (min-width: 40em) {

    .request-box__email {
        grid-column: 1 / span 1;
    }
}

.request-box__send {
    grid-column: 2 / span 1;
}

@media (min-width: 40em) {

    .request-box__send {
        min-height: 4.1rem;
    }
}

@media (max-width: 39.99375em) {

    .request-box__send {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-items: center;

        width: calc(100% + 1rem);
        max-width: none;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- ONLINE-BOX -----------------------------*/
/*====================================================================*/

.online-box {
}

.online-box__icon {
    position: absolute;
    right: 4.5%;
    bottom: 100%;

    transform: translateY(81%);
    transform-origin: right 100%;

    pointer-events: none;
}

@media (max-width: 93.99375em) {

    .online-box__icon {
        scale: 0.9;
    }
}

@media (max-width: 77.74375em) {

    .online-box__icon {
        scale: 0.75;
    }
}

@media (max-width: 63.99375em) {

    .online-box__icon {
        right: 4%;

        scale: 0.666;
    }
}

@media (max-width: 47.99375em) {

    .online-box__icon {
        scale: 0.6;
    }
}

.online-box__products {
    grid-column: 1 / -1;

    margin-top: calc(
        4.6rem
        - 0.8rem * var(--is-medium)
        - 1.6rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    margin-bottom: 0.8rem;
}

@media (max-width: 63.99375em) {

    .online-box__products {
        margin-bottom: calc(2.4rem - 0.4rem * var(--is-small));
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ FORM --------------------------------*/
/*--------------------------------------------------------------------*/

@media (max-width: 63.99375em) {

    :where(.online-box) .box__content {
        margin-top: calc(
            1.5rem
            - 0.4rem * var(--is-medium)
            - 0.8rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }

    :is(:where(.online-box) .box__content) > * + * {
        margin-top: calc(
            2.2rem
            - 0.2rem * var(--is-medium)
            - 0.4rem * var(--is-small)
        );
    }
}

:where(.online-box) .box__form {
    align-self: center;
}

@media (min-width: 64em) {

    :where(.online-box) .box__form {
        margin-bottom: calc(
            2.4rem
            - 0.5rem * var(--is-medium)
            - 1.0rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

@media (max-width: 63.99375em) {

    :where(.online-box) .box__form {
        margin-top: calc(
            1.8rem
            - 0.4rem * var(--is-medium)
            - 0.8rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

@media (min-width: 64em) {

    :where(.online-box) .box__form-main-label {
        max-width: 75%;
    }
}

.online-box__search {
    display: grid;
}

.online-box__search > * {
    grid-area: 1 / 1;
}

.online-box__search-btn {
    margin-top: 0.3rem;
    margin-right: 0.5rem;
    margin-left: auto;
}

@media (max-width: 63.99375em) {

    .online-box__search-btn {
        margin-right: -0.5rem;
    }
}

:where(.online-box__search-item) .form__input {
    padding-right: calc(4.5rem - var(--_padding-inline));
}

.online-box__scan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    row-gap: 1.0rem;

    margin-top: calc(
        1.8rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    font-size: calc(1.6rem - 0.1rem * var(--is-small));
    font-weight: bold;
}

@media (min-width: 64em) {

    .online-box__scan {
        padding-left: 0.5rem;
    }
}

@media (max-width: 29.99375em) {

    .online-box__scan {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 29.99375em) {

    .online-box__scan-btn {
        margin-left: -1.0rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- OFFLINE-BOX ----------------------------*/
/*====================================================================*/

@media (min-width: 94em) {

    .offline-box {
        --_content-width: 41.4rem;
    }
}

@media (max-width: 63.99375em) {

    .offline-box {
        grid-template-columns: min(100%, 82rem);
        justify-content: center;
    }
}

/*--------------------------------------------------------------------*/
/*------------------------------ FORM --------------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 30em) and (max-width: 39.99375em) {

    :where(.offline-box) .box__form {
        --is-medium: 0;
        --is-small: 1;
        --is-tight: 0;
    }
}

@media (min-width: 48em) and (max-width: 63.99375em) {

    :where(.offline-box) .box__form {
        --_form-item-space: 2.2rem;
    }
}

@media (min-width: 94em) {

    :where(.offline-box) .box__form {
        --_form-item-space: 2.3rem;
    }
}

@media (min-width: 64em) {

    :where(.offline-box) .box__form {
        width: 100%;
        max-width: 68rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 77.75em) {

    :where(.offline-box) .box__form {
        margin-top: -4rem;
    }
}

@media (max-width: 63.99375em) {

    :where(.offline-box) .box__form {
        margin-top: calc(1.8rem - 0.2rem * var(--is-small));
    }
}

.offline-box__item-next-group {
    display: grid;
    grid-template-columns: 1fr max-content;
    -moz-column-gap: var(--_form-column-gap);
    column-gap: var(--_form-column-gap);

    margin-top: var(--_form-item-space);
}

@media (max-width: 39.99375em) {

    .offline-box__item-next-group {
        grid-template-columns: 1fr;
        row-gap: 2.3rem;
    }
}

@media (max-width: 39.99375em) {

    .offline-box__next {
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-items: center;

        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 29.99375em) {

    .offline-box__next {
        width: calc(100% + 1rem);
        max-width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*---------------------------- CRATE-BOX -----------------------------*/
/*====================================================================*/

.crate-box {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    grid-template-areas: "crate title";
    align-items: center;
    -moz-column-gap: calc(
        4.8rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    column-gap: calc(
        4.8rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

@media (max-width: 22.49375em) {

    .crate-box {
        -moz-column-gap: 2rem;
        column-gap: 2rem;
    }
}

.crate-box {

    padding-top: calc(
        6.2rem
        - 1.0rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
    padding-bottom: calc(
        7.8rem
        - 2.2rem * var(--is-medium)
        - 4.4rem * var(--is-small)
        - 1.4rem * var(--is-tight)
    );
    padding-left: calc(
        5.8rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
    padding-right: calc(
        5.8rem
        - 1.8rem * var(--is-medium)
        - 2.6rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
}

.crate-box--link {
    grid-template-areas: "crate title" "link link";

    padding-top: calc(
        4.5rem
        - 1.0rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );

    padding-bottom: calc(
        4.5rem
        - 1.0rem * var(--is-medium)
        - 2.0rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );
}

@media (min-width: 48em) {

    .crate-box--link {
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        grid-template-areas: "crate title link";
    }
}

.crate-box__crate {
    grid-area: crate;
    display: grid;

    margin-top: calc(
        -0.8rem
        + 0.4rem * var(--is-medium)
        + 0.8rem * var(--is-small)
    );
    margin-bottom: auto;
}

.crate-box__crate > * {
    grid-area: 1 / 1;
}

.crate-box__crate-icon {
    width: 7.7rem;
    height: auto;
}

@media (min-width: 22.5em) and (max-width: 29.99375em) {

    .crate-box__crate-icon {
        width: 8.1rem;
    }
}

.crate-box__count {
    z-index: 2;

    display: grid;
    align-items: center;
    justify-content: center;

    min-width: 3.1rem;
    height: 3.1rem;
}

@media (min-width: 22.5em) and (max-width: 29.99375em) {

    .crate-box__count {
        min-width: 3.3rem;
        height: 3.3rem;
    }
}

.crate-box__count {
    padding: 0 0.8rem;
    margin-top: auto;
    margin-right: -0.2rem;
    margin-left: auto;
    margin-bottom: -1.5rem;

    font-size: 1.6rem;
    font-weight: 800;

    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: 0.2rem solid white;
    border-radius: calc((3.1rem + 0.2rem * var(--is-small)) / 2);
}

.crate-box__title-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: max(4rem, min(7%, 6.4rem));
    column-gap: max(4rem, min(7%, 6.4rem));

    font-weight: 500;
}

.crate-box__subtitle {
    margin-top: calc(
        0.8rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );
}

.crate-box__main {
    grid-column: 1 / -1;

    margin-top: calc(
        8.6rem
        - 2.0rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
}

.crate-box__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -moz-column-gap: calc(
        7.7rem
        - 2.0rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
    column-gap: calc(
        7.7rem
        - 2.0rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
    row-gap: 2.8rem;

    margin-top: calc(
        6.6rem
        - 2.0rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

@media (max-width: 29.99375em) {

    .crate-box__bottom {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

.crate-box__summary {
    flex-grow: 1;

    font-size: 1.5rem;
    font-weight: bold;
    text-align: right;
}

@media (max-width: 39.99375em) {

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

.crate-box__summary :where(strong) {
    margin-left: 1rem;

    font-size: calc(
        3.6rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    color: var(--color-primary);
}

@media (min-width: 94em) {

    .crate-box__next {
        margin-right: 1.8rem;
    }
}

@media (max-width: 39.99375em) {

    .crate-box__next {
        display: grid;
        grid-template-columns: 1fr min-content;
        justify-items: center;

        min-width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 29.99375em) {

    .crate-box__next {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 48em) and (max-width: 56.24375em) {

    .crate-box__link {
        --is-medium: 1;
        --is-small: 0;
        --is-tight: 1;
    }
}

.crate-box__link {
    grid-area: link;
}

@media (max-width: 47.99375em) {

    .crate-box__link {
        justify-content: center;

        min-width: 24rem;
        margin-top: calc(
            3.2rem
            - 0.4rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

@media (max-width: 39.99375em) {

    .crate-box__link {
        min-width: min(75%, 48rem);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 29.99375em) {

    .crate-box__link {
        width: calc(100% + 1rem);
        max-width: calc(100% + 1rem);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------------ PROMO -------------------------------*/
/*====================================================================*/

* + .promo {
    margin-top: calc(
        5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );
}

.promo__box {
    padding-top: calc(
        5.8rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
    padding-bottom: calc(
        5.8rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
    padding-left: calc(
        7rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
    padding-right: calc(
        7rem
        - 1.5rem * var(--is-medium)
        - 3.0rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );

    font-size: calc(
        2rem
        - 0.2rem * var(--is-medium)
        - 0.4rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    font-weight: 500;

    background-color: var(--color-primary);
    border-radius: 2.9rem;
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*-------------------------- VOUCHER-PROMO ---------------------------*/
/*====================================================================*/

.voucher-promo {
    --is-medium: 0;
    --is-small: 0;
    --is-tight: 0;

    --_box-padding-block: 5.8rem;
    --_image-top-overflow: 6rem;
    --_image-bottom-overflow: 9rem;
}

@media (max-width: 83.74375em) {

    .voucher-promo {
        --_box-padding-block: 5rem;
        --_image-top-overflow: 4rem;
        --_image-bottom-overflow: 7rem;
    }
}

@media (max-width: 73.74375em) {

    .voucher-promo {
        --_box-padding-block: 4.4rem;
        --_image-top-overflow: 3.7rem;
        --_image-bottom-overflow: 6.7rem;
    }
}

@media (max-width: 63.99375em) {

    .voucher-promo {
        --_box-padding-block: 5rem;
        --_image-top-overflow: 2rem;
        --_image-bottom-overflow: 5rem;
    }
}

@media (max-width: 47.99375em) {

    .voucher-promo {
        --_box-padding-block: 3.6rem;
        --_image-top-overflow: 0rem;
        --_image-bottom-overflow: 10.2rem;
    }
}

@media (max-width: 33.74375em) {

    .voucher-promo {
        --_box-padding-block: 3rem;
        --_image-bottom-overflow: 7.2rem;
    }
}

@media (max-width: 29.99375em) {

    .voucher-promo {
        --_image-bottom-overflow: 4.6rem;
    }
}

@media (max-width: 23.43125em) {

    .voucher-promo {
        --_box-padding-block: 2.2rem;
    }
}

.voucher-promo {

    padding-top: var(--_image-top-overflow);
    padding-bottom: var(--_image-bottom-overflow);
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    margin-left: calc(-1 * var(--page-padding));
    margin-right: calc(-1 * var(--page-padding));

    overflow: hidden;
}

:where(.box--tablet-s-invisible) + .voucher-promo {
    margin-top: 4rem;
}

@media (max-width: 63.99375em) {

    :where(.box--tablet-s-invisible) + .voucher-promo {
        margin-top: calc(
            9rem
            - 1.8rem * var(--is-small)
        );
    }
}

:where(.voucher-promo) .promo__box {
    display: grid;
    grid-template-columns: max-content max-content auto;
    grid-template-areas: "title image content";
    align-items: center;

    padding-top: var(--_box-padding-block);

    padding-bottom: var(--_box-padding-block);
}

@media (max-width: 83.74375em) {

    :where(.voucher-promo) .promo__box {
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

@media (max-width: 73.74375em) {

    :where(.voucher-promo) .promo__box {
        grid-template-columns: minmax(min-content, 1.25fr) max-content minmax(min-content, 1fr);
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

@media (max-width: 63.99375em) {

    :where(.voucher-promo) .promo__box {
        grid-template-columns: max-content max-content;
        grid-tamplate-rows: min-content min-content;
        grid-template-areas: "title image" "content image";
        row-gap: 2.4rem;
    }
}

@media (max-width: 56.24375em) {

    :where(.voucher-promo) .promo__box {
        padding-left: 5rem;
        padding-right: 5rem;
        row-gap: 2.0rem;
    }
}

@media (max-width: 47.99375em) {

    :where(.voucher-promo) .promo__box {
        grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr) auto;
        grid-template-areas:
                    "title title ."
                    "content image image"
                    ". image image";
    }
}

@media (max-width: 39.99375em) {

    :where(.voucher-promo) .promo__box {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (max-width: 29.99375em) {

    :where(.voucher-promo) .promo__box {
        row-gap: 1.2rem;

        padding-left: 3rem;

        padding-right: 3rem;
    }
}

@media (max-width: 22.49375em) {

    :where(.voucher-promo) .promo__box {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.voucher-promo__title-group {
    grid-area: title;
}

@media (min-width: 73.75em) {

    .voucher-promo__title-group {
        margin-top: -2.4rem;
    }
}

@media (min-width: 48em) and (max-width: 73.74375em) {

    .voucher-promo__title-group {
        margin-top: -1rem;
    }
}

.voucher-promo__title {
    font-size: 6.4rem;
}

@media (min-width: 40em) and (max-width: 83.74375em) {

    .voucher-promo__title {
        font-size: 5.6rem;
    }
}

@media (max-width: 39.99375em), (min-width: 48em) and (max-width: 56.24375em) {

    .voucher-promo__title {
        font-size: 5.0rem;
    }
}

@media (max-width: 33.74375em) {

    .voucher-promo__title {
        font-size: 4.4rem;
    }
}

@media (max-width: 29.99375em) {

    .voucher-promo__title {
        font-size: 3.6rem;
    }
}

@media (max-width: 24.99375em) {

    .voucher-promo__title {
        font-size: 3.2rem;
    }
}

@media (max-width: 22.49375em) {

    .voucher-promo__title {
        margin-right: -0.5rem;

        font-size: 3rem;
    }
}

.voucher-promo__subtitle {
    margin-top: 0.8rem;
}

@media (min-width: 40em) and (max-width: 73.74375em) {

    .voucher-promo__subtitle {
        --is-tight: 1;

        margin-top: 1.8rem;
    }
}

@media (max-width: 63.99375em) {

    .voucher-promo__subtitle {
        margin-top: 1.0rem;
    }
}

@media (min-width: 48em) and (max-width: 56.24375em) {

    .voucher-promo__subtitle {
        --is-tight: 0;
        --is-medium: 1;

        margin-top: 1.4rem;
    }
}

@media (max-width: 33.74375em) {

    .voucher-promo__subtitle {
        --is-medium: 0;
        --is-small: 1;

        margin-top: 1.4rem;
    }
}

@media (max-width: 23.43125em) {

    .voucher-promo__subtitle {
        --is-tight: 1;
    }
}

.voucher-promo__image {
    grid-area: image;

    width: 38.1rem;
    margin-top: calc(
        -1 * (var(--_box-padding-block)
        + var(--_image-top-overflow))
    );
    margin-bottom: calc(
        -1 * (var(--_box-padding-block)
        + var(--_image-bottom-overflow))
    );
}

@media (max-width: 83.74375em) {

    .voucher-promo__image {
        width: 33.5rem;
    }
}

@media (max-width: 63.99375em) {

    .voucher-promo__image {
        width: 35.5rem;
        margin-left: 12%;
    }
}

@media (max-width: 56.24375em) {

    .voucher-promo__image {
        width: 35.5rem;
        margin-left: -2%;
    }
}

@media (max-width: 47.99375em) {

    .voucher-promo__image {
        width: 28.1rem;
        margin-top: -27%;
        margin-left: auto;
        margin-right: -17%;
    }
}

@media (max-width: 39.99375em) {

    .voucher-promo__image {
        width: 28.1rem;
        margin-right: -9%;
    }
}

@media (max-width: 33.74375em) {

    .voucher-promo__image {
        width: 25.1rem;
    }
}

@media (max-width: 29.99375em) {

    .voucher-promo__image {
        width: 18.3rem;
        margin-top: -33%;
        margin-right: 3%;
    }
}

@media (max-width: 22.49375em) {

    .voucher-promo__image {
        width: 15.6rem;
        margin-left: 12%;
    }
}

.voucher-promo__img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.voucher-promo__content {
    grid-area: content;

    text-wrap: balance;
}

@media (min-width: 64em) {

    .voucher-promo__content {
        text-align: right;

        margin-top: -0.8rem;
        margin-bottom: 0.8rem;
    }
}

@media (max-width: 56.24375em) {

    .voucher-promo__content {
        font-size: 1.6rem;
    }
}

@media (max-width: 23.43125em) {

    .voucher-promo__content {
        font-size: 1.4rem;
    }
}

@media (max-width: 39.99375em) {

    .voucher-promo__btn {
        --is-small: 1;
    }
}

.voucher-promo__btn {

    display: inline-flex;

    margin-top: 1.6rem;
}

@media (max-width: 63.99375em) {

    .voucher-promo__btn {
        margin-top: 2.0rem;
    }
}

@media (max-width: 29.99375em) {

    .voucher-promo__btn {
        margin-top: 1.8rem;
        margin-left: -0.5rem;
        margin-bottom: -0.4rem;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- BOOXY-PROMO ----------------------------*/
/*====================================================================*/

@media (min-width: 22.5em) {

    .booxy-promo {
        margin-left: calc(
            0.8rem
            - 0.2rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
        margin-right: calc(
            0.8rem
            - 0.2rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

@media (min-width: 94em) {

    .booxy-promo {
        margin-left: -1.8rem;
        margin-right: -1.8rem;
    }
}

:where(.page__content-wrapper) .booxy-promo:where(:last-child) {
    margin-bottom: 3.5rem;
}

@media (max-width: 63.99375em) {

    :where(.page__content-wrapper) .booxy-promo:where(:last-child) {
        margin-bottom: 0rem;
    }
}

@media (max-width: 47.99375em) {

    :where(.page__content-wrapper) .booxy-promo:where(:last-child) {
        margin-bottom: 3.5rem;
    }
}

@media (max-width: 29.99375em) {

    :where(.page__content-wrapper) .booxy-promo:where(:last-child) {
        margin-bottom: 0;
    }
}

@media (max-width: 23.43125em) {

    :where(.page__content-wrapper) .booxy-promo:where(:last-child) {
        margin-bottom: -2.5rem;
    }
}

:where(.features) + .booxy-promo {
    margin-top: 0;
}

:where(.booxy-promo) .promo__box {
    position: relative;

    display: grid;
    grid-template-columns: max-content 1fr min-content;
    grid-template-areas: "title subtitle btn";
    align-items: center;
    justify-items: center;
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    row-gap: calc(
        2.4rem
        - 0.2rem * var(--is-medium)
        - 0.6rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    padding-top: calc(
        4.4rem
        - 0.6rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    padding-bottom: calc(
        4.4rem
        - 0.6rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    padding-left: calc(
        5.6rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
    padding-right: calc(
        5.6rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );
}

@media (max-width: 63.99375em) {

    :where(.booxy-promo) .promo__box {
        grid-template-columns: calc(
                    100% - 3rem
                    + 3rem * var(--is-small)
                );
        grid-template-areas: "title" "subtitle" "btn";
        justify-items: start;
        justify-content: center;
    }
}

.booxy-promo__title {
    grid-area: title;
}

@media (max-width: 22.49375em) {
    .booxy-promo__title br {
        display: none;
    }
}

.booxy-promo__subtitle {
    grid-area: subtitle;

    text-wrap: balance;
    line-height: inherit;
}

@media (min-width: 64em) {

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

.booxy-promo__btn {
    grid-area: btn;
}

@media (min-width: 94em) {

    .booxy-promo__btn {
        margin-right: 3.4rem;
    }
}

@media (max-width: 63.99375em) {

    .booxy-promo__btn {
        margin-top: calc(
            1.2rem
            - 0.2rem * var(--is-small)
            - 0.2rem * var(--is-tight)
        );
    }
}

.booxy-promo__bang,
.booxy-promo__stars {
    position: absolute;

    pointer-events: none;
}

.booxy-promo__bang {
    bottom: calc(100% - 2rem);
    right: calc(100% - 2rem);

    transform-origin: 100% 68%;
    transform: scale(calc(
        1
        - 0.15 * var(--is-medium)
        - 0.30 * var(--is-small)
        - 0.15 * var(--is-tight)
    ));
}

.booxy-promo__stars {
    top: -3.1rem;
    right: 4rem;

    transform-origin: top right;
}

@media (max-width: 93.99375em) {

    .booxy-promo__stars {
        right: 2%;
    }
}

@media (max-width: 63.99375em) {

    .booxy-promo__stars {
        right: 5%;
        transform: scale(1.33);
    }
}

@media (max-width: 39.99375em) {

    .booxy-promo__stars {
        --_scale: 1.2;

        top: calc(100% - 2.2rem);
        right: 3rem;

        transform: scale(var(--_scale)) translateY(-100%);
    }
}

@media (max-width: 36.24375em) {

    .booxy-promo__stars {
        --_scale: 1;
    }
}

@media (max-width: 29.99375em) {

    .booxy-promo__stars {
        --_scale: 0.9;
    }
}

@media (max-width: 23.43125em) {

    .booxy-promo__stars {
        --_scale: 0.8;
    }
}

@media (max-width: 22.49375em) {

    .booxy-promo__stars {
        --_scale: 0.75;
    }
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*------------------------------- PAGE -------------------------------*/
/*====================================================================*/

.page ._push-footer {
    display: flex;
    flex-direction: column;
}

.page__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    overflow-x: clip;
}

.page__background {
    --_gradient-max-height: 100%;
    --_gradient-gray-position: calc(var(--_gradient-max-height) / 2);
    --_image-max-width: 224rem;
    --_gradient: linear-gradient(
        to bottom,
        var(--color-light-dimmed) var(--_gradient-gray-position),
        white min(100%, var(--_gradient-max-height))
    );
}

@media (max-width: 47.99375em) {

    .page__background {
        --_gradient-max-height: 180rem;
    }
}

.page__background {

    flex-grow: 1;
    display: flex;
    flex-direction: column;

    background-image: var(--_gradient);
}

@media (min-width: 94em) {

    .page__background:where(:not(.page__background--solid)) {
        background-image: url("data:image/svg+xml,%3Csvg width='1920' height='2244' viewBox='0 0 1920 2244' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1C54 274 138 646 1091.34 545.512C1907.81 459.452 1877.01 961.522 1843.15 1199.03C1809.3 1436.53 1371.25 2289.05 2117 2241.05' stroke='black' stroke-width='2' stroke-dasharray='9 9'/%3E%3C/svg%3E%0A"), var(--_gradient);
        background-position: center center;
        background-size: min(max(100%, 192rem), var(--_image-max-width)) auto, 100% 100%;
        background-repeat: no-repeat;
    }
}

@media (min-width: 120em) {

    .page__background:where(:not(.page__background--solid)) {
        background-position: top right;
    }
}

.page__background > * {
    z-index: 2;

    grid-area: 1 / 1;
}

.page__content-wrapper {
    z-index: 3;

    margin-bottom: -7.75%;
}

@media (max-width: 77.74375em) {

    .page__content-wrapper {
        margin-bottom: -15%;
    }
}

@media (max-width: 47.99375em) {

    .page__content-wrapper {
        margin-bottom: -40%;
    }
}

@media (max-width: 23.43125em) {

    .page__content-wrapper {
        margin-bottom: -53%;
    }
}

.page__bottom-background {
    z-index: 1;

    max-width: 100%;
    margin-top: auto;
}

.page__bottom-background-img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 75% 0%;
    object-position: 75% 0%;
    min-height: 37.8rem;
    width: 100%;
}

@media (max-width: 47.99375em) {

    .page__bottom-background-img {
        -o-object-position: 66.666% 0%;
        object-position: 66.666% 0%;
        min-height: 39.6rem;
    }
}

/*--------------------------------------------------------------------*/
/*----------------------------- COLUMNS ------------------------------*/
/*--------------------------------------------------------------------*/

.page__columns {
    display: grid;
    -moz-column-gap: calc(
        2.4rem
        - 0.4rem * var(--is-medium)
        - 0.2rem * var(--is-tight)
    );
    column-gap: calc(
        2.4rem
        - 0.4rem * var(--is-medium)
        - 0.2rem * var(--is-tight)
    );
    row-gap: calc(
        3.2rem
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 64em) {

    .page__columns:not(.one-column-up) {
        grid-template-columns: minmax(20rem, 1.7fr) 8fr;
    }

}

:where(.box) + .page__columns {
    margin-top: calc(
        4.6rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

/*--------------------------------------------------------------------*/
/*--------------------------- CONPONENTS -----------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 25em) and (max-width: 47.99375em), (min-width: 112.5em) and (max-width: 137.49375em) {

    .contact:last-child {
        margin-bottom: 2.4rem;
    }
}


@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*---------------------------- HOME-PAGE -----------------------------*/
/*====================================================================*/

:where(.home-page) .page__background {
    --_image-max-width: 100vw;
}

@media (max-width: 63.99375em) {

    :where(.home-page) .page__background {
        background: white;
    }
}

@media (min-width: 64em) {

    :where(.home-page) .intro {
        background-color: var(--color-light-dimmed);
    }
}

.home-page__first-products-box {
    margin-top: calc(
        -1 * max(0rem,
        6.5rem - max(0px, 1920px - 100vw) * 0.1)
    );
}

@media (max-width: 47.99375em) {

    .home-page__first-products-box {
        margin-top: calc(1rem - 0.6rem * var(--is-small));
    }
}

.home-page__first-products-box-icon,
.home-page__second-products-box-icon {
    position: absolute;

    pointer-events: none;
}

.home-page__first-products-box-icon {
    bottom: 100%;
    left: 33.75%;
}

.home-page__second-products-box-icon {
    bottom: calc(100% - 2rem);
    right: calc(100% - 2rem);
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*-------------------------- BUYBACK-PAGE ----------------------------*/
/*====================================================================*/

.buyback-page {
    --_info-list-column-gap: calc(
        6.8rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 94em) {

    .buyback-page {
        --_info-list-column-gap: 8.8rem;
    }
}

@media (min-width: 94em) {

    :where(.buyback-page) .page__background {
        background-position: 100% calc(
            24rem - (max(0px, 100vw - 1504px) * 0.175)
        );
        background-size: min(max(103%, 200rem), var(--_image-max-width)) auto, 100% 100%;
    }
}

@media (min-width: 120em) {

    :where(.buyback-page) .page__background {
        background-size: min(max(103%, 198rem), 103vw) auto, 100% 100%;
    }
}

@media (max-width: 63.99375em) {

    :where(.buyback-page) .page__background {
        background: white;
    }
}

:where(.buyback-page) .contact {
    padding-left: 0;
    padding-right: 0;
    margin-top: calc(
        11.8rem
        - 3.2rem * var(--is-medium)
        - 5.2rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
}

@media (min-width: 77.75em) {

    :where(.buyback-page) .contact {
        grid-template-columns: 1fr 2fr;
        -moz-column-gap: calc(var(--_info-list-column-gap) / 2);
        column-gap: calc(var(--_info-list-column-gap) / 2);
    }
}

@media (min-width: 22.5em) and (max-width: 47.99375em) {

    :where(.buyback-page) .contact {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

:is(:where(.buyback-page) .contact__title) :where(br) {
    display: none;
}

@media (min-width: 77.75em) {

    :where(.buyback-page) .contact__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        -moz-column-gap: var(--_info-list-column-gap);
        column-gap: var(--_info-list-column-gap);
    }
}

.buyback-page__info-list {
    --columns: 3;
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {

    .buyback-page__info-list {
        --is-tight: 0;
        --is-medium: 1;
    }
}

@media (max-width: 77.74375em) {

    .buyback-page__info-list {
        --columns: 2;
    }
}

@media (max-width: 39.99375em) {

    .buyback-page__info-list {
        --columns: 1;
    }
}

.buyback-page__info-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: var(--_info-list-column-gap);
    column-gap: var(--_info-list-column-gap);
    row-gap: calc(
        6.8rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );

    margin-top: calc(
        8.4rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 0.8rem * var(--is-tight)
    );
}

@media (min-width: 22.5em) and (max-width: 47.99375em) {

    .buyback-page__info-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.buyback-page__info-item {
    flex-basis: calc(100% / var(--columns) - (var(--_info-list-column-gap) * (var(--columns) - 1)) / var(--columns));

    font-weight: 500;
}

@media (max-width: 56.24375em) {

    .buyback-page__info-item {
        flex-grow: 1;
    }
}

.buyback-page__info-item-title {
    margin-bottom: calc(
        3.4rem
        - 0.8rem * var(--is-medium)
        - 1.4rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */
/*====================================================================*/
/*--------------------------- PRODUCT-PAGE ---------------------------*/
/*====================================================================*/

.product-page__about {
    --_section-space: calc(
        5.5rem
        - 1.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.5rem * var(--is-tight)
    );

    display: grid;
    grid-template-columns: 40% auto;

    padding-left: calc(
        3.8rem
        - 0.8rem * var(--is-medium)
        - 1.9rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    padding-right: calc(
        3.8rem
        - 0.8rem * var(--is-medium)
        - 1.9rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );
    margin-top: calc(
        8rem
        - 2.2rem * var(--is-medium)
        - 3.4rem * var(--is-small)
        - 1.2rem * var(--is-tight)
    );
}

@media (max-width: 77.74375em) {

    .product-page__about {
        grid-template-columns: 38.2% auto;
    }
}

@media (max-width: 63.99375em) {

    .product-page__about {
        grid-template-columns: 50% auto;
    }
}

@media (max-width: 47.99375em) {

    .product-page__about {
        grid-template-columns: 100%;
        row-gap: var(--_section-space);
    }
}

/*--------------------------------------------------------------------*/
/*---------------------------- SPECS ----------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 48em) {

    .product-page__specs-section {
        padding-right: var(--_section-space);

        border-right: 0.1rem solid var(--color-dimmed);
    }
}

.product-page__specs {
    margin-top: calc(
        3.2rem
        - 0.6rem * var(--is-medium)
        - 1.2rem * var(--is-small)
        - 0.4rem * var(--is-tight)
    );

    font-size: calc(
        1.5rem
        - 0.1rem * var(--is-small)
    );
}

.product-page__specs td, .product-page__specs th {
    padding-top: 0.1rem;
}

.product-page__specs th {
    padding-right: calc(
        4rem
        - 0.4rem * var(--is-medium)
        - 0.4rem * var(--is-small)
    );

    text-align: left;
}

.product-page__specs td {
    color: var(--color-primary);
}

/*--------------------------------------------------------------------*/
/*---------------------------- AUTHOR ----------------------------*/
/*--------------------------------------------------------------------*/

@media (min-width: 48em) {

    .product-page__author-section {
        padding-left: var(--_section-space);
    }
}

.product-page__author {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: calc(
        3.5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    column-gap: calc(
        3.5rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
    row-gap: calc(
        2.4rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );

    margin-top: 1.5rem;
}

.product-page__author-figure {
    flex-shrink: 0;
    flex-grow: 0;

    margin-top: calc(
        1.4rem
        - 0.3rem * var(--is-medium)
        - 0.7rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.product-page__author-img {
    --_size: calc(
        16.2rem
        - 1.4rem * var(--is-medium)
        - 2.8rem * var(--is-small)
        - 1.0rem * var(--is-tight)
    );

    -o-object-fit: cover;

    object-fit: cover;
    width: var(--_size);
    height: var(--_size);

    border-radius: 50%;
}

.product-page__author-content {
    flex-grow: 1;
    flex-basis: 60%;
}

.product-page__author-title {
    margin-bottom: calc(
        1.9rem
        - 0.4rem * var(--is-medium)
        - 0.8rem * var(--is-small)
        - 0.2rem * var(--is-tight)
    );
}

.product-page__author-btn {
    margin-top: calc(
        2.8rem
        - 0.5rem * var(--is-medium)
        - 1.0rem * var(--is-small)
        - 0.3rem * var(--is-tight)
    );
}

/*//////////////////////////// ABOUT ////////////////////////////*/

:where(.product-page__about) + .products-box {
    margin-top: calc(
        9.4rem
        - 1.2rem * var(--is-medium)
        - 2.4rem * var(--is-small)
        - 0.6rem * var(--is-tight)
    );
}

@media (min-width: 77.75em) {
}

@media (min-width: 94em) {
}

@media (min-width: 77.75em) and (max-width: 93.99375em) {
}

@media (min-width: 48em) and (max-width: 77.74375em) {
}

@media (min-width: 64em) and (max-width: 77.74375em) {
}

@media (min-width: 48em) and (max-width: 63.99375em) {
}

@media (max-width: 47.99375em) {
}

@media (min-width: 40em) and (max-width: 47.99375em) {
}

@media (min-width: 30em) and (max-width: 39.99375em) {
}

@media (min-width: 23.4375em) and (max-width: 29.99375em) {
}

@media (max-width: 23.43125em) {
}

/* Colors:
 * primary: #D65A31
 * light-dimmed: #eee
 * light-dimmed-darker: #e1e1e1
 * dimmed: #CACACA
 * dark-dimmed: #838992
 * dark: #222831
 * dark-strong: #121B28
 * text: var(--color-dark)
 * text-inverse: #fff
 */