/* ════════════════════════════════════════════════════════════════════
   طابع واجهة المتجر — يُضبط من القالب أو مصمّم المتجر (Services/StoreTheme.cs).
   الألوان والخط متغيّرات CSS في سمة style على .sf-layout؛ وهنا ما يتغيّر بالسمات:
   data-radius (الزوايا) · data-card (البطاقات) · data-header (الترويسة) · data-buttons
   ════════════════════════════════════════════════════════════════════ */

/* ── الزوايا ── */
.sf-layout[data-radius="sharp"] {
    --sf-radius-xl: 8px; --sf-radius: 6px; --sf-radius-md: 4px; --sf-radius-sm: 3px; --sf-radius-xs: 2px;
}
.sf-layout[data-radius="round"] {
    --sf-radius-xl: 30px; --sf-radius: 24px; --sf-radius-md: 18px; --sf-radius-sm: 12px; --sf-radius-xs: 8px;
}

/* ── الأزرار ── */
.sf-layout[data-buttons="rounded"] { --sf-radius-full: 12px; }
.sf-layout[data-buttons="square"]  { --sf-radius-full: 4px; }

/* ── البطاقات ── */
.sf-layout[data-card="shadow"] .sf-product-v4 { border-color: transparent; box-shadow: var(--sf-shadow-md); }
.sf-layout[data-card="border"] .sf-product-v4 { box-shadow: none; }
.sf-layout[data-card="border"] .sf-product-v4:hover { box-shadow: none; }
.sf-layout[data-card="flat"] .sf-product-v4 { box-shadow: none; border-color: transparent; background: transparent; }
.sf-layout[data-card="flat"] .sf-product-v4:hover { box-shadow: none; transform: none; border-color: transparent; }

/* ── الترويسة الملوّنة (لون المتجر) والداكنة ── */
.sf-layout[data-header="brand"] { --sf-hd-bg: var(--sf-primary); }
.sf-layout[data-header="dark"]  { --sf-hd-bg: #0f172a; }
.sf-layout[data-header="brand"] .sf-hd3,
.sf-layout[data-header="dark"] .sf-hd3,
.sf-layout[data-header="brand"] .sf-hd3-top,
.sf-layout[data-header="dark"] .sf-hd3-top { background: var(--sf-hd-bg); }
.sf-layout[data-header="brand"] .sf-hd3-brand,
.sf-layout[data-header="dark"] .sf-hd3-brand,
.sf-layout[data-header="brand"] .sf-hd3-ico,
.sf-layout[data-header="dark"] .sf-hd3-ico { color: #fff; }
.sf-layout[data-header="brand"] .sf-hd3-ico:hover,
.sf-layout[data-header="dark"] .sf-hd3-ico:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sf-layout[data-header="brand"] .sf-hd3-brand__mark,
.sf-layout[data-header="dark"] .sf-hd3-brand__mark { background: #fff; color: var(--sf-hd-bg); }
.sf-layout[data-header="brand"] .sf-hd3-badge,
.sf-layout[data-header="dark"] .sf-hd3-badge { background: #fff; color: var(--sf-hd-bg); }
.sf-layout[data-header="brand"] .sf-hd3-burger,
.sf-layout[data-header="dark"] .sf-hd3-burger { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.sf-layout[data-header="brand"] .sf-hd3-search,
.sf-layout[data-header="dark"] .sf-hd3-search { border-color: transparent; }
.sf-layout[data-header="brand"] .sf-hd3-search__btn { background: var(--sf-secondary); }
.sf-layout[data-header="dark"] .sf-hd3-cats__btn { background: var(--sf-primary); }

/* ── شريط معاينة القالب/التصميم (لا يراه إلا من فتح رابط المعاينة) ── */
.sf-theme-preview {
    position: sticky; inset-block-start: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
    padding: .5rem 1rem; background: #0f172a; color: #fff; font-size: .85rem; font-weight: 700;
}
.sf-theme-preview b { color: #6ee7b7; }

/* ════════════════════════════════════════════════════════════════════
   التخطيط — ما يجعل القوالب مختلفة في الشكل لا في اللون فقط:
   data-hd (الترويسة) · data-hero · data-cats (التصنيفات) · data-grid (شبكة المنتجات)
   · data-pcard (شكل بطاقة المنتج). ترتيب الأقسام يأتي من القالب نفسه.
   ════════════════════════════════════════════════════════════════════ */

/* ── الترويسة ── */
@media (min-width: 992px) {
    .sf-layout[data-hd="centered"] .sf-hd3-top__in { flex-wrap: wrap; justify-content: center; row-gap: .7rem; }
    .sf-layout[data-hd="centered"] .sf-hd3-brand { order: -1; flex: 1 0 100%; justify-content: center; }
    .sf-layout[data-hd="centered"] .sf-hd3-brand img { block-size: 52px; }
    .sf-layout[data-hd="centered"] .sf-hd3-brand__name { font-size: 1.5rem; }
    .sf-layout[data-hd="centered"] .sf-hd3-search { margin-inline: 0; max-inline-size: 600px; }
    .sf-layout[data-hd="centered"] .sf-hd3-nav__in { justify-content: center; }
    .sf-layout[data-hd="compact"] .sf-hd3-top__in { padding-block: .45rem; }
    .sf-layout[data-hd="compact"] .sf-hd3-search { block-size: 40px; max-inline-size: 460px; }
    .sf-layout[data-hd="compact"] .sf-hd3-nav__in { block-size: 42px; }
    .sf-layout[data-hd="compact"] .sf-hd3-cats__btn { inline-size: auto; padding-inline: 1rem 1.2rem; font-size: .88rem; }
}

/* ── الهيرو ── */
.sf-layout[data-hero="wide"] .sf-hero-v4 { max-width: none; padding: 0; }
.sf-layout[data-hero="wide"] .sf-hero-v4--split,
.sf-layout[data-hero="compact"] .sf-hero-v4--split { grid-template-columns: minmax(0, 1fr); }
.sf-layout[data-hero="wide"] .sf-hero-promo,
.sf-layout[data-hero="compact"] .sf-hero-promo { display: none; }
.sf-layout[data-hero="wide"] .sf-hero-v4__slider { border-radius: 0; }
.sf-layout[data-hero="wide"] .sf-hero-v4__track,
.sf-layout[data-hero="wide"] .sf-hero-v4--split .sf-hero-v4__slider { height: 540px; min-block-size: 540px; }
.sf-layout[data-hero="wide"] .sf-hero-v4__content { margin-inline: auto; max-width: 820px; }
.sf-layout[data-hero="wide"] .sf-hero-v4__title { font-size: 2.8rem; }
.sf-layout[data-hero="half"] .sf-hero-v4--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sf-layout[data-hero="half"] .sf-hero-v4--split .sf-hero-v4__slider { min-block-size: 440px; }
.sf-layout[data-hero="compact"] .sf-hero-v4__track,
.sf-layout[data-hero="compact"] .sf-hero-v4--split .sf-hero-v4__slider { height: 260px; min-block-size: 260px; }
.sf-layout[data-hero="compact"] .sf-hero-v4__title { font-size: 1.6rem; }
@media (max-width: 768px) {
    .sf-layout[data-hero="wide"] .sf-hero-v4__track,
    .sf-layout[data-hero="wide"] .sf-hero-v4--split .sf-hero-v4__slider { height: 380px; min-block-size: 380px; }
    .sf-layout[data-hero="wide"] .sf-hero-v4__title { font-size: 1.6rem; }
    .sf-layout[data-hero="half"] .sf-hero-v4--split { grid-template-columns: minmax(0, 1fr); }
}

/* ── التصنيفات ── */
.sf-layout[data-cats="circles"] .sf-cat-showcase__grid { display: flex; gap: 1.3rem; overflow-x: auto; padding-block-end: .5rem; scrollbar-width: thin; }
.sf-layout[data-cats="circles"] .sf-cat-showcase__item { flex: 0 0 auto; min-inline-size: 100px; background: none; border: 0; padding: .4rem .2rem; }
.sf-layout[data-cats="circles"] .sf-cat-showcase__item:hover { transform: none; box-shadow: none; }
.sf-layout[data-cats="circles"] .sf-cat-showcase__icon { width: 92px; height: 92px; font-size: 2rem; box-shadow: 0 0 0 3px var(--sf-bg), 0 0 0 5px var(--sf-primary); }
.sf-layout[data-cats="circles"] .sf-cat-showcase__count { display: none; }

.sf-layout[data-cats="cards"] .sf-cat-showcase__grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; }
.sf-layout[data-cats="cards"] .sf-cat-showcase__item { padding: 0; overflow: hidden; align-items: stretch; }
.sf-layout[data-cats="cards"] .sf-cat-showcase__icon { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; margin: 0; font-size: 2.6rem; }
.sf-layout[data-cats="cards"] .sf-cat-showcase__icon img { border-radius: 0; }
.sf-layout[data-cats="cards"] .sf-cat-showcase__name { padding: .75rem .9rem 0; font-size: 1rem; font-weight: 800; text-align: start; }
.sf-layout[data-cats="cards"] .sf-cat-showcase__count { padding: 0 .9rem .85rem; text-align: start; }

.sf-layout[data-cats="chips"] .sf-cat-showcase__grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.sf-layout[data-cats="chips"] .sf-cat-showcase__item { flex-direction: row; gap: .55rem; padding: .4rem 1rem .4rem .45rem; border-radius: var(--sf-radius-full); }
.sf-layout[data-cats="chips"] .sf-cat-showcase__item:hover { transform: none; }
.sf-layout[data-cats="chips"] .sf-cat-showcase__icon { width: 32px; height: 32px; margin: 0; font-size: .9rem; }
.sf-layout[data-cats="chips"] .sf-cat-showcase__name { font-size: .88rem; }
.sf-layout[data-cats="chips"] .sf-cat-showcase__count { display: none; }

/* ── شبكة المنتجات ── */
.sf-layout[data-grid="large"] .sf-products-v4 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.4rem; }
.sf-layout[data-grid="large"] .sf-product-v4__name { font-size: 1rem; }
.sf-layout[data-grid="large"] .sf-product-v4__body { padding: 1rem 1.1rem; }

.sf-layout[data-grid="dense"] .sf-products-v4 { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .65rem; }
.sf-layout[data-grid="dense"] .sf-product-v4__body { padding: .55rem .6rem; gap: .15rem; }
.sf-layout[data-grid="dense"] .sf-product-v4__name { font-size: .8rem; }

.sf-layout[data-grid="list"] .sf-products-v4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: .9rem; }
.sf-layout[data-grid="list"] .sf-product-v4 { flex-direction: row; align-items: stretch; }
.sf-layout[data-grid="list"] .sf-product-v4__img-wrap { flex: 0 0 150px; aspect-ratio: auto; min-block-size: 150px; }
.sf-layout[data-grid="list"] .sf-product-v4__body { justify-content: center; padding: .9rem 1rem; }
.sf-layout[data-grid="list"] .sf-product-v4__name { font-size: .98rem; }
.sf-layout[data-grid="list"] .sf-product-v4:hover { transform: none; }
@media (max-width: 576px) {
    .sf-layout[data-grid="list"] .sf-product-v4__img-wrap { flex-basis: 112px; min-block-size: 112px; }
}

/* ── شكل بطاقة المنتج ── */
.sf-layout[data-pcard="overlay"] .sf-product-v4__img-wrap { aspect-ratio: 3 / 4; }
.sf-layout[data-pcard="overlay"] .sf-product-v4__body {
    position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; pointer-events: none;
    padding-block-start: 2.6rem; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}
.sf-layout[data-pcard="overlay"] .sf-product-v4__body a { pointer-events: auto; }
.sf-layout[data-pcard="overlay"] .sf-product-v4__name,
.sf-layout[data-pcard="overlay"] .sf-product-v4__price--sale { color: #fff; }
.sf-layout[data-pcard="overlay"] .sf-product-v4__price--old,
.sf-layout[data-pcard="overlay"] .sf-product-v4__cat { color: rgba(255, 255, 255, .75); }
.sf-layout[data-pcard="overlay"] .sf-product-v4__quick { inset-block-start: .6rem; inset-block-end: auto; }

.sf-layout[data-pcard="centered"] .sf-product-v4__img-wrap { aspect-ratio: 4 / 5; }
.sf-layout[data-pcard="centered"] .sf-product-v4__body { align-items: center; text-align: center; }
.sf-layout[data-pcard="centered"] .sf-product-v4__prices { justify-content: center; }