/* Responsive Styles */


@media (max-width: 992px) {
    .header-right .search-bar {
        margin-right: 15px; /* Reduce margin */
    }
    .search-bar input {
        min-width: 120px;
    }
    .slide-content h2 {
        font-size: 2.2rem;
    }
    .slide-content p {
        font-size: 1rem;
    }
    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .contact-grid {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
    .contact-info-details {
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    /* ... (existing nav-toggle logic should mostly work) ... */
    header .container {
        position: relative; /* For absolute positioning of nav */
    }
     .nav-links { /* Ensure it covers correctly */
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
    }

    .header-right {
        /* This might need careful adjustment depending on how search + cart behaves */
        /* Option 1: Hide search on mobile nav, keep cart */
        /* .search-bar { display: none; } */
        /* Option 2: Make search bar take full width below nav when open */
        width: 100%;
        justify-content: space-between; /* If search and cart are kept */
        margin-top: 10px; /* If it wraps below nav */
    }
    /* A common pattern is to move search into the mobile menu or make it an icon */
    .search-bar { /* Simplified for mobile */
        width: auto;
        flex-grow: 1; /* If next to cart icon */
        margin-right: 10px;
    }
    .search-bar input {
        min-width: 0; /* Allow shrinking */
        flex-grow: 1;
    }
    .cart-icon {
        margin-left: auto; /* Push cart to the right if search is present */
    }


    .hero-slider {
        height: 350px; /* Shorter slider on mobile */
        max-height: none;
    }
    .slide-content h2 {
        font-size: 1.8rem;
    }
    .slide-content p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    .slider-btn {
        padding: 10px;
        font-size: 1.2rem;
    }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    .slider-dots { bottom: 10px; }
    .dot { width: 10px; height: 10px; }

    .section-title { font-size: 1.8rem; }
    .section-padding { padding: 40px 0; }

    .about-flex {
        flex-direction: column;
    }
    .about-image {
        margin-top: 30px;
        order: -1; /* Image first on mobile */
    }

    .footer-content {
        grid-template-columns: 1fr; /* Stack sections */
        text-align: center; /* Center content in footer sections */
    }
    .footer-section.about .contact-info,
    .footer-section.links ul {
        text-align: center;
    }
    .footer-section.links ul li a {
        display: inline-block; /* For centering */
    }
}

@media (max-width: 576px) {
    .logo { height: 35px; }
    header h1 { font-size: 1.6rem; }
    
    /* Further refine header-right for very small screens if needed */
    .header-right {
      /* If search bar is still too wide, hide input, show icon only */
      /* Or make cart icon only if space is very tight */
    }
    .search-bar input { display: none; } /* Example: Icon only search */
    .search-bar button { border-radius: 50%; padding: 10px 12px;}
    .search-bar { padding-left: 0; border:none; background: transparent;}


    .slide-content h2 { font-size: 1.5rem; }
    .slide-content .btn { padding: 10px 20px; font-size: 0.8rem;}

    .product-card h3, .category-card h3 { font-size: 1rem; min-height: 40px;}
    .product-card .price { font-size: 1.1rem; }

    .perks-grid {
        grid-template-columns: 1fr; /* Stack perks */
    }
}
/* --- Header Cart Icon Refinements --- */
.header-right .cart-icon-link {
    position: relative;
    display: inline-flex; /* For better alignment of icon and count */
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    text-decoration: none !important;
    padding: 10px 12px; /* Clickable area */
    margin-left: 10px; /* Space from search bar */
    transition: color 0.3s ease;
}

.header-right .cart-icon-link:hover {
    color: var(--primary-color);
}

.header-right .cart-icon-link .fa-shopping-bag { /* Or fa-shopping-cart */
    font-size: 1.5rem; /* Larger icon */
}

.header-right .cart-icon-link .cart-item-count {
    position: absolute;
    top: 0px;        /* Position relative to the link */
    right: 0px;      /* Position relative to the link */
    background-color: var(--accent-color);
    color: white;
    font-size: 0.75rem; /* Slightly larger count text */
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px; /* More padding for a rounder look */
    border-radius: 10px; /* Pill shape or circle */
    border: 2px solid white; /* Creates a nice separation from icon */
    min-width: 22px; /* Ensure it's at least a circle for single digit */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-out, background-color 0.2s;
}

/* Animation when count changes (requires JS to add/remove a class) */
.header-right .cart-icon-link .cart-item-count.updated {
    transform: scale(1.2);
    background-color: darken(var(--accent-color), 10%);
}

/* Active state for cart icon (e.g., on cart.html page) */
.header-right .cart-icon-link.active .fa-shopping-bag {
    color: var(--primary-color);
}
.header-right .cart-icon-link.active .cart-item-count {
    background-color: var(--primary-color); /* Match active color */
    color: white;
}
/* In css/responsive.css */

@media (max-width: 991.98px) { /* Medium devices / tablets */
    .nav-links {
        /* ... existing styles ... */
        /* Add a subtle background to the mobile menu if it's over content */
        /* background-color: rgba(255, 255, 255, 0.98); */
        /* backdrop-filter: blur(5px); */ /* For frosted glass effect, if desired & supported */
    }
    .nav-links li a {
        padding: 12px 25px; /* More generous padding for touch */
    }

    /* Ensure cart icon is still well-positioned */
    .header-right .cart-icon-link {
        margin-left: 5px; /* Reduce margin if space is tight */
        padding: 8px 10px;
    }
    .header-right .cart-icon-link .fa-shopping-bag {
        font-size: 1.4rem;
    }
    .header-right .cart-icon-link .cart-item-count {
        padding: 3px 6px;
        font-size: 0.7rem;
        min-width: 20px;
        top: -2px;    /* Adjust positioning */
        right: -2px;   /* Adjust positioning */
    }
}

@media (max-width: 767.98px) { /* Small devices / landscape phones */
    header .container {
        padding: 0 15px; /* Reduce padding on smallest screens */
    }
    .logo-link {
        /* If logo needs to shrink slightly */
        /* transform: scale(0.9); */
        /* transform-origin: left center; */
    }
    header h1 {
        /* font-size: 1.6rem; /* Already likely handled */
    }

    /* When header-right wraps, ensure search and cart align nicely */
    .header-right {
        /* ... existing styles (order, width, margin-top, justify-content) ... */
        padding: 5px 0; /* Add some padding if it's on its own line */
    }
    .search-bar {
        /* ... existing styles ... */
    }
    .search-bar input {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) { /* Extra small devices - fine-tuning */
    .search-bar {
        /* Consider making search icon-only at this breakpoint */
        /* padding-left: 0; */
    }
    .search-bar input {
        /* display: none; */ /* Hides input, button becomes main target */
        /* OR make it very short */
        max-width: 100px;
    }
    .search-bar button {
        /* border-radius: 50%; */ /* If input is hidden for icon-only */
        /* padding: 10px; */
    }
    .header-right .cart-icon-link .fa-shopping-bag {
        font-size: 1.3rem;
    }
    .header-right .cart-icon-link .cart-item-count {
        /* Further adjustments if needed for very small icon */
    }
}
/* In css/responsive.css */

/* Small devices (landscape phones, 768px and down) */
@media (max-width: 767.98px) {
    /* ... other 768px styles ... */

    header .container {
        /* Ensure the main header items (logo, nav-toggle, and header-right) try to stay on one line */
        /* We might not need flex-wrap: wrap here if we handle header-right carefully */
    }

    .header-right {
        order: 0; /* Reset order if it was changed */
        width: auto; /* Allow it to shrink to content */
        margin-top: 0; /* Remove top margin if it was wrapping */
        margin-left: auto; /* This will push the header-right (search + cart) to the far right */
    }

    .search-bar {
        /* By default, keep it simple for this breakpoint */
        /* Option A: Hide input, show only icon button */
        border: none;
        background-color: transparent;
        padding-left: 0;
        margin-right: 5px; /* Space between search icon and cart icon */
    }
    .search-bar input {
        display: none; /* Hide the text input */
    }
    .search-bar button {
        background-color: transparent;
        color: var(--text-color); /* Match other icon colors */
        padding: 8px; /* Adjust padding for icon size */
        font-size: 1.2rem; /* Match cart icon size */
        border-radius: 50%; /* Make it a circle if you like */
    }
    .search-bar button:hover {
        background-color: var(--secondary-color); /* Subtle hover for icon */
        color: var(--primary-color);
    }

    /* Ensure cart icon is styled consistently */
    .header-right .cart-icon-link {
        margin-left: 0; /* No extra margin if search input is gone */
        padding: 8px;
    }
    .header-right .cart-icon-link .fa-shopping-bag {
        font-size: 1.2rem; /* Consistent icon size */
    }
}


/* Extra small devices (phones, 576px and down) - Further adjustments if needed */
@media (max-width: 575.98px) {
    /* ... other 576px styles ... */

    header .container {
        padding: 0 10px; /* Even less padding */
    }

    .logo-link h1 { /* Optionally hide title or make it very small */
        /* display: none; */
        /* font-size: 1.2rem; */
    }
    .logo {
        height: 30px; /* Smaller logo */
    }

    .search-bar button {
        font-size: 1.1rem; /* Slightly smaller search icon */
        padding: 6px;
    }
    .header-right .cart-icon-link .fa-shopping-bag {
        font-size: 1.1rem; /* Slightly smaller cart icon */
    }
     .header-right .cart-icon-link .cart-item-count {
        font-size: 0.65rem;
        padding: 2px 5px;
        min-width: 18px;
        top: -1px;
        right: -1px;
    }
}
/* css/responsive.css */

/* --- Medium devices and down (Tablets, Landscape Phones - 991.98px and down) --- */
@media (max-width: 991.98px) {
    header .container {
        padding: 0 15px; /* Slightly less padding for tablets */
    }

    /* Hide full nav links, prepare for toggle */
    nav .nav-links { /* This targets the <ul> or its container that has .nav-links */
        display: none; /* Hide by default on smaller screens */
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Position below the header */
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.98); /* Slightly transparent for modern feel */
        backdrop-filter: blur(5px); /* Optional: frosted glass effect */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
        padding: 10px 0;
        z-index: 999; /* Below header toggle but above page content */
    }

    nav .nav-links.active { /* This class is toggled by JS */
        display: flex;
    }

    nav .nav-links li {
        margin: 0; /* Remove left margin from desktop */
        width: 100%;
        text-align: left;
    }

    nav .nav-links li a {
        display: block; /* Make links full width for easier tapping */
        padding: 12px 20px; /* Generous padding */
        border-bottom: 1px solid var(--secondary-color); /* Separator for links */
    }
    nav .nav-links li:last-child a {
        border-bottom: none;
    }
    nav .nav-links li a::after { /* Hide desktop underline effect */
        display: none;
    }
    /* Special styling for auth buttons if they are inside the mobile nav */
    .nav-links .auth-nav-item button.btn-small {
        display: block;
        width: calc(100% - 40px); /* Full width minus padding */
        margin: 10px 20px !important; /* Override inline styles if any */
        text-align: center;
    }
    .nav-links .user-welcome {
        padding: 12px 20px;
        font-style: italic;
        color: var(--primary-color);
        border-bottom: 1px solid var(--secondary-color);
    }


    /* Show and style hamburger toggle */
    .nav-toggle {
        display: block; /* Show the toggle button */
        order: 3; /* Ensure it's on the right for LTR languages */
        margin-left: 15px; /* Space from other elements */
    }
    /* Hamburger icon styles are in style.css, active states too */

    /* Dropdown in mobile nav */
    .dropdown {
        width: 100%;
    }
    .dropdown .dropbtn {
        display: flex; /* Align text and caret */
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 12px 20px !important; /* Match other nav links */
    }
    .dropdown .dropbtn::after { display: none; } /* Hide desktop underline effect */

    .dropdown-content {
        position: static; /* Flow within the mobile menu */
        box-shadow: none;
        border-top: none;
        background-color: rgba(240, 242, 245, 0.7); /* Slightly different bg for dropdown items */
        padding-left: 30px; /* Indent dropdown items */
        min-width: auto;
        opacity: 1; /* Always visible when parent is shown */
        visibility: visible;
        transform: none;
        transition: none;
        border-bottom: 1px solid var(--secondary-color); /* Separator after dropdown block */
    }
    .dropdown-content a {
        padding: 10px 0px 10px 10px; /* Adjust padding for indented items */
        font-weight: normal;
        border-bottom: 1px dotted var(--border-color);
    }
     .dropdown-content a:last-child {
        border-bottom: none;
    }


    /* Header Right Elements (Search & Cart) */
    .header-right {
        margin-left: auto; /* Push search and cart to the right, after nav toggle */
        display: flex;
        align-items: center;
    }

    .search-bar {
        border: none;
        background-color: transparent;
        padding-left: 0;
        margin-right: 5px; 
    }
    .search-bar input {
        display: none; /* Hide search input on tablet, show only icon */
    }
    .search-bar button {
        background-color: transparent;
        color: var(--text-color);
        padding: 8px;
        font-size: 1.2rem;
        border-radius: 50%; /* Optional: circular button */
    }
    .search-bar button:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

    .cart-icon-link {
        margin-left: 0; /* Remove margin if search input is gone */
        padding: 8px;
    }
    .cart-icon-link .fa-shopping-bag {
        font-size: 1.2rem;
    }
}

/* --- Small devices (Portrait Tablets, Large Phones - 767.98px and down) --- */
@media (max-width: 767.98px) {
    header .container {
        /* If logo and toggle + icons are still too wide, we might need to adjust further */
        /* flex-wrap: wrap; /* Allow wrapping if absolutely necessary, but try to avoid */
    }
    .logo-link h1 {
        font-size: 1.6rem; /* Smaller title */
    }
    .logo {
        height: 40px;
    }
    /* At this point, the search icon and cart icon should be the primary elements in header-right */
}

/* --- Extra small devices (Phones - 575.98px and down) --- */
@media (max-width: 575.98px) {
    header .container {
        padding: 0 10px; /* Minimal padding */
    }
    .logo-link h1 {
        /* Optionally hide the H1 title and only show the logo image */
        /* display: none; */
        font-size: 1.4rem; 
    }
    .logo {
        height: 35px;
        margin-right: 5px;
    }
    .nav-toggle {
        margin-left: 10px; /* Adjust spacing */
        padding: 8px;
    }
    .hamburger, .hamburger::before, .hamburger::after {
        width: 22px; /* Smaller hamburger */
        height: 2.5px;
    }
    .hamburger::before { top: -7px; }
    .hamburger::after { top: 7px; }


    .search-bar button {
        font-size: 1.1rem; 
        padding: 6px;
    }
    .cart-icon-link .fa-shopping-bag {
        font-size: 1.1rem;
    }
    .cart-item-count {
        font-size: 0.65rem;
        padding: 2px 5px;
        min-width: 18px;
        top: -1px;    
        right: -1px;   
    }
}
/* In css/responsive.css or inside a media query in my-orders.css */

@media (max-width: 767.98px) { /* Adjust breakpoint as needed */
    .order-history-table thead {
        /* Hide table headers on mobile, as they will be in data-labels */
        display: none;
    }

    .order-history-table,
    .order-history-table tbody,
    .order-history-table tr,
    .order-history-table td {
        display: block; /* Make everything block-level */
        width: 100% !important; /* Force full width */
    }

    .order-history-table tr {
        margin-bottom: 20px; /* Space between "cards" */
        border: 1px solid var(--border-color); /* Add border to each "card" */
        border-radius: 6px;
        padding: 10px; /* Padding inside the card */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .order-history-table tr:last-child {
         margin-bottom: 0;
    }


    .order-history-table td {
        text-align: right; /* Align data to the right */
        padding-left: 50%; /* Create space for the label */
        position: relative; /* For positioning the ::before pseudo-element */
        border-bottom: 1px dotted var(--secondary-color); /* Lighter separator between "fields" */
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .order-history-table td:last-child {
        border-bottom: none; /* No border for the last "field" in a card */
    }

    .order-history-table td::before {
        content: attr(data-label); /* Display the data-label content */
        position: absolute;
        left: 10px; /* Position label to the left */
        width: calc(50% - 20px); /* Calculate width for label, minus padding */
        padding-right: 10px;
        font-weight: 600;
        text-align: left;
        color: var(--primary-color);
    }

    /* Specific styling for the actions cell on mobile */
    .order-history-table td.actions-cell {
        text-align: center; /* Center buttons */
        padding-left: 10px; /* Reset padding for full width content */
        padding-top: 15px; /* More space above buttons */
    }
    .order-history-table td.actions-cell::before {
        display: none; /* No label for actions cell */
    }
    .order-history-table td.actions-cell button {
        display: inline-block; /* Or block if you want them full width */
        width: auto; /* Adjust width as needed or keep auto */
        margin: 5px; /* Spacing around buttons */
    }
}
/* css/responsive.css */

/* ... other responsive styles ... */


/* Extra small devices (Phones - 575.98px and down) 
   OR choose a slightly larger breakpoint if you prefer two columns on slightly bigger phones too,
   e.g., @media (max-width: 767.98px) if you want this on landscape phones as well.
*/
@media (max-width: 575.98px) { /* This is a common breakpoint for "phone" portrait */
    /* ... other styles for this breakpoint ... */

    .product-grid, 
    .category-grid {
        /* This will create two equally sized columns */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; /* You might want to reduce the gap slightly for smaller screens */
    }

    /* Optional: Adjust card content for smaller cards if needed */
    .product-card h3, 
    .category-card h3 {
        font-size: 0.95rem; /* Slightly smaller font for card titles */
        min-height: 40px;  /* Adjust min-height if title length is an issue */
        /* consider -webkit-line-clamp: 2; if not already present */
    }
    .product-card .price {
        font-size: 1.1rem; /* Slightly smaller price */
        margin-bottom: 10px;
    }
    .product-card .btn {
        padding: 8px 15px; /* Smaller button padding */
        font-size: 0.8rem; /* Smaller button font */
    }
    .product-card .card-image-container, 
    .category-card .card-image-container {
        height: 150px; /* Adjust image container height if cards become too tall/short */
    }
    .card-content {
        padding: 12px; /* Slightly less padding inside the card */
    }
}

/* If you want this behavior for a slightly larger range, e.g., up to tablets in portrait: */
/*
@media (max-width: 767.98px) {
    .product-grid, 
    .category-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }
    // Optional card content adjustments here too if needed for this range
}
*/

/* And ensure your larger screen breakpoints still have more columns */
/* Example for tablets landscape and small desktops */
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-grid, 
    .category-grid {
        /* Show 2 or 3 columns, e.g. */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* This might already result in 2-3 */
        /* Or be explicit: grid-template-columns: repeat(3, 1fr); */
        gap: 20px;
    }
}

/* Example for larger desktops */
@media (min-width: 992px) {
    .product-grid, 
    .category-grid {
        /* Show 3, 4 or more columns */
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* This usually results in 3-4 */
        /* Or be explicit: grid-template-columns: repeat(4, 1fr); */
        gap: 25px;
    }
}