:root {
    --max-content-width: 1440px;
    --max-paragraph-width: 60ch;

    --regular: 400;
    --medium: 475;
    --semibold: 500;
    --bold: 550;

    --gap-50: 2px;
    --gap-100: 4px;
    --gap-200: 8px;
    --gap-300: 12px;
    --gap-400: 16px;
    --gap-500: 20px;
    --separator-gap: 1px;

    --radius-100: 1px;
    --radius-200: calc(var(--radius-100) + 1px);
    --radius-050: calc(var(--radius-100) - 1px);

    --paragraph-size: 16px;
    --paragraph-sml-size: 14px;
    --paragraph-lh: 1.5em;

    --margin-main: 2em;
    --margin-content: 2em;
    
    --mono-100: #000000;
    --mono-200: #4D4D4D;
    --mono-250: #999999;
    --mono-300: #CCCCCC;
    --mono-400: #E5E5E5;
    --mono-500: #FFFFFF;

    --semantic-error-100: #FF0000;
    --semantic-error-200: #FFE5E5;
    --semantic-error-300: #F27979;
    --semantic-error-400: #660000;
    --border-semantic-error: 0 0 0 1px var(--semantic-error-300) inset;

    --semantic-warning-100: #FFAA00;
    --semantic-warning-200: #FFEECC;
    --semantic-warning-300: #FFC34D;
    --semantic-warning-400: #594300;
    --border-semantic-warning: 0 0 0 1px var(--semantic-warning-300) inset;

    --semantic-info-100: #006AFF;
    --semantic-info-200: #E5F0FF;
    --semantic-info-300: #85B3F2;
    --semantic-info-400: #002A66;
    --border-semantic-info: 0 0 0 1px var(--semantic-info-300) inset;

    --semantic-success-100: #00D900;
    --semantic-success-200: #00D900;
    --semantic-success-300: #00D900;

    --nav-shadow-color: #0000000D;

    --app-bg-100: #FFFFFF;
    --app-bg-200: #F7F7F7;

    --announcement-bar-bg: #134031;
    --img-bg: var(--mono-400);
    --img-spinner: var(--mono-100);

    --separator: var(--mono-300);
    --top-separator: 0 1px 0 0 var(--separator) inset;
    --bottom-separator: 0 -1px 0 0 var(--separator) inset;

    --nav-padding: 12px;
    --nav-shadow: 0 1px 0 0 var(--separator), 0 3px 0 0 var(--nav-shadow-color);
    --nav-logo-size: 44px;
    --footer-logo-size: 36px;

    --card-padding: 1.5em;

    --btn-lh: 24px;
    --btn-padding: 16px 24px;
    --audio-btn-padding: 16px 20px;
    --btn-padding-sml: 10px 14px;
    --btn-padding-nano: 8px 12px;
    --btn-icn-padding: 19px;
    --btn-icn-padding-sml: 13px;
    --btn-icn-padding-nano: 7px;
    --btn-primary-default: unset;
    --btn-primary-hover: 0 0 0 2px var(--mono-100) inset, 0 0 0 3px var(--mono-500) inset;
    --btn-primary-active: 0 0 0 2px var(--mono-100) inset, 0 0 0 4px var(--mono-500) inset;
    --btn-secondary-default: 0 0 0 1px var(--separator) inset;
    --btn-secondary-hover: 0 0 0 2px var(--mono-100) inset;
    --btn-secondary-active: 0 0 0 3px var(--mono-100) inset;

    --input-lh: 24px;
    --input-padding: 10px 14px;
    --input-padding-nano: 4px 8px;
    --input-default: 0 0 0 1px var(--separator) inset;
    --input-focus: 0 0 0 2px var(--semantic-info-100) inset;
    --input-error-default: 0 0 0 1px var(--semantic-error-100) inset;
    --input-error-focus: 0 0 0 2px var(--semantic-error-100) inset;

    --tag-padding: 2px 6px;

    --global-focus: 0 0 0 2px #FF8000, 0 0 0 6px #FF800066;

    --table-default-bg: var(--app-bg-200);
    --table-hover-bg: var(--mono-400);
    --table-selected-bg: var(--mono-400);

    --opacity: 0.6;
}

@media (max-width: 860px) {
    :root {
        --max-content-width: 1440px;
        --max-paragraph-width: unset;

        --paragraph-size: 16px;
        --paragraph-sml-size: 14px;
        --paragraph-lh: 1.5em;

        --margin-main: 0em;
        --margin-content: 1em;

        --card-padding: 1em;

        --nav-logo-size: 40px;
        --footer-logo-size: 36px;
        
        --nav-padding: 12px;
    }
}
@font-face {
    font-family: "GoogleSans";
    src: url("/assets/typography/GoogleSansFlex-subset-400-550.woff2") format('woff2');
    font-display: swap;
    font-weight: 400 550;
    font-style: normal;
}

@font-face {
    font-family: "GoogleSansCode";
    src: url("/assets/typography/GoogleSansCode-subset-400-550.woff2") format('woff2');
    font-display: swap;
    font-weight: 400 550;
    font-style: normal;
}

/* global */
html,
body {
    font-family: "GoogleSans", serif, monospace;

    font-weight: var(--regular);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-lh);
    color: var(--mono-200);

    text-underline-position: from-font;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    /* font-variation-settings: 'opsz' 16; */
}

@media (orientation: landscape) {
    html,
    body {
        -webkit-text-size-adjust: 100%;
    }
}

* {
    scroll-margin-top: 12em;
}

h1,
h2,
h3,
h4 {
    width: fit-content;
    text-wrap: pretty;
    font-weight: var(--semibold);
    margin-top: 1.5em;
    margin-bottom: 0.25em;
}

h1 {
    font-weight: var(--bold);
    font-size: 38px;
    line-height: 1.15em;
    max-width: calc(var(--max-paragraph-width) / 2.25);
    color: var(--mono-100);

    & a {
        font-weight: var(--regular);
    }
}

h2 {
    font-weight: var(--regular);
    font-size: 26px;
    line-height: 1.25em;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: calc(var(--max-paragraph-width) / 1.5);
}

h3 {
    font-size: 20px;
    line-height: 1.25em;
    max-width: calc(var(--max-paragraph-width) / 1.5);
    color: var(--mono-100);

    & a {
        font-weight: var(--regular);
    }
}

h4 {
    font-size: 18px;
    line-height: 1.25em;
    max-width: calc(var(--max-paragraph-width) / 1.5);
    color: var(--mono-100);
}

@media (max-width: 860px) {
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }
}

p,
small,
strong {
    max-width: var(--max-paragraph-width);
    width: fit-content;
    text-wrap: pretty;
    white-space: pre-wrap;
}

p {
    line-height: var(--paragraph-lh);
    margin-top: 1em;
    margin-bottom: 1em;
}

strong {
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--medium);
    color: var(--mono-100);
}

small,
label {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 60ch;
    color: inherit;
}

small {
    font-weight: var(--regular);
    font-size: var(--paragraph-sml-size);
    line-height: var(--paragraph-lh);
}

p.error,
small.error {
    display: none;
    flex-direction: row;
    color: var(--semantic-error-100);
    font-weight: var(--regular);
    gap: var(--gap-100);
}

label {
    font-weight: var(--medium);
    font-size: var(--paragraph-size);
    line-height: var(--paragraph-lh);
    color: var(--mono-100);
    pointer-events: none;
}

span {
    display: inline-flex;
    height: fit-content;
}

.debug {
    background: rgba(255, 0, 0, 0.1) !important;
}

.flex {
    display: flex;
    background: rgba(255, 0, 0, 0.1) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation !important;
}

/* Honeypot form field */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body,
html {
    background-color: var(--app-bg-200);
}

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

section,
header,
footer,
nav {
    display: flex;
    flex-direction: column;
    padding-inline: var(--margin-main);
}

.content {
    display: flex;
    flex-direction: column;
    max-width: var(--max-content-width);
    padding-inline: var(--margin-content);
    position: relative;
    align-self: center;
    width: 100%;
}

header {
    margin: var(--margin-content) 0;
}

section {
    margin: 2em 0 var(--margin-content) 0;
}

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

nav {
    display: flex;
    flex-direction: column;
    padding: 0;

    position: sticky;
    top: 0;
    inset-inline: 0;
    z-index: 1000;

    box-shadow: var(--nav-shadow);

    & .announcement-bar {
        display: flex;
        flex-direction: column;

        padding: 8px var(--margin-main);
        background: var(--announcement-bar-bg);
        color: var(--mono-500);

        & small {
            max-width: unset;
            text-align: center;
            align-self: center;
        }
    }

    & .breadcrumbs {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 10;

        & .content {
            flex-direction: row;
            align-items: center;
        }

        padding: 8px var(--margin-main);
        background: var(--app-bg-100);

        box-shadow: var(--top-separator);

        & small {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            
            direction: rtl;
            text-align: left;

            line-height: unset;

            &:first-of-type {
                margin-right: 12px;
                margin-right: auto;
            }
        }
    }

    & .navigation {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 20;

        padding: var(--nav-padding) var(--margin-main);
        background: var(--app-bg-100);

        & .primary-frame {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--gap-300);

            & .language-picker {
                gap: var(--gap-100);
            }

            & .logo {
                color: var(--mono-100);
                margin-right: auto;

                & svg {
                    height: var(--nav-logo-size);
                    width: auto;
                }
            }

            & .quote-btn {
                & span[data-state="off"] {
                    display: inline-flex;
                }

                & span[data-state="on"] {
                    display: none;
                }

                &.active {
                    & span[data-state="off"] {
                        display: none;
                    }

                    & span[data-state="on"] {
                        display: inline-flex;
                    }
                }
            }

            & .menu-btn {
                display: none;

                & span[data-state="off"] {
                    display: none;
                }

                & span[data-state="on"] {
                    display: inline-flex;
                }

                &[aria-expanded='true'] span[data-state="off"] {
                    display: inline-flex;
                }

                &[aria-expanded='true'] span[data-state="on"] {
                    display: none;
                }
            }
        }

        & .secondary-frame {
            display: none;
            flex-direction: column;

            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            z-index: 30;

            background: var(--app-bg-100);
            box-shadow: var(--nav-shadow);
            padding: 0 var(--margin-main);

            & .standard-links-frame,
            & .social-links-frame,
            & .language-picker-frame {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: var(--gap-100);
                margin: 1em 0;
            }

            & .standard-links-frame {
                font-size: larger;
                line-height: var(--paragraph-lh);
            }

            &.active {
                display: flex;
            }
        }
    }
}

@media (max-width: 860px) {
    nav {
        & .navigation {
            & .primary-frame {
                & [data-group="desktop-nav"] {
                    display: none;
                }

                & .menu-btn {
                    display: flex;
                }
            }
        }
    }
}

/* @media (max-width: 860px) and (orientation: landscape) {
    nav {
        & .navigation {
            & .primary-frame {
                & [data-group="desktop-nav"] {
                    display: flex;
                }

                & .menu-btn {
                    display: none;
                }
            }
        }
    }
} */

footer {
    padding-top: var(--margin-content);
    padding-bottom: calc(var(--margin-content) * 2);
    box-shadow: var(--top-separator);

    & .nav-block {
        display: flex;
        flex-direction: column;
        margin: 1em 0em;
    }

    & .logo {
        margin-right: auto;

        & svg {
            height: var(--footer-logo-size);
            width: auto;
        }
    }
}

svg,
svg * {
    display: inline-block;
    flex-shrink: 0;
    flex-grow: 0;

    color: currentColor;
    fill: currentColor;
}

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

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

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

.fotmt0 {
    & p:first-of-type {
        margin-top: 0 !important;
    }
}

.lotmt0 {
    & p:last-of-type {
        margin-top: 0 !important;
    }
}

.fotmb0 {
    & p:first-of-type {
        margin-bottom: 0 !important;
    }
}

.lotmb0 {
    & p:last-of-type {
        margin-bottom: 0 !important;
    }
}

.ns {
    user-select: none;
    -webkit-user-select: none;
}

.sv {
    width: 1px;
    min-height: 100%;
    align-self: stretch;
    background: var(--separator);
}

.sh {
    height: 1px;
    min-width: 100%;
    background: var(--separator);
}

.monospaced {
    font-family: "GoogleSansCode";
    font-weight: var(--regular);
}

a,
button,
summary {
    &:focus-visible {
        &::after {
            content: '';
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -1px;
            right: -1px;
            box-shadow: var(--global-focus);
            border-radius: var(--radius-200);
            z-index: 900;
        }
    }
}

.spinner {
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;

    position: absolute;

    width: fit-content;
    height: fit-content;

    & svg {
        color: currentColor;
        fill: currentColor;
        animation: spinner-rotation 0.560s ease-in-out infinite;
    }
}

@keyframes spinner-rotation {
    to {
        transform: rotate(360deg);
    }
}

a,
button,
input,
textarea {
    all: unset;
    cursor: pointer;
    width: fit-content;
    height: fit-content;
}

a,
button {
    position: relative;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-200);

    & svg,
    & svg * {
        color: currentColor;
        fill: currentColor;
        flex: 0 0 auto;
    }

    &:disabled {
        text-decoration: line-through;
        cursor: not-allowed;
    }

    &.link {
        font-weight: var(--medium);
        text-decoration: underline;
        color: var(--mono-100);

        &.toggle.active {
            text-decoration: line-through;
        }

        &:active {
            opacity: var(--opacity);
        }

        &.sml {
            font-size: var(--paragraph-sml-size);
        }
    }

    &.btn-primary,
    &.btn-secondary,
    &.btn-icn-primary,
    &.btn-icn-secondary,
    &.btn-toggle,
    &.btn-icn-toggle {
        font-weight: var(--medium);
        line-height: var(--btn-lh);

        border-radius: var(--radius-100);
        margin: 1em 0em;

        user-select: none;
        -webkit-user-select: none;

        & .spinner {
            display: none;
            position: unset;

            & svg {
                animation-play-state: paused;
            }
        }

        &.is-loading {
            & .quote-icon {
                display: none;
            }

            .spinner {
                display: flex;

                & svg {
                    animation-play-state: running;
                }
            }
        }

        & .quote-icon {
            display: inline-flex;
        }

        &[data-state="out"] span.quote-icon[data-state="on"] {
            display: none;
        }

        &[data-state="in"] span.quote-icon[data-state="off"] {
            display: none;
        }

        &.ghost {
            box-shadow: unset;
            color: var(--mono-100);
            background: var(--mono-400);
        }

        &.invisible {
            box-shadow: unset;
            color: var(--mono-100);
            padding: 0 !important;
        }
    }

    &.btn-primary,
    &.btn-secondary,
    &.btn-toggle {
        padding: var(--btn-padding);

        &.sml {
            padding: var(--btn-padding-sml);
        }

        &.nano {
            padding: var(--btn-padding-nano);
        }
    }

    &.btn-icn-primary,
    &.btn-icn-secondary {
        padding: var(--btn-icn-padding);

        &.sml {
            padding: var(--btn-icn-padding-sml);
        }

        &.nano {
            padding: var(--btn-icn-padding-nano);
        }
    }

    &.btn-primary,
    &.btn-icn-primary {
        background: var(--mono-100);
        color: var(--mono-500);

        &:disabled {
            background: var(--mono-400);
            color: var(--mono-200);
        }
    }

    &.btn-secondary,
    &.btn-icn-secondary,
    &.btn-icn-toggle {
        color: var(--mono-100);
        box-shadow: var(--btn-secondary-default);

        &:disabled {
            color: var(--mono-200);
        }
    }

    &.btn-toggle {
         color: var(--mono-100);

         &.active {
            background: var(--mono-400);
         }
    }

    & .ripple {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: var(--semantic-info-100);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        pointer-events: none;
        z-index: 10000;
    }

    & .ripple.is-animating {
        animation: ripplePulse 520ms ease-out 1;
    }
}

@keyframes ripplePulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

a.ng {
    gap: unset;
}

@media (hover: hover) and (pointer: fine) {
    a,
    button {
        &.btn-primary,
        &.btn-icn-primary {
            &:hover:not([disabled]) {
                box-shadow: var(--btn-primary-hover);
            }

            &:active:not([disabled]) {
                box-shadow: var(--btn-primary-active);
            }
        }

        &.btn-secondary,
        &.btn-icn-secondary,
        &.btn-toggle,
        &.btn-icn-toggle {
            &:hover:not([disabled], .invisible, .ghost) {
                box-shadow: var(--btn-secondary-hover);
            }

            &:active:not([disabled], .invisible, .ghost) {
                box-shadow: var(--btn-secondary-active);
            }

            &.ghost:hover:not([disabled]) {
                background: var(--mono-300);
            }

            &.invisible:active:not([disabled]),
            &.ghost:active:not([disabled]) {
                opacity: var(--opacity);
            }
        }
    }
}

input,
textarea,
select {
    all: unset;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;

    box-shadow: var(--input-default);
    border-radius: var(--radius-100);
  
    background: var(--mono-500);
    color: var(--mono-100);

    &.input-error {
        box-shadow: var(--input-error-default);
        background: var(--semantic-error-200);
        color: var(--semantic-error-400);
    }

    &:focus {
        box-shadow: var(--input-focus);
        
        &.input-error {
            box-shadow: var(--input-error-focus);
        }
    }

    &:disabled {
        box-shadow: none;
        background: var(--mono-400);
        color: var(--mono-200);
        cursor: not-allowed;
    }

    &::placeholder {
        color: var(--mono-200);
        opacity: 1;
    }

    &::-webkit-input-placeholder {
        color: var(--mono-200);
    }

    &::-moz-placeholder {
        color: var(--mono-200);
        opacity: 1;
    }

    &:-ms-input-placeholder,
    &::-ms-input-placeholder {
        color: var(--mono-200);
    }

    &.input-error::placeholder {
        color: var(--semantic-error-400);
        opacity: 1;
    }

    &.input-error::-webkit-input-placeholder {
        color: var(--semantic-error-400);
    }

    &.input-error::-moz-placeholder {
        color: var(--semantic-error-400);
        opacity: 1;
    }

    &.input-error:-ms-input-placeholder,
    &.input-error::-ms-input-placeholder {
        color: var(--semantic-error-400);
    }

    /* Chrome, Safari, Edge, Opera */
    /* &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    } */

    /* Firefox */
    /* &[type=number] {
        -moz-appearance: textfield;
    } */
}

textarea {
    padding: var(--input-padding);
    line-height: var(--input-lh);
}

input,
select {
    padding: var(--input-padding);
    line-height: var(--input-lh);
    height: calc(var(--input-lh) + var(--input-padding) * 2);
    
    &.nano {
        padding: var(--input-padding-nano);
        line-height: var(--input-lh);
        height: calc(var(--input-lh) + var(--input-padding-nano) * 2);
    }
}

select {
    cursor: pointer;
}

.select-frame {    
    display: grid; 
    grid-template-areas: "stack";
    align-items: center;
    justify-items: stretch;

    color: var(--mono-100);

    & .chevron {
        grid-area: stack;
        justify-self: end;
        pointer-events: none;
        margin-right: var(--gap-300);
    }

    & select {
        grid-area: stack;
    }
}

@media (hover: hover) and (pointer: fine) {
    input,
    textarea,
    select {
        &:hover:not([disabled]) {
            box-shadow: var(--input-focus);

            &.input-error {
                box-shadow: var(--input-error-focus);
            }
        }
    }
}

.input-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 1em 0;

    gap: var(--gap-50);
}

.input-frame label {
    margin: 0;
}

.input-frame .error {
    max-width: unset;
}

.input-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1;
    gap: var(--gap-400);
}

.stepper-row {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: var(--gap-400);
    margin: 1em 0;

    & input,
    & button,
    & label {
        margin: 0;
    }

    & .stepper {
        display: flex;
        flex-direction: row;
        gap: var(--gap-100);
        
        & input {
            width: 80px;

            &.nano {
                width: 52px;
            }
        }
    }
}

@media (max-width: 860px) {
    & .input-row {
        gap: 0;
        flex-direction: column;
    }
}

form {
    display: flex;
    flex-direction: column;
    max-width: var(--max-paragraph-width);
}

.btn-row {
    display: flex;
    flex-direction: row;
    gap: var(--gap-300);

    margin-top: 1em;
    margin-bottom: 1em;

    & a,
    & button {
        margin: 0;
    }
}

@media (max-width: 860px) {
    .btn-row {
        display: flex;
        flex-direction: column;

        & a,
        & button {
            width: unset;
            justify-content: center;
        }
    }
}

ul {
    margin: 1em 0;
    list-style: none;
    padding-inline-start: 1em;
    list-style-type: "—";
    max-width: var(--max-paragraph-width);

    &.sml {
        font-size: var(--paragraph-sml-size);
        line-height: var(--paragraph-lh);
    }

    & li {
        padding-left: 0.5em;

        &::marker {
            font-weight: var(--bold);
        }
    }

    &.plain {
        list-style: none;
        list-style-type: none;
        padding-inline-start: 0;

        & li {
            padding-left: 0;
        }
    }
}

.table,
.faq,
.audio-player {
    display: flex;
    flex-direction: column;
    gap: var(--separator-gap);

    margin-top: 1em;
    margin-bottom: 1em;
    max-width: var(--max-paragraph-width);

    background: var(--separator);
    border: 1px solid var(--separator);
    border-radius: var(--radius-100);

    & .product-row,
    & .kb-row,
    & details,
    & .audio-controls,
    & .audio-tracklist .audio-track-item {
        background: var(--table-default-bg);
    }
}

.table {
    & .product-row,
    & .kb-row {
        display: flex;
        flex-direction: row;
        gap: var(--gap-200);

        & .details {
            display: flex;
            flex-direction: column;
            align-self: stretch;
            min-width: 0;
            flex: 1;

            & .title {
                font-weight: var(--bold);
                color: var(--mono-100);
            }
        }
    }

    & .product-row {
        padding: var(--gap-200);
    }

    & .kb-row {
        & a.trigger {
            gap: var(--gap-200);
        }
    }

    & .product-row {
        & .details {
            & .title,
            & .subtitle {
                margin-right: auto;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;
                
                direction: rtl;
                text-align: left;
            }

            & .subtitle {
                margin-bottom: auto;
            }
        }
    }

    & .kb-row {
        & a.trigger {
            align-items: flex-start;
            flex: 1;

            padding: var(--gap-200);
            padding-right: var(--gap-300);
        
            & .graphic {
                display: flex;

                overflow: hidden;
                border-radius: var(--radius-100);

                background: var(--mono-400);
                color: var(--mono-200);
            }

            & .details {
                & .subtitle {
                    margin-bottom: auto;

                    overflow: hidden;
                    display: -webkit-box;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    .table {
        & .kb-row {
            &:hover {
                background: var(--table-hover-bg);

                & .trigger {
                    & .graphic {
                        background: var(--mono-300);
                    }

                    & .details {
                        & .title {
                            text-decoration: underline;
                        }
                    }
                }
            }

            &:active {
                opacity: var(--opacity);
            }
        }
    }
}

.faq {
    & details {        
        position: relative;
        list-style: none;

        & .faq-body {
            padding: var(--btn-padding-sml);
        }

        & summary {
            position: relative;
            
            all: unset;
            user-select: none;
            -webkit-user-select: none;
            cursor: pointer;

            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            padding: var(--btn-padding-sml);
            gap: var(--gap-300);
            
            & svg {
                fill: var(--mono-100);
                color: var(--mono-100);
                flex-shrink: 0;
                display: inline-flex;
            }

            & p.title {
                flex: 1;
            }

            & .icon.is-open {
                display: none;
            }
        }

        &[open] .icon.is-open {
            display: inline-flex;
        }

        &[open] summary {
            border-bottom: var(--separator-gap) solid var(--separator);
            background: var(--table-selected-bg);
        }

        &[open]:last-child summary {
            /* border-radius: unset; */
        }

        &[open] .icon.is-closed {
            display: none;
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    & details {        
        & summary {
            &:hover {
                background: var(--table-hover-bg);
            }

            &:active {
                opacity: var(--opacity);
            }
        }
    }
}

.lazy-img {
    background-color: var(--img-bg);
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;

    border-radius: var(--radius-100);

    max-width: var(--max-content-width);
    align-self: center;

    &.crop {
        aspect-ratio: 16/6;

        & img {
            aspect-ratio: 16/6;
        }
    }

    & img {
        opacity: 0;

        display: block;
        width: 100%;
        height: 100%;
        transform: translateZ(0);

        object-fit: cover;
        aspect-ratio: 16/9;
    }

    & .spinner {
        color: var(--img-spinner);
    }

    &.loaded img {
        opacity: 1;
    }

    &.loaded .spinner {
        display: none;
    }

    &.thumb {
        width: 100px;
        aspect-ratio: 1/1;
        margin: 0;

        border-radius: var(--radius-100);

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

@media (max-width: 860px) {
    .lazy-img {
        aspect-ratio: 4/3;
        border-radius: unset;

        & img {
            aspect-ratio: 4/3;
        }

        &.crop {
            aspect-ratio: 4/3;

            & img {
                aspect-ratio: 4/3;
            }
        }
    }
}

.img-tag {
    width: 100%;
    text-align: center;
    padding-inline: var(--margin-content);
    font-style: italic;
    line-height: 1.0;
    margin-top: var(--gap-100);
}

.gallery {
    & ul {
        all: unset;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--gap-200);

        & li {
            display: flex;
            padding: 0;
        }

        & li.is-active {
            display: flex;
        }
    }

    & .controls {
        display: none;

        width: 100%;
        z-index: var(--z-index-medium);
        align-items: center;
        padding-inline: var(--margin-content);
        /* padding-top: var(--gap-200); */
        
        margin-top: 0.5em;
        margin-bottom: 0.5em;

        gap: var(--gap-200);

        & .gallery-counter-frame {
            display: flex;
            flex-direction: row;
            align-items: center;

            padding: var(--input-padding-nano);
            /* padding-left: 6px; */
            box-shadow: var(--input-default);
            border-radius: var(--radius-100);

            gap: var(--gap-100);
            width: fit-content;
            margin-right: auto;

            & small {
                margin: 0;

                &.counter-current,
                &.counter-total {
                    font-feature-settings: "tnum";
                    font-variant-numeric: tabular-nums;
                }
            }
        }

        & button {
            display: none;
        }
    }
}

.tag {    
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-100);
    
    background: var(--mono-400);
    padding: var(--tag-padding);
    border-radius: var(--radius-100);
    width: fit-content;
}

@media (max-width: 860px) {
    .gallery {
        & .gallery-counter-frame {
            display: flex;
        }

        & ul {
            flex-direction: row;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            /* -webkit-overflow-scrolling: touch; */
            scrollbar-width: none;
            -ms-overflow-style: none;

            &::-webkit-scrollbar {
                display: none;
            }

            & li,
            & li.is-active {
                display: flex;
                flex: 0 0 100%;
                scroll-snap-align: start;
            }
        }
        
        & .controls {
            display: flex;
        }
    }
}

.product-grid {
    position: relative;
    padding: 0;

    display: grid;
    grid-gap: var(--gap-300);
    align-content: start;
    align-items: stretch;
    overflow: visible;

    max-width: var(--max-content-width);
    align-self: center;
    width: 100%;

    margin: var(--margin-content) 0;
    padding-inline: var(--margin-content);

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

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

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

@media (max-width: 860px) {
    .product-grid {
        grid-template-columns: repeat(1, 1fr);
        padding-inline: unset;

        &.c2,
        &.c3,
        &.c4 {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

& a.product-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    height: unset;
    width: unset;

    & article {
        position: relative;
        flex: 1;
        flex-direction: column;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        width: 100%;
        background: var(--app-bg-100);

        border-radius: var(--radius-100);
        overflow: hidden;
        box-shadow: var(--nav-shadow);

        & .lazy-img {
            aspect-ratio: 16/9;
            border-radius: unset;

            img {
                aspect-ratio: 16/9;
            }
        }

        & .indicator {
            display: none;
            color: var(--semantic-error-100);

            &.is-visible {
                display: flex
            }
        }

        & .body-frame {
            padding: var(--card-padding);
            flex: 1;
            width: 100%;
            
            & p {
                margin-bottom: 2em;
            }

            display: flex;
            flex-direction: column;
            align-items: flex-start;

            & .info {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: auto;
            }
        }
    }
}

@media (max-width: 860px) {
    & a.product-card {
        & article {
            border-radius: unset;
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    & a.product-card {
        &:hover {
            & article {
                & .lazy-img {
                    & img {
                        opacity: var(--opacity);
                        filter: grayscale(1);
                    }
                }
            }
            /* & article {
                box-shadow: unset;
            }

            &::after {
                content: '';
                position: absolute;
                top: -1px;
                bottom: -1px;
                left: -1px;
                right: -1px;
                box-shadow: var(--global-focus);
                border-radius: var(--radius-200);
                z-index: 900;
            } */

            & h4 {
                text-decoration: underline;
            }
        }
    }
}

.audio-player {
    max-width: var(--max-paragraph-width);
    margin: 1em 0;

    & .audio-controls {
        display: flex;
        align-items: center;
        gap: var(--gap-400);

        padding: var(--btn-padding-sml);
        padding-left: 10px;

        & button {
            flex-shrink: 0;
            margin: 0;

            & [data-icon-stop] { display: none; }
            &.is-on [data-icon-play] { display: none; }
            &.is-on [data-icon-stop] { display: inline-flex; }
        }

        & .control-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--gap-100);
        }

        & [data-repeat] {
            color: var(--mono-250);

            &.is-on { 
                color: var(--mono-100); 
            }
        }
    }

    & .audio-scrubber {
        display: flex;

        --track-h: 32px; 
        --thumb-w: 2px;
        --progress-h: 8px;
        --thumb-h: calc(var(--progress-h) + 4px);
        
        position: relative;
        flex: 1;
        height: var(--track-h);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;

        & .audio-scrubber-track {
            flex: 1;

            position: relative;
            align-self: center;

            height: var(--progress-h);
            box-shadow: var(--input-default);
            border-radius: var(--radius-100);
            /* background: var(--mono-400); */

            & .audio-scrubber-progress {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 0%;
                background: var(--mono-100);
                pointer-events: none;
                border-radius: var(--radius-100);
            }
        }

        & .audio-scrubber-thumb {
            position: absolute;
            top: 50%;
            left: 0;
            width: var(--thumb-w);
            height: var(--thumb-h);
            transform: translate(-50%, -50%);
            pointer-events: none;

            background: var(--mono-100);
            border-radius: var(--radius-100);
        }
    }

    & .audio-time {
        color: var(--mono-200);
        flex-shrink: 0;

        & small {
            font-feature-settings: "tnum";
            font-variant-numeric: tabular-nums;
        }
    }

    & .audio-tracklist {
        list-style: none;
        padding: 0;
        margin: 0;

        display: flex;
        flex-direction: column;
        gap: var(--separator-gap);

        & .audio-track-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            min-width: 0;

            padding: var(--btn-padding-sml);
            gap: var(--gap-200);
            cursor: pointer;

            & .track-duration {
                flex-shrink: 0;
                font-feature-settings: "tnum";
                font-variant-numeric: tabular-nums;
            }

            & .track-playing-icon {
                display: none;
                flex-shrink: 0;
                line-height: 0;
            }

            & .track-title {
                margin-right: auto;
                display: block;
                flex: 1 1 auto;
                width: 0;
                min-width: 0;

                overflow:hidden;
                white-space:nowrap;
                text-overflow: ellipsis;
            }

            &.is-active {
                color: var(--mono-500);
                background: var(--mono-100);
                /* font-weight: var(--medium); */
                box-shadow: 0 0 0 1px var(--mono-100), 0 0 0 1px var(--mono-100) inset;

                & .track-playing-icon {
                    display: inline-flex;
                    align-items: center;
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine) {
    .audio-player .audio-tracklist .audio-track-item:hover:not(.is-active) {
        background: var(--mono-400);
    }

    .audio-player .audio-tracklist .audio-track-item:active:not(.is-active) {
        opacity: var(--opacity);
    }
}

/* @media (max-width: 860px) {
    .audio-player {
        & .audio-scrubber {
            --track-h: 18px;
        }
    }
} */

.footnote {
    margin: 0;
    box-shadow: var(--top-separator);
}

.bs {
    box-shadow: 0 1px 0 0 var(--separator);
}

@media (max-width: 860px) {
    .bs {
        box-shadow: unset;
    }
}

.product-details-frame {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: var(--max-content-width);

    align-self: center;

    & .product-gallery,
    & .product-details {
        padding: var(--margin-content);

        & header,
        & section {
            padding-inline: unset;
        }
    }

    & .product-gallery {
        box-shadow: 1px 0 0 0 var(--separator);

        & .gallery {
            position: sticky;
            top: calc(var(--sticky-position, 0px) + var(--margin-content));
        }
    }
}

@media (max-width: 860px) {
    .product-details-frame {
        grid-template-columns: repeat(1, 1fr);

        & .product-gallery {
            padding: 0;

            & .gallery {
                position: relative;
                top: 0;
            }
            
            padding-inline: unset;
            box-shadow: unset;
        }

        & .product-details {
            padding-bottom: 0;
        }
    }
}

.info-box {
    display: flex;
    flex-direction: column;

    max-width: var(--max-paragraph-width);
    padding: var(--btn-padding-sml);
    border-radius: var(--radius-100);

    &.info {
        box-shadow: var(--border-semantic-info);
        background: var(--semantic-info-200);
        color: var(--semantic-info-400);

        & a {
            color: var(--semantic-info-400);
        }
    }

    &.error {
        box-shadow: var(--border-semantic-error);
        background: var(--semantic-error-200);
        color: var(--semantic-error-400);

        & a {
            color: var(--semantic-error-400);
        }
    }

    &.warning {
        box-shadow: var(--border-semantic-warning);
        background: var(--semantic-warning-200);
        color: var(--semantic-warning-400);

        & a {
            color: var(--semantic-warning-400);
        }
    }
}