/* ============================================================
   RESPONSIVE CSS - B2B E-Commerce Frontend
   ============================================================
   Breakpoints:
     Desktop:      > 1024px  (default, no media query)
     Tablet:       <= 1024px
     Small Tablet: <= 768px
     Mobile:       <= 576px
     Small Mobile: <= 375px
   ============================================================ */

/* ----------------------------------------------------------
   DESKTOP DEFAULTS (no media query)
   Ensure certain elements are correctly shown/hidden at
   desktop size regardless of load order.
   ---------------------------------------------------------- */
.mobile-menu-toggle {
    display: none;
}

.mega-menu-nav {
    display: block;
}

.mobile-menu-overlay,
.mobile-menu-drawer {
    /* Controlled by JS; default hidden */
}


/* ==========================================================
   TABLET  ( max-width: 1024px )
   ========================================================== */
@media screen and (max-width: 1024px) {

    /* --- Container --- */
    .container {
        padding: 0 16px;
    }

    /* --- Header --- */
    .mobile-menu-toggle {
        display: flex;
    }

    .mega-menu-nav {
        display: none;
    }

    .header-search {
        max-width: 320px;
    }

    .header-search .search-input {
        font-size: 14px;
    }

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

    /* --- Hero Slider --- */
    .hero-slider,
    .hero-slider .swiper,
    .hero-slider .swiper-slide,
    .hero-slide {
        height: 400px;
    }

    .hero-slide-image img {
        height: 400px;
    }

    /* --- Category Showcase --- */
    .category-showcase {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 8px;
    }

    .category-showcase::-webkit-scrollbar {
        height: 4px;
    }

    .category-showcase::-webkit-scrollbar-thumb {
        background: var(--border-color, #e2e8f0);
        border-radius: 4px;
    }

    .category-showcase-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

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

    /* --- Flash Container --- */
    .flash-container {
        max-width: 360px;
        right: 16px;
        top: 16px;
    }

    /* --- Announcement Bar --- */
    .announcement-bar {
        font-size: 12px;
    }

    /* --- Brands Slider --- */
    .brands-grid,
    .brand-slider {
        gap: 16px;
    }

    /* --- Section Spacing --- */
    .section {
        padding: 40px 0;
    }

    .section-header {
        margin-bottom: 24px;
    }
}


/* ==========================================================
   SMALL TABLET  ( max-width: 768px )
   ========================================================== */
@media screen and (max-width: 768px) {

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

    /* --- Header --- */
    .header-logo img {
        max-width: 120px;
    }

    .header-actions .action-text {
        display: none;
    }

    .header-actions .action-link {
        font-size: 18px;
    }

    /* --- Hero Slider --- */
    .hero-slider,
    .hero-slider .swiper,
    .hero-slider .swiper-slide,
    .hero-slide {
        height: 300px;
    }

    .hero-slide-image img {
        height: 300px;
    }

    .hero-slide-content h2,
    .hero-slide-title {
        font-size: 22px;
    }

    .hero-slide-content p,
    .hero-slide-desc {
        font-size: 14px;
    }

    .hero-slide-content .btn,
    .hero-slide-btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    /* --- Section Titles --- */
    .section-title {
        font-size: 20px;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .footer-badges span {
        font-size: 12px;
    }

    /* --- Section Spacing --- */
    .section {
        padding: 32px 0;
    }

    /* --- User Dropdown --- */
    .user-dropdown {
        right: 0;
        min-width: 200px;
    }

    /* --- Product Card --- */
    .product-card-info .product-name {
        font-size: 14px;
    }

    .product-card-info .product-meta {
        font-size: 11px;
    }

    .product-card-price .price-usd {
        font-size: 16px;
    }

    .product-card-price .price-tl {
        font-size: 12px;
    }

    /* --- Pagination --- */
    .pagination {
        gap: 4px;
    }

    .page-link {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* --- Tables --- */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }

    /* --- Brands --- */
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ==========================================================
   MOBILE  ( max-width: 576px )
   ========================================================== */
@media screen and (max-width: 576px) {

    /* --- Container --- */
    .container {
        padding: 0 12px;
    }

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

    /* --- Product Card --- */
    .product-card-image {
        height: 160px;
    }

    .product-card-image img {
        height: 160px;
        object-fit: contain;
    }

    .product-card-info {
        padding: 8px;
    }

    .product-card-info .product-name {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .product-card-info .product-brand {
        font-size: 11px;
    }

    .product-card-info .product-meta {
        font-size: 10px;
    }

    .product-card-price {
        padding: 8px;
    }

    .product-card-price .price-usd {
        font-size: 15px;
    }

    .product-card-price .price-kdv {
        font-size: 11px;
    }

    .product-card-price .price-tl {
        font-size: 11px;
    }

    .btn-add-cart {
        font-size: 12px;
        padding: 6px 10px;
    }

    .btn-login-price {
        font-size: 12px;
        padding: 8px;
    }

    /* --- Product Badges --- */
    .product-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* --- Variant Chips --- */
    .variant-chips {
        gap: 4px;
    }

    .variant-chip {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* --- Header --- */
    .header-container {
        gap: 8px;
    }

    .header-logo img {
        max-width: 100px;
    }

    .header-search .search-input {
        font-size: 16px; /* prevents iOS zoom */
        padding: 9px 12px;
    }

    .search-results-dropdown {
        max-height: 60vh;
    }

    /* --- Hero Slider --- */
    .hero-slider,
    .hero-slider .swiper,
    .hero-slider .swiper-slide,
    .hero-slide {
        height: 240px;
    }

    .hero-slide-image img {
        height: 240px;
    }

    .hero-slide-content h2,
    .hero-slide-title {
        font-size: 18px;
    }

    .hero-slide-content p,
    .hero-slide-desc {
        font-size: 13px;
    }

    .hero-slide-content .btn,
    .hero-slide-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* --- Category Showcase --- */
    .category-showcase-item {
        width: 70px;
    }

    .category-showcase-item img,
    .category-showcase-icon {
        width: 70px;
        height: 70px;
    }

    .category-showcase-item span,
    .category-showcase-name {
        font-size: 11px;
    }

    /* --- Cart Sidebar / Drawer --- */
    .cart-sidebar,
    .cart-drawer {
        width: 100% !important;
        max-width: 100%;
    }

    /* --- Breadcrumb --- */
    .breadcrumb-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .breadcrumb {
        flex-wrap: nowrap;
        display: inline-flex;
    }

    .breadcrumb-item {
        font-size: 12px;
    }

    /* --- Section Titles --- */
    .section-title {
        font-size: 18px;
    }

    /* --- Section Spacing --- */
    .section {
        padding: 24px 0;
    }

    .section-header {
        margin-bottom: 16px;
    }

    /* --- Announcement Bar --- */
    .announcement-bar {
        font-size: 11px;
        padding: 6px 0;
    }

    .announcement-item {
        font-size: 11px;
    }

    /* --- Footer --- */
    .footer-top {
        padding: 24px 0;
    }

    .footer-title {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer-links li {
        margin-bottom: 6px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-contact li {
        font-size: 13px;
    }

    .footer-bottom {
        padding: 16px 0;
        font-size: 12px;
    }

    /* --- Flash Messages --- */
    .flash-container {
        max-width: 100%;
        right: 8px;
        left: 8px;
        top: 8px;
    }

    /* --- Modals & Drawers --- */
    .modal-dialog,
    .modal-content,
    .drawer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 0;
    }

    .modal-body {
        padding: 16px;
    }

    /* --- Mobile Menu Drawer --- */
    .mobile-menu-drawer {
        width: 85%;
    }

    /* --- Pagination --- */
    .pagination-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pagination {
        flex-wrap: nowrap;
    }

    .page-link {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* --- Brands --- */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* --- Tables --- */
    .table-responsive {
        margin: 0 -12px;
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 500px;
    }
}


/* ==========================================================
   SMALL MOBILE  ( max-width: 375px )
   ========================================================== */
@media screen and (max-width: 375px) {

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

    /* --- Product Card --- */
    .product-card-image {
        height: 130px;
    }

    .product-card-image img {
        height: 130px;
    }

    .product-card-info {
        padding: 6px;
    }

    .product-card-info .product-name {
        font-size: 12px;
    }

    .product-card-info .product-brand {
        font-size: 10px;
    }

    .product-card-info .product-meta {
        display: none;
    }

    .product-card-price {
        padding: 6px;
    }

    .product-card-price .price-usd {
        font-size: 14px;
    }

    .product-card-price .price-kdv {
        font-size: 10px;
    }

    .product-card-price .price-tl {
        font-size: 10px;
    }

    .btn-add-cart {
        font-size: 11px;
        padding: 5px 8px;
    }

    .btn-login-price {
        font-size: 11px;
        padding: 6px;
    }

    /* --- Font Sizes --- */
    .section-title {
        font-size: 16px;
    }

    .section-subtitle {
        font-size: 12px;
    }

    /* --- Container --- */
    .container {
        padding: 0 8px;
    }

    /* --- Header --- */
    .header-logo img {
        max-width: 80px;
    }

    .header-container {
        gap: 6px;
    }

    .header-actions {
        gap: 2px;
    }

    .header-action-item {
        font-size: 16px;
        padding: 6px;
    }

    /* --- Hero Slider --- */
    .hero-slider,
    .hero-slider .swiper,
    .hero-slider .swiper-slide,
    .hero-slide {
        height: 200px;
    }

    .hero-slide-image img {
        height: 200px;
    }

    .hero-slide-content h2,
    .hero-slide-title {
        font-size: 16px;
    }

    .hero-slide-content p,
    .hero-slide-desc {
        font-size: 12px;
    }

    .hero-slide-content .btn,
    .hero-slide-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* --- Category Showcase --- */
    .category-showcase-item {
        width: 60px;
    }

    .category-showcase-item img,
    .category-showcase-icon {
        width: 60px;
        height: 60px;
    }

    .category-showcase-item span,
    .category-showcase-name {
        font-size: 10px;
    }

    /* --- Announcement Bar --- */
    .announcement-bar {
        font-size: 10px;
        padding: 4px 0;
    }

    /* --- Breadcrumb --- */
    .breadcrumb-item {
        font-size: 11px;
    }

    /* --- Footer --- */
    .footer-title {
        font-size: 14px;
    }

    .footer-links a {
        font-size: 12px;
    }

    .footer-contact li {
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 11px;
    }

    .footer-badges span {
        font-size: 10px;
    }

    /* --- Mobile Menu --- */
    .mobile-menu-drawer {
        width: 90%;
    }

    .mobile-menu-list a {
        font-size: 14px;
        padding: 10px 16px;
    }

    /* --- Pagination --- */
    .page-link {
        padding: 4px 6px;
        font-size: 11px;
    }

    /* --- Brands --- */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* --- Section Spacing --- */
    .section {
        padding: 16px 0;
    }

    .section-header {
        margin-bottom: 12px;
    }

    /* --- Variant Chips --- */
    .variant-chip {
        font-size: 9px;
        padding: 2px 4px;
    }
}


/* ==========================================================
   UTILITY: PRINT STYLES
   ========================================================== */
@media print {
    .announcement-bar,
    .site-header,
    .mega-menu-nav,
    .mobile-menu-toggle,
    .mobile-menu-drawer,
    .mobile-menu-overlay,
    .site-footer,
    .flash-container,
    .breadcrumb-nav,
    .pagination-nav,
    .btn-add-cart,
    .btn-login-price,
    .cart-sidebar,
    .cart-drawer {
        display: none !important;
    }

    .main-content {
        padding: 0;
    }

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


/* ==========================================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================================== */
@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;
    }
}


/* ==========================================================
   LANDSCAPE PHONE ADJUSTMENTS
   ========================================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero-slider,
    .hero-slider .swiper,
    .hero-slider .swiper-slide,
    .hero-slide {
        height: 220px;
    }

    .hero-slide-image img {
        height: 220px;
    }

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