/* Modora («فاشون», Fashion) — child of Furnora: only what differs from the parent lives here.
   Reference: Ecomus index.html (Fashion home) + wpecomus.com/fashion: filled buttons with 3px
   corners, black on hover, white top bar with a hairline. */
body.modora .tf-btn.btn-fill:hover,
body.modora .tf-btn.btn-fill:focus { background-color: #000; border-color: #000; color: #fff; }

/* Fashion photos are busier than the parent's plain room shots: a soft shade keeps the
   white promo headings readable (top shade on the first card, bottom shade on the others). */
body.modora .masonry-layout-v4 .collection-item-v2 .collection-image { position: relative; }
body.modora .masonry-layout-v4 .collection-item-v2 .collection-image::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
}
body.modora .masonry-layout-v4 .item-1 .collection-image::after {
    background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0) 50%);
}

/* ── Ecomus Fashion home layout (views/widgets/*, header, footer) ─────────────────────── */

/* Header sits over the slideshow on the home page; the photos get a light wash on the
   reading side so the black heading and menu stay readable on any photo. */
body.modora #header.md-header-over { position: relative; }
body.modora .md-slider-fashion .wrap-slider { position: relative; }
body.modora .md-slider-fashion .wrap-slider::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to left, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,0) 60%),
                linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0) 18%);
}
[dir="ltr"] body.modora .md-slider-fashion .wrap-slider::before,
html[dir="ltr"] body.modora .md-slider-fashion .wrap-slider::before {
    background: linear-gradient(to right, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 35%, rgba(255,255,255,0) 60%),
                linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0) 18%);
}
body.modora .md-slider-fashion .wrap-slider .box-content { z-index: 2; }
body.modora .md-slider-fashion .wrap-pagination { z-index: 3; }
body.modora #header.md-header-solid { border-bottom: 1px solid var(--line, #ebebeb); }

/* Shop by categories: rounded cards like the demo */
body.modora .flat-categorie .collection-item .collection-image,
body.modora .flat-categorie .discovery-new-item { border-radius: 10px; overflow: hidden; }

/* Product grid: portrait cards with rounded photos */
body.modora .flat-seller .card-product .card-product-wrapper { border-radius: 10px; overflow: hidden; }

/* Footer: white with a hairline on top, as in the Fashion demo */
body.modora .md-footer-fashion { background: #fff; border-top: 1px solid var(--line, #ebebeb); }

/* Product cards: the Fashion demo's tall 1:1.4 photo (the parent squares them for gadget shots
   with text baked in; clothes are shot on models, portrait). */
body.modora .card-product .card-product-wrapper { aspect-ratio: 1 / 1.4; background-color: #f5f5f5; }
body.modora .card-product .card-product-wrapper img { object-fit: cover; }

/* Sale price in red next to the struck-through old price, as in the Fashion demo */
body.modora .card-product .price:has(del) > bdi { color: #db1215; }
body.modora .card-product .price del { color: #909090; margin-inline-end: 6px; }