/* Responsive Design */

/* Large Desktop */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .hero-subtitle {
        font-size: 1.8rem;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .advantages-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--dark-bg);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: var(--spacing-xl);
        transition: var(--transition-normal);
        border-top: 1px solid var(--border-color);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-list {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .nav-link {
        font-size: 1.2rem;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    
    .hamburger {
        display: flex;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .categories-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    .countdown {
        gap: var(--spacing-sm);
    }
    
    .countdown-item {
        min-width: 60px;
        padding: var(--spacing-sm);
    }
    
    .countdown-number {
        font-size: 1.5rem;
    }
}

/* Mobile Large */
@media (max-width: 768px) {
    :root {
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.75rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-xxl: 2.5rem;
    }
    
    /* Center social links on mobile */
    .social-contact .social-links {
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
    
    .social-contact .social-link {
        justify-content: center;
        text-align: center;
        padding: 0.5rem 1rem;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .nav-container {
        padding: 0 var(--spacing-sm);
    }
    
    .nav-actions {
        gap: var(--spacing-xs);
    }
    
    .cart-btn {
        padding: var(--spacing-xs);
    }
    
    .hero {
        height: 70vh;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .cta-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 1rem;
    }
    
    .slider-controls {
        padding: 0 var(--spacing-sm);
    }
    
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .category-card {
        padding: var(--spacing-lg);
    }
    
    .category-icon {
        font-size: 2.5rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .service-card {
        padding: var(--spacing-lg);
    }
    
    .service-icon {
        font-size: 2.5rem;
    }
    
    .advantage-card {
        padding: var(--spacing-lg);
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .metric-number {
        font-size: 2.5rem;
    }
    
    .countdown {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .countdown-item {
        min-width: 70px;
    }
    
    .newsletter-form {
        display: grid; /* override to grid for precise placement */
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: var(--spacing-xs);
    }
    .newsletter-form input { grid-column: 1; grid-row: 1; width: 100%; }
    .newsletter-form button { grid-column: 1; grid-row: 2; width: 100%; }
    .newsletter-form .form-error { grid-column: 1; grid-row: 3; justify-self: start; }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* Tablet View (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .cart-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-sm);
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .cart-items, 
    .cart-summary {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md);
        box-sizing: border-box;
    }
    
    .cart-summary {
        position: static;
        margin-top: var(--spacing-lg);
    }
    
    .recommended-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        padding: 0 var(--spacing-sm);
    }
    
    .cart-item {
        flex-direction: row;
        align-items: center;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .cart-item-details {
        flex: 1;
        min-width: 0; /* Prevents flex items from overflowing */
    }
    
    .cart-item-actions {
        flex-wrap: nowrap;
    }
}

/* Mobile View (up to 767px) */
@media (max-width: 767px) {
    .story-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .story-image {
        order: 2;
    }
    
    .story-text {
        order: 1;
    }
    
    .cart-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-sm);
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .cart-header {
        padding: 2.5rem 0;
        min-height: auto;
    }
    
    .cart-items, 
    .cart-summary {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md);
        box-sizing: border-box;
    }
    
    .cart-items-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .cart-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-md);
        max-width: 100%;
        margin: 0 0 var(--spacing-md) 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .cart-item:last-child {
        margin-bottom: 0;
    }
    
    .cart-item-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 var(--spacing-sm) 0;
        border-radius: 6px;
        object-fit: cover;
    }
    
    .cart-item-details {
        width: 100%;
        padding: 0;
        margin-bottom: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .cart-item-title {
        font-size: 1.1rem;
        margin: 0 0 0.5rem 0;
    }
    
    .cart-item-price {
        font-size: 1rem;
        color: var(--accent-color);
        margin-bottom: var(--spacing-sm);
    }
    
    .cart-item-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-sm);
    }
    
    .quantity-selector {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .remove-item-btn {
        background: transparent;
        color: var(--error-color);
        border: 1px solid var(--error-color);
        border-radius: 4px;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s ease;
        width: auto;
        min-width: 120px;
        text-align: center;
    }
    
    .remove-item-btn:hover {
        background: rgba(231, 76, 60, 0.1);
    }
    
    .cart-summary {
        position: static;
        margin-top: var(--spacing-lg);
        padding: var(--spacing-md);
        background: var(--dark-bg);
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .recommended-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: 0;
    }
    
    .summary-row {
        font-size: 0.95rem;
        padding: 0.5rem 0;
    }
    
    .checkout-btn {
        width: 100%;
        padding: 1rem;
        margin-top: var(--spacing-md);
        font-size: 1rem;
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .nav-logo .logo-text {
        font-size: 1.2rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.3rem; }
    
    .category-card,
    .service-card,
    .advantage-card {
        padding: var(--spacing-md);
    }
    
    .newsletter-signup {
        padding: var(--spacing-md);
    }
    
    .offer-content h2 {
        font-size: 1.8rem;
    }
    
    .offer-content p {
        font-size: 1rem;
    }
    
    .countdown-number {
        font-size: 1.3rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
    }
    
    .blog-content {
        padding: var(--spacing-md);
    }

    /* Auth (Login/Register) mobile sizing */
    .auth-section { padding: calc(72px + var(--spacing-lg)) 0 var(--spacing-xl); }
    .auth-container { margin: var(--spacing-md); padding: var(--spacing-lg); }
    .auth-form h2 { font-size: 1.4rem; }
    .auth-form > p { margin-bottom: var(--spacing-lg); font-size: 0.95rem; }
    .auth-tabs { gap: var(--spacing-sm); }
    .auth-tab { flex: 1; padding: var(--spacing-sm); font-size: 1rem; }
    .form-row { grid-template-columns: 1fr; gap: var(--spacing-sm); }
    .form-group { margin-bottom: var(--spacing-sm); }
    .form-group input { font-size: 16px; padding: var(--spacing-sm); }
    .form-options { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
    .checkbox-label { font-size: 0.9rem; white-space: normal; line-height: 1.4; overflow-wrap: anywhere; }
    .checkbox-label a { white-space: normal; }
    .checkbox-label .consent-text { display: block; margin-top: 4px; }
    .auth-btn { width: 100%; padding: var(--spacing-md); font-size: 1.05rem; }

    /* Success actions buttons stack */
    .success-actions { flex-direction: column; align-items: center; }
    .continue-shopping-btn, .home-btn { width: 100%; text-align: center; }
}

/* Desktop and up: keep newsletter input narrower on large screens */
@media (min-width: 992px) {
    .newsletter-form input {
        width: 340px; /* fixed comfortable width on large screens (grid context) */
        max-width: 340px;
    }
    .newsletter-form .form-error {
        justify-self: start; /* align error text under the input */
    }
}

/* Mobile Extra Small */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .cart-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .item-image {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: var(--spacing-sm);
    }
    
    .item-image img {
        width: 120px !important;
        height: 120px !important;
        object-fit: contain;
        margin: 0 auto;
    }
    
    .item-details {
        width: 100%;
        text-align: center;
        margin-bottom: var(--spacing-sm);
    }
    
    .item-quantity {
        margin: var(--spacing-sm) 0;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .cta-btn {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .countdown {
        gap: var(--spacing-xs);
    }
    
    .countdown-item {
        min-width: 60px;
        padding: var(--spacing-xs);
    }
    
    .countdown-number {
        font-size: 1.2rem;
    }
    
    /* Shop Page Responsive */
    .filters-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .filter-group {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .filter-select {
        min-width: 150px;
    }
    
    .clear-filters-btn {
        margin-left: 0;
        align-self: center;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .modal-body {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .modal-image img {
        height: 250px;
    }
    
    /* About Page Responsive */
    .story-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .story-image img {
        height: 300px;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    /* Cart Page Responsive */
    .cart-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .cart-summary {
        position: static;
    }
    
    .cart-item {
        grid-template-columns: 60px 1fr auto;
        gap: var(--spacing-sm);
    }
    
    .item-quantity {
        grid-column: 2;
        justify-self: start;
        margin-top: var(--spacing-xs);
    }
    
    .item-total {
        grid-column: 3;
        grid-row: 1;
    }
    
    .remove-item-btn {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }
    
    .recommended-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Stack recommended cards one per row on small screens */
    .recommended-grid {
        grid-template-columns: 1fr;
    }

    /* Stack cart item content vertically: image on top, text below */
    .cart-item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        align-items: start;
    }
    .item-image {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        margin-bottom: var(--spacing-sm);
    }
    .item-image img {
        width: 120px;
        height: 120px;
        object-fit: cover;
    }
    .item-details {
        grid-column: 1;
        grid-row: 2;
    }
    .item-quantity {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 0;
    }
    .item-total {
        grid-column: 1;
        grid-row: 3;
        justify-self: end;
    }
    .remove-item-btn {
        grid-column: 1;
        grid-row: 4;
        justify-self: end;
    }
    
    /* Auth Page Responsive */
    .auth-container {
        margin: var(--spacing-md);
        padding: var(--spacing-lg);
    }
    /* Make auth section/form compact like login */
    .auth-section { padding: calc(72px + var(--spacing-lg)) 0 var(--spacing-xl); }
    .auth-form h2 { font-size: 1.4rem; }
    .auth-form > p { margin-bottom: var(--spacing-lg); font-size: 0.95rem; }
    .form-row { grid-template-columns: 1fr; gap: var(--spacing-sm); }
    .form-group { margin-bottom: var(--spacing-sm); }
    .checkbox-label { font-size: 0.9rem; }
}

/* Touch-friendly elements */
@media (hover: none) and (pointer: coarse) {
    .nav-link,
    .category-link,
    .blog-link,
    .cta-btn,
    .offer-btn,
    .cart-btn,
    .login-btn,
    .logout-btn {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .slider-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .social-link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        height: 100vh;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .nav-menu {
        height: calc(100vh - 60px);
    }
}