/* * HEADER_PRO_UI_77A * Mobile City retail header actions. * Display-only enhancement. */ .mc-retail-header-actions{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:10px !important; flex:0 0 auto; } /* ---------------------------------------- Shared professional action button ----------------------------------------- */ .mc-header-action{ position:relative !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; min-height:50px !important; margin:0 !important; padding:0 16px !important; border:1px solid #d9e2ef !important; border-radius:14px !important; background:#ffffff !important; color:#102344 !important; font-family:inherit !important; font-size:14px !important; font-weight:700 !important; line-height:1 !important; text-decoration:none !important; white-space:nowrap !important; cursor:pointer !important; box-shadow: 0 2px 5px rgba(15,35,68,.035), 0 8px 22px rgba(15,35,68,.045) !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important; } .mc-header-action:hover{ transform:translateY(-1px) !important; border-color:#b9c9df !important; background:#fbfdff !important; box-shadow: 0 3px 8px rgba(15,35,68,.05), 0 10px 26px rgba(15,35,68,.075) !important; } .mc-header-action:focus-visible{ outline:3px solid rgba(20,94,214,.18) !important; outline-offset:2px !important; } .mc-action-icon{ width:21px !important; height:21px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 21px !important; color:#0e3e83 !important; } .mc-action-icon svg{ width:21px !important; height:21px !important; display:block !important; fill:none !important; stroke:currentColor !important; stroke-width:1.9 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } /* ---------------------------------------- Favorites ----------------------------------------- */ .mc-header-favorites{ min-width:132px !important; } /* ---------------------------------------- Account ----------------------------------------- */ .mc-header-account{ min-width:146px !important; } /* ---------------------------------------- Cart — primary action ----------------------------------------- */ .mc-header-cart{ min-width:112px !important; padding-left:17px !important; padding-right:17px !important; border-color:#145ed6 !important; background: linear-gradient( 135deg, #0752c9 0%, #1465df 100% ) !important; color:#ffffff !important; box-shadow: 0 7px 18px rgba(20,94,214,.19) !important; } .mc-header-cart:hover{ border-color:#0752c9 !important; background: linear-gradient( 135deg, #064bb8 0%, #125bd0 100% ) !important; box-shadow: 0 9px 22px rgba(20,94,214,.25) !important; } .mc-header-cart .mc-action-icon{ color:#ffffff !important; } /* Remove old visual divider if present */ .mc-header-cart.cart-action{ border-left:1px solid #145ed6 !important; } /* ---------------------------------------- CART COUNT BADGE ----------------------------------------- */ .mc-cart-count{ position:absolute !important; top:-8px !important; right:-7px !important; z-index:4 !important; min-width:22px !important; height:22px !important; padding:0 6px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:2px solid #ffffff !important; border-radius:999px !important; background:#ef2b2d !important; color:#ffffff !important; font-size:11px !important; font-weight:800 !important; line-height:1 !important; box-sizing:border-box !important; box-shadow: 0 3px 9px rgba(202,24,28,.28) !important; transform:scale(1); transform-origin:center; } .mc-cart-count[hidden]{ display:none !important; } .mc-header-cart.mc-cart-has-items{ box-shadow: 0 8px 22px rgba(20,94,214,.25) !important; } .mc-cart-pulse .mc-cart-count{ animation: mcCartBadgePulse77a .34s ease-out; } @keyframes mcCartBadgePulse77a{ 0%{ transform:scale(.72); } 55%{ transform:scale(1.18); } 100%{ transform:scale(1); } } /* ---------------------------------------- Clean old unicode icon appearance ----------------------------------------- */ .mc-header-action .header-action-icon{ font-size:0 !important; line-height:0 !important; } /* ---------------------------------------- Desktop / smaller laptop ----------------------------------------- */ @media (max-width:1180px){ .mc-retail-header-actions{ gap:7px !important; } .mc-header-action{ min-height:46px !important; padding-left:12px !important; padding-right:12px !important; font-size:13px !important; } .mc-header-favorites{ min-width:116px !important; } .mc-header-account{ min-width:126px !important; } .mc-header-cart{ min-width:100px !important; } } /* ---------------------------------------- Tablet ----------------------------------------- */ @media (max-width:900px){ .mc-header-action{ min-width:46px !important; width:46px !important; padding:0 !important; } .mc-header-action .mc-action-label{ display:none !important; } .mc-header-favorites, .mc-header-account, .mc-header-cart{ min-width:46px !important; } .mc-cart-count{ top:-7px !important; right:-7px !important; } } /* ---------------------------------------- Mobile ----------------------------------------- */ @media (max-width:520px){ .mc-retail-header-actions{ gap:5px !important; } .mc-header-action{ width:42px !important; min-width:42px !important; min-height:42px !important; border-radius:12px !important; } .mc-action-icon, .mc-action-icon svg{ width:19px !important; height:19px !important; } .mc-header-cart{ width:44px !important; min-width:44px !important; } .mc-cart-count{ min-width:20px !important; height:20px !important; font-size:10px !important; top:-7px !important; right:-6px !important; } } /* Respect reduced-motion */ @media (prefers-reduced-motion:reduce){ .mc-header-action, .mc-cart-count{ transition:none !important; animation:none !important; } }