.sy-hero{position:relative;background:var(--color-surface-inverse);color:var(--color-on-inverse);overflow:hidden}.sy-hero__inner{display:grid;gap:var(--spacing-10);align-items:center;padding:clamp(2.5rem,6vw,5rem) 0}.sy-hero--has-media .sy-hero__inner{grid-template-columns:1.05fr .95fr}.sy-hero__content{max-width:640px}.sy-hero__eyebrow{color:var(--color-accent)}.sy-hero__title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.02;font-size:clamp(2.75rem,7vw,4.75rem);margin:0 0 var(--spacing-5);color:var(--color-on-inverse)}.sy-hero__title .sy-hero__accent{display:block;color:var(--color-accent)}.sy-hero__subtitle{font-size:var(--font-size-lg);line-height:1.6;color:var(--color-on-inverse-muted);margin:0 0 var(--spacing-8);max-width:52ch}.sy-hero__actions{display:flex;gap:var(--spacing-4);flex-wrap:wrap;margin-bottom:var(--spacing-8)}.sy-hero .sykell-btn--ghost{color:var(--color-on-inverse);border-color:#fff6}.sy-hero .sykell-btn--ghost:hover{background:#ffffff14;color:var(--color-on-inverse)}.sy-hero__chips{display:flex;flex-wrap:wrap;gap:var(--spacing-3);padding:0;margin:0 0 var(--spacing-5);list-style:none}.sy-hero__chip{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-full);font-size:var(--font-size-sm);color:var(--color-on-inverse);background:#ffffff08}.sy-hero__chip svg{width:18px;height:18px;color:var(--color-accent)}.sy-hero__rating{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--font-size-sm);color:var(--color-on-inverse-muted)}.sy-hero__rating-brand{font-weight:700;color:var(--color-on-inverse)}.sy-hero__rating-stars{display:inline-flex;gap:1px;color:#3ecf8e}.sy-hero__rating-stars svg{width:16px;height:16px}.sy-hero__rating-num{font-weight:800;color:var(--color-on-inverse)}.sy-hero__rating-count{color:var(--color-on-inverse-muted)}.sy-hero__media{align-self:stretch}.sy-hero__media img{width:100%;height:100%;max-height:520px;object-fit:cover;border-radius:var(--radius-lg);display:block}.sy-hero--photo{background-color:var(--color-surface);color:var(--color-text);background-repeat:no-repeat;background-size:cover;background-position:center 18%;max-width:var(--container-max);margin-left:auto;margin-right:auto}.sy-hero--photo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(90deg,#fffffff2,#fffc 38%,#ffffff40 60%,#fff0 76%)}.sy-hero--photo .sy-hero__inner{position:relative;z-index:1;grid-template-columns:1fr;min-height:clamp(340px,30vw,480px);padding-top:1rem!important;padding-bottom:1rem!important}.sy-hero--photo .sy-hero__content{max-width:560px}.sy-hero--photo .sy-hero__eyebrow{color:var(--color-primary)}.sy-hero--photo .sy-hero__title{color:var(--color-text);margin-bottom:.75rem}.sy-hero--photo .sy-hero__title .sy-hero__accent{color:var(--color-primary)}.sy-hero--photo .sy-hero__subtitle{color:var(--color-text-muted);margin-bottom:1.1rem}.sy-hero--photo .sy-hero__actions{margin-bottom:1.1rem}.sy-hero--photo .sykell-btn--ghost{color:var(--color-text);border-color:var(--color-border)}.sy-hero--photo .sykell-btn--ghost:hover{background:var(--color-surface-muted);color:var(--color-text)}.sy-hero--photo .sy-hero__chip{border-color:#0000001f;color:var(--color-text);background:#fff9}.sy-hero--photo .sy-hero__chip svg{color:var(--color-primary)}.sy-hero--photo .sy-hero__rating{color:var(--color-text-muted)}.sy-hero--photo .sy-hero__rating-brand,.sy-hero--photo .sy-hero__rating-num{color:var(--color-text)}.sy-hero--photo .sy-hero__rating-count{color:var(--color-text-muted)}.sy-hero--photo .sy-hero__media,.sy-hero__photo-mobile{display:none}@media(max-width:700px){.sy-hero--photo{background-image:none!important}.sy-hero--photo:before{display:none}.sy-hero__photo-mobile{display:block;margin-top:1.1rem;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-muted)}.sy-hero__photo-mobile img{width:100%;height:auto;display:block}}@media(max-width:1023px){.sy-hero--has-media .sy-hero__inner{grid-template-columns:1fr}.sy-hero__media{order:-1}.sy-hero__media img{max-height:340px}}@media(max-width:600px){.sy-hero__actions{flex-direction:column;align-items:stretch}.sy-hero__actions>*{width:100%}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/sykell-hero.css.map */