.hero{padding:var(--space-8) 0;background:linear-gradient(135deg,var(--bg) 0%,var(--surface) 100%);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-50%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,var(--brand-yellow) 0%,transparent 70%);opacity:.1;border-radius:50%;animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.hero-content{display:grid;gap:var(--space-8);align-items:center}@media (min-width: 768px){.hero-content{grid-template-columns:1fr 1fr;gap:var(--space-12)}}.hero-text{text-align:center}@media (min-width: 768px){.hero-text{text-align:left}}.hero-title{font-size:var(--text-3xl);font-weight:900;line-height:1.1;margin-bottom:var(--space-4);background:linear-gradient(135deg,var(--brand-yellow) 0%,var(--text) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}@media (min-width: 768px){.hero-title{font-size:var(--text-4xl)}}.hero-description{font-size:var(--text-lg);color:var(--muted);margin-bottom:var(--space-6);line-height:1.6}.hero-actions{display:flex;flex-direction:column;gap:var(--space-3);align-items:center}@media (min-width: 768px){.hero-actions{flex-direction:row;align-items:stretch}}.hero-actions .btn{min-width:160px}.hero-image{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl)}.hero-image img{width:100%;height:auto;aspect-ratio:4/5;-o-object-fit:cover;object-fit:cover;transition:transform var(--transition-normal)}@media (hover: hover){.hero-image:hover img{transform:scale(1.05)}}.products-section{padding:var(--space-12) 0}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8);flex-wrap:wrap;gap:var(--space-4)}.section-title{font-size:var(--text-2xl);font-weight:800;margin:0}.section-link{display:flex;align-items:center;gap:var(--space-2);color:var(--brand-yellow);font-weight:600;font-size:var(--text-sm);transition:all var(--transition-normal)}.section-link:hover{transform:translate(4px)}.products-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr}@media (min-width: 480px){.products-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){.products-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}}@media (min-width: 1024px){.products-grid{grid-template-columns:repeat(4,1fr)}}.product-card{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid color-mix(in srgb,var(--white) 8%,transparent);transition:all var(--transition-normal);position:relative}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--brand-yellow)}.product-image{position:relative;overflow:hidden}.product-image img{width:100%;height:auto;aspect-ratio:4/5;-o-object-fit:cover;object-fit:cover;transition:transform var(--transition-normal)}.product-card:hover .product-image img{transform:scale(1.05)}.product-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:var(--space-4);opacity:0;transform:translateY(100%);transition:all var(--transition-normal);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.product-card:hover .product-overlay{opacity:1;transform:translateY(0)}.product-name{color:var(--white);font-size:var(--text-sm);font-weight:600}.quick-add-form{margin:0}.quick-add-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);min-height:32px}.product-info{padding:var(--space-4)}.product-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4)}.product-title{font-size:var(--text-base);font-weight:700;margin:0;line-height:1.3}.product-title a{color:var(--text);transition:color var(--transition-fast)}.product-title a:hover{color:var(--brand-yellow)}.product-price{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}.current-price{font-weight:700;color:var(--brand-yellow);font-size:var(--text-lg)}.compare-price{color:var(--muted);text-decoration:line-through;font-size:var(--text-sm)}.add-to-cart-form{margin:0}.add-to-cart-btn{width:100%;justify-content:center}.empty-state{text-align:center;padding:var(--space-12);color:var(--muted)}.empty-state svg{margin-bottom:var(--space-4);opacity:.5}.reveal{opacity:0;transform:translateY(20px);animation:reveal .6s ease forwards}.reveal[data-delay]{animation-delay:calc(var(--data-delay, 0) * 1s)}@keyframes reveal{to{opacity:1;transform:translateY(0)}}@media (hover: none) and (pointer: coarse){.product-overlay{opacity:1;transform:translateY(0)}.product-card:active{transform:scale(.98)}}@media (prefers-reduced-motion: reduce){.hero:before,.product-card,.product-image img,.product-overlay{animation:none;transition:none}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-full);font-weight:600;font-size:var(--text-sm);text-align:center;border:none;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;min-height:44px;min-width:44px;text-decoration:none}.btn-primary{background:var(--brand-yellow);color:var(--brand-black)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:transparent;color:var(--text);border:1px solid color-mix(in srgb,var(--white) 12%,transparent)}.btn-secondary:hover{background:color-mix(in srgb,var(--white) 4%,transparent);border-color:var(--brand-yellow)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);min-height:36px}.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--text-lg);min-height:52px}.form-input{width:100%;padding:var(--space-3) var(--space-4);border:1px solid color-mix(in srgb,var(--white) 12%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--white) 4%,transparent);color:var(--text);font-size:var(--text-base);transition:all var(--transition-fast);min-height:44px}.form-input:focus{outline:none;border-color:var(--brand-yellow);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-yellow) 20%,transparent)}.form-input::-moz-placeholder{color:var(--muted)}.form-input::placeholder{color:var(--muted)}.loading{opacity:.6;pointer-events:none}.loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--brand-yellow);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}.skeleton{background:linear-gradient(90deg,var(--muted) 25%,var(--surface) 50%,var(--muted) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1em;border-radius:var(--radius-sm);margin-bottom:var(--space-2)}.skeleton-image{width:100%;height:200px;border-radius:var(--radius)}.toast{position:fixed;right:var(--space-4);bottom:var(--space-4);background:var(--surface);border:1px solid color-mix(in srgb,var(--white) 10%,transparent);padding:var(--space-4);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:var(--z-tooltip);max-width:300px;animation:slideInUp .3s ease}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;inset:0;background:#00000080;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.modal-content{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-6);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid color-mix(in srgb,var(--white) 8%,transparent)}.modal-title{font-size:var(--text-xl);font-weight:700;margin:0}.modal-close{background:none;border:none;color:var(--muted);font-size:var(--text-xl);cursor:pointer;padding:var(--space-2);border-radius:var(--radius);transition:all var(--transition-fast)}.modal-close:hover{background:color-mix(in srgb,var(--white) 4%,transparent);color:var(--text)}.responsive-image{width:100%;height:auto;display:block}.image-cover{-o-object-fit:cover;object-fit:cover}.image-contain{-o-object-fit:contain;object-fit:contain}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.aspect-photo{aspect-ratio:4 / 5}.text-gradient{background:linear-gradient(135deg,var(--brand-yellow) 0%,var(--text) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.bg-gradient{background:linear-gradient(135deg,var(--bg) 0%,var(--surface) 100%)}.border-gradient{border:2px solid;-o-border-image:linear-gradient(135deg,var(--brand-yellow),var(--muted)) 1;border-image:linear-gradient(135deg,var(--brand-yellow),var(--muted)) 1}.glass-effect{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid color-mix(in srgb,var(--white) 10%,transparent)}.fade-in{animation:fadeIn .5s ease forwards}.slide-up{animation:slideUp .5s ease forwards}.slide-down{animation:slideDown .5s ease forwards}.scale-in{animation:scaleIn .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media print{.hero:before,.product-overlay,.btn{display:none!important}.product-card{-moz-column-break-inside:avoid;break-inside:avoid;border:1px solid #ccc}}
