/* =========================================================
   RAFYZO Storefront Media Controls
   Banner width, gallery layout and responsive media ratios.
   Loaded after storefront.css to keep these controls isolated.
   ========================================================= */
.px-sf {
    overflow-x:clip
}

.px-sf-header.is-banner-attached {
    border-bottom-color:transparent!important
}

.px-sf-main.has-attached-main-banner {
    padding-top:0!important
}

.px-sf-main-banner {
    --px-main-gutter-current:var(--px-main-gutter-desktop,0px);
    width:calc(100% - (var(--px-main-gutter-current) * 2));
    margin-inline:var(--px-main-gutter-current)
}

.px-sf-main-banner.px-sf-banner-width-desktop-full {
    width:100vw;
    margin-inline:calc(50% - 50vw);
    border-radius:0
}

.px-sf-main-banner.px-sf-banner-width-desktop-full .px-sf-banner-slide {
    border-radius:0
}

.px-sf-main.has-attached-main-banner>.px-sf-main-banner {
    margin-top:0
}

.px-sf-gallery {
    --px-gallery-gap-current:var(--px-gallery-gap-desktop,16px);
    --px-gallery-ratio-current:var(--px-gallery-ratio-desktop,1/1);
    position:relative;
    margin-inline:auto!important
}

.px-sf-gallery-width-wide {
    max-width:1000px
}

.px-sf-gallery-width-medium {
    max-width:760px
}

.px-sf-gallery-layout-grid {
    overflow:visible!important;
    border-radius:0!important
}

.px-sf-gallery-grid {
    display:grid;
    grid-template-columns:repeat(var(--desktop-count,4),minmax(0,1fr));
    gap:var(--px-gallery-gap-current)
}

.px-sf-gallery-layout-carousel .px-sf-slider-track {
    gap:var(--px-gallery-gap-current)!important
}

.px-sf-gallery-layout-carousel .px-sf-slider-track>* {
    flex-basis:calc((100% - (var(--desktop-count,4) - 1)*var(--px-gallery-gap-current))/var(--desktop-count,4))!important
}

.px-sf-gallery-slide,.px-sf-gallery-slide>a {
    display:block;
    min-width:0;
    height:auto
}

.px-sf-gallery-slide {
    overflow:hidden;
    border-radius:18px;
    background:#f3f1f6
}

.px-sf-gallery-slide img {
    display:block;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:var(--px-gallery-ratio-current)!important;
    object-fit:cover!important;
    border-radius:0!important
}

.px-sf-gallery-fit-contain .px-sf-gallery-slide img {
    object-fit:contain!important;
    background:#fff
}

.px-sf-gallery-arrow {
    position:absolute;
    top:50%;
    z-index:8;
    width:46px;
    height:46px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.72);
    border-radius:50%;
    background:rgba(29,22,48,.68);
    color:#fff;
    box-shadow:0 12px 30px rgba(24,14,48,.24);
    backdrop-filter:blur(10px);
    transform:translateY(-50%);
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,box-shadow .2s ease
}

.px-sf-gallery-arrow svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round
}

.px-sf-gallery-arrow.is-prev {
    left:14px
}

.px-sf-gallery-arrow.is-next {
    right:14px
}

.px-sf-gallery-arrow:hover {
    background:var(--px-sf-primary);
    transform:translateY(-50%) scale(1.06);
    box-shadow:0 16px 34px rgba(35,20,80,.34)
}

.px-sf-gallery-arrow:disabled {
    opacity:.38;
    cursor:not-allowed
}

@media(min-width:701px) and (max-width:1024px) {
    .px-sf-main-banner {
        --px-main-gutter-current:var(--px-main-gutter-tablet,0px)
    }
    .px-sf-main-banner.px-sf-banner-width-desktop-full {
        width:calc(100% - (var(--px-main-gutter-current) * 2));
        margin-inline:var(--px-main-gutter-current);
        border-radius:24px
    }
    .px-sf-main-banner.px-sf-banner-width-desktop-full .px-sf-banner-slide {
        border-radius:24px
    }
    .px-sf-main-banner.px-sf-banner-width-tablet-full {
        width:100vw;
        margin-inline:calc(50% - 50vw);
        border-radius:0
    }
    .px-sf-main-banner.px-sf-banner-width-tablet-full .px-sf-banner-slide {
        border-radius:0
    }
    .px-sf-gallery {
        --px-gallery-gap-current:var(--px-gallery-gap-tablet,10px);
        --px-gallery-ratio-current:var(--px-gallery-ratio-tablet,1/1)
    }
    .px-sf-gallery-grid {
        grid-template-columns:repeat(var(--tablet-count,2),minmax(0,1fr))
    }
    .px-sf-gallery-layout-carousel .px-sf-slider-track>* {
        flex-basis:calc((100% - (var(--tablet-count,2) - 1)*var(--px-gallery-gap-current))/var(--tablet-count,2))!important
    }
}

@media(max-width:700px) {
    .px-sf-main-banner {
        --px-main-gutter-current:var(--px-main-gutter-mobile,0px)
    }
    .px-sf-main-banner.px-sf-banner-width-desktop-full,.px-sf-main-banner.px-sf-banner-width-tablet-full {
        width:calc(100% - (var(--px-main-gutter-current) * 2));
        margin-inline:var(--px-main-gutter-current);
        border-radius:18px
    }
    .px-sf-main-banner.px-sf-banner-width-desktop-full .px-sf-banner-slide,.px-sf-main-banner.px-sf-banner-width-tablet-full .px-sf-banner-slide {
        border-radius:18px
    }
    .px-sf-main-banner.px-sf-banner-width-mobile-full {
        width:100vw;
        margin-inline:calc(50% - 50vw);
        border-radius:0
    }
    .px-sf-main-banner.px-sf-banner-width-mobile-full .px-sf-banner-slide {
        border-radius:0
    }
    .px-sf-gallery {
        --px-gallery-gap-current:var(--px-gallery-gap-mobile,10px);
        --px-gallery-ratio-current:var(--px-gallery-ratio-mobile,1/1)
    }
    .px-sf-gallery-grid {
        grid-template-columns:repeat(var(--mobile-count,1),minmax(0,1fr))
    }
    .px-sf-gallery-layout-carousel .px-sf-slider-track>* {
        flex-basis:calc((100% - (var(--mobile-count,1) - 1)*var(--px-gallery-gap-current))/var(--mobile-count,1))!important
    }
    .px-sf-gallery-arrow {
        display:none
    }
}

/* =========================================================
   Main banner overlay and owner-only dashboard shortcut
   ========================================================= */
.px-sf-main-banner .px-sf-banner-slide {
    position:relative;
    isolation:isolate;
}


.px-sf-main-banner .px-sf-banner-slide {
    background-image:var(--px-banner-image-desktop)!important;
}

@media(max-width:1024px) {
    .px-sf-main-banner .px-sf-banner-slide {
        background-image:var(--px-banner-image-tablet)!important;
    }
}

@media(max-width:700px) {
    .px-sf-main-banner .px-sf-banner-slide {
        background-image:var(--px-banner-image-mobile)!important;
    }
}

.px-sf-main-banner .px-sf-banner-slide::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:var(--px-banner-overlay-color,#120b24);
    opacity:var(--px-banner-overlay-opacity,.36);
    backdrop-filter:blur(var(--px-banner-overlay-blur,0));
    -webkit-backdrop-filter:blur(var(--px-banner-overlay-blur,0));
    pointer-events:none;
}

.px-sf-main-banner .px-sf-banner-slide > div {
    position:relative;
    z-index:1;
}

.px-sf-owner-dashboard {
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9990;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:46px;
    padding:0 17px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:14px;
    background:linear-gradient(135deg,#6d28ff,#5420cf);
    color:#fff!important;
    text-decoration:none!important;
    font-weight:850;
    box-shadow:0 14px 34px rgba(71,31,160,.3);
    backdrop-filter:blur(12px);
    transition:transform .18s ease,box-shadow .18s ease;
}

.px-sf-owner-dashboard:hover {
    transform:translateY(-2px);
    box-shadow:0 18px 40px rgba(71,31,160,.38);
}

.px-sf-owner-dashboard svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:700px) {
    .px-sf-owner-dashboard {
        right:12px;
        bottom:12px;
        min-height:43px;
        padding:0 14px;
        border-radius:13px;
        font-size:13px;
    }
}