/* Skoon House — هوية سكون (#efebe0 / #000) بنظام تصميم Olive Ateliers:
   خط أحادي المسافة بحروف كبيرة وتباعد واسع، أزرار مستطيلة 5px، خلايا بورق محبّب،
   شريط إعلان علوي وتذييل رملي. */
:root {
  --paper: #efebe0;
  --cell: #e6dfcc;
  --band: #ddd4bb;
  --foot: #cbbd9f;
  --ink: #000;
  --ink-2: #61483e;
  --error: #9b1c1c;
  --hh: 64px;
  --gut: clamp(16px, 4vw, 40px);
  --mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "SF Mono", Menlo, monospace;
  --display: var(--mono);
  --body: var(--mono);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #000;
  --cell: #11110f;
  --band: #17150f;
  --foot: #0d0c09;
  --ink: #efebe0;
  --ink-2: #b3a58f;
  --error: #ff8a80;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --paper: #000; --cell: #11110f; --band: #17150f; --foot: #0d0c09; --ink: #efebe0; --ink-2: #b3a58f; --error: #ff8a80; color-scheme: dark; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 72px); }
body { margin: 0; background: var(--paper) var(--grain); color: var(--ink); font: 500 14px/1.75 var(--body); letter-spacing: 0.04em; }
html[lang="ar"] body { letter-spacing: 0; font-size: 15px; font-weight: 500; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { top: 8px; }
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }
.muted { color: var(--ink-2); }

/* الصور ولوحات الحبر تتبدل مع الوضع */
.only-dark { display: none; }
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .only-light { display: none; }
  :root:not([data-theme]) .only-dark { display: block; }
}
.ph { width: 100%; height: 100%; object-fit: cover; }

/* ---------- الطباعة ---------- */
.display { font-family: var(--display); font-weight: 600; line-height: 1.19; letter-spacing: 0; text-transform: uppercase; }
html[lang="ar"] .display { font-weight: 700; line-height: 1.35; text-transform: none; }
.display .main { display: block; }
.display .sub { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.28em; color: var(--ink-2); letter-spacing: 0.1em; margin-top: 0.6em; line-height: 1.3; text-transform: uppercase; }
.giant { font-size: clamp(2.4rem, 7.5vw, 5.2rem); line-height: 1.1; }
html[lang="ar"] .giant { line-height: 1.2; }
.lead { max-width: 52ch; font-size: 0.95rem; color: var(--ink-2); }
.empty { padding-block: 40px; color: var(--ink-2); }

/* ---------- أزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  border: 1px solid var(--ink); border-radius: 5px; padding: 13px 24px;
  background: transparent; color: var(--ink); font: 600 12px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); list-style: none;
}
html[lang="ar"] .btn { letter-spacing: 0; font-size: 14px; text-transform: none; }
.btn::-webkit-details-marker { display: none; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- الرأس ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--ink); }
.bar { display: flex; align-items: stretch; height: var(--hh); padding-inline: var(--gut); }
.brand { display: flex; align-items: center; text-decoration: none; padding-inline-end: 22px; }
.brand .logo { height: calc(var(--hh) - 14px); width: calc((var(--hh) - 14px) * 2.886); }
.nav { display: flex; margin-inline-start: auto; }
.nav a, .tool {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 20px; min-width: 52px;
  border: 0; border-inline-start: 1px solid var(--ink); background: transparent; color: var(--ink);
  text-decoration: none; font: 500 0.92rem/1 var(--body); cursor: pointer;
}
.tools { display: flex; }
.nav a:hover, .tool:hover, .nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.ico { width: 20px; height: 20px; }
:root[data-theme="dark"] .i-moon, :root:not([data-theme]) .i-moon { display: none; }
:root[data-theme="light"] .i-sun { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .i-sun { display: none; } .i-moon { display: block; } }
.badge { min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 11px; background: var(--ink); color: var(--paper); font-size: 0.75rem; line-height: 22px; text-align: center; }
.tool:hover .badge { background: var(--paper); color: var(--ink); }
.nav-toggle { display: none; position: relative; width: 56px; padding: 0; }
.nav-toggle span { position: absolute; inset-inline: 18px; height: 1.5px; background: currentColor; }
.nav-toggle span:first-child { top: 26px; }
.nav-toggle span:last-child { top: 36px; }
.lang-switch { font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav { display: none; position: absolute; top: var(--hh); inset-inline: 0; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .nav a { height: 52px; justify-content: flex-start; border-inline-start: 0; border-top: 1px solid var(--ink); padding-inline: var(--gut); }
  .site-header.open .nav { display: flex; }
  .tools { margin-inline-start: auto; }
    html[lang="en"]   .tool { padding-inline: 14px; min-width: 46px; }
}

/* ---------- شبكة الخلايا ---------- */
.hgrid { display: grid; border-top: 1px solid var(--ink); border-inline-start: 1px solid var(--ink); }
.hgrid > * { border-inline-end: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); min-width: 0; }
.cell { padding: clamp(20px, 3vw, 40px); }
.cell.flush { padding: 0; overflow: hidden; }

/* العلامة: الطائر وخط الكتابة بالفرشاة بلون النص نفسه */
.logo { display: block; aspect-ratio: 1195 / 414; background: currentColor; -webkit-mask: url(/assets/logo.svg) center / contain no-repeat; mask: url(/assets/logo.svg) center / contain no-repeat; }

/* ---------- الرئيسية ---------- */
.hero { padding-top: var(--gut); }
.hero-grid { grid-template-columns: 1.1fr 0.9fr; min-height: min(78vh, 680px); }
.hero-text { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.hero-h1 { font-size: clamp(2.1rem, 4.6vw, 4.1rem); font-weight: 500; font-stretch: 112%; line-height: 1.12; letter-spacing: -0.02em; }
html[lang="ar"] .hero-h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.3; letter-spacing: 0; }
.hero-text .lead { margin-top: -8px; }
.hero-text .actions { margin-top: 0; }
.hero-img { padding: 0; overflow: hidden; }
.trio { grid-template-columns: repeat(3, 1fr); }
.link-cell { padding: 0; text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.link-cell .thumb { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--ink); margin-bottom: 12px; }
.link-cell .thumb img { transition: transform 0.5s; }
.link-cell:hover .thumb img { transform: scale(1.03); }
.link-cell h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); padding-inline: clamp(18px, 2.5vw, 28px); }
.link-cell p { padding-inline: clamp(18px, 2.5vw, 28px); padding-bottom: clamp(18px, 2.5vw, 28px); }
.moment { grid-template-columns: 1fr 1fr; }
.moment-art { background: var(--cell) !important; display: grid; place-items: center; padding: clamp(16px, 3vw, 40px); }
.moment-art .art { max-height: 520px; width: auto; margin-inline: auto; }
.moment-text { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.moment-text h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.moment-text .actions { margin-top: 10px; }
.block { margin-block: clamp(48px, 8vw, 96px); }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.block-head h2, .block > h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.visit { grid-template-columns: 1fr 2fr; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-img { aspect-ratio: 4 / 4.2; order: -1; }
  .hero-text { gap: 22px; }
  .trio, .moment, .visit { grid-template-columns: 1fr; }
}

/* ---------- رأس الصفحات الداخلية ---------- */
.page-head { padding-block: clamp(36px, 7vw, 88px) clamp(20px, 3vw, 36px); }
.page-head h1 { margin-bottom: 18px; }
.page-head-wrap { padding-top: var(--gut); }
.head-grid { grid-template-columns: 1.15fr 0.85fr; }
.head-text { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 340px; }
.head-text .giant { font-size: clamp(2.8rem, 7.2vw, 6rem); overflow-wrap: anywhere; }
.head-img { padding: 0; overflow: hidden; max-height: 520px; }
.tabs { position: sticky; top: var(--hh); z-index: 40; background: var(--paper); border-block: 1px solid var(--ink); margin-top: var(--gut); }
.tabs-in { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 10px; }
.tabs a { text-decoration: none; border: 1px solid var(--ink); border-radius: 999px; padding: 2px 16px; font-size: 0.9rem; }
.tabs a:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 860px) {
  .head-grid { grid-template-columns: 1fr; }
  .head-img { order: -1; max-height: 300px; }
  .head-text { min-height: 0; }
}

/* ---------- المنيو (كما في المطبوع) ---------- */
.menu-wrap { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 7vw, 110px); padding-block: 44px 64px; }
.menu-sec { margin-bottom: 52px; }
.menu-sec h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 14px; }
.row { display: flex; align-items: baseline; gap: 14px; padding-block: 9px; }
.row-name { display: flex; align-items: baseline; gap: 12px; }
.row-name b { font-family: var(--display); font-weight: 500; font-stretch: 108%; font-size: 1.4rem; line-height: 1.25; }
html[lang="ar"] .row-name b { font-weight: 700; font-stretch: 100%; font-size: 1.55rem; }
.row-name i { font-style: normal; color: var(--ink-2); font-size: 0.88rem; font-stretch: 108%; }
.leader { flex: 1; min-width: 24px; border-bottom: 1px solid var(--ink); transform: translateY(-0.4em); }
.row-price { white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.plus, .plus-gap { width: 34px; height: 34px; flex: none; align-self: center; }
.plus { border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font: 400 1.3rem/1 var(--body); cursor: pointer; transition: background 0.15s, color 0.15s; }
.plus:hover { background: var(--ink); color: var(--paper); }
.note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink); font-weight: 600; }
.trio-photos { grid-template-columns: repeat(3, 1fr); margin-bottom: clamp(40px, 6vw, 80px); }
.trio-photos .cell { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .menu-wrap { grid-template-columns: 1fr; }
  .row-name { flex-direction: column; gap: 0; }
  .trio-photos { grid-template-columns: 1fr; }
  .trio-photos .cell { aspect-ratio: 4 / 3; }
}

/* ---------- المتجر ---------- */
.pgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pcell { display: flex; flex-direction: column; }
.pmedia { aspect-ratio: 1 / 0.9; background: var(--cell); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--ink); }
.pmedia img { width: 100%; height: 100%; object-fit: cover; }
.pmedia img[src$=".webp"] { object-fit: contain; padding: 8%; }
.glyph { width: 44%; color: var(--ink); }
.pbody { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pbody h3 { font-size: 1.9rem; }
.pbody h3 .sub { font-size: 0.42em; }
.meta { display: grid; gap: 2px; font-size: 0.88rem; }
.meta div { display: flex; gap: 10px; }
.meta dt { color: var(--ink-2); min-width: 5em; }
.chips { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.chips legend { padding: 0; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 4px; }
.chips label { display: inline-block; margin-inline-end: 6px; position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span { display: inline-block; border: 1px solid var(--ink); padding: 0 14px; font-size: 0.9rem; min-width: 44px; text-align: center; }
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.field-inline { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--ink-2); }
.field-inline select { flex: 1; }
.pfoot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- نماذج ---------- */
input, select, textarea {
  width: 100%; font: 400 1rem/1.5 var(--body); color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0; padding: 8px 12px;
}
select option { background: var(--paper); color: var(--ink); }
select { padding-block: 6px; }
label { display: block; font-size: 0.9rem; }
label > input, label > select, label > textarea { margin-top: 4px; }
.form-error { color: var(--error); min-height: 1.4em; font-size: 0.92rem; }
.form-error:empty { min-height: 0; }
.hint { font-size: 0.85rem; color: var(--ink-2); }

/* ---------- الفعاليات ---------- */
.events-wrap { padding-top: 36px; }
.events { border-top: 1px solid var(--ink); }
.event { display: grid; grid-template-columns: clamp(96px, 14vw, 150px) 1fr; border-bottom: 1px solid var(--ink); }
.event-date { border-inline-end: 1px solid var(--ink); padding: 24px 12px; display: flex; flex-direction: column; align-items: center; background: var(--cell); }
.event-date .day { font-family: var(--display); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; font-weight: 500; font-stretch: 110%; }
.event-date .mon { font-size: 0.95rem; }
.event-main { padding: 24px clamp(18px, 3vw, 36px) 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.event-main h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.event-when { color: var(--ink-2); }
.event-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.event-facts span { border: 1px solid var(--ink); border-radius: 999px; padding: 0 14px; font-size: 0.88rem; }
.event.past { opacity: 0.55; }
.full { font-weight: 600; }
.reg { width: 100%; margin-top: 8px; }
.reg summary { display: inline-flex; }
.reg[open] summary { display: none; }
.reg form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; max-width: 640px; padding: 20px; border: 1px solid var(--ink); background: var(--paper); }
.reg form .form-error, .reg form button { grid-column: 1 / -1; justify-self: start; }
.empty-art { display: grid; place-items: center; text-align: center; padding-block: 24px; }
.empty-art .art { max-width: 380px; width: 100%; }
@media (max-width: 620px) {
  .event { grid-template-columns: 78px 1fr; }
  .reg form { grid-template-columns: 1fr; }
}

/* ---------- الخدمات ---------- */
.services { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin-bottom: clamp(40px, 6vw, 80px); }
.service { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-height: 240px; }
.service h2 { font-size: 1.9rem; }
.service p { color: var(--ink-2); flex: 1; }

/* ---------- السلة ---------- */
.cart { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5vw, 64px); padding-block: 24px 90px; align-items: start; }
.cart-lines { border-top: 1px solid var(--ink); }
.line { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding-block: 18px; border-bottom: 1px solid var(--ink); }
.line-name { font-family: var(--display); font-size: 1.4rem; font-weight: 500; font-stretch: 108%; line-height: 1.3; }
html[lang="ar"] .line-name { font-weight: 700; font-stretch: 100%; }
.line-sub { grid-column: 1; color: var(--ink-2); font-size: 0.88rem; }
.line-price { grid-column: 2; grid-row: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.line-ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.qty { display: inline-flex; border: 1px solid var(--ink); }
.qty button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.qty button:hover { background: var(--ink); color: var(--paper); }
.qty span { min-width: 34px; text-align: center; line-height: 34px; border-inline: 1px solid var(--ink); }
.link-btn { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.88rem; }
.summary { border: 1px solid var(--ink); padding: clamp(18px, 3vw, 32px); display: grid; gap: 16px; position: sticky; top: calc(var(--hh) + 24px); }
.summary h2 { font-size: 1.9rem; }
.seg { display: flex; border: 1px solid var(--ink); }
.seg label { flex: 1; position: relative; text-align: center; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.seg span { display: block; padding: 8px; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -4px; }
.totals { display: grid; gap: 4px; border-top: 1px solid var(--ink); padding-top: 14px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-weight: 600; font-size: 1.2rem; }
@media (max-width: 860px) { .cart { grid-template-columns: 1fr; } .summary { position: static; } }

/* ---------- حالة الدفع ---------- */
.thanks { padding-block: 24px 100px; max-width: 720px; }
.thanks h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 12px; }
.thanks p { margin-bottom: 8px; }

/* ---------- التذييل ---------- */
.site-footer { border-top: 1px solid var(--ink); margin-top: clamp(40px, 8vw, 100px); }
.foot-top { padding-block: clamp(36px, 6vw, 72px) 24px; display: grid; gap: 18px; }
.foot-top .logo { display: block; aspect-ratio: 1195 / 414; background: currentColor; -webkit-mask: url(/assets/logo.svg) center / contain no-repeat; mask: url(/assets/logo.svg) center / contain no-repeat; }
.foot-slogan { font-family: var(--display); font-stretch: 118%; font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; }
html[lang="ar"] .foot-slogan { font-family: "Amiri", serif; text-transform: none; letter-spacing: 0; font-size: 1.3rem; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 32px; padding-block: 24px 40px; }
.foot-h { font-family: var(--display); font-size: 1.2rem; font-weight: 500; margin-bottom: 8px; }
html[lang="ar"] .foot-h { font-weight: 700; }
.foot-grid li { padding-block: 2px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; border-top: 1px solid var(--ink); font-size: 0.85rem; color: var(--ink-2); }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- إشعار ---------- */
.toast { position: fixed; inset-inline: 0; bottom: 24px; margin-inline: auto; width: max-content; max-width: 90vw; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 8px 22px; font-size: 0.95rem; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 80; }
.toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* =====================================================================
   Olive Ateliers layer — شريط الإعلان، رأس مركزي، بطل بصورة كاملة،
   خلايا ورقية، تذييل رملي
   ===================================================================== */
.announce { background: var(--band) var(--grain); border-bottom: 1px solid var(--ink); }
.announce a { display: block; text-decoration: none; padding-block: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
html[lang="ar"] .announce a { letter-spacing: 0; font-size: 13px; text-transform: none; }
.announce a:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* الرأس: القائمة | الشعار في الوسط | الأدوات */
.site-header { border-bottom: 1px solid var(--ink); }
@media (min-width: 861px) {
  .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .brand { grid-column: 2; grid-row: 1; padding-inline: 0; justify-self: center; }
  .nav { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; }
  .tools { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav a { border-inline-start: 0; padding-inline: 0 28px; justify-content: flex-start; min-width: 0; }
  .nav a:hover, .nav a[aria-current="page"] { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
  .tool { border-inline-start: 0; padding-inline: 14px; }
  .tool:hover { background: transparent; text-decoration: underline; text-underline-offset: 8px; }
}
.nav a, .tool { font: 600 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
html[lang="ar"] .nav a, html[lang="ar"] .tool { letter-spacing: 0; font-size: 14px; text-transform: none; }
.badge { border-radius: 5px; }

/* البطل بصورة كاملة */
.hero-full { position: relative; min-height: min(82vh, 700px); display: grid; place-items: center; text-align: center; color: #efebe0; overflow: hidden; padding: 64px var(--gut); isolation: isolate; border-bottom: 1px solid var(--ink); }
.hero-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-full::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.42); z-index: -1; }
.hero-in { display: grid; justify-items: center; gap: 22px; max-width: 880px; }
.hero-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
html[lang="ar"] .hero-kicker { letter-spacing: 0; font-size: 14px; }
.hero-full .hero-h1 { font-size: clamp(2rem, 6vw, 4.4rem); text-transform: uppercase; }
html[lang="ar"] .hero-full .hero-h1 { text-transform: none; font-size: clamp(2.2rem, 6.4vw, 4.6rem); line-height: 1.3; }
.hero-full .lead { color: #efebe0; opacity: 0.92; margin: 0; }
.hero-full .actions { justify-content: center; margin-top: 6px; }
.hero-full .btn { background: #efebe0; color: #000; border-color: #efebe0; }
.hero-full .btn:hover { background: transparent; color: #efebe0; }
.hero-full .btn.ghost { background: transparent; color: #efebe0; }
.hero-full .btn.ghost:hover { background: #efebe0; color: #000; }

/* روابط مسطّرة */
.btn-underline, .block-head .btn { border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 4px 0; background: transparent; font-weight: 700; }
.block-head .btn:hover { background: transparent; color: var(--ink); border-bottom-color: transparent; }

/* خلايا ورقية */
.hgrid > *, .event-date, .summary { background-color: var(--paper); background-image: var(--grain); }
.pmedia, .moment-art { background-color: var(--cell) !important; background-image: var(--grain); }
.hgrid { border-radius: 0; }
.pgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pbody h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; }
html[lang="ar"] .pbody h3 { font-size: 17px; letter-spacing: 0; }
.pbody h3 .sub { font-size: 11px; margin-top: 2px; }
.pbody { padding: 16px 18px 20px; gap: 8px; }
.price { font-weight: 700; letter-spacing: 0.06em; }
.pfoot .btn { padding: 10px 18px; }
.link-cell h2, .moment-text h2, .block-head h2, .block > h2, .menu-sec h2, .service h2, .summary h2, .thanks h2 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.link-cell h2 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.row-name b { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
html[lang="ar"] .row-name b { font-size: 17px; letter-spacing: 0; text-transform: none; }
.row-name i { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.line-name { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
html[lang="ar"] .line-name { font-size: 17px; letter-spacing: 0; text-transform: none; }
.event-date .day { font-weight: 600; font-stretch: normal; font-size: clamp(2.4rem, 6vw, 4rem); }
.event-main h3 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
.event-facts span, .tabs a { border-radius: 5px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
html[lang="ar"] .event-facts span, html[lang="ar"] .tabs a { letter-spacing: 0; font-size: 14px; text-transform: none; }
.tabs a { padding: 5px 16px; }
.plus { border-radius: 5px; }
input, select, textarea { border-radius: 5px; font-size: 14px; letter-spacing: 0.02em; }
.qty, .seg, .summary, .reg form { border-radius: 5px; }
.toast { border-radius: 5px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
html[lang="ar"] .toast { letter-spacing: 0; font-size: 14px; text-transform: none; }
.foot-slogan { font-family: var(--display); font-stretch: normal; font-size: 12px; letter-spacing: 0.14em; }
html[lang="ar"] .foot-slogan { font-family: var(--body); font-size: 15px; }

/* التذييل الرملي */
.site-footer { background: var(--foot) var(--grain); border-top: 1px solid var(--ink); }
.foot-h { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
html[lang="ar"] .foot-h { font-size: 15px; letter-spacing: 0; text-transform: none; }
.foot-grid a, .foot-grid li, .foot-bottom { font-size: 12px; font-weight: 600; }
html[lang="ar"] .foot-grid a, html[lang="ar"] .foot-grid li, html[lang="ar"] .foot-bottom { font-size: 14px; }
.foot-top .logo { width: min(380px, 100%); }
.site-footer .muted, .foot-bottom { color: var(--ink-2); }
:root[data-theme="dark"] .site-footer { background-color: var(--foot); }
@media (max-width: 860px) {
  .hero-full { min-height: 70vh; }
}

/* =====================================================================
   خطوط عربية: أميري للعناوين، IBM Plex Sans Arabic للنص
   ===================================================================== */
html[lang="ar"] { --display: "Amiri", "IBM Plex Mono", serif; --body: "IBM Plex Sans Arabic", "IBM Plex Mono", sans-serif; }
html[lang="ar"] .display { font-weight: 700; line-height: 1.35; letter-spacing: 0; }
html[lang="ar"] .hero-full .hero-h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.3; }
html[lang="ar"] .giant { font-size: clamp(3rem, 8.5vw, 6.4rem); line-height: 1.25; }
html[lang="ar"] .pbody h3, html[lang="ar"] .row-name b, html[lang="ar"] .line-name { font-size: 22px; font-weight: 700; }
html[lang="ar"] .link-cell h2, html[lang="ar"] .event-main h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
html[lang="ar"] .foot-h { font-size: 20px; }
html[lang="ar"] .display .sub { font-family: "IBM Plex Mono", monospace; }

/* أيقونات مرسومة باليد */
.ico { filter: url(#rough); }
.site-footer .ic { display: flex; gap: 10px; align-items: flex-start; }
.site-footer .ic .ico { width: 18px; height: 18px; flex: none; margin-top: 3px; }
body.lock { overflow: hidden; }

/* =====================================================================
   الرأس + القائمة الجانبية المرقّمة
   ===================================================================== */
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.site-header .nav-toggle { display: flex; grid-column: 1; grid-row: 1; justify-self: start; width: 48px; border: 0; position: relative; }
.site-header .nav-toggle span { inset-inline: 12px; }
.site-header .nav-toggle span:first-child { top: calc(50% - 5px); }
.site-header .nav-toggle span:last-child { top: calc(50% + 4px); }
.site-header .nav-toggle:hover { background: transparent; opacity: 0.6; }
.site-header .brand { grid-column: 2; grid-row: 1; padding: 0; justify-self: center; }
.site-header .tools { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
.site-header .tool { border: 0; }
.nav-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); z-index: 59; }
.site-header .nav {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; width: min(560px, 100%); height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-start; margin: 0; padding: 120px clamp(28px, 6vw, 64px) 40px;
  background: var(--paper) var(--grain); border: 0; border-inline-end: 1px solid var(--ink); overflow-y: auto;
  transform: translateX(-102%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s 0.4s; z-index: 60;
}
html[dir="rtl"] .site-header .nav { transform: translateX(102%); }
.site-header.open .nav { transform: none; visibility: visible; transition: transform 0.4s var(--ease); }
.site-header.open .nav-bg { opacity: 1; pointer-events: auto; }
.nav-x { position: absolute; top: 28px; inset-inline-end: 28px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.nav-x .ico { width: 30px; height: 30px; }
.nav-main { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-header .nav-main a { display: flex; align-items: center; gap: 22px; height: auto; padding: 14px 0; border: 0; min-width: 0; text-transform: uppercase; letter-spacing: 0.1em; font: 500 clamp(22px, 4.4vw, 32px)/1.2 var(--body); text-decoration: none; justify-content: flex-start; }
html[lang="ar"] .site-header .nav-main a { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 5vw, 38px); letter-spacing: 0; text-transform: none; }
.site-header .nav-main a:hover, .site-header .nav-main a[aria-current="page"] { background: transparent; color: var(--ink); text-decoration: none; }
.nav-main .num { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; font: 500 14px/1 "IBM Plex Mono", monospace; letter-spacing: 0; }
.nav-main .num::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 50%; opacity: 0; transform: scale(0.8) rotate(-12deg); transition: opacity 0.2s, transform 0.3s var(--ease); filter: url(#rough); }
.nav-main a:hover .num::before, .nav-main a[aria-current="page"] .num::before { opacity: 1; transform: rotate(-6deg); }
.nav-sub { list-style: none; margin: auto 0 0; padding: 28px 0 0; border-top: 1px solid var(--ink); display: grid; gap: 14px; }
.site-header .nav-sub a { display: block; padding: 0; border: 0; min-width: 0; height: auto; font: 600 12px/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; justify-content: flex-start; }
html[lang="ar"] .site-header .nav-sub a { font-size: 15px; letter-spacing: 0; text-transform: none; }
.nav-sub a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 860px) {
  .site-header .lang-switch { display: none; }
  .site-header .tool { padding-inline: 10px; min-width: 40px; }
  .site-header .brand .logo { height: 44px; width: calc(44px * 2.886); }
}

/* =====================================================================
   درج السلة (Check out)
   ===================================================================== */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s var(--ease); }
.drawer.open .drawer-bg { opacity: 1; }
.drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(620px, 100%); background: var(--paper) var(--grain); border-inline-start: 1px solid var(--ink); display: flex; flex-direction: column; transform: translateX(104%); transition: transform 0.4s var(--ease); }
html[dir="rtl"] .drawer-panel { transform: translateX(-104%); }
.drawer.open .drawer-panel { transform: none; }
.drawer-x { position: absolute; top: 26px; inset-inline-end: 24px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.drawer-x .ico { width: 28px; height: 28px; }
.drawer-body { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 32px clamp(20px, 4vw, 36px) 0; overflow-y: auto; }
.drawer-h { font-size: clamp(2rem, 5vw, 3rem); margin: 6px 0 18px; padding-inline-end: 56px; }
.drawer-count { font: 500 14px/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; color: var(--ink-2); text-transform: none; vertical-align: middle; }
.drawer-note { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 14px; background: var(--band) var(--grain); border-radius: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6; }
html[lang="ar"] .drawer-note { font-size: 14px; letter-spacing: 0; text-transform: none; }
.drawer-note .ico { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--ink); border-radius: 50%; padding: 2px; }
.drawer-lines { flex: 1; }
.drawer-foot { position: sticky; bottom: 0; margin-inline: calc(-1 * clamp(20px, 4vw, 36px)); padding: 18px clamp(20px, 4vw, 36px) 28px; background: var(--paper) var(--grain); border-top: 1px solid var(--ink); display: grid; gap: 18px; }
.drawer-foot .totals { border: 0; padding: 0; gap: 8px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 13px; }
html[lang="ar"] .drawer-foot .totals { letter-spacing: 0; text-transform: none; font-size: 15px; }
.drawer-foot .totals .muted { text-transform: none; letter-spacing: 0.02em; font-weight: 500; }

.btn.wide { width: 100%; padding: 22px 24px; font-size: 13px; letter-spacing: 0.2em; background: #231713; color: #efebe0; border-color: #231713; }
:root[data-theme="dark"] .btn.wide { background: #efebe0; color: #000; border-color: #efebe0; }
.btn.wide:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
html[lang="ar"] .btn.wide { font-size: 16px; letter-spacing: 0; }

/* سطر المنتج في السلة */
.line { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px 18px; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--ink); }
.cart-lines .line:first-child, .drawer-lines .line:first-child { padding-top: 6px; }
.line-thumb { width: 92px; aspect-ratio: 1; background: var(--cell) var(--grain); display: grid; place-items: center; overflow: hidden; border-radius: 2px; }
.line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.line-thumb .ico { width: 34px; height: 34px; }
.line-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.line-price { grid-column: 3; grid-row: 1; font-weight: 600; white-space: nowrap; }
.line-sub { grid-column: auto; }
.line-ctl { grid-column: auto; margin-top: 6px; }
.qty { border-radius: 5px; }
.qty button { width: 30px; height: 30px; }
.qty span { min-width: 30px; line-height: 30px; }

/* صفحة إتمام الطلب */
.summary { border: 1px solid var(--ink); }
.summary .totals { border-top: 1px solid var(--ink); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; font-weight: 600; }
html[lang="ar"] .summary .totals { text-transform: none; letter-spacing: 0; font-size: 15px; }
.summary .totals .grand { font-size: 15px; }
html[lang="ar"] .summary .totals .grand { font-size: 18px; }

/* =====================================================================
   المتجر: أزرار التصنيفات + شريط الأدوات + بطاقات كبيرة
   ===================================================================== */
.pills { margin-top: var(--gut); }
.pills-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-block: 8px; }
.pills a { text-decoration: none; border: 1px solid var(--ink); border-radius: 999px; padding: 9px 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
html[lang="ar"] .pills a { font-size: 15px; letter-spacing: 0; text-transform: none; }
.pills a:hover, .pills a:first-child { background: #231713; color: #efebe0; }
:root[data-theme="dark"] .pills a:hover, :root[data-theme="dark"] .pills a:first-child { background: #efebe0; color: #000; }
.shop-tools { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding-block: 28px 10px; }
.count { font-size: 14px; letter-spacing: 0.04em; margin: 0 0 6px; }
.shop-tools .search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; max-width: 420px; margin-inline-start: auto; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.shop-tools .search .ico { width: 22px; height: 22px; flex: none; }
.shop-tools .search input { border: 0; padding: 4px 0; background: transparent; }
.shop-tools .search input:focus-visible { outline: 0; }
.shop-tools .sort { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
html[lang="ar"] .shop-tools .sort { font-size: 14px; letter-spacing: 0; text-transform: none; }
.shop-tools .sort select { width: auto; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 4px 4px; font-size: 13px; }

/* شبكة بطاقات كبيرة بدون خطوط الخلايا */
.pgrid { border: 0; gap: clamp(14px, 2.4vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.pgrid > * { border: 0; background: transparent; }
.pgrid[hidden], [data-product][hidden], [data-section][hidden] { display: none !important; }
.pcell { border: 0 !important; }
.pmedia { position: relative; aspect-ratio: 4 / 5; border: 0; border-radius: 3px; }
.pmedia img[src$=".webp"] { padding: 12%; }
.glyph { width: 38%; }
.tag { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 1; padding: 6px 16px; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; isolation: isolate; }
.tag::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 50%; filter: url(#rough); z-index: -1; }
html[lang="ar"] .tag { font-size: 13px; letter-spacing: 0; text-transform: none; }
.pbody { padding: 16px 2px 8px; }
.pcell .meta { display: none; }
@media (max-width: 860px) { .shop-tools .search { max-width: none; order: 3; flex-basis: 100%; margin-inline-start: 0; } }
html[dir="rtl"] .site-header.open .nav { transform: none; }

/* =====================================================================
   إطار بخط مرسوم باليد + لمسة زرقاء #4370b7 (نسبة قليلة)
   ===================================================================== */
:root { --accent: #4370b7; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline-color: var(--accent); }

/* الصناديق: حدود تُرسم في عنصر زائف ثم تُهتز بفلتر */
.hgrid { border: 0; }
.hgrid > *, .summary, .reg form, .qty, .drawer-note { position: relative; border: 0 !important; }
.hgrid > *::after, .summary::after, .reg form::after, .qty::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: inherit; pointer-events: none; filter: url(#rough-box); z-index: 2;
}
.qty::after { border-radius: 5px; filter: url(#rough); }
.qty span { border-inline: 0; }
.cell.flush { overflow: visible; }
.hgrid > .flush img, .hero-img img { }

/* الخطوط الأفقية */
.site-header, .announce, .site-footer, .tabs, .foot-bottom, .line, .drawer-foot, .nav-sub, .events, .event, .summary .totals, .totals { position: relative; }
.site-header { position: sticky; border-bottom: 0 !important; }
.announce, .tabs, .foot-bottom, .line, .drawer-foot, .nav-sub, .event, .summary .totals, .cart-lines { border-color: transparent !important; }
.site-footer { border-top: 0; }
.site-header::after, .announce::after, .site-footer::before, .tabs::after, .foot-bottom::before, .line::after, .drawer-foot::before, .nav-sub::before, .event::after, .summary .totals::before, .cart-lines::before {
  content: ""; position: absolute; inset-inline: 0; height: 1px; background: var(--ink); filter: url(#rough-line); pointer-events: none;
}
.site-header::after, .announce::after, .line::after, .event::after, .tabs::after { bottom: 0; }
.site-footer::before, .foot-bottom::before, .drawer-foot::before, .nav-sub::before, .summary .totals::before, .cart-lines::before { top: 0; }
.cart-lines { position: relative; }
.site-header .nav-sub { border-top: 0; }
.drawer-foot { border-top: 0; }
.events { border-top: 0; }
.nav-main .num::before, .tag::before { border-color: var(--ink); }

/* اللون الأزرق: لمسات صغيرة فقط */
.badge { background: var(--accent); color: #fff; }
.tool:hover .badge { background: var(--accent); color: #fff; }
.drawer-note .ico { border-color: var(--accent); color: var(--accent); }
.nav-main a:hover .num::before, .nav-main a[aria-current="page"] .num::before { border-color: var(--accent); }
.nav-main a[aria-current="page"] .num { color: var(--accent); }
.announce a:hover span, .nav-sub a:hover, .link-btn:hover { text-decoration-color: var(--accent); color: var(--accent); }
.block-head .btn:hover { border-bottom-color: var(--accent); }
.shop-tools .search:focus-within { border-bottom-color: var(--accent); }
.chips input:checked + span { box-shadow: inset 0 -3px 0 var(--accent); }
.event-date .day { color: var(--ink); }
.pills a:hover:not(:first-child) { border-color: var(--accent); }
.pgrid > *::after { display: none; }
.summary { position: sticky; }
@media (max-width: 860px) { .summary { position: relative; } }

/* =====================================================================
   تأثير الورق (مثل Olive Ateliers): ألياف دقيقة + بقع واسعة
   ===================================================================== */
:root {
  --paper-fine: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper-blot: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .17 -.04'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)'/%3E%3C/svg%3E");
  --paper-tex: var(--paper-fine), var(--paper-blot);
}
:root[data-theme="dark"] {
  --paper-fine: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .84 0 0 0 0 .72 0 0 0 .1 -.02'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper-blot: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .84 0 0 0 0 .72 0 0 0 .08 -.02'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --paper-fine: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75 .55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .84 0 0 0 0 .72 0 0 0 .1 -.02'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E"); --paper-blot: none; }
}
/* الصفحة كلها بورق خفيف، والأماكن المميزة بورق أوضح */
body { background-color: var(--paper); background-image: var(--paper-fine), var(--paper-blot); background-size: 300px 300px, 900px 900px; }
.site-footer, .announce, .drawer-panel, .site-header .nav, .drawer-note, .drawer-foot, .pmedia, .moment-art, .line-thumb {
  background-image: var(--paper-fine), var(--paper-blot) !important; background-size: 300px 300px, 900px 900px !important;
}
.site-footer { background-color: var(--foot); }
.announce, .drawer-note { background-color: var(--band); }
.pmedia, .moment-art, .line-thumb { background-color: var(--cell); }
.drawer-panel, .site-header .nav, .drawer-foot { background-color: var(--paper); }
/* حافة ورقة ممزّقة خفيفة فوق التذييل */
.site-footer::after { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 10px; background: var(--paper); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v3l-6 2-8-1-9 3-7-2-10 2-8-3-9 2-8-1-7 3-9-2-10 1-8-2-9 2-7-1-5 1z'/%3E%3C/svg%3E") 0 0 / 120px 10px repeat-x; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v3l-6 2-8-1-9 3-7-2-10 2-8-3-9 2-8-1-7 3-9-2-10 1-8-2-9 2-7-1-5 1z'/%3E%3C/svg%3E") 0 0 / 120px 10px repeat-x; pointer-events: none; }
.site-footer { position: relative; }

/* خيارات المشروب في المنيو */
.row { display: block; padding: 0; }
.row-line { display: flex; align-items: baseline; gap: 14px; padding-block: 9px; }
.row-opts { margin: 4px 0 14px; padding: 16px 18px; display: grid; gap: 14px; background: var(--cell); background-image: var(--paper-fine), var(--paper-blot); background-size: 300px 300px, 900px 900px; border-radius: 3px; position: relative; }
.row-opts[hidden] { display: none; }
.row-opts .chips legend { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
html[lang="ar"] .row-opts .chips legend { font-size: 14px; letter-spacing: 0; text-transform: none; }
.row-opts .chips span { border-radius: 5px; padding: 4px 16px; }
.row-opts .actions { margin-top: 0; }
.note-field { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
html[lang="ar"] .note-field { font-size: 14px; letter-spacing: 0; text-transform: none; }
.note-field input { margin-top: 6px; text-transform: none; letter-spacing: 0.02em; font-weight: 400; background: var(--paper); }

/* معرض الصور */
.gallery-wrap { padding-block: 24px 40px; }
.gallery { columns: 3 280px; column-gap: clamp(14px, 2.4vw, 32px); }
.gallery li { break-inside: avoid; margin-bottom: clamp(14px, 2.4vw, 32px); }
.shot { display: block; width: 100%; padding: 0; border: 0; background: var(--cell); cursor: zoom-in; border-radius: 3px; overflow: hidden; }
.shot img { width: 100%; height: auto; transition: transform 0.6s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.cap { margin-top: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
html[lang="ar"] .cap { font-size: 14px; letter-spacing: 0; text-transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, var(--paper) 94%, transparent); background-image: var(--paper-fine); display: grid; place-items: center; padding: 56px 64px; }
.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: 100%; max-height: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 160px); width: auto; height: auto; border-radius: 3px; }
.lb-x, .lb-nav { position: absolute; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.lb-x { top: 18px; inset-inline-end: 18px; width: 44px; height: 44px; display: grid; place-items: center; }
.lb-x .ico { width: 28px; height: 28px; }
.lb-nav { top: 50%; transform: translateY(-50%); font: 300 3rem/1 var(--mono); padding: 12px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
@media (max-width: 620px) { .lightbox { padding: 56px 12px; } .lb-nav { top: auto; bottom: 8px; transform: none; } }

/* معجنات اليوم */
.pastry-grid { grid-template-columns: 1fr 1fr; }
.pastry-grid.no-img { grid-template-columns: 1fr; }
.pastry-img { min-height: 320px; max-height: 460px; }
.pastry-img img { width: 100%; height: 100%; object-fit: cover; }
.pastry-text { display: flex; flex-direction: column; justify-content: center; gap: 14px; background-color: var(--band) !important; background-image: var(--paper-fine), var(--paper-blot) !important; background-size: 300px 300px, 900px 900px !important; }
.pastry-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
html[lang="ar"] .pastry-kicker { font-size: 14px; letter-spacing: 0; text-transform: none; }
.pastry-text h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
.pastry-text .actions { margin-top: 6px; }
.menu-pastry { margin-top: var(--gut); }
@media (max-width: 860px) { .pastry-grid { grid-template-columns: 1fr; } .pastry-img { min-height: 0; aspect-ratio: 4/3; } }

/* ساعات العمل (صندوق بإطار مرسوم وفاصل في الوسط) */
.hours { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 1020px; margin-inline: auto; padding-block: clamp(36px, 6vw, 64px); }
.hours::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 3px; filter: url(#rough-box); pointer-events: none; }
.hours.solo { grid-template-columns: 1fr; max-width: 560px; }
.hours-col { display: grid; justify-items: center; gap: clamp(16px, 3vw, 28px); text-align: center; padding-inline: clamp(16px, 4vw, 40px); position: relative; }
.hours-col + .hours-col::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 1px; background: var(--ink); filter: url(#rough-line); transform: rotate(90deg) rotate(-90deg); }
.hours-kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
html[lang="ar"] .hours-kicker { font-size: 15px; letter-spacing: 0; text-transform: none; }
.hours-big { font-size: clamp(1.1rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; margin: 0; }
html[lang="ar"] .hours-big { font-family: var(--display); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: clamp(1.5rem, 3.4vw, 2.6rem); }
.btn-underline { display: inline-block; text-decoration: none; border-bottom: 1px solid var(--ink); padding: 2px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: border-color 0.2s; }
html[lang="ar"] .btn-underline { font-size: 15px; letter-spacing: 0; text-transform: none; }
.btn-underline:hover { border-bottom-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) { .hours { grid-template-columns: 1fr; gap: 36px; } .hours-col + .hours-col::before { inset: -18px 20% auto 20%; width: auto; height: 1px; } }
.svc-contact { display: grid; gap: 8px; margin: 0; }
.svc-contact li { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.04em; }
.svc-contact .ico { width: 20px; height: 20px; flex: none; }
.svc-contact a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.svc-contact a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hero-full + .block { margin-top: clamp(56px, 9vw, 120px); }
.hours { margin-block: 0; }
.hours + .block, .block + .block { margin-top: clamp(56px, 9vw, 120px); }

/* مسافة فوق عناوين أقسام المنيو حتى لا تلتصق بشريط التبويبات */
.menu-wrap { padding-block: 56px 72px; row-gap: 28px; }
.menu-sec { padding-top: 24px; scroll-margin-top: calc(var(--hh) + 84px); }
.menu-sec h2 { margin-bottom: 18px; }
.tabs { margin-bottom: 0; }

/* كود الخصم */
.coupon { display: grid; gap: 6px; }
.coupon-row { display: flex; gap: 10px; }
.coupon-row input { flex: 1; text-transform: uppercase; letter-spacing: 0.1em; }
.coupon-row .btn { padding: 8px 18px; }
.coupon.on { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1px dashed var(--accent); border-radius: 5px; font-weight: 600; letter-spacing: 0.1em; }

/* اختيار طريقة الدفع */
.pay-pick{margin:14px 0 4px}
.pay-pick .pay-lbl{display:block;font-size:.85rem;margin-bottom:6px;opacity:.75}

/* تتبّع الطلب */
.track-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:22px}
.track-form label{display:grid;gap:6px;flex:1;min-width:220px}
.track-ref{margin:0 0 14px}
.track-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
.track-steps li{display:flex;align-items:center;gap:12px;opacity:.45}
.track-steps li.done,.track-steps li.now{opacity:1}
.track-steps .dot{width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;flex:none}
.track-steps li.done .dot{background:currentColor}
.track-steps li.now .dot{background:var(--accent,#4370b7);border-color:var(--accent,#4370b7);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#4370b7) 25%,transparent)}
.track-steps li.now{font-weight:700}
.track-items{margin:0 0 14px;padding-inline-start:18px}
.track-save{margin:0 0 14px;width:100%}

/* خيارات الدفع كبطاقات اختيار */
.opt-list{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--ink);border-radius:5px;padding:12px 14px;cursor:pointer;position:relative}
.opt input{margin:4px 0 0;accent-color:var(--ink);flex:none;width:16px;height:16px}
.opt-t{display:grid;gap:3px;text-align:start}
.opt-t small{opacity:.75;font-size:.82rem;line-height:1.5}
.opt:has(input:checked){background:var(--ink);color:var(--paper)}
.opt:has(input:checked) input{accent-color:var(--paper)}
.opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.fulfil-only{margin:0 0 6px}