/* ============================================================
   المكتبة PRO — CSS الأصلي (لا يتغير أبداً)
   ============================================================ */

:root{
    --bg:#000; --bg-2:#0a0a0b;
    --surface:#161618; --surface-2:#1d1d1f; --surface-3:#2a2a2c;
    --text:#f5f5f7; --dim:#a1a1a6; --dimmer:#6e6e73;
    --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.16);
    --blue:#0a84ff; --gold:#ffd60a; --red:#ff453a;
    --r:18px; --r-sm:12px; --r-lg:26px;
    --maxw:1360px; --nav-h:54px;
    --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Tajawal',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg); color:var(--text); line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:rgba(255,255,255,.2)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,3vw,30px)}

/* ===================== مكوّن البوستر ===================== */
.poster{
    position:relative; overflow:hidden;
    border-radius:var(--r-sm); background:var(--surface-2);
    aspect-ratio:2/3;
}
.poster img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0; transition:transform .5s var(--ease);
}
.poster img.failed{display:none}
.poster .scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.05) 55%);
}
.poster .label{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:14px; font-weight:900; font-size:clamp(15px,1.4vw,19px);
    line-height:1.25; text-align:center; text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.poster .badge{
    position:absolute; top:9px; right:9px; z-index:3;
    background:var(--red); color:#fff; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:999px;
}

/* ===================== الأزرار ===================== */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.4em;
    font-weight:700; font-size:15px; padding:11px 22px; border-radius:999px;
    transition:transform .2s var(--ease),background .2s var(--ease),opacity .2s var(--ease);
    white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn--primary{background:#fff;color:#000}
.btn--primary:hover{background:#e8e8ed}
.btn--glass{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(12px)}
.btn--glass:hover{background:rgba(255,255,255,.28)}
.btn--ghost{border:1px solid var(--line-2);padding:8px 16px;font-size:14px}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--lg{padding:14px 30px;font-size:16px}
.btn--block{width:100%}

/* ===================== الهيدر ===================== */
.header{
    position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
    transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
    border-block-end:1px solid transparent;
}
.header.scrolled{
    background:rgba(12,12,13,.72);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-block-end-color:var(--line);
}
.header__in{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px}
.nav{display:flex;align-items:center;gap:26px;margin-inline-end:auto}
.nav a{font-size:14px;color:var(--dim);font-weight:500;transition:color .2s var(--ease)}
.nav a:hover,.nav a.active{color:var(--text)}
.header__actions{display:flex;align-items:center;gap:12px}
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text);transition:background .2s var(--ease)}
.icon-btn:hover{background:rgba(255,255,255,.1)}
.cart-ic{position:relative}
.cart-ic .count{
    position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;
    padding:0 4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:999px;
    display:grid;place-items:center}

/* شريط البحث */
.searchbar{
    position:absolute;left:0;right:0;top:var(--nav-h);
    background:rgba(12,12,13,.96);backdrop-filter:blur(20px);
    border-block-end:1px solid var(--line);max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease)}
.searchbar.open{max-height:80px}
.searchbar__in{display:flex;align-items:center;gap:12px;padding:14px 0;color:var(--dim)}
.searchbar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:16px;font-family:inherit}
.searchbar .x{font-size:24px;color:var(--dim)}

/* ===================== الهيرو ===================== */
.hero{position:relative;margin-block-start:var(--nav-h);overflow:hidden}
.hero__track{display:flex}
.hero__slide{position:relative;flex:0 0 100%;min-height:min(82vh,760px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:
    linear-gradient(to top,var(--bg) 2%,transparent 55%),
    linear-gradient(to left,var(--bg) 0%,transparent 60%)}
.hero__content{position:relative;z-index:2;padding:0 clamp(16px,5vw,70px) clamp(40px,7vh,80px);max-width:640px}
.hero__eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:800;color:rgba(255,255,255,.9);margin-block-end:12px;display:flex;align-items:center;gap:8px}
.hero__eyebrow .tvlogo{font-weight:900}
.hero__title{font-size:clamp(40px,7vw,84px);font-weight:900;line-height:1.02;letter-spacing:-.5px;margin-block-end:16px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero__desc{font-size:clamp(16px,1.6vw,20px);color:rgba(255,255,255,.92);margin-block-end:14px}
.hero__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.85);margin-block-end:24px}
.hero__meta .star{color:var(--gold);font-weight:700}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap}
.hero__dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3}
.hero__dots button{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.4);transition:.3s var(--ease)}
.hero__dots button.active{background:#fff;width:24px}

/* ===================== الرفوف ===================== */
.shelf{padding-block:34px 6px}
.shelf__head{display:flex;align-items:center;justify-content:space-between;margin-block-end:16px}
.shelf__title{font-size:clamp(20px,2.4vw,27px);font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:5px;cursor:pointer}
.shelf__title .chev{color:var(--dim);transition:transform .2s var(--ease)}
.shelf__title:hover .chev{transform:translateX(-4px);color:var(--text)}
.shelf__ctrl{display:flex;gap:8px}
.scrl{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--text);font-size:22px;line-height:1;display:grid;place-items:center;opacity:.55;transition:.2s var(--ease)}
.scrl:hover{background:var(--surface-3);opacity:1}
.row{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-block-end:12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}

/* كرت كتاب */
.card{flex:0 0 auto;width:clamp(150px,16vw,188px);scroll-snap-align:start;cursor:pointer}
.card .poster{box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover .poster{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.6)}
.card:hover .poster img{transform:scale(1.06)}
.card .play{
    position:absolute;inset:0;z-index:3;display:grid;place-items:center;opacity:0;transition:.25s var(--ease)}
.card:hover .play{opacity:1}
.card .play span{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);color:#000;display:grid;place-items:center;font-size:18px;padding-inline-start:3px}
.card__info{padding:11px 2px 0}
.card__title{font-size:15px;font-weight:700;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.card__author{font-size:13px;color:var(--dim);margin-block-start:2px}
.card__price{font-size:14px;font-weight:700;margin-block-start:6px}
.card__price .old{color:var(--dimmer);text-decoration:line-through;font-weight:400;margin-inline-start:6px;font-size:13px}

/* ===================== بانر ترويجي ===================== */
.promo{position:relative;border-radius:var(--r);overflow:hidden;margin-block:34px;min-height:340px;display:flex;align-items:center}
.promo .poster{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.promo__content{position:relative;z-index:2;padding:clamp(30px,5vw,64px);max-width:560px}
.promo__title{font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-.5px;margin-block:8px 14px}
.promo__desc{font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.92);margin-block-end:22px}

/* ===================== ترويسة الصفحة ===================== */
.phead{padding-block:calc(var(--nav-h) + 44px) 12px}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin-block-end:12px;flex-wrap:wrap}
.crumb a:hover{color:var(--text)}.crumb .sep{opacity:.5}
.ptitle{font-size:clamp(28px,5vw,46px);font-weight:900;letter-spacing:-.5px}
.psub{color:var(--dim);font-size:16px;margin-block-start:8px;max-width:640px}

/* ===================== المتجر ===================== */
.shop{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start;padding-block:24px 50px}
.shop>*{min-width:0}
/* الفلاتر في العمود الأول (اليمين في RTL) */
.filters{position:sticky;top:calc(var(--nav-h) + 16px);grid-column:1}
.fgroup{border-block-end:1px solid var(--line);padding-block:18px}
.fgroup:first-child{padding-block-start:0}
.fgroup h4{font-size:15px;font-weight:800;margin-block-end:12px}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:var(--dim);cursor:pointer;transition:color .2s var(--ease)}
.fopt:hover{color:var(--text)}
.fopt input{accent-color:#fff;width:16px;height:16px}
.fopt .count{margin-inline-start:auto;font-size:12px;color:var(--dimmer)}
.fopt .stars{color:var(--gold)}
.range{width:100%;accent-color:#fff;margin-block-start:8px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-block-end:20px;flex-wrap:wrap}
.toolbar .count{font-size:14px;color:var(--dim)}
.sortwrap{display:flex;align-items:center;gap:10px}
.select{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-family:inherit;font-size:14px;outline:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:24px 18px}
.grid .card{width:auto}
.filter-toggle{display:none;gap:7px}
.pager{display:flex;justify-content:center;gap:8px;margin-block-start:44px}
.pager a{min-width:40px;height:40px;padding:0 12px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:14px;font-weight:700;transition:.2s var(--ease)}
.pager a:hover{background:var(--surface-3)}.pager a.active{background:#fff;color:#000}

/* ===================== صفحة الكتاب ===================== */
/* في RTL: العمود الأول (يمين) = معلومات الكتاب (1fr)، العمود الثاني (يسار) = الغلاف (380px) */
.wrap.single{display:grid;grid-template-columns:380px 1fr;gap:50px;align-items:start;padding-top:24px;padding-bottom:40px}
.wrap.single>*{min-width:0}
/* الغلاف في العمود الأول (اليمين في RTL) */
.single__gallery{grid-column:1;grid-row:1;position:sticky;top:calc(var(--nav-h) + 16px)}
/* معلومات الكتاب في العمود الثاني (اليسار في RTL) */
.single__info{grid-column:2;grid-row:1}
.single__cover{border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.single__cover .label{font-size:26px}
.thumbs{display:flex;gap:10px;margin-top:14px}
.thumbs .poster{width:60px;aspect-ratio:2/3;border-radius:8px;cursor:pointer;border:2px solid transparent}
.thumbs .poster.active{border-color:#fff}
.single__info .eyebrow{color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.5px}
.single__info h1{font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.5px;margin-top:6px;margin-bottom:10px}
.single__author{color:var(--dim);font-size:16px}.single__author a{color:#fff}
.rating{display:flex;align-items:center;gap:8px;margin-top:16px;margin-bottom:16px;font-size:14px;color:var(--dim)}
.rating .stars{color:var(--gold);letter-spacing:2px}
.price{display:flex;align-items:baseline;gap:12px;margin-top:22px;margin-bottom:22px}
.price .now{font-size:34px;font-weight:900}.price .was{font-size:18px;color:var(--dimmer);text-decoration:line-through}
.price .save{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.single__desc{color:rgba(255,255,255,.85);font-size:16px;line-height:1.8;margin-bottom:24px;max-width:620px}
.qty-row{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.stepper button{width:42px;height:44px;font-size:20px;color:var(--text);transition:background .2s var(--ease)}
.stepper button:hover{background:rgba(255,255,255,.08)}
.stepper input{width:46px;text-align:center;background:none;border:none;color:var(--text);font-size:16px;font-weight:700;font-family:inherit;outline:none}
.single__actions{display:flex;gap:12px;flex-wrap:wrap}
.features{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.feature{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim)}.feature svg{color:#fff}
.tabs{padding-top:30px;padding-bottom:30px}
.tabs__nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.tabs__nav::-webkit-scrollbar{display:none}
.tab-btn{padding:12px 18px;font-size:15px;font-weight:700;color:var(--dim);border-bottom:2px solid transparent;white-space:nowrap;transition:.2s var(--ease)}
.tab-btn.active{color:var(--text);border-bottom-color:#fff}
.tab-panel{display:none;max-width:760px;color:rgba(255,255,255,.85);line-height:1.9;font-size:15px}
.tab-panel.active{display:block}
.spec{width:100%;border-collapse:collapse}
.spec td{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.spec td:first-child{color:var(--dim);width:180px}

/* ===================== شبكة التصنيفات ===================== */
.cat-strip{padding-block:8px 30px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-block-start:16px}
.cat-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;display:block;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cat-card:hover{transform:scale(1.03);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.cat-card__bg{position:absolute;inset:0}
.cat-card__bg img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.cat-card:hover .cat-card__bg img{transform:scale(1.08)}
.cat-card .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.08) 55%)}
.cat-card__label{position:absolute;bottom:0;left:0;right:0;padding:16px 14px;display:flex;flex-direction:column;gap:3px}
.cat-card__name{font-size:16px;font-weight:800;color:#fff;line-height:1.2}
.cat-card__count{font-size:12px;color:rgba(255,255,255,.6)}
/* صورة التصنيف في رأس صفحة الأرشيف */
.cat-hero{position:relative;height:260px;border-radius:var(--r);overflow:hidden;margin-block-end:28px}
.cat-hero img{width:100%;height:100%;object-fit:cover}
.cat-hero .scrim{position:absolute;inset:0;background:linear-gradient(to left,rgba(0,0,0,.65),transparent 50%)}
.cat-hero__label{position:absolute;bottom:24px;right:28px;text-align:right}
.cat-hero__label h1{font-size:clamp(26px,4vw,40px);font-weight:900;margin:0}
.cat-hero__label p{color:var(--dim);font-size:14px;margin-block-start:4px}

/* ===================== السلة ===================== */
.cart{display:grid;grid-template-columns:1fr 350px;gap:34px;align-items:start;padding-block:24px 50px}
.citem{display:grid;grid-template-columns:80px 1fr auto;gap:18px;padding:20px 0;border-block-end:1px solid var(--line);align-items:center}
.citem:first-child{padding-block-start:0}
.citem .poster{width:80px;border-radius:10px}
.citem h3{font-size:17px;font-weight:700}
.citem .by{color:var(--dim);font-size:13px;margin-block-start:3px}
.citem .ip{font-weight:700;margin-block-start:8px}
.cend{display:flex;flex-direction:column;align-items:end;gap:12px}
.cend .stepper{transform:scale(.9)}
.lt{font-weight:800;font-size:17px}
.rm{color:var(--dim);font-size:13px;transition:color .2s var(--ease);cursor:pointer}.rm:hover{color:var(--red)}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:sticky;top:calc(var(--nav-h) + 16px)}
.summary h3{font-size:19px;font-weight:800;margin-block-end:18px}
.srow{display:flex;justify-content:space-between;font-size:15px;padding:8px 0;color:var(--dim)}
.srow.total{color:var(--text);font-size:20px;font-weight:800;border-block-start:1px solid var(--line);margin-block-start:10px;padding-block-start:16px}
.coupon{display:flex;gap:8px;margin-block:16px}
.coupon input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--text);font-family:inherit;outline:none}
.empty{text-align:center;padding:60px 20px;color:var(--dim)}
.empty svg{margin:0 auto 18px;color:var(--dimmer)}

/* ===================== الدفع ===================== */
.checkout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding-block:24px 50px}
.fsec{margin-block-end:34px}
.fsec h3{font-size:20px;font-weight:800;margin-block-end:18px;display:flex;align-items:center;gap:10px}
.fsec h3 .no{width:28px;height:28px;border-radius:50%;background:#fff;color:#000;font-size:14px;display:grid;place-items:center}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600;color:var(--dim)}
.input{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:13px 15px;color:var(--text);font-family:inherit;font-size:15px;outline:none;transition:border-color .2s var(--ease)}
.input:focus{border-color:rgba(255,255,255,.5)}
.pays{display:flex;flex-direction:column;gap:12px}
.pay{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .2s var(--ease)}
.pay:hover,.pay.sel{border-color:rgba(255,255,255,.6)}
.pay input{accent-color:#fff}.pay .nm{font-weight:700;font-size:15px}.pay .ic{margin-inline-start:auto;color:var(--dim);font-size:13px}

/* ===================== الحساب ===================== */
.auth{max-width:440px;margin:0 auto;padding-block:calc(var(--nav-h) + 60px) 60px}
.auth__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.auth__tabs{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;margin-block-end:26px}
.auth__tab{flex:1;padding:11px;border-radius:9px;font-weight:700;font-size:15px;color:var(--dim);transition:.2s var(--ease)}
.auth__tab.active{background:#fff;color:#000}
.auth__form{display:none;flex-direction:column;gap:16px}.auth__form.active{display:flex}
.auth__alt{text-align:center;font-size:14px;color:var(--dim);margin-block-start:18px}.auth__alt a{color:#fff;font-weight:700}
.divider{display:flex;align-items:center;gap:14px;color:var(--dimmer);font-size:13px;margin-block:6px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:flex;gap:12px}.social .btn{flex:1}

/* ===================== تواصل / من نحن ===================== */
.contact{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start;padding-block:24px 50px}
.cinfo{display:flex;flex-direction:column;gap:22px}
.infocard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.infocard h4{font-size:16px;font-weight:800;margin-block-end:6px;display:flex;align-items:center;gap:10px}
.infocard p{color:var(--dim);font-size:14px}
.about{max-width:880px;margin:0 auto;padding-block:30px}
.about h2{font-size:28px;font-weight:900;margin-block-end:16px}
.about h3{font-size:22px;font-weight:800;margin-block:26px 12px}
.about p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.9;margin-block-end:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-block:30px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px 20px;text-align:center}
.stat .num{font-size:42px;font-weight:900;letter-spacing:-1px}.stat .lbl{color:var(--dim);font-size:14px;margin-block-start:6px}

/* ===================== 404 ===================== */
.err{min-height:80vh;display:grid;place-items:center;text-align:center;padding:120px 22px 60px}
.err .code{font-size:clamp(90px,18vw,200px);font-weight:900;line-height:1;background:linear-gradient(120deg,#fff,#86868b);-webkit-background-clip:text;background-clip:text;color:transparent}
.err h2{font-size:clamp(22px,4vw,32px);font-weight:800;margin-block:10px 14px}
.err p{color:var(--dim);font-size:17px;margin-block-end:26px}

/* ===================== الفوتر ===================== */
.footer{border-block-start:1px solid var(--line);margin-block-start:60px;padding-block:54px 34px}
.footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.footer__col h4{font-size:14px;font-weight:800;margin-block-end:14px}
.footer__col a{display:block;font-size:13px;color:var(--dim);padding:5px 0;transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--text)}
.footer__bottom{margin-block-start:34px;padding-block-start:24px;border-block-start:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:var(--dim)}
.footer__social{display:flex;gap:14px}
.footer__social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.2s var(--ease)}
.footer__social a:hover{background:rgba(255,255,255,.1)}

/* ===================== شريط التنقّل السفلي ===================== */
.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:900;align-items:center;gap:10px;
    padding:8px 14px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(0,0,0,.92) 35%,rgba(0,0,0,0));pointer-events:none}
.tabbar>*{pointer-events:auto}
.tabpill{flex:1;display:flex;justify-content:space-around;background:rgba(34,34,36,.72);
    backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:8px 6px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;padding:2px 0;color:var(--dim);font-size:10.5px;font-weight:600;transition:color .2s var(--ease)}
.tab:hover{color:var(--text)}.tab.active{color:var(--blue)}
.tabsearch{width:58px;height:58px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:var(--text);
    background:rgba(34,34,36,.72);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
    border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.tabsearch:active{background:rgba(60,60,64,.8)}

/* ===================== استجابة ===================== */
@media (max-width:980px){
    .shop{grid-template-columns:1fr;gap:0}
    .filters{position:static;display:block;grid-column:1;max-height:0;overflow:hidden;opacity:0;margin-block-end:0;
        transition:max-height .4s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
    .filter-toggle{display:inline-flex}
    .filters.open{max-height:1200px;opacity:1;margin-block-end:26px}
    .fgroup:first-child{padding-block-start:18px}
    .wrap.single{grid-template-columns:1fr;gap:30px}
    .single__gallery{grid-column:1;grid-row:1;position:static;width:min(300px,80vw);margin-left:auto;margin-right:auto}
    .single__info{grid-column:1;grid-row:2}
    .cart,.checkout,.contact{grid-template-columns:1fr}.summary{position:static}
    .stats{grid-template-columns:repeat(2,1fr)}
    .cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
    .nav,.header__actions .login{display:none}
    .tabbar{display:flex}
    body{padding-block-end:88px}.footer{margin-block-end:0}
    .hero__slide{min-height:auto}
    .hero__content{padding-block-end:40px}
    .cat-grid{grid-template-columns:repeat(2,1fr)}
    .cat-hero{height:180px}
}
@media (max-width:560px){
    .grid{grid-template-columns:1fr 1fr;gap:18px 14px}
    .toolbar .count{order:-1;width:100%}.filter-toggle{flex:1}.sortwrap{flex:1;justify-content:flex-end}.select{flex:1}
    .fgrid{grid-template-columns:1fr}
    .citem{grid-template-columns:64px 1fr}.cend{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
    .stats{grid-template-columns:1fr 1fr}
    .footer__grid{grid-template-columns:1fr 1fr}.footer__bottom{flex-direction:column;text-align:center}
    .hero__btns{width:100%}.hero__btns .btn{flex:1}
    .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
    .cat-card__name{font-size:14px}
}

/* ============================================================
   WooCommerce Overrides — تنسيق WooCommerce ليطابق التصميم
   ============================================================ */

/* صفحة My Account (تسجيل الدخول) */
.woocommerce-account .woocommerce,
.woocommerce-form-login-toggle,
.woocommerce-page .woocommerce{
    max-width:440px; margin:0 auto; padding-block:calc(var(--nav-h) + 60px) 60px;
}
.woocommerce-form-login,
.woocommerce-form-register{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px;
    display:flex; flex-direction:column; gap:16px;
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit{
    background:#fff !important; color:#000 !important; border:none !important;
    border-radius:999px !important; padding:14px 30px !important;
    font-size:16px !important; font-weight:700 !important; width:100%; cursor:pointer;
    transition:background .2s; font-family:inherit;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover{ background:#e8e8ed !important; }
.woocommerce .input-text,
.woocommerce input[type=text],
.woocommerce input[type=email],
.woocommerce input[type=password],
.woocommerce input[type=tel],
.woocommerce input[type=number],
.woocommerce select,
.woocommerce textarea{
    background:var(--surface-2) !important; border:1px solid var(--line) !important;
    border-radius:11px !important; padding:13px 15px !important;
    color:var(--text) !important; font-family:inherit !important; font-size:15px !important;
    outline:none !important; width:100%; transition:border-color .2s;
}
.woocommerce .input-text:focus,
.woocommerce input:focus{ border-color:rgba(255,255,255,.5) !important; }
.woocommerce label{ font-size:14px; font-weight:600; color:var(--dim); display:block; margin-bottom:7px; }
/* ============================================================
   لوحة الحساب بعد تسجيل الدخول (Dashboard)
   ============================================================ */
.woocommerce-account.logged-in .woocommerce{
    max-width:var(--maxw); margin:0 auto;
    padding-block:calc(var(--nav-h) + 24px) 60px;
    display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start;
}
.woocommerce-account.logged-in .woocommerce > *{ min-width:0; }
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1; }

/* شريط التنقّل الجانبي (يمين في RTL) */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{
    grid-column:1;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px;
    position:sticky; top:calc(var(--nav-h) + 16px);
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.woocommerce-MyAccount-navigation li{ border:none; padding:0; }
.woocommerce-MyAccount-navigation li a{
    display:block; padding:12px 16px; border-radius:12px; color:var(--dim);
    text-decoration:none; font-weight:600; font-size:15px; transition:.2s var(--ease);
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--surface-2); color:var(--text); }
.woocommerce-MyAccount-navigation li.is-active a{ background:#fff; color:#000; }

/* منطقة المحتوى */
.woocommerce-account.logged-in .woocommerce-MyAccount-content{
    grid-column:2;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:28px; color:var(--text); min-height:320px;
}
.woocommerce-MyAccount-content p{ color:rgba(255,255,255,.82); line-height:1.9; margin-bottom:14px; }
.woocommerce-MyAccount-content a:not(.button){ color:var(--blue); }
.woocommerce-MyAccount-content mark{ background:none; color:var(--text); font-weight:700; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{ font-size:20px; font-weight:800; margin:6px 0 16px; }
.woocommerce-MyAccount-content .woocommerce-Address{ margin-top:10px; }
.woocommerce-MyAccount-content address{ font-style:normal; color:var(--dim); line-height:1.9; }

/* جداول الطلبات/التنزيلات داخل الحساب */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-MyAccount-downloads{
    width:100%; border-collapse:collapse; background:transparent !important; border:none !important; margin-top:10px;
}
.woocommerce-account table.shop_table th{
    text-align:right; font-size:13px; color:var(--dim); font-weight:600;
    padding:12px 10px; border-bottom:1px solid var(--line) !important;
}
.woocommerce-account table.shop_table td{
    padding:14px 10px; border-bottom:1px solid var(--line) !important;
    color:var(--text); font-size:14px; background:transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-Button{ margin-top:6px; }

/* استجابة لوحة الحساب */
@media (max-width:860px){
    .woocommerce-account.logged-in .woocommerce{ grid-template-columns:1fr; gap:18px; }
    .woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ grid-column:1; position:static; }
    .woocommerce-account.logged-in .woocommerce-MyAccount-content{ grid-column:1; }
}

/* صفحة السلة */
.woocommerce-cart .woocommerce,
.woocommerce-page.woocommerce-cart .woocommerce{
    padding-block:0 50px;
}
.woocommerce-cart table.shop_table,
.woocommerce-cart-form .shop_table{
    background:transparent !important; border:none !important;
    border-collapse:collapse; width:100%;
}
.woocommerce-cart table.shop_table th{
    font-size:13px; color:var(--dim); font-weight:600;
    padding:10px 0; border-bottom:1px solid var(--line);
}
.woocommerce-cart table.shop_table td{
    padding:16px 0; border-bottom:1px solid var(--line); vertical-align:middle;
}
.woocommerce-cart table.shop_table img{ border-radius:10px; width:80px; aspect-ratio:2/3; object-fit:cover; }
.woocommerce-cart .quantity input.qty{
    background:var(--surface-2) !important; border:1px solid var(--line) !important;
    border-radius:8px !important; color:var(--text) !important;
    width:60px !important; text-align:center; padding:8px;
}
.woocommerce-cart .button{ border-radius:999px !important; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px;
}
.woocommerce .cart_totals h2{ font-size:19px; font-weight:800; margin-bottom:18px; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
    background:transparent !important; border:none !important;
    padding:8px 0; color:var(--dim); font-size:15px;
}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td{
    color:var(--text); font-size:20px; font-weight:800;
    border-top:1px solid var(--line) !important; padding-top:16px !important;
}
.woocommerce .checkout-button{
    background:#fff !important; color:#000 !important; border-radius:999px !important;
    padding:14px 30px !important; font-size:16px !important; font-weight:700 !important;
    width:100%; display:block; text-align:center;
}

/* صفحة الدفع (Checkout) */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields{
    display:flex; flex-direction:column; gap:14px;
}
.woocommerce-checkout .form-row{ margin-bottom:0 !important; }
#order_review{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; }
#order_review h3{ font-size:19px; font-weight:800; margin-bottom:18px; }
#order_review table.shop_table{
    width:100%; border-collapse:collapse; background:transparent; border:none;
}
#order_review table.shop_table th,
#order_review table.shop_table td{
    padding:8px 0; color:var(--dim); font-size:15px;
    border-bottom:1px solid var(--line);
}
#order_review tr.order-total td{ color:var(--text); font-size:20px; font-weight:800; }
#place_order{
    background:#fff !important; color:#000 !important; border-radius:999px !important;
    padding:14px 30px !important; font-size:16px !important; font-weight:700 !important;
    width:100%; border:none !important; cursor:pointer; font-family:inherit;
}
.payment_methods{ list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; }
.payment_methods li label{
    display:flex; align-items:center; gap:12px; padding:16px;
    border:1px solid var(--line); border-radius:12px; cursor:pointer;
    transition:border-color .2s; font-weight:700;
}
.payment_methods li label:hover{ border-color:rgba(255,255,255,.6); }
.payment_methods li input[type=radio]{ accent-color:#fff; }

/* أزرار WooCommerce عامة */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
    background:var(--surface-2) !important; color:var(--text) !important;
    border-radius:999px !important; border:1px solid var(--line-2) !important;
    padding:11px 22px !important; font-family:inherit !important; font-weight:700 !important;
    transition:.2s var(--ease) !important; font-size:15px !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt{
    background:#fff !important; color:#000 !important; border:none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover{ background:var(--surface-3) !important; }

/* إشعارات WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
    background:var(--surface) !important; border-color:var(--blue) !important;
    color:var(--text) !important; border-radius:var(--r-sm) !important;
    margin-block:16px !important;
}

/* ملاحظات WooCommerce */
.woocommerce-notices-wrapper{ margin-block:16px; }
.al-woo-wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:clamp(16px,3vw,30px); padding-block:calc(var(--nav-h) + 20px) 50px; }

/* الشريط الجانبي لـ WooCommerce (مخفي — نستخدم filters الخاص بنا) */
.woocommerce-sidebar{ display:none; }

/* أيقونات النجوم لتقييمات WooCommerce */
.star-rating span::before{ color:var(--gold); }

/* عنصر woocommerce-product-rating */
.woocommerce-product-rating{ display:flex; align-items:center; gap:8px; }

/* ============================================================
   نموذج المراجعات داخل تبويب التقييمات
   ============================================================ */
#reviews { color:var(--text); }
#reviews h2.woocommerce-Reviews-title{ font-size:20px; font-weight:800; margin-bottom:18px; }
#reviews .woocommerce-noreviews{ color:var(--dim); }
#review_form_wrapper{ margin-top:28px; }
#review_form h3{ font-size:17px; font-weight:800; margin-bottom:16px; color:var(--text); }
#commentform{ display:flex; flex-direction:column; gap:14px; }
#commentform label{ font-size:14px; font-weight:600; color:var(--dim); display:block; margin-bottom:6px; }
#commentform .comment-form-rating select,
#commentform input[type=text],
#commentform input[type=email],
#commentform input[type=url],
#commentform textarea{
    background:var(--surface-2) !important; border:1px solid var(--line) !important;
    border-radius:11px; padding:12px 14px; color:var(--text); font-family:inherit;
    font-size:15px; width:100%; outline:none; transition:border-color .2s var(--ease);
}
#commentform input:focus, #commentform textarea:focus, #commentform select:focus{
    border-color:rgba(255,255,255,.45) !important;
}
#commentform textarea{ min-height:110px; resize:vertical; }
#commentform .form-submit{ margin-top:4px; }
#commentform .form-submit input[type=submit]{
    background:#fff !important; color:#000 !important; border:none !important;
    border-radius:999px !important; padding:12px 28px !important; font-size:15px !important;
    font-weight:700 !important; cursor:pointer; font-family:inherit !important;
    transition:background .2s; display:inline-block;
}
#commentform .form-submit input[type=submit]:hover{ background:#e8e8ed !important; }
#commentform .comment-notes,
#commentform .comment-form-cookies-consent{ font-size:12px; color:var(--dim); }
.woocommerce-Reviews .comment-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:18px; margin-bottom:24px; }
.woocommerce-Reviews .review{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.woocommerce-Reviews .comment-text p{ color:rgba(255,255,255,.82); font-size:15px; line-height:1.8; }
.woocommerce-Reviews .meta{ font-size:13px; color:var(--dim); margin-bottom:10px; }

/* ============================================================
   حجم خط أكبر لحقول صفحة الدفع (بلوك WooCommerce)
   ============================================================ */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-checkout .wc-block-components-text-input input{
    font-size:17px !important;
    line-height:1.5 !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkout-step__description,
.wc-block-components-address-card{
    font-size:16px !important;
}
/* التسمية المنكمشة عند ملء الحقل تبقى مقروءة */
.wc-block-components-text-input.is-active label{
    font-size:13px !important;
}