:root{--banner-height-desktop:400px;--banner-height-tablet:350px;--banner-height-mobile:300px}.hero-wrapper{background-color:var(--color-background);padding:var(--container-padding,20px);width:100%;font-family:var(--font-body);border-radius:8px;justify-content:center;margin:20px auto;display:flex;overflow:hidden}.hero-content-container{width:100%;height:var(--banner-height-desktop);justify-content:space-between;align-items:center;padding:0 40px;display:flex}.hero-left{flex-direction:column;flex:1;max-width:50%;padding-right:40px;display:flex}.hero-slogan{font-size:var(--font-size-lg);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-style:italic}.hero-title{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:var(--line-height-tight);margin-bottom:15px}.hero-description{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:450px;margin-bottom:25px}.hero-shop-button{background-color:var(--color-primary);color:var(--color-text-inverse);font-size:var(--button-font-size,16px);font-weight:var(--button-font-weight,600);text-transform:var(--button-text-transform,uppercase);border-radius:var(--button-border-radius,4px);cursor:pointer;box-shadow:var(--button-shadow,0 2px 8px #0003);transition:var(--button-transition,all .3s ease);letter-spacing:.5px;border:none;align-self:flex-start;margin-bottom:2rem;padding:14px 32px}.hero-shop-button:hover{background-color:var(--color-hover-primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000040}.hero-controls{align-items:center;margin-top:auto;display:flex}.hero-control-button{border:1px solid var(--color-primary);cursor:pointer;width:36px;height:36px;color:var(--color-primary);background:0 0;border-radius:50%;outline:none;justify-content:center;align-items:center;margin:0 5px;padding:0;transition:background-color .2s,color .2s;display:flex}.hero-control-button:hover{background-color:var(--color-primary);color:var(--color-text-inverse);transform:scale(1.05)}.hero-dot{background-color:var(--color-text-muted);cursor:pointer;border:none;border-radius:50%;outline:none;width:10px;height:10px;margin:0 4px;padding:0;transition:all .3s}.hero-dot.active{background-color:var(--color-primary);border-radius:5px;width:30px}.hero-right{flex:1;justify-content:flex-end;max-width:50%;height:100%;display:flex}.hero-image-placeholder{background-color:var(--color-surface);width:100%;height:100%;color:var(--color-text-muted);font-size:var(--font-size-base);border-radius:8px;justify-content:center;align-items:center;display:flex;overflow:hidden}.hero-image-placeholder img{object-fit:cover;border-radius:8px;width:100%;height:100%}@media (max-width:1024px){.hero-content-container{height:var(--banner-height-tablet);gap:30px;padding:0 30px}.hero-left{padding-right:30px}.hero-title{font-size:var(--font-size-2xl)}.hero-slogan{font-size:var(--font-size-base)}.hero-description{font-size:var(--font-size-sm);margin-bottom:20px}.hero-image-placeholder{max-width:450px}.hero-shop-button{padding:12px 28px;font-size:15px}}@media (max-width:768px){.hero-content-container{height:auto;min-height:var(--banner-height-mobile);flex-direction:column;align-items:center;gap:30px;padding:0 20px}.hero-left,.hero-right{max-width:100%;padding-right:0}.hero-left{order:2;align-items:center}.hero-description{max-width:100%}.hero-shop-button{align-self:center;margin-bottom:20px}.hero-controls{justify-content:center;margin-top:20px}.hero-right{order:1;justify-content:center;width:100%}.hero-image-placeholder{max-width:100%;height:250px}}@media (max-width:480px){.hero-wrapper{margin:10px auto;padding:15px}.hero-content-container{gap:20px;padding:0 15px}.hero-title{font-size:var(--font-size-xl);margin-bottom:10px}.hero-slogan{font-size:var(--font-size-sm);letter-spacing:.3px}.hero-description{font-size:var(--font-size-xs);margin-bottom:15px;line-height:1.5}.hero-shop-button{width:100%;max-width:280px;margin:auto;padding:10px 24px;font-size:14px}.hero-control-button{width:32px;height:32px}.hero-control-button svg{width:14px;height:14px}.hero-dot{width:8px;height:8px}.hero-dot.active{width:24px}.hero-image-placeholder{height:200px}}@media (max-width:360px){.hero-image-placeholder{height:180px}.hero-title{font-size:var(--font-size-lg)}.hero-description{display:none}.hero-slogan{margin-bottom:5px}.hero-shop-button{max-width:240px;padding:8px 20px;font-size:13px}}