/*
 * Aqar360 store, catalog pages (Shop/Index, owner 2026-10-19): the home and «من نحن» look — night-purple
 * opening band over the Saudi skyline, white section cards on the near-white «من نحن» ground, pill links.
 * Loaded after eshop.css and scoped to .shop-page--v2, so the store page and other shop screens keep
 * their own styles.
 */
.shop-page--v2 {
    --v2-night: #1d1540;
    --v2-deep: #3b2a63;
    --v2-logo: #6a5d8b;
    --v2-gold: #f5b942;
    --v2-ink: #241f33;
    --v2-muted: #6f6a80;
    --v2-line: #e9e4f2;
    --v2-soft: #f7f5fb;
}
/* The page ground is the shared «من نحن» one (.eshop-ground in eshop.css). */

/* ---------- Delivery (city) strip: #241A45 (owner, 2026-10-19), just above the band's night purple ---------- */
.shop-page--v2 .shop-filter-sticky { border-bottom: 0; box-shadow: none; background: #241a45; }
.shop-page--v2 .eshop-filter-location-bar { border-bottom-color: rgba(255, 255, 255, 0.08); background: #241a45; }

/* ---------- Opening band ---------- */
.shop-page--v2 .eshop-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 128px;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(55% 60% at 50% 100%, rgba(245, 185, 66, 0.18), rgba(245, 185, 66, 0) 70%),
        linear-gradient(180deg, rgba(29, 21, 64, 0.94) 0%, rgba(29, 21, 64, 0.62) 58%, rgba(29, 21, 64, 0.9) 100%),
        url("/images/Home/hero/hero-skyline.jpg") center 62% / cover no-repeat,
        var(--v2-night);
}
.shop-page--v2 .eshop-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.shop-page--v2 .eshop-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f6e3b8;
    font-size: 13.5px;
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.shop-page--v2 .eshop-hero__eyebrow svg { width: 17px; height: 17px; color: var(--v2-gold); }
.shop-page--v2 .eshop-hero__title {
    max-width: 22ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 4.2vw, 3.5rem);
    font-weight: 900;
    line-height: 1.3;
    text-wrap: balance;
    text-shadow: 0 3px 4px rgba(16, 9, 42, 0.45), 0 8px 26px rgba(16, 9, 42, 0.5);
}
.shop-page--v2 .eshop-hero__lead {
    max-width: 40rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 500;
    line-height: 1.8;
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(16, 9, 42, 0.7);
}
.shop-page--v2 .eshop-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.shop-page--v2 .eshop-hero__chips li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.shop-page--v2 .eshop-hero__chips svg { width: 18px; height: 18px; color: var(--v2-gold); }

/* ---------- Search & filters: a white card over the band's lower edge ---------- */
.shop-page--v2 .shop-filter-catalog-panel { background: transparent; }
.shop-page--v2 .shop-filter-catalog-panel:not(.shop-filter-catalog-panel--floating) { padding-top: 28px; border-bottom: 0; }
.shop-page--v2 .shop-filter-catalog-panel--floating { position: relative; z-index: 30; margin-top: -88px; }
.shop-page--v2 .shop-filter-catalog-panel > div { padding-top: 0; padding-bottom: 0; }
.shop-page--v2 .retail-shop-filter-panel {
    padding: 22px 24px;
    border: 1px solid var(--v2-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 60px -28px rgba(29, 21, 64, 0.45), 0 8px 20px rgba(29, 21, 64, 0.05);
}
.shop-page--v2 .retail-shop-filter-panel__field-label { color: var(--v2-muted); font-size: 12.5px; font-weight: 700; }
.shop-page--v2 .retail-shop-filter-input,
.shop-page--v2 .eshop-cselect__trigger {
    min-height: 50px;
    border: 1.5px solid var(--v2-line);
    border-radius: 14px;
    background: #fbfafe;
    color: var(--v2-ink);
    font-size: 14.5px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.shop-page--v2 .retail-shop-filter-input:hover,
.shop-page--v2 .eshop-cselect__trigger:hover { border-color: #d6cce8; background: #fff; }
.shop-page--v2 .retail-shop-filter-input:focus,
.shop-page--v2 .eshop-cselect.is-open .eshop-cselect__trigger {
    border-color: var(--v2-logo);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(106, 93, 139, 0.14);
    outline: none;
}
.shop-page--v2 .eshop-cselect__panel { border-color: var(--v2-line); border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(29, 21, 64, 0.35); }
.shop-page--v2 .shop-filter-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--v2-line);
    border-radius: 999px;
    background: #fff;
    color: var(--v2-deep);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.shop-page--v2 .shop-filter-quick-link:hover { border-color: var(--v2-logo); background: #f4f0fb; color: var(--v2-night); }
.shop-page--v2 .shop-filter-quick-link svg { width: 17px; height: 17px; }

/* ---------- The promotions carousel ---------- */
.shop-page--v2 .eshop-showcase { padding-top: 40px; background: transparent; }
.shop-page--v2 .eshop-promo-carousel { overflow: hidden; border-radius: 28px; box-shadow: 0 30px 60px -32px rgba(29, 21, 64, 0.5); }
.shop-page--v2 .eshop-promo-carousel__nav {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--v2-deep);
    box-shadow: 0 10px 24px -8px rgba(29, 21, 64, 0.4);
}

/* ---------- Sections: each in its white card, the title sitting on the card's border (owner) ---------- */
.shop-page--v2 .shop-page__section--products { padding-top: 48px; padding-bottom: 8px; background: transparent; }
.shop-page--v2 .shop-page__section--shops,
.shop-page--v2 .eshop-catalog-trending-below-products { margin-top: 56px; }
.shop-page.shop-page--v2 fieldset.eshop-section-fieldset {
    border: 1px solid var(--v2-line);
    border-radius: 24px;
    padding: 12px 24px 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(55, 42, 88, 0.04), 0 14px 34px -18px rgba(29, 21, 64, 0.22);
}
.shop-page.shop-page--v2 fieldset.eshop-section-fieldset > legend.eshop-section-fieldset__legend {
    float: none;
    width: auto;
    max-width: calc(100% - 2rem);
    margin-inline-start: 1rem;
    padding: 0 0.75rem;
    color: var(--v2-night) !important;
    font-size: clamp(1.3rem, 1.9vw, 1.65rem) !important;
    font-weight: 800 !important;
}
.shop-page.shop-page--v2 fieldset.eshop-section-fieldset > .eshop-section-fieldset__body { margin-top: 12px; }
.shop-page--v2 .eshop-section-fieldset__legend-row { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.shop-page.shop-page--v2 fieldset.eshop-section-fieldset > legend .eshop-section-fieldset__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ebe5f8;
    color: var(--v2-deep) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
.shop-page.shop-page--v2 .eshop-section-fieldset__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 4px;
    padding: 6px 14px;
    border: 1.5px solid var(--v2-line);
    border-radius: 999px;
    background: #fff;
    color: var(--v2-deep) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.shop-page.shop-page--v2 .eshop-section-fieldset__link:hover { border-color: var(--v2-deep); background: var(--v2-deep); color: #fff !important; }

/* ---------- Product cards ---------- */
.shop-page--v2 .eshop-product-card-v2 {
    border: 1px solid var(--v2-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(36, 31, 51, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.shop-page--v2 .eshop-product-card-v2:hover {
    border-color: #d9d0e9;
    box-shadow: 0 24px 44px -20px rgba(29, 21, 64, 0.35);
    transform: translateY(-4px);
}
/* In the sliders the hover drawer is drawn outside the card, under it: the card stays put so the two stay joined. */
.shop-page--v2 [data-eshop-props-portal] .eshop-product-card-v2:hover { transform: none; }
.shop-page--v2 .eshop-product-card-v2__media { border-radius: 19px 19px 0 0; background: #f7f5fb; }
.shop-page--v2 .eshop-product-card-v2__title a { color: var(--v2-ink); font-weight: 700; }
.shop-page--v2 .eshop-product-card-v2__shop-name { color: var(--v2-muted); }
.shop-page--v2 .eshop-product-card-v2__price-value { color: var(--v2-deep); font-size: 1.2rem; font-weight: 800; }
.shop-page--v2 .eshop-product-card-v2__price-sar { color: var(--v2-deep); }
.shop-page--v2 .eshop-product-card-v2__btn--primary { background: var(--v2-deep); border-color: var(--v2-deep); }

/* ---------- Featured stores ---------- */
.shop-page--v2 .eshop-featured-shop-card {
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(36, 31, 51, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.shop-page--v2 .eshop-featured-shop-card:hover { box-shadow: 0 24px 44px -20px rgba(29, 21, 64, 0.35); transform: translateY(-4px); }
.shop-page--v2 .eshop-featured-shop-card:not(.eshop-featured-shop-card--has-banner) .eshop-featured-shop-card__banner {
    background:
        radial-gradient(60% 120% at 85% 0, rgba(245, 185, 66, 0.35), rgba(245, 185, 66, 0) 60%),
        linear-gradient(135deg, var(--v2-night) 0%, var(--v2-deep) 60%, var(--v2-logo) 100%);
}
.shop-page--v2 .eshop-featured-shop-card__logo-wrap { border: 3px solid #fff; box-shadow: 0 8px 18px -6px rgba(29, 21, 64, 0.35); }
.shop-page--v2 .eshop-featured-shop-card__stat { border: 0; border-radius: 999px; background: #f4f0fb; color: var(--v2-deep); font-weight: 700; }

/* ---------- Nothing to show ---------- */
.shop-page--v2 .eshop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 56px 20px;
    border: 1.5px dashed #ddd5ea;
    border-radius: 24px;
    background: radial-gradient(60% 80% at 50% 0, #f4effb 0, #fff 70%);
    text-align: center;
}
.shop-page--v2 .eshop-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #ebe5f8;
    color: var(--v2-deep);
}
.shop-page--v2 .eshop-empty__icon svg { width: 32px; height: 32px; }
.shop-page--v2 .eshop-empty__title { margin: 0; color: var(--v2-night); font-size: 1.2rem; font-weight: 800; }
.shop-page--v2 .eshop-empty__text { margin: 0; color: var(--v2-muted); font-size: 0.95rem; }
.shop-page--v2 .eshop-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.shop-page--v2 .eshop-empty__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    border: 1.5px solid var(--v2-deep);
    border-radius: 999px;
    background: var(--v2-deep);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.shop-page--v2 .eshop-empty__btn:hover { background: var(--v2-night); color: #fff; }
.shop-page--v2 .eshop-empty__btn--ghost { border-color: var(--v2-line); background: #fff; color: var(--v2-deep); }
.shop-page--v2 .eshop-empty__btn--ghost:hover { border-color: var(--v2-deep); background: #f4f0fb; color: var(--v2-night); }

/* ---------- Why buy here: three cards ---------- */
.shop-page--v2 .eshop-promo-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 80rem;
    margin: 56px auto 64px;
    padding: 0 2rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.shop-page--v2 .eshop-promo-bar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--v2-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(36, 31, 51, 0.05);
}
.shop-page--v2 .eshop-promo-bar__item + .eshop-promo-bar__item { border-inline-start: 1px solid var(--v2-line); }
.shop-page--v2 .eshop-promo-bar__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff4dc;
    color: #b07a12;
}
.shop-page--v2 .eshop-promo-bar__icon svg { width: 22px; height: 22px; }
.shop-page--v2 .eshop-promo-bar__text strong { color: var(--v2-night); font-size: 15px; font-weight: 800; }
.shop-page--v2 .eshop-promo-bar__text span { color: var(--v2-muted); font-size: 13.5px; }
.shop-page--v2 .eshop-trust-cms { margin: 56px 0 64px; background: transparent; }
.shop-page--v2 .eshop-trust-cms__item { border: 1px solid var(--v2-line); border-radius: 20px; box-shadow: 0 6px 18px rgba(36, 31, 51, 0.05); }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1023px) {
    .shop-page--v2 .eshop-promo-bar { grid-template-columns: minmax(0, 1fr); padding: 0 1rem; }
}
@media (max-width: 640px) {
    .shop-page--v2 .eshop-hero { padding: 36px 0 108px; }
    .shop-page--v2 .eshop-hero__inner { gap: 12px; }
    .shop-page--v2 .eshop-hero__chips { gap: 8px; }
    .shop-page--v2 .eshop-hero__chips li { padding: 6px 12px; font-size: 12.5px; }
    .shop-page--v2 .eshop-hero__chips svg { width: 15px; height: 15px; }
    .shop-page--v2 .shop-filter-catalog-panel--floating { margin-top: -76px; }
    .shop-page--v2 .retail-shop-filter-panel { padding: 16px; border-radius: 20px; }
    .shop-page.shop-page--v2 fieldset.eshop-section-fieldset { padding: 8px 14px 16px; border-radius: 20px; }
    .shop-page.shop-page--v2 fieldset.eshop-section-fieldset > legend.eshop-section-fieldset__legend { margin-inline-start: 0.5rem; padding: 0 0.5rem; }
    .shop-page--v2 .shop-page__section--products { padding-top: 36px; }
    .shop-page--v2 .shop-page__section--shops,
    .shop-page--v2 .eshop-catalog-trending-below-products { margin-top: 40px; }
    .shop-page--v2 .eshop-showcase { padding-top: 28px; }
    .shop-page--v2 .eshop-promo-carousel { border-radius: 20px; }
}