html {
    width: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    max-width: 100%;
    overflow-x: clip;
}

img,
iframe,
video {
    max-width: 100%;
}

main,
section,
article,
.container,
.content,
.main-content {
    min-width: 0;
}

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

.signin-page {
    height: auto !important;
    min-height: 100vh;
    padding: 20px 16px;
}

.signin-page .signin-container {
    width: min(100%, 400px);
}

.b2b-dashboard .main-content {
    min-width: 0;
}

.b2b-dashboard .card,
.b2c-dashboard .order-tracking {
    max-width: 100%;
    overflow-x: auto;
}

.b2b-dashboard table,
.b2c-dashboard .order-tracking table {
    min-width: 620px;
}

.b2c-dashboard header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
}

.b2c-dashboard main {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0;
}

@media (max-width: 980px) {
    .nav-container {
        flex-wrap: wrap;
        gap: 12px;
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .nav-container > .main-nav,
    .nav-container > .nav-links {
        order: 3;
        display: flex !important;
        flex: 1 0 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .nav-container > .main-nav ul {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: 8px !important;
    }

    .nav-container > .main-nav a,
    .nav-container > .nav-links a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .nav-container > .action-links {
        margin-left: auto;
    }

    .shop-layout,
    .contact-wrap,
    .grid-two,
    .story-grid,
    .team-wrap,
    .checkout-layout,
    .admin-shell .grid,
    .main-grid,
    .dashboard-grid,
    .settings-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .shop-sidebar,
    .admin-shell .sidebar,
    .settings-shell .sidebar {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .wrapper {
        display: block !important;
    }

    .nav-group,
    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
        gap: 6px;
    }

    .nav-label {
        grid-column: 1 / -1;
    }

    .form-grid,
    .main-content,
    .content {
        min-width: 0;
    }

    .main-content,
    .content {
        padding: 18px !important;
    }

    .admin-shell .card,
    .wrapper .card {
        max-width: 100%;
        overflow-x: auto;
    }

    .admin-shell .card table,
    .wrapper .card table,
    .order-tracking table {
        min-width: 620px;
    }

    .topbar,
    .header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .topbar h1,
    .header h1 {
        font-size: clamp(1.4rem, 4vw, 2rem);
    }

    .settings-shell .sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .grid-two,
    .story-grid,
    .team-wrap,
    .contact-wrap,
    .checkout-layout,
    .shop-layout,
    .admin-shell .grid,
    .main-grid,
    .dashboard-grid,
    .settings-shell {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .modal-body {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .modal-image {
        min-height: 180px !important;
        height: 180px;
    }

    .modal-content h3 {
        font-size: 1.5rem !important;
    }

    .modal-row,
    .price-wrap {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .main-nav ul {
        justify-content: flex-start;
    }

    .page-hero {
        padding: 58px 18px !important;
    }

    .hero {
        padding: 76px 18px !important;
    }

    .section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .counter-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar,
    .admin-shell .topbar {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .container {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .nav-container {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .nav-container > .logo {
        font-size: clamp(20px, 6vw, 25px) !important;
    }

    .nav-container > .main-nav a,
    .nav-container > .nav-links a {
        padding: 8px 11px !important;
        font-size: .82rem;
    }

    .stats,
    .counter-wrap,
    .guest-grid,
    .address-preview,
    .field-grid,
    .form-grid,
    .settings-shell .sidebar-nav {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .success-box,
    .order-card,
    .tracking-box,
    .panel,
    .card,
    .faq-wrap {
        padding: 18px !important;
    }

    .page-wrap,
    .shop-wrap {
        padding-top: 36px !important;
        padding-bottom: 48px !important;
    }

    .modal {
        padding: 12px !important;
    }

    .modal-content {
        padding: 18px !important;
    }

    .modal-row {
        align-items: stretch;
        flex-direction: column;
    }

    .modal-cta,
    .buy-btn {
        width: 100%;
    }

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

    .shop-toolbar > *,
    .shop-toolbar .search-box,
    .shop-toolbar .sort-select {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .shop-toolbar .search-box {
        gap: 8px;
        padding: 10px;
    }

    .shop-toolbar .search-box input {
        min-width: 0;
        width: 0;
    }

    .shop-toolbar .search-box button {
        width: auto !important;
        flex: 0 0 auto;
        padding: 10px 12px !important;
    }

    .floating-actions {
        right: 14px !important;
        bottom: 14px !important;
    }

    .floating-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .footer-bottom,
    .footer-grid {
        overflow-wrap: anywhere;
    }

    .footer-container {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    .footer-container > *,
    .newsletter-box,
    .newsletter-box input {
        min-width: 0;
    }

    .footer-col a {
        overflow-wrap: anywhere;
    }

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

    .admin-shell .content,
    .content,
    .main-content {
        padding: 14px !important;
    }

    .admin-shell .sidebar,
    .settings-shell .sidebar {
        padding: 16px !important;
    }

    .b2b-dashboard .sidebar {
        height: auto !important;
        width: 100% !important;
    }

    .b2c-dashboard header nav {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .account-picker,
    .stats,
    .counter-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cart-item {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .cart-item img {
        width: 72px !important;
        height: 72px !important;
    }

    .cart-item .item-side {
        grid-column: 2;
        align-items: flex-start !important;
    }

    .btn-row,
    .actions {
        flex-direction: column;
    }

    .actions > *,
    .btn-row > * {
        width: 100%;
    }
}