/* * ========================================
 * FONT DEFINITIONS (NEW)
 * ========================================
 * This tells the browser to load your font files.
 */

@font-face {
    font-family: 'StackSansText';
    src: url('../fonts/inter/StackSansText-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}

@font-face {
    font-family: 'StackSansText';
    src: url('../fonts/inter/StackSansText-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansText';
    src: url('../fonts/inter/StackSansText-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansText';
    src: url('../fonts/inter/StackSansText-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansText';
    src: url('../fonts/inter/StackSansText-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'StackSansText';
    src: url('../fonts/inter/StackSansText-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* * ========================================
 * GLOBAL STYLES (Variables & Resets)
 * ========================================
 */
 :root {
    --color-primary: #0a0a0a;
    --color-primary-light: #404040;
    --color-secondary: #007aff; /* A sample accent color */
    --color-white: #ffffff;
    --color-light-gray: #f4f4f5;
    --color-medium-gray: #e4e4e7;
    --color-dark-gray: #71717a;
    --color-success: #16a34a;
    --color-danger: #dc2626;

    /* --- FONT UPDATED HERE --- */
    --font-sans: 'StackSansText', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    --radius-md: 0.5rem;
    --radius-sm: 0.25rem;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    /* --- NEW --- */
    --shadow-lg-subtle: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
    --shadow-focus-ring: 0 0 0 3px rgba(10, 10, 10, 0.1);

    /* --- NEW SEARCH BAR VARS (matching screenshot) --- */
    --search-bar-height: 2.75rem; /* ~44px */
    --search-bar-padding-x: 1.25rem; /* 20px */
    --search-bar-icon-size: 16px;
    --search-bar-icon-color: #888; /* Darker gray for icons */
    --search-bar-bg: var(--color-white); /* Always white as per screenshot */
    --search-bar-border-color: #e0e0e0;
    --search-bar-text-color: var(--color-primary);
    --search-bar-placeholder-color: #a0a0a0;
    --search-bar-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Prominent, soft shadow */
    --search-bar-focus-shadow: 0 0 0 2px rgba(0, 150, 255, 0.3); /* Subtle blue focus glow */
    --search-bar-border-radius: 9999px; /* Fully rounded pill shape */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-white);
    color: var(--color-primary);
    line-height: 1.6;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    /* --- UPDATED --- */
    padding: 0 1.5rem; /* Reduced padding to get more space */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-dark-gray);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.page-header {
    border-bottom: 1px solid var(--color-medium-gray);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

.page-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
}

.loading-text {
    font-size: 1.5rem;
    color: var(--color-dark-gray);
    text-align: center;
    padding: 4rem 0;
}

/* Card base style */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.card-content {
    padding: 1.5rem;
}

/* * ========================================
 * HEADER & NAVIGATION
 * ========================================
 */
.main-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-medium-gray);
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem; 
}

.logo-img {
    height: 48px;          /* Adjust this value — try 40–60px range */
    width: auto;           /* Keeps the aspect ratio correct */
    display: block;        /* Removes extra whitespace under image */
}


.main-nav {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0; 
    flex-grow: 1; /* Allow nav to grow */
    
    /* --- THIS IS THE NEW LINE --- */
    justify-content: center; /* This centers the nav links */
}

.main-nav a {
    font-size: 1rem;
    font-weight: 500;
}

.user-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0; 
}

#nav-cart-link {
    font-weight: 500;
}

.button-primary {
    display: inline-block; /* For <a> tags */
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: background-color 0.2s ease;
    text-align: center;
}

.button-primary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
}

.button-primary:disabled {
    background-color: var(--color-medium-gray);
    cursor: not-allowed;
}

/* * ========================================
 * FOOTER
 * ========================================
 */
.main-footer {
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
    text-align: center;
    padding: 2rem 0;
    margin-top: 4rem;
    border-top: 1px solid var(--color-medium-gray);
}

/* * ========================================
 * HOME PAGE SEARCH BAR (Matching Screenshot)
 * ========================================
 */
.home-search-container {
    /* --- THIS IS THE CHANGE (as requested) --- */
    padding: 0.25rem 0; /* Reduced padding for a very tight look */
    display: flex;
    justify-content: center;
    align-items: center;
    /* This container is invisible, as requested */
}

.home-search-form {
    /* This form BECOMES the search bar */
    position: relative;
    width: 100%;
    max-width: 600px;
    display: flex; /* Use flexbox to align input and icons */
    align-items: center;
    
    height: var(--search-bar-height);
    background-color: var(--search-bar-bg);
    border: 1px solid var(--search-bar-border-color);
    border-radius: var(--search-bar-border-radius); /* Pill shape */
    box-shadow: var(--search-bar-shadow); /* Prominent shadow */
    
    transition: box-shadow 0.3s ease-out; /* Smooth transition for shadow */
}

.home-search-form:focus-within {
    /* Add focus glow on top of existing shadow */
    box-shadow: var(--search-bar-shadow), var(--search-bar-focus-shadow); 
}

.home-search-icon {
    display: flex; /* To center SVG */
    align-items: center;
    justify-content: center;
    height: 100%; /* Take full height */
    padding: 0 var(--search-bar-padding-x); /* Horizontal padding */
    color: var(--search-bar-icon-color);
    flex-shrink: 0; /* Prevent icons from shrinking */
}

.home-search-icon.search-icon {
    /* This is a <label>, so make it non-interactive */
    pointer-events: none; 
}

.home-search-icon.clear-icon {
    /* This is a <button>, make it interactive */
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    pointer-events: all; /* Allow clicks on this button */
    transition: opacity 0.2s ease;
    /* The `display: none;` is handled by JavaScript */
}

.home-search-icon.clear-icon:hover {
    opacity: 1;
}

.home-search-input {
    /* This is the text input field */
    flex-grow: 1; /* Input takes up all available space */
    height: 100%; /* Make input fill the form's height */
    
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--search-bar-text-color);
    
    /* No padding needed here as icons handle spacing */
    padding: 0;
    border: none;
    background: transparent; /* Make input transparent to show form background */
    outline: none; /* Remove default focus outline */
    
    /* Prevent default search input clear button on WebKit/Blink */
    -webkit-appearance: none; 
}
.home-search-input::-webkit-search-cancel-button {
      -webkit-appearance: none;
}


.home-search-input::placeholder {
    /* This is the "Search for products..." text */
    color: var(--search-bar-placeholder-color);
    opacity: 1; /* Ensure placeholder is always visible */
}

/* Visually hide the submit button (for Enter key) */
.home-search-button {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
 
/* * ========================================
 * --- NEW: HOME PAGE LAYOUT & FILTERS ---
 * ========================================
 */

.home-page-layout {
    display: grid;
    /* Creates 3 columns:
       1. Sidebar (240px wide)
       2. Separator (1px wide)
       3. Main Content (takes the rest of the space)
    */
    grid-template-columns: 240px 1px 1fr;
    gap: 2rem; /* Gap between separator and main content */
    margin-top: 2rem;
}

.filter-sidebar {
    width: 240px; /* Fixed width for the sidebar */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.filter-separator {
    width: 1px;
    background-color: var(--color-medium-gray); /* The vertical line */
}

.product-grid-main {
    /* This container just holds the product grid */
    min-width: 0; /* Prevents grid from overflowing */
}

.filter-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-light-gray);
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Category links */
.filter-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-dark-gray);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-link:hover {
    background-color: var(--color-light-gray);
    color: var(--color-primary);
}

.filter-link.is-active {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    font-weight: 600;
}

/* Checkbox filters */
.filter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-item label {
    font-size: 0.9rem;
    color: var(--color-primary);
    cursor: pointer;
}

.filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}


/* * ========================================
 * PRODUCT GRID (For Home & Search)
 * ========================================
 */
.product-grid {
    display: grid;
    /* --- GRID UPDATED --- */
    /* This rule is kept from last time. It will now
       create columns inside the new .product-grid-main */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); /* Smaller min-width */
    gap: 1.5rem; /* Reduced gap */
    
    /* --- UPDATED --- */
    margin-top: 0; /* Margin is now on home-page-layout */
}

.product-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
    overflow: hidden; /* To contain the image */
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: var(--shadow-md);
}

.product-card__image {
    width: 100%;
    /* --- IMAGE UPDATED --- */
    height: 220px; /* Reduced height to match new width */
    object-fit: cover; /* Ensures image covers the area, cropping if needed */
    background-color: var(--color-light-gray);
}

.product-card__info {
    /* --- CARD INFO UPDATED --- */
    padding: 0.75rem; /* Reduced padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows footer button to stick to bottom */
}

.product-card__store {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-dark-gray);
    margin-bottom: 0.25rem;
}

.product-card__name {
    /* --- CARD INFO UPDATED --- */
    font-size: 1rem; /* Reduced font size */
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.product-card__price {
    /* --- CARD INFO UPDATED --- */
    font-size: 1.125rem; /* Reduced font size */
    font-weight: 700;
    color: var(--color-primary);
    flex-grow: 1;
    margin-bottom: 1rem;
}

.button-add-to-cart {
    width: 100%;
    text-align: center;
    /* --- BUTTON UPDATED --- */
    padding: 0.5rem; /* Reduced padding */
    font-size: 0.9rem; /* Reduced font size */
}

.product-card {
    text-decoration: none;
    color: var(--color-primary);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.product-card:hover,
.product-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.product-card .button-add-to-cart {
    transition: background-color 0.2s ease-in-out;
}

.product-card:hover .button-add-to-cart:hover {
    background-color: var(--color-primary-light);
}


/* * ========================================
 * PRODUCT DETAIL PAGE
 * ========================================
 */

.product-detail-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2rem 0;
}

@media (min-width: 768px) {
    .product-detail-container {
        grid-template-columns: 1fr 1fr;
    }
}

.product-detail__gallery {
    width: 100%;
}

.product-detail__main-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    background-color: var(--color-light-gray);
    border: 1px solid var(--color-medium-gray);
}

.product-detail__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-detail__store {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-dark-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-detail__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.product-detail__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-dark-gray);
}

.product-detail__price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 1rem 0;
}

.product-detail__options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-group label {
    font-weight: 600;
    font-size: 1rem;
}

.option-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.chip {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-medium-gray);
    background-color: #fff;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.chip:hover {
    background-color: var(--color-light-gray);
    border-color: var(--color-primary);
}

.chip.chip--color {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--color-medium-gray);
}

.chip.chip--color:hover {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.product-detail__info .button-add-to-cart {
    max-width: 300px; /* Stop button from being full width */
}


/* * ========================================
 * AUTH FORMS (Login/Sign Up)
 * ========================================
 */
.auth-container {
    max-width: 450px;
    margin: 3rem auto;
    padding: 2rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.auth-form h2 {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.auth-form p {
    text-align: center;
    color: var(--color-dark-gray);
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.1);
}

.form-error {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: center;
    min-height: 1.2em; /* Prevent layout shift */
}

.button-primary.full-width {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    font-size: 1rem;
}

.button-secondary {
    background-color: var(--color-light-gray);
    color: var(--color-primary);
    border: 1px solid var(--color-medium-gray);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.button-secondary:hover {
    background-color: var(--color-medium-gray);
}
.button-secondary.full-width {
     width: 100%;
    text-align: center;
    padding: 0.75rem;
    font-size: 1rem;
    margin-top: 1rem;
}

.form-divider {
    font-size: 0.875rem;
    color: var(--color-dark-gray);
    text-align: center;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
}
.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-medium-gray);
}
.form-divider span {
    padding: 0 1rem;
}

.form-toggle-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
}
.form-toggle-link a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: underline;
}

/* * ========================================
 * USER PROFILE NAVIGATION
 * ========================================
 */

/* 1. The main dropdown container */
.profile-dropdown {
    position: relative;
    display: inline-block;
}

/* 2. The visible button (profile pic + name) */
.profile-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;
}
.profile-button:hover {
    background-color: var(--color-light-gray);
}

/* 3. The profile picture */
#profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-medium-gray);
    background-color: var(--color-light-gray);
}

/* 4. The user's name */
#profile-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-primary);
}

/* 5. Arrow Styling */
.profile-arrow {
    width: 12px;
    height: 12px;
    color: var(--color-dark-gray);
    transition: transform 0.2s ease-out;
}

/* 6. Rotate arrow when menu is open */
.profile-button.is-open .profile-arrow {
    transform: rotate(180deg);
}

/* 7. The hidden menu */
.profile-menu {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    min-width: 180px;
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.5rem 0;
    z-index: 100;
}

/* 8. Show the menu when '.is-open' class is added by JS */
.profile-menu.is-open {
    display: block;
}

/* 9. Links and buttons inside the menu */
.profile-menu a,
.profile-menu .logout-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.profile-menu a:hover,
.profile-menu .logout-button:hover {
    background-color: var(--color-light-gray);
}

/* 10. Special styling for the logout button */
.profile-menu .logout-button {
    color: var(--color-danger);
}

/* 11. A simple divider line */
.menu-divider {
    height: 1px;
    background-color: var(--color-medium-gray);
    margin: 0.5rem 0;
}


/* * ========================================
 * GENERIC UTILITY CLASSES (Loading, Empty)
 * ========================================
 */
.loading-full-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--color-dark-gray);
}
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-medium-gray);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 2rem;
    background-color: var(--color-light-gray);
    border-radius: var(--radius-md);
    margin: 2rem 0;
}
.empty-state-container h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}
.empty-state-container p {
    font-size: 1rem;
    color: var(--color-dark-gray);
    margin-bottom: 1.5rem;
}


/* * ========================================
 * CART PAGE STYLES
 * ========================================
 */
.cart-container {
    display: flex; /* This is set to 'flex' by ui.js */
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .cart-container {
        flex-direction: row;
        align-items: flex-start; /* Stick summary to top */
    }
}

.cart-items-list {
    flex: 1; /* Takes up remaining space */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cart-item-card {
    display: grid;
    grid-template-columns: 100px 1fr; /* Image | Details */
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
}

@media (min-width: 768px) {
    .cart-item-card {
        grid-template-columns: 100px 1fr 150px; /* Image | Details | Actions */
    }
}

.cart-item__image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background-color: var(--color-light-gray);
    border: 1px solid var(--color-medium-gray);
}

.cart-item__details {
    display: flex;
    flex-direction: column;
}

.cart-item__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.cart-item__title:hover {
    text-decoration: underline;
}

.cart-item__price {
    font-size: 1rem;
    color: var(--color-dark-gray);
    margin-bottom: 0.5rem;
}

.cart-item__remove {
    font-size: 0.875rem;
    color: var(--color-danger);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    margin-top: auto; /* Push to bottom */
}
.cart-item__remove:hover {
    text-decoration: underline;
}

.cart-item__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    grid-column: 2 / 3; /* Span full width on mobile */
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .cart-item__actions {
        grid-column: auto; /* Reset to own column */
        align-items: flex-end;
        margin-top: 0;
    }
}

.quantity-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
}
.quantity-control__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-dark-gray);
}
.quantity-control__btn:hover {
    background-color: var(--color-light-gray);
}
.quantity-control__value {
    font-size: 1rem;
    font-weight: 500;
    padding: 0 0.5rem;
    min-width: 30px;
    text-align: center;
}

.cart-item__total-price {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1rem;
}

@media (min-width: 768px) {
     .cart-item__total-price {
        margin-top: 0;
    }
}

.cart-summary-card {
    width: 100%;
}

@media (min-width: 1024px) {
    .cart-summary-card {
        width: 350px;
        position: sticky;
        top: 2rem; /* Stick to top on scroll */
    }
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}
.order-summary-row span:last-child {
    font-weight: 500;
}

.order-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}


/* * ========================================
 * CHECKOUT PAGE STYLES
 * ========================================
 */
.checkout-container {
    display: flex; /* This is set to 'flex' by ui.js */
    flex-direction: column-reverse; /* Form below summary on mobile */
    gap: 2rem;
}

@media (min-width: 1024px) {
    .checkout-container {
        flex-direction: row; /* Side-by-side on desktop */
        align-items: flex-start;
    }
}

.checkout-form-card {
    flex: 1; /* Take up available space */
}

.checkout-summary-card {
    width: 100%;
}

@media (min-width: 1024px) {
    .checkout-summary-card {
        width: 400px;
        position: sticky;
        top: 2rem;
    }
}

/* * ========================================
 * PROFILE PAGE
 * ========================================
 */
.profile-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .profile-container {
        /* On desktop, 1/3 for nav, 2/3 for content */
        grid-template-columns: 1fr 2fr;
    }
}

.profile-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.profile-card .card-content {
    padding: 2rem;
}

.profile-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-medium-gray);
    padding-bottom: 0.75rem;
}