/* ==========================================================================
   قالب «شِراع» Shiraa — theme.css
   تخطيط: شريطٌ علويّ بلون الهويّة، ورأسٌ داكن فيه بحثٌ كبسوليّ عريض، وتحته شريط تصنيفات أبيض.
   بطاقاتٌ في شبكةٍ بإطاراتٍ متلاصقة وزوايا حادّة، وعناوين أقسامٍ في البداية بكلمةٍ أولى عريضة،
   وتبويباتٌ مربّعة، وبانراتٌ رماديّة فاتحة بأسعارٍ كبيرة، وقسم بحثٍ داكن، وتذييلٌ داكن يسبقه شريط مزايا.
   ألوان الهويّة الخمسة وحدها متغيّرة؛ وما عداها محايد ثابت.
   ========================================================================== */

:root {
  /* ألوان الهويّة — قيم تجريبيّة يستبدلها كلّ ناشر */
  --store-primary: #C8282B;
  --store-primary-dark: #232F3F;
  --store-accent: #FECB00;
  --store-bg: #FFFFFF;
  --store-text: #1A1A1A;

  /* محايدات ثابتة (ليست من الهويّة) */
  --sh-lav: #F3F4F5;        /* لوحٌ رماديّ فاتح */
  --sh-peach: #F0F2F1;      /* خلفيّة البانرات */
  --sh-line: #E3E5E8;
  --sh-muted: #5C6067;
  --sh-ink: #1A1A1A;
  --sh-on-dark: #FFFFFF;
  --sh-on-dark-muted: #C3C9D1;
  --sh-on-accent: #1A1A1A;
  --sh-star: #F5B400;
  --sh-star-off: #D9DCE0;
  --sh-ok: #2E7D32;
  --sh-out: #6B6F76;
  --sh-overlay: rgba(20, 26, 34, .6);
  --sh-dark-line: rgba(255, 255, 255, .12);

  /* ألوان أنواع الكتب — ثابتة في المنصّة */
  --sh-type-paper: #DB7056;
  --sh-type-ebook: #5675A3;
  --sh-type-audio: #986AB0;
  --sh-type-edu: #3f8f6b;

  /* الخطّ والمقاسات */
  --sh-font: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  --sh-sh-xs: .8125rem;
  --sh-sh-sm: .9375rem;
  --sh-sh-md: 1rem;
  --sh-sh-lg: 1.25rem;
  --sh-sh-xl: 1.625rem;
  --sh-sh-2xl: 2.375rem;

  --sh-r-xs: 2px;
  --sh-r-sm: 3px;
  --sh-r-md: 4px;
  --sh-r-lg: 6px;
  --sh-r-full: 999px;
  --sh-shadow: 0 10px 28px rgba(20, 26, 34, .1);
  --sh-shadow-cover: 0 10px 20px -10px rgba(20, 26, 34, .45);
  --sh-container: 1320px;
  --sh-gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --sh-gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body { margin: 0; font-family: var(--sh-font); font-size: var(--sh-sh-md); line-height: 1.7; color: var(--store-text); background: var(--store-bg); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; text-wrap: balance; font-weight: 800; color: var(--sh-ink); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--store-accent); outline-offset: 2px; }
.sh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sh-flip { transform: scaleX(-1); }
.sh-note { color: var(--sh-muted); font-size: var(--sh-sh-sm); }

.sh-container { width: 100%; max-width: var(--sh-container); margin-inline: auto; padding-left: var(--sh-gutter-l); padding-right: var(--sh-gutter-r); }
.sh-section { padding-block: 56px; position: relative; }
.sh-section--lav { background: var(--sh-lav); }
.sh-section--peach { background: var(--sh-peach); }

/* ---------- الأيقونات ---------- */
.sh-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-icon--sm { width: 18px; height: 18px; }

/* ---------- الأزرار ---------- */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 24px;
  border: 1.5px solid transparent; border-radius: var(--sh-r-xs);
  font-weight: 800; font-size: var(--sh-sh-sm); line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.sh-btn:active { transform: translateY(1px); }
.sh-btn--primary { background: var(--store-primary); color: var(--sh-on-dark); }
.sh-btn--primary:hover { background: var(--store-primary-dark); }
.sh-btn--dark { background: var(--store-primary-dark); color: var(--sh-on-dark); }
.sh-btn--dark:hover { background: var(--store-primary); }
.sh-btn--outline { background: transparent; border-color: var(--store-primary); color: var(--store-primary); }
.sh-btn--outline:hover { background: var(--store-primary); color: var(--sh-on-dark); }
.sh-btn--light { background: var(--store-bg); color: var(--sh-ink); }
.sh-btn--light:hover { background: var(--store-accent); color: var(--sh-on-accent); }
.sh-btn--accent { background: var(--store-accent); color: var(--sh-on-accent); }
.sh-btn--accent:hover { background: var(--store-bg); }
.sh-btn--ghost { background: var(--sh-lav); color: var(--store-text); }
.sh-btn--ghost:hover { background: var(--sh-line); }
.sh-btn--block { width: 100%; }
.sh-btn--sm { min-height: 40px; padding: 6px 16px; font-size: .875rem; }
.sh-btn--xs { min-height: 34px; padding: 4px 12px; font-size: var(--sh-sh-xs); }
.sh-btn[disabled] { background: var(--sh-lav); color: var(--sh-muted); border-color: transparent; cursor: not-allowed; transform: none; }
.sh-btn .sh-arrow { transform: scaleX(-1); }

.sh-icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--sh-r-xs); border: 1px solid var(--sh-line);
  background: var(--store-bg); color: var(--sh-ink);
  transition: background-color .2s, color .2s, border-color .2s;
}
.sh-icon-btn:hover { background: var(--store-primary); border-color: var(--store-primary); color: var(--sh-on-dark); }
.sh-icon-btn--plain { border-color: transparent; background: transparent; }
.sh-icon-btn--plain:hover { background: var(--sh-lav); border-color: transparent; color: var(--store-primary); }
.sh-icon-btn--cart { background: var(--store-primary); border-color: var(--store-primary); color: var(--sh-on-dark); }
.sh-icon-btn--cart:hover { background: var(--store-primary-dark); border-color: var(--store-primary-dark); }
.sh-icon-btn[aria-pressed="true"] { color: var(--store-primary); }
.sh-icon-btn[aria-pressed="true"] .sh-icon { fill: currentColor; }

.sh-count {
  position: absolute; top: -6px; inset-inline-end: -8px;
  min-width: 18px; height: 18px; padding-inline: 4px; border-radius: var(--sh-r-full);
  background: var(--store-primary); color: var(--sh-on-dark);
  font-size: .6875rem; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.sh-count:empty { display: none; }

/* ---------- عنوان القسم: في البداية، وكلمته الأولى عريضة، والتبويبات في الطرف الآخر ---------- */
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.sh-title { display: grid; gap: 4px; margin-bottom: 22px; }
.sh-title h2 { font-size: var(--sh-sh-xl); font-weight: 500; color: var(--sh-ink); }
.sh-title h2 b { font-weight: 800; }
.sh-title p { color: var(--sh-muted); font-size: var(--sh-sh-sm); max-width: 60ch; }
.sh-title--center { justify-items: center; text-align: center; }
.sh-head .sh-title { margin: 0; }

/* التبويبات المربّعة */
.sh-tabs { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid var(--sh-line); border-inline-end: 0; }
.sh-tabs button { min-width: 110px; padding: 10px 18px; border: 0; border-inline-end: 1px solid var(--sh-line); background: var(--store-bg); font-weight: 700; font-size: var(--sh-sh-sm); color: var(--store-text); }
.sh-tabs button:hover { color: var(--store-primary); }
.sh-tabs button:is([aria-pressed="true"], [aria-selected="true"]) { background: var(--store-primary); color: var(--sh-on-dark); }

/* ---------- الشريط العلويّ ---------- */
.sh-topbar { background: var(--store-primary); color: var(--sh-on-dark); font-size: var(--sh-sh-xs); }
.sh-topbar .sh-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.sh-topbar__links { display: flex; gap: 16px; font-weight: 700; }
.sh-topbar__links a:hover, .sh-topbar__end a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sh-topbar__msg { display: flex; align-items: center; gap: 10px; text-align: center; }
.sh-pill { display: inline-block; padding: 1px 10px; border-radius: var(--sh-r-xs); background: var(--store-accent); color: var(--sh-on-accent); font-weight: 800; font-size: .75rem; }
.sh-topbar__end { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.sh-topbar__end a { display: inline-flex; align-items: center; gap: 6px; }
.sh-topbar__end .sh-icon { width: 16px; height: 16px; }

/* ---------- الرأس الداكن ---------- */
.sh-header { position: sticky; top: 0; z-index: 40; background: var(--store-primary-dark); color: var(--sh-on-dark); }
.sh-header .sh-bar { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.sh-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.sh-brand img { width: 42px; height: 42px; border-radius: var(--sh-r-md); }
.sh-brand__name { font-size: 1.375rem; font-weight: 800; color: var(--sh-ink); white-space: nowrap; }
.sh-header .sh-brand__name { color: var(--sh-on-dark); }
.sh-header .sh-icon-btn--plain { color: var(--sh-on-dark); }
.sh-header .sh-icon-btn--plain:hover { background: rgba(255, 255, 255, .1); color: var(--sh-on-dark); }

/* البحث الكبسوليّ */
.sh-hsearch { flex: 1; display: flex; align-items: center; min-width: 0; max-width: 720px; height: 48px; padding: 4px; padding-inline-start: 0; border-radius: var(--sh-r-full); background: var(--store-bg); color: var(--store-text); }
.sh-hsearch__cat { position: relative; flex: none; height: 100%; border-inline-end: 1px solid var(--sh-line); }
.sh-hsearch__cat select { height: 100%; appearance: none; -webkit-appearance: none; padding: 0 18px; padding-inline-end: 34px; border: 0; border-radius: var(--sh-r-full) 0 0 var(--sh-r-full); background: transparent; font-size: var(--sh-sh-sm); font-weight: 700; }
[dir="rtl"] .sh-hsearch__cat select { border-radius: 0 var(--sh-r-full) var(--sh-r-full) 0; }
.sh-hsearch__cat::after { content: ""; position: absolute; top: 50%; inset-inline-end: 14px; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.sh-hsearch input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; background: transparent; font-size: var(--sh-sh-sm); }
.sh-hsearch input:focus, .sh-hsearch select:focus { outline: none; }
.sh-hsearch:focus-within { box-shadow: 0 0 0 3px var(--store-accent); }
.sh-hsearch__btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--store-primary); color: var(--sh-on-dark); }
.sh-hsearch__btn:hover { background: var(--store-primary-dark); }

.sh-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
.sh-actions .sh-icon-btn--plain { width: 44px; height: 44px; }
.sh-actions__cart { color: var(--sh-on-dark); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--sh-sh-sm); }
.sh-actions__cart small { display: block; font-size: .75rem; font-weight: 500; color: var(--sh-on-dark-muted); line-height: 1.2; }
.sh-actions__cart b { color: var(--sh-on-dark); display: block; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sh-menu-btn { display: inline-grid; }

/* شريط التصنيفات الأبيض */
.sh-catnav { position: relative; z-index: 20; background: var(--store-bg); border-bottom: 1px solid var(--sh-line); box-shadow: 0 2px 10px rgba(20, 26, 34, .04); }
.sh-menu { display: flex; align-items: stretch; gap: 2px; min-height: 46px; }
.sh-menu > li { position: relative; display: flex; }
.sh-menu > li > a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 700; font-size: var(--sh-sh-sm); color: var(--store-text); }
.sh-menu > li > a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 0; height: 3px; background: var(--store-primary); transform: scaleX(0); transition: transform .2s; }
.sh-menu > li > a:hover, .sh-menu [aria-current="page"] { color: var(--store-primary); }
.sh-menu > li > a:hover::after, .sh-menu [aria-current="page"]::after { transform: scaleX(1); }
.sh-menu .sh-icon--chev { width: 14px; height: 14px; transform: rotate(90deg); }
.sh-menu__end { margin-inline-start: auto; }
.sh-menu__end > a { color: var(--store-primary) !important; }

.sh-field { flex: 1; min-width: 0; padding: 11px 16px; border: 1.5px solid var(--sh-line); border-radius: var(--sh-r-xs); background: var(--store-bg); font-size: var(--sh-sh-sm); }
.sh-field:focus { outline: none; border-color: var(--store-primary); }

/* ---------- الدرج الجانبيّ ---------- */
.sh-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; color: var(--store-text); }
.sh-drawer.is-open { visibility: visible; }
.sh-drawer__backdrop { position: absolute; inset: 0; background: var(--sh-overlay); opacity: 0; transition: opacity .25s; }
.sh-drawer.is-open .sh-drawer__backdrop { opacity: 1; }
.sh-drawer__panel {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(86vw, 340px); background: var(--store-bg);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%); transition: transform .3s ease;
}
.sh-drawer.is-open .sh-drawer__panel { transform: translateX(0); }
.sh-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sh-drawer__head .sh-brand__name { font-size: 1.125rem; }
.sh-drawer__head .sh-icon-btn--plain { color: var(--store-text); }
.sh-drawer__title { font-size: var(--sh-sh-xs); font-weight: 800; color: var(--sh-muted); margin: 16px 0 6px; }
.sh-drawer__links a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--sh-line); font-weight: 700; }
.sh-drawer__links a:hover { color: var(--store-primary); }
.sh-drawer__contacts { margin-top: auto; padding-top: 18px; display: grid; gap: 6px; font-size: var(--sh-sh-sm); color: var(--sh-muted); }

/* ---------- البحث المتقدّم (داخل لوحٍ داكن) ---------- */
.sh-finder-wrap { position: relative; overflow: hidden; padding: 56px 40px; background: var(--store-primary-dark); color: var(--sh-on-dark); text-align: center; }
.sh-finder-wrap::before { content: ""; position: absolute; inset-block: -40%; inset-inline-end: -8%; width: 46%; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .04); pointer-events: none; }
.sh-finder-wrap h2 { color: var(--sh-on-dark); font-size: var(--sh-sh-xl); font-weight: 500; }
.sh-finder-wrap h2 b { font-weight: 800; }
.sh-finder-wrap > p { color: var(--sh-on-dark-muted); font-size: var(--sh-sh-sm); margin: 8px auto 26px; max-width: 60ch; }
.sh-finder { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 0; align-items: center; max-width: 1100px; margin-inline: auto; padding: 28px; background: var(--store-primary); }
.sh-finder label { position: relative; display: block; }
.sh-finder select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 12px 16px; padding-inline-end: 36px; border: 0; border-radius: 0; background: var(--store-bg); font-size: var(--sh-sh-sm); color: var(--store-text);
}
.sh-finder label::after {
  content: ""; position: absolute; top: 50%; inset-inline-end: 14px; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--sh-muted); border-bottom: 1.5px solid var(--sh-muted); transform: rotate(45deg); pointer-events: none;
}
.sh-finder label + label select { border-inline-start: 1px solid var(--sh-line); }
.sh-finder select:focus { outline: 3px solid var(--store-accent); outline-offset: -3px; }
.sh-finder .sh-btn { margin-inline-start: 10px; min-height: 48px; }

/* ---------- بطاقة الكتاب في شبكةٍ بإطاراتٍ متلاصقة ---------- */
.sh-grid { display: grid; gap: 0; grid-template-columns: repeat(var(--sh-cols, 5), minmax(0, 1fr)); border-top: 1px solid var(--sh-line); border-inline-start: 1px solid var(--sh-line); }
.sh-grid > * { border-bottom: 1px solid var(--sh-line); border-inline-end: 1px solid var(--sh-line); }
.sh-grid--open { border: 0; gap: 30px 22px; }
.sh-grid--open > * { border: 0; }
.sh-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; background: var(--store-bg); transition: box-shadow .25s; }
.sh-grid > .sh-card:hover { z-index: 2; box-shadow: 0 10px 30px rgba(20, 26, 34, .12); }
.sh-grid--open > .sh-card { padding: 0; }
.sh-grid--open > .sh-card:hover { box-shadow: none; }
.sh-card__media { position: relative; padding-inline: 10%; }
.sh-cover { position: relative; display: block; aspect-ratio: 2 / 3; max-width: 100%; border-radius: var(--sh-r-sm); overflow: hidden; box-shadow: var(--sh-shadow-cover); background: var(--sh-lav); }
.sh-cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform .5s ease; }
.sh-cover__back { position: absolute; inset: 0; opacity: 0; }
.sh-card:hover .sh-cover__back, .sh-card:focus-within .sh-cover__back { opacity: 1; }

.sh-type {
  position: absolute; bottom: 8px; inset-inline-start: 8px; z-index: 2;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: 0 2px 8px rgba(20, 26, 34, .3);
}
.sh-type .sh-icon { width: 15px; height: 15px; stroke-width: 2; }
.sh-type--paper { background: var(--sh-type-paper); }
.sh-type--ebook { background: var(--sh-type-ebook); }
.sh-type--audio { background: var(--sh-type-audio); }
.sh-type--edu   { background: var(--sh-type-edu); }

.sh-badges { position: absolute; top: 0; inset-inline-start: 0; z-index: 3; display: grid; justify-items: start; gap: 4px; }
.sh-badge { padding: 2px 9px; border-radius: var(--sh-r-xs); font-size: .75rem; font-weight: 800; line-height: 1.6; color: var(--sh-on-dark); }
.sh-badge--sale { background: var(--store-primary); }
.sh-badge--new  { background: var(--sh-ok); }
.sh-badge--out  { background: var(--sh-out); }
.sh-badge--hot  { background: var(--store-accent); color: var(--sh-on-accent); }

.sh-quick {
  position: absolute; top: 0; inset-inline-end: 0; z-index: 3; display: grid; gap: 6px;
  opacity: 0; transform: translateX(-6px); visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
}
[dir="rtl"] .sh-quick { transform: translateX(6px); }
.sh-quick .sh-icon-btn { width: 36px; height: 36px; }
.sh-card:hover .sh-quick, .sh-card:focus-within .sh-quick { opacity: 1; transform: none; visibility: visible; }
@media (hover: none) { .sh-quick { opacity: 1; transform: none; visibility: visible; } }
.sh-card.is-out .sh-cover img:not(.sh-cover__back) { filter: grayscale(1); opacity: .6; }
.sh-card.is-out .sh-cover__back { display: none; }

.sh-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; text-align: start; }
.sh-card__author { font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-card__author:hover { color: var(--store-primary); }
.sh-card__title { font-size: 1rem; font-weight: 800; line-height: 1.5; color: var(--sh-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-card__title a:hover { color: var(--store-primary); }

/* ---------- السعر ---------- */
.sh-price { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 2px 8px; }
.sh-price__now { font-size: 1.0625rem; font-weight: 800; color: var(--store-primary); font-variant-numeric: tabular-nums; }
.sh-price--plain .sh-price__now { color: var(--store-text); }
.sh-price__old { font-size: var(--sh-sh-sm); color: var(--sh-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.sh-price--start { justify-content: flex-start; }
.sh-price--center { justify-content: center; }

/* السعر الكبير: الكسور مرفوعة صغيرة، والفاصلة بلون الهويّة */
.sh-bigprice { display: inline-flex; align-items: flex-start; gap: 6px; font-weight: 800; color: var(--sh-ink); font-variant-numeric: tabular-nums; line-height: 1; direction: ltr; }
.sh-bigprice b { font-size: 2.75rem; }
.sh-bigprice sup { font-size: 1.125rem; margin-top: 4px; }
.sh-bigprice i { font-style: normal; color: var(--store-primary); font-size: 2.75rem; }
.sh-bigprice small { font-size: 1rem; align-self: flex-end; margin-bottom: 4px; }
.sh-kicker { font-size: var(--sh-sh-xs); font-weight: 800; color: var(--store-primary); }

/* ---------- التقييم ---------- */
.sh-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-stars { position: relative; display: inline-block; width: 80px; height: 16px; flex: none; }
.sh-stars svg { position: absolute; inset: 0; width: 80px; height: 16px; }
.sh-stars__off { fill: var(--sh-star-off); }
.sh-stars__on { fill: var(--sh-star); clip-path: inset(0 calc(100% - var(--sh-score, 0) * 20%) 0 0); }
[dir="rtl"] .sh-stars__on { clip-path: inset(0 0 0 calc(100% - var(--sh-score, 0) * 20%)); }
.sh-rating--lg .sh-stars, .sh-rating--lg .sh-stars svg { width: 110px; height: 22px; }
.sh-rating--lg { font-size: var(--sh-sh-sm); }
.sh-rating__value { font-weight: 800; color: var(--store-text); font-variant-numeric: tabular-nums; }

/* ---------- البطاقة الأفقيّة (في صندوق «قسمٌ مع بانر») ---------- */
.sh-hcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--sh-line); background: var(--store-bg); min-width: 0; }
.sh-hcard .sh-type { width: 24px; height: 24px; bottom: 5px; inset-inline-start: 5px; }
.sh-hcard .sh-type .sh-icon { width: 12px; height: 12px; }
.sh-hcard__body { display: grid; gap: 4px; min-width: 0; }
.sh-hcard__cat { font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-hcard__title { font-size: 1rem; font-weight: 800; color: var(--sh-ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-hcard__title a:hover { color: var(--store-primary); }
.sh-hcard__desc { font-size: var(--sh-sh-sm); color: var(--sh-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-hcard__buy { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sh-qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--sh-line); border-radius: var(--sh-r-xs); background: var(--store-bg); }
.sh-qty button { width: 34px; height: 100%; border: 0; background: transparent; font-size: 1.125rem; font-weight: 700; }
.sh-qty button:hover { color: var(--store-primary); }
.sh-qty input { width: 34px; border: 0; background: transparent; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sh-qty input::-webkit-inner-spin-button, .sh-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- بطاقة العرض الأفقيّة: شريط «متاح/بيع» وزرّ ---------- */
.sh-fcard { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--sh-line); background: var(--store-bg); min-width: 0; }
.sh-fcard .sh-type { width: 24px; height: 24px; bottom: 5px; inset-inline-start: 5px; }
.sh-fcard .sh-type .sh-icon { width: 12px; height: 12px; }
.sh-fcard__body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sh-fcard .sh-btn { margin-top: 8px; justify-self: start; }


/* ---------- بطاقة الغلاف الكامل ---------- */
.sh-poster { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--store-primary-dark); color: var(--sh-on-dark); }
.sh-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sh-poster:hover img { transform: scale(1.04); }
.sh-poster__text { position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; padding: 70px 22px 22px; background: linear-gradient(to top, rgba(18, 24, 32, .94) 25%, rgba(18, 24, 32, 0)); }
.sh-poster__text h3 { color: var(--sh-on-dark); font-size: var(--sh-sh-lg); }
.sh-poster__text p { font-size: var(--sh-sh-sm); opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-poster__price { font-weight: 800; color: var(--store-accent); font-variant-numeric: tabular-nums; }
.sh-poster .sh-type { top: 14px; bottom: auto; inset-inline-start: 14px; }

/* ---------- دوائر التصنيفات ---------- */
.sh-circles { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px 30px; }
.sh-circle { display: grid; justify-items: center; gap: 10px; width: 110px; text-align: center; }
.sh-circle__disc { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--sh-lav); border: 1px solid var(--sh-line); overflow: hidden; transition: border-color .2s, transform .2s; }
.sh-circle__disc img { width: 58%; height: auto; }
.sh-circle__disc b { font-size: var(--sh-sh-sm); font-weight: 800; color: var(--sh-ink); }
.sh-circle--new .sh-circle__disc { background: #EAF5EC; }
.sh-circle--new .sh-circle__disc b { color: var(--sh-ok); }
.sh-circle--sale .sh-circle__disc { background: #FBECEC; }
.sh-circle--sale .sh-circle__disc b { color: var(--store-primary); }
.sh-circle:hover .sh-circle__disc { border-color: var(--store-primary); transform: translateY(-3px); }
.sh-circle__name { font-size: var(--sh-sh-sm); font-weight: 800; color: var(--sh-ink); line-height: 1.4; }
.sh-circle__count { font-size: .75rem; color: var(--sh-muted); margin-top: -8px; }

/* ---------- صورة الحرف الأوّل لصاحب الرأي ---------- */
.sh-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--store-primary-dark); color: var(--sh-on-dark); font-weight: 800; font-size: 1.125rem; }

/* ---------- العدّاد التنازليّ ---------- */

/* ---------- ترقيم الصفحات ---------- */
.sh-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sh-pager a, .sh-pager span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 8px; border: 1px solid var(--sh-line); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--store-text); }
.sh-pager a:hover { border-color: var(--store-primary); color: var(--store-primary); }
.sh-pager [aria-current="page"] { background: var(--store-primary); border-color: var(--store-primary); color: var(--sh-on-dark); }
.sh-pager .is-gap { border-color: transparent; color: var(--sh-muted); }
.sh-pager .sh-icon { width: 16px; height: 16px; }
.sh-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.sh-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--sh-r-full); background: var(--sh-line); transition: width .25s, background-color .25s; }
.sh-dots button[aria-current="true"] { width: 28px; background: var(--store-primary); }

/* ---------- البانرات: صورةٌ يرفعها الناشر (banner.image) ونصٌّ اختياريّ فوقها ---------- */
.sh-banner { position: relative; display: flex; align-items: center; min-height: 100%; padding: 40px 48px; overflow: hidden; background: var(--sh-peach); isolation: isolate; }
.sh-banner__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
[dir="ltr"] .sh-banner__img { object-position: right center; }
.sh-banner__text { position: relative; display: grid; justify-items: start; gap: 10px; max-width: 46%; }
.sh-banner__title { font-size: 2.25rem; font-weight: 800; line-height: 1.2; color: var(--sh-ink); }
.sh-banner__title span { display: block; color: var(--store-primary); }
.sh-banner__lead { color: var(--sh-muted); font-size: var(--sh-sh-sm); max-width: 40ch; }
.sh-banner--hero { min-height: 420px; }
.sh-banner--wide { min-height: 490px; }
.sh-banner--pair { min-height: 340px; }
.sh-banner--sm { padding: 30px 28px; }
.sh-banner--sm .sh-banner__title { font-size: 1.5rem; }
.sh-banner--sm .sh-banner__text { max-width: 58%; }
.sh-banner--tall { min-height: 380px; }
/* البانر بلا نصّ: تحذف المنصّة .sh-banner__text إن كانت الصورة تحمل نصّها، فتبقى الصورة وحدها */
.sh-note-star { font-size: var(--sh-sh-xs); color: var(--sh-muted); font-style: italic; }
.sh-note-star::before { content: "*"; color: var(--store-primary); }

/* شارة الدائرة الداكنة */
.sh-disc { display: grid; place-items: center; align-content: center; width: 120px; height: 120px; border-radius: 50%; background: var(--store-primary-dark); color: var(--sh-on-dark); text-align: center; line-height: 1.15; }
.sh-disc small { font-size: .75rem; font-weight: 700; }
.sh-disc b { font-size: 1.875rem; font-weight: 800; }

/* شريط الكوبون */
.sh-coupon-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; background: var(--sh-lav); border: 1px solid var(--sh-line); }
.sh-coupon-bar__tab { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 28px; padding-inline-end: 40px; background: var(--store-primary-dark); color: var(--sh-on-dark); font-weight: 800; clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
[dir="rtl"] .sh-coupon-bar__tab { clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%); }
.sh-coupon-bar__text { display: flex; align-items: center; justify-content: center; padding: 10px 18px; font-size: var(--sh-sh-sm); text-align: center; }
.sh-coupon-bar__text bdi { font-weight: 800; color: var(--store-primary); }
.sh-coupon-bar .sh-btn { min-height: 0; border-radius: 0; }
/* شريط الكوبون اختياريّ: يختفي كلّه إن غاب الكود أو جاء فارغًا */
.sh-coupon-bar:has([data-slot="offer.coupon_code"]:empty) { display: none; }

/* شريط العرض الداكن */
.sh-strip { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 30px; padding: 16px 28px; background: var(--store-primary-dark); color: var(--sh-on-dark); }
.sh-strip__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--store-accent); }
.sh-strip b { font-size: 1.625rem; font-weight: 800; }
.sh-strip p { font-size: var(--sh-sh-sm); color: var(--sh-on-dark-muted); font-style: italic; }

/* السلاسل المختارة (مكان الماركات) */
.sh-series { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sh-line); border-inline-start: 1px solid var(--sh-line); }
.sh-series a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 12px; border-bottom: 1px solid var(--sh-line); border-inline-end: 1px solid var(--sh-line); color: var(--store-primary); font-weight: 800; font-size: 1.0625rem; transition: background-color .2s; }
.sh-series a:hover { background: var(--sh-lav); }
.sh-series .sh-icon { width: 30px; height: 30px; stroke-width: 1.6; }

/* شريط المزايا */
.sh-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sh-trust li { display: flex; align-items: center; gap: 12px; }
.sh-trust__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FBECEC; color: var(--store-primary); flex: none; }
.sh-trust b { display: block; font-weight: 800; color: var(--sh-ink); font-size: var(--sh-sh-sm); }
.sh-trust small { display: block; font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-trustbar { background: var(--store-primary); color: var(--sh-on-dark); }
.sh-trustbar .sh-trust { padding-block: 18px; }
.sh-trustbar .sh-trust__icon { background: transparent; color: var(--sh-on-dark); width: auto; height: auto; }
.sh-trustbar .sh-trust b { color: var(--sh-on-dark); }
.sh-trustbar .sh-trust small { color: var(--sh-on-dark); }

/* ---------- التذييل الداكن ---------- */
.sh-footer { background: var(--store-primary-dark); color: var(--sh-on-dark-muted); }
.sh-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, .8fr)) 1.2fr; gap: 40px; padding-block: 52px 36px; }
.sh-footer .sh-brand__name { color: var(--sh-on-dark); }
.sh-footer h3 { color: var(--sh-on-dark); font-size: var(--sh-sh-md); margin-bottom: 18px; }
.sh-footer__about { display: grid; gap: 16px; align-content: start; }
.sh-footer__about p { font-size: var(--sh-sh-sm); }
.sh-subscribe { display: flex; height: 46px; padding: 3px; border-radius: var(--sh-r-full); background: var(--store-bg); }
.sh-subscribe input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; font-size: var(--sh-sh-sm); color: var(--store-text); }
.sh-subscribe input:focus { outline: none; }
.sh-subscribe:focus-within { box-shadow: 0 0 0 3px var(--store-accent); }
.sh-subscribe .sh-btn { min-height: 0; border-radius: var(--sh-r-full); padding-inline: 20px; }
.sh-social { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-social > span { color: var(--sh-on-dark); font-weight: 800; margin-inline-end: 6px; }
.sh-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--sh-on-dark); transition: background-color .2s; }
.sh-social a:hover { background: var(--store-primary); }
.sh-social .sh-icon { width: 16px; height: 16px; }
.sh-footer__links { display: grid; gap: 10px; font-size: var(--sh-sh-sm); }
.sh-footer__links a { display: inline-flex; align-items: center; gap: 8px; }
.sh-footer__links a::before { content: "›"; color: var(--store-accent); font-weight: 800; }
.sh-footer__links a:hover { color: var(--sh-on-dark); }
.sh-contact { display: grid; gap: 14px; font-size: var(--sh-sh-sm); }
.sh-contact li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.sh-contact .sh-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--store-accent); }
.sh-contact bdi { color: var(--sh-on-dark); font-weight: 700; }
.sh-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 18px; border-top: 1px solid var(--sh-dark-line); font-size: var(--sh-sh-xs); }
.sh-pay { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-pay span { padding: 3px 10px; border-radius: var(--sh-r-xs); background: rgba(255, 255, 255, .1); color: var(--sh-on-dark); font-weight: 700; font-size: .75rem; }

/* ---------- المواضع الاختياريّة ---------- */
/* الغلاف الخلفيّ: إن غاب أو جاء بلا مصدر، لا يظهر شيءٌ مكانه */
.sh-cover__back:not([src]), .sh-cover__back[src=""] { display: none; }
/* سطر العنوان في التذييل: يختفي وحده إن غاب العنوان أو جاء فارغًا */
.sh-contact__addr:has([data-slot="store.address"]:empty) { display: none; }

/* ---------- معرض صفحة الكتاب: الغلاف وظهره ---------- */
.sh-gallery { display: grid; gap: 14px; justify-items: center; }
.sh-gallery__stage { position: relative; width: min(300px, 100%); }
.sh-gallery__stage .sh-cover { box-shadow: 0 26px 44px -20px rgba(20, 26, 34, .55); }
.sh-gallery.is-flipped .sh-cover__back { opacity: 1; }
.sh-gallery__tools { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; }
.sh-thumbs { display: flex; gap: 8px; }
.sh-thumbs button { width: 52px; padding: 3px; border-radius: var(--sh-r-xs); border: 1.5px solid var(--sh-line); background: var(--store-bg); }
.sh-thumbs button[aria-pressed="true"] { border-color: var(--store-primary); }
.sh-thumbs img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.sh-flip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--sh-line); border-radius: var(--sh-r-xs); background: var(--store-bg); font-size: var(--sh-sh-sm); font-weight: 700; }
.sh-flip-btn:hover { border-color: var(--store-primary); color: var(--store-primary); }
/* لا ظهر للكتاب: يختفي زرّ القلب والمصغّرات معًا، ويبقى الغلاف الأماميّ وحده */
.sh-gallery:not(:has(.sh-cover__back[src]:not([src=""]))) .sh-gallery__tools { display: none; }

/* ==========================================================================
   أقسام الصفحة الرئيسيّة
   ========================================================================== */
.sh-hero { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 22px; padding-top: 26px; }
.sh-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sh-hero__track::-webkit-scrollbar { display: none; }
.sh-hero__main { position: relative; min-width: 0; }
.sh-slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 420px; }
.sh-slide .sh-banner { height: 100%; }
.sh-slide__ribbon { position: absolute; top: 26px; inset-inline-end: 0; z-index: 2; display: grid; padding: 6px 16px; background: var(--store-primary-dark); color: var(--sh-on-dark); text-align: center; line-height: 1.25; }
.sh-slide__ribbon small { font-size: .6875rem; color: var(--store-accent); font-weight: 800; }
.sh-slide__ribbon b { font-size: var(--sh-sh-sm); }
.sh-hero .sh-dots { position: absolute; bottom: 16px; inset-inline: 0; margin: 0; }
.sh-side { position: relative; display: grid; align-content: start; gap: 8px; padding: 28px; overflow: hidden; background: var(--sh-peach); min-height: 420px; isolation: isolate; }
.sh-side .sh-banner__img { object-position: center bottom; }
.sh-side h2 { font-size: 1.5rem; line-height: 1.3; }
.sh-side__link { font-weight: 800; color: var(--store-primary); text-decoration: underline; text-underline-offset: 4px; font-size: var(--sh-sh-sm); justify-self: start; }
.sh-side .sh-disc { position: absolute; top: 120px; inset-inline-end: 22px; z-index: 2; }

.sh-group { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--sh-line); }
.sh-group__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-group__items > .sh-card { padding: 22px; }
.sh-group .sh-banner { margin: 10px; min-height: 0; }
.sh-recommend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 22px; align-items: stretch; }
.sh-recommend .sh-grid { --sh-cols: 4; align-self: start; }
/* إن أخفى الناشر منطقةً داخل منطقة، يتّسع ما بقي ولا يبقى فراغ */
.sh-hero:not(:has(.sh-side)), .sh-hero:not(:has(.sh-hero__main)) { grid-template-columns: 1fr; }
.sh-group:not(:has(.sh-banner)) { grid-template-columns: 1fr; }
.sh-recommend:not(:has(.sh-banner)) { grid-template-columns: 1fr; }
.sh-pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }

.sh-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sh-authors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sh-line); border-inline-start: 1px solid var(--sh-line); background: var(--store-bg); }
.sh-author { display: grid; justify-items: center; gap: 2px; padding: 24px 12px; text-align: center; border-bottom: 1px solid var(--sh-line); border-inline-end: 1px solid var(--sh-line); }
.sh-author img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 1px solid var(--sh-line); transition: transform .25s; }
.sh-author:hover img { transform: translateY(-3px); }
.sh-author__name { font-weight: 800; color: var(--sh-ink); }
.sh-author:hover .sh-author__name { color: var(--store-primary); }
.sh-author__meta { font-size: var(--sh-sh-xs); color: var(--sh-muted); }

/* ---------- الشريط السفليّ للهاتف ---------- */
.sh-tabbar { display: none; }

/* ==========================================================================
   صفحة التصنيف (وتُستعمل للبحث والعروض)
   ========================================================================== */
.sh-pagehead { position: relative; overflow: hidden; background: var(--sh-lav); padding-block: 46px; text-align: center; }
.sh-pagehead h1 { font-size: var(--sh-sh-2xl); font-weight: 800; color: var(--sh-ink); }
.sh-pagehead p { color: var(--sh-muted); font-size: var(--sh-sh-sm); margin-top: 6px; }
.sh-pagehead .sh-blob { opacity: .8; }
.sh-crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: var(--sh-sh-xs); color: var(--sh-muted); margin-bottom: 8px; }
.sh-crumbs a:hover { color: var(--store-primary); }
.sh-crumbs .sh-icon { width: 13px; height: 13px; transform: scaleX(-1); }
.sh-crumbs [aria-current="page"] { color: var(--store-text); font-weight: 700; }

.sh-shop { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 44px 64px; }
.sh-shop .sh-grid { --sh-cols: 4; gap: 34px 22px; }
.sh-shop__strip { margin-bottom: 34px; }
.sh-shop__strip .sh-title { margin-bottom: 22px; }
.sh-shop__strip .sh-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-shop__strip .sh-fcard:nth-child(n+3) { display: none; }

/* التصفية: عمودٌ جانبيّ في الحاسوب، ودرجٌ في الجهاز اللوحيّ والهاتف */
.sh-drawer--filters { position: static; visibility: visible; z-index: auto; }
.sh-drawer--filters .sh-drawer__backdrop, .sh-drawer--filters .sh-drawer__head, .sh-drawer--filters .sh-drawer__foot { display: none; }
.sh-drawer--filters .sh-drawer__panel { position: static; transform: none; width: auto; padding: 0; overflow: visible; background: transparent; }
.sh-filters { display: grid; gap: 30px; }
.sh-filter h2 { position: relative; font-size: var(--sh-sh-md); font-weight: 800; color: var(--sh-ink); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--sh-line); }
.sh-filter h2::after { content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; width: 46px; height: 2px; background: var(--store-primary); }
.sh-filter__body { display: grid; gap: 11px; }
.sh-check { display: flex; align-items: center; gap: 10px; font-size: var(--sh-sh-sm); cursor: pointer; }
.sh-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--store-primary); flex: none; }
.sh-check__count { margin-inline-start: auto; min-width: 30px; padding: 1px 8px; border-radius: var(--sh-r-full); background: var(--sh-lav); font-size: .75rem; color: var(--sh-muted); text-align: center; font-variant-numeric: tabular-nums; }
.sh-check .sh-type { position: static; width: 24px; height: 24px; box-shadow: none; }
.sh-check .sh-type .sh-icon { width: 13px; height: 13px; }
.sh-check .sh-rating { font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.sh-range input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid var(--sh-line); border-radius: var(--sh-r-xs); font-size: var(--sh-sh-sm); font-variant-numeric: tabular-nums; background: var(--store-bg); }
.sh-range input:focus { outline: none; border-color: var(--store-primary); }
.sh-range span { font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-taglist a { padding: 5px 12px; border: 1px solid var(--sh-line); border-radius: var(--sh-r-xs); font-size: var(--sh-sh-xs); }
.sh-taglist a:hover { border-color: var(--store-primary); color: var(--store-primary); }
.sh-filters__actions { display: flex; gap: 10px; }
.sh-filters__actions .sh-btn { flex: 1; white-space: nowrap; }
.sh-side-promo { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 8px; min-height: 350px; padding: 26px 22px; background: var(--sh-peach); }
.sh-side-promo .sh-banner__img { object-position: center bottom; }
.sh-side-promo b { font-size: var(--sh-sh-lg); font-weight: 800; color: var(--sh-ink); line-height: 1.4; }
.sh-side-promo p { font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-side-promo .sh-btn { justify-self: start; margin-top: 6px; }

.sh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--sh-line); }
.sh-toolbar__count { font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-toolbar__count b { color: var(--store-text); font-variant-numeric: tabular-nums; }
.sh-toolbar__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-select { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: var(--sh-sh-sm); }
.sh-select select { appearance: none; -webkit-appearance: none; padding: 8px 14px; padding-inline-end: 32px; border: 1px solid var(--sh-line); border-radius: var(--sh-r-xs); background: var(--store-bg); font-size: var(--sh-sh-sm); color: var(--store-text); }
.sh-select select:focus { outline: none; border-color: var(--store-primary); }
.sh-select::after { content: ""; position: absolute; inset-inline-end: 13px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.sh-select__label { color: var(--sh-muted); }
.sh-filter-btn { display: none; }
.sh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
.sh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; padding-inline-end: 8px; border: 0; border-radius: var(--sh-r-full); background: var(--sh-lav); font-size: var(--sh-sh-xs); font-weight: 700; color: var(--store-text); }
.sh-chip .sh-icon { width: 14px; height: 14px; }
.sh-chip:hover { background: var(--sh-peach); color: var(--store-primary); }
.sh-chip--clear { background: transparent; color: var(--store-primary); text-decoration: underline; padding-inline: 4px; }
.sh-shop .sh-pager { margin-top: 48px; }
.sh-pager .sh-icon { width: 16px; height: 16px; }

@media (max-width: 1199px) {
  .sh-shop { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  .sh-shop .sh-grid { --sh-cols: 3; }
}
@media (max-width: 1023px) {
  .sh-shop { grid-template-columns: 1fr; padding-block: 30px 48px; }
  .sh-filter-btn { display: inline-flex; }
  .sh-drawer--filters { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
  .sh-drawer--filters.is-open { visibility: visible; }
  .sh-drawer--filters .sh-drawer__backdrop { display: block; }
  .sh-drawer--filters .sh-drawer__head { display: flex; }
  .sh-drawer--filters .sh-drawer__foot { display: flex; position: sticky; bottom: 0; gap: 10px; background: var(--store-bg); padding-top: 14px; margin-top: auto; }
  .sh-drawer--filters .sh-drawer__foot .sh-btn { flex: 1; white-space: nowrap; padding-inline: 12px; }
  .sh-drawer--filters .sh-drawer__panel {
    position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: min(88vw, 360px);
    background: var(--store-bg); transform: translateX(100%); overflow-y: auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .sh-drawer--filters.is-open .sh-drawer__panel { transform: translateX(0); }
  .sh-filters { gap: 24px; padding-bottom: 16px; }
  .sh-filters__actions.is-desktop, .sh-drawer--filters .sh-side-promo { display: none; }
}
@media (max-width: 767px) {
  .sh-pagehead { padding-block: 28px; }
  .sh-pagehead h1 { font-size: var(--sh-sh-xl); }
  .sh-pagehead .sh-blob { display: none; }
  .sh-shop .sh-grid { --sh-cols: 2; gap: 26px 14px; }
  .sh-shop__strip .sh-featured { grid-template-columns: 1fr; }
  .sh-shop__strip .sh-fcard:nth-child(n+2) { display: none; }
  .sh-toolbar__tools { width: 100%; }
  .sh-toolbar__tools .sh-select:not(.sh-select--per) { flex: 1; }
  .sh-toolbar__tools .sh-select select { width: 100%; }
  .sh-select__label { display: none; }
}

/* ==========================================================================
   صفحة المنتج: كتاب ورقيّ، وإلكترونيّ، وصوتيّ، ووسيلة تعليميّة
   ========================================================================== */
.sh-pagehead__cat { font-size: 2rem; font-weight: 800; color: var(--sh-ink); }
.sh-pagehead .sh-pagehead__cat { margin: 0; font-size: 2rem; font-weight: 800; color: var(--sh-ink); }
.sh-product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 250px; gap: 40px; align-items: start; padding-block: 44px 56px; }
@media (min-width: 1200px) { .sh-product:not(:has(.sh-aside)) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sh-product__media { position: relative; display: grid; place-items: center; padding: 36px 24px 24px; border-radius: var(--sh-r-lg); background: var(--sh-peach); }
.sh-product__media .sh-badges { top: 16px; inset-inline-start: 16px; }
.sh-product__media .sh-gallery__stage { width: min(320px, 100%); }

.sh-info { display: grid; gap: 16px; min-width: 0; }
.sh-info__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-info__kicker a { color: var(--store-primary); font-weight: 700; }
.sh-info__kind { display: inline-flex; align-items: center; gap: 6px; }
.sh-info__kind .sh-type { position: static; width: 24px; height: 24px; box-shadow: none; }
.sh-info__kind .sh-type .sh-icon { width: 13px; height: 13px; }
.sh-info__title { font-size: 1.75rem; font-weight: 800; line-height: 1.35; color: var(--sh-ink); }
.sh-info__by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-info__by a { color: var(--store-text); font-weight: 700; }
.sh-info__by a:hover { color: var(--store-primary); }
.sh-info .sh-price { gap: 12px; align-items: baseline; }
.sh-info .sh-price__now { font-size: 1.875rem; }
.sh-info .sh-price__old { font-size: 1.125rem; }
.sh-off { display: inline-block; padding: 2px 8px; border-radius: var(--sh-r-xs); background: var(--sh-peach); color: var(--store-primary); font-size: .8125rem; font-weight: 800; }
.sh-avail { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sh-sh-sm); font-weight: 700; color: var(--sh-ok); }
.sh-avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sh-info__lead { color: var(--sh-muted); max-width: 62ch; }
.sh-info hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--sh-line); }

.sh-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sh-fact { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--sh-r-sm); background: var(--sh-lav); }
.sh-fact .sh-icon { width: 22px; height: 22px; color: var(--store-primary); flex: none; }
.sh-fact small { display: block; font-size: .75rem; color: var(--sh-muted); line-height: 1.4; }
.sh-fact b { display: block; font-size: var(--sh-sh-sm); font-weight: 700; line-height: 1.4; }

.sh-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1.5px dashed var(--store-primary); border-radius: var(--sh-r-md); background: var(--store-bg); }
.sh-sample p { flex: 1 1 220px; font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-sample b { color: var(--store-text); }

.sh-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sh-buy .sh-qty { height: 50px; }
.sh-buy .sh-btn { min-height: 50px; padding-inline: 26px; }
.sh-buy .sh-btn--primary { flex: 1 1 180px; }
.sh-buy__or { font-size: var(--sh-sh-xs); font-weight: 700; color: var(--sh-muted); }
.sh-buy .sh-btn--dark { flex: 1 1 140px; }
.sh-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--sh-sh-sm); }
.sh-links button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-weight: 700; color: var(--store-text); }
.sh-links button:hover, .sh-links button[aria-pressed="true"] { color: var(--store-primary); }
.sh-meta { display: grid; gap: 6px; margin: 0; padding-top: 14px; border-top: 1px solid var(--sh-line); font-size: var(--sh-sh-sm); }
.sh-meta div { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-meta dt { color: var(--sh-muted); }
.sh-meta dd { margin: 0; font-weight: 700; }
.sh-meta dd a:hover { color: var(--store-primary); }

.sh-aside { display: grid; gap: 14px; padding: 20px; border-radius: var(--sh-r-md); background: var(--sh-lav); }
.sh-aside h2 { font-size: var(--sh-sh-md); font-weight: 800; color: var(--sh-ink); padding-bottom: 10px; border-bottom: 1px solid var(--sh-line); }
.sh-mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.sh-mini .sh-cover { border-radius: var(--sh-r-sm); }
.sh-mini .sh-cover .sh-type { display: none; }
.sh-mini h3 { font-size: var(--sh-sh-sm); font-weight: 700; line-height: 1.45; }
.sh-mini h3 a:hover { color: var(--store-primary); }
.sh-mini .sh-price { justify-content: flex-start; font-size: var(--sh-sh-sm); margin-top: 4px; }

/* التبويبات */
.sh-ptabs { margin-bottom: 20px; }
.sh-ptabs__bar { display: flex; justify-content: center; gap: 34px; border-bottom: 1px solid var(--sh-line); overflow-x: auto; scrollbar-width: none; }
.sh-ptabs__bar button { position: relative; padding: 16px 2px; border: 0; background: none; font-weight: 800; font-size: var(--sh-sh-md); color: var(--sh-muted); white-space: nowrap; }
.sh-ptabs__bar button[aria-selected="true"] { color: var(--sh-ink); }
.sh-ptabs__bar button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--store-primary); }
.sh-ptabs__panel { padding-block: 30px 8px; }
.sh-prose { display: grid; gap: 14px; max-width: 78ch; margin-inline: auto; color: var(--sh-muted); line-height: 1.9; }
.sh-author-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; max-width: 78ch; margin: 30px auto 0; padding: 22px; border-radius: var(--sh-r-md); background: var(--sh-lav); }
.sh-author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--store-bg); box-shadow: 0 0 0 2px var(--store-primary); }
.sh-author-box h3 { font-size: var(--sh-sh-lg); font-weight: 800; }
.sh-author-box p { font-size: var(--sh-sh-sm); color: var(--sh-muted); margin-block: 4px 10px; }
.sh-author-box a { font-size: var(--sh-sh-sm); font-weight: 700; color: var(--store-primary); text-decoration: underline; }
.sh-specs { width: 100%; max-width: 760px; margin-inline: auto; border-collapse: collapse; font-size: var(--sh-sh-sm); }
.sh-specs th, .sh-specs td { text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--sh-line); }
.sh-specs th { width: 34%; color: var(--sh-muted); font-weight: 500; background: var(--sh-lav); }
.sh-specs td { font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-reviews { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1000px; margin-inline: auto; }
.sh-score { display: grid; justify-items: start; gap: 6px; padding: 22px; border-radius: var(--sh-r-md); background: var(--sh-peach); }
.sh-score__big { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--sh-ink); }
.sh-bars { display: grid; gap: 6px; width: 100%; margin-top: 6px; }
.sh-bar { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; gap: 10px; font-size: var(--sh-sh-xs); color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.sh-bar__track { height: 7px; border-radius: 7px; background: var(--store-bg); overflow: hidden; }
.sh-bar__fill { display: block; width: var(--w); height: 100%; border-radius: 7px; background: var(--sh-star); }
.sh-review-list { display: grid; gap: 22px; }
.sh-review { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--sh-line); }
.sh-review header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sh-review b { font-weight: 800; }
.sh-review time { font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-review p { margin-top: 6px; font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-trust--row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 30px 0; border-block: 1px solid var(--sh-line); }

.sh-sticky-buy { display: none; }

@media (max-width: 1199px) {
  .sh-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .sh-aside { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-aside h2 { grid-column: 1 / -1; }
  .sh-trust--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sh-product { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 40px; }
  .sh-reviews { grid-template-columns: 1fr; }
  .sh-trust--row { justify-items: stretch; padding-top: 30px; }
}
@media (max-width: 767px) {
  .sh-pagehead .sh-pagehead__cat { font-size: 1.5rem; }
  .sh-product__media { padding: 28px 16px 18px; }
  .sh-product__media .sh-gallery__stage { width: min(230px, 100%); }
  .sh-info__title { font-size: 1.375rem; }
  .sh-info .sh-price__now { font-size: 1.625rem; }
  .sh-facts { grid-template-columns: 1fr 1fr; }
  .sh-fact { padding: 10px; gap: 8px; }
  .sh-buy__or { display: none; }
  .sh-buy .sh-btn--dark { flex: 1 1 100%; }
  .sh-aside { grid-template-columns: 1fr; }
  .sh-ptabs__bar { justify-content: flex-start; gap: 24px; }
  .sh-author-box { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sh-trust--row { grid-template-columns: 1fr; gap: 14px; }
  .sh-trust--row li { justify-content: flex-start; }
  .sh-sticky-buy {
    display: flex; align-items: center; gap: 12px; position: fixed; inset-inline: 0; z-index: 39;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px;
    background: var(--store-bg); border-top: 1px solid var(--sh-line); box-shadow: 0 -6px 18px rgba(31, 27, 28, .06);
  }
  .sh-sticky-buy .sh-price { flex: 1; justify-content: flex-start; }
  .sh-sticky-buy .sh-btn { min-height: 44px; }
  body.has-sticky-buy { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   صفحة المؤلّف
   ========================================================================== */
.sh-profile { position: relative; overflow: hidden; background: var(--sh-lav); padding-block: 40px 56px; text-align: center; }
.sh-profile__inner { display: grid; justify-items: center; gap: 12px; max-width: 760px; margin-inline: auto; }
.sh-profile__photo { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 6px solid var(--store-bg); box-shadow: 0 0 0 2px var(--store-primary), 0 20px 40px -18px rgba(31, 27, 28, .4); margin-top: 8px; }
.sh-profile__role { color: var(--store-primary); font-weight: 700; font-size: var(--sh-sh-sm); }
.sh-profile h1 { font-size: var(--sh-sh-2xl); font-weight: 800; color: var(--sh-ink); line-height: 1.25; }
.sh-profile__bio { display: grid; gap: 10px; color: var(--sh-muted); line-height: 1.9; }
.sh-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.sh-stat { display: grid; min-width: 130px; padding: 14px 18px; border-radius: var(--sh-r-md); background: var(--store-bg); box-shadow: var(--sh-shadow); }
.sh-stat b { font-size: 1.5rem; font-weight: 800; color: var(--store-primary); font-variant-numeric: tabular-nums; }
.sh-stat small { font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-works-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 24px; }
.sh-works-tools .sh-tabs { margin: 0; }

@media (max-width: 767px) {
  .sh-profile { padding-block: 28px 40px; }
  .sh-profile__photo { width: 128px; height: 128px; }
  .sh-profile h1 { font-size: var(--sh-sh-xl); }
  .sh-profile .sh-blob { display: none; }
  .sh-stat { min-width: 0; flex: 1 1 90px; padding: 12px; }
}

/* ==========================================================================
   السلّة (الشكل فقط)
   ========================================================================== */
.sh-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; padding-block: 44px 60px; }
.sh-ship-goal { display: grid; gap: 10px; padding: 16px 20px; margin-bottom: 22px; border-radius: var(--sh-r-md); background: var(--sh-peach); font-size: var(--sh-sh-sm); }
.sh-ship-goal b { color: var(--store-primary); }
.sh-progress { height: 8px; border-radius: 8px; background: var(--store-bg); overflow: hidden; }
.sh-progress span { display: block; width: var(--w); height: 100%; border-radius: 8px; background: var(--store-primary); }
.sh-lines { display: grid; }
.sh-lines__head, .sh-line { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px 120px 40px; gap: 16px; align-items: center; }
.sh-lines__head { padding: 12px 16px; border-radius: var(--sh-r-sm); background: var(--sh-lav); font-size: var(--sh-sh-xs); font-weight: 800; color: var(--sh-muted); }
.sh-line { padding: 18px 16px; border-bottom: 1px solid var(--sh-line); }
.sh-line__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; }
.sh-line__media { position: relative; display: block; }
.sh-line__media .sh-cover { border-radius: var(--sh-r-sm); }
.sh-line__media .sh-type { width: 24px; height: 24px; bottom: 4px; inset-inline-start: 4px; }
.sh-line__media .sh-type .sh-icon { width: 12px; height: 12px; }
.sh-line__title { display: block; font-weight: 800; line-height: 1.45; color: var(--sh-ink); }
.sh-line__title:hover { color: var(--store-primary); }
.sh-line__meta { font-size: var(--sh-sh-xs); color: var(--sh-muted); margin-top: 4px; }
.sh-line__price { display: grid; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-line__price del { font-size: var(--sh-sh-xs); font-weight: 400; color: var(--sh-muted); }
.sh-line__total { font-weight: 800; color: var(--store-primary); font-variant-numeric: tabular-nums; }
.sh-line__remove { width: 36px; height: 36px; box-shadow: none; background: transparent; color: var(--sh-muted); }
.sh-line__remove:hover { background: var(--sh-peach); color: var(--store-primary); }
.sh-cart__after { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.sh-back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--sh-sh-sm); }
.sh-back-link:hover { color: var(--store-primary); }

.sh-summary { position: sticky; top: 104px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 24px; border-radius: var(--sh-r-md); background: var(--sh-lav); }
.sh-summary h2 { position: relative; font-size: var(--sh-sh-lg); font-weight: 800; padding-bottom: 12px; border-bottom: 1px solid var(--sh-line); }
.sh-summary h2::after { content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; width: 46px; height: 2px; background: var(--store-primary); }
.sh-coupon { display: flex; gap: 8px; }
.sh-coupon .sh-field { padding-block: 10px; }
.sh-summary dl { display: grid; gap: 10px; margin: 0; font-size: var(--sh-sh-sm); }
.sh-summary dl div { display: flex; justify-content: space-between; gap: 12px; }
.sh-summary dt { color: var(--sh-muted); }
.sh-summary dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-summary .is-discount dd { color: var(--sh-ok); }
.sh-summary .is-total { padding-top: 12px; border-top: 1px dashed var(--sh-line); font-size: var(--sh-sh-lg); }
.sh-summary .is-total dt { color: var(--store-text); font-weight: 800; }
.sh-summary .is-total dd { font-weight: 800; color: var(--store-primary); }
.sh-summary__note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--sh-sh-xs); color: var(--sh-muted); }
.sh-summary__note .sh-icon { width: 16px; height: 16px; }
.sh-summary .sh-chips { margin: 0; }
.sh-summary .sh-chip { background: var(--store-bg); }
.sh-chip__x { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sh-muted); }
.sh-chip__x:hover { background: var(--sh-peach); color: var(--store-primary); }

/* ==========================================================================
   صفحة 404
   ========================================================================== */
.sh-404 { position: relative; overflow: hidden; background: var(--sh-lav); }
.sh-404__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 70px; }
.sh-404 .sh-404__num { font-size: 8rem; font-weight: 800; line-height: 1; color: var(--store-primary); letter-spacing: -2px; }
.sh-404 h1 { font-size: var(--sh-sh-2xl); font-weight: 800; color: var(--sh-ink); margin-block: 10px; }
.sh-404 p { color: var(--sh-muted); max-width: 52ch; }
.sh-404__search { display: flex; gap: 8px; max-width: 460px; margin-top: 24px; }
.sh-404__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sh-404__art { position: relative; display: grid; place-items: center; min-height: 380px; }
.sh-404__art::before { content: ""; position: absolute; width: 360px; height: 340px; background: var(--sh-peach); border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; }
.sh-404__stack { position: relative; display: flex; align-items: flex-end; }
.sh-404__stack .sh-cover { width: 150px; box-shadow: 0 24px 40px -18px rgba(31, 27, 28, .55); }
.sh-404__stack .sh-cover:nth-child(1) { transform: rotate(-9deg) translateX(-40px); }
.sh-404__stack .sh-cover:nth-child(2) { z-index: 2; transform: translateY(-20px); }
.sh-404__stack .sh-cover:nth-child(3) { transform: rotate(9deg) translateX(40px); }

@media (max-width: 1199px) {
  .sh-cart { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; }
  .sh-lines__head, .sh-line { grid-template-columns: minmax(0, 1fr) 100px 120px 100px 36px; gap: 12px; }
}
@media (max-width: 1023px) {
  .sh-cart { grid-template-columns: 1fr; padding-block: 28px 44px; }
  .sh-summary { position: static; }
  .sh-404__inner { grid-template-columns: 1fr; text-align: center; padding-block: 44px; }
  .sh-404 p { margin-inline: auto; }
  .sh-404__search, .sh-404__actions { margin-inline: auto; justify-content: center; }
  .sh-404__art { min-height: 300px; order: -1; }
}
@media (max-width: 767px) {
  .sh-lines__head { display: none; }
  .sh-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "item remove" "price price" "qty total"; gap: 12px; padding: 16px 0; }
  .sh-line__item { grid-area: item; grid-template-columns: 64px minmax(0, 1fr); }
  .sh-line__remove { grid-area: remove; align-self: start; }
  .sh-line__price { grid-area: price; display: flex; gap: 8px; align-items: baseline; font-size: var(--sh-sh-sm); }
  .sh-line > .sh-qty, .sh-line > .sh-line__meta { grid-area: qty; justify-self: start; }
  .sh-line__total { grid-area: total; justify-self: end; }
  .sh-summary { padding: 20px 16px; }
  .sh-404 .sh-404__num { font-size: 5.5rem; }
  .sh-404 h1 { font-size: var(--sh-sh-xl); }
  .sh-404__art { min-height: 230px; }
  .sh-404__art::before { width: 250px; height: 230px; }
  .sh-404__stack .sh-cover { width: 104px; }
  .sh-404__stack .sh-cover:nth-child(1) { transform: rotate(-9deg) translateX(-26px); }
  .sh-404__stack .sh-cover:nth-child(3) { transform: rotate(9deg) translateX(26px); }
  .sh-404 .sh-blob { display: none; }
}

/* خيار books_per_row: تضعه المنصّة سمةً على <body>، ويطبَّق على صفوف الأقسام في الشاشات الواسعة */
@media (min-width: 1200px) {
  body[data-books-per-row="4"] .sh-section .sh-grid[data-sh-rowopt] { --sh-cols: 4; }
  body[data-books-per-row="5"] .sh-section .sh-grid[data-sh-rowopt] { --sh-cols: 5; }
  body[data-books-per-row="6"] .sh-section .sh-grid[data-sh-rowopt] { --sh-cols: 6; }
}

/* ==========================================================================
   الاستجابة: 1440 / 768 / 390
   ========================================================================== */
@media (max-width: 1199px) {
  .sh-grid { --sh-cols: 4; }
  .sh-hsearch { max-width: none; }
  .sh-actions__cart > span:last-child { display: none; }
  .sh-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .sh-footer__contact { grid-column: 1 / -1; }
  .sh-hero { grid-template-columns: 1fr; }
  .sh-side { min-height: 260px; }
  .sh-side .sh-disc { top: auto; bottom: 26px; inset-inline-end: 26px; }
  .sh-group { grid-template-columns: 1fr; }
  .sh-recommend { grid-template-columns: 1fr; }
  .sh-series { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-authors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sh-topbar__links { display: none; }
  .sh-header .sh-bar { flex-wrap: wrap; gap: 10px 12px; min-height: 0; padding-block: 12px; }
  .sh-hsearch { order: 5; flex-basis: 100%; height: 44px; }
  .sh-catnav { display: none; }
  .sh-grid { --sh-cols: 3; }
  .sh-finder-wrap { padding: 40px 20px; }
  .sh-finder { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; }
  .sh-finder label + label select { border-inline-start: 0; }
  .sh-finder .sh-btn { grid-column: 1 / -1; margin: 0; }
  .sh-banner { padding: 32px; }
  .sh-banner__title { font-size: 1.875rem; }
  .sh-pair { grid-template-columns: 1fr; }
  .sh-coupon-bar { grid-template-columns: 1fr; }
  .sh-coupon-bar__tab { clip-path: none !important; justify-content: center; }
  .sh-head { align-items: flex-start; flex-direction: column; }
  .sh-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sh-tabs button { flex: none; min-width: 0; }
}
@media (max-width: 767px) {
  .sh-section { padding-block: 40px; }
  .sh-grid { --sh-cols: 2; }
  .sh-card { padding: 12px; }
  .sh-card__media { padding-inline: 4%; }
  .sh-title h2 { font-size: 1.375rem; }
  .sh-card__title { font-size: .9375rem; }
  .sh-type { width: 26px; height: 26px; bottom: 6px; inset-inline-start: 6px; }
  .sh-type .sh-icon { width: 13px; height: 13px; }
  .sh-quick .sh-icon-btn { width: 32px; height: 32px; }
  .sh-hcard { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .sh-fcard { grid-template-columns: 86px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .sh-brand img { width: 36px; height: 36px; }
  .sh-brand__name { font-size: 1.125rem; }
  .sh-topbar__end { display: none; }
  .sh-topbar .sh-container { justify-content: center; }
  .sh-actions .sh-hide-sm { display: none; }
  .sh-banner { flex-direction: column; align-items: stretch; padding: 0; min-height: 0 !important; }
  .sh-banner__img { position: static; z-index: auto; height: auto; aspect-ratio: 16 / 10; }
  .sh-banner__text, .sh-banner--sm .sh-banner__text { max-width: none; padding: 20px; }
  .sh-banner__title { font-size: 1.625rem; }
  .sh-bigprice b, .sh-bigprice i { font-size: 2.125rem; }
  .sh-slide { min-height: 0; }
  .sh-side { min-height: 230px; padding: 22px; }
  .sh-side .sh-disc { width: 96px; height: 96px; }
  .sh-disc b { font-size: 1.5rem; }
  .sh-circles { flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--sh-gutter-r) * -1) calc(var(--sh-gutter-l) * -1); padding-inline: var(--sh-gutter-r) var(--sh-gutter-l); }
  .sh-circles::-webkit-scrollbar { display: none; }
  .sh-circle { flex: none; width: 78px; }
  .sh-circle__disc { width: 72px; height: 72px; }
  .sh-circle__name { font-size: .8125rem; }
  .sh-group__items { grid-template-columns: 1fr; }
  .sh-group__items > .sh-card { flex-direction: row; align-items: center; padding: 14px; }
  .sh-group__items .sh-card__media { width: 86px; flex: none; padding: 0; }
  .sh-recommend .sh-grid { --sh-cols: 2; }
  .sh-series { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-trust { grid-template-columns: 1fr; }
  .sh-authors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-author img { width: 84px; height: 84px; }
  .sh-featured { grid-template-columns: 1fr; }
  .sh-strip b { font-size: 1.25rem; }
  .sh-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; padding-block: 40px 28px; }
  .sh-footer__about, .sh-footer__contact { grid-column: 1 / -1; }

  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .sh-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    background: var(--store-bg); border-top: 1px solid var(--sh-line); box-shadow: 0 -4px 20px rgba(20, 26, 34, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  .sh-tabbar a, .sh-tabbar button { display: grid; justify-items: center; gap: 2px; padding: 9px 2px 7px; background: none; border: 0; font-size: .75rem; font-weight: 700; color: var(--store-text); }
  .sh-tabbar__icon { position: relative; display: inline-grid; }
  .sh-tabbar [aria-current="page"] { color: var(--store-primary); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* خيارات الإظهار (الملحق، البند 3) */
body[data-show-coupon-bar="false"] .sh-coupon-bar,
body[data-show-trust-bar="false"] .sh-trustbar { display: none; }

/* ==== ميزات المنصّة (الملحق 8) ==== */
/* العرض محدود المدّة: عدّاد البانر العريض (كما سُلِّم القالب) */
.sh-countdown { display: flex; gap: 6px; }
.sh-countdown__unit { display: grid; justify-items: center; min-width: 60px; padding: 8px 6px; border-radius: var(--sh-r-xs); background: var(--store-primary-dark); color: var(--sh-on-dark); }
.sh-countdown__unit b { font-size: 1.5rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sh-countdown__unit small { font-size: .6875rem; color: var(--sh-on-dark-muted); }
.sh-countdown--light .sh-countdown__unit { background: var(--store-bg); color: var(--sh-ink); border: 1px solid var(--sh-line); }
.sh-countdown--light .sh-countdown__unit small { color: var(--sh-muted); }
@media (max-width: 600px) { .sh-countdown__unit { min-width: 50px; } .sh-countdown__unit b { font-size: 1.25rem; } }

/* ما يُخفيه theme.js بالسمة hidden (مثل العرض المنتهي) يختفي ولو كان لعنصره display */
[hidden] { display: none !important; }

/* تبويبات صفّ الكتب (القاعدة 16): يختفي الشريط إن لم يختر الناشر غير مصدرٍ واحد */
[data-slot="section.tabs"]:not(:has([data-repeat="tab"] ~ [role="tab"])) { display: none; }

/* شريط الشحن المجّانيّ: يختفي موضعه بلا فراغ حين يُخفيه theme.js */
[data-slot="cart.free_shipping_left"][hidden] { display: none !important; }

/* ==========================================================================
   الإصدار الثاني: بطاقةٌ بزرّ سلّةٍ ظاهر، وصفوفٌ تملأ أسطرها، ودوّار، وكتاب الأسبوع، والمؤلّفون، والآراء، والمدوّنة
   ========================================================================== */

/* زرّ السلّة على البطاقة: مستطيلٌ حادّ الزوايا بإطارٍ داكن، يمتلئ بلون الهويّة عند الوقوف.
   ظاهرٌ دائمًا تحت السعر، ويُدفع صفّ السعر والزرّ معًا إلى أسفل البطاقة (البند 7) */
.sh-card__foot { margin-top: auto; align-self: stretch; display: grid; gap: 10px; padding-top: 6px; }
.sh-card .sh-price__now { order: -1; }
.sh-card__cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px;
  border: 1.5px solid var(--store-primary-dark); border-radius: var(--sh-r-xs); background: transparent;
  color: var(--store-primary-dark); font-weight: 800; font-size: .8125rem; line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s;
}
.sh-card__cart:hover { background: var(--store-primary); border-color: var(--store-primary); color: var(--sh-on-dark); }
.sh-card__cart[disabled] { border-style: dashed; border-color: var(--sh-line); background: var(--sh-lav); color: var(--sh-muted); cursor: not-allowed; }

/* صفوف الأقسام: ستّ بطاقات، ويظهر منها ما يملأ أسطرًا كاملة بأيّ عددٍ للأعمدة */
.sh-grid[data-sh-rowopt] > .sh-card:nth-child(n+6) { display: none; }
@media (min-width: 1200px) {
  body[data-books-per-row="4"] .sh-section .sh-grid[data-sh-rowopt] > .sh-card:nth-child(n+5) { display: none; }
  body[data-books-per-row="6"] .sh-section .sh-grid[data-sh-rowopt] > .sh-card:nth-child(n+6) { display: flex; }
}
@media (max-width: 1199px) { .sh-grid[data-sh-rowopt] > .sh-card:nth-child(n+5) { display: none; } }
@media (max-width: 1023px) { .sh-grid[data-sh-rowopt] > .sh-card:nth-child(n+5) { display: flex; } }
@media (max-width: 767px) { .sh-grid[data-sh-rowopt] > .sh-card:nth-child(n+5) { display: none; } }

/* رابط «الكلّ» في رأس القسم */
.sh-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--sh-sh-sm); color: var(--store-primary); }
.sh-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.sh-gap-top { padding-top: 56px; }

/* الدوّار الأفقيّ: «وصل حديثًا» في الرئيسيّة، وأعمال المؤلّف، و«شاهدتَه مؤخّرًا» */
.sh-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px;
}
.sh-rail::-webkit-scrollbar { display: none; }
.sh-rail > .sh-card { scroll-snap-align: start; border: 1px solid var(--sh-line); }
.sh-rail > .sh-card:hover { box-shadow: 0 10px 30px rgba(20, 26, 34, .1); }
.sh-rail--6 { grid-auto-columns: calc((100% - 5 * 16px) / 6); }
.sh-rail-nav { display: flex; gap: 6px; }
.sh-rail-nav .sh-icon-btn { width: 42px; height: 42px; }
.sh-rail-nav .sh-icon-btn[disabled] { opacity: .4; cursor: default; background: var(--store-bg); border-color: var(--sh-line); color: var(--sh-ink); }

/* كتاب الأسبوع: لوحٌ داكن بغلافٍ كبير */
.sh-feature { position: relative; overflow: hidden; background: var(--store-primary-dark); color: var(--sh-on-dark-muted); isolation: isolate; }
.sh-feature::before { content: ""; position: absolute; z-index: -1; inset-block: -30%; inset-inline-start: -10%; width: 44%; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .04); }
.sh-feature__book { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px 56px; align-items: center; padding: 48px 56px; }
.sh-feature__media { position: relative; justify-self: center; width: min(250px, 100%); }
.sh-feature__media .sh-cover { box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .7); }
.sh-feature__book:hover .sh-cover__back, .sh-feature__book:focus-within .sh-cover__back { opacity: 1; }
.sh-feature__body { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.sh-feature__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--store-accent); color: var(--sh-on-accent); font-weight: 800; font-size: var(--sh-sh-xs); }
.sh-feature__title { font-size: 2.25rem; color: var(--sh-on-dark); }
.sh-feature__title a:hover { color: var(--store-accent); }
.sh-feature__by { font-size: var(--sh-sh-sm); }
.sh-feature__by a { color: var(--sh-on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sh-feature .sh-rating { color: var(--sh-on-dark-muted); }
.sh-feature .sh-stars__off { fill: rgba(255, 255, 255, .22); }
.sh-feature__desc { max-width: 62ch; line-height: 1.9; }
.sh-feature__facts { display: flex; flex-wrap: wrap; border: 1px solid var(--sh-dark-line); }
.sh-feature__facts li { padding: 8px 18px; border-inline-end: 1px solid var(--sh-dark-line); }
.sh-feature__facts li:last-child { border-inline-end: 0; }
.sh-feature__facts small { display: block; font-size: .75rem; }
.sh-feature__facts b { color: var(--sh-on-dark); font-variant-numeric: tabular-nums; }
.sh-feature__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.sh-feature__price { margin-top: -2px; }
.sh-feature .sh-price__now { color: var(--store-accent); font-size: 1.75rem; }
.sh-feature .sh-price__old { color: var(--sh-on-dark-muted); font-size: 1.0625rem; }
.sh-feature__more { color: var(--sh-on-dark); font-weight: 700; font-size: var(--sh-sh-sm); text-decoration: underline; text-underline-offset: 4px; }
.sh-feature__more:hover { color: var(--store-accent); }

/* آراء القرّاء في الكتب */
.sh-revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sh-rev { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: var(--store-bg); border: 1px solid var(--sh-line); border-top: 3px solid var(--store-primary); min-width: 0; }
.sh-rev__book { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sh-line); }
.sh-rev__book .sh-cover { width: 46px; flex: none; box-shadow: none; border-radius: var(--sh-r-xs); }
.sh-rev__book small { display: block; font-size: .75rem; color: var(--sh-muted); line-height: 1.3; }
.sh-rev__book a:not(.sh-cover) { font-weight: 800; color: var(--sh-ink); }
.sh-rev__book a:not(.sh-cover):hover { color: var(--store-primary); }
.sh-rev p { font-size: var(--sh-sh-sm); line-height: 1.85; color: var(--store-text); }
.sh-rev footer { margin-top: auto; display: flex; align-items: center; gap: 8px; color: var(--store-primary); }
.sh-rev footer b { color: var(--sh-ink); font-size: var(--sh-sh-sm); }
body[data-show-reviews="false"] .sh-reviews-home { display: none; }

/* المدوّنة: بطاقات المقالات في شبكةٍ بإطاراتٍ متلاصقة */
.sh-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sh-line); border-inline-start: 1px solid var(--sh-line); }
.sh-post { display: flex; flex-direction: column; min-width: 0; background: var(--store-bg); border-bottom: 1px solid var(--sh-line); border-inline-end: 1px solid var(--sh-line); }
.sh-post__media { display: block; overflow: hidden; background: var(--sh-lav); }
.sh-post__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.sh-post:hover .sh-post__media img { transform: scale(1.04); }
.sh-post__body { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 20px 22px 24px; }
.sh-post time { font-size: var(--sh-sh-xs); font-weight: 800; color: var(--store-primary); }
.sh-post__title { font-size: 1.125rem; font-weight: 800; line-height: 1.45; }
.sh-post__title a:hover { color: var(--store-primary); }
.sh-post p { font-size: var(--sh-sh-sm); color: var(--sh-muted); }
.sh-post__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--sh-sh-sm); font-weight: 800; color: var(--store-primary-dark); }
.sh-post__more:hover { color: var(--store-primary); }
.sh-posts--all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-posts--all > .sh-post:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sh-posts--all > .sh-post:first-child .sh-post__media img { height: 100%; }
.sh-posts--all > .sh-post:first-child .sh-post__body { align-content: center; padding: 34px 40px; }
.sh-posts--all > .sh-post:first-child .sh-post__title { font-size: 1.625rem; }

/* صفحة المقال */
.sh-article { max-width: 780px; margin-inline: auto; padding-block: 40px 56px; }
.sh-article__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 30px; }
.sh-article__body { display: grid; gap: 16px; font-size: 1.0625rem; line-height: 2; color: var(--store-text); }
.sh-article__body h2 { font-size: var(--sh-sh-lg); margin-top: 10px; }
.sh-article__body ul { display: grid; gap: 8px; padding-inline-start: 22px; list-style: square; }
.sh-article__body li::marker { color: var(--store-primary); }
.sh-article__body a { color: var(--store-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sh-article__body blockquote { margin: 0; padding: 16px 22px; border-inline-start: 4px solid var(--store-primary); background: var(--sh-lav); font-weight: 700; color: var(--sh-ink); }
.sh-pagehead time { display: block; margin-top: 8px; font-size: var(--sh-sh-sm); font-weight: 700; color: var(--store-primary); }
.sh-pagehead--post h1 { max-width: 24ch; margin-inline: auto; }

/* صفحة الكتاب: اختيار الصيغة، وصندوق التوصيل والدفع */
.sh-formats { display: grid; gap: 8px; }
.sh-formats__label { font-size: var(--sh-sh-sm); font-weight: 800; color: var(--sh-ink); }
.sh-formats__list { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-format { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 136px; padding: 8px 14px; border: 1.5px solid var(--sh-line); border-radius: var(--sh-r-xs); background: var(--store-bg); transition: border-color .2s; }
.sh-format:hover { border-color: var(--store-primary-dark); }
.sh-format .sh-type { position: static; grid-row: span 2; width: 26px; height: 26px; box-shadow: none; }
.sh-format .sh-type .sh-icon { width: 13px; height: 13px; }
.sh-format__name { font-weight: 800; font-size: var(--sh-sh-sm); line-height: 1.3; }
.sh-format__price { font-size: var(--sh-sh-xs); color: var(--sh-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.sh-format[aria-current="page"] { border-color: var(--store-primary); box-shadow: inset 0 0 0 1px var(--store-primary); }
.sh-format[aria-current="page"] .sh-format__price { color: var(--store-primary); font-weight: 800; }
/* للعنوان صيغةٌ واحدة: تختفي القائمة كلّها */
.sh-formats:not(:has([data-repeat="format"] ~ .sh-format)) { display: none; }
.sh-perks { display: grid; border: 1px solid var(--sh-line); }
.sh-perks li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: var(--sh-sh-sm); }
.sh-perks li + li { border-top: 1px solid var(--sh-line); }
.sh-perks .sh-icon { color: var(--store-primary); }
.sh-perks b { font-weight: 800; }

/* صفحة التصنيف: التبديل بين الشبكة والقائمة */
.sh-view { display: inline-flex; border: 1px solid var(--sh-line); border-radius: var(--sh-r-xs); overflow: hidden; }
.sh-view button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: var(--store-bg); color: var(--sh-muted); }
.sh-view button + button { border-inline-start: 1px solid var(--sh-line); }
.sh-view button[aria-pressed="true"] { background: var(--store-primary); color: var(--sh-on-dark); }
.sh-shop .sh-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.sh-grid.is-list > .sh-card { flex-direction: row; align-items: center; gap: 24px; }
.sh-grid.is-list .sh-card__media { width: 132px; flex: none; padding: 0; }
.sh-grid.is-list .sh-card__body { flex: 1; }
.sh-grid.is-list .sh-card__foot { grid-template-columns: auto minmax(0, 200px); align-items: center; justify-content: space-between; width: 100%; }

@media (max-width: 1199px) {
  .sh-rail { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .sh-rail--6 { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
  .sh-feature__book { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px 40px; padding: 40px; }
}
@media (max-width: 1023px) {
  .sh-rail, .sh-rail--6 { grid-auto-columns: calc((100% - 2 * 14px) / 3.3); gap: 14px; }
  .sh-rail-nav { display: none; }
  .sh-revs, .sh-posts { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sh-revs::-webkit-scrollbar, .sh-posts::-webkit-scrollbar { display: none; }
  .sh-revs > *, .sh-posts > * { scroll-snap-align: start; }
  .sh-posts { border-top: 0; border-inline-start: 0; gap: 14px; }
  .sh-posts > .sh-post { border: 1px solid var(--sh-line); }
  .sh-posts.sh-posts--all { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 18px; }
  .sh-posts--all > .sh-post:first-child { grid-column: auto; display: flex; }
  .sh-posts--all > .sh-post:first-child .sh-post__body { padding: 20px 22px 24px; }
  .sh-posts--all > .sh-post:first-child .sh-post__title { font-size: 1.125rem; }
  .sh-feature__book { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); padding: 34px 30px; }
  .sh-feature__title { font-size: 1.75rem; }
}
@media (max-width: 767px) {
  .sh-gap-top { padding-top: 40px; }
  .sh-rail, .sh-rail--6 { grid-auto-columns: 46%; gap: 12px; margin-inline: calc(var(--sh-gutter-r) * -1) calc(var(--sh-gutter-l) * -1); padding-inline: var(--sh-gutter-r) var(--sh-gutter-l); scroll-padding-inline: var(--sh-gutter-r); }
  .sh-revs, .sh-posts { grid-auto-columns: 84%; gap: 12px; margin-inline: calc(var(--sh-gutter-r) * -1) calc(var(--sh-gutter-l) * -1); padding-inline: var(--sh-gutter-r) var(--sh-gutter-l); scroll-padding-inline: var(--sh-gutter-r); }
  .sh-posts.sh-posts--all { grid-template-columns: minmax(0, 1fr); margin-inline: 0; padding-inline: 0; }
  .sh-rev { padding: 18px; }
  .sh-feature__book { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; gap: 22px; }
  .sh-feature__media { width: 170px; }
  .sh-feature__title { font-size: 1.5rem; }
  .sh-feature__facts li { padding: 6px 12px; }
  .sh-feature__buy .sh-btn { flex: 1 1 100%; }
  .sh-article { padding-block: 26px 40px; }
  .sh-article__body { font-size: 1rem; }
  .sh-grid.is-list > .sh-card { gap: 14px; align-items: flex-start; }
  .sh-grid.is-list .sh-card__media { width: 92px; }
  .sh-grid.is-list .sh-card__foot { grid-template-columns: minmax(0, 1fr); }
  .sh-format { min-width: 0; flex: 1 1 30%; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 8px 6px; }
  .sh-format .sh-type { display: none; }
  /* السعر والسعر القديم في سطرٍ واحد على البطاقة، فلا تتفاوت البطاقات المتجاورة */
  .sh-card .sh-price { flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
  .sh-card .sh-price__now { font-size: 1rem; }
  .sh-card .sh-price__old { font-size: .75rem; }
  /* شريط المزايا: صفٌّ واحد يُمرَّر أفقيًّا بدل أربعة أسطر */
  .sh-trustbar .sh-trust { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 12px; margin-inline: calc(var(--sh-gutter-r) * -1) calc(var(--sh-gutter-l) * -1); padding-inline: var(--sh-gutter-r) var(--sh-gutter-l); }
  .sh-trustbar .sh-trust::-webkit-scrollbar { display: none; }
  .sh-trustbar .sh-trust li { flex: none; scroll-snap-align: start; }
  /* المؤلّفون: شريطٌ يُمرَّر */
  .sh-authors { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sh-authors::-webkit-scrollbar { display: none; }
  .sh-authors > .sh-author { flex: 0 0 42%; scroll-snap-align: start; }
}

@media (max-width: 767px) {
  /* البانر الجانبيّ في الهاتف: صورته خلف نصّه القصير، بارتفاعٍ صغير */
  .sh-side { min-height: 200px; padding: 18px 20px; }
  .sh-side .sh-banner__img { position: absolute; inset: 0; z-index: -1; height: 100%; aspect-ratio: auto; }
  .sh-side h2 { font-size: 1.25rem; max-width: 70%; }
  .sh-side .sh-disc { width: 84px; height: 84px; bottom: 18px; inset-inline-start: 20px; }
  .sh-side .sh-disc b { font-size: 1.25rem; }
  /* شريط الكوبون: لسانٌ رفيع فوق سطر النصّ والزرّ */
  .sh-coupon-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .sh-coupon-bar__tab { grid-column: 1 / -1; padding: 8px 16px; justify-content: flex-start; font-size: var(--sh-sh-sm); }
  .sh-coupon-bar__text { justify-content: flex-start; text-align: start; padding: 10px 14px; font-size: var(--sh-sh-xs); }
  .sh-coupon-bar .sh-btn { padding-inline: 12px; }
  /* البانرات الصغيرة في الهاتف: الصورة فوق النصّ تملأ إطارها من جهة الرسم */
  body .sh-banner--sm .sh-banner__img { object-fit: cover; object-position: left bottom; }
  .sh-strip .sh-banner__img { position: absolute; inset: 0; z-index: -1; height: 100%; aspect-ratio: auto; object-fit: cover; }
  body[dir="ltr"] .sh-banner--sm .sh-banner__img, [dir="ltr"] body .sh-banner--sm .sh-banner__img { object-position: right bottom; }
}

/* الجهاز اللوحيّ: البانرات التي صارت صفوفًا كاملة تُظهر صورتها كاملةً في طرفها، والبانر العريض صورته فوق نصّه */
@media (max-width: 1199px) {
  .sh-side .sh-banner__img, .sh-banner--sm .sh-banner__img { object-fit: contain; object-position: left bottom; }
  [dir="ltr"] .sh-side .sh-banner__img, [dir="ltr"] .sh-banner--sm .sh-banner__img { object-position: right bottom; }
  .sh-side .sh-disc { inset-inline-end: auto; inset-inline-start: 28px; }
  .sh-group .sh-banner, .sh-recommend .sh-banner { min-height: 250px; }
  .sh-circles { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .sh-circles::-webkit-scrollbar { display: none; }
  .sh-circle { flex: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sh-banner--wide { flex-direction: column; align-items: stretch; padding: 0; min-height: 0; }
  .sh-banner--wide .sh-banner__img { position: static; z-index: auto; height: auto; aspect-ratio: 1290 / 490; }
  .sh-banner--wide .sh-banner__text { max-width: none; padding: 28px 32px 32px; }
}

/* نصّ الرأي: أربعة أسطر على الأكثر، والنصّ الكامل في title (الملحق، البند 5) */
[data-slot="review.text"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }