/* ===========================================
   GND THEME - Responsive Styles
   =========================================== */

/* Breakpoints are now standardized in style.css for better performance */

/* ===== Desktop to Tablet (992px - 1199px) ===== */
@media (max-width: 1199px) {
    /* Container handled in style.css */

    .main-menu .navbar-nav>li>a {
        padding: var(--gnd-space-md) var(--gnd-space-md);
        font-size: 12px;
    }

    .main-menu .dropdown-menu {
        min-width: 600px;
    }

    /* Products - 3 columns on smaller desktop */
    .product-list.grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
}

/* ===== Tablet (768px - 991px) ===== */
@media (max-width: 991px) {
    /* Container handled in style.css */

    /* Header */
    .main-header {
        padding: var(--gnd-space-sm) 0;
    }

    .logo img {
        max-height: 45px;
    }

    .header-search-box {
        display: none;
    }

    /* Navigation */
    #nav-top-menu,
    .nav-top-menu {
        display: none;
    }

    /* Products - 2 columns on tablet */
    .product-list.grid,
    .product-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    /* Product Detail */
    .primary-box {
        padding: var(--gnd-space-md);
    }

    .product-name {
        font-size: var(--gnd-font-size-xl);
        font-weight: 700;
    }

    .pb-right-column {
        padding-left: 15px;
    }

    .product-price-group .price:not(.old-price) {
        font-size: var(--gnd-font-size-2xl);
    }

    /* Sidebar hidden on tablet */
    #left_column {
        display: none;
    }

    #center_column {
        width: 100%;
    }

    /* Footer */
    .footer {
        padding: var(--gnd-space-xl) 0;
    }

    .footer [class*="col-"] {
        margin-bottom: var(--gnd-space-lg);
    }
}

/* ===== Mobile (576px - 767px) ===== */
@media (max-width: 767px) {
    :root {
        --gnd-space-lg: 16px;
        --gnd-space-xl: 20px;
        --gnd-space-2xl: 24px;
        --gnd-space-3xl: 32px;
    }

    .container {
        padding: 0 var(--gnd-space-md);
    }

    /* Header */
    .top-header {
        display: none;
    }

    .headerTop-discount {
        padding: var(--gnd-space-xs);
        font-size: 11px;
    }

    .main-header .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        flex: 1;
        text-align: center;
    }

    .logo img {
        max-height: 50px;
    }

    /* Mobile Search */
    .search-box {
        padding: 15px;
        width: 100%;
    }

    .search-box .input-search {
        width: 100%;
        position: relative;
    }

    .search-box input[type="text"] {
        width: 100%;
        padding: 14px 60px 14px 20px;
        border-radius: var(--gnd-radius-full);
        border: 2px solid var(--gnd-gray-200);
        font-size: 14px;
        background: var(--gnd-white);
    }

    .search-box .btn-search {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: var(--gnd-radius-full);
        background: var(--gnd-primary);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gnd-white);
    }

    /* User Navigation */
    .user-navigation {
        gap: 0;
    }

    .user-navigation li>a,
    .login-register-button-container {
        padding: var(--gnd-space-xs);
    }

    .user-navigation .nav-span,
    .user-navigation .login-container {
        display: none;
    }

    .user-navigation .icon-container {
        width: 36px;
        height: 36px;
        margin-bottom: 0;
    }

    /* Mobile Menu Button */
    .mobileMenuLeft {
        flex: 0 0 auto;
    }

    /* Service Bar */
    .service {
        padding: var(--gnd-space-md) 0;
    }

    .serviceMobile {
        display: flex;
        overflow-x: auto;
        gap: var(--gnd-space-sm);
        padding-bottom: var(--gnd-space-sm);
        -webkit-overflow-scrolling: touch;
    }

    .service-item {
        min-width: 130px;
        padding: var(--gnd-space-sm);
        flex-direction: column;
        text-align: center;
    }

    .service-item .icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: var(--gnd-space-xs);
    }

    .service-item .info h3 {
        font-size: 10px;
    }

    /* Section Headings */
    .page-heading {
        margin-bottom: var(--gnd-space-md);
        padding-bottom: var(--gnd-space-sm);
    }

    .page-heading-title {
        font-size: var(--gnd-font-size-base);
    }

    /* Products - 2 columns on mobile */
    .product-list,
    .product-list.grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .product-list>li {
        padding: 0;
        margin-bottom: 0;
        min-height: auto;
    }

    .product-container {
        border-radius: var(--gnd-radius-md);
    }

    .product-container .right-block {
        padding: var(--gnd-space-sm);
    }

    .product-container .product-name {
        font-size: 12px;
        margin-bottom: var(--gnd-space-xs);
    }

    .content_price .old-price {
        font-size: 11px;
    }

    .content_price .product-price {
        font-size: 16px;
        font-weight: 700;
    }

    .discount-badge {
        font-size: 10px;
        padding: 1px 5px;
    }

    .product-container .buttons a {
        width: 32px;
        height: 32px;
    }

    /* Slider */
    .vitrinSlider {
        border-radius: var(--gnd-radius-md);
        margin-bottom: var(--gnd-space-md);
    }

    /* Product Detail */
    .primary-box {
        padding: var(--gnd-space-md);
        border-radius: var(--gnd-radius-md);
        margin-bottom: var(--gnd-space-md);
    }

    #product .pb-left-column .product-image .product-full {
        width: 100%;
        float: none;
        margin-bottom: var(--gnd-space-md);
        min-height: auto;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #product .pb-left-column .product-image .product-full img {
        max-height: 350px;
    }

    #product .product-full .catalog-item-ribbons {
        top: 10px;
        left: 10px;
    }

    #product .product-full .buttons {
        top: 10px;
        right: 10px;
    }

    .product-name {
        font-size: var(--gnd-font-size-lg);
        margin-bottom: var(--gnd-space-sm);
    }

    .info-orther {
        margin-bottom: var(--gnd-space-md);
        padding-bottom: var(--gnd-space-md);
    }

    .info-orther p {
        font-size: var(--gnd-font-size-sm);
    }

    .product-price-group {
        margin-bottom: var(--gnd-space-md);
    }

    .product-price-group .price:not(.old-price) {
        font-size: var(--gnd-font-size-xl);
    }

    .product-price-group .discount {
        width: 50px;
        height: 50px;
        font-size: var(--gnd-font-size-base);
    }

    .button-group {
        flex-direction: column;
    }

    .btn-add-cart {
        width: 100%;
        padding: var(--gnd-space-md);
    }

    /* Product Tabs */
    .product-tab {
        border-radius: var(--gnd-radius-md);
    }

    .product-tab .nav-tab li a {
        padding: var(--gnd-space-sm) var(--gnd-space-md);
        font-size: 11px;
    }

    .product-tab .nav-tab li a .material-icons {
        display: none;
    }

    .product-tab .tab-container {
        padding: var(--gnd-space-md);
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px;
        padding: var(--gnd-space-sm) 0;
    }

    /* Footer */
    .footer {
        padding: var(--gnd-space-xl) 0;
        padding-bottom: 80px;
        /* Space for fixed bottom menu */
        margin-top: var(--gnd-space-xl);
    }

    .footer .introduce-title {
        font-size: var(--gnd-font-size-sm);
        margin-bottom: var(--gnd-space-sm);
    }

    .footer .introduce-list li {
        margin-bottom: var(--gnd-space-xs);
    }

    .footer .introduce-list li a {
        font-size: var(--gnd-font-size-sm);
    }

    .social-link a {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .apps-wrap img {
        max-width: 120px;
    }

    /* Fixed Bottom Menu */
    .menufix {
        display: flex;
        padding: var(--gnd-space-sm) 0;
        padding-bottom: calc(var(--gnd-space-sm) + env(safe-area-inset-bottom));
    }

    .menufix a {
        font-size: 10px;
    }

    .menufix a i {
        font-size: 18px;
    }
}

/* ===== Small Mobile (up to 575px) ===== */
@media (max-width: 575px) {
    :root {
        --gnd-font-size-base: 14px;
    }

    .container {
        padding: 0 var(--gnd-space-sm);
    }

    .headerTop-discount {
        font-size: 10px;
        padding: var(--gnd-space-xs);
    }

    .logo img {
        max-height: 35px;
    }

    /* Products Grid - 2 columns maintained */
    .product-list {
        gap: var(--gnd-space-xs);
    }

    .product-container .product-name {
        font-size: 11px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .content_price .old-price {
        font-size: 10px;
    }

    .content_price .product-price {
        font-size: 13px;
    }

    /* Ribbons */
    .catalog-item-ribbons {
        top: var(--gnd-space-xs);
        left: var(--gnd-space-xs);
    }

    .ribbon-new,
    .ribbon-sale,
    .ribbon-freeCargo,
    .ribbon-fastCargo {
        font-size: 9px;
        padding: 2px 5px;
    }

    /* Product Detail */
    .product-name {
        font-size: var(--gnd-font-size-base);
    }

    .product-price-group .price:not(.old-price) {
        font-size: var(--gnd-font-size-lg);
    }

    /* Tabs */
    .product-tab .nav-tab {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-tab .nav-tab li a {
        font-size: 10px;
        padding: var(--gnd-space-sm);
    }
}

/* ===== Landscape Phone Adjustments ===== */
@media (max-width: 767px) and (orientation: landscape) {
    .menufix {
        display: none;
    }

    .footer {
        padding-bottom: var(--gnd-space-xl);
    }

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

/* ===== Height-based Adjustments ===== */
@media (max-height: 600px) {
    .menufix {
        padding: var(--gnd-space-xs) 0;
    }

    .menufix a {
        font-size: 9px;
    }

    .menufix a i {
        font-size: 16px;
    }
}

/* ===== High DPI / Retina Adjustments ===== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .product-container .left-block .imgLink img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ===== Safe Area (iPhone X+) ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .menufix {
        padding-bottom: calc(var(--gnd-space-sm) + env(safe-area-inset-bottom));
    }

    .footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* ===== Print Styles ===== */
@media print {

    .header,
    #header,
    .menufix,
    .footer,
    #footer,
    .buttons,
    .btn-add-cart,
    .form-action {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .product-name {
        font-size: 18pt;
    }

    .product-price-group .price {
        font-size: 24pt;
        color: #000;
    }
}

/* ===== Accessibility ===== */
@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;
    }
}

/* ===== Dark Mode Support (Future) ===== */
@media (prefers-color-scheme: dark) {
    /* Placeholder for dark mode styles */
    /* Can be enabled by uncommenting */
    /*
  :root {
    --gnd-light: #0f172a;
    --gnd-white: #1e293b;
    --gnd-dark: #f8fafc;
    --gnd-gray-100: #1e293b;
    --gnd-gray-200: #334155;
    --gnd-gray-700: #e2e8f0;
  }
  
  body {
    color: var(--gnd-gray-300);
    background-color: var(--gnd-dark);
  }
  */
}