:root{--bg:#ffffff;--text:#111;--muted:#666;--brand:#d8232a;--tab:#f5f5f5;--card:#fff;--radius:16px;--shadow:0 6px 16px rgba(0,0,0,.08)}
*{box-sizing:border-box}
.albeyk-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text)}
.albeyk-container{max-width:1000px;margin:0 auto;padding:16px 12px 100px;background:var(--bg)}
.albeyk-header{position:sticky;top:0;z-index:50;background:var(--bg);padding:8px 12px 12px;border-bottom:1px solid #eee}
.albeyk-title{font-size:24px;font-weight:800;margin:4px 0}
.albeyk-search{display:flex;gap:8px;align-items:center;margin-top:6px}
.albeyk-search input{flex:1;padding:12px 14px;border:1px solid #e5e5e5;border-radius:12px;font-size:16px}
.albeyk-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:66px;z-index:49;background:var(--bg);padding:8px 0;border-bottom:1px solid #eee;overflow:auto;white-space:nowrap;display:flex;justify-content:center;gap:8px}
.albeyk-tab{display:inline-block;padding:10px 14px;border-radius:999px;background:var(--tab);cursor:pointer;font-weight:600;font-size:14px;border:1px solid transparent;flex:0 0 auto}
.albeyk-tab.active{background:var(--brand);color:#fff}
.albeyk-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px;margin-top:12px}
@media (min-width:640px){.albeyk-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.albeyk-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.albeyk-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid #eee;display:flex;flex-direction:column}
.albeyk-card img{width:100%;height:180px;object-fit:cover;background:#fafafa}
.albeyk-card h4{font-size:16px;margin:10px 12px 0}
.albeyk-price{font-size:17px;font-weight:800;color:var(--brand);margin:6px 12px 4px}
.albeyk-desc{font-size:13px;color:var(--muted);margin:0 12px 12px}
.albeyk-section{margin-top:18px}
.albeyk-section h3{font-size:18px;margin:6px 0 10px}
.albeyk-footer{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid #eee;padding:10px 12px;display:flex;gap:8px;overflow:auto;white-space:nowrap;justify-content:center}
.albeyk-badge{font-size:11px;color:#fff;background:var(--brand);padding:2px 8px;border-radius:999px;margin-left:8px}

/* --- Fix: tabs visibility and centering --- */
.albeyk-tabs,
.albeyk-footer{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.albeyk-tabs{ position:sticky; top:66px; z-index:49; background:var(--bg); border-bottom:1px solid #eee; justify-content:flex-start; }
.albeyk-footer{ position:fixed; left:0; right:0; bottom:0; background:var(--bg); border-top:1px solid #eee; justify-content:flex-start; }

/* Desktop: show all tabs without cutting, center them and allow wrapping */
@media (min-width: 1024px){
  .albeyk-tabs, .albeyk-footer{
    overflow-x:visible;
    white-space:normal;
    flex-wrap:wrap;
    justify-content:center;
  }
}

.albeyk-tab{ flex:0 0 auto; display:inline-block; padding:10px 14px; border-radius:999px; background:var(--tab); cursor:pointer; font-weight:600; font-size:14px; border:1px solid transparent }
.albeyk-tab.active{ background:var(--brand); color:#fff }

/* Centered header and optional logo */
.albeyk-header{display:flex;flex-direction:column;align-items:center;text-align:center}
.albeyk-title{display:flex;align-items:center;justify-content:center;gap:10px}
.albeyk-logo{max-height:42px;height:auto;width:auto}

/* Category heading emphasis */
.albeyk-section h3{
  font-size:20px;
  font-weight:800;
  display:flex; align-items:center; gap:10px;
}
.albeyk-section h3::before{
  content:''; display:inline-block; width:10px; height:10px; border-radius:999px; background:var(--brand);
}

/* Mobile dropdown menu styles */
.albeyk-cat-toggle{
  display:none;
  margin:10px 0 6px;
  padding:12px 14px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  font-weight:700;
}
.albeyk-cat-panel{
  display:none;
  flex-direction:column;
  gap:8px;
  margin-bottom:8px;
}
.albeyk-cat-panel .albeyk-tab{
  width:100%;
  text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  border:1px solid #e6e6e6;
  background:#fff;
}
/* Stronger "button" look for tabs */
.albeyk-tab{
  border:1px solid #e6e6e6;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  transition:transform .08s ease, box-shadow .12s ease;
}
.albeyk-tab:active{ transform:scale(0.98); box-shadow:0 3px 8px rgba(0,0,0,.08); }

/* Mobile behavior */
@media(max-width: 768px){
  .albeyk-tabs{ display:none; } /* hide desktop tabs */
  .albeyk-cat-toggle{ display:block; width:100%; }
  .albeyk-cat-panel{ display:flex; }
}

/* Ensure content has bottom padding so footers don't overlap content on mobile */
@media(max-width: 768px){
  .albeyk-container{ padding-bottom:140px; }
}

/* Always show dropdown */
.albeyk-cat-toggle{ display:block; width:100%; }
.albeyk-cat-panel{ display:none; }
.albeyk-tabs{ display:none !important; } /* Remove horizontal top menu on all screens */
/* Keep footer intact */

/* Dropdown animation */
.albeyk-cat-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .28s ease, opacity .2s ease;
}
.albeyk-cat-panel.open{
  max-height:80vh;
  opacity:1;
  display:flex;
}
/* Ensure header stays sticky (already set), button full width */
.albeyk-cat-toggle{ position:relative; z-index:51; }


/* DEBUG: force MENI button visible */
.albeyk-cat-toggle{ display:block !important; width:100%; outline:0; }
.albeyk-header{ position:sticky; top:0; }

/* Ensure dropdown panel base exists even if theme overrides */
.albeyk-cat-panel{display:flex;flex-direction:column;gap:8px}
.albeyk-cat-panel:not(.open){max-height:0;opacity:0;overflow:hidden}