/* ==========================================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE
   DESKTOP RESPONSIVE CSS

   File:
   /home/jqkmqvml/public_html/assets/css/responsive/desktop.css

   Desktop breakpoint:
   >= 1024px

   IMPORTANT:
   - No marketplace/demo/fake data
   - No hardcoded vendors/businesses/products
   - Data must come from API/database through JS
   - This file controls presentation/layout only
   ========================================================================== */


/* ==========================================================================
   1. DESKTOP BASE
   ========================================================================== */

@media (min-width: 1024px) {

    html {
        font-size: 16px;
    }

    body {
        min-width: 1024px;
        overflow-x: hidden;
    }

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

    button,
    input,
    select,
    textarea {
        font: inherit;
    }


    /* =========================================================================
       2. CONTAINERS
       ========================================================================= */

    .container {
        width: min(100% - 48px, 1200px);
        margin-inline: auto;
    }

    .container-sm {
        width: min(100% - 48px, 900px);
        margin-inline: auto;
    }

    .container-md {
        width: min(100% - 48px, 1050px);
        margin-inline: auto;
    }

    .container-lg {
        width: min(100% - 48px, 1400px);
        margin-inline: auto;
    }

    .container-xl {
        width: min(100% - 48px, 1600px);
        margin-inline: auto;
    }

    .container-fluid {
        width: 100%;
        padding-inline: 24px;
    }

    .page-container {
        width: min(100% - 48px, 1200px);
        margin-inline: auto;
    }

    .section {
        width: 100%;
        padding-block: 48px;
    }

    .section-sm {
        padding-block: 32px;
    }

    .section-lg {
        padding-block: 72px;
    }


    /* =========================================================================
       3. GLOBAL DESKTOP GRID
       ========================================================================= */

    .desktop-grid {
        display: grid;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }

    .grid-5 {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }

    .grid-6 {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
    }


    /* =========================================================================
       4. MAIN PAGE LAYOUTS
       ========================================================================= */

    .page-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .page-layout--sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 28px;
    }

    .page-layout--left-sidebar {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 28px;
    }

    .page-layout--wide-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 30px;
    }

    .page-layout--two-sidebar {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr) 260px;
        gap: 24px;
    }

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

    .sidebar {
        min-width: 0;
    }


    /* =========================================================================
       5. TOPBAR
       ========================================================================= */

    .topbar {
        width: 100%;
    }

    .topbar-inner {
        width: min(100% - 48px, 1400px);
        min-height: 40px;
        margin-inline: auto;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .topbar-left,
    .topbar-right {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .topbar-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
    }


    /* =========================================================================
       6. HEADER
       ========================================================================= */

    .site-header,
    .header {
        width: 100%;
        position: relative;
        z-index: 1000;
    }

    .header-inner {
        width: min(100% - 48px, 1400px);
        min-height: 76px;
        margin-inline: auto;

        display: flex;
        align-items: center;
        gap: 24px;
    }

    .header-brand {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    .header-logo {
        display: block;
        width: auto;
        max-width: 230px;
        max-height: 58px;
        object-fit: contain;
    }

    .header-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-actions {
        flex: 0 0 auto;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .header-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 42px;
        min-height: 42px;
    }


    /* =========================================================================
       7. NAVIGATION
       ========================================================================= */

    .navigation,
    .main-navigation {
        width: 100%;
    }

    .navigation-list,
    .nav-list {
        margin: 0;
        padding: 0;

        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;

        list-style: none;
    }

    .navigation-item,
    .nav-item {
        position: relative;
        flex: 0 0 auto;
    }

    .navigation-link,
    .nav-link {
        min-height: 44px;
        padding: 10px 14px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        white-space: nowrap;
        text-decoration: none;
    }

    .nav-dropdown {
        position: absolute;
        top: 100%;
        left: 0;

        min-width: 220px;
        padding: 8px;

        display: none;
        z-index: 1100;
    }

    .nav-item:hover > .nav-dropdown,
    .nav-item:focus-within > .nav-dropdown {
        display: block;
    }

    .nav-dropdown-item {
        display: block;
        width: 100%;
    }

    .nav-dropdown-link {
        display: flex;
        align-items: center;
        gap: 8px;

        width: 100%;
        padding: 10px 12px;
        text-decoration: none;
    }


    /* =========================================================================
       8. SEARCH BOX
       ========================================================================= */

    .search-section {
        width: 100%;
    }

    .search-box {
        width: 100%;
    }

    .search-box-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px 150px;
        align-items: stretch;
        gap: 10px;
    }

    .search-field,
    .search-location,
    .search-button {
        min-height: 52px;
    }

    .search-field {
        min-width: 0;
    }

    .search-input {
        width: 100%;
        min-height: 52px;
        padding-inline: 16px;
    }

    .search-location {
        min-width: 0;
    }

    .search-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        padding-inline: 20px;
        white-space: nowrap;
    }


    /* =========================================================================
       9. SEARCH AUTOCOMPLETE
       ========================================================================= */

    .search-autocomplete {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;

        max-height: 480px;
        overflow-y: auto;

        z-index: 2000;
    }

    .search-autocomplete-item {
        display: flex;
        align-items: center;
        gap: 12px;

        padding: 12px 14px;
    }

    .search-autocomplete-content {
        min-width: 0;
        flex: 1;
    }

    .search-autocomplete-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* =========================================================================
       10. LOCATION SELECTOR
       ========================================================================= */

    .location-selector {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .location-selector-button {
        min-height: 44px;
        padding: 9px 14px;

        display: inline-flex;
        align-items: center;
        gap: 8px;

        white-space: nowrap;
    }

    .location-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;

        width: 360px;
        max-height: 500px;

        overflow-y: auto;
        z-index: 1500;
    }


    /* =========================================================================
       11. HERO
       ========================================================================= */

    .hero {
        width: 100%;
    }

    .hero-inner {
        min-height: 420px;

        display: flex;
        align-items: center;
    }

    .hero-content {
        width: min(100%, 760px);
    }

    .hero-title {
        max-width: 900px;
    }

    .hero-description {
        max-width: 760px;
    }

    .hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }


    /* =========================================================================
       12. BREADCRUMB
       ========================================================================= */

    .breadcrumb {
        width: 100%;
    }

    .breadcrumb-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .breadcrumb-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }


    /* =========================================================================
       13. FILTER PANEL
       ========================================================================= */

    .filter-panel {
        width: 100%;
    }

    .filter-panel--sticky {
        position: sticky;
        top: 90px;
        align-self: start;
    }

    .filter-group {
        padding: 16px 0;
    }

    .filter-options {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .filter-option {
        display: flex;
        align-items: center;
        gap: 9px;
    }


    /* =========================================================================
       14. SORT PANEL
       ========================================================================= */

    .sort-panel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .sort-controls {
        display: flex;
        align-items: center;
        gap: 10px;
    }


    /* =========================================================================
       15. RESULT HEADER
       ========================================================================= */

    .results-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;

        margin-bottom: 20px;
    }

    .results-summary {
        min-width: 0;
    }

    .results-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }


    /* =========================================================================
       16. BUSINESS / VENDOR / SERVICE / PRODUCT CARDS
       ========================================================================= */

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .business-card,
    .vendor-card,
    .service-card,
    .product-card {
        min-width: 0;
        height: 100%;

        display: flex;
        flex-direction: column;
    }

    .business-card__body,
    .vendor-card__body,
    .service-card__body,
    .product-card__body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .business-card__footer,
    .vendor-card__footer,
    .service-card__footer,
    .product-card__footer {
        margin-top: auto;
    }

    .card-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }


    /* =========================================================================
       17. FOUR-COLUMN CARD LAYOUT
       ========================================================================= */

    .business-grid--4,
    .vendor-grid--4,
    .service-grid--4,
    .product-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    /* =========================================================================
       18. DETAIL PAGES
       ========================================================================= */

    .detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 30px;
        align-items: start;
    }

    .detail-main {
        min-width: 0;
    }

    .detail-sidebar {
        min-width: 0;

        position: sticky;
        top: 90px;
    }

    .detail-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }

    .detail-header-content {
        min-width: 0;
        flex: 1;
    }

    .detail-actions {
        flex: 0 0 auto;

        display: flex;
        align-items: center;
        gap: 8px;
    }


    /* =========================================================================
       19. BUSINESS / VENDOR PROFILE
       ========================================================================= */

    .business-profile,
    .vendor-profile {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .business-profile__image,
    .vendor-profile__image {
        width: 180px;
        height: 180px;
        object-fit: cover;
    }

    .business-profile__content,
    .vendor-profile__content {
        min-width: 0;
    }

    .profile-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }


    /* =========================================================================
       20. PRODUCT DETAIL
       ========================================================================= */

    .product-detail {
        display: grid;
        grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.8fr);
        gap: 40px;
        align-items: start;
    }

    .product-gallery {
        min-width: 0;
    }

    .product-information {
        min-width: 0;
    }

    .product-gallery-main {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

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

    .product-gallery-thumbnails {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
    }

    .product-thumbnail {
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .product-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* =========================================================================
       21. CATEGORY
       ========================================================================= */

    .category-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }

    .category-card {
        min-width: 0;
    }


    /* =========================================================================
       22. LOCATION PAGES
       ========================================================================= */

    .location-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    .location-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 28px;
    }

    .location-map {
        min-height: 500px;
    }


    /* =========================================================================
       23. MAP SEARCH
       ========================================================================= */

    .map-search-layout {
        display: grid;
        grid-template-columns: 420px minmax(0, 1fr);
        height: calc(100vh - 140px);
        min-height: 620px;
    }

    .map-search-results {
        overflow-y: auto;
        min-width: 0;
    }

    .map-search-map {
        min-width: 0;
        min-height: 100%;
    }


    /* =========================================================================
       24. ENQUIRY / QUOTE
       ========================================================================= */

    .enquiry-layout,
    .quote-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 30px;
        align-items: start;
    }

    .enquiry-form,
    .quote-form {
        min-width: 0;
    }

    .enquiry-sidebar,
    .quote-sidebar {
        position: sticky;
        top: 90px;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .form-row--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    /* =========================================================================
       25. QUOTE RESULTS
       ========================================================================= */

    .quote-results {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .quote-compare {
        overflow-x: auto;
    }


    /* =========================================================================
       26. CART
       ========================================================================= */

    .cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 30px;
        align-items: start;
    }

    .cart-summary {
        position: sticky;
        top: 90px;
    }

    .cart-item {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr) auto;
        gap: 18px;
        align-items: center;
    }


    /* =========================================================================
       27. CHECKOUT
       ========================================================================= */

    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 30px;
        align-items: start;
    }

    .checkout-summary {
        position: sticky;
        top: 90px;
    }

    .checkout-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }


    /* =========================================================================
       28. ORDERS
       ========================================================================= */

    .orders-layout {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 28px;
    }

    .orders-navigation {
        position: sticky;
        top: 90px;
        align-self: start;
    }

    .order-detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 30px;
    }


    /* =========================================================================
       29. ACCOUNT
       ========================================================================= */

    .account-layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 30px;
        align-items: start;
    }

    .account-sidebar {
        position: sticky;
        top: 90px;
    }

    .account-content {
        min-width: 0;
    }

    .account-navigation {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .account-navigation a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 10px 12px;
    }


    /* =========================================================================
       30. MESSAGES / CHAT
       ========================================================================= */

    .messages-layout {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        min-height: 650px;
    }

    .conversation-list {
        overflow-y: auto;
    }

    .conversation {
        min-width: 0;

        display: flex;
        flex-direction: column;
    }

    .conversation-header {
        flex: 0 0 auto;
    }

    .conversation-messages {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }

    .conversation-composer {
        flex: 0 0 auto;
    }

    .chat-widget {
        position: fixed;
        right: 24px;
        bottom: 24px;

        width: 380px;
        max-width: calc(100vw - 48px);

        z-index: 5000;
    }


    /* =========================================================================
       31. NOTIFICATIONS
       ========================================================================= */

    .notification-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;

        width: 380px;
        max-height: 520px;

        overflow-y: auto;
        z-index: 3000;
    }


    /* =========================================================================
       32. REVIEWS
       ========================================================================= */

    .review-summary {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 30px;
        align-items: center;
    }

    .review-list {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }


    /* =========================================================================
       33. PRICING
       ========================================================================= */

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        align-items: stretch;
    }

    .pricing-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pricing-card {
        height: 100%;

        display: flex;
        flex-direction: column;
    }

    .pricing-card__body {
        flex: 1 1 auto;
    }


    /* =========================================================================
       34. PROMOTIONS
       ========================================================================= */

    .promotion-grid,
    .offer-grid,
    .deal-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }


    /* =========================================================================
       35. POSTS
       ========================================================================= */

    .post-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .post-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 30px;
    }


    /* =========================================================================
       36. MEDIA GALLERY
       ========================================================================= */

    .media-gallery {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .media-gallery-item {
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .media-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* =========================================================================
       37. MODAL
       ========================================================================= */

    .modal-dialog {
        width: min(90vw, 720px);
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-dialog--sm {
        width: min(90vw, 460px);
    }

    .modal-dialog--lg {
        width: min(92vw, 1000px);
    }

    .modal-dialog--xl {
        width: min(94vw, 1280px);
    }


    /* =========================================================================
       38. PAGINATION
       ========================================================================= */

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        margin-top: 30px;
    }

    .pagination-item,
    .pagination-link {
        min-width: 40px;
        min-height: 40px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    /* =========================================================================
       39. TABLES
       ========================================================================= */

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .data-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
    }

    .data-table th,
    .data-table td {
        padding: 12px 14px;
        vertical-align: middle;
        text-align: left;
    }


    /* =========================================================================
       40. FOOTER
       ========================================================================= */

    .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr repeat(4, 1fr);
        gap: 30px;
    }

    .footer-column {
        min-width: 0;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }


    /* =========================================================================
       41. COOKIE / CONSENT
       ========================================================================= */

    .cookie-banner {
        position: fixed;
        left: 24px;
        right: 24px;
        bottom: 24px;

        z-index: 6000;
    }

    .cookie-banner-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .cookie-banner-content {
        min-width: 0;
        flex: 1;
    }

    .cookie-banner-actions {
        flex: 0 0 auto;

        display: flex;
        align-items: center;
        gap: 10px;
    }


    /* =========================================================================
       42. EMPTY / ERROR STATES
       ========================================================================= */

    .empty-state,
    .error-state {
        min-height: 280px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;
        padding: 40px;
    }

    .empty-state__content,
    .error-state__content {
        width: min(100%, 560px);
    }


    /* =========================================================================
       43. LOADER
       ========================================================================= */

    .page-loader {
        min-height: 300px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loading-overlay {
        position: fixed;
        inset: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 10000;
    }


    /* =========================================================================
       44. VERIFICATION
       ========================================================================= */

    .verification-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 30px;
        align-items: start;
    }

    .verification-sidebar {
        position: sticky;
        top: 90px;
    }


    /* =========================================================================
       45. ONBOARDING
       ========================================================================= */

    .onboarding-layout {
        width: min(100%, 960px);
        margin-inline: auto;
    }

    .onboarding-steps {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 35px;
    }

    .onboarding-step {
        flex: 1;
        min-width: 0;
        text-align: center;
    }


    /* =========================================================================
       46. LOGIN / AUTH
       ========================================================================= */

    .auth-layout {
        min-height: calc(100vh - 160px);

        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(400px, 520px);
        align-items: center;
        gap: 60px;
    }

    .auth-content {
        min-width: 0;
    }

    .auth-form {
        width: 100%;
    }


    /* =========================================================================
       47. BUTTON GROUPS
       ========================================================================= */

    .button-group {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .button-group--right {
        justify-content: flex-end;
    }

    .button-group--center {
        justify-content: center;
    }


    /* =========================================================================
       48. FLEX UTILITIES
       ========================================================================= */

    .desktop-flex {
        display: flex;
    }

    .desktop-flex-row {
        display: flex;
        flex-direction: row;
    }

    .desktop-flex-column {
        display: flex;
        flex-direction: column;
    }

    .desktop-align-center {
        align-items: center;
    }

    .desktop-justify-between {
        justify-content: space-between;
    }

    .desktop-justify-center {
        justify-content: center;
    }

    .desktop-gap-sm {
        gap: 8px;
    }

    .desktop-gap-md {
        gap: 16px;
    }

    .desktop-gap-lg {
        gap: 24px;
    }

    .desktop-gap-xl {
        gap: 32px;
    }


    /* =========================================================================
       49. DESKTOP VISIBILITY
       ========================================================================= */

    .mobile-only {
        display: none !important;
    }

    .tablet-only {
        display: none !important;
    }

    .desktop-only {
        display: initial;
    }

    .desktop-hidden {
        display: none !important;
    }


    /* =========================================================================
       50. ACCESSIBILITY
       ========================================================================= */

    :focus-visible {
        outline-width: 3px;
        outline-style: solid;
        outline-offset: 3px;
    }

    .skip-link {
        position: absolute;
        left: -9999px;
        top: 10px;
        z-index: 99999;
    }

    .skip-link:focus {
        left: 10px;
    }


    /* =========================================================================
       51. REDUCED MOTION
       ========================================================================= */

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}


/* ==========================================================================
   52. LARGE DESKTOP TUNING
   ========================================================================== */

@media (min-width: 1280px) {

    .container {
        width: min(100% - 64px, 1200px);
    }

    .container-lg {
        width: min(100% - 64px, 1400px);
    }

    .header-inner,
    .topbar-inner {
        width: min(100% - 64px, 1400px);
    }

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .location-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


/* ==========================================================================
   53. VERY LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1536px) {

    .container {
        max-width: 1280px;
    }

    .container-lg {
        max-width: 1480px;
    }

    .container-xl {
        max-width: 1680px;
    }

    .header-inner,
    .topbar-inner {
        max-width: 1480px;
    }

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 26px;
    }

    .product-detail {
        grid-template-columns: minmax(520px, 1fr) minmax(420px, 0.8fr);
    }

    .map-search-layout {
        grid-template-columns: 480px minmax(0, 1fr);
    }
}


/* ==========================================================================
   54. ULTRA-WIDE DESKTOP
   ========================================================================== */

@media (min-width: 1920px) {

    .container {
        max-width: 1400px;
    }

    .container-lg {
        max-width: 1600px;
    }

    .container-xl {
        max-width: 1800px;
    }

    .header-inner,
    .topbar-inner {
        max-width: 1600px;
    }

    .business-grid,
    .vendor-grid,
    .service-grid,
    .product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .location-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}