.sharq-before-after,.sharq-before-after *,.sharq-before-after *:before,.sharq-before-after *:after{box-sizing:border-box}.sharq-before-after{--sharq-ba-orange: #f05a1a;--sharq-ba-orange-dark: #c9440c;--sharq-ba-cream: #f6ebdd;--sharq-ba-paper: #fff9f2;--sharq-ba-charcoal: #232323;--sharq-ba-black: #111111;--sharq-ba-sand: #d6b891;position:relative;overflow:hidden;width:100%;padding:var(--sharq-ba-padding-top) 20px var(--sharq-ba-padding-bottom);color:var(--sharq-ba-text, var(--sharq-ba-charcoal));background:radial-gradient(circle at 8% 12%,rgba(240,90,26,.09),transparent 26%),linear-gradient(135deg,var(--sharq-ba-background, var(--sharq-ba-cream)) 0%,#fff9f2 100%);isolation:isolate}.sharq-before-after:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.38;background-image:linear-gradient(rgba(35,35,35,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(35,35,35,.035) 1px,transparent 1px);background-size:42px 42px}.sharq-before-after__container{width:min(100%,var(--sharq-ba-max-width, 1400px));margin-inline:auto}.sharq-before-after__header{max-width:820px;margin:0 auto clamp(24px,3vw,42px);text-align:center}.sharq-before-after__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--sharq-ba-orange);font-size:clamp(12px,1vw,15px);font-weight:800;letter-spacing:.04em}.sharq-before-after__eyebrow:before,.sharq-before-after__eyebrow:after{content:"";width:24px;height:2px;background:currentColor}.sharq-before-after__heading{margin:0;color:inherit;font-size:clamp(30px,4vw,56px);font-weight:900;line-height:1.16;letter-spacing:-.035em}.sharq-before-after__description{max-width:690px;margin:14px auto 0;color:#232323b8;font-size:clamp(14px,1.25vw,18px);line-height:1.8}.sharq-before-after__description p{margin:0}.sharq-before-after__frame{position:relative;width:100%;aspect-ratio:1672 / 940;overflow:hidden;border:1px solid rgba(35,35,35,.14);border-radius:var(--sharq-ba-radius, 24px);background:var(--sharq-ba-paper);cursor:ew-resize;direction:ltr;touch-action:pan-y;user-select:none;-webkit-user-select:none}.sharq-before-after__frame--shadow{box-shadow:0 26px 62px #11111129,0 3px #ffffffad inset}.sharq-before-after__frame.is-dragging{cursor:grabbing}.sharq-before-after__layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.sharq-before-after__layer--after{z-index:1}.sharq-before-after__layer--before{z-index:2;clip-path:inset(0 calc(100% - var(--sharq-ba-position, 50%)) 0 0)}.sharq-before-after__image{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none}.sharq-before-after__divider{position:absolute;top:0;bottom:0;left:var(--sharq-ba-position, 50%);z-index:4;width:3px;background:var(--sharq-ba-orange);box-shadow:0 0 0 1px #1111111a,0 0 18px #f05a1a57;transform:translate(-50%);pointer-events:none}.sharq-before-after__handle{position:absolute;top:50%;left:var(--sharq-ba-position, 50%);z-index:6;display:grid;place-items:center;width:58px;height:58px;padding:0;border:3px solid var(--sharq-ba-orange);border-radius:50%;color:var(--sharq-ba-cream);background:var(--sharq-ba-handle, var(--sharq-ba-charcoal));box-shadow:0 9px 24px #1111114d;transform:translate(-50%,-50%);transition:box-shadow .18s ease,scale .18s ease,background-color .18s ease;cursor:ew-resize;touch-action:none}.sharq-before-after__handle:hover{background:var(--sharq-ba-black);box-shadow:0 11px 30px #11111161;scale:1.04}.sharq-before-after__handle:focus-visible{outline:4px solid var(--sharq-ba-paper);outline-offset:3px;box-shadow:0 0 0 7px var(--sharq-ba-orange),0 11px 30px #11111157}.sharq-before-after__handle-icon{display:grid;place-items:center;color:var(--sharq-ba-orange)}.sharq-before-after__label{position:absolute;top:clamp(12px,2vw,24px);z-index:5;display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:9px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:var(--sharq-ba-paper);background:#111111d1;box-shadow:0 8px 24px #1113;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:clamp(12px,1.1vw,15px);font-weight:800;line-height:1;pointer-events:none}.sharq-before-after__label--before{left:clamp(12px,2vw,24px);border-color:#f05a1a7a}.sharq-before-after__label--after{right:clamp(12px,2vw,24px);color:var(--sharq-ba-charcoal);border-color:#f05a1a57;background:#fff9f2e6}.sharq-before-after__empty{display:grid;min-height:240px;place-items:center;padding:30px;border:1px dashed rgba(240,90,26,.55);border-radius:var(--sharq-ba-radius, 24px);color:var(--sharq-ba-charcoal);background:var(--sharq-ba-paper);text-align:center}@media(max-width:749px){.sharq-before-after{padding-right:12px;padding-left:12px}.sharq-before-after__header{margin-bottom:20px;padding-inline:6px}.sharq-before-after__heading{font-size:clamp(27px,8vw,38px)}.sharq-before-after__description{margin-top:10px;font-size:14px;line-height:1.7}.sharq-before-after__frame{border-radius:min(var(--sharq-ba-radius, 24px),18px)}.sharq-before-after__handle{width:48px;height:48px;border-width:2px}.sharq-before-after__handle-icon svg{width:23px;height:auto}.sharq-before-after__label{top:10px;min-width:54px;padding:7px 11px;font-size:11px}.sharq-before-after__label--before{left:10px}.sharq-before-after__label--after{right:10px}}@media(prefers-reduced-motion:reduce){.sharq-before-after__handle{transition:none}}@media screen and (min-width:990px){.sharq-before-after{padding:16px 20px}.sharq-before-after__container{display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(14px,1.6vh,22px);width:min(100%,var(--sharq-ba-max-width, 1400px),calc((100svh - 32px) * 16 / 9));aspect-ratio:16 / 9;height:auto;max-height:calc(100svh - 32px);min-height:0;margin-inline:auto;overflow:hidden}.sharq-before-after__header{max-width:820px;margin:0 auto}.sharq-before-after__eyebrow{margin-bottom:5px;font-size:clamp(10px,.8vw,13px)}.sharq-before-after__heading{font-size:clamp(30px,3vw,48px);line-height:1.1}.sharq-before-after__description{margin-top:7px;font-size:clamp(12px,.9vw,15px);line-height:1.55}.sharq-before-after__frame{width:100%;height:100%;min-height:0;aspect-ratio:auto}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/sharq-before-after.css.map */