/* Retail theme 7 uses the shared Weby stylesheet; these rules only adapt its grids to editable React sections. */
.fashion-retail{color:var(--theme-text);background:var(--theme-background);font-family:var(--theme-font-family)}
.fashion-retail .fashion-section{position:relative}
.fashion-retail .fashion-section-title{gap:24px;flex-wrap:wrap;margin-bottom:30px}
.fashion-retail .fashion-section-title h5{text-transform:uppercase}
.fashion-retail .fashion-section-title .sub-title{flex-basis:100%}
.fashion-retail .fashion-grid{display:grid;grid-template-columns:repeat(var(--columns,4),minmax(0,1fr));gap:30px}
.fashion-retail .fashion-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--columns,4) - 1)*30px)/var(--columns,4));gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.fashion-retail .fashion-carousel::-webkit-scrollbar{display:none}
.fashion-retail .fashion-item{min-width:0;scroll-snap-align:start}
.fashion-retail .card-product{width:100%;margin:0}
.fashion-retail .collection-image img{display:block;width:100%;height:100%;object-fit:cover}
.fashion-retail .collection-title h6{font-size:16px;line-height:24px;margin-top:15px;font-weight:400}
.fashion-retail .card-product-info .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fashion-retail .widget-tab-5 button{background:none;border:0;padding:0 0 6px;font:inherit;color:inherit;border-bottom:2px solid transparent}
.fashion-retail .widget-tab-5 button.active{border-color:currentColor}
.fashion-hero{height:var(--hero-height,500px);position:relative;overflow:hidden}
.fashion-hero .fashion-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.fashion-hero .fashion-slide.is-active{opacity:1;visibility:visible}
.fashion-hero picture,.fashion-hero picture img,.fashion-hero video{display:block;width:100%;height:100%;object-fit:cover}
.fashion-hero .box-content{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}
.fashion-hero .box-content a{pointer-events:auto;margin-top:24px}
.fashion-hero .card-box-2{max-width:700px}
.fashion-hero .card-box-2 p{font-size:18px;margin-bottom:16px}
.fashion-hero .card-box-2 h1{font-size:clamp(32px,5vw,68px);line-height:1.1;color:inherit}
.fashion-hero-pagination{position:absolute;inset-inline:0;bottom:22px;display:flex;justify-content:center;align-items:center;gap:9px;z-index:2}
.fashion-hero-pagination button{width:8px;height:8px;padding:0;border:0;border-radius:100%;background:#fff8;box-shadow:0 0 0 1px #0002}
.fashion-hero-pagination button.active{background:#fff;outline:1px solid #fff;outline-offset:4px}
.fashion-hero-pagination .fashion-autoplay{width:24px;height:24px;background:#fff;color:#222;font-size:12px;margin-inline-start:10px}
.fashion-carousel-controls{display:flex;justify-content:center;gap:12px;margin-top:28px}
.fashion-retail .fashion-promo img{width:100%;height:auto;display:block;margin-bottom:24px}
.fashion-retail .fashion-copy{max-width:850px;line-height:1.8;margin-bottom:24px;white-space:pre-line;overflow-wrap:anywhere}
.fashion-preview-note{padding:14px;text-align:center;background:#fff4cc;color:#272727}
@media(max-width:991px){.fashion-retail .fashion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 15px}.fashion-retail .fashion-carousel{grid-auto-columns:calc((100% - 15px)/2);gap:15px}.fashion-retail .fashion-section-title{gap:16px}.fashion-retail .widget-tab-5{width:100%;overflow:auto;flex-wrap:nowrap;justify-content:flex-start;gap:20px}.fashion-retail .widget-tab-5 li{white-space:nowrap}.fashion-retail .fashion-section-title h5{font-size:20px}}
@media(max-width:767px){.fashion-hero{height:var(--hero-mobile-height,clamp(230px,70vw,420px))}.fashion-hero .card-box-2 h1{font-size:32px}.fashion-hero .card-box-2 p{font-size:14px}.fashion-retail .fashion-section{padding-block:var(--fashion-section-spacing,30px)!important}.fashion-retail .fashion-section:has(.fashion-hero){padding:0!important}.fashion-retail .fashion-section-title{margin-bottom:24px}.fashion-retail .collection-title h6{font-size:16px;margin-top:12px}.fashion-retail .fashion-carousel-controls{margin-top:20px}}

            .fashion-retail .flat-title {
                align-items: center;
                justify-content: center !important;
                text-align: center;
            }

            .fashion-retail .flat-title h5 {
                color: var(--theme-box-text, var(--theme-text, #000)) !important;
                display: inline-flex;
                font-size: clamp(24px, 3vw, 36px) !important;
                font-weight: 600 !important;
                line-height: 1.15 !important;
                margin: 0;
                padding: 0 18px 14px;
                position: relative;
                text-align: center;
                text-transform: none !important;
                z-index: 1;
            }

            .fashion-retail .flat-title h5::before {
                content: none;
            }

            .fashion-retail.fashion-highlight-heading .flat-title h5::before {
                background: var(--theme-button-background, var(--theme-box-background, #f8f8f8)) !important;
                border-radius: 999px;
                bottom: 8px;
                content: "";
                height: 14px;
                opacity: 0.16;
                left: 50%;
                position: absolute;
                transform: translateX(-50%) rotate(-1deg);
                width: calc(100% + 22px);
                z-index: -1;
            }

            .fashion-retail .flat-title h5::after {
                background: var(--theme-box-text, var(--theme-text, #000)) !important;
                border-radius: 999px;
                bottom: 0;
                content: "";
                height: 3px;
                left: 50%;
                position: absolute;
                transform: translateX(-50%);
                width: 54px;
            }

            .fashion-retail .flat-title .sub-title {
                color: color-mix(in srgb, var(--theme-box-text, var(--theme-text, #000)) 68%, transparent);
                font-size: 14px;
                line-height: 1.6;
                margin: 12px auto 0;
                max-width: 560px;
                text-align: center;
            }

            .fashion-retail .flat-title i {
                display: none !important;
            }

            @media (max-width: 575px) {
                .fashion-retail .flat-title h5 {
                    font-size: 24px !important;
                    padding-bottom: 12px;
                }

                .fashion-retail .flat-title .sub-title {
                    font-size: 13px;
                    margin-top: 10px;
                }
            }

/* Product carousels use scrolling navigation at all screen sizes. */
.fashion-section:not(.fashion-collections) .fashion-carousel-controls{display:flex}

/* Optional editor gaps preserve responsive defaults when no value is saved. */
.fashion-retail .fashion-section[style*="--fashion-category-row-gap"] :is(.fashion-items,.catalogue-category-grid,.dynamic-home-track) { row-gap: var(--fashion-category-row-gap) !important; }
.fashion-retail .fashion-section[style*="--fashion-category-column-gap"] :is(.fashion-items,.catalogue-category-grid,.dynamic-home-track) { column-gap: var(--fashion-category-column-gap) !important; }

/* Keep category carousel navigation beside the cards. */
.fashion-retail .fashion-category-carousel-frame { position:relative; }
.fashion-retail .fashion-category-carousel-frame>.fashion-carousel-controls {
    position:absolute;
    inset-inline:0;
    top:45%;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    margin:0;
    padding-inline:6px;
    pointer-events:none;
    z-index:3;
}
.fashion-retail .fashion-category-carousel-frame>.fashion-carousel-controls button {
    pointer-events:auto;
    width:44px;
    height:44px;
    min-width:44px;
    background:var(--theme-button-background);
    color:var(--theme-button-text);
    border:1px solid rgba(127,127,127,.2);
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}
[dir=rtl] .fashion-category-carousel-frame>.fashion-carousel-controls .icon { transform:scaleX(-1); }

.fashion-retail .fashion-text-section .fashion-section-title {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    margin-bottom:24px;
}
.fashion-retail .fashion-text-section .fashion-section-title .sub-title { flex-basis:auto; margin:0; }
.fashion-retail .fashion-text-section .fashion-promo { text-align:center; }
.fashion-retail .fashion-text-section .fashion-copy { width:100%;max-width:850px;margin:0 auto 24px;text-align:center; }
.fashion-retail .fashion-text-section .fashion-copy:last-child { margin-bottom:0; }

.fashion-retail .fashion-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.fashion-retail .fashion-feature-card{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;padding:20px 16px;border:1px solid #0001;border-radius:10px;color:var(--theme-text);text-align:start}
.fashion-retail .fashion-feature-card>i{font-size:30px;line-height:1;flex-shrink:0}
.fashion-retail .fashion-feature-card h3{margin:0 0 5px;font-size:15px;line-height:1.5;font-weight:600}
.fashion-retail .fashion-feature-card p{margin:0;font-size:13px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
@media(max-width:575px){.fashion-retail .fashion-features-grid{grid-template-columns:1fr;gap:12px}}

/* Lift the banner action slightly without moving its heading or image. */
.fashion-storefront .fashion-hero .box-content a.tf-btn { position: relative; top: -36px; }
@media(max-width:767px){.fashion-storefront .fashion-hero .box-content a.tf-btn { top: -24px; }}