.bms-menu {
--bms-dark:       #0d0d18;
--bms-gold:       #ffd700;
--bms-text:       #1a1000;
--bms-text-soft:  rgba(30, 18, 0, 0.78);
--bms-text-faint: rgba(30, 18, 0, 0.62);
font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', -apple-system, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--bms-text);
max-width: 1180px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.bms-menu *,
.bms-menu *::before,
.bms-menu *::after { box-sizing: border-box; } .bms-empty {
text-align: center;
padding: 60px 20px;
color: #888;
font-style: italic;
background: rgba(0,0,0,0.04);
border-radius: 12px;
} .bms-menu .bms-tabs {
display: flex !important;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px;
margin: 0 0 18px;
background: rgba(13, 13, 24, 0.92);
border-radius: 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(255, 215, 0, 0.4) transparent;
}
.bms-menu .bms-tabs::-webkit-scrollbar { height: 6px; }
.bms-menu .bms-tabs::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.35);
border-radius: 3px;
}
.bms-menu .bms-tab {
flex: 0 0 auto;
background: rgba(255, 255, 255, 0.04) !important;
border: 1.5px solid rgba(255, 215, 0, 0.30) !important;
color: rgba(255, 240, 200, 0.92) !important;
font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif !important;
font-size: clamp(13px, 2vw, 16px);
font-weight: 700;
letter-spacing: 0.04em;
padding: 10px 20px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
line-height: 1;
text-transform: none;
text-shadow: none;
min-width: 0;
appearance: none;
-webkit-appearance: none;
}
.bms-menu .bms-tab:hover {
background: rgba(255, 215, 0, 0.10) !important;
color: #ffe680 !important;
border-color: rgba(255, 215, 0, 0.55) !important;
}
.bms-menu .bms-tab.is-active {
background: #ffd700 !important;
border-color: #e6c000 !important;
color: #1a1000 !important;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.45);
} .bms-cat {
position: relative;
overflow: hidden;
margin: 0 0 32px;
border-radius: 14px;
padding: 26px 22px 30px;
isolation: isolate;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.bms-cat-bg {
position: absolute;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} .bms-theme-yellow .bms-cat-bg { background-image: url(//www.bananasaxecabana.com/wp-content/plugins/bananas-menu-sync/assets/bg/beermenubg.jpg); } .bms-theme-black .bms-cat-bg { background-image: url(//www.bananasaxecabana.com/wp-content/plugins/bananas-menu-sync/assets/bg/cocktailmenubg.jpg); background-position: left center; } .bms-theme-white .bms-cat-bg { background-image: url(//www.bananasaxecabana.com/wp-content/plugins/bananas-menu-sync/assets/bg/whitemenubg.jpg); } .bms-cat-head {
margin: 0 0 16px;
padding: 0;
}
.bms-cat-name {
font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
font-size: clamp(22px, 4.5vw, 38px);
font-weight: 800;
letter-spacing: 0.04em;
margin: 0;
color: var(--bms-text);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
line-height: 1.2;
}
.bms-theme-black .bms-cat-name {
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
} .bms-items {
display: flex;
flex-direction: column;
}
.bms-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.bms-item:last-child { border-bottom: none; }
.bms-theme-black .bms-item { border-bottom-color: rgba(255, 255, 255, 0.15); }
.bms-item-body { flex: 1; min-width: 0; }
.bms-item-top {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.bms-item-name {
font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
font-size: clamp(16px, 2.6vw, 22px);
font-weight: 700;
color: var(--bms-text);
line-height: 1.2;
}
.bms-theme-black .bms-item-name { color: #fff; }
.bms-item-badges {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
}
.bms-badge {
font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
font-size: clamp(10px, 1.4vw, 12px);
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
white-space: nowrap;
}
.bms-badge-new       { background: #e63946; color: #fff; }
.bms-badge-sale      { background: #2ecc71; color: #000; }
.bms-badge-popular   { background: rgba(20, 12, 0, 0.78); color: #ffd700; border: 1px solid rgba(20, 12, 0, 0.3); }
.bms-badge-staffpick { background: rgba(0, 60, 120, 0.78); color: #fff;    border: 1px solid rgba(0, 60, 120, 0.3); }
.bms-theme-black .bms-badge-popular {
background: rgba(0, 0, 0, 0.55);
color: #ffd700;
border-color: rgba(255, 215, 0, 0.4);
}
.bms-theme-black .bms-badge-staffpick {
background: rgba(0, 60, 120, 0.78);
color: #fff;
}
.bms-item-desc {
font-size: clamp(14px, 2.3vw, 17px);
color: var(--bms-text-soft);
margin-bottom: 5px;
line-height: 1.4;
text-wrap: balance;
}
.bms-theme-black .bms-item-desc { color: rgba(255, 255, 255, 0.82); }
.bms-item-variants {
font-size: clamp(13px, 2.1vw, 16px);
color: rgba(80, 50, 0, 0.85);
font-style: italic;
margin-bottom: 4px;
}
.bms-theme-black .bms-item-variants { color: rgba(255, 215, 0, 0.9); }
.bms-sale-note {
font-size: clamp(11px, 1.7vw, 13px);
color: #2ecc71;
font-style: italic;
} .bms-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.bms-item-price {
font-family: 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
font-size: clamp(16px, 2.6vw, 22px);
font-weight: 700;
color: #1a1000;
white-space: nowrap;
background: #ffd700;
border: 1.5px solid #e6c000;
border-radius: 8px;
padding: 4px 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.bms-item-size {
font-size: clamp(12px, 1.9vw, 15px);
color: var(--bms-text-faint);
white-space: nowrap;
}
.bms-theme-black .bms-item-size { color: rgba(255, 255, 255, 0.68); }  @media (max-width: 540px) {
.bms-cat { padding: 18px 14px 22px; border-radius: 10px; margin-bottom: 22px; }
.bms-item { padding: 12px 4px; gap: 10px; }
.bms-item-price { padding: 3px 10px; }
} @media (max-width: 380px) {
.bms-item { flex-wrap: wrap; }
.bms-item-right { width: 100%; align-items: flex-start; }
} @media (min-width: 980px) {
.bms-cat { padding: 32px 30px 36px; }
}