/* Wspólna warstwa responsywna dla wszystkich widoków sklepu. */
html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    min-width: 320px;
}

main,
section,
article,
div,
form,
fieldset {
    min-width: 0;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

textarea {
    resize: vertical;
}

/* Spójne nagłówki z ikonami zamiast dekoracyjnych emotek. */
h1 > i:first-child,
h2 > i:first-child,
.card-title i {
    margin-right: 0.42em;
    color: var(--green-700);
}

.header-message-icon i,
.footer-column i,
.contact-info i,
#contact-btn-footer i {
    width: 1.1em;
    text-align: center;
}

.contact-info p {
    display: grid;
    grid-template-columns: 22px auto;
    align-items: start;
    column-gap: 8px;
}

.contact-info strong {
    grid-column: 2;
}

/* Konto i formularze, które wcześniej nie miały pełnych breakpointów. */
.account-page {
    padding: clamp(34px, 6vw, 68px) clamp(16px, 6vw, 10%);
}

.account-container {
    width: min(100%, 980px);
}

.account-grid {
    grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
}

.account-card,
.security-card,
.auth-box {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.account-card h2,
.security-card h2,
.auth-box h1 {
    color: var(--green-900);
}

.auth-page {
    padding: clamp(30px, 7vw, 64px) 16px;
}

.auth-box {
    padding: clamp(24px, 5vw, 40px);
    border-radius: var(--radius-lg);
}

.auth-box button,
.account-btn,
.security-btn,
.form-actions button {
    background: var(--green-700);
}

.auth-box button:hover,
.account-btn:hover,
.security-btn:hover,
.form-actions button:hover {
    background: var(--green-900);
}

/* Długie treści, ceny, numery i adresy nie rozsadzają kart. */
.account-row strong,
.checkout-product-copy,
.order-item-copy,
.cart-item-main,
.product-info,
.product-details,
.admin-header-copy {
    overflow-wrap: anywhere;
}

/* Bezpieczne przewijanie szerokich elementów. */
.admin-table-box,
.admin-users-table-box,
.admin-orders-table-wrap,
.specification-table,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    html {
        scroll-padding-top: 170px;
    }

    .navbar {
        padding-right: 16px;
        padding-left: 16px;
    }

    .nav-actions {
        gap: 8px;
    }

    .user-button {
        max-width: 170px;
    }

    .user-button:not(:focus) {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-box {
        max-height: calc(100vh - 32px);
        padding: 28px 22px;
        overflow-y: auto;
    }

    .account-side {
        grid-template-columns: 1fr;
    }

    .account-card,
    .security-card {
        padding: 22px;
        border-radius: var(--radius-md);
    }

    .account-header h1 {
        font-size: clamp(2rem, 10vw, 2.6rem);
    }

    .account-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .account-row strong {
        width: 100%;
        text-align: left;
    }

    .account-buttons,
    .security-actions,
    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-buttons > *,
    .security-actions > *,
    .form-actions > * {
        width: 100%;
    }
}

@media (max-width: 470px) {
    body {
        font-size: 0.96rem;
    }

    .navbar {
        gap: 10px;
    }

    .brand-area {
        justify-content: flex-start;
    }

    .logo {
        margin: 0 auto;
    }

    .nav-actions .header-icon {
        flex: 0 0 42px;
    }

    .login-btn,
    .user-button {
        flex: 1;
    }

    .auth-box h1,
    .security-card h2,
    .account-card h2 {
        font-size: 1.45rem;
    }

    .footer-container {
        width: min(100% - 32px, var(--container));
    }
}

/* Ostateczna korekta mobilnego nagłówka: logo po lewej, akcje po prawej. */
@media (max-width: 760px) {
    .navbar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .brand-area {
        order: 1;
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-start;
        margin: 0;
    }

    .brand-area .logo {
        margin: 0;
        flex-shrink: 1;
    }

    .mobile-header-actions {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
    }

    .nav-panel {
        order: 3;
    }
}

@media (max-width: 470px) {
    .brand-area .logo {
        margin: 0;
    }
}