.sg-tryon-story{--sg-story-line: rgb(var(--color-foreground-rgb, 38 40 36) / .18);--sg-story-muted: rgb(var(--color-foreground-rgb, 38 40 36) / .72);padding-block:clamp(48px,6vw,88px);color:var(--color-foreground, #262824);font-family:var(--font-body--family, sans-serif)}.sg-tryon-story__inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.8fr);align-items:center;gap:clamp(32px,4vw,64px);width:100%;max-width:1280px;min-width:0;justify-self:center}.sg-tryon-story__copy,.sg-tryon-story__workflow,.sg-tryon-step,.sg-tryon-step__copy{min-width:0}.sg-tryon-story__eyebrow,.sg-tryon-story__workflow-label{margin:0 0 20px;font-size:11px;font-weight:500;line-height:1.6;letter-spacing:.13em;text-transform:uppercase}.sg-tryon-story__copy h2{margin:0 0 22px;font-family:var(--font-heading--family, sans-serif);font-size:clamp(34px,3.2vw,48px);font-weight:var(--font-heading--weight, 400);line-height:1.12;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}.sg-tryon-story__description{max-width:39ch;margin:0;color:var(--sg-story-muted);font-size:14px;line-height:1.75;overflow-wrap:anywhere}.sg-tryon-story__actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-block-start:26px}.sg-tryon-story .sg-tryon-story__cta{--button-color: var(--color-background, #fff);--button-background-color: var(--color-foreground, #262824);--button-border-color: var(--color-foreground, #262824);--button-border-width: 1px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;max-width:100%;min-height:50px;padding:14px 22px;font-size:13px;line-height:1.5;white-space:normal;text-align:start;text-decoration:none;overflow-wrap:anywhere}.sg-tryon-story__cta span{flex:none;font-size:18px}.sg-tryon-story .sg-tryon-story__cta:hover{--button-color: var(--color-foreground, #262824);--button-background-color: var(--color-background, #fff)}.sg-tryon-story__rewards{display:inline-flex;align-items:center;min-height:32px;color:inherit;font-size:12px;line-height:1.6;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}.sg-tryon-story :is(.sg-tryon-story__cta,.sg-tryon-story__rewards):focus-visible{outline:2px solid var(--color-foreground, #262824);outline-offset:5px}.sg-tryon-story__credit{margin:0;color:var(--sg-story-muted);font-size:11px;line-height:1.7}.sg-tryon-story__workflow-label{margin-block-end:16px;color:var(--sg-story-muted)}.sg-tryon-story__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none}.sg-tryon-step{position:relative}.sg-tryon-step:not(:last-child):after{content:"\2192";position:absolute;inset-inline-end:-22px;top:clamp(110px,10.5vw,139px);transform:translateY(-50%);color:var(--sg-story-muted);font-family:sans-serif;font-size:20px;line-height:1}.sg-tryon-step__visual{position:relative;display:grid;place-items:center;width:100%;height:clamp(220px,21vw,278px);overflow:hidden;background:#f3f2ee;color:#343a32;border-radius:2px}.sg-tryon-step:nth-child(2) .sg-tryon-step__visual{background:#edf0e9}.sg-tryon-step__number{position:absolute;z-index:1;inset-block-start:12px;inset-inline-start:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#343a32;font-size:10px;line-height:1;letter-spacing:.04em;font-variant-numeric:tabular-nums}.sg-tryon-step__illustration{display:block;width:82%;height:76%;overflow:visible}.sg-tryon-step__swatches{position:absolute;inset-block-end:19px;display:flex;gap:7px}.sg-tryon-step__swatches span{width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#ddd5c7;box-shadow:0 0 0 1px #343a3229}.sg-tryon-step__swatches span:nth-child(2){background:#b6bfae}.sg-tryon-step__swatches span:nth-child(3){background:#a89682}.sg-tryon-step__result-image{width:100%;height:100%;background-image:var(--sg-story-example);background-repeat:no-repeat;background-size:300% auto;background-position:50% 30%}.sg-tryon-step__badge{position:absolute;inset-inline:10px;inset-block-end:10px;width:fit-content;max-width:calc(100% - 20px);margin-inline:auto;padding:6px 9px;border-radius:2px;background:#fffffff0;color:#343a32;font-size:9px;line-height:1.5;text-align:center}.sg-tryon-step__copy h3{margin:18px 0 7px;font-family:var(--font-heading--family, sans-serif);font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.015em;overflow-wrap:anywhere}.sg-tryon-step__copy p{margin:0;color:var(--sg-story-muted);font-size:12px;line-height:1.7;overflow-wrap:anywhere}.sg-tryon-story__note{margin:24px 0 0;padding-block-start:14px;border-block-start:1px solid var(--sg-story-line);color:var(--sg-story-muted);font-size:11px;line-height:1.7}@media screen and (max-width:1023px){.sg-tryon-story__inner{grid-template-columns:minmax(0,1fr);gap:36px;max-width:800px}.sg-tryon-story__copy{max-width:570px}.sg-tryon-story__description{max-width:55ch}.sg-tryon-step__visual{height:270px}.sg-tryon-step:not(:last-child):after{top:135px}}@media screen and (max-width:599px){.sg-tryon-story{padding-block:44px}.sg-tryon-story__inner{gap:30px}.sg-tryon-story__eyebrow{margin-block-end:14px;font-size:10px}.sg-tryon-story__copy h2{font-size:clamp(30px,8.5vw,40px);line-height:1.15;margin-block-end:16px}.sg-tryon-story__actions{gap:12px;margin-block-start:22px}.sg-tryon-story__workflow-label{font-size:10px;margin-block-end:14px}.sg-tryon-story__steps{grid-template-columns:minmax(0,1fr);gap:26px}.sg-tryon-step{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:18px}.sg-tryon-step__visual{width:112px;height:140px}.sg-tryon-step:not(:last-child):after{content:"\2193";top:auto;inset-block-end:-22px;inset-inline-start:48px;inset-inline-end:auto;transform:none;font-size:18px}.sg-tryon-step__number{inset-block-start:7px;inset-inline-start:7px;width:23px;height:23px;font-size:9px}.sg-tryon-step__illustration{width:82%;height:72%}.sg-tryon-step__swatches{inset-block-end:10px;gap:5px}.sg-tryon-step__swatches span{width:12px;height:12px}.sg-tryon-step__badge{inset-inline:5px;inset-block-end:6px;max-width:calc(100% - 10px);padding:4px 5px;font-size:8px}.sg-tryon-step__copy h3{margin:0 0 7px;font-size:16px}.sg-tryon-story__note{margin-block-start:20px}}@media(forced-colors:active){.sg-tryon-step__visual,.sg-tryon-step__number,.sg-tryon-step__badge{border:1px solid CanvasText}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/sunglens-style-campaign.css.map */