/* LAYAN CAFFE premium responsive header. Loaded after both legacy styles. */
@media (max-width: 800px) {
  html, body { max-width:100%; overflow-x:clip; }
  header.top {
    direction:ltr !important; box-sizing:border-box !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    position:sticky !important; top:0 !important; isolation:isolate;
    height:92px !important; min-height:92px !important;
    width:100% !important; max-width:100vw !important;
    margin:0 !important; padding:0 14px !important; gap:0 !important;
    background:rgba(255,252,247,.98) !important;
    border-bottom:1px solid #e8d9c8 !important;
    box-shadow:0 5px 22px rgba(44,28,16,.06) !important;
    z-index:999 !important;
  }
  header.top > a.brand {
    position:absolute !important; top:50% !important; left:50% !important; right:auto !important;
    transform:translate(-50%,-50%) !important; margin:0 !important; padding:0 !important;
    width:74px !important; height:74px !important; min-width:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    z-index:2 !important; float:none !important;
  }
  header.top > a.brand img {
    display:block !important; width:72px !important; height:72px !important;
    max-width:72px !important; max-height:72px !important;
    object-fit:contain !important; margin:0 !important;
  }
  header.top > button.menu {
    display:flex !important; align-items:center !important; justify-content:center !important;
    position:relative !important; inset:auto !important; order:0 !important;
    width:42px !important; height:42px !important; min-width:42px !important;
    padding:0 !important; margin:0 !important;
    border:1px solid #e9dece !important; border-radius:13px !important;
    background:#f6eee4 !important; color:#28190f !important;
    font-size:25px !important; line-height:1 !important; z-index:3 !important;
  }
  header.top > .langs {
    display:flex !important; flex-direction:row !important; direction:ltr !important;
    position:relative !important; inset:auto !important; right:auto !important; left:auto !important;
    order:2 !important; align-items:center !important; justify-content:flex-end !important;
    gap:2px !important; width:auto !important; min-width:0 !important;
    margin:0 !important; padding:5px !important;
    background:#f6eee4 !important; border-radius:25px !important;
    z-index:3 !important; transform:none !important;
  }
  header.top > .langs a {
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:30px !important; min-width:30px !important; height:30px !important;
    padding:0 !important; margin:0 !important; font-size:10px !important;
    line-height:1 !important; font-weight:700 !important; color:#372518 !important;
    text-decoration:none !important; border-radius:20px !important;
  }
  html[lang="en"] header.top > .langs a[href="?lang=en"],
  html[lang="ku"] header.top > .langs a[href="?lang=ku"],
  html[lang="ar"] header.top > .langs a[href="?lang=ar"] { background:#e6c49a !important; }
  header.top > nav { display:none !important; position:absolute !important;
    top:92px !important; left:0 !important; right:0 !important;
    width:100% !important; box-sizing:border-box !important;
    padding:20px !important; margin:0 !important;
    background:#fffaf4 !important; box-shadow:0 12px 18px rgba(0,0,0,.12) !important;
    flex-direction:column !important; gap:16px !important; z-index:5 !important;
  }
  body.navopen header.top > nav { display:flex !important; }
  html[dir="rtl"] header.top > nav { direction:rtl !important; text-align:right !important; }
}
@media (max-width: 360px) {
  header.top { height:82px !important; min-height:82px !important; padding:0 9px !important; }
  header.top > a.brand { width:62px !important; height:62px !important; }
  header.top > a.brand img { width:60px !important; height:60px !important; }
  header.top > .langs a { width:25px !important; min-width:25px !important; font-size:9px !important; }
  header.top > .langs { padding:3px !important; }
  header.top > button.menu { width:38px !important; height:38px !important; min-width:38px !important; }
  header.top > nav { top:82px !important; }
}