/*

##########################################################
CSS stylesheet for Triumf professional tools s.r.o. e-shop
##########################################################

This main files serves to implement all default variables
and also to maintain layout specific classes.

------------------------------------------------------------------------------------------
Copyright © 2025 |  Created by Filip Hurdálek (www.filiphurdalek) and Dominik Štěpánek (#)
------------------------------------------------------------------------------------------

*/

/* Main elements */
* {
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: var(--color-neutral--0);
    color: var(--color-neutral--80);
    font-family: var(--app-font);
    font-weight: var(--font-weight--regular);
    font-size: var(--font-size--base);
    display: block;
    overflow: hidden;
    text-wrap: pretty;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

body > .main-sizing, body > #content-container {
    flex-grow: 1;
}

.hide {
    display: none;
}

.show {
    display: block;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
    margin: 0;
    padding: 0;
    color: var(--color-neutral--100);
}

h1,.h1,h2,.h2,.bold,b,strong {
    font-weight: var(--font-weight--extra-bold);
}

h3,.h3,h4,.h4 {
    font-weight: var(--font-weight--semi-bold);
}

h5,.h5,h6,.h6 {
    font-weight: var(--font-weight---bold);
}

h1,.h1 {
    font-size: var(--font-size--28);
}

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

h3,.h3 {
    font-size: var(--font-size--22);
}

h4,.h4 {
    font-size: var(--font-size--20);
}

h5,.h5,h6,.h6 {
    font-size: var(--font-size--18);
}

a {
    color: var(--color-info--80);
    text-decoration: none;
    transition: all .5s ease;
}

button, a, input[type="submit"], input[type="button"] {
    cursor: pointer;
}

a:hover {
    color: var(--color-info--60);
}

img {
    width: 100%;
    display: block;
}

figure, picture, p {
    margin: 0;
}

figure, picture {
    display: block;
}

button, input, select, textarea {
    outline: none;
    border: none;
    background: var(--color-neutral--0);
    font-family: inherit;
    font-size: inherit;
    transition: all .5s ease;
}

select {
    width: max-content;
    color: inherit;
    padding: var(--s-8) var(--s-12);
    background: var(--color-neutral--0);
    border: 1px solid var(--color-neutral-opacity--30);
    appearance: none;
    -webkit-appearance: none;
    display: block;
}

input:not([type="submit"], [type="button"], [type="checkbox"]), textarea {
    padding: var(--s-8) var(--s-12);
    border: 1px solid var(--color-neutral-opacity--30);
    border-radius: var(--border-radius--md);
}

input:not([type="submit"], [type="button"], [type="checkbox"]):focus, textarea:focus {
    color: var(--color-info--80);
    border: 1px solid var(--color-info--80);
}

[data-input="invalid"] {
    border: 1px solid var(--color-danger--80) !important;
    color: var(--color-danger--80) !important;
}

input[type="submit"]:disabled {
    background: var(--color-danger-opacity--10) !important;
    color: var(--color-neutral--0) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

::placeholder {
    font-family: inherit;
    font-size: .9rem;
    color: var(--color-neutral-opacity--30);
    font-weight: var(--font-weight--light);
    font-style: var(--font-style--italic);
}

::selection {
    background: var(--color-info--100);
    color: var(--color-neutral--0);
}

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

input:not([type="submit"]):read-only,textarea:read-only {
    opacity: .5;
    color: var(--color-neutral-opacity--70) !important;
    background: var(--color-neutral-opacity--10) !important;
    cursor: not-allowed;
}

ul,ol {
    padding: 0;
    margin: var(--s-8) 0;
}

ul li {
    padding-left: var(--s-16);
    list-style: none;
    position: relative;
}

.styled-list li:before {
    content: '';
    width: 6px;
    height: 2px;
    background: var(--color-info--80);
    position: absolute;
    top: var(--s-10);
    left: 0;
}

.styled-list li {
    color: var(--color-neutral-opacity--50);
}

b, strong {
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--100);
}

/* Size elements */

.mb-show {
    display: none !important;
}

.d-none {
    display: none;
}

.grecaptcha-badge {
    visibility: hidden !important;
}

#overlay-loader {
    width: 100vw;
    height: 100vh;
    background: var(--color-neutral-opacity-in--10);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
}

#overlay-loader svg {
    animation: pulse 2s infinite linear;
    -webkit-animation: pulse 2s infinite linear;
}

#small-loader-holder {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
}

#small-loader-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-opacity-in--10);
    backdrop-filter: blur(1px);
}

#small-loader {
    width: max-content;
    max-width: 90%;
    margin: auto;
    padding: var(--s-14);
    border-radius: var(--border-radius--xl);
    background: var(--color-neutral--0);
    color: var(--color-neutral-opacity--60);
    font-weight: var(--font-weight--light);
    box-shadow: 0 7px 20px var(--color-info-opacity--20);
    border: 1px solid var(--color-info-opacity--10);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--s-12);
}

#small-loader .animated {
    animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
    display: flex;
}

#change-consent {
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius--md);
    background: #e8edf1;
    box-shadow: var(--shadow-menu);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 32px;
    bottom: 32px;
    z-index: 996;
}

#cookie-consent-holder {
    width: 100vw;
    height: 100vh;
    padding: var(--s-60) 0;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: end;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 996;
}

#cookie-consent-holder .modal-size {
    height: auto;
}

#cookie-consent-holder .modal-content {
    width: clamp(30%,40%,90%);
    padding: var(--s-24) var(--s-24) var(--s-16) var(--s-24);
    box-shadow: var(--shadow-info-soft);
    color: var(--color-neutral-opacity--70);
    font-weight: var(--font-weight--light);
    border-radius: var(--border-radius--xl);
    overflow-y: hidden;
}

#cookie-consent-holder .modal-content > p {
    margin-bottom: .75em;
}

#cookie-consent-holder .modal-content > p:first-of-type {
    color: var(--color-info--80);
    font-weight: var(--font-weight--semi-bold);
    font-size: var(--font-size--18);
}

#cookie-consent-holder button {
    padding: var(--s-8) var(--s-14);
    border-radius: var(--border-radius--md);
    margin: var(--s-8) var(--s-16) 0 0;
    border: 2px solid var(--color-neutral-opacity--0);
    font-weight: var(--font-weight--medium);
}

#cookie-consent-holder button:nth-of-type(1) {
    background: var(--color-info--80);
    color: var(--color-neutral--0);
}

#cookie-consent-holder button:nth-of-type(1):hover {
    background: var(--color-info--100);
}

#cookie-consent-holder button:nth-of-type(2) {
    background: var(--color-neutral--0);
    color: var(--color-info--80);
    border: 2px solid var(--color-info--80);
}

#cookie-consent-holder button:nth-of-type(2):hover {
    background: var(--color-info-opacity--20);
    color: var(--color-info-opacity--70);
}

#cookie-consent-holder button:nth-of-type(3) {
    padding: var(--s-14) 0;
    background: var(--color-neutral--0);
    color: var(--color-info--80);
}

#cookie-consent-holder button:nth-of-type(3):hover {
    color: var(--color-info--60);
}

#cookie-consent-holder details {
    padding: var(--s-8);
    margin: var(--s-8) 0;
    border-top: 1px solid var(--color-neutral-opacity--10);
}

#cookie-consent-holder summary {
    color: var(--color-info-opacity--80);
    display: list-item;
    list-style: none;
    cursor: pointer;
}

#cookie-consent-holder details p {
    margin-top: var(--s-8);
}

.modal {
    width: 100vw;
    height: 100dvh;
    background: var(--color-neutral-opacity--50);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 997;
    overflow-y: auto;
}

.modal.hide iframe {
    display: none;
}

.modal.show iframe {
    display: block;
}

.modal-size {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#category-modal .modal-size {
    align-items: start;
    justify-content: start;
}

.modal-content {
    width: clamp(50%,75%,90%);
    max-height: 90%;
    padding: var(--s-44);
    background: var(--color-neutral--0);
    border-radius: var(--border-radius--md);
    position: relative;
    overflow-y: auto;
}

.modal-content:has(.modal-form) {
    width: clamp(375px,425px,90%);
    padding: var(--s-44) var(--s-32) var(--s-16) var(--s-32);
    border-radius: var(--border-radius--lg);
    background-image: var(--color-gradient--corner-right-bottom--blue--10);
}

#error-modal {
    background: none;
    backdrop-filter: blur(2px);
}

#error-modal .modal-content {
    width: clamp(375px,500px,90%);
    padding: 0;
    border-radius: var(--border-radius--lg);
    box-shadow: var(--shadow-danger-soft);
}

#error-modal .modal-close {
    position: static;
    width: max-content;
    margin: var(--s-16) auto;
    padding: var(--s-8) var(--s-12);
    color: var(--color-neutral--60);
    background: var(--color-neutral--0);
    border: 1px solid var(--color-neutral-opacity--20);
    border-radius: var(--border-radius--md);
    box-shadow: var(--shadow-none-xs);
    transition: all .5s ease;
}

#error-modal .modal-close:hover {
    color: var(--color-danger--80);
    border: 1px solid var(--color-danger--80);
    box-shadow: var(--shadow-danger-soft-xs);
}

#error-header {
    padding: var(--s-20);
    display: flex;
    align-items: center;
    gap: var(--s-12);
    color: var(--color-neutral--0);
    background: var(--color-danger--80);
}

#error-content {
    padding: var(--s-20) var(--s-28);
    border-bottom: 1px solid var(--color-neutral-opacity--10);
    display: flex;
    flex-direction: column;
    gap: var(--s-12);
}

.error-line {
    padding-left: var(--s-22);
    color: var(--color-neutral-opacity--70);
    font-weight: var(--font-weight--light);
    position: relative;
}

.error-line::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--color-danger--60);
    border-bottom: 2px solid var(--color-danger--60);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
}

#nopage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-16);
    text-align: center;
    flex-direction: column;
}

#nopage img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

#nopage .document-flex {
    align-items: center;
}

.modal-content > img {
    height: 100%;
    opacity: .1;
    mix-blend-mode: color-burn;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.modal-content .modal-close {
    position: absolute;
    right: var(--s-44);
    top: var(--s-22);
}

.modal-content:has(.modal-form) .modal-close {
    right: var(--s-32);
}

.modal-close {
    background: none;
    color: var(--color-neutral--60);
    display: flex;
    gap: var(--s-8);
    align-items: center;
}

.modal-close:hover {
    color: var(--color-neutral--80);
}

.modal-content .parcel-widget {
    margin: var(--s-16) 0;
}

.modal-form p {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral-opacity--50);
    margin-bottom: var(--s-16);
}

.modal-form h4, .modal-form .h4 {
    font-size: var(--font-size--20);
    font-weight: var(--font-weight--bold);
    color: var(--color-neutral--80);
    margin: var(--s-8) 0;
}

#snippet--flashMessages {
    width: 100%;
    height: 125px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 990;
    pointer-events: none;
}

.v-scroll-holder {
    padding: var(--s-8) 0;
    display: flex;
    gap: var(--s-16);
    align-items: center;
    justify-content: space-between;
}

.v-scroll-holder > p {
    font-weight: var(--font-weight--semi-bold);
    font-size: var(--font-size--18);
}

.v-scroll-controls {
    display: flex;
    align-items: center;
    gap: var(--s-8);
}

.v-scroll-controls > button {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius--xs);
    border: 1px solid var(--color-neutral--80);
    color: var(--color-neutral--80);
    display: flex;
    align-items: center;
    justify-content: center;
}

.v-scroll-controls > button.inactive {
    border: 1px solid var(--color-neutral--40);
    color: var(--color-neutral--40);
    pointer-events: none;
    cursor: not-allowed;
}

.v-scroll-controls > button:not(.inactive):hover {
    background: var(--color-neutral--80);
    color: var(--color-neutral--0);
}

.v-scroll-hide::-webkit-scrollbar {
    display: none;
}

#flash-msg-container:has(.flash-message) {
    width: 100%;
    height: 100%;
    position: sticky;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 990;
    animation: fade-in .5s linear 0s 1 forwards;
}

#flash-msg-container > .main-sizing {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flash-message {
    width: clamp(275px,450px,90%);
    padding: var(--s-10) var(--s-12);
    border-radius: 50vh;
    background: var(--color-neutral--0);
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    display: grid;
    grid-template-columns: 35px auto;
    gap: var(--s-16);
    align-items: center;
    box-shadow: var(--shadow-none);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transition: transform .5s ease;
}

#flash-msg-container .flash-message:first-of-type {
    box-shadow: var(--shadow-soft);
    z-index: 10;
    opacity: 1;
    transform: translate(-50%,-50%);
}

#flash-msg-container .flash-message:not(:first-of-type) {
    transform: translate(-50%,-20%) scale(0.75);
    opacity: .5;
}

.flash-title {
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--semi-bold);
}

.flash-message.success svg, .flash-message.success .flash-title {
    color: var(--color-success--80);
}

.flash-message.warning svg, .flash-message.warning .flash-title {
    color: var(--color-warning--80);
}

.flash-message.danger svg, .flash-message.danger .flash-title {
    color: var(--color-danger--80);
}

.flash-message.info svg, .flash-message.info .flash-title {
    color: var(--color-info--80);
}

.msg-fade-in {
    animation: msg-fade-in .5s linear 0s 1 forwards;
}

.msg-fade-out {
    animation: msg-fade-out .5s linear 0s 1 forwards;
}

#info-box-holder {
    padding-top: var(--s-24);
}

#info-box-holder > .main-sizing, #snippet--cartItems {
    display: flex;
    flex-direction: column;
    gap: var(--s-16)
}

.info-box {
    width: 100%;
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
    display: grid;
    grid-template-columns: 32px auto;
    align-items: center;
    gap: var(--s-16);
}

.info-box.success {
    border: 1px solid var(--color-success-opacity--30);
    color: var(--color-success--100);
    background: var(--color-success-opacity--5);
}

.info-box.warning {
    border: 1px solid var(--color-warning-opacity--30);
    color: var(--color-warning--80);
    background: var(--color-warning-opacity--5);
}

.info-box.danger {
    border: 1px solid var(--color-danger-opacity--30);
    color: var(--color-danger--80);
    background: var(--color-danger-opacity--5);
}

.info-box.info {
    border: 1px solid var(--color-info-opacity--30);
    color: var(--color-info--80);
    background: var(--color-info-opacity--5);
}

.info-box .info-box-content > p {
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
}

.info-box.info .info-box-content > p {
    color: var(--color-neutral-opacity--60);
    margin-bottom: 0;
}

.info-box.warning .info-box-content > p {
    color: var(--color-warning--80);
    margin-bottom: 0;
}

.info-box.danger .info-box-content > p {
    color: var(--color-danger--60);
    margin-bottom: 0;
}

.info-box-content > p:first-of-type:not(:last-of-type) {
    font-weight: var(--font-weight--semi-bold);
    color: inherit;
}

.info-box-content b {
    color: inherit;
}

#content-container {
    width: 100%;
    position: relative;
}

.text-light {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    align-items: center;
}

.btn {
    width: max-content;
    text-align: center;
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
    cursor: pointer;
    text-decoration: none;
    transition: all .5s ease;
}

.btn.primary {
    padding: var(--s-14) var(--s-20);
}

.btn.secondary {
    padding: var(--s-10) var(--s-16);
}

.btn.info-100 {
    background: var(--color-info--100);
    color: var(--color-neutral--0);
}

.btn.info-100:hover {
    background: var(--color-info--80);
}

.btn.neutral-40 {
    background: var(--color-neutral--40);
    color: var(--color-neutral--100);
}

.btn.neutral-40:hover {
    background: var(--color-neutral--60);
}

.btn.outline-neutral {
    border: 1px solid var(--color-neutral--80);
    color: var(--color-neutral--80);
}

.btn.outline-neutral:hover {
    background: var(--color-neutral--80);
    color: var(--color-neutral--0);
}

.btn.outline-info {
    border: 1px solid var(--color-info--80);
    color: var(--color-info--80);
}

.btn.outline-info:hover {
    background: var(--color-info--80);
    color: var(--color-neutral--0);
}

.btn.outline-danger {
    border: 1px solid var(--color-danger--80);
    color: var(--color-danger--80);
}

.btn.outline-danger:hover {
    background: var(--color-danger--80);
    color: var(--color-neutral--0);
}

.btn.full {
    width: 100%;
}

.btn.block {
    display: block;
}

.main-sizing {
    width: 100%;
    max-width: 1440px;
    padding: 0 var(--s-40);
    margin: auto;
    display: block;
    position: relative;
}

.main-sizing.reduced {
    max-width: 1140px;
}

.submit-button {
    width: max-content;
    padding: var(--s-14) var(--s-20);
    margin: var(--s-8) 0;
    background: var(--color-info--100);
    color: var(--color-neutral--0);
    text-align: center;
    border-radius: var(--border-radius--md);
    display: block;
}

.submit-button:hover {
    background: var(--color-infor--80);
}

#search-bar {
    width: 100%;
    max-width: 500px;
    position: relative;
}

#search-bar input {
    width: 100%;
    padding: var(--s-12) var(--s-40) var(--s-12) var(--s-20);
    border-radius: var(--border-radius--md);
}

#search-bar:has(input:focus) button {
    color: var(--color-info--80);
}

#search-bar button {
    width: 30px;
    height: 30px;
    padding: var(--s-4);
    color: var(--color-neutral--60);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    transition: color .5s ease;
}

#search-bar button:hover {
    color: var(--color-neutral--80);
}

.autocomplete-container {
    position: relative;
}

.autocomplete-holder {
    width: 100%;
    top: 105%;
    left: 0;
    padding: var(--s-16);
    border-radius: var(--border-radius--md);
    background: var(--color-neutral--0);
    box-shadow: 0 15px 30px var(--color-shadow--product);
    position: absolute;
    z-index: 990;
    display: none;
}

.autocomplete-holder.spaced {
    width: calc(100% - (2 * var(--s-20)));
    top: calc(100% - var(--s-16));
    left: var(--s-20);
}

.autocomplete-holder.reduced {
    max-height: 300px;
    overflow-y: auto;
}

.autocomplete-holder.sticked {
    top: calc(100% - var(--s-16));
}

.autocomplete-holder:has(p) {
    display: flex;
    flex-direction: column;
}

.autocomplete-holder.enriched > p {
    font-weight: var(--font-weight--semi-bold);
    font-size: var(--font-size--14);
    margin: var(--s-6) 0;
}

#favourite-product-search {
    padding: var(--s-20);
    margin-bottom: var(--s-32);
    background: var(--color-neutral--20);
}

#favourite-product-search input {
    margin-bottom: 0;
}

#favourite-product-search label {
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--semi-bold);
    color: var(--color-neutral--80);
}

.search-result {
    width: 100%;
    padding-bottom: var(--s-6);
    margin: var(--s-4) 0;
    font-size: var(--font-size--14);
    border-bottom: 1px solid transparent;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--s-8);
    transition: all .5s ease;
    cursor: pointer;
}

.search-result .price-tag {
    font-weight: var(--font-weight--semi-bold);
    color: var(--color-neutral--100);
}

.search-result > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.search-result > span:first-of-type {
    padding-right: var(--s-10);
}

.search-result > span:first-of-type:last-of-type {
    grid-column: 2/4;
}

.search-result > span span {
    display: block;
}

.search-result > span > span:first-of-type {
    color: var(--color-neutral--80);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.search-result > span > span:nth-of-type(2) {
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
}

.search-result span[class^='stock-'] {
    margin-left: var(--s-8);
    display: inline;
    font-size: inherit;
}

.search-result:hover {
    text-decoration: none;
    color: var(--color-info--80);
    border-bottom: 1px solid var(--color-neutral-opacity--20);
}

.customer-suggestion-data {
    padding-bottom: var(--s-4);
    border-bottom: 1px solid transparent;
    display: grid;
    grid-template-columns: 44px auto;
    grid-template-rows: auto auto;
    gap: 0 var(--s-6);
    align-items: center;
    grid-auto-flow: row;
    cursor: pointer;
    transition: all .5s ease;
}

.customer-suggestion-data:not(:first-of-type:last-of-type),.address-suggestion-data:not(:first-of-type:last-of-type) {
    margin-bottom: var(--s-8);
}

.customer-suggestion-data .customer-initials {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    line-height: 32px;
    background: var(--color-neutral--50);
    text-transform: uppercase;
    font-weight: var(--font-weight--semi-bold);
    color: var(--color-neutral--0);
    text-align: center;
    grid-row: 1/3;
    transition: background .5s ease;
}

.customer-suggestion-data span:nth-of-type(2) {
    font-weight: var(--font-weight--medium);
}

.customer-suggestion-data span:last-of-type {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
    font-size: var(--font-size--14);
}

.customer-suggestion-data:hover,.address-suggestion-data:hover {
    border-bottom: 1px solid var(--color-neutral-opacity--10);
}

.customer-suggestion-data:hover .customer-initials {
    background: var(--color-info-opacity--70);
}

.address-suggestion-data {
    padding-bottom: var(--s-4);
    border-bottom: 1px solid transparent;
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
    cursor: pointer;
    transition: all .5s ease;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#shop-quick-info,#shop-salesman-info {
    max-width: 275px;
    font-size: var(--font-size--14);
    display: grid;
    grid-template-columns: 30px auto;
    grid-column-gap: var(--s-16);
    align-items: center;
}

#shop-quick-info {
    grid-template-rows: auto auto;
}

#shop-quick-info svg {
    grid-row: 1/3;
}

#shop-quick-info p:first-of-type, #shop-salesman-info p:first-of-type {
    font-weight: var(--font-weight--regular);
}

#shop-quick-info p:last-of-type, #shop-salesman-info p:not(:first-of-type), #shop-salesman-info a {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

#shop-salesman-info {
    grid-template-rows: repeat(3,auto);
    grid-row-gap: var(--s-2);
}

#shop-salesman-info svg {
    grid-row: 1/4;
}

#main-menu {
    padding: 0 var(--s-16);
    background: var(--color-neutral--100);
    box-shadow: var(--shadow-menu);
    color: var(--color-neutral--20);
}

#header {
    padding: var(--s-32) 0;
    position: relative;
    z-index: 900;
}

#header > .main-sizing > img {
    width: auto;
    height: 30px;
}

#logo {
    width: auto;
    height: 50px;
}

#main-menu > .main-sizing, #header > .main-sizing {
    display: flex;
    justify-content: space-between;
    gap: var(--s-22);
    align-items: center;
}

#main-menu > .main-sizing > nav {
    display: flex;
    align-items: stretch;
    gap: var(--s-32);
}

#main-menu > .main-sizing > nav > a, #main-menu > .main-sizing > nav > details {
    color: var(--color-neutral--60);
    align-self: center;
}

#main-menu > .main-sizing > nav .dropdown-container {
    padding: var(--s-20);
    margin-left: -20px;
}

#quick-links a {
    color: var(--color-neutral--60);
    align-self: start;
}

#category-tree {
    padding: 20px;
    cursor: pointer;
    background: var(--color-neutral--100);
    position: relative;
}

#category-tree > span {
    color: var(--color-neutral--20);
    display: flex;
    gap: var(--s-12);
    align-items: center;
    transition: all .5s ease;
    position: relative;
    z-index: 2;
}

#category-tree:after {
    content: '';
    background-image: var(--color-gradient--top--blue-black);
    width: 100%;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: opacity .5s ease;
}

#category-tree:hover > span {
    color: var(--color-neutral--40);
}

#category-tree:hover:after {
    opacity: .6;
}

#category-holder {
    max-width: 540px;
    height: 100%;
    max-height: 100vh;
    padding: var(--s-44);
    background: var(--color-neutral--0);
    display: flex;
    flex-direction: column;
    gap: var(--s-44);
    overflow-x: auto;
}

#category-header {
    display: flex;
    align-items: center;
    gap: var(--s-16);
}

#category-header h2 {
    flex: 1;
}

#category-navigation ul, #category-navigation li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#category-navigation .category-holder.category-expand, #category-handler {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
}

#category-navigation li {
    width: 100%;
    padding-left: var(--s-16);
    position: relative;
}

#category-navigation li:before {
    content: "";
    width: 2px;
    height: 45px;
    background: var(--color-neutral--40);
    position: absolute;
    left: 0;
    top: 0;
    transition: background .5s ease;
}

#category-navigation li > .category-holder {
    padding-top: var(--s-4);
    transition: all .75s ease;
}

#category-navigation li > .category-holder.category-collapse {
    height: 0;
    opacity: 0;
}

#category-navigation li > .category-holder.category-expand {
    height: max-content;
    opacity: 1;
}

#category-navigation li > .category-holder.category-collapse li {
    display: none;
}

#category-navigation li > .category-holder.category-expand li {
    display: block;
}

#category-navigation li:has(.category-holder.category-expand):before,#category- {
    background: var(--color-info--80);
}

#category-navigation li > span {
    min-height: 45px;
    display: flex;
    gap: var(--s-16);
    align-items: center;
}

#category-navigation li > span > img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

#category-navigation li > span > a, #category-navigation li > span > span {
    flex: 1;
    color: var(--color-neutral--80);
    transition: color .5s ease;
}

#category-navigation li > span > h3 {
    margin: 0;
    color: inherit;
    font-weight: var(--font-weight--bold);
    display: flex;
    gap: var(--s-12);
    align-items: center;
}

#category-navigation a:hover {
    color: var(--color-info--100);
}

#category-navigation li:has(a:hover):before {
    background: var(--color-info--60);
}

.category-expander {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--color-neutral--40);
    color: var(--color-neutral--60);
    cursor: pointer;
    transition: all .5s ease;
}

.category-expander:hover {
    background: var(--color-info--80);
    color: var(--color-neutral--0);
}

.category-expander > svg {
    transform: rotate(0deg);
    transition: all .5s ease;
}

#category-navigation li:has(> .category-holder.category-expand) > span > .category-expander > svg {
    transform: rotate(45deg);
}

.category-nav-info {
    margin-top: var(--s-32);
    display: flex;
    flex-direction: column;
    gap: var(--s-22);
}

#category-holder .category-nav-info {
    margin-top: var(--s-0);
}

.category-nav-info h3 {
    font-weight: var(--font-weight--regular);
    font-size: var(--font-size--18);
}

#main-menu > .main-sizing > nav a:hover, .dropdown-container:hover > summary > span {
    color: var(--color-neutral--20);
}

#main-menu nav a, #main-menu nav > button > span, #user-actions > a, .dropdown-container > summary > span {
    font-size: var(--font-size--14);
    text-transform: uppercase;
    transition: all .5s ease;
}

#main-menu-category-handler {
    width: max-content;
    text-transform: initial;
    position: relative;
}

#main-menu-category-handler a, #main-menu > .main-sizing > nav > details > a {
    text-transform: initial;
}

#main-menu-category-handler > details > summary {
    padding: var(--s-20);
    background: var(--color-neutral--80);
    transition: all .5s ease;
}

#main-menu-category-handler > details > summary:hover {
    background: var(--color-neutral--100);
    cursor: pointer;
}

#profile-name {
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

#category-tree > nav {
    width: max-content;
    max-height: 75vh;
    background: var(--color-neutral--80);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 998;
    overflow-y: auto;
}

#user-actions {
    display: flex;
    align-items: center;
}

#user-actions > a {
    padding: var(--s-8) var(--s-14);
    margin-right: var(--s-8);
}

#user-actions > a, .main-menu-cta > div > a {
    color: var(--color-neutral--20);
}

#user-actions > a:hover, .main-menu-cta > div > a:hover {
    color: var(--color-neutral--60);
}

.main-menu-cta > div > a {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all .5s ease;
}

.main-menu-cta:hover {
    background: var(--color-neutral--0);
    box-shadow: var(--shadow-soft);
}

.main-menu-cta:hover > div > a {
    color: var(--color-neutral--100);
}

.main-menu-cta a > span {
    width: 18px;
    height: 18px;
    background: var(--color-info--80);
    color: var(--color-neutral--0);
    font-size: var(--font-size--12);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 12px;
    left: 12px;
}

.main-menu-cta .quick-overview {
    width: max-content;
    position: absolute;
    padding: var(--s-20);
    background: var(--color-neutral--0);
    color: var(--color-neutral--80);
    box-shadow: var(--shadow-ultra-soft);
    font-size: var(--font-size--16);
    border-radius: 0 0 var(--border-radius--md) var(--border-radius--md);
    text-transform: initial;
    top: 100%;
    right: 0;
    z-index: 998;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s ease;
}

.main-menu-cta:hover .quick-overview {
    visibility: visible;
    opacity: 1;
}

.main-menu-cta:after {
    content: '';
    width: 100vw;
    height: 100vh;
    background: var(--color-neutral-opacity--0);
    backdrop-filter: blur(0px);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 980;
    pointer-events: none;
    transition: all .5s ease;
}

.main-menu-cta:hover:after {
    background: var(--color-neutral-opacity--10);
    backdrop-filter: blur(1px);
}

.quick-overview-data p:first-of-type {
    font-weight: var(--font-weight--semi-bold);
    font-size: var(--font-size--18);
    margin-bottom: var(--s-16);
    color: var(--color-neutral--80);
}

.cart-overview-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-32);
    flex-wrap: nowrap;
}

.cart-overview-row span:first-of-type {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
    font-size: var(--font-size--14);
    flex: 1;
}

.cart-overview-row span:nth-of-type(2) {
    color: var(--color-neutral--80);
}

.quick-overview-data .cart-overview-item {
    width: 100%;
    padding-bottom: var(--s-10);
    margin-bottom: var(--s-10);
    display: grid;
    grid-template-columns: 48px 5fr 1fr 95px;
    gap: var(--s-12);
    align-items: center;
}

.quick-overview-data .cart-overview-item:not(:last-of-type) {
    border-bottom: 1px solid var(--color-neutral-opacity--5);
}

.quick-overview-data .cart-overview-item p {
    margin: 0;
    font-size: var(--font-size--16);
}

.quick-overview-data .cart-overview-item p:first-of-type {
    max-width: 285px;
    font-size: var(--font-size--14);
}

.quick-overview-data .cart-overview-item p > span:first-of-type,.quick-overview-data .cart-overview-item p:last-of-type {
    color: var(--color-neutral--80);
    font-weight: var(--font-weight--semi-bold);
    text-transform: none;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.quick-overview-data .cart-overview-item p > span:nth-of-type(2),.quick-overview-data .cart-overview-item p:nth-of-type(2) {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
    text-transform: none;
    display: block;
}

.quick-overview-data .cart-overview-item p:last-of-type, .quick-overview-data .cart-overview-item p:nth-of-type(2) {
    text-align: right;
}

.quick-overview-data .button {
    width: 100%;
    margin-top: var(--s-16);
    padding: var(--s-14) var(--s-20);
    color: var(--color-neutral--0);
    text-align: center;
    background: var(--color-neutral--100);
    border-radius: var(--border-radius--md);
    display: block;
}

.quick-overview-data .button:hover {
    background: var(--color-neutral--60);
    color: var(--color-neutral--0);
}

.quick-overview-empty {
    display: grid;
    grid-template-columns: 40px auto;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    font-weight: var(--font-weight--light);
    gap: 0 var(--s-16);
    align-items: center;
}

.quick-overview-empty .svg-wrapper {
    width: 40px;
    height: 40px;
    background: var(--color-neutral--100);
    border-radius: var(--s-22);
    color: var(--color-neutral--0);
    margin: var(--s-8) auto;
    grid-row: 1/3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-overview-empty p:first-of-type {
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--semi-bold);
}

.quick-overview-empty p:nth-of-type(2) {
    color: var(--color-neutral--60);
}

.quick-overview-data #overview-cart {
    color: var(--color-info--100);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--medium);
    text-align: right;
    display: block;
    margin-bottom: var(--s-10);
    text-transform: none;
}

.dropdown-container {
    padding: var(--s-8) var(--s-14);
    position: relative;
    cursor: pointer;
}

.dropdown-container summary {
    list-style: none;
}

.dropdown-container summary::-webkit-details-marker, .dropdown-container summary::marker {
    display: none;
}

.dropdown-content {
    width: max-content;
    min-width: 100%;
    padding: var(--s-20);
    background: var(--color-neutral--100);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 997;
}

#sign-as-customer {
    width: 100%;
    margin: var(--s-32) 0;
    display: flex;
    align-items: stretch;
    gap: var(--s-12);
}

#sign-as-customer > .container {
    flex: 1;
    padding: var(--s-32);
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-neutral--40);
    display: flex;
    flex-direction: column;
    gap: var(--s-32);
}

#sign-as-customer > .container > p:first-of-type {
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--semi-bold);
}

#sign-as-customer form input[type="text"] {
    width: 100%;
    margin-top: var(--s-4);
    padding: var(--s-14) var(--s-20);
    background: var(--color-neutral--20);
    border-radius: var(--border-radius--xs);
    border: none;
    position: relative;
}

#sign-as-customer form input:not([type="text"]), #sign-as-customer form a {
    width: max-content;
    margin-top: var(--s-24);
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
}

#sign-as-customer form input[type="submit"] {
    background: var(--color-info--100);
    color: var(--color-neutral--0);
    font-weight: var(--font-weight--medium);
    transition: all .5s ease;
}

#sign-as-customer form input[type="submit"]:hover {
    background: var(--color-info--80);
}

#sign-as-customer form a {
    margin-left: var(--s-16);
    border: 1px solid var(--color-danger--100);
    color: var(--color-danger--100);
    font-weight: var(--font-weight--light);
}

.salesman-cta {
    width: 100%;
    padding-bottom: var(--s-14);
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--extra-light);
    border-bottom: 1px solid var(--color-neutral--40);
    display: grid;
    grid-template-columns: 1fr 32px;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: var(--s-16);
    align-items: center;
}

.salesman-cta span:first-of-type {
    color: var(--color-neutral--80);
    font-weight: var(--font-weight--medium);
    transition: color .5s ease;
}

.salesman-cta svg {
    grid-row: 1/3;
}

.salesman-cta:last-of-type {
    border-bottom: 1px solid transparent;
}

.salesman-cta:hover {
    color: var(--color-neutral--50);
    border-bottom: 1px solid var(--color-neutral--60);
}

.salesman-cta:hover span:first-of-type {
    color: var(--color-neutral--50);
}

.basic-content {
    padding: var(--s-20) 0;
}

.basic-content h2 {
    margin-bottom: var(--s-16);
}

.basic-content h2:nth-of-type(n+2) {
    margin-top: var(--s-24);
}

.basic-content h3, .basic-content h4, .basic-content h5 {
    margin: var(--s-16) 0;
}

.basic-content p, .basic-content li {
    color: var(--color-neutral-opacity--60);
    margin-bottom: var(--s-12);
}

.basic-content ul, .basic-content ol {
    margin: var(--s-12) 0;
    padding: 0 0 0 var(--s-18);
    list-style-position: outside;
}

.basic-delivery-row {
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
    box-shadow: var(--shadow-info-soft-xs);
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr auto;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--s-12);
}

.basic-delivery-row p {
    margin: 0;
}

.basic-delivery-row p:first-of-type {
    color: var(--color-info--80);
}

.basic-delivery-row p:last-of-type {
    grid-row: 1/3;
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--100);
    font-size: var(--font-size--14);
}

#product-carousel-container .image-carousel, .modal-content .image-carousel {
    width: 100%;
    margin: var(--s-16) 0;
    display: flex;
    align-items: center;
    gap: var(--s-8);
    flex-wrap: nowrap;
    overflow-x: scroll;
}

#product-carousel-container .image-carousel > picture {
    width: 150px;
    flex: 0 0 auto;
    cursor: pointer;
}

.modal-content:has(.image-carousel) {
    height: clamp(20%, 75%, 90%);
}

.modal-content .v-scroll-container {
    width: 100%;
    height: 100%;
    display: block;
}

.modal-content .image-carousel {
    margin: 0;
    height: calc(100% - var(--s-32));
}

.modal-content .image-carousel > picture {
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}

.modal-content .image-carousel > picture > img {
    height: 100%;
    object-fit: contain;
}

.image-carousel.home-carousel {
    margin: var(--s-24) 0;
    height: 500px;
}

.image-carousel img {
    border-radius: var(--border-radius--md);
}

.home-carousel .image-carousel-page {
    display: flex;
    align-items: center;
    grid-template-columns: 40% 60%;
}

.home-carousel .image-carousel-content {
    padding-right: var(--s-66);
    background: var(--color-neutral--0);
    border-radius: var(--border-radius--md) 0 0 var(--border-radius--md);
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: center;
    gap: var(--s-32);
    flex-grow: 1;
}

.home-carousel .image-carousel-content > p > span {
    text-transform: uppercase;
    display: block;
}

.home-carousel .image-carousel-content > p > span:first-of-type {
    font-size: var(--font-size--50);
    font-weight: var(--font-weight--bold);
}

.home-carousel .image-carousel-content > p > span:last-of-type {
    font-size: var(--font-size--26);
    font-weight: var(--font-weight--medium);
}

.home-carousel .image-carousel-content > p:not(:first-of-type) {
    color: var(--color-neutral--60);
    font-size: var(--font-size--20);
}

.home-carousel .image-carousel-btns {
    display: flex;
    gap: var(--s-24);
    align-items: center;
}

.home-carousel .image-carousel-btns a {
    padding: var(--s-14) var(--s-20);
    text-align: center;
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--light);
    border-radius: var(--border-radius--md);
}

.home-carousel .image-carousel-btns a:first-of-type {
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
}

.home-carousel .image-carousel-btns a:first-of-type:hover {
    background: var(--color-neutral--60);
}

.home-carousel .image-carousel-btns a:last-of-type:not(:first-of-type) {
    color: var(--color-neutral--100);
    border: 1px solid var(--color-neutral--100);
}

.home-carousel .image-carousel-btns a:last-of-type:not(:first-of-type):hover {
    color: var(--color-neutral--60);
    border: 1px solid var(--color-neutral--60);
    background: var(--color-neutral--20);
}

#home-tiles {
    margin: var(--s-12) 0;
    display: flex;
    gap: var(--s-12);
    align-items: stretch;
}

.home-tile {
    min-height: 250px;
    padding: var(--s-30) var(--s-24);
    border-radius: var(--border-radius--md);
    position: relative;
    z-index: 2;
    overflow: hidden;
    transition: box-shadow .5s ease;
    flex: 1;
}

.home-tile:hover {
    box-shadow: 0 7px 30px var(--color-shadow--product);
}

.home-tile::before {
    content: "";
    width: 100%;
    height: 50%;
    background-image: var(--color-gradient--top-none-black);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.home-tile::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: var(--color-gradient--top--blue-none);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.home-tile > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.home-tile-content {
    height: 100%;
    color: var(--color-neutral--0);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

.home-tile-content p {
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--medium);
    text-transform: uppercase;
}

.home-tile-content a {
    width: max-content;
    padding: var(--s-8) var(--s-16);
    border-radius: var(--border-radius--md);
    color: var(--color-neutral--0);
    font-weight: var(--font-weight--light);
    border: 1px solid var(--color-neutral--0);
}

.content-row {
    padding: var(--s-44) 0;
}

.content-row-title {
    margin-bottom: var(--s-24);
    color: var(--color-neutral--60);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    align-items: end;
}

.content-row-title h2 {
    font-weight: var(--font-weight--medium);
}

.content-row-title > a {
    color: var(--color-neutral--100);
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
    grid-row: 1/3;
    display: flex;
    gap: var(--s-12);
    align-items: center;
}

.content-row-title > a:hover {
    text-decoration: underline;
}

.category-container {
    padding: var(--s-20);
    border: 1px solid var(--color-neutral--50);
    align-items: center;
}

.category-container h3 {
    width: 100%;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
    text-align: center;
}

.category-container > p {
    font-size: var(--font-size--14);
}

.category-container > p:first-of-type {
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
}

.category-container > p:last-of-type {
    width: max-content;
    margin: var(--s-8) auto;
    padding: var(--s-8) var(--s-12);
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-neutral--80);
    color: var(--color-neutral--80);
    font-size: var(--font-size--14);
    text-align: center;
}

#injection-banner {
    background-image: url('/images/main/injection-background.jpg');
}

#news-form-banner {
    background-image: url('/images/main/news-form-background.jpg');
}

#injection-banner,#news-form-banner {
    color: var(--color-neutral--0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
}

#injection-banner::after,#news-form-banner::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(3px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#injection-banner > .main-sizing {
    padding: var(--s-60) 0;
    display: grid;
    grid-template-columns: 40% calc(60% - var(--s-44));
    grid-column-gap: var(--s-44);
    align-items: stretch;
    z-index: 2;
}

#news-form-banner > .main-sizing {
    padding: var(--s-80) 0;
    z-index: 2;
}

#news-form-container {
    width: max-content;
    margin: auto;
    padding: var(--s-32) var(--s-52);
    border-radius: var(--border-radius--md);
    color: var(--color-neutral--60);
    background: var(--color-neutral--0);
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    gap: var(--s-24);
}

#news-form-container h2 {
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--80);
}

#injection-content {
    height: 100%;
    padding: var(--s-24) 0;
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#injection-content h2 {
    color: var(--color-neutral--0);
    font-size: var(--font-size--32);
    font-weight: var(--font-weight--medium);
}

#injection-content p:last-of-type {
    display: flex;
    gap: var(--s-24);
}

#injection-content a {
    padding: var(--s-14) var(--s-20);
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--light);
    border-radius: var(--border-radius--md);
    text-align: center;
}

#injection-content a:first-of-type {
    background: var(--color-neutral--0);
    color: var(--color-neutral--100);
}

#injection-content a:last-of-type {
    color: var(--color-neutral--0);
    border: 1px solid var(--color-neutral--0);
}

.layout-hero {
    padding: var(--s-60) 0;
    position: relative;
}

.layout-hero-container {
    text-align: center;
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    display: flex;
    flex-direction: column;
    gap: var(--s-24);
    position: relative;
    z-index: 2;
}

.layout-hero::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,var(--color-neutral--0) 0%,transparent 25%, transparent 75%,var(--color-neutral--0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.layout-hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.layout-hero h1 {
    font-weight: var(--font-weight--semi-bold);
}

.layout-hero p {
    max-width: 55%;
    margin: auto;
}

.post-thumbnail {
    padding-bottom: var(--s-16);
    border-bottom: 1px solid transparent;
}

.post-thumbnail-img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--border-radius--md);
    margin-bottom: var(--s-16);
    position: relative;
    overflow: hidden;
}

.post-thumbnail-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease;
}

.post-thumbnail > p:first-of-type {
    color: var(--color-neutral--100);
    position: relative;
}

.post-thumbnail > p:not(:first-of-type) {
    margin-top: var(--s-2);
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
}

.post-thumbnail:hover {
    border-bottom: 1px solid var(--color-info--80);
}

.post-thumbnail:hover .post-thumbnail-img > img {
    transform: scale(1.075);
}

.aside-layout {
    display: flex;
    align-items: start;
    gap: var(--s-44);
    justify-content: center;
}

.aside-layout > aside {
    padding: var(--s-24) 0;
    order: 1;
    flex: 0 0 22.5%;
}

.aside-layout.maxed > aside {
    flex: 0 0 375px;
}

.aside-layout > main {
    order: 2;
    flex: 1;
    max-width: 75%;
}

.side-banners {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--s-24);
}

.side-banner {
    width: 100%;
    padding: var(--s-32) var(--s-28);
    color: var(--color-neutral--0);
    border-radius: var(--border-radius--md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.side-banner:after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: var(--color-gradient--top--blue-50);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

.side-banner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

.side-banner-content {
    text-transform: uppercase;
}

.side-banner > a, .side-banner-content {
    position: relative;
    z-index: 3;
}

.side-banner > a {
    width: max-content;
    padding: var(--s-14) var(--s-20);
    border: 1px solid var(--color-neutral--0);
    border-radius: var(--border-radius--xs);
    color: var(--color-neutral--0);
    font-weight: var(--font-weight--light);
}

.side-banner > a:hover {
    background: var(--color-neutral-opacity-in--20);
}

.side-banner-content h2 {
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--thin);
    color: var(--color-neutral--0);
}

.side-banner-content p {
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--medium);
}

#filter-attributes {
    margin: var(--s-12) 0;
    display: flex;
    flex-direction: column;
}

#filter-attributes > a {
    width: max-content;
    margin-top: var(--s-12);
    padding: var(--s-8) var(--s-10);
    font-size: var(--font-size--14);
    color: var(--color-neutral--0);
    background: var(--color-info--80);
    border-radius: var(--border-radius--md);
    display: block;
    transition: background .5s ease;
}

#filter-attributes > a:hover {
    background: var(--color-info--100);
}

.checkbox-container,.radio-container,.toggle-container {
    margin: var(--s-8) 0;
    display: flex;
    align-items: center;
    gap: var(--s-12);
    cursor: pointer;
}

.toggle-container {
    margin: var(--s-12) 0;
}

.checkbox-container input,.radio-container input,.toggle-container input {
    display: none;
}

.checkbox-container .checkmark,.radio-container .checkmark {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-neutral--60);
    position: relative;
    transition: all .5s ease;
    flex-shrink: 0;
}

.checkbox-container .checkmark {
    border-radius: var(--border-radius--sm);
}

.radio-container .checkmark {
    border-radius: 10px;
}

.toggle-container .checkmark {
    width: 48px;
    height: 24px;
    border-radius: 12px;
    position: relative;
    background: var(--color-neutral--40);
    transition: background .5s ease;
}

.checkbox-container:hover .checkmark {
    background: var(--color-neutral--40);
    border: 1px solid var(--color-neutral--50);
}

.radio-container:hover .checkmark {
    border: 1px solid var(--color-neutral--50);
}

.toggle-container:hover .checkmark {
    background: var(--color-neutral--50);
}

.checkbox-container .checkmark::after,.radio-container .checkmark::after {
    content: "";
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    position: absolute;
}

.checkbox-container .checkmark::after {
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--color-neutral--0);
    border-bottom: 2px solid var(--color-neutral--0);
    top: 8px;
}

.radio-container .checkmark::after {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: var(--color-neutral--0);
    top: 50%;
}

.toggle-container .checkmark::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--color-neutral--0);
    position: absolute;
    top: 50%;
    right: 27px;
    transform: translateY(-50%);
    transition: right .5s ease;
}

.checkbox-container:has(input:checked) .checkmark {
    border: 1px solid var(--color-info--80);
    background: var(--color-info--80);
}

.radio-container:has(input:checked) .checkmark {
    border: 2px solid var(--color-info--80);
}

.toggle-container:has(input:checked) .checkmark {
    background: var(--color-info--80);
}

.radio-container:has(input:checked) .checkmark::after {
    background: var(--color-info--80);
}

.toggle-container:has(input:checked) .checkmark::after {
    right: 3px;
}

.checkbox-container:has(input[disabled]),.radio-container:has(input[disabled]),.toggle-container:has(input[disabled]) {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none;
}

#price-filter {
    width: 100%;
    margin: var(--s-12) 0 var(--s-24) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: var(--s-6);
    grid-row-gap: var(--s-6);
    grid-auto-flow: column;
}

#price-filter label {
    width: max-content;
    color: var(--color-neutral--60);
    font-size: var(--font-size--14);
}

#price-filter input {
    width: 100%;
    padding: var(--s-6) var(--s-24) var(--s-6) var(--s-8);
    border-radius: var(--border-radius--sm);
    font-size: var(--font-size--14);
    color: var(--color--neutral--80);
}

.price-filter-container {
    position: relative;
}

.price-filter-container span {
    font-size: var(--font-size--12);
    color: var(--color-neutral--40);
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

#manufacturer-filter {
    margin: var(--s-12) 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
}

#manufacturer-filter label > input {
    display: none;
}

#manufacturer-filter label {
    border-radius: var(--border-radius--sm);
    padding: var(--s-4) var(--s-10);
    font-weight: var(--font-weight--light);
    color: var(--color-info-opacity--60);
    background: var(--color-neutral--0);
    border: 1px solid var(--color-info-opacity--60);
    box-shadow: var(--shadow-none-xs);
    transition: all .5s ease;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#manufacturer-filter label:hover {
    cursor: pointer;
    background: var(--color-info-opacity--10);
    box-shadow: var(--shadow-info-soft-xs);
}

#manufacturer-filter label:has(input:checked) {
    background: var(--color-info--80);
    color: var(--color-neutral--0);
    border: 1px solid var(--color-info--80);
}

#manufacturer-filter label:has(input:checked):hover {
    background: var(--color-info--100);
    border: 1px solid var(--color-info--100);
}

.breadcrumbs {
    margin: var(--s-24) 0;
    display: flex;
    align-items: center;
    gap: var(--s-12);
}

.breadcrumbs > a {
    color: var(--color-neutral--80);
    font-weight: var(--font-weight--regular);
    font-size: var(--font-size--14);
    display: flex;
    align-items: center;
    justify-content: center;
}

#child-categories-container {
    margin: var(--s-24) 0;
}

#child-categories-container > p {
    font-weight: var(--font-weight--semi-bold);
    font-size: var(--font-size--18);
    margin-bottom: var(--s-16);
}

#child-categories {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: var(--s-8);
    flex-wrap: nowrap;
    overflow-x: scroll;
}

#child-categories > a {
    width: clamp(25%,250px,50%);
    padding: var(--s-14);
    font-weight: var(--font-weight--light);
    background: var(--color-neutral--20);
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 45px 1fr;
    grid-column-gap: var(--s-16);
    align-items: center;
    transition: all .75s ease;
    flex: 0 0 auto;
}

#child-categories > a:hover {
    box-shadow: 0 0 20px var(--color-shadow--product);
}

#child-categories > a > picture {
    width: 45px;
    height: 45px;
    grid-row: 1/3;
    position: relative;
}

#child-categories > a > picture img {
    width: 45px;
    height: 45px;
    object-fit: cover;
}

#child-categories > a > picture::after {
    content: "";
    width: 45px;
    height: 45px;
    background: var(--color-neutral--20);
    mix-blend-mode: darken;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 2;
}

#child-categories > a > span {
    color: var(--color-neutral--60);
    font-size: var(--font-size--14);
}

#child-categories > a > span:first-of-type {
    color: var(--color-neutral--80);
    font-weight: var(--font-weight--medium);
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

.product-layout-controls {
    margin: var(--s-16) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

#sort {
    display: flex;
    align-items: center;
    gap: var(--s-8);
}

#sort select {
    width: max-content;
    padding: 0 var(--s-8);
    border: none;
    background: none;
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

#sort svg {
    margin-left: -12px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

#paging {
    margin: var(--s-24) 0;
    display: flex;
    align-items: center;
    gap: var(--s-8);
}

#paging a {
    padding: var(--s-4) var(--s-10);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

#paging a:first-of-type,#paging a:last-of-type {
    color: var(--color-neutral--80);
}

a#active-page {
    border: 1px solid var(--color-neutral--80);
    border-radius: var(--border-radius--sm);
    color: var(--color-neutral--80);
}

.product-list-layout {
    padding: var(--s-16) 0;
}

.product-layout-grid {
    display: flex;
    align-items: stretch;
    gap: var(--s-12);
    flex-wrap: wrap;
}

.product-container,.category-container {
    border-radius: var(--border-radius--md);
    flex: 0 0 calc(25% - var(--s-12));
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    position: relative;
    overflow: hidden;
}

.product-layout-grid.triple .product-container {
    flex: 0 0 calc(33.33% - var(--s-12));
}

.product-container:hover,.category-container:hover {
    box-shadow: 0 0 30px var(--color-shadow--product);
}

.product-container-holder {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.product-container-holder .product-container-ctas {
    width: 100%;
    padding: 0 var(--s-8);
    display: flex;
    gap: var(--s-4);
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    bottom: -50px;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    transition: bottom .5s ease;
}

.product-container:hover .product-container-ctas {
    bottom: 10px;
}

.product-container-ctas button, .product-container-ctas input[type="button"] {
    padding: var(--s-4) var(--s-8);
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
    border-radius: var(--border-radius--md);
    font-size: var(--font-size--14);
    display: flex;
    align-items: center;
    gap: var(--s-8);
    transition: background .5s ease;
}

.product-container-ctas button:hover, .product-container-ctas input[type="button"]:hover {
    background: var(--color-neutral--80);
}

.product-image, .product-image > picture {
    width: 100%;
    aspect-ratio: 4/3;
    position: relative;
    z-index: 1;
}

.product-image {
    background: var(--color-neutral--20);
    border-radius: var(--border-radius--md);
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-image::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-neutral--20);
    mix-blend-mode: darken;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 2;
}

.product-container-flags {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--s-8);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.product-container-discount {
    padding: var(--s-2) var(--s-8);
    font-size: var(--font-size--14);
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
    border-radius: 0 0 var(--border-radius--sm) 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.tag-info, .tag-success, .tag-warning, .tag-neutral {
    width: max-content;
    margin: 0;
    padding: var(--s-2) var(--s-8);
    font-size: var(--font-size--14);
    text-align: right;
    color: var(--color-neutral--0);
    border-radius: 0 0 0 var(--border-radius--sm);
    display: block;
}

.product-container-flags *[class^='tag-']:nth-of-type(n+2) {
    border-radius: var(--border-radius--sm) 0 0 var(--border-radius--sm);
}

.label {
    width: fit-content;
    padding: var(--s-2) var(--s-8);
    font-size: var(--font-size--14);
    text-align: center;
    border-radius: var(--border-radius--lg);
    display: block;
}

.tag-info {
    background: var(--color-info--100);
}

.tag-success {
    background: var(--color-success--100);
}

.tag-warning {
    background: var(--color-warning--60);
}

.tag-neutral {
    background: var(--color-neutral--60);
}

.tag-danger {
    background: var(--color-danger--100);
}

.label-info {
    background: var(--color-info-opacity--5);
    border: 1px solid var(--color-info-opacity--20);
    color: var(--color-info-opacity--60);
}

.label-success {
    background: var(--color-success-opacity--5);
    border: 1px solid var(--color-success-opacity--20);
    color: var(--color-success-opacity--60);
}

.label-warning {
    background: var(--color-warning-opacity--5);
    border: 1px solid var(--color-warning-opacity--20);
    color: var(--color-warning-opacity--60);
}

.label-neutral {
    background: var(--color-neutral-opacity--5);
    border: 1px solid var(--color-neutral-opacity--20);
    color: var(--color-neutral-opacity--60);
}

.label-danger {
    background: var(--color-danger-opacity--5);
    border: 1px solid var(--color-danger-opacity--20);
    color: var(--color-danger-opacity--60);
}

.msg-row {
    width: 100%;
    padding: var(--s-8) var(--s-12);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    border-radius: var(--border-radius--md);
    display: block;
}

.msg-row.warning {
    background: var(--color-warning-opacity--5);
    border: 1px solid var(--color-warning-opacity--20);
    color: var(--color-warning-opacity--60);
}

.msg-row.info {
    background: var(--color-info-opacity--5);
    border: 1px solid var(--color-info-opacity--20);
    color: var(--color-info-opacity--80);
}

.msg-row.neutral {
    background: var(--color-neutral--10);
    border: 1px solid var(--color-neutral-opacity--10);
    color: var(--color-neutral-opacity--80);
}

.button-danger, .btn.danger-60 {
    width: max-content;
    padding: var(--s-14) var(--s-20);
    background: var(--color-danger--60);
    color: var(--color-neutral--0);
    border-radius: var(--border-radius--md);
    display: block;
}

.button-danger:hover, .btn.danger-60:hover {
    cursor: pointer;
    background: var(--color-danger--100);
    color: var(--color-neutral--0);
}

.product-container-info {
    padding: var(--s-14) var(--s-20);
    color: var(--color-neutral--60);
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.product-container-info > p:first-of-type {
    text-align: center;
    color: var(--color-neutral--100);
    font-weight: var(--font-weight--medium);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-container-info > p:last-of-type,.stock-row .stock-success,.stock-row .stock-warning,.stock-row .stock-neutral {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
}

.product-copy-container {
    width: max-content;
    padding: var(--s-4) var(--s-16);
    position: relative;
    align-self: center;
}

.product-copy-container .product-copy {
    background: none;
    color: var(--color-info--60);
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.product-copy-container:hover .product-copy {
    opacity: 1;
    visibility: visible;
}

.product-copy:hover {
    color: var(--color-info--80);
}

.product-container-rating {
    width: max-content;
    padding: 0;
    font-size: var(--font-size--14);
    margin: var(--s-12) auto;
    background: none;
    display: grid;
    grid-template-columns: repeat(6,20px);
    align-items: center;
    grid-column-gap: var(--s-4);
    cursor: pointer;
}

#product-main-info .product-container-rating {
    padding: var(--s-8);
    margin: var(--s-8) 0 var(--s-8) var(--sn-8);
    border-radius: var(--border-radius--sm);
    border: 1px solid transparent;
    grid-template-columns: auto repeat(6,20px) auto;
    grid-row-gap: var(--s-4);
}

#product-main-info .product-container-rating:hover {
    border: 1px solid var(--color-neutral-opacity--5);
    box-shadow: var(--shadow-variant);
}

#product-main-info .product-container-rating > p:first-of-type {
    margin-right: var(--s-8);
    color: var(--color-neutral--80);
}

#product-main-info .product-container-rating > p:last-of-type {
    grid-column: 1/8;
    text-align: left;
    color: var(--color-neutral--60);
}

#rating-form {
    margin-top: var(--s-12);
}

#main-rating-stars {
    width: 100%;
    padding: var(--s-12) 0;
    display: flex;
    margin: var(--s-12) auto;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.main-rating-star {
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.main-rating-star .empty-star * {
    fill: var(--color-info-opacity--20);
    transition: fill .5s ease;
}

.main-rating-star input {
    width: 0;
    height: 0;
    display: none;
}

.main-rating-star span {
    margin-top: var(--s-4);
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--medium);
    transition: color .5s ease;
}

.main-rating-star input:checked + .empty-star *, .main-rating-star:has(input:checked) ~ label .empty-star * {
    fill: var(--color-info-opacity--80);
}

.main-rating-star:has(input:checked) span, .main-rating-star:has(input:checked) ~ label span {
    color: var(--color-info-opacity--80);
}

.main-rating-star input:not(:checked) + span:hover {
    opacity: 0.8;
}

.main-rating-star:hover .empty-star *, .main-rating-star:hover ~ label .empty-star * {
    fill: var(--color-info-opacity--50);
}

#product-main-info .product-container-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    position: static;
    align-items: start;
}

#product-main-info .product-container-flags a, #product-main-info *[class^='tag-'] {
    width: max-content;
    border-radius: var(--border-radius--sm);
}

#product-main-info .product-container-flags a:hover {
    color: var(--color-neutral--0);
}

.full-star * {
    fill: var(--color-warning--40);
}

.empty-star * {
    fill: var(--color-neutral-opacity--10);
}

.stock-neutral, .stock-warning, .stock-success {
    margin-bottom: var(--s-12);
    font-weight: var(--font-weight--medium);
    font-size: var(--font-size--20);
}

.stock-neutral {
    color: var(--color-danger--40);
}

.stock-warning {
    color: var(--color-warning--60);
}

.stock-success {
    color: var(--color-success--80);
}

.product-container-prices p:first-of-type {
    font-weight: var(--font-weight--bold);
    font-size: var(--font-size--16);
    color: var(--color-neutral--100);
}

.product-container-prices p:last-of-type {
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.load-more {
    width: max-content;
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    padding: var(--s-6) var(--s-12);
    border-radius: var(--border-radius--md);
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
    transition: background .5s ease;
}

.load-more:hover {
    cursor: pointer;
    background: var(--color-neutral--60);
}

.product-detail-layout {
    display: grid;
    grid-column-gap: var(--s-44);
}

#product-detail > .product-detail-layout:nth-of-type(even) {
    margin: var(--s-44) 0;
    grid-template-columns: 57.5% calc(42.5% - var(--s-44));
}

#product-detail > .product-detail-layout:nth-of-type(odd) {
    grid-template-columns: calc(52.5% - var(--s-44)) 47.5%;
}

#product-main-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

.product-info-limiter {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
}

.product-info-container {
    padding: var(--s-20);
    background: var(--color-neutral--20);
    border-radius: var(--border-radius--md);
}

#product-main-info h1 {
    font-size: var(--font-size--32);
    font-weight: var(--font-weight--semi-bold);
}

#product-addins {
    margin: var(--s-8) 0;
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    display: grid;
    grid-template-columns: repeat(3,auto);
    align-items: center;
    grid-column-gap: var(--s-16);
}

#product-addins > p {
    color: var(--color-neutral--60);
    display: flex;
    gap: var(--s-8);
}

#product-addins > p > span:nth-of-type(2), #product-addins > p > a {
    color: var(--color-neutral--80);
    font-weight: var(--font-weight--medium);
}

#product-addins > p > a {
    text-decoration: underline;
}

#product-addins > p > a:hover {
    text-decoration: none;
}

#product-short-description {
    margin: var(--s-8) 0;
}

#product-short-description > p {
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
}

#product-short-description > p:first-of-type {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--80);
}

#product-short-description-link {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--80);
    text-decoration: underline;
    display: block;
}

#product-short-description-link:hover {
    text-decoration: none;
}

.product-content-control {
    margin-bottom: var(--s-32);
    color: var(--color-neutral-opacity--70);
    font-weight: var(--font-weight--light);
}

.product-content-control b,.product-content-control strong {
    font-weight: var(--font-weight--semi-bold);
}

.product-content-control h2 {
    margin-bottom: var(--s-16);
}

.product-content-control h3 {
    margin: var(--s-32) 0 var(--s-14) 0;
}

.product-content-control > ul, .product-content-control > ul > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.product-content-control > ul {
    margin: var(--s-16) 0;
}

.product-content-control > ul > li, .product-content-control p {
    margin-bottom: var(--s-8);
}

.product-content-control > ul > li:first-letter {
    text-transform: uppercase;
}

.short-desc {
    margin: var(--s-6) 0;
    color: var(--color-neutral--60);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.short-desc * {
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
}

#product-control-container {
    padding: var(--s-20);
    border-radius: var(--border-radius--lg);
    border: 1px solid var(--color-neutral-opacity--5);
    box-shadow: var(--shadow-variant);
}

.product-param-container {
    border-radius: var(--border-radius--lg);
    padding: var(--s-20);
    border: 1px solid var(--color-neutral-opacity--5);
    box-shadow: var(--shadow-variant);
    align-self: start;
    display: flex;
    flex-flow: column;
    gap: var(--s-12);
}

.product-param-container h3, .product-param-container h4 {
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--semi-bold);
}

.product-param-container h4 {
    margin-top: var(--s-10);
}

.product-document-row {
    padding: var(--s-12);
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-neutral-opacity--10);
    box-shadow: var(--shadow-variant);
    color: var(--color-neutral-opacity--70);
    font-size: var(--font-size--14);
    display: grid;
    grid-template-columns: 20px 1fr auto 20px;
    gap: var(--s-12);
    align-items: center;
}

.product-price-row {
    margin-bottom: var(--s-4);
}

.product-price-row,#product-controls {
    display: flex;
    align-items: center;
    gap: var(--s-16);
    justify-content: space-between;
}

.product-price-row > span:first-of-type,#product-controls > p > span:first-of-type, .cart-summary-attribute > span:first-of-type, #watchdog-summary > p {
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
    display: block;
}

.product-price-row > span:last-of-type, .cart-summary-attribute > span:last-of-type {
    color: var(--color-neutral--80);
    font-weight: var(--font-weight--medium);
}

#product-control-container .product-price-row {
    margin: 0;
}

#product-control-container .product-price-row:not(:last-of-type) > span:last-of-type {
    font-size: var(--font-size--20);
}

.product-price-row > span:last-of-type i {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral-opacity--30);
}

.mid-product-price-row > span:last-of-type {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.product-discount, .product-discount > span:first-of-type, .product-discount > span:last-of-type {
    margin: var(--s-4) 0;
    color: var(--color-success--80);
    font-size: var(--font-size--16);
}

#product-controls {
    margin-top: var(--s-16);
}

#product-controls *[class^='stock-'] {
    margin: 0;
    font-size: var(--font-size--16);
    display: block;
}

#product-cart-controls {
    display: flex;
    gap: var(--s-8);
    align-items: stretch;
}

#product-cart-controls > input {
    max-width: 85px;
    padding: 0 var(--s-14) 0 var(--s-24);
    border-radius: var(--border-radius--md);
}

#product-cart-controls > button, #product-cart-controls > a {
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
    display: flex;
    gap: var(--s-12);
    align-items: center;
}

#product-cart-controls > button:hover, #product-cart-controls > a:hover {
    background: var(--color-info--100);
}

#product-watchdog-container {
    width: 100%;
    margin: var(--s-8) 0;
    padding: var(--s-14) var(--s-20);
    background: var(--color-neutral--0);
    border-top: 1px solid var(--color-neutral-opacity--5);
    color: var(--color-neutral-opacity--50);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--regular);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: var(--s-4) var(--s-16);
    align-items: center;
}

#product-watchdog-container p:first-of-type {
    font-weight: var(--font-weight--medium);
    font-size: var(--font-size--16);
    color: var(--color-neutral--100);
}

#product-watchdog-container button {
    grid-row: 1/3;
    padding: var(--s-8) var(--s-14);
    border-radius: var(--border-radius--md);
    background: var(--color-neutral--0);
    border: 1px solid var(--color-neutral--100);
    color: var(--color-neutral--100);
    display: flex;
    align-items: center;
    gap: var(--s-12);
}

#product-watchdog-container button:hover {
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
}

#product-ctas {
    width: 100%;
    padding: 0 var(--s-20);
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--s-16);
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.product-toggle {
    width: max-content;
    margin-bottom: var(--s-44);
    border-radius: var(--border-radius--md);
    display: flex;
    align-items: center;
    gap: var(--s-12);
}

.product-toggle label {
    padding: var(--s-14) var(--s-14);
    color: var(--color-neutral-opacity--60);
    border-bottom: 1px solid transparent;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease;
}

.product-toggle input {
    display: none;
}

.product-toggle label:hover {
    cursor: pointer;
    border-bottom: 1px solid var(--color-neutral--60);
}

.product-toggle label:has(input:checked) {
    color: var(--color-info--80);
    border-bottom: 1px solid var(--color-info--80);
}

#vypis-variant {
    max-height: 400px;
    margin-bottom: var(--s-24);
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

#vypis-variant h3 {
    padding: var(--s-8) 0;
    background: var(--color-neutral--0);
    font-weight: var(--font-weight--medium);
    font-size: var(--font-size--18);
    position: sticky;
    top: 0;
}

.variant-wrapper {
    padding: var(--s-16) var(--s-16) var(--s-16) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

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

.variant-row {
    padding: var(--s-12) var(--s-16);
    border: 1px solid var(--color-neutral-opacity--10);
    border-radius: var(--border-radius--md);
    display: grid;
    grid-template-columns: 1fr 2.5fr auto 75px 32px 32px;
    gap: var(--s-16);
    align-items: center;
}

.variant-row > p:first-of-type {
    font-weight: var(--font-weight--bold);
}

.variant-row > p:nth-of-type(2) {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.variant-row > p:nth-of-type(2) *[class^='stock-'] {
    margin-left: var(--s-8);
    font-size: inherit;
}

.variant-row button, .variant-row a {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius--md);
    background: var(--color-neutral--40);
    color: var(--color-neutral--80);
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-row a:hover {
    color: var(--color-neutral--0);
    background: var(--color-info--80);
}

.variant-row .add-to-cart {
    background: var(--color-info--100);
    color: var(--color-neutral--0);
}

.variant-row .add-to-cart:hover {
    background: var(--color-info--80);
}

.modal-content .variant-row *[class^='tag-'] {
    margin-right: var(--s-8);
    border-radius: var(--border-radius--sm);
    display: inline-block;
}

.modal-content .variant-row input:not([type="submit"], [type="button"], [type="checkbox"]) {
    height: 32px;
}

#product-ctas button,#product-ctas > .empty, #product-share-buttons > div > * {
    padding: var(--s-4);
    background: none;
    color: var(--color-neutral--80);
    font-size: var(--font-size--14);
    display: flex;
    gap: var(--s-12);
    align-items: center;
}

#product-ctas button:hover, #product-share-buttons > div > *:hover {
    cursor: pointer;
    text-decoration: underline;
}

#product-share-buttons > div {
    width: auto;
    padding: var(--s-4) var(--s-8);
    background: var(--color-neutral--0);
    border: 1px solid var(--color-neutral--50);
    border-radius: var(--border-radius--sm);
    position: absolute;
    top: 110%;
    right: 0;
    display: flex;
    gap: var(--s-16);
}

#feedback-container {
    padding: var(--s-22) 0 var(--s-44) 0;
    border-top: 1px solid var(--color-neutral-opacity--5);
}

#feedback-container > .v-scroll-container > p {
    color: var(--color-neutral-opacity--70);
    font-weight: var(--font-weight--light);
}

#feedback-container > .v-scroll-container > button {
    padding: var(--s-8) var(--s-12);
    margin: var(--s-16) auto var(--s-16) 0;
    color: var(--color-neutral--80);
    border: 1px solid var(--color-neutral--80);
    background: var(--color-neutral--0);
    border-radius: var(--border-radius--md);
}

#feedback-container > .v-scroll-container > button:hover {
    color: var(--color-neutral--0);
    border: 1px solid var(--color-neutral--100);
    background: var(--color-neutral--100);
}

#feedback-list {
    width: 100%;
    padding: var(--s-16) var(--s-16) var(--s-24) var(--s-16);
    margin-left: var(--sn-16);
    overflow-x: scroll;
    display: flex;
    gap: var(--s-12);
    flex-wrap: nowrap;
    align-items: stretch;
    flex-direction: row;
}

.feedback-holder {
    width: 325px;
    padding: var(--s-12) var(--s-16);
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-neutral-opacity--5);
    display: flex;
    justify-content: start;
    flex-direction: column;
    flex: 0 0 auto;
    box-shadow: var(--shadow-variant);
}

.feedback-holder .product-container-rating {
    margin: 0 0 0 auto;
    cursor: initial;
}

.feedback-holder > p:first-of-type {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--80);
}

.feedback-holder > p:nth-of-type(2) {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
    font-style: var(--font-style--italic);
}

.feedback-holder > p:last-of-type {
    margin: var(--s-12) 0;
    color: var(--color-neutral-opacity--70);
    font-weight: var(--font-weight--light);
}

#sign-in {
    width: 100%;
    padding: var(--s-44) 0;
    display: flex;
    justify-content: center;
    gap: var(--s-44);
}

#sign-in > * {
    flex: 1;
}

#sign-in form, .small-form {
    width: 100%;
    max-width: 500px;
    padding: var(--s-44);
    border: 1px solid var(--color-neutral--40);
    border-radius: var(--border-radius--md);
}

.small-form {
    margin: var(--s-44) auto;
}

.small-form h2 {
    font-weight: var(--font-weight--medium);
    font-size: var(--font-size--18);
    margin-bottom: var(--s-16);
}

#sign-in form h1 {
    text-align: center;
}

.sign-in-row-credentials {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.sign-in-row-credentials label {
    color: var(--color-neutral--60);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
}

.sign-in-row-credentials input {
    padding: var(--s-14) var(--s-20);
}

#sign-in-row-remember-me {
    margin: var(--s-24) 0;
}

#sign-in-row-buttons {
    display: flex;
    align-items: stretch;
    gap: var(--s-12);
}

#sign-in-row-buttons > * {
    font-size: var(--font-size--14);
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
    flex: 1;
    text-align: center;
    cursor: pointer;
}

#sign-in-row-buttons input {
    background: var(--color-info--80);
    color: var(--color-neutral--0);
    font-weight: var(--font-weight--light);
    margin-bottom: 0;
}

#sign-in-row-buttons a {
    color: var(--color-neutral--80);
    border: 1px solid var(--color-neutral--80);
    font-weight: var(--font-weight--light);
}

#sign-in-row-buttons input:hover {
    background: var(--color-info--100);
}

#sign-in-quick-links a {
    margin: var(--s-8) 0;
}

#sign-info {
    display: flex;
    flex-direction: column;
    gap: var(--s-20);
}

#sign-info h2, #sign-info h3 {
    margin-top: var(--s-18);
    font-weight: var(--font-weight--medium);
}

#sign-info p {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

#quick-summary {
    position: sticky;
    top: var(--s-16);
    align-self: flex-start;
}

#quick-summary-container {
    padding: var(--s-20) var(--s-30);
    background: var(--color-neutral--20);
    font-weight: var(--font-weight--light);
}

#quick-summary-container > h3 {
    margin-bottom: var(--s-16);
}

.profile-navigation {
    padding: 0 var(--s-24) 0 0;
    margin: var(--s-24) 0;
    list-style-type: none;
}

.profile-navigation a {
    width: 100%;
    margin: var(--s-4) 0;
    padding: var(--s-14) var(--s-8) var(--s-14) 0;
    border-bottom: 1px solid var(--color-neutral--40);
    color: var(--color-neutral--80);
    display: flex;
    align-items: center;
    gap: var(--s-12);
}

.profile-navigation a:hover {
    color: var(--color-neutral--60);
}

.profile-data-box {
    padding: var(--s-16) 0;
    margin: var(--s-16) 0;
    border-bottom: 1px solid var(--color-neutral--40);
}

.profile-data-box p {
    margin-bottom: var(--s-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-32);
}

.profile-data-box p:first-of-type {
    margin-bottom: var(--s-16);
    font-weight: var(--font-weight--bold);
    font-size: var(--font-size--18);
}

.profile-data-box > p > span:first-of-type,.profile-data-box > p > label {
    font-weight: var(--font-weight--medium);
}

.profile-data-box > p > span:nth-of-type(2) {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

.profile-data-box p:last-of-type {
    margin-top: var(--s-16);
    justify-content: start;
    gap: var(--s-16);
}

.profile-data-box p:last-of-type a {
    padding-bottom: var(--s-4);
    border-bottom: 1px solid transparent;
    color: var(--color-info--60);
    display: flex;
    align-items: center;
    gap: var(--s-12);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
}

.profile-data-box p:last-of-type a:hover,.profile-data-edit a:hover {
    border-bottom: 1px solid var(--color-info--80);
    color: var(--color-info--80);
}

.profile-data-box select, .profile-data-box input {
    text-align: right;
}

.profile-data-edit, profile-data-edit a {
    display: flex;
    align-items: center;
}

.profile-data-edit {
    font-weight: var(--font-weight--light);
    gap: var(--s-16);
}

.profile-data-edit a {
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
    border-bottom: 1px solid transparent;
    gap: var(--s-8);
}

.profile-data-edit a:first-of-type {
    color: var(--color-info--60);
}

.profile-data-edit a:first-of-type:hover {
    color: var(--color-info--80);
    border-bottom: 1px solid var(--color-info--80);
}

.profile-data-edit a:last-of-type:not(:first-of-type) {
    color: var(--color-danger--60);
}

.profile-data-edit a:last-of-type:not(:first-of-type):hover {
    color: var(--color-danger--80);
    border-bottom: 1px solid var(--color-danger--80);
}

.profile-document-container {
    width: 100%;
    padding: var(--s-14) var(--s-20);
    margin: var(--s-20) 0;
    background: var(--color-neutral--0);
    border: 1px solid var(--color-neutral-opacity--10);
    border-radius: var(--border-radius--lg);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral-opacity--70);
    display: grid;
    grid-template-columns: 44px 1fr 1fr 32px;
    grid-template-rows: auto auto auto;
    grid-column-gap: var(--s-24);
    grid-row-gap: var(--s-4);
    align-items: center;
    grid-auto-flow: column;
    position: relative;
}

.profile-document-container > .document-icon {
    width: 44px;
    height: 44px;
    background: var(--color-neutral-opacity--20);
    color: var(--color-neutral--0);
    border-radius: 22px;
    grid-row: 1/4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-document-container > p:first-of-type, .profile-document-container > p:nth-of-type(3) {
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--80);
}

.profile-document-container > p:nth-of-type(n+3) {
    text-align: right;
    justify-self: end;
}

.profile-document-container > a {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-info--60);
    color: var(--color-info--60);
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1/4;
}

.profile-document-container > a:hover {
    background: var(--color-info-opacity--5);
    box-shadow: var(--shadow-info-soft);
}

.profile-document-container > a span {
    display: none;
}

.profile-document-container i {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.profile-document-container .document-invoice-title {
    grid-row: 1/4;
}

.document-wrapper {
    width: 100%;
    margin: var(--s-32) 0;
    padding: var(--s-32);
    border: 1px solid var(--color-neutral-opacity--5);
    border-radius: var(--border-radius--xl);
    display: flex;
    gap: var(--s-20);
    flex-direction: column;
}

.document-wrapper > a {
    display: flex;
    align-content: center;
    gap: var(--s-6);
    color: var(--color-neutral--60);
    line-height: var(--font-size--14);
    font-size: var(--font-size--14);
}

.document-wrapper > a:hover {
    color: var(--color-info--80);
}

.document-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
}

.document-header > p:first-of-type {
    font-weight: var(--font-weight--extra-light);
    color: var(--color-neutral-opacity--50);
    grid-column: 1;
    grid-row: 1;
}

.document-header > p:nth-of-type(2) {
    font-weight: var(--font-weight--bold);
    font-size: var(--font-size--20);
    grid-column: 1;
    grid-row: 2;
}

.document-header > .label {
    grid-column: 2;
    grid-row: 1/3;
}

.document-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-16);
    align-items: stretch;
}

.document-grid h3 {
    margin-top: var(--s-16);
    font-size: var(--font-size--18);
    grid-column: 1/3;
}

.document-data-box {
    min-height: 150px;
    padding: var(--s-20);
    border-radius: var(--border-radius--md);
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: var(--s-32);
}

.document-container {
    background: var(--color-neutral-opacity--5);
}

.document-box {
    border: 1px solid var(--color-neutral-opacity--5);
}

.document-box-icon {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--color-neutral--0);
    color: var(--color-neutral--100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-box-title {
    font-size: var(--font-size--14);
    color: var(--color-neutral-opacity--50);
    font-weight: var(--font-weight--extra-light)
}

.document-text-row {
    font-size: var(--font-size--14);
    display: flex;
    justify-content: space-between;
    gap: var(--s-12);
}

.document-text-row.maxed {
    font-size: var(--font-size--18);
}

.document-text-row > span:first-of-type {
    font-weight: var(--font-weight--extra-light);
    color: var(--color-neutral-opacity--50);
}

.document-text-row > span:nth-of-type(2) {
    text-align: right;
}

.document-text-row.maxed > span:nth-of-type(2) {
    font-weight: var(--font-weight--semi-bold);
}

.document-flex {
    margin-top: var(--s-16);
    display: flex;
    gap: var(--s-12);
    flex-wrap: wrap;
}

#document-items .cart-item {
    grid-template-columns: 80px 275px 1fr 75px 1fr 1.25fr;
}

#document-items .cart-item > span:last-of-type {
    font-size: var(--font-size--14);
    color: var(--color-neutral-opacity--50);
    display: flex;
    gap: var(--s-8);
    align-items: center;
    justify-self: end;
}

.document-item-state {
    justify-self: stretch;
}

.document-item-state span {
    flex: 1;
}

.cart-layout {
    padding: var(--s-44) 0;
    display: grid;
    grid-template-columns: calc(70% - var(--s-22)) calc(30% - var(--s-22));
    grid-column-gap: var(--s-44);
}

#favourite-product-search input {
    width: 100%;
    padding: var(--s-14) var(--s-20);
}

.cart-layout-item-header,.cart-item {
    margin: var(--s-8) 0;
    display: grid;
    grid-template-columns: 80px 325px 1fr 75px 1fr 30px;
    grid-column-gap: var(--s-22);
    align-items: center;
}

#favourite-products .cart-item {
    grid-template-columns: 80px 285px 1fr 75px 1fr 70px;
}

#watchdog-products .cart-item {
    grid-template-columns: 80px 465px 1fr 75px 80px;
}

#favourite-products .cart-item > p:last-of-type, #watchdog-products .cart-item > p:last-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#favourite-products .cart-item button, #watchdog-products .cart-item button {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#watchdog-products .cart-item .toggle-container {
    margin: var(--s-8) 0 var(--s-8) auto;
}

.cart-layout-item-header {
    padding-bottom: var(--s-8);
    border-bottom: 1px solid var(--color-neutral-opacity--10);
    font-weight: var(--font-weight--semi-bold);
    font-size: var(--font-size--18);
}

.cart-layout-item-header > p:first-of-type {
    grid-column: 1/3;
}

.cart-layout-item-header > p:last-of-type {
    grid-column: 5/7;
}

.cart-step-title-container {
    background: var(--color-neutral--20);
    padding: var(--s-20);
    margin-bottom: var(--s-32);
    border-radius: var(--border-radius--md);
    display: flex;
    gap: var(--s-32);
    align-items: center;
}

.cart-step-title-container > a {
    padding: var(--s-8) var(--s-16);
    background: var(--color-neutral--0);
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-neutral--50);
    display: flex;
    gap: var(--s-8);
    align-items: center;
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.cart-step-title-container > a:hover {
    color: var(--color-neutral--80);
    border: 1px solid var(--color-neutral--80);
}

.cart-step-title {
    flex: 1;
}

.cart-step-title > p:first-of-type {
    font-weight: var(--font-weight--medium);
    font-size: var(--font-size--18);
}

.cart-step-title > p:nth-of-type(2) {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

.cart-item {
    padding: var(--s-12) 0;
    border-bottom: 1px solid var(--color-neutral-opacity--10);
}

.cart-item .product-image, .cart-overview-item .product-image {
    aspect-ratio: 1/1;
}

.cart-item .product-image:has(svg) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item#cart-voucher .product-image::after, .cart-item#cart-voucher .product-image {
    background: none;
}

.cart-item *[class^='tag-'] {
    font-size: var(--font-size--12);
}

.cart-item > p:first-of-type,.cart-item > p:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.cart-item > p:first-of-type {
    overflow: hidden;
}

.cart-item > p:first-of-type > span:first-of-type a {
    font-size: var(--font-size--16);
    font-weight: var(--font-weight--medium);
    color: var(--color-neutral--80);
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
    display: block;
}

.cart-item > p:first-of-type > span:nth-of-type(2) {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

.cart-item-stock, .cart-item-stock span {
    width: 100%;
    margin: 0;
    font-size: var(--font-size--16);
}

.cart-item > p:nth-of-type(2) {
    color: var(--color-neutral--60);
}

.cart-item input:not([type="submit"], [type="checkbox"], [type="button"]) {
    background: var(--color-neutral--0);
}

.cart-layout-item-header > p:nth-of-type(2),.cart-item > p:nth-of-type(2) {
    justify-self: end;
    text-align: right;
}

.cart-special-price {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-size: var(--font-size--14);
    justify-content: end;
}

.cart-special-price:has(.set-discount-as-default) {
    gap: var(--s-0);
}

.cart-base-price {
    font-style: var(--font-style--italic);
    font-weight: var(--font-weight--light);
}

.cart-discount {
    color: var(--color-success--100);
}

.cart-final-price {
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--semi-bold);
}

.cart-final-price.double-price {
    display: flex;
    flex-flow: column;
}

.cart-final-price.double-price span {
    width: 100%;
    display: block;
}

.cart-final-price.double-price > span:first-of-type {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

.cart-item-quantity, .cart-layout-item-header > p:nth-of-type(3) {
    width: 75px;
}

.cart-item > p > button,.cart-item > button {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid transparent;
    background: var(--color-neutral--40);
    color: var(--color-neutral--80);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item > p > button.favorite-in-cart {
    background: var(--color-success-opacity--100);
    color: var(--color-neutral--0);
}

.cart-item > button:hover,.cart-item .set-discount-as-default:hover, #favourite-products .cart-item button:last-of-type:hover {
    cursor: pointer;
    background: var(--color-danger--20);
    color: var(--color-danger--100);
}

#favourite-products .cart-item button:first-of-type:hover {
    cursor: pointer;
    background: var(--color-info--100);
    color: var(--color-neutral--0);
}

#favourite-products .cart-item button.favorite-in-cart:hover {
    background: var(--color-success-opacity--30);
    color: var(--color-success-opacity--80);
}

.cart-item .cart-salesman-controls {
    text-align: right;
    gap: var(--s-8);
    font-size: var(--s-16);
    justify-self: end;
}

.cart-item .cart-salesman-controls input {
    width: 100%;
    height: 40px;
    padding-left: var(--s-32);
    text-align: right;
    font-size: var(--font-size--16);
}

.price-input, .discount-input {
    position: relative;
}

.price-input:after {
    content: "Kč";
}

.discount-input:after {
    content: "%";
}

.price-input:after,.discount-input:after {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
    position: absolute;
    top: 50%;
    left: var(--s-8);
    transform: translateY(-50%);
}

.cart-item .set-discount-as-default {
    width: 40px;
    height: 40px;
    margin-right: var(--s-4);
    border-radius: var(--border-radius--md);
    background: var(--color-neutral--20);
    color: var(--color-neutral--80);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item .salesman-codes {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.cart-delivery-payment-container {
    margin: var(--s-24) 0 var(--s-44) 0;
}

.cart-delivery-payment {
    padding: var(--s-14) var(--s-20);
    margin-bottom: var(--s-16);
    border: 1px solid var(--color-neutral-opacity--10);
    border-radius: var(--border-radius--lg);
    display: grid;
    grid-template-columns: 20px 64px 1fr auto;
    gap: var(--s-32);
    align-items: center;
}

.cart-delivery-payment-img {
    width: 64px;
    height: 64px;
    color: var(--color-neutral--100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-delivery-payment-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-delivery-payment span {
    display: block;
}

.cart-delivery-payment > span:last-of-type {
    font-size: var(--font-size--18);
    font-weight: var(--font-weight--semi-bold);
    text-align: right;
}

.cart-delivery-payment > span:has(span) {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.cart-delivery-payment > span:has(span) span:first-of-type {
    font-weight: var(--font-weight--semi-bold);
}

.cart-delivery-payment > span:has(span) span:not(:first-of-type) {
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

.cart-delivery-payment:has(input:checked) {
    border: 1px solid var(--color-info--80);
}

.cart-delivery-payment:has(input:checked) > span:last-of-type, .cart-delivery-payment:has(input:checked) > span:has(span) span:first-of-type, .cart-delivery-payment:has(input:checked) .cart-delivery-payment-img {
    color: var(--color-info--80);
}

#empty-cart-container,#empty-category-container {
    width: 100%;
    height: 100%;
    padding: var(--s-44) 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--s-18);
}

.cart-layout #snippet--cartItems:has(#empty-cart-container) {
    grid-column: 1/3;
}

#snippet--documents #empty-category-container {
    padding: 0;
}

#empty-category-container p {
    color: var(--color-neutral-opacity--70);
}

#free-delivery-limit {
    grid-column: 1/7;
    margin: var(--s-20) var(--s-14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral-opacity--70);
    border-radius: var(--border-radius--md);
}

#free-delivery-limit > p {
    display: flex;
    align-items: center;
    gap: var(--s-16);
}

#free-delivery-limit .delivery-limit-icon {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--color-neutral--0);
    display: flex;
    align-items: center;
    justify-content: center;
}

#free-delivery-limit:not(:has(.stock-success)) {
    color: var(--color-info-opacity--70);
}

#free-delivery-limit:not(:has(.stock-success)) .delivery-limit-icon {
    background: var(--color-info-opacity--5);
}

#free-delivery-limit:has(.stock-success) {
    color: var(--color-success-opacity--70);
}

#free-delivery-limit:has(.stock-success) .delivery-limit-icon {
    background: var(--color-success-opacity--5);
}

#free-delivery-limit b, #free-delivery-limit strong {
    color: inherit;
    font-weight: var(--font-weight--semi-bold);
}

#cart-summary-widget > p {
    margin: var(--s-4) 0;
    display: flex;
    align-items: center;
    gap: var(--s-16);
    justify-content: space-between;
}

#cart-summary-widget > p:first-of-type, #watchdog-summary > p:first-of-type {
    margin-bottom: var(--s-24);
    font-size: var(--font-size--20);
    font-weight: var(--font-weight--semi-bold);
    color: var(--color-neutral--80);
}

#promo-code-container {
    margin: var(--s-12) 0 var(--s-24) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

#promo-code-container > p:first-of-type {
    font-weight: var(--font-weight--medium);
}

#promo-code-controls {
    display: grid;
    grid-template-columns: 1fr auto;
}

#promo-code-controls input {
    border-radius: var(--border-radius--md) 0 0 var(--border-radius--md);
}

#promo-code-controls button {
    padding: var(--s-14) var(--s-20);
    color: var(--color-neutral--0);
    background: var(--color-neutral--100);
    border-radius: 0 var(--border-radius--md) var(--border-radius--md) 0;
}

#cart-summary-controls {
    margin-top: var(--s-24);
    display: flex;
    flex-flow: column;
    gap: var(--s-16);
}

#cart-summary-controls > a, #cart-summary-controls > button, #cart-summary-controls > input[type="submit"] {
    width: 100%;
    text-align: center;
    padding: var(--s-14) var(--s-20);
    border-radius: var(--border-radius--md);
}

#cart-summary-controls > *:first-child:not([data-control="compliance-link"]):not(#step-submit) {
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
}

#cart-summary-controls > *:first-child:hover {
    cursor: pointer;
    background: var(--color-info--80);
}

#cart-summary-controls > *:nth-child(2) {
    background: var(--color-neutral--0);
    color: var(--color-neutral--100);
}

#cart-summary-controls > *:nth-child(2).danger:hover {
    cursor: pointer;
    background: var(--color-danger--20);
}

#cart-summary-controls > *:nth-child(2):hover {
    cursor: pointer;
    background: var(--color-neutral--40);
}

.user-form-holder {
    margin: var(--s-24) 0;
}

.user-form-holder .button-container {
    width: 100%;
    margin: var(--s-22) 0;
    justify-content: space-between;
}

.user-form-container {
    display: flex;
    flex-direction: column;
    position: relative;
}

.user-form-container h2 {
    padding-bottom: var(--s-8);
    margin: var(--s-32) 0 var(--s-24) 0;
    border-bottom: 1px solid var(--color-neutral--40);
}

.user-form-container > h2:first-of-type, .user-form-container > .toggle-container:first-of-type {
    margin: 0 0 var(--s-24) 0;
}

.user-form-container label:not(:has(select)):not(.toggle-container), #sign-as-customer form label {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    margin-bottom: var(--s-6);
}

.user-form-container label:has(select),.user-form-container .double-input-container {
    margin-bottom: var(--s-16);
}

.user-form-container label:has(select) select,.user-form-container .double-input-container input {
    margin-bottom: 0;
}

.user-form-container .checkbox-container {
    font-size: var(--s-16);
}

.user-form-container input,.user-form-container select,.user-form-container textarea {
    width: 100%;
    padding: var(--s-14) var(--s-20);
    margin-bottom: var(--s-16);
}

.user-form-container input.btn {
    width: max-content;
}

.user-form-container input.btn.full {
    width: 100%;
}

.user-form-container textarea {
    resize: none;
}

.user-form-container .checkbox-container {
    margin: var(--s-14) 0;
}

.user-form-container .input-box:has(input:required) label,.user-form-container .input-box:has(textarea:required) label,.toggle-container:has(input:required) span:last-of-type {
    padding-left: var(--s-10);
    position: relative;
}

.user-form-container .input-box:has(input:required) label::before,.user-form-container .input-box:has(textarea:required) label::before,.toggle-container:has(input:required) span:last-of-type:before {
    content: '*';
    color: var(--color-danger--40);
    top: 0;
    left: 0;
    position: absolute;
}

.input-box p.danger, .input-box span.danger, .input-box p.error, .input-box span.error {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-danger--60);
    margin-bottom: var(--s-16);
}

.vat-flex {
    display: flex;
    align-items: center;
    gap: var(--s-16);
}

.vat-flex > *:first-child {
    flex: 1;
}

.mail-controler {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
}

.mail-controler label {
    grid-column: 1/3;
}

.mail-controler .btn {
    padding: var(--s-4) var(--s-12);
    margin-left: var(--s-8);
    color: var(--color-danger--80);
    background: var(--color-neutral--0);
}

.mail-controler .btn:hover {
    background: var(--color-danger-opacity--10);
}

#mail-add {
    width: max-content;
    padding: var(--s-4) var(--s-12);
    margin: var(--s-8) 0 var(--s-32) 0;
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-info--80);
    color: var(--color-info--80);
    display: block;
}

.compliance-container {
    padding: var(--s-12);
    margin-bottom: var(--s-8);
    background: var(--color-neutral--0);
    border: 1px solid transparent;
    border-radius: var(--border-radius--md);
    color: var(--color-neutral-opacity--70);
    font-size: var(--font-size--14);
    display: grid;
    grid-template-columns: 48px auto;
}

.compliance-container:first-of-type {
    margin-top: var(--s-20);
}

.compliance-container:has(input:checked) {
    border: 1px solid var(--color-info--100);
    color: var(--color-info--100);
}

.compliance-container a {
    color: var(--color-neutral--80);
    text-decoration: underline;
}

#cart-summary-links {
    margin: var(--s-24) 0;
    font-weight: var(--font-weight--light);
    color: var(--color-neutral--60);
}

#cart-summary-links a {
    color: var(--color-neutral--80);
    text-decoration: underline;
}

.small-item {
    margin: var(--s-12) 0;
    display: grid;
    grid-template-columns: 48px 1fr 100px;
    align-items: center;
}

.small-item input, .small-item label:not(:has(select)):not(.toggle-container) {
    margin-top: 0;
    margin-bottom: 0;
}

.small-item p {
    display: flex;
    flex-direction: column;
}

.small-item p > span:first-of-type {
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    color: var(--color-neutral-opacity--60);
}

#company-benefits {
    background: var(--color-neutral--20);
}

#company-benefits .main-sizing {
    display: flex;
    align-items: stretch;
}

.company-benefit {
    padding: var(--s-30);
    position: relative;
    flex-grow: 1;
}

.company-benefit > p {
    font-size: var(--font-size--40);
    font-weight: var(--font-weight--black);
    color: var(--color-info--100);
    position: absolute;
    opacity: .1;
    bottom: 0;
    right: 0;
}

.company-benefit-grid {
    font-weight: var(--font-weight--light);
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 30px auto;
    align-items: center;
    grid-column-gap: var(--s-16);
}

.company-benefit-grid svg {
    grid-row: 1/3;
}

.company-benefit-grid svg,.company-benefit-grid p:first-of-type {
    color: var(--color-info--80);
}

.company-benefit-grid p:first-of-type {
    font-size: var(--font-size--18);
}

.company-benefit-grid p:last-of-type {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

.country-select {
    border: 1px solid var(--color-neutral-opacity--30);
    border-radius: var(--border-radius--md);
    display: flex;
    position: relative;
    overflow: hidden;
}

.country-select > select {
    border-radius: 0;
    border: 0;
    padding-right: var(--s-24);
}

.country-select > span {
    height: 100%;
    padding: var(--s-8);
    background: var(--color-neutral--20);
    border-left: 1px solid var(--color-neutral-opacity--30);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}

.double-input-container {
    display: flex;
    border-radius: var(--border-radius--md);
    border: 1px solid var(--color-neutral-opacity--30);
    overflow: hidden;
}

.double-input-container input {
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0;
}

.double-input-container input:first-of-type {
    border-right: 1px solid var(--color-neutral--50);
    background: var(--color-neutral--20);
}

.phone-preset {
    flex-basis: 12.5%;
    padding: var(--s-14) var(--s-10) var(--s-14) var(--s-20);
    -webkit-appearance: text;
}

.double-input-container button {
    padding: var(--s-14) var(--s-20);
    width: max-content;
    background: var(--color-neutral--80);
    border: none;
    color: var(--color-neutral--0);
}

.double-input-container button:hover {
    background: var(--color-neutral--60);
}

.double-input-container.reversed input:first-of-type {
    flex: 1;
    background: var(--color-neutral--0);
}

.overview-container {
    margin: var(--s-16) 0;
}

.overview-holder {
    padding: var(--s-16) 0;
    position: relative;
}

.overview-holder h2 {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius--xs);
    background: var(--color-info--80);
    color: var(--color-neutral--0);
    text-align: center;
    position: sticky;
    top: var(--s-16);
    left: 0;
}

.overview-holder ul,.overview-holder li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.overview-holder > ul {
    margin-left: var(--s-44);
}

.overview-holder ul,.overview-holder li:has(ul) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-14);
}

.overview-holder ul ul,.overview-holder li:has(ul) {
    grid-column: 1/3;
    padding-left: var(--s-16);
}

.overview-holder li:has(ul):first-of-type a {
    grid-column: 1/3;
}

.overview-holder li > a {
    padding: 0 var(--s-8);
    color: var(--color-neutral-opacity--60);
    border-left: 2px solid transparent;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--s-8);
    align-items: center;
    transition: all .5s ease;
}

.overview-holder li > a > img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.overview-holder li > a:hover {
    border-left: 2px solid var(--color-info--60);
    color: var(--color-info--80);
}

form:not(:has(*[data-control="compliance-control"] input:checked)) *[data-control="compliance-link"], .submit-disabled {
    background: var(--color-danger-opacity--10);
    color: var(--color-neutral--0);
    pointer-events: none;
    cursor: not-allowed;
}

form:has(*[data-control="compliance-control"] input:checked) *[data-control="compliance-link"], .submit-init {
    background: var(--color-neutral--100);
    color: var(--color-neutral--0);
    pointer-events: initial;
}

footer {
    padding: var(--s-44) var(--s-40);
    border-top: 1px solid var(--color-neutral--20);
}

footer .main-sizing {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);    
}

#main-footer, #sub-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--s-32);
}

#main-footer {
    padding-bottom: var(--s-16);
    border-bottom: 1px solid var(--color-neutral--40);
    align-items: start;
}

#main-footer > div > p:first-of-type {
    color: var(--color-neutral--100);
    font-weight: var(--font-weight--semi-bold);
    margin-bottom: var(--s-16);
}

#sub-footer {
    align-items: center;
}

#main-footer > div, #sub-footer > div {
    flex-grow: 1;
}

#main-footer > div > nav {
    width: max-content;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(4,1fr);
    grid-auto-flow: column;
    grid-column-gap: var(--s-16);
    grid-row-gap: var(--s-8);
}

#main-footer > div > nav > a, #sign-in-quick-links a {
    color: var(--color-neutral--60);
    font-size: var(--font-size--14);
    font-weight: var(--font-weight--light);
    display: block;
}

#main-footer > div > nav > a:hover, #sign-in-quick-links a:hover {
    text-decoration: underline;
}

#footer-company-info p span:first-of-type {
    font-weight: var(--font-weight--medium);
    font-size: var(--font-size--14);
}

#footer-company-info p span:last-of-type, #footer-company-info p a {
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
}

#footer-company-cta {
    padding: var(--s-8) var(--s-12);
    margin-top: var(--s-16);
    border: 1px solid var(--color-neutral--100);
    border-radius: var(--border-radius--md);
    background: none;
    font-size: var(--font-size--14);
    color: var(--color-neutral--100);
    transition: background .5s ease;
}

#footer-company-cta:hover {
    cursor: pointer;
    background: var(--color-neutral--20);
}

#footer-form form, #news-form-container form {
    width: 100%;
    margin-bottom: var(--s-16);
    display: flex;
    align-items: stretch;
    position: relative;
}

#footer-form form svg, #news-form-container form svg {
    position: absolute;
    left: var(--s-8);
    top: 50%;
    transform: translateY(-50%);
}

#footer-form form input[type="email"], #news-form-container form input[type="email"] {
    border: 1px solid var(--color-neutral-opacity--30);
    border-radius: var(--border-radius--md) 0 0 var(--border-radius--md);
    font-size: var(--font-size--14);
    flex-grow: 1;
}

#footer-form form input[type="email"] {
    padding: var(--s-8) var(--s-14) var(--s-8) var(--s-32);
}

#news-form-container form input[type="email"] {
    padding: var(--s-14) var(--s-20) var(--s-14) var(--s-42);
}

#footer-form form input[type="submit"], #news-form-container form input[type="submit"] {
    border-radius: 0 var(--border-radius--md) var(--border-radius--md) 0;
    background: var(--color-info--80);
    color: var(--color-neutral--0);
    font-weight: var(--font-weight--light);
}

#footer-form form input[type="submit"] {
    padding: var(--s-8) var(--s-14);
    font-size: var(--font-size--14);
}

#news-form-container form input[type="submit"] {
    padding: var(--s-14) var(--s-20);
    font-size: var(--font-size--16);
}

#footer-socials, #footer-copyright, #footer-payments {
    display: flex;
    align-items: center;
    gap: var(--s-16);
    flex: 1;
}

#footer-payments {
    justify-content: end;
}

#footer-socials a, #footer-copyright, #footer-payments,#footer-form p:last-of-type,#footer-form a {
    font-weight: var(--font-weight--light);
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
}

#footer-copyright {
    justify-content: center;
}

#footer-form a {
    text-decoration: underline;
}

#footer-form a:hover {
    text-decoration: none;
}

#contributions, #contributions a {
    font-size: var(--font-size--14);
    color: var(--color-neutral--60);
    font-weight: var(--font-weight--light);
    text-align: right;
}

@keyframes msg-fade-in {
    from {
        transform: translate(-50%,-150%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translate(-50%,50%);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fade-in {
    from {
        transform: translateY(100%);
        opacity: 0;
        visibility: hidden;
    }
    to {
        transform: translateY(0%);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes msg-fade-out {
    from {
        transform: translate(-50%,50%);
        opacity: 1;
        visibility: visible;
    }
    to {
        transform: translate(-50%,-150%);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes pulse {
    0%,100% {
        opacity: .5;
        transform: scale(.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0%,100% {
        opacity: .5;
        -webkit-transform: scale(.9);
                transform: scale(.9);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}


@media only screen and (max-width: 1440px) {
    
    #main-menu {
        padding: 0;
    }
    
    .cart-layout {
        grid-template-columns: calc(65% - var(--s-22)) calc(35% - var(--s-22));
    }
    
    .cart-layout-item-header, .cart-item {
        grid-template-columns: 80px 275px 1fr 75px 1fr 30px;
    }
    
}

@media only screen and (max-width: 1200px) {

    .main-menu-cta > div {
        position: relative;
    }
    
    .image-carousel.home-carousel {
        margin: var(--s-44) 0 0 0;
    }
    
    .home-carousel .image-carousel-btns {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .home-carousel .image-carousel-btns a {
        width: 100%;
    }
    
    #home-tiles,.product-toggle,#main-footer, #sub-footer {
        flex-wrap: wrap;
    }
    
    .home-tile, .product-container, .category-container {
        flex: 0 0 calc(50% - var(--s-6));
    }
    
    #injection-banner > .main-sizing {
        padding: var(--s-60) var(--s-40);
    }
    
    #injection-content {
        gap: var(--s-16);
    }
    
    .aside-layout > aside {
        flex: 0 0 calc(33.33% - var(--s-22));
    }
    
    .aside-layout > main {
        max-width: 66.66%;
    }
    
    .product-layout-grid.triple .product-container,.product-layout-grid.triple .post-thumbnail {
        flex: 0 0 calc(50% - var(--s-12));
    }
    
    .cart-layout {
        grid-template-columns: calc(55% - var(--s-22)) calc(45% - var(--s-22));
    }
    
    .cart-layout-item-header, .cart-item,#favourite-products .cart-item, #watchdog-products .cart-item {
        grid-template-columns: 80px .5fr .5fr 80px;
        grid-template-rows: auto auto;
        gap: var(--s-6) 0;
    }
    
    #document-items .cart-item {
        grid-template-columns: 80px .5fr .5fr 80px;
        grid-template-rows: auto auto auto;
    }
    
    #document-items .cart-item > span:last-of-type {
        grid-column: 1/5;
        grid-row: 2/4;
    }
    
    .cart-layout-item-header > p:first-of-type, .cart-item-stock {
        grid-column: 2/4;
        grid-row: 1;
    }
    
    .cart-layout-item-header > p:nth-of-type(2), .cart-item > p:nth-of-type(2) {
        justify-self: start;
        grid-column: 2;
        grid-row: 2;
    }
    
    .cart-item-quantity {
        grid-column: 4;
        grid-row: 1;
    }
    
    .cart-layout-item-header > p:nth-of-type(3) {
        grid-column: 4;
        grid-row: 1/3;
        align-self: end;
    }
    
    .cart-layout-item-header > p:last-of-type, .cart-final-price.double-price {
        grid-column: 3;
        grid-row: 2;
    }
    
    .cart-item > p > button, .cart-item > button,#favourite-products .cart-item > p:last-of-type, #watchdog-products .cart-item > p:last-of-type {
        grid-column: 4;
        grid-row: 2;
        justify-self: center;
    }
    
    #favourite-products .cart-item > p:last-of-type, #watchdog-products .cart-item > p:last-of-type {
        gap: var(--s-12);
        justify-content: space-between;
    }
    
    #withdrawal #watchdog-products .cart-item > p:last-of-type {
        gap: 0;
    }
    
    #product-detail > .product-detail-layout:nth-of-type(odd),#product-detail > .product-detail-layout:nth-of-type(even) {
        grid-template-columns: calc(50% - var(--s-22)) calc(50% - var(--s-22));
    }
    
    .product-toggle {
        width: 100%;
    }
    
    .product-toggle label {
        flex: 0 1 calc(50% - var(--s-6));
        text-align: left;
        word-break: keep-all;
        justify-content: start;
    }
    
    #main-footer > div, #sub-footer > div {
        flex: 0 0 calc(50% - var(--s-16));
    }
    
    #footer-payments {
        justify-content: start;
    }
    
    #footer-copyright {
        justify-content: end;
    }
    
    #cookie-consent-holder .modal-content {
        width: clamp(50%, 70%, 90%);
    }
    
    .cart-step-title-container {
        flex-direction: column;
        align-items: start;
        gap: var(--s-16);
    }
    
    .cart-step-title-container > a {
        padding: var(--s-14) var(--s-20);
        font-size: var(--font-size--16);
    }
    
    .vat-flex {
        flex-direction: column;
        align-items: stretch;
    }
    
    .variant-row {
        grid-template-columns: 1fr 2fr 32px 32px;
        grid-template-rows: auto auto;
        gap: var(--s-8);
    }
    
    .modal-content .variant-row input:not([type="submit"], [type="button"], [type="checkbox"]) {
        width: max-content;
        justify-self: end;
    }
    
    .variant-row > p:nth-of-type(2) {
        grid-column: 2/6;
        grid-row: 1;
    }
    
    .variant-row .stock-row {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }
}

@media only screen and (max-width: 1180px) {
    
    .mb-limit {
        display: none !important;
    }
    
    .mb-show {
        display: block !important;
    }
    
    #user-actions > a {
        width: 62px;
        height: 62px;
        margin: 0;
        padding: 0;
    }
    
    
    .profile-data-box p,.profile-data-edit {
        margin-bottom: var(--s-16);
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: var(--s-4);
    }
    
    .profile-data-edit a {
        margin: var(--s-6) 0;
        padding: var(--s-8) 0;
    }
    
    .profile-document-container {
        grid-template-columns: 44px 1fr auto;
        grid-template-rows: auto;
    }
    
    .profile-document-container > .document-icon {
        grid-row: 1/6;
        align-self: center;
    }
    
    .profile-document-container > p:first-of-type {
        grid-row: 1;
    }
    
    .profile-document-container > p:nth-of-type(n+2) {
        text-align: left;
        justify-self: start;
    }
    
    .profile-document-container > a {
        width: max-content;
        padding: var(--s-4) var(--s-8);
        gap: var(--s-8);
        justify-self: end;
        align-self: end;
        grid-column: 3;
        grid-row: 3/7;
    }
    
    .profile-document-container > a span {
        display: block;
    }
    
    .profile-document-container .label {
        margin: var(--s-8) 0;
        grid-column: 3;
        grid-row: 1/4;
        justify-self: end;
        align-self: start;
    }
}

@media only screen and (max-width: 1024px) {
    
    .modal-content .image-carousel > picture {
        flex: 0 0 100%;
    }
    
    .modal-content .v-scroll-container .v-scroll-container {
        height: auto;
    }
    
    #company-benefits .main-sizing {
        flex-wrap: wrap;
        padding: var(--s-16) var(--s-40);
    }
    
    .company-benefit {
        flex: 0 0 50%;
    }
    
    #product-detail > .product-detail-layout:nth-of-type(odd), #product-detail > .product-detail-layout:nth-of-type(even) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-22);
    }
    
    #product-detail > .product-detail-layout:nth-of-type(even) {
        padding-top: var(--s-22);
        border-top: 1px solid var(--color-neutral-opacity--10);
    }
    
    .product-param-container {
        width: 100%;
        padding: var(--s-16) 0 0 0;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-neutral-opacity--10);
    }
    
    #product-carousel-container {
        width: clamp(50%, 75%, 100%);
        margin: auto;
    }
    
    #product-control-container {
        margin: var(--s-22) 0;
    }
    
    .document-grid {
        grid-template-columns: auto;
        grid-template-rows: auto auto;
    }
    
    #vypis-variant {
        max-height: unset;
    }
}

@media only screen and (max-width: 925px) {
    
    .main-sizing {
        padding: 0 var(--s-20);
    }
    
    #main-footer > div > nav > a, #sign-in-quick-links a, .search-result, #main-menu nav a, 
    #main-menu nav > button > span, 
    #user-actions > a, .dropdown-container > summary > span, 
    #child-categories > a > span, 
    .compliance-container, .product-price-row > span:first-of-type, 
    #product-controls > p > span:first-of-type, 
    .cart-summary-attribute > span:first-of-type, #watchdog-summary > p, 
    #footer-company-info p span:last-of-type, #footer-company-info p a, #footer-company-info p span:first-of-type, 
    #sign-in-row-buttons > * {
        font-size: var(--font-size--16);
    }
    
    #header {
        padding: var(--s-44) 0;
    }
    
    #header > .main-sizing {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--s-32);
    }
    
    #header form {
        max-width: 100%;
        grid-column: 1/3;
        grid-row: 2;
    }
    
    #search-bar input {
        padding: var(--s-14) var(--s-20);
    }
    
    #shop-quick-info {
        justify-self: end;
    }
    
    #main-menu > .main-sizing {
        padding: 0;
    }
    
    .main-menu-cta > div, .main-menu-cta > div > a {
        position: static;
    }
    
    .main-menu-cta a > span {
        position: static;
        align-self: end;
        transform: translateY(-12px);
    }
    
    .main-menu-cta .quick-overview {
        width: 100vw;
    }
    
    #cart > div > a, #favorites > div > a, #watchdog > div > a {
        min-width: 68px;
        padding: 0 var(--s-2) 0 var(--s-8);
        width: auto;
        pointer-events: none;
        gap: var(--s-6);
    }
    
    .image-carousel.home-carousel {
        height: auto;
    }
    
    .home-carousel .image-carousel-page, #injection-banner > .main-sizing, .aside-layout, #sign-in, .cart-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    
    #quick-summary-container, .product-info-container {
        width: 100%;
        margin-top: var(--s-22);
        border: 1px solid var(--color-neutral-opacity--10);
        border-radius: var(--border-radius--md);
        box-shadow: var(--shadow-variant);
    }
    
    #injection-banner img {
        width: clamp(225px, 325px, 100%);
        margin: auto;
    }
    
    .aside-layout {
        gap: var(--s-16);
        flex-direction: column-reverse;
    }
    
    .aside-layout > main {
        max-width: 100%;
    }
    
    .aside-layout > aside {
        flex: 0 0 100%;
        padding: var(--s-24) 0 0 0;
    }
    
    #quick-summary {
        width: 100%;
        position: static;
    }
    
    .home-carousel .image-carousel-btns, .side-banners {
        flex-direction: row;
    }
    
    .side-banner {
        min-height: 225px;
    }
    
    .home-carousel .image-carousel-btns a {
        width: max-content;
    }
    
    .home-carousel .image-carousel-content {
        padding: 0;
        order: 2;
        margin: var(--s-22) 0;
    }
    
    .home-carousel .image-coursel-image {
        order: 1;
    }
    
    .layout-hero-container {
        padding: 0 var(--s-20);
        text-align: left;
    }
    
    .layout-hero p, #sign-in form, .small-form {
        width: 100%;
        max-width: 100%;
    }
    
    #filter-attributes {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    #filter-attributes .toggle-container {
        flex: 0 0 25%;
    }
    
    #price-filter input {
        padding: var(--s-14) var(--s-20);
        font-size: var(--font-size--16);
    }
    
    #filter-attributes > p, #manufacturer-filter {
        flex: 0 0 100%;
    }
    
    #filter #side-banner {
        display: none;
    }
    
    #main-footer > div {
        flex: 0 0 100%;
    }
    
    #main-footer > div > nav {
        width: 100%;
    }
    
    #sub-footer > div {
        flex: 0 0 100%;
        justify-content: center;
        text-align: center;
    }
    
    #child-categories > a {
        width: auto;
        flex: 0 0 50%;
    }
    
    .breadcrumbs,.product-layout-controls {
        flex-wrap: wrap;
    }
    
    .product-layout-controls {
        gap: var(--s-32);
    }
    
    .load-more {
        padding: var(--s-14) var(--s-20);
        font-size: var(--font-size--16);
    }
    
    #paging,.load-more {
        flex: 0 0 100%;
        margin: var(--s-16) 0;
        justify-content: center;
    }
    
    #paging a, #manufacturer-filter label, #filter-attributes > a {
        padding: var(--s-8) var(--s-14);
        font-size: var(--s-16);
    }
    
    .breadcrumbs > a {
        font-size: var(--font-size--16);
    }
    
    .cart-layout-item-header {
        display: none;
    }
    
    .cart-item, #favourite-products .cart-item, #document-items .cart-item, #watchdog-products .cart-item {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto auto;
        gap: var(--s-8) var(--s-16);
    }
    
    #document-items .cart-item > span:last-of-type {
        grid-column: 1/7;
        grid-row: unset;
    }
    
    .cart-item .product-container-holder {
        grid-row: 1/3;
        align-self: center;
    }
    
    .cart-item-stock {
        grid-column: 2/6;
    }
    
    #favourite-products .cart-item button, #watchdog-products .cart-item button {
        width: 44px;
        height: 44px;
        border-radius: 22px;
    }
    
    .cart-item-quantity, .cart-item > p > button, .cart-item > button, #favourite-products .cart-item > p:last-of-type, #watchdog-products .cart-item > p:last-of-type {
        grid-column: 6;
        grid-row: 1;
        align-self: start;
    }
    
    #withdrawal .checkbox-container {
        grid-row: 1/3;
    }
    
    #withdrawal .cart-item {
        grid-template-columns: 45px 1fr 1fr 75px;
    }
    
    #withdrawal .cart-item-stock {
        grid-column: 2/5;
        grid-row: 1;
    }
    
    #withdrawal .cart-item > p:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }
    
    #withdrawal #watchdog-products .cart-item > p:last-of-type {
        grid-column: 3;
        grid-row: 2;
        gap: 0;
        align-self: end;
    }
    
    #withdrawal .cart-item-quantity {
        grid-column: 4;
        grid-row: 2;
    }
    
    .cart-item-quantity {
        width: 100%;
        grid-row: 2;
    }
    
    .cart-item > p:nth-of-type(2) {
        grid-column: 2/4;
    }
    
    .cart-final-price.double-price {
        grid-column: 4/6;
    }
    
    #cart-summary-controls {
        flex-direction: row-reverse;
        gap: var(--s-22);
    }
    
    #cart-summary-widget > p {
        margin: var(--s-8) 0;
    }
    
    #sign-as-customer {
        flex-direction: column;
    }
    
    #company-benefits .main-sizing {
        padding: var(--s-32) var(--s-20);
    }
    
    footer {
        padding: var(--s-44) var(--s-20);
    }
    
    footer .main-sizing {
        padding: 0;
    }
    
    #footer-form form input[type="email"] {
        padding: var(--s-14) var(--s-20) var(--s-14) var(--s-44);
    }
    
    #contributions {
        text-align: center;
    }
    
}

@media only screen and (max-width: 700px) {
    
    .main-sizing {
        padding: 0 var(--s-10);
    }
    
    #cookie-consent-holder .modal-content,.modal-content {
        width: 90%;
        max-height: 80%;
        padding: var(--s-54) var(--s-22) var(--s-32) var(--s-22);
    }
    
    #cookie-consent-holder button {
        width: 100%;
        display: block;
    }
    
    #change-consent {
        left: 10px;
    }
    
    .modal-content .modal-close {
        top: var(--s-22);
        right: var(--s-10);
    }
    
    header,#sign-in-row-buttons {
        display: flex;
        flex-direction: column;
    }
    
    #header > .main-sizing {
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        justify-content: space-between;
    }
    
    #header form {
        grid-column: 1/3;
    }
    
    .search-result {
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto;
    }
    
    .search-result img {
        grid-row: 1/3;
    }
    
    .search-result span[class^='stock-'] { 
        margin-left: 0;
        margin-bottom: 0;
        display: block;
    }
    
    .search-result .price-tag {
        grid-column: 2;
        grid-row: 2;
    }
    
    #main-menu > .main-sizing {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0;
    }
    
    #main-menu > .main-sizing > nav {
        width: 100%;
        display: block;
        gap: 0;
    }
    
    #main-menu > .main-sizing > nav .dropdown-container {
        display: none;
    }
    
    #user-actions {
        width: 100%;
        padding: 0 var(--s-10);
        gap: var(--s-6);
        justify-content: end;
        position: relative;
    }
    
    #category-holder {
        padding: var(--s-44) var(--s-20) var(--s-44) var(--s-10);
        border-radius: var(--border-radius--xl);
    }
    
    #category-header {
        flex-direction: column;
        align-items: start;
    }
    
    #category-header h2 {
        order: 2;
    }
    
    #category-header .modal-close {
        order: 1;
        align-self: end;
    }
    
    #category-navigation li:before {
        display: none;
    }
    
    #category-navigation li {
        padding-left: var(--s-4);
    }
    
    .home-carousel .image-carousel-content > p > span:first-of-type, #injection-content h2 {
        font-size: var(--font-size--28);
    }
    
    .home-carousel .image-carousel-content > p > span:last-of-type {
        font-size: var(--font-size--20);
    }
    
    .home-carousel .image-carousel-content > p:not(:first-of-type) {
        font-size: var(--font-size--16);
    }
    
    .home-carousel .image-carousel-btns, .side-banners, #cart-summary-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .home-carousel .image-carousel-btns a {
        width: 100%;
    }
    
    .home-tile, .product-container, .category-container, .product-layout-grid.triple .product-container, .product-layout-grid.triple .post-thumbnail {
        flex: 0 0 100%;
    }
    
    .content-row-title {
        display: block;
    }
    
    .product-container {
        box-shadow: 0 0 30px var(--color-shadow--product);
        position: relative;
    }
    
    .product-container-holder {
        position: static;
    }
    
    .product-container-ctas button, .product-container-ctas input[type="button"],.content-row-title > a {
        font-size: var(--font-size--16);
    }
    
    .content-row-title > a {
        margin-top: var(--s-16);
    }
    
    .product-container-info {
        padding: var(--s-20) var(--s-20) var(--s-72) var(--s-20);
    }
    
    .product-container-holder .product-container-ctas,.product-container:hover .product-container-ctas {
        bottom: var(--s-16);
        gap: var(--s-22);
    }
    
    .product-container-ctas button, .product-container-ctas input[type="button"] {
        width: 100%;
        padding: var(--s-8) var(--s-12);
        justify-content: center;
    }
    
    #product-cart-controls > button, #product-cart-controls > a {
        justify-content: center;
    }
    
    .product-copy-container .product-copy {
        opacity: 1;
        visibility: visible;
        right: 0;
    }
    
    #injection-banner > .main-sizing {
        padding: var(--s-60) var(--s-10);
    }
    
    #injection-content p:last-of-type, #footer-form form, #news-form-container form, #product-addins, #product-controls, .product-toggle, .v-scroll-holder {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
    }
    
    #news-form-banner > .main-sizing {
        padding: var(--s-60) var(--s-10);
    }
    
    #news-form-container {
        width: 100%;
        padding: var(--s-32) var(--s-20);
        text-align: left;
    }
    
    #footer-form form input[type="email"], #news-form-container form input[type="email"] {
        border-radius: var(--border-radius--md);
    }
    
    #footer-form form input[type="submit"], #news-form-container form input[type="submit"] {
        width: 100%;
        padding: var(--s-14) var(--s-20);
        font-size: var(--font-size--16);
        margin-top: var(--s-8);
        border-radius: var(--border-radius--md);
    }
    
    #footer-form form svg, #news-form-container form svg {
        top: 17px;
        transform: none;
    }
    
    .product-layout-grid {
        gap: var(--s-24);
    }
    
    .product-container-info {
        gap: var(--s-6);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        text-align: left;
    }
    
    .product-container-info > *, .company-benefit {
        flex: 0 0 100%;
    }
    
    .product-container-info > p:first-of-type {
        text-align: left;
        order: 1;
    }
    
    .product-copy-container {
        padding: 0 var(--s-22) 0 0;
        order: 2;
    }
    
    .product-container-rating {
        margin: 0;
        order: 3;
    }
    
    .product-container-info > p:last-of-type {
        margin-bottom: 0;
        flex: 0 0 calc(50% - var(--s-6));
        order: 4;
        align-self: center;
    }
    
    .product-container-prices {
        flex: 0 0 calc(50% - var(--s-6));
        order: 5;
        justify-content: end;
        text-align: right;
    }
    
    #company-benefits .main-sizing {
        padding: var(--s-32) 0;
    }
    
    .company-benefit > p {
        right: 10px;
    }
    
    #main-footer > div > nav {
        display: flex;
        flex-wrap: wrap;
    }
    
    #footer-payments, #paging {
        flex-wrap: wrap;
    }
    
    #footer-payments > p, #paging > a:first-of-type, #paging > a:last-of-type {
        text-align: center;
        flex: 0 0 100%;
    }
    
    #sign-in form, .small-form {
        padding: 0;
        border: none;
    }
    
    #quick-summary-container, .product-info-container {
        padding: var(--s-20) var(--s-10);
        border: none;
    }
    
    #filter-attributes .toggle-container {
        flex: 0 0 50%;
    }
    
    #price-filter, #product-ctas, .basic-delivery-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
    }
    
    .basic-delivery-row p:last-of-type {
        grid-row: unset;
    }
    
    #child-categories > a, #feedback-list {
        flex: 0 0 100%;
    }
    
    #product-carousel-container {
        width: 100%;
    }
    
    .modal-content:has(.image-carousel) {
        height: clamp(20%,350px,90%);
    }
    
    #product-main-info h1 {
        font-size: var(--font-size--22);
    }
    
    #product-addins {
        gap: var(--s-16);
    }
    
    #product-cart-controls {
        width: 100%;
    }
    
    #product-cart-controls > input {
        max-width: 100%;
        flex: 0 0 calc(40% - var(--s-4));
    }
    
    #product-cart-controls > button, #product-cart-controls > a {
        flex: 0 0 calc(60% - var(--s-4));
    }
    
    .feedback-holder {
        width: 100%;
        flex: 0 0 calc(100% - var(--s-6));
    }
    
    .quick-overview-data .cart-overview-item {
        grid-template-columns: 44px 1fr 1fr;
        grid-template-rows: auto auto;
    }
    
    .quick-overview-data .cart-overview-item .product-image {
        grid-row: 1/3;
    }
    
    .quick-overview-data .cart-overview-item > p:first-of-type {
        grid-column: 2/4;
        grid-row: 1;
    }
    
    .quick-overview-data .cart-overview-item > p:nth-of-typ(2) {
        grid-column: 2;
        grid-row: 2;
    }
    
    .quick-overview-data .cart-overview-item > p:nth-of-type(3) {
        grid-column: 3;
        grid-row: 2;
    }
    
    .quick-overview-data .cart-overview-item p:nth-of-type(2) {
        text-align: left;
    }
    
    .cart-item {
        padding: var(--s-20) var(--s-10);
        gap: var(--s-16);
    }
    
    .cart-item .product-container-holder {
        grid-column: 1/7;
        grid-row: 1;
    }
    
    .cart-item .product-image {
        width: 80px;
    }
    
    .cart-item-stock {
        grid-column: 1/7;
        grid-row: 2;
    }
    
    .cart-item > p:nth-of-type(2) {
        grid-column: 1/4;
        grid-row: 3;
    }
    
    .cart-final-price.double-price {
        grid-column: 4/7;
        grid-row: 3;
        text-align: right;
    }
    
    .cart-item > p > button, .cart-item > button, #favourite-products .cart-item > p:last-of-type {
        margin-top: var(--s-8);
        grid-column: 4/7;
        grid-row: 4;
        align-self: start;
        justify-self: end;
    }
    
    #watchdog-products .cart-item .cart-final-price {
        grid-column: 4/7;
        grid-row: 3;
        gap: 0;
        align-self: center;
        justify-self: end;
    }
    
    .cart-item-quantity {
        grid-column: 1/4;
        grid-row: 4;
    }
    
    #document-items .cart-item > span:last-of-type:last-of-type {
        justify-self: start;
    }
    
    #document-items .cart-item .text-center {
        text-align: left;
    }
    
    .cart-delivery-payment {
        padding: var(--s-8) var(--s-12);
        grid-template-columns: 20px 64px 1fr;
        grid-template-rows: auto auto auto;
        gap: 0 var(--s-12);
    }
    
    .cart-delivery-payment .checkmark {
        grid-column: 1;
        grid-row: 1;
    }
    
    .cart-delivery-payment-img {
        width: 64px;
        grid-column: 2;
        grid-row: 1;
    }
    
    .cart-delivery-payment > span:nth-of-type(2) {
        margin-left: var(--s-32);
        grid-column: 1/4;
        grid-row: 2;
    }
    
    .cart-delivery-payment > span:nth-of-type(3) {
        width: max-content;
        margin: var(--s-12) 0 var(--s-12) var(--s-32);
        padding: var(--s-8) var(--s-20);
        border-radius: var(--border-radius--max);
        background: var(--color-info-opacity--10);
        font-size: var(--font-size--16);
        color: var(--color-info--80);
        grid-column: 1/4;
        grid-row: 3;
        text-align: left;
        gap: 0;
    }
    
    .variant-wrapper {
        padding: var(--s-16) 0;
    }
    
    .variant-row {
        grid-template-columns: 1fr .5fr 32px 32px;
        grid-template-rows: auto auto auto;
    }
    
    .variant-row > p:nth-of-type(2) {
        grid-column: 1/4;
        grid-row: 2;
    }
    
    .variant-row > p:nth-of-type(3) {
        grid-column: 2/5;
        grid-row: 1;
        text-align: right;
    }
    
    .modal-content .variant-row input:not([type="submit"], [type="button"], [type="checkbox"]) {
        grid-column: 1/3;
        grid-row: 3;
    }
    
    .variant-row .stock-row {
        grid-column: 1/3;
        grid-row: 3;
    }
    
    .variant-row button {
        grid-column: 3;
        grid-row: 3;
    }
    
    .variant-row a {
        grid-column: 4;
        grid-row: 3;
    }
}

@media only screen and (max-width: 580px) {
    
    #snippet--flashMessages {
        height: 25vh;
    }
    
    .flash-message {
        padding: var(--s-20);
        border-radius: var(--border-radius--xl);
        grid-template-columns: auto;
        grid-template-rows: auto auto;
    }
    
    #header {
        padding: var(--s-32) 0;
    }
    
    #header > .main-sizing {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        justify-content: space-between;
    }
    
    #header form {
        grid-column: 1;
        grid-row: 2;
    }
    
    #logo {
        height: 44px;
        margin: auto;
        grid-row: 1;
    }
    
    #search-bar input {
        border: 1px solid transparent;
        background: var(--color-neutral-opacity--5);
    }
    
    #search-bar input:focus {
        border: 1px solid var(--color-info-opacity--30);
    }
    
    #shop-quick-info {
        display: none;
    }
    
    #main-menu > .main-sizing {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    
    #category-tree {
        width: 100%;
        grid-row: 2;
    }
    
    #user-actions {
        grid-row: 1;
        justify-content: space-between;
    }
    
    .document-wrapper {
        padding: var(--s-20);
    }
    
    .cart-item, #document-items .cart-item {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--s-16);
    }
    
    .cart-item .product-container-holder {
        align-self: start;
    }
    
    .cart-final-price.double-price {
        text-align: left;
    }
    
    .document-text-row, .document-flex {
        flex-direction: column;
    }
    
    .document-text-row > span:nth-of-type(2) {
        text-align: left;
    }
    
    .variant-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: var(--s-16);
    }
    
    .variant-row > p:first-of-type {
        grid-column: 1;
        grid-row: 2;
    }
    
    .variant-row > p:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }
    
    .variant-row > p:nth-of-type(2) {
        font-size: var(--font-size--16);
        grid-column: 1/3;
        grid-row: 1;
    }
    
    .modal-content .variant-row input:not([type="submit"], [type="button"], [type="checkbox"]) {
        width: 100%;
        grid-column: 1/3;
        grid-row: 3;
    }
    
    .variant-row button, .variant-row a, .modal-content .variant-row input:not([type="submit"], [type="button"], [type="checkbox"]) {
        height: 44px;
    }
    
    .variant-row button {
        width: 100%;
        grid-column: 1;
        grid-row: 4;
    }
    
    .variant-row a {
        width: 100%;
        grid-column: 2;
        grid-row: 4;
    }
    
    .variant-row > p:nth-of-type(2) *[class^='stock-'] {
        margin: var(--s-12) 0 0 0;
        display: block;
    }
    
    #product-watchdog-container {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--s-16);
    }
    
    .overview-holder > ul {
        margin-top: var(--s-10);
        margin-left: var(--s-10);
    }
    
    .overview-holder ul ul, .overview-holder li:has(ul) {
        padding-left: var(--s-4);
    }
    
    .company-benefit {
        padding: var(--s-20);
    }
    
    .company-benefit > p {
        display: none;
    }
    
    .modal-size {
        padding: var(--s-30) var(--s-10);
        overflow-y: auto;
    }
    
    .modal-content {
        max-height: 90dvh;
    }
    
    #product-share-buttons > div {
        left: var(--s-20);
        right: auto;
        flex-direction: column;
    }
}