@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--primary-50: #eff6ff;--primary-100: #dbeafe;--primary-500: #3B82F6;--primary-600: #2563eb;--primary-700: #1d4ed8;--neutral-50: #f9fafb;--neutral-100: #f3f4f6;--neutral-200: #e5e7eb;--neutral-300: #d1d5db;--neutral-400: #9ca3af;--neutral-500: #6b7280;--neutral-600: #4b5563;--neutral-700: #374151;--neutral-800: #1f2937;--neutral-900: #111827;--success-500: #10b981;--success-600: #059669;--warning-500: #f59e0b;--error-500: #ef4444;--error-600: #dc2626;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #f3f4f6;--text-primary: #111827;--text-secondary: #4b5563;--text-tertiary: #6b7280;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-light: 300;--font-regular: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--transition-fast: .15s ease-in-out;--transition-base: .2s ease-in-out;--transition-slow: .3s ease-in-out}@media(prefers-color-scheme:dark){:root{--bg-primary: #111827;--bg-secondary: #1f2937;--bg-tertiary: #374151;--text-primary: #f9fafb;--text-secondary: #d1d5db;--text-tertiary: #9ca3af}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:var(--font-size-base);font-weight:var(--font-regular);line-height:1.5;color:var(--text-primary);background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}h1{font-size:clamp(2rem,4vw,3rem);font-weight:var(--font-bold);letter-spacing:-.02em;line-height:1.2}h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:var(--font-semibold);letter-spacing:-.01em;line-height:1.3}h3{font-size:clamp(1.125rem,2vw,1.5rem);font-weight:var(--font-semibold);letter-spacing:-.01em;line-height:1.4}p{font-size:var(--font-size-base);font-weight:var(--font-regular);line-height:1.6;color:var(--text-secondary)}*:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px;border-radius:var(--radius-sm)}button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--neutral-100)}::-webkit-scrollbar-thumb{background:var(--neutral-400);border-radius:var(--radius-lg)}::-webkit-scrollbar-thumb:hover{background:var(--neutral-500)}#root{min-height:100vh;display:flex;flex-direction:column}.app{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.container{max-width:1440px;margin:0 auto;padding:0 var(--space-6)}.text-center{text-align:center}.mt-4{margin-top:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}.p-4{padding:var(--space-4)}.loading{display:flex;align-items:center;justify-content:center;min-height:400px}.loading-spinner{width:48px;height:48px;border:4px solid var(--neutral-200);border-top-color:var(--primary-500);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-message{padding:var(--space-4);background:#ef44441a;border:2px solid var(--error-500);border-radius:var(--radius-lg);color:var(--error-500);font-size:var(--font-size-sm);font-weight:var(--font-medium);text-align:center}.success-message{padding:var(--space-4);background:#10b9811a;border:2px solid var(--success-500);border-radius:var(--radius-lg);color:var(--success-600);font-size:var(--font-size-sm);font-weight:var(--font-medium);text-align:center}.search-bar{position:relative;flex:1;max-width:500px}.search-input{width:100%;padding:var(--space-3) var(--space-4);padding-left:var(--space-12);font-size:var(--font-size-sm);font-weight:var(--font-regular);color:var(--text-primary);background:var(--bg-secondary);border:2px solid transparent;border-radius:var(--radius-lg);transition:all var(--transition-base)}.search-input::placeholder{color:var(--text-tertiary)}.search-input:hover{background:var(--bg-tertiary);border-color:var(--neutral-300)}.search-input:focus{outline:none;background:var(--bg-primary);border-color:var(--primary-500);box-shadow:0 0 0 3px #3b82f61a}.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);font-size:var(--font-size-lg);color:var(--text-tertiary);pointer-events:none;transition:color var(--transition-base)}.search-input:focus~.search-icon{color:var(--primary-500)}@media(max-width:768px){.search-bar{max-width:100%;order:3;flex-basis:100%}}.header{position:sticky;top:0;z-index:100;background:var(--bg-primary);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.header-content{max-width:1440px;margin:0 auto;padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-6)}.logo{display:flex;align-items:center;gap:var(--space-3);transition:transform var(--transition-base);cursor:pointer}.logo:hover{transform:translateY(-2px)}.logo:active{transform:translateY(0)}.logo-icon{font-size:var(--font-size-3xl);line-height:1;filter:drop-shadow(0 2px 4px rgba(59,130,246,.3))}.logo h1{font-size:var(--font-size-2xl);font-weight:var(--font-bold);letter-spacing:-.02em;color:var(--text-primary);background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-500) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.nav-link{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-md);transition:all var(--transition-base);position:relative}.nav-link:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%) scaleX(0);width:80%;height:2px;background:var(--primary-500);transition:transform var(--transition-base)}.nav-link:hover{color:var(--primary-600);background:var(--primary-50)}.nav-link:hover:after{transform:translate(-50%) scaleX(1)}.nav-link:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.cart-button{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--primary-500);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-base);margin-left:var(--space-4)}.cart-button:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.cart-button:active{transform:translateY(0);box-shadow:var(--shadow-md)}.cart-icon{font-size:var(--font-size-xl);filter:grayscale(1) brightness(2)}.cart-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 var(--space-1);display:flex;align-items:center;justify-content:center;background:var(--error-500);color:#fff;font-size:var(--font-size-xs);font-weight:var(--font-bold);border-radius:10px;box-shadow:0 2px 4px #0003;animation:badge-pop .3s ease-out}@keyframes badge-pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}@media(max-width:768px){.header-content{padding:var(--space-3) var(--space-4);gap:var(--space-4)}.logo h1{font-size:var(--font-size-xl)}.nav{display:none}.cart-button{margin-left:auto}}@media(max-width:480px){.header-content{gap:var(--space-3)}.logo-icon{font-size:var(--font-size-2xl)}.logo h1{font-size:var(--font-size-lg)}}.product-card{background:var(--bg-primary);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);transition:all var(--transition-slow);display:flex;flex-direction:column;height:100%;position:relative}.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.product-image{position:relative;width:100%;height:240px;overflow:hidden;background:var(--neutral-100)}.product-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.product-card:hover .product-image img{transform:scale(1.05)}.product-badge{position:absolute;top:var(--space-3);right:var(--space-3);padding:var(--space-1) var(--space-3);background:var(--primary-500);color:#fff;font-size:var(--font-size-xs);font-weight:var(--font-semibold);letter-spacing:.05em;text-transform:uppercase;border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:2}.out-of-stock-overlay{position:absolute;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-lg);font-weight:var(--font-semibold);z-index:1}.product-info{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}.product-name{font-size:var(--font-size-lg);font-weight:var(--font-semibold);letter-spacing:-.01em;color:var(--text-primary);line-height:1.3;margin:0}.product-description{font-size:var(--font-size-sm);font-weight:var(--font-regular);color:var(--text-secondary);line-height:1.5;margin:0}.product-rating{display:flex;align-items:center;gap:var(--space-2)}.stars{font-size:var(--font-size-sm);line-height:1}.rating-text{font-size:var(--font-size-xs);font-weight:var(--font-medium);color:var(--text-tertiary)}.product-specs{display:flex;flex-wrap:wrap;gap:var(--space-2)}.spec-tag{padding:var(--space-1) var(--space-3);background:var(--neutral-100);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:var(--font-medium);border-radius:var(--radius-md);transition:all var(--transition-base)}.product-card:hover .spec-tag{background:var(--primary-50);color:var(--primary-600)}.product-features{padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-md);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.product-features h4{font-size:var(--font-size-sm);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2)}.product-features ul{list-style:none;padding:0;margin:0}.product-features li{font-size:var(--font-size-xs);color:var(--text-secondary);padding-left:var(--space-4);position:relative;line-height:1.6;margin-bottom:var(--space-1)}.product-features li:before{content:"✓";position:absolute;left:0;color:var(--success-500);font-weight:var(--font-bold)}.details-toggle{width:100%;padding:var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-medium);color:var(--primary-600);background:transparent;border:1px solid var(--neutral-200);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.details-toggle:hover{background:var(--primary-50);border-color:var(--primary-500)}.details-toggle:active{transform:scale(.98)}.product-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--neutral-200)}.price-section{display:flex;flex-direction:column;gap:var(--space-1)}.original-price{font-size:var(--font-size-sm);font-weight:var(--font-regular);color:var(--text-tertiary);text-decoration:line-through}.current-price{font-size:var(--font-size-2xl);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:-.02em}.add-to-cart-btn{padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm);font-weight:var(--font-semibold);color:#fff;background:var(--primary-500);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;box-shadow:var(--shadow-sm)}.add-to-cart-btn:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-md)}.add-to-cart-btn:active{transform:translateY(0)}.add-to-cart-btn.added{background:var(--success-500);animation:pulse .5s ease-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.add-to-cart-btn.disabled{background:var(--neutral-300);color:var(--neutral-500);cursor:not-allowed;transform:none;box-shadow:none}.add-to-cart-btn.disabled:hover{background:var(--neutral-300);transform:none;box-shadow:none}@media(max-width:768px){.product-image{height:200px}.product-info{padding:var(--space-4)}.product-footer{flex-direction:column;align-items:stretch}.add-to-cart-btn{width:100%}}@media(max-width:480px){.product-image{height:180px}.current-price{font-size:var(--font-size-xl)}}.product-grid-container{max-width:1440px;margin:0 auto;padding:var(--space-8) var(--space-6)}.filter-section{margin-bottom:var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.filter-title{font-size:var(--font-size-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.filter-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap}.filter-btn{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-medium);color:var(--text-secondary);background:var(--bg-primary);border:2px solid var(--neutral-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base)}.filter-btn:hover{border-color:var(--primary-500);color:var(--primary-600);background:var(--primary-50)}.filter-btn.active{background:var(--primary-500);color:#fff;border-color:var(--primary-500);box-shadow:var(--shadow-md)}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-state{grid-column:1 / -1;text-align:center;padding:var(--space-16) var(--space-4)}.empty-state-icon{font-size:4rem;margin-bottom:var(--space-4);opacity:.5}.empty-state h3{font-size:var(--font-size-2xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2)}.empty-state p{font-size:var(--font-size-base);color:var(--text-secondary)}@media(max-width:1024px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5)}}@media(max-width:768px){.product-grid-container{padding:var(--space-6) var(--space-4)}.filter-section{flex-direction:column;align-items:flex-start}.product-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}}@media(max-width:640px){.product-grid{grid-template-columns:1fr}}.cart-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;animation:fadeIn .2s ease-out}.cart-container{position:fixed;top:0;right:0;width:100%;max-width:480px;height:100vh;background:var(--bg-primary);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;animation:slideInRight .3s ease-out;z-index:1001}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.cart-header{padding:var(--space-6);border-bottom:1px solid var(--neutral-200);display:flex;align-items:center;justify-content:space-between}.cart-title{font-size:var(--font-size-2xl);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:-.02em}.cart-close-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--neutral-100);border-radius:var(--radius-lg);font-size:var(--font-size-xl);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base)}.cart-close-btn:hover{background:var(--neutral-200);color:var(--text-primary);transform:rotate(90deg)}.cart-items{flex:1;overflow-y:auto;padding:var(--space-6)}.cart-item{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-4);animation:slideDown .3s ease-out}.cart-item-image{width:80px;height:80px;border-radius:var(--radius-md);object-fit:cover;background:var(--neutral-100)}.cart-item-details{flex:1;display:flex;flex-direction:column;gap:var(--space-2)}.cart-item-name{font-size:var(--font-size-base);font-weight:var(--font-semibold);color:var(--text-primary);line-height:1.3}.cart-item-price{font-size:var(--font-size-lg);font-weight:var(--font-bold);color:var(--primary-600)}.cart-item-controls{display:flex;align-items:center;gap:var(--space-3);margin-top:auto}.quantity-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border:2px solid var(--neutral-200);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-bold);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base)}.quantity-btn:hover{border-color:var(--primary-500);color:var(--primary-600);background:var(--primary-50)}.quantity-btn:active{transform:scale(.95)}.quantity-display{min-width:40px;text-align:center;font-size:var(--font-size-base);font-weight:var(--font-semibold);color:var(--text-primary)}.remove-btn{margin-left:auto;padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-medium);color:var(--error-500);background:transparent;border:1px solid var(--error-500);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.remove-btn:hover{background:var(--error-500);color:#fff}.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8);text-align:center}.cart-empty-icon{font-size:4rem;margin-bottom:var(--space-4);opacity:.5}.cart-empty h3{font-size:var(--font-size-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-2)}.cart-empty p{font-size:var(--font-size-base);color:var(--text-secondary)}.cart-footer{padding:var(--space-6);border-top:1px solid var(--neutral-200);background:var(--bg-secondary)}.cart-summary{margin-bottom:var(--space-4)}.cart-summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.cart-summary-label{font-size:var(--font-size-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.cart-summary-value{font-size:var(--font-size-base);font-weight:var(--font-semibold);color:var(--text-primary)}.cart-total{padding-top:var(--space-4);border-top:2px solid var(--neutral-300)}.cart-total .cart-summary-label{font-size:var(--font-size-lg);font-weight:var(--font-bold);color:var(--text-primary)}.cart-total .cart-summary-value{font-size:var(--font-size-2xl);font-weight:var(--font-bold);color:var(--primary-600)}.checkout-btn{width:100%;padding:var(--space-4);font-size:var(--font-size-base);font-weight:var(--font-semibold);color:#fff;background:var(--primary-500);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md)}.checkout-btn:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.checkout-btn:active{transform:translateY(0)}@media(max-width:640px){.cart-container{max-width:100%}.cart-header,.cart-items,.cart-footer{padding:var(--space-4)}}.home-page{min-height:calc(100vh - 80px);background:linear-gradient(135deg,#667eea,#764ba2)}.hero-section{background:linear-gradient(135deg,#6366f1f2,#8b5cf6f2);padding:var(--space-16) var(--space-6);position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}.hero-content{max-width:1440px;margin:0 auto;text-align:center;position:relative;z-index:1;animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-title{font-size:clamp(2.5rem,5vw,4rem);font-weight:var(--font-extrabold);letter-spacing:-.03em;color:#fff;margin-bottom:var(--space-6);line-height:1.1;text-shadow:0 4px 12px rgba(0,0,0,.2)}.hero-description{font-size:clamp(1rem,2vw,1.25rem);font-weight:var(--font-regular);color:#fffffff2;max-width:600px;margin:0 auto var(--space-10);line-height:1.6}.hero-stats{display:flex;justify-content:center;gap:var(--space-8);flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.2);min-width:140px;transition:all var(--transition-base)}.stat-item:hover{background:#ffffff26;transform:translateY(-4px)}.stat-value{font-size:var(--font-size-3xl);font-weight:var(--font-extrabold);color:#fff;letter-spacing:-.02em}.stat-label{font-size:var(--font-size-sm);font-weight:var(--font-medium);color:#ffffffe6;text-transform:uppercase;letter-spacing:.05em}@media(max-width:768px){.hero-section{padding:var(--space-12) var(--space-4)}.hero-stats{gap:var(--space-4)}.stat-item{min-width:120px}}@media(max-width:480px){.hero-section{padding:var(--space-10) var(--space-4)}.hero-stats{flex-direction:column;align-items:stretch}.stat-item{min-width:auto}}.payments-page{min-height:calc(100vh - 80px);background:linear-gradient(135deg,#667eea,#764ba2);padding:var(--space-8) var(--space-6)}.payments-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 400px;gap:var(--space-8);animation:fadeIn .6s ease-out}.order-summary{background:var(--bg-primary);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-xl)}.section-title{font-size:var(--font-size-2xl);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:-.02em;margin-bottom:var(--space-6)}.order-items{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}.order-item{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-lg);transition:all var(--transition-base)}.order-item:hover{background:var(--bg-tertiary)}.order-item-image{width:80px;height:80px;border-radius:var(--radius-md);object-fit:cover;background:var(--neutral-100)}.order-item-details{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.order-item-name{font-size:var(--font-size-base);font-weight:var(--font-semibold);color:var(--text-primary);line-height:1.3}.order-item-quantity{font-size:var(--font-size-sm);color:var(--text-secondary)}.order-item-price{font-size:var(--font-size-lg);font-weight:var(--font-bold);color:var(--primary-600);margin-top:auto}.payment-form{background:var(--bg-primary);border-radius:var(--radius-2xl);padding:var(--space-8);box-shadow:var(--shadow-xl);position:sticky;top:calc(80px + var(--space-8))}.form-section{margin-bottom:var(--space-6)}.form-section-title{font-size:var(--font-size-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-4)}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-medium);color:var(--text-secondary);margin-bottom:var(--space-2)}.form-input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);font-weight:var(--font-regular);color:var(--text-primary);background:var(--bg-secondary);border:2px solid transparent;border-radius:var(--radius-lg);transition:all var(--transition-base)}.form-input::placeholder{color:var(--text-tertiary)}.form-input:hover{background:var(--bg-tertiary);border-color:var(--neutral-300)}.form-input:focus{outline:none;background:var(--bg-primary);border-color:var(--primary-500);box-shadow:0 0 0 3px #3b82f61a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.order-total{padding:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}.total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.total-row:last-child{margin-bottom:0;padding-top:var(--space-4);border-top:2px solid var(--neutral-300)}.total-label{font-size:var(--font-size-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.total-value{font-size:var(--font-size-base);font-weight:var(--font-semibold);color:var(--text-primary)}.total-row:last-child .total-label{font-size:var(--font-size-lg);font-weight:var(--font-bold);color:var(--text-primary)}.total-row:last-child .total-value{font-size:var(--font-size-2xl);font-weight:var(--font-bold);color:var(--primary-600)}.submit-btn{width:100%;padding:var(--space-4);font-size:var(--font-size-base);font-weight:var(--font-semibold);color:#fff;background:var(--primary-500);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md)}.submit-btn:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.submit-btn:active{transform:translateY(0)}.submit-btn:disabled{background:var(--neutral-300);color:var(--neutral-500);cursor:not-allowed;transform:none;box-shadow:none}.empty-cart{grid-column:1 / -1;text-align:center;padding:var(--space-16);background:var(--bg-primary);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl)}.empty-cart-icon{font-size:5rem;margin-bottom:var(--space-6);opacity:.5}.empty-cart h2{font-size:var(--font-size-3xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--space-4)}.empty-cart p{font-size:var(--font-size-lg);color:var(--text-secondary);margin-bottom:var(--space-8)}.back-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);font-size:var(--font-size-base);font-weight:var(--font-semibold);color:#fff;background:var(--primary-500);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);text-decoration:none}.back-btn:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--shadow-lg)}@media(max-width:1024px){.payments-container{grid-template-columns:1fr}.payment-form{position:static}}@media(max-width:768px){.payments-page{padding:var(--space-6) var(--space-4)}.order-summary,.payment-form{padding:var(--space-6)}.form-row{grid-template-columns:1fr}}@media(max-width:480px){.order-item{flex-direction:column;align-items:center;text-align:center}.order-item-image{width:100%;height:200px}}.toast{position:fixed;bottom:var(--space-6);right:var(--space-6);min-width:320px;max-width:480px;padding:var(--space-4) var(--space-5);background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--space-3);z-index:2000;animation:slideInUp .3s ease-out}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast.exit{animation:slideOutDown .3s ease-out forwards}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.toast-icon{font-size:var(--font-size-2xl);line-height:1;flex-shrink:0}.toast.success .toast-icon{filter:hue-rotate(120deg)}.toast.error .toast-icon{filter:hue-rotate(0deg)}.toast.info .toast-icon{filter:hue-rotate(200deg)}.toast-content{flex:1}.toast-message{font-size:var(--font-size-sm);font-weight:var(--font-medium);color:var(--text-primary);line-height:1.5}.toast-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--neutral-100);border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.toast-close:hover{background:var(--neutral-200);color:var(--text-primary)}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:var(--primary-500);border-radius:0 0 var(--radius-lg) var(--radius-lg);animation:progress 3s linear forwards}@keyframes progress{0%{width:100%}to{width:0%}}.toast.success .toast-progress{background:var(--success-500)}.toast.error .toast-progress{background:var(--error-500)}@media(max-width:640px){.toast{bottom:var(--space-4);right:var(--space-4);left:var(--space-4);min-width:auto}}