.zerm-frontend{width:100%;max-width:none;margin:0;padding:0;font-size:var(--zerm-base,16px);font-family:var(--zerm-font,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif)}
.zerm-frontend, .zerm-frontend *{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
.zerm-section{margin:28px 0}
.zerm-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.zerm-head h2{margin:0;font-size:var(--zerm-heading,30px);letter-spacing:-.02em}

.zerm-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.zerm-tab{
  border:1px solid rgba(17,24,39,.12);background:#fff;border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:600
}
.zerm-tab.is-active{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 16px 40px rgba(99,102,241,.22)
}
.zerm-panel{display:none}
.zerm-panel.is-active{display:block}

.zerm-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width: 880px){.zerm-grid{grid-template-columns:1fr 1fr}}

.zerm-card{border:1px solid rgba(17,24,39,.08);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.zerm-img img{width:100%;height:220px;object-fit:contain;display:block}
.zerm-body{padding:14px 14px 16px}
.zerm-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.zerm-name{font-size:var(--zerm-item-name,18px);font-weight:600;letter-spacing:-.01em}
.zerm-price{font-size:var(--zerm-price,16px);font-weight:600;white-space:nowrap}

.zerm-badges{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.zerm-badge{
  font-size:var(--zerm-badge,12px);font-weight:600;border:1px solid rgba(17,24,39,.10);padding:6px 10px;border-radius:999px;background:#fbfbff
}

.zerm-desc{margin-top:10px;color:rgba(17,24,39,.72);line-height:1.55;font-size:var(--zerm-desc,14px)}
.zerm-origin{margin-top:10px;color:rgba(17,24,39,.72);font-weight:600}

.zerm-sub{margin-top:12px;border-top:1px dashed rgba(17,24,39,.18);padding-top:10px}
.zerm-subtitle{font-weight:600;margin-bottom:6px}
.zerm-line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;color:rgba(17,24,39,.86)}
.zerm-subhead{margin:12px 0 6px;font-size:16px;font-weight:600}

.zerm-empty{padding:12px;color:rgba(17,24,39,.62)}


/* v3.0 - readability + motion */
.zerm-line{border-top:1px solid rgba(17,24,39,.08)}
.zerm-line:first-child{border-top:none}
.zerm-tab{transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease}
.zerm-tab:hover{transform:translateY(-1px);box-shadow:0 18px 50px rgba(17,24,39,.12)}

/* Animated panel switching */
.zerm-panel{display:none;opacity:0;transform:translateY(6px);transition:opacity .22s ease, transform .22s ease}
.zerm-panel.is-active{display:block}
.zerm-panel.is-enter{opacity:1;transform:none}


/* v3.1 - drinks subtabs */
.zerm-subtabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.zerm-subtab{appearance:none;border:1px solid rgba(17,24,39,.10);background:rgba(255,255,255,.9);padding:8px 12px;border-radius:12px;cursor:pointer;font-weight:600;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease}
.zerm-subtab:hover{transform:translateY(-1px);box-shadow:0 18px 50px rgba(17,24,39,.12);border-color:rgba(99,102,241,.25)}
.zerm-subtab.is-active{background:linear-gradient(180deg,#eef2ff,#ffffff);border-color:rgba(99,102,241,.35)}
.zerm-subpanels{margin-top:0}
.zerm-subpanel{display:none;opacity:0;transform:translateY(6px);transition:opacity .22s ease, transform .22s ease}
.zerm-subpanel.is-active{display:block}
.zerm-subpanel.is-enter{opacity:1;transform:none}

.zerm-img{padding:10px;box-sizing:border-box}


/* v3.1.1 - drinks layout */
.zerm-drinks .zerm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 768px){
  .zerm-drinks .zerm-grid{grid-template-columns:1fr}
  .zerm-drinks .zerm-card{display:flex;align-items:stretch;gap:0}
  .zerm-drinks .zerm-img{flex:0 0 120px;padding:12px}
  .zerm-drinks .zerm-img img{height:100%;width:100%;object-fit:contain}
  .zerm-drinks .zerm-body{flex:1;min-width:0}
}


/* v3.3.2 - minimal frontend (layout only; no container design) */
.zerm-head,.zerm-tabs,.zerm-subtabs,.zerm-panels,.zerm-subpanels{margin:0;padding:0;background:none;box-shadow:none;border:none}
/* removed: card reset */
.zerm-body{padding:0}
.zerm-tab,.zerm-tab:hover,.zerm-subtab,.zerm-subtab:hover{background:none;box-shadow:none;border:1px solid rgba(0,0,0,.08);transform:none}
.zerm-grid{gap:16px}


/* v3.3.3 - panels/head reset */
.zerm-panels{background:none;border:none;border-radius:0;padding:0;box-shadow:nonemargin-top:20px}


/* v3.3.4 - restore card styling */
.zerm-card{
  border:1px solid rgba(17,24,39,.08);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(17,24,39,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.zerm-card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 80px rgba(17,24,39,.14);
  border-color:rgba(99,102,241,.35);
}
.zerm-body{padding:16px}



/* v3.3.6 - panels rule */
.zerm-panels{
  background:none;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  margin-top:20px;
}


/* v3.3.6 - rebuilt tabs */
.zerm-tabs, .zerm-subtabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
}

.zerm-tab, .zerm-subtab{
  appearance:none;
  cursor:pointer;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.75);
  color:inherit;
  font-weight:600;
  padding:9px 13px;
  border-radius:999px;
  line-height:1;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.zerm-tab:hover, .zerm-subtab:hover{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.22);
  transform:translateY(-1px);
}

.zerm-tab.is-active, .zerm-subtab.is-active{
  background:rgba(99,102,241,.12);
  border-color:rgba(99,102,241,.35);
}

.zerm-tab.is-active:hover, .zerm-subtab.is-active:hover{
  background:rgba(99,102,241,.14);
  border-color:rgba(99,102,241,.40);
  transform:translateY(-1px);
}


/* v3.3.7 - tabs tweak */
.zerm-tab, .zerm-subtab{box-shadow:none}
.zerm-tab.is-active, .zerm-subtab.is-active{background:rgba(99,102,241,.22);border-color:rgba(99,102,241,.45)}
.zerm-tab.is-active:hover, .zerm-subtab.is-active:hover{background:rgba(99,102,241,.26);border-color:rgba(99,102,241,.50)}


/* v3.3.8 - kill tab shadows + set active color */
.zerm-tab,
.zerm-tab:hover,
.zerm-tab.is-active,
.zerm-tab.is-active:hover,
.zerm-subtab,
.zerm-subtab:hover,
.zerm-subtab.is-active,
.zerm-subtab.is-active:hover{
  box-shadow:none !important;
  filter:none !important;
}

.zerm-tab.is-active,
.zerm-subtab.is-active{
  background:#243276 !important;
  border-color:rgba(36,50,118,.85) !important;
  color:#fff !important;
}

.zerm-tab.is-active:hover,
.zerm-subtab.is-active:hover{
  background:#1f2a63 !important;
  border-color:rgba(36,50,118,1) !important;
  color:#fff !important;
}


/* 3.4.1: drinks mobile fit */
@media (max-width: 879px){
  .zerm-type-drinks{--zerm-item-name:12px;--zerm-price:12px;--zerm-desc:11px;--zerm-badge:10px}
  .zerm-type-drinks .zerm-grid{grid-template-columns:1fr 1fr;gap:10px}
  .zerm-type-drinks .zerm-body{padding:16px 16px 18px}
  .zerm-type-drinks .zerm-img img{height:120px}
  .zerm-type-drinks .zerm-price-from{display:none}
  .zerm-type-drinks .zerm-desc{line-height:1.25}
  .zerm-type-drinks .zerm-title{line-height:1.15}
}


.zerm-subtabs{margin-bottom:20px !important}