/* Nadara («نضارة») — Ecomus home-skincare, child of Modora (Fashion). Only what differs lives here. */

/* Default top-bar colour (Furnora's CSS sets its own brown); a colour saved in Appearance → Colors still wins. */
body.nadara { --campaign-bar-bg: #f37249; }

/* Skincare product photos are near-square on a soft background (home-skincare cards). */
body.nadara .card-product .card-product-wrapper { aspect-ratio: 1 / 1.07; border-radius: 10px; background-color: #f2f0ea; }
body.nadara .card-product .card-product-info { text-align: center; align-items: center; }

/* Announcement bar: one message, arrows at the sides. */
body.nadara .nd-announcement { padding: 10px 0; }
body.nadara .nd-announcement p { margin: 0; font-size: 13px; }
body.nadara .nd-announcement .wrap-announcement-bar-2 { padding: 0 34px; }
body.nadara .nd-announcement .navigation-topbar { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; cursor: pointer; font-size: 11px; z-index: 2; }
body.nadara .nd-announcement .nd-topbar-next { left: 0; }
body.nadara .nd-announcement .nd-topbar-prev { right: 0; }

/* Header over the home slideshow: see-through, white text and icons. */
body.nadara #header.nd-header-over .box-nav-ul .item-link,
body.nadara #header.nd-header-over .nav-icon .nav-icon-item,
body.nadara #header.nd-header-over .nav-icon-item svg { color: #fff; }
body.nadara #header.nd-header-over .logo-header img { filter: brightness(0) invert(1); }
body.nadara #header.nd-header-over .count-box { background: #fff; color: var(--main); }

/* Hero: tall photo, centred white text. */
body.nadara .nd-hero .wrap-slider { position: relative; }
body.nadara .nd-hero .wrap-slider img { width: 100%; height: clamp(420px, 50vw, 760px); object-fit: cover; display: block; }
body.nadara .nd-hero .wrap-slider .box-content { position: absolute; inset: 0; top: 0; transform: none; display: flex; align-items: center; justify-content: center; padding-top: 60px; }
body.nadara .nd-hero .box-content .heading { font-size: clamp(34px, 5vw, 70px); line-height: 1.15; margin-bottom: 14px; }
body.nadara .nd-hero .box-content .heading br { display: none; }
body.nadara .nd-hero .box-content p { font-size: 16px; margin-bottom: 26px; }

/* Product rows: tab names and side arrows. */
body.nadara .nd-products .widget-tab-3 { gap: 40px; margin-bottom: 40px; }
body.nadara .nd-products .widget-tab-3 a { font-size: clamp(20px, 2vw, 28px); color: var(--text-3, #909090); padding-bottom: 6px; border-bottom: 2px solid transparent; }
body.nadara .nd-products .widget-tab-3 a.active { color: var(--main); border-color: var(--main); }
body.nadara .nd-products .tab-pane { display: none; }
body.nadara .nd-products .tab-pane.active { display: block; }
body.nadara .nd-products .wrap-carousel .nav-sw { position: absolute; top: 40%; z-index: 3; }
body.nadara .nd-products .wrap-carousel .nd-next { left: -23px; }
body.nadara .nd-products .wrap-carousel .nd-prev { right: -23px; }
body.nadara .nd-products .card-product { background: #fff; border-radius: 10px; padding-bottom: 20px; }

/* How to use. */
body.nadara .nd-steps { gap: 30px; align-items: stretch; }
body.nadara .nd-steps .content-wrap { padding: clamp(30px, 4vw, 60px); background-color: var(--secondary, #f37249); }
body.nadara .nd-steps .content-wrap .heading { font-size: clamp(28px, 3vw, 42px); margin-bottom: 8px; }
body.nadara .nd-steps ul { margin-top: 30px; }
body.nadara .nd-steps li { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); }
body.nadara .nd-steps li:last-child { border-bottom: 0; }
body.nadara .nd-steps .number { flex: 0 0 44px; height: 44px; border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
body.nadara .nd-steps .video-wrap img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }

/* Values tabs: dark box beside the photo. */
body.nadara .flat-tab-store .widget-tab-3 { gap: 40px; margin-bottom: 40px; }
body.nadara .flat-tab-store .widget-tab-3 a { font-size: clamp(18px, 1.8vw, 24px); color: var(--text-3, #909090); padding-bottom: 6px; border-bottom: 2px solid transparent; }
body.nadara .flat-tab-store .widget-tab-3 a.active { color: var(--main); border-color: var(--main); }
body.nadara .flat-tab-store .tab-pane { display: none; }
body.nadara .flat-tab-store .tab-pane.active { display: block; }
body.nadara .nd-store { background: var(--main); }
body.nadara .nd-store .store-img img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
body.nadara .nd-store .store-item-info { padding: clamp(30px, 4vw, 60px); }
body.nadara .nd-store .store-heading { font-size: clamp(26px, 3vw, 40px); margin-bottom: 16px; }

/* Before and after: drag the handle. */
body.nadara .nd-compare { --pos: 50%; position: relative; overflow: hidden; border-radius: 20px; max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; }
body.nadara .nd-compare img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.nadara .nd-compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
body.nadara .nd-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
body.nadara .nd-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; pointer-events: none; }
body.nadara .nd-compare-handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--main); font-size: 18px; }
body.nadara .nd-compare-label { position: absolute; top: 16px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; pointer-events: none; }
body.nadara .nd-label-before { left: 16px; }
body.nadara .nd-label-after { right: 16px; }

@media (max-width: 767px) {
    body.nadara .nd-products .wrap-carousel .nav-sw { display: none; }
    body.nadara .nd-steps .video-wrap img { min-height: 260px; }
}

/* Banner with centred text. */
body.nadara .nd-banner-inner { position: relative; overflow: hidden; }
body.nadara .nd-banner-inner > img { width: 100%; height: clamp(360px, 46vw, 620px); object-fit: cover; display: block; }
body.nadara .nd-banner-inner::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
body.nadara .nd-banner-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
body.nadara .nd-banner-content .heading { font-size: clamp(32px, 4.4vw, 64px); margin: 8px 0 12px; }
body.nadara .nd-banner-content p { margin-bottom: 22px; max-width: 560px; }
body.nadara .flat-tab-store .nd-store .tf-btn { width: auto; display: inline-flex; }


/* ── Matched to the live demo (wpecomus.com/skincare, measured at 1366px) ─────────────────── */

/* Hero and banner fill the screen. */
body.nadara .nd-hero .wrap-slider img { height: max(520px, 100vh); max-height: 980px; }
body.nadara .nd-banner-inner > img { height: max(480px, 100vh); max-height: 980px; }
body.nadara .nd-banner { padding: 0 !important; }

/* Marquee: thin black strip, small uppercase text. */
body.nadara .tf-marquee.marquee-st2 { padding: 0; height: 62px; display: flex; align-items: center; }
body.nadara .tf-marquee.marquee-st2 .marquee-item .text,
body.nadara .tf-marquee.marquee-st2 .marquee-item p { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
body.nadara .tf-marquee.marquee-st2 .marquee-item .icon svg { width: 10px; height: 10px; }

/* Product cards: white card, centred text, small black "add" button. */
body.nadara .nd-products .card-product { padding: 0 0 26px; }
body.nadara .card-product .card-product-wrapper { border-radius: 10px 10px 0 0; background-color: #fff; }
body.nadara .card-product .card-product-info .tf-btn,
body.nadara .card-product .card-product-info .btn-add-to-cart,
body.nadara .card-product .card-product-info a[class*="cart"] { background: var(--main); color: #fff !important; padding: 0 14px; height: 34px; line-height: 34px; font-size: 12px; font-weight: 600; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; text-decoration: none; border: 0; }

/* Values tabs: compact white button. */
body.nadara .nd-store .tf-btn { width: auto !important; display: inline-flex !important; background: #fff; color: var(--main); padding: 0 20px; height: 42px; margin-top: 20px; }
body.nadara .nd-store .store-img img { min-height: 460px; }

/* Single review with two photos. */
body.nadara .nd-reviews { padding-top: 100px !important; padding-bottom: 100px !important; }
body.nadara .nd-review { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
body.nadara .nd-review-photos { position: relative; height: 500px; }
body.nadara .nd-review-main { position: absolute; inset-inline-end: 22%; top: 0; width: 62%; height: 81%; object-fit: cover; border-radius: 10px; }
body.nadara .nd-review-product { position: absolute; inset-inline-end: 0; bottom: 0; width: 42%; height: 62%; object-fit: cover; border-radius: 10px; border: 0; background: #f2f0ea; }
body.nadara .nd-review-quote { font-size: 70px; line-height: 50px; color: #d6d6d6; font-family: Georgia, serif; }
body.nadara .nd-review-heading { font-size: 12px; font-weight: 700; color: var(--main); margin: 6px 0 10px; }
body.nadara .nd-review-stars { color: #f37249; display: flex; gap: 4px; margin-bottom: 18px; }
body.nadara .nd-review-text { font-size: 20px; line-height: 32px; color: var(--main); margin-bottom: 22px; }
body.nadara .nd-review-name { font-weight: 700; color: var(--main); font-size: 14px; }
body.nadara .nd-review-item { font-size: 13px; color: var(--text-3, #909090); margin-top: 4px; }
body.nadara .nd-review-item a { color: var(--main); font-weight: 600; }
body.nadara .nd-review-nav { display: flex; gap: 10px; margin-top: 30px; justify-content: flex-end; }
body.nadara .nd-review-nav span { width: 30px; height: 30px; border: 1px solid #ebebeb; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; }

/* Before and after: full width, pills at the bottom. */
body.nadara .nd-compare { max-width: none; aspect-ratio: 1266 / 700; border-radius: 10px; }
body.nadara .nd-compare-label { top: auto; bottom: 22px; background: #000; padding: 4px 16px; font-size: 12px; font-weight: 600; }
body.nadara .nd-label-before { left: calc(50% - 90px); right: auto; }
body.nadara .nd-label-after { right: calc(50% - 90px); left: auto; }
body.nadara .nd-compare-handle::after { background: #000; color: #fff; width: 32px; height: 32px; font-size: 14px; }

/* Features: row style, round outlined icons, a line under the strip. */
body.nadara .nd-icons { padding-top: 0 !important; padding-bottom: 0 !important; }
body.nadara .nd-icons .container { padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #ebebeb; }
body.nadara .nd-icons .wrap-iconbox { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 30px; transform: none !important; }
body.nadara .nd-icons .swiper-slide { width: auto !important; }
body.nadara .nd-icons .tf-icon-box { display: flex; align-items: center; gap: 16px; text-align: start; border: 0; padding: 0; }
body.nadara .nd-icons .tf-icon-box .icon { flex: 0 0 60px; width: 60px; height: 60px; border: 1px solid #ececec; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0; }
body.nadara .nd-icons .tf-icon-box .title { font-size: 16px; font-weight: 600; color: var(--main); margin-bottom: 4px; }
body.nadara .nd-icons .tf-icon-box p { font-size: 12px; margin: 0; }

/* Customer photos ("Shop gram"): 250px rounded squares in a centred row. */
body.nadara .nd-gram { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
body.nadara .nd-gram a { width: 250px; max-width: calc(50% - 3px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; display: block; }
body.nadara .nd-gram img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
body.nadara .nd-gram a:hover img { transform: scale(1.05); }

@media (max-width: 991px) {
    body.nadara .nd-review { grid-template-columns: 1fr; gap: 30px; }
    body.nadara .nd-review-photos { height: 380px; }
    body.nadara .nd-icons .wrap-iconbox { grid-template-columns: repeat(2, 1fr); }
}
body.nadara .card-product .card-product-info .tf-btn,
body.nadara .card-product .card-product-info .btn-add-to-cart,
body.nadara .card-product .card-product-info a[class*="cart"] { width: auto !important; min-width: 0; padding: 0 16px; align-self: center; }
body.nadara .nd-review-photos { order: 2; }
body.nadara .nd-review-content { order: 1; }
body.nadara .nd-review-main { inset-inline-end: auto; inset-inline-start: 0; }
body.nadara .nd-review-product { inset-inline-end: auto; inset-inline-start: 36%; }
/* Card text centred like the live demo; the add button is the template's w-100 button made compact. */
body.nadara .card-product .card-product-info { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px 0; }
body.nadara .card-product .card-product-info .title { text-align: center; }
body.nadara .card-product .card-product-info .add-to-cart-btn { width: auto !important; background: var(--main); color: #fff; height: 34px; padding: 0 18px; font-size: 12px; border-radius: 3px; margin-top: 14px; }
body.nadara .nd-review-main { left: 0; right: auto; width: 64%; }
body.nadara .nd-review-product { left: 38%; right: auto; width: 43%; }
body.nadara .nd-store .store-item-info { display: flex; flex-direction: column; align-items: center; }
body.nadara .nd-store .tf-btn { align-self: center; flex: 0 0 auto; }

/* See-through header over the home slideshow at every width (as wpecomus.com/skincare): the header
   stays in the flow under the announcement bar and the slideshow is pulled up beneath it by the
   header's height (--nd-hh, set by the header script). Once the page scrolls it turns solid. */
body.nadara #header.nd-header-over { position: sticky; top: 0; z-index: 50; background: transparent; box-shadow: none; transition: background-color .25s; }
body.nadara #header.nd-header-over { margin-bottom: calc(-1 * var(--nd-hh, 95px)); }
body.nadara #header.nd-header-over.nd-solid { background: #fff; box-shadow: 0 1px 0 var(--line, #ebebeb); }
body.nadara #header.nd-header-over.nd-solid .box-nav-ul .item-link,
body.nadara #header.nd-header-over.nd-solid .nav-icon .nav-icon-item,
body.nadara #header.nd-header-over.nd-solid .nav-icon-item svg { color: var(--main); }
body.nadara #header.nd-header-over.nd-solid .logo-header img { filter: none; }
body.nadara #header.nd-header-over.nd-solid .count-box { background: var(--main); color: #fff; }
body.nadara #header.nd-header-over .tf-lg-hidden svg, body.nadara #header.nd-header-over a[href="#mobileMenu"] { color: #fff; }
body.nadara #header.nd-header-over.nd-solid a[href="#mobileMenu"] { color: var(--main); }
@media (max-width: 767px) { body.nadara .nd-hero .wrap-slider { height: auto !important; min-height: 0 !important; } }

/* ── Phones, matched to wpecomus.com/skincare at 390px ─────────────────────────────────────── */
@media (max-width: 767px) {
    body.nadara .nd-banner-inner > img { height: 400px; min-height: 0; }
    body.nadara .nd-steps .video-wrap { order: -1; }
    body.nadara .flat-tab-store .widget-tab-3,
    body.nadara .nd-products .widget-tab-3 { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; gap: 24px; white-space: nowrap; }
    body.nadara .flat-tab-store .widget-tab-3 a, body.nadara .nd-products .widget-tab-3 a { font-size: 18px; }
    body.nadara .nd-store .store-img { display: none; }
    body.nadara .nd-store { grid-template-columns: 1fr !important; }
    body.nadara .nd-store .store-item-info { padding: 30px 20px; }
    body.nadara .nd-store .store-heading { font-size: 24px; }
}
/* Hero and banner fill the screen at any width (live: 1287px tall on a 2094×1287 window). */
@media (min-width: 768px) {
    body.nadara .nd-hero .wrap-slider img, body.nadara .nd-banner-inner > img { height: 100vh; min-height: 520px; max-height: none; }
}