@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#004080;--primary-light:#0059b3;--accent:#00d4ff;--background:#f7fafc;--surface:#fff;--text:#0d1a26;--text-muted:#52667a;--glass-bg:#ffffffb3;--glass-bg-dark:#0a192fd9;--glass-border:#ffffff4d;--glass-border-dark:#ffffff1a;--shadow-sm:0 2px 4px #0000000d;--shadow-md:0 4px 12px #0000001a;--shadow-lg:0 8px 24px #00000026;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:40px;color:var(--text);background-color:var(--background);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}h1,h2,h3,h4,.font-heading{font-family:Outfit,sans-serif}body{min-width:320px;min-height:100vh;margin:0}*{box-sizing:border-box}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border)}.glass-dark{background:var(--primary);border:1px solid #ffffff1a;box-shadow:0 10px 30px #0003}.island-header{border-radius:var(--radius-xl);z-index:1000;width:calc(100% - 40px);max-width:1200px;height:70px;box-shadow:var(--shadow-lg);justify-content:space-between;align-items:center;padding:0 30px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.btn{border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;letter-spacing:-.01em;border:1px solid #0000;outline:none;justify-content:center;align-items:center;gap:10px;height:52px;padding:12px 28px;font-size:15px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:var(--primary);color:#fff;border-color:#0000;box-shadow:0 10px 20px -5px #0040804d}.btn-primary:hover:not(:disabled){background:var(--primary-light);transform:translateY(-2px);box-shadow:0 15px 30px -5px #00408066}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:grayscale()}.btn-ghost{color:var(--text);background:#00000008;border-color:#0000000d}.btn-ghost:hover{background:#00000014;transform:translateY(-2px)}.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid #0000000d;flex-direction:column;height:100%;transition:all .3s;display:flex;overflow:hidden}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}.container{max-width:1200px;margin:0 auto;padding:0 30px}.section{padding:120px 0}.gap-blocks{flex-direction:column;gap:40px;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.6s forwards fadeIn}.flex{display:flex}.flex-1{flex:1}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}.gap-12{gap:48px}.relative{position:relative}.absolute{position:absolute}.z-1000{z-index:1000}.w-full{width:100%}.w-4{width:16px}.w-5{width:20px}.w-6{width:24px}.w-8{width:32px}.w-10{width:40px}.w-12{width:48px}.w-16{width:64px}.w-20{width:80px}.h-full{height:100%}.h-4{height:16px}.h-5{height:20px}.h-8{height:32px}.h-10{height:40px}.h-12{height:48px}.h-14{height:56px}.h-16{height:64px}.h-20{height:80px}.h-56{height:224px}.h-64{height:256px}.max-w-xl{max-width:36rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}.p-8{padding:32px}.p-10{padding:40px}.p-12{padding:48px}.pt-32{padding-top:128px}.pt-48{padding-top:192px}.pt-56{padding-top:224px}.pb-32{padding-bottom:128px}.pb-48{padding-bottom:192px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-8{padding-left:32px;padding-right:32px}.py-1{padding-top:4px;padding-bottom:4px}.py-4{padding-top:16px;padding-bottom:16px}.py-16{padding-top:64px;padding-bottom:64px}.py-20{padding-top:80px;padding-bottom:80px}.py-24{padding-top:96px;padding-bottom:96px}.m-0{margin:0}.mt-12{margin-top:48px}.mt-16{margin-top:64px}.mt-auto{margin-top:auto}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-12{margin-bottom:48px}.mb-24{margin-bottom:96px}.mb-32{margin-bottom:128px}.mx-auto{margin-left:auto;margin-right:auto}.bg-primary{background-color:var(--primary)}.bg-white{background-color:#fff}.bg-background{background-color:var(--background)}.bg-accent{background-color:var(--accent)}.bg-accent-10{background-color:#00d4ff1a}.bg-accent-20{background-color:#00d4ff33}.bg-primary-20{background-color:#00408033}.bg-primary-40{background-color:#00408066}.bg-primary-80{background-color:#004080cc}.bg-white-10{background-color:#ffffff1a}.text-white{color:#fff}.text-primary{color:var(--primary)}.text-accent{color:var(--accent)}.text-text-muted{color:var(--text-muted)}.text-red-500{color:#ef4444}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-6xl{font-size:3.75rem}.text-lg{font-size:1.125rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.uppercase{text-transform:uppercase}.text-center{text-align:center}.rounded-2xl{border-radius:16px}.rounded-3xl{border-radius:24px}.rounded-32{border-radius:32px}.rounded-40{border-radius:40px}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.border{border:1px solid #0000001a}.border-2{border:2px solid #0000001a}.border-transparent{border-color:#0000}.border-white-10{border-color:#ffffff1a}.border-accent-30{border-color:#00ffff4d}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (width>=640px){.sm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=768px){.md-flex-row{flex-direction:row}.md-flex-col{flex-direction:column}.md-w-1-2{width:50%}.md-w-2-5{width:40%}.md-w-3-5{width:60%}.md-h-full{height:100%}.md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1024px){.lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.sticky{position:sticky}.top-32{top:128px}.fixed{position:fixed}.inset-0{inset:0}.z-2000{z-index:2000}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.opacity-0{opacity:0}.hover-opacity-10:hover,.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.translate-x-1{transform:translate(4px)}.-translate-y-1{transform:translateY(-4px)}.line-clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.transition-all{transition:all .2s}.transition-transform{transition:transform .3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.group:hover .group-hover-scale-105{transform:scale(1.05)}.group:hover .group-hover-scale-110{transform:scale(1.1)}.cursor-pointer{cursor:pointer}.block{display:block}.hidden{display:none}.drawer-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;background:#0006;position:fixed;inset:0}.drawer{z-index:2001;background:#fff;flex-direction:column;width:100%;max-width:450px;height:100vh;display:flex;position:fixed;top:0;right:0;box-shadow:-10px 0 30px #0000001a}.drawer-header{border-bottom:1px solid #0000000d;justify-content:space-between;align-items:center;padding:30px;display:flex}.drawer-content{flex:1;padding:30px;overflow-y:auto}.drawer-footer,.cart-footer{background:var(--background);border-top:1px solid #0000000d;padding:30px}.cart-item{gap:16px;margin-bottom:24px;display:flex}.cart-item-img{object-fit:cover;border-radius:12px;width:80px;height:80px}.cart-badge{background:var(--primary);color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:800;line-height:1;display:flex;position:absolute;top:-5px;right:-5px;box-shadow:0 2px 8px #0003}.product-card-footer{justify-content:space-between;align-items:center;width:100%;margin-top:auto;display:flex}.add-cart-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 4px 12px #0040804d}.add-cart-btn:hover{background:var(--accent);color:var(--primary);transform:scale(1.1)}.add-cart-btn:active{transform:scale(.9)}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5000;background:#000000b3;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-container{background:#fff;border-radius:40px;flex-direction:column;width:100%;max-width:900px;height:auto;min-height:500px;max-height:90vh;display:flex;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}@media (width>=768px){.modal-container{flex-direction:row;height:600px}}.modal-image-side{width:100%;height:250px;position:relative}@media (width>=768px){.modal-image-side{width:40%;height:100%}}.modal-content-side{flex-direction:column;flex:1;width:100%;padding:40px;display:flex}@media (width>=768px){.modal-content-side{width:60%;padding:60px}}.quantity-selector{background:var(--background);border:1px solid #00000008;border-radius:14px;align-items:center;padding:4px;display:flex}.quantity-btn{width:32px;height:32px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;transition:all .2s;display:flex}.quantity-btn:hover{box-shadow:var(--shadow-sm);color:var(--primary);background:#fff;transform:translateY(-1px)}.quantity-btn:active{transform:translateY(0)}.quantity-value{text-align:center;width:36px;font-family:Outfit,sans-serif;font-size:.875rem;font-weight:700}.delete-btn{color:#ef4444;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:0 0;border:none;border-radius:12px;align-items:center;gap:6px;padding:8px 12px;font-size:.75rem;font-weight:700;transition:all .2s;display:flex}.delete-btn:hover{background:#fef2f2;transform:scale(1.05)}.delete-btn:active{transform:scale(.95)}.image-upload-area{cursor:pointer;background:var(--background);border:2px dashed #0000001a;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:160px;margin-bottom:8px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.image-upload-area:hover{border-color:var(--primary);box-shadow:var(--shadow-md);background:#fff}.image-preview{object-fit:cover;width:100%;height:100%;animation:.5s fadeIn;display:block}img{max-width:100%;display:block}.card img,.modal-image-side img,.cart-item-img{background:#f8fafc;object-fit:contain!important}.checkout-card{background:#fff;border:1px solid #0000000d;border-radius:40px;margin-bottom:40px;padding:40px;box-shadow:0 4px 20px #00000005}.checkout-input-wrapper{align-items:center;width:100%;max-width:400px;display:flex;position:relative}.checkout-input-wrapper.wide{max-width:100%}.checkout-input-icon{pointer-events:none;color:var(--primary);opacity:.3;transition:opacity .2s;position:absolute;left:20px}.checkout-input-wrapper:focus-within .checkout-input-icon{opacity:1}.checkout-input{background:var(--background);border:2px solid #0000;border-radius:18px;outline:none;width:100%;padding:18px 20px 18px 55px;font-size:16px;font-weight:500;transition:all .2s}.checkout-input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px #0040801a}.checkout-textarea{resize:none;min-height:120px;padding-top:20px}
