/* Same bundled font on both admin preview and the storefront. Bazaro loads
 * these files on the website; the admin otherwise silently fell back to
 * IRANSans/Tahoma, shifting the visible bounds of Persian text. */
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../fonts/Vazirmatn/static/Vazirmatn-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
/* Shared slider overlay geometry: admin canvas and storefront use the same box model. */
.bb-role-slider-shell .bb-role-slide__overlay.bb-slide-overlay-content,
.bb-slider-overlay-node.bb-slide-overlay-content {
    box-sizing:border-box!important;
    display:block;
    font-family:var(--bb-overlay-font-family,Vazirmatn,Tahoma,Arial,sans-serif)!important;
    width:var(--bb-overlay-width,max-content)!important;
    max-width:calc(100% - 12px)!important;
    min-width:0!important;
    height:var(--bb-overlay-height,auto)!important;
    min-height:0;
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    unicode-bidi:plaintext;
    direction:inherit;
    line-height:1.55;
    text-align:center;
    border:0!important;
    transform:translate(-50%,-50%);
    font-synthesis:none;
}
/* Make both overlay coordinate spaces inherit exactly the same text metrics. */
.bb-role-slider-shell .bb-role-slide__overlay-layer,
.bb-slider-overlay-canvas {font-family:'Vazirmatn',Tahoma,Arial,sans-serif;direction:rtl;}
/* The design canvas is scaled on a separate anchor, not on the animated
 * element. Changing transform/scale on the text itself moves its center and
 * conflicts with hover/entrance animations. Anchor origin is exactly X/Y. */
.bb-role-slider-shell .bb-role-slide__overlay-anchor {
    position:absolute;
    display:block;
    width:max-content;
    height:max-content;
    z-index:2;
    transform:scale(var(--bb-overlay-scale,1));
    transform-origin:0 0;
    pointer-events:none;
}
.bb-role-slider-shell .bb-role-slide__overlay-anchor > .bb-role-slide__overlay.bb-slide-overlay-content {
    position:relative;
    left:auto!important;
    top:auto!important;
    /* The preview constrains a text node to its logical design canvas.
     * The site scales that canvas, NOT the intrinsic max-content line length.
     * Without this limit a long Persian heading becomes one enormous line. */
    max-width:var(--bb-overlay-design-max-width,calc(100vw - 12px))!important;
    pointer-events:auto;
}
.bb-slider-overlay-canvas {position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden;background:#eceff3}
.bb-slider-overlay-preview {position:relative;display:block;width:100%;overflow:hidden;padding:0!important;min-height:0!important;}
.bb-slider-overlay-preview .bb-slider-overlay-preview__image,
.bb-slider-overlay-preview .bb-slider-overlay-preview__video {position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;display:none;object-fit:var(--bb-overlay-preview-fit,cover);pointer-events:none}
.bb-slider-overlay-preview .bb-slider-overlay-stage {position:absolute;inset:0;overflow:hidden;touch-action:none;font-family:'Vazirmatn',Tahoma,Arial,sans-serif!important;direction:rtl}
.bb-slider-overlay-preview .bb-slider-overlay-empty {position:absolute;inset:0}
.bb-slider-overlay-node.bb-slide-overlay-content {outline:1px dashed rgba(255,255,255,.65);background-color:transparent;cursor:grab;user-select:none;}
.bb-slider-overlay-node.bb-slide-overlay-content.bb-slider-overlay-node--button {display:flex!important;align-items:center;justify-content:center;box-shadow:0 7px 20px rgba(0,0,0,.16)}
.bb-role-slider-shell .bb-role-slide__overlay--button.bb-slide-overlay-content {display:flex;align-items:center;justify-content:center;}
.bb-role-slider-shell .bb-role-slide__overlay--button.bb-slide-overlay-content:hover {transform:translate(-50%,-50%) translateY(-1px)}
.bb-role-slider-shell video.carousel_item {width:100%!important;height:100%!important;object-fit:var(--bb-slider-object-fit,cover);display:block;border-radius:inherit}
.bb-role-slide__media-video {position:relative;z-index:1;display:block;width:100%;height:100%;background:#111}
.bb-role-slide__video-link {position:absolute;z-index:6;bottom:18px;inset-inline-end:16px;background:rgba(0,0,0,.64);color:#fff!important;padding:6px 12px;border-radius:7px;font-size:12px;text-decoration:none!important}
@media(max-width:575px){.bb-role-slide__video-link{bottom:9px;inset-inline-end:8px;font-size:10px}}

/* Admin legacy styles use padding:0!important. Restore exact saved values on
 * the shared node so the inspector, preview and storefront all agree. */
.bb-slider-overlay-node.bb-slide-overlay-content {
    padding-top:var(--bb-overlay-padding-top,0px)!important;
    padding-right:var(--bb-overlay-padding-right,0px)!important;
    padding-bottom:var(--bb-overlay-padding-bottom,0px)!important;
    padding-left:var(--bb-overlay-padding-left,0px)!important;
    margin-top:var(--bb-overlay-margin-top,0px)!important;
    margin-right:var(--bb-overlay-margin-right,0px)!important;
    margin-bottom:var(--bb-overlay-margin-bottom,0px)!important;
    margin-left:var(--bb-overlay-margin-left,0px)!important;
}

/* Frontend honors the same entry effects as the admin visual editor. */
.bb-role-slider-shell .bb-role-slide__overlay.bb-slide-overlay-content {
    animation-duration: var(--bb-overlay-duration,.7s);
    animation-delay: var(--bb-overlay-delay,0s);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
.bb-role-slider-shell .bb-overlay-effect--fade {animation-name:bbOverlayFade}
.bb-role-slider-shell .bb-overlay-effect--fade-up {animation-name:bbOverlayFadeUp}
.bb-role-slider-shell .bb-overlay-effect--fade-down {animation-name:bbOverlayFadeDown}
.bb-role-slider-shell .bb-overlay-effect--slide-left {animation-name:bbOverlaySlideLeft}
.bb-role-slider-shell .bb-overlay-effect--slide-right {animation-name:bbOverlaySlideRight}
.bb-role-slider-shell .bb-overlay-effect--zoom-in {animation-name:bbOverlayZoomIn}
.bb-role-slider-shell .bb-overlay-effect--zoom-out {animation-name:bbOverlayZoomOut}
.bb-role-slider-shell .bb-overlay-effect--bounce {animation-name:bbOverlayBounce}
@keyframes bbOverlayFade {from{opacity:0}to{opacity:var(--bb-overlay-opacity,1)}}
@keyframes bbOverlayFadeUp {from{opacity:0;transform:translate(-50%,calc(-50% + 25px))}to{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%)}}
@keyframes bbOverlayFadeDown {from{opacity:0;transform:translate(-50%,calc(-50% - 25px))}to{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%)}}
@keyframes bbOverlaySlideLeft {from{opacity:0;transform:translate(calc(-50% + 35px),-50%)}to{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%)}}
@keyframes bbOverlaySlideRight {from{opacity:0;transform:translate(calc(-50% - 35px),-50%)}to{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%)}}
@keyframes bbOverlayZoomIn {from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%) scale(1)}}
@keyframes bbOverlayZoomOut {from{opacity:0;transform:translate(-50%,-50%) scale(1.25)}to{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%) scale(1)}}
@keyframes bbOverlayBounce {0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}55%{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,calc(-50% + 8px)) scale(1.02)}100%{opacity:var(--bb-overlay-opacity,1);transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce) {
 .bb-role-slider-shell .bb-role-slide__overlay.bb-slide-overlay-content {animation-duration:.01ms!important;animation-delay:0ms!important}
}

/* Responsive slider imagery uses <picture>; this wrapper must occupy exactly
 * the same size and crop region as the former directly-rendered <img>. */
.bb-role-slider-shell .bb-role-slide__picture {
    position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;
    border-radius:inherit;overflow:hidden;
}
.bb-role-slider-shell .bb-role-slide__picture > img.carousel_item {
    position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
    border-radius:inherit;object-fit:var(--bb-slider-object-fit,cover);
}

/* The admin preview draws overlays at their saved reference resolution.
 * A separate logical canvas scales to the small panel without altering font,
 * width, height, X/Y or text wrapping relative to the storefront. */
.bb-slider-overlay-preview {overflow:hidden!important;position:relative!important;min-height:0!important;}
.bb-slider-overlay-preview > .bb-slider-overlay-canvas {
    position:absolute!important;inset:0 auto auto 0!important;display:block!important;
    transform-origin:top left!important;overflow:hidden!important;
    direction:rtl;background:#111;
}
.bb-slider-overlay-canvas > .bb-slider-overlay-stage {
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
.bb-slider-preview-anchor {
    position:absolute;display:block;width:max-content;height:max-content;z-index:3;
    transform:scale(var(--bb-overlay-scale,1));transform-origin:0 0;
    pointer-events:none;
}
.bb-slider-preview-anchor > .bb-slider-overlay-node.bb-slide-overlay-content {
    position:relative!important;left:auto!important;top:auto!important;
    width:var(--bb-overlay-width,max-content)!important;
    max-width:var(--bb-overlay-design-max-width,calc(100vw - 12px))!important;
    height:var(--bb-overlay-height,auto)!important;
    white-space:pre-wrap!important;overflow-wrap:anywhere!important;
    word-break:normal!important;pointer-events:auto;
    padding-top:var(--bb-overlay-padding-top,0px)!important;
    padding-right:var(--bb-overlay-padding-right,0px)!important;
    padding-bottom:var(--bb-overlay-padding-bottom,0px)!important;
    padding-left:var(--bb-overlay-padding-left,0px)!important;
    margin-top:var(--bb-overlay-margin-top,0px)!important;
    margin-right:var(--bb-overlay-margin-right,0px)!important;
    margin-bottom:var(--bb-overlay-margin-bottom,0px)!important;
    margin-left:var(--bb-overlay-margin-left,0px)!important;
}
.bb-slider-overlay-canvas > .bb-slider-overlay-preview__image,
.bb-slider-overlay-canvas > .bb-slider-overlay-preview__video {
    position:absolute;inset:0;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;border:0!important;
    border-radius:0!important;object-fit:var(--bb-slider-object-fit,cover);
}

/* ================= Exact storefront/editor parity v20261026 =================
 * An overlay uses one identical HTML box model, font, width and layout in
 * either environment. The admin only scales its entire logical canvas so
 * inspector outlines must not alter the site's visible content rectangle.
 * Position/scale CSS variables are set by slider-overlay-geometry.js in both.
 */
.bb-role-slider-shell .bb-role-slide__overlay-anchor,
.bb-slider-overlay-preview .bb-slider-preview-anchor {
    position:absolute!important;
    display:block;
    width:max-content!important;
    height:max-content!important;
    transform:scale(var(--bb-overlay-scale,1))!important;
    transform-origin:0 0!important;
    pointer-events:none;
    z-index:3;
}
.bb-role-slider-shell .bb-role-slide__overlay-anchor > .bb-role-slide__overlay.bb-slide-overlay-content,
.bb-slider-overlay-preview .bb-slider-preview-anchor > .bb-role-slide__overlay.bb-slide-overlay-content {
    position:relative!important;
    left:auto!important;
    top:auto!important;
    display:block!important;
    box-sizing:border-box!important;
    width:var(--bb-overlay-width,max-content)!important;
    max-width:var(--bb-overlay-design-max-width,calc(100vw - 12px))!important;
    min-width:0!important;
    height:var(--bb-overlay-height,auto)!important;
    min-height:0!important;
    font-family:var(--bb-overlay-font-family,Vazirmatn,Tahoma,Arial,sans-serif)!important;
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    unicode-bidi:plaintext;
    direction:inherit;
    transform:translate(-50%,-50%);
    padding-top:var(--bb-overlay-padding-top,0px)!important;
    padding-right:var(--bb-overlay-padding-right,0px)!important;
    padding-bottom:var(--bb-overlay-padding-bottom,0px)!important;
    padding-left:var(--bb-overlay-padding-left,0px)!important;
    margin-top:var(--bb-overlay-margin-top,0px)!important;
    margin-right:var(--bb-overlay-margin-right,0px)!important;
    margin-bottom:var(--bb-overlay-margin-bottom,0px)!important;
    margin-left:var(--bb-overlay-margin-left,0px)!important;
    border:0!important;
    pointer-events:auto;
    font-synthesis:none;
}
.bb-role-slider-shell .bb-role-slide__overlay-anchor > .bb-role-slide__overlay--button.bb-slide-overlay-content,
.bb-slider-overlay-preview .bb-slider-preview-anchor > .bb-role-slide__overlay--button.bb-slide-overlay-content {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:38px!important;
    box-shadow:0 7px 20px rgba(0,0,0,.16);
}
/* Selection outlines never change text metrics; hidden until hovered/dragged,
 * so the idle preview visually matches the actual storefront rendering. */
.bb-slider-overlay-preview .bb-slider-preview-anchor > .bb-slider-overlay-node.bb-slide-overlay-content {
    outline:none;
    box-shadow:none;
}
.bb-slider-overlay-preview .bb-slider-preview-anchor > .bb-slider-overlay-node--button.bb-slide-overlay-content {
    box-shadow:0 7px 20px rgba(0,0,0,.16);
}
.bb-slider-overlay-preview .bb-slider-preview-anchor > .bb-slider-overlay-node.bb-slide-overlay-content:hover,
.bb-slider-overlay-preview .bb-slider-preview-anchor > .bb-slider-overlay-node.bb-slide-overlay-content.is-dragging {
    outline:1px dashed rgba(255,255,255,.9);
    outline-offset:2px;
}