.custom-before-after__surface{padding-inline:20px;background:var(--custom-before-after-background);color:var(--custom-before-after-text)}.custom-before-after{--custom-before-after-tag-space: 24px;display:grid;grid-template-columns:minmax(0,1fr);max-width:min(900px,var(--custom-theme-page-width, 1344px));margin-inline:auto;overflow:hidden;border-radius:8px;background:var(--custom-before-after-background)}.custom-before-after>*{min-width:0}.custom-before-after__viewer{order:1;min-width:0}.custom-before-after__controls{display:none}.custom-before-after__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:relative;align-self:start;min-width:0;overflow:hidden;background:#e4eaf2}.custom-before-after__frame{position:relative;min-width:0;aspect-ratio:3 / 4}.custom-before-after__frame>img,.custom-before-after__placeholder-frame{display:block;width:100%;height:100%;object-fit:var(--custom-before-after-fit)}.custom-before-after__placeholder{display:block;width:100%;height:100%;aspect-ratio:3 / 4;fill:#899cba;background:#e4eaf2}.custom-before-after__frame:last-child .custom-before-after__placeholder{background:#eef2f7}.custom-before-after__label{display:inline-block;max-width:100%;padding:6px 12px;border-radius:var(--rounded-full, 999px);text-align:center;color:var(--custom-before-after-label-text);background:var(--custom-before-after-label-background);font-size:var(--custom-text-label, 12px);font-weight:600;line-height:1.4;overflow-wrap:anywhere}.custom-before-after__frame>.custom-before-after__label{position:absolute;inset:auto auto 12px 12px;max-width:calc(100% - 24px)}.custom-before-after__details{order:0;display:flex;flex-direction:column;gap:calc(16px * var(--custom-space-group-scale, 1));width:100%;max-width:720px;margin-inline:auto;text-align:center;overflow-wrap:anywhere}.custom-before-after__heading{font-family:var(--heading-font-family);text-transform:var(--heading-text-transform);margin:0;color:var(--custom-before-after-heading);font-size:calc(28px * var(--custom-type-section-scale));font-weight:600;line-height:1.2;letter-spacing:calc(var(--heading-letter-spacing) + -.02em)}.custom-before-after__heading .custom-section-heading-accent{color:var(--custom-section-heading-accent, #a65d00);font-style:italic;text-decoration:none}.custom-before-after__text{font-size:var(--custom-text-body, 16px);font-weight:400;line-height:1.65}.custom-before-after__heading+.custom-before-after__text,.custom-before-after__author{margin-top:calc(16px * var(--custom-space-copy-scale, 1))}.custom-before-after__text>*,.custom-before-after__footer p,.custom-before-after__note>*{margin:0}.custom-before-after__text>*+*,.custom-before-after__note>*+*{margin-top:calc(16px * var(--custom-space-copy-scale, 1))}.custom-before-after__text ul,.custom-before-after__text ol,.custom-before-after__note ul,.custom-before-after__note ol{padding-inline-start:1.5em}.custom-before-after__author,.custom-before-after__footer{font-size:var(--custom-text-small, 14px);font-weight:400;line-height:1.5}.custom-before-after__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(10px * var(--custom-space-group-scale, 1));margin:calc(var(--custom-before-after-tag-space) * var(--custom-space-group-scale, 1)) 0 0;padding:0;list-style:none}.custom-before-after__tags:first-child{margin-top:0}.custom-before-after__tag{display:inline-flex;align-items:center;gap:calc(8px * var(--custom-space-item-scale, 1));max-width:100%;padding:8px 12px;border-radius:var(--rounded-full, 999px);box-shadow:inset 0 0 0 1px #c4d3ea;background:var(--custom-before-after-tag-background);color:var(--custom-before-after-tag-text);font-size:var(--custom-text-label, 12px);font-weight:600;line-height:1.4}.custom-before-after__tag-icon{flex:0 0 8px;width:8px;height:8px}.custom-before-after__tag-icon path{stroke-width:16}.custom-before-after__footer{margin-top:auto}.custom-before-after__note:not(:first-child){margin-top:calc(16px * var(--custom-space-copy-scale, 1))}.custom-before-after__details a{color:var(--custom-before-after-heading);text-decoration:underline;text-underline-offset:3px}.custom-before-after__details a:focus-visible{outline:2px solid currentColor;outline-offset:4px}@media screen and (max-width:699px){.custom-before-after{gap:calc(24px * var(--custom-space-group-scale, 1));background:var(--custom-before-after-background)}.custom-before-after:has(.custom-before-after__tags){gap:calc(var(--custom-before-after-tag-space) * var(--custom-space-group-scale, 1))}.custom-before-after__details{order:0;padding:0;gap:calc(16px * var(--custom-space-group-scale, 1));text-align:center}.custom-before-after__viewer{order:1}.custom-before-after__tags{justify-content:center;gap:calc(8px * var(--custom-space-group-scale, 1))}.custom-before-after__tag{flex:0 0 auto;white-space:nowrap}.custom-before-after__tags:has(>.custom-before-after__tag:nth-child(3):last-child)>.custom-before-after__tag{justify-content:center;gap:calc(4px * var(--custom-space-item-scale, 1));padding-inline:10px;overflow-wrap:normal}.custom-before-after__media{border-radius:8px}.custom-before-after[data-custom-ready] .custom-before-after__media{grid-template-columns:minmax(0,1fr);touch-action:pan-y}.custom-before-after[data-custom-ready] .custom-before-after__frame{grid-area:1 / 1}.custom-before-after[data-custom-ready] .custom-before-after__frame[data-custom-active=false]{visibility:hidden;pointer-events:none}.custom-before-after__frame>img{object-fit:contain;object-position:center}.custom-before-after__frame>.custom-before-after__label{inset:auto auto 16px 16px}.custom-before-after[data-custom-ready] .custom-before-after__controls{display:flex;align-items:center;gap:8px;margin-bottom:16px}.custom-before-after__switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:1;min-width:0;gap:4px;padding:4px;background:var(--custom-before-after-panel);border-radius:var(--rounded-full, 999px)}.custom-before-after__switch-button,.custom-before-after__playback{min-height:44px;border:0;border-radius:var(--rounded-full, 999px);color:var(--custom-before-after-control-text, var(--custom-before-after-heading));background:transparent;cursor:pointer}.custom-before-after__switch-button{padding:10px 12px;text-align:center;overflow-wrap:anywhere;font-size:var(--custom-text-small, 14px);font-weight:600;line-height:1.4}.custom-before-after__switch-button[aria-pressed=true]{background:var(--custom-before-after-label-background);color:var(--custom-before-after-label-text)}.custom-before-after__playback{display:grid;place-items:center;flex:0 0 44px;width:44px;padding:0;background:var(--custom-before-after-panel)}.custom-before-after__playback [hidden]{display:none}.custom-before-after__controls button:focus-visible{outline:2px solid var(--custom-before-after-heading);outline-offset:2px}}@media screen and (min-width:700px){.custom-before-after__surface{padding-inline:40px}.custom-before-after{--custom-before-after-tag-space: 32px;gap:calc(48px * var(--custom-space-group-scale, 1))}.custom-before-after:has(.custom-before-after__tags){gap:calc(var(--custom-before-after-tag-space) * var(--custom-space-group-scale, 1))}.custom-before-after__media{gap:calc(16px * var(--custom-space-group-scale, 1));background:transparent}.custom-before-after__frame{overflow:hidden;border-radius:8px;background:#e4eaf2}.custom-before-after__heading{font-size:calc(36px * var(--custom-type-section-scale))}.custom-before-after__frame>.custom-before-after__label{inset:auto auto 20px 20px;max-width:calc(100% - 40px)}}@media screen and (min-width:1000px){.custom-before-after__surface{padding-inline:48px}.custom-before-after__heading{font-size:calc(40px * var(--custom-type-section-scale))}}
/*# sourceMappingURL=/cdn/shop/t/59/assets/custom-before-after-image.css.map */