/* Custom Responsive Layout Adjustments for Mobile-First premium look */

@media (max-width: 575px) {
    /* Container Padding tweaks for breathable whitespace */
    .container {
        padding-left: var(--space-5) !important;
        padding-right: var(--space-5) !important;
    }

    /* Typographic hierarchy adjustments for soft premium layout */
    h1.display-4 {
        font-size: 32px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.03em !important;
    }
    h2 {
        font-size: 24px !important;
        letter-spacing: -0.02em !important;
    }
    h5 {
        font-size: 16px !important;
    }

    /* Hero Section modifications */
    .py-5 {
        padding-top: var(--space-12) !important;
        padding-bottom: var(--space-12) !important;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2) !important;
    }
    .hero-buttons .btn {
        width: 100%;
        padding: var(--space-4) !important;
    }

    /* Category horizontal scroll layout adjustment */
    .row-cols-2 {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--space-4);
        padding-bottom: var(--space-3);
        padding-left: var(--space-1);
        scrollbar-width: none; /* Hide scrollbar for clean layout */
    }
    .row-cols-2::-webkit-scrollbar {
        display: none;
    }
    .row-cols-2 .col {
        flex: 0 0 160px;
        width: 160px;
    }

    /* Bento Grid fixes - force 1 column for clean stack */
    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-5) !important;
    }
    .bento-span-2 {
        grid-column: span 1 !important;
    }

    /* Card adjustments for small screen bounds */
    .product-card .card-title {
        font-size: 16px !important;
        height: 48px !important;
        -webkit-line-clamp: 2;
    }
    .product-card .product-price {
        font-size: 18px !important;
    }
    .product-card .card-body {
        padding: var(--space-4) !important;
    }

    /* Detail page layout fixes */
    .col-lg-6 img {
        max-height: 320px !important;
    }
    .input-group {
        width: 100% !important;
        margin-bottom: var(--space-3);
    }
    .d-flex.align-items-center.gap-3.mb-5 {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--space-3) !important;
    }

    /* Cart layout adjustments */
    .cart-drawer {
        width: 100% !important;
    }
    
    /* Specifications details table adjustments */
    .table td {
        padding: var(--space-2) 0 !important;
    }
}