/* cart.css - FULL FILE WITH COLOR CONSISTENCY FIX */

/* =========================================
   CART PAGE STYLES WITH HEADER
   ========================================= */

   @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

   :root {
       /* Refined sage green palette - MATCHING SHOP.CSS */
       --primary: #7FA99B;
       --primary-light: #9BBDB0;
       --primary-dark: #6A8F81;
       --secondary: #C5D6CE;
       --accent: #8FB5A5;
       --light: #F7F9F8;
       --dark: #2F3E36;
       --text: #3A4A42;
       --white: #ffffff;
       --gray-50: #FAFBFA;
       --gray-100: #F5F7F6;
       --gray-200: #E8EBE9;
       --gray-300: #D5DAD7;
       --gray-400: #B4BCB8;
       --gray-500: #93A099;
       --gray-600: #728078;
       --gray-700: #556058;
       --gray-800: #3A4A42;
       --gray-900: #1F2821;
       --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
       --shadow: 0 2px 8px rgba(127, 169, 155, 0.08);
       --shadow-lg: 0 8px 24px rgba(127, 169, 155, 0.12);
       --border-radius: 0;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       
       /* Cart-specific colors */
       --text-light: #757575;
       --border: #e0e0e0;
       --bg: #ffffff;
       --bg-alt: #f9f9f9;
       --success: #22c55e;
       --error: #ef4444;
       --price: #7FA99B;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       overflow-x: hidden;
       max-width: 100vw;
   }
   
   body {
       font-family: 'Libre Baskerville', serif;
       font-size: 15px;
       line-height: 1.6;
       color: var(--text);
       background: var(--bg-alt);
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
       max-width: 100vw;
   }
   
   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 24px;
       overflow-x: hidden;
   }
   
   /* =========================================
      HEADER STYLES
      ========================================= */
   
   .site-header {
       background: white;
       box-shadow: 0 2px 8px rgba(0,0,0,0.08);
       position: sticky;
       top: 0;
       z-index: 1000;
   }
   
   .header-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   .header-main {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 15px 0;
       gap: 30px;
   }
   
   /* Logo */
   .header-center {
       flex-shrink: 0;
   }
   
   .logo {
       display: block;
   }
   
   .logo img {
       height: 80px;
       width: auto;
   }
   
   /* Left Navigation */
   .header-left {
       flex: 1;
       display: flex;
       align-items: center;
   }
   
   .header-left nav {
       display: flex;
       align-items: center;
       gap: 25px;
   }
   
   .header-left nav > a {
       color: var(--text);
       text-decoration: none;
       font-weight: 500;
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       transition: color 0.2s;
       font-family: 'Libre Baskerville', serif;
   }
   
   .header-left nav > a:hover {
       color: var(--primary);
   }
   
   /* Navigation Item with Dropdown */
   .nav-item {
       position: relative;
   }
   
   .nav-item > a {
       color: var(--text);
       text-decoration: none;
       font-weight: 500;
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       transition: color 0.2s;
       display: block;
       font-family: 'Libre Baskerville', serif;
   }
   
   .nav-item:hover > a {
       color: var(--primary);
   }
   
   /* Dropdown Menu - UPDATED TO MATCH SHOP PAGE EXACTLY */
   .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       background: white;
       border: 1px solid var(--gray-200);
       border-radius: 8px;
       box-shadow: var(--shadow-lg);
       padding: 40px;
       min-width: 800px;
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: all 0.3s ease;
       z-index: 10000;
   }
   
   .nav-item:hover .dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   
   .dropdown-grid {
       display: grid;
       gap: 40px;
       grid-template-columns: repeat(4, 1fr);
   }
   
   .dropdown-column h4 {
       font-family: 'Libre Baskerville', serif;
       font-size: 13px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--dark);
       margin-bottom: 20px;
       border-bottom: 2px solid var(--primary);
       padding-bottom: 12px;
   }
   
   .dropdown-column ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   
   .dropdown-column ul li {
       margin-bottom: 12px;
   }
   
   .dropdown-column ul li a {
       color: var(--text);
       text-decoration: none;
       font-size: 14px;
       font-weight: 400;
       transition: var(--transition);
       display: block;
       padding: 4px 0;
       text-transform: none;
       letter-spacing: 0;
       font-family: 'Libre Baskerville', serif;
   }
   
   .dropdown-column ul li a:hover {
       color: var(--primary);
       padding-left: 8px;
   }
   
   /* Right Actions */
   .header-right {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 20px;
   }
   
   .search-toggle {
       background: none;
       border: none;
       font-size: 20px;
       color: var(--text);
       cursor: pointer;
       padding: 8px;
       transition: color 0.2s;
   }
   
   .search-toggle:hover {
       color: var(--primary);
   }
   
   .account-link a {
       color: var(--text);
       text-decoration: none;
       font-size: 14px;
       font-weight: 500;
       transition: color 0.2s;
       font-family: 'Libre Baskerville', serif;
   }
   
   .account-link a:hover {
       color: var(--primary);
   }
   
   .cart-link {
       position: relative;
   }
   
   .cart-link a {
       color: var(--text);
       text-decoration: none;
       font-size: 24px;
       transition: color 0.2s;
   }
   
   .cart-link a:hover {
       color: var(--primary);
   }
   
   .cart-badge {
       position: absolute;
       top: -8px;
       right: -8px;
       background: var(--primary);
       color: white;
       font-size: 11px;
       font-weight: 700;
       min-width: 18px;
       height: 18px;
       border-radius: 9px;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 0 5px;
       font-family: 'Libre Baskerville', serif;
   }
   
   /* Mobile Menu Toggle */
   .mobile-menu-toggle {
       display: none;
       background: none;
       border: none;
       font-size: 24px;
       color: var(--text);
       cursor: pointer;
       padding: 8px;
   }
   
   /* Mobile Menu */
   .mobile-menu {
       display: none;
       background: white;
       border-top: 1px solid var(--border);
       padding: 20px;
   }
   
   .mobile-menu.active {
       display: block;
   }
   
   .mobile-menu nav {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }
   
   .mobile-menu nav a {
       color: var(--text);
       text-decoration: none;
       font-weight: 500;
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       padding: 10px 0;
       border-bottom: 1px solid var(--border);
       font-family: 'Libre Baskerville', serif;
   }
   
   /* =========================================
      PAGE CONTENT
      ========================================= */
   
   .page-header {
       background: var(--bg);
       padding: 40px 0 32px;
       border-bottom: 1px solid var(--border);
   }
   
   .page-header h1 {
       font-size: 32px;
       font-weight: 700;
       color: var(--text);
       letter-spacing: -0.5px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .main-content {
       padding: 48px 0 80px;
   }
   
   /* Cart Layout */
   .cart-grid {
       display: grid;
       grid-template-columns: 1fr 380px;
       gap: 32px;
       margin-top: 32px;
       max-width: 100%;
       overflow: hidden;
   }
   
   /* ===================================
      CART ITEMS SECTION
      =================================== */
   .cart-items-section {
       background: var(--bg);
       border: 1px solid var(--border);
       border-radius: 8px;
       overflow: hidden;
       max-width: 100%;
   }
   
   .section-header {
       padding: 20px 24px;
       border-bottom: 1px solid var(--border);
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .section-title {
       font-size: 18px;
       font-weight: 600;
       color: var(--text);
       font-family: 'Libre Baskerville', serif;
   }
   
   .item-count {
       font-size: 14px;
       color: var(--text-light);
       font-family: 'Libre Baskerville', serif;
   }
   
   .cart-items-list {
       padding: 0;
       max-width: 100%;
       overflow: hidden;
   }
   
   .cart-item {
       display: flex;
       gap: 20px;
       padding: 24px;
       border-bottom: 1px solid var(--border);
       align-items: center;
       max-width: 100%;
       overflow: hidden;
   }
   
   .cart-item:last-child {
       border-bottom: none;
   }
   
   /* CRITICAL: Product Image Constraints */
   .cart-item-image,
   .item-image {
       width: 100px !important;
       height: 100px !important;
       min-width: 100px !important;
       min-height: 100px !important;
       max-width: 100px !important;
       max-height: 100px !important;
       border-radius: 6px;
       overflow: hidden;
       border: 1px solid var(--border);
       flex-shrink: 0;
       background: var(--bg-alt);
       position: relative;
   }
   
   .cart-item-image img,
   .item-image img,
   .cart-item img,
   #cart-items img {
       width: 100% !important;
       height: 100% !important;
       max-width: 100px !important;
       max-height: 100px !important;
       min-width: 100px !important;
       min-height: 100px !important;
       object-fit: cover !important;
       display: block !important;
       position: absolute !important;
       top: 0 !important;
       left: 0 !important;
   }
   
   /* Cart Item Details */
   .cart-item-details,
   .item-details {
       flex: 1;
       min-width: 0;
   }
   
   .cart-item-title,
   .item-name {
       font-size: 15px;
       font-weight: 600;
       color: var(--text);
       margin-bottom: 4px;
       line-height: 1.4;
       font-family: 'Libre Baskerville', serif;
   }
   
   .cart-item-title a,
   .item-name a {
       color: var(--text) !important;
       text-decoration: none !important;
       font-family: 'Libre Baskerville', serif;
   }
   
   .cart-item-title a:hover,
   .item-name a:hover {
       color: var(--text) !important;
   }
   
   .cart-item-meta,
   .item-meta {
       font-size: 13px;
       color: var(--text-light);
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       gap: 12px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .cart-item-size,
   .item-size {
       background: var(--bg-alt);
       padding: 4px 12px;
       border-radius: 20px;
       font-weight: 500;
       border: 1px solid var(--border);
       color: var(--text);
       font-size: 13px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .cart-item-stock,
   .item-stock {
       color: var(--price);
       font-weight: 500;
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 13px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .cart-item-price,
   .item-price {
       font-size: 13px;
       color: var(--price);
       margin-bottom: 4px;
       font-weight: 600;
       font-family: 'Libre Baskerville', serif;
   }
   
   /* Cart Item Controls */
   .cart-item-controls,
   .item-actions {
       display: flex;
       align-items: center;
       gap: 16px;
       margin-top: 12px;
   }
   
   .qty-controls,
   .quantity-controls {
       display: flex;
       align-items: center;
       border: 1px solid var(--border);
       border-radius: 4px;
       background: var(--bg);
   }
   
   .qty-btn,
   .quantity-btn,
   .decrease-btn,
   .increase-btn {
       border: none;
       background: none;
       width: 32px;
       height: 32px;
       cursor: pointer;
       color: var(--text);
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Libre Baskerville', serif;
   }
   
   .qty-btn:disabled,
   .quantity-btn:disabled {
       opacity: 0.3;
       cursor: not-allowed;
   }
   
   .qty-value,
   .quantity-display {
       min-width: 36px;
       text-align: center;
       font-weight: 500;
       font-size: 14px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .remove-btn,
   .remove-item-btn {
       background: none;
       border: none;
       color: var(--text-light);
       cursor: pointer;
       font-size: 14px;
       padding: 8px 12px;
       text-decoration: underline;
       font-family: 'Libre Baskerville', serif;
   }
   
   .remove-btn:hover,
   .remove-item-btn:hover {
       color: var(--error);
   }
   
   .cart-item-subtotal,
   .item-total {
       font-size: 16px;
       font-weight: 600;
       color: var(--price);
       font-family: 'Libre Baskerville', serif;
   }
   
   /* Empty State */
   .empty-cart {
       padding: 80px 32px;
       text-align: center;
   }
   
   .empty-icon {
       width: 80px;
       height: 80px;
       margin: 0 auto 24px;
       border-radius: 50%;
       background: var(--bg-alt);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 32px;
       color: var(--text-light);
   }
   
   .empty-cart h3 {
       font-size: 20px;
       font-weight: 600;
       margin-bottom: 12px;
       color: var(--text);
       font-family: 'Libre Baskerville', serif;
   }
   
   .empty-cart p {
       color: var(--text-light);
       margin-bottom: 32px;
       max-width: 400px;
       margin-left: auto;
       margin-right: auto;
       font-family: 'Libre Baskerville', serif;
   }
   
   /* ===================================
      ORDER SUMMARY
      =================================== */
   .order-summary,
   .cart-summary-container {
       background: var(--bg);
       border: 1px solid var(--border);
       border-radius: 8px;
       position: sticky;
       top: 120px;
   }
   
   .summary-content,
   .cart-summary {
       padding: 32px;
   }
   
   .summary-title {
       font-size: 18px;
       font-weight: 600;
       margin-bottom: 24px;
       color: var(--text);
       font-family: 'Libre Baskerville', serif;
   }
   
   .summary-row,
   .cart-summary-row {
       display: flex;
       justify-content: space-between;
       margin-bottom: 16px;
       font-size: 15px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .summary-label {
       color: var(--text-light);
       font-family: 'Libre Baskerville', serif;
   }
   
   .summary-value {
       font-weight: 500;
       color: var(--text);
       font-family: 'Libre Baskerville', serif;
   }
   
   .summary-divider {
       height: 1px;
       background: var(--border);
       margin: 24px 0;
   }
   
   .summary-total,
   .cart-summary-row.total {
       display: flex;
       justify-content: space-between;
       font-size: 18px;
       font-weight: 600;
       margin-bottom: 24px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .total-label {
       color: var(--text);
       font-family: 'Libre Baskerville', serif;
   }
   
   .total-value {
       color: var(--text);
       font-family: 'Libre Baskerville', serif;
   }
   
   /* Buttons */
   .btn-primary,
   .btn {
       width: 100%;
       background: var(--primary);
       color: white;
       border: none;
       padding: 16px 24px;
       border-radius: 6px;
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.2s;
       font-family: 'Libre Baskerville', serif;
   }
   
   .btn-primary:hover,
   .btn:hover {
       background: var(--primary-dark);
   }
   
   .btn-secondary {
       width: 100%;
       background: none;
       color: var(--text);
       border: 1px solid var(--border);
       padding: 16px 24px;
       border-radius: 6px;
       font-size: 15px;
       font-weight: 500;
       cursor: pointer;
       margin-top: 12px;
       text-decoration: none;
       display: block;
       text-align: center;
       font-family: 'Libre Baskerville', serif;
   }
   
   .btn-secondary:hover {
       border-color: var(--text);
   }
   
   /* Trust Badges */
   .trust-badges,
   .security-badges {
       display: flex;
       justify-content: space-around;
       padding: 24px 32px;
       border-top: 1px solid var(--border);
       gap: 16px;
   }
   
   .badge,
   .security-badge {
       text-align: center;
       flex: 1;
   }
   
   .badge-icon {
       font-size: 20px;
       color: var(--primary);
       margin-bottom: 6px;
   }
   
   .badge-text {
       font-size: 11px;
       color: var(--text-light);
       line-height: 1.3;
       font-family: 'Libre Baskerville', serif;
   }
   
   /* Notification */
   .notification,
   .cart-notification {
       position: fixed;
       top: 24px;
       right: 24px;
       background: var(--text);
       color: white;
       padding: 16px 24px;
       border-radius: 6px;
       font-size: 14px;
       font-weight: 500;
       z-index: 1000;
       opacity: 0;
       transform: translateY(-20px);
       transition: all 0.3s;
       font-family: 'Libre Baskerville', serif;
   }
   
   .notification.show,
   .cart-notification.show {
       opacity: 1;
       transform: translateY(0);
   }
   
   .notification.error,
   .cart-notification.error {
       background: var(--error);
   }
   
   .notification.success,
   .cart-notification.success {
       background: var(--success);
   }
   
   /* =========================================
      FOOTER
      ========================================= */
   .site-footer {
       background: var(--dark);
       color: var(--gray-300);
       padding: 60px 0 0;
   }
   
   .footer-widgets {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 2fr;
       gap: 48px;
       padding-bottom: 48px;
   }
   
   .footer-logo img {
       height: 200px;
       margin-bottom: 24px;
   }
   
   .footer-description {
       color: var(--gray-400);
       font-size: 14px;
       line-height: 1.8;
       margin-bottom: 24px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .social-links {
       display: flex;
       gap: 12px;
   }
   
   .social-link {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: rgba(255,255,255,0.1);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       text-decoration: none;
       font-size: 20px;
       transition: var(--transition);
   }
   
   .social-link:hover {
       background: var(--primary);
       border-color: var(--primary);
       color: var(--white);
   }
   
   .widget-title {
       color: var(--white);
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 20px;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .widget-menu {
       list-style: none;
   }
   
   .widget-menu li {
       margin-bottom: 12px;
   }
   
   .widget-menu a {
       color: var(--gray-400);
       text-decoration: none;
       font-size: 14px;
       transition: color 0.2s;
       font-family: 'Libre Baskerville', serif;
   }
   
   .widget-menu a:hover {
       color: var(--white);
   }
   
   .newsletter-form {
       display: flex;
       gap: 8px;
       margin-bottom: 12px;
   }
   
   .newsletter-form input {
       flex: 1;
       padding: 12px 16px;
       border: 1px solid rgba(255,255,255,0.2);
       background: rgba(255,255,255,0.05);
       color: white;
       border-radius: 4px;
       font-size: 14px;
       font-family: 'Libre Baskerville', serif;
   }
   
   .newsletter-submit {
       background: var(--primary);
       color: white;
       border: none;
       padding: 12px 24px;
       border-radius: 4px;
       font-weight: 500;
       cursor: pointer;
       transition: var(--transition);
       font-family: 'Libre Baskerville', serif;
   }
   
   .newsletter-submit:hover {
       background: var(--primary-dark);
   }
   
   .newsletter-privacy {
       font-size: 12px;
       color: var(--gray-500);
       font-family: 'Libre Baskerville', serif;
   }
   
   .footer-bottom {
       border-top: 1px solid rgba(255,255,255,0.1);
       padding: 24px 0;
       text-align: center;
   }
   
   .copyright {
       font-size: 13px;
       color: var(--gray-500);
       font-family: 'Libre Baskerville', serif;
   }
   
   /* ===================================
      RESPONSIVE DESIGN
      =================================== */
   @media (max-width: 992px) {
       /* Hide desktop navigation */
       .header-left nav {
           display: none;
       }
       
       /* Show mobile menu toggle */
       .mobile-menu-toggle {
           display: block;
       }
       
       /* Adjust header layout */
       .header-main {
           justify-content: space-between;
       }
       
       .header-center {
           order: 2;
           flex: 1;
           text-align: center;
       }
       
       .header-right {
           order: 3;
           flex: 0;
       }
       
       /* Cart grid */
       .cart-grid {
           grid-template-columns: 1fr;
       }
       
       .order-summary,
       .cart-summary-container {
           position: static;
       }
       
       /* Footer */
       .footer-widgets {
           grid-template-columns: 1fr;
       }
   }
   
   @media (max-width: 768px) {
       .logo img {
           height: 60px;
       }
       
       .page-header h1 {
           font-size: 24px;
       }
       
       .cart-item {
           flex-direction: column;
           align-items: flex-start;
       }
       
       .cart-item-image,
       .item-image {
           width: 100% !important;
           height: 180px !important;
           max-width: 100% !important;
           max-height: 180px !important;
       }
       
       .cart-item-image img,
       .item-image img {
           max-width: 100% !important;
           max-height: 180px !important;
       }
       
       .cart-item-controls,
       .item-actions {
           flex-wrap: wrap;
           width: 100%;
       }
       
       .cart-item-subtotal,
       .item-total {
           margin-left: auto;
       }
   }
   
   /* ===================================
      CART VISUAL FIXES
      =================================== */
   
   /* Force product names to be dark with no underline */
   .cart-item-title,
   .cart-item-title a,
   .item-name,
   .item-name a,
   #cart-items a,
   .cart-items a,
   .cart-item h3,
   .cart-item h3 a,
   .cart-item-details a {
       color: var(--text) !important;
       text-decoration: none !important;
       font-family: 'Libre Baskerville', serif;
   }
   
   /* Override any inherited link styles */
   a.cart-item-title,
   a .cart-item-title {
       color: var(--text) !important;
       font-family: 'Libre Baskerville', serif;
   }