/* ============================================================
   MicroCart - Responsive Stylesheet
   by Thirty Third Company
   Mobile-First Approach
   ============================================================ */

/* ------------------------------------------------------------
   Base (Mobile - below 640px)
   Default styles are already mobile-first from style.css
   ------------------------------------------------------------ */

/* Mobile-specific overrides */
.container {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.hero-title {
    font-size: 2rem;
}

.hero-subtitle {
    font-size: 1rem;
}

.hero {
    min-height: 400px;
}

.product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

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

.cart-layout {
    grid-template-columns: 1fr;
}

.cart-summary {
    position: static;
}

.footer-bottom {
    flex-direction: column;
    gap: var(--spacing-3);
    text-align: center;
}

.footer-bottom-links {
    justify-content: center;
}

.navbar-nav {
    display: none;
}

.navbar-toggler {
    display: flex;
}

.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

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

.product-detail-layout {
    grid-template-columns: 1fr;
}

.product-detail-gallery {
    position: static;
}

.quick-view {
    grid-template-columns: 1fr;
}

.search-bar {
    width: 100%;
}

.checkout-steps {
    flex-wrap: wrap;
}

.checkout-step-connector {
    width: 30px;
}

.checkout-step-label {
    display: none;
}

.payment-methods {
    grid-template-columns: repeat(2, 1fr);
}

.trust-badges {
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.gallery-thumbs {
    grid-template-columns: repeat(4, 1fr);
}

/* Mobile: Stack grid to single column */
.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
    grid-template-columns: 1fr;
}

.grid-cols-12 {
    grid-template-columns: 1fr;
}

/* Card deck mobile */
.card-deck {
    grid-template-columns: 1fr;
}

/* Table responsive by default */
.table {
    font-size: 0.8rem;
}


/* ------------------------------------------------------------
   Small Tablets (min-width: 640px)
   ------------------------------------------------------------ */
@media (min-width: 640px) {
    .sm\:hidden { display: none; }
    .sm\:visible { display: block; }
    .sm\:flex { display: flex; }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:grid { display: grid; }
    .sm\:block { display: block; }
    .sm\:inline { display: inline; }
    .sm\:inline-block { display: inline-block; }

    /* Typography Scale */
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    /* Container */
    .container {
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }

    /* Grid Adjustments */
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
    .sm\:col-span-full { grid-column: 1 / -1; }

    /* Flex */
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-col { flex-direction: column; }
    .sm\:flex-wrap { flex-wrap: wrap; }
    .sm\:flex-nowrap { flex-wrap: nowrap; }
    .sm\:justify-center { justify-content: center; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:items-center { align-items: center; }
    .sm\:items-start { align-items: flex-start; }

    /* Width */
    .sm\:w-full { width: 100%; }
    .sm\:w-1\/2 { width: 50%; }
    .sm\:w-1\/3 { width: 33.333333%; }
    .sm\:w-auto { width: auto; }

    /* Margin */
    .sm\:mx-auto { margin-left: auto; margin-right: auto; }
    .sm\:mt-0 { margin-top: 0; }
    .sm\:mb-0 { margin-bottom: 0; }

    /* Padding */
    .sm\:p-4 { padding: var(--spacing-4); }
    .sm\:p-5 { padding: var(--spacing-5); }
    .sm\:px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
    .sm\:px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }

    /* Text */
    .sm\:text-left { text-align: left; }
    .sm\:text-center { text-align: center; }
    .sm\:text-right { text-align: right; }

    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }

    /* Category Grid */
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Card Deck */
    .card-deck {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero */
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    /* Checkout */
    .checkout-step-label {
        display: inline;
    }

    .checkout-step-connector {
        width: 40px;
    }

    /* Payment Methods */
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stat Cards (admin) */
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ------------------------------------------------------------
   Tablets (min-width: 768px)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:visible { display: block; }
    .md\:flex { display: flex; }
    .md\:inline-flex { display: inline-flex; }
    .md\:grid { display: grid; }
    .md\:block { display: block; }
    .md\:inline { display: inline; }
    .md\:inline-block { display: inline-block; }

    /* Typography Scale */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Container */
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }

    /* Grid Adjustments */
    .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-full { grid-column: 1 / -1; }

    /* Flex */
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:flex-wrap { flex-wrap: wrap; }
    .md\:flex-nowrap { flex-wrap: nowrap; }
    .md\:justify-center { justify-content: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:justify-end { justify-content: flex-end; }
    .md\:items-center { align-items: center; }
    .md\:items-start { align-items: flex-start; }

    /* Width */
    .md\:w-full { width: 100%; }
    .md\:w-1\/2 { width: 50%; }
    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-2\/3 { width: 66.666667%; }
    .md\:w-1\/4 { width: 25%; }
    .md\:w-3\/4 { width: 75%; }
    .md\:w-auto { width: auto; }

    /* Margin */
    .md\:mx-auto { margin-left: auto; margin-right: auto; }
    .md\:mt-0 { margin-top: 0; }
    .md\:mb-0 { margin-bottom: 0; }
    .md\:ml-0 { margin-left: 0; }
    .md\:mr-0 { margin-right: 0; }

    /* Padding */
    .md\:p-4 { padding: var(--spacing-4); }
    .md\:p-5 { padding: var(--spacing-5); }
    .md\:p-6 { padding: var(--spacing-6); }
    .md\:px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
    .md\:px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
    .md\:px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
    .md\:py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
    .md\:py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }

    /* Text */
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }
    .md\:text-right { text-align: right; }

    /* Order */
    .md\:order-1 { order: 1; }
    .md\:order-2 { order: 2; }

    /* Gap */
    .md\:gap-4 { gap: var(--spacing-4); }
    .md\:gap-5 { gap: var(--spacing-5); }
    .md\:gap-6 { gap: var(--spacing-6); }

    /* Navigation - Show desktop nav */
    .navbar-nav {
        display: flex;
    }

    .navbar-toggler {
        display: none;
    }

    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .product-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Category Grid */
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Card Deck */
    .card-deck {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero */
    .hero {
        min-height: 500px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    /* Cart Layout */
    .cart-layout {
        grid-template-columns: 1fr 360px;
    }

    .cart-summary {
        position: sticky;
        top: calc(80px + var(--spacing-5));
    }

    /* Checkout */
    .checkout-step-connector {
        width: 60px;
    }

    /* Payment Methods */
    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Product Detail */
    .product-detail-layout {
        grid-template-columns: 1fr 1fr;
    }

    .product-detail-gallery {
        position: sticky;
        top: calc(80px + var(--spacing-5));
    }

    /* Quick View */
    .quick-view {
        grid-template-columns: 1fr 1fr;
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Stat Cards */
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid overrides */
    .grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-12 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Table */
    .table {
        font-size: 0.875rem;
    }

    /* Trust Badges */
    .trust-badges {
        flex-wrap: nowrap;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 0.875rem;
    }
}


/* ------------------------------------------------------------
   Desktop (min-width: 1024px)
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
    .lg\:hidden { display: none; }
    .lg\:visible { display: block; }
    .lg\:flex { display: flex; }
    .lg\:inline-flex { display: inline-flex; }
    .lg\:grid { display: grid; }
    .lg\:block { display: block; }
    .lg\:inline { display: inline; }
    .lg\:inline-block { display: inline-block; }

    /* Grid Adjustments */
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-full { grid-column: 1 / -1; }

    /* Flex */
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:flex-wrap { flex-wrap: wrap; }
    .lg\:flex-nowrap { flex-wrap: nowrap; }
    .lg\:justify-center { justify-content: center; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:items-center { align-items: center; }
    .lg\:items-start { align-items: flex-start; }
    .lg\:items-end { align-items: flex-end; }

    /* Width */
    .lg\:w-full { width: 100%; }
    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-1\/3 { width: 33.333333%; }
    .lg\:w-2\/3 { width: 66.666667%; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-3\/4 { width: 75%; }
    .lg\:w-auto { width: auto; }

    /* Margin */
    .lg\:mx-auto { margin-left: auto; margin-right: auto; }
    .lg\:mt-0 { margin-top: 0; }
    .lg\:mb-0 { margin-bottom: 0; }

    /* Padding */
    .lg\:p-4 { padding: var(--spacing-4); }
    .lg\:p-5 { padding: var(--spacing-5); }
    .lg\:p-6 { padding: var(--spacing-6); }
    .lg\:p-7 { padding: var(--spacing-7); }
    .lg\:px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
    .lg\:px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
    .lg\:px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
    .lg\:py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
    .lg\:py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }

    /* Text */
    .lg\:text-left { text-align: left; }
    .lg\:text-center { text-align: center; }
    .lg\:text-right { text-align: right; }

    /* Order */
    .lg\:order-1 { order: 1; }
    .lg\:order-2 { order: 2; }

    /* Gap */
    .lg\:gap-4 { gap: var(--spacing-4); }
    .lg\:gap-5 { gap: var(--spacing-5); }
    .lg\:gap-6 { gap: var(--spacing-6); }
    .lg\:gap-7 { gap: var(--spacing-7); }
    .lg\:gap-8 { gap: var(--spacing-8); }

    /* Product Grid */
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Category Grid */
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Card Deck */
    .card-deck {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Hero */
    .hero-title {
        font-size: 3.5rem;
    }

    /* Cart Layout */
    .cart-layout {
        grid-template-columns: 1fr 380px;
    }

    /* Footer Grid */
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Stat Cards */
    .stat-cards {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Grid overrides */
    .grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12, 1fr);
    }

    /* Checkout */
    .checkout-step-connector {
        width: 80px;
    }

    /* Payment Methods */
    .payment-methods {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Admin specific */
    .admin-sidebar {
        transform: translateX(0);
    }
}


/* ------------------------------------------------------------
   Wide (min-width: 1280px)
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
    .xl\:hidden { display: none; }
    .xl\:visible { display: block; }
    .xl\:flex { display: flex; }
    .xl\:grid { display: grid; }
    .xl\:block { display: block; }

    /* Grid */
    .xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
    .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .xl\:col-span-1 { grid-column: span 1 / span 1; }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
    .xl\:col-span-3 { grid-column: span 3 / span 3; }
    .xl\:col-span-4 { grid-column: span 4 / span 4; }
    .xl\:col-span-6 { grid-column: span 6 / span 6; }
    .xl\:col-span-full { grid-column: 1 / -1; }

    /* Flex */
    .xl\:flex-row { flex-direction: row; }
    .xl\:flex-col { flex-direction: column; }
    .xl\:justify-center { justify-content: center; }
    .xl\:justify-between { justify-content: space-between; }
    .xl\:items-center { align-items: center; }

    /* Width */
    .xl\:w-full { width: 100%; }
    .xl\:w-1\/2 { width: 50%; }
    .xl\:w-1\/3 { width: 33.333333%; }
    .xl\:w-1\/4 { width: 25%; }
    .xl\:w-auto { width: auto; }

    /* Margin */
    .xl\:mx-auto { margin-left: auto; margin-right: auto; }

    /* Padding */
    .xl\:px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }

    /* Container at max width */
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }

    /* Hero XL */
    .hero-title {
        font-size: 4rem;
    }

    /* Product Grid at max */
    .product-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* ------------------------------------------------------------
   Extra Small (max-width: 480px) - Fine-tune for small phones
   ------------------------------------------------------------ */
@media (max-width: 480px) {
    .xs\:hidden { display: none; }
    .xs\:block { display: block; }
    .xs\:flex { display: flex; }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.375rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero {
        min-height: 320px;
        padding: var(--spacing-5) var(--spacing-3);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .product-info {
        padding: var(--spacing-3);
    }

    .product-name {
        font-size: 0.85rem;
    }

    .product-price-current {
        font-size: 1rem;
    }

    .add-to-cart-btn {
        padding: 8px var(--spacing-3);
        font-size: 0.8rem;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

    .btn-lg {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    .modal {
        max-width: 100%;
        margin: var(--spacing-3);
        border-radius: var(--radius-md);
    }

    .modal-header {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .modal-body {
        padding: var(--spacing-4);
    }

    .modal-footer {
        padding: var(--spacing-3) var(--spacing-4);
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }

    .cart-item {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    .cart-item-image {
        width: 60px;
        height: 60px;
    }

    .cart-item-total {
        min-width: auto;
        text-align: left;
    }

    .payment-methods {
        grid-template-columns: 1fr;
    }

    .checkout-steps {
        gap: var(--spacing-1);
    }

    .checkout-step-number {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .toast {
        min-width: auto;
        max-width: calc(100vw - var(--spacing-8));
    }

    .toast-container {
        left: var(--spacing-3);
        right: var(--spacing-3);
    }

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }

    .filter-bar {
        padding: var(--spacing-3);
    }

    .avatar-group .avatar {
        margin-left: -4px;
    }
}


/* ------------------------------------------------------------
   Reduced Motion Preference
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-fadeIn,
    .animate-fadeOut,
    .animate-slideIn,
    .animate-slideOut,
    .animate-slideUp,
    .animate-slideDown,
    .animate-slideInRight,
    .animate-slideOutRight,
    .animate-pulse,
    .animate-spin,
    .animate-bounce,
    .animate-scaleIn,
    .animate-scaleOut,
    .animate-shake,
    .animate-float,
    .animate-shimmer {
        animation: none !important;
    }

    .product-card:hover {
        transform: none;
    }

    .card:hover {
        transform: none;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .btn-danger:hover {
        transform: none;
    }

    .product-image img {
        transition: none;
    }

    .card-image img {
        transition: none;
    }

    .back-to-top:hover {
        transform: none;
    }

    .footer-social-link:hover {
        transform: none;
    }

    .skeleton {
        animation: none;
        background: var(--gray-200);
    }

    .spinner {
        animation: none;
        border-top-color: var(--primary);
    }

    .progress-bar-animated {
        animation: none;
    }

    .drawer {
        transition: none;
    }

    .mobile-menu {
        transition: none;
    }

    .modal-overlay {
        transition: none;
    }

    .modal {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .modal-overlay.active .modal {
        transform: none;
    }

    .dropdown-menu {
        transition: none;
    }

    .toast {
        animation: none;
    }
}


/* ------------------------------------------------------------
   Forced Colors / High Contrast Mode
   ------------------------------------------------------------ */
@media (forced-colors: active) {
    .btn {
        border: 2px solid ButtonText;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        border-color: Highlight;
    }

    .input,
    textarea,
    select {
        border: 2px solid FieldText;
    }

    a {
        text-decoration: underline;
    }

    .nav-link.active {
        text-decoration: underline;
    }

    .tab.active {
        text-decoration: underline;
    }
}


/* ------------------------------------------------------------
   Dark Mode Support (prefers-color-scheme)
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #18181b;
        --gray-100: #27272a;
        --gray-200: #3f3f46;
        --gray-300: #52525b;
        --gray-400: #71717a;
        --gray-500: #a1a1aa;
        --gray-600: #d4d4d8;
        --gray-700: #e4e4e7;
        --gray-800: #f4f4f5;
        --gray-900: #fafafa;
        --primary-bg: var(--primary-ring);
        --secondary-bg: var(--secondary-ring);
        --success-bg: rgba(5, 150, 105, 0.15);
        --danger-bg: rgba(220, 38, 38, 0.15);
        --warning-bg: rgba(217, 119, 6, 0.15);
        --info-bg: rgba(59, 130, 246, 0.15);
    }

    body {
        background-color: #0f0f11;
        color: var(--gray-900);
    }

    .card,
    .product-card,
    .cart-summary,
    .form-card,
    .data-table-container,
    .filter-bar,
    .chart-container,
    .stat-card,
    .admin-header {
        background-color: var(--gray-50);
        border-color: var(--gray-200);
    }

    .input,
    textarea,
    select {
        background-color: var(--gray-50);
        border-color: var(--gray-200);
        color: var(--gray-900);
    }

    .modal,
    .drawer,
    .mobile-menu,
    .dropdown-menu {
        background-color: var(--gray-50);
    }

    .table th,
    .data-table th,
    .form-card-header,
    .form-card-footer,
    .card-footer {
        background-color: var(--gray-100);
    }

    .table td,
    .data-table td {
        color: var(--gray-700);
    }
}


/* ------------------------------------------------------------
   Hover: None (Touch Devices)
   ------------------------------------------------------------ */
@media (hover: none) {
    .card:hover {
        transform: none;
    }

    .product-card:hover {
        transform: none;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .btn-danger:hover {
        transform: none;
    }

    .product-image-actions {
        opacity: 1;
        transform: none;
    }

    .product-card:hover .product-image img {
        transform: none;
    }

    .card-image:hover img {
        transform: none;
    }

    .footer-social-link:hover {
        transform: none;
    }

    .back-to-top:hover {
        transform: none;
    }

    .stat-card:hover {
        transform: none;
    }
}


/* ------------------------------------------------------------
   Landscape orientation on phones
   ------------------------------------------------------------ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 280px;
        padding: var(--spacing-4) var(--spacing-3);
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .modal {
        max-height: 95vh;
    }

    .drawer {
        width: 280px;
    }
}