/* 0.9.4.9 - spójna warstwa responsywna i wybieralna skala tekstu */
:root {
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-gap-xs: .35rem;
    --ui-gap-sm: .55rem;
    --ui-gap-md: .85rem;
    --ui-gap-lg: 1.1rem;
}

html,
body { max-width: 100%; overflow-x: clip; }
body.ui-font-size-micro { font-size: 11.5px; }
body.ui-font-size-tiny { font-size: 12px; }
body.ui-font-size-xsmall { font-size: 12.5px; }
body.ui-font-size-small { font-size: 13px; }
body.ui-font-size-normal { font-size: 14px; }
body.ui-font-size-large { font-size: 16px; }

body input,
body select,
body textarea,
body button,
body .button { font-size: max(1em, 14px); }

body h1 { font-size: clamp(1.65rem, 3.1vw, 2.25rem); line-height: 1.08; }
body h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; }
body h3 { font-size: clamp(1.12rem, 2vw, 1.45rem); line-height: 1.2; }
body h4 { font-size: 1.05rem; line-height: 1.25; }
body .muted { font-size: .92em; }

main.container > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-gap-md);
    align-items: center;
}
main.container > header > * { min-width: 0; }
.app-brand,
.app-brand > div,
.header-actions { min-width: 0; }
.app-brand h1,
.app-brand .muted { overflow-wrap: anywhere; }

.main-menu {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .3rem;
}
.main-menu a {
    min-width: 0;
    padding-inline: .35rem;
    overflow-wrap: anywhere;
    text-align: center;
}

.card,
.next-step-box,
.prepared-card,
.settings-hub-grid > a { border-radius: var(--ui-radius-md); }
.card > :first-child,
.next-step-box > :first-child { margin-top: 0; }
.card > :last-child,
.next-step-box > :last-child { margin-bottom: 0; }

.responsive-table { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
img,
svg,
video,
canvas { max-width: 100%; }
pre,
code,
.log-agent,
.product-name,
.prepared-heading-content { overflow-wrap: anywhere; word-break: break-word; }

.variant-product-dialog-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: .65rem;
    align-items: start;
}
.variant-product-dialog-header > div { min-width: 0; padding-top: .15rem; }
.variant-product-dialog-header h2,
.variant-product-dialog-header p { max-width: 100%; overflow-wrap: anywhere; }
button.variant-product-dialog-close {
    position: relative;
    inset: auto;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
}

.manual-non-stock-values { display: grid; gap: .55rem; margin-bottom: .55rem; }
.manual-non-stock-value-row {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(7rem, .7fr) minmax(5rem, .55fr) 44px;
    gap: .5rem;
    align-items: end;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: var(--ui-radius-sm);
    background: var(--surface-soft);
}
.manual-non-stock-value-row label { min-width: 0; margin: 0; }
.manual-non-stock-value-row .manual-value-remove { width: 44px; min-width: 44px; padding: 0; }

@media (min-width: 1180px) {
    .container { width: min(1320px, 100%); }
    .settings-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .main-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .main-menu a { min-height: 38px; }
    .manual-non-stock-value-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manual-non-stock-value-row .manual-value-name { grid-column: 1 / -1; }
    .manual-non-stock-value-row .manual-value-remove { grid-column: 2; justify-self: end; }
}

@media (max-width: 640px) {
    body input,
    body select,
    body textarea,
    body button,
    body .button { font-size: max(1em, 13px); }
    main.container > header { padding: .55rem; }
    .main-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .main-menu a { padding: .48rem .2rem; font-size: .92em; }
    .variant-product-dialog-header {
        grid-template-columns: minmax(0, 1fr) 44px;
        top: -10px;
        margin: -10px -10px 10px;
        padding: 10px;
    }
    .manual-non-stock-value-row { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, .55fr); }
    .manual-non-stock-value-row .manual-value-name,
    .manual-non-stock-value-row label:nth-of-type(2) { grid-column: 1 / -1; }
    .manual-non-stock-value-row .manual-value-remove { grid-column: 2; }
}

@media (max-width: 380px) {
    .main-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .manual-non-stock-value-row { grid-template-columns: minmax(0, 1fr); }
    .manual-non-stock-value-row > * { grid-column: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}