:root{--primary: #2563eb;--primary-dark: #1d4ed8;--secondary: #0f172a;--accent: #f59e0b;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--info: #3b82f6;--light: #f8fafc;--dark: #0f172a;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--white: #ffffff;--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);--shadow: 0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06);--shadow-md: 0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.06);--shadow-lg: 0 10px 15px rgba(0,0,0,0.1),0 4px 6px rgba(0,0,0,0.05);--shadow-xl: 0 20px 25px rgba(0,0,0,0.1),0 10px 10px rgba(0,0,0,0.04);--radius-sm: 0.375rem;--radius: 0.5rem;--radius-md: 0.75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--transition: 200ms ease;} *,*::before,*::after{box-sizing: border-box;margin: 0;padding: 0;} img{} html{font-size: 16px;-webkit-text-size-adjust: 100%;} body{font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height: 1.6;color: var(--gray-800);background: var(--white);min-height: 100vh;display: flex;flex-direction: column;overflow-x: hidden;} main{flex: 1;} .container{width: 100%;max-width: 1280px;margin: 0 auto;padding: 0 1rem;} @media(min-width:640px){.container{padding: 0 1.5rem;}} @media(min-width:1024px){.container{padding: 0 2rem;}} .header{background: var(--white);border-bottom: 1px solid var(--gray-200);position: sticky;top: 0;z-index: 1000;box-shadow: var(--shadow-sm);} .header-top{background: var(--secondary);color: var(--white);padding: 0.5rem 0;font-size: 0.8rem;} .header-top .container{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 0.5rem 1rem;text-align: center;} .header-top a{color: var(--white);text-decoration: none;opacity: 0.85;transition: opacity var(--transition);} .header-top a:hover{opacity: 1;} .header-main{padding: 0.75rem 0;} .header-main .container{display: flex;align-items: center;gap: 1rem;flex-wrap: wrap;} .header-zone{flex: 1;display: flex;align-items: center;gap: 0.75rem;} .header-zone-left{justify-content: flex-start;} .header-zone-center{justify-content: center;} .header-zone-right{justify-content: flex-end;gap: 1rem;} .header-zone-right > a{width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;} .logo{font-size: 1.6rem;font-weight: 800;color: var(--primary);text-decoration: none;letter-spacing: -0.5px;white-space: nowrap;} .logo span{color: var(--secondary);} .search-bar{flex: 1;min-width: 200px;position: relative;max-width: 500px;} .search-bar input{width: 100%;padding: 0.7rem 1rem 0.7rem 2.5rem;border: 2px solid var(--gray-200);border-radius: var(--radius-xl);font-size: 0.9rem;transition: all var(--transition);background: var(--gray-50);} .search-bar input:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px rgba(37,99,235,0.1);background: var(--white);} .search-bar .search-icon{position: absolute;left: 0.9rem;top: 50%;transform: translateY(-50%);color: var(--gray-400);pointer-events: none;} .search-results-dropdown{position: absolute;top: 100%;left: 0;right: 0;background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius);box-shadow: var(--shadow-lg);z-index: 100;display: none;max-height: 350px;overflow-y: auto;margin-top: 4px;} .search-results-dropdown.active{display: block;} .search-result-item{display: flex;align-items: center;gap: 0.75rem;padding: 0.75rem 1rem;cursor: pointer;transition: background var(--transition);border-bottom: 1px solid var(--gray-100);} .search-result-item:hover{background: var(--gray-50);} .search-result-item img{width: 40px;height: 40px;object-fit: cover;border-radius: var(--radius-sm);} .search-result-item .info{flex: 1;min-width: 0;} .search-result-item .name{font-weight: 600;font-size: 0.85rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .search-result-item .price{color: var(--primary);font-weight: 700;font-size: 0.8rem;} .header-actions{display: flex;align-items: center;gap: 1rem;} .header-actions a,.header-actions button{position: relative;background: none;border: none;cursor: pointer;color: var(--gray-700);font-size: 1.3rem;padding: 0.4rem;border-radius: var(--radius);transition: all var(--transition);text-decoration: none;display: flex;align-items: center;gap: 0.3rem;white-space: nowrap;} .header-actions a:hover,.header-actions button:hover{color: var(--primary);background: var(--gray-100);} .badge-count{position: absolute;top: -4px;right: -6px;background: var(--danger);color: var(--white);font-size: 0.65rem;width: 18px;height: 18px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;} .nav{background: var(--white);border-top: 1px solid var(--gray-100);padding: 0;position: relative;} .nav .container{display: flex;align-items: center;gap: 0.25rem;overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none;} .nav .container::-webkit-scrollbar{display: none;} .nav a{display: block;padding: 0.7rem 1rem;color: var(--gray-700);text-decoration: none;font-weight: 500;font-size: 0.85rem;white-space: nowrap;border-bottom: 2px solid transparent;transition: all var(--transition);} .nav a:hover,.nav a.active{color: var(--primary);border-bottom-color: var(--primary);} .mega-menu-trigger{position: relative;} .mega-menu{position: absolute;top: 100%;left: 0;background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius);box-shadow: var(--shadow-xl);padding: 1.5rem;display: none;z-index: 999;min-width: 600px;grid-template-columns: repeat(4,1fr);gap: 1.5rem;} .mega-menu-trigger:hover .mega-menu{display: grid;} .mega-menu h4{font-size: 0.8rem;text-transform: uppercase;letter-spacing: 0.5px;color: var(--gray-500);margin-bottom: 0.5rem;} .mega-menu a{display: block;padding: 0.3rem 0;font-size: 0.82rem;border: none;color: var(--gray-700);} .mega-menu a:hover{color: var(--primary);border: none;} .mobile-nav-toggle{display: none;background: none;border: none;font-size: 1.5rem;cursor: pointer;color: var(--gray-700);padding: 0.4rem;} @media(max-width:1023px){.mobile-nav-toggle{display: block;} .nav .container{display: none;flex-direction: column;position: absolute;top: 100%;left: 0;right: 0;background: var(--white);border-bottom: 2px solid var(--gray-200);box-shadow: var(--shadow-lg);padding: 0.5rem 1rem;z-index: 998;max-height: calc(100vh - 60px);overflow-y: auto;} .nav.open .container{display: flex;} .mega-menu-trigger:hover .mega-menu{display: none;} .mega-menu{position: static;min-width: auto;box-shadow: none;padding: 0.5rem 1rem;grid-template-columns: 1fr 1fr;} .header-actions .label{display: none;} .header-main .container{display: grid;grid-template-columns: 1fr auto 1fr;grid-template-areas: "toggle logo ." "search search search" "actions actions actions";row-gap: 0;align-items: center;} .mobile-nav-toggle{grid-area: toggle;justify-self: start;line-height: 1;} .header-zone-left{grid-area: logo;justify-content: center;} .header-zone-center{grid-area: search;width: 100%;margin-top: 0.6rem;} .header-zone-right{grid-area: actions;justify-content: center;gap: 1.25rem;margin-top: 0.6rem;} .search-bar{width: 100%;max-width: 100%;margin: 0 auto;} .header-actions{justify-content: center;gap: 1.25rem;} .header-actions a,.header-zone-right > a{width: 44px;height: 44px;justify-content: center;box-sizing: border-box;} .header-top .container{gap: 0.35rem 0.75rem;}} @media(max-width:639px){.header-main .container{column-gap: 0.5rem;} .header-zone-center,.header-zone-right{margin-top: 0.4rem;} .header-zone-left{min-width: 0;} .logo{font-size: 1.3rem;max-width: 100%;overflow: hidden;text-overflow: ellipsis;} .header-top{padding: 0.4rem 0;font-size: 0.75rem;} .header-top .container{gap: 0.25rem 0.5rem;} .header-top .container>span{max-width: 100%;line-height: 1.5;}} .hero{background: linear-gradient(135deg,#0f172a 0%,#1e3a5f 40%,#2563eb 100%);color: var(--white);padding: 3rem 0;position: relative;overflow: hidden;} .hero::after{content: '';position: absolute;right: -5%;top: -20%;width: 50%;height: 140%;background: radial-gradient(ellipse,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events: none;} .hero .container{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;align-items: center;position: relative;z-index: 1;} .hero h1{font-size: 2.8rem;font-weight: 800;line-height: 1.15;margin-bottom: 1rem;letter-spacing: -1px;} .hero p{font-size: 1.1rem;opacity: 0.9;margin-bottom: 1.5rem;max-width: 450px;} .hero .btn{display: inline-block;padding: 0.85rem 2rem;background: var(--accent);color: var(--secondary);font-weight: 700;border-radius: var(--radius-xl);text-decoration: none;transition: all var(--transition);font-size: 1rem;} .hero .btn:hover{transform: translateY(-2px);box-shadow: 0 8px 25px rgba(245,158,11,0.4);} .hero-image{text-align: center;} .hero-image img{max-width: 100%;height: auto;border-radius: var(--radius-lg);filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));} @media(max-width:768px){.hero .container{grid-template-columns: 1fr;text-align: center;} .hero h1{font-size: 2rem;} .hero p{max-width: 100%;margin-left: auto;margin-right: auto;} .hero .btn{margin-left: auto;margin-right: auto;} .hero-image{display: block;margin-top: 1.5rem;} .hero-image img{max-width: 100%;height: auto;margin: 0 auto;}} .section{padding: 3rem 0;} .section-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1.5rem;flex-wrap: wrap;gap: 0.5rem;} .section-title{font-size: 1.5rem;font-weight: 700;color: var(--secondary);letter-spacing: -0.3px;} .section-link{color: var(--primary);text-decoration: none;font-weight: 600;font-size: 0.9rem;} .section-link:hover{text-decoration: underline;} .product-grid{display: grid;grid-template-columns: repeat(4,1fr);gap: 1.25rem;} @media(max-width:1023px){.product-grid{grid-template-columns: repeat(3,1fr);}} @media(max-width:639px){.product-grid{grid-template-columns: repeat(2,1fr);gap: 0.75rem;}} @media(max-width:400px){.product-grid{grid-template-columns: 1fr 1fr;gap: 0.5rem;}} .product-card{background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-md);overflow: hidden;transition: all var(--transition);position: relative;display: flex;flex-direction: column;} .product-card:hover{box-shadow: var(--shadow-lg);transform: translateY(-3px);border-color: var(--gray-300);} .product-card .badge{position: absolute;top: 0.75rem;left: 0.75rem;z-index: 2;padding: 0.25rem 0.6rem;border-radius: var(--radius-sm);font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.5px;} .badge-sale{background: var(--danger);color: var(--white);} .badge-new{background: var(--success);color: var(--white);} .badge-hot{background: var(--accent);color: var(--secondary);} .product-card .wishlist-btn{position: absolute;top: 0.75rem;right: 0.75rem;z-index: 2;background: var(--white);border: 1px solid var(--gray-200);border-radius: 50%;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all var(--transition);font-size: 0.9rem;color: var(--gray-500);} .product-card .wishlist-btn:hover,.product-card .wishlist-btn.active{color: var(--danger);border-color: var(--danger);} .product-card .image-wrapper{position: relative;aspect-ratio: 1;overflow: hidden;background: var(--gray-50);} .product-card .product-image-link{display: block;width: 100%;height: 100%;} .product-card .product-image{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain;padding: 0.7rem;transition: opacity 0.35s ease,transform 0.45s ease;will-change: opacity,transform;} .product-card .product-image-secondary{opacity: 0;transform: scale(1.025);} @media (hover: hover){.product-card:hover .product-image-primary{opacity: 0;} .product-card:hover .product-image-secondary{opacity: 1;transform: scale(1.05);}} .product-card:hover .product-image:not(.product-image-secondary){transform: scale(1.06);} .product-card .card-body{padding: 0.85rem;flex: 1;display: flex;flex-direction: column;gap: 0.4rem;} .product-card .category{font-size: 0.7rem;color: var(--gray-500);text-transform: uppercase;letter-spacing: 0.5px;} .product-card .name{font-weight: 600;font-size: 0.9rem;line-height: 1.3;} .product-card .name a{color: var(--gray-800);text-decoration: none;} .product-card .name a:hover{color: var(--primary);} .product-card .rating{display: flex;align-items: center;gap: 0.2rem;font-size: 0.75rem;color: var(--accent);} .product-card .rating span{color: var(--gray-500);} .product-card .price{font-weight: 700;font-size: 1.1rem;color: var(--primary);} .product-card .price .old{text-decoration: line-through;color: var(--gray-400);font-weight: 400;font-size: 0.8rem;margin-left: 0.4rem;} .product-card .add-to-cart{width: 100%;padding: 0.6rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius);cursor: pointer;font-weight: 600;font-size: 0.85rem;transition: all var(--transition);margin-top: auto;} .product-card .add-to-cart:hover{background: var(--primary-dark);} .category-grid{display: grid;grid-template-columns: repeat(6,1fr);gap: 1rem;} @media(max-width:1023px){.category-grid{grid-template-columns: repeat(3,1fr);}} @media(max-width:480px){.category-grid{grid-template-columns: repeat(2,1fr);}} .category-card{text-align: center;text-decoration: none;color: var(--gray-700);transition: all var(--transition);padding: 1rem;border-radius: var(--radius-md);background: var(--gray-50);border: 1px solid transparent;} .category-card:hover{border-color: var(--primary);color: var(--primary);box-shadow: var(--shadow-md);} .category-card .icon{font-size: 2.5rem;margin-bottom: 0.5rem;} .category-card .name{font-weight: 600;font-size: 0.85rem;} .testimonial-grid{display: grid;grid-template-columns: repeat(3,1fr);gap: 1.5rem;} @media(max-width:768px){.testimonial-grid{grid-template-columns: 1fr;}} .testimonial-card{background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-md);padding: 1.5rem;text-align: center;} .testimonial-card .avatar{width: 60px;height: 60px;border-radius: 50%;margin: 0 auto 0.75rem;background: var(--gray-200);display: flex;align-items: center;justify-content: center;font-size: 1.5rem;} .testimonial-card .quote{font-style: italic;color: var(--gray-600);margin-bottom: 0.75rem;} .testimonial-card .author{font-weight: 700;color: var(--secondary);} .newsletter{background: var(--primary);color: var(--white);padding: 3rem 0;text-align: center;} .newsletter h3{font-size: 1.5rem;margin-bottom: 0.5rem;} .newsletter p{opacity: 0.9;margin-bottom: 1.5rem;} .newsletter-form{display: flex;max-width: 450px;margin: 0 auto;gap: 0;} .newsletter-form input{flex: 1;padding: 0.85rem 1rem;border: none;border-radius: var(--radius-xl) 0 0 var(--radius-xl);font-size: 0.95rem;} .newsletter-form button{padding: 0.85rem 1.5rem;background: var(--accent);color: var(--secondary);border: none;border-radius: 0 var(--radius-xl) var(--radius-xl) 0;cursor: pointer;font-weight: 700;font-size: 0.95rem;transition: all var(--transition);} .newsletter-form button:hover{background: #e8930c;} .footer{background: var(--secondary);color: var(--gray-300);padding: 3rem 0 1.5rem;margin-top: auto;} .footer-grid{display: grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap: 2rem;margin-bottom: 2rem;} @media(max-width:768px){.footer-grid{grid-template-columns: 1fr 1fr;}} @media(max-width:480px){.footer-grid{grid-template-columns: 1fr;}} .footer h4{color: var(--white);margin-bottom: 1rem;font-size: 1rem;font-weight: 700;} .footer a{color: var(--gray-400);text-decoration: none;display: block;padding: 0.25rem 0;font-size: 0.85rem;transition: color var(--transition);} .footer a:hover{color: var(--white);} .site-social-links{display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 1.25rem 0;border-top: 1px solid var(--gray-700);} .site-social-links-title{color: var(--white);font-size: 0.9rem;font-weight: 700;} .site-social-links-list{display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 0.5rem;} .footer .site-social-links-list a{display: inline-flex;align-items: center;padding: 0.4rem 0.7rem;border: 1px solid var(--gray-600);border-radius: 999px;font-size: 0.78rem;} .footer .site-social-links-list a:hover{border-color: var(--accent);color: var(--white);} @media(max-width:480px){.site-social-links{align-items: flex-start;flex-direction: column;} .site-social-links-list{justify-content: flex-start;}} .footer-bottom{border-top: 1px solid var(--gray-700);padding-top: 1.5rem;text-align: center;font-size: 0.8rem;color: var(--gray-500);} .toast-container{position: fixed;top: 1rem;right: 1rem;z-index: 9999;display: flex;flex-direction: column;gap: 0.5rem;} .toast{padding: 0.85rem 1.25rem;border-radius: var(--radius);color: var(--white);font-weight: 500;font-size: 0.85rem;animation: slideIn 0.3s ease;box-shadow: var(--shadow-lg);max-width: 380px;} .toast.success{background: var(--success);} .toast.error{background: var(--danger);} .toast.info{background: var(--info);} @keyframes slideIn{from{transform: translateX(100%);opacity: 0;} to{transform: translateX(0);opacity: 1;}} .modal-overlay{position: fixed;inset: 0;background: rgba(0,0,0,0.6);z-index: 2000;display: flex;align-items: center;justify-content: center;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;} .modal-overlay.active{opacity: 1;pointer-events: auto;} .modal{background: var(--white);border-radius: var(--radius-lg);max-width: 800px;width: 95%;max-height: 85vh;overflow-y: auto;position: relative;padding: 1.5rem;} .modal-close{position: absolute;top: 0.75rem;right: 0.75rem;background: none;border: none;font-size: 1.5rem;cursor: pointer;color: var(--gray-500);z-index: 1;} .breadcrumb{padding: 0.75rem 0;font-size: 0.8rem;color: var(--gray-500);} .breadcrumb a{color: var(--gray-600);text-decoration: none;} .breadcrumb a:hover{color: var(--primary);} .breadcrumb span{margin: 0 0.4rem;} .pagination{display: flex;justify-content: center;gap: 0.3rem;margin-top: 2rem;flex-wrap: wrap;} .pagination a,.pagination span{padding: 0.5rem 0.85rem;border: 1px solid var(--gray-200);border-radius: var(--radius-sm);text-decoration: none;color: var(--gray-700);font-size: 0.85rem;transition: all var(--transition);} .pagination a:hover,.pagination .active{background: var(--primary);color: var(--white);border-color: var(--primary);} .pagination .disabled{opacity: 0.4;pointer-events: none;} .skeleton{background: linear-gradient(90deg,#e5e7eb 25%,#f3f4f6 50%,#e5e7eb 75%);background-size: 200% 100%;animation: shimmer 1.5s infinite;border-radius: var(--radius-sm);} @keyframes shimmer{0%{background-position: 200% 0;} 100%{background-position: -200% 0;}} .text-center{text-align: center;} .mt-1{margin-top: 1rem;} .mt-2{margin-top: 2rem;} .mb-1{margin-bottom: 1rem;} .hidden{display: none !important;} @media(prefers-reduced-motion:reduce){*{animation-duration: 0.01ms !important;transition-duration: 0.01ms !important;}} .content-public-page{padding: 3.5rem 0 4rem;background: var(--gray-50);min-height: 50vh;} .content-public-header{max-width: 700px;margin: 0 auto 2.25rem;text-align: center;} .content-public-header h1,.content-article-header h1{color: var(--secondary);font-size: clamp(2rem,5vw,3.25rem);line-height: 1.12;letter-spacing: -0.03em;margin: 0.3rem 0 0.75rem;} .content-public-header>p:last-child{color: var(--gray-600);font-size: 1.06rem;margin: 0;} .content-kicker{color: var(--primary);font-weight: 700;text-transform: uppercase;letter-spacing: 0.09em;font-size: 0.75rem;margin: 0;} .blog-grid{display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 1.5rem;} .blog-card{overflow: hidden;border: 1px solid var(--gray-200);border-radius: var(--radius-lg);background: var(--white);box-shadow: var(--shadow-sm);display: flex;flex-direction: column;} .blog-card-image{display: block;aspect-ratio: 16 / 9;overflow: hidden;background: var(--gray-100);} .blog-card-image img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.25s ease;} .blog-card:hover .blog-card-image img{transform: scale(1.035);} .blog-card-body{padding: 1.25rem;display: flex;flex: 1;flex-direction: column;} .blog-card h2{font-size: 1.18rem;line-height: 1.35;margin: 0.3rem 0 0.7rem;} .blog-card h2 a{color: var(--secondary);text-decoration: none;} .blog-card h2 a:hover,.blog-read-more:hover{color: var(--primary);} .blog-card-body>p:not(.blog-meta){color: var(--gray-600);font-size: 0.9rem;line-height: 1.6;margin: 0 0 1rem;} .blog-meta{color: var(--gray-500);font-size: 0.82rem;margin: 0;} .blog-meta span{padding: 0 0.3rem;} .blog-read-more{color: var(--primary);text-decoration: none;font-size: 0.88rem;font-weight: 700;margin-top: auto;} .content-empty{text-align: center;background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-lg);padding: 3rem 1.5rem;color: var(--gray-600);} .content-back{display: inline-block;color: var(--gray-600);text-decoration: none;font-size: 0.9rem;margin-bottom: 1.25rem;} .content-back:hover{color: var(--primary);} .content-article{max-width: 860px;} .content-article-header{max-width: 780px;margin-bottom: 1.75rem;} .content-lead{color: var(--gray-600);font-size: 1.15rem;line-height: 1.65;margin: 0;} .content-featured-image{width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover;display: block;border-radius: var(--radius-lg);border: 1px solid var(--gray-200);margin-bottom: 2rem;} .rich-content{color: var(--gray-700);font-size: 1.02rem;line-height: 1.78;} .rich-content>*:first-child{margin-top: 0;} .rich-content h2,.rich-content h3,.rich-content h4{color: var(--secondary);line-height: 1.25;margin: 2rem 0 0.75rem;} .rich-content h2{font-size: 1.65rem;} .rich-content h3{font-size: 1.3rem;} .rich-content p,.rich-content ul,.rich-content ol,.rich-content blockquote{margin: 0 0 1.1rem;} .rich-content ul,.rich-content ol{padding-left: 1.4rem;} .rich-content a{color: var(--primary);} .rich-content blockquote{border-left: 4px solid var(--primary);margin-left: 0;padding: 0.8rem 1rem;background: var(--white);color: var(--gray-600);} .rich-content img{max-width: 100%;height: auto;border-radius: var(--radius);} .rich-content table{max-width: 100%;border-collapse: collapse;margin-bottom: 1.2rem;} .rich-content th,.rich-content td{border: 1px solid var(--gray-200);padding: 0.55rem 0.7rem;} @media (max-width: 900px){.blog-grid{grid-template-columns: repeat(2,minmax(0,1fr));}} @media (max-width: 600px){.content-public-page{padding: 2.25rem 0 3rem;} .blog-grid{grid-template-columns: 1fr;} .content-public-header h1,.content-article-header h1{font-size: 2rem;} .rich-content{font-size: 1rem;}} .section-alt{background: var(--gray-50);} .shop-page{background: #f8fafc;} .shop-layout{display: grid;grid-template-columns: 248px minmax(0,1fr);align-items: start;gap: 1.5rem;padding-top: 1.75rem;padding-bottom: 2.75rem;} .shop-sidebar,.shop-main{min-width: 0;} .filter-panel,.shop-header,.active-filters,.shop-empty-state{background: var(--white);border: 1px solid #e7edf5;border-radius: 10px;box-shadow: 0 1px 2px rgba(15,23,42,.025);} .filter-panel{padding: 1.1rem;} .filter-heading{display: flex;align-items: baseline;justify-content: space-between;gap: .75rem;padding-bottom: .9rem;} .filter-heading h2{color: #172033;font-size: .93rem;font-weight: 750;letter-spacing: -.01em;} .filter-heading a,.filter-actions a{color: #2563eb;font-size: .73rem;font-weight: 700;text-decoration: none;} .filter-heading a:hover,.filter-actions a:hover,.clear-filter-link:hover{text-decoration: underline;} .filter-group{min-width: 0;border: 0;border-top: 1px solid #edf1f6;padding: .9rem 0 0;margin: 0 0 .9rem;} .filter-group legend{width: 100%;padding: 0;margin: 0 0 .68rem;color: #1e293b;font-size: .78rem;font-weight: 750;} .filter-group legend::after{content: '\2303';float: right;color: #64748b;font-size: .7rem;font-weight: 500;} .filter-check{display: flex;align-items: center;gap: .55rem;min-height: 24px;color: #64748b;font-size: .75rem;cursor: pointer;} .filter-check + .filter-check{margin-top: .28rem;} .filter-check input{width: 14px;height: 14px;accent-color: #2563eb;cursor: pointer;} .filter-options-scroll{max-height: 150px;overflow: auto;padding-right: .25rem;} .price-slider{position: relative;height: 18px;margin: .05rem .05rem .15rem;} .price-slider-track,.price-slider-fill{position: absolute;top: 7px;height: 4px;border-radius: 99px;} .price-slider-track{right: 0;left: 0;background: #d9e2ee;} .price-slider-fill{right: 0;left: 0;background: #1463e8;} .price-range-input{position: absolute;z-index: 2;top: 0;left: -2px;width: calc(100% + 4px);height: 18px;margin: 0;padding: 0;appearance: none;-webkit-appearance: none;pointer-events: none;background: transparent;touch-action: none;}.price-range-min{z-index: 3;} .price-range-input::-webkit-slider-runnable-track{height: 4px;background: transparent;}.price-range-input::-moz-range-track{height: 4px;background: transparent;} .price-range-input::-webkit-slider-thumb{width: 11px;height: 11px;margin-top: -3.5px;border: 2px solid #fff;border-radius: 50%;appearance: none;-webkit-appearance: none;background: #1463e8;box-shadow: 0 0 0 1px #1463e8;cursor: grab;pointer-events: auto;}.price-range-input::-moz-range-thumb{width: 9px;height: 9px;border: 2px solid #fff;border-radius: 50%;background: #1463e8;box-shadow: 0 0 0 1px #1463e8;cursor: grab;pointer-events: auto;} .price-slider-values{display: flex;justify-content: space-between;margin: .05rem 0 .55rem;color: #64748b;font-size: .68rem;} .price-inputs{display: grid;grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;align-items: center;gap: .35rem;color: #94a3b8;} .price-inputs input{width: 100%;min-width: 0;padding: .48rem .45rem;border: 1px solid #dbe3ed;border-radius: 5px;outline: none;color: #334155;font: inherit;font-size: .73rem;} .price-inputs input:focus,.shop-sort select:focus{border-color: #2563eb;box-shadow: 0 0 0 3px rgba(37,99,235,.10);} .price-apply{min-height: 30px;padding: .42rem .62rem;border: 0;border-radius: 5px;background: #1458e6;color: #fff;font: inherit;font-size: .68rem;font-weight: 700;cursor: pointer;}.price-apply:hover{background: #0d47c6;} .rating-filter-group{margin-bottom: .8rem;}.rating-filter-row{display: flex;align-items: center;gap: .3rem;min-height: 22px;color: #64748b;font-size: .72rem;cursor: pointer;}.rating-filter-row + .rating-filter-row{margin-top: .22rem;}.rating-filter-row input{width: 12px;height: 12px;margin: 0 .05rem 0 0;appearance: none;border: 1.5px solid #f6b51c;border-radius: 50%;background: #fff;cursor: pointer;}.rating-filter-row input:checked{border-color: #f6b51c;background: #f6b51c;box-shadow: inset 0 0 0 3px #fff;}.rating-filter-row:hover{color: #334155;}.rating-stars{color: #f6b51c;letter-spacing: .02em;font-size: .72rem;line-height: 1;}.filter-count{color: #64748b;font-size: .68rem;}.rating-filter-row .filter-count{margin-left: .05rem;} .filter-stock-group{margin-bottom: 0;} .filter-actions{display: flex;align-items: center;gap: .8rem;border-top: 1px solid #edf1f6;padding-top: .9rem;} .filter-apply{display: inline-flex;align-items: center;justify-content: center;min-height: 31px;padding: .45rem .85rem;border: 0;border-radius: 5px;background: #1458e6;color: #fff;font: inherit;font-size: .72rem;font-weight: 700;text-decoration: none;cursor: pointer;transition: background .18s ease,transform .18s ease;} .filter-apply:hover{background: #0d47c6;transform: translateY(-1px);} .shop-filters-toggle{display: none;width: 100%;padding: .7rem .9rem;border: 1px solid #dbe3ed;border-radius: 8px;background: var(--white);color: #1e293b;font: inherit;font-size: .82rem;font-weight: 700;cursor: pointer;margin-bottom: .8rem;text-align: left;} .shop-header{display: flex;justify-content: space-between;align-items: end;gap: 1rem;padding: 1.05rem 1.2rem;margin-bottom: .8rem;} .breadcrumbs{display: flex;align-items: center;gap: .4rem;margin-bottom: .35rem;color: #94a3b8;font-size: .7rem;} .breadcrumbs a{color: #64748b;text-decoration: none;}.breadcrumbs a:hover{color: #2563eb;} .shop-header h1{margin: 0;color: #172033;font-size: 1.55rem;line-height: 1.15;letter-spacing: -.04em;} .shop-header p{margin: .25rem 0 0;color: #64748b;font-size: .76rem;} .shop-sort{display: flex;align-items: center;gap: .45rem;color: #64748b;font-size: .72rem;white-space: nowrap;} .shop-sort select{min-height: 33px;padding: .45rem 1.8rem .45rem .6rem;border: 1px solid #dbe3ed;border-radius: 5px;background-color: #fff;color: #334155;font: inherit;font-size: .72rem;outline: none;} .active-filters{display: flex;flex-wrap: wrap;align-items: center;gap: .42rem;padding: .65rem .85rem;margin-bottom: .8rem;color: #64748b;font-size: .72rem;} .filter-tag{display: inline-flex;align-items: center;gap: .28rem;padding: .22rem .45rem;border-radius: 4px;background: #eff6ff;color: #1d4ed8;text-decoration: none;}.filter-tag span{font-size: .95rem;line-height: .8;}.clear-filter-link{margin-left: auto;color: #2563eb;font-weight: 700;text-decoration: none;} .shop-product-grid{grid-template-columns: repeat(4,minmax(0,1fr));gap: .8rem;} .shop-product-grid .product-card{min-width: 0;border-color: #e5ebf3;border-radius: 8px;box-shadow: none;}.shop-product-grid .product-card:hover{box-shadow: 0 8px 20px rgba(15,23,42,.08);transform: translateY(-2px);}.shop-product-grid .product-card .image-wrapper{background: #fff;aspect-ratio: 1 / .82;}.shop-product-grid .product-card .product-image{padding: .55rem;}.shop-product-grid .product-card .badge{top: .5rem;left: .5rem;padding: .17rem .36rem;border-radius: 3px;font-size: .57rem;}.shop-product-grid .product-card .wishlist-btn{top: .42rem;right: .42rem;width: 24px;height: 24px;border: 0;background: rgba(255,255,255,.88);font-size: 1.1rem;}.shop-product-grid .product-card .card-body{gap: .27rem;padding: .7rem;}.shop-product-grid .product-card .category{display: none;}.shop-product-grid .product-card .name{min-height: 2.5em;font-size: .72rem;line-height: 1.25;}.shop-product-grid .product-card .rating{font-size: .62rem;}.shop-product-grid .product-card .price{font-size: .87rem;color: #172033;}.shop-product-grid .product-card .price .old{font-size: .62rem;}.shop-product-grid .product-card .add-to-cart{min-height: 29px;padding: .38rem;margin-top: .3rem;border-radius: 4px;font-size: .68rem;} .shop-pagination{display: flex;justify-content: flex-end;gap: .35rem;margin-top: 1.4rem;}.shop-pagination a{display: grid;place-items: center;min-width: 30px;height: 30px;padding: 0 .35rem;border: 1px solid #e1e8f0;border-radius: 4px;background: #fff;color: #64748b;font-size: .72rem;text-decoration: none;}.shop-pagination a.active,.shop-pagination a:hover{border-color: #2563eb;background: #1458e6;color: #fff;} .shop-empty-state{padding: 3.5rem 1.5rem;text-align: center;}.shop-empty-state h2{color: #172033;font-size: 1.1rem;}.shop-empty-state p{margin: .4rem 0 1rem;color: #64748b;font-size: .85rem;}.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;} .auth-page{padding: 3rem 0;} .auth-card{background: var(--white);padding: 2.5rem;border-radius: var(--radius-lg);border: 1px solid var(--gray-200);max-width: 500px;margin: 0 auto;box-shadow: var(--shadow-md);} .auth-card h1{text-align: center;margin-bottom: 2rem;font-size: 1.5rem;} .auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password]{width: 100%;padding: 0.75rem;border: 1px solid var(--gray-200);border-radius: var(--radius);margin-bottom: 1rem;} .auth-card .btn-submit{width: 100%;padding: 0.85rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius);font-weight: 600;cursor: pointer;font-size: 1rem;} .auth-card .btn-submit:hover{background: var(--primary-dark);} .alert-error{background: #fee2e2;color: #991b1b;padding: 1rem;border-radius: var(--radius);margin-bottom: 1rem;} .alert-success{background: #dcfce7;color: #166534;padding: 1rem;border-radius: var(--radius);margin-bottom: 1rem;} .product-detail{padding: 1.5rem 0 3rem;} .product-detail-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;} .product-detail .main-image{background: var(--gray-50);border-radius: var(--radius-md);padding: 1rem;text-align: center;border: 1px solid var(--gray-200);} .product-detail .main-image img{max-width: 100%;height: auto;} .product-actions-row{display: flex;flex-wrap: wrap;gap: 0.75rem;margin: 1rem 0;} .btn-primary-store{display: inline-block;padding: 0.85rem 1.75rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius);font-weight: 600;cursor: pointer;font-size: 1rem;text-decoration: none;} .btn-outline-store{display: inline-block;padding: 0.85rem 1.75rem;background: transparent;color: var(--danger);border: 2px solid var(--danger);border-radius: var(--radius);font-weight: 600;cursor: pointer;font-size: 1rem;} .form-control-store{width: 100%;max-width: 120px;padding: 0.55rem 0.75rem;border: 1px solid var(--gray-200);border-radius: var(--radius);} .nav{position: relative;} @media(max-width:1023px){.shop-layout{grid-template-columns: 1fr;gap: .8rem;padding-top: 1rem;} .shop-sidebar{display: none;} .shop-sidebar.open{display: block;} .shop-filters-toggle{display: block;} .shop-product-grid{grid-template-columns: repeat(3,minmax(0,1fr));}} @media(max-width:639px){.shop-layout{padding-left: 1rem;padding-right: 1rem;} .shop-header{align-items: flex-start;flex-direction: column;padding: .95rem;} .shop-sort{width: 100%;justify-content: space-between;} .shop-sort select{flex: 1;max-width: 220px;} .shop-product-grid{grid-template-columns: repeat(2,minmax(0,1fr)) !important;gap: .65rem !important;} .shop-product-grid .product-card .name{font-size: .7rem;} .shop-product-grid .product-card .card-body{padding: .58rem;} .shop-pagination{justify-content: center;}} .nav-tabs{display: flex;flex-wrap: wrap;list-style: none;border-bottom: 2px solid var(--gray-200);margin-bottom: 0;padding: 0;} .nav-tabs .nav-item{margin-bottom: -2px;} .nav-tabs .nav-link{display: block;padding: 0.75rem 1.25rem;color: var(--gray-600);text-decoration: none;font-weight: 500;border-bottom: 2px solid transparent;} .nav-tabs .nav-item.active .nav-link,.nav-tabs .nav-link:hover{color: var(--primary);border-bottom-color: var(--primary);} .tab-content{background: var(--white);padding: 1.25rem;border: 1px solid var(--gray-200);border-top: none;border-radius: 0 0 var(--radius-md) var(--radius-md);} .tab-pane{display: none;} .tab-pane.active{display: block;} .table{width: 100%;border-collapse: collapse;} .table td,.table th{padding: 0.75rem 1rem;border-bottom: 1px solid var(--gray-200);} .table-striped tr:nth-child(even){background: var(--gray-50);} .thumbnails{display: flex;flex-wrap: wrap;gap: 0.5rem;margin-top: 0.75rem;} .thumbnails img{width: 70px;height: 70px;object-fit: cover;border-radius: var(--radius-sm);border: 1px solid var(--gray-200);cursor: pointer;} .register-row{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin-bottom: 1rem;} @media(max-width:768px){.product-detail-grid{grid-template-columns: 1fr;} .auth-card{padding: 1.5rem;} .newsletter-form{flex-direction: column;max-width: 100%;padding: 0 1rem;} .newsletter-form input{border-radius: var(--radius-xl);margin-bottom: 0.5rem;} .newsletter-form button{border-radius: var(--radius-xl);}} @media(max-width:640px){.register-row{grid-template-columns: 1fr;}} .product-page{padding: 1rem 0 3rem;background: var(--gray-50);} .product-breadcrumb{padding: 0.75rem 0 1.25rem;font-size: 0.85rem;} .product-breadcrumb a{color: var(--gray-600);text-decoration: none;} .product-breadcrumb a:hover{color: var(--primary);} .product-breadcrumb .sep{margin: 0 0.4rem;color: var(--gray-400);} .product-breadcrumb .current{color: var(--gray-800);font-weight: 500;} .product-hero-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 2.5rem;align-items: start;margin-bottom: 2.5rem;} .product-gallery{background: var(--white);border-radius: var(--radius-lg);padding: 1rem;border: 1px solid var(--gray-200);position: relative;} .product-main-image{background: var(--gray-50);border-radius: var(--radius-md);overflow: hidden;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;position: relative;max-width: 450px;margin: 0 auto;cursor: crosshair;touch-action: pan-y;} .product-main-image img{width: 100%;height: 100%;object-fit: contain;padding: 1rem;pointer-events: none;} .zoom-lens{position: absolute;border: 1px solid #d4d4d4;background-color: rgba(255,255,255,0.4);width: 150px;height: 150px;display: none;pointer-events: none;cursor: crosshair;} .zoom-result{position: absolute;top: 0;left: calc(100% + 1rem);width: calc(100% + 2rem);height: 100%;background-color: #fff;background-repeat: no-repeat;border: 1px solid var(--gray-200);box-shadow: 0 10px 25px rgba(0,0,0,0.1);border-radius: var(--radius-lg);z-index: 100;display: none;pointer-events: none;} @media (max-width: 768px){.zoom-result{display: none !important;}} .product-thumbs{display: flex;gap: 0.5rem;margin-top: 1rem;flex-wrap: wrap;justify-content: center;} .product-thumb{width: 64px;height: 64px;padding: 0;border: 2px solid var(--gray-200);border-radius: var(--radius-sm);background: var(--white);cursor: pointer;overflow: hidden;flex-shrink: 0;transition: border-color 0.2s;} .product-thumb img{width: 100%;height: 100%;object-fit: contain;padding: 0.2rem;} .product-thumb.active{border-color: var(--primary);} .product-thumb-video{display: flex;align-items: center;justify-content: center;font-size: 1.25rem;color: var(--primary);} .product-gallery{display: grid;grid-template-columns: 70px minmax(0,1fr);gap: 1rem;align-items: start;} .product-gallery .product-main-image{grid-column: 2;grid-row: 1;max-width: none;margin: 0;width: 100%;} .product-gallery .product-thumbs{grid-column: 1;grid-row: 1;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;gap: 0.65rem;margin-top: 0;max-height: 100%;overflow-y: auto;} .product-gallery .product-thumb{width: 70px;height: 70px;border: 1px solid transparent;background: var(--gray-50);transition: border-color 0.2s,background 0.2s;} .product-gallery .product-thumb:hover,.product-gallery .product-thumb:focus-visible{border-color: var(--gray-400);outline: none;} .product-gallery .product-thumb.active{border-color: var(--secondary);background: var(--white);} .zoom-lens,.zoom-result{display: none !important;} .product-main-image img{transition: transform 0.18s ease-out;will-change: transform;} .gallery-sale-badge{position: absolute;top: 0.85rem;left: 0.85rem;z-index: 2;padding: 0.28rem 0.55rem;border-radius: var(--radius-sm);background: var(--primary);color: var(--white);font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.3px;} .gallery-nav,.gallery-fullscreen{position: absolute;z-index: 2;border: 1px solid rgba(15,23,42,0.1);background: rgba(255,255,255,0.94);color: var(--gray-700);cursor: pointer;display: inline-flex;align-items: center;justify-content: center;transition: transform 0.2s ease,background 0.2s ease,color 0.2s ease;} .gallery-nav{top: 50%;width: 42px;height: 42px;border-radius: 50%;transform: translateY(-50%);font-size: 2rem;font-weight: 300;line-height: 1;} .gallery-nav:hover,.gallery-nav:focus-visible,.gallery-fullscreen:hover,.gallery-fullscreen:focus-visible{background: var(--white);color: var(--primary);outline: 2px solid var(--primary);outline-offset: 2px;} .gallery-nav:hover{transform: translateY(-50%) scale(1.06);} .gallery-nav-prev{left: 0.85rem;} .gallery-nav-next{right: 0.85rem;} .gallery-fullscreen{right: 0.85rem;bottom: 0.85rem;width: 34px;height: 34px;border-radius: var(--radius-sm);} .gallery-fullscreen svg{width: 17px;height: 17px;fill: none;stroke: currentColor;stroke-width: 1.7;stroke-linecap: round;stroke-linejoin: round;} .gallery-lightbox{position: fixed;inset: 0;z-index: 1000;display: none;align-items: center;justify-content: center;padding: 2rem 5rem;background: rgba(15,23,42,0.94);} .gallery-lightbox.is-open{display: flex;} .gallery-lightbox img{display: block;max-width: 100%;max-height: calc(100vh - 4rem);object-fit: contain;} .gallery-lightbox-close,.gallery-lightbox-nav{position: absolute;border: 0;background: rgba(255,255,255,0.14);color: #fff;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;} .gallery-lightbox-close{top: 1.25rem;right: 1.5rem;width: 42px;height: 42px;border-radius: 50%;font-size: 2rem;line-height: 1;} .gallery-lightbox-nav{top: 50%;width: 52px;height: 52px;border-radius: 50%;transform: translateY(-50%);font-size: 2.5rem;font-weight: 300;} .gallery-lightbox-prev{left: 1.5rem;} .gallery-lightbox-next{right: 1.5rem;} .gallery-lightbox-close:hover,.gallery-lightbox-close:focus-visible,.gallery-lightbox-nav:hover,.gallery-lightbox-nav:focus-visible{background: #fff;color: var(--secondary);outline: 2px solid #fff;outline-offset: 2px;} body.gallery-lightbox-open{overflow: hidden;} @media(max-width:640px){.product-gallery{display: flex;flex-direction: column;gap: 0.75rem;} .product-gallery .product-main-image{order: 1;width: 100%;} .product-gallery .product-thumbs{order: 2;width: 100%;flex-direction: row;overflow-x: auto;overflow-y: hidden;max-width: 100%;padding-bottom: 0.15rem;} .product-gallery .product-thumb{width: 58px;height: 58px;} .gallery-nav{width: 42px;height: 42px;} .gallery-fullscreen{width: 42px;height: 42px;right: 0.65rem;bottom: 0.65rem;} .gallery-lightbox{padding: 1rem 3.5rem;} .gallery-lightbox img{max-height: calc(100dvh - 6rem);} .gallery-lightbox-nav{width: 42px;height: 42px;font-size: 2rem;} .gallery-lightbox-prev{left: 0.5rem;} .gallery-lightbox-next{right: 0.5rem;} .gallery-lightbox-close{top: 0.5rem;right: 0.5rem;}} @media(max-width:380px){.product-gallery{padding: 0.7rem;} .product-gallery .product-thumb{width: 52px;height: 52px;} .gallery-lightbox{padding-left: 3rem;padding-right: 3rem;}} .product-info{background: var(--white);border-radius: var(--radius-lg);padding: 1.5rem 2rem;border: 1px solid var(--gray-200);} .product-badges{display: flex;gap: 0.5rem;flex-wrap: wrap;margin-bottom: 0.75rem;} .product-badge{padding: 0.25rem 0.65rem;border-radius: var(--radius-sm);font-size: 0.7rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.3px;} .product-badge.badge-sale{background: #fee2e2;color: var(--danger);} .product-badge.badge-organic{background: #dcfce7;color: #166534;} .product-title{font-size: 1.85rem;font-weight: 800;line-height: 1.2;margin-bottom: 0.75rem;color: var(--secondary);letter-spacing: -0.5px;} .product-meta-row{display: flex;flex-wrap: wrap;align-items: center;gap: 1rem;margin-bottom: 1rem;} .product-stars{display: flex;align-items: center;gap: 0.35rem;} .product-stars .star{color: #d1d5db;font-size: 1rem;} .product-stars .star.filled{color: #f59e0b;} .review-link{color: var(--primary);font-size: 0.85rem;text-decoration: none;margin-left: 0.25rem;} .review-link:hover{text-decoration: underline;} .stock-pill{display: inline-flex;align-items: center;gap: 0.35rem;font-size: 0.85rem;font-weight: 600;} .stock-pill .dot{width: 8px;height: 8px;border-radius: 50%;} .stock-pill.in-stock{color: var(--success);} .stock-pill.in-stock .dot{background: var(--success);} .stock-pill.out-stock{color: var(--danger);} .stock-pill.out-stock .dot{background: var(--danger);} .product-price-block{margin-bottom: 1rem;} .product-price-block .current-price{font-size: 2rem;font-weight: 800;color: var(--secondary);} .product-price-block .old-price{font-size: 1.1rem;color: var(--gray-400);text-decoration: line-through;margin-left: 0.5rem;} .product-short-desc{color: var(--gray-600);margin-bottom: 1.25rem;line-height: 1.65;} .option-group{margin-bottom: 1.25rem;} .option-group-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5rem;} .option-group-header label{font-weight: 600;font-size: 0.9rem;color: var(--gray-800);} .option-pills{display: flex;flex-wrap: wrap;gap: 0.5rem;} .option-pill{padding: 0.55rem 1rem;border: 2px solid var(--gray-200);border-radius: var(--radius-xl);background: var(--white);font-size: 0.85rem;font-weight: 500;cursor: pointer;transition: all var(--transition);position: relative;} .option-pill:hover{border-color: var(--primary);color: var(--primary);} .option-pill.active{border-color: var(--primary);background: rgba(37,99,235,0.06);color: var(--primary);font-weight: 600;} .option-pill .pill-badge{display: block;font-size: 0.65rem;color: var(--danger);font-weight: 700;margin-top: 2px;} .product-purchase-row{display: flex;flex-wrap: wrap;gap: 0.75rem;align-items: center;margin-bottom: 1.5rem;} .qty-control{display: flex;align-items: center;border: 2px solid var(--gray-200);border-radius: var(--radius);overflow: hidden;} .qty-control button{width: 40px;height: 44px;border: none;background: var(--gray-50);font-size: 1.2rem;cursor: pointer;color: var(--gray-700);} .qty-control button:hover{background: var(--gray-100);} .qty-control input{width: 48px;height: 44px;border: none;text-align: center;font-weight: 600;font-size: 1rem;} .btn-add-cart{flex: 1;min-width: 180px;padding: 0.85rem 1.5rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 1rem;cursor: pointer;transition: background var(--transition);} .btn-add-cart:hover{background: var(--primary-dark);} .btn-wishlist{width: 48px;height: 48px;border: 2px solid var(--gray-200);border-radius: var(--radius-md);background: var(--white);display: flex;align-items: center;justify-content: center;cursor: pointer;color: var(--gray-500);transition: all 0.2s ease;} .btn-wishlist:hover{border-color: var(--danger);color: var(--danger);background: #fef2f2;box-shadow: 0 4px 6px rgba(220,38,38,0.1);} .btn-wishlist.active{border-color: var(--danger);color: var(--white);background: var(--danger);} .btn-wishlist.active .wishlist-icon{fill: var(--white);stroke: var(--white);} .btn-buy-now{flex: 0 1 auto;padding: 0.85rem 1.5rem;background: var(--warning);color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 1rem;cursor: pointer;transition: all var(--transition);white-space: nowrap;} .btn-buy-now:hover{background: #e08e0b;transform: translateY(-1px);box-shadow: 0 4px 10px rgba(245,158,11,0.3);} .btn-whatsapp{flex: 0 1 auto;padding: 0.85rem 1.2rem;background: #25D366;color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 1rem;cursor: pointer;transition: all var(--transition);text-decoration: none;display: inline-flex;align-items: center;white-space: nowrap;} .btn-whatsapp:hover{background: #1ebe5b;transform: translateY(-1px);box-shadow: 0 4px 10px rgba(37,211,102,0.3);color: var(--white);text-decoration: none;} .product-action-icons{display: flex;gap: 0.5rem;align-items: center;} .btn-share{width: 48px;height: 48px;border: 2px solid var(--gray-200);border-radius: var(--radius-md);background: var(--white);display: flex;align-items: center;justify-content: center;cursor: pointer;color: var(--gray-500);transition: all 0.2s ease;} .btn-share:hover{border-color: var(--primary);color: var(--primary);background: #eff6ff;box-shadow: 0 4px 6px rgba(37,99,235,0.1);} .trust-info-section{display: grid;grid-template-columns: repeat(3,1fr);gap: 0.75rem;margin-top: 1rem;padding-top: 1rem;border-top: 1px solid var(--gray-100);} .trust-item{display: flex;align-items: center;gap: 0.5rem;background: var(--gray-50);border: 1px solid var(--gray-100);border-radius: var(--radius-md);padding: 0.65rem 0.75rem;font-size: 0.82rem;color: var(--gray-700);} .trust-icon{font-size: 1.1rem;flex-shrink: 0;} .trust-label{line-height: 1.35;} .trust-label small{display: block;color: var(--gray-500);font-size: 0.72rem;margin-top: 0.1rem;} .product-features-list{list-style: none;padding: 0;margin: 0;border-top: 1px solid var(--gray-100);padding-top: 1rem;} .product-features-list li{display: flex;align-items: flex-start;gap: 0.5rem;padding: 0.35rem 0;font-size: 0.9rem;color: var(--gray-700);} .product-features-list .feat-icon{color: var(--success);font-weight: 700;} .product-tabs-section{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);overflow: hidden;margin-bottom: 2.5rem;} .product-tabs{display: flex;list-style: none;margin: 0;padding: 0;border-bottom: 2px solid var(--gray-200);} .product-tabs li button{display: block;padding: 1rem 1.5rem;border: none;background: none;font-weight: 600;font-size: 0.9rem;color: var(--gray-500);cursor: pointer;border-bottom: 2px solid transparent;margin-bottom: -2px;} .product-tabs li.active button{color: var(--primary);border-bottom-color: var(--primary);} .product-tab-panels{padding: 1.5rem 2rem;} .product-tab-panel{display: none;} .product-tab-panel.active{display: block;} .product-long-desc{line-height: 1.75;color: var(--gray-700);margin-bottom: 1.5rem;} .highlight-cards{display: grid;grid-template-columns: repeat(2,1fr);gap: 1rem;margin-top: 1.5rem;} .highlight-card{background: var(--gray-50);border: 1px solid var(--gray-200);border-radius: var(--radius-md);padding: 1.25rem;} .highlight-card .highlight-icon{font-size: 1.5rem;margin-bottom: 0.5rem;} .highlight-card h4{font-size: 1rem;margin-bottom: 0.35rem;color: var(--secondary);} .highlight-card p{font-size: 0.85rem;color: var(--gray-600);line-height: 1.5;} .spec-table{width: 100%;border-collapse: collapse;} .spec-table td{padding: 0.75rem 1rem;border-bottom: 1px solid var(--gray-200);} .spec-table td:first-child{font-weight: 600;width: 40%;color: var(--gray-700);} .review-item{padding: 1rem 0;border-bottom: 1px solid var(--gray-100);} .review-item:last-child{border-bottom: none;} .review-item p{margin: 0.35rem 0;color: var(--gray-700);} .review-item small{color: var(--gray-500);font-size: 0.8rem;} .admin-reply{background: var(--gray-50);border-left: 3px solid var(--primary);padding: 0.75rem 1rem;margin-top: 0.5rem;border-radius: 0 var(--radius-sm) var(--radius-sm) 0;} .admin-reply strong{font-size: 0.8rem;color: var(--primary);display: block;margin-bottom: 0.25rem;} .admin-reply p{margin: 0;font-size: 0.85rem;color: var(--gray-600);} .review-modal-overlay{display: flex;} .write-review-wrap{display: flex;justify-content: center;margin-top: 1.25rem;} .btn-write-review{display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1.75rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 1rem;cursor: pointer;transition: background var(--transition),transform var(--transition),box-shadow var(--transition);} .btn-write-review:hover{background: var(--primary-dark);transform: translateY(-1px);box-shadow: var(--shadow-md);} .btn-write-review:focus{outline: 2px solid var(--primary);outline-offset: 2px;} @media (max-width: 640px){.btn-write-review{padding: 0.7rem 1.5rem;font-size: 0.95rem;}} @media (max-width: 640px){.review-modal{padding: 1.25rem !important;}} .review-thread{margin-top: 0.5rem;} .thread-message{padding: 0.65rem 0.85rem;margin-bottom: 0.5rem;border-radius: var(--radius-sm);font-size: 0.85rem;} .thread-customer{background: var(--gray-50);border-left: 3px solid var(--gray-400);} .thread-admin{background: #eff6ff;border-left: 3px solid var(--primary);} .thread-header{display: flex;align-items: center;gap: 0.5rem;margin-bottom: 0.25rem;flex-wrap: wrap;} .thread-sender{font-size: 0.7rem;font-weight: 700;text-transform: uppercase;padding: 0.1rem 0.4rem;border-radius: 3px;letter-spacing: 0.5px;} .thread-customer .thread-sender{background: var(--gray-200);color: var(--gray-700);} .thread-admin .thread-sender{background: var(--primary);color: var(--white);} .thread-name{font-weight: 600;color: var(--gray-800);font-size: 0.82rem;} .thread-time{font-size: 0.72rem;color: var(--gray-500);margin-left: auto;} .thread-body{line-height: 1.5;color: var(--gray-700);} .related-section{margin-top: 1rem;} .related-header{display: flex;justify-content: space-between;align-items: flex-end;margin-bottom: 1.25rem;flex-wrap: wrap;gap: 1rem;} .related-header h2{font-size: 1.35rem;font-weight: 700;margin: 0;color: var(--secondary);} .related-header p{margin: 0.25rem 0 0;font-size: 0.85rem;color: var(--gray-500);} .related-nav{display: flex;gap: 0.5rem;} .related-arrow{width: 40px;height: 40px;border: 1px solid var(--gray-200);border-radius: 50%;background: var(--white);font-size: 1.25rem;cursor: pointer;color: var(--gray-700);} .related-arrow:hover{border-color: var(--primary);color: var(--primary);} .related-carousel{display: flex;gap: 1rem;overflow-x: auto;scroll-snap-type: x mandatory;padding-bottom: 0.5rem;-webkit-overflow-scrolling: touch;} .related-carousel .product-card{flex: 0 0 220px;scroll-snap-align: start;} @media(max-width:1023px){.product-hero-grid{grid-template-columns: 1fr;gap: 1.25rem;} .product-info{padding: 1.25rem;}} @media(max-width:640px){.product-page{padding: 0.5rem 0 2rem;} .product-breadcrumb{padding: 0.5rem 0 0.75rem;font-size: 0.8rem;overflow-x: auto;white-space: nowrap;} .product-hero-grid{gap: 1.25rem;margin-bottom: 1.5rem;} .product-info{padding: 1.1rem 1rem;border-radius: var(--radius-md);} .product-title{font-size: 1.35rem;margin-bottom: 0.5rem;word-break: break-word;line-height: 1.25;} .product-meta-row{gap: 0.5rem 0.75rem;margin-bottom: 0.75rem;} .product-price-block{margin-bottom: 0.85rem;display: flex;align-items: baseline;gap: 0.5rem;} .product-price-block .current-price{font-size: 1.65rem;font-weight: 800;} .product-price-block .old-price{font-size: 0.95rem;} .product-short-desc{font-size: 0.88rem;margin-bottom: 1rem;line-height: 1.6;} .option-group{margin-bottom: 0.85rem;} .option-pills{gap: 0.4rem;} .option-pill{padding: 0.45rem 0.8rem;font-size: 0.82rem;border-radius: var(--radius-md);min-height: 38px;display: inline-flex;align-items: center;justify-content: center;} .product-purchase-row{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;gap: 0.5rem;margin-bottom: 1.25rem;width: 100%;} .qty-control{height: 48px;flex: 0 0 auto;border-radius: var(--radius-md);box-sizing: border-box;} .qty-control button{width: 36px;height: 44px;font-size: 1.1rem;} .qty-control input{width: 38px;height: 44px;font-size: 0.95rem;} .btn-add-cart{flex: 1 1 auto;min-width: 0;height: 48px;padding: 0 0.75rem;font-size: 0.92rem;font-weight: 700;white-space: nowrap;display: inline-flex;align-items: center;justify-content: center;border-radius: var(--radius-md);box-shadow: 0 2px 4px rgba(37,99,235,0.15);} .btn-wishlist{flex: 0 0 48px;width: 48px;height: 48px;border-radius: var(--radius-md);box-sizing: border-box;} .btn-buy-now{flex: 1 1 auto;min-width: 0;height: 48px;padding: 0 0.75rem;font-size: 0.9rem;} .btn-whatsapp{flex: 0 1 auto;height: 48px;padding: 0 0.85rem;font-size: 0.9rem;} .product-action-icons{flex: 0 0 auto;} .btn-share{width: 48px;height: 48px;} .trust-info-section{grid-template-columns: repeat(2,1fr);gap: 0.5rem;} .trust-item{padding: 0.5rem 0.6rem;font-size: 0.78rem;} .product-tabs-section{margin-bottom: 1.5rem;border-radius: var(--radius-md);} .product-tabs{overflow-x: auto;white-space: nowrap;-webkit-overflow-scrolling: touch;background: var(--gray-50);border-bottom: 1px solid var(--gray-200);} .product-tabs li{flex-shrink: 0;} .product-tabs li button{padding: 0.75rem 1rem;font-size: 0.85rem;} .product-tab-panels{padding: 1rem;font-size: 0.88rem;} .highlight-cards{grid-template-columns: 1fr;gap: 0.75rem;} .related-carousel .product-card{flex: 0 0 155px;} .product-grid{grid-template-columns: repeat(2,1fr) !important;gap: 0.75rem !important;} .category-grid{grid-template-columns: repeat(3,1fr) !important;gap: 0.75rem !important;} .hero .container{flex-direction: column !important;text-align: center;} .hero h1{font-size: 1.8rem !important;} .hero img,.hero svg{width: 100% !important;height: auto !important;max-width: 300px;margin: 0 auto;}} @media(max-width:380px){.product-purchase-row{display: grid;grid-template-columns: auto 1fr;gap: 0.5rem;} .qty-control{grid-column: 1;grid-row: 1;} .btn-wishlist{grid-column: 2;grid-row: 1;justify-self: start;} .btn-add-cart{grid-column: 1 / -1;grid-row: 2;width: 100%;} .btn-buy-now{grid-column: 1 / -1;grid-row: 3;width: 100%;} .btn-whatsapp{grid-column: 1 / -1;grid-row: 4;width: 100%;justify-content: center;} .product-action-icons{grid-column: 1 / -1;grid-row: 5;} .trust-info-section{grid-template-columns: 1fr;} .product-grid{grid-template-columns: 1fr !important;} .category-grid{grid-template-columns: repeat(2,1fr) !important;}} .cart-page,.wishlist-page{padding: 3rem 0;background: var(--gray-50);min-height: 60vh;} .page-title{font-size: 2rem;font-weight: 800;color: var(--secondary);margin-bottom: 2rem;letter-spacing: -0.5px;} .empty-state{text-align: center;background: var(--white);padding: 4rem 2rem;border-radius: var(--radius-lg);border: 1px solid var(--gray-200);} .empty-icon{font-size: 4rem;margin-bottom: 1rem;color: var(--gray-300);} .empty-state h2{font-size: 1.5rem;color: var(--gray-800);margin-bottom: 0.5rem;} .empty-state p{color: var(--gray-500);margin-bottom: 1.5rem;} .cart-layout{display: grid;grid-template-columns: 1fr 350px;gap: 2rem;align-items: start;} .cart-items{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);padding: 1.5rem;} .cart-header{display: grid;grid-template-columns: 3fr 1fr 1fr 1fr;gap: 1rem;padding-bottom: 1rem;border-bottom: 1px solid var(--gray-200);font-weight: 600;color: var(--gray-600);font-size: 0.9rem;text-transform: uppercase;} .cart-item{display: grid;grid-template-columns: 3fr 1fr 1fr 1fr;gap: 1rem;padding: 1.5rem 0;border-bottom: 1px solid var(--gray-100);align-items: center;} .cart-item:last-child{border-bottom: none;padding-bottom: 0;} .cart-item .col-product{display: flex;gap: 1rem;align-items: center;} .cart-item .col-product img{width: 80px;height: 80px;object-fit: cover;border-radius: var(--radius-md);background: var(--gray-50);} .cart-item .item-info{display: flex;flex-direction: column;gap: 0.5rem;} .cart-item .item-name{font-weight: 600;color: var(--secondary);text-decoration: none;font-size: 1.05rem;} .cart-item .item-name:hover{color: var(--primary);} .cart-item .btn-remove{background: none;border: none;color: var(--danger);font-size: 0.85rem;padding: 0;cursor: pointer;text-align: left;} .cart-item .btn-remove:hover{text-decoration: underline;} .cart-item .col-price,.cart-item .col-total{font-weight: 600;color: var(--gray-800);} .cart-item .col-total{color: var(--primary);} .cart-sidebar{position: sticky;top: 1.5rem;} .cart-summary{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);padding: 1.5rem;} .cart-summary h2{font-size: 1.25rem;margin-bottom: 1.5rem;border-bottom: 1px solid var(--gray-200);padding-bottom: 0.75rem;} .summary-row{display: flex;justify-content: space-between;margin-bottom: 1rem;color: var(--gray-600);} .summary-total{display: flex;justify-content: space-between;font-size: 1.25rem;font-weight: 800;color: var(--secondary);margin-top: 1rem;padding-top: 1rem;border-top: 1px dashed var(--gray-300);margin-bottom: 1.5rem;} .btn-checkout{width: 100%;padding: 1rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 1.1rem;cursor: pointer;transition: background 0.3s;} .btn-checkout:hover{background: var(--primary-dark);} .wishlist-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(280px,1fr));gap: 1.5rem;} .wishlist-item{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);padding: 1.5rem;position: relative;display: flex;flex-direction: column;gap: 1rem;transition: transform 0.3s,box-shadow 0.3s;} .wishlist-item:hover{transform: translateY(-3px);box-shadow: 0 10px 25px rgba(0,0,0,0.05);} .btn-remove-wishlist{position: absolute;top: 1rem;right: 1rem;width: 30px;height: 30px;border-radius: 50%;background: var(--gray-100);border: none;color: var(--gray-600);font-size: 1.2rem;cursor: pointer;display: flex;align-items: center;justify-content: center;z-index: 2;transition: all 0.2s;} .btn-remove-wishlist:hover{background: #fee2e2;color: var(--danger);} .wishlist-item .item-img-link{display: block;aspect-ratio: 1;background: var(--gray-50);border-radius: var(--radius-md);overflow: hidden;} .wishlist-item .item-image{width: 100%;height: 100%;object-fit: contain;} .wishlist-item .item-name{font-weight: 700;font-size: 1.1rem;color: var(--secondary);text-decoration: none;} .wishlist-item .item-name:hover{color: var(--primary);} .wishlist-item .item-price{font-weight: 800;font-size: 1.25rem;color: var(--primary);margin: 0.25rem 0;} .wishlist-item .item-actions{margin-top: auto;padding-top: 1rem;} .wishlist-item .add-to-cart-wishlist{width: 100%;padding: 0.75rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 600;cursor: pointer;transition: background 0.2s;} .wishlist-item .add-to-cart-wishlist:hover:not(:disabled){background: var(--primary-dark);} .wishlist-item .add-to-cart-wishlist:disabled{background: var(--gray-300);cursor: not-allowed;} @media (max-width: 992px){.cart-layout{grid-template-columns: 1fr;} .cart-sidebar{position: static;}} @media (max-width: 768px){.cart-header{display: none;} .cart-item{grid-template-columns: 1fr;text-align: center;gap: 0.75rem;} .cart-item .col-product{flex-direction: column;align-items: center;text-align: center;} .cart-item .btn-remove{text-align: center;margin: 0 auto;}} .checkout-page{padding: 3rem 0;background: var(--gray-50);min-height: 70vh;} .checkout-layout{display: grid;grid-template-columns: 1fr 400px;gap: 2.5rem;align-items: start;} .checkout-section{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);padding: 2rem;margin-bottom: 2rem;} .checkout-section h2{font-size: 1.25rem;font-weight: 700;margin-bottom: 1.5rem;color: var(--secondary);border-bottom: 1px solid var(--gray-100);padding-bottom: 0.75rem;} .form-row{display: grid;grid-template-columns: 1fr 1fr;gap: 1.5rem;} .form-group{margin-bottom: 1.5rem;} .form-group label{display: block;margin-bottom: 0.5rem;font-weight: 500;color: var(--gray-700);font-size: 0.95rem;} .form-control{width: 100%;padding: 0.85rem 1rem;border: 1px solid var(--gray-300);border-radius: var(--radius-md);font-family: inherit;font-size: 1rem;transition: border-color 0.2s;} .form-control:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 3px rgba(37,99,235,0.1);} .payment-methods{display: flex;flex-direction: column;gap: 1rem;} .payment-option{display: block;position: relative;cursor: pointer;} .payment-option input[type="radio"]{position: absolute;opacity: 0;} .payment-option-content{display: flex;align-items: center;gap: 1rem;padding: 1.25rem;border: 2px solid var(--gray-200);border-radius: var(--radius-md);transition: all 0.2s;} .payment-icon{font-size: 1.8rem;} .payment-info{display: flex;flex-direction: column;gap: 0.25rem;} .payment-title{font-weight: 600;color: var(--gray-800);} .payment-desc{font-size: 0.85rem;color: var(--gray-500);} .payment-option.selected .payment-option-content{border-color: var(--primary);background: rgba(37,99,235,0.03);} .payment-option.disabled .payment-option-content{opacity: 0.5;cursor: not-allowed;} .checkout-sidebar{position: sticky;top: 1.5rem;} .checkout-summary{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);padding: 2rem;box-shadow: 0 4px 6px rgba(0,0,0,0.02);} .checkout-summary h2{font-size: 1.25rem;font-weight: 700;margin-bottom: 1.5rem;color: var(--secondary);} .summary-items{display: flex;flex-direction: column;gap: 1rem;margin-bottom: 1.5rem;max-height: 300px;overflow-y: auto;padding-right: 0.5rem;} .summary-item{display: grid;grid-template-columns: 60px 1fr auto;gap: 1rem;align-items: center;} .item-img-wrapper{position: relative;width: 60px;height: 60px;border-radius: var(--radius-md);border: 1px solid var(--gray-200);background: var(--white);display: flex;align-items: center;justify-content: center;overflow: visible;} .item-img-wrapper img{max-width: 100%;max-height: 100%;object-fit: contain;border-radius: calc(var(--radius-md) - 1px);} .item-qty-badge{position: absolute;top: -8px;right: -8px;background: var(--gray-600);color: white;width: 20px;height: 20px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 0.75rem;font-weight: 700;} .summary-item .item-name{font-weight: 500;font-size: 0.9rem;color: var(--gray-800);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .summary-item .item-price{font-weight: 600;font-size: 0.95rem;color: var(--gray-800);} .summary-totals{border-top: 1px solid var(--gray-200);padding-top: 1.5rem;margin-bottom: 1.5rem;} .btn-place-order{width: 100%;padding: 1.25rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius-lg);font-weight: 700;font-size: 1.1rem;cursor: pointer;transition: transform 0.2s,background 0.3s;margin-bottom: 1rem;} .btn-place-order:hover{background: var(--primary-dark);transform: translateY(-2px);} .secure-badge{text-align: center;color: var(--gray-500);font-size: 0.9rem;font-weight: 500;} .checkout-success-page{padding: 4rem 0;min-height: 70vh;display: flex;align-items: center;justify-content: center;background: var(--gray-50);} .success-card{background: var(--white);padding: 4rem 3rem;border-radius: var(--radius-xl);box-shadow: 0 10px 30px rgba(0,0,0,0.05);text-align: center;max-width: 600px;width: 100%;} .success-icon{font-size: 5rem;margin-bottom: 1.5rem;animation: popIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275);} .success-msg{font-size: 1.1rem;color: var(--gray-600);margin-bottom: 2rem;} .order-details-box{background: var(--gray-50);border: 1px dashed var(--gray-300);border-radius: var(--radius-lg);padding: 1.5rem;margin-bottom: 2rem;} .order-label{display: block;color: var(--gray-500);font-size: 0.9rem;margin-bottom: 0.25rem;text-transform: uppercase;letter-spacing: 0.5px;} .order-number{font-size: 1.5rem;font-weight: 800;color: var(--secondary);} .next-steps{text-align: left;background: #eff6ff;border-radius: var(--radius-lg);padding: 1.5rem;margin-bottom: 2.5rem;color: #1e3a8a;} .next-steps h3{font-size: 1.1rem;margin-bottom: 0.75rem;color: #1d4ed8;} .next-steps p{margin-bottom: 0.5rem;font-size: 0.95rem;} .next-steps p:last-child{margin-bottom: 0;} @keyframes popIn{0%{transform: scale(0.5);opacity: 0;} 100%{transform: scale(1);opacity: 1;}} @media (max-width: 992px){.checkout-layout{grid-template-columns: 1fr;} .checkout-sidebar{position: static;} .success-card{padding: 3rem 2rem;}} @media (max-width: 576px){.form-row{grid-template-columns: 1fr;gap: 0;} .checkout-section{padding: 1.5rem;}} .blog-page-container,.blog-single-page{padding: 0 0 4rem;background: var(--gray-50);min-height: 80vh;} .blog-hero-banner{background: linear-gradient(135deg,var(--secondary) 0%,#1e293b 100%);color: #fff;padding: 3rem 0;margin-bottom: 2rem;border-bottom: 1px solid rgba(255,255,255,0.1);} .blog-hero-content{text-align: center;max-width: 720px;margin: 0 auto;} .blog-kicker{display: inline-block;font-size: 0.85rem;font-weight: 700;color: var(--primary);background: rgba(37,99,235,0.15);padding: 0.35rem 0.85rem;border-radius: 999px;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 0.75rem;} .blog-hero-content h1{font-size: 2.3rem;font-weight: 800;color: #fff;margin-bottom: 0.75rem;letter-spacing: -0.5px;} .blog-hero-content p{font-size: 1.05rem;color: #94a3b8;margin: 0;line-height: 1.6;} .blog-category-filter-strip{display: flex;flex-wrap: wrap;gap: 0.6rem;margin-bottom: 2rem;padding-bottom: 1rem;border-bottom: 1px solid var(--gray-200);} .blog-cat-pill{padding: 0.55rem 1.1rem;border-radius: 999px;background: var(--white);border: 1px solid var(--gray-200);color: var(--gray-700);font-size: 0.88rem;font-weight: 600;text-decoration: none;transition: all 0.2s ease;display: inline-flex;align-items: center;gap: 0.35rem;} .blog-cat-pill:hover{border-color: var(--primary);color: var(--primary);transform: translateY(-1px);} .blog-cat-pill.active{background: var(--primary);color: var(--white);border-color: var(--primary);box-shadow: 0 4px 10px rgba(37,99,235,0.2);} .blog-cat-pill .pill-count{font-size: 0.78rem;opacity: 0.8;} .blog-main-layout{display: block;} .blog-content-wrapper,.blog-post-layout{display: grid;gap: 2rem;align-items: start;} .blog-content-wrapper.has-sidebar,.blog-post-layout.has-sidebar{grid-template-columns: minmax(0,1fr) 340px;} .blog-content-wrapper.has-sidebar.sidebar-left,.blog-post-layout.has-sidebar.sidebar-left{grid-template-columns: 340px minmax(0,1fr);} .blog-content-wrapper.has-sidebar.sidebar-left .blog-article-container,.blog-content-wrapper.has-sidebar.sidebar-left .blog-articles-area{grid-column: 2;} .blog-content-wrapper.has-sidebar.sidebar-left .blog-sidebar,.blog-post-layout.has-sidebar.sidebar-left .blog-sidebar{grid-column: 1;grid-row: 1;} .blog-content-wrapper.no-sidebar,.blog-post-layout.no-sidebar{grid-template-columns: 1fr;} .blog-posts-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(320px,1fr));gap: 1.5rem;margin-bottom: 2.5rem;} .blog-card-item{background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-lg);overflow: hidden;display: flex;flex-direction: column;transition: transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease;position: relative;} .blog-card-item:hover{transform: translateY(-4px);box-shadow: 0 12px 30px rgba(15,23,42,0.08);border-color: #cbd5e1;} .blog-card-media{display: block;aspect-ratio: 16/9;background: var(--gray-100);overflow: hidden;position: relative;} .blog-card-media img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.35s ease;} .blog-card-item:hover .blog-card-media img{transform: scale(1.05);} .blog-card-placeholder{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg,#e2e8f0,#f1f5f9);font-size: 3rem;} .blog-card-content{padding: 1.35rem;display: flex;flex-direction: column;flex: 1;} .blog-card-meta-top{display: flex;align-items: center;justify-content: space-between;font-size: 0.78rem;color: var(--gray-500);margin-bottom: 0.6rem;font-weight: 500;} .blog-meta-reading{color: var(--primary);font-weight: 600;} .blog-card-title{font-size: 1.2rem;font-weight: 800;line-height: 1.35;margin: 0 0 0.65rem;color: var(--secondary);letter-spacing: -0.3px;} .blog-card-title a{color: var(--secondary);text-decoration: none;transition: color 0.2s;} .blog-card-title a:hover{color: var(--primary);} .blog-card-excerpt{font-size: 0.88rem;color: var(--gray-600);line-height: 1.6;margin: 0 0 1.25rem;flex: 1;} .blog-card-meta-bottom{display: flex;align-items: center;justify-content: space-between;font-size: 0.8rem;color: var(--gray-500);padding-top: 0.85rem;border-top: 1px solid var(--gray-100);margin-bottom: 1rem;} .blog-card-author{display: flex;align-items: center;gap: 0.35rem;font-weight: 600;color: var(--gray-700);} .blog-card-stats{display: flex;gap: 0.75rem;} .btn-read-article{display: inline-flex;align-items: center;justify-content: center;gap: 0.4rem;padding: 0.65rem 1.1rem;background: var(--gray-100);color: var(--primary);text-decoration: none;border-radius: var(--radius-md);font-weight: 700;font-size: 0.88rem;transition: all 0.2s ease;width: 100%;text-align: center;} .btn-read-article:hover{background: var(--primary);color: var(--white);box-shadow: 0 4px 12px rgba(37,99,235,0.2);} .blog-empty-state{text-align: center;padding: 4rem 2rem;background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);} .blog-empty-state .empty-icon{font-size: 3.5rem;margin-bottom: 1rem;} .blog-empty-state h2{font-size: 1.5rem;color: var(--secondary);margin-bottom: 0.5rem;} .blog-empty-state p{color: var(--gray-600);margin-bottom: 1.5rem;} .blog-pagination{display: flex;justify-content: center;gap: 0.4rem;margin-top: 2rem;} .blog-pagination .page-link{display: inline-flex;align-items: center;justify-content: center;min-width: 40px;height: 40px;padding: 0 0.85rem;border-radius: var(--radius-md);background: var(--white);border: 1px solid var(--gray-200);color: var(--gray-700);font-weight: 600;text-decoration: none;font-size: 0.9rem;transition: all 0.2s;} .blog-pagination .page-link:hover{border-color: var(--primary);color: var(--primary);} .blog-pagination .page-link.active{background: var(--primary);color: var(--white);border-color: var(--primary);} .blog-sidebar{position: sticky;top: 1.5rem;display: flex;flex-direction: column;gap: 1.5rem;} .blog-widget{background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-lg);padding: 1.35rem;} .blog-widget .widget-title{font-size: 1.05rem;font-weight: 800;color: var(--secondary);margin: 0 0 1rem;padding-bottom: 0.6rem;border-bottom: 2px solid var(--gray-100);letter-spacing: -0.2px;} .blog-search-form{display: flex;gap: 0.5rem;} .blog-search-form input{flex: 1;padding: 0.65rem 0.85rem;border: 1px solid var(--gray-300);border-radius: var(--radius-md);font-size: 0.88rem;outline: none;} .blog-search-form input:focus{border-color: var(--primary);box-shadow: 0 0 0 3px rgba(37,99,235,0.1);} .blog-search-form button{padding: 0.65rem 1rem;background: var(--primary);color: var(--white);border: none;border-radius: var(--radius-md);font-weight: 700;font-size: 0.88rem;cursor: pointer;} .widget-posts-list{display: flex;flex-direction: column;gap: 0.85rem;} .widget-post-item{display: flex;gap: 0.75rem;align-items: center;} .widget-post-thumb{width: 68px;height: 68px;flex-shrink: 0;border-radius: var(--radius-md);overflow: hidden;background: var(--gray-100);} .widget-post-thumb img{width: 100%;height: 100%;object-fit: cover;} .widget-post-info h4{font-size: 0.88rem;font-weight: 700;line-height: 1.35;margin: 0 0 0.25rem;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .widget-post-info h4 a{color: var(--secondary);text-decoration: none;} .widget-post-info h4 a:hover{color: var(--primary);} .widget-post-date{font-size: 0.75rem;color: var(--gray-500);} .widget-category-list{list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 0.35rem;} .widget-category-list a{display: flex;justify-content: space-between;align-items: center;padding: 0.5rem 0.75rem;border-radius: var(--radius-md);color: var(--gray-700);text-decoration: none;font-size: 0.88rem;font-weight: 500;transition: background 0.2s,color 0.2s;} .widget-category-list a:hover,.widget-category-list a.active{background: var(--gray-50);color: var(--primary);font-weight: 700;} .widget-category-list .cat-count{font-size: 0.75rem;padding: 0.15rem 0.5rem;background: var(--gray-100);border-radius: 999px;color: var(--gray-600);} .blog-widget-newsletter{background: linear-gradient(135deg,#1e293b,var(--secondary));color: #fff;text-align: center;} .blog-widget-newsletter .widget-title{color: #fff;border-bottom-color: rgba(255,255,255,0.1);} .blog-widget-newsletter p{font-size: 0.85rem;color: #94a3b8;margin-bottom: 1rem;line-height: 1.5;} .widget-newsletter-form input{width: 100%;padding: 0.7rem;border-radius: var(--radius-md);border: 1px solid rgba(255,255,255,0.2);background: rgba(255,255,255,0.1);color: #fff;margin-bottom: 0.6rem;outline: none;font-size: 0.88rem;} .widget-newsletter-form input::placeholder{color: #cbd5e1;} .blog-breadcrumb{padding: 1rem 0 1.25rem;font-size: 0.85rem;color: var(--gray-500);} .blog-breadcrumb a{color: var(--gray-600);text-decoration: none;} .blog-breadcrumb a:hover{color: var(--primary);} .blog-breadcrumb .sep{margin: 0 0.4rem;color: var(--gray-400);} .blog-breadcrumb .current{color: var(--gray-800);font-weight: 600;display: inline-block;max-width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;vertical-align: bottom;} .blog-article-container{background: var(--white);border-radius: var(--radius-lg);border: 1px solid var(--gray-200);padding: 2.25rem;} .article-header{margin-bottom: 1.5rem;} .article-category-badges{display: flex;gap: 0.4rem;flex-wrap: wrap;margin-bottom: 0.75rem;} .category-badge{padding: 0.3rem 0.75rem;border-radius: 999px;background: rgba(37,99,235,0.08);color: var(--primary);font-size: 0.78rem;font-weight: 700;text-decoration: none;text-transform: uppercase;letter-spacing: 0.3px;} .article-title{font-size: 2.25rem;font-weight: 800;line-height: 1.25;color: var(--secondary);margin: 0 0 1rem;letter-spacing: -0.5px;} .article-meta-bar{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem 0.75rem;font-size: 0.85rem;color: var(--gray-600);padding-bottom: 1.25rem;border-bottom: 1px solid var(--gray-100);} .article-meta-bar .meta-author{font-weight: 500;} .article-meta-bar .meta-sep{color: var(--gray-300);} .article-featured-media{margin-bottom: 2rem;border-radius: var(--radius-lg);overflow: hidden;aspect-ratio: 16/9;background: var(--gray-100);border: 1px solid var(--gray-200);} .article-featured-media img{width: 100%;height: 100%;object-fit: cover;} .article-share-bar{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;padding: 0.85rem 1rem;background: var(--gray-50);border: 1px solid var(--gray-200);border-radius: var(--radius-md);margin-bottom: 2rem;} .article-share-bar .share-label{font-size: 0.85rem;font-weight: 700;color: var(--secondary);margin-right: 0.5rem;} .share-btn{display: inline-flex;align-items: center;gap: 0.35rem;padding: 0.4rem 0.85rem;border-radius: var(--radius-sm);font-size: 0.8rem;font-weight: 700;text-decoration: none;border: none;cursor: pointer;color: #fff;transition: opacity 0.2s;} .share-btn:hover{opacity: 0.9;} .share-fb{background: #1877f2;} .share-tw{background: #0f1419;} .share-li{background: #0a66c2;} .share-wa{background: #25d366;} .share-copy{background: var(--gray-700);} .article-body{font-size: 1.05rem;line-height: 1.8;color: var(--gray-800);margin-bottom: 2.5rem;} .article-body p{margin-bottom: 1.5rem;} .article-body h2{font-size: 1.6rem;font-weight: 800;color: var(--secondary);margin: 2rem 0 1rem;} .article-body h3{font-size: 1.3rem;font-weight: 700;color: var(--secondary);margin: 1.5rem 0 0.75rem;} .article-body img{max-width: 100%;height: auto;border-radius: var(--radius-md);margin: 1rem 0;} .article-body blockquote{border-left: 4px solid var(--primary);padding: 0.75rem 1.25rem;margin: 1.5rem 0;background: var(--gray-50);font-style: italic;color: var(--gray-700);border-radius: 0 var(--radius-md) var(--radius-md) 0;} .article-tags-wrapper{display: flex;align-items: center;gap: 0.75rem;flex-wrap: wrap;padding-top: 1.5rem;border-top: 1px solid var(--gray-200);margin-bottom: 2rem;} .tags-label{font-weight: 700;font-size: 0.88rem;color: var(--secondary);} .tags-list{display: flex;gap: 0.4rem;flex-wrap: wrap;} .tag-pill{padding: 0.35rem 0.75rem;border-radius: var(--radius-md);background: var(--gray-100);color: var(--gray-700);font-size: 0.8rem;font-weight: 600;text-decoration: none;transition: background 0.2s,color 0.2s;} .tag-pill:hover{background: var(--primary);color: #fff;} .article-adjacent-nav{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin-bottom: 2.5rem;} .adj-card{padding: 1rem 1.25rem;border: 1px solid var(--gray-200);border-radius: var(--radius-md);text-decoration: none;background: var(--gray-50);transition: border-color 0.2s,background 0.2s;display: flex;flex-direction: column;gap: 0.35rem;} .adj-card:hover{border-color: var(--primary);background: #fff;} .adj-card .adj-label{font-size: 0.78rem;font-weight: 700;color: var(--primary);text-transform: uppercase;} .adj-card strong{font-size: 0.95rem;color: var(--secondary);line-height: 1.35;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} .adj-next{text-align: right;} .article-related-section,.article-recommended-products{margin-top: 2.5rem;padding-top: 2rem;border-top: 2px solid var(--gray-200);} .article-related-section h3,.rec-header h3{font-size: 1.35rem;font-weight: 800;color: var(--secondary);margin: 0 0 1rem;} .rec-header p{font-size: 0.88rem;color: var(--gray-500);margin: -0.5rem 0 1.25rem;} .related-posts-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(220px,1fr));gap: 1.25rem;} .related-post-card{background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-md);overflow: hidden;} .related-post-thumb{display: block;aspect-ratio: 16/9;background: var(--gray-100);overflow: hidden;} .related-post-thumb img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;} .related-post-card:hover .related-post-thumb img{transform: scale(1.05);} .related-post-body{padding: 0.85rem;} .related-post-body small{font-size: 0.75rem;color: var(--gray-500);display: block;margin-bottom: 0.3rem;} .related-post-body h4{font-size: 0.92rem;font-weight: 700;line-height: 1.35;margin: 0;} .related-post-body h4 a{color: var(--secondary);text-decoration: none;} .related-post-body h4 a:hover{color: var(--primary);} .rec-products-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(200px,1fr));gap: 1rem;} .rec-product-card{background: var(--white);border: 1px solid var(--gray-200);border-radius: var(--radius-md);padding: 0.85rem;display: flex;flex-direction: column;transition: border-color 0.2s,box-shadow 0.2s;} .rec-product-card:hover{border-color: var(--primary);box-shadow: 0 6px 18px rgba(0,0,0,0.06);} .rec-product-image{display: block;aspect-ratio: 1;background: var(--gray-50);border-radius: var(--radius-sm);overflow: hidden;margin-bottom: 0.65rem;} .rec-product-image img{width: 100%;height: 100%;object-fit: contain;padding: 0.5rem;} .rec-product-body{display: flex;flex-direction: column;flex: 1;} .rec-product-name{font-size: 0.88rem;font-weight: 700;margin: 0 0 0.5rem;line-height: 1.3;height: 2.3em;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .rec-product-name a{color: var(--secondary);text-decoration: none;} .rec-product-name a:hover{color: var(--primary);} .rec-product-price{margin-bottom: 0.75rem;font-size: 0.95rem;font-weight: 800;} .rec-product-price .sale-price{color: var(--primary);} .rec-product-price .old-price{font-size: 0.8rem;color: var(--gray-400);text-decoration: line-through;margin-left: 0.35rem;font-weight: normal;} .rec-product-price .regular-price{color: var(--secondary);} .rec-product-actions{display: flex;flex-direction: column;gap: 0.4rem;margin-top: auto;} .rec-product-actions .btn{width: 100%;text-align: center;justify-content: center;font-size: 0.8rem;padding: 0.45rem 0.5rem;} @media (max-width: 992px){.blog-content-wrapper.has-sidebar,.blog-post-layout.has-sidebar{grid-template-columns: 1fr;} .blog-content-wrapper.has-sidebar.sidebar-left .blog-article-container,.blog-content-wrapper.has-sidebar.sidebar-left .blog-articles-area,.blog-content-wrapper.has-sidebar.sidebar-left .blog-sidebar,.blog-post-layout.has-sidebar.sidebar-left .blog-sidebar{grid-column: auto;grid-row: auto;} .blog-sidebar{position: static;margin-top: 1.5rem;} .article-title{font-size: 1.75rem;} .article-adjacent-nav{grid-template-columns: 1fr;} .adj-next{text-align: left;}} @media (max-width: 640px){.blog-hero-content h1{font-size: 1.75rem;} .blog-posts-grid{grid-template-columns: 1fr;} .blog-article-container{padding: 1.25rem;} .rec-products-grid{grid-template-columns: repeat(2,1fr);gap: 0.65rem;}} .back-to-top{position: fixed;bottom: 2rem;right: 2rem;z-index: 1000;width: 44px;height: 44px;border: none;border-radius: 50%;background: var(--primary);color: var(--white);font-size: 1.25rem;font-weight: 700;line-height: 1;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: var(--shadow-lg);transition: opacity 0.25s ease,visibility 0.25s ease,transform 0.25s ease,background 0.2s ease;opacity: 0;visibility: hidden;transform: translateY(12px);pointer-events: none;-webkit-tap-highlight-color: transparent;outline: none;} .back-to-top.visible{opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;} .back-to-top:hover{background: var(--primary-dark);transform: translateY(-2px) scale(1.08);box-shadow: 0 14px 28px rgba(37,99,235,0.25);} .back-to-top:active{transform: scale(0.95);} .back-to-top:focus-visible{outline: 3px solid var(--accent);outline-offset: 2px;} .back-to-top svg{width: 20px;height: 20px;fill: none;stroke: var(--white);stroke-width: 2.5;stroke-linecap: round;stroke-linejoin: round;pointer-events: none;} @media (max-width: 992px){.back-to-top{bottom: 1.5rem;right: 1.5rem;width: 40px;height: 40px;font-size: 1.1rem;} .back-to-top svg{width: 18px;height: 18px;}} @media (max-width: 640px){.back-to-top{bottom: 1rem;right: 1rem;width: 38px;height: 38px;font-size: 1rem;} .back-to-top svg{width: 16px;height: 16px;}}