body,
html {
    width: 100%;
    margin: 0 auto;
}

html {
    --row-direction: row;
    --scale-x: 1;
    font-size: 17px;
    min-height: 100%;
    height: 100%;
}

html[dir="rtl"] {
    --row-direction: row-reverse;
    --scale-x: -1;
}

.auto-scale-x {
    transform: scaleX(var(--scale-x));
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-size: var(--font-size-32);
}

h2 {
    font-size: var(--font-size-24);
}

h3 {
    font-size: var(--font-size-20);
}

:root {
    --wat-wat-primary-1: #007FDE;
    --wat-wat-primary-1-10: rgba(0, 127, 222, 0.1);
    --wat-wat-primary-2: #0029A5;
    --wat-wat-primary-3: #053854;
    --wat-wat-secondary-1: #29EEC6;
    --wat-wat-secondary-2: #00B49C;
    --wat-wat-secondary-2-8: #00B59D14;
    --wat-wat-grey-100: #fafafa;
    --wat-wat-grey-200: #d6dadb;
    --wat-wat-grey-300: #ACB2B5;
    --wat-wat-grey-500: #81868A;
    --wat-wat-grey-800: #515457;
    --wat-wat-grey-900: #2C2E30;
    --wat-wat-gradient-1: linear-gradient(135deg, var(--wat-wat-primary-1), var(--wat-wat-secondary-1));
    --wat-wat-gradient-1-loop: linear-gradient(135deg, var(--wat-wat-primary-1), var(--wat-wat-secondary-1), var(--wat-wat-primary-1));
    --wat-wat-gradient-2: linear-gradient(135deg, var(--wat-wat-secondary-1), var(--wat-wat-secondary-2));
    --wat-wat-gradient-3: linear-gradient(135deg, var(--wat-wat-primary-1), var(--wat-wat-primary-2));
    --wat-wat-gradient-3-loop: linear-gradient(90deg, var(--wat-wat-primary-1), var(--wat-wat-primary-2), var(--wat-wat-primary-1));
    --wat-wat-orange: #ED5D28;
    --wat-wat-red: #D6301A;
    --wat-wat-gradient-4: linear-gradient(118deg, var(--wat-wat-orange) 3.53%, var(--wat-wat-red) 96.56%);

    --color-dark: #222222;
    --color-white: white;
    --color-blue: var(--wat-wat-primary-2);
    --color-gray: #646464;
    --color-danger-200: #f5c6cb;
    --color-danger: #ec5353;
    --color-danger-background: #ffc5c5;
    --color-success: #3c8336;
    --color-whiteish: #EFEFEF;
    --color-orange: #D6301A;
    --color-warning-text: #8d5409;
    --color-warning-border: #fcb559;
    --color-warning-background: #ffcf91;
    --color-warning-background-40: #ffcf9166;

    --font-size-12: .71em;
    --font-size-14: .82em;
    --font-size-16: .94em;
    --font-size-20: 1.18em;
    --font-size-24: 1.41em;
    --font-size-32: 1.88em;
}

body {
    min-height: 100%;

    font-family: 'Roboto', sans-serif;
    --max-content-width: 1250px;
    --header-height: 110px;
    --footer-height: 164px;

    color: var(--wat-wat-primary-3);
    --icon-color: var(--wat-wat-primary-3);
    --icon-thickness: 0;

    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

body > * {
    width: 100%;
}

.icon {
    fill: var(--icon-color);
    stroke: var(--icon-color);
    stroke-width: var(--icon-thickness);
}

* {
    box-sizing: border-box;
    scroll-margin-top: calc(var(--header-height) * 1.5);
}

main {
    max-width: var(--max-content-width);
    margin: 30px auto 0 auto;
    padding-bottom: 20px;
    flex-grow: 1;
}

img {
    max-width: 100%;
    height: auto;
}

script-once {
    display: none;
}

/* region FLEX UTILITIES */
.align-items-start {
    align-items: flex-start !important;
}

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

.align-items-end {
    align-items: flex-end !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-space-between {
    justify-content: space-between;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-grow {
    flex-grow: 1;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px !important;
}

.gap-20 {
    gap: 20px !important;
}

.gap-30 {
    gap: 30px;
}

.gap-50 {
    gap: 50px;
}

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

.relative {
    position: relative;
}

/* endregion */

/* region GRID UTILITIES */
.grid-col-span-2 {
    grid-column: span 2;
}

/* endregion */

/* region OVERFLOW UTILITIES */

.overflow-auto {
    overflow: auto;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-visible {
    overflow-x: visible;
}

.overflow-y-visible {
    overflow-y: visible;
}

/* endregion */

/* region TABLES */

.table-container {
    overflow-x: auto;
    max-width: 100%;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    text-align: center;
    counter-reset: table-row-number;
}

.table th {
    font-weight: normal;
}

.table td, .table th {
    padding: 8px 12px;
    white-space: nowrap;
}

.expandable-row {
    border: 1px solid var(--wat-wat-grey-300);
    border-radius: 10px;
    margin: 0;
    padding: 8px 12px;
}

.expandable-row > summary {
    font-size: inherit;
    font-weight: inherit;
    position: relative;
}

.expandable-row[open] > summary {
    padding-bottom: 8px;
}

.expandable-row[open] > summary:before {
    content: "";
    position: absolute;
    top: -8px;
    right: -12px;
    bottom: 0;
    left: -12px;
    background: var(--wat-wat-grey-100);
    z-index: -1;
    pointer-events: none;
    border-bottom: 1px solid var(--wat-wat-grey-200);
}

.table td {
    margin-top: 20px;
    border-top: 1px solid var(--wat-wat-grey-300);
    border-bottom: 1px solid var(--wat-wat-grey-300);
}

.table tr {
    background: none;
}

tr.annotated {
    position: relative;
}

tr.annotated:after {
    content: var(--note);
    position: absolute;
    left: 0;
    bottom: 100%;
    padding: 8px;
    background-color: #ffedd9;
    color: #8d5409;
    border: 2px solid #ffcf91;
    border-radius: 8px;
    transform: translateY(-2px);
    pointer-events: none;
    opacity: 0;
}

tr.annotated:hover:after {
    opacity: 1;
}

.table:not(.table-sober) td:first-child:not(:last-child) {
    border-left: 1px solid var(--wat-wat-grey-300);
    border-radius: 10px 0 0 10px;
}

.table:not(.table-sober) td:last-child:not(:first-child) {
    border-right: 1px solid var(--wat-wat-grey-300);
    border-radius: 0 10px 10px 0;
}

.table:not(.table-sober) td:first-child:last-child {
    border: 1px solid var(--wat-wat-grey-300);
    border-radius: 10px;
}

html[dir="rtl"] .table:not(.table-sober) td:first-child:not(:last-child) {
    border-left: none;
    border-right: 1px solid var(--wat-wat-grey-300);
    border-radius: 0 10px 10px 0;
}

html[dir="rtl"] .table:not(.table-sober) td:last-child:not(:first-child) {
    border-right: none;
    border-left: 1px solid var(--wat-wat-grey-300);
    border-radius: 10px 0 0 10px;
}

table img {
    max-height: 50px;
    max-width: 50px;
    width: auto;
    height: auto;
}

table img {
    max-height: 150px;
}

.table td .feedback, .table th .feedback {
    white-space: normal;
}

.table .warning-td {
    background-color: #ffcf91;
    color: #8d5409;
    font-weight: 500;
}

.editable-td {
    cursor: pointer;
    position: relative;
}

.editable-td:hover {
    box-shadow: 0 0 5px 0 inset #7676764a;
}

.editable-td:hover:after {
    content: "Click to edit";
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 8px;
    background-color: var(--color-gray);
    color: white;
    pointer-events: none;
    box-shadow: -1px -1px 5px 0 #7676764a;
}

.editable-td:last-child:not(:first-child):hover:after {
    left: unset;
    right: 0;
    transform: translate(0, -100%);
}

.table-sober td {
    border-bottom: none;
    border-top-color: var(--wat-wat-grey-500);
}

.table-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.table-buttons-row > button {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

tr {
    counter-increment: table-row-number;
}

.table-row-number:before {
    content: counter(table-row-number);
}

/* endregion */

/* region DETAILS */

details {
    margin: 20px -20px 0 -20px;
    padding: 20px;
}

details.card {
    margin-left: 0;
    margin-right: 0;
    background: none;
}

main > details {
    margin-left: 0;
    margin-right: 0;
}

details:where(:nth-child(even)) {
    background: #a3baff1b;
}

/* endregion */

/* region COLORS UTILITIES */
.bg-gradient-1 {
    background: var(--wat-wat-gradient-1);
}

.color-primary-1 {
    color: var(--wat-wat-primary-1);
}

.color-2 {
    color: var(--color-dark);
}

.color-grey-300 {
    color: var(--wat-wat-grey-300);
}

.color-white {
    color: var(--color-white) !important;
}

.color-secondary-2 {
    color: var(--wat-wat-secondary-2) !important;
}

.color-4 {
    color: var(--wat-wat-secondary-2);
}

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

.bg-1 {
    background: var(--wat-wat-primary-3);
}

.bg-2 {
    background: var(--color-dark);
}

.bg-3 {
    background: var(--color-white);
}

.bg-4 {
    background: var(--wat-wat-secondary-2);
}

.feedback {
    display: none;
}

.feedback.error {
    display: block;
    background-color: #ff717a;
    border-left: 5px solid #eb3850;
    color: #790808;
    font-weight: 500;
    padding: 5px;
    margin-top: 10px;
}

.alert-danger {
    display: inline-block;
    background-color: #ff717a;
    border-left: 5px solid #eb3850;
    color: #790808;
    padding: 5px;
}

.feedback.success {
    display: block;
    background-color: #71ff93;
    border-left: 5px solid #00801e;
    color: #08790b;
    font-weight: 500;
    margin-top: 10px;
    padding: 5px;
}

.alert-success {
    display: inline-block;
    background-color: #71ff93;
    border-left: 5px solid #00801e;
    color: #08790b;
    padding: 5px;
}

.feedback.warning {
    display: block;
    background-color: #ffcf91;
    border-left: 5px solid #fcb559;
    color: #8d5409;
    font-weight: 500;
    padding: 5px;
}

.alert-warning {
    display: inline-block;
    background-color: var(--color-warning-background);
    border-left: 5px solid var(--color-warning-border);
    color: var(--color-warning-text);
    padding: 5px;
}

ul.warning {
    background-color: #ffcf91;
    border-left: 5px solid #fcb559;
    color: #8d5409;
    font-weight: 500;
    padding: 5px 5px 5px 25px;
}

.muted {
    color: #ACB2B5;
}

.feedback.tip {
    display: block;
    background-color: #d6dadba3;
    border-left: 5px solid var(--wat-wat-grey-300);
    color: var(--wat-wat-grey-500);
    font-weight: 500;
    padding: 5px;
}

/* endregion */

/* region BUTTONS */

button, .button, .clickable {
    cursor: pointer;
}

button, .button {
    display: inline-block;
    position: relative;
}

.table td > :is(button, .button, .table-buttons-row) {
    margin: -8px 0
}

button:hover, .button:hover {
    filter: contrast(115%);
}

[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.button-1 {
    padding: 10px 40px;
    border: none;
    color: var(--color-white);
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
}

.button-blue {
    background: var(--wat-wat-gradient-3);
    color: white;
    padding: 13px 35px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15), 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.button-blue:hover {
    color: white;
}

.small:is(.button-blue, .button-blue-2, .button-red-2) {
    padding: 6px 20px;
    border-radius: 10px;
}

.smaller:is(.button-blue, .button-blue-2, .button-red-2) {
    padding: 6px 12px;
    border-radius: 10px;
}

.text-button:is(.button-blue, .button-blue-2, .button-red-2) {
    padding: 4px 8px;
    font-size: inherit;
    font-family: inherit;
    margin: 0 2px;
}

.button-blue-2 {
    color: var(--wat-wat-primary-3);
    padding: 13px 35px;
    border: 1px solid var(--wat-wat-primary-1);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15), 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.button-red-2 {
    color: var(--color-danger);
    padding: 13px 35px;
    border: 1px solid var(--color-danger);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15), 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.button-green {
    background: var(--wat-wat-gradient-2);
    color: white;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15), 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
    padding: 6px 9px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
}

.button-bluegreen {
    background: var(--wat-wat-gradient-1);
    color: white;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15), 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
    padding: 6px 16px;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

.button-2-primary {
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.15));
    border: none;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-blue);
    color: var(--color-white);
    text-decoration: none;
}

.button-2-danger {
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.15));
    border: none;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-danger);
    color: var(--color-white);
    text-decoration: none;
}

.button-2-neutral {
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.15));
    border: none;
    padding: 8px;
    border-radius: 8px;
    background: var(--wat-wat-grey-500);
    color: var(--color-white);
    text-decoration: none;
    --icon-color: var(--color-white);
}

.carousel-button {
    background: transparent;
    border: none;
}

.link-no-style {
    text-decoration: none;
    color: inherit;
}

/* endregion */

/* region TEXT ALIGNS */
.text-align-initial {
    text-align: initial;
}

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

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

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

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

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

.white-space-nowrap {
    white-space: nowrap;
}

/* endregion */

/* region POPUPS */

.popup-anchor {
    position: relative;
    z-index: 10;
}

.popup {
    display: none;
    position: absolute;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--wat-wat-grey-500);
    padding: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.popup.visible {
    display: block;
}

.popup-list {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.popup > label:has(input[type="search"]) {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.popup > label > input[type="search"] {
    flex-grow: 1;
}

.popup-button {
    text-align: left;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--wat-wat-grey-500);
    display: flex;
    flex-direction: row;
    gap: 5px;
    margin: 0;
    padding: 6px;
    background: transparent;
}

.popup-button:hover {
    background: var(--wat-wat-grey-100);
}

.popup-button + hr {
    margin-top: 0;
}

.popup-button.--pop-out {
    border-bottom: 3px solid var(--wat-wat-grey-500);
    border-top-width: 4px;
}

.popup-list:first-child {
    margin-top: 0;
}

.popup-list:first-child > .popup-button:first-child {
    border-top: none;
}

/* endregion */

/* region SIZES */

.max-width-fill {
    max-width: 100%;
}

.width-fill {
    width: 100%;
}

.width-250 {
    width: 250px;
}

.width-120 {
    width: 120px;
}

.width-100 {
    width: 100px;
}

.width-80 {
    width: 80px;
}

.width-50 {
    width: 50px;
}

.min-w-0 {
    min-width: 0;
}

.width-auto {
    width: auto !important;
}

.max-width-400 {
    max-width: 400px;
}

/* endregion */

/* region MARGINS */

.m-0-auto {
    margin: 0 auto;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.m-0 {
    margin: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.m-30-0 {
    margin: 30px 0 !important;
}

.mr-auto {
    margin-right: auto !important;
}

html[dir="rtl"] .mr-auto {
    margin-left: auto;
    margin-right: unset;
}

.ml-auto {
    margin-left: auto;
}

html[dir="rtl"] .ml-auto {
    margin-left: unset;
    margin-right: auto;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

/* endregion */

/* region PADDINGS */

.p-l-0 {
    padding-left: 0;
}

.p-l-10 {
    padding-left: 10px;
}

.p-4-8 {
    padding: 4px 8px;
}

/* endregion */

/* region BORDER RADIUS */

.br-16 {
    border-radius: 16px;
}

/* endregion */

/* region DISPLAY */

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

/* endregion */

/* region FONTS */

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* endregion */

/* region FONT SIZE */
.fz-12 {
    font-size: var(--font-size-12) !important;
}

.fz-14 {
    font-size: var(--font-size-14) !important;
}

.fz-16 {
    font-size: var(--font-size-16) !important;
}

.fz-normal {
    font-size: 1em !important;
}

.fz-24 {
    font-size: var(--font-size-24) !important;
}

.fz-32 {
    font-size: var(--font-size-32) !important;
}

/* endregion */

/* region LINE HEIGHTS */

.lh-130 {
    line-height: 130%;
}

.lh-150 {
    line-height: 150%;
}

.lh-200 {
    line-height: 200%;
}

/* endregion */

/* region FORMS & INPUTS */

label {
    display: flex;
    flex-direction: column;
}

label > :is(input, textarea, select) {
    margin-top: 5px;
}

input, textarea, select, option {
    background: var(--color-whiteish);
    border: none;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 0 5px 0 inset #7676764a;
    max-width: 100%;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--wat-wat-secondary-2);
}

input:user-invalid, textarea:user-invalid, select:user-invalid {
    background: #ffebec;
}

input[type="color"] {
    min-height: 35px;
    padding: 4px;
}

input[type="color"]:disabled {
    opacity: 1;
}

form, .form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

hr {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--wat-wat-grey-300);
}

hr.--subtle {
    border-bottom-color: var(--wat-wat-grey-200);
}

form > details, .form > details {
    width: 100%;
}

summary > h1, summary > h2, summary > h3 {
    display: inline;
    margin: 0;
}

summary:has(h1)::marker {
    font-size: var(--font-size-32);
}

summary:has(h2)::marker {
    font-size: var(--font-size-24);
}

summary:has(h3)::marker {
    font-size: var(--font-size-20);
}

.checkbox-label {
    display: flex;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
    align-items: center;
}

.checkbox-label > input {
    margin: 0;
}

form > label, .form > label {
    width: 100%;
}

input[type="checkbox"], input[type="radio"] {
    appearance: none;
    padding: 0;
    width: 18px;
    min-width: 18px;
    height: 18px;
    cursor: pointer;
    background: white;
    border: 1px solid var(--wat-wat-grey-500);
}

input[type="checkbox"] {
    border-radius: 0;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: var(--wat-wat-primary-1);
}

input[type="checkbox"]:checked:after, input[type="radio"]:checked:after {
    content: "";
    width: 12px;
    height: 12px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    --icon-src: url("/static/img/icons/check.svg");
    mask: var(--icon-src) no-repeat center;
    -webkit-mask: var(--icon-src) no-repeat center;
    display: block;
}

input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    cursor: not-allowed;
}

fieldset {
    border: 1px solid var(--wat-wat-grey-300);
    margin-top: 30px;
}

fieldset > legend + :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
}

fieldset.--borderless {
    border: none;
    padding: 0;
}

legend > :is(h1,h2,h3,h4,h5,h6) {
    margin: 0;
}

.buttons-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-row > label > input {
    margin: 0;
}

/* region SELECT WITH CUSTOM OPTION */

.select-custom-option-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.select-custom-option-container > input {
    display: none;
    flex-grow: 1;
    height: 38px;
}

.select-custom-option-container > select:has(option[value="0"]:checked) + input {
    display: block;
}

/* endregion */

.legend-popup-form {
    position: absolute;
    z-index: 10;
    width: 100%;
    flex-direction: row;
    gap: 10px;
    align-items: flex-end;
    background: white;
    padding: 12px;
    flex-wrap: wrap;
    border-radius: 8px;
    box-shadow: 0 0 5px 0 inset #7676764a;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease-out;
}

.legend-popup-form:focus-within {
    transform: scaleX(1);
}

/* endregion */

/* region DOUBLE SLIDER */

double-slider {
    position: relative;
    --thumb-size: 15px;
    padding: 0 var(--thumb-size);
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px 0;
}

double-slider .track {
    position: relative;
    width: 100%;
    height: 8px;
    --min: 0%;
    --max: 100%;
    background: #ffffff30;
}

double-slider .fill {
    position: absolute;
    left: var(--min);
    width: calc(var(--max) - var(--min));
    top: 0;
    height: 100%;
    background: var(--wat-wat-primary-1);
}

double-slider .thumb {
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    background: var(--color-white);
    cursor: ew-resize;
    box-shadow: 0 0 2px 0 #555;
    transition: background .3s ease-in-out;
    position: absolute;
    z-index: 20;
    top: 50%;
    --label: "";
}

double-slider .thumb:after {
    content: var(--label);
    position: absolute;
    left: 50%;
    background: var(--color-white);
    color: var(--wat-wat-primary-3);
    border: 1px solid var(--wat-wat-primary-1);
    white-space: nowrap;
    font-size: var(--font-size-12);
    line-height: 14px;
    padding: 2px 4px;
    border-radius: 4px;
}

double-slider .thumb.min {
    left: var(--min);
    transform: translate(-75%, -50%);
}

double-slider .thumb.min:after {
    top: -2px;
    transform: translate(-50%, -100%);
}

double-slider .thumb.max {
    left: var(--max);
    transform: translate(-25%, -50%);
}

double-slider .thumb.max:after {
    bottom: -2px;
    transform: translate(-50%, 100%);
}

/* endregion */

/* region OAUTH */

.google-login {
    gap: 5px;
    color: white;
    background-color: #4285F4;
    padding: 0 8px 0 0;
    border-radius: 2px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    height: 40px;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: .9rem;
    margin-bottom: 0;
    text-decoration: none;
    white-space: nowrap;
}

html[dir="rtl"] .google-login {
    padding: 0 0 0 8px;
}

.google-login > img {
    margin-left: -3px;
}

html[dir="rtl"] .google-login > img {
    margin-left: 0;
    margin-right: -3px;
}

.facebook-login {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: #1877f2;
    border-radius: 20px;
    border: none;
    color: white;
    font-weight: bold;
    padding: 8px 20px 8px 12px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

/* endregion */

/* region LINKS */

a, .a {
    color: var(--wat-wat-primary-1);
    text-decoration: underline;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

a:hover, .a:hover {
    color: var(--wat-wat-primary-3);
}

.--no-decoration {
    text-decoration: none;
}

/* endregion */

/* region HEADER */
.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    white-space: nowrap;
    overflow-x: auto;
}

main > .breadcrumb:first-child {
    margin-top: 0;
    padding-top: 0;
}

.breadcrumb > li {
    display: inline;
    font-weight: bold;
}

.breadcrumb > li + li:before {
    padding: 8px;
    color: black;
    content: ">\00a0";
}

.breadcrumb > li > a {
    color: var(--wat-wat-primary-3);
    text-decoration: none;
}

.breadcrumb > li > a:hover {
    text-decoration: underline;
}

.breadcrumb h1 {
    font-size: inherit;
    margin: 0;
    display: inline;
}

#itemsInCart {
    position: absolute;
    right: 0;
    top: 0;
    background: #ACB2B5;
    border-radius: 50%;
    text-align: center;
    color: white;
    width: 20px;
    height: 20px;
    line-height: 20px;
    transform: translate(50%, -50%);
    font-size: var(--font-size-12);
}

header {
    margin: 0 auto;
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 101;
    height: var(--header-height);
    font-family: 'Montserrat', sans-serif;
}

.header-row, .header-categories {
    display: flex;
    flex-direction: row;
    gap: 10px 30px;
    max-width: var(--max-content-width);
    margin: 0 auto;
    align-items: center;
    font-size: var(--font-size-16);
}

.header-row {
    padding: 20px 0;
    white-space: nowrap;
}

.header-row:first-child {
    padding: 10px 0 0 0;
}

header > img {
    max-width: 100px;
}

.header-row > a, .header-row .a {
    color: var(--wat-wat-primary-3);
    text-decoration: none;
    font-weight: bold;
}

.header-categories-container {
    background: var(--wat-wat-gradient-3);
    color: white;
    padding: 8px 20px;
}

.header-categories > a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.mobile-header-menu-container {
    display: none;
}

.mobile-header-menu-container > button {
    width: 34px;
    height: 28px;
    background: url("/static/img/header/menu-toggle.svg") no-repeat center;
    border: none;
}

.mobile-header-menu {
    position: absolute;
    right: 0;
    width: 100%;
    background: white;
    box-shadow: none;
    border-radius: 0 0 10px 10px;
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-header-menu-content {
    padding: 20px 15px 30px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mobile-header-menu-content > hr {
    width: 100%;
    margin: 0;
}

.mobile-header-menu-content > a {
    width: 100%;
}

.mobile-header-menu-content > *:not(:first-child) {
    border-top: 1px solid var(--wat-wat-grey-300);
    padding-top: 10px;
}

.global-search {
    flex-grow: 1;
    align-items: stretch;
}

.global-search.mobile {
    display: none;
}

.global-search > input {
    border-radius: 10px;
    border: 1px solid var(--wat-wat-primary-1);
    height: 20px;
    background: transparent;
    font-size: var(--font-size-12);
    font-weight: 700;
    padding: 0 14px;
}

.global-search.mobile > input {
    height: 30px;
}

.global-search > input:focus-visible {
    outline: none;
}

/* endregion */

/* region FOOTER */

body > footer {
    background: var(--wat-wat-primary-3);
    padding: 20px;
    font-size: var(--font-size-14);
}

.footer-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    max-width: var(--max-content-width);
    margin: 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    overflow: auto;
}

.footer-content_images {
    min-width: 95px;
}

.footer-content h3 {
    color: white;
    margin: 0;
}

.footer-content a {
    display: block;
    color: white;
    text-decoration: none;
    line-height: 150%;
}

.footer-socials {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: center;
}

.copyright {
    color: white;
    text-align: center;
    margin-top: 15px;
    /* Let the text overflow, set max width so it doesn't push the link groups further away */
    max-width: 100px;
    white-space: nowrap;
}

.newsletter-left {
    flex-grow: 1;
    background: var(--wat-wat-primary-1);
}

.newsletter-footer {
    margin-top: 30px;
    width: 100%;
    position: relative;
    --footer-repartition: 40%;
}

.newsletter-footer_bg {
    display: flex;
    flex-direction: var(--row-direction);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
}

.newsletter-footer_bg-1 {
    background: linear-gradient(90deg, #007DFE 1.11%, #1BC7D3 122.99%);
    flex-basis: var(--footer-repartition);
    height: 100%;
}

.newsletter-footer_bg-2 {
    position: absolute;
    left: var(--footer-repartition);
    transform: translateX(-62%);
    height: 100%;
}

.newsletter-footer_bg-3 {
    flex-basis: calc(100% - var(--footer-repartition));
    height: 100%;
    width: auto;
    background: url("/static/img/footer/rack.webp") left;
}

.newsletter-footer-content {
    margin: 0 auto;
    padding: 15px 20px;
    width: min(var(--max-content-width), 100%);
    display: grid;
    grid-template-columns: 42% 1fr 48%;
    justify-content: space-between;
    height: 164px;
    color: white;
}

.last-blog-article {
    color: white;
    overflow: hidden;
}

.newsletter-footer-content h3 {
    font-size: var(--font-size-24);
}

.newsletter-right {
    flex-grow: 1;
    background: #00B49C;
}

.newsletter-footer h3 {
    font-size: var(--font-size-24);
    margin: 0 0 5px 0;
}

.newsletter-footer input {
    height: 23px;
}

.newsletter-footer .button-blue {
    height: 19px;
    line-height: 19px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--font-size-12);
    margin-left: auto;
}

.community-footer {
    position: relative;
    color: white;
    padding: 24px 110px;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    gap: 5px 110px;
    justify-content: space-between;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.community-footer_background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/static/img/footer/community.webp");
    background-size: cover;
    border-radius: inherit;
    z-index: -1;
}

.community-footer_background:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #05385452 26.84%, rgba(5, 56, 84, 0.00) 87.24%), transparent 50% / cover no-repeat;
    z-index: -1;
    border-radius: inherit;
}

.community-footer h3 {
    font-size: var(--font-size-24);
}

.know-more {
    background: var(--wat-wat-gradient-4);
    padding: 6px 16px;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.15), 1px 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.mobile-sticky-tel {
    display: none;
    position: sticky;
    bottom: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    margin: 10px 0 10px auto;
}

/* endregion */

/* region MODAL */

#modalContainer {
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden auto;
}

#modalContainer:has(.modal) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000C1;
    padding: 50px 10px;
}

.modal {
    padding: 20px;
    border-radius: 16px;
    background: var(--color-white);
    min-width: min(100%, 400px);
    position: relative;
}

.modal > :is(h1,h2,h3,h4,h5,h6):first-child {
    margin-top: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--wat-wat-grey-200);
    width: 100%;
}

.modal:is(form, .form) > :is(h1,h2,h3,h4,h5,h6):first-child {
    margin-bottom: 0;
}

.modal:is(form, .form) > p {
    margin: 0;
}

.modal-close {
    position: absolute;
    right: 5px;
    top: 5px;
    background: none;
    border: 1px solid var(--wat-wat-grey-300);
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* endregion */

/* region LOGIN & SIGNUP PAGES */

.login-container {
    display: flex;
    flex-direction: row;
    gap: 25px;
    border-radius: 10px;
    border: 1px solid var(--wat-wat-grey-300);
}

.login-form-container {
    flex-basis: 60%;
    padding: 10px 0 30px 30px;
}

.login-side {
    background: url("/static/img/pages/login/side-background.webp");
    background-size: cover;
    color: white;
    border-radius: 10px;
    max-width: var(--max-content-width);
    margin: 0 auto;
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    padding: 50px;
    justify-content: flex-start;
    gap: 30px;
    font-family: 'Montserrat', sans-serif;
}

.login-side h3 {
    font-size: var(--font-size-24);
}

.login-side_text {
    line-height: 30px;
    font-weight: 400;
}

.oauth-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px 20px;
    justify-content: center;
}

.oauth-buttons > :is(button, a) {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
}

#referralSource {
    margin: 10px 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* endregion */

/* region PROFILE PAGE */

.new-address-tr td {
    border-style: dashed !important;
    padding: 0;
}

.new-address-button {
    width: 100%;
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: var(--wat-wat-primary-3);
    border: none;
    padding: 8px 12px;
}

.new-address_plus {
    font-size: var(--font-size-32);
}

.new-address_plus + * {
    transform: translateY(1px);
}

:where(label > input:not([type='checkbox'],[type='radio'])) {
    width: 100%;
}

.portal-main {
    --max-content-width: 1400px;
    border-radius: 15px;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 400px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.portal_left-menu-anchor {
    border-right: 1px solid var(--wat-wat-grey-300);
}

.portal_left-menu {
    padding: 0 20px 20px 20px;
    margin: -1px;
    display: flex;
    width: 230px;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
    align-items: flex-start;
    position: sticky;
    top: var(--header-height);
    overflow: hidden auto;
    max-height: calc(100vh - var(--header-height));
}

.portal-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.portal_left-menu h2 {
    color: var(--wat-wat-primary-1);
}

.portal_left-menu a {
    color: var(--wat-wat-grey-500);
    text-decoration: none;
}

.portal_left-menu a.active {
    color: var(--wat-wat-primary-1);
    font-weight: bold;
}

.portal_content {
    flex-grow: 1;
    /*box-shadow: 4px 4px 11px 0 rgba(0, 0, 0, 0.25);*/
    border-radius: 0 10px 10px 0;
    padding: 0 20px 20px 20px;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.portal_content > h1 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wat-wat-grey-300);
}

.profile_order-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.profile_order-item + .profile_order-item, .profile-product-reviews > .rating + .rating {
    margin-top: 5px;
}

.profile_order-item, .profile-product-reviews > .rating {
    height: 50px;
}

[disabled] .rating, .rating[disabled] {
    pointer-events: none;
}

.avatar {
    border-radius: 50%;
    position: relative;
    height: unset;
    aspect-ratio: 1;
}

.avatar-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.avatar:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/static/img/users/default.webp");
    background-size: contain;
}

.avatar-edit-container {
    --avatar-size: 100px;
    height: var(--avatar-size);
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

:is(.avatar, .avatar-wrapper) + .avatar-edit-container {
    display: none;
}

:is(.avatar, .avatar-wrapper).editing {
    display: none;
}

:is(.avatar,.avatar-wrapper).editing + .avatar-edit-container {
    display: block;
}

/* endregion */

/* region MERCHANT DASHBOARD */

.merchant-table-img {
    max-width: 33px;
    max-height: 33px;
    width: auto;
    height: auto;
}

/* endregion */

/* region PRODUCT PAGE */

.product-grid {
    display: flex;
    flex-direction: row;
    gap: 15px 40px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 10px;
}

.product-carousel {
    display: flex;
    flex-direction: row;
    gap: 20px;
    --max-carousel-height: 300px;
}

.product-carousel_column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: var(--max-carousel-height);
    overflow-y: auto;
    padding-right: 10px;
    max-width: 80px;
}

.product-carousel_column > * {
    max-width: 100px;
    max-height: 70px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
}

.product-carousel_column img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}

.product-carousel_showcase {
    flex-basis: 250px;
    max-width: 250px;
    height: var(--max-carousel-height);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.product-carousel_showcase > img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}

.toggle-group {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.toggle-group > input {
    display: none;
}

.toggle-group > label {
    border-radius: 10px;
    padding: 8px 15px;
    border: 2px solid var(--wat-wat-grey-300);
    text-align: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.toggle-group > label.color-selector {
    background: var(--color);
    border-radius: 6px;
    width: 25px;
    height: 25px;
    padding: 0;
    border-color: transparent;
}

.product-stock-toggle {
    width: 130px;
}

.toggle-group > input:checked + .product-stock-toggle {
    border-color: var(--wat-wat-secondary-1);
}

.currency {
    font-weight: normal;
    font-size: .75em;
}

.currency-value.--line-through {
    text-decoration: line-through;
    font-weight: normal;
    font-size: .9em;
}

.product-price {
    font-size: var(--font-size-24);
    font-family: 'Montserrat', sans-serif;
}

.toggle-group > input:checked + label {
    border-color: var(--wat-wat-primary-1);
}

.toggle-group > input[disabled] + label {
    cursor: not-allowed;
    opacity: .5;
}

.specs-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.specs-grid .toggle-group > label:not(.color-selector) {
    width: 100px;
    height: 35px;
}

.product-model-specs > label {
    border-radius: 15px;
    padding: 5px 15px;
    border: 2px solid #DDE5E9;
    text-align: center;
    cursor: pointer;
}

.product-model-specs > input:checked + label {
    border-color: var(--wat-wat-primary-1);
}

.rating {
    display: flex;
    flex-direction: row-reverse;
    gap: 1px;
    align-items: center;
    justify-content: center;
    color: #DDE5E9;
}

.rating-star {
    padding: 0;
    border: none;
    width: 15px;
    height: 14px;
    background: url("/static/img/icons/star.svg") no-repeat;
    background-size: contain;
    position: relative;
    --star-fill-percentage: 100%;
}

.rating.size-20 .rating-star {
    width: 22px;
    height: 20px;
}

.rating.big .rating-star {
    width: 32px;
    height: 30px;
}

.rating-star:after {
    content: "";
    position: absolute;
    background-size: cover;
    width: var(--star-fill-percentage);
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(-4%);
}

.rating:not(.editable) .rating-star.filled:after, .rating.editable:not(:hover) .rating-star.filled:after, .rating.editable .rating-star:hover:after, .rating.editable .rating-star:hover ~ .rating-star:after {
    background-image: url("/static/img/icons/star_filled.svg");
}

.rating.editable .rating-star {
    cursor: pointer;
}

.product-details {
    border: 1px solid var(--wat-wat-grey-300);
    border-radius: 15px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.tabs {
    --border-width: 2px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    --padding-bottom: 7px;
    padding: 0 0 var(--padding-bottom);
    position: relative;
}

.tabs:after {
    content: "";
    background: var(--wat-wat-grey-300);
    position: absolute;
    left: 0;
    bottom: calc(var(--padding-bottom) - var(--border-width));
    width: 100%;
    height: var(--border-width);
    z-index: -1;
}

.tabs > li {
    padding: 2px 8px;
    margin-bottom: calc(-1 * var(--border-width));
}

.tabs a {
    color: inherit;
    text-decoration: none;
}

.tabs > .active {
    font-weight: bold;
    border-bottom: var(--border-width) solid var(--wat-wat-primary-1);
}

blockquote {
    margin: 0;
    padding: 10px;
    font-style: italic;
    border-left: 5px solid var(--wat-wat-grey-200);
}

/* endregion */

/* region CART & CHECKOUT PAGE */
.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    align-items: flex-start;
}

.cart-recap {
    border-radius: 15px;
    border: 1px solid #ACB2B5;
    padding: 12px;
}

.cart-recap hr {
    margin: 15px 15%;
    border: none;
    height: 1px;
    background: var(--wat-wat-grey-300);
}

.cart-recap > h2 {
    margin-top: 0;
    font-size: var(--font-size-24);
}

.cart-item {
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 15px;
    border: 1px solid var(--wat-wat-grey-300);
}

.cart-item img {
    border-radius: 8px;
}

.cart-item-button {
    background: none;
    padding: 0;
    color: var(--wat-wat-grey-800);
    border: 0;
    font-weight: 700;
    font-size: var(--font-size-12);
}

.cart-recap_item_specs {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-recap_item_specs > li {
    display: inline;
}

.cart-recap_item_specs > li + li:before {
    content: "-\00a0";
}

.cart-recap_img-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-left-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
}

.cart-tab-header {
    border-bottom: 2px solid #ACB2B5;
    flex-grow: 1;
    flex-basis: 50%;
    padding: 10px 0;
    color: #ACB2B5;
    font-size: var(--font-size-24);
    cursor: pointer;
    margin-top: 10px;
}

.cart-tab-header:first-child {
    margin-right: -15px;
}

.cart-tab-header + .cart-tab-header {
    padding-left: 5px;
    margin-left: -15px;
}

.cart-tab-header.active {
    border-bottom-color: var(--wat-wat-primary-1);
    color: var(--wat-wat-primary-3);
}

.toggle-group-vertical > input {
    display: none;
}

.toggle-group-vertical > label {
    border-radius: 10px;
    border: 2px solid var(--wat-wat-grey-300);
    padding: 10px;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
    color: var(--wat-wat-grey-900);
}

.toggle-group-vertical > input:checked + label {
    border-color: var(--wat-wat-secondary-2);
}

.toggle-group-vertical > input:disabled + label {
    opacity: .6;
    cursor: not-allowed;
}

.toggle-group-vertical > label ~ label {
    margin-top: 10px;
}

.cart-address-button {
    border: 3px solid #DDE5E9;
    border-radius: 10px;
    padding: 8px;
    background: transparent;
    font-weight: bold;
    color: #2C2E30;
    font-size: var(--font-size-12);
    width: 85px;
}

.hidden {
    display: none !important;
}

.stripe-form {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--wat-wat-secondary-1);
    overflow: hidden;
    min-height: 260px;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.add-to-cart-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    width: 100%;
}

#paypalContainer.loading {
    cursor: not-allowed;
    position: relative;
}

#paypalContainer.loading > * {
    pointer-events: none;
}

#paypalContainer.loading:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
    opacity: .75;
    z-index: 101; /* Paypal sets a 100 z-index on its iframe */
}

/* endregion */

/* region HOME PAGE */
.home-video {
    max-width: min(100%, var(--max-content-width));
    margin: 0 auto;
    border-radius: 10px;
    height: 703px;
}

.advertisement-container {
    position: relative;
}

.advertisement-container > img {
    border-radius: 10px;
}

.sustainability-explanation {
    border-radius: 10px;
    padding: 30px;
    position: relative;
    z-index: 0;
    box-shadow: 0 -25px 200px 0 rgba(0, 180, 156, 0.20);
    font-family: 'Montserrat', sans-serif;
}

.sustainability-explanation p {
    font-size: var(--font-size-24);
}

.sustainability-explanation:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/static/img/pages/home/questions.svg") no-repeat 90% 50%;
    background-size: contain;
    z-index: -1;
    transform: scaleX(var(--scale-x));
    border-radius: inherit;
}

.services-list {
    box-shadow: 0 -25px 200px 0 rgba(0, 180, 156, 0.25);
    background: #00B49C33;
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
    gap: 20px;
    border-radius: 10px;
    padding: 15px 23px 15px 5px;
    justify-content: space-between;
    overflow-x: auto;
}

.services-character-container {
    position: relative;
    width: 150px;
    display: flex;
    align-items: center;
    padding: 0 60px 0 20px;
    margin-right: 20px;
    grid-row: span 2;
}

.services-character-container img {
    transform: translateY(20px);
    width: 88px;
    max-width: 88px;
}

.services-character-container b {
    position: absolute;
    width: 100px;
    top: -5px;
    transform: translateY(calc(20px - 100%));
    left: 50%;
}

html[dir="rtl"] .services-character-container b {
    left: unset;
    right: 50%;
}

.services-list_cell {
    border-radius: 10px;
    padding: 20px;
    height: 165px;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.20);
    position: relative;
    z-index: 0;
    background: var(--wat-wat-grey-100);
    text-decoration: none;
    color: inherit;
}

.services-list_cell li {
    line-height: 130%;
}

.services-list_cell h2 {
    margin-top: 0;
    font-size: var(--font-size-24);
    margin-bottom: 15px;
}

.services-list_cell ul {
    padding-left: 25px;
    padding-right: 0;
    margin: 0;
}

html[dir="rtl"] .services-list_cell ul {
    padding-right: 25px;
    padding-left: 0;
}

.services-list_cell:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
    transform: scaleX(var(--scale-x));
}

.services-list_cell.reuse:after {
    background: url("/static/img/pages/home/rethink.svg") no-repeat top -12px right -5px;
    background-size: auto 110%;
}

.services-list_cell.report:after {
    background: url("/static/img/pages/home/reuse.svg") no-repeat bottom -32px right 10px;
    background-size: auto 110%;
}

.services-list_cell.recycle:after {
    background: url("/static/img/pages/home/recycle.svg") no-repeat bottom -7px right -17px;
    background-size: auto 90%;
}

.services-list_cell.remove-data:after {
    background: url("/static/img/pages/home/recycle.svg") no-repeat bottom -7px right -17px;
    background-size: auto 90%;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 8px;
    text-decoration: none;
    color: black;
    position: relative;
}

.product-card, .advertised-product-container {
    height: 230px;
}

.product-card img {
    max-height: 120px;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

.products-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
    padding: 20px;
    margin: 10px -20px -20px -20px;
    align-items: flex-start;
    align-content: flex-start;
    justify-items: stretch;
}

.products-row.catalog {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    flex-grow: 1;
}

.sponsored-label {
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 1px 4px;
    background: var(--wat-wat-primary-1);
    color: var(--wat-wat-grey-100);
    border-radius: 8px;
    font-weight: 700;
}

.advertised-product-container {
    grid-column-start: 1;
    grid-column-end: 4;
    display: flex;
    align-items: center;
}

.slider {
    height: 330px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.slide-container {
    flex-grow: 1;
    max-width: 1250px;
}

.slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px 40px;
}

.slide:not(.active, .slide-in, .slide-out) {
    display: none;
}

.slide.slide-in {
    animation: slide-in .8s ease-out forwards;
}

.slide.slide-in.backwards {
    animation: slide-out .8s ease-out reverse forwards;
}

.slide.slide-out {
    animation: slide-out .8s ease-out forwards;
}

.slide.slide-out.backwards {
    animation: slide-in .8s ease-out reverse forwards;
}

@keyframes slide-in {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.slider-controls:last-child {
    justify-content: flex-start;
}

.slide-text {
    width: min(100%, 1250px);
    margin: 0 auto;
    padding: 0 15px;
}

.slide-text > * {
    max-width: 640px;
}

.slide-text > h2 {
    font-size: var(--font-size-32);
    margin-bottom: 12px;
}

.slide-text p {
    margin: 12px 0;
    line-height: 200%;
}

.slide_background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: 50% 50%;
}

.slide_background:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #FFF 33.96%, rgba(255, 255, 255, 0.00) 75.69%), transparent 50% / cover no-repeat;
}

.slide:first-child .slide_background {
    background-image: url("/static/img/pages/home/slider/disposition.webp");
}

.slide:nth-child(2) .slide_background {
    background-image: url("/static/img/pages/home/slider/resale.webp");
}

.slide:nth-child(3) .slide_background {
    background-image: url("/static/img/pages/home/slider/electronics.webp");
}

.slide:nth-child(4) .slide_background {
    background-image: url("/static/img/pages/home/slider/esg.webp");
}

.slide:nth-child(5) .slide_background {
    background-image: url("/static/img/pages/home/slider/data-erasure.webp");
}

.slide.dark {
    color: white;
}

.slide.dark .slide_background:after {
    background: linear-gradient(90deg, #053854 26.84%, rgba(5, 56, 84, 0.00) 87.24%), transparent 50% / cover no-repeat;
}

.slider-control {
    background: var(--wat-wat-primary-3);
    width: 24px;
    height: 24px;
}

.slider.dark .slider-control {
    background: white;
}

.slider-control.previous {
    mask: url("/static/img/icons/previous.svg") no-repeat center;
    -webkit-mask: url("/static/img/icons/previous.svg") no-repeat center;
}

.slider-control.next {
    mask: url("/static/img/icons/next.svg") no-repeat center;
    -webkit-mask: url("/static/img/icons/next.svg") no-repeat center;
}

.benefits-container {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.benefits-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-evenly;
    text-align: center;
    flex-grow: 1;
}

.benefits-grid > * {
    max-width: 220px;
}

.benefits-grid img {
    border-radius: 25px;
}

.benefits-grid img.placeholder {
    background: #AEF9E9;
}

.benefits-grid h3 {
    font-size: var(--font-size-24);
    margin-top: 0;
    margin-bottom: 17px;
    white-space: nowrap;
}

.benefits-grid p {
    line-height: 150%;
}

.benefits_contact-container {
    flex-shrink: 0;
    width: min(475px, 100%);
}

.contact-form {
    width: min(500px, 100%);
    max-width: 500px;
    padding: 10px 14px;
    background: #29EEC6A1;
    border-radius: 20px;
    box-shadow: 4px 4px 9px 0 #008271;
    font-size: 1rem; /* Avoid parent font sizes rules on mobile, for contact form embedded in home section */
}

.contact-form input, .contact-form textarea {
    background: white;
    width: 100%;
}

.newsletter-popup {
    width: min(500px, 100%);
    max-width: 500px;
    padding: 16px;
    background: #76F3DA;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 0 9px 4px #008271a6;

    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
    transform-origin: bottom right;
}

.newsletter-popup.visible:not(.dismissed) {
    display: flex;
    animation: newsletter-popup-appear 0.5s ease-out;
}

.newsletter-popup.dismissed {
    display: flex;
    animation: newsletter-popup-disappear 0.5s ease-in forwards;
}

.newsletter-popup input {
    background: white;
    width: 100%;
}

.newsletter-result > .feedback {
    margin-top: 0;
}

@keyframes newsletter-popup-appear {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes newsletter-popup-disappear {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
        display: none;
    }
}

.newsletter-popup_close {
    position: absolute;
    top: 0;
    right: 5px;
    border-radius: 50%;
    border: 1px solid var(--wat-wat-grey-500);
    background: white;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    box-shadow: 0 -2px 9px 0 #81868a;
}

.home-intro {
    text-align: center;
    margin-top: 50px;
}

.home-intro > p {
    max-width: min(100%, 900px);
    margin: 12px auto 80px auto;
}

.home-section {
    display: grid;
    grid-template-columns: 8fr 7fr;
    gap: 100px;
    margin-top: 90px;
    margin-bottom: 80px;
}

.home-section.text-right {
    grid-template-columns: 7fr 8fr;
}

.home-section img {
    border-radius: 10px;
    height: 100%;
    flex-grow: 1;
}

.home-section img.placeholder {
    background: rgba(41, 238, 198, 0.38);
}

.home-section .mobile-img {
    display: none;
}

.home-section p {
    margin: 36px 0;
    line-height: 200%;
}

.home-section li {
    line-height: 200%;
    margin-top: 30px;
}

.home-section h2 {
    color: var(--wat-wat-secondary-2);
    font-size: var(--font-size-32);
}

.benefits-title {
    font-size: var(--font-size-32);
}

/* endregion */

/* region ABOUT US PAGE */
.about-us-img {
    float: right;
    margin-left: 50px;
    margin-bottom: 20px;
    max-width: 40%;
}

.stamp-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 70px auto;
    max-width: 500px;
    text-align: center;
    gap: 15px;
}

/* endregion */

/* region CONTACT PAGE */
.contact-page-content {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-page-content a {
    color: var(--wat-wat-primary-3);
    text-decoration: none;
}

.contact-img {
    max-width: calc(100% - 350px - 30px);
}

/* endregion */

/* region CATALOG PAGE */

.brand-logos-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 0 20px;
    --logos-size: 100px;
}

.brand-logos-row label {
    cursor: pointer;
    width: var(--logos-size);
    height: var(--logos-size);
}

.brand-logos-row img {
    border-radius: 50%;
    box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.16);
    max-height: var(--logos-size);
    max-width: var(--logos-size);
    width: auto;
    height: auto;
}

.catalog-content {
    display: flex;
    flex-direction: row;
    gap: 25px;
}

.filters-form {
    width: 490px;
    background: var(--wat-wat-primary-3);
    padding: 25px 80px 12px 80px;
    color: white;
    border-radius: 0 15px 15px 0;
    margin-top: 30px;
}

.filters-form ul {
    list-style: none;
    padding: 0 20px;
}

.filters-form li + li {
    margin-top: 5px;
}

.filters-form h2 {
    margin: 0 0 20px 0;
}

.filters-form h3 {
    margin: 0;
}

.filters-form details {
    margin: 0;
    padding: 0;
    background: none;
}

.filters-form summary {
    font-size: inherit;
}

.filters-form ul {
    margin: 5px 0;
}

.color-preview {
    width: 20px;
    height: 20px;
    background: var(--color);
    border-radius: 4px;
}

.mobile-catalog-header {
    display: none;
    justify-content: flex-end;
    flex-direction: row;
    background: white;
    position: sticky;
    top: 50px;
    margin-bottom: -20px;
    padding: 8px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
    z-index: 100;
}

.mobile-filters-toggle {
    padding: 4px 12px;
    font-size: inherit;
    background: var(--wat-wat-grey-300);
}

.mobile-filters-toggle.active {
    background: var(--wat-wat-gradient-3);
}

/* endregion */

/* region E-WASTE */

.e-waste-form {
    border-radius: 15px;
    border: 1px solid var(--wat-wat-grey-300);
    padding: 24px 40px;
}

.tab-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.tab-toggle + label {
    background: var(--wat-wat-grey-100);
    padding: 8px;
    border: 2px solid var(--wat-wat-grey-300);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.tab-toggle:first-child + label {
    border-top-right-radius: 0;
    border-right: none;
}

.tab-toggle ~ .tab-toggle + label {
    border-top-left-radius: 0;
    border-left: none;
}

.tab-toggle:checked + label {
    background: var(--wat-wat-primary-1);
    color: white;
    font-weight: bold;
    border-color: var(--wat-wat-primary-1);
}

.tab {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--wat-wat-primary-1);
    border-radius: 0 8px 8px 8px;
}

.e-waste-table {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 5px 20px;
}

/* endregion */

/* region DEMO */
.demo-modal {
    font-size: 16px;
}

.demo-modal hr {
    height: 1px;
    border-color: transparent;
    background: var(--wat-wat-primary-3);
}

/* endregion */

/* region RESPONSIVE */

@media (min-width: 2000px) {
    .newsletter-footer {
        --footer-repartition: 45%;
    }
}

@media (max-width: 1350px) {
    .products-row {
        margin-left: 0;
        margin-right: 0;
    }

    .header-row {
        padding: 20px;
    }

    .header-row:first-child {
        padding: 10px 20px 0 20px;
    }
}

@media (max-width: 1250px) {
    .home-video {
        border-radius: 0;
        height: auto;
    }

    .login-container {
        margin: 0 10px;
    }

    main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .products-row {
        margin-left: -10px;
        margin-right: -10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .products-row.catalog {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .filters-form {
        margin-left: -10px;
    }

    .community-footer {
        margin-left: 10px;
        margin-right: 10px;
        max-width: calc(100% - 20px);
    }

    .benefits-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .slide-text {
        padding: 0;
    }
}

@media (max-width: 1200px) {
    .products-row.catalog {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 1150px) {
    .services-list {
        padding-left: 0;
        padding-right: 15px;
        gap: 10px;
    }
}

@media (max-width: 1050px) {
    .products-row {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .newsletter-footer-content h3 {
        font-size: var(--font-size-20);
    }
}

@media (max-width: 1000px) {
    .newsletter-footer-content {
        padding: 15px;
    }

    .services-list_cell:after {
        opacity: .35;
    }

    .catalog-content {
        gap: 0;
    }

    .filters-form {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 950px) {
    .sustainability-explanation {
        font-size: 7px;
    }
}

@media (max-width: 1200px) {
    .header-row {
        justify-content: space-between;
        gap: 10px;
    }

    .header-row > .flex-grow {
        display: none;
    }
}

@media (max-width: 1000px) {
    .filters-form {
        padding-left: 20px;
        padding-right: 20px;
    }

    body {
        --header-height: 52px;
    }

    .header-row:first-child {
        display: none;
    }

    .header-row {
        justify-content: space-between;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
        padding: 10px 15px;
    }

    .header-row > a:not(:first-child) {
        display: none;
    }

    .header-row > .mobile-header-menu-container {
        display: block;
    }

    .header-categories-container {
        display: none;
    }

    .mobile-header-menu-container.toggled > button {
        background-image: url("/static/img/header/menu-close.svg");
    }

    .mobile-header-menu-container.toggled > .mobile-header-menu {
        max-height: unset;
        overflow-y: auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
        transition: max-height 0.3s ease-out, box-shadow 0.3s ease-out;
    }

    .mobile-header-menu a {
        color: var(--wat-wat-primary-3);
        text-decoration: none;
    }

    .community-footer {
        flex-direction: column;
    }

    .community-footer img {
        max-width: 200px;
    }

    .community-footer_background:after {
        background: linear-gradient(90deg, #053854a6 26.84%, rgba(5, 56, 84, 0.65) 87.24%), transparent 50% / cover no-repeat;
    }

    .contact-page-content {
        flex-direction: column;
    }

    .contact-img {
        max-width: 100%;
    }
}

@media (max-width: 850px) {
    .login-side {
        display: none;
    }

    .login-form-container {
        flex-basis: 100%;
    }

    .login-container {
        padding-right: 30px;
    }

    .products-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .filters-form {
        font-size: 12px;
    }

    .services-list {
        grid-template-columns: 1fr 1fr;
    }

    .services-character-container {
        display: none;
    }
}

@media (max-width: 800px) {
    .filters-form {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 100;
        border-radius: 15px 15px 0 0;
        max-height: 60vh;
        overflow-y: auto;
        box-shadow: 0 -2px 20px 20px rgb(0 0 0 / 45%);
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: 0.3s ease-out;
        font-size: inherit;
    }

    .catalog-content:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        z-index: 100;
    }

    .catalog-content.expand-filters .filters-form {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .catalog-content.expand-filters:before {
        display: block;
    }

    .mobile-catalog-header {
        display: flex;
    }

    .portal-main {
        flex-direction: column;
        gap: 10px;
        min-height: unset;
        margin: 10px;
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    .portal_left-menu {
        max-height: 50px;
        padding: 10px;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding-bottom 0.3s ease-out;
        border: none;
        border-bottom: 1px solid var(--wat-wat-grey-300);
    }

    .portal_left-menu a {
        pointer-events: none;
    }

    .portal_content {
        box-shadow: none;
        padding: 0;
    }

    .portal_left-menu.expanded {
        max-height: 500px;
        padding-bottom: 10px;
    }

    .portal_left-menu.expanded a {
        pointer-events: auto;
    }

    .portal_left-menu h2:after {
        content: "▼";
        margin-left: 5px;
    }

    .portal_left-menu.expanded h2:after {
        content: "▲";
    }

    .product-grid {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
    }

    .add-to-cart-row {
        position: fixed;
        bottom: 75px;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.30);
        padding: 10px 20px;
        z-index: 50;
        justify-content: center;
    }

    .cart-page-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .global-search:not(.mobile) {
        display: none;
    }

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

    .global-search.mobile {
        display: flex;
        width: 100%;
    }

    .footer-content {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-content_images {
        max-width: unset;
    }

    .footer-socials {
        justify-content: flex-start;
        margin-top: 20px;
    }

    body > footer {
        padding: 20px 25px;
    }

    .footer-section:not(.expanded) > :not(h3) {
        display: none;
    }

    .footer-section h3 {
        font-weight: normal;
        padding-bottom: 6px;
        border-bottom: 1px solid #ACB2B5;
        position: relative;
        margin-bottom: 0;
    }

    .footer-section a {
        margin-top: 5px;
    }

    .footer-section h3:after {
        content: "+";
        position: absolute;
        right: 0;
    }

    .footer-section.expanded h3:after {
        content: "-";
    }

    .home-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .home-section h2 {
        margin-top: 0;
    }

    .home-section:not(#contact) {
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25);
        margin-bottom: 30px;
    }

    .home-section + .home-section {
        margin-top: 30px;
    }

    .home-section > img {
        display: none;
    }

    .home-section .mobile-img {
        max-width: 45%;
        float: right;
        display: block;
        margin-left: 10px;
    }

    .home-section p {
        margin: 20px 0;
        line-height: 150%;
    }

    .home-section li {
        line-height: 150%;
        margin-top: 20px;
    }

    .home-intro h1 {
        font-size: var(--font-size-24);
    }

    .home-intro p {
        font-size: var(--font-size-14);
    }

    .home-section.mobile-shrink {
        --collapsed-height: 75px;
        position: relative;
    }

    .home-section.mobile-shrink:not(.expanded) {
        max-height: var(--collapsed-height);
    }

    .home-section.mobile-shrink:not(.expanded) > div {
        overflow: hidden;
    }

    .home-section.mobile-shrink:after {
        content: 'Show More';
        position: absolute;
        right: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        top: calc(var(--collapsed-height) / 2 - (20px / 2));
        font-weight: 700;
        background: url("/static/img/icons/next.svg") no-repeat right center;
        padding-right: 30px;
    }

    .home-section.mobile-shrink.expanded:after {
        content: 'Show Less';
    }

    .slide_background:after {
        background: linear-gradient(90deg, #FFF 33.96%, rgba(255, 255, 255, 0.70) 75.69%), transparent 50% / cover no-repeat;
    }

    .slide.dark .slide_background:after {
        background: linear-gradient(90deg, #053854 26.84%, rgba(5, 56, 84, 0.70) 87.24%), transparent 50% / cover no-repeat;
    }

    .mobile-sticky-tel {
        display: block;
    }
}

@media (max-width: 780px) {
    .community-footer {
        font-size: var(--font-size-14);
    }

    .community-footer img {
        max-width: 100px;
    }
}

@media (max-width: 760px) {
    body > footer {
        padding: 20px 10px;
    }

    .footer-socials {
        margin-top: 10px;
    }

    .footer-socials img {
        max-width: 20px;
    }
}

@media (max-width: 730px) {
    .community-footer {
        padding: 24px;
    }

    .services-list_cell.report {
        align-items: flex-start;
    }

    .services-list_cell.report:after {
        background-position: bottom -32px right 5px;
    }

    .services-list {
        padding: 10px;
    }

    .benefits-grid {
        gap: 5px;
        font-size: var(--font-size-14);
    }

    .benefits-grid > * {
        max-width: 170px;
    }
}

@media (max-width: 700px) {
    .oauth-buttons {
        flex-direction: column;
    }

    .services-list {
        font-size: var(--font-size-14);
    }

    .newsletter-footer_bg {
        display: none;
    }

    .newsletter-footer-content {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 30px;
        padding: 0;
        margin-bottom: 30px;
    }

    .newsletter-footer-content > i {
        display: none;
    }

    .newsletter-footer-content > * {
        border-radius: 10px;
        margin: 0 10px;
        padding: 10px 20px;
    }

    .last-blog-article {
        background: var(--wat-wat-gradient-3);
    }

    .newsletter-form {
        background: var(--wat-wat-gradient-1);
    }

    .mobile-sticky-tel {
        margin-top: -20px;
    }
}

@media (max-width: 640px) {
    .products-row, .products-row.catalog {
        grid-template-columns: 1fr 1fr;
    }

    .advertised-product-container {
        grid-column-end: 3;
    }

    .slide-text {
        font-size: var(--font-size-16);
    }
}

@media (max-width: 600px) {
    .cart-tab-header:not(.active) {
        display: none;
    }

    .cart-left-grid {
        display: flex;
        flex-direction: column;
    }

    .cart-tab-header + .cart-tab-header {
        margin-left: 0;
        padding-left: 0;
    }

    .services-list h2 {
        font-size: var(--font-size-24);
    }

    .about-us-img {
        display: none;
    }
}

@media (max-width: 560px) {
    .community-footer img {
        width: auto;
        max-height: 50px;
    }

    .sustainability-explanation:after {
        background-position: right center;
    }

    .product-carousel {
        --max-carousel-height: 200px;
    }

    .breadcrumb {
        font-size: 12px;
        padding: 10px 8px;
    }

    .breadcrumb > li + li:before {
        padding: 8px 2px;
    }

    .toggle-group {
        gap: 5px;
    }
}

@media (max-width: 550px) {
    .services-list_cell {
        height: 145px;
    }

    .benefits_contact-container {
        flex-shrink: 1;
    }

    .benefits-grid {
        font-size: var(--font-size-12);
    }

    .benefits-grid > * {
        max-width: 150px;
    }

    .benefits-grid h3 {
        margin-bottom: 10px;
    }
}

@media (max-width: 500px) {
    #stockTypes {
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .product-stock-toggle {
        width: 100px;
    }

    .specs-grid {
        font-size: 12px;
        grid-template-columns: 80px 1fr;
    }

    .toggle-group > label {
        border-radius: 6px;
    }

    .sustainability-explanation:after {
        opacity: .25;
    }

    .services-list_cell {
        height: 110px;
        padding: 10px;
    }

    .services-list_cell ul {
        padding-left: 20px;
    }

    .benefits-title {
        font-size: var(--font-size-20);
    }

    .home-section {
        font-size: var(--font-size-14);
    }

    .home-section li {
        margin-top: 10px;
    }

    .benefits-grid {
        font-size: var(--font-size-12);
    }

    .benefits-grid > * {
        max-width: 115px;
    }

    .benefits-grid h3, .services-list h2 {
        font-size: var(--font-size-20);
    }

    .benefits-title {
        font-size: var(--font-size-16);
    }

    .benefits-grid p {
        margin-top: 5px;
    }

    .benefits-grid img {
        max-width: 100px;
    }
}

@media (max-width: 450px) {
    .products-row {
        padding-left: 10px;
        padding-right: 10px;
    }

    .brand-logos-row {
        padding-left: 10px;
        padding-right: 10px;
        gap: 10px;
    }

    .products-row {
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    }

    .product-card {
        width: auto;
        min-width: 0;
    }

    .cart-item {
        font-size: 12px;
        gap: 10px;
    }

    .slide-text p {
        line-height: 150%;
    }

    .slide-text h2 {
        font-size: var(--font-size-24);
    }

    .home-section h2 {
        font-size: var(--font-size-24);
    }

    .home-section.mobile-shrink {
        --collapsed-height: 60px;
    }

    .home-section.mobile-shrink + .home-section.mobile-shrink {
        margin-top: -10px;
    }

    .home-section.mobile-shrink + .home-section:not(.mobile-shrink) {
        margin-top: 90px;
    }
}

@media (max-width: 425px) {
    .services-list {
        font-size: var(--font-size-12);
    }
}

@media (max-width: 410px) {
    .product-card {
        height: 210px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .product-grid {
        padding: 0 5px;
    }

    .product-carousel_column {
        display: none;
    }

    .add-to-cart-row {
        padding: 10px;
        gap: 10px;
    }

    .benefits-grid > * {
        max-width: 110px;
    }

    .benefits-grid img {
        max-width: 80px;
    }

    .slide-text h2 {
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    .services-list {
        margin-left: -10px;
        margin-right: -10px;
        border-radius: 0;
    }

    .benefits-grid {
        gap: 5px;
        margin: 0 -5px;
    }

    .benefits-grid > * {
        max-width: 100px;
    }

    .benefits-grid img {
        max-width: 80px;
    }
}

@media (max-width: 360px) {
    .home-section h2 {
        font-size: var(--font-size-20);
    }

    .home-section.mobile-shrink {
        --collapsed-height: 58px;
    }

    .home-section.mobile-shrink:after {
        right: 10px;
    }
}

@media (max-width: 350px) {
    .slide {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .slide-text {
        font-size: .9em;
    }

    .slide-text h2 {
        font-size: var(--font-size-20);
    }
}

/* endregion */

/* region HTMX */

.indicator-overlay {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1c1f29d9;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
}

.indicator-spinner {
    pointer-events: none;
    max-width: 100%;
    max-height: 100%;
}

.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s step-end;
}

/* endregion */

/* region FEEDBACKS & FLASH MESSAGES */

#flashMessageContainer > .feedback.error {
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--wat-wat-red);
    border-bottom: none;
}

#flashMessageContainer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: min(100vw, 800px);
}

.flash-message {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flash-message, #flashMessageContainer > .feedback {
    padding: 20px;
    max-width: 100%;
    gap: 20px;
    box-shadow: 0 0 6px 0 #b1b1b1;
    animation: ease-out flash-message-in .75s, ease-out flash-message-shadow .75s;
}

.flash-message.disappear, #flashMessageContainer .feedback.disappear {
    transform: translateY(100%);
    animation: ease-out flash-message-out 0.3s;
}

@keyframes flash-message-in {
    0% {
        transform: translateY(100%);
    }

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

@keyframes flash-message-shadow {
    0% {
        box-shadow: 0 0 0 0 var(--color-danger-200);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 max(100vh, 100vw) max(100vh, 100vw) var(--color-danger-200);
        opacity: .5;
    }
    100% {
        box-shadow: 0 0 0 0 var(--color-danger-200);
        opacity: 1;
    }
}

@keyframes flash-message-out {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* endregion */

/* region POINTS INPUT */

.points-input {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.points-input > button {
    font-size: 1.2em;
    padding: 6px 12px;

    background: var(--wat-wat-primary-1);
    color: white;
    border: none;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    transition: transform .3s ease-out;
}

.points-input > button:hover {
    transform: scale(1.1);
}

.points-input > button:first-child {
    border-radius: 10px 0 0 10px;
    transform-origin: center center;
}

.points-input > button:last-child {
    border-radius: 0 10px 10px 0;
    transform-origin: center center;
}

.points-input > input {
    border-radius: 0;
    width: 80px;

    font-size: 1.2em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: center;

    appearance: textfield;
    -moz-appearance: textfield;
}

.points-input > input::-webkit-outer-spin-button,
.points-input > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* endregion */

/* region STATUS TIMELINE */

.timeline {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    flex-shrink: 0;
    align-items: flex-start;
    margin: 10px 0 25px 0;
    padding: 10px;
}

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

.timeline_cell {
    min-width: 130px;
    width: 130px;
    position: relative;
    margin-left: -10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    --background-color: var(--wat-wat-grey-200);
}

.timeline:not(.--wrap) .timeline_cell:first-child {
    margin-left: 0;
}

.timeline_cell_arrow {
    width: 100%;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease-out;
    text-align: center;
    padding: 0 10px;
    cursor: inherit;
}

.timeline_cell_arrow > svg {
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: -1;
    fill: var(--background-color);
    pointer-events: none;
}

.timeline_cell_arrow > input[type="checkbox"] {
    display: none;
}

.timeline_cell:has(input[type="checkbox"]) {
    cursor: pointer;
}

.timeline_cell:is(.--active, :has(input:checked)) {
    --background-color: var(--wat-wat-primary-1);
}

.timeline_cell:is(.--active, :has(input:checked)) .timeline_cell_arrow {
    color: var(--color-white);
}

.timeline.--cancelled .timeline_cell:is(.--active, :has(input:checked)) {
    --background-color: #708ca1;
}

.timeline_cell_details {
    text-align: center;
    margin-top: 10px;
    margin-right: 5px;
    font-size: .8em;
    border: 1px solid var(--background-color);
    border-radius: 8px;
    padding: 5px 8px;
    position: relative;
}

.timeline_cell_details:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -15px;
    height: 15px;
    width: 2px;
    background: var(--background-color);
}

.timeline_cell_details.--clickable {
    cursor: pointer;
}

.timeline_cell_details.--clickable:hover {
    background: var(--wat-wat-primary-1-10);
    border-color: var(--wat-wat-primary-1);
}

form.timeline_cell_details {
    padding: 0;
}

form.timeline_cell_details > input {
    padding: 4px;
    width: 110px;
}

/* endregion */

/* region MAP */

.map {
    height: min(400px, calc(100vh - 55px));
    width: 100%;
}

.map.--short {
    height: min(200px, calc(100vh - 55px));
}

.map-feedback {
    margin-top: 20px;
}

.address-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
    counter-increment: address-row-number;
    position: relative;
}

.address-row:not(.address-not-found):is(:focus-within, :hover):before {
    position: absolute;
    content: "Resolved address: " var(--resolved-address);
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid var(--wat-wat-grey-300);
    background: white;
    bottom: 100%;
    left: 15px;
    pointer-events: none;
    font-size: .75em;
}

.address-row.address-not-found:is(:focus-within, :hover):after {
    position: absolute;
    content: var(--google-maps-error, "⚠ Google cannot find this address. Please make sure it is a valid address.");
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid var(--wat-wat-grey-300);
    background: var(--color-danger-background);
    bottom: 100%;
    left: 15px;
    pointer-events: none;
    font-size: .85em;
}

.address-row.address-not-found input {
    background: var(--color-danger-background);
    border: 2px solid var(--color-danger);
}

/* endregion */