*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--cats-h) + 8px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cocoa);
  background-color: var(--wash, var(--cream));
  /* حبيبات ورق خفيفة جداً — بتكسر برودة اللون المسطّح. خلفية عادية
     بتتمرّر مع الصفحة، مو طبقة ثابتة فوقها، فما بتكلّف شي بالتمرير. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* لون الصفحة بيتبدّل مع القسم (scroll.js) — لون فقط، فالانتقال رخيص */
  transition: background-color 700ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--avocado);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: var(--s4);
  top: -60px;
  z-index: 200;
  padding: var(--s2) var(--s4);
  background: var(--cocoa);
  color: var(--cream);
  border-radius: var(--r-full);
  text-decoration: none;
}
.skip:focus { top: var(--s4); }

.noscript { padding: var(--s6); text-align: center; }

/* ── الشريط العلوي: شفاف فوق الافتتاحية، مصمت بعدها ── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-top);
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--d-state) ease, box-shadow var(--d-state) ease;
}
.topbar.solid {
  background: rgba(255, 243, 228, 0.94);
  box-shadow: 0 1px 0 var(--hairline);
}

.mark {
  text-decoration: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--d-state) ease, transform var(--d-state) var(--ease-out);
}
.topbar.solid .mark { opacity: 1; transform: none; }
.mark-badge {
  display: inline-block;
  padding: 6px 16px 2px;
  font-family: var(--brand);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--cocoa);
  background: var(--apricot);
  border-radius: var(--r-full);
  direction: ltr;
}

.cart-btn {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: transform var(--d-tap) ease;
}
.cart-btn:active { transform: scale(0.92); }
@media (hover: hover) { .cart-btn:hover { transform: translateY(-2px); } }
.cart-count {
  position: absolute;
  top: -4px; inset-inline-end: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  background: var(--avocado);
  border-radius: var(--r-full);
  transform: scale(0);
  transition: transform var(--d-state) var(--ease-spring);
}
.cart-count.on { transform: scale(1); }
.cart-count.bump { animation: bump 420ms var(--ease-spring); }
@keyframes bump { 40% { transform: scale(1.45); } }

/* ── عناوين الأقسام ── */
.sec-head { padding: 0 var(--gutter); }
.eyebrow {
  margin: 0 0 var(--s1);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cocoa-2);
}
/* لمسة بالخط اليدوي (Kaushan) جنب العنوان العربي */
.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1;
  color: var(--tangerine);
  direction: ltr;
  rotate: -4deg;
}
.sec-title {
  margin: 0;
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 4.5rem);
  line-height: 1.05;
}

/* ── ظهور عند الوصول — يُفعَّل فقط لما يشتغل الجافاسكربت ── */
.ready .rv {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}
.ready .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .ready .rv { opacity: 1; transform: none; }
}

p { text-wrap: pretty; }