/* General Mobile Styles */
body {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape mode */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    font-size: 1rem; /* Match root rem; readable with site.css html base */
    line-height: 1.5;
}

/* Touch-friendly elements */
button, a, .btn, .category-tile, .product-item {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation; /* Improve touch responsiveness */
}

/* Prevent text selection on interactive elements */
.category-tile, .btn, button {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    /* Prevent elements from stretching unnecessarily */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Ensure proper text wrapping */
    p, span, div, h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Text alignment - center headings on forms */
    .brand-title {
        text-align: center;
    }

    /* Links in forms - center */
    form + div .text-center a,
    .text-center a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Prevent full-width on text elements */
    .text-center {
        text-align: center;
    }

    /* Constrain all content areas */
    .mt-5.container {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Login/Register/Password Reset pages - compact and centered */
    .container[style*="max-width:400px"],
    .container[style*="max-width:500px"] {
        max-width: 90% !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Form inputs in login/register - don't stretch */
    .container[style*="max-width"] .form-control,
    .container[style*="max-width"] .form-select {
        max-width: 100%;
        width: 100%;
    }

    /* Form buttons - center */
    .container[style*="max-width"] form .btn,
    .container[style*="max-width"] form button {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        max-width: 280px;
    }

    /* Links below forms - center */
    .container[style*="max-width"] .text-center {
        text-align: center;
    }

    .container[style*="max-width"] .text-center a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* Media Queries for Responsive Design */

/* For tablets and smaller devices (max-width: 992px) */
@media (max-width: 992px) {
    .page-header-section .d-flex {
        flex-direction: column;
        align-items: center !important;
    }

    .page-header-section .header-actions {
        margin-top: 1rem;
    }

    .product-item {
        width: 100%;
        margin-bottom: 1.5rem;
    }
}


/* For mobile phones (max-width: 768px) */
@media (max-width: 768px) {

    /* Hide wallet balance in header on mobile */
    .navbar-nav .nav-item.d-md-block {
        display: none !important;
    }

    /* General container adjustments - more compact, prevent stretching */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        max-width: 100%;
    }

    /* Page content - center and constrain */
    .page-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Prevent content from stretching */
    main .container,
    main .container-fluid {
        max-width: 100%;
    }

    /* Grid system - tighter spacing */
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Reduce gaps in grids */
    .g-3, .g-4, .g-5 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    /* Homepage Hero Section */
    .shamble-hero h1 {
        font-size: 1.1rem; /* Smaller heading on mobile */
    }

    .shamble-hero p {
        font-size: 0.75rem; /* Adjust subtitle size */
    }

    /* Homepage Ad Carousel */
    #golfAdCarousel {
        max-height: 250px; /* Reduce carousel height on mobile */
    }

    #golfAdCarousel .carousel-caption h3 {
        font-size: 1rem; /* Smaller caption title */
    }

    /* Category Carousel - Horizontal scroll on mobile */
    .category-carousel-section {
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 8px;
        overflow: visible;
    }

    /* Convert carousel to horizontal scroll */
    #categoryCarousel {
        overflow: visible;
        position: relative;
    }

    /* Make carousel inner scrollable - this is the key container */
    #categoryCarousel .carousel-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
        scroll-behavior: smooth;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.25rem 0 !important;
        gap: 0;
        position: relative !important;
        transform: none !important;
    }

    /* Hide scrollbar for webkit browsers (Chrome, Safari, etc.) */
    #categoryCarousel .carousel-inner::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background: transparent;
    }

    #categoryCarousel .carousel-inner::-webkit-scrollbar-track {
        display: none;
        background: transparent;
    }

    #categoryCarousel .carousel-inner::-webkit-scrollbar-thumb {
        display: none;
        background: transparent;
    }

    /* Make all carousel items display inline in a row */
    #categoryCarousel .carousel-item {
        display: flex !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: auto !important;
        margin-right: 0 !important;
        transition: none !important;
        transform: none !important;
    }

    #categoryCarousel .carousel-item.active {
        display: flex !important;
    }

    /* Flatten the row structure - make rows display inline */
    #categoryCarousel .carousel-item .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        width: auto !important;
        gap: 0.5rem;
        padding: 0;
    }

    /* Make columns flex items with fixed width */
    #categoryCarousel .col-6,
    #categoryCarousel .col-md-4,
    #categoryCarousel .col-lg-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 0.25rem !important;
        min-width: 80px;
    }

    /* Hide carousel controls and indicators on mobile */
    #categoryCarousel .carousel-control-prev,
    #categoryCarousel .carousel-control-next,
    #categoryCarousel .carousel-indicators {
        display: none !important;
    }

    /* Disable Bootstrap carousel JavaScript behavior */
    #categoryCarousel.carousel {
        touch-action: pan-x;
        overflow: visible;
        position: relative;
    }

    #categoryCarousel .carousel-item {
        transform: none !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* Ensure all carousel items are visible and inline */
    #categoryCarousel .carousel-item:not(.active) {
        display: flex !important;
        opacity: 1 !important;
    }

    /* Prevent Bootstrap from hiding inactive items */
    #categoryCarousel .carousel-item.active ~ .carousel-item {
        display: flex !important;
    }

    .category-tile {
        min-height: 70px !important;
        min-width: 80px !important;
        padding: 0.5rem 0.625rem !important;
        border-radius: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .category-icon {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .category-name {
        font-size: 0.65rem !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    main { 
        padding-bottom: 4rem; 
    }

    /* Optimize navbar for mobile */
    .navbar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        position: relative;
        overflow: visible;
    }

    .navbar .container-fluid {
        position: relative;
    }

    /* Prevent navbar collapse from expanding header when logged out */
    .navbar {
        overflow: visible;
    }

    .navbar-collapse.collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white !important;
        z-index: 1000;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: none;
        padding: 0.5rem 0;
        min-width: 200px;
    }

    .navbar-collapse.collapse.show {
        max-height: 200px;
        overflow-y: auto;
    }

    /* Ensure navbar doesn't expand when collapsed content shows */
    .navbar-collapse .navbar-nav {
        padding: 0;
        margin: 0;
    }

    .navbar-collapse .nav-link {
        padding: 0.75rem 1.5rem !important;
        color: #2c3e50 !important;
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease;
        display: flex;
        align-items: center;
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .navbar-collapse .nav-link:hover {
        background-color: #f8f9fa !important;
        color: #2c3e50 !important;
        transform: none;
        box-shadow: none;
    }

    .navbar-collapse .nav-link:active {
        background-color: #e9ecef !important;
        color: #2c3e50 !important;
        transform: none;
    }

    .navbar-brand {
        font-size: 1.2rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        z-index: 1;
    }

    .navbar-brand:hover {
        transform: translateX(-50%) scale(1.05);
    }

    /* Ensure hamburger menu doesn't interfere with centered brand */
    .navbar .dropdown:first-child {
        position: relative;
        z-index: 10;
    }

    /* Ensure navbar container allows centering */
    .navbar .container-fluid {
        position: relative;
    }

    /* Hamburger menu improvements */
    .hamburger-menu-btn {
        padding: 0.5rem;
        font-size: 1.25rem;
    }

    .hamburger-dropdown {
        margin-top: 0.5rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* Product cards optimization - Using Bootstrap columns (2 per row = col-6) */
    #productsContainer {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .product-item {
        margin-bottom: 0;
        display: flex;
        height: 100%;
    }

    .product-item .card {
        border-radius: 6px;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Product images - maintain aspect ratio, prevent cutting off */
    .product-item .card-img-top,
    .product-item .product-carousel,
    .product-item .product-carousel .carousel-inner,
    .product-item .product-carousel .carousel-item,
    .product-item .product-carousel .carousel-item img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        height: auto;
    }

    .product-item .product-carousel {
        position: relative;
        overflow: hidden;
    }

    .product-item .product-carousel .carousel-inner {
        height: 100%;
    }

    .product-item .product-carousel .carousel-item {
        height: 100%;
    }

    .product-item .product-carousel .carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .product-item .card-body {
        padding: 0.75rem !important;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .product-item .card-header {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.875rem;
    }

    .product-item .card-footer {
        padding: 0.5rem 0.625rem !important;
        margin-top: auto;
    }

    /* Modal optimizations */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 8px;
    }

    /* Button optimizations - more compact, prevent stretching */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        line-height: 1.4;
        white-space: nowrap;
        min-width: auto;
        width: auto;
        max-width: 280px; /* Constrain button width */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Override w-100 on mobile - make buttons compact instead */
    .btn.w-100,
    .w-100.btn,
    button.w-100,
    [class*="w-100"].btn {
        width: auto !important;
        max-width: 280px !important;
        display: inline-flex !important;
    }

    /* Form submit buttons - center and constrain */
    form .btn[type="submit"],
    form button[type="submit"] {
        width: auto;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .btn:not(.btn-block):not(.w-100):not([style*="width: 100%"]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
        line-height: 1.3;
        max-width: 200px;
    }

    .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: 0.95rem;
        max-width: 320px;
    }

    /* Button groups - prevent stretching */
    .btn-group {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .btn-group .btn {
        flex: 0 0 auto;
        min-width: auto;
        max-width: none;
    }

    /* Prevent buttons from stretching in flex containers unless explicitly set */
    .d-flex .btn:not(.w-100):not(.btn-block):not([style*="width: 100%"]) {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
    }

    /* Stack buttons vertically in tight spaces */
    .d-flex.flex-column .btn,
    .d-flex.flex-column-reverse .btn {
        width: auto;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Button pairs - side by side when space allows */
    .d-flex.gap-2 .btn:not(.w-100),
    .d-flex.gap-3 .btn:not(.w-100) {
        flex: 0 0 auto;
        max-width: 200px;
    }

    /* Full-width buttons only in specific contexts */
    .modal-footer .btn,
    .card-footer .btn {
        max-width: none;
    }

    /* Full-width buttons only when explicitly set */
    .btn-block, .w-100.btn, [style*="width: 100%"].btn {
        width: 100%;
        display: block;
    }

    /* Modal footer — equal-width / equal-height buttons on mobile */
    .modal .modal-footer {
        gap: 0.5rem;
        align-items: stretch;
    }

    .modal .modal-footer .btn,
    .modal .modal-footer a.btn {
        flex: 1 1 0;
        min-width: 0;
        max-width: none !important;
        min-height: 48px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .modal .modal-footer .btn + .btn,
    .modal .modal-footer .btn + a.btn,
    .modal .modal-footer a.btn + .btn,
    .modal .modal-footer a.btn + a.btn {
        margin-left: 0 !important;
    }

    @media (max-width: 576px) {
        .modal .modal-footer {
            flex-direction: column-reverse;
        }

        #loginRequiredModal .modal-footer,
        .login-required-modal .modal-footer {
            flex-direction: column !important;
        }

        .modal .modal-footer .btn,
        .modal .modal-footer a.btn {
            flex: none;
            width: 100%;
        }
    }

    /* Login required modal: stacked full-width buttons (Sign in → Register → Not now top-to-bottom) */
    #loginRequiredModal .modal-footer,
    .login-required-modal .modal-footer {
        flex-direction: column !important;
        align-items: stretch;
        gap: 0.75rem;
    }

    #loginRequiredModal .modal-footer .btn,
    #loginRequiredModal .modal-footer a.btn,
    .login-required-modal .modal-footer .btn,
    .login-required-modal .modal-footer a.btn {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: none;
        box-sizing: border-box;
    }

    /* Form page card footer: fee block + equal stacked actions */
    .mm-modal-style-form-footer {
        gap: 0.875rem;
    }

    .mm-modal-style-form-footer .mm-form-footer-btn-row {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.75rem;
        width: 100%;
        margin-left: 0;
    }

    .mm-modal-style-form-footer .mm-form-footer-btn-row > .brand-button {
        width: 100%;
        max-width: none !important;
        flex: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Form optimizations - compact, prevent stretching */
    .form-control, .form-select {
        font-size: 1rem; /* Prevent zoom on iOS */
        padding: 0.5rem 0.75rem;
        line-height: 1.5;
        border-radius: 6px;
        max-width: 100%;
        width: 100%;
    }

    /* Constrain form inputs in containers */
    .container[style*="max-width"],
    .container[style*="max-width"] .form-control,
    .container[style*="max-width"] .form-select {
        max-width: 100%;
    }

    /* Forms - center and constrain */
    form {
        max-width: 100%;
    }

    /* Form containers - center content */
    .container[style*="max-width:400px"],
    .container[style*="max-width:500px"],
    .container[style*="max-width:600px"],
    div[style*="max-width:600px"] {
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 95% !important;
    }

    /* Login form - centered and constrained on mobile */
    .login-form-wrapper {
        max-width: 340px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .login-form-wrapper .form-control,
    .login-form-wrapper .btn {
        max-width: 100%;
    }

    /* Upload product form (Sell page) - more compact */
    form.needs-validation {
        padding: 0;
    }

    form.needs-validation .mb-3 {
        margin-bottom: 1rem !important;
    }

    form.needs-validation .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    form.needs-validation .mt-4,
    form.needs-validation .mt-5 {
        margin-top: 1rem !important;
    }

    form.needs-validation .pt-3,
    form.needs-validation .pt-5 {
        padding-top: 0.75rem !important;
    }

    form.needs-validation .pb-5 {
        padding-bottom: 1rem !important;
    }

    /* Gender selector - compact on mobile */
    .gender-selector {
        gap: 0.375rem;
    }

    .gender-selector .btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Hand orientation selector - compact and professional on mobile */
    .hand-orientation-selector {
        gap: 0.375rem;
        flex-wrap: nowrap;
    }

    .hand-orientation-selector .btn {
        padding: 0.625rem 0.5rem;
        font-size: 0.8rem;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
    }

    .hand-orientation-selector .btn i {
        font-size: 0.9rem;
        margin-right: 0.25rem !important;
    }

    /* Form labels - compact */
    form.needs-validation .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
        font-weight: 500;
    }

    /* Form text and small text */
    form.needs-validation .form-text,
    form.needs-validation small {
        font-size: 0.75rem;
    }

    /* Alerts in form - compact */
    form.needs-validation .alert {
        padding: 0.75rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    /* Submit button - compact but still prominent */
    form.needs-validation .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    form.needs-validation .btn-lg.fs-4 {
        font-size: 1rem !important;
    }

    form.needs-validation .btn-lg.py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Size slider container - compact */
    .size-slider-container {
        padding: 0.75rem;
    }

    /* Brand dropdown - ensure it doesn't overflow */
    #BrandDropdownContainer {
        max-height: 250px !important;
    }

    /* Product type radio buttons - compact */
    form.needs-validation .form-check {
        margin-bottom: 0.5rem;
        padding-left: 1.5rem;
    }

    form.needs-validation .form-check-input {
        margin-top: 0.25rem;
        width: 1rem;
        height: 1rem;
    }

    form.needs-validation .form-check-label {
        font-size: 0.85rem;
        padding-left: 0.25rem;
    }

    /* File input - compact */
    form.needs-validation input[type="file"] {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    /* Button groups - compact */
    form.needs-validation .btn-group .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Textarea - compact */
    form.needs-validation textarea.form-control {
        min-height: 80px;
        font-size: 0.875rem;
    }

    /* Page header - compact */
    .brand-title {
        font-size: 1.5rem;
        margin-bottom: 1rem !important;
    }
}

    .form-label {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.375rem;
    }

    .form-text {
        font-size: 0.75rem;
    }

    .input-group {
        gap: 0.25rem;
        max-width: 100%;
    }

    .input-group-text {
        padding: 0.5rem 0.625rem;
        font-size: 0.875rem;
    }

    /* Form groups - compact spacing */
    .mb-3 {
        margin-bottom: 0.875rem !important;
    }

    /* Alerts in forms - constrain width */
    .alert {
        max-width: 100%;
    }

    /* Filter section - professional, no cut-off */
    .filter-section {
        padding: 1rem !important;
        border-radius: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible;
    }

    .filter-section .container-fluid,
    .filter-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Top row - Sort, Filter By, Reset - full width on mobile */
    .filter-section .row.g-2 .col-md-4,
    .filter-section .row.g-2 .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Sort by section */
    .filter-section .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600;
    }

    .filter-section #sortFilter {
        font-size: 0.9rem !important;
        padding: 0.5rem 0.75rem !important;
        min-height: 42px;
        border-radius: 8px;
    }

    .filter-section .col-md-4,
    .filter-section .col-lg-3 {
        margin-bottom: 0.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .filter-section .row.g-2,
    .filter-section .row.g-3,
    .filter-section .row.g-4 {
        --bs-gutter-y: 0.75rem;
        --bs-gutter-x: 0.5rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Filter radio groups - wrap layout, no cut-off */
    .filter-radio-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .filter-radio-option {
        padding: 0.5rem 0.875rem !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.2s ease;
        min-height: 40px;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .filter-radio-option:hover {
        background: #f8f9fa !important;
        transform: none;
    }

    .filter-radio-option .form-check-input {
        margin: 0 !important;
        width: 1rem !important;
        height: 1rem !important;
        flex-shrink: 0;
    }

    .filter-radio-option .form-check-label {
        font-size: 0.85rem !important;
        line-height: 1.3;
        padding: 0;
        margin: 0;
        color: #2c3e50;
        font-weight: 500;
    }

    .filter-radio-option:has(.form-check-input:checked) {
        background: transparent !important;
    }

    .filter-radio-option:has(.form-check-input:checked) .form-check-label {
        color: #75ad4b;
        font-weight: 600;
    }

    /* Filter container - full width, proper spacing */
    #filtersContainer {
        margin-top: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #filtersContainer .col-md-4 {
        margin-bottom: 1rem;
        padding: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #fafbfc;
        border-radius: 10px;
        border: 1px solid #e9ecef;
    }

    #filtersContainer .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #filtersContainer .row > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #filtersContainer .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.75rem !important;
        font-weight: 600;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #filtersContainer .filter-radio-group {
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    #filtersContainer .filter-radio-option {
        margin: 0 !important;
    }

    /* Size filter select - full width */
    #sizeFilterContainer .form-select {
        width: 100%;
        min-height: 42px;
        font-size: 0.9rem;
    }

    /* Filter/Reset buttons - touch-friendly */
    #toggleFiltersBtn,
    #resetFiltersBtn {
        min-height: 44px;
        font-size: 0.9rem !important;
    }

    /* Shipping options optimization - compact */
    .shipping-option-card {
        margin-bottom: 0.625rem !important;
    }

    .shipping-option-card .card-body {
        padding: 0.625rem 0.75rem !important;
    }

    .shipping-option-card .form-check-label {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .shipping-option-card .text-end {
        font-size: 0.9rem;
    }

    /* Advert carousel optimization */
    #advertCarousel {
        margin-bottom: 1.5rem;
    }

    #advertCarousel .carousel-item {
        min-height: 200px;
        max-height: 250px;
    }

    #advertCarousel .carousel-item img {
        max-height: 250px;
    }

    /* Make tab navigation scrollable on mobile */
    .card-header-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .card-header-tabs::-webkit-scrollbar {
        display: none;
    }

    .card-header-tabs .nav-item {
        flex-shrink: 0;
    }

    /* My Offers - card layout */
    .offers-cards-grid {
        padding: 0.75rem 1rem !important;
    }
    .offer-card-body {
        padding: 1rem;
    }
    .offer-card-image,
    .offer-card-image img,
    .offer-card-image-placeholder {
        width: 64px;
        height: 64px;
    }
    .offer-card-actions .btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    /* My Products: Edit + Accept buttons side by side on mobile */
    .my-products-page .offer-card-actions.product-actions-row {
        flex-wrap: nowrap !important;
        display: flex !important;
    }
    .my-products-page .offer-card-actions.product-actions-row .btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* My Products page header - stack on mobile when has actions */
    .my-products-page .page-header-with-actions .d-flex {
        flex-direction: column;
        align-items: stretch;
        text-align: center !important;
    }

    .my-products-page .page-header-with-actions .d-flex > div:first-child {
        text-align: center !important;
    }

    .my-products-page .page-header-with-actions .header-actions {
        display: flex;
        justify-content: center;
    }

    .my-products-page .page-header-with-actions .header-actions .btn,
    .my-products-page .page-header-with-actions .header-actions a.btn {
        max-width: 280px;
        width: 100%;
    }

    /* Responsive Tables - Transform rows into cards */
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }

    /* Hide table headers, we'll use data-labels instead */
    .table-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-responsive tr {
        border: 1px solid #dee2e6;
        margin-bottom: 1rem;
        border-radius: 0.375rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .table-responsive td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
        min-height: 50px; /* Ensure cells have some height */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .table-responsive td:before {
        /* Now like a table header */
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    /*
    Label the data
    You'll need to add a "data-label" attribute to your <td> elements in the Razor views.
    I've added this for MyProducts.cshtml as an example.
    */
    .table-responsive td[data-label]:before {
        content: attr(data-label);
    }

    /* Specific adjustments for MyProducts and ProductManagement tables */
    .table-responsive td:last-child {
        border-bottom: 0;
    }

    .table-responsive td .btn-group,
    .table-responsive td .d-flex.flex-column {
        width: 100%;
        justify-content: flex-end;
        align-items: flex-end;
    }
    
    .table-responsive td .d-flex.flex-column > * {
        text-align: right;
    }

    .table-responsive td .d-flex.align-items-center {
        justify-content: flex-end;
    }

    .table-responsive td .d-flex.align-items-center img {
        display: none; /* Hide thumbnail in card view to save space */
    }

    /* My Products page - improved mobile card layout */
    .my-products-page .table-responsive td {
        padding-left: 42%;
        padding-right: 1rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        min-height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .my-products-page .table-responsive td:before {
        width: 38%;
        font-weight: 600;
        font-size: 0.75rem;
        color: #6c757d;
    }

    /* Show product image on first cell in My Products card view */
    .my-products-page .table-responsive td[data-label="Image"] {
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: center;
        border-bottom: none;
    }

    .my-products-page .table-responsive td[data-label="Image"]:before {
        display: none;
    }

    .my-products-page .table-responsive td[data-label="Image"] img,
    .my-products-page .table-responsive td[data-label="Image"] .bg-light {
        display: block !important;
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0;
    }

    .my-products-page .table-responsive td[data-label="Product"] .d-flex.flex-column {
        align-items: flex-end;
    }

    .my-products-page .table-responsive td[data-label="Product"] .text-truncate {
        max-width: 100%;
    }

    /* Form controls in Status column */
    .my-products-page .table-responsive td[data-label="Status"] .form-control-sm {
        font-size: 0.85rem;
        padding: 0.35rem 0.5rem;
    }

    .my-products-page .table-responsive td[data-label="Status"] .form-check {
        margin-bottom: 0.5rem;
    }

    /* Actions column - full width buttons */
    .my-products-page .table-responsive td[data-label="Actions"] {
        flex-direction: column;
        align-items: stretch;
    }

    .my-products-page .table-responsive td[data-label="Actions"] .d-flex {
        flex-direction: column;
        width: 100%;
    }

    .my-products-page .table-responsive td[data-label="Actions"] .btn {
        width: 100%;
    }

    /* Product cards - maintain aspect ratio, no fixed heights */
    .product-item .card-img-top,
    .product-item .product-carousel,
    .product-item .product-carousel .carousel-inner,
    .product-item .product-carousel .carousel-item,
    .product-item .product-carousel .carousel-item img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        height: auto;
    }

    .product-item .product-carousel {
        position: relative;
        overflow: hidden;
    }

    .product-item .product-carousel .carousel-inner {
        height: 100%;
    }

    .product-item .product-carousel .carousel-item {
        height: 100%;
    }

    .product-item .product-carousel .carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .product-item .card-title {
        font-size: 0.95rem;
        margin-bottom: 0.375rem;
        line-height: 1.25;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
    }

    .product-item .card-text {
        font-size: 0.8125rem;
        line-height: 1.35;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
    }

    /* Ensure proper alignment */
    .product-item .card-body .d-flex {
        align-items: flex-start;
        width: 100%;
    }

    .product-item .product-details {
        margin-top: auto;
        padding-top: 0.5rem;
        width: 100%;
    }

    .product-item .product-meta {
        font-size: 0.8125rem;
        width: 100%;
    }

    /* Product details - reduce spacing between starting price, offers end and current offer */
    .product-item .product-details p {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        font-size: 0.875rem;
        line-height: 1.15;
    }

    .product-item .product-details p.mb-1 {
        margin-bottom: 0 !important;
    }

    .product-item .product-details p.mb-0 {
        margin-bottom: 0 !important;
        line-height: 1;
    }

    .product-item .product-details .current-offer-price {
        margin-top: 0 !important;
        margin-bottom: 0.5rem;
        line-height: 1;
    }

    .product-item .product-details p + p {
        margin-top: 0 !important;
    }

    /* Quick adjustments - keep horizontal on mobile */
    .quick-adjustments .d-flex {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        gap: 0.5rem;
    }

    .quick-adjustments .btn {
        flex: 0 0 auto;
        min-width: 70px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    /* Make Offer button - larger on mobile */
    .product-item .btn-offer,
    .product-item .btn-success.btn-offer,
    .product-item .btn-secondary.btn-offer {
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600;
        min-height: 44px; /* Touch-friendly size */
    }

    .product-item .btn-offer i {
        font-size: 1rem;
    }

    .product-item .card-subtitle {
        font-size: 0.8125rem;
        margin-bottom: 0.25rem;
    }

    .product-item .badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.45rem;
    }

    /* Meta lines (type, condition, seller, offers) use <small> — bump for readability */
    .product-item .card-body small.text-muted {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .product-item .card-body strong.text-dark.d-block {
        font-size: 1.05rem;
    }

    .product-item .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        max-width: 100%;
    }

    /* Make Offer button - larger on mobile (override general btn styles) */
    .product-item .btn-offer,
    .product-item .btn-success.btn-offer,
    .product-item .btn-secondary.btn-offer {
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        min-height: 44px !important; /* Touch-friendly size */
        width: 100%;
    }

    .product-item .btn-offer i {
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    .product-item .btn-purchase,
    .product-item .btn-primary.btn-purchase,
    .product-item .btn-outline-secondary.btn-purchase,
    .product-item .btn-secondary.btn-purchase {
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        min-height: 44px !important;
        width: 100%;
    }

    .product-item .btn-purchase i {
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    /* Make Offer + Purchase: same footprint (overrides .d-flex.flex-column .btn max-width/centering) */
    .product-item .product-card-actions > .btn-offer,
    .product-item .product-card-actions > .btn-purchase {
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: 3rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Badge optimizations - compact */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        line-height: 1.3;
        font-weight: 500;
    }

    .badge-lg {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }

    /* Alert optimizations - compact */
    .alert {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 6px;
        margin-bottom: 0.875rem;
    }

    .alert-dismissible {
        padding-right: 2.5rem;
    }

    .alert .btn-close {
        padding: 0.75rem 0.875rem;
    }

    /* Pagination - make touch-friendly but compact */
    .pagination {
        margin-bottom: 0.875rem;
        gap: 0.25rem;
    }

    .pagination .page-link {
        padding: 0.5rem 0.625rem;
        min-width: 40px;
        max-width: 44px;
        text-align: center;
        font-size: 0.875rem;
        border-radius: 6px;
    }

    .pagination .page-item:first-child .page-link,
    .pagination .page-item:last-child .page-link {
        min-width: auto;
        max-width: none;
        padding: 0.5rem 0.75rem;
    }

    /* Dropdown menus - full width on mobile */
    .dropdown-menu {
        width: calc(100% - 2rem);
        max-width: none;
        margin: 0.5rem 1rem;
    }

    /* Hamburger dropdown - better positioning */
    .hamburger-dropdown {
        width: calc(100vw - 2rem);
        max-width: 300px;
        margin-top: 0.5rem;
        margin-left: -1rem;
    }

    /* Form groups - better spacing - more compact */
    .form-group,
    .mb-3 {
        margin-bottom: 0.875rem !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .mb-5 {
        margin-bottom: 1.25rem !important;
    }

    /* Reduce excessive margins */
    .mt-4 {
        margin-top: 1rem !important;
    }

    .mt-5 {
        margin-top: 1.25rem !important;
    }

    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    /* Input groups - stack on mobile */
    .input-group {
        flex-wrap: wrap;
    }

    .input-group .form-control {
        flex: 1 1 100%;
        margin-bottom: 0.5rem;
    }

    .input-group-append,
    .input-group-prepend {
        width: 100%;
    }

    /* Card headers - compact */
    .card {
        border-radius: 8px;
        overflow: hidden;
        max-width: 100%;
    }

    .card-header {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .card-body {
        padding: 0.875rem !important;
        max-width: 100%;
    }

    .card-footer {
        padding: 0.75rem 0.875rem;
    }

    /* Narrow form pages (Register, Profile, Sell-style) */
    .mm-form-page-shell {
        max-width: 95% !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Modal headers - compact */
    .modal-header {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .modal-header .modal-title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    /* Footer - compact */
    .footer {
        padding: 1.5rem 0;
        font-size: 0.85rem;
    }

    /* Page content - reduce padding */
    .page-content {
        padding: 0.5rem 0;
    }

    /* Filter section - more compact */
    .filter-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .filter-section .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .filter-section .col-md-4,
    .filter-section .col-lg-3 {
        margin-bottom: 0.75rem;
    }

    /* Product carousel - smaller on mobile */
    .product-carousel {
        margin-bottom: 0;
        height: 100px;
    }

    .product-carousel .carousel-control-prev,
    .product-carousel .carousel-control-next {
        width: 24px;
        height: 24px;
        opacity: 0.7;
    }

    .product-carousel .carousel-control-prev-icon,
    .product-carousel .carousel-control-next-icon {
        width: 12px;
        height: 12px;
    }

    .product-carousel .carousel-indicators {
        margin-bottom: 0.25rem;
        gap: 0.25rem;
    }

    .product-carousel .carousel-indicators button {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin: 0 2px;
    }

    /* Zoom modal - optimize for mobile */
    #zoomModal .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    #zoomModal .modal-content {
        border-radius: 0;
        height: 100vh;
    }

    #zoomModal .modal-body {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 120px);
    }

    /* Make offer modal - optimize */
    .make-offer-modal .modal-body {
        padding: 1rem;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    /* Shipping section - compact */
    .shipping-section {
        padding: 1rem !important;
    }

    /* Total cost display - compact */
    #offerTotalCostDisplay,
    #totalCostDisplay {
        font-size: 0.875rem;
        padding: 0.625rem 0.75rem;
        border-radius: 6px;
    }

    /* Price displays */
    .price, .text-price {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .text-muted {
        font-size: 0.8rem;
    }

    /* Headings - more compact */
    h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 0.875rem;
    }

    h2 {
        font-size: 1.25rem;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    h3 {
        font-size: 1.1rem;
        line-height: 1.3;
        margin-bottom: 0.625rem;
    }

    h4 {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    h5 {
        font-size: 0.95rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    h6 {
        font-size: 0.875rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    p {
        margin-bottom: 0.75rem;
        line-height: 1.5;
    }
}

/* For very small mobile phones (max-width: 425px) */
@media (max-width: 425px) {
    /* Adjust navbar brand to prevent overflow on very small screens */
    .navbar-brand {
        font-size: 1.1rem;
        letter-spacing: 0.5px;
        margin-right: 0.25rem;
        padding: 0.25rem 0;
    }

    /* Even smaller category carousel */
    .category-carousel-section {
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .category-tile {
        min-height: 70px !important;
        padding: 0.5rem 0.25rem !important;
    }

    .category-icon {
        font-size: 1.15rem !important;
        margin-bottom: 0.25rem !important;
    }

    .category-name {
        font-size: 0.6rem !important;
        line-height: 1.1;
    }

    #categoryCarousel .carousel-control-prev,
    #categoryCarousel .carousel-control-next {
        width: 26px !important;
        height: 26px !important;
    }

    #categoryCarousel .carousel-control-prev {
        left: -3px !important;
    }

    #categoryCarousel .carousel-control-next {
        right: -3px !important;
    }

    #categoryCarousel .carousel-control-prev-icon,
    #categoryCarousel .carousel-control-next-icon {
        width: 14px !important;
        height: 14px !important;
    }

    /* Product cards - maintain aspect ratio on very small screens */
    .product-item .card-body {
        padding: 0.625rem !important;
    }

    /* Images maintain aspect ratio - no fixed heights */
    .product-item .card-img-top,
    .product-item .product-carousel,
    .product-item .product-carousel .carousel-inner,
    .product-item .product-carousel .carousel-item,
    .product-item .product-carousel .carousel-item img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        height: auto;
    }

    .product-item .card-title {
        font-size: 0.9rem;
    }

    .product-item .card-text {
        font-size: 0.8125rem;
    }

    .product-item .product-meta {
        font-size: 0.8125rem;
    }

    .product-item .product-details p {
        font-size: 0.875rem;
    }

    .product-item .card-body small.text-muted {
        font-size: 0.8125rem;
    }

    .product-item .card-body strong.text-dark.d-block {
        font-size: 1rem;
    }

    /* Modal - full width on very small screens */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 8px;
    }

    .modal-header {
        padding: 0.75rem 0.875rem;
    }

    .modal-body {
        padding: 0.875rem !important;
    }

    .modal-footer:not(.mm-modal-footer--center) {
        padding: 0.625rem 0.875rem;
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    /* Login prompt keeps natural column order */
    #loginRequiredModal .modal-footer {
        flex-direction: column !important;
    }

    .modal-footer.mm-modal-footer--center {
        flex-direction: column !important;
    }

    .modal-footer .btn,
    .modal-footer a.btn {
        width: 100%;
        min-height: 48px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Shipping options - compact */
    .shipping-option-card .card-body {
        padding: 0.5rem 0.625rem !important;
    }

    .shipping-option-card .form-check-label {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .shipping-option-card .text-end {
        font-size: 0.85rem;
        min-width: 85px !important;
    }

    /* Advert carousel - smaller */
    #advertCarousel .carousel-item {
        min-height: 150px;
        max-height: 200px;
    }

    #advertCarousel .carousel-item img {
        max-height: 200px;
    }

    /* Reduce padding on custom styled cards on the About page */
    .mission-vision-card {
        padding: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .story-card {
        padding: 1.5rem;
    }

    .cta-section {
        padding: 2rem 1rem;
    }

    .about-hero {
        padding: 3rem 0;
    }

    /* Further reduce padding on responsive tables for very small screens */
    .table-responsive td {
        padding-left: 40%;
    }

    .table-responsive td:before {
        width: 35%;
    }
}

/* Fix for "Save Changes" bar on MyProducts page on very small screens */
@media (max-width: 480px) {
    .my-products-page .card-body .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .my-products-page .card-body .d-flex.justify-content-between .btn {
        width: 100%;
    }

    .my-products-page .card-body .d-flex.justify-content-between small {
        text-align: center;
    }

    .card-body .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .card-body .d-flex.justify-content-between .btn {
        width: 100%;
    }

    .d-flex.gap-2 .btn,
    .d-flex.gap-3 .btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 400px) {
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-direction: column;
    }

    .d-flex.gap-2 .btn,
    .d-flex.gap-3 .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .table-responsive td {
        padding-left: 40%;
    }
    .table-responsive td:before {
        width: 35%;
    }

    /* My Products - keep card layout on very small screens */
    .my-products-page .table-responsive .table th,
    .my-products-page .table-responsive .table td {
        display: block !important;
        width: 100% !important;
    }
    .my-products-page .table-responsive .table tr {
        display: block !important;
    }
    .my-products-page .table-responsive td {
        padding-left: 42%;
    }
}

/*
  Specific fix for the UserManagement/Edit table on very small screens.
  My Products page uses card layout (from rules above) - those have higher specificity.
*/
@media (max-width: 420px) {
    .table-responsive .table th,
    .table-responsive .table td {
        display: table-cell;
        width: auto !important;
        padding-left: 1rem;
        text-align: left;
    }

    .table-responsive .table tr {
        display: table-row;
    }

    /* My Products - keep card layout (overrides above) */
    .my-products-page .table-responsive .table th,
    .my-products-page .table-responsive .table td {
        display: block !important;
        width: 100% !important;
    }
    .my-products-page .table-responsive .table tr {
        display: block !important;
    }
}

/* Admin Panel - Mobile responsive */
@media (max-width: 768px) {
    .admin-page .container-fluid,
    .admin-page .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .admin-page .page-header-with-actions .d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }
    .admin-page .page-header-with-actions .header-actions {
        margin-top: 0.75rem;
    }
    .admin-page .page-header-with-actions .header-actions .btn {
        width: 100%;
    }
}
@media (max-width: 576px) {
    .admin-page .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.75rem;
    }
    .admin-page .d-flex.justify-content-between .btn {
        width: 100%;
    }

    /* Product Management index — touch-friendly action grid */
    .product-management-page.admin-page {
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }

    .product-management-page .page-header-section {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .product-management-page .admin-card-item .admin-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .product-management-page .admin-card-item .admin-card-actions > a:first-child {
        grid-column: 1 / -1;
    }

    .product-management-page .admin-card-item .admin-card-actions .btn,
    .product-management-page .admin-card-item .admin-card-actions > a.btn {
        min-height: 44px;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8125rem;
        padding: 0.5rem 0.65rem;
    }

    .product-mgmt-modal .modal-footer .btn {
        min-height: 46px;
    }

    .product-mgmt-modal .modal-body .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Product Management — Edit product table (uses global mobile .table-responsive card + data-label) */
@media (max-width: 768px) {
    .pm-edit-product-page .table-responsive td {
        padding-left: 40%;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        min-height: 48px;
        align-items: flex-start;
    }

    .pm-edit-product-page .table-responsive td:before {
        width: 36%;
        font-size: 0.7rem;
        font-weight: 600;
        color: #6c757d;
        white-space: normal;
        line-height: 1.25;
    }

    .pm-edit-product-page .table-responsive tr {
        margin-bottom: 1rem;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        background: #fff;
    }

    .pm-edit-product-page .table-responsive td .form-check {
        width: 100%;
        justify-content: flex-end;
    }

    .pm-edit-product-page .pm-edit-desc-preview {
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word;
        text-align: right;
    }

    .pm-edit-product-page .card-header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pm-edit-product-page .card-footer {
        padding: 1rem !important;
    }

    .pm-edit-product-page .card-footer .btn {
        min-height: 46px;
    }
}