/* --- Consolidated Root Variables --- */
/* FROM: First CSS (style.css) - Base Variables */
:root {
    /* Colors */
    --primary: #3563E9;
    --primary-dark: #2748C4;
    --primary-light: #D6E4FF;
    --primary-gradient: linear-gradient(45deg, #3563E9, #54A6FF);
    --secondary: #54A6FF;
    --success: #4CAF50;
    --success-light: #E6F7E9;
    --accent: #FF4D67;
    --accent-light: #FFE2E5;
    --accent-blue: #0d8fff; /* Used in original user-popup-menu .btn-primary */
    --dark: #1A202C;
    --gray-900: #2D3748;
    --gray-800: #4A5568;
    --gray-700: #718096;
    --gray-600: #A0AEC0;
    --gray-500: #CBD5E0;
    --gray-400: #E2E8F0;
    --gray-300: #EDF2F7;
    --gray-200: #F7FAFC;
    --gray-100: #f9fafb; /* Added from second CSS context (e.g., tabs-header, though not directly used in this merge for header/cart) */
    --white: #ffffff;
    --error-color: #e53e3e;
    
    /* Dark mode/popup specific (from original popup style) */
    --bg-dark: #232531;
    --bg-input: #2d303e; /* Used by original .user-popup-menu background-color */
    --text-light: #ffffff; /* Used by original .user-popup-menu color */
    --text-muted: #a0a0b0; /* Used by original .user-popup-menu p color */
    --btn-secondary: #464856; /* Used by original .user-popup-menu .btn-secondary */
    --btn-danger: #dc2626; /* Used by original .user-popup-menu .btn-danger */
    
    /* Shadows */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 10px 30px rgba(111, 133, 219, 0.1);
    --shadow-blue: 0 8px 25px rgba(53, 99, 233, 0.15);
    --shadow-dropdown: 0 15px 50px rgba(0, 0, 0, 0.1);
    --popup-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); /* Original popup shadow */
    
    /* Border radius */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 30px;
    --radius-full: 9999px;
    --input-radius: 10px;
    
    /* Layout */
    --header-height: 70px;
    --anim-duration: 0.3s;
    --anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
  
    /* Variables implied or used by second CSS, add if not present or for fallbacks */
    --primary-100: #dbeafe;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6; /* Also defined as --gray-200 in first CSS, choose one or alias */
    /* --gray-200: #e5e7eb; */ /* Example: Second CSS uses #e5e7eb, first uses #F7FAFC. Decide on canonical value or use aliases */
    --gray-500: #6b7280; /* First CSS has #CBD5E0 for --gray-500. Conflict. */
    --gray-600: #4b5563; /* First CSS has #A0AEC0. Conflict. */
    --gray-700: #374151; /* First CSS has #718096. Conflict. */
    --gray-900: #1a202c; /* First CSS has #2D3748. Conflict. */
    --red-50: #fef2f2;
    --red-600: #dc2626;
    --yellow-50: #fffbeb;
    --yellow-200: #fef08a;
    --yellow-800: #92400e;
  }
  /* NOTE on Variable Conflicts:
     If variables like --gray-500, --gray-600 etc. are redefined by implication in the second CSS
     (e.g., `color: var(--gray-600, #4b5563)`), and you want the second CSS's visual style to dominate,
     you might need to update the :root definitions from the first CSS or ensure the fallbacks are what you intend.
     For this merge, I'm keeping the first CSS's :root as primary and the second CSS will use its fallbacks if variables differ.
     Alternatively, explicitly define all variables from the second set if they should take precedence.
  */
  
  
  /* --- Base Styles --- */
  /* FROM: First CSS (style.css) */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* FROM: First CSS (style.css) */
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--gray-200);
    color: var(--dark);
    line-height: 1.6;
    padding-top: var(--header-height);
    -webkit-tap-highlight-color: transparent;
  }
  
  /* FROM: First CSS (style.css) */
  .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  /* --- Header Styles --- */
  /* FROM: First CSS (style.css) */
  .header {
    background-color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* FROM: First CSS (style.css) */
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  /* --- Navigation Styles --- */
  /* FROM: First CSS (style.css) */
  .menu-left {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1011;
  }
  
  /* FROM: First CSS (style.css) */
  .hamburger {
    width: 24px;
    height: 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 15px;
    z-index: 1010;
  }
  
  /* FROM: First CSS (style.css) */
  .hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--dark);
    transition: all var(--anim-duration) var(--anim-easing);
    border-radius: 10px;
  }
  
  /* FROM: First CSS (style.css) */
  .hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--primary);
  }
  
  /* FROM: First CSS (style.css) */
  .hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }
  
  /* FROM: First CSS (style.css) */
  .hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--primary);
  }
  
  /* FROM: First CSS (style.css) */
  .nav-items {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    width: 85%;
    max-width: 300px;
    height: calc(100vh - var(--header-height));
    background-color: var(--white);
    flex-direction: column;
    padding: 20px;
    box-shadow: var(--shadow-dropdown);
    transition: left var(--anim-duration) var(--anim-easing);
    overflow-y: auto;
    z-index: 1000;
    border-top: 1px solid var(--gray-300);
    display: flex;
  }
  
  /* FROM: First CSS (style.css) */
  .nav-items.show {
    left: 0;
  }
  
  /* FROM: First CSS (style.css) */
  .nav-item {
    margin: 8px 0;
    text-decoration: none;
    color: var(--gray-800);
    font-weight: 600;
    transition: all 0.3s;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    position: relative;
  }
  
  /* FROM: First CSS (style.css) */
  .nav-item:hover {
    color: var(--primary);
    background-color: var(--primary-light);
    transform: translateX(5px);
  }
  
  /* FROM: First CSS (style.css) */
  .nav-item.active {
    color: var(--primary);
    background-color: var(--primary-light);
  }
  
  /* FROM: First CSS (style.css) */
  .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-gradient);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  
  /* FROM: First CSS (style.css) */
  .nav-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--anim-duration) var(--anim-easing);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  
  /* FROM: First CSS (style.css) */
  .nav-overlay.show {
    display: block;
    opacity: 1;
  }
  
  /* FROM: First CSS (style.css) */
  .logo {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.5px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 8px;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* --- Menu Right / Icon Buttons --- */
  /* FROM: First CSS (style.css) */
  .menu-right {
    display: flex;
    z-index: 1001;
    align-items: center;
  }
  
  /* FROM: First CSS (style.css) */
  .icon-btn {
    background: var(--white);
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 12px;
    color: var(--gray-800);
    transition: all var(--anim-duration);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    min-width: 36px;
    min-height: 36px;
  }
  
  /* FROM: First CSS (style.css) */
  .icon-btn:hover {
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    background-color: var(--primary-light);
  }
  
  /* FROM: First CSS (style.css) */
  .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary-gradient);
    color: var(--white);
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(53, 99, 233, 0.3);
    border: 2px solid var(--white);
    padding: 0 4px;
  }
  
  /* --- User Popup Menu --- */
  /* FROM: Both CSS files. Second CSS overrides/enhances the first. */
  .user-menu-container {
    position: relative;
    display: inline-block; /* display:inline-block was from first, position:relative was in both */
  }
  
  /* MODIFIED BY: Second CSS (enhancements and behavioral change to hover) */
  /* Original from First CSS for .user-popup-menu:
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background-color: var(--bg-input);
    border-radius: var(--input-radius);
    box-shadow: var(--popup-shadow);
    padding: 15px;
    z-index: 100;
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  */
  .user-popup-menu {
    position: absolute;
    top: calc(100% + 10px); /* FROM: Both (Second CSS confirms this logic) */
    right: -10px; /* MODIFIED BY: Second CSS (was `right: 0;`) */
    width: 280px; /* MODIFIED BY: Second CSS (was `min-width: 220px;`) */
    background-color: white; /* MODIFIED BY: Second CSS (was `var(--bg-input)`) */
    border-radius: 10px; /* MODIFIED BY: Second CSS (was `var(--input-radius)`) */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* MODIFIED BY: Second CSS (was `var(--popup-shadow)`) */
    overflow: hidden; /* ADDED BY: Second CSS */
    z-index: 1000; /* MODIFIED BY: Second CSS (was `100`, now higher) */
    opacity: 0; /* FROM: Both (First CSS initial, Second CSS for transition) */
    visibility: hidden; /* FROM: Both (First CSS initial, Second CSS for transition) */
    transform: translateY(-10px); /* ADDED BY: Second CSS (for animation) - HTML inline style had this too. */
    transition: all 0.3s ease; /* MODIFIED BY: Second CSS (was more specific opacity/visibility transition) */
    padding: 0; /* MODIFIED BY: Second CSS implies padding is handled by inner elements (was `15px`) */
    /* color: var(--text-light); Removed by Second CSS, inherits or set by inner elements */
    /* border: 1px solid rgba(255, 255, 255, 0.1); Removed by Second CSS, new border style implied by design */
    /* HTML inline styles (display: block; opacity: 0; ...) will be overridden by these rules if specificity is correct. */
  }
  
  /* BEHAVIOR CHANGE: Second CSS introduces hover-to-open. First CSS relied on JS and .visible class. */
  /* If click-to-open is still desired, this hover logic needs to be conditional or JS needs to manage a class. */
  .user-menu-container:hover .user-popup-menu,
  .user-popup-menu:hover { /* ADDED BY: Second CSS */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* .user-popup-menu.visible { FROM: First CSS (for JS click toggle)
    display: block;
    opacity: 1;
    visibility: visible;
  } */
  /* This .visible class might conflict or be redundant if the hover mechanism is primary. */
  
  
  /* User Header Section in Popup */
  /* MODIFIED BY: Second CSS */
  /* Original from First CSS for .user-menu-header was not explicitly defined, would inherit. */
  .user-menu-header {
    display: flex;
    align-items: center;
    padding: 15px; /* Padding was on .user-popup-menu in 1st CSS, now on .user-menu-header */
    background-color: var(--gray-50, #f9fafb); /* Default fallback from 2nd CSS */
  }
  
  /* MODIFIED BY: Second CSS */
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-100, #dbeafe);
    color: var(--primary-600, #2563eb); /* This styles the <i> icon color */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 20px; /* This styles the <i> icon size */
  }
  
  /* MODIFIED BY: Second CSS */
  .user-avatar.guest-avatar { /* .guest-avatar class was in HTML */
    background-color: var(--gray-200, #e5e7eb);
    color: var(--gray-600, #4b5563);
  }
  
  /* MODIFIED BY: Second CSS */
  .user-info {
    flex: 1;
  }
  
  /* MODIFIED BY: Second CSS (p tags inside .user-info) */
  .user-name { /* This is a <p> tag in HTML */
    font-weight: 600;
    color: var(--gray-900, #1a202c);
    font-size: 15px;
    margin: 0 0 2px 0; /* Original .user-popup-menu p had margin-bottom: 15px */
  }
  
  /* MODIFIED BY: Second CSS */
  .user-email { /* This is a <p> tag in HTML */
    font-size: 12px;
    color: var(--gray-600, #4b5563);
    margin: 0; /* Original .user-popup-menu p had margin-bottom: 15px */
  }
  
  /* MODIFIED BY: Second CSS */
  .welcome-text { /* This is a <p> tag in HTML */
    font-weight: 600;
    color: var(--gray-900, #1a202c); /* Was var(--text-light) in original specific rule */
    font-size: 15px; /* Was 14px in original .user-popup-menu p */
    margin: 0 0 2px 0; /* Original specific rule for .welcome-text had margin-bottom: 15px */
  }
  
  /* MODIFIED BY: Second CSS */
  .guest-prompt { /* This is a <p> tag in HTML */
    font-size: 12px;
    color: var(--gray-600, #4b5563); /* Was var(--text-muted) in original .user-popup-menu p */
    margin: 0; /* Original .user-popup-menu p had margin-bottom: 15px */
  }
  
  /* Menu Links Section in Popup */
  /* MODIFIED BY: Second CSS */
  .user-menu-divider {
    height: 1px;
    background-color: var(--gray-200, #e5e7eb);
    margin: 0;
  }
  
  /* MODIFIED BY: Second CSS */
  .user-menu-links {
    padding: 10px 0;
  }
  
  /* MODIFIED BY: Second CSS */
  .user-menu-link { /* These are <a> tags */
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--gray-700, #374151);
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  
  /* MODIFIED BY: Second CSS */
  .user-menu-link:hover {
    background-color: var(--gray-100, #f3f4f6);
  }
  
  /* MODIFIED BY: Second CSS */
  .user-menu-link i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
    color: var(--gray-500, #6b7280);
  }
  
  /* Log Out Button in Popup */
  /* MODIFIED BY: Second CSS */
  .user-menu-logout { /* This is a <button> tag */
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    border: none;
    background-color: white; /* Was var(--btn-danger) if .btn.btn-danger was used in 1st CSS */
    color: var(--gray-700, #374151); /* Was white if .btn.btn-danger was used */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Was all 0.3s ease if .btn from 1st CSS */
    text-align: left;
    /* margin-top: 10px; (if .btn from 1st CSS was applied) */
  }
  
  /* MODIFIED BY: Second CSS */
  .user-menu-logout:hover {
    background-color: var(--red-50, #fef2f2);
    color: var(--red-600, #dc2626);
    /* opacity: 0.9; (if .btn:hover from 1st CSS was applied) */
  }
  
  /* MODIFIED BY: Second CSS */
  .user-menu-logout i {
    width: 20px;
    margin-right: 10px;
    text-align: center;
  }
  
  
  /* Auth Buttons Section in Popup */
  /* MODIFIED BY: Second CSS */
  .auth-buttons {
    display: flex;
    flex-direction: column;
    padding: 15px;
    gap: 10px;
  }
  
  /* MODIFIED BY: Second CSS (General style for auth buttons) */
  /* Original First CSS relied on .user-popup-menu .btn, .btn-primary, .btn-secondary */
  .auth-button { /* These are <a> tags */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Was 10px 15px for .btn */
    border-radius: 6px; /* Was 8px for .btn */
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease; /* Was all 0.3s for .btn */
    /* margin-top: 10px; (from .btn) is now handled by gap in .auth-buttons */
  }
  
  /* MODIFIED BY: Second CSS */
  .auth-button i {
    margin-right: 8px;
  }
  
  /* MODIFIED BY: Second CSS */
  .auth-button.login-button {
    background-color: var(--primary-600, #2563eb); /* Was var(--accent-blue) for .btn-primary */
    color: white;
  }
  
  /* MODIFIED BY: Second CSS */
  .auth-button.login-button:hover {
    background-color: var(--primary-700, #1d4ed8);
    /* opacity: 0.9; (from .btn:hover) */
  }
  
  /* MODIFIED BY: Second CSS */
  .auth-button.register-button {
    background-color: white; /* Was var(--btn-secondary) */
    color: var(--primary-600, #2563eb); /* Was white */
    border: 1px solid var(--primary-600, #2563eb); /* Was no border */
  }
  
  /* MODIFIED BY: Second CSS */
  .auth-button.register-button:hover {
    background-color: var(--primary-50, #eff6ff);
    /* opacity: 0.9; (from .btn:hover) */
  }
  
  /* #popupLoggedIn, #popupLoggedOut from First CSS:
  #popupLoggedIn, #popupLoggedOut {
    display: none;
  } */
  /* These are still relevant for JS toggling the main state. */
  
  
  /* Alert Message Area in Popup */
  /* MODIFIED BY: Second CSS. Original had .success, .error, .info variants. */
  #popupMessageArea {
    margin-top: 10px; /* FROM: First CSS */
    padding: 10px 15px; /* MODIFIED BY: Second CSS (was `8px`) */
    border-radius: 5px; /* FROM: First CSS */
    font-size: 13px; /* MODIFIED BY: Second CSS (was `12px`) */
    display: none; /* FROM: First CSS (Second CSS uses .show to display) */
    text-align: center; /* FROM: First CSS */
    background-color: var(--yellow-50, #fffbeb); /* ADDED BY: Second CSS (default style) */
    color: var(--yellow-800, #92400e); /* ADDED BY: Second CSS (default style) */
    border-top: 1px solid var(--yellow-200, #fef08a); /* ADDED BY: Second CSS (default style) */
    border: none; /* MODIFIED BY: Second CSS, removing original border if .success/error/info was applied */
  }
  
  /* Original #popupMessageArea variants from First CSS:
  #popupMessageArea.success { background-color: rgba(22, 163, 74, 0.2); border: 1px solid #16a34a; color: #16a34a; }
  #popupMessageArea.error { background-color: rgba(255, 87, 87, 0.1); border: 1px solid #ff5757; color: #ff5757; }
  #popupMessageArea.info { background-color: rgba(13, 143, 255, 0.1); border: 1px solid #0d8fff; color: #0d8fff; }
  */
  /* If these specific color variations are still needed, they should be kept and will override the default from Second CSS if the class is applied. */
  
  /* ADDED BY: Second CSS (for showing the message area) */
  #popupMessageArea.show {
    display: block;
  }
  
  /* Animation for menu appearance (defined but not directly used by the .user-popup-menu class here without JS) */
  /* FROM: Second CSS (Definition) */
  @keyframes menuFadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
  /* --- Cart Dropdown Styles --- */
  /* FROM: First CSS (style.css) - These are not redefined by the second CSS block */
  .cart-dropdown {
    position: fixed;
    top: var(--header-height);
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: calc(100vh - var(--header-height));
    background-color: var(--white);
    box-shadow: var(--shadow-dropdown);
    z-index: 1001;
    transition: right var(--anim-duration) var(--anim-easing);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-300);
    border-left: 1px solid var(--gray-300);
  }
  
  /* FROM: First CSS (style.css) */
  .cart-dropdown.show {
    right: 0;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-header {
    padding: 16px;
    border-bottom: 1px solid var(--gray-300);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-title-icon {
    color: var(--primary);
  }
  
  /* FROM: First CSS (style.css) */
  .cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px; /* Padding for the container of items */
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) transparent;
    -webkit-overflow-scrolling: touch;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-items::-webkit-scrollbar {
    width: 4px;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-items::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-items::-webkit-scrollbar-thumb {
    background-color: var(--gray-400);
    border-radius: 20px;
  }
  
  /* --- Cart Item Structure --- */
  /* MODIFIED BY: Second CSS (significant restyling of cart items) */
  /* Original from First CSS for .cart-item:
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-300);
    transition: all 0.3s;
    opacity: 1;
    max-height: 200px;
  */
  .cart-item {
    display: flex;
    align-items: center; /* ADDED BY: Second CSS */
    padding: 12px; /* MODIFIED BY: Second CSS (was `16px 0`, specific to item itself) */
    background-color: #f9fafb; /* ADDED BY: Second CSS */
    border-radius: 8px; /* ADDED BY: Second CSS */
    border: 1px solid #e5e7eb; /* MODIFIED BY: Second CSS (was `border-bottom` only) */
    margin-bottom: 10px; /* ADDED BY: Second CSS */
    /* transition: all 0.3s; (from first, still applies if not overridden) */
    /* opacity: 1; (from first, still applies) */
    /* max-height: 200px; (from first, still applies) */
  }
  
  /* Original .cart-item:hover from First CSS:
  .cart-item:hover {
    background-color: var(--gray-200);
    border-radius: var(--radius-sm);
    padding-left: 8px;
    padding-right: 8px;
  }
  */
  /* This hover style might still apply or conflict. Second CSS doesn't define a specific hover for .cart-item itself. */
  
  
  /* MODIFIED BY: Second CSS */
  /* Original from First CSS for .cart-item-image:
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-right: 12px;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--white);
    transition: transform 0.3s;
    flex-shrink: 0;
  */
  .cart-item-image {
    width: 60px; /* MODIFIED BY: Second CSS */
    height: 60px; /* MODIFIED BY: Second CSS */
    border-radius: 6px; /* MODIFIED BY: Second CSS */
    overflow: hidden; /* ADDED BY: Second CSS */
    margin-right: 15px; /* MODIFIED BY: Second CSS */
    /* box-shadow, border, transition, flex-shrink from first CSS are removed unless re-added */
  }
  
  /* ADDED BY: Second CSS (specific style for the img tag) */
  .cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Original .cart-item:hover .cart-item-image from First CSS:
  .cart-item:hover .cart-item-image {
    transform: scale(1.05);
  }
  */
  /* This hover effect will still apply. */
  
  /* MODIFIED BY: Second CSS (though mostly structural, no direct style changes here) */
  .cart-item-details {
    flex: 1;
    min-width: 0; /* From First CSS, good to keep for flex behavior */
  }
  
  /* MODIFIED BY: Second CSS */
  /* Original from First CSS for .cart-item-name:
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.8em;
    color: var(--gray-900);
    line-height: 1.4;
  */
  .cart-item-name {
    font-weight: 600; /* FROM: Both */
    color: #111827; /* MODIFIED BY: Second CSS (was `var(--gray-900)`) */
    margin-bottom: 5px; /* MODIFIED BY: Second CSS */
    font-size: 14px; /* MODIFIED BY: Second CSS */
    line-height: 1.3; /* MODIFIED BY: Second CSS */
    /* Truncation styles from First CSS (display: -webkit-box, etc.) are removed. Add back if needed. */
  }
  
  /* ADDED BY: Second CSS (styles for the link wrapper of name/image) */
  .cart-item-link {
    text-decoration: none;
    color: inherit; /* Makes link take color of parent, e.g. .cart-item-name */
    transition: color 0.2s;
  }
  
  /* ADDED BY: Second CSS */
  .cart-item-link:hover {
    color: #0d8fff; /* Specific hover for these links */
  }
  
  /* MODIFIED BY: Second CSS (container for quantity controls) */
  /* Original .cart-item-quantity from First CSS was for the number display and was a flex container. */
  .cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px; /* First CSS .cart-item-quantity had margin-top: 6px */
  }
  
  /* MODIFIED BY: Second CSS (specific styles for decrease/increase buttons) */
  /* First CSS had generic .quantity-btn */
  .cart-btn-decrease,
  .cart-btn-increase {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600; /* First CSS .quantity-btn had font-weight: 700 */
    cursor: pointer;
    transition: all 0.2s;
    /* color: var(--gray-800); from original .quantity-btn is overridden by button content or specific color */
  }
  
  /* MODIFIED BY: Second CSS */
  .cart-btn-decrease:hover,
  .cart-btn-increase:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    /* color: var(--primary); from original .quantity-btn:hover is overridden */
  }
  
  /* MODIFIED BY: Second CSS (for the quantity number display) */
  /* Original from First CSS for .cart-item-quantity (as span):
     font-weight: 600; text-align: center; font-size: 14px; (from .quantity-input if structure was similar)
     Original from First CSS for .cart-item-quantity (as flex container):
     display: flex; align-items: center; margin-top: 6px;
  */
  .cart-item-quantity { /* This is the <span> in HTML */
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    /* Loses display:flex and align-items:center from original .cart-item-quantity (if it was the container) */
    /* margin-top is now on .cart-item-controls */
  }
  
  /* MODIFIED BY: Second CSS */
  /* Original from First CSS for .cart-item-price:
    font-weight: 700;
    color: var(--primary);
    font-size: 15px;
    display: flex;
    align-items: center;
  */
  .cart-item-price { /* This is the individual item price display */
    color: #4b5563; /* MODIFIED BY: Second CSS */
    font-size: 13px; /* MODIFIED BY: Second CSS */
    margin-bottom: 6px; /* ADDED BY: Second CSS */
    /* Loses font-weight:700, display:flex, align-items:center from original */
  }
  
  /* MODIFIED BY: Second CSS */
  .cart-item-subtotal { /* This is the total for that line item */
    font-weight: 600;
    color: #111827; /* MODIFIED BY: Second CSS (was likely inheriting from parent or default) */
    margin-left: 10px; /* ADDED BY: Second CSS */
    text-align: right; /* ADDED BY: Second CSS */
    min-width: 70px; /* ADDED BY: Second CSS */
  }
  
  /* MODIFIED BY: Second CSS */
  /* Original from First CSS for .cart-item-remove:
    background: none; border: none; color: var(--gray-600); cursor: pointer; font-size: 22px;
    margin-left: 8px; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; transition: all 0.2s; border-radius: var(--radius-full);
    align-self: center; flex-shrink: 0; min-width: 40px; min-height: 40px;
  */
  .cart-item-remove {
    background: none; /* FROM: Both */
    border: none; /* FROM: Both */
    color: #9ca3af; /* MODIFIED BY: Second CSS */
    cursor: pointer; /* FROM: Both */
    padding: 5px; /* ADDED BY: Second CSS */
    margin-left: 10px; /* MODIFIED BY: Second CSS */
    transition: color 0.2s; /* MODIFIED BY: Second CSS (was `all 0.2s`) */
    /* Loses explicit sizing, flex centering, border-radius, etc. from First CSS. Relies on SVG size. */
  }
  
  /* MODIFIED BY: Second CSS */
  /* Original .cart-item-remove:hover from First CSS:
    background-color: var(--accent-light); color: var(--accent); transform: rotate(90deg);
  */
  .cart-item-remove:hover {
    color: #ef4444; /* MODIFIED BY: Second CSS */
    /* Loses background-color and transform from original hover */
  }
  
  
  /* --- Cart Footer Styles --- */
  /* FROM: First CSS (style.css) - Not redefined by second CSS block */
  .cart-footer {
    padding: 16px;
    border-top: 1px solid var(--gray-300);
    background-color: var(--gray-200);
    flex-shrink: 0;
    display: block;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-totals {
    margin-bottom: 16px;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-subtotal, .cart-shipping, .cart-tax {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--gray-700);
  }
  
  /* FROM: First CSS (style.css) */
  .cart-total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--gray-400);
    font-weight: 700;
    font-size: 16px;
    color: var(--dark);
  }
  
  /* FROM: First CSS (style.css) */
  .cart-checkout {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 14px;
    border-radius: var(--radius-md);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 700;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    box-shadow: var(--shadow-blue);
    letter-spacing: 0.5px;
    min-height: 48px;
  }
  
  /* FROM: First CSS (style.css) */
  .cart-checkout:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(53, 99, 233, 0.3);
  }
  
  /* FROM: First CSS (style.css) */
  .cart-checkout:active {
    transform: translateY(0);
  }
  
  /* --- Empty Cart Styles --- */
  /* FROM: First CSS (style.css) - Not redefined */
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 16px;
    text-align: center;
    height: 100%;
    color: var(--gray-700);
  }
  /* ... other empty-cart styles from First CSS ... */
  
  
  /* --- Notification Area (Global) --- */
  /* ADDED BY: Second CSS */
  #notification-area .notification {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      margin-top: 10px;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  /* ADDED BY: Second CSS */
  #notification-area .notification.show {
      opacity: 1;
  }
  /* ADDED BY: Second CSS */
  #notification-area .notification.success {
      background-color: #4CAF50; /* Green */
  }
  /* ADDED BY: Second CSS */
  #notification-area .notification.error {
      background-color: #f44336; /* Red */
  }
  
  
  /* --- Media Queries --- */
  /* FROM: First CSS (style.css) - Base media queries */
  @media (min-width: 768px) {
    .container {
      padding: 0 20px;
    }
    .header-container {
      padding: 0 20px; 
    }
    .logo {
      font-size: 24px;
    }
  }
  
  @media (min-width: 1300px) {
    :root {
      --header-height: 80px;
    }
    .hamburger {
      display: none;
    }
    .nav-items {
      position: static;
      left: auto;
      width: auto;
      height: auto;
      background-color: transparent;
      flex-direction: row;
      padding: 0;
      box-shadow: none;
      overflow-y: visible;
      border-top: none;
      transition: none;
      max-width: max-content;
    }
    .nav-item {
      margin: 0 5px;
      padding: 8px 16px;
      border-radius: var(--radius-full);
    }
    .nav-item:hover, .nav-item.active {
      transform: translateY(-2px);
      background-color: var(--primary-light);
    }
    .nav-item.active::before {
      display: none;
    }
  }