*,*::before,*::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html { scroll-behavior:smooth }
body { margin:0; background:var(--t-bg); color:var(--t-text); font-family:'IBM Plex Sans','Tajawal',sans-serif; overflow-x:hidden; min-height:100vh }
[dir=rtl] body { font-family:'Tajawal','IBM Plex Sans',sans-serif }
a { color:inherit; text-decoration:none }
.no-scrollbar::-webkit-scrollbar { display:none }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none }
.hidden { display:none !important }

/* Shared inline icon sizing */
.ic-inline { width:14px; height:14px; flex:none; vertical-align:-2px; margin-inline-end:5px }
.ic-plate { width:34%; height:34%; opacity:.55 }

/* ── Header ─────────────────────────────────── */
.lp-header {
  position:sticky; top:0; z-index:50;
  background:var(--t-header);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--t-border);
}
.lp-header-inner {
  max-width:768px; margin:0 auto;
  padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lp-logo { display:flex; align-items:center; gap:10px }
.lp-logo img {
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:1px solid var(--t-border);
}
.lp-logo-icon {
  width:38px; height:38px; border-radius:50%;
  background:var(--t-brandBg);
  border:1px solid color-mix(in srgb,var(--t-brand) 30%,transparent);
  display:flex; align-items:center; justify-content:center;
  color:var(--t-brand); font-weight:700; font-size:1rem;
  font-family:'Newsreader',serif;
}
.lp-name {
  font-family:'Newsreader',serif; font-style:italic;
  font-weight:600; font-size:1.08rem; color:var(--t-text);
}
[dir=rtl] .lp-name { font-family:'Tajawal',serif; font-style:normal; font-weight:700 }

/* Language trigger (shared with menu.html) */
.lang-trigger {
  display:flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:8px;
  border:1px solid var(--t-border); background:var(--t-surface);
  color:var(--t-textMuted); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:border-color .15s; font-family:inherit;
}
.lang-trigger:hover { border-color:var(--t-brand); color:var(--t-text) }
#lp-lang-dropdown {
  background:var(--t-surface); border:1px solid var(--t-border);
  border-radius:10px; box-shadow:var(--t-shadow); overflow:hidden;
  position:absolute; inset-inline-end:0; margin-top:6px;
  min-width:130px; z-index:100;
}
.lang-btn {
  display:block; width:100%; text-align:start;
  padding:11px 16px; font-size:.875rem; font-family:inherit;
  background:transparent; border:none; cursor:pointer;
  color:var(--t-textMuted); transition:background .12s;
}
.lang-btn:hover { background:var(--t-raised); color:var(--t-text) }
.lang-btn.active { color:var(--t-brand); font-weight:700 }

/* ── Hero (cover image present) ──────────────── */
.lp-hero { position:relative; height:210px; overflow:hidden }
.lp-hero img { width:100%; height:100%; object-fit:cover }
.lp-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,18,.08) 0%, rgba(15,12,9,.78) 100%);
}
.lp-hero-text {
  position:absolute; left:20px; right:20px; bottom:18px;
  text-align:start;
}
.lp-hero-title {
  font-family:'Newsreader',serif; font-weight:700;
  font-size:1.85rem; color:#FFFCF5;
  margin:0; line-height:1.08;
}
[dir=rtl] .lp-hero-title { font-family:'Tajawal',serif }
.lp-hero-tagline { color:rgba(255,252,245,.82); font-size:.88rem; margin:5px 0 0 }

/* ── Hero fallback (no cover image) ──────────── */
.lp-hero-fallback {
  max-width:768px; margin:0 auto;
  padding:34px 20px 6px;
}
.lp-eyebrow {
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t-accent); margin:0 0 8px;
}
.lp-hero-fallback-title {
  font-family:'Newsreader',serif; font-weight:700; font-size:1.9rem;
  color:var(--t-text); margin:0; line-height:1.08;
}
[dir=rtl] .lp-hero-fallback-title { font-family:'Tajawal',serif }
.lp-hero-fallback-tagline { color:var(--t-textMuted); font-size:.92rem; margin:8px 0 0 }

/* ── Section header ─────────────────────────── */
.lp-section-head {
  max-width:768px; margin:0 auto;
  padding:26px 16px 13px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.lp-section-title {
  font-family:'Newsreader',serif; font-style:italic;
  font-size:1.08rem; font-weight:600; color:var(--t-text);
}
[dir=rtl] .lp-section-title { font-family:'Tajawal',serif; font-style:normal; font-weight:800 }
.lp-section-title--brand { color:var(--t-brand) }
.lp-section-count {
  font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--t-textFaint);
}

/* ── Stamp badge (signature element) ─────────── */
.lp-stamp {
  position:absolute; top:8px; inset-inline-end:8px;
  border:1.3px dashed var(--t-accent);
  border-radius:50%;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.1;
  font-size:.58rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--t-accent);
  background:color-mix(in srgb, var(--t-surface) 88%, transparent);
  transform:rotate(-7deg);
}
.lp-stamp--sm { font-size:.5rem; width:50px; height:50px; padding:2px }

/* ── Category grid ───────────────────────────── */
.lp-grid {
  max-width:768px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:13px; padding:4px 16px 28px;
}
.lp-cat-card {
  background:var(--t-surface);
  border:1px solid var(--t-border);
  border-radius:10px; overflow:hidden;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}
.lp-cat-card:hover { border-color:var(--t-brand); box-shadow:var(--t-shadow) }
.lp-cat-card:active { transform:scale(.98) }
.lp-cat-media { position:relative; width:100%; aspect-ratio:1 }
.lp-cat-img { width:100%; height:100%; object-fit:cover }
.lp-cat-placeholder {
  width:100%; height:100%;
  background:var(--t-raised);
  display:flex; align-items:center; justify-content:center;
  color:var(--t-brand);
}
.lp-cat-name {
  padding:10px 12px 13px;
  font-size:.86rem; font-weight:600;
  color:var(--t-text); line-height:1.3;
  font-family:'Newsreader',serif; font-style:italic;
}
[dir=rtl] .lp-cat-name { font-family:'Tajawal',serif; font-style:normal; font-weight:700 }
.lp-empty {
  color:var(--t-textMuted); grid-column:1/-1; text-align:center; padding:32px 0;
}
.lp-cat-count {
  display:block; font-family:'IBM Plex Sans',sans-serif; font-style:normal;
  font-size:.7rem; font-weight:500; color:var(--t-textFaint); margin-top:3px;
}

/* ── Browse all button ──────────────────────── */
.lp-browse-all-wrap {
  max-width:768px; margin:0 auto;
  padding:2px 16px 36px;
  display:flex; justify-content:center;
}
.lp-browse-all {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--t-brand);
  color:var(--t-bg);
  border-radius:10px; padding:12px 26px;
  font-size:.875rem; font-weight:700;
  transition:background .15s;
}
.lp-browse-all:hover { background:var(--t-brandLight) }

/* ── Today's Specials strip ─────────────────── */
.lp-specials-row {
  max-width:768px; margin:0 auto;
  display:flex; gap:12px; overflow-x:auto;
  padding:4px 16px 22px;
}
.lp-special-card {
  flex-shrink:0; width:148px;
  background:var(--t-surface);
  border:1px solid var(--t-border);
  border-radius:10px; overflow:hidden;
  cursor:pointer; transition:border-color .18s;
  text-decoration:none; color:inherit;
}
.lp-special-card:hover { border-color:var(--t-brand) }
.lp-special-media { position:relative; width:100%; height:95px }
.lp-special-img { width:100%; height:100%; object-fit:cover }
.lp-special-placeholder {
  width:100%; height:100%;
  background:var(--t-raised);
  display:flex; align-items:center; justify-content:center;
  color:var(--t-brand);
}
.lp-special-info { padding:9px 11px 12px }
.lp-special-name { font-size:.82rem; font-weight:600; color:var(--t-text); line-height:1.3;
  font-family:'Newsreader',serif; }
[dir=rtl] .lp-special-name { font-family:'Tajawal',serif }
.lp-special-price { font-size:.78rem; font-weight:700; color:var(--t-brand); margin-top:4px; font-variant-numeric:tabular-nums }

/* ── Footer ─────────────────────────────────── */
.lp-footer {
  background:var(--t-raised);
  border-top:1px solid var(--t-border);
  padding:36px 16px 44px;
  margin-top:12px;
}
.lp-footer-inner { max-width:768px; margin:0 auto }
.lp-footer-brand {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; margin-bottom:28px;
}
.lp-footer-logo {
  width:60px; height:60px; border-radius:50%; object-fit:cover;
  border:1px solid var(--t-border); margin-bottom:10px;
}
.lp-footer-name {
  font-family:'Newsreader',serif; font-style:italic;
  font-size:1.15rem; font-weight:600; color:var(--t-text);
}
[dir=rtl] .lp-footer-name { font-family:'Tajawal',serif; font-style:normal; font-weight:800 }
.lp-footer-tagline { font-size:.85rem; color:var(--t-textMuted); margin-top:4px }

.lp-footer-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:22px; margin-bottom:24px;
}
.lp-footer-section h4 {
  font-size:.68rem; font-weight:700;
  color:var(--t-textFaint);
  text-transform:uppercase; letter-spacing:.1em;
  margin:0 0 10px;
}
.lp-footer-section p,
.lp-footer-section a {
  font-size:.855rem; color:var(--t-textMuted);
  line-height:1.6; margin:0;
  display:inline-flex; align-items:center;
}
.lp-footer-section a:hover { color:var(--t-brand) }
.lp-footer-section p + p { margin-top:4px }

.lp-social-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px }
.lp-social-btn {
  display:inline-flex; align-items:center;
  background:var(--t-surface); border:1px solid var(--t-border);
  color:var(--t-textMuted); border-radius:7px;
  padding:6px 12px; font-size:.78rem; font-weight:600;
  transition:all .15s; text-decoration:none;
}
.lp-social-btn:hover { border-color:var(--t-brand); color:var(--t-brand) }

.lp-map-link { color:var(--t-brand); font-weight:600; margin-top:6px }
.lp-map-link:hover { text-decoration:underline }

.lp-footer-hr { border:none; border-top:1px solid var(--t-border); margin:0 0 18px }
.lp-footer-bottom { text-align:center; font-size:.72rem; color:var(--t-textFaint) }
