 @property --bento-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
            :root { --awea-ease: cubic-bezier(0.2, 0, 0, 1); }

            .awea-grid-row { display: flex; flex-wrap: wrap; margin: -15px; box-sizing: border-box; }
            .awea-grid-item { box-sizing: border-box; display: flex; padding: 15px; }

            .awea-grid-12 { width: 100%; } .awea-grid-6 { width: 50%; } 
            .awea-grid-4 { width: 33.333%; } .awea-grid-3 { width: 25%; }

            @media (max-width: 1024px) { 
                .awea-grid-tablet-12 { width: 100% !important; } 
                .awea-grid-tablet-6 { width: 50% !important; } 
            }
            @media (max-width: 767px) { 
                .awea-grid-mobile-12 { width: 100% !important; } 
            }

            .awea-card {
                position: relative; width: 100%; border-radius: 32px; 
                overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e2e8f0;
                transition: transform 0.6s var(--awea-ease), box-shadow 0.6s var(--awea-ease); z-index: 1;
            }

            .awea-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -12px rgba(0,0,0,0.12); }

            .awea-card::after {
                content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2.5px;
                background: conic-gradient(from var(--bento-angle), transparent 70%, #6366f1, transparent);
                -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: 0.4s; pointer-events: none;
            }
            .awea-card:hover::after { opacity: 1; animation: awea-spin 3s linear infinite; }
            @keyframes awea-spin { to { --bento-angle: 360deg; } }

            .awea-badge-sale {
                position: absolute; top: 15px; left: 15px; color: #fff;
                padding: 5px 12px; border-radius: 10px; font-size: 10px; font-weight: 900; z-index: 3;
            }

            .awea-image-container { height: 260px; overflow: hidden; background: #f8fafc; }
            .awea-image-container img { width: 100%; height: 100%; object-fit: cover; transition: 1.2s var(--awea-ease); }
            .awea-card:hover .awea-image-container img { transform: scale(1.1); }

            .awea-post-content { padding: 25px; flex-grow: 1; }
            .awea-brand { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
            .awea-product-name { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.3; }

            .awea-footer { padding: 20px 25px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #fcfdfe; }
            .awea-pricing { display: flex; flex-direction: column; }
            .awea-old-price { font-size: 13px; color: #94a3b8; text-decoration: line-through; }
            .awea-current-price { font-size: 18px; font-weight: 900; color: #0f172a; }

            .awea-buy-btn {
                background: #0f172a; color: #fff; width: 46px; height: 46px; border-radius: 14px;
                display: flex; align-items: center; justify-content: center; position: relative;
                transition: 0.4s var(--awea-ease); overflow: hidden; border: none; cursor: pointer; text-decoration: none;
            }
            .awea-buy-btn i { font-size: 16px; position: absolute; transition: 0.3s; }
            .awea-btn-label { opacity: 0; font-weight: 700; font-size: 12px; white-space: nowrap; transition: 0.3s; transform: translateX(10px); }
            
            .awea-card:hover .awea-buy-btn { width: 130px; }
            .awea-card:hover .awea-buy-btn i { position: relative; margin-right: 8px; }
            .awea-card:hover .awea-btn-label { opacity: 1; transform: translateX(0); }

            .awea-view-cart-btn { display: none; background: #10b981 !important; }
            .product-in-cart .awea-add-to-cart-btn { display: none; }
            .product-in-cart .awea-view-cart-btn { display: flex; }